:root {
    --bg: #f4f7f6;
    --surface: #ffffff;
    --surface-2: #edf5f1;
    --ink: #17212b;
    --muted: #65727e;
    --line: #d9e2dd;
    --border: #d9e2dd;
    --primary: #14a38b;
    --primary-dark: #0d7d6c;
    --coral: #ff6b4a;
    --warning: #f5b94b;
    --good: #19a974;
    --bad: #df4c43;
    --shadow: 0 16px 38px rgba(23, 33, 43, 0.08);
    --glass: rgba(255, 255, 255, 0.72);
    --glass-strong: rgba(255, 255, 255, 0.88);
    --glass-border: rgba(255, 255, 255, 0.58);
    --glass-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
    --radius: 8px;
    --mobile-bottom-nav-height: 0px;
    --mobile-fab-size: 56px;
    --mobile-fab-gap: 16px;
    --mobile-fab-z: 160;
    --ui-body-font: "Manrope", "Trebuchet MS", sans-serif;
    --ui-heading-font: "Plus Jakarta Sans", "Manrope", sans-serif;
    --ui-page-title-size: 1.25rem;
    --ui-section-title-size: 1rem;
    --ui-widget-title-size: 1rem;
    --ui-widget-title-line-height: 1.25;
    --ui-screen-gap: 1rem;
    --ui-widget-gap: 1rem;
    --ui-menu-title-size: 0.875rem;
    --ui-secondary-text-size: 0.72rem;
    --ui-caption-size: 0.6875rem;
}

/* 2026 product polish: challenge reset choices, compact setup and mobile team panels. */
.challenge-reset-options{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}.challenge-reset-options fieldset{display:grid;gap:.55rem;padding:.8rem;border:1px solid var(--border);border-radius:16px}.challenge-reset-options label{display:flex;gap:.6rem;align-items:flex-start;padding:.65rem;border-radius:12px;background:var(--surface-soft,rgb(148 163 184/.1))}.challenge-reset-options span,.challenge-reset-options strong,.challenge-reset-options small{display:block}.challenge-reset-options small{margin-top:.2rem;color:var(--muted)}.settings-tracked-metrics .settings-group-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}.settings-custom-metric-modal .app-modal-card{max-width:620px}.onboarding-goals-more{grid-column:1/-1;border:1px solid var(--border);border-radius:18px;background:var(--surface-soft,rgb(148 163 184/.06))}.onboarding-goals-more>summary{display:flex;justify-content:space-between;gap:1rem;padding:1rem;cursor:pointer;list-style:none}.onboarding-goals-more>summary span,.onboarding-goals-more>summary strong,.onboarding-goals-more>summary small{display:block}.onboarding-goals-more>summary small{color:var(--muted)}.onboarding-goals-more[open]>summary b{transform:rotate(180deg)}.onboarding-goals-more>.onboarding-goal-option{margin:0 .75rem .75rem}.onboarding-goal-options>.onboarding-goal-option:not(.onboarding-multi-goals){border-width:2px}.team-widget-leaderboard .panel-head,.team-widget-challenges .panel-head{gap:.6rem}.team-widget-leaderboard.is-collapsed,.team-widget-challenges.is-collapsed{padding-bottom:.7rem}
@media(max-width:720px){.challenge-reset-options{grid-template-columns:1fr}.settings-tracked-metrics .settings-group-head{grid-template-columns:auto minmax(0,1fr)}.settings-tracked-metrics .settings-group-head .btn{grid-column:1/-1;width:100%}.mobile-today-overview{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:center;padding:1rem;border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent,#6d5dfc) 12%,var(--panel)),var(--panel))}.mobile-today-identity h1{margin:.15rem 0;font-size:clamp(1.35rem,7vw,1.9rem);line-height:1.05}.mobile-today-score{width:min(34vw,130px);min-height:82px;padding:.7rem;border-radius:16px;text-align:center}.mobile-today-score.is-empty strong{font-size:.78rem;line-height:1.15}body[data-page=team] .team-widget-leaderboard,body[data-page=team] .team-widget-challenges{padding:.75rem;border-radius:18px}body[data-page=team] .team-widget-leaderboard .panel-head,body[data-page=team] .team-widget-challenges .panel-head{margin-bottom:.55rem}body[data-page=team] .team-widget-leaderboard .panel-head h2,body[data-page=team] .team-widget-challenges .panel-head h2{font-size:1.05rem}body[data-page=team] .team-widget-leaderboard .leaderboard-row{min-height:48px;padding:.45rem .35rem}body[data-page=team] .team-widget-leaderboard .member-avatar,body[data-page=team] .team-widget-challenges .team-goal-list-icon,body[data-page=team] .team-widget-challenges .team-goal-modal-icon{width:36px!important;height:36px!important;min-width:36px!important}body[data-page=team] .team-widget-challenges .team-goal-mobile-preview{grid-template-columns:36px minmax(0,1fr) auto;gap:.55rem;padding:.65rem .35rem}body[data-page=team] .team-widget-challenges .team-goal-mobile-preview-title{font-size:.92rem}}
/* Compact visual primitives shared by the principal application surfaces. */
:root {
    --ui-panel-padding: clamp(0.72rem, 1.4vw, 1rem);
    --ui-panel-radius: 18px;
    --ui-row-padding: 0.62rem 0.7rem;
    --ui-row-min-height: 52px;
    --ui-control-height: 44px;
    --ui-soft-border: color-mix(in srgb, var(--ink) 10%, transparent);
    --ui-soft-shadow: 0 9px 26px rgba(15, 23, 42, 0.07);
    --ui-glass-panel: color-mix(in srgb, var(--surface) 91%, transparent);
}

.compact-panel,
.panel.compact-panel,
.hero-panel.compact-panel {
    min-width: 0;
    padding: var(--ui-panel-padding);
    border-radius: var(--ui-panel-radius);
}

.glass-panel {
    border: 1px solid var(--ui-soft-border);
    background-color: var(--ui-glass-panel);
    box-shadow: var(--ui-soft-shadow);
    backdrop-filter: blur(12px) saturate(112%);
    -webkit-backdrop-filter: blur(12px) saturate(112%);
}

.compact-widget-header,
.compact-panel > :is(.panel-head, .profile-home-card-head) {
    min-width: 0;
    gap: 0.55rem;
    margin-bottom: 0.58rem;
}

.dashboard-disclosure-icon {
    display: grid;
    width: 38px;
    min-width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
}

.dashboard-disclosure-icon svg {
    width: 20px;
    height: 20px;
}

.compact-widget-header > *,
.compact-panel > :is(.panel-head, .profile-home-card-head) > * {
    min-width: 0;
}

.compact-list-item {
    min-width: 0;
    min-height: var(--ui-row-min-height);
    padding: var(--ui-row-padding);
    border: 1px solid var(--ui-soft-border);
    border-radius: 14px;
}

.compact-stat {
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 58px;
    padding: 0.52rem 0.58rem;
}

.compact-tabs {
    min-height: var(--ui-control-height);
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--ui-soft-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
}

.compact-progress-panel .goal-progress {
    min-width: 0;
    overflow: hidden;
}

.dashboard-achievement-progress-row,
.quest-item,
.duel-card[data-state] {
    position: relative;
    overflow: hidden;
}

.duel-card[data-state]::before {
    content: "";
    position: absolute;
    inset-block: 9px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--state-accent, var(--muted));
}

.duel-card.is-active {
    --state-accent: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 28%, var(--ui-soft-border));
}

.duel-card.is-pending {
    --state-accent: #d97706;
}

.duel-card.is-done {
    --state-accent: #16a34a;
}

.dashboard-achievement-progress-row:focus-visible,
.quest-item:focus-visible,
.duel-card a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 52%, transparent);
    outline-offset: 2px;
}

.profile-hero :is(h1, .muted),
.profile-home-card :is(strong, small, p),
.profile-data-overview :is(strong, small, p) {
    overflow-wrap: anywhere;
}

.gallery-empty.compact-panel {
    display: grid;
    justify-items: center;
    gap: 0.42rem;
    max-width: 520px;
    margin-inline: auto;
    padding-block: clamp(1rem, 4vw, 1.5rem);
    text-align: center;
}

.gallery-empty.compact-panel .empty-state-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: 15px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 11%, transparent);
}

.gallery-empty.compact-panel .empty-state-icon svg {
    width: 23px;
    height: 23px;
}

body[data-theme="dark"] .glass-panel,
body.theme-active-dark .glass-panel {
    --ui-glass-panel: color-mix(in srgb, var(--dark-ui-surface, var(--surface)) 91%, transparent);
    --ui-soft-border: color-mix(in srgb, #cbd5e1 16%, transparent);
    --ui-soft-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-panel {
        background: var(--surface);
    }
}

@media (max-width: 700px) {
    :root {
        --ui-panel-padding: 0.68rem;
        --ui-panel-radius: 16px;
        --ui-row-padding: 0.55rem 0.6rem;
        --ui-row-min-height: 48px;
        --ui-soft-shadow: 0 6px 18px rgba(15, 23, 42, 0.055);
    }

    .glass-panel {
        backdrop-filter: blur(8px) saturate(108%);
        -webkit-backdrop-filter: blur(8px) saturate(108%);
    }

}

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

/* Telegram delivery controls + notification-center finishing pass. These rules
   are deliberately additive so the broader responsive redesign stays intact. */
.notifications-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.notifications-settings-link {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.notifications-settings-link:hover,
.notifications-settings-link:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.notifications-settings-link svg {
    width: 19px;
    height: 19px;
}

.notifications-empty-state {
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    min-height: 260px;
    padding: clamp(1.5rem, 5vw, 3.4rem) 1rem;
    border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--line));
    border-radius: 20px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 48%),
        color-mix(in srgb, var(--surface) 95%, transparent);
}

.notifications-empty-state > span:first-child {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 0.25rem;
    border-radius: 18px;
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 13%, var(--surface));
}

.notifications-empty-state > span:first-child svg {
    width: 27px;
    height: 27px;
}

.notifications-empty-state > strong {
    font-size: 1.05rem;
}

.notifications-empty-state > p {
    max-width: 440px;
    margin: 0;
}

.notifications-empty-state .inline-actions {
    justify-content: center;
    margin-top: 0.45rem;
}

.telegram-delivery-summary {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) minmax(120px, 0.8fr) minmax(180px, 1.4fr);
    gap: 0.55rem;
    padding: 0.7rem;
    border: 1px solid color-mix(in srgb, #229ed9 24%, var(--line));
    border-radius: 18px;
    background:
        linear-gradient(135deg, color-mix(in srgb, #229ed9 11%, var(--surface)), var(--surface) 68%);
}

.telegram-delivery-summary > span {
    display: grid;
    align-content: center;
    min-height: 64px;
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 75%, transparent);
}

.telegram-delivery-summary small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 750;
}

.telegram-delivery-summary strong {
    margin-top: 0.12rem;
    font-size: 1.05rem;
}

.telegram-delivery-state {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    color: #087f5b;
    font-weight: 850;
}

.telegram-delivery-state > span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #10b981;
    box-shadow: 0 0 0 5px color-mix(in srgb, #10b981 16%, transparent);
}

.telegram-manage-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, #229ed9 28%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, #229ed9 7%, var(--surface));
}

.telegram-manage-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #087aa9;
    background: color-mix(in srgb, #229ed9 15%, var(--surface));
}

.telegram-manage-icon svg {
    width: 21px;
    height: 21px;
}

.telegram-manage-card > span:nth-child(2) {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.telegram-manage-card small {
    color: var(--muted);
    line-height: 1.4;
}

@media (max-width: 620px) {
    .notifications-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .notifications-empty-state {
        min-height: 230px;
        padding-inline: 0.75rem;
    }

    .notifications-empty-state .inline-actions,
    .notifications-empty-state .btn {
        width: 100%;
    }

    .telegram-delivery-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .telegram-delivery-state {
        grid-column: 1 / -1;
        min-height: 52px !important;
    }

    .telegram-manage-card {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .telegram-manage-card .btn {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 46px;
    }
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body[data-penalties-enabled="0"] .penalties-only {
    display: none !important;
}

html {
    min-height: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--ink);
    font-family: var(--ui-body-font);
    background:
        linear-gradient(135deg, rgba(20, 163, 139, 0.12), transparent 34%),
        linear-gradient(315deg, rgba(255, 107, 74, 0.1), transparent 30%),
        repeating-linear-gradient(90deg, rgba(23, 33, 43, 0.025) 0 1px, transparent 1px 92px),
        var(--bg);
}

body.login-body {
    background:
        radial-gradient(circle at top left, rgba(20, 163, 139, 0.26), transparent 46%),
        linear-gradient(140deg, rgba(12, 20, 29, 0.95), rgba(15, 32, 39, 0.82)),
        var(--login-bg-image, none) center / cover no-repeat fixed;
}

body.login-body.login-body-has-bg {
    background:
        linear-gradient(130deg, rgba(10, 17, 24, 0.74), rgba(12, 24, 32, 0.72)),
        var(--login-bg-image, none) center / cover no-repeat fixed;
}

body.login-body .container {
    width: min(1160px, calc(100vw - 1.4rem));
    margin-top: 0.7rem;
    margin-bottom: 1.25rem;
}

h1,
h2,
h3,
strong,
.brand {
    font-family: var(--ui-heading-font);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0.4rem;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1;
}

h2 {
    margin-bottom: 0.8rem;
    font-size: 1.08rem;
}

a {
    color: inherit;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container {
    width: min(1180px, calc(100vw - 1.5rem));
    margin: 0.75rem auto 6rem;
}

.container-with-nav {
    margin-top: 5.9rem;
}

.topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem max(0.85rem, calc((100vw - 1180px) / 2));
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
}

.brand > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
}

.brand-avatar,
.profile-avatar,
.settings-avatar-preview {
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    font-weight: 900;
    line-height: 1;
}

.brand-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid rgba(20, 163, 139, 0.28);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(20, 163, 139, 0.18), rgba(59, 130, 246, 0.12)),
        #fff;
    box-shadow: 0 8px 20px rgba(22, 35, 43, 0.12);
}

.brand-avatar img,
.profile-avatar img,
.settings-avatar-preview img,
img.brand-avatar,
img.profile-avatar,
img.settings-avatar-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

img.brand-avatar,
img.profile-avatar,
img.settings-avatar-preview {
    display: block;
}

.brand-mark.large {
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.nav-links {
    display: none;
    align-items: center;
    gap: 0.25rem;
}

.nav-links a,
.bottom-nav a {
    text-decoration: none;
}

.nav-links a {
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
}

.nav-links a.active,
.nav-links a:hover {
    color: var(--ink);
    background: var(--surface-2);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    position: relative;
}

.topbar-context {
    position: relative;
}

.topbar-context summary {
    list-style: none;
}

.topbar-context summary::-webkit-details-marker {
    display: none;
}

.topbar-context-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.55rem);
    z-index: 180;
    display: grid;
    gap: 0.75rem;
    width: min(420px, calc(100vw - 1.5rem));
    padding: 0.9rem;
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.team-layout-editor {
    display: grid;
    gap: 0.55rem;
    padding-top: 0.72rem;
    border-top: 1px solid var(--line);
}

.team-layout-editor-head {
    display: grid;
    gap: 0.1rem;
}

.team-layout-editor-head small {
    color: var(--muted);
    font-size: 0.78rem;
}

.team-layout-editor-list {
    display: grid;
    gap: 0.35rem;
}

.team-layout-editor-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.58rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfc;
    cursor: grab;
    font-size: 0.86rem;
    font-weight: 750;
}

.team-layout-editor-item.is-dragging {
    opacity: 0.52;
}

.team-layout-drag-handle {
    color: var(--muted);
    font-weight: 900;
    letter-spacing: -0.08em;
}

.team-layout-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

.inline-context-sub {
    border-top: 1px solid var(--line);
    padding-top: 0.7rem;
}

.inline-context-sub summary {
    list-style: none;
}

.inline-context-sub summary::-webkit-details-marker {
    display: none;
}

.btn-topbar {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 40px;
    padding: 0.48rem 0.74rem;
    border-radius: 999px;
    border-color: transparent;
    background: rgba(20, 163, 139, 0.1);
    color: var(--primary-dark);
    box-shadow: none;
}

.btn-topbar::after {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
}

.add-menu,
.user-menu {
    position: relative;
}

.add-menu summary,
.user-menu summary {
    list-style: none;
}

.add-menu summary::-webkit-details-marker,
.user-menu summary::-webkit-details-marker {
    display: none;
}

.add-menu-trigger {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 999px;
    font-size: 1.2rem;
    line-height: 1;
}

.topbar-add-menu .add-menu-trigger {
    display: inline-grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 999px;
    padding: 0;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
}

.topbar-add-menu .add-menu-trigger:hover,
.topbar-add-menu .add-menu-trigger:focus-visible {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.floating-log .add-menu-trigger {
    display: inline-grid;
    place-items: center;
    width: var(--mobile-fab-size);
    min-width: var(--mobile-fab-size);
    height: var(--mobile-fab-size);
    min-height: var(--mobile-fab-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 14px 28px rgba(23, 33, 43, 0.28);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.floating-log .add-menu-trigger:hover,
.floating-log .add-menu-trigger:focus-visible,
.floating-log.is-open .add-menu-trigger {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(23, 33, 43, 0.3);
}

.add-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 190;
    display: grid;
    gap: 0.45rem;
    width: 220px;
    padding: 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow);
}

.floating-add-panel {
    position: fixed;
    right: var(--mobile-fab-gap);
    left: auto;
    bottom: calc(
        env(safe-area-inset-bottom) +
        var(--mobile-fab-gap) +
        var(--mobile-bottom-nav-height) +
        var(--mobile-fab-size) +
        8px
    );
    top: auto;
    z-index: calc(var(--mobile-fab-z) + 1);
    width: min(240px, calc(100vw - 32px));
    max-width: 100vw;
    max-height: 80vh;
    overflow: auto;
    overscroll-behavior: contain;
}

.user-menu-trigger {
    display: inline-grid;
    place-items: center;
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-weight: 800;
    cursor: pointer;
    overflow: hidden;
}

.user-menu-unread-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #fff;
}

.user-menu-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 190;
    display: grid;
    width: min(256px, calc(100vw - 20px));
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.user-menu-panel a {
    padding: 0.7rem 0.8rem;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
}

.user-menu-panel a:last-child {
    border-bottom: 0;
}

.user-menu-panel a:hover {
    background: var(--surface-2);
}

.user-menu-panel .user-menu-theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    padding: 0.7rem 0.8rem;
    font: inherit;
    font-weight: 700;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.user-menu-panel .user-menu-theme-toggle:hover {
    background: var(--surface-2);
}

.user-menu-view { display: grid; min-width: 0; gap: 2px; }
.user-menu-view[hidden] { display: none !important; }
.user-menu-panel .user-menu-link,
.user-menu-nav-button {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.52rem;
    width: 100%;
    min-height: 40px;
    padding: 0.48rem 0.56rem;
    border: 0;
    border-radius: 11px;
    color: inherit;
    background: transparent;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.user-menu-item-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.user-menu-item-icon svg { width: 16px; height: 16px; }
.user-menu-panel .user-menu-link > span:nth-child(2),
.user-menu-nav-button > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-panel .user-menu-logout { margin-top: 3px; color: #b42318; border-top: 1px solid var(--line); }
.user-menu-panel .user-menu-logout .user-menu-item-icon { color: #b42318; background: color-mix(in srgb, #ef4444 10%, transparent); }
.user-menu-nav-button:hover,
.user-menu-nav-button:focus-visible { background: var(--surface-2); }
.user-menu-nav-button > span:last-child { color: var(--muted); font-size: 1.25rem; line-height: 1; }
.user-menu-subhead {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 0.35rem;
    min-height: 46px;
    padding: 0.1rem 0.15rem 0.35rem;
    border-bottom: 1px solid var(--line);
}
.user-menu-subhead strong { min-width: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; }
.user-menu-subhead button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: 1.05rem;
    cursor: pointer;
}
.user-menu-subhead button:hover,
.user-menu-subhead button:focus-visible { color: var(--ink); background: var(--surface-2); }
.user-menu-subhead:has(> .menu-destination-back) { grid-template-columns: auto minmax(0, 1fr) 38px; }
.user-menu-subhead button.menu-destination-back {
    display: inline-flex;
    width: auto;
    max-width: 92px;
    min-width: 38px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding-inline: 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
}
.user-menu-subhead button.menu-destination-back > strong {
    overflow: hidden;
    font-size: 0.64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-toggle-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.theme-toggle-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle-icon-moon {
    display: none;
}

body.theme-active-dark .theme-toggle-icon-sun {
    display: none;
}

body.theme-active-dark .theme-toggle-icon-moon {
    display: inline-flex;
}

.locale-form select {
    min-width: 112px;
    padding: 0.5rem 0.65rem;
}

.auth-locale {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.auth-locale select {
    min-width: 104px;
    padding: 0.45rem 0.6rem;
    border-radius: 999px;
}

.spa-shell .settings-list {
    display: grid;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
}

.settings-list.hidden {
    display: none;
}

.settings-panel {
    display: none;
}

.settings-panel.active {
    display: block;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
    background: #fff;
}

.settings-row:last-child {
    border-bottom: 0;
}

.settings-row:hover,
.settings-row:focus-visible {
    background: var(--surface-2);
}

.settings-row span {
    display: grid;
    gap: 0.1rem;
}

.settings-row small {
    font-size: 0.78rem;
}

.settings-chevron {
    color: var(--muted);
    font-size: 1.3rem;
    line-height: 1;
}

.compact-list {
    margin-bottom: 0.85rem;
}

.workout-repeater {
    display: grid;
    gap: 0.6rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fbfdfc;
}

.entry-data-panel {
    overflow: visible;
}

.entry-data-head {
    align-items: start;
    gap: 0.8rem;
}

.entry-data-form {
    gap: 0.85rem;
}

.entry-form-section {
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fbfdfc;
}

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

.entry-workout-toggle {
    min-height: 42px;
    margin: 0;
    padding: 0.58rem 0.72rem;
    border: 1px solid rgba(20, 163, 139, 0.24);
    border-radius: 999px;
    background: #fff;
    font-weight: 850;
}

.workout-panel {
    display: grid;
    gap: 0.55rem;
}

.workout-panel > p {
    margin: 0;
}

.workout-head {
    align-items: center;
    margin: 0;
}

.workout-head h3 {
    margin: 0;
    font-size: 0.95rem;
}

.workout-head p {
    margin: 0.12rem 0 0;
}

.workout-rows {
    display: grid;
    gap: 0.55rem;
}

.workout-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: end;
    padding: 0.6rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.workout-row .btn {
    min-height: 42px;
}

.workout-custom-field {
    min-width: 0;
}

.workout-subfields {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.55rem;
}

.workout-remove-btn {
    justify-self: end;
}

.admin-workout-fields {
    display: grid;
    gap: 0.65rem;
}

.workout-field-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end;
}

.bottom-nav {
    position: fixed;
    z-index: 120;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.floating-log {
    position: fixed;
    right: var(--mobile-fab-gap);
    bottom: calc(env(safe-area-inset-bottom) + var(--mobile-fab-gap) + var(--mobile-bottom-nav-height));
    z-index: var(--mobile-fab-z);
    display: inline-grid;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.floating-log.nav-hidden {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
}

.bottom-nav a {
    display: grid;
    place-items: center;
    gap: 0.12rem;
    min-width: 0;
    color: var(--muted);
    font-weight: 800;
    line-height: 1;
}

.nav-icon {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border-radius: 999px;
    color: currentColor;
}

.nav-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

.stack,
.stack-lg {
    display: grid;
}

.stack {
    gap: 0.9rem;
}

.stack-lg {
    gap: 1rem;
}

.screen {
    /* `both` retains the final keyframe forever, and a retained transform - even the
       identity - makes .screen a containing block for every position:fixed descendant.
       That is why modals inside a page were being centred against the page instead of
       the viewport (visible as a card hanging off-screen in landscape). `backwards`
       animates identically and drops the transform once the animation ends. */
    animation: screenIn 0.22s ease backwards;
}

@keyframes screenIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-panel,
.panel,
.motivation-band,
.metric-card,
.user-edit-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
}

.hero-panel {
    display: grid;
    gap: 1rem;
    padding: 1.05rem;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(20, 163, 139, 0.16), transparent 62%),
        linear-gradient(315deg, rgba(255, 107, 74, 0.12), transparent 58%),
        var(--surface);
}

.hero-panel .muted {
    max-width: 64ch;
}

/* Page heroes introduce the screen; they should not dominate it. Keep entity
   names prominent while allowing the useful cards below to enter the first
   desktop viewport. Mobile has its own compact hierarchy rules later. */
.hero-panel h1 {
    margin-bottom: 0.25rem;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.08;
}

.panel {
    padding: 1rem;
    min-width: 0;
}

.section-heading {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.section-heading h2,
.section-heading p {
    margin: 0;
}

.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.panel-head-help {
    align-items: center;
}

.metric-help-popover {
    position: relative;
    display: inline-block;
}

.metric-help-popover > summary {
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: var(--primary-dark);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.metric-help-popover > summary::-webkit-details-marker {
    display: none;
}

.metric-help-popover-content {
    position: absolute;
    right: 0;
    top: 1.9rem;
    z-index: 30;
    width: min(320px, 78vw);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    padding: 0.7rem;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.35;
}

.eyebrow {
    margin-bottom: 0.35rem;
    color: var(--primary-dark);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Brighten the accent eyebrow on dark surfaces (primary-dark is too dim there). */
body[data-theme="dark"] .eyebrow,
body.theme-active-dark .eyebrow {
    color: #4fd6bd;
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .eyebrow {
        color: #4fd6bd;
    }
}

.muted {
    color: var(--muted);
}

.small {
    font-size: 0.78rem;
}

.motivation-band {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    background: var(--ink);
    color: #fff;
}

.motivation-band span {
    color: #9fe4d6;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.motivation-band strong {
    font-size: 1.04rem;
    line-height: 1.35;
}

.metric-grid,
.grid-two,
.grid-inline,
.quick-stats {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.dashboard-layout {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
    grid-template-columns: 1fr;
    grid-auto-flow: row dense;
}

.dashboard-layout > * {
    min-width: 0;
}

.dashboard-span-full {
    grid-column: 1 / -1;
}

.dashboard-quick-actions-grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-quick-action {
    min-height: 48px;
    text-align: center;
}

.dashboard-penalty-compact {
    display: grid;
    gap: 0.75rem;
}

.dashboard-penalty-compact-grid {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-penalty-compact-grid > span,
.penalties-history-list > span {
    display: grid;
    gap: 0.18rem;
    padding: 0.58rem 0.62rem;
    border: 1px solid rgba(217, 226, 221, 0.82);
    border-radius: 10px;
    background: #fbfdfc;
}

.dashboard-penalty-compact-grid small,
.penalties-history-list small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-penalty-compact-grid strong {
    font-size: 1.15rem;
}

.dashboard-analytics-cta,
.analytics-section,
.profile-data-overview {
    display: grid;
    gap: 0.85rem;
}

.analytics-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.analytics-controls {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    align-items: end;
}

.analytics-nav-links {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    grid-column: 1 / -1;
}

.analytics-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.analytics-section-title h2,
.analytics-chart-card h3 {
    margin: 0;
}

.analytics-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr;
}

/* Summary stat tiles have no progress ring, so override the metric-card
   two-column grid and give the grid a proper mobile-first layout.
   Selectors are scoped to the grid so they win over .metric-card
   regardless of source order. */
.analytics-stat-grid {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analytics-stat-grid .analytics-stat-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.15rem;
    min-height: 0;
}

.analytics-stat-grid .analytics-stat-card strong {
    margin-top: 0.1rem;
    font-size: 1.25rem;
}

/* Integration admin panels (Notion, Telegram) */
.admin-notion-panel,
.admin-notion-mapping,
.admin-telegram-panel {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.admin-telegram-user-list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.admin-telegram-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.admin-notion-mapping {
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.notion-map-grid {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.notion-map-row {
    display: grid;
    gap: 0.2rem;
    font-size: 0.82rem;
}

.notion-map-row input {
    width: 100%;
}

.analytics-chart-card {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.profile-data-grid {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.profile-data-card {
    display: grid;
    gap: 0.18rem;
    padding: 0.78rem;
    border: 1px solid rgba(217, 226, 221, 0.86);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #f7fbf9);
}

.profile-data-card span,
.profile-data-card small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.profile-data-card strong {
    color: var(--ink);
    font-size: 1.15rem;
}

.profile-challenge-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.profile-challenge-switcher h2 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: 0;
}

.profile-challenge-form {
    justify-content: flex-end;
    min-width: min(100%, 360px);
}

.profile-challenge-form label {
    min-width: min(100%, 320px);
}

.penalties-history-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr;
}

.penalties-history-card {
    display: grid;
    gap: 0.65rem;
}

.penalties-history-list {
    display: grid;
    gap: 0.48rem;
}

.penalties-history-list strong {
    font-size: 1rem;
}

/* The shared .dashboard-kpis .metric-card grid reserves a 44px icon column
   even when these two pages render icon-less cards, leaving the value
   column too narrow for currency totals like "€2400.00". Combined with the
   shared mobile rule's `overflow-wrap: anywhere`, that forced a break
   mid-digit ("€240" / "0.00"). Scope a fix to just these two pages instead
   of touching the shared dashboard KPI card used elsewhere. */
.penalties-page .metric-card,
.strikes-detail-page .metric-card {
    grid-template-columns: minmax(0, 1fr);
}

.penalties-page .metric-card strong,
.strikes-detail-page .metric-card strong {
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
    font-size: clamp(1rem, 6vw, 1.45rem);
}

.dashboard-week-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.dashboard-panel-action {
    justify-self: end;
    white-space: nowrap;
}

.dashboard-layout-editor {
    margin-top: 0.2rem;
}

.dashboard-edit-layout-trigger {
    justify-content: center;
    min-height: 38px;
    border-style: dashed;
}

.dashboard-layout-toggle {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    min-width: 0;
    margin: 0;
    font-weight: 800;
}

.dashboard-layout-toggle > span {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-layout-toggle > span strong {
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-layout-toggle > span small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-segmented-control {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.65rem;
    padding: 0.22rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fbfdfc;
}

.compact-segmented-control .btn {
    min-height: 34px;
    padding: 0.34rem 0.68rem;
    border-radius: 999px;
    border-color: transparent;
    background: transparent;
}

.dashboard-mobile-card-list {
    display: none;
}

.dashboard-mobile-card {
    display: grid;
    gap: 0.68rem;
    padding: 0.78rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(22, 35, 43, 0.07);
}

.dashboard-mobile-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-mobile-card-head strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dashboard-mobile-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
}

.dashboard-mobile-metrics > span {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    padding: 0.48rem 0.52rem;
    border: 1px solid rgba(217, 226, 221, 0.82);
    border-radius: 8px;
    background: #fbfdfc;
}

.dashboard-mobile-metrics small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-mobile-metrics strong {
    font-size: 0.9rem;
    line-height: 1.2;
}

.dashboard-mobile-metric-wide {
    grid-column: 1 / -1;
}

.dashboard-mobile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.36rem;
    flex-wrap: wrap;
}

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

.metric-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-height: 116px;
    padding: 0.85rem;
}

.metric-card span {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.metric-card strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.45rem;
    line-height: 1.05;
}

.metric-card p {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.25;
}

.metric-card-calorie-goal .progress-ring span {
    width: 52px;
    font-size: 0.74rem;
}

.progress-ring {
    --value: 0;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, var(--surface) 0 56%, transparent 57%),
        conic-gradient(var(--primary) calc(var(--value) * 1%), #e4ece8 0);
}

.progress-ring span {
    width: 48px;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
    text-transform: none;
}

label {
    display: grid;
    gap: 0.35rem;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 700;
}

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

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.68rem 0.72rem;
    background: #fff;
    color: var(--ink);
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(20, 163, 139, 0.14);
}

textarea {
    resize: vertical;
}

.control-strip,
.inline-form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dashboard-toolbar {
    padding: 0.75rem;
}

.dashboard-toolbar .control-strip {
    align-items: center;
    justify-content: flex-end;
}

.entry-date-inline {
    min-width: 170px;
}

.entry-datetime-inline {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.entry-time-inline {
    min-width: 150px;
}

.entries-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.entries-toggles .check {
    min-width: 0;
}

.conditional-reason[data-reason="missing"] {
    grid-column: 1 / -1;
}

.control-strip label,
.inline-form label {
    min-width: 160px;
}

.toggle-row {
    display: grid;
    gap: 0.55rem;
}

.check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.check input,
.spreadsheet input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.standalone-check {
    width: fit-content;
}

.pill-toggles .check {
    cursor: pointer;
}

/* Structural/base .btn layout. Visual skin (radius, background, shadow, blur) is defined by the Liquid Glass pass below. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid transparent;
    padding: 0.72rem 0.95rem;
    color: var(--ink);
    cursor: pointer;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

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

.btn:disabled {
    cursor: wait;
    opacity: 0.6;
    transform: none;
}

.btn.btn-primary {
    color: #fff;
}

.btn.btn-secondary {
    color: #fff;
}

.btn.small {
    min-width: 78px;
    padding: 0.48rem 0.65rem;
    font-size: 0.82rem;
}

.btn-block {
    width: 100%;
}

.flash {
    padding: 0.8rem 0.9rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.flash-success {
    border-color: rgba(25, 169, 116, 0.35);
    background: #edf9f3;
}

.flash-error {
    border-color: rgba(223, 76, 67, 0.35);
    background: #fff0ef;
}

.flash-info {
    border-color: rgba(20, 163, 139, 0.25);
    background: #eefaf7;
}

.table-wrap {
    position: relative;
    overflow: auto;
    max-width: 100%;
    margin-top: 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 760px;
}

.table th,
.table td {
    border-bottom: 1px solid var(--line);
    text-align: left;
    padding: 0.72rem;
    vertical-align: middle;
}

.table th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: var(--muted);
    background: #f8fbfa;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* Footer/total rows are not column headers: they must not stick to the top of
   the scroll container (that made a colspan label cell paint over the value
   cell next to it, hiding the total) and should read as a summary row, not a
   muted uppercase header. */
.table tfoot th {
    position: static;
    color: var(--ink);
    background: var(--surface-2);
    font-size: 0.86rem;
    text-transform: none;
}

.table tr:last-child td {
    border-bottom: 0;
}

.table.compact td,
.table.compact th {
    padding: 0.58rem;
    font-size: 0.86rem;
}

.spreadsheet-wrap {
    box-shadow: inset -16px 0 20px -20px rgba(23, 33, 43, 0.35);
}

.spreadsheet {
    min-width: 1180px;
}

.spreadsheet input[type="text"],
.spreadsheet input[type="number"] {
    min-width: 104px;
    padding: 0.48rem 0.5rem;
}

.spreadsheet .sticky-col {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 128px;
    background: #fff;
    box-shadow: 8px 0 14px -16px rgba(23, 33, 43, 0.9);
}

.spreadsheet th.sticky-col {
    z-index: 4;
    background: #f8fbfa;
}

.date-cell {
    display: grid;
    gap: 0.18rem;
}

.inline-actions {
    margin-top: 0.9rem;
    display: flex;
    justify-content: flex-end;
}

.week-save-all-row {
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
}

.save-status {
    display: inline-block;
    margin-left: 0.4rem;
    min-width: 70px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.save-status.ok {
    color: var(--good);
}

.save-status.error {
    color: var(--bad);
}

.save-status.saving {
    color: var(--primary-dark);
}

.save-all-status {
    min-width: 180px;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.save-all-status.ok {
    color: var(--good);
}

.save-all-status.error {
    color: var(--bad);
}

.save-all-status.saving {
    color: var(--primary-dark);
}

.photo-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}

.photo-grid figure {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 8px 20px rgba(23, 33, 43, 0.08);
}

.photo-card-media {
    display: block;
    color: inherit;
    text-decoration: none;
}

.photo-grid img {
    display: block;
    width: 100%;
    height: 152px;
    object-fit: cover;
}

.photo-card-media .entries-calendar-empty {
    height: 152px;
}

.photo-grid figcaption {
    display: grid;
    gap: 0.24rem;
    padding: 0.62rem;
    font-size: 0.8rem;
    background: #fff;
}

.photo-nutrition-line {
    color: var(--primary-dark);
    font-weight: 700;
}

.proof-photo-panel {
    overflow: visible;
}

.proof-photo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: 1.05rem;
    align-items: stretch;
}

.proof-photo-form {
    gap: 0.95rem;
}

.proof-photo-main-card,
.proof-photo-side-card {
    min-width: 0;
    gap: 0.8rem;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(23, 33, 43, 0.06);
}

.proof-photo-main-card {
    background:
        linear-gradient(145deg, rgba(20, 163, 139, 0.07), rgba(20, 163, 139, 0.01) 45%),
        #fdfefe;
}

.proof-photo-side-card {
    background: #fff;
    display: grid;
    grid-template-rows: auto auto 1fr;
}

.photo-nutrition-tools {
    display: flex;
    justify-content: flex-start;
}

.photo-nutrition-panel {
    display: grid;
    gap: 0.55rem;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fbfa;
}

.photo-nutrition-advanced {
    margin-top: 0.2rem;
}

.proof-photo-meta {
    margin-bottom: 0.15rem;
}

.proof-photo-preview {
    min-width: 0;
    display: flex;
    height: 100%;
}

.proof-photo-upload-block {
    display: grid;
    gap: 0.4rem;
    border: 1px dashed rgba(20, 163, 139, 0.32);
    background: #f6fbf9;
    border-radius: 12px;
    padding: 0.8rem;
}

.proof-photo-upload-label {
    display: grid;
    gap: 0.45rem;
}

.proof-photo-upload-label > span {
    font-size: 0.86rem;
    font-weight: 700;
    color: #1f2b35;
}

.proof-photo-upload-label input[type="file"] {
    width: 100%;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    padding: 0.6rem 0.6rem;
}

.proof-photo-upload-label input[type="file"]:focus-visible {
    outline: 2px solid rgba(20, 163, 139, 0.22);
    outline-offset: 1px;
}

.proof-photo-upload-state {
    margin: 0;
    font-weight: 700;
}

.proof-photo-submit {
    min-height: 42px;
}

.proof-photo-preview img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    max-height: 420px;
    border-radius: 14px;
    border: 1px solid var(--line);
    object-fit: cover;
    background: #fff;
}

.proof-photo-server-hint {
    margin-top: 0.15rem;
}

.photo-placeholder {
    border: 1px dashed var(--border);
    border-radius: 14px;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--muted);
    min-height: 200px;
    background: #fbfdfc;
}

.photo-placeholder-content {
    display: grid;
    gap: 0.35rem;
    justify-items: center;
    max-width: 250px;
    padding: 1rem;
}

.photo-placeholder-content svg {
    width: 34px;
    height: 34px;
    fill: currentColor;
    opacity: 0.72;
}

.photo-placeholder-content p {
    margin: 0;
    font-weight: 700;
}

.photo-placeholder-content small {
    color: var(--muted);
}

.photo-placeholder-unsupported {
    border-style: dashed;
    background: #fffaf7;
}

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.chip-group > span {
    color: var(--muted);
    font-weight: 800;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.35rem 0.55rem;
    background: #fff;
    font-size: 0.84rem;
}

.chip input {
    width: auto;
    accent-color: var(--primary);
}

.chip input[type="number"] {
    width: 58px;
    min-height: 34px;
    padding: 0.35rem;
}

.user-edit-card {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
    box-shadow: none;
}

.auth-wrap {
    min-height: calc(100vh - 3rem);
    display: grid;
    place-items: center;
}

.auth-wrap-login {
    min-height: calc(100vh - 1.75rem);
    align-items: center;
}

.setup-wrap {
    padding: clamp(1rem, 4vw, 3rem);
    background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 34%),
        radial-gradient(circle at 92% 92%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 32%);
}

.setup-card {
    width: min(880px, 100%);
    margin: auto;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(27, 44, 40, .12);
}

.setup-card-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.setup-card-header .login-card-logo-mark {
    align-self: start;
}

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

.setup-card-heading > * {
    margin-inline: 0;
}

.setup-card-heading .auth-card-subtitle {
    max-width: 62ch;
}

.setup-form fieldset {
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.1rem;
    background: color-mix(in srgb, var(--surface) 90%, var(--primary) 10%);
}

.setup-form legend {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .65rem;
    font-weight: 800;
}

.setup-section-number {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: .75rem;
    line-height: 1;
}

.setup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.setup-grid label {
    display: grid;
    gap: .4rem;
}

.setup-grid label > span {
    color: var(--ink);
    font-size: .82rem;
    font-weight: 800;
}

.setup-grid input,
.setup-grid select {
    min-height: 48px;
    background: var(--surface);
}

.setup-grid small {
    color: var(--muted);
    line-height: 1.35;
}

.setup-date-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.setup-submit {
    padding-top: .15rem;
}

.setup-submit .btn {
    min-height: 52px;
    border-radius: 16px;
    font-weight: 900;
}

@media (max-width: 680px) {
    body[data-page="setup"] .container {
        width: 100%;
        padding-inline: 0;
    }

    .setup-wrap {
        min-height: 100dvh;
        place-items: start center;
        padding: .55rem .55rem calc(.75rem + env(safe-area-inset-bottom));
    }

    .setup-card {
        padding: .9rem;
        border-radius: 22px;
        box-shadow: 0 14px 40px rgba(27, 44, 40, .1);
    }

    .setup-card-header {
        gap: .75rem;
        margin-bottom: .85rem;
        padding: .15rem .15rem 0;
    }

    .setup-card-header .login-card-logo-mark {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: .9rem;
    }

    .setup-card-heading .eyebrow {
        margin-bottom: .15rem;
        font-size: .66rem;
    }

    .setup-card-heading .auth-card-title {
        font-size: clamp(1.3rem, 7vw, 1.65rem);
        line-height: 1.05;
    }

    .setup-card-heading .auth-card-subtitle {
        margin-top: .35rem;
        font-size: .8rem;
        line-height: 1.35;
    }

    .setup-form {
        gap: .75rem;
    }

    .setup-form fieldset {
        padding: .8rem;
        border-radius: 17px;
    }

    .setup-form legend {
        padding-inline: .35rem;
        font-size: .84rem;
    }

    .setup-grid {
        grid-template-columns: 1fr;
        gap: .7rem;
    }

    .setup-date-grid {
        gap: .55rem;
    }

    .setup-grid input,
    .setup-grid select {
        min-height: 46px;
        font-size: 16px;
    }

    .setup-submit {
        position: sticky;
        z-index: 4;
        bottom: 0;
        margin: 0 -.25rem -.25rem;
        padding: .45rem .25rem .25rem;
        background: linear-gradient(180deg, transparent, var(--surface) 28%);
    }

    .setup-submit .btn {
        min-height: 50px;
    }
}

@media (max-width: 390px) {
    .setup-date-grid {
        grid-template-columns: 1fr;
    }
}

.auth-shell {
    width: min(900px, 100%);
    display: grid;
    gap: 1rem;
}

.auth-shell-login {
    width: min(980px, 100%);
    gap: 1.2rem;
}

.auth-copy {
    padding: 0.5rem;
}

.auth-copy-login {
    display: grid;
    gap: 0.52rem;
    align-content: start;
    padding: 1.1rem 0.8rem;
    color: #e9f3f2;
}

body.login-body .auth-copy-login .eyebrow {
    color: rgba(202, 231, 226, 0.94);
}

.auth-copy-login h1 {
    margin: 0;
    color: #fff;
    line-height: 1.02;
}

body.login-body .auth-copy-login p:not(.eyebrow) {
    margin: 0;
    color: rgba(230, 242, 240, 0.95);
    max-width: 40ch;
}

.login-brand-image {
    width: 74px;
    height: 74px;
    border-radius: 16px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
}

.auth-copy p:not(.eyebrow) {
    max-width: 48ch;
    color: var(--muted);
    font-size: 1.08rem;
}

.auth-card {
    width: 100%;
}

.auth-card-login {
    border: 1px solid rgba(227, 239, 236, 0.74);
    box-shadow: 0 20px 38px rgba(6, 14, 24, 0.32);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
}

.remember-me-check {
    min-height: 40px;
    padding: 0.55rem 0.65rem;
}

.remember-me-check span {
    font-weight: 700;
}

.auth-footnote {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.facts {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
    list-style: none;
}

.facts li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--line);
}

.facts li:last-child {
    border-bottom: 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border-radius: var(--radius);
    padding: 0.3rem 0.58rem;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.badge.badge-warn {
    border-color: rgba(245, 185, 75, 0.5);
    background: #fff8e8;
    color: #7b5608;
}

.badge.badge-ok {
    border-color: rgba(25, 169, 116, 0.38);
    background: #edf9f3;
    color: #116c50;
}

.badge.badge-bad {
    border-color: rgba(223, 76, 67, 0.4);
    background: #fdecec;
    color: #8a2620;
}

.penalty-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 0.78rem;
    font-weight: 800;
    background: #fff;
    color: #334155;
    text-decoration: none;
}

.penalty-link-inline {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.penalty-link-inline:hover,
.penalty-link-inline:focus-visible {
    text-decoration: underline;
}

.penalty-chip-good {
    border-color: rgba(25, 169, 116, 0.35);
    background: #edf9f3;
    color: #116c50;
}

.penalty-chip-warn {
    border-color: rgba(245, 185, 75, 0.5);
    background: #fff8e8;
    color: #7b5608;
}

.penalty-chip-bad {
    border-color: rgba(223, 76, 67, 0.4);
    background: #fff0ef;
    color: #9f1239;
}

.pending-grid {
    display: grid;
    gap: 0.7rem;
    max-height: 520px;
    overflow: auto;
}

.pending-card {
    display: grid;
    gap: 0.65rem;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fbfdfc;
}

.pending-head {
    display: grid;
    gap: 0.22rem;
}

.pending-head span {
    color: var(--muted);
    font-size: 0.82rem;
}

.pending-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chart-card canvas {
    width: 100%;
    height: 220px !important;
    min-height: 0;
    max-height: 220px;
}

.chart-card {
    min-height: auto;
    overflow: hidden;
}

.team-cumulative-chart-card {
    min-height: 320px;
    overflow: visible;
}

.team-cumulative-chart-card canvas {
    height: 250px !important;
    max-height: 250px;
}

.range-form select {
    min-width: 120px;
}

.dashboard-calories {
    height: auto;
}

.dashboard-calories-head {
    align-items: flex-start;
    grid-template-columns: minmax(0, 1fr) auto;
}

.dashboard-calories-title {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.dashboard-calories-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex-wrap: wrap;
}

.dashboard-calories-title-row h2 {
    margin: 0;
}

.dashboard-calories-title-row .badge {
    white-space: nowrap;
}

.calories-overview {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
}

.calories-overview .metric-box {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.55rem;
}

.calories-overview .metric-title {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.calories-overview .metric-value {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.2;
}

/* Analytics: when maintenance calories aren't configured, the deficit figure
   is meaningless (backend treats it as -consumed). This swaps the two-column
   title/value row for a stacked card with a link to go set it, instead of a
   confident-looking negative number. */
.calories-overview .metric-box-muted {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}
.calories-overview .metric-value.muted { font-weight: 600; }
.calories-overview .metric-box-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -0.4rem 0;
    padding: 0.4rem 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}
.calories-overview .metric-box-link:hover,
.calories-overview .metric-box-link:focus-visible { text-decoration: underline; }
.calories-overview .metric-box-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 52%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

.dashboard-calories #calorieChart {
    height: 175px !important;
    max-height: 175px;
}

.meal-calendar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.meal-calendar-month {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}

.meal-calendar article {
    position: relative;
    display: grid;
    gap: 0.35rem;
    min-height: 118px;
    padding: 0.55rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fbfdfc;
}

.meal-calendar strong {
    font-size: 0.8rem;
}

.meal-calendar img,
.latest-meal img,
.achievement-card img {
    width: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius) - 2px);
}

.meal-calendar img {
    height: 82px;
}

.meal-thumb {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.meal-calendar .badge {
    position: absolute;
    right: 0.45rem;
    bottom: 0.45rem;
}

.latest-meal {
    margin: 0 0 0.85rem;
}

.latest-meal img {
    height: 190px;
}

.latest-meal figcaption {
    margin-top: 0.45rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.meal-lightbox {
    width: min(920px, calc(100vw - 1.5rem));
    border: 0;
    border-radius: var(--radius);
    padding: 1rem;
    background: #fff;
    box-shadow: var(--shadow);
}

.meal-lightbox::backdrop {
    background: rgba(23, 33, 43, 0.62);
}

.meal-lightbox figure {
    margin: 0;
}

.meal-lightbox img {
    display: block;
    width: 100%;
    max-height: 74vh;
    object-fit: contain;
    border-radius: var(--radius);
    background: #0f171f;
}

.meal-lightbox figcaption {
    margin-top: 0.65rem;
    color: var(--muted);
    font-weight: 700;
}

.lightbox-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-prev {
    left: 1rem;
}

.lightbox-next {
    right: 1rem;
}

.layout-editor summary,
.user-edit-modal summary {
    cursor: pointer;
}

.leaderboard-list {
    display: grid;
    gap: 0.65rem;
}

.leaderboard-row {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fbfdfc;
}

.leaderboard-name {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.leaderboard-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
}

.leaderboard-name-text {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.leaderboard-name-text strong,
.leaderboard-name-text span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-stats {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.metric-card-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.metric-card-link:hover,
.metric-card-link:focus-visible {
    border-color: rgba(20, 163, 139, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(22, 35, 43, 0.12);
}

.team-layout-grid {
    display: grid;
    gap: 0.9rem;
}

.team-layout-item {
    order: var(--team-order, 50);
    min-width: 0;
}

.team-panel-create-btn {
    justify-self: end;
    min-width: 0;
    padding-inline: 0.78rem;
}

.team-leaderboard-user {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.team-leaderboard-user > span:last-child {
    min-width: 0;
}

.team-leaderboard-cards {
    display: grid;
    gap: 0.7rem;
}

.team-leaderboard-card {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.45fr);
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.team-leaderboard-card:hover,
.team-leaderboard-card:focus-visible {
    border-color: rgba(20, 163, 139, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(22, 35, 43, 0.12);
}

.team-leaderboard-card.is-top {
    background: linear-gradient(90deg, rgba(20, 163, 139, 0.12), rgba(20, 163, 139, 0.03));
}

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

.team-rank {
    display: inline-grid;
    place-items: center;
    min-width: 38px;
    height: 32px;
    border-radius: 10px;
    background: #edf5f1;
    color: #0f766e;
    font-weight: 800;
}

.team-leaderboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.42rem;
}

.team-leaderboard-metrics > span {
    display: grid;
    gap: 0.1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.45rem 0.55rem;
    background: #fbfdfc;
}

.team-leaderboard-metrics strong {
    font-size: 0.95rem;
    line-height: 1.2;
}

.team-leaderboard-metrics small {
    color: var(--muted);
    font-size: 0.72rem;
}

.team-leaderboard-strikes .penalty-chip {
    display: inline-flex;
    margin-left: 0.12rem;
    padding: 0.05rem 0.32rem;
    font-size: 0.68rem;
}

.team-leaderboard-top-row {
    background: linear-gradient(90deg, rgba(20, 163, 139, 0.12), rgba(20, 163, 139, 0.02));
}

.team-member-summary {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 0.85rem;
}

.team-member-avatar-wrap {
    display: grid;
    gap: 0.5rem;
    justify-items: start;
    align-content: start;
}

.member-avatar-lg {
    width: 88px;
    height: 88px;
    font-size: 1.2rem;
}

.team-member-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.team-active-challenge-panel {
    background:
        linear-gradient(120deg, rgba(20, 163, 139, 0.16), rgba(59, 130, 246, 0.08)),
        var(--glass-strong);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.team-active-challenge-panel.is-expired {
    background:
        linear-gradient(120deg, rgba(148, 163, 184, 0.18), rgba(148, 163, 184, 0.08)),
        #fff;
}

.team-active-challenge-panel.is-pending {
    background:
        linear-gradient(120deg, rgba(245, 158, 11, 0.16), rgba(251, 191, 36, 0.07)),
        #fff;
}

.team-active-challenge-head {
    align-items: center;
}

.team-active-challenge-head-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.45rem;
}

.team-active-challenge-detail-btn {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.team-active-challenge-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.team-active-challenge-status.status-active {
    color: #0f766e;
    background: rgba(20, 163, 139, 0.16);
}

.team-active-challenge-status.status-expired {
    color: #475569;
    background: rgba(148, 163, 184, 0.26);
}

.team-active-challenge-status.status-pending {
    color: #92400e;
    background: rgba(251, 191, 36, 0.24);
}

.team-active-challenge-grid {
    display: grid;
    gap: 0.75rem;
}

.team-active-challenge-main {
    display: grid;
    gap: 0.65rem;
}

.team-active-challenge-values {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.team-active-challenge-values span {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.05;
    color: #0f172a;
}

.team-active-challenge-values small {
    color: var(--muted);
    font-weight: 700;
}

.team-active-challenge-progress {
    gap: 0.35rem;
}

.team-active-challenge-objectives,
.team-challenge-detail-objectives {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.team-active-challenge-objectives.has-two,
.team-challenge-detail-objectives.has-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-active-objective-card,
.team-challenge-detail-objective {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.62rem 0.7rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

.team-active-objective-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.team-active-objective-card-head span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.team-active-objective-card-head strong {
    min-width: 0;
    color: #0f172a;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.team-active-objective-card small,
.team-challenge-detail-objective p {
    margin: 0;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 700;
}

.mini-progress {
    height: 7px;
}

.team-active-challenge-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.team-active-challenge-meta > span {
    display: grid;
    gap: 0.15rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    padding: 0.45rem 0.55rem;
    background: rgba(255, 255, 255, 0.68);
}

.team-active-challenge-meta strong {
    font-size: 0.74rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.team-active-challenge-meta small {
    margin: 0;
    font-size: 0.88rem;
    color: #0f172a;
    line-height: 1.25;
}

.confirm-modal-card.team-challenge-detail-card {
    width: min(94vw, 760px);
    gap: 0.9rem;
    padding: 1.15rem;
}

.team-challenge-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
    padding-right: 2rem;
}

.team-challenge-detail-head h3 {
    margin: 0;
}

.team-challenge-detail-average {
    display: grid;
    gap: 0.45rem;
    padding: 0.85rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(20, 163, 139, 0.16), rgba(255, 255, 255, 0.58)),
        rgba(255, 255, 255, 0.62);
}

.team-challenge-detail-average > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
}

.team-challenge-detail-average strong {
    color: #0f172a;
}

.team-challenge-detail-average small {
    color: var(--muted);
    font-weight: 800;
}

.team-challenge-detail-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.team-goals-list {
    gap: 0.8rem;
}

.notifications-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
}

.notifications-list {
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.notification-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: start;
    padding: 0.72rem 0.78rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.26);
    background: #fff;
}

.notification-card:last-child {
    border-bottom: 0;
}

.notification-card.is-unread {
    box-shadow: inset 3px 0 0 rgba(20, 163, 139, 0.55);
}

.notification-card.is-read {
    background: #fbfdfc;
}

.notification-main {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
    text-decoration: none;
    color: inherit;
}

.notification-main strong {
    white-space: normal;
    line-height: 1.28;
    font-size: 0.94rem;
}

.notification-main p {
    margin: 0;
    color: #334155;
    font-size: 0.86rem;
    line-height: 1.34;
}

.notification-time {
    font-size: 0.74rem;
    letter-spacing: 0.01em;
}

.notification-card.is-read .notification-main strong {
    color: #334155;
    font-weight: 700;
}

.notification-actions {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

.notification-actions form {
    margin: 0;
}

.notification-action-btn {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.notification-action-btn:hover,
.notification-action-btn:focus-visible {
    border-color: rgba(20, 163, 139, 0.45);
}

.notification-action-read {
    color: #0f766e;
}

.notification-action-delete {
    color: #b91c1c;
}

.notification-delete-all-btn {
    color: #b91c1c;
}

.team-notifications-panel .card-list {
    gap: 0.6rem;
}

.team-notification-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
}

.team-notification-main {
    display: grid;
    gap: 0.2rem;
}

.team-notification-main p {
    margin: 0;
}

.team-notification-action {
    flex: 0 0 auto;
}

.team-goal-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(247, 253, 250, 0.72)),
        rgba(255, 255, 255, 0.74);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    align-items: start;
}

.team-goal-main {
    display: grid;
    gap: 0.35rem;
}

.team-goal-objective-grid,
.team-goal-meta-grid {
    display: grid;
    gap: 0.42rem;
}

.team-goal-objective-grid {
    grid-template-columns: 1fr;
}

.team-goal-objective-grid.has-two,
.team-goal-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-goal-objective-pill {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    padding: 0.68rem 0.78rem;
    border: 1px solid rgba(20, 163, 139, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(20, 163, 139, 0.12), rgba(255, 255, 255, 0.7)),
        rgba(255, 255, 255, 0.76);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.team-goal-meta-grid > span {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
    padding: 0.38rem 0.46rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.team-goal-objective-pill small,
.team-goal-meta-grid small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.team-goal-objective-pill strong,
.team-goal-meta-grid strong,
.team-goal-progress-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.team-goal-head {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: center;
}

.team-challenges-panel .panel-head {
    grid-template-columns: minmax(0, 1fr) auto;
}

.team-members-panel .card-list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.team-members-panel .member-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
}

.team-members-panel .member-card .btn {
    white-space: nowrap;
}

.team-mobile-title-badge {
    display: none;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.team-goal-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.team-goal-status.status-active {
    color: #0f766e;
    background: rgba(20, 163, 139, 0.14);
}

.team-goal-status.status-complete {
    color: #0f5132;
    background: rgba(34, 197, 94, 0.18);
}

.team-goal-status.status-archived {
    color: #4b5563;
    background: rgba(148, 163, 184, 0.24);
}

.team-goal-status.status-pending {
    color: #92400e;
    background: rgba(251, 191, 36, 0.24);
}

.team-goal-status.status-expired {
    color: #475569;
    background: rgba(148, 163, 184, 0.24);
}

.team-goal-progress-wrap {
    gap: 0.36rem;
}

.team-goal-progress-wrap small {
    font-weight: 700;
}

.team-goal-progress-secondary {
    color: var(--muted);
}

.team-goal-actions-menu {
    justify-self: end;
    align-self: start;
}

.team-goal-actions-menu > summary {
    min-width: 36px;
    padding-inline: 0.42rem;
}

.team-goal-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.team-goal-actions .inline-actions-mini {
    justify-content: flex-start;
    gap: 0.4rem;
}

.team-goal-action-btn {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
}

.team-goal-reward {
    color: #0f766e;
    font-weight: 700;
}

.team-goal-debug {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.72rem;
    color: #475569;
    line-height: 1.35;
}

.team-goal-form-helper {
    margin: -0.2rem 0 0;
}

.team-goal-reward-toggle {
    margin-top: -0.15rem;
}

.confirm-modal-card.team-goal-modal-card {
    width: min(94vw, 860px);
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    padding: 1.1rem 1.1rem 1rem;
}

.team-goal-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.team-goal-form-full {
    grid-column: 1 / -1;
}

.team-goal-secondary-toggle {
    margin-top: -0.1rem;
}

.team-metric-detail-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
    margin-bottom: 0.9rem;
}

.team-metric-total-card strong {
    font-size: 1.85rem;
    line-height: 1.05;
}

.team-metric-chart-card {
    min-height: 250px;
}

.team-metric-chart-card canvas {
    height: 100% !important;
    max-height: 250px;
}

.user-edit-modal > form {
    margin-top: 0.85rem;
}

.profile-hero {
    align-items: center;
}

.profile-title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.profile-avatar {
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
    font-size: 1.4rem;
    border-radius: 50%;
    border: 2px solid rgba(20, 163, 139, 0.26);
}

.settings-avatar-preview-round {
    border-radius: 50%;
    border: 2px solid rgba(20, 163, 139, 0.26);
}

.settings-avatar-preview {
    width: 104px;
    height: 104px;
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
}

.image-cropper {
    display: grid;
    gap: 0.55rem;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfdfc;
}

.image-cropper canvas {
    width: min(100%, 320px);
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #f3f7f6;
    touch-action: none;
    cursor: move;
}

.image-cropper input[type="range"] {
    padding: 0;
}

.admin-login-background {
    margin-top: 0.65rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
}

.admin-login-bg-active {
    margin: 0;
    display: grid;
    gap: 0.45rem;
}

.admin-login-bg-active img {
    width: 100%;
    max-width: 360px;
    border-radius: 12px;
    border: 1px solid var(--line);
    max-height: 190px;
    object-fit: cover;
}

.admin-login-bg-active figcaption {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.admin-login-bg-library {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.6rem;
}

.admin-login-bg-item {
    display: grid;
    gap: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.45rem;
    background: #fff;
}

.admin-login-bg-item.is-active {
    border-color: rgba(20, 163, 139, 0.62);
    box-shadow: inset 0 0 0 1px rgba(20, 163, 139, 0.24);
}

.admin-login-bg-item img {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--line);
    height: 96px;
    object-fit: cover;
}

.admin-login-bg-item-meta {
    display: grid;
    gap: 0.32rem;
}

.admin-login-bg-item-meta strong {
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.integration-runtime-status { display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.integration-runtime-status > span { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--muted); }
.integration-runtime-status.is-active > span { background: var(--positive, #16a34a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--positive, #16a34a) 14%, transparent); }
.integration-runtime-status.is-delayed > span { background: #f59e0b; box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 15%, transparent); }
.integration-runtime-status.is-error > span { background: var(--danger, #dc2626); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger, #dc2626) 14%, transparent); }
.integration-runtime-status > div { display: grid; gap: 0.12rem; }
.integration-runtime-status small { color: var(--muted); }

.admin-section-help {
    margin: 0.2rem 0 0;
    max-width: 68ch;
}

.admin-achievement-row {
    display: grid;
    align-items: center;
    justify-content: stretch;
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.achievement-translation-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem;
}

.achievement-translation-card {
    display: grid;
    gap: 0.52rem;
    min-width: 0;
    margin: 0;
    padding: 0.72rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fbfdfc;
}

.achievement-translation-card legend {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.2rem;
    font-size: 0.78rem;
    font-weight: 900;
}

.admin-danger-zone {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(223, 76, 67, 0.22);
}

.admin-quote-form {
    margin-bottom: 1rem;
}

.mini-card.admin-quote-item {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: stretch;
}

.admin-quote-edit-form textarea {
    width: 100%;
    resize: vertical;
}

.admin-quote-edit-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.admin-quote-lang {
    min-width: 160px;
}

.admin-quote-active.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.admin-quote-lang-badge {
    margin-left: auto;
}

.admin-quote-meta {
    font-size: 0.8rem;
}

.admin-quote-actions {
    display: flex;
    gap: 0.5rem;
}

.admin-quote-delete-form {
    align-self: flex-end;
    margin-top: -2.4rem;
}

.badge-soft {
    background: var(--surface-2, rgba(148, 163, 184, 0.16));
    color: var(--muted);
}

@media (max-width: 640px) {
    .admin-quote-delete-form {
        align-self: stretch;
        margin-top: 0;
    }
    .admin-quote-lang-badge {
        margin-left: 0;
    }
}

.profile-chip {
    display: grid;
    gap: 0.2rem;
    min-width: 150px;
    padding: 0.9rem;
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
}

.profile-chip span {
    color: #9fe4d6;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.profile-chip strong {
    font-size: 1.25rem;
}

.member-card-title {
    display: inline-grid;
    align-self: center;
}

.member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--line);
    object-fit: cover;
    background: #eef4f1;
}

.member-avatar-initials {
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ink);
}

.compact-form {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.goal-editor {
    display: grid;
    gap: 0.65rem;
    align-items: stretch;
}

.goal-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    width: 100%;
}

.goal-editor-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.goal-subview {
    gap: 0.7rem;
}

.goal-detail-card {
    align-items: stretch;
}

.goal-detail-summary {
    display: grid;
    gap: 0.85rem;
    padding: 0.95rem;
}

.goal-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.goal-summary-item {
    min-width: 0;
    display: grid;
    gap: 0.1rem;
}

.goal-summary-item strong {
    font-size: 0.76rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.goal-summary-item span {
    font-size: 0.92rem;
    color: var(--ink);
}

.goal-status-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
}

.goal-progress-wrap {
    display: grid;
    gap: 0.3rem;
}

.goal-progress-wrap small {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.goal-detail-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

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

.card-list,
.stat-list,
.audit-list {
    display: grid;
    gap: 0.65rem;
}

.mini-card,
.stat-list article,
.audit-list article,
.achievement-card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fbfdfc;
}

.mini-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.75rem;
}

a.mini-card-link {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

a.mini-card-link:hover,
a.mini-card-link:focus-visible {
    border-color: var(--accent, #34d399);
    transform: translateY(-1px);
}

.mini-card-cta {
    flex: 0 0 auto;
    color: var(--accent, #34d399);
    font-weight: 700;
    font-size: 0.82rem;
    white-space: nowrap;
}

/* Friends + comparison */
.friends-screen {
    gap: 0.9rem;
}

.friends-hero {
    align-items: center;
}

.mini-card.friends-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem;
}

.friends-row-id {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.friends-row-id span {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.friends-row-id strong,
.friends-row-id small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friends-row-id:hover strong,
.friends-row-id:focus-visible strong {
    color: var(--accent, #34d399);
}

.friends-row-actions {
    margin-top: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    min-width: 0;
}

.friends-action-form {
    margin: 0;
    gap: 0;
}

.friends-add-select {
    flex: 1 1 220px;
    min-width: 0;
}

.friends-add-form {
    align-items: center;
    padding: 0.35rem;
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: 8px;
    background: rgba(248, 250, 252, 0.68);
}

.friends-add-form select {
    width: 100%;
    min-height: 42px;
}

.friends-compare-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0 0.9rem;
}

.friends-compare-person {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    text-align: center;
}

.friends-compare-person .member-avatar {
    width: 54px;
    height: 54px;
    font-size: 1.1rem;
}

.friends-compare-vs {
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    font-size: 0.82rem;
}

.friends-compare-grid {
    display: grid;
    gap: 0.35rem;
}

.friends-compare-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
}

.friends-compare-metric {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

.friends-compare-val {
    font-weight: 800;
    font-size: 1.05rem;
}

.friends-compare-val:first-child {
    text-align: right;
}

.friends-compare-val:last-child {
    text-align: left;
}

.friends-compare-val.is-win {
    color: var(--accent, #34d399);
}

@media (max-width: 640px) {
    .friends-hero {
        align-items: flex-start;
    }

    .mini-card.friends-row {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .friends-row-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .friends-row-actions > .btn,
    .friends-row-actions .friends-action-form,
    .friends-row-actions .friends-action-form .btn {
        width: 100%;
    }

    .friends-row-actions > .btn,
    .friends-row-actions .friends-action-form {
        flex: 1 1 130px;
    }

    .friends-add-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .friends-add-select,
    .friends-add-form .btn {
        width: 100%;
    }
}

/* Duels */
.stack-md {
    display: grid;
    gap: 0.7rem;
}

.duel-card {
    display: grid;
    gap: 0.6rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2);
}

.duel-card.is-done {
    opacity: 0.92;
}

.duel-vs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.6rem;
}

.duel-side {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    text-align: center;
    padding: 0.5rem;
    border-radius: 12px;
    border: 1px solid transparent;
    min-width: 0;
}

.duel-side .member-avatar {
    width: 48px;
    height: 48px;
    font-size: 1rem;
}

.duel-side strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.duel-side.is-lead {
    border-color: var(--accent, #34d399);
    background: rgba(20, 163, 139, 0.10);
}

.duel-value {
    font-size: 1.15rem;
    font-weight: 900;
}

.duel-mid {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
}

.duel-metric-tag {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--accent, #34d399);
    text-align: center;
}

.duel-vs-label {
    font-weight: 900;
    color: var(--muted);
    font-size: 0.8rem;
}

.duel-result {
    margin: 0;
    font-weight: 800;
    text-align: center;
}

/* Team competitions (squads) */
.squad-card {
    display: grid;
    gap: 0.6rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2);
}

.squad-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.squad-card-head strong {
    font-size: 1.05rem;
}

.squad-members {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.squad-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    background: var(--surface);
}

.squad-member-x {
    border: 0;
    background: transparent;
    color: var(--bad, #df4c43);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.squad-add-form,
.squad-challenge-form {
    gap: 0.45rem;
    align-items: center;
}

.comp-squad-badge {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, #14a38b, #0f8d78);
}

/* Training overview: result stats + habit chips */
.training-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.6rem;
}

.training-result-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.8rem 0.9rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface-2, rgba(148, 163, 184, 0.08));
}

.training-result-stat.is-warn {
    border-color: rgba(239, 68, 68, 0.35);
    background: color-mix(in srgb, #ef4444 8%, var(--surface));
}

.training-result-value {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--ink);
    line-height: 1.1;
}

.training-result-stat.is-warn .training-result-value {
    color: #dc2626;
}

.training-result-label {
    font-size: 0.78rem;
    color: var(--muted);
}

.training-habit-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.training-habit-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.4rem 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2, rgba(148, 163, 184, 0.08));
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
}

.training-habit-chip-count {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #14a38b, #0f8d78);
    color: #fff;
    font-weight: 800;
    font-size: 0.8rem;
}

/* XP amount inputs stay compact so the form is not needlessly tall on mobile. */
.xp-amounts-grid label,
.xp-adjust-grid label {
    min-width: 0;
}

@media (max-width: 720px) {
    .xp-amounts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem 0.7rem;
    }
}

/* Nutrition dialogs use the current design tokens. The legacy --panel/--text
   aliases are not defined in every theme and made the native dialog transparent. */
body[data-page="nutrition"] .nutrition-dialog {
    isolation: isolate;
    width: min(680px, calc(100% - 1.25rem));
    padding: 1.25rem;
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
    border-radius: 24px;
    color: var(--ink);
    background-color: var(--surface);
    background-image: linear-gradient(
        145deg,
        color-mix(in srgb, var(--primary) 5%, var(--surface)),
        var(--surface) 42%
    );
    box-shadow: 0 28px 90px rgba(3, 12, 20, 0.36);
    opacity: 1;
}

body[data-page="nutrition"] .nutrition-dialog::backdrop {
    background: rgba(3, 12, 20, 0.72);
    backdrop-filter: blur(7px);
}

body[data-page="nutrition"] .nutrition-dialog > form {
    position: relative;
    z-index: 1;
}

body[data-page="nutrition"] .nutrition-dialog header {
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--line);
}

body[data-page="nutrition"] .nutrition-dialog header :is(.eyebrow, h2) { margin: 0; }
body[data-page="nutrition"] .nutrition-dialog header h2 { margin-top: 0.12rem; }
body[data-page="nutrition"] .nutrition-dialog .dialog-close {
    color: var(--ink);
    background: var(--surface-2);
}

body[data-page="nutrition"] .nutrition-dialog header small {
    display: block;
    margin-top: 0.3rem;
}

/* Entries uses the same native-dialog pattern. Avoid legacy token aliases
   making the custom-metric surface transparent in either theme. */
body[data-page="entries"] .custom-metric-dialog {
    isolation: isolate;
    width: min(680px, calc(100% - 1.25rem));
    max-height: calc(100dvh - 1.25rem);
    padding: 1.25rem;
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
    border-radius: 24px;
    color: var(--ink);
    background-color: var(--surface);
    background-image: linear-gradient(
        145deg,
        color-mix(in srgb, var(--primary) 5%, var(--surface)),
        var(--surface) 42%
    );
    box-shadow: 0 28px 90px rgba(3, 12, 20, 0.36);
    opacity: 1;
}

body[data-page="entries"] .custom-metric-dialog::backdrop {
    background: rgba(3, 12, 20, 0.72);
    backdrop-filter: blur(7px);
}

body[data-page="entries"] .custom-metric-dialog > form {
    position: relative;
    z-index: 1;
}

body[data-page="entries"] .custom-metric-dialog header {
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--line);
}

body[data-page="entries"] .custom-metric-dialog header :is(.eyebrow, h2) {
    margin: 0;
}

body[data-page="entries"] .custom-metric-dialog header h2 {
    margin-top: 0.12rem;
}

body[data-page="entries"] .custom-metric-dialog .dialog-close {
    flex: 0 0 auto;
    color: var(--ink);
    background: var(--surface-2);
}

body[data-page="entries"] .custom-metric-dialog :is(input, select) {
    background-color: var(--surface);
}

body[data-page="entries"] .custom-metric-dialog-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.65rem;
}

body[data-page="entries"] .custom-metric-dialog-actions .btn {
    min-height: 48px;
}

body[data-page="entries"] .custom-metric-dialog .form-success {
    margin: 0;
    color: var(--success, #15803d);
    font-size: 0.82rem;
    font-weight: 750;
}

body[data-page="nutrition"] .nutrition-calorie-field {
    gap: 0.45rem;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, #f97316 32%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, #f97316 7%, var(--surface));
}

body[data-page="nutrition"] .nutrition-input-unit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

body[data-page="nutrition"] .nutrition-input-unit input {
    min-width: 0;
    min-height: 50px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 1.25rem;
    font-weight: 850;
}

body[data-page="nutrition"] .nutrition-input-unit strong {
    padding-inline: 0.9rem;
    color: #d95f0b;
    font-size: 0.82rem;
}

body[data-page="nutrition"] .nutrition-advanced-fields {
    overflow: clip;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: color-mix(in srgb, var(--surface-2) 56%, var(--surface));
}

body[data-page="nutrition"] .nutrition-advanced-fields > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 54px;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    list-style: none;
}

body[data-page="nutrition"] .nutrition-advanced-fields > summary::-webkit-details-marker { display: none; }
body[data-page="nutrition"] .nutrition-advanced-fields > summary > span {
    display: grid;
    grid-template-columns: 22px auto;
    align-items: center;
    gap: 0.1rem 0.55rem;
}
body[data-page="nutrition"] .nutrition-advanced-fields > summary svg {
    grid-row: 1 / 3;
    width: 19px;
    height: 19px;
    color: var(--primary);
}
body[data-page="nutrition"] .nutrition-advanced-fields > summary small {
    color: var(--muted);
    font-size: 0.7rem;
}
body[data-page="nutrition"] .nutrition-advanced-fields > summary > b {
    transition: transform 0.2s ease;
}
body[data-page="nutrition"] .nutrition-advanced-fields[open] > summary > b { transform: rotate(90deg); }
body[data-page="nutrition"] .nutrition-advanced-fields > .grid-inline {
    margin: 0;
    padding: 0.85rem;
    border-top: 1px solid var(--line);
}

@media (max-width: 600px) {
    body[data-page="entries"] .custom-metric-dialog {
        width: calc(100% - 1rem);
        max-height: calc(100dvh - 1rem);
        padding: 1rem;
        border-radius: 20px;
    }

    body[data-page="entries"] .custom-metric-dialog > form {
        gap: 0.75rem;
    }

    body[data-page="entries"] .custom-metric-dialog .grid-inline.two {
        grid-template-columns: 1fr;
    }

    body[data-page="entries"] .custom-metric-dialog-actions {
        grid-template-columns: 1fr;
    }

    body[data-page="nutrition"] .nutrition-dialog {
        width: calc(100% - 1rem);
        max-height: calc(100dvh - 1rem);
        padding: 1rem;
        border-radius: 20px;
    }

    body[data-page="nutrition"] .nutrition-dialog > form { gap: 0.75rem; }
    body[data-page="nutrition"] .nutrition-meal-basics,
    body[data-page="nutrition"] .nutrition-advanced-fields > .grid-inline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }
}

/* Admin XP user list */
.xp-user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.xp-user-item > div {
    display: grid;
    gap: 0.1rem;
}

/* Admin settings subsections */
.admin-subsection {
    padding: 1rem 0;
    border-top: 1px solid var(--line);
}

.admin-subsection:first-of-type {
    border-top: 0;
    padding-top: 0.4rem;
}

.admin-subsection > h3 {
    margin: 0 0 0.15rem;
    font-size: 1rem;
}

.admin-subsection > .muted.small {
    margin: 0 0 0.7rem;
    display: block;
}

/* User menu level chip */
.user-menu-level {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    padding: 0.48rem 0.52rem;
    margin-bottom: 0.16rem;
    border-radius: 12px;
    background: var(--surface-2, rgba(148, 163, 184, 0.1));
    text-decoration: none;
}

.user-menu-xp {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.user-menu-xp-bar {
    height: 5px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.28);
    overflow: hidden;
}

.user-menu-xp-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #14a38b, #f59e0b);
}

.user-menu-xp-text {
    font-size: 0.63rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-level .profile-level-badge {
    flex: 0 0 auto;
    padding: 0.24rem 0.48rem;
    font-size: 0.66rem;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.2);
}

/* User level + XP */
.profile-level {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.7rem;
    flex-wrap: wrap;
}

.profile-level-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-weight: 900;
    font-size: 0.82rem;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.28);
    white-space: nowrap;
}

.profile-xp {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 180px;
    flex: 1 1 180px;
    max-width: 320px;
}

.profile-xp-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2, rgba(148, 163, 184, 0.22));
    overflow: hidden;
}

.profile-xp-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #14a38b, #f59e0b);
    transition: width 0.4s ease;
}

.profile-xp-label {
    color: var(--muted);
    font-size: 0.78rem;
}

/* Team switcher, leave/join, and danger zone */
.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border-color: transparent;
}

.btn-danger:hover {
    filter: brightness(1.05);
}

.btn-danger-ghost {
    color: #dc2626;
}

.btn-danger-ghost:hover {
    background: rgba(220, 38, 38, 0.1);
}

.team-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.team-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.team-switcher-chip {
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2, rgba(148, 163, 184, 0.1));
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.team-switcher-chip.is-active {
    color: #fff;
    background: linear-gradient(135deg, #14a38b, #0f8d78);
    border-color: transparent;
}

.team-join-more {
    position: relative;
}

.team-join-more > summary {
    list-style: none;
    cursor: pointer;
}

.team-join-more > summary::-webkit-details-marker {
    display: none;
}

.team-join-more-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.6rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.team-danger-zone {
    border: 1px solid rgba(220, 38, 38, 0.35);
}

.team-danger-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-top: 1px solid var(--line);
}

.team-danger-row:first-of-type {
    border-top: 0;
}

.team-danger-row p {
    margin: 0.15rem 0 0;
    max-width: 46ch;
}

/* Profile privacy selector */
.profile-privacy-form {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border, rgba(148, 163, 184, 0.28));
}

.profile-privacy-head h3 {
    margin: 0 0 0.15rem;
}

.privacy-options {
    display: grid;
    gap: 0.6rem;
    margin: 0.9rem 0;
}

.privacy-option {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "radio label" "radio hint";
    gap: 0.1rem 0.7rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border, rgba(148, 163, 184, 0.28));
    border-radius: 12px;
    background: var(--surface-2, rgba(148, 163, 184, 0.08));
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.privacy-option:hover {
    border-color: var(--accent, #14a38b);
}

.privacy-option.is-selected {
    border-color: var(--accent, #14a38b);
    background: color-mix(in srgb, var(--accent, #14a38b) 12%, transparent);
}

.privacy-option input[type="radio"] {
    grid-area: radio;
    width: 18px;
    height: 18px;
    accent-color: var(--accent, #14a38b);
}

.privacy-option-label {
    grid-area: label;
    font-weight: 700;
    color: var(--ink);
}

.privacy-option-hint {
    grid-area: hint;
    font-size: 0.82rem;
}

/* On desktop, keep admin settings-panel forms readable instead of stretching
   inputs and Save buttons across the full panel width. */
@media (min-width: 900px) {
    .settings-panel .compact-form {
        max-width: 640px;
    }

    .settings-panel .compact-form > button.btn,
    .settings-panel .compact-form > .inline-actions {
        justify-self: start;
    }

    .settings-panel .compact-form > button.btn {
        width: auto;
        min-width: 180px;
        padding-inline: 1.5rem;
    }

    .admin-notion-mapping .compact-form,
    .admin-telegram-panel .compact-form,
    .admin-notion-oauth .compact-form {
        max-width: none;
    }
}

.mini-card > div,
.stat-list article,
.audit-list article {
    min-width: 0;
}

.mini-card strong,
.stat-list strong,
.audit-list strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-card span,
.stat-list span,
.audit-list span,
.achievement-card small {
    display: block;
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.stat-list article,
.audit-list article {
    padding: 0.75rem;
}

.inline-actions-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

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

.achievement-grid-collapsible {
    max-height: 360px;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

.achievement-grid-collapsible.expanded {
    max-height: 2000px;
}

.achievement-remove {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.profile-achievement-card {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    min-height: 100%;
}

.profile-achievement-media {
    width: 68px;
    min-height: 68px;
    border-radius: 12px;
    border: 1px solid rgba(20, 163, 139, 0.24);
    background: #f0f8f4;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.profile-achievement-card .profile-achievement-media img {
    width: 100%;
    height: 100%;
    min-height: 68px;
    object-fit: cover;
}

.profile-achievement-media span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 900;
    font-size: 0;
}

.profile-achievement-media span::before {
    content: "\2605";
    font-size: 1rem;
}

.profile-achievement-content {
    min-width: 0;
    display: grid;
    gap: 0.25rem;
}

.profile-achievement-content strong {
    white-space: normal;
    overflow: visible;
}

.profile-achievement-content p {
    margin: 0;
}

.achievement-unlocked-date {
    color: var(--muted);
    font-size: 0.76rem;
}

.profile-achievement-card,
.team-achievement-card {
    border-color: rgba(20, 163, 139, 0.18);
    background:
        linear-gradient(135deg, rgba(20, 163, 139, 0.09), transparent 58%),
        #fff;
    box-shadow: 0 8px 22px rgba(22, 35, 43, 0.06);
}

.achievement-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-top: 0.12rem;
}

.achievement-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 24px;
    padding: 0.16rem 0.46rem;
    border: 1px solid rgba(217, 226, 221, 0.9);
    border-radius: 999px;
    background: #fbfdfc;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
}

.achievement-toggle-wrap {
    display: flex;
    justify-content: center;
    padding-top: 0.1rem;
}

.achievement-toggle-btn {
    border-radius: 999px;
    min-width: 118px;
}

.achievement-card:hover .achievement-remove,
.achievement-card:focus-within .achievement-remove {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.achievement-delete-btn {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: #9f1239;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.achievement-delete-btn:hover,
.achievement-delete-btn:focus-visible {
    background: #ef4444;
    color: #fff;
}

.achievement-delete-error {
    margin: 0.2rem 0 0;
    color: #b91c1c;
    font-size: 0.8rem;
}

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: none;
    place-items: center;
    padding: clamp(0.85rem, 2.2vw, 1.4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.confirm-modal:not([hidden]) {
    display: grid;
}

.confirm-modal[hidden] {
    display: none;
}

.confirm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(13px) saturate(145%);
    -webkit-backdrop-filter: blur(13px) saturate(145%);
}

.confirm-modal-card {
    position: relative;
    z-index: 1;
    width: min(92vw, 340px);
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    padding: 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--glass-border);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72)),
        var(--glass);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    display: grid;
    gap: 0.9rem;
}

.confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

.goal-progress-list .mini-card {
    align-items: stretch;
}

.goal-progress {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ecf5f1 0%, #e0ede8 100%);
    margin-top: 0.35rem;
    overflow: hidden;
    border: 1px solid rgba(20, 43, 36, 0.08);
}

.goal-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #10b981, #14a38b 55%, #0f766e);
    box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.1), 0 3px 10px rgba(20, 163, 139, 0.34);
    transition: width 0.2s ease;
}

.panel-inline-empty {
    padding: 0.85rem 1rem;
}

.entries-calendar {
    gap: 0.8rem;
}

.entries-calendar-controls {
    margin-bottom: 0.85rem;
}

.entries-calendar-day {
    color: inherit;
    text-decoration: none;
}

.entries-calendar-day article {
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.entries-calendar-day:hover article,
.entries-calendar-day:focus-visible article {
    border-color: rgba(20, 163, 139, 0.45);
    transform: translateY(-1px);
}

.entries-calendar-day.is-selected article {
    border-color: rgba(20, 163, 139, 0.65);
    box-shadow: 0 0 0 2px rgba(20, 163, 139, 0.12);
}

.entries-calendar-day.has-log article {
    background: #f4fbf8;
}

.entries-calendar-panel.is-loading .entries-calendar,
.entries-calendar-panel.is-loading + .entries-calendar-photos-panel {
    opacity: 0.62;
    pointer-events: none;
}

.entries-calendar-empty {
    display: grid;
    place-items: center;
    height: 82px;
    border-radius: calc(var(--radius) - 2px);
    background: #eef4f1;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.photo-post {
    display: grid;
    gap: 1.1rem;
    padding: 0.95rem;
}

.photo-post-title {
    margin-bottom: 0;
    font-size: clamp(1.5rem, 2.7vw, 2.1rem);
}

.photo-post-head {
    justify-content: space-between;
    align-items: center;
}

.photo-post-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.photo-back-btn {
    min-height: 34px;
    padding: 0.42rem 0.62rem;
}

.photo-post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: 1.1rem;
    align-items: start;
}

.photo-post-media {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 16px 36px rgba(23, 33, 43, 0.12);
}

.photo-post-media img {
    width: 100%;
    min-height: 300px;
    max-height: 72vh;
    object-fit: cover;
    display: block;
}

.photo-post-side {
    min-width: 0;
}

.photo-post-meta {
    display: grid;
    gap: 0.8rem;
    align-items: stretch;
}

.photo-post-meta-main {
    display: grid;
    gap: 0.72rem;
}

.photo-post-author {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.photo-post-author .profile-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

.photo-post-author span {
    margin-top: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.photo-post-author strong {
    display: block;
    margin-bottom: 0.12rem;
}

.photo-post-tags {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.photo-post-tags .badge {
    margin-top: 0;
    display: inline-flex;
}

.photo-post-divider {
    width: 100%;
    height: 1px;
    background: var(--line);
}

.photo-post-caption {
    margin: 0;
    color: #26323d;
}

.photo-post-actions {
    display: grid;
    gap: 0.55rem;
    justify-items: end;
}

.photo-post-actions h3 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--muted);
}

.photo-post-menu {
    position: relative;
}

.photo-post-menu > summary {
    list-style: none;
    min-width: 42px;
    justify-content: center;
}

.photo-post-menu > summary::-webkit-details-marker {
    display: none;
}

.photo-post-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 8;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    padding: 0.42rem;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    min-width: 170px;
    display: grid;
    gap: 0.32rem;
}

.photo-post-menu-panel .btn {
    justify-content: flex-start;
    width: 100%;
    min-height: 34px;
}

.photo-post-menu-panel form {
    margin: 0;
}

.photo-post-head-menu > summary {
    min-width: 36px;
    padding-inline: 0.42rem;
}

.photo-delete-text-btn {
    color: #b91c1c;
    justify-self: stretch;
    width: 100%;
}

.photo-edit-modal-card {
    width: min(660px, calc(100vw - 1.5rem));
    max-height: min(88vh, 760px);
    overflow: auto;
}

.photo-post-nutrition h3 {
    margin: 0;
}

.photo-post-nutrition ul {
    list-style: none;
    margin: 0.55rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.photo-post-nutrition li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.84rem;
}

.photo-comments {
    padding-top: 0.72rem;
    border-top: 1px solid var(--line);
}

.photo-comments-head {
    align-items: center;
}

.photo-comment-form {
    margin-top: 0.15rem;
}

.photo-comment-form input[type="text"] {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.62rem 0.82rem;
    background: #fff;
}

.photo-comment-actions {
    justify-content: flex-start;
}

.photo-comments-empty {
    display: grid;
    gap: 0.18rem;
    padding: 0.72rem;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: #f8fcfa;
}

.photo-comments-empty strong {
    font-size: 0.9rem;
}

.photo-comments-empty span {
    color: var(--muted);
    font-size: 0.82rem;
}

.photo-comment-list {
    display: grid;
    gap: 0.65rem;
}

.photo-comment-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #f9fcfb;
    padding: 0.72rem;
    display: grid;
    gap: 0.5rem;
    box-shadow: 0 8px 18px rgba(23, 33, 43, 0.06);
}

.photo-comment-item p {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.photo-comment-head {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: flex-start;
}

.photo-comment-author {
    display: flex;
    gap: 0.55rem;
    align-items: center;
}

.photo-comment-author .profile-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

.photo-comment-author span {
    color: var(--muted);
    font-size: 0.78rem;
}

.strike-review-form {
    gap: 0.35rem;
}

.strike-review-form input[type="text"] {
    min-width: 220px;
}

.strike-review-form textarea {
    min-height: 110px;
    resize: vertical;
}

.strike-review-vote .btn {
    min-width: 88px;
}

.team-settings-bottom {
    display: none;
}

.week-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.05rem;
    margin-top: 0.9rem;
    align-items: start;
}

.week-day-card {
    border: 1px solid rgba(20, 43, 36, 0.18);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #f6fbf9 0%, #fbfdfc 100%);
    box-shadow: 0 12px 24px rgba(18, 37, 32, 0.06);
    padding: 0.92rem;
    display: grid;
    gap: 0.82rem;
    align-content: start;
}

.week-day-card:nth-child(even) {
    background: linear-gradient(180deg, #f4f9fb 0%, #fbfdfd 100%);
}

.week-day-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px dashed rgba(20, 43, 36, 0.16);
    padding-bottom: 0.42rem;
}

.week-section {
    display: grid;
    gap: 0.62rem;
    border: 1px solid rgba(20, 43, 36, 0.18);
    border-radius: calc(var(--radius) - 2px);
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    padding: 0.72rem;
}

.week-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.week-section-head h3 {
    margin: 0;
    color: var(--muted);
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 800;
}

.week-section-grid {
    display: grid;
    gap: 0.58rem;
}

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

.week-workout-grid,
.week-excuses-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.week-field {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.week-field > span {
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.3;
    font-weight: 700;
}

.week-field-secondary {
    opacity: 0.92;
}

.week-workout-grid .week-check {
    min-width: 0;
}

.week-workout-grid > .week-help-wrap,
.week-workout-grid > .week-extra-toolbar,
.week-workout-grid > .week-extra-panel {
    grid-column: 1 / -1;
}

.week-request-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    border-top: 1px dashed var(--line);
    padding-top: 0.45rem;
}

.workout-type-control {
    display: grid;
    gap: 0.48rem;
}

.workout-type-custom {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.workout-type-custom .btn {
    white-space: nowrap;
}

.workout-type-custom input {
    flex: 1;
}

.week-extra-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.week-extra-panel {
    display: grid;
    gap: 0.55rem;
    border: 1px dashed var(--line);
    border-radius: calc(var(--radius) - 3px);
    padding: 0.55rem;
    background: #f9fcfb;
}

.week-extra-list {
    display: grid;
    gap: 0.5rem;
}

.week-extra-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.52rem;
    align-items: end;
}

.week-extra-row .btn {
    align-self: stretch;
    white-space: nowrap;
}

.week-custom-habit {
    display: grid;
    gap: 0.52rem;
    border: 1px dashed var(--line);
    border-radius: calc(var(--radius) - 3px);
    padding: 0.55rem;
    background: #f9fcfb;
}

.week-custom-habit-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.week-day-notes {
    width: 100%;
}

.week-day-habits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.week-day-habits .check {
    min-width: 0;
}

.week-help-wrap {
    min-width: 0;
    position: relative;
}

.week-day-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}

.training-sheet-panel {
    padding: 0;
    overflow: hidden;
}

.training-sheet-head {
    align-items: center;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--line);
}

.training-sheet-controls {
    margin: 0;
}

.training-sheet-wrap.week-editor-grid {
    display: block;
    margin-top: 0;
    overflow: auto;
    max-height: calc(100vh - 250px);
    min-height: 420px;
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--surface);
}

.training-sheet-table {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.training-sheet-table .week-day-card,
.training-sheet-table .week-day-card:nth-child(even) {
    display: table-row;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.training-sheet-table th,
.training-sheet-table td {
    vertical-align: top;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.training-sheet-table tbody tr:nth-child(even) td,
.training-sheet-table tbody tr:nth-child(even) .sheet-day-cell {
    background: #fbfdfc;
}

.training-sheet-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 0.72rem 0.65rem;
    background: #eef6f2;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.training-sheet-table .sheet-day-col,
.training-sheet-table .sheet-day-cell {
    position: sticky;
    left: 0;
    z-index: 4;
    width: 132px;
    min-width: 132px;
    max-width: 132px;
}

.training-sheet-table thead .sheet-day-col {
    z-index: 7;
}

.sheet-day-cell {
    padding: 0.72rem 0.7rem;
}

.sheet-day-cell strong,
.sheet-day-cell span {
    display: block;
}

.sheet-day-cell span {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.training-sheet-table td {
    padding: 0.55rem;
}

.sheet-time-cell {
    width: 118px;
}

.sheet-number-cell {
    width: 128px;
}

.sheet-check-cell {
    width: 116px;
}

.sheet-workout-cell {
    width: 230px;
}

.sheet-extra-cell {
    width: 290px;
}

/* Extra-workout panel floated over the sheet so opening it does not grow the
   table row. Positioned via JS (fixed) to escape the scroll container. */
.sheet-extra-panel.sheet-extra-floating {
    position: fixed;
    z-index: 200;
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.24);
    padding: 0.85rem;
}

.sheet-habits-cell {
    width: 330px;
}

.sheet-review-cell {
    width: 280px;
}

.sheet-notes-cell {
    width: 250px;
}

.sheet-actions-cell {
    width: 155px;
}

.training-sheet-table .sheet-field,
.training-sheet-table .week-field {
    min-width: 0;
    width: 100%;
}

.training-sheet-table .sheet-field input,
.training-sheet-table .sheet-field select,
.training-sheet-table .week-field input,
.training-sheet-table .week-field select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0.5rem 0.55rem;
}

.training-sheet-table .check {
    min-height: 38px;
    padding: 0.45rem 0.55rem;
    border-radius: 7px;
    background: #f9fcfb;
    white-space: nowrap;
}

.training-sheet-table .workout-type-custom {
    align-items: stretch;
}

.training-sheet-table .workout-type-custom .btn {
    min-height: 38px;
}

.sheet-extra-toolbar {
    display: grid;
    gap: 0.35rem;
}

.sheet-extra-panel {
    margin-top: 0.5rem;
}

.training-sheet-table .week-extra-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

.training-sheet-table .week-extra-row .btn {
    min-height: 38px;
}

.sheet-custom-habit-toggle {
    width: 100%;
}

.sheet-habits-list {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    max-height: 190px;
    overflow: auto;
    margin-top: 0.45rem;
    padding-right: 0.2rem;
}

.sheet-excuses-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.training-sheet-table .week-request-actions {
    display: grid;
    justify-items: stretch;
}

.training-sheet-table .week-day-actions {
    display: grid;
    justify-items: stretch;
    gap: 0.45rem;
}

.training-sheet-table .save-status {
    min-height: 1.15rem;
    font-size: 0.78rem;
}

body[data-theme="dark"] .training-sheet-wrap.week-editor-grid,
body[data-theme="dark"] .training-sheet-table th,
body[data-theme="dark"] .training-sheet-table td,
body[data-theme="dark"] .training-sheet-table tbody tr:nth-child(even) td,
body[data-theme="dark"] .training-sheet-table tbody tr:nth-child(even) .sheet-day-cell,
body[data-theme="dark"] .training-sheet-table .check,
body[data-theme="dark"] .sheet-extra-panel,
body[data-theme="dark"] .week-custom-habit {
    background: rgba(18, 27, 36, 0.92);
}

body[data-theme="dark"] .training-sheet-table thead th {
    background: #182431;
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .training-sheet-wrap.week-editor-grid,
    body[data-theme="auto"] .training-sheet-table th,
    body[data-theme="auto"] .training-sheet-table td,
    body[data-theme="auto"] .training-sheet-table tbody tr:nth-child(even) td,
    body[data-theme="auto"] .training-sheet-table tbody tr:nth-child(even) .sheet-day-cell,
    body[data-theme="auto"] .training-sheet-table .check,
    body[data-theme="auto"] .sheet-extra-panel,
    body[data-theme="auto"] .week-custom-habit {
        background: rgba(18, 27, 36, 0.92);
    }

    body[data-theme="auto"] .training-sheet-table thead th {
        background: #182431;
    }
}

@media (min-width: 1300px) {
    .week-metrics-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (hover: hover) and (pointer: fine) {
    .week-help-wrap[data-help],
    .week-check[data-help] {
        position: relative;
    }

    .week-help-wrap[data-help]::before,
    .week-check[data-help]::before {
        content: '';
        position: absolute;
        right: 12px;
        top: calc(100% + 2px);
        border: 6px solid transparent;
        border-bottom-color: rgba(15, 24, 20, 0.95);
        opacity: 0;
        transform: translateY(4px);
        pointer-events: none;
        transition: opacity 0.15s ease, transform 0.15s ease;
        /* Must clear the mobile bottom nav (120) and PWA install nudge (11020),
           the two fixed-position layers this tooltip most often ends up under
           near the bottom of the viewport. */
        z-index: 11500;
    }

    .week-help-wrap[data-help]::after,
    .week-check[data-help]::after {
        content: attr(data-help);
        position: absolute;
        right: 0;
        top: calc(100% + 13px);
        width: min(280px, calc(100vw - 2rem));
        max-width: calc(100vw - 2rem);
        border-radius: 10px;
        background: rgba(15, 24, 20, 0.95);
        color: #f9fcfb;
        padding: 0.55rem 0.62rem;
        font-size: 0.74rem;
        line-height: 1.35;
        /* .week-check sets white-space: nowrap on itself (keeps its own "Sí"
           label from wrapping); that is inherited by this pseudo-element too,
           which let the tooltip text run off its own box and get painted over
           by the next table cell's background instead of wrapping. */
        white-space: normal;
        box-shadow: 0 14px 28px rgba(15, 24, 20, 0.28);
        opacity: 0;
        transform: translateY(6px);
        pointer-events: none;
        transition: opacity 0.15s ease, transform 0.15s ease;
        z-index: 11500;
    }

    .week-help-wrap[data-help]:hover::before,
    .week-help-wrap[data-help]:hover::after,
    .week-help-wrap[data-help]:focus-within::before,
    .week-help-wrap[data-help]:focus-within::after,
    .week-check[data-help]:hover::before,
    .week-check[data-help]:hover::after,
    .week-check[data-help]:focus-within::before,
    .week-check[data-help]:focus-within::after {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1024px) {
    .week-editor-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .week-metrics-grid,
    .week-workout-grid,
    .week-excuses-grid,
    .week-extra-row,
    .week-day-habits {
        grid-template-columns: 1fr;
    }

    .workout-type-custom {
        flex-direction: column;
        align-items: stretch;
    }

    .workout-type-custom .btn {
        width: 100%;
    }

    .week-day-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .week-day-actions .btn {
        width: 100%;
    }

    .week-request-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .team-notification-card {
        flex-direction: column;
    }
}

.achievement-card {
    display: grid;
    gap: 0.35rem;
    padding: 0.8rem;
    position: relative;
    background:
        linear-gradient(135deg, rgba(20, 163, 139, 0.12), transparent 58%),
        #fff;
}

.achievement-card > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 900;
}

.achievement-card img {
    height: 118px;
}

.achievement-card p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.team-achievements-panel .achievement-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.team-achievement-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.72rem;
    min-height: 112px;
}

.team-achievement-media {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    border: 1px solid rgba(20, 163, 139, 0.18);
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(20, 163, 139, 0.18), rgba(255, 255, 255, 0.86)),
        #f0f8f4;
}

.team-achievement-media > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-weight: 900;
    font-size: 0;
}

.team-achievement-media > span::before {
    content: "\2605";
    font-size: 1rem;
}

.team-achievement-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-achievement-body {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.team-achievement-date {
    font-weight: 750;
}

.team-add-form {
    align-items: end;
}

.inline-create {
    margin-top: 0.8rem;
}

.audit-filter label {
    min-width: 130px;
}

.audit-list details {
    margin-top: 0.45rem;
}

.audit-list pre {
    max-width: 100%;
    overflow: auto;
    padding: 0.55rem;
    border-radius: 6px;
    background: #eef4f1;
    color: #26323d;
    font-size: 0.72rem;
    white-space: pre-wrap;
}

@media (min-width: 680px) {
    .container {
        width: min(1180px, calc(100vw - 2.5rem));
        margin-bottom: 2.5rem;
    }

    .hero-panel {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        padding: 1rem;
    }

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

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

    .grid-inline,
    .quick-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid-inline.entries-two-col,
    .quick-stats.entries-two-col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chart-card canvas {
        height: 260px !important;
        max-height: 260px;
    }

    .dashboard-calories #calorieChart {
        height: 205px !important;
        max-height: 205px;
    }

    .meal-calendar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .toggle-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .auth-shell {
        grid-template-columns: minmax(0, 1fr) 420px;
        align-items: center;
    }
}

@media (min-width: 900px) {
    .dashboard-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-grid,
    .penalties-history-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-chart-wide,
    .analytics-grid-single {
        grid-column: 1 / -1;
    }

    .team-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .team-widget-metrics,
    .team-widget-active-challenge,
    .team-widget-leaderboard,
    .team-widget-daily-charts,
    .team-widget-weekly-charts,
    .team-widget-achievements {
        grid-column: 1 / -1;
    }

    .team-widget-challenges,
    .team-widget-members,
    .team-widget-cumulative-steps,
    .team-widget-cumulative-distance {
        grid-column: span 1;
    }
}

@media (min-width: 900px) {
    .container-with-nav {
        margin-top: 6.3rem;
    }

    .nav-links {
        display: flex;
    }

    .bottom-nav {
        display: none;
    }

    .floating-log {
        display: none;
    }

    .proof-photo-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    }

    .proof-photo-preview img,
    .proof-photo-preview .photo-placeholder {
        min-height: 340px;
    }
}

@media (max-width: 899px) {
    .team-layout-editor {
        display: none;
    }
}

@media (max-width: 520px) {
    .brand > span:last-child {
        max-width: 150px;
    }

    .topbar {
        gap: 0.5rem;
    }

    .locale-form select {
        min-width: 92px;
    }

    .topbar-actions {
        margin-left: auto;
    }

    .topbar-context-panel {
        position: fixed;
        top: 4.25rem;
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
        max-width: calc(100vw - 1rem);
        max-height: calc(100vh - 5.2rem);
        overflow-y: auto;
    }

    .team-layout-editor {
        display: none;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }

    .metric-card {
        min-height: 102px;
    }

    .dashboard-quick-actions-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-kpis.metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .dashboard-kpis .metric-card {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 0.42rem;
        min-height: 86px;
        padding: 0.55rem;
    }

    /* These two pages' KPI cards have no icon (single <div> child), so
       drop the reserved 44px icon column - see comment above. */
    .penalties-page .dashboard-kpis .metric-card,
    .strikes-detail-page .dashboard-kpis .metric-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-kpis .progress-ring {
        width: 44px;
        height: 44px;
    }

    .dashboard-kpis .progress-ring span {
        width: 34px;
        font-size: 0.62rem;
    }

    .dashboard-kpis .metric-card span {
        font-size: 0.66rem;
        line-height: 1.05;
    }

    .dashboard-kpis .metric-card strong {
        font-size: 1rem;
        overflow-wrap: anywhere;
    }

    /* Override: penalties/strikes-detail KPI cards have no icon, so their
       value column is narrower than a normal dashboard KPI card. Keep
       currency/number values intact instead of letting them break
       mid-digit (see the base-rule comment above for the full story). */
    .penalties-page .dashboard-kpis .metric-card strong,
    .strikes-detail-page .dashboard-kpis .metric-card strong {
        overflow-wrap: normal;
        word-break: normal;
        white-space: nowrap;
        font-size: clamp(0.86rem, 5.6vw, 1rem);
    }

    .dashboard-kpis .metric-card p {
        font-size: 0.68rem;
        line-height: 1.12;
    }

    .dashboard-quick-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .dashboard-quick-action {
        min-height: 44px;
        padding-inline: 0.45rem;
        font-size: 0.76rem;
        line-height: 1.15;
    }

    .dashboard-week-actions {
        display: grid;
        width: 100%;
    }

    .dashboard-week-actions .btn {
        width: 100%;
    }

    .facts li {
        display: grid;
        gap: 0.18rem;
    }

    .grid-inline.two {
        grid-template-columns: 1fr;
    }

    .mini-card {
        align-items: stretch;
        display: grid;
    }

    .inline-actions-mini {
        justify-content: flex-end;
    }

    .inline-actions-mini .btn,
    .mini-card form .btn {
        width: 100%;
    }

    .panel-head > .btn,
    .panel-head > .inline-actions-mini {
        justify-self: end;
    }

    .panel-head > .btn,
    .panel-head .inline-actions-mini .btn {
        width: auto;
    }

    .table {
        min-width: 620px;
    }

    .spreadsheet {
        min-width: 1120px;
    }

    .dashboard-toolbar .control-strip,
    .dashboard-toolbar label,
    .dashboard-toolbar select {
        width: 100%;
    }

    .notifications-toolbar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .notifications-toolbar .btn {
        width: 100%;
        justify-content: center;
        font-size: 0.74rem;
        padding-inline: 0.45rem;
    }

    .panel-head {
        align-items: stretch;
        display: grid;
    }

    .dashboard-weekly-history > .panel-head,
    .dashboard-meal-calendar-panel > .panel-head,
    .entries-calendar-panel > .panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.55rem;
    }

    .dashboard-weekly-history .dashboard-panel-action,
    .entries-calendar-back {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .dashboard-meal-calendar-panel .control-strip {
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    .dashboard-meal-calendar-panel .entry-date-inline {
        min-width: 136px;
        width: 136px;
    }

    .dashboard-meal-calendar-panel .entry-date-inline input {
        padding-inline: 0.48rem;
        font-size: 0.78rem;
    }

    .entries-calendar-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .entries-calendar-controls label,
    .entries-calendar-controls .entry-date-inline {
        min-width: 0;
        width: 100%;
    }

    .entries-calendar-controls input,
    .entries-calendar-controls select {
        padding-inline: 0.5rem;
        font-size: 0.8rem;
    }

    .profile-title {
        align-items: flex-start;
    }

    .entry-datetime-inline {
        justify-content: stretch;
        width: 100%;
    }

    .entry-date-inline,
    .entry-time-inline {
        min-width: 0;
        width: 100%;
    }

    .auth-copy-login {
        padding: 0.4rem 0.25rem;
    }

    .login-brand-image {
        width: 64px;
        height: 64px;
    }

    .entry-data-head {
        gap: 0.65rem;
    }

    .entry-datetime-inline {
        width: 100%;
    }

    .workout-toggle-row {
        grid-template-columns: 1fr auto;
    }

    .entry-workout-toggle {
        width: 100%;
    }

    .goal-editor-grid,
    .goal-summary-grid,
    .entries-two-col,
    .workout-row,
    .team-metric-detail-grid,
    .team-active-challenge-meta,
    .team-active-challenge-objectives.has-two,
    .team-challenge-detail-objectives.has-two,
    .team-challenge-detail-meta,
    .team-member-summary,
    .team-member-stat-grid,
    .week-day-primary,
    .week-day-secondary,
    .week-day-habits {
        grid-template-columns: 1fr;
    }

    .profile-achievement-card {
        grid-template-columns: 1fr;
    }

    .profile-achievement-media {
        width: 100%;
        min-height: 120px;
    }

    .photo-post-layout {
        grid-template-columns: 1fr;
    }

    .photo-post {
        padding: 0.82rem;
    }

    .photo-post-head {
        gap: 0.55rem;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .photo-post-head-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }

    .photo-back-btn {
        width: fit-content;
    }

    .photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .photo-grid img,
    .photo-card-media .entries-calendar-empty {
        height: 132px;
    }

    .photo-grid figcaption {
        padding: 0.5rem;
        font-size: 0.76rem;
    }

    .calories-overview .metric-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.12rem;
    }

    .team-settings-top {
        display: none;
    }

    .team-settings-bottom {
        display: inline-flex;
        order: 999;
        margin-top: 0.4rem;
    }

    .team-goal-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .team-layout-item {
        order: var(--team-mobile-order, var(--team-order, 50));
    }

    .team-leaderboard-card {
        grid-template-columns: 1fr;
        gap: 0.58rem;
        padding: 0.68rem;
    }

    .team-leaderboard-card-head {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.48rem;
    }

    .team-leaderboard-card-head .badge {
        grid-column: 2;
        justify-self: start;
        width: fit-content;
    }

    .team-leaderboard-user strong,
    .team-leaderboard-user small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .team-rank {
        min-width: 34px;
        height: 30px;
    }

    .team-leaderboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .team-leaderboard-metrics > span {
        padding: 0.42rem 0.48rem;
    }

    .team-goal-card {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 0.68rem;
    }

    .team-goal-actions-menu > summary {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        padding: 0;
    }

    .team-members-panel .card-list {
        grid-template-columns: 1fr;
    }

    .team-members-panel .member-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.55rem;
        padding: 0.62rem;
    }

    .team-members-panel .member-card .btn {
        width: auto;
        padding-inline: 0.55rem;
    }

    .team-achievement-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.58rem;
        min-height: 0;
        padding: 0.66rem;
    }

    .team-achievement-media {
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }

    .team-active-challenge-values span {
        font-size: 1.18rem;
    }

    .notification-card {
        padding: 0.62rem 0.65rem;
        gap: 0.52rem;
    }

    .notification-main p {
        font-size: 0.82rem;
    }

    .notification-actions {
        gap: 0.3rem;
    }

    .notification-action-btn {
        width: 1.9rem;
        height: 1.9rem;
        min-width: 1.9rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .topbar .topbar-add-menu,
    .topbar .btn-add,
    .topbar [data-add-button] {
        display: none !important;
    }

    .proof-photo-grid {
        grid-template-columns: 1fr;
    }

    .proof-photo-main-card,
    .proof-photo-side-card {
        padding: 0.78rem;
    }

    .photo-post {
        gap: 0.85rem;
    }

    .photo-post-head-actions {
        gap: 0.35rem;
    }

    .photo-post-layout {
        gap: 0.85rem;
    }

    .photo-post-media img {
        min-height: 220px;
        max-height: 60vh;
        object-fit: contain;
        background: #edf3f0;
    }

    .photo-post-nutrition li {
        font-size: 0.8rem;
    }

    .photo-comment-head {
        flex-direction: column;
        gap: 0.45rem;
    }

    .photo-comment-actions {
        justify-content: stretch;
    }

    .photo-comment-actions .btn {
        width: 100%;
    }

    .auth-shell-login {
        gap: 0.85rem;
    }

    .auth-copy-login {
        order: 1;
    }

    .auth-card-login {
        order: 2;
    }
}

@media (max-width: 899px) {
    .dashboard-layout-context {
        display: none;
    }
}

@media (max-width: 700px) {
    .dashboard-desktop-table-wrap {
        display: none;
    }

    .analytics-controls {
        grid-template-columns: 1fr;
    }

    .analytics-nav-links {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.2rem;
    }

    .analytics-nav-links .btn {
        flex: 0 0 auto;
    }

    .analytics-hero,
    .analytics-section-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-mobile-card-list {
        display: grid;
        gap: 0.62rem;
    }

    .dashboard-weekly-history .panel-head {
        align-items: center;
        gap: 0.5rem;
    }

    .dashboard-weekly-history .panel-head h2 {
        margin-bottom: 0;
    }

    .dashboard-mobile-card {
        padding: 0.68rem;
        gap: 0.56rem;
    }

    .dashboard-mobile-card-head {
        gap: 0.38rem;
    }

    .dashboard-mobile-card-head .badge {
        padding: 0.14rem 0.44rem;
        font-size: 0.68rem;
        white-space: nowrap;
    }

    .dashboard-mobile-metrics {
        gap: 0.34rem;
    }

    .dashboard-mobile-metrics > span {
        padding: 0.4rem 0.42rem;
    }

    .dashboard-mobile-actions .btn {
        min-height: 32px;
        padding: 0.28rem 0.5rem;
        font-size: 0.72rem;
    }

    .dashboard-weekly-history .table-wrap {
        overflow: visible;
    }

    .responsive-card-table,
    .responsive-card-table thead,
    .responsive-card-table tbody,
    .responsive-card-table tr,
    .responsive-card-table th,
    .responsive-card-table td {
        display: block;
    }

    /* .table sets a 620px min-width so it can scroll horizontally inside
       .table-wrap. .responsive-card-table opts out of that layout entirely
       (it re-flows into stacked cards below), so it must not inherit that
       min-width - otherwise every card is forced to 620px wide inside a
       ~320px wrapper and the right-aligned value column renders off-screen. */
    .responsive-card-table {
        min-width: 0;
    }

    .responsive-card-table thead {
        display: none;
    }

    .responsive-card-table tbody {
        display: grid;
        gap: 0.65rem;
    }

    .responsive-card-table tr {
        display: grid;
        gap: 0.36rem;
        padding: 0.72rem;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #fff;
        box-shadow: 0 8px 20px rgba(22, 35, 43, 0.07);
    }

    .responsive-card-table td {
        display: grid;
        grid-template-columns: minmax(95px, 0.75fr) minmax(0, 1fr);
        gap: 0.55rem;
        align-items: center;
        padding: 0;
        border: 0;
        text-align: right;
    }

    .responsive-card-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
    }

    .responsive-card-table td:first-child {
        grid-template-columns: 1fr;
        text-align: left;
        font-weight: 850;
    }

    .responsive-card-table td:first-child::before {
        margin-bottom: -0.12rem;
    }

    .responsive-card-table .penalty-chip {
        justify-self: end;
    }

    .dashboard-week-actions {
        display: flex;
        justify-content: flex-end;
        width: auto;
        gap: 0.32rem;
    }

    .dashboard-week-actions .btn {
        width: auto;
        min-height: 32px;
        padding: 0.3rem 0.5rem;
        font-size: 0.74rem;
    }

    .compact-segmented-control {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .compact-segmented-control .btn {
        justify-content: center;
        min-width: 0;
        padding-inline: 0.38rem;
        font-size: 0.76rem;
    }

    .dashboard-calories-head {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
    }

    .dashboard-calories-title-row {
        gap: 0.42rem;
    }

    .dashboard-calories-title-row .badge {
        font-size: 0.68rem;
        padding: 0.14rem 0.42rem;
    }

    .team-leaderboard-panel .panel-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.45rem;
        margin-bottom: 0.52rem;
    }

    .team-leaderboard-panel .panel-head > div {
        min-width: 0;
    }

    .team-leaderboard-panel .panel-head h2 {
        margin-bottom: 0;
        line-height: 1.1;
    }

    .team-leaderboard-panel .metric-help-popover {
        flex: 0 0 auto;
        align-self: center;
    }

    .team-leaderboard-card {
        grid-template-columns: 1fr;
        gap: 0.52rem;
        padding: 0.62rem;
    }

    .team-leaderboard-card-head {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.42rem;
    }

    .team-leaderboard-card-head .badge {
        grid-column: auto;
        justify-self: end;
        width: auto;
        max-width: 92px;
        padding: 0.12rem 0.42rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.68rem;
    }

    .team-rank {
        min-width: 32px;
        height: 30px;
        border-radius: 9px;
        font-size: 0.78rem;
    }

    .team-leaderboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.36rem;
    }

    .team-leaderboard-metrics > span {
        padding: 0.38rem 0.45rem;
    }

    .team-leaderboard-strikes small {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        flex-wrap: wrap;
    }

    .team-goal-card {
        position: relative;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
        padding: 0.62rem;
    }

    .team-goal-main {
        gap: 0.45rem;
    }

    .team-goal-head {
        flex-direction: row;
        align-items: flex-start;
        padding-right: 0.2rem;
    }

    .team-goal-head strong {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .team-goal-status {
        flex: 0 0 auto;
        font-size: 0.66rem;
        padding: 0.1rem 0.42rem;
    }

    .team-goal-objective-grid,
    .team-goal-objective-grid.has-two,
    .team-goal-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.36rem;
    }

    .team-goal-objective-grid,
    .team-goal-objective-grid.has-two {
        grid-template-columns: 1fr;
    }

    .team-goal-objective-pill,
    .team-goal-meta-grid > span {
        padding: 0.34rem 0.4rem;
    }

    .team-goal-objective-pill small,
    .team-goal-meta-grid small {
        font-size: 0.62rem;
    }

    .team-goal-objective-pill strong,
    .team-goal-meta-grid strong,
    .team-goal-progress-text {
        font-size: 0.78rem;
    }

    .team-goal-actions-menu {
        align-self: start;
    }

    .team-goal-form {
        grid-template-columns: 1fr;
    }

    .team-goal-form-full {
        grid-column: auto;
    }

    .confirm-modal-card.team-goal-modal-card {
        width: min(96vw, 560px);
        max-height: calc(100dvh - 1rem);
        padding: 0.9rem;
    }

    .team-panel-count-badge {
        display: none;
    }

    .team-mobile-title-badge {
        display: inline-flex;
        transform: translateY(-1px);
    }

    .team-members-panel .member-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.48rem;
        padding: 0.56rem;
    }

    .team-members-panel .member-card .btn {
        min-height: 32px;
        padding: 0.28rem 0.48rem;
        font-size: 0.72rem;
    }

    .team-achievement-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.48rem;
        padding: 0.58rem;
        align-items: center;
    }

    .team-achievement-media {
        width: 48px;
        height: 48px;
        border-radius: 11px;
    }

    .team-achievement-body {
        gap: 0.1rem;
    }

    .team-achievement-body p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .profile-achievement-card {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 0.58rem;
        padding: 0.62rem;
        align-items: center;
    }

    .profile-achievement-media {
        width: 52px;
        height: 52px;
        min-height: 52px;
        border-radius: 12px;
    }

    .profile-achievement-card .profile-achievement-media img {
        min-height: 52px;
    }

    .achievement-card-meta {
        gap: 0.22rem;
    }

    .achievement-chip {
        min-height: 22px;
        padding: 0.12rem 0.38rem;
        font-size: 0.66rem;
    }

    .achievement-remove {
        opacity: 1;
        pointer-events: auto;
    }

    .achievement-delete-btn {
        width: 22px;
        height: 22px;
        font-size: 0.92rem;
    }
}
/* Achievement cards v2 */
.achievement-visual {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(59, 130, 246, 0.16));
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    overflow: hidden;
}

.achievement-visual svg,
.achievement-icon-option-media svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #0f766e;
}

.achievement-visual-image img,
.achievement-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.achievement-card[data-achievement-modal] {
    cursor: pointer;
    outline: none;
}

.achievement-card[data-achievement-modal]:focus-visible {
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.28), var(--shadow);
}

.profile-achievement-card,
.team-achievement-card,
.achievement-list-card,
.teamMemberDetail .achievement-card {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    gap: 0.85rem;
    min-height: 150px;
    height: 150px;
    overflow: hidden;
}

.achievement-list-card {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 188px;
    height: 188px;
    padding-right: 2.5rem;
    border-color: rgba(255, 255, 255, 0.68);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(247, 253, 250, 0.7)),
        rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07);
    backdrop-filter: blur(12px) saturate(135%);
    -webkit-backdrop-filter: blur(12px) saturate(135%);
}

.achievement-list-card.is-locked {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(241, 245, 249, 0.7)),
        rgba(255, 255, 255, 0.66);
}

.team-achievements-panel .achievement-grid-collapsible {
    --achievement-panel-card-height: 150px;
    --achievement-panel-grid-gap: 0.7rem;
    max-height: calc((var(--achievement-panel-card-height) * 2) + var(--achievement-panel-grid-gap));
}

.team-achievements-panel .achievement-grid-collapsible.expanded {
    max-height: none;
}

.achievement-card .achievement-visual {
    align-self: start;
}

.profile-achievement-content,
.team-achievement-body,
.achievement-list-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.profile-achievement-content strong,
.team-achievement-body strong,
.achievement-card > strong,
.achievement-list-content h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-achievement-content p,
.team-achievement-body p,
.achievement-card > p,
.achievement-list-content p {
    margin: 0;
    color: var(--muted);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.achievement-list-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.achievement-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 24px;
}

.achievement-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 22px;
    padding: 0.18rem 0.48rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.achievement-chip-ok {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

.achievement-chip-muted {
    background: rgba(100, 116, 139, 0.13);
    color: #475569;
}

.achievement-progress {
    display: grid;
    gap: 0.25rem;
    margin-top: auto;
}

.achievement-progress small {
    color: var(--muted);
    font-weight: 800;
}

.achievement-card.is-locked .achievement-visual {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.18), rgba(203, 213, 225, 0.28));
}

.achievement-card.is-locked .achievement-visual svg {
    color: #64748b;
}

.achievements-page-meter {
    width: min(360px, 100%);
    height: 9px;
    margin-top: 0.75rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
}

.achievements-page-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--coral));
}

.achievement-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.achievement-summary-card {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* The summary tiles hardcode a light glass background; make them dark surfaces
   in dark mode so they do not read as washed-out light boxes. */
body[data-theme="dark"] .achievement-summary-card,
body.theme-active-dark .achievement-summary-card {
    background: var(--dark-ui-surface, rgba(18, 27, 36, 0.94));
    border-color: var(--dark-ui-border, rgba(170, 193, 204, 0.2));
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .achievement-summary-card {
        background: var(--dark-ui-surface, rgba(18, 27, 36, 0.94));
        border-color: var(--dark-ui-border, rgba(170, 193, 204, 0.2));
    }
}

/* Make unlocked achievements clearly stand out from locked ones. */
.achievement-list-card.is-unlocked {
    border-color: var(--accent, #34d399);
    box-shadow: 0 14px 32px rgba(20, 163, 139, 0.16);
}

body[data-theme="dark"] .achievement-list-card.is-unlocked,
body.theme-active-dark .achievement-list-card.is-unlocked {
    border-color: var(--accent, #34d399);
}

.achievement-list-card.is-locked {
    opacity: 0.86;
}

.achievement-summary-card strong {
    color: var(--ink);
    font-size: 1.35rem;
    line-height: 1;
}

.achievement-summary-card small {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.achievement-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.85rem;
}

.achievement-toggle-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

@media (max-width: 700px) {
    .achievement-summary-strip {
        grid-template-columns: 1fr;
    }

    .team-active-challenge-head,
    .team-challenge-detail-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .team-active-challenge-head-actions {
        justify-content: flex-start;
    }
}

.achievement-info-modal-card {
    position: relative;
    max-width: 520px;
    width: min(520px, calc(100vw - 2rem));
    display: grid;
    gap: 0.75rem;
}

.achievement-info-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.07);
    color: var(--ink);
    font-weight: 900;
    cursor: pointer;
}

.achievement-info-modal-card h3 {
    margin: 0;
    padding-right: 2.5rem;
}

.achievement-info-modal-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.achievement-info-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.achievement-icon-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 0.5rem;
}

.achievement-icon-option {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
}

.achievement-icon-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.achievement-icon-option:has(input:checked) {
    border-color: rgba(14, 165, 233, 0.65);
    background: rgba(14, 165, 233, 0.1);
}

.achievement-icon-option-media {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.06);
}

.achievement-visual-fieldset {
    display: grid;
    gap: 0.75rem;
}

.dashboard-achievements-panel .panel-head {
    align-items: center;
}

.dashboard-achievements-summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.dashboard-achievements-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.dashboard-achievement-card {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 0.65rem;
    min-height: 132px;
    height: auto;
    overflow: hidden;
}

.dashboard-achievement-card .achievement-visual {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 14px;
}

.dashboard-achievement-card .achievement-visual svg {
    width: 24px;
    height: 24px;
}

.dashboard-achievement-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dashboard-achievement-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.45rem;
}

.dashboard-achievement-title-row strong {
    min-width: 0;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-achievement-content p {
    margin: 0;
    color: var(--muted);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 720px) {
    .profile-achievement-card,
    .team-achievement-card,
    .achievement-list-card,
    .teamMemberDetail .achievement-card {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 0.7rem;
        min-height: 136px;
        height: 136px;
    }

    .achievement-list-card {
        min-height: 172px;
        height: 172px;
        padding-right: 2.1rem;
    }

    .achievement-visual {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 14px;
    }

    .achievement-visual svg {
        width: 24px;
        height: 24px;
    }

    .achievement-list-title-row {
        align-items: flex-start;
    }

    .achievement-list-content h3,
    .profile-achievement-content strong,
    .team-achievement-body strong {
        font-size: 0.95rem;
    }

    .achievement-chip {
        font-size: 0.7rem;
        padding-inline: 0.42rem;
    }

    .achievement-page-grid {
        grid-template-columns: 1fr;
    }

    .achievement-icon-picker {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-achievements-panel .panel-head {
        align-items: flex-start;
        gap: 0.7rem;
    }

    .dashboard-achievements-summary {
        width: 100%;
        justify-content: flex-start;
    }

    .dashboard-achievements-summary .dashboard-panel-action {
        margin-left: auto;
    }

    .dashboard-achievements-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .dashboard-achievement-card {
        min-height: 146px;
        height: auto;
        grid-template-columns: 1fr;
        align-content: start;
        gap: 0.42rem;
        padding: 0.58rem;
    }

    .dashboard-achievement-card .achievement-visual {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .dashboard-achievement-title-row {
        display: grid;
        gap: 0.28rem;
    }

    .dashboard-achievement-content p {
        -webkit-line-clamp: 3;
        font-size: 0.78rem;
    }

}

.achievements-page-header,
.achievement-summary-strip,
.achievement-filter-tabs,
.achievements-page-panel {
    width: min(100%, 920px);
    margin-inline: auto;
}

.achievements-page-header { margin-bottom: 0.7rem; }
.achievement-filter-tabs { margin-bottom: 0.8rem; }
.achievements-page-panel { margin-bottom: 0.8rem; }

.achievements-page-panel .achievement-list-card {
    min-height: 176px;
    height: auto;
}

.achievements-page-panel .achievement-list-content h3,
.achievements-page-panel .achievement-list-content p {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

.achievements-page-panel .achievement-list-content h3 {
    overflow-wrap: anywhere;
}

.achievements-page-panel .achievement-chip {
    height: auto;
    min-height: 22px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Mobile polish pass: Calendar, dashboard, analytics, team and profile. */
.entries-calendar-screen {
    gap: 0.75rem;
}

.entries-calendar-panel,
.entries-calendar-photos-panel {
    overflow: hidden;
}

.entries-calendar-head,
.dashboard-panel-head-compact,
.analytics-section-title {
    align-items: center;
    flex-direction: row;
}

.entries-calendar-create,
.entries-calendar-gallery,
.dashboard-panel-head-compact > .badge,
.dashboard-panel-head-compact .dashboard-achievements-summary {
    margin-left: auto;
}

.entries-calendar-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
}

.entries-calendar-head-actions .entries-calendar-gallery,
.entries-calendar-head-actions .entries-calendar-create {
    margin-left: 0;
}

.entries-calendar-controls {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.75rem;
}

.calendar-view-segments,
.analytics-period-segments {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    padding: 0.18rem;
    border: 1px solid rgba(210, 220, 215, 0.84);
    border-radius: 999px;
    background: rgba(247, 251, 249, 0.88);
}

.calendar-view-segments a,
.analytics-period-segments a {
    min-height: 34px;
    padding: 0.44rem 0.78rem;
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.calendar-view-segments a.active,
.analytics-period-segments a.active {
    color: var(--ink);
    background: #fff;
    box-shadow: 0 6px 16px rgba(22, 35, 43, 0.1), inset 0 0 0 1px rgba(20, 163, 139, 0.14);
}

.entries-calendar {
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(222, 228, 225, 0.95);
    border-radius: 18px;
    background: rgba(222, 228, 225, 0.95);
}

.entries-calendar.meal-calendar-month {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.entries-calendar.meal-calendar-week {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.entries-calendar.meal-calendar-day {
    grid-template-columns: minmax(0, 1fr);
}

.entries-calendar-day article {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #f6f8f7;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.entries-calendar-day strong {
    position: absolute;
    left: 0.36rem;
    top: 0.32rem;
    z-index: 2;
    padding: 0.16rem 0.34rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--ink);
    font-size: 0.66rem;
    backdrop-filter: blur(10px);
}

.entries-calendar-day img,
.entries-calendar-empty {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    object-fit: cover;
}

.entries-calendar-empty {
    background: linear-gradient(135deg, #f2f5f3, #e9efec);
    font-size: 0.68rem;
}

.entries-calendar-day .badge {
    right: 0.28rem;
    bottom: 0.28rem;
    padding: 0.12rem 0.34rem;
    border: 0;
    background: rgba(255, 255, 255, 0.82);
    font-size: 0.62rem;
    backdrop-filter: blur(10px);
}

.entries-calendar-day:hover article,
.entries-calendar-day:focus-visible article {
    border-color: transparent;
    transform: scale(0.985);
}

.entries-calendar-day.is-selected article {
    box-shadow: inset 0 0 0 2px var(--primary), inset 0 0 0 4px rgba(255, 255, 255, 0.72);
}

.entries-calendar-photos-panel .photo-grid {
    gap: 1px;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(222, 228, 225, 0.95);
}

.entries-calendar-photos-panel .photo-card {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: #f6f8f7;
}

.entries-calendar-photos-panel .photo-card-media,
.entries-calendar-photos-panel .photo-card-media img,
.entries-calendar-photos-panel .photo-card-media .entries-calendar-empty {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 0;
    object-fit: cover;
}

.entries-calendar-photos-panel figcaption {
    display: none;
}

.dashboard-mobile-layout-context {
    display: none;
}

.dashboard-mobile-edit-entry {
    display: none;
}

.dashboard-layout-editor-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.38rem;
    padding: 0.34rem 0.42rem;
    cursor: default;
}

.dashboard-layout-toggle {
    min-height: 30px;
}

.dashboard-layout-toggle input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.dashboard-layout-mobile-actions {
    display: inline-flex;
    gap: 0.2rem;
}

.dashboard-layout-context .dashboard-layout-mobile-actions {
    display: none;
}

.dashboard-mobile-layout-context .dashboard-layout-mobile-actions {
    display: inline-flex;
}

.dashboard-layout-mobile-actions .btn {
    min-width: 30px;
    min-height: 30px;
    padding: 0;
}

.dashboard-penalty-head {
    gap: 0.6rem;
}

.dashboard-penalty-amount {
    margin-left: auto;
}

.dashboard-layout-edit-mode-panel,
.team-layout-edit-mode-panel {
    border-style: solid;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 249, 0.9)),
        rgba(255, 255, 255, 0.82);
}

/* In dark mode the panel must be a dark surface, otherwise the (light) labels
   render white-on-white and the whole editor looks blank. */
body[data-theme="dark"] .dashboard-layout-edit-mode-panel,
body[data-theme="dark"] .team-layout-edit-mode-panel,
body.theme-active-dark .dashboard-layout-edit-mode-panel,
body.theme-active-dark .team-layout-edit-mode-panel {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border-color: var(--line);
}

body[data-theme="dark"] .dashboard-layout-edit-mode-panel .team-layout-editor-actions,
body[data-theme="dark"] .team-layout-edit-mode-panel .team-layout-editor-actions,
body.theme-active-dark .dashboard-layout-edit-mode-panel .team-layout-editor-actions,
body.theme-active-dark .team-layout-edit-mode-panel .team-layout-editor-actions {
    background: linear-gradient(180deg, transparent, var(--surface) 35%);
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .dashboard-layout-edit-mode-panel,
    body[data-theme="auto"] .team-layout-edit-mode-panel {
        background: linear-gradient(180deg, var(--surface-2), var(--surface));
        border-color: var(--line);
    }

    body[data-theme="auto"] .dashboard-layout-edit-mode-panel .team-layout-editor-actions,
    body[data-theme="auto"] .team-layout-edit-mode-panel .team-layout-editor-actions {
        background: linear-gradient(180deg, transparent, var(--surface) 35%);
    }
}

.dashboard-layout-edit-mode-panel .dashboard-layout-editor,
.team-layout-edit-mode-panel .team-layout-editor {
    display: grid;
    border-top: 0;
    padding-top: 0;
}

.dashboard-layout-edit-card,
.team-layout-edit-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0.42rem;
    cursor: default;
}

.dashboard-layout-edit-card .dashboard-layout-mobile-actions,
.team-layout-edit-card .team-layout-mobile-actions {
    justify-content: flex-end;
    order: -1;
}

.dashboard-achievements-summary {
    justify-content: flex-end;
}

.dashboard-weekly-compact-list {
    gap: 0.34rem;
}

.dashboard-week-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.48rem;
    padding: 0.56rem 0.62rem;
    border: 1px solid rgba(217, 226, 221, 0.86);
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.dashboard-week-row-main,
.dashboard-week-row-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.dashboard-week-row-main strong {
    overflow: hidden;
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-week-row-meta {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    justify-content: flex-end;
}

.dashboard-week-warn { white-space: nowrap; }

.dashboard-week-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--muted);
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    white-space: nowrap;
}
.dashboard-week-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}
.dashboard-week-status.is-complete,
.dashboard-week-status.is-approved {
    color: var(--good, #19a974);
    background: color-mix(in srgb, var(--good, #19a974) 13%, transparent);
}
.dashboard-week-status.is-rejected,
.dashboard-week-status.is-failed {
    color: var(--bad, #df4c43);
    background: color-mix(in srgb, var(--bad, #df4c43) 13%, transparent);
}
.dashboard-week-status.is-in_progress,
.dashboard-week-status.is-pending {
    color: #c17d00;
    background: color-mix(in srgb, #f5b94b 15%, transparent);
}

.analytics-filter-panel {
    grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.7fr);
}

.analytics-viewing-summary {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.analytics-viewing-summary strong {
    font-size: 1.05rem;
}

.analytics-viewing-summary small {
    color: var(--muted);
    font-weight: 750;
}

.analytics-period-segments,
.analytics-nav-links {
    grid-column: 1 / -1;
}

.analytics-date-filter {
    grid-column: span 1;
}

.profile-hero {
    position: relative;
    justify-content: space-between;
    gap: 0.85rem;
}

.profile-tagline-editor {
    position: relative;
    justify-self: end;
}

.profile-tagline-edit svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-tagline-editor summary::-webkit-details-marker {
    display: none;
}

.profile-tagline-form {
    position: absolute;
    right: 0;
    top: calc(100% + 0.45rem);
    z-index: 40;
    display: grid;
    gap: 0.55rem;
    width: min(340px, calc(100vw - 2rem));
    padding: 0.78rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 42px rgba(22, 35, 43, 0.18);
    backdrop-filter: blur(18px);
}

.profile-tagline-actions {
    display: flex;
    justify-content: flex-end;
}

.team-mobile-combo-card {
    display: none;
}

@media (max-width: 899px) {
    .floating-log {
        --mobile-fab-size: 54px;
    }

    .dashboard-layout-edit-mode-panel,
    .entries-calendar-panel,
    .entries-calendar-mobile-gallery-panel {
        padding: 0.72rem;
    }

    .dashboard-layout-edit-mode-panel,
    .team-layout-edit-mode-panel {
        position: sticky;
        top: 4.45rem;
        z-index: 30;
        border-radius: 22px;
        box-shadow: 0 18px 46px rgba(22, 35, 43, 0.16);
    }

    .dashboard-layout-edit-mode-panel .team-layout-editor-actions,
    .team-layout-edit-mode-panel .team-layout-editor-actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding-top: 0.48rem;
        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.96) 35%);
    }

    .dashboard-layout-edit-card,
    .team-layout-edit-card {
        padding: 0.48rem;
        border-radius: 14px;
    }

    .dashboard-mobile-layout-context {
        display: grid;
        gap: 0.58rem;
    }

    .dashboard-mobile-layout-context[open] {
        position: fixed;
        left: 0.65rem;
        right: 0.65rem;
        bottom: calc(0.65rem + env(safe-area-inset-bottom));
        z-index: 90;
        max-height: min(78vh, 680px);
        overflow: auto;
        padding: 0.9rem;
        border-radius: 26px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 252, 249, 0.92)),
            rgba(255, 255, 255, 0.88);
        box-shadow: 0 24px 70px rgba(22, 35, 43, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.78);
        backdrop-filter: blur(26px) saturate(1.35);
        -webkit-backdrop-filter: blur(26px) saturate(1.35);
    }

    .dashboard-mobile-layout-context[open] .dashboard-edit-layout-trigger {
        justify-content: center;
        border-radius: 18px;
        background: rgba(237, 248, 244, 0.88);
    }

    .dashboard-mobile-edit-entry {
        display: inline-flex;
    }

    .dashboard-layout-context {
        display: none;
    }

    .dashboard-layout-editor-mobile {
        border-top: 0;
        padding-top: 0.2rem;
    }

    .dashboard-panel-head-compact {
        display: flex !important;
        align-items: center;
        flex-direction: row !important;
        gap: 0.48rem;
    }

    .dashboard-panel-head-compact > div {
        min-width: 0;
    }

    .dashboard-panel-head-compact > .badge {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .dashboard-panel-head-compact h2 {
        margin: 0;
        font-size: 1rem;
    }

    .dashboard-achievements-panel .panel-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .dashboard-achievements-summary .btn {
        min-height: 34px;
        padding: 0.34rem 0.58rem;
    }

    .dashboard-achievements-panel .muted.small {
        display: none;
    }

    .team-mobile-combo-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        padding: 0;
        overflow: hidden;
    }

    .team-mobile-combo-card a {
        display: grid;
        gap: 0.2rem;
        padding: 0.68rem;
        color: inherit;
        text-decoration: none;
    }

    .team-mobile-combo-card a + a {
        border-left: 1px solid var(--line);
    }

    .team-mobile-combo-card span {
        color: var(--muted);
        font-size: 0.68rem;
        font-weight: 850;
        text-transform: uppercase;
    }

    .team-mobile-combo-card strong {
        font-size: 1.05rem;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 700px) {
    .entries-calendar-hero,
    .entries-calendar-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .entries-calendar-head {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 0.55rem;
    }

    .entries-calendar-head > div {
        min-width: 0;
    }

    .entries-calendar-head h2 {
        font-size: 1.05rem;
        line-height: 1.08;
    }

    .entries-calendar-head-actions {
        gap: 0.32rem;
    }

    .entries-calendar-head-actions .btn {
        min-height: 40px;
        padding-inline: 0.68rem;
        font-size: 0.76rem;
    }

    .entries-calendar-create {
        flex: 0 0 auto;
        min-height: 42px;
        padding-inline: 0.82rem;
        border-radius: 999px;
        box-shadow: 0 10px 24px rgba(20, 163, 139, 0.16);
        white-space: nowrap;
    }

    .entries-calendar-controls {
        gap: 0.48rem;
    }

    .calendar-view-segments,
    .analytics-period-segments {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .analytics-period-segments {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-view-segments a,
    .analytics-period-segments a {
        text-align: center;
        padding-inline: 0.42rem;
    }

    .entries-calendar.meal-calendar-month,
    .entries-calendar.meal-calendar-week {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .entries-calendar-day strong {
        left: 0.18rem;
        top: 0.18rem;
        padding: 0.08rem 0.22rem;
        font-size: 0.56rem;
    }

    .entries-calendar-day .badge {
        display: none;
    }

    .entries-calendar-empty {
        font-size: 0;
    }

    .entries-calendar-photos-panel .photo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .analytics-filter-panel {
        grid-template-columns: 1fr;
    }

    .analytics-user-filter,
    .analytics-date-filter,
    .analytics-viewing-summary {
        grid-column: 1 / -1;
    }

    .analytics-nav-links {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .profile-hero {
        align-items: flex-start;
    }

    /* Keep the export button and the edit pencil in a clean two-column row so
       the pencil never floats over (and truncates) the export button. */
    .profile-hero-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 0.5rem;
        width: 100%;
        justify-self: stretch;
        align-items: center;
    }

    .profile-tagline-editor {
        position: static;
        justify-self: stretch;
    }

    .profile-hero-actions.has-friend-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-tagline-edit {
        width: 44px;
        height: 44px;
        justify-content: center;
    }

    .profile-pdf-export-btn {
        width: 100%;
        justify-content: center;
    }

    .gallery-page {
        gap: 0.45rem;
        margin-inline: -0.75rem;
    }

    .gallery-toolbar {
        padding: 0 0.75rem;
    }

    .gallery-toolbar h1 {
        font-size: 1.55rem;
    }

    .gallery-actions .btn {
        min-height: 38px;
        padding-inline: 0.62rem;
        font-size: 0.74rem;
    }

    .gallery-filter {
        padding-inline: 0.75rem;
    }

    .photos-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-inline: 0;
        border-radius: 0;
    }

    .photos-gallery-date {
        right: 0.32rem;
        bottom: 0.3rem;
        font-size: 0.62rem;
    }

    .gallery-pagination,
    .gallery-empty {
        margin-inline: 0.75rem;
    }
}

/* Theme mode + mobile photos calendar pass. */
body[data-theme="light"] {
    color-scheme: light;
}

body[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1117;
    --surface: #121b24;
    --surface-2: #182532;
    --ink: #edf7f4;
    --muted: #9fb0ba;
    --line: rgba(174, 194, 203, 0.18);
    --border: rgba(174, 194, 203, 0.18);
    --glass: rgba(20, 31, 42, 0.64);
    --glass-strong: rgba(22, 34, 46, 0.84);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-shadow: 0 20px 52px rgba(0, 0, 0, 0.35);
    background:
        radial-gradient(circle at 12% 0%, rgba(20, 163, 139, 0.24), transparent 35%),
        radial-gradient(circle at 88% 18%, rgba(59, 130, 246, 0.16), transparent 30%),
        #0b1117;
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] {
        color-scheme: dark;
        --bg: #0b1117;
        --surface: #121b24;
        --surface-2: #182532;
        --ink: #edf7f4;
        --muted: #9fb0ba;
        --line: rgba(174, 194, 203, 0.18);
        --border: rgba(174, 194, 203, 0.18);
        --glass: rgba(20, 31, 42, 0.64);
        --glass-strong: rgba(22, 34, 46, 0.84);
        --glass-border: rgba(255, 255, 255, 0.14);
        --glass-shadow: 0 20px 52px rgba(0, 0, 0, 0.35);
        background:
            radial-gradient(circle at 12% 0%, rgba(20, 163, 139, 0.24), transparent 35%),
            radial-gradient(circle at 88% 18%, rgba(59, 130, 246, 0.16), transparent 30%),
            #0b1117;
    }
}

body[data-theme="dark"] .panel,
body[data-theme="dark"] .metric-card,
body[data-theme="dark"] .chart-card,
body[data-theme="dark"] .pending-card,
body[data-theme="dark"] .leaderboard-row,
body[data-theme="dark"] .dashboard-week-row,
body[data-theme="dark"] .photo-grid figure,
body[data-theme="dark"] .photo-grid figcaption,
body[data-theme="dark"] .add-menu-panel,
body[data-theme="dark"] .user-menu-panel,
body[data-theme="dark"] .topbar {
    background: rgba(18, 27, 36, 0.9);
    border-color: var(--line);
    color: var(--ink);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
}

body[data-theme="dark"] .badge {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--line);
    color: var(--muted);
}

body[data-theme="dark"] .badge.badge-ok {
    background: rgba(25, 169, 116, 0.16);
    border-color: rgba(25, 169, 116, 0.4);
    color: #6be3b5;
}

body[data-theme="dark"] .badge.badge-warn {
    background: rgba(245, 185, 75, 0.16);
    border-color: rgba(245, 185, 75, 0.4);
    color: #f5cd7e;
}

body[data-theme="dark"] .badge.badge-bad {
    background: rgba(223, 76, 67, 0.18);
    border-color: rgba(223, 76, 67, 0.45);
    color: #ff9d95;
}

body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
    background: rgba(8, 14, 20, 0.78);
    border-color: var(--line);
    color: var(--ink);
}

body[data-theme="dark"] .entries-calendar,
body[data-theme="dark"] .entries-calendar-photos-panel .photo-grid,
body[data-theme="dark"] .entries-calendar-mobile-gallery,
body[data-theme="dark"] .photos-gallery-grid {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.12);
}

body[data-theme="dark"] .entries-calendar-day article,
body[data-theme="dark"] .entries-calendar-empty,
body[data-theme="dark"] .entries-calendar-mobile-tile,
body[data-theme="dark"] .photos-gallery-tile,
body[data-theme="dark"] .calendar-empty-state,
body[data-theme="dark"] .gallery-empty {
    background: #17222d;
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .panel,
    body[data-theme="auto"] .metric-card,
    body[data-theme="auto"] .chart-card,
    body[data-theme="auto"] .pending-card,
    body[data-theme="auto"] .leaderboard-row,
    body[data-theme="auto"] .dashboard-week-row,
    body[data-theme="auto"] .photo-grid figure,
    body[data-theme="auto"] .photo-grid figcaption,
    body[data-theme="auto"] .add-menu-panel,
    body[data-theme="auto"] .user-menu-panel,
    body[data-theme="auto"] .topbar {
        background: rgba(18, 27, 36, 0.9);
        border-color: var(--line);
        color: var(--ink);
        box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
    }

    body[data-theme="auto"] .badge {
        background: rgba(255, 255, 255, 0.06);
        border-color: var(--line);
        color: var(--muted);
    }

    body[data-theme="auto"] .badge.badge-ok {
        background: rgba(25, 169, 116, 0.16);
        border-color: rgba(25, 169, 116, 0.4);
        color: #6be3b5;
    }

    body[data-theme="auto"] .badge.badge-warn {
        background: rgba(245, 185, 75, 0.16);
        border-color: rgba(245, 185, 75, 0.4);
        color: #f5cd7e;
    }

    body[data-theme="auto"] .badge.badge-bad {
        background: rgba(223, 76, 67, 0.18);
        border-color: rgba(223, 76, 67, 0.45);
        color: #ff9d95;
    }

    body[data-theme="auto"] input,
    body[data-theme="auto"] select,
    body[data-theme="auto"] textarea {
        background: rgba(8, 14, 20, 0.78);
        border-color: var(--line);
        color: var(--ink);
    }

    body[data-theme="auto"] .entries-calendar,
    body[data-theme="auto"] .entries-calendar-photos-panel .photo-grid,
    body[data-theme="auto"] .entries-calendar-mobile-gallery,
    body[data-theme="auto"] .photos-gallery-grid {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.12);
    }

    body[data-theme="auto"] .entries-calendar-day article,
    body[data-theme="auto"] .entries-calendar-empty,
    body[data-theme="auto"] .entries-calendar-mobile-tile,
    body[data-theme="auto"] .photos-gallery-tile,
    body[data-theme="auto"] .calendar-empty-state,
    body[data-theme="auto"] .gallery-empty {
        background: #17222d;
    }

}

/* Compact social, settings, gallery and notification surfaces. */
.gallery-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0 0.35rem;
    text-align: left;
}

.gallery-page-header h1,
.gallery-page-header p {
    margin: 0;
    text-align: left;
}

.squad-card {
    padding: 0.75rem;
}

.squad-secondary-actions {
    margin-top: 0.55rem;
    border-top: 1px solid var(--line);
}

.squad-secondary-actions > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    color: var(--primary-dark);
    font-size: 0.76rem;
    font-weight: 850;
    cursor: pointer;
    list-style: none;
}

.squad-secondary-actions > summary::-webkit-details-marker {
    display: none;
}

.squad-secondary-actions[open] > summary span {
    transform: rotate(90deg);
}

.squad-secondary-actions-body {
    display: grid;
    gap: 0.55rem;
    padding: 0.2rem 0 0.35rem;
}

.squad-secondary-actions-body :is(.squad-add-form, .squad-challenge-form) {
    margin: 0;
    padding: 0.55rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 96%, var(--line));
}

.notification-meta-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.08rem;
}

.notification-meta-row em {
    padding: 0.18rem 0.42rem;
    border-radius: 999px;
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 850;
}

.notification-meta-row .notification-state {
    color: var(--muted);
    background: color-mix(in srgb, var(--line) 48%, transparent);
}

.notification-card.is-unread .notification-meta-row .notification-state {
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
}

.settings-nav-grid .settings-row,
.settings-preference-group,
.settings-telegram-card .toggle-row,
.profile-goals-list .goal-row,
.weight-history-list > * {
    min-height: 0;
}

.settings-preference-group {
    gap: 0.55rem;
    padding: 0.75rem;
}

.settings-preference-fields {
    gap: 0.55rem;
}

.settings-telegram-card form.stack,
.settings-preferences-form.stack {
    gap: 0.65rem;
}

.settings-telegram-card .toggle-row .check {
    min-height: 38px;
    padding-block: 0.4rem;
}

.social-dashboard-grid .social-overview-card,
.social-dashboard-grid .panel {
    padding: 0.8rem;
}

.social-dashboard-grid .social-card-head {
    margin-bottom: 0.55rem;
}

.entry-data-form {
    gap: 0.7rem;
}

.entry-data-form .entry-form-section,
.proof-photo-main-card,
.proof-photo-side-card {
    padding: 0.75rem;
}

.proof-photo-upload-label {
    min-height: 96px;
}

@media (max-width: 700px) {
    .gallery-page-header {
        align-items: flex-end;
        padding-inline: 0.1rem;
    }

    .gallery-page-header h1 {
        font-size: 1.25rem;
    }

    .gallery-page-header .btn {
        max-width: 46%;
        white-space: nowrap;
    }

    .squad-card {
        padding: 0.65rem;
    }

    .squad-secondary-actions-body :is(.squad-add-form, .squad-challenge-form) {
        display: grid;
        grid-template-columns: 1fr;
    }

    .squad-secondary-actions-body :is(select, input, label, .btn) {
        width: 100%;
    }

    .notifications-panel {
        padding: 0.7rem;
    }

    .notification-card {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 0.5rem;
        padding: 0.6rem;
    }

    .notification-main p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .notification-actions {
        gap: 0.25rem;
    }

    .notification-actions .notification-cta {
        padding-inline: 0.45rem;
        font-size: 0.68rem;
    }

    .settings-nav-grid .settings-row {
        min-height: 52px;
        padding: 0.58rem 0.65rem;
    }

    .settings-preference-group {
        padding: 0.65rem;
    }

    .settings-preference-fields,
    .settings-telegram-card .grid-inline.two {
        grid-template-columns: 1fr;
    }

    .proof-photo-grid {
        gap: 0.65rem;
    }

    .proof-photo-main-card,
    .proof-photo-side-card {
        gap: 0.6rem;
        padding: 0.65rem;
    }

    .proof-photo-upload-block {
        padding: 0.6rem;
    }
}

/* Responsive follow-up: contextual navigation, compact progress and workout flows. */
[data-collapsible-item][hidden] {
    display: none !important;
}

.contextual-route-back {
    width: min(100%, var(--content-max, 1440px));
    margin: 0 auto 0.55rem;
}

.contextual-route-back[hidden] {
    display: none;
}

.contextual-route-back .hierarchy-back {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.06);
}

.inline-list-toggle {
    display: block;
    width: max-content;
    margin: 0.65rem auto 0;
    padding: 0.35rem 0.7rem;
    border: 0;
    color: var(--primary-dark);
    background: transparent;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.mobile-score-link {
    text-decoration: none;
}

.mobile-score-link strong small {
    color: var(--muted);
    font-size: 0.72em;
    font-weight: 750;
}

.dashboard-achievement-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.dashboard-achievement-row {
    min-height: 76px;
    grid-template-columns: 54px minmax(0, 1fr);
    padding: 0.65rem;
}

.dashboard-achievement-row .achievement-visual {
    width: 48px;
    height: 48px;
}

.dashboard-achievement-row .dashboard-achievement-content p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0.15rem 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.dashboard-achievement-progress-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.dashboard-achievement-progress-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.52rem 0.72rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 2.5%, transparent);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.dashboard-achievement-progress-row.is-nearly-complete {
    border-color: color-mix(in srgb, var(--primary) 32%, transparent);
    background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.dashboard-achievement-progress-row .achievement-visual {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    overflow: hidden;
}

.dashboard-achievement-progress-row .achievement-visual svg {
    width: 19px;
    height: 19px;
}

.dashboard-achievement-progress-copy {
    display: grid;
    min-width: 0;
    gap: 0.34rem;
}

.dashboard-achievement-progress-copy strong {
    overflow: hidden;
    font-size: 0.88rem;
    font-weight: 680;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-track {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.ap-track .goal-progress {
    flex: 1 1 auto;
    min-width: 40px;
    height: 6px;
    margin-top: 0;
}

.ap-track small {
    flex: none;
    max-width: 52%;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-chevron {
    color: var(--muted);
    font-size: 1.3rem;
    line-height: 1;
}

.season-widget-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.leaderboard-position {
    flex: 0 0 2.4rem;
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
}

.season-ranking-hero,
.season-ranking-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.season-ranking-hero h1,
.season-ranking-hero p {
    margin: 0;
}

.season-ranking-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.season-ranking-summary > span {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.season-ranking-summary small {
    color: var(--muted);
    font-size: 0.72rem;
}

.season-ranking-list {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.season-ranking-row {
    position: relative;
    display: grid;
    grid-template-columns: 42px 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.season-ranking-row.is-me {
    border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
}

.season-ranking-row > a {
    display: grid;
    min-width: 0;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
}

/* The name/XP-bar link only wrapped its own text, leaving the rank number,
   avatar and a chunk of the row's own padding untappable (~32px tall hit box
   inside a 52px row). Stretch the link to cover the full row so the entire
   card is tappable, matching the row's already-established mobile-liquid
   tap affordance. */
.season-ranking-row > a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.season-ranking-bar,
.season-ranking-bar > span {
    display: block;
    height: 5px;
    border-radius: 999px;
}

.season-ranking-bar {
    overflow: hidden;
    background: color-mix(in srgb, var(--line) 82%, transparent);
}

.season-ranking-bar > span {
    background: linear-gradient(90deg, var(--primary), #f59e0b);
}

.profile-team-list {
    display: grid;
    gap: 0.45rem;
}

.profile-team-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.52rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: inherit;
    text-decoration: none;
}

.profile-team-row-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #2563eb);
    font-size: 0.68rem;
    font-weight: 900;
}

.profile-team-row > span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.profile-team-row small {
    color: var(--muted);
    font-size: 0.7rem;
}

/* Desktop/tablet: the sheet has no mobile accordion, so the day column showed
   nothing at all (this element used to be hidden unconditionally, with only
   the <700px block giving it a layout). Show the weekday + date as static
   text here; the per-day metrics, status dot and chevron stay mobile-only
   since desktop already has dedicated columns for that data. */
.week-day-summary {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: default;
}

/* Selector repeats .sheet-day-cell (already required by these elements'
   only place of use) purely to out-specificity ".sheet-day-cell span",
   which otherwise forces these back to display:block on top of the title. */
.sheet-day-cell .week-day-summary-metrics,
.sheet-day-cell .week-day-summary-state,
.sheet-day-cell .week-day-summary-chevron {
    display: none;
}

.workouts-today-card {
    display: grid;
    gap: 0.75rem;
    border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 7%, var(--surface)), var(--surface));
}

.workouts-today-card > .panel-head {
    margin: 0;
}

.workouts-today-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.workouts-today-routine-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.workouts-today-routine-chips input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.workouts-today-routine-chips span {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 0.45rem 0.72rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.workouts-today-routine-chips input:checked + span {
    border-color: var(--primary);
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 13%, var(--surface));
}

.workouts-today-active,
.workouts-today-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}

.workouts-today-active > span,
.workouts-today-empty p {
    display: grid;
    flex: 1 1 auto;
    gap: 0.18rem;
    margin: 0;
}

.workouts-today-active small,
.workouts-today-empty small {
    color: var(--muted);
}

.workouts-today-active b {
    color: var(--primary-dark);
    font-size: 0.8rem;
}

.workouts-today-empty > span {
    width: 34px;
    color: var(--primary);
}

.workouts-week-agenda {
    overflow: hidden;
    grid-template-columns: 1fr !important;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.workouts-week-agenda .workouts-day-card {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    padding: 0.7rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}

.workouts-week-agenda .workouts-day-card:last-child {
    border-bottom: 0;
}

.workouts-week-agenda .workouts-day-card > header {
    margin: 0;
}

.workouts-week-agenda .workouts-day-routines {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.workouts-week-agenda .workouts-day-routine {
    flex: 1 1 250px;
    min-width: 0;
}

.workouts-week-agenda .workouts-day-card > p {
    align-self: center;
}

.workouts-library-mobile-search,
.workouts-filter-sheet-head,
.workouts-filter-open {
    display: none;
}

.workouts-filter-sheet {
    display: contents;
}

body[data-theme="dark"] :is(.season-ranking-hero, .season-ranking-summary, .season-ranking-row, .profile-team-row, .workouts-week-agenda, .workouts-today-routine-chips span),
body.theme-active-dark :is(.season-ranking-hero, .season-ranking-summary, .season-ranking-row, .profile-team-row, .workouts-week-agenda, .workouts-today-routine-chips span) {
    background-color: var(--dark-ui-surface, #121b24);
}

@media (max-width: 700px) {
    .contextual-route-back {
        margin-bottom: 0.25rem;
        padding-inline: 0.1rem;
    }

    .dashboard-achievement-rows,
    .dashboard-achievement-progress-list {
        grid-template-columns: 1fr;
    }

    .dashboard-achievement-row {
        min-height: 68px;
    }

    .mobile-today-head strong {
        font-size: 1.55rem;
    }

    .mobile-today-metrics a strong {
        font-size: 1.05rem;
    }

    .season-ranking-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .season-ranking-summary {
        gap: 0.55rem;
        padding: 0.7rem;
    }

    .season-ranking-summary strong {
        font-size: 0.85rem;
    }

    .season-ranking-row {
        grid-template-columns: 32px 34px minmax(0, 1fr) auto;
        gap: 0.45rem;
        padding: 0.55rem 0.45rem;
    }

    .season-ranking-xp {
        font-size: 0.72rem;
    }

    .profile-hero {
        padding: 0.8rem;
    }

    .profile-level {
        margin-top: 0.35rem;
    }

    .profile-xp-label {
        font-size: 0.67rem;
    }

    .training-sheet-wrap.week-editor-grid {
        overflow: visible;
        max-height: none;
        min-height: 0;
        padding: 0.55rem;
        background: transparent;
    }

    .training-sheet-wrap .sheet-fieldset,
    .training-sheet-table,
    .training-sheet-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
        border: 0;
    }

    .training-sheet-table thead {
        display: none;
    }

    .training-sheet-table tbody {
        display: grid;
        gap: 0.55rem;
    }

    .training-sheet-table .week-day-card,
    .training-sheet-table .week-day-card:nth-child(even) {
        display: block;
        overflow: hidden;
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
        box-shadow: 0 5px 18px rgba(15, 23, 42, 0.05);
    }

    .training-sheet-table .sheet-day-cell {
        position: static;
        display: block;
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 0;
        border: 0;
        background: transparent !important;
    }

    .week-day-summary {
        display: grid;
        grid-template-columns: minmax(84px, 1fr) auto auto 9px 16px;
        align-items: center;
        gap: 0.55rem;
        width: 100%;
        min-height: 62px;
        padding: 0.65rem 0.7rem;
        border: 0;
        color: inherit;
        background: transparent;
        text-align: left;
    }

    .week-day-summary-title,
    .week-day-summary-metrics {
        display: grid !important;
        gap: 0.12rem;
        margin: 0 !important;
    }

    .week-day-summary-title small,
    .week-day-summary-metrics small {
        color: var(--muted);
        font-size: 0.62rem;
        font-weight: 700;
    }

    .week-day-summary-metrics strong {
        font-size: 0.72rem;
    }

    .week-day-summary-state {
        display: block !important;
        width: 8px;
        height: 8px;
        margin: 0 !important;
        border-radius: 50%;
        background: #f59e0b;
    }

    .week-day-summary-state.is-complete {
        background: #10b981;
    }

    .week-day-summary-chevron {
        display: block !important;
        margin: 0 !important;
        font-size: 1.15rem !important;
        transform: rotate(90deg);
        transition: transform 0.18s ease;
    }

    .week-day-card.is-mobile-collapsed .week-day-summary-chevron {
        transform: none;
    }

    .training-sheet-table .week-day-card.is-mobile-collapsed > td {
        display: none !important;
    }

    .training-sheet-table .week-day-card > td {
        position: static !important;
        display: grid !important;
        grid-template-columns: minmax(105px, 0.65fr) minmax(0, 1fr);
        align-items: center;
        width: auto !important;
        min-width: 0;
        min-height: 50px;
        gap: 0.55rem;
        padding: 0.55rem 0.65rem !important;
        border: 0;
        border-top: 1px solid var(--line);
        background: transparent !important;
    }

    .training-sheet-table .week-day-card > td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.68rem;
        font-weight: 800;
        line-height: 1.2;
    }

    .training-sheet-table .week-day-card > :is(.sheet-extra-cell, .sheet-habits-cell, .sheet-review-cell) {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .training-sheet-table .week-day-card > :is(.sheet-extra-cell, .sheet-habits-cell, .sheet-review-cell)::before {
        margin-bottom: -0.2rem;
    }

    /* The habits cell's own data-label ("Hábitos") duplicates its group
       label ::after immediately above it once sections are grouped - drop
       the redundant one and let the group label carry the heading. */
    .training-sheet-table .week-day-card > .sheet-habits-cell::before {
        content: none;
    }

    .training-sheet-table tbody td > .sheet-field,
    .training-sheet-table tbody td > .week-help-wrap,
    .training-sheet-table tbody td.sheet-workout-cell > .week-help-wrap,
    .training-sheet-table tbody td.sheet-notes-cell > .sheet-field {
        position: static;
        inset: auto;
        min-width: 0;
    }

    .training-sheet-table .sheet-field,
    .training-sheet-table .week-field.sheet-field,
    .training-sheet-table .workout-type-control,
    .training-sheet-table .workout-type-custom {
        height: auto;
    }

    .training-sheet-table .sheet-field input,
    .training-sheet-table .sheet-field select,
    .training-sheet-table .week-field.sheet-field input,
    .training-sheet-table .week-field.sheet-field select {
        min-height: 44px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface-2);
    }

    /* Group the flat field list into scannable clusters (registro / entreno /
       cuerpo / habitos / notas), each opening with a small uppercase label -
       same visual language as .eyebrow elsewhere in the app - instead of one
       long undifferentiated list of label/value rows. Pure CSS: no HTML
       restructuring, so every data-*/class the inline <script> queries is
       untouched. */
    .training-sheet-table .week-day-card > :is(.sheet-time-cell, .sheet-cell-workout-done, .sheet-cell-weight, .sheet-habits-cell, .sheet-notes-cell) {
        position: relative;
        margin-top: 0.5rem;
        border-top: 1px solid var(--line);
    }

    .training-sheet-table .week-day-card > .sheet-time-cell {
        margin-top: 0;
    }

    .training-sheet-table .week-day-card > :is(.sheet-time-cell, .sheet-cell-workout-done, .sheet-cell-weight, .sheet-habits-cell, .sheet-notes-cell)::after {
        content: attr(data-group-label);
        grid-column: 1 / -1;
        order: -1;
        margin-top: 0.5rem;
        color: var(--primary-dark);
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .training-sheet-table .week-day-card > .sheet-time-cell::after {
        margin-top: 0;
    }

    /* Same "brighten the accent on dark surfaces" treatment as .eyebrow -
       --primary-dark reads too dim against the near-black card background. */
    body[data-theme="dark"] .training-sheet-table .week-day-card > :is(.sheet-time-cell, .sheet-cell-workout-done, .sheet-cell-weight, .sheet-habits-cell, .sheet-notes-cell)::after,
    body.theme-active-dark .training-sheet-table .week-day-card > :is(.sheet-time-cell, .sheet-cell-workout-done, .sheet-cell-weight, .sheet-habits-cell, .sheet-notes-cell)::after {
        color: #4fd6bd;
    }

    .training-sheet-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .training-sheet-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .training-sheet-controls .training-sheet-view-tabs {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .training-sheet-head > .btn {
        width: auto;
        white-space: nowrap;
    }

    .week-save-all-row {
        position: sticky;
        bottom: calc(var(--mobile-bottom-nav-height, 64px) + 8px);
        z-index: 12;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        padding: 0.65rem;
        background: color-mix(in srgb, var(--surface) 93%, transparent);
        backdrop-filter: blur(12px);
    }

    /* Match the app's standard full-width mobile primary button (.btn-block):
       without an explicit width the flex item shrank to fit its own content,
       wrapping "Guardar semana completa" onto two lines inside a squashed pill. */
    .week-save-all-row .btn {
        width: 100%;
        white-space: normal;
    }

    .workouts-today-picker {
        align-items: stretch;
        flex-direction: column;
    }

    .workouts-today-picker > .btn {
        width: 100%;
    }

    .workouts-week-agenda .workouts-day-card {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 0.5rem;
        padding: 0.6rem;
    }

    .workouts-week-agenda .workouts-day-routine {
        flex-basis: 100%;
    }

    .workouts-week-agenda .workouts-day-routine .btn {
        min-height: 32px;
        padding-inline: 0.55rem;
        font-size: 0.7rem;
    }

    .workouts-preset-grid {
        grid-template-columns: 1fr;
    }

    .workouts-preset-card {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 0.5rem;
        padding: 0.65rem;
    }

    .workouts-preset-card > .badge {
        grid-column: 2;
        width: max-content;
    }

    .workouts-preset-card > form {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .workouts-preset-card p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .workouts-library-mobile-search {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.45rem;
        margin-top: 0.65rem;
    }

    .workouts-library-mobile-search input {
        width: 100%;
        min-height: 42px;
    }

    .workouts-filter-open {
        display: inline-flex;
    }

    .workouts-filter-sheet {
        position: fixed;
        inset: auto 0 0;
        z-index: 241;
        display: grid;
        max-height: min(78vh, 680px);
        gap: 0.7rem;
        padding: 0.85rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
        background: var(--surface);
        box-shadow: 0 -18px 54px rgba(15, 23, 42, 0.24);
        overflow: auto;
        transform: translateY(105%);
        visibility: hidden;
        transition: transform 0.22s ease, visibility 0.22s;
    }

    .workouts-filter-sheet.is-open {
        transform: none;
        visibility: visible;
    }

    body.has-workout-filter-sheet {
        overflow: hidden;
    }

    body.has-workout-filter-sheet::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 240;
        background: rgba(15, 23, 42, 0.45);
    }

    .workouts-filter-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .workouts-filter-sheet-head button {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--line);
        border-radius: 50%;
        color: inherit;
        background: transparent;
        font-size: 1.3rem;
    }

    .workouts-filter-sheet .workouts-library-filters {
        display: grid;
        grid-template-columns: 1fr;
    }

    .workouts-filter-sheet .workouts-library-filters label:first-of-type {
        display: none;
    }

    .workouts-filter-sheet .workouts-muscle-filters {
        overflow: visible;
        flex-wrap: wrap;
        max-height: none;
    }

    .workouts-library-layout-copy {
        display: none;
    }

    .workouts-library-layout-switch {
        justify-content: flex-end;
        padding: 0.35rem;
    }

    .workouts-library-layout-options button > span:last-child {
        display: none;
    }
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] :is(.season-ranking-hero, .season-ranking-summary, .season-ranking-row, .profile-team-row, .workouts-week-agenda, .workouts-today-routine-chips span) {
        background-color: var(--dark-ui-surface, #121b24);
    }

    body[data-theme="auto"] .training-sheet-table .week-day-card > :is(.sheet-time-cell, .sheet-cell-workout-done, .sheet-cell-weight, .sheet-habits-cell, .sheet-notes-cell)::after {
        color: #4fd6bd;
    }
}

.entries-calendar-mobile-gallery-panel {
    display: none;
}

.entries-calendar-mobile-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(222, 228, 225, 0.95);
    border-radius: 22px;
    background: rgba(222, 228, 225, 0.95);
}

.entries-calendar-mobile-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #eef4f1;
    color: #fff;
    text-decoration: none;
}

.entries-calendar-mobile-tile::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 46%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.48));
    pointer-events: none;
}

.entries-calendar-mobile-tile img,
.entries-calendar-mobile-tile .entries-calendar-empty {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.entries-calendar-mobile-tile span {
    position: absolute;
    right: 0.38rem;
    bottom: 0.34rem;
    z-index: 2;
    color: #fff;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.calendar-empty-state,
.gallery-empty {
    display: grid;
    justify-items: start;
    gap: 0.45rem;
    padding: 0.95rem;
    border: 1px solid rgba(210, 220, 215, 0.72);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(244, 251, 248, 0.72)),
        rgba(255, 255, 255, 0.68);
}

.calendar-empty-state p,
.gallery-empty p {
    margin: 0;
    color: var(--muted);
}

.gallery-page {
    display: grid;
    gap: 0.8rem;
}

.gallery-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-inline: 0.1rem;
}

.gallery-toolbar h1 {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    letter-spacing: -0.06em;
}

.gallery-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.gallery-filter {
    display: flex;
    justify-content: flex-end;
}

.gallery-filter label {
    min-width: min(260px, 100%);
}

.photos-gallery-grid {
    display: grid;
    /* auto-fit (not auto-fill): with a sparse gallery, auto-fill kept reserving
       empty 1fr tracks past the last photo, which rendered as bare
       background-colored boxes trailing the final row (most visible on
       desktop widths with few photos). auto-fit collapses unused tracks to
       0 so the real tiles take the row's full width instead. */
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(222, 228, 225, 0.95);
    border-radius: 24px;
    background: rgba(222, 228, 225, 0.95);
}

.photos-gallery-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, #eef4f1, #e5ece8);
    color: #fff;
    text-decoration: none;
}

.photos-gallery-tile::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 48%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.52));
    pointer-events: none;
}

.photos-gallery-tile img,
.photos-gallery-tile .entries-calendar-empty {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    transition: transform 0.24s ease;
}

.photos-gallery-tile:hover img,
.photos-gallery-tile:focus-visible img {
    transform: scale(1.025);
}

.photos-gallery-date {
    position: absolute;
    right: 0.42rem;
    bottom: 0.36rem;
    z-index: 2;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 7px rgba(0, 0, 0, 0.62);
}

.gallery-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding-block: 0.35rem;
}

body[data-theme="dark"] .dashboard-layout-edit-mode-panel .team-layout-editor-actions,
body[data-theme="dark"] .team-layout-edit-mode-panel .team-layout-editor-actions {
    background: linear-gradient(180deg, transparent, rgba(18, 27, 36, 0.96) 35%);
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .dashboard-layout-edit-mode-panel .team-layout-editor-actions,
    body[data-theme="auto"] .team-layout-edit-mode-panel .team-layout-editor-actions {
        background: linear-gradient(180deg, transparent, rgba(18, 27, 36, 0.96) 35%);
    }
}

@media (max-width: 899px) {
    .floating-log {
        display: none;
    }

    .entries-calendar-panel .entries-calendar,
    .entries-calendar-photos-panel {
        display: none;
    }

    .entries-calendar-mobile-gallery-panel {
        display: grid;
    }

    .entries-calendar-mobile-gallery-panel .panel-head {
        display: flex;
        align-items: center;
        flex-direction: row;
    }
}

/* Liquid Glass system pass. Kept as an override layer so existing layout semantics stay intact. */
:root {
    --radius: 18px;
    --radius-lg: 24px;
    --radius-xl: 30px;
    --glass-bg: rgba(255, 255, 255, 0.58);
    --glass-bg-strong: rgba(255, 255, 255, 0.78);
    --glass-bg-soft: rgba(255, 255, 255, 0.38);
    --glass-border-bright: rgba(255, 255, 255, 0.72);
    --glass-highlight: rgba(255, 255, 255, 0.58);
    --glass-shadow-soft: 0 18px 44px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.05);
    --glass-shadow-deep: 0 28px 78px rgba(15, 23, 42, 0.18), 0 8px 24px rgba(15, 23, 42, 0.08);
    --glass-blur: 24px;
    --z-overlay: 180;
    --z-edit-panel: 220;
    --z-topbar: 240;
    --z-modal: 320;
}

body {
    background:
        radial-gradient(circle at 8% -6%, rgba(20, 163, 139, 0.22), transparent 32%),
        radial-gradient(circle at 92% 4%, rgba(59, 130, 246, 0.14), transparent 28%),
        radial-gradient(circle at 70% 92%, rgba(255, 107, 74, 0.13), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.42), transparent 46%),
        var(--bg);
}

body[data-theme="dark"] {
    --glass-bg: rgba(20, 31, 42, 0.52);
    --glass-bg-strong: rgba(22, 34, 46, 0.74);
    --glass-bg-soft: rgba(20, 31, 42, 0.36);
    --glass-border-bright: rgba(255, 255, 255, 0.16);
    --glass-highlight: rgba(255, 255, 255, 0.10);
    --glass-shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.28);
    --glass-shadow-deep: 0 30px 84px rgba(0, 0, 0, 0.44);
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] {
        --glass-bg: rgba(20, 31, 42, 0.52);
        --glass-bg-strong: rgba(22, 34, 46, 0.74);
        --glass-bg-soft: rgba(20, 31, 42, 0.36);
        --glass-border-bright: rgba(255, 255, 255, 0.16);
        --glass-highlight: rgba(255, 255, 255, 0.10);
        --glass-shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.28);
        --glass-shadow-deep: 0 30px 84px rgba(0, 0, 0, 0.44);
    }
}

:where(.hero-panel, .panel, .motivation-band, .metric-card, .user-edit-card, .chart-card, .pending-card, .leaderboard-row, .modal, .auth-card, .confirm-modal-card, .topbar-context-panel, .add-menu-panel, .user-menu-panel, .analytics-controls, .calendar-empty-state, .gallery-empty) {
    position: relative;
    border: 1px solid var(--glass-border-bright);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08)),
        var(--glass-bg);
    box-shadow: var(--glass-shadow-soft), inset 0 1px 0 var(--glass-highlight);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
}

:where(.hero-panel, .panel, .motivation-band, .metric-card, .chart-card, .auth-card, .analytics-controls)::before {
    content: "";
    position: absolute;
    inset: 1px 1px auto;
    height: 42%;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), transparent);
    pointer-events: none;
    opacity: 0.55;
}

:where(.hero-panel, .panel, .motivation-band, .metric-card, .chart-card, .auth-card, .analytics-controls) > * {
    position: relative;
    z-index: 1;
}

.topbar {
    z-index: var(--z-topbar);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.50)),
        var(--glass-bg);
    border-bottom: 1px solid var(--glass-border-bright);
    box-shadow: 0 14px 42px rgba(15, 23, 42, 0.10);
    backdrop-filter: blur(28px) saturate(1.45);
    -webkit-backdrop-filter: blur(28px) saturate(1.45);
}

.nav-links a {
    border-radius: 999px;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.nav-links a.active,
.nav-links a:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)),
        rgba(255, 255, 255, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 10px 24px rgba(15, 23, 42, 0.08);
}

.btn,
button,
summary,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

.btn {
    border-color: rgba(255, 255, 255, 0.58);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.20)),
        rgba(255, 255, 255, 0.46);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px) saturate(1.35);
    -webkit-backdrop-filter: blur(16px) saturate(1.35);
    transition: transform 0.16s ease, background 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.btn.is-pressed,
button.is-pressed,
summary.is-pressed,
a.is-pressed {
    transform: scale(0.975);
    filter: brightness(1.03);
}

.btn.btn-primary {
    border-color: rgba(20, 163, 139, 0.55);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 45%),
        linear-gradient(135deg, var(--primary), #0b7f70);
    box-shadow: 0 14px 34px rgba(20, 163, 139, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.btn.btn-primary:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.30), transparent 48%),
        linear-gradient(135deg, #19bda1, var(--primary-dark));
}

.btn.btn-secondary {
    border-color: rgba(255, 255, 255, 0.22);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent),
        var(--ink);
}

.btn.btn-ghost {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.24)),
        rgba(255, 255, 255, 0.34);
    border-color: rgba(255, 255, 255, 0.56);
}

input,
select,
textarea {
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.42)),
        rgba(255, 255, 255, 0.58);
    border-color: rgba(255, 255, 255, 0.64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 22px rgba(15, 23, 42, 0.04);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: rgba(20, 163, 139, 0.58);
    box-shadow: 0 0 0 4px rgba(20, 163, 139, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.is-transitioning::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    background: radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.32), transparent 34%);
    opacity: 0;
    animation: liquidPagePulse 0.55s ease;
}

@keyframes liquidPagePulse {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

.is-loading {
    position: relative;
}

.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.32) 42%, transparent 68%),
        rgba(255, 255, 255, 0.10);
    background-size: 220% 100%;
    animation: liquidShimmer 1.05s linear infinite;
}

@keyframes liquidShimmer {
    from { background-position: 160% 0; }
    to { background-position: -80% 0; }
}

.auth-shell-login {
    transform: translateY(-0.7rem);
}

.auth-copy-login {
    padding: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
        rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

.auth-card-login {
    border-radius: var(--radius-xl);
    border-color: rgba(255, 255, 255, 0.72);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.58)),
        rgba(255, 255, 255, 0.62);
    box-shadow: var(--glass-shadow-deep), inset 0 1px 0 rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(30px) saturate(1.35);
    -webkit-backdrop-filter: blur(30px) saturate(1.35);
}

.btn-add,
.topbar-add-menu > summary.btn-add {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 999px;
    font-size: 1.75rem;
    line-height: 1;
    box-shadow: 0 16px 38px rgba(20, 163, 139, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

.analytics-page {
    gap: 0.95rem;
}

.analytics-filter-panel {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(180px, 0.72fr);
    align-items: center;
    gap: 0.68rem;
    padding: 0.82rem;
    border-radius: var(--radius-xl);
}

.analytics-viewing-summary {
    padding: 0.35rem 0.48rem;
}

.analytics-viewing-summary strong {
    display: block;
    font-size: clamp(1.12rem, 2vw, 1.42rem);
    letter-spacing: -0.04em;
}

.analytics-user-filter,
.analytics-date-filter {
    display: grid;
    gap: 0.24rem;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}

.analytics-period-segments,
.calendar-view-segments {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.18rem;
    padding: 0.22rem;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.18)),
        rgba(255, 255, 255, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

.analytics-period-segments a,
.calendar-view-segments a {
    border-radius: 999px;
    padding: 0.56rem 0.72rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.16s ease;
}

.analytics-period-segments a.active,
.calendar-view-segments a.active {
    color: var(--ink);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.42)),
        rgba(255, 255, 255, 0.52);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.analytics-nav-links {
    align-items: center;
    justify-content: flex-end;
}

.analytics-nav-group {
    display: inline-flex;
    gap: 0.28rem;
    padding: 0.18rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.30);
}

.analytics-apply-btn {
    justify-self: end;
    min-width: 108px;
}

.analytics-chart-card {
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.28)),
        var(--glass-bg);
    box-shadow: var(--glass-shadow-soft), inset 0 1px 0 var(--glass-highlight);
}

.entries-calendar-screen {
    gap: 0.55rem;
}

.entries-calendar-panel {
    padding: 0.76rem;
    border-radius: var(--radius-xl);
}

.entries-calendar-head {
    align-items: center;
}

.entries-calendar-head h2 {
    margin: 0;
    letter-spacing: -0.04em;
}

.entries-calendar-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
}

.entries-calendar-gallery,
.entries-calendar-create {
    border-radius: 999px;
}

.entries-calendar-controls {
    position: sticky;
    top: calc(4.25rem + env(safe-area-inset-top));
    z-index: 20;
    align-items: center;
    gap: 0.55rem;
    padding: 0.48rem;
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.32)),
        rgba(255, 255, 255, 0.44);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px) saturate(1.45);
    -webkit-backdrop-filter: blur(24px) saturate(1.45);
}

.calendar-visible-period {
    position: sticky;
    top: calc(7.9rem + env(safe-area-inset-top));
    z-index: 18;
    width: fit-content;
    margin: 0.1rem 0 0.45rem;
    padding: 0.34rem 0.72rem;
    border-radius: 999px;
    color: var(--ink);
    font-size: clamp(1.12rem, 3.4vw, 1.72rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.26)),
        rgba(255, 255, 255, 0.42);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    transition: transform 0.18s ease, opacity 0.18s ease;
}

/* The real <input type="month"> behind the pretty label is only there so JS
   can call showPicker() on it - it had no styling at all, so the browser's
   own locale-formatted value ("July 2026") rendered right next to the
   already-localized label ("Julio 2026"), showing both at once. Keep it
   focusable/clickable but visually hidden. */
.calendar-visible-period-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.calendar-visible-period.is-updating {
    opacity: 0.66;
    transform: translateY(-3px);
}

.entries-calendar.meal-calendar-month,
.entries-calendar.meal-calendar-week,
.entries-calendar.meal-calendar-day {
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(222, 228, 225, 0.84);
    border-radius: var(--radius-lg);
    background: rgba(222, 228, 225, 0.86);
}

.entries-calendar-day article {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.16)),
        rgba(255, 255, 255, 0.34);
    box-shadow: none;
}

.entries-calendar-day.has-log article {
    background: #dfe8e4;
}

.entries-calendar-day strong {
    position: absolute;
    left: 0.38rem;
    top: 0.36rem;
    z-index: 3;
    max-width: calc(100% - 0.76rem);
    padding: 0.16rem 0.38rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1.05;
    text-shadow: 0 1px 7px rgba(0, 0, 0, 0.52);
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.entries-calendar-day .badge {
    position: absolute;
    right: 0.36rem;
    bottom: 0.34rem;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    background: rgba(0, 0, 0, 0.24);
    text-shadow: 0 1px 7px rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.entries-calendar-collage {
    display: grid;
    width: 100%;
    height: 100%;
    gap: 1px;
    background: rgba(255, 255, 255, 0.55);
}

.entries-calendar-collage img {
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
}

.entries-calendar-collage.collage-count-1 {
    display: block;
}

.entries-calendar-collage.collage-count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.entries-calendar-collage.collage-count-3 {
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.entries-calendar-collage.collage-count-3 img:first-child {
    grid-row: 1 / 3;
}

.entries-calendar-empty {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.56), transparent 34%),
        rgba(255, 255, 255, 0.24);
}

.entries-calendar-day:hover article,
.entries-calendar-day:focus-visible article {
    transform: scale(0.992);
    border-color: transparent;
}

.entries-calendar-day.is-selected article {
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.96), inset 0 0 0 5px rgba(20, 163, 139, 0.82);
}

.entries-calendar-mobile-gallery,
.photos-gallery-grid {
    border-color: rgba(255, 255, 255, 0.44);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.36);
    box-shadow: var(--glass-shadow-soft);
}

.entries-calendar-mobile-tile,
.photos-gallery-tile {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.10)),
        rgba(218, 229, 225, 0.76);
}

.dashboard-layout-edit-mode-panel,
.team-layout-edit-mode-panel {
    border-radius: var(--radius-xl);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.54)),
        var(--glass-bg-strong);
    box-shadow: var(--glass-shadow-deep), inset 0 1px 0 var(--glass-highlight);
}

.dashboard-layout-edit-card,
.team-layout-edit-card {
    border-radius: 20px;
    border-color: rgba(255, 255, 255, 0.62);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.22)),
        rgba(255, 255, 255, 0.42);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

.dashboard-layout-mobile-actions,
.team-layout-mobile-actions {
    display: inline-flex;
    gap: 0.32rem;
}

@media (max-width: 899px) {
    body.layout-edit-active::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: var(--z-overlay);
        background:
            radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.38), transparent 42%),
            rgba(244, 248, 247, 0.44);
        backdrop-filter: blur(12px) saturate(1.22);
        -webkit-backdrop-filter: blur(12px) saturate(1.22);
    }

    body.layout-edit-active .screen > :not(.dashboard-layout-edit-mode-panel):not(.team-layout-edit-mode-panel):not(.profile-layout-edit-mode-panel) {
        filter: blur(8px);
        opacity: 0.42;
        pointer-events: none;
        user-select: none;
    }

    body.layout-edit-active .dashboard-layout-edit-mode-panel,
    body.layout-edit-active .team-layout-edit-mode-panel,
    body.layout-edit-active .profile-layout-edit-mode-panel {
        position: fixed;
        left: 0.7rem;
        right: 0.7rem;
        top: calc(4.55rem + env(safe-area-inset-top));
        z-index: var(--z-edit-panel);
        max-height: min(74vh, 680px);
        overflow: auto;
        padding: 0.86rem;
    }

    body.layout-edit-active .topbar {
        z-index: var(--z-topbar);
    }

    .dashboard-layout-edit-card .dashboard-layout-mobile-actions,
    .team-layout-edit-card .team-layout-mobile-actions {
        justify-content: flex-start;
    }

    .analytics-filter-panel {
        grid-template-columns: 1fr;
        gap: 0.54rem;
        padding: 0.7rem;
    }

    .analytics-period-segments {
        overflow-x: auto;
        grid-auto-columns: max-content;
        justify-content: start;
        width: 100%;
        scrollbar-width: none;
    }

    .analytics-period-segments::-webkit-scrollbar {
        display: none;
    }

    .analytics-nav-links,
    .analytics-apply-btn {
        justify-self: stretch;
    }

    .analytics-nav-group,
    .analytics-nav-group .btn,
    .analytics-dashboard-link,
    .analytics-apply-btn {
        width: 100%;
    }

    .analytics-nav-group .btn {
        min-width: 0;
    }

    .entries-calendar-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .entries-calendar-head .eyebrow {
        display: none;
    }

    .entries-calendar-head-actions {
        display: flex;
        padding: 0.18rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.30);
    }

    .entries-calendar-head-actions .btn {
        min-height: 38px;
        padding: 0.5rem 0.68rem;
    }

    .entries-calendar-controls {
        top: calc(4.1rem + env(safe-area-inset-top));
        display: grid;
        grid-template-columns: 1fr;
        border-radius: 24px;
    }

    .entry-date-inline {
        width: 100%;
    }

    .calendar-visible-period {
        top: calc(8.6rem + env(safe-area-inset-top));
    }

    .entries-calendar-panel .entries-calendar {
        display: none;
    }
}

@media (max-width: 700px) {
    .auth-shell-login {
        transform: translateY(-0.35rem);
    }

    .auth-copy-login {
        padding: 0.9rem;
    }

    .calendar-view-segments {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .calendar-view-segments a {
        padding-inline: 0.4rem;
    }

    .entries-calendar-mobile-gallery-panel {
        margin-inline: -0.75rem;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .entries-calendar-mobile-gallery-panel::before {
        display: none;
    }

    .entries-calendar-mobile-gallery-panel .panel-head {
        padding: 0 0.75rem;
    }

    .entries-calendar-mobile-gallery {
        border-inline: 0;
        border-radius: 0;
    }
}

body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea,
body[data-theme="dark"] .btn.btn-ghost,
body[data-theme="dark"] .analytics-period-segments,
body[data-theme="dark"] .calendar-view-segments,
body[data-theme="dark"] .entries-calendar-controls,
body[data-theme="dark"] .calendar-visible-period,
body[data-theme="dark"] .auth-card-login {
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.15);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)),
        rgba(14, 22, 31, 0.64);
}

body[data-theme="dark"] .nav-links a.active,
body[data-theme="dark"] .nav-links a:hover,
body[data-theme="dark"] .analytics-period-segments a.active,
body[data-theme="dark"] .calendar-view-segments a.active {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(20, 163, 139, 0.18)),
        rgba(255, 255, 255, 0.06);
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] input,
    body[data-theme="auto"] select,
    body[data-theme="auto"] textarea,
    body[data-theme="auto"] .btn.btn-ghost,
    body[data-theme="auto"] .analytics-period-segments,
    body[data-theme="auto"] .calendar-view-segments,
    body[data-theme="auto"] .entries-calendar-controls,
    body[data-theme="auto"] .calendar-visible-period,
    body[data-theme="auto"] .auth-card-login {
        color: var(--ink);
        border-color: rgba(255, 255, 255, 0.15);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)),
            rgba(14, 22, 31, 0.64);
    }

    body[data-theme="auto"] .nav-links a.active,
    body[data-theme="auto"] .nav-links a:hover,
    body[data-theme="auto"] .analytics-period-segments a.active,
    body[data-theme="auto"] .calendar-view-segments a.active {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(20, 163, 139, 0.18)),
            rgba(255, 255, 255, 0.06);
    }
}

/* Premium Liquid Glass mobile refresh. */
.photo-mode-segments {
    display: none;
}

.flash {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: 12px;
    right: 12px;
    z-index: 99999;
    min-height: 50px;
    margin: 0;
    padding: 15px 18px 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 18px;
    color: rgba(10, 20, 18, 0.88);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.28;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.22)),
        rgba(255, 255, 255, 0.26);
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 0 rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(34px) saturate(190%);
    -webkit-backdrop-filter: blur(34px) saturate(190%);
    animation:
        flashEnterMobile 260ms cubic-bezier(.2,.8,.2,1),
        flashExitMobile 320ms cubic-bezier(.4,0,1,1) 4s forwards;
}

.flash::before {
    content: "";
    position: absolute;
    inset: 1px 1px auto;
    height: 52%;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08) 72%, transparent);
    opacity: 0.72;
    pointer-events: none;
}

.flash::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background:
        linear-gradient(90deg, rgba(52, 199, 89, 0.95), rgba(48, 209, 88, 0.55));
    transform-origin: left center;
    animation: flashTimer 4s linear forwards;
}

.flash-success {
    border-color: rgba(80, 220, 160, 0.34);
    background:
        linear-gradient(180deg, rgba(236, 255, 247, 0.52), rgba(205, 255, 235, 0.22)),
        rgba(255, 255, 255, 0.24);
}

.flash-error {
    border-color: rgba(255, 120, 112, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 244, 242, 0.58), rgba(255, 214, 210, 0.24)),
        rgba(255, 255, 255, 0.24);
}

.flash-error::after {
    background:
        linear-gradient(90deg, rgba(255, 69, 58, 0.96), rgba(255, 149, 0, 0.58));
}

.flash-info::after {
    background:
        linear-gradient(90deg, rgba(10, 132, 255, 0.96), rgba(90, 200, 250, 0.58));
}

@keyframes flashTimer {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

@keyframes flashEnterMobile {
    from {
        opacity: 0;
        transform: translateY(-14px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes flashExitMobile {
    to {
        opacity: 0;
        transform: translateY(-18px) scale(0.96);
        pointer-events: none;
    }
}

@keyframes flashEnterDesktop {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-14px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes flashExitDesktop {
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-18px) scale(0.96);
        pointer-events: none;
    }
}

@media (min-width: 768px) {
    .flash {
        left: 50%;
        right: auto;
        width: min(520px, calc(100vw - 24px));
        transform: translateX(-50%);
        animation:
            flashEnterDesktop 260ms cubic-bezier(.2,.8,.2,1),
            flashExitDesktop 320ms cubic-bezier(.4,0,1,1) 4s forwards;
    }
}

@media (max-width: 768px) {
    body {
        padding-bottom: calc(120px + env(safe-area-inset-bottom));
    }

    .container-with-nav > .flash {
        position: relative;
        inset: auto;
        width: 100%;
        min-height: 44px;
        margin: 0 0 0.65rem;
        padding: 0.72rem 0.85rem 0.86rem;
        border-radius: 14px;
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .topbar {
        padding: 0.68rem 0.82rem;
        border-bottom-color: rgba(255, 255, 255, 0.38);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.28)),
            rgba(255, 255, 255, 0.36);
        box-shadow:
            0 12px 34px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.58);
        backdrop-filter: blur(26px) saturate(180%);
        -webkit-backdrop-filter: blur(26px) saturate(180%);
    }

    .brand-avatar,
    .brand-mark,
    .user-menu-trigger,
    .user-menu-trigger img,
    .user-menu-trigger span {
        border-radius: 999px;
    }

    .dashboard-mobile-controls .topbar-context-panel {
        position: fixed;
        top: calc(72px + env(safe-area-inset-top));
        left: 10px;
        right: 10px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 92px - env(safe-area-inset-top));
        padding: 16px;
        overflow-y: auto;
        border-radius: 28px;
        border: 1px solid rgba(255, 255, 255, 0.42);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14)),
            rgba(255, 255, 255, 0.12);
        box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.62),
            inset 0 -1px 0 rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(38px) saturate(190%);
        -webkit-backdrop-filter: blur(38px) saturate(190%);
    }

    .dashboard-control-form {
        gap: 12px;
    }

    .dashboard-control-field {
        display: grid;
        gap: 7px;
        color: rgba(23, 33, 43, 0.72);
        font-size: 12px;
        font-weight: 900;
    }

    .dashboard-control-field .glass-select {
        width: 100%;
        height: 56px;
        padding: 0 18px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.50);
        color: #17212b;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.36)),
            rgba(255, 255, 255, 0.24);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.75),
            0 10px 22px rgba(0, 0, 0, 0.06);
        backdrop-filter: blur(22px) saturate(180%);
        -webkit-backdrop-filter: blur(22px) saturate(180%);
        font-size: 17px;
        font-weight: 800;
    }

    .dashboard-mobile-edit-entry.edit-layout-button {
        display: inline-flex;
        width: 100%;
        min-height: 56px;
        border-radius: 999px;
        border-color: rgba(255, 255, 255, 0.22);
        color: #fff;
        background:
            linear-gradient(180deg, rgba(45, 212, 191, 0.96), rgba(13, 148, 136, 0.96));
        box-shadow:
            0 16px 34px rgba(13, 148, 136, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.34);
        font-size: 16px;
        font-weight: 900;
        transition:
            transform 150ms cubic-bezier(.2,.8,.2,1),
            filter 150ms cubic-bezier(.2,.8,.2,1);
    }

    .dashboard-mobile-edit-entry.edit-layout-button:active,
    .dashboard-mobile-edit-entry.edit-layout-button.is-pressed {
        transform: scale(0.97);
    }

    body.layout-edit-active .dashboard-layout-edit-mode-panel {
        border-radius: 28px;
        border: 1px solid rgba(255, 255, 255, 0.42);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14)),
            rgba(255, 255, 255, 0.12);
        box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.62),
            inset 0 -1px 0 rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(38px) saturate(190%);
        -webkit-backdrop-filter: blur(38px) saturate(190%);
    }

    .dashboard-layout-edit-card {
        border-radius: 22px;
        border-color: rgba(255, 255, 255, 0.38);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.20)),
            rgba(255, 255, 255, 0.18);
        box-shadow:
            0 12px 26px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.56);
    }

    .dashboard-layout-edit-mode-panel .team-layout-editor-actions {
        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.32) 38%);
    }

    .photo-mode-segments {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        margin: 2px 14px 14px;
        padding: 4px;
        border: 1px solid rgba(255, 255, 255, 0.42);
        border-radius: 999px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.12)),
            rgba(255, 255, 255, 0.12);
        box-shadow:
            0 12px 30px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.56);
        backdrop-filter: blur(26px) saturate(180%);
        -webkit-backdrop-filter: blur(26px) saturate(180%);
    }

    .photo-mode-segments a {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        border-radius: 999px;
        color: rgba(23, 33, 43, 0.72);
        font-size: 14px;
        font-weight: 900;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        transition:
            transform 150ms cubic-bezier(.2,.8,.2,1),
            color 150ms cubic-bezier(.2,.8,.2,1),
            background 150ms cubic-bezier(.2,.8,.2,1);
    }

    .photo-mode-segments a.active {
        color: #111827;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.34)),
            rgba(255, 255, 255, 0.26);
        box-shadow:
            0 8px 18px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.74);
    }

    .gallery-page,
    .entries-calendar-screen {
        gap: 0;
        margin-inline: -0.75rem;
    }

    .gallery-toolbar,
    .entries-calendar-head {
        padding: 0 14px 10px;
    }

    .gallery-toolbar h1,
    .entries-calendar-head h2 {
        font-size: 28px;
        font-weight: 900;
        letter-spacing: 0;
        line-height: 1;
    }

    .gallery-toolbar .eyebrow,
    .entries-calendar-head .eyebrow {
        display: none;
    }

    .gallery-actions,
    .entries-calendar-head-actions {
        gap: 4px;
        padding: 3px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.16);
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
    }

    .gallery-actions .btn,
    .entries-calendar-head-actions .btn {
        min-height: 36px;
        min-width: 0;
        padding: 0 11px;
        border-radius: 999px;
        font-size: 12px;
    }

    .entries-calendar-gallery {
        display: none;
    }

    .gallery-filter {
        padding: 0 14px 12px;
    }

    .gallery-filter select {
        border-radius: 999px;
    }

    .entries-calendar-panel {
        margin: 0;
        padding: 0 14px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .entries-calendar-panel::before {
        display: none;
    }

    .entries-calendar-controls {
        position: relative;
        top: auto;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        margin: 0 0 8px;
        padding: 10px;
        border-radius: 28px;
        border: 1px solid rgba(255, 255, 255, 0.38);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.12)),
            rgba(255, 255, 255, 0.10);
        box-shadow:
            0 14px 34px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.50);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
    }

    .entries-calendar-controls input,
    .entries-calendar-controls select {
        min-height: 48px;
        border-radius: 999px;
        font-size: 16px;
        font-weight: 800;
    }

    .calendar-view-segments {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        padding: 4px;
        border-radius: 999px;
        border-color: rgba(255, 255, 255, 0.36);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.10)),
            rgba(255, 255, 255, 0.10);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
        backdrop-filter: blur(22px) saturate(170%);
        -webkit-backdrop-filter: blur(22px) saturate(170%);
    }

    .calendar-view-segments a {
        min-height: 38px;
        padding: 0 8px;
        text-align: center;
        font-size: 12px;
        line-height: 1;
    }

    .calendar-visible-period {
        position: sticky;
        top: calc(64px + env(safe-area-inset-top));
        z-index: 5;
        width: auto;
        margin: 0 -14px;
        padding: 10px 14px;
        border: 0;
        border-radius: 0;
        color: #111827;
        background:
            linear-gradient(180deg, rgba(245, 247, 248, 0.82), rgba(245, 247, 248, 0.42));
        box-shadow: none;
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        font-size: 28px;
        font-weight: 900;
        letter-spacing: 0;
        line-height: 1;
    }

    .entries-calendar-mobile-gallery-panel {
        display: grid;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .entries-calendar-mobile-gallery-panel::before {
        display: none;
    }

    .entries-calendar-mobile-gallery-panel .panel-head {
        display: none;
    }

    .entries-calendar-mobile-gallery,
    .photos-gallery-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: calc((100vw - 2px) / 3);
        gap: 1px;
        margin: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: rgba(210, 218, 216, 0.84);
        box-shadow: none;
    }

    .entries-calendar-mobile-tile,
    .photos-gallery-tile {
        aspect-ratio: auto;
        min-height: 0;
        border-radius: 0;
        background: #e9efec;
        transition: transform 150ms cubic-bezier(.2,.8,.2,1);
    }

    .entries-calendar-mobile-tile:nth-child(11n + 1),
    .photos-gallery-tile:nth-child(11n + 1) {
        grid-row: span 2;
    }

    .entries-calendar-mobile-tile:nth-child(17n + 8),
    .photos-gallery-tile:nth-child(17n + 8) {
        grid-column: span 2;
    }

    .entries-calendar-mobile-tile img,
    .entries-calendar-mobile-tile .entries-calendar-empty,
    .photos-gallery-tile img,
    .photos-gallery-tile .entries-calendar-empty {
        width: 100%;
        height: 100%;
        border-radius: 0;
        object-fit: cover;
    }

    .entries-calendar-mobile-tile:active,
    .entries-calendar-mobile-tile.is-pressed,
    .photos-gallery-tile:active,
    .photos-gallery-tile.is-pressed {
        transform: scale(0.985);
    }

    .entries-calendar-mobile-tile span,
    .photos-gallery-date {
        right: 7px;
        bottom: 7px;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.58);
    }

    .calendar-empty-state,
    .gallery-empty {
        margin: 0 14px 14px;
        border-radius: 24px;
        border-color: rgba(255, 255, 255, 0.40);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.16)),
            rgba(255, 255, 255, 0.14);
        box-shadow:
            0 14px 34px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.52);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
    }
}

body[data-theme="dark"] .flash {
    color: rgba(245, 250, 248, 0.90);
    border-color: rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(180deg, rgba(36, 48, 60, 0.58), rgba(13, 20, 28, 0.28)),
        rgba(12, 18, 24, 0.34);
}

body[data-theme="dark"] .flash-success {
    border-color: rgba(80, 220, 160, 0.26);
    background:
        linear-gradient(180deg, rgba(35, 74, 60, 0.54), rgba(16, 40, 34, 0.28)),
        rgba(10, 20, 18, 0.32);
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .flash {
        color: rgba(245, 250, 248, 0.90);
        border-color: rgba(255, 255, 255, 0.16);
        background:
            linear-gradient(180deg, rgba(36, 48, 60, 0.58), rgba(13, 20, 28, 0.28)),
            rgba(12, 18, 24, 0.34);
    }

    body[data-theme="auto"] .flash-success {
        border-color: rgba(80, 220, 160, 0.26);
        background:
            linear-gradient(180deg, rgba(35, 74, 60, 0.54), rgba(16, 40, 34, 0.28)),
            rgba(10, 20, 18, 0.32);
    }
}

@media (max-width: 768px) {
    body[data-theme="dark"] .topbar,
    body[data-theme="dark"] .dashboard-mobile-controls .topbar-context-panel,
    body[data-theme="dark"] .photo-mode-segments,
    body[data-theme="dark"] .entries-calendar-controls,
    body[data-theme="dark"] .calendar-visible-period {
        color: var(--ink);
        border-color: rgba(255, 255, 255, 0.16);
        background:
            linear-gradient(180deg, rgba(42, 54, 68, 0.46), rgba(12, 18, 25, 0.20)),
            rgba(10, 16, 22, 0.26);
        box-shadow:
            0 18px 44px rgba(0, 0, 0, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    body[data-theme="dark"] .calendar-visible-period {
        color: #f8fafc;
        background:
            linear-gradient(180deg, rgba(17, 24, 39, 0.82), rgba(17, 24, 39, 0.42));
        box-shadow: none;
    }

    body[data-theme="dark"] .dashboard-control-field {
        color: rgba(248, 250, 252, 0.72);
    }

    body[data-theme="dark"] .dashboard-control-field .glass-select,
    body[data-theme="dark"] .photo-mode-segments a.active {
        color: #f8fafc;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
            rgba(15, 23, 42, 0.42);
    }

    body[data-theme="dark"] .photo-mode-segments a {
        color: rgba(248, 250, 252, 0.70);
    }
}

@media (max-width: 768px) and (prefers-color-scheme: dark) {
    body[data-theme="auto"] .topbar,
    body[data-theme="auto"] .dashboard-mobile-controls .topbar-context-panel,
    body[data-theme="auto"] .photo-mode-segments,
    body[data-theme="auto"] .entries-calendar-controls,
    body[data-theme="auto"] .calendar-visible-period {
        color: var(--ink);
        border-color: rgba(255, 255, 255, 0.16);
        background:
            linear-gradient(180deg, rgba(42, 54, 68, 0.46), rgba(12, 18, 25, 0.20)),
            rgba(10, 16, 22, 0.26);
        box-shadow:
            0 18px 44px rgba(0, 0, 0, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    body[data-theme="auto"] .calendar-visible-period {
        color: #f8fafc;
        background:
            linear-gradient(180deg, rgba(17, 24, 39, 0.82), rgba(17, 24, 39, 0.42));
        box-shadow: none;
    }

    body[data-theme="auto"] .dashboard-control-field {
        color: rgba(248, 250, 252, 0.72);
    }

    body[data-theme="auto"] .dashboard-control-field .glass-select,
    body[data-theme="auto"] .photo-mode-segments a.active {
        color: #f8fafc;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
            rgba(15, 23, 42, 0.42);
    }

    body[data-theme="auto"] .photo-mode-segments a {
        color: rgba(248, 250, 252, 0.70);
    }
}

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

/* Coordinated layout and liquid glass polish pass. */
.topbar-context[open] .topbar-context-panel,
.add-menu[open] .add-menu-panel,
.user-menu[open] .user-menu-panel,
.photo-post-menu[open] .photo-post-menu-panel,
.metric-help-popover[open] .metric-help-popover-content {
    color: #111827;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}

.topbar-context[open] .topbar-context-panel :where(label, small, p, span),
.add-menu[open] .add-menu-panel,
.user-menu[open] .user-menu-panel,
.photo-post-menu[open] .photo-post-menu-panel,
.metric-help-popover[open] .metric-help-popover-content {
    color: #111827;
}

.user-menu-panel {
    padding: 0.36rem;
    border-radius: 18px;
}

.user-menu-panel a {
    border-bottom: 0;
    border-radius: 11px;
    padding: 0.48rem 0.56rem;
}

.user-menu-panel a:hover,
.user-menu-panel a:focus-visible {
    background: rgba(15, 23, 42, 0.08);
}

.user-menu-panel .user-menu-theme-toggle {
    border-radius: 11px;
    padding: 0.52rem 0.58rem;
}

.user-menu-panel .user-menu-theme-toggle:hover,
.user-menu-panel .user-menu-theme-toggle:focus-visible {
    background: rgba(15, 23, 42, 0.08);
}

.user-menu-trigger {
    position: relative;
}

.user-menu-unread-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: #ef4444;
    border: 2px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 18px rgba(239, 68, 68, 0.34);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.gallery-page-clean {
    gap: 0.8rem;
}

.gallery-view-strip {
    position: sticky;
    top: calc(72px + env(safe-area-inset-top));
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: min(100%, 760px);
    margin: 0 auto 0.4rem;
    padding: 0.36rem;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.24)),
        rgba(255, 255, 255, 0.32);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
}

.gallery-user-control {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    min-width: 0;
    padding-left: 0.55rem;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 850;
}

.gallery-user-control select {
    max-width: 150px;
    border: 0;
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.58);
    font: inherit;
    font-weight: 900;
}

.gallery-user-control strong {
    color: var(--ink);
}

.gallery-segment-control,
.gallery-segment-control a {
    display: inline-flex;
    align-items: center;
}

.gallery-segment-control {
    gap: 0.18rem;
    padding: 0.18rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.gallery-segment-control a {
    min-height: 34px;
    padding: 0 0.78rem;
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.gallery-segment-control a.active {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.photos-gallery-grid-continuous {
    align-items: start;
}

.gallery-month-label {
    position: sticky;
    top: calc(126px + env(safe-area-inset-top));
    z-index: 5;
    grid-column: 1 / -1;
    width: fit-content;
    margin: 0.15rem 0 -0.15rem;
    padding: 0.34rem 0.76rem;
    border-radius: 999px;
    color: #111827;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.54);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.11);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    font-size: 0.82rem;
    font-weight: 900;
}

.gallery-calendar-panel,
.gallery-calendar-side-panel {
    background: rgba(255, 255, 255, 0.55);
}

.analytics-view-panel {
    width: min(420px, calc(100vw - 24px));
    padding: 0.68rem;
}

.analytics-filter-panel-topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.58rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.analytics-filter-panel-topbar .analytics-viewing-summary {
    padding: 0.2rem 0.1rem;
}

.analytics-filter-panel-topbar .analytics-viewing-summary strong {
    font-size: 1.08rem;
    letter-spacing: 0;
}

.analytics-filter-panel-topbar .analytics-period-segments {
    width: 100%;
}

.analytics-filter-panel-topbar .analytics-period-segments a {
    padding-inline: 0.42rem;
    text-align: center;
}

.analytics-filter-panel-topbar .analytics-nav-links,
.analytics-filter-panel-topbar .analytics-nav-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.analytics-section,
.analytics-chart-card,
.dashboard-calories .metric-box {
    border-color: rgba(255, 255, 255, 0.44);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.28)),
        rgba(255, 255, 255, 0.28);
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
}

.profile-data-overview .panel-head {
    align-items: flex-start;
}

.profile-home-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.profile-home-grid.hidden {
    display: none;
}

.profile-home-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 0.72rem;
}

.profile-home-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.profile-home-card-head h2 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: 0;
}

.profile-home-goal-main,
.profile-home-list,
.profile-home-facts {
    min-width: 0;
}

.profile-home-goal-main {
    display: grid;
    gap: 0.34rem;
}

.profile-home-goal-main span,
.profile-home-goal-main small,
.profile-home-list span,
.profile-home-facts dd {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.profile-home-list {
    display: grid;
    gap: 0.45rem;
}

.profile-home-list > div {
    display: grid;
    gap: 0.08rem;
    padding: 0.55rem 0;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.profile-home-list > div:first-child {
    border-top: 0;
    padding-top: 0;
}

.profile-home-facts {
    display: grid;
    gap: 0.42rem;
    margin: 0;
}

.profile-home-facts > div {
    display: grid;
    grid-template-columns: minmax(94px, 0.5fr) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: baseline;
}

.profile-home-facts dt {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 850;
}

.profile-home-facts dd {
    margin: 0;
    font-weight: 800;
}

.profile-current-primary,
.profile-current-goals {
    display: grid;
    gap: 0.34rem;
    min-width: 0;
}

.profile-current-primary > span,
.profile-current-goals > span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 850;
}

.profile-current-primary strong {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.32rem 0.48rem;
    min-width: 0;
    color: var(--text);
    font-size: 1rem;
}

.profile-current-primary strong span {
    overflow-wrap: anywhere;
}

.profile-current-primary strong b {
    font-size: 1.06rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.profile-current-primary small {
    color: var(--muted);
    line-height: 1.25;
}

.profile-current-goal-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.42rem;
    min-width: 0;
}

.profile-current-goal-chips span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    max-width: 100%;
    min-height: 32px;
    padding: 0.32rem 0.62rem;
    border: 1px solid rgba(20, 163, 139, 0.18);
    border-radius: 999px;
    color: var(--text);
    background: rgba(20, 163, 139, 0.08);
    line-height: 1.1;
}

.profile-current-goal-chips strong,
.profile-current-goal-chips small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.profile-current-goal-chips strong {
    font-size: 0.9rem;
    font-weight: 900;
}

.profile-current-goal-chips small {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 800;
}

.profile-current-goal-chips .is-empty {
    color: var(--muted);
    background: rgba(148, 163, 184, 0.10);
    border-color: rgba(148, 163, 184, 0.22);
}

body[data-theme="dark"] .profile-current-goal-chips span,
body.theme-active-dark .profile-current-goal-chips span {
    border-color: rgba(45, 212, 191, 0.24);
    background: rgba(45, 212, 191, 0.10);
}

body[data-theme="dark"] .profile-current-goal-chips .is-empty,
body.theme-active-dark .profile-current-goal-chips .is-empty {
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(148, 163, 184, 0.12);
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .profile-current-goal-chips span {
        border-color: rgba(45, 212, 191, 0.24);
        background: rgba(45, 212, 191, 0.10);
    }

    body[data-theme="auto"] .profile-current-goal-chips .is-empty {
        border-color: rgba(148, 163, 184, 0.24);
        background: rgba(148, 163, 184, 0.12);
    }
}

.profile-friend-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.38rem;
    min-width: 0;
}

.profile-friend-actions-hero {
    padding: 0.32rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.profile-friend-action-form {
    margin: 0;
}

.profile-friend-status {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.34rem 0.62rem;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.1;
    white-space: nowrap;
    background: rgba(248, 250, 252, 0.8);
}

.profile-friend-status.compact {
    min-height: 28px;
    padding: 0.28rem 0.52rem;
}

.profile-friend-list,
.profile-friend-request-list {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.profile-friend-request-list > strong {
    color: var(--text);
    font-size: 0.84rem;
}

.profile-friend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.52rem 0;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.profile-friend-list .profile-friend-row:first-child,
.profile-friend-request-list .profile-friend-row:nth-child(2) {
    border-top: 0;
}

.profile-friend-id {
    display: flex;
    align-items: center;
    gap: 0.52rem;
    min-width: 0;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
}

.profile-friend-id span {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.profile-friend-id strong,
.profile-friend-id small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-friend-id small {
    color: var(--muted);
    font-size: 0.74rem;
}

.profile-friend-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.profile-friend-avatar.initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 900;
    background: linear-gradient(135deg, #dcfce7, #e0f2fe);
}

body[data-page="profile"] .profile-identity-row {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 58px;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 14px;
    background: var(--surface-2);
}

body[data-page="profile"] .profile-identity-row.has-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 76%, transparent), color-mix(in srgb, var(--surface) 48%, transparent) 62%, color-mix(in srgb, var(--surface) 68%, transparent));
}

body[data-page="profile"] .profile-identity-row > :not(.profile-identity-cover) {
    position: relative;
    z-index: 2;
}

body[data-page="profile"] .profile-identity-cover {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 0.82;
    object-fit: cover;
}

body[data-page="profile"] .profile-friend-list,
body[data-page="profile"] .profile-friend-request-list,
body[data-page="profile"] .profile-team-list {
    gap: 6px;
}

body[data-page="profile"] .profile-identity-row .profile-friend-avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border: 2px solid color-mix(in srgb, var(--surface) 88%, transparent);
}

body[data-page="profile"] .profile-team-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 8px;
    color: var(--ink);
}

body[data-page="profile"] .profile-team-row > span:nth-child(2) {
    gap: 2px;
}

body[data-page="profile"] .profile-team-row .profile-team-icon {
    border-radius: 50%;
}

.profile-friend-more {
    justify-self: start;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 850;
    text-decoration: none;
}

.profile-friend-add {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    padding-top: 0.62rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.profile-friend-add > div {
    display: grid;
    gap: 0.05rem;
}

.profile-friend-add small {
    color: var(--muted);
}

.profile-friends-add-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.profile-friends-add-form label {
    flex: 1 1 190px;
    min-width: 0;
}

.profile-friends-add-form select {
    width: 100%;
    min-height: 38px;
}

body[data-theme="dark"] :where(.profile-friend-actions-hero, .profile-friend-status),
body.theme-active-dark :where(.profile-friend-actions-hero, .profile-friend-status) {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.72);
}

body[data-theme="dark"] .profile-friend-avatar.initials,
body.theme-active-dark .profile-friend-avatar.initials {
    color: #e5eef6;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.36), rgba(59, 130, 246, 0.34));
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] :where(.profile-friend-actions-hero, .profile-friend-status) {
        border-color: rgba(148, 163, 184, 0.28);
        background: rgba(15, 23, 42, 0.72);
    }

    body[data-theme="auto"] .profile-friend-avatar.initials {
        color: #e5eef6;
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.36), rgba(59, 130, 246, 0.34));
    }
}

@media (max-width: 640px) {
    .profile-friend-actions-hero {
        width: 100%;
        justify-content: flex-start;
    }

    .profile-friend-row {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-friend-row .profile-friend-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .profile-friend-card-action,
    .profile-friend-hero-action {
        flex: 1 1 130px;
    }

    .profile-friend-action-form .btn,
    .profile-friends-add-form .btn {
        width: 100%;
    }
}

.profile-home-secondary {
    justify-self: start;
}

.notifications-page {
    gap: 0.8rem;
}

.notifications-panel {
    padding: 0.95rem;
}

.notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.notifications-header h1 {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    letter-spacing: 0;
}

.notifications-unread-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 0.74rem;
    border-radius: 999px;
    color: #991b1b;
    background: rgba(254, 226, 226, 0.82);
    font-size: 0.78rem;
    font-weight: 900;
}

.notifications-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    margin-bottom: 0.62rem;
}

.notifications-list {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.38);
}

.notification-card {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.72rem 0.78rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.20);
    background: transparent;
}

.notification-card:last-child {
    border-bottom: 0;
}

.notification-card.is-unread {
    background: rgba(255, 255, 255, 0.46);
}

.notification-main {
    min-width: 0;
    display: grid;
    gap: 0.1rem;
    color: inherit;
    text-decoration: none;
}

.notification-main strong,
.notification-main p {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.notification-main p {
    color: var(--muted);
    font-size: 0.88rem;
}

.notification-actions {
    display: inline-flex;
    gap: 0.26rem;
}

.notification-action-btn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.52);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.notification-action-btn svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-action-delete {
    color: #991b1b;
}

.team-widget-metrics {
    min-width: 0;
}

.team-goal-card,
.team-goal-main,
.team-goal-head,
.team-goal-objective-grid,
.team-goal-meta-grid {
    min-width: 0;
}

.team-goal-card {
    position: relative;
    padding-right: 48px;
}

.team-goal-card strong,
.team-goal-card small,
.team-goal-progress-text,
.team-goal-reward,
.team-goal-objective-pill {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.team-goal-actions-menu {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 8;
}

.team-goal-actions-menu > summary {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 999px;
}

.team-goal-actions-menu .photo-post-menu-panel {
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    min-width: 172px;
}

.team-active-challenge-meta,
.team-challenge-detail-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-active-challenge-meta > span {
    min-width: 0;
}

@media (max-width: 768px) {
    .team-widget-metrics.metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.68rem;
    }

    .team-widget-metrics .team-metric-steps,
    .team-widget-metrics .team-metric-distance {
        display: grid !important;
    }

    .team-mobile-combo-card {
        display: none !important;
    }

    .team-widget-metrics .metric-card {
        min-width: 0;
        padding: 0.74rem;
    }

    .team-active-challenge-meta,
    .team-challenge-detail-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.48rem;
    }

    .team-active-challenge-meta > span {
        padding: 0.58rem;
    }

    .profile-home-grid {
        grid-template-columns: 1fr;
    }

    .gallery-view-strip {
        top: calc(64px + env(safe-area-inset-top));
        width: 100%;
        border-radius: 24px;
        flex-wrap: wrap;
    }

    .gallery-user-control {
        flex: 1 1 160px;
    }

    .gallery-segment-control {
        flex: 1 1 180px;
        justify-content: stretch;
    }

    .gallery-segment-control a {
        flex: 1 1 0;
        justify-content: center;
    }

    .gallery-month-label {
        top: calc(128px + env(safe-area-inset-top));
    }

    .analytics-view-panel {
        width: calc(100vw - 18px);
    }

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

    .notification-actions {
        justify-content: flex-end;
    }
}

body[data-theme="dark"] .topbar-context[open] .topbar-context-panel,
body[data-theme="dark"] .add-menu[open] .add-menu-panel,
body[data-theme="dark"] .user-menu[open] .user-menu-panel,
body[data-theme="dark"] .photo-post-menu[open] .photo-post-menu-panel,
body[data-theme="dark"] .metric-help-popover[open] .metric-help-popover-content {
    color: #ffffff;
    background: rgba(15, 23, 42, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

body[data-theme="dark"] .topbar-context[open] .topbar-context-panel :where(label, small, p, span),
body[data-theme="dark"] .add-menu[open] .add-menu-panel,
body[data-theme="dark"] .user-menu[open] .user-menu-panel,
body[data-theme="dark"] .photo-post-menu[open] .photo-post-menu-panel,
body[data-theme="dark"] .metric-help-popover[open] .metric-help-popover-content {
    color: rgba(255, 255, 255, 0.92);
}

body[data-theme="dark"] .gallery-view-strip,
body[data-theme="dark"] .gallery-segment-control,
body[data-theme="dark"] .analytics-section,
body[data-theme="dark"] .analytics-chart-card,
body[data-theme="dark"] .notifications-list {
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(180deg, rgba(42, 54, 68, 0.48), rgba(12, 18, 25, 0.22)),
        rgba(10, 16, 22, 0.34);
}

body[data-theme="dark"] .gallery-segment-control a.active,
body[data-theme="dark"] .gallery-month-label,
body[data-theme="dark"] .notification-card.is-unread {
    color: #f8fafc;
    background: rgba(30, 41, 59, 0.86);
}

/* .dashboard-calories .metric-box (Analytics > Nutrition maintenance/deficit
   figures) had no dark-theme override, so it kept its light-mode glass
   gradient (near-white) with light-theme muted text on top - unreadable in
   dark mode. Give it a dark surface consistent with the card it sits in. */
body[data-theme="dark"] .dashboard-calories .metric-box,
body.theme-active-dark .dashboard-calories .metric-box {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
}
body[data-theme="dark"] .calories-overview .metric-title,
body.theme-active-dark .calories-overview .metric-title { color: rgba(248, 250, 252, 0.62); }
body[data-theme="dark"] .calories-overview .metric-value,
body.theme-active-dark .calories-overview .metric-value { color: #f8fafc; }
body[data-theme="dark"] .calories-overview .metric-value.muted,
body.theme-active-dark .calories-overview .metric-value.muted { color: rgba(248, 250, 252, 0.7); }

body[data-theme="dark"] .notification-action-btn {
    color: #f8fafc;
    background: rgba(30, 41, 59, 0.76);
    border-color: rgba(255, 255, 255, 0.16);
}

body[data-theme="dark"] .notification-action-delete {
    color: #fecaca;
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .topbar-context[open] .topbar-context-panel,
    body[data-theme="auto"] .add-menu[open] .add-menu-panel,
    body[data-theme="auto"] .user-menu[open] .user-menu-panel,
    body[data-theme="auto"] .photo-post-menu[open] .photo-post-menu-panel,
    body[data-theme="auto"] .metric-help-popover[open] .metric-help-popover-content {
        color: #ffffff;
        background: rgba(15, 23, 42, 0.82) !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
    }

    body[data-theme="auto"] .topbar-context[open] .topbar-context-panel :where(label, small, p, span),
    body[data-theme="auto"] .add-menu[open] .add-menu-panel,
    body[data-theme="auto"] .user-menu[open] .user-menu-panel,
    body[data-theme="auto"] .photo-post-menu[open] .photo-post-menu-panel,
    body[data-theme="auto"] .metric-help-popover[open] .metric-help-popover-content {
        color: rgba(255, 255, 255, 0.92);
    }

    body[data-theme="auto"] .gallery-view-strip,
    body[data-theme="auto"] .gallery-segment-control,
    body[data-theme="auto"] .analytics-section,
    body[data-theme="auto"] .analytics-chart-card,
    body[data-theme="auto"] .notifications-list {
        color: #f8fafc;
        border-color: rgba(255, 255, 255, 0.16);
        background:
            linear-gradient(180deg, rgba(42, 54, 68, 0.48), rgba(12, 18, 25, 0.22)),
            rgba(10, 16, 22, 0.34);
    }

    body[data-theme="auto"] .gallery-segment-control a.active,
    body[data-theme="auto"] .gallery-month-label,
    body[data-theme="auto"] .notification-card.is-unread {
        color: #f8fafc;
        background: rgba(30, 41, 59, 0.86);
    }

    body[data-theme="auto"] .notification-action-btn {
        color: #f8fafc;
        background: rgba(30, 41, 59, 0.76);
        border-color: rgba(255, 255, 255, 0.16);
    }

    body[data-theme="auto"] .notification-action-delete {
        color: #fecaca;
    }
}

/* Final mobile, calendar and glass cleanup. */
body[data-theme="dark"] {
    --glass: rgba(15, 23, 42, 0.68);
    --glass-strong: rgba(15, 23, 42, 0.78);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    --glass-bg: rgba(15, 23, 42, 0.68);
    --glass-bg-strong: rgba(15, 23, 42, 0.78);
    --glass-border-bright: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] {
        --glass: rgba(15, 23, 42, 0.68);
        --glass-strong: rgba(15, 23, 42, 0.78);
        --glass-border: rgba(255, 255, 255, 0.12);
        --glass-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
        --glass-bg: rgba(15, 23, 42, 0.68);
        --glass-bg-strong: rgba(15, 23, 42, 0.78);
        --glass-border-bright: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.92);
    }
}

:where(.topbar-context[open] .topbar-context-panel,
.add-menu[open] .add-menu-panel,
.user-menu[open] .user-menu-panel,
.photo-post-menu[open] .photo-post-menu-panel,
.metric-help-popover[open] .metric-help-popover-content) {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
}

body[data-theme="dark"] :where(.topbar-context[open] .topbar-context-panel,
.add-menu[open] .add-menu-panel,
.user-menu[open] .user-menu-panel,
.photo-post-menu[open] .photo-post-menu-panel,
.metric-help-popover[open] .metric-help-popover-content) {
    background: rgba(15, 23, 42, 0.90) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28) !important;
    color: #fff !important;
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] :where(.topbar-context[open] .topbar-context-panel,
    .add-menu[open] .add-menu-panel,
    .user-menu[open] .user-menu-panel,
    .photo-post-menu[open] .photo-post-menu-panel,
    .metric-help-popover[open] .metric-help-popover-content) {
        background: rgba(15, 23, 42, 0.90) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28) !important;
        color: #fff !important;
    }
}

.calendar-view-menu .btn-topbar {
    min-height: 38px;
    padding: 0.48rem 0.72rem;
}

.calendar-view-panel {
    width: min(360px, calc(100vw - 24px));
}

.calendar-view-form {
    gap: 0.72rem;
}

.calendar-view-form label,
.calendar-view-form .calendar-view-actions {
    display: grid;
    gap: 0.34rem;
}

.calendar-view-form select,
.calendar-view-form input {
    width: 100%;
    min-width: 0;
}

.calendar-view-static {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    padding: 0.48rem 0.7rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.calendar-view-summary {
    display: grid;
    gap: 0.18rem;
}

.calendar-view-summary strong {
    font-size: 1.02rem;
}

.calendar-view-actions {
    grid-template-columns: 1fr 1fr;
}

.entries-calendar-screen,
.gallery-page-clean {
    gap: 0.72rem;
}

.entries-calendar-focused {
    padding: clamp(0.72rem, 2.4vw, 1.18rem);
    overflow: clip;
}

.entries-calendar-titlebar {
    display: grid;
    gap: 0.18rem;
    margin-bottom: 0.72rem;
}

.entries-calendar-titlebar h1 {
    margin: 0;
    font-size: clamp(1.7rem, 4.4vw, 2.45rem);
    letter-spacing: 0;
}

.entries-calendar-focused .entries-calendar {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.entries-calendar-focused .entries-calendar-day article {
    min-height: clamp(78px, 12vw, 128px);
}

.entries-calendar-day strong {
    letter-spacing: 0;
}

.gallery-calendar-panel .calendar-visible-period {
    margin-bottom: 0.7rem;
}

.settings-page {
    gap: 0.88rem;
}

.settings-hero {
    align-items: flex-start;
}

.settings-top-grid {
    align-items: stretch;
}

.settings-avatar-card,
.settings-security-card,
.settings-goals-card,
.settings-preferences-card {
    min-width: 0;
}

.settings-focused-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.settings-avatar-focused-screen {
    max-width: 720px;
    margin-inline: auto;
}

.settings-avatar-current {
    display: flex;
    align-items: center;
    gap: 0.78rem;
}

.settings-avatar-preview-round,
.settings-avatar-preview {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    border-radius: 50%;
    object-fit: cover;
}

.profile-avatar {
    width: 76px;
    height: 76px;
    min-width: 76px;
}

.settings-avatar-upload-trigger {
    width: fit-content;
}

.settings-image-cropper[hidden] {
    display: none !important;
}

.settings-goal-summary,
.admin-achievement-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.58rem;
}

.settings-goal-summary span,
.admin-achievement-stats span {
    min-width: 0;
    padding: 0.72rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.48);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.settings-goal-summary strong,
.admin-achievement-stats strong {
    display: block;
    font-size: 1.18rem;
}

.settings-goal-list,
.profile-home-goal-list {
    display: grid;
    gap: 0.58rem;
}

.settings-goal-row,
.profile-home-goal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(88px, 24%);
    align-items: center;
    gap: 0.74rem;
    padding: 0.74rem;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.44);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.settings-goal-row span:first-child,
.profile-home-goal-row span:first-child {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.settings-goal-row strong,
.profile-home-goal-row strong {
    overflow-wrap: anywhere;
}

.settings-goal-progress,
.profile-home-goal-meter {
    height: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.10);
    overflow: hidden;
}

.settings-goal-progress span,
.profile-home-goal-meter span {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0f766e, #2563eb);
}

.settings-completed-goals summary,
.admin-achievement-selector summary {
    cursor: pointer;
    padding: 0.7rem 0.8rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.admin-user-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto 18px;
    gap: 0.68rem;
    align-items: center;
}

.admin-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, 0.08);
    font-weight: 800;
}

.admin-user-main {
    min-width: 0;
    display: grid;
    gap: 0.05rem;
}

.admin-user-main strong,
.admin-user-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-achievement-spotlight {
    display: grid;
    gap: 0.82rem;
    padding: 1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.50);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.admin-achievement-spotlight-main {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.86rem;
    align-items: center;
}

.admin-achievement-spotlight-visual {
    width: 72px;
    height: 72px;
}

.admin-achievement-recent {
    display: grid;
    gap: 0.18rem;
    font-size: 0.9rem;
}

.admin-achievement-row.is-selected {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.26);
}

.audit-list-admin article {
    padding: 0.78rem 0.9rem;
    border-radius: 18px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.18rem;
}

.notification-card {
    border-radius: 18px;
    padding: 0.82rem 0.92rem;
    gap: 0.72rem;
}

.notification-card.is-unread {
    box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.58);
}

.team-goal-card,
.team-active-challenge-panel,
.team-challenge-card,
.challenge-card {
    min-width: 0;
    overflow: hidden;
}

.team-goal-card :where(h3, strong, p, small),
.team-active-challenge-panel :where(h3, strong, p, small),
.team-challenge-card :where(h3, strong, p, small),
.challenge-card :where(h3, strong, p, small) {
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .container {
        padding-inline: max(0.72rem, env(safe-area-inset-left));
    }

    .topbar {
        padding-inline: max(0.72rem, env(safe-area-inset-left)) max(0.72rem, env(safe-area-inset-right));
    }

    .calendar-view-menu[open] .calendar-view-panel {
        position: fixed;
        inset: auto 10px calc(env(safe-area-inset-bottom) + 82px) 10px;
        width: auto;
        max-height: min(74vh, 560px);
        overflow: auto;
        border-radius: 24px;
        padding: 0.9rem;
    }

    .calendar-view-actions {
        grid-template-columns: 1fr;
    }

    .entries-calendar-screen {
        margin-inline: -0.2rem;
    }

    .entries-calendar-focused {
        padding: 0.66rem;
        border-radius: 22px;
    }

    .entries-calendar-titlebar h1 {
        font-size: 1.72rem;
    }

    .entries-calendar-focused .entries-calendar.meal-calendar-month {
        gap: 0.34rem;
    }

    .entries-calendar-focused .entries-calendar-day article {
        min-height: 74px;
        padding: 0.42rem;
        border-radius: 14px;
    }

    .entries-calendar-day .badge {
        font-size: 0.64rem;
        padding: 0.16rem 0.34rem;
    }

    .settings-focused-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-avatar-preview-round,
    .settings-avatar-preview,
    .profile-avatar {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
    }

    .settings-goal-summary,
    .admin-achievement-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-goal-row,
    .profile-home-goal-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-user-row {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }

    .admin-user-row .settings-chevron {
        display: none;
    }

    .admin-achievement-spotlight-main {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .admin-achievement-spotlight-visual {
        width: 56px;
        height: 56px;
    }

    .audit-filter {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .audit-filter .btn {
        grid-column: 1 / -1;
    }

    .notification-card {
        padding: 0.72rem 0.78rem;
    }

}

body[data-theme="dark"] :where(.calendar-view-static,
.settings-goal-summary span,
.admin-achievement-stats span,
.settings-goal-row,
.profile-home-goal-row,
.settings-completed-goals summary,
.admin-achievement-selector summary,
.admin-achievement-spotlight) {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(15, 23, 42, 0.68);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

body[data-theme="dark"] :where(.settings-goal-progress, .profile-home-goal-meter) {
    background: rgba(255, 255, 255, 0.14);
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] :where(.calendar-view-static,
    .settings-goal-summary span,
    .admin-achievement-stats span,
    .settings-goal-row,
    .profile-home-goal-row,
    .settings-completed-goals summary,
    .admin-achievement-selector summary,
    .admin-achievement-spotlight) {
        color: rgba(255, 255, 255, 0.92);
        background: rgba(15, 23, 42, 0.68);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    }

    body[data-theme="auto"] :where(.settings-goal-progress, .profile-home-goal-meter) {
        background: rgba(255, 255, 255, 0.14);
    }
}

/* Final gallery/calendar mobile sheet and nav motion pass. */
:root {
    --topbar-height: 64px;
}

.topbar,
.topbar-actions,
.topbar-context {
    overflow: visible;
}

.topbar {
    z-index: 1000;
}

.topbar-context[open] {
    z-index: 10040;
}

.topbar-context[open] .topbar-context-panel {
    z-index: 10050;
}

.calendar-view-panel {
    width: min(330px, calc(100vw - 24px));
}

.calendar-view-form {
    gap: 0.58rem;
}

.view-panel-section {
    display: grid;
    gap: 0.32rem;
    min-width: 0;
}

.view-panel-label,
.view-panel-section > span:first-child {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.view-panel-section .calendar-view-segments {
    width: 100%;
}

.view-panel-section .btn {
    justify-content: center;
}

.calendar-view-actions {
    gap: 0.46rem;
}

@media (max-width: 768px) {
    .calendar-view-menu[open] .calendar-view-panel {
        position: fixed !important;
        top: calc(var(--topbar-height, 64px) + env(safe-area-inset-top)) !important;
        right: 12px !important;
        bottom: auto !important;
        left: 12px !important;
        width: auto !important;
        max-height: calc(100vh - var(--topbar-height, 64px) - 28px - env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        border-radius: 22px;
        padding: 0.82rem;
        transform: none !important;
    }

}

body[data-theme="dark"] .view-panel-label,
body[data-theme="dark"] .view-panel-section > span:first-child {
    color: rgba(255, 255, 255, 0.72);
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .view-panel-label,
    body[data-theme="auto"] .view-panel-section > span:first-child {
        color: rgba(255, 255, 255, 0.72);
    }
}

/* Gallery should feel like a Photos surface: edge-to-edge media, overlay month chip. */
.gallery-month-floating {
    position: fixed;
    top: calc(var(--topbar-height, 64px) + env(safe-area-inset-top) + 8px);
    left: max(12px, env(safe-area-inset-left));
    z-index: 980;
    width: fit-content;
    max-width: calc(100vw - 24px);
    padding: 0.34rem 0.74rem;
    border-radius: 999px;
    color: rgba(15, 23, 42, 0.94);
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.56);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    font-size: 0.82rem;
    font-weight: 900;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.gallery-month-floating.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.gallery-month-floating[hidden] {
    display: block;
    opacity: 0;
}

body[data-theme="dark"] .gallery-month-floating {
    color: rgba(255, 255, 255, 0.94);
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(255, 255, 255, 0.16);
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .gallery-month-floating {
        color: rgba(255, 255, 255, 0.94);
        background: rgba(15, 23, 42, 0.82);
        border-color: rgba(255, 255, 255, 0.16);
    }

}

@media (max-width: 768px) {
    body[data-page="gallery"] .container {
        padding-inline: 0 !important;
    }

    body[data-page="gallery"] .gallery-page-clean {
        gap: 0;
        margin-inline: 0;
        padding-top: 0;
        padding-bottom: calc(var(--mobile-bottom-nav-height, 0px) + env(safe-area-inset-bottom) + 116px);
    }

    body[data-page="gallery"] .photos-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: auto;
        gap: 1px;
        border: 0;
        border-radius: 0;
    }

    body[data-page="gallery"] .photos-gallery-tile {
        aspect-ratio: 1 / 1;
        border-radius: 0;
    }

    body[data-page="gallery"] .photos-gallery-tile:nth-child(11n + 1),
    body[data-page="gallery"] .photos-gallery-tile:nth-child(17n + 8) {
        grid-row: auto;
        grid-column: auto;
    }

    body[data-page="gallery"] .gallery-calendar-panel {
        margin: 0;
        padding: 0.4rem 0.34rem 0.6rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    body[data-page="gallery"] .gallery-calendar-panel .calendar-visible-period {
        margin: 0 0 0.45rem;
        padding-inline: 0.28rem;
    }

    body[data-page="gallery"] .gallery-calendar-panel .entries-calendar {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    body[data-page="gallery"] .gallery-calendar-panel .entries-calendar.meal-calendar-month {
        gap: 0.3rem;
    }

    body[data-page="gallery"] .gallery-calendar-panel .entries-calendar-day article {
        min-height: 72px;
        padding: 0.38rem;
        border-radius: 13px;
    }

    body[data-page="gallery"] .gallery-calendar-panel .entries-calendar-day strong {
        font-size: 0.78rem;
        line-height: 1;
    }

    body[data-page="gallery"] .gallery-calendar-panel .entries-calendar-day .badge {
        font-size: 0.62rem;
        padding: 0.14rem 0.34rem;
    }

    body[data-page="gallery"] .gallery-calendar-side-panel,
    body[data-page="gallery"] [data-meal-calendar-period-panel],
    body[data-page="gallery"] [data-meal-calendar-photos-panel] {
        display: none !important;
    }

}

/* Final mobile implementation pass: compact approvals, full-bleed gallery, PJAX loader, Liquid Glass nav. */
@media (max-width: 768px) {
    .pending-grid {
        gap: 0.46rem;
    }

    .pending-card {
        gap: 0.38rem;
        padding: 0.56rem 0.62rem;
        border-radius: 14px;
    }

    .pending-card .pending-requested-by {
        display: none;
    }

    .pending-head {
        gap: 0.12rem;
    }

    .pending-head strong {
        font-size: 0.9rem;
        line-height: 1.05;
    }

    .pending-head span,
    .pending-card .muted,
    .pending-card label {
        font-size: 0.76rem;
        line-height: 1.18;
    }

    .pending-card p {
        margin-bottom: 0;
    }

    .pending-card label {
        gap: 0.24rem;
    }

    .pending-card input[type="text"] {
        min-height: 36px;
        padding: 0.46rem 0.58rem;
        border-radius: 12px;
        font-size: 0.82rem;
    }

    .pending-actions {
        gap: 0.38rem;
    }

    .pending-actions .btn {
        min-height: 34px;
        padding: 0.42rem 0.66rem;
        border-radius: 12px;
        font-size: 0.78rem;
    }

    body[data-page="gallery"] main.container {
        width: 100vw !important;
        max-width: none !important;
        margin-right: calc(50% - 50vw) !important;
        margin-left: calc(50% - 50vw) !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body[data-page="gallery"] .gallery-page-clean {
        width: 100%;
    }
}

body.is-transitioning::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 10020;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.16), transparent 36%),
        rgba(5, 9, 14, 0.10);
    opacity: 1;
    animation: none;
    backdrop-filter: blur(1.5px) saturate(116%);
    -webkit-backdrop-filter: blur(1.5px) saturate(116%);
}

body.is-transitioning::before {
    content: "Loading";
    position: fixed;
    top: calc(env(safe-area-inset-top) + 18px);
    left: 50%;
    z-index: 10021;
    min-width: 132px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px 0 48px;
    border-radius: 999px;
    border: 1px solid var(--liquid-glass-border, rgba(255, 255, 255, 0.34));
    color: var(--liquid-glass-text, rgba(255, 255, 255, 0.92));
    background:
        radial-gradient(circle at 24px 50%, #3f8cff 0 4px, rgba(63, 140, 255, 0.24) 5px 10px, transparent 11px),
        linear-gradient(110deg, transparent 0%, transparent 34%, rgba(255, 255, 255, 0.34) 47%, transparent 62%, transparent 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.055)),
        var(--liquid-glass-bg-strong, rgba(24, 24, 26, 0.84));
    background-size: auto, 220% 100%, auto, auto;
    background-position: 0 0, 120% 0, 0 0, 0 0;
    box-shadow:
        var(--liquid-glass-shadow, 0 18px 42px rgba(0, 0, 0, 0.34)),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.16);
    transform: translateX(-50%) translateY(0);
    animation: liquidPageLoaderCapsule 1.18s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    backdrop-filter: blur(var(--liquid-glass-blur, 26px)) saturate(var(--liquid-glass-saturation, 165%));
    -webkit-backdrop-filter: blur(var(--liquid-glass-blur, 26px)) saturate(var(--liquid-glass-saturation, 165%));
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Manrope", sans-serif;
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    line-height: 1;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.24);
    pointer-events: none;
}

@keyframes liquidPageLoaderCapsule {
    0% {
        background-position: 0 0, 120% 0, 0 0, 0 0;
        transform: translateX(-50%) translateY(-2px);
        opacity: 0.88;
    }
    45% {
        opacity: 1;
    }
    100% {
        background-position: 0 0, -120% 0, 0 0, 0 0;
        transform: translateX(-50%) translateY(0);
        opacity: 0.94;
    }
}

:root {
    --liquid-glass-blur: 12px;
    --liquid-glass-saturation: 165%;
    --liquid-glass-bg: rgba(255, 255, 255, 0.58);
    --liquid-glass-bg-strong: rgba(255, 255, 255, 0.72);
    --liquid-glass-clear: rgba(255, 255, 255, 0.34);
    --liquid-glass-border: rgba(255, 255, 255, 0.48);
    --liquid-glass-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
    --liquid-glass-tint: rgba(63, 140, 255, 0.11);
    --liquid-glass-text: rgba(18, 24, 33, 0.92);
    --ios-nav-height: 78px;
    --ios-nav-radius: 39px;
    --ios-nav-gap: 12px;
    --ios-nav-blue: #3f8cff;
    --ios-glass-bg: rgba(24, 24, 26, 0.84);
    --ios-glass-border: rgba(255, 255, 255, 0.12);
    --ios-text: rgba(255, 255, 255, 0.88);
    --ios-icon: rgba(255, 255, 255, 0.92);
    --ios-active-bg: rgba(255, 255, 255, 0.09);
    --ios-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
}

body[data-theme="light"] {
    --liquid-glass-bg: rgba(255, 255, 255, 0.58);
    --liquid-glass-bg-strong: rgba(255, 255, 255, 0.72);
    --liquid-glass-clear: rgba(255, 255, 255, 0.34);
    --liquid-glass-border: rgba(255, 255, 255, 0.48);
    --liquid-glass-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
    --liquid-glass-tint: rgba(63, 140, 255, 0.11);
    --liquid-glass-text: rgba(18, 24, 33, 0.92);
    --ios-glass-bg: rgba(245, 245, 247, 0.76);
    --ios-glass-border: rgba(0, 0, 0, 0.10);
    --ios-text: rgba(20, 20, 22, 0.78);
    --ios-icon: rgba(20, 20, 22, 0.82);
    --ios-active-bg: rgba(255, 255, 255, 0.58);
    --ios-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

body[data-theme="dark"] {
    --liquid-glass-bg: rgba(24, 24, 26, 0.62);
    --liquid-glass-bg-strong: rgba(24, 24, 26, 0.84);
    --liquid-glass-clear: rgba(255, 255, 255, 0.08);
    --liquid-glass-border: rgba(255, 255, 255, 0.13);
    --liquid-glass-shadow: 0 22px 52px rgba(0, 0, 0, 0.42);
    --liquid-glass-tint: rgba(63, 140, 255, 0.14);
    --liquid-glass-text: rgba(255, 255, 255, 0.92);
    --ios-glass-bg: rgba(24, 24, 26, 0.84);
    --ios-glass-border: rgba(255, 255, 255, 0.12);
    --ios-text: rgba(255, 255, 255, 0.88);
    --ios-icon: rgba(255, 255, 255, 0.92);
    --ios-active-bg: rgba(255, 255, 255, 0.09);
    --ios-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: light) {
    body[data-theme="auto"] {
        --liquid-glass-bg: rgba(255, 255, 255, 0.58);
        --liquid-glass-bg-strong: rgba(255, 255, 255, 0.72);
        --liquid-glass-clear: rgba(255, 255, 255, 0.34);
        --liquid-glass-border: rgba(255, 255, 255, 0.48);
        --liquid-glass-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
        --liquid-glass-tint: rgba(63, 140, 255, 0.11);
        --liquid-glass-text: rgba(18, 24, 33, 0.92);
        --ios-glass-bg: rgba(245, 245, 247, 0.76);
        --ios-glass-border: rgba(0, 0, 0, 0.10);
        --ios-text: rgba(20, 20, 22, 0.78);
        --ios-icon: rgba(20, 20, 22, 0.82);
        --ios-active-bg: rgba(255, 255, 255, 0.58);
        --ios-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
    }
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] {
        --liquid-glass-bg: rgba(24, 24, 26, 0.62);
        --liquid-glass-bg-strong: rgba(24, 24, 26, 0.84);
        --liquid-glass-clear: rgba(255, 255, 255, 0.08);
        --liquid-glass-border: rgba(255, 255, 255, 0.13);
        --liquid-glass-shadow: 0 22px 52px rgba(0, 0, 0, 0.42);
        --liquid-glass-tint: rgba(63, 140, 255, 0.14);
        --liquid-glass-text: rgba(255, 255, 255, 0.92);
    }
}

.liquid-glass-regular,
.liquid-glass-clear,
.liquid-glass-container {
    border: 1px solid var(--liquid-glass-border);
    box-shadow:
        var(--liquid-glass-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(var(--liquid-glass-blur)) saturate(var(--liquid-glass-saturation));
    -webkit-backdrop-filter: blur(var(--liquid-glass-blur)) saturate(var(--liquid-glass-saturation));
}

.liquid-glass-regular {
    color: var(--liquid-glass-text);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)),
        var(--liquid-glass-bg);
}

.liquid-glass-clear {
    color: var(--liquid-glass-text);
    background:
        radial-gradient(circle at 50% 0%, var(--liquid-glass-tint), transparent 58%),
        var(--liquid-glass-clear);
}

.liquid-glass-container {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
        var(--liquid-glass-bg-strong);
}

.liquid-glass-interactive {
    transition:
        transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 180ms ease,
        background 180ms ease;
}

.liquid-glass-interactive:active,
.liquid-glass-interactive.is-pressed {
    transform: scale(0.985);
}

:where(.topbar,
.hero-panel,
.panel,
.analytics-controls,
.calendar-empty-state,
.gallery-empty,
.modal,
.confirm-modal-card) {
    border-color: var(--liquid-glass-border) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.045)),
        var(--liquid-glass-bg) !important;
    box-shadow:
        var(--liquid-glass-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(var(--liquid-glass-blur)) saturate(var(--liquid-glass-saturation)) !important;
    -webkit-backdrop-filter: blur(var(--liquid-glass-blur)) saturate(var(--liquid-glass-saturation)) !important;
}

:where(.topbar-context[open] .topbar-context-panel,
.add-menu[open] .add-menu-panel,
.user-menu[open] .user-menu-panel,
.photo-post-menu[open] .photo-post-menu-panel,
.metric-help-popover[open] .metric-help-popover-content) {
    color: var(--liquid-glass-text) !important;
    border-color: var(--liquid-glass-border) !important;
    background:
        radial-gradient(circle at 50% 0%, var(--liquid-glass-tint), transparent 56%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)),
        var(--liquid-glass-bg-strong) !important;
    box-shadow:
        var(--liquid-glass-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(var(--liquid-glass-blur)) saturate(var(--liquid-glass-saturation)) !important;
    -webkit-backdrop-filter: blur(var(--liquid-glass-blur)) saturate(var(--liquid-glass-saturation)) !important;
}

:where(.btn.btn-ghost,
.calendar-view-segments,
.photo-mode-segments,
.analytics-period-segments,
.view-panel-section input,
.view-panel-section select) {
    border-color: var(--liquid-glass-border) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
        var(--liquid-glass-clear) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 8px 24px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(calc(var(--liquid-glass-blur) * 0.75)) saturate(var(--liquid-glass-saturation)) !important;
    -webkit-backdrop-filter: blur(calc(var(--liquid-glass-blur) * 0.75)) saturate(var(--liquid-glass-saturation)) !important;
}



@media (prefers-reduced-motion: reduce) {
    body.is-transitioning::before {
        animation: none !important;
    }

    body.is-transitioning::after {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Final fixes: profile editor layering, compact daily log, persistent media nav. */
.profile-hero {
    overflow: visible !important;
    z-index: 30;
}

.profile-hero-actions {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 0.5rem;
    min-width: 0;
    position: relative;
    z-index: 35;
}

.profile-pdf-export-btn {
    min-height: 42px;
    gap: 0.46rem;
    padding-inline: 0.82rem;
    white-space: normal;
    text-align: left;
    line-height: 1.1;
}

.profile-pdf-export-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-pdf-export-btn[aria-busy="true"] {
    cursor: wait;
}

.profile-tagline-editor {
    z-index: 36;
}

.profile-tagline-editor[open] {
    z-index: 10090;
}

.profile-tagline-form {
    z-index: 10091;
}

.entry-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.22rem;
    width: min(430px, 100%);
    padding: 0.22rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f8fbfa;
    box-shadow: 0 10px 28px rgba(22, 35, 43, 0.08);
}

.entry-mode-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.52rem 0.75rem;
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1.1;
    text-align: center;
}

.entry-mode-tabs a.active {
    color: #fff;
    background: var(--primary);
    box-shadow: 0 10px 22px rgba(20, 163, 139, 0.22);
}

.entry-data-toolbar {
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.entry-date-time-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(112px, 0.34fr);
    align-items: end;
    width: 100%;
    gap: 0.55rem;
}

.entry-date-nav {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: end;
    gap: 0.4rem;
    min-width: 0;
}

.entry-day-arrow {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    align-self: end;
}

.entry-day-arrow svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.entry-date-nav .entry-date-inline,
.entry-date-time-row .entry-time-inline {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    width: 100%;
}

.entry-date-nav .entry-date-inline span,
.entry-date-time-row .entry-time-inline span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.entry-date-nav input,
.entry-date-time-row input {
    width: 100%;
}

.entry-data-form .entry-metric-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
    :root {
        --liquid-glass-blur: 8px;
        --liquid-glass-saturation: 145%;
    }
}

.entry-weight-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem 0.7rem;
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}
.entry-weight-head { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 0.5rem; min-width: 0; }
.entry-weight-head > span:last-child { display: grid; min-width: 0; }
.entry-weight-head strong { font-size: 0.8rem; }
.entry-weight-head small { color: var(--muted); font-size: 0.63rem; line-height: 1.25; }
.entry-weight-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--primary-dark); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.entry-weight-icon svg { width: 18px; height: 18px; }
.entry-weight-input { position: relative; min-width: 92px; }
.entry-weight-input input { width: 100%; min-height: 44px; padding-right: 2.1rem !important; }
.entry-weight-input > span:last-child { position: absolute; right: 0.7rem; bottom: 0.82rem; color: var(--muted); font-size: 0.7rem; font-weight: 800; pointer-events: none; }
.entry-weight-control > a { display: flex; grid-column: 1 / -1; align-items: center; justify-content: flex-end; min-height: 44px; color: var(--primary-dark); font-size: 0.67rem; font-weight: 800; text-align: right; }

.workout-type-field {
    min-width: 0;
}

.workout-remove-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border-color: rgba(223, 76, 67, 0.28) !important;
    background: rgba(223, 76, 67, 0.10) !important;
    color: var(--bad) !important;
    box-shadow: none !important;
    font-size: 1.38rem;
    font-weight: 900;
    line-height: 1;
}

.workout-remove-btn span[aria-hidden="true"] {
    display: block;
    line-height: 1;
    transform: translateY(-1px);
}

.workout-remove-btn:hover,
.workout-remove-btn:focus-visible {
    border-color: rgba(223, 76, 67, 0.48) !important;
    background: rgba(223, 76, 67, 0.18) !important;
    color: #b42318 !important;
}

.workout-remove-btn[disabled],
.workout-remove-btn[aria-disabled="true"] {
    border-color: rgba(148, 163, 184, 0.22) !important;
    background: rgba(148, 163, 184, 0.08) !important;
    color: var(--muted) !important;
    opacity: 0.58;
}

.workout-subfields[hidden] {
    display: none !important;
}

.workout-row.has-workout-data {
    align-items: start;
}

@media (max-width: 899px) {
    body[data-page="photo"] .floating-log {
        display: none !important;
    }

    body[data-page="photo"] .screen.stack-lg {
        padding-bottom: calc(var(--mobile-bottom-nav-height, 0px) + env(safe-area-inset-bottom) + 24px) !important;
    }

    body[data-page="photo"] .photo-comments {
        padding-bottom: calc(var(--mobile-bottom-nav-height, 0px) + env(safe-area-inset-bottom) + 110px) !important;
    }

    body[data-page="gallery"] .gallery-page-clean {
        padding-bottom: calc(var(--mobile-bottom-nav-height, 0px) + env(safe-area-inset-bottom) + 118px) !important;
    }

    body[data-page="gallery"] .photos-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body[data-page="gallery"] .photos-gallery-tile {
        aspect-ratio: 1;
        min-height: 0;
        background: #edf4f1;
    }

    body[data-page="gallery"] .photos-gallery-tile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 520px) {
    .profile-hero-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 0.5rem;
        width: 100%;
        justify-self: stretch;
        align-items: stretch;
    }

    .profile-hero-actions.has-friend-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-hero-actions.has-friend-actions .profile-friend-actions-hero {
        width: 100%;
    }

    .profile-hero-actions.has-friend-actions .profile-friend-actions-hero .btn,
    .profile-hero-actions.has-friend-actions .profile-friend-action-form {
        flex: 1 1 130px;
    }

    .profile-pdf-export-btn {
        width: 100%;
        min-width: 0;
        justify-content: center;
        text-align: center;
    }

    .profile-tagline-editor {
        width: 44px;
        min-width: 44px;
        justify-self: end;
    }

    .profile-tagline-edit {
        width: 44px;
        height: 44px;
        min-width: 44px;
        padding: 0 !important;
        display: inline-grid !important;
        place-items: center;
    }

    .profile-tagline-form {
        right: 0;
        width: min(340px, calc(100vw - 1.5rem));
        border-radius: 14px;
    }

    .entry-mode-tabs {
        width: 100%;
    }

    .entry-data-toolbar {
        margin-bottom: 0.55rem;
    }

    .entry-date-time-row {
        grid-template-columns: minmax(0, 1fr) minmax(98px, 0.36fr);
        gap: 0.42rem;
    }

    .entry-date-nav {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        gap: 0.3rem;
    }

    .entry-day-arrow {
        width: 38px;
        height: 40px;
        min-width: 38px;
    }

    .entry-date-nav .entry-date-inline span,
    .entry-date-time-row .entry-time-inline span {
        font-size: 0.66rem;
    }

    .entry-date-nav input,
    .entry-date-time-row input {
        min-height: 40px;
        padding-inline: 0.42rem;
        font-size: 0.82rem;
    }

    .entry-data-form .entry-metric-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.48rem;
    }

    .entry-data-form .quick-stats.entry-metric-pair { grid-template-columns: 1fr !important; }
    .entry-weight-control { grid-template-columns: minmax(0, 1fr) minmax(112px, 0.55fr); }

    .entry-data-form .entry-metric-pair label {
        min-width: 0;
        font-size: 0.78rem;
        line-height: 1.18;
    }

    .entry-data-form .entry-metric-pair input {
        min-width: 0;
        padding-inline: 0.55rem;
    }

    .workout-row {
        grid-template-columns: minmax(0, 1fr) 44px !important;
        align-items: end;
        gap: 0.48rem;
    }

    .workout-row .workout-type-field {
        grid-column: 1;
        grid-row: 1;
    }

    .workout-row .workout-remove-btn {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }

    .workout-row .workout-custom-field,
    .workout-row .workout-subfields {
        grid-column: 1 / -1;
    }

    .workout-row .workout-subfields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.48rem;
    }

    .workout-row .workout-subfields label {
        min-width: 0;
        font-size: 0.78rem;
        line-height: 1.18;
    }

    .workout-row .workout-subfields input {
        min-width: 0;
        padding-inline: 0.55rem;
    }
}

@media (max-width: 380px) {
    .workout-row .workout-subfields {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 1024px) {
  body:has(nav.bottom-nav.mobile-liquid-nav) .btn-add,
  body:has(nav.bottom-nav.mobile-liquid-nav) .add-menu-trigger.btn-add {
    display: none !important;
  }
}
@media (max-width: 1024px) {

  .layout-edit-active [data-layout-item],
  .layout-edit-active .layout-item,
  .layout-edit-active .dashboard-widget,
  .layout-edit-active .team-widget,
  .layout-edit-active .dashboard-layout-edit-card,
  .layout-edit-active .team-layout-edit-card {
    position: relative;
  }

  .dashboard-layout-edit-card .dashboard-layout-mobile-actions,
  .team-layout-edit-card .team-layout-mobile-actions {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 20 !important;
    display: flex !important;
    gap: 6px !important;
    justify-content: flex-end !important;
  }

  .dashboard-layout-edit-card .dashboard-layout-mobile-actions .btn,
  .team-layout-edit-card .team-layout-mobile-actions .btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.7) !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.48)),
      rgba(255,255,255,.7) !important;
    backdrop-filter: blur(18px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
    box-shadow:
      0 10px 24px rgba(15,23,42,.12),
      inset 0 1px 0 rgba(255,255,255,.9) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: rgba(18,24,33,.86) !important;
    touch-action: manipulation !important;
  }

  .dashboard-layout-edit-card .dashboard-layout-mobile-actions .btn:disabled,
  .team-layout-edit-card .team-layout-mobile-actions .btn:disabled {
    opacity: .35 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 768px) {
  body:not(.layout-edit-active) main,
  body:not(.layout-edit-active) .app-shell,
  body:not(.layout-edit-active) .page,
  body:not(.layout-edit-active) .dashboard-layout {
    filter: none !important;
  }

  body.view-changing main,
  body.is-view-changing main {
    filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Regression recovery pass: team mobile, layout edit isolation, gallery incremental load. */
.photos-gallery-grid-continuous .photos-gallery-tile {
  content-visibility: auto;
  contain-intrinsic-size: 220px 220px;
}

.gallery-recent-root.is-loading .gallery-load-more {
  opacity: 0.72;
  pointer-events: none;
}

.gallery-load-more {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0.75rem auto 0;
}

.gallery-recent-sentinel {
  width: 100%;
  height: 1px;
  margin-top: 1px;
}

/* Gallery desktop/tablet performance and Photos-style refinement. */
.user-menu-trigger {
  overflow: visible;
  isolation: isolate;
}

.user-menu-trigger > img,
.user-menu-trigger > span:not(.user-menu-unread-badge) {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: inherit;
}

.user-menu-unread-badge {
  z-index: 4;
  pointer-events: none;
}

@media (min-width: 769px) {
  body[data-page="gallery"] .container {
    width: min(1480px, calc(100vw - 2rem));
  }

  body[data-page="gallery"] .gallery-page-clean {
    gap: 0.72rem;
  }

  body[data-page="gallery"] .gallery-recent-root {
    display: grid;
    gap: 0.78rem;
  }

  body[data-page="gallery"] .photos-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    gap: 2px;
    border: 0;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.08);
    box-shadow: none;
  }

  body[data-page="gallery"] .photos-gallery-grid-continuous .photos-gallery-tile {
    contain-intrinsic-size: 170px 170px;
  }

  body[data-page="gallery"] .photos-gallery-tile {
    border-radius: 0;
    background: #e8efec;
    outline-offset: -3px;
  }

  body[data-page="gallery"] .photos-gallery-tile::after {
    height: 42%;
    opacity: 0.82;
    background: linear-gradient(180deg, transparent, rgba(3, 7, 18, 0.48));
  }

  body[data-page="gallery"] .photos-gallery-tile:hover,
  body[data-page="gallery"] .photos-gallery-tile:focus-visible {
    z-index: 2;
  }

  body[data-page="gallery"] .photos-gallery-tile:hover img,
  body[data-page="gallery"] .photos-gallery-tile:focus-visible img {
    transform: scale(1.035);
  }

  body[data-page="gallery"] .photos-gallery-date {
    right: 0.46rem;
    bottom: 0.42rem;
    max-width: calc(100% - 0.92rem);
    padding: 0.18rem 0.38rem;
    border-radius: 999px;
    background: rgba(3, 7, 18, 0.36);
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.66rem;
    line-height: 1.1;
    white-space: nowrap;
  }

  body[data-page="gallery"] .gallery-month-floating,
  body[data-page="gallery"] .gallery-month-label {
    padding: 0.3rem 0.66rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.09);
    font-size: 0.78rem;
  }

  body[data-page="gallery"] .gallery-month-floating {
    left: max(16px, calc((100vw - 1480px) / 2 + 16px));
  }

  body[data-page="gallery"] .gallery-load-more {
    min-width: 154px;
    border-radius: 999px;
  }

  body[data-page="gallery"] .calendar-view-menu > summary {
    min-height: 38px;
    padding-inline: 0.72rem;
  }
}

@media (min-width: 1024px) {
  body[data-page="gallery"] .photos-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  }
}

@media (min-width: 1320px) {
  body[data-page="gallery"] .photos-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(166px, 1fr));
  }
}

body[data-theme="dark"][data-page="gallery"] .photos-gallery-grid {
  background: rgba(255, 255, 255, 0.10);
}

body[data-theme="dark"][data-page="gallery"] .photos-gallery-tile {
  background: #17212b;
}

body[data-theme="dark"][data-page="gallery"] .gallery-month-floating,
body[data-theme="dark"][data-page="gallery"] .gallery-month-label {
  background: rgba(15, 23, 42, 0.82);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

@media (prefers-color-scheme: dark) {
  body[data-theme="auto"][data-page="gallery"] .photos-gallery-grid {
    background: rgba(255, 255, 255, 0.10);
  }

  body[data-theme="auto"][data-page="gallery"] .photos-gallery-tile {
    background: #17212b;
  }

  body[data-theme="auto"][data-page="gallery"] .gallery-month-floating,
  body[data-theme="auto"][data-page="gallery"] .gallery-month-label {
    background: rgba(15, 23, 42, 0.82);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  }
}

@media (min-width: 769px) {
  .team-active-challenge-detail-btn-mobile,
  .team-goal-mobile-preview {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .team-active-challenge-panel {
    padding: 1rem !important;
    border-radius: 24px !important;
  }

  .team-active-challenge-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    flex-wrap: nowrap !important;
  }

  .team-active-challenge-head > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .team-active-challenge-head .eyebrow {
    margin-bottom: 0.25rem !important;
  }

  .team-active-challenge-head h2 {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
  }

  .team-active-challenge-head-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
  }

  .team-active-challenge-status {
    white-space: nowrap !important;
  }

  .team-active-challenge-head-actions .team-active-challenge-detail-btn:not(.team-active-challenge-detail-btn-mobile) {
    display: none !important;
  }

  .team-active-challenge-detail-btn-mobile {
    display: inline-flex !important;
    width: 100% !important;
    margin-top: 0.9rem !important;
    justify-content: center !important;
  }

  .team-active-challenge-grid {
    display: block !important;
    margin-top: 1rem !important;
  }

  .team-active-challenge-main {
    display: block !important;
  }

  .team-active-challenge-values {
    margin-bottom: 0.75rem !important;
  }

  .team-active-challenge-values span {
    font-size: 1.6rem !important;
    line-height: 1 !important;
  }

  .team-active-challenge-objectives,
  .team-active-challenge-meta {
    display: none !important;
  }

  .team-goal-card {
    position: relative !important;
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 22px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.46)),
      rgba(255, 255, 255, 0.68) !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    box-shadow:
      0 12px 30px rgba(15, 23, 42, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(22px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
  }

  .team-goal-mobile-preview {
    width: 100% !important;
    min-height: 78px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "title status"
      "reward progress"
      "bar bar" !important;
    align-items: center !important;
    gap: 0.35rem 0.75rem !important;
    padding: 0.95rem 3rem 0.9rem 1rem !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
    color: rgba(18, 24, 33, 0.92) !important;
    text-decoration: none !important;
  }

  .team-goal-mobile-preview-title {
    grid-area: title !important;
    display: block !important;
    font-size: 0.95rem !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .team-goal-mobile-preview-status {
    grid-area: status !important;
    justify-self: end !important;
    font-size: 0.66rem !important;
    line-height: 1 !important;
  }

  .team-goal-mobile-preview-progress {
    grid-area: progress !important;
    justify-self: end !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #3388ff !important;
    white-space: nowrap !important;
  }

  .team-goal-mobile-preview-reward {
    grid-area: reward !important;
    display: block !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    color: rgba(18, 24, 33, 0.58) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .team-goal-mobile-preview-bar {
    grid-area: bar !important;
    display: block !important;
    height: 5px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: rgba(15, 23, 42, 0.08) !important;
  }

  .team-goal-mobile-preview-bar span {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #3388ff, #6fb0ff) !important;
  }

  .team-goal-card .team-goal-main {
    display: none !important;
  }

  .team-goal-card .team-goal-actions-menu {
    position: absolute !important;
    top: 0.65rem !important;
    right: 0.65rem !important;
    z-index: 4 !important;
  }

  .team-goal-card .team-goal-actions-menu > summary {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }

  body[data-theme="dark"] .team-goal-card,
  body[data-theme="dark"] .team-active-challenge-panel {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)),
      rgba(24, 24, 26, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  }

  body[data-theme="dark"] .team-goal-mobile-preview,
  body[data-theme="dark"] .team-goal-mobile-preview-title,
  body[data-theme="dark"] .team-active-challenge-head h2 {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  body[data-theme="dark"] .team-goal-mobile-preview-reward {
    color: rgba(255, 255, 255, 0.56) !important;
  }

  body[data-theme="dark"] .team-goal-mobile-preview-bar {
    background: rgba(255, 255, 255, 0.10) !important;
  }

  body[data-page="gallery"] .entries-calendar-panel,
  body[data-page="entries"] .entries-calendar-panel,
  body[data-page="gallery"] .entries-calendar-mobile-gallery-panel,
  body[data-page="entries"] .entries-calendar-mobile-gallery-panel {
    padding: 0.82rem !important;
    border-radius: 22px !important;
  }

  body[data-page="profile"] .profile-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.78rem !important;
  }

  body[data-page="profile"] .profile-title {
    min-width: 0 !important;
  }

}

@media (max-width: 899px) {
  .team-layout-edit-mode-panel,
  .profile-layout-edit-mode-panel,
  body.layout-edit-active .team-layout-item {
    padding: 0 !important;
  }

  body.layout-edit-active::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 10040 !important;
    background: rgba(244, 248, 247, 0.86) !important;
    backdrop-filter: blur(8px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.08) !important;
  }

  body.layout-edit-active .screen > :not(.dashboard-layout-edit-mode-panel):not(.team-layout-edit-mode-panel):not(.profile-layout-edit-mode-panel) {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
    filter: none !important;
  }

  body.layout-edit-active .dashboard-layout-edit-mode-panel,
  body.layout-edit-active .team-layout-edit-mode-panel,
  body.layout-edit-active .profile-layout-edit-mode-panel {
    position: fixed !important;
    left: 0.7rem !important;
    right: 0.7rem !important;
    top: calc(4.55rem + env(safe-area-inset-top)) !important;
    z-index: 10060 !important;
    max-height: min(74vh, 680px) !important;
    overflow: auto !important;
    border-radius: 22px !important;
    padding: 0.72rem !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2) !important;
    backdrop-filter: blur(12px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.layout-edit-active.theme-active-dark .dashboard-layout-edit-mode-panel,
  body.layout-edit-active.theme-active-dark .team-layout-edit-mode-panel,
  body.layout-edit-active.theme-active-dark .profile-layout-edit-mode-panel,
  body.layout-edit-active[data-theme="dark"] .dashboard-layout-edit-mode-panel,
  body.layout-edit-active[data-theme="dark"] .team-layout-edit-mode-panel,
  body.layout-edit-active[data-theme="dark"] .profile-layout-edit-mode-panel {
    background: var(--dark-ui-surface-strong, #16222e) !important;
    border: 1px solid var(--dark-ui-border, rgba(170, 193, 204, 0.2)) !important;
  }
}

/* Dark mode consolidation: keep hardcoded light cards, rows, tables and secondary actions readable. */
body[data-theme="dark"],
body.theme-active-dark {
    --dark-ui-bg: #0b1117;
    --dark-ui-surface: rgba(18, 27, 36, 0.94);
    --dark-ui-surface-strong: rgba(22, 34, 46, 0.96);
    --dark-ui-surface-soft: rgba(28, 42, 55, 0.84);
    --dark-ui-row: rgba(19, 31, 42, 0.88);
    --dark-ui-row-hover: rgba(31, 49, 64, 0.92);
    --dark-ui-border: rgba(170, 193, 204, 0.20);
    --dark-ui-border-strong: rgba(202, 222, 232, 0.30);
    --dark-ui-text: #edf7f4;
    --dark-ui-muted: #9fb0ba;
    --dark-ui-accent-soft: rgba(20, 163, 139, 0.18);
}

body[data-theme="dark"] .motivation-band,
body.theme-active-dark .motivation-band {
    color: var(--dark-ui-text) !important;
    background:
        linear-gradient(135deg, rgba(20, 163, 139, 0.20), rgba(255, 255, 255, 0.035)),
        var(--dark-ui-surface-strong) !important;
    border-color: var(--dark-ui-border) !important;
}

body[data-theme="dark"] .btn.btn-secondary,
body.theme-active-dark .btn.btn-secondary {
    color: #f8fffd !important;
    border-color: rgba(20, 163, 139, 0.48) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 44%),
        linear-gradient(135deg, #14a38b, #0d7d6c) !important;
    box-shadow: 0 14px 34px rgba(20, 163, 139, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

body[data-theme="dark"] :where(.settings-row,
.profile-data-card,
.mini-card,
.stat-list article,
.audit-list article,
.achievement-card,
.profile-achievement-card,
.team-achievement-card,
.team-leaderboard-card,
.team-leaderboard-metrics > span,
.team-goal-card,
.team-goal-objective-pill,
.team-goal-meta-grid > span,
.dashboard-penalty-compact-grid > span,
.penalties-history-list > span,
.team-layout-editor-item,
.dashboard-layout-editor-item,
.profile-tagline-form),
body.theme-active-dark :where(.settings-row,
.profile-data-card,
.mini-card,
.stat-list article,
.audit-list article,
.achievement-card,
.profile-achievement-card,
.team-achievement-card,
.team-leaderboard-card,
.team-leaderboard-metrics > span,
.team-goal-card,
.team-goal-objective-pill,
.team-goal-meta-grid > span,
.dashboard-penalty-compact-grid > span,
.penalties-history-list > span,
.team-layout-editor-item,
.dashboard-layout-editor-item,
.profile-tagline-form) {
    color: var(--dark-ui-text) !important;
    border-color: var(--dark-ui-border) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        var(--dark-ui-row) !important;
    box-shadow: none;
}

body[data-theme="dark"] :where(.settings-row:hover, .settings-row:focus-visible),
body.theme-active-dark :where(.settings-row:hover, .settings-row:focus-visible) {
    background:
        linear-gradient(135deg, rgba(20, 163, 139, 0.16), rgba(255, 255, 255, 0.04)),
        var(--dark-ui-row-hover) !important;
}

body[data-theme="dark"] :where(.table-wrap, table, .spreadsheet),
body.theme-active-dark :where(.table-wrap, table, .spreadsheet) {
    color: var(--dark-ui-text) !important;
    border-color: var(--dark-ui-border) !important;
    background: var(--dark-ui-surface) !important;
}

body[data-theme="dark"] :where(th, .table th, .spreadsheet th),
body.theme-active-dark :where(th, .table th, .spreadsheet th) {
    color: var(--dark-ui-muted) !important;
    border-color: var(--dark-ui-border) !important;
    background: rgba(24, 36, 49, 0.98) !important;
}

body[data-theme="dark"] :where(td, .table td, .spreadsheet td),
body.theme-active-dark :where(td, .table td, .spreadsheet td) {
    border-color: var(--dark-ui-border) !important;
    background: rgba(15, 25, 35, 0.78) !important;
}

body[data-theme="dark"] :where(tbody tr:nth-child(even) td, .table tbody tr:nth-child(even) td),
body.theme-active-dark :where(tbody tr:nth-child(even) td, .table tbody tr:nth-child(even) td) {
    background: rgba(19, 31, 42, 0.86) !important;
}

body[data-theme="dark"] :where(.metric-help-popover-content,
.topbar-context[open] .topbar-context-panel,
.add-menu[open] .add-menu-panel,
.user-menu[open] .user-menu-panel,
.photo-post-menu[open] .photo-post-menu-panel),
body.theme-active-dark :where(.metric-help-popover-content,
.topbar-context[open] .topbar-context-panel,
.add-menu[open] .add-menu-panel,
.user-menu[open] .user-menu-panel,
.photo-post-menu[open] .photo-post-menu-panel) {
    color: var(--dark-ui-text) !important;
    border-color: var(--dark-ui-border-strong) !important;
    background:
        linear-gradient(180deg, rgba(38, 53, 68, 0.94), rgba(15, 23, 31, 0.94)),
        var(--dark-ui-surface-strong) !important;
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

body[data-theme="dark"] :where(.profile-data-card strong,
.profile-data-card span,
.profile-data-card small,
.achievement-card,
.achievement-card p,
.achievement-card small,
.team-leaderboard-card,
.team-leaderboard-metrics small,
.team-goal-objective-pill small,
.team-goal-meta-grid small,
.settings-row small,
.mini-card span,
.stat-list span,
.audit-list span),
body.theme-active-dark :where(.profile-data-card strong,
.profile-data-card span,
.profile-data-card small,
.achievement-card,
.achievement-card p,
.achievement-card small,
.team-leaderboard-card,
.team-leaderboard-metrics small,
.team-goal-objective-pill small,
.team-goal-meta-grid small,
.settings-row small,
.mini-card span,
.stat-list span,
.audit-list span) {
    color: inherit;
}

body[data-theme="dark"] :where(.muted,
.profile-data-card span,
.profile-data-card small,
.achievement-card p,
.achievement-card small,
.team-leaderboard-metrics small,
.team-goal-objective-pill small,
.team-goal-meta-grid small,
.mini-card span,
.stat-list span,
.audit-list span),
body.theme-active-dark :where(.muted,
.profile-data-card span,
.profile-data-card small,
.achievement-card p,
.achievement-card small,
.team-leaderboard-metrics small,
.team-goal-objective-pill small,
.team-goal-meta-grid small,
.mini-card span,
.stat-list span,
.audit-list span) {
    color: var(--dark-ui-muted) !important;
}

body[data-theme="dark"] :where(.member-avatar-initials,
.profile-avatar.initials,
.settings-avatar-preview-round),
body.theme-active-dark :where(.member-avatar-initials,
.profile-avatar.initials,
.settings-avatar-preview-round) {
    color: var(--dark-ui-text) !important;
    border-color: rgba(20, 163, 139, 0.36) !important;
    background:
        linear-gradient(135deg, rgba(20, 163, 139, 0.18), rgba(59, 130, 246, 0.12)),
        rgba(21, 33, 45, 0.92) !important;
}

body[data-theme="dark"] .team-rank,
body.theme-active-dark .team-rank {
    color: #8af1d3 !important;
    background: rgba(20, 163, 139, 0.16) !important;
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] {
        --dark-ui-bg: #0b1117;
        --dark-ui-surface: rgba(18, 27, 36, 0.94);
        --dark-ui-surface-strong: rgba(22, 34, 46, 0.96);
        --dark-ui-surface-soft: rgba(28, 42, 55, 0.84);
        --dark-ui-row: rgba(19, 31, 42, 0.88);
        --dark-ui-row-hover: rgba(31, 49, 64, 0.92);
        --dark-ui-border: rgba(170, 193, 204, 0.20);
        --dark-ui-border-strong: rgba(202, 222, 232, 0.30);
        --dark-ui-text: #edf7f4;
        --dark-ui-muted: #9fb0ba;
        --dark-ui-accent-soft: rgba(20, 163, 139, 0.18);
    }

    body[data-theme="auto"] .motivation-band {
        color: var(--dark-ui-text) !important;
        background:
            linear-gradient(135deg, rgba(20, 163, 139, 0.20), rgba(255, 255, 255, 0.035)),
            var(--dark-ui-surface-strong) !important;
        border-color: var(--dark-ui-border) !important;
    }

    body[data-theme="auto"] .btn.btn-secondary {
        color: #f8fffd !important;
        border-color: rgba(20, 163, 139, 0.48) !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 44%),
            linear-gradient(135deg, #14a38b, #0d7d6c) !important;
        box-shadow: 0 14px 34px rgba(20, 163, 139, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    }

    body[data-theme="auto"] :where(.settings-row,
    .profile-data-card,
    .mini-card,
    .stat-list article,
    .audit-list article,
    .achievement-card,
    .profile-achievement-card,
    .team-achievement-card,
    .team-leaderboard-card,
    .team-leaderboard-metrics > span,
    .team-goal-card,
    .team-goal-objective-pill,
    .team-goal-meta-grid > span,
    .dashboard-penalty-compact-grid > span,
    .penalties-history-list > span,
    .team-layout-editor-item,
    .dashboard-layout-editor-item,
    .profile-tagline-form) {
        color: var(--dark-ui-text) !important;
        border-color: var(--dark-ui-border) !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
            var(--dark-ui-row) !important;
        box-shadow: none;
    }

    body[data-theme="auto"] :where(.settings-row:hover, .settings-row:focus-visible) {
        background:
            linear-gradient(135deg, rgba(20, 163, 139, 0.16), rgba(255, 255, 255, 0.04)),
            var(--dark-ui-row-hover) !important;
    }

    body[data-theme="auto"] :where(.table-wrap, table, .spreadsheet) {
        color: var(--dark-ui-text) !important;
        border-color: var(--dark-ui-border) !important;
        background: var(--dark-ui-surface) !important;
    }

    body[data-theme="auto"] :where(th, .table th, .spreadsheet th) {
        color: var(--dark-ui-muted) !important;
        border-color: var(--dark-ui-border) !important;
        background: rgba(24, 36, 49, 0.98) !important;
    }

    body[data-theme="auto"] :where(td, .table td, .spreadsheet td) {
        border-color: var(--dark-ui-border) !important;
        background: rgba(15, 25, 35, 0.78) !important;
    }

    body[data-theme="auto"] :where(tbody tr:nth-child(even) td, .table tbody tr:nth-child(even) td) {
        background: rgba(19, 31, 42, 0.86) !important;
    }

    body[data-theme="auto"] :where(.metric-help-popover-content,
    .topbar-context[open] .topbar-context-panel,
    .add-menu[open] .add-menu-panel,
    .user-menu[open] .user-menu-panel,
    .photo-post-menu[open] .photo-post-menu-panel) {
        color: var(--dark-ui-text) !important;
        border-color: var(--dark-ui-border-strong) !important;
        background:
            linear-gradient(180deg, rgba(38, 53, 68, 0.94), rgba(15, 23, 31, 0.94)),
            var(--dark-ui-surface-strong) !important;
        box-shadow: 0 20px 52px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    }

    body[data-theme="auto"] :where(.profile-data-card strong,
    .profile-data-card span,
    .profile-data-card small,
    .achievement-card,
    .achievement-card p,
    .achievement-card small,
    .team-leaderboard-card,
    .team-leaderboard-metrics small,
    .team-goal-objective-pill small,
    .team-goal-meta-grid small,
    .settings-row small,
    .mini-card span,
    .stat-list span,
    .audit-list span) {
        color: inherit;
    }

    body[data-theme="auto"] :where(.muted,
    .profile-data-card span,
    .profile-data-card small,
    .achievement-card p,
    .achievement-card small,
    .team-leaderboard-metrics small,
    .team-goal-objective-pill small,
    .team-goal-meta-grid small,
    .mini-card span,
    .stat-list span,
    .audit-list span) {
        color: var(--dark-ui-muted) !important;
    }

    body[data-theme="auto"] :where(.member-avatar-initials,
    .profile-avatar.initials,
    .settings-avatar-preview-round) {
        color: var(--dark-ui-text) !important;
        border-color: rgba(20, 163, 139, 0.36) !important;
        background:
            linear-gradient(135deg, rgba(20, 163, 139, 0.18), rgba(59, 130, 246, 0.12)),
            rgba(21, 33, 45, 0.92) !important;
    }

    body[data-theme="auto"] .team-rank {
        color: #8af1d3 !important;
        background: rgba(20, 163, 139, 0.16) !important;
    }
}

body[data-theme="dark"] :where(.topbar-context-panel,
.photo-post-menu-panel,
.metric-help-popover-content,
.calendar-view-panel,
.analytics-view-panel),
body.theme-active-dark :where(.topbar-context-panel,
.photo-post-menu-panel,
.metric-help-popover-content,
.calendar-view-panel,
.analytics-view-panel) {
    color: var(--dark-ui-text) !important;
    border-color: var(--dark-ui-border-strong) !important;
    background:
        linear-gradient(180deg, rgba(38, 53, 68, 0.94), rgba(15, 23, 31, 0.94)),
        var(--dark-ui-surface-strong) !important;
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

body[data-theme="dark"] :where(.user-menu-trigger,
.user-menu-trigger > span:not(.user-menu-unread-badge)),
body.theme-active-dark :where(.user-menu-trigger,
.user-menu-trigger > span:not(.user-menu-unread-badge)) {
    color: var(--dark-ui-text) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)),
        rgba(21, 33, 45, 0.92) !important;
}

body[data-theme="dark"] :where(.team-active-challenge-panel,
.team-active-challenge-panel.is-expired,
.team-active-challenge-panel.is-pending,
.team-active-objective-card,
.team-active-challenge-meta > span,
.team-challenge-detail-card,
.team-challenge-detail-objective,
.team-challenge-detail-average),
body.theme-active-dark :where(.team-active-challenge-panel,
.team-active-challenge-panel.is-expired,
.team-active-challenge-panel.is-pending,
.team-active-objective-card,
.team-active-challenge-meta > span,
.team-challenge-detail-card,
.team-challenge-detail-objective,
.team-challenge-detail-average) {
    color: var(--dark-ui-text) !important;
    border-color: var(--dark-ui-border) !important;
    background:
        linear-gradient(135deg, rgba(20, 163, 139, 0.12), rgba(255, 255, 255, 0.025)),
        var(--dark-ui-row) !important;
    box-shadow: none !important;
}

body[data-theme="dark"] :where(.team-active-challenge-values span,
.team-active-challenge-meta small,
.team-active-challenge-meta strong,
.team-active-objective-card small,
.team-active-objective-card strong,
.team-active-objective-card-head span,
.team-active-objective-card-head strong,
.team-challenge-detail-average strong,
.team-challenge-detail-average small,
.team-challenge-detail-objective p),
body.theme-active-dark :where(.team-active-challenge-values span,
.team-active-challenge-meta small,
.team-active-challenge-meta strong,
.team-active-objective-card small,
.team-active-objective-card strong,
.team-active-objective-card-head span,
.team-active-objective-card-head strong,
.team-challenge-detail-average strong,
.team-challenge-detail-average small,
.team-challenge-detail-objective p) {
    color: inherit !important;
}

body[data-theme="dark"] .achievement-delete-btn,
body.theme-active-dark .achievement-delete-btn {
    color: #fecdd3 !important;
    border-color: rgba(251, 113, 133, 0.24) !important;
    background: rgba(127, 29, 29, 0.42) !important;
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] :where(.topbar-context-panel,
    .photo-post-menu-panel,
    .metric-help-popover-content,
    .calendar-view-panel,
    .analytics-view-panel) {
        color: var(--dark-ui-text) !important;
        border-color: var(--dark-ui-border-strong) !important;
        background:
            linear-gradient(180deg, rgba(38, 53, 68, 0.94), rgba(15, 23, 31, 0.94)),
            var(--dark-ui-surface-strong) !important;
        box-shadow: 0 20px 52px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    }

    body[data-theme="auto"] :where(.user-menu-trigger,
    .user-menu-trigger > span:not(.user-menu-unread-badge)) {
        color: var(--dark-ui-text) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)),
            rgba(21, 33, 45, 0.92) !important;
    }

    body[data-theme="auto"] :where(.team-active-challenge-panel,
    .team-active-challenge-panel.is-expired,
    .team-active-challenge-panel.is-pending,
    .team-active-objective-card,
    .team-active-challenge-meta > span,
    .team-challenge-detail-card,
    .team-challenge-detail-objective,
    .team-challenge-detail-average) {
        color: var(--dark-ui-text) !important;
        border-color: var(--dark-ui-border) !important;
        background:
            linear-gradient(135deg, rgba(20, 163, 139, 0.12), rgba(255, 255, 255, 0.025)),
            var(--dark-ui-row) !important;
        box-shadow: none !important;
    }

    body[data-theme="auto"] :where(.team-active-challenge-values span,
    .team-active-challenge-meta small,
    .team-active-challenge-meta strong,
    .team-active-objective-card small,
    .team-active-objective-card strong,
    .team-active-objective-card-head span,
    .team-active-objective-card-head strong,
    .team-challenge-detail-average strong,
    .team-challenge-detail-average small,
    .team-challenge-detail-objective p) {
        color: inherit !important;
    }

    body[data-theme="auto"] .achievement-delete-btn {
        color: #fecdd3 !important;
        border-color: rgba(251, 113, 133, 0.24) !important;
        background: rgba(127, 29, 29, 0.42) !important;
    }
}

/* Training data spreadsheet polish and compact dashboard analytics action. */
.training-sheet-view-tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.04);
}

.training-sheet-view-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.45rem 0.72rem;
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.training-sheet-view-tabs a.active {
    color: #ffffff;
    background: linear-gradient(135deg, #14a38b, #0f8d78);
    box-shadow: 0 8px 22px rgba(20, 163, 139, 0.18);
}

.training-summary-controls {
    align-items: end;
}

.training-summary-week-table td,
.training-summary-week-table th {
    white-space: nowrap;
}

.training-sheet-table {
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

/* NOTE: cell/field layout rules for .training-sheet-table (position, padding,
   .sheet-field input border/background, etc.) used to be duplicated here and
   again below under "UI pass: compact training rows" — same selectors, same
   specificity, so whichever block came later in the file silently won and the
   other went stale. Consolidated into the single "UI pass" block below; do not
   re-add a second copy here. */

.dashboard-analytics-compact {
    grid-column: 1 / -1;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding-block: 0.85rem;
}

.dashboard-analytics-compact-copy {
    min-width: 0;
}

.dashboard-analytics-compact-copy p {
    margin-bottom: 0;
}

.dashboard-analytics-compact-action {
    flex: 0 0 auto;
    min-width: 138px;
    max-width: 180px;
    white-space: nowrap;
}

.dashboard-weekly-history .dashboard-weekly-table,
.dashboard-weekly-history .dashboard-weekly-table th,
.dashboard-weekly-history .dashboard-weekly-table td,
.dashboard-weekly-history .dashboard-weekly-table a {
    opacity: 1;
}

.dashboard-weekly-history .dashboard-weekly-table td {
    color: var(--ink);
}

.dashboard-weekly-history .dashboard-weekly-table th {
    color: var(--muted);
}

body[data-theme="dark"] .training-sheet-view-tabs,
body.theme-active-dark .training-sheet-view-tabs {
    border-color: rgba(170, 193, 204, 0.22);
    background: rgba(255, 255, 255, 0.045);
}

body[data-theme="dark"] .training-sheet-table .sheet-field input,
body[data-theme="dark"] .training-sheet-table .sheet-field select,
body[data-theme="dark"] .training-sheet-table .week-field.sheet-field input,
body[data-theme="dark"] .training-sheet-table .week-field.sheet-field select,
body.theme-active-dark .training-sheet-table .sheet-field input,
body.theme-active-dark .training-sheet-table .sheet-field select,
body.theme-active-dark .training-sheet-table .week-field.sheet-field input,
body.theme-active-dark .training-sheet-table .week-field.sheet-field select {
    color: var(--dark-ui-text);
}

@media (max-width: 700px) {
    .training-sheet-head,
    .training-summary-controls {
        align-items: stretch;
    }

    .training-sheet-view-tabs {
        width: 100%;
    }

    .training-sheet-view-tabs a {
        flex: 1 1 0;
        min-height: 30px;
        padding: 0.32rem 0.5rem;
        font-size: 0.78rem;
    }

    /* Compact the training sheet header so the table is not pushed far down. */
    .training-sheet-head {
        padding: 0.6rem 0.7rem;
        gap: 0.5rem;
    }

    .training-sheet-controls {
        gap: 0.5rem;
    }

    .training-sheet-head > .btn,
    .training-sheet-controls > label {
        width: 100%;
    }

    .training-sheet-controls label select,
    .training-sheet-controls input[type="week"] {
        width: 100%;
    }

    .dashboard-analytics-compact {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-analytics-compact-action {
        width: 100%;
        max-width: none;
    }
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .training-sheet-view-tabs {
        border-color: rgba(170, 193, 204, 0.22);
        background: rgba(255, 255, 255, 0.045);
    }

    body[data-theme="auto"] .training-sheet-table .sheet-field input,
    body[data-theme="auto"] .training-sheet-table .sheet-field select,
    body[data-theme="auto"] .training-sheet-table .week-field.sheet-field input,
    body[data-theme="auto"] .training-sheet-table .week-field.sheet-field select {
        color: var(--dark-ui-text);
    }
}

/* UI pass: compact training rows, clearer challenge admin, profile history, and roomier analytics. */
.training-sheet-table tbody td.sheet-time-cell,
.training-sheet-table tbody td.sheet-number-cell,
.training-sheet-table tbody td.sheet-workout-cell,
.training-sheet-table tbody td.sheet-notes-cell {
    position: static;
    padding: 0.26rem !important;
}

.training-sheet-table tbody td.sheet-time-cell > .sheet-field,
.training-sheet-table tbody td.sheet-number-cell > .sheet-field,
.training-sheet-table tbody td.sheet-workout-cell > .week-help-wrap,
.training-sheet-table tbody td.sheet-notes-cell > .sheet-field {
    position: static;
    inset: auto;
}

.training-sheet-table tbody td.sheet-workout-cell > .week-help-wrap > .sheet-field,
.training-sheet-table .sheet-field,
.training-sheet-table .week-field.sheet-field,
.training-sheet-table .workout-type-control,
.training-sheet-table .workout-type-custom {
    height: auto;
}

.training-sheet-table .sheet-field input,
.training-sheet-table .sheet-field select,
.training-sheet-table .week-field.sheet-field input,
.training-sheet-table .week-field.sheet-field select {
    box-sizing: border-box;
    padding: 0.36rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    outline: 0;
    background: var(--surface-2);
    box-shadow: none;
}

.training-sheet-table .sheet-field input:focus,
.training-sheet-table .sheet-field select:focus,
.training-sheet-table .week-field.sheet-field input:focus,
.training-sheet-table .week-field.sheet-field select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(20, 163, 139, 0.16);
}

/* Desktop/tablet table view is dense (many columns visible at once), so the
   fields stay compact here. Below 700px the sheet becomes a one-column
   accordion (see JS weekDayMedia) with room for a full 44px tap target. */
@media (min-width: 701px) {
    .training-sheet-table .sheet-time-cell .sheet-field,
    .training-sheet-table .sheet-number-cell .sheet-field,
    .training-sheet-table .sheet-notes-cell .sheet-field,
    .training-sheet-table .sheet-workout-cell .sheet-field {
        min-height: 34px;
    }

    .training-sheet-table .sheet-field input,
    .training-sheet-table .sheet-field select,
    .training-sheet-table .week-field.sheet-field input,
    .training-sheet-table .week-field.sheet-field select {
        height: 34px;
        min-height: 34px;
    }
}

.training-sheet-table .sheet-check-cell,
.training-sheet-table .sheet-extra-cell,
.training-sheet-table .sheet-habits-cell,
.training-sheet-table .sheet-review-cell,
.training-sheet-table .sheet-actions-cell {
    padding: 0.28rem;
}

.training-sheet-table .check,
.training-sheet-table .workout-type-custom .btn,
.training-sheet-table .week-extra-row .btn,
.training-sheet-table .week-day-actions .btn,
.training-sheet-table .sheet-custom-habit-toggle {
    min-height: 32px;
    padding: 0.32rem 0.48rem;
    font-size: 0.78rem;
    line-height: 1.15;
}

.training-sheet-table .sheet-day-cell {
    padding: 0.48rem 0.58rem;
}

.training-sheet-table .sheet-day-cell strong {
    font-size: 0.88rem;
}

.training-sheet-table .sheet-day-cell span,
.training-sheet-table [data-extra-count],
.training-sheet-table .save-status {
    font-size: 0.72rem;
}

.sheet-extra-toolbar {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.training-sheet-table [data-extra-count]:empty {
    display: none;
}

.sheet-extra-panel {
    margin-top: 0.34rem;
}

.training-sheet-table .week-extra-row {
    gap: 0.34rem;
}

.sheet-habits-list {
    display: inline-grid;
    gap: 0.28rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: calc(100% - 42px);
    max-height: 32px;
    margin-top: 0;
    margin-left: 0.32rem;
    vertical-align: top;
}

.training-sheet-table .sheet-habits-list .check {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.training-sheet-table .sheet-habits-cell > .week-help-wrap {
    display: inline-block;
    width: 34px;
    vertical-align: top;
}

.training-sheet-table .sheet-custom-habit-toggle {
    width: 32px;
    min-width: 32px;
    padding-inline: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
}

.training-sheet-table .sheet-custom-habit-toggle::after {
    content: "+";
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
}

.training-sheet-table .sheet-habits-cell > .week-help-wrap:has(.week-custom-habit:not([hidden])) {
    display: block;
    width: 100%;
    margin-bottom: 0.32rem;
}

.training-sheet-table .sheet-habits-cell > .week-help-wrap:has(.week-custom-habit:not([hidden])) + .sheet-habits-list {
    display: grid;
    width: 100%;
    max-height: 68px;
    margin-left: 0;
    grid-template-columns: repeat(2, minmax(95px, 1fr));
}

.sheet-review-details {
    display: grid;
    gap: 0.35rem;
}

.sheet-review-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    min-height: 32px;
    padding: 0.32rem 0.48rem;
    border: 1px solid rgba(217, 226, 221, 0.9);
    border-radius: 7px;
    background: #f9fcfb;
    cursor: pointer;
    list-style: none;
}

.sheet-review-details summary::-webkit-details-marker {
    display: none;
}

.sheet-review-details summary span {
    font-size: 0.78rem;
    font-weight: 850;
}

.sheet-review-details summary small {
    overflow: hidden;
    max-width: 130px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sheet-review-details[open] summary {
    margin-bottom: 0.34rem;
}

.sheet-review-details:not([open]) > .sheet-excuses-grid {
    display: none !important;
}

.training-sheet-table .sheet-excuses-grid {
    gap: 0.36rem;
    max-height: 148px;
    overflow: auto;
    padding-right: 0.12rem;
}

.training-sheet-table .week-field-secondary span,
.training-sheet-table .week-extra-row span {
    font-size: 0.68rem;
    line-height: 1.1;
}

.training-sheet-table .week-field-secondary input,
.training-sheet-table .week-extra-row input,
.training-sheet-table .week-extra-row select {
    height: 32px;
    min-height: 32px;
    padding-block: 0.32rem;
}

.training-sheet-table .week-day-actions {
    gap: 0.18rem;
}

.training-sheet-table .save-status:empty {
    display: none;
    min-height: 0;
}

.admin-challenge-panel {
    display: none;
    gap: 1rem;
}

.admin-challenge-panel.active {
    display: grid;
}

.admin-challenge-layout {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-challenge-card,
.admin-challenge-archive,
.admin-archived-challenges .mini-card {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(248, 250, 252, 0.92)),
        #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.admin-challenge-card,
.admin-challenge-archive {
    padding: 0.95rem;
}

.admin-challenge-new {
    border-color: rgba(20, 163, 139, 0.32);
    background:
        linear-gradient(135deg, rgba(20, 163, 139, 0.12), rgba(255, 255, 255, 0.88)),
        #ffffff;
}

.admin-challenge-card-head,
.profile-challenge-switcher-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.admin-challenge-card-head h3,
.admin-challenge-card-head p {
    margin: 0;
}

.admin-challenge-meta {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-challenge-meta span {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.62rem;
    border: 1px solid rgba(217, 226, 221, 0.82);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.72);
}

.admin-challenge-meta small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.admin-challenge-meta strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-challenge-archive {
    border-color: rgba(239, 68, 68, 0.22);
    background:
        linear-gradient(135deg, rgba(239, 68, 68, 0.07), rgba(255, 255, 255, 0.88)),
        #ffffff;
}

.admin-archived-challenges {
    display: grid;
    gap: 0.62rem;
}

.admin-archived-challenges .mini-card {
    align-items: center;
    padding: 0.72rem;
}

.profile-challenge-switcher {
    display: grid;
    gap: 0.9rem;
}

.profile-challenge-switcher-head {
    flex-wrap: wrap;
}

.profile-challenge-form {
    min-width: min(100%, 360px);
}

.profile-challenge-history {
    display: grid;
    gap: 0.6rem;
    padding-top: 0.78rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.profile-challenge-history > div:first-child {
    display: grid;
    gap: 0.12rem;
}

.profile-challenge-history-list {
    display: grid;
    gap: 0.58rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.profile-challenge-history-card {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.72rem;
    border: 1px solid rgba(217, 226, 221, 0.92);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    background: #fbfdfc;
}

.profile-challenge-history-card:hover,
.profile-challenge-history-card:focus-visible,
.profile-challenge-history-card.active {
    border-color: rgba(20, 163, 139, 0.38);
    background: rgba(20, 163, 139, 0.08);
}

.profile-challenge-history-card span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.profile-challenge-history-card strong,
.profile-challenge-history-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-challenge-history-metrics {
    display: grid;
    gap: 0.36rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.38rem;
}

.profile-challenge-history-metrics span {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
    padding: 0.42rem 0.48rem;
    border: 1px solid rgba(217, 226, 221, 0.78);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.68);
}

.profile-challenge-history-metrics span small {
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
}

.profile-challenge-history-metrics span strong {
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.05;
}

.profile-challenge-history-card.active .profile-challenge-history-metrics span {
    border-color: rgba(20, 163, 139, 0.22);
    background: rgba(255, 255, 255, 0.76);
}

@media (min-width: 1024px) {
    body[data-page="analytics"] .container {
        max-width: min(1480px, calc(100vw - 3rem));
    }

    .analytics-page {
        gap: 1.35rem;
    }

    .analytics-section {
        gap: 1.05rem;
        padding: 1.18rem;
        border-radius: 18px;
    }

    .analytics-section-title {
        padding-bottom: 0.68rem;
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    }

    .analytics-stat-grid {
        display: grid;
        gap: 0.95rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .analytics-stat-card {
        min-height: 108px;
    }

    .analytics-grid {
        gap: 1.1rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .analytics-chart-card {
        display: grid;
        align-content: start;
        gap: 0.72rem;
        min-height: 310px;
        padding: 1.08rem;
    }

    .analytics-chart-wide {
        min-height: 340px;
    }

    .analytics-chart-card canvas {
        height: 238px !important;
        max-height: 238px;
    }

    .analytics-chart-wide canvas {
        height: 265px !important;
        max-height: 265px;
    }

    .flash {
        top: calc(78px + env(safe-area-inset-top));
    }
}

@media (max-width: 780px) {
    .admin-challenge-layout,
    .admin-challenge-meta,
    .profile-challenge-history-list {
        grid-template-columns: 1fr;
    }

    .admin-challenge-card-head,
    .profile-challenge-switcher-head {
        align-items: stretch;
        flex-direction: column;
    }
}

body[data-theme="dark"] .sheet-review-details summary,
body.theme-active-dark .sheet-review-details summary,
body[data-theme="dark"] .admin-challenge-card,
body.theme-active-dark .admin-challenge-card,
body[data-theme="dark"] .admin-challenge-archive,
body.theme-active-dark .admin-challenge-archive,
body[data-theme="dark"] .admin-archived-challenges .mini-card,
body.theme-active-dark .admin-archived-challenges .mini-card,
body[data-theme="dark"] .profile-challenge-history-card,
body.theme-active-dark .profile-challenge-history-card,
body[data-theme="dark"] .profile-challenge-history-metrics span,
body.theme-active-dark .profile-challenge-history-metrics span {
    border-color: rgba(170, 193, 204, 0.22);
    background: rgba(18, 27, 36, 0.84);
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .sheet-review-details summary,
    body[data-theme="auto"] .admin-challenge-card,
    body[data-theme="auto"] .admin-challenge-archive,
    body[data-theme="auto"] .admin-archived-challenges .mini-card,
    body[data-theme="auto"] .profile-challenge-history-card,
    body[data-theme="auto"] .profile-challenge-history-metrics span {
        border-color: rgba(170, 193, 204, 0.22);
        background: rgba(18, 27, 36, 0.84);
    }
}

@media (max-width: 768px) {
    .friends-panel > .panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.55rem;
    }

    .friends-panel > .panel-head .badge {
        flex: 0 0 auto;
        margin-left: auto;
    }
}

/* Mobile chrome polish: keep primary labels readable in the constrained header/nav. */
@media (max-width: 520px) {
    .brand > span:last-child {
        max-width: min(56vw, 230px);
    }
}

/* ==========================================================================
   Login page redesign — variants, dark mode & Remember Me fix (#1)
   ========================================================================== */

.login-variant {
    --login-card-width: 400px;
}

.login-variant .auth-shell-login {
    width: min(1040px, 100%);
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

/* Shared brand block (external copy) */
.login-variant .auth-copy-login {
    display: grid;
    gap: 0.75rem;
    align-content: center;
    padding: 1.4rem 1.2rem;
}

.login-variant .login-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.login-variant .login-headline {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.04;
}

.login-variant .login-tagline {
    margin: 0;
    max-width: 42ch;
    color: rgba(233, 243, 240, 0.92);
    font-size: 1.05rem;
    line-height: 1.5;
}

/* Card */
.login-variant .auth-card-login {
    width: 100%;
    max-width: var(--login-card-width);
    margin-inline: auto;
    padding: clamp(1.4rem, 3vw, 2rem);
    border-radius: var(--radius-xl);
}

.login-variant .auth-card-header {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    margin-bottom: 1.2rem;
    text-align: center;
}

.login-variant .login-card-logo,
.login-variant .login-card-logo-mark {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.35rem;
}

.login-variant .auth-card-title {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.15;
}

.login-variant .auth-card-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
}

.login-variant .auth-form {
    gap: 0.85rem;
}

.login-variant .auth-field span {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ink);
}

.login-variant .auth-field input {
    width: 100%;
}

/* Remember Me — subtle, theme-aware (fixes unreadable dark-mode text) */
.login-variant .remember-me-check {
    min-height: 40px;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--ink) 4%, transparent);
    cursor: pointer;
}

.login-variant .remember-me-check span {
    font-weight: 600;
    color: var(--ink);
}

/* ---- Variant: split (default) ---- */
@media (min-width: 861px) {
    .login-variant-split .auth-shell-login {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 2.4rem;
    }
    .login-variant-split .auth-card-login {
        margin-inline: 0 auto;
    }
}

.login-variant-split .auth-card-header {
    text-align: left;
    justify-items: start;
}

.login-variant-split .auth-card-header .login-card-logo,
.login-variant-split .auth-card-header .login-card-logo-mark {
    display: none;
}

/* ---- Variant: centered ---- */
.login-variant-centered .auth-shell-login {
    grid-template-columns: minmax(0, 440px);
    justify-content: center;
    gap: 1rem;
}

.login-variant-centered .auth-copy-login {
    display: none;
}

.login-variant-centered .auth-card-login {
    --login-card-width: 440px;
}

/* ---- Variant: spotlight ---- */
.login-variant-spotlight .auth-shell-login {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
}

.login-variant-spotlight .auth-copy-login {
    display: none;
}

.login-variant-spotlight .auth-card-login {
    --login-card-width: 420px;
    border-radius: 26px;
    box-shadow: 0 30px 80px rgba(4, 10, 18, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body.login-body.login-variant-spotlight-body {
    background:
        linear-gradient(160deg, rgba(6, 12, 20, 0.58), rgba(8, 18, 26, 0.62)),
        var(--login-bg-image, linear-gradient(140deg, #0c141d, #0f2027)) center / cover no-repeat fixed;
}

/* Dark-mode / auto refinements for the login card internals */
body[data-theme="dark"] .login-variant .remember-me-check,
body[data-theme="dark"] .login-variant .auth-field span,
body[data-theme="dark"] .login-variant .auth-card-title {
    color: var(--ink);
}

body[data-theme="dark"] .login-variant .remember-me-check {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .login-variant .remember-me-check {
        border-color: rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.06);
    }
    body[data-theme="auto"] .login-variant .remember-me-check span,
    body[data-theme="auto"] .login-variant .auth-field span {
        color: var(--ink);
    }
}

@media (max-width: 860px) {
    .login-variant .auth-shell-login {
        width: 100%;
        max-width: 440px;
        grid-template-columns: minmax(0, 1fr);
        justify-content: center;
    }
    .login-variant .auth-copy-login,
    .login-variant .auth-card-login {
        min-width: 0;
        width: min(100%, calc(100vw - 2rem));
        max-width: calc(100vw - 2rem);
        justify-self: center;
    }
    .login-variant-split .auth-copy-login {
        text-align: center;
        justify-items: center;
        padding-bottom: 0.4rem;
    }
    .login-variant-split .login-brand {
        justify-content: center;
    }
    .login-variant-split .login-tagline {
        margin-inline: auto;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 520px) {
    body.login-body .container {
        width: min(100%, calc(100vw - 1rem));
    }
    .login-variant .auth-copy-login {
        padding-inline: 0.45rem;
    }
    .login-variant .auth-card-login {
        padding: 1.25rem 1.1rem;
    }
    .login-variant .login-headline {
        font-size: 1.8rem;
    }
}

/* ---- Admin: login style picker ---- */
.admin-login-style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.admin-login-style-item {
    display: grid;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--ink) 3%, transparent);
}

.admin-login-style-item.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent);
}

.admin-login-style-preview {
    position: relative;
    display: block;
    height: 74px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(140deg, #12303a, #0f2027);
}

.admin-login-style-preview-card {
    position: absolute;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.admin-login-style-preview-panel {
    position: absolute;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.14);
}

.admin-login-style-preview-split .admin-login-style-preview-panel {
    left: 8px; top: 14px; width: 40%; height: 46px;
}
.admin-login-style-preview-split .admin-login-style-preview-card {
    right: 8px; top: 14px; width: 40%; height: 46px;
}

.admin-login-style-preview-centered .admin-login-style-preview-panel { display: none; }
.admin-login-style-preview-centered .admin-login-style-preview-card {
    left: 50%; top: 14px; transform: translateX(-50%); width: 46%; height: 46px;
}

.admin-login-style-preview-spotlight {
    background: linear-gradient(140deg, #1a3d47, #0b1a22);
}
.admin-login-style-preview-spotlight .admin-login-style-preview-panel { display: none; }
.admin-login-style-preview-spotlight .admin-login-style-preview-card {
    left: 50%; top: 12px; transform: translateX(-50%); width: 40%; height: 50px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
}

.admin-login-style-meta {
    display: grid;
    gap: 0.15rem;
}

.admin-login-style-meta strong { font-size: 0.95rem; }
.admin-login-style-meta .muted { font-size: 0.8rem; }

/* ==========================================================================
   Reusable UI components: kebab menu, modal, drawer (shared)
   ========================================================================== */

/* ---- Kebab (three-dot) menu ---- */
.kebab-menu {
    position: relative;
    display: inline-block;
}

.kebab-menu > summary.kebab-menu-trigger {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    cursor: pointer;
}

.kebab-menu > summary.kebab-menu-trigger::-webkit-details-marker { display: none; }
.kebab-menu > summary.kebab-menu-trigger::marker { content: ""; }

.kebab-menu-dots {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
}
.kebab-menu-dots span {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    display: block;
}

.kebab-menu-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    z-index: 50;
    min-width: 190px;
    width: min(238px, calc(100vw - 16px));
    display: grid;
    gap: 0.18rem;
    padding: 0.4rem;
    border: 1px solid var(--glass-border, var(--line));
    border-radius: 14px;
    background: var(--glass-strong, var(--surface));
    box-shadow: var(--glass-shadow-deep, 0 16px 34px rgba(15, 23, 42, 0.16));
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    animation: kebabMenuIn 0.14s ease both;
}
.kebab-menu[data-align="end"] .kebab-menu-panel { right: 0; }
.kebab-menu[data-align="start"] .kebab-menu-panel { left: 0; }

.kebab-menu-view { display: grid; gap: 0.18rem; min-width: 0; }
.kebab-menu-view[hidden] { display: none !important; }
.kebab-menu-sheet-head {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 0.35rem;
    min-height: 40px;
    margin-bottom: 0.2rem;
    padding: 0.1rem 0.15rem 0.35rem;
    border-bottom: 1px solid var(--line);
}
.kebab-menu-sheet-head:has(> .menu-destination-back) { grid-template-columns: auto minmax(0, 1fr) 36px; }
.kebab-menu-sheet-head strong {
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 850;
}
.kebab-menu-sheet-spacer { width: 36px; height: 36px; }
.kebab-menu-sheet-back,
.kebab-menu-sheet-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: 1.1rem;
    cursor: pointer;
}
.kebab-menu-sheet-back:hover,
.kebab-menu-sheet-back:focus-visible,
.kebab-menu-sheet-close:hover,
.kebab-menu-sheet-close:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.kebab-menu-sheet-back.menu-destination-back {
    display: inline-flex;
    width: auto;
    max-width: 104px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding-inline: 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
}
.kebab-menu-sheet-back.menu-destination-back > strong {
    overflow: hidden;
    font-size: 0.62rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes kebabMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.kebab-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 38px;
    padding: 0.5rem 0.6rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.kebab-menu-item:hover,
.kebab-menu-item:focus-visible {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.kebab-menu-item-copy { flex: 1; min-width: 0; display: grid; gap: 0.08rem; }
.kebab-menu-item-copy > span { overflow-wrap: anywhere; }
.kebab-menu-item-copy small { color: var(--muted); font-size: 0.7rem; font-weight: 600; line-height: 1.3; }
.kebab-menu-chevron { flex: 0 0 auto; color: var(--muted); font-size: 1.35rem; line-height: 1; }
.kebab-menu-item.is-danger { color: var(--bad, #df4c43); }
.kebab-menu-item.is-danger:hover { background: color-mix(in srgb, var(--bad, #df4c43) 14%, transparent); }
.kebab-menu-item.is-danger { margin-top: 0.2rem; box-shadow: 0 -1px 0 var(--line); }

.kebab-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 12010;
    border: 0;
    background: rgba(8, 14, 22, 0.36);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: kebabBackdropIn 0.16s ease both;
}
@keyframes kebabBackdropIn { from { opacity: 0; } to { opacity: 1; } }
body.kebab-menu-open-mobile { overflow: hidden; }

/* Mobile: kebab panel becomes a bottom sheet for easy reach */
@media (max-width: 600px) {
    .kebab-menu > summary.kebab-menu-trigger { width: 44px; min-width: 44px; height: 44px; }
    .kebab-menu[open] .kebab-menu-panel {
        position: fixed;
        left: 0.6rem;
        right: 0.6rem;
        bottom: calc(0.6rem + env(safe-area-inset-bottom));
        top: auto;
        min-width: 0;
        gap: 0.25rem;
        padding: 0.5rem;
        border-radius: 18px;
        animation: kebabSheetIn 0.18s ease both;
    }
    .kebab-menu-panel.is-portaled {
        width: auto !important;
        max-height: min(70dvh, 480px) !important;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0.55rem;
        border-radius: 22px;
        background: var(--surface, #fff) !important;
        box-shadow: 0 24px 70px rgba(8, 14, 22, 0.3);
        transform-origin: bottom center;
    }
    .kebab-menu-sheet-head {
        position: sticky;
        top: -0.55rem;
        z-index: 2;
        min-height: 48px;
        margin-inline: -0.1rem;
        padding-top: 0.45rem;
        background: var(--surface, #fff);
    }
    .kebab-menu-sheet-head strong { font-size: 0.9rem; }
    .kebab-menu-sheet-back,
    .kebab-menu-sheet-close { width: 40px; height: 40px; }
    .kebab-menu-item { min-height: 48px; padding: 0.65rem 0.72rem; font-size: 0.95rem; }
    @keyframes kebabSheetIn {
        from { opacity: 0; transform: scale(0.985); }
        to { opacity: 1; transform: scale(1); }
    }
}

/* ---- App modal & drawer ---- */
.app-modal,
.app-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    padding: 1rem;
    background: rgba(8, 14, 22, 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.app-modal[hidden],
.app-drawer[hidden] { display: none; }
.app-modal.is-open,
.app-drawer.is-open { opacity: 1; }

.app-modal { align-items: center; justify-content: center; }

.app-modal-card {
    width: min(560px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: clamp(1.2rem, 3vw, 1.6rem);
    border: 1px solid var(--glass-border, var(--line));
    border-radius: var(--radius-lg, 20px);
    background: var(--glass-strong, var(--surface));
    box-shadow: var(--glass-shadow-deep, 0 28px 78px rgba(15, 23, 42, 0.22));
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    transform: translateY(10px) scale(0.98);
    transition: transform 0.2s ease;
}
.app-modal.is-open .app-modal-card { transform: translateY(0) scale(1); }

.app-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}
.app-modal-head h2, .app-modal-head h3 { margin: 0; }

.app-modal-close,
.app-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.app-modal-close:hover,
.app-drawer-close:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* Drawer: from right on desktop, bottom sheet on mobile */
.app-drawer { align-items: stretch; justify-content: flex-end; padding: 0; }
.app-drawer-card {
    width: min(440px, 100%);
    height: 100%;
    overflow: auto;
    padding: clamp(1.2rem, 3vw, 1.6rem);
    border-left: 1px solid var(--glass-border, var(--line));
    background: var(--glass-strong, var(--surface));
    box-shadow: var(--glass-shadow-deep, 0 28px 78px rgba(15, 23, 42, 0.22));
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    transform: translateX(24px);
    transition: transform 0.22s ease;
}
.app-drawer.is-open .app-drawer-card { transform: translateX(0); }

@media (max-width: 600px) {
    .app-drawer { align-items: flex-end; }
    .app-drawer-card {
        width: 100%;
        height: auto;
        max-height: 88vh;
        border-left: 0;
        border-top-left-radius: 22px;
        border-top-right-radius: 22px;
        transform: translateY(24px);
    }
    .app-drawer.is-open .app-drawer-card { transform: translateY(0); }
}

body.app-scroll-locked { overflow: hidden; }

/* ==========================================================================
   Photo Post — Instagram-style polish + round avatars (#7)
   ========================================================================== */
.photo-post-author .profile-avatar,
.photo-comment-author .profile-avatar,
.gallery-post-author .profile-avatar {
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
}

.photo-post-author {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.photo-post-author strong {
    font-size: 0.98rem;
    letter-spacing: -0.01em;
}

/* Cleaner post meta card header row */
.photo-post-meta-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.photo-post-tags {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* Post media framing — Instagram-like square-ish, centered */
.photo-post-media {
    border-radius: var(--radius-lg, 18px);
    overflow: hidden;
    background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.photo-post-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-post-caption {
    line-height: 1.5;
}

/* ==========================================================================
   Level clickable -> XP progress modal (#21)
   ========================================================================== */
button.profile-level-trigger {
    border: 0;
    background: transparent;
    padding: 0.3rem 0.4rem 0.3rem 0.3rem;
    margin-top: 0.5rem;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: background 0.16s ease, transform 0.16s ease;
}
button.profile-level-trigger:hover {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    transform: translateY(-1px);
}
button.profile-level-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.level-progress-ring-wrap {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.level-progress-bar-lg {
    height: 12px !important;
    border-radius: 999px;
}
.level-progress-pct {
    margin: 0;
    font-weight: 800;
    font-size: 1.4rem;
    text-align: center;
}
.level-progress-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.6rem;
}
.level-progress-stat {
    display: grid;
    gap: 0.15rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.level-progress-stat-label {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.level-progress-stat strong { font-size: 1.05rem; }
.level-progress-hint { margin: 1rem 0 0; font-size: 0.86rem; }

/* ==========================================================================
   Team Settings — 2-col secondary grid (#10) + compact Join Requests (#12)
   ========================================================================== */
.team-settings-secondary {
    align-items: start;
}

.join-requests-list {
    display: grid;
    gap: 0.4rem;
    max-height: 360px;
    overflow-y: auto;
}
.join-requests-empty { margin: 0.3rem 0; }

.join-request-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ink) 2.5%, transparent);
}
.join-request-meta {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}
.join-request-meta .member-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 999px;
}
.join-request-text {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}
.join-request-text strong {
    font-size: 0.92rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.join-request-text span {
    color: var(--muted);
    font-size: 0.76rem;
}
.join-request-actions {
    display: flex;
    gap: 0.35rem;
    flex: 0 0 auto;
}
.join-request-actions .btn.small {
    min-height: 32px;
    padding-inline: 0.6rem;
}

@media (max-width: 480px) {
    .join-request-row { flex-wrap: wrap; }
    .join-request-actions { width: 100%; }
    .join-request-actions .btn { flex: 1; }
}

/* ==========================================================================
   Team members — clickable rows, name-only on mobile (#11)
   ========================================================================== */
a.member-card-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.14s ease, background 0.16s ease, box-shadow 0.16s ease;
}
a.member-card-link:hover {
    transform: translateY(-1px);
}
.member-card-body {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}
.member-card-body strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.member-card-meta {
    color: var(--muted);
    font-size: 0.8rem;
}
.member-card-go {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 1.3rem;
    line-height: 1;
    opacity: 0.7;
}

@media (max-width: 600px) {
    /* Name-focused compact rows on mobile */
    .team-members-panel .member-card-meta { display: none; }
    .team-members-panel a.member-card-link {
        padding-block: 0.55rem;
        gap: 0.55rem;
    }
    .team-members-panel .member-card-title .member-avatar {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
    }
}

/* ==========================================================================
   Analytics — default Total view is server-side (#8). Mobile summary fonts.
   ========================================================================== */
@media (max-width: 600px) {
    .analytics-summary-section .analytics-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }
    .analytics-summary-section .analytics-stat-card strong,
    .analytics-stat-grid .analytics-stat-card strong {
        font-size: 1.05rem;
        line-height: 1.15;
        word-break: break-word;
    }
    .analytics-stat-grid .analytics-stat-card {
        padding: 0.6rem 0.65rem;
    }
    .analytics-stat-card .analytics-stat-label,
    .analytics-stat-card span {
        font-size: 0.72rem;
    }
    .analytics-section-title h2 {
        font-size: 1.05rem;
    }
}

/* Keep analytics sections visually consistent with the page's panels so they
   don't read as detached patches (#8). */
.analytics-section {
    border-radius: var(--radius-lg, 18px);
}

/* ==========================================================================
   Profile My Data — clickable metric cards -> detail (#16)
   ========================================================================== */
a.profile-data-card-link {
    position: relative;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
a.profile-data-card-link:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}
a.profile-data-card-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.profile-data-card-go {
    position: absolute;
    top: 0.55rem;
    right: 0.6rem;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.16s ease, transform 0.16s ease;
}
a.profile-data-card-link:hover .profile-data-card-go {
    opacity: 0.75;
    transform: translateX(2px);
}

/* ==========================================================================
   Training Overview — compact single-line habit chips (#4) + overflow guards (#3)
   ========================================================================== */
.training-habit-chips-compact {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    min-height: 42px;
    overflow: visible;
}
.training-habit-chips-compact .training-habit-chip {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}
.training-habit-chips-compact .training-habit-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.training-habit-more { flex: 0 0 auto; }
.training-habit-more > summary.training-habit-more-btn {
    width: auto;
    min-width: 42px;
    height: 34px;
    padding-inline: 0.6rem;
    font-weight: 800;
}
.training-habit-more-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

/* #3 — keep training bars/tables within their container, never push right */
.training-summary-controls,
.training-sheet-view-tabs {
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
}
.training-sheet-view-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.training-summary-weeks-panel .table-wrap,
.training-overview .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
/* grid-two children must be allowed to shrink so tables/bars don't force
   horizontal page overflow */
.grid-two > * { min-width: 0; }

/* ==========================================================================
   Custom Habit form opens as a floating popover, not inline in the table (#5)
   so the sheet row height never changes when it opens.
   ========================================================================== */
.week-help-wrap .week-custom-habit:not([hidden]) {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    right: 0;
    width: min(280px, calc(100vw - 2rem));
    border: 1px solid var(--glass-border, var(--line));
    border-radius: 14px;
    background: var(--glass-strong, #fff);
    box-shadow: var(--glass-shadow-deep, 0 18px 40px rgba(15, 23, 42, 0.2));
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}
/* Let the popover escape the habit cell without expanding the row */
.sheet-habits-cell { overflow: visible; }

/* ==========================================================================
   Training Overview — clearer visual hierarchy (#6)
   ========================================================================== */
.training-result-stat {
    position: relative;
    transition: transform 0.14s ease, box-shadow 0.16s ease;
}
.training-result-stat::before {
    content: "";
    position: absolute;
    left: 0; top: 0.7rem; bottom: 0.7rem;
    width: 3px;
    border-radius: 999px;
    background: var(--good, #19a974);
    opacity: 0.55;
}
.training-result-stat.is-warn::before { background: var(--bad, #ef4444); opacity: 0.7; }
.training-result-stat { padding-left: 1rem; }
.training-result-stat.is-ok .training-result-value { color: var(--good, #19a974); }
.training-result-stat:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}
.training-result-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.72rem;
}
/* Consistent spacing between the overview panels */
.training-summary-weeks-panel { margin-top: 0.2rem; }

/* ==========================================================================
   Status summary cards — Duels / Competitions on Profile & Dashboard (#19/#20)
   ========================================================================== */
.status-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.5rem;
}
.status-summary-stat {
    display: grid;
    gap: 0.16rem;
    padding: 0.62rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: color-mix(in srgb, var(--ink) 3%, transparent);
    text-align: center;
}
.status-summary-value {
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.status-summary-label {
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}
.status-summary-stat.is-active {
    border-color: color-mix(in srgb, #3b82f6 34%, var(--line));
    background: color-mix(in srgb, #3b82f6 9%, transparent);
}
.status-summary-stat.is-active .status-summary-value { color: #3b82f6; }
.status-summary-stat.is-pending {
    border-color: color-mix(in srgb, #f5b94b 42%, var(--line));
    background: color-mix(in srgb, #f5b94b 10%, transparent);
}
.status-summary-stat.is-pending .status-summary-value { color: #d18f10; }
.status-summary-stat.is-won {
    border-color: color-mix(in srgb, var(--good, #19a974) 36%, var(--line));
    background: color-mix(in srgb, var(--good, #19a974) 8%, transparent);
}
.status-summary-stat.is-won .status-summary-value { color: var(--good, #19a974); }

.status-summary-card .panel-head .eyebrow { display: none; }

/* ==========================================================================
   Profile — team badges in hero (#19)
   ========================================================================== */
.profile-team-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
}
.profile-team-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.14s ease, background 0.16s ease;
}
.profile-team-badge:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--primary) 16%, transparent); }
.profile-team-badge-dot {
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--primary);
}

/* Dashboard duels/competitions widgets sit in the layout grid (#20) */
.dashboard-versus-widget { min-width: 0; }
.dashboard-versus-widget .status-summary-card { height: 100%; }

/* ==========================================================================
   Friends — motivating comparator + desktop grid (#18)
   ========================================================================== */
.friends-compare-lead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0.4rem 0 1rem;
    padding: 0.7rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.friends-compare-lead-score {
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1;
    min-width: 2ch;
    text-align: center;
    color: var(--muted);
}
.friends-compare-lead.is-me .friends-compare-lead-score:first-child,
.friends-compare-lead.is-friend .friends-compare-lead-score:last-child {
    color: var(--primary);
}
.friends-compare-lead-label {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.82rem;
    text-align: center;
}

.friends-compare-row { display: grid; gap: 0.35rem; padding: 0.4rem 0; }
.friends-compare-line {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.6rem;
}
.friends-compare-line .friends-compare-val:first-child { text-align: right; }
.friends-compare-line .friends-compare-val:last-child { text-align: left; }
.friends-compare-metric {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--muted);
    white-space: nowrap;
}
.friends-compare-val.is-win { color: var(--primary); font-weight: 900; }

.friends-compare-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    align-items: center;
}
.friends-compare-bar-track {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    overflow: hidden;
    display: flex;
}
.friends-compare-bar-me { justify-content: flex-end; }
.friends-compare-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 28%, transparent);
}
.friends-compare-bar-fill.is-win { background: var(--primary); }

/* Desktop: friend lists as a responsive grid to use the width */
@media (min-width: 720px) {
    .friends-panel .card-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 0.6rem;
    }
    .friends-panel .friends-row { margin: 0; }
}

/* ==========================================================================
   Profile — customizable home layout (#15)
   ========================================================================== */
.profile-home-block-wrap {
    min-width: 0;
    display: flex;
}
.profile-home-block-wrap > .status-summary-card { width: 100%; }
.profile-layout-editor-panel { margin-bottom: 0.2rem; }
.profile-layout-editor-label { flex: 1; font-weight: 700; min-width: 0; }

/* ==========================================================================
   Notification center — dedicated bell in topbar, visible on mobile too (#13)
   ========================================================================== */
.topbar-notif-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--glass, rgba(255, 255, 255, 0.6));
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.14s ease, background 0.16s ease;
}
.topbar-notif-btn:hover { transform: translateY(-1px); }
.topbar-notif-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.topbar-notif-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--coral, #ff6b4a);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--surface, #fff);
}

/* ==========================================================================
   Dark mode fix — base .check had a hardcoded #fff background (same family
   as the Remember Me bug): week editor habits, entries toggles, pill toggles.
   ========================================================================== */
body[data-theme="dark"] .check,
body.theme-active-dark .check {
    color: var(--ink);
    border-color: rgba(174, 194, 203, 0.22);
    background: rgba(18, 27, 36, 0.92);
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .check {
        color: var(--ink);
        border-color: rgba(174, 194, 203, 0.22);
        background: rgba(18, 27, 36, 0.92);
    }
}

/* Hero panels that host a kebab menu must not clip its dropdown
   (.hero-panel has overflow:hidden by default). */
.hero-panel:has(.kebab-menu) {
    overflow: visible;
    position: relative;
    z-index: 30;
}

@media (max-width: 719px) {
    .profile-hero:has(.profile-hero-menu),
    .hero-panel:has(.team-hero-actions > .team-hero-menu):not(:has(.team-join-more)) {
        padding-right: 4.25rem;
    }

    .profile-hero-actions:has(> .profile-hero-menu):not(.has-friend-actions),
    .team-hero-actions:has(> .team-hero-menu):not(:has(> .team-join-more)) {
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 45;
        width: auto;
        min-width: 0;
        display: inline-flex;
        justify-self: auto;
        align-self: auto;
    }
}

/* ==========================================================================
   Deep UX pass — Apple-inspired polish + acceptance fixes
   ========================================================================== */

/* #9 — Avatar must be a perfect circle on every device. The mobile override
   set width/height:60px but left flex-basis:82px from the base rule, so the
   box became non-square (oval/faceted). Lock aspect-ratio + flex at the base. */
.profile-avatar,
.member-avatar,
.settings-avatar-preview,
.settings-avatar-preview-round {
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 50%;
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari clip fix */
}
@media (max-width: 600px) {
    .settings-avatar-preview-round,
    .settings-avatar-preview,
    .profile-avatar {
        flex: 0 0 60px !important;
        min-height: 60px !important;
    }
}

/* #9 — Profile/Team hero kebab must be TOP-right on desktop. The hero-panel is
   a 2-col grid with align-items:end (≥680px), which pushed the actions column
   to the bottom. Pin the kebab-bearing action cluster to the top. */
@media (min-width: 680px) {
    .profile-hero-actions:has(.kebab-menu),
    .team-hero-actions:has(.kebab-menu) {
        align-self: start;
    }
}

/* #10 — Panel/summary-card headers keep title + action on ONE row until it
   truly can't fit, then wrap gracefully. Fixes the Duels "Duels / View All"
   double-line height jump. */
.status-summary-card .panel-head,
.panel > .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.status-summary-card .panel-head > div:first-child,
.panel > .panel-head > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}
.status-summary-card .panel-head .btn,
.panel > .panel-head > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.status-summary-card .panel-head h2,
.status-summary-card .panel-head h3 {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* #8 — Analytics sections: clearer card vs page separation on mobile (subtle
   but visible border + soft shadow, coherent radius). No heavy glass. */
@media (max-width: 600px) {
    .analytics-section,
    .analytics-summary-section,
    .analytics-layout-item {
        border: 1px solid var(--line);
        border-radius: var(--radius-lg, 16px);
        background: var(--surface);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05);
        padding: 0.85rem;
    }
}
body[data-theme="dark"] .analytics-section,
body.theme-active-dark .analytics-section,
body[data-theme="dark"] .analytics-summary-section,
body.theme-active-dark .analytics-summary-section {
    border-color: var(--dark-ui-border);
    background: var(--dark-ui-surface);
    box-shadow: none;
}

/* Respect reduced-motion across the new interactive components (#16). */
@media (prefers-reduced-motion: reduce) {
    .kebab-menu-panel,
    .app-modal,
    .app-drawer,
    .app-modal-card,
    .app-drawer-card,
    .friends-compare-bar-fill,
    .profile-data-card-link,
    .member-card-link,
    .status-summary-card,
    .pwa-install-nudge,
    .to-top-btn {
        transition: none !important;
        animation: none !important;
    }
}

/* Compact install prompt: mobile only, above the bottom navigation. */
.pwa-install-nudge {
    display: none;
}

@media (max-width: 700px) {
    .pwa-install-nudge {
        position: fixed;
        left: max(0.75rem, env(safe-area-inset-left));
        right: max(0.75rem, env(safe-area-inset-right));
        bottom: calc(5.5rem + env(safe-area-inset-bottom));
        z-index: 11020;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto 40px;
        align-items: center;
        gap: 0.55rem;
        min-height: 66px;
        padding: 0.5rem;
        border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
        border-radius: 18px;
        background: color-mix(in srgb, var(--surface) 96%, transparent);
        color: var(--ink);
        box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18);
        -webkit-backdrop-filter: blur(18px) saturate(145%);
        backdrop-filter: blur(18px) saturate(145%);
        opacity: 0;
        transform: translateY(12px) scale(0.98);
        transform-origin: bottom center;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .pwa-install-nudge[hidden] {
        display: none !important;
    }
    .pwa-install-nudge.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
    .pwa-install-nudge-icon {
        width: 42px;
        height: 42px;
        overflow: hidden;
        border-radius: 13px;
        background: var(--surface-soft, var(--surface));
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
    }
    .pwa-install-nudge-icon img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .pwa-install-nudge-copy {
        display: grid;
        min-width: 0;
        gap: 0.1rem;
    }
    .pwa-install-nudge-copy strong {
        overflow: hidden;
        font-size: 0.76rem;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .pwa-install-nudge-copy small {
        display: -webkit-box;
        overflow: hidden;
        color: var(--muted);
        font-size: 0.64rem;
        line-height: 1.25;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .pwa-install-nudge-action,
    .pwa-install-nudge-close {
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        cursor: pointer;
        font: inherit;
    }
    .pwa-install-nudge-action {
        min-height: 44px;
        padding: 0 0.78rem;
        border-radius: 12px;
        background: var(--primary);
        color: var(--primary-contrast, #fff);
        font-size: 0.7rem;
        font-weight: 800;
    }
    .pwa-install-nudge-action:disabled {
        opacity: 0.58;
        cursor: wait;
    }
    .pwa-install-nudge-close {
        width: 40px;
        height: 44px;
        padding: 0;
        border-radius: 11px;
        background: transparent;
        color: var(--muted);
        font-size: 1.35rem;
        line-height: 1;
    }
    .pwa-install-nudge-close:hover,
    .pwa-install-nudge-close:focus-visible {
        background: color-mix(in srgb, var(--ink) 8%, transparent);
        color: var(--ink);
    }
    .pwa-install-nudge.is-guidance {
        grid-template-columns: 42px minmax(0, 1fr) 40px;
    }
    .pwa-install-nudge.is-guidance .pwa-install-nudge-action {
        display: none;
    }
    body.mobile-keyboard-open .pwa-install-nudge,
    body.layout-edit-active .pwa-install-nudge,
    body:has(.app-modal.is-open) .pwa-install-nudge,
    body:has(.app-drawer.is-open) .pwa-install-nudge,
    body:has(nav.bottom-nav details[open]) .pwa-install-nudge,
    body:has(.topbar .user-menu[open]) .pwa-install-nudge,
    body:has(.topbar-context[open]) .pwa-install-nudge {
        display: none !important;
    }
}

@media (max-width: 359px) {
    .pwa-install-nudge {
        left: max(0.5rem, env(safe-area-inset-left));
        right: max(0.5rem, env(safe-area-inset-right));
        grid-template-columns: 38px minmax(0, 1fr) auto 40px;
        gap: 0.38rem;
        padding: 0.42rem;
    }
    .pwa-install-nudge-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }
    .pwa-install-nudge-action {
        padding-inline: 0.58rem;
    }
    .pwa-install-nudge.is-guidance {
        grid-template-columns: 38px minmax(0, 1fr) 40px;
    }
}

body[data-theme="dark"] .pwa-install-nudge,
body.theme-active-dark .pwa-install-nudge {
    border-color: var(--dark-ui-border, #242424);
    background: var(--dark-ui-surface, #090909);
    box-shadow: none;
}

/* Back-to-top floating button (#9 — long settings/config pages) */
.to-top-btn {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(1rem + env(safe-area-inset-bottom) + var(--mobile-bottom-nav-height, 0px));
    z-index: 120;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--glass-strong, var(--surface));
    color: var(--ink);
    box-shadow: var(--glass-shadow, 0 10px 26px rgba(15, 23, 42, 0.16));
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.to-top-btn.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.to-top-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Human activity feed (#11) + shared empty states (#16)
   ========================================================================== */
.activity-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.15rem;
}
.activity-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.35rem;
    border-radius: 12px;
}
.activity-item + .activity-item { border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.activity-item-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}
.activity-item-icon svg { width: 18px; height: 18px; }
.activity-item-body { display: grid; gap: 0.05rem; min-width: 0; }
.activity-item-body strong {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}
.activity-item-when { color: var(--muted); font-size: 0.76rem; }

.empty-state {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 1.6rem 1rem;
    text-align: center;
}
.empty-state-compact { padding: 1rem 0.6rem; }
.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    color: var(--muted);
}
.empty-state-icon svg { width: 24px; height: 24px; }
.empty-state p { margin: 0; max-width: 30ch; }

/* ==========================================================================
   Workouts subsystem (#5) — routines, session logger
   ========================================================================== */
.workouts-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}
@media (min-width: 680px) { .workouts-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.workouts-stat-card {
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 16px);
    background: var(--surface);
}
.workouts-stat-value { font-size: 1.6rem; font-weight: 900; line-height: 1; }
.workouts-stat-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); }

.workouts-routine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.7rem;
}
.workouts-routine-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.9rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--routine-accent, var(--primary)) 32%, var(--line));
    border-radius: var(--radius-lg, 16px);
    background: var(--surface);
    transition: transform 0.14s ease, box-shadow 0.16s ease;
}
.workouts-routine-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--routine-accent, var(--primary)); }
.workouts-routine-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--routine-accent, var(--primary)) 12%, transparent); }
.workouts-routine-card.is-favorite { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning, #f5b94b) 45%, transparent); }
.workouts-routine-card-cover {
    position: relative;
    display: block;
    height: 126px;
    margin: -0.9rem -0.9rem 0;
    overflow: hidden;
    color: #fff;
    background: color-mix(in srgb, var(--routine-accent, var(--primary)) 16%, var(--surface));
}
.workouts-routine-card-cover::after { content: ""; position: absolute; inset: auto 0 0; height: 48%; background: linear-gradient(180deg, transparent, rgba(7, 13, 23, 0.32)); pointer-events: none; }
.workouts-routine-card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.22s ease; }
.workouts-routine-card:hover .workouts-routine-card-cover img { transform: scale(1.025); }
.workouts-routine-card-cover > span,
.workouts-routine-summary-cover > span {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 50%;
    color: #fff;
    background: rgba(7, 13, 23, 0.64);
    box-shadow: 0 7px 18px rgba(7, 13, 23, 0.24);
    transform: translate(-50%, -50%);
    backdrop-filter: blur(8px);
}
.workouts-routine-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.workouts-routine-title { display: inline-flex; align-items: center; gap: 0.65rem; min-width: 0; text-decoration: none; color: inherit; }
.workouts-routine-title-copy { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.workouts-routine-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workouts-routine-icon { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px; color: color-mix(in srgb, var(--routine-accent, var(--primary)) 40%, var(--ink)); background: color-mix(in srgb, var(--routine-accent, var(--primary)) 13%, var(--surface)); }
.workouts-routine-icon svg { width: 23px; height: 23px; }
.workouts-routine-icon.is-small { flex-basis: 36px; width: 36px; height: 36px; border-radius: 11px; }
.workouts-routine-icon.is-small svg { width: 18px; height: 18px; }
.workouts-routine-icon.has-media { position: relative; overflow: hidden; padding: 0; }
.workouts-routine-icon.has-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.workouts-routine-icon.has-media b { position: absolute; right: 2px; bottom: 2px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; color: #fff; background: rgba(7, 13, 23, 0.76); font-size: 0.46rem; }
.workouts-fav-star { color: var(--warning, #f5b94b); }
.workouts-routine-desc { margin: 0; }
.workouts-routine-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; }
.workouts-routine-editor { border-color: color-mix(in srgb, var(--routine-accent, var(--primary)) 42%, var(--line)); }
.workouts-list-actions { margin-top: 0.8rem; }

.workouts-archived { margin-top: 0.9rem; }
.workouts-archived summary { cursor: pointer; font-weight: 700; color: var(--muted); }
.workouts-archived-list { display: grid; gap: 0.4rem; margin-top: 0.5rem; }
.workouts-archived-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: 10px; }

.workouts-pr-list, .workouts-session-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.workouts-pr-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0.1rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.workouts-session-list li { display: grid; gap: 0.05rem; padding: 0.4rem 0.1rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }

.workouts-exercise-list { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.35rem; }
.workouts-exercise-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0.6rem; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 22%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 3%, var(--surface)); }
.workouts-exercise-cover { position: relative; display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 30%, var(--line)); border-radius: 12px; color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 45%, var(--ink)); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 10%, var(--surface)); font-size: 0.67rem; font-weight: 900; letter-spacing: 0.04em; }
.workouts-exercise-cover:not(.has-media) { font-size: 1rem; letter-spacing: 0; }
.workouts-exercise-cover img { width: 100%; height: 100%; object-fit: cover; }
.workouts-exercise-cover b,
.workouts-exercise-appearance-preview b { position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: rgba(8, 15, 25, 0.78); font-size: 0.55rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24); }
.workouts-exercise-info { display: grid; flex: 1; gap: 0.1rem; min-width: 0; }
.workouts-exercise-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-icon { min-width: 34px; padding-inline: 0.5rem; }

.workouts-add-exercise-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-bottom: 0.6rem; }
@media (min-width: 620px) { .workouts-add-exercise-grid { grid-template-columns: 2fr 1fr 1fr 1fr; align-items: end; } }
.workouts-custom-exercise { margin-top: 0.8rem; }
.workouts-custom-exercise summary { cursor: pointer; font-weight: 700; }
.workouts-routine-danger .inline-actions { justify-content: flex-end; }

/* Session logger — one-handed mobile friendly */
.workouts-session-panel-head { align-items: center; }
.workouts-session-title { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.workouts-session-title > div { min-width: 0; }
.workouts-session-title h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workouts-session-routine-cover { position: relative; display: block; flex: 0 0 48px; width: 48px; height: 48px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--routine-accent, var(--primary)) 46%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--routine-accent, var(--primary)) 12%, var(--surface)); }
.workouts-session-routine-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.workouts-session-routine-cover b { position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: rgba(7, 13, 23, 0.76); font-size: 0.5rem; }
.workouts-session-exercises { display: grid; gap: 0.7rem; }
.workouts-session-exercise { padding: 0.75rem; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 24%, var(--line)); border-radius: var(--radius-lg, 16px); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 3%, var(--surface)); }
.workouts-session-exercise-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; }
.workouts-session-exercise-head strong { min-width: 0; }
.workouts-session-exercise-head strong a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workouts-session-exercise-nav,
.workouts-session-next-exercise { display: none; }
.workouts-rest-timer {
    --rest-accent: var(--routine-accent, var(--primary));
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
        "clock copy toggle"
        "clock actions actions";
    align-items: center;
    gap: 0.4rem 0.7rem;
    margin: 0 0 0.7rem;
    padding: 0.7rem 0.75rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--rest-accent) 26%, var(--glass-border));
    border-radius: 18px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--rest-accent) 12%, transparent), transparent 65%),
        var(--glass);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.workouts-rest-timer[hidden] { display: none; }
.workouts-rest-timer-clock {
    grid-area: clock;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: conic-gradient(var(--rest-accent) var(--rest-progress, 100%), color-mix(in srgb, var(--rest-accent) 12%, var(--line)) 0);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rest-accent) 18%, transparent);
    transition: background 0.2s linear;
}
.workouts-rest-timer-clock::before {
    content: "";
    grid-area: 1 / 1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rest-accent) 10%, transparent);
}
.workouts-rest-timer-clock time { position: relative; grid-area: 1 / 1; color: var(--ink); font-size: 0.86rem; font-variant-numeric: tabular-nums; font-weight: 850; letter-spacing: -0.03em; }
.workouts-rest-timer-copy { grid-area: copy; display: grid; min-width: 0; gap: 0.05rem; }
.workouts-rest-timer-copy .eyebrow { margin: 0; color: var(--rest-accent); font-weight: 800; font-size: 0.58rem; }
.workouts-rest-timer-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.workouts-rest-timer-copy small { overflow: hidden; color: var(--muted); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.workouts-rest-timer-toggle { grid-area: toggle; min-width: 108px; min-height: 44px; gap: 0.35rem; padding-inline: 0.75rem; box-shadow: 0 6px 16px color-mix(in srgb, var(--rest-accent) 32%, transparent); }
.workouts-rest-timer-actions { grid-area: actions; display: flex; justify-content: flex-end; gap: 0.35rem; }
.workouts-rest-timer-actions .btn { min-width: 58px; min-height: 44px; padding-inline: 0.65rem; }
.workouts-rest-timer[data-state="running"] {
    border-color: color-mix(in srgb, var(--rest-accent) 60%, var(--glass-border));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--rest-accent) 20%, transparent), transparent 70%),
        var(--glass-strong);
    box-shadow: var(--glass-shadow), 0 0 0 1px color-mix(in srgb, var(--rest-accent) 20%, transparent);
}
.workouts-rest-timer[data-state="paused"] .workouts-rest-timer-clock { filter: saturate(0.45); }
.workouts-rest-timer[data-state="complete"] { --rest-accent: var(--good, #16a66a); }
.workouts-rest-timer[data-state="complete"] .workouts-rest-timer-clock { animation: workouts-rest-complete 0.5s ease both; }
@keyframes workouts-rest-complete { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .workouts-rest-timer[data-state="complete"] .workouts-rest-timer-clock { animation: none; } }
.workouts-session-prescription { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.35rem 0.55rem; margin: -0.1rem 0 0.55rem; }
.workouts-session-prescription span { display: inline-flex; align-items: center; min-height: 26px; padding: 0.2rem 0.5rem; border-radius: 999px; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); font-size: 0.68rem; font-weight: 800; }
.workouts-session-prescription p { flex: 1 1 180px; margin: 0; color: var(--muted); font-size: 0.76rem; line-height: 1.4; }
.workouts-set-legend,
.workouts-set-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 12px minmax(0, 1fr) 46px; align-items: center; gap: 0.45rem; }
.workouts-set-legend { margin-bottom: 0.2rem; color: var(--muted); font-size: 0.62rem; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: 0.02em; }
.workouts-set-rows { display: grid; gap: 0.45rem; }
.workouts-set-row {
    margin: 0;
    padding: 0.15rem;
    border-radius: 12px;
    transition: background 0.18s ease;
}
.workouts-set-row.is-done {
    background: color-mix(in srgb, var(--good) 8%, transparent);
}
.workouts-set-index {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-inline: auto;
    border-radius: 50%;
    color: var(--muted);
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    font-size: 0.72rem;
    font-weight: 800;
}
.workouts-set-row.is-done .workouts-set-index { color: #fff; background: var(--good); }
.workouts-set-field { min-width: 0; }
.workouts-set-field input {
    width: 100%;
    text-align: center;
    min-height: 46px;
    border-radius: 12px;
    font-size: 1.02rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.workouts-set-row.is-done .workouts-set-field input {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--good) 38%, var(--line));
    background: color-mix(in srgb, var(--good) 6%, var(--surface));
    font-weight: 800;
}
.workouts-set-x { color: var(--muted); font-weight: 700; }
.workouts-set-done {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    padding-inline: 0;
    font-size: 1.1rem;
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.workouts-set-done svg { width: 20px; height: 20px; stroke-width: 2.4; }
.workouts-set-done.is-done { box-shadow: 0 4px 12px color-mix(in srgb, var(--good) 38%, transparent); }
.workouts-set-done:active { transform: scale(0.92); }
@media (prefers-reduced-motion: reduce) { .workouts-set-done:active { transform: none; } }
.workouts-add-set-btn { margin-top: 0.4rem; }
.workouts-session-add-exercise {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 60px;
    margin-top: 0.9rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: inherit;
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
    text-decoration: none;
}
.workouts-session-add-exercise > span:first-child { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); font-size: 1.2rem; }
.workouts-session-add-exercise > span:nth-child(2) { display: grid; min-width: 0; gap: 0.08rem; }
.workouts-session-add-exercise small { color: var(--muted); }
.workouts-session-add-exercise b { color: var(--muted); font-size: 1.5rem; font-weight: 500; }
.workouts-session-add-exercise:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.workouts-session-footer { display: flex; gap: 0.6rem; justify-content: space-between; margin-top: 1rem; position: sticky; bottom: calc(0.6rem + env(safe-area-inset-bottom) + var(--mobile-bottom-nav-height, 0px)); }
.workouts-session-footer form { flex: 1; }
.workouts-session-footer .btn { width: 100%; }

body[data-theme="dark"] .workouts-stat-card,
body.theme-active-dark .workouts-stat-card,
body[data-theme="dark"] .workouts-routine-card,
body.theme-active-dark .workouts-routine-card,
body[data-theme="dark"] .workouts-rest-timer,
body.theme-active-dark .workouts-rest-timer,
body[data-theme="dark"] .workouts-session-exercise,
body.theme-active-dark .workouts-session-exercise {
    background: var(--dark-ui-surface);
    border-color: var(--dark-ui-border);
}

/* ==========================================================================
   Workout analytics (#6) — CSS bar chart, messages, muscle distribution
   ========================================================================== */
.workouts-messages { display: grid; gap: 0.5rem; }
.workouts-message {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    font-weight: 600;
}
.workouts-message-icon {
    flex: 0 0 30px; width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary);
}
.workouts-message-icon svg { width: 17px; height: 17px; }

.workouts-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    height: 180px;
    padding-top: 0.5rem;
}
.workouts-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; height: 100%; min-width: 0; justify-content: flex-end; }
.workouts-bar {
    width: 100%;
    max-width: 42px;
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 65%, #0d7d6c));
    min-height: 2px;
    transition: height 0.3s ease;
}
.workouts-bar-label { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
.workouts-bar-sub { font-size: 0.7rem; font-weight: 800; color: var(--ink); }

.workouts-muscle-list { display: grid; gap: 0.5rem; }
.workouts-muscle-row { display: grid; grid-template-columns: 5.5rem 1fr 2.5rem; align-items: center; gap: 0.5rem; }
.workouts-muscle-name { font-size: 0.82rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workouts-muscle-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.workouts-muscle-bar span { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.workouts-muscle-pct { font-size: 0.78rem; font-weight: 800; text-align: right; color: var(--muted); }

/* ==========================================================================
   Layout edit mode — root-cause fix (#2)

   `.screen` runs `animation: screenIn ... both`. With fill-mode `both` the
   final keyframe's transform sticks around forever, so `.screen` permanently
   creates a containing block AND a stacking context. That trapped the fixed
   edit panels inside it: their z-index only counted *within* `.screen`, so the
   root-level `body::before` blur overlay painted over them — the panel was
   visible in the DOM but unclickable ("only blur appears" on mobile).

   Dropping the transform while editing lets the panels be truly viewport-fixed
   and lifts their z-index into the root stacking context. Fixes dashboard,
   team and profile layout editing in one place.
   ========================================================================== */
body.layout-edit-active .screen {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
}

/* ==========================================================================
   Dashboard direct drag-and-drop (#2)
   ========================================================================== */
body.layout-edit-active .dashboard-layout > [data-dashboard-widget] {
    position: relative;
    cursor: grab;
    touch-action: none;          /* let the pointer drag win over page scroll */
    user-select: none;
    outline: 2px dashed color-mix(in srgb, var(--primary) 45%, transparent);
    outline-offset: 3px;
    border-radius: var(--radius-lg, 16px);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
body.layout-edit-active .dashboard-layout > [data-dashboard-widget]::before {
    content: "⠿";
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 5;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
    pointer-events: none;
}
body.layout-edit-active .dashboard-layout > [data-dashboard-widget]:active { cursor: grabbing; }

.dashboard-layout > [data-dashboard-widget].is-dragging {
    cursor: grabbing;
    opacity: 0.95;
    transform: scale(1.02);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    outline-color: var(--primary);
}

.dashboard-drop-placeholder {
    border: 2px dashed var(--primary);
    border-radius: var(--radius-lg, 16px);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    min-width: 0;
    animation: dropPulse 0.9s ease-in-out infinite;
}
@keyframes dropPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.9; }
}

body.layout-dragging { cursor: grabbing; }
body.layout-dragging * { cursor: grabbing !important; }

/* Unsaved-changes hint on the save button */
body.layout-has-unsaved [data-dashboard-layout-editor] button[type="submit"] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning, #f5b94b) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-drop-placeholder { animation: none; }
    .dashboard-layout > [data-dashboard-widget] { transition: none; }
}

/* ==========================================================================
   Dashboard edit mode on mobile (#2) — no more full-screen takeover.

   The old behaviour hid the whole dashboard behind a blur and offered only an
   abstract list. Instead we keep the REAL widget cards on screen so they can be
   dragged directly, and demote the editor to a compact bottom sheet holding the
   toggles / reset / save. Scoped to the dashboard so team & profile keep their
   current (now working) editors untouched.
   ========================================================================== */
@media (max-width: 899px) {
    body.layout-edit-active[data-page="dashboard"]::before {
        display: none !important;
    }

    body.layout-edit-active[data-page="dashboard"] .screen > :not(.dashboard-layout-edit-mode-panel) {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        filter: none !important;
    }

    body.layout-edit-active[data-page="dashboard"] .dashboard-layout-edit-mode-panel {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        top: auto !important;
        max-height: 40vh !important;
        overflow: auto !important;
        z-index: 10060 !important;
        border-radius: 22px 22px 0 0 !important;
        padding: 0.75rem !important;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
        box-shadow: 0 -14px 40px rgba(15, 23, 42, 0.22) !important;
    }

    /* Sheet grab affordance */
    body.layout-edit-active[data-page="dashboard"] .dashboard-layout-edit-mode-panel::before {
        content: "";
        display: block;
        width: 38px;
        height: 4px;
        margin: 0 auto 0.6rem;
        border-radius: 999px;
        background: color-mix(in srgb, var(--ink) 22%, transparent);
    }

    /* Keep the last card reachable above the sheet */
    body.layout-edit-active[data-page="dashboard"] .dashboard-layout {
        padding-bottom: 44vh !important;
    }
}

/* In edit mode a widget is a draggable object, not a live control surface.
   Neutralising its inner links/buttons means (a) the whole card is grabbable
   and (b) you can't accidentally navigate away while rearranging. */
body.layout-edit-active .dashboard-layout > [data-dashboard-widget] :where(a, button, input, select, textarea, summary, details, canvas) {
    pointer-events: none !important;
}

/* The legacy mobile rule hides `.screen` children with three :not() clauses,
   giving it a higher specificity than a shorter override. Match its :not chain
   (plus [data-page]) so the dashboard's real cards stay visible and draggable
   while editing. */
@media (max-width: 899px) {
    body.layout-edit-active[data-page="dashboard"] .screen
        > :not(.dashboard-layout-edit-mode-panel):not(.team-layout-edit-mode-panel):not(.profile-layout-edit-mode-panel) {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        filter: none !important;
    }
}

/* ==========================================================================
   Gallery calendar on mobile (#12)

   The month view was `display:none` below 900px with nothing in its place, so
   switching to Calendar View on a phone showed an empty 137px panel. Desktop
   keeps its rich photo-collage grid; mobile gets a real, weekday-aligned month
   calendar with dot indicators, and tapping a day opens a bottom sheet.
   ========================================================================== */
/* The month grid is 7 columns at every breakpoint, so the weekday header
   belongs everywhere — desktop never had one and its day 1 was not aligned to
   its real weekday, which made the whole month read wrong. */
.gallery-calendar-panel .gallery-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0 0.1rem 0.4rem;
}
.gallery-calendar-panel .gallery-cal-weekdays span {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 899px) {
    /* Bring the month grid back, as a proper 7-column calendar. */
    .gallery-calendar-panel .entries-calendar.meal-calendar-month {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 4px;
        padding: 0.25rem;
    }

    .gallery-calendar-panel .gallery-cal-weekdays {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 4px;
        padding: 0 0.25rem 0.3rem;
    }
    .gallery-calendar-panel .gallery-cal-weekdays span {
        text-align: center;
        font-size: 0.68rem;
        font-weight: 800;
        color: var(--muted);
        text-transform: uppercase;
    }

    /* Compact square cells: day number + a dot. No collage, no badge. */
    .gallery-calendar-panel .entries-calendar-day {
        min-height: 0;
        text-decoration: none;
    }
    .gallery-calendar-panel .entries-calendar-day article {
        display: grid;
        place-items: center;
        gap: 2px;
        aspect-ratio: 1 / 1;
        min-height: 0;
        padding: 2px;
        border-radius: 10px;
        border: 1px solid transparent;
        background: color-mix(in srgb, var(--ink) 4%, transparent);
    }
    .gallery-calendar-panel .entries-calendar-day strong {
        font-size: 0.82rem;
        font-weight: 600;
        line-height: 1;
    }
    .gallery-calendar-panel .entries-calendar-day .entries-calendar-collage,
    .gallery-calendar-panel .entries-calendar-day .entries-calendar-empty,
    .gallery-calendar-panel .entries-calendar-day .badge {
        display: none !important;
    }

    /* Dot indicator instead of the content preview */
    .gallery-cal-dot {
        width: 5px;
        height: 5px;
        border-radius: 999px;
        background: transparent;
    }
    .gallery-calendar-panel .entries-calendar-day.has-log .gallery-cal-dot {
        background: var(--primary);
    }
    .gallery-calendar-panel .entries-calendar-day.has-log article {
        background: color-mix(in srgb, var(--primary) 12%, transparent);
        border-color: color-mix(in srgb, var(--primary) 28%, transparent);
    }
    .gallery-calendar-panel .entries-calendar-day.is-today article {
        border-color: var(--primary);
        font-weight: 800;
    }
    .gallery-calendar-panel .entries-calendar-day.is-selected article {
        background: var(--primary);
        border-color: var(--primary);
    }
    .gallery-calendar-panel .entries-calendar-day.is-selected strong { color: #fff; }
    .gallery-calendar-panel .entries-calendar-day.is-selected .gallery-cal-dot { background: #fff; }
}

/* Day bottom sheet contents */
.gallery-day-sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}
.gallery-day-sheet-grid a {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
}
.gallery-day-sheet-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery-day-sheet-empty { margin: 0 0 0.9rem; }

/* ==========================================================================
   Quests / RPG board (#14)
   ========================================================================== */
.quests-streak {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--coral, #ff6b4a) 40%, var(--line));
    background: color-mix(in srgb, var(--coral, #ff6b4a) 12%, transparent);
    font-weight: 900;
}
.quests-streak-flame { font-size: 0.95rem; line-height: 1; }

.quests-group-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.85rem 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.quests-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--muted);
    background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.quests-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; grid-template-columns: 1fr; }

.quest-item {
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: color-mix(in srgb, var(--ink) 2.5%, transparent);
    transition: border-color 0.16s ease, background 0.16s ease;
}
.quest-item.is-done {
    border-color: color-mix(in srgb, var(--good, #19a974) 32%, transparent);
    background: color-mix(in srgb, var(--good, #19a974) 7%, transparent);
}

.quest-icon {
    flex: none;
    position: relative;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--primary) 24%, transparent),
        color-mix(in srgb, var(--primary) 7%, transparent));
    color: var(--primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}
.quest-item.is-done .quest-icon {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--good, #19a974) 26%, transparent),
        color-mix(in srgb, var(--good, #19a974) 8%, transparent));
    color: var(--good, #19a974);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good, #19a974) 22%, transparent);
}
.quest-icon svg { width: 18px; height: 18px; }

.quest-check {
    position: absolute;
    right: -4px; bottom: -4px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px;
    border-radius: 999px;
    background: var(--good, #19a974);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--surface, #fff);
}

.quest-body { display: grid; gap: 0.3rem; min-width: 0; }
.quest-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.88rem;
    font-weight: 680;
    line-height: 1.2;
    color: var(--ink);
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.quest-track { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.quest-bar {
    display: block;
    flex: 1 1 auto;
    min-width: 40px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 9%, transparent);
    overflow: hidden;
}
.quest-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #4ade80));
    transition: width 0.35s ease;
}
.quest-item.is-done .quest-bar > span {
    background: linear-gradient(90deg, var(--good, #19a974), color-mix(in srgb, var(--good, #19a974) 55%, #86efac));
}

.quest-meta { flex: none; color: var(--muted); font-size: 0.72rem; font-weight: 620; white-space: nowrap; }
.quest-xp {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.48rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 820;
    letter-spacing: 0.01em;
    color: #b45309;
    background: color-mix(in srgb, #f59e0b 15%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
    white-space: nowrap;
}
.quest-item.is-done .quest-xp {
    color: var(--good, #19a974);
    background: color-mix(in srgb, var(--good, #19a974) 13%, transparent);
    border-color: color-mix(in srgb, var(--good, #19a974) 26%, transparent);
}

.quests-next-rank { margin: 0.55rem 0 0; }

.quests-widget .inline-list-toggle {
    margin-top: 0.35rem;
    min-height: 0;
    padding-block: 0.3rem;
    font-size: 0.76rem;
}

@media (min-width: 900px) {
    .quests-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .quest-bar > span { transition: none; }
}

body[data-theme="dark"] .quest-item,
body.theme-active-dark .quest-item {
    background: var(--dark-ui-row);
    border-color: var(--dark-ui-border);
}
body[data-theme="dark"] .quest-title,
body.theme-active-dark .quest-title { color: var(--dark-ui-text, #e5edf5); }
body[data-theme="dark"] .quest-check,
body.theme-active-dark .quest-check { box-shadow: 0 0 0 2px var(--dark-ui-surface, #0f172a); }

/* ==========================================================================
   Notion sync status card (#15)
   ========================================================================== */
.notion-status-card {
    display: grid;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.notion-status-card.is-ok { border-color: color-mix(in srgb, var(--good, #19a974) 40%, var(--line)); }
.notion-status-card.is-error { border-color: color-mix(in srgb, var(--bad, #df4c43) 45%, var(--line)); }

.notion-status-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.notion-status-head > div { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.notion-status-head form { flex: 0 0 auto; }

.notion-status-dot {
    flex: 0 0 10px;
    width: 10px; height: 10px;
    border-radius: 999px;
    background: var(--muted);
}
.notion-status-card.is-ok .notion-status-dot { background: var(--good, #19a974); }
.notion-status-card.is-error .notion-status-dot { background: var(--bad, #df4c43); }

.notion-status-counts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 0.4rem;
}
.notion-count {
    display: grid;
    gap: 0.05rem;
    padding: 0.45rem 0.4rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    text-align: center;
}
.notion-count strong { font-size: 1.05rem; font-weight: 900; }
.notion-count small { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.notion-count.is-bad strong { color: var(--bad, #df4c43); }

.notion-status-records { margin: 0; }
.notion-status-error {
    margin: 0;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--bad, #df4c43) 12%, transparent);
    color: var(--bad, #df4c43);
    font-size: 0.84rem;
    word-break: break-word;
}

/* ==========================================================================
   Badges + team missions (#14 phase 2)
   ========================================================================== */
.badge-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.4rem;
}
.badge-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ink) 3%, transparent);
    min-width: 0;
}
.badge-chip.is-locked { opacity: 0.55; }
.badge-chip.is-earned.tier-bronze { border-color: #b87333; background: color-mix(in srgb, #b87333 12%, transparent); }
.badge-chip.is-earned.tier-silver { border-color: #9aa7b2; background: color-mix(in srgb, #9aa7b2 14%, transparent); }
.badge-chip.is-earned.tier-gold { border-color: #e0a422; background: color-mix(in srgb, #e0a422 14%, transparent); }

.badge-chip-icon {
    flex: 0 0 28px;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--muted);
}
.badge-chip.is-earned .badge-chip-icon { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.badge-chip-icon svg { width: 15px; height: 15px; }
.badge-chip-body { display: grid; gap: 0.05rem; min-width: 0; }
.badge-chip-body strong { font-size: 0.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-chip-body small { font-size: 0.68rem; color: var(--muted); font-weight: 800; }
.badge-chip.is-earned .badge-chip-body small { color: var(--primary); }

.team-missions-list { display: grid; gap: 0.6rem; }
.team-mission {
    display: grid;
    gap: 0.4rem;
    padding: 0.7rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.team-mission.is-done {
    border-color: color-mix(in srgb, var(--good, #19a974) 45%, transparent);
    background: color-mix(in srgb, var(--good, #19a974) 10%, transparent);
}
.team-mission-head { display: flex; align-items: center; gap: 0.55rem; }
.team-mission-head strong { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; }
.team-mission-count { flex: 0 0 auto; font-weight: 900; font-size: 0.85rem; color: var(--muted); }
.team-mission.is-done .team-mission-count { color: var(--good, #19a974); }
.team-mission.is-done .quest-bar > span { background: var(--good, #19a974); }

.team-mission-contrib summary { cursor: pointer; font-size: 0.74rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.team-mission-contrib ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.team-mission-contrib li { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.84rem; padding: 0.2rem 0; }

body[data-theme="dark"] .badge-chip,
body.theme-active-dark .badge-chip,
body[data-theme="dark"] .team-mission,
body.theme-active-dark .team-mission {
    background: var(--dark-ui-row);
    border-color: var(--dark-ui-border);
}

/* --- Season widget ------------------------------------------------------- */
.season-countdown {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--surface-2, rgba(127, 127, 127, 0.12));
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.season-your-xp {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}

.season-your-xp strong {
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

.season-board {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.season-row {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr) minmax(44px, 1.35fr) auto;
    align-items: center;
    gap: 9px;
    padding: 5px 8px;
    border: 0;
    border-radius: 10px;
    min-width: 0;
    min-height: 0;
}

.season-row.is-me {
    background: color-mix(in srgb, #8b5cf6 13%, transparent);
}

.season-rank {
    font-weight: 800;
    font-size: 0.76rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.season-row:nth-child(1) .season-rank { color: #e0a422; }
.season-row:nth-child(2) .season-rank { color: #9aa7b2; }
.season-row:nth-child(3) .season-rank { color: #b87333; }

.season-name {
    font-weight: 620;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.season-bar {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 9%, transparent);
    overflow: hidden;
}

.season-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent, #6366f1), var(--accent-2, #8b5cf6));
    transition: width 0.35s ease;
}

.season-xp {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.8rem;
    white-space: nowrap;
    color: var(--ink);
}

.season-hint {
    margin: 10px 0 0;
}

/* --- Unlock celebrations -------------------------------------------------- */
.celebration-stack {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
    transform: translateX(-50%);
    z-index: 10080;
    display: grid;
    gap: 10px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

@media (min-width: 900px) {
    .celebration-stack {
        left: auto;
        right: 24px;
        bottom: 24px;
        transform: none;
    }
}

.celebration-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, rgba(127, 127, 127, 0.22));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    animation: celebrationIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.celebration-toast.is-leaving {
    animation: celebrationOut 0.24s ease forwards;
}

@keyframes celebrationIn {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes celebrationOut {
    to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

.celebration-spark {
    font-size: 1.4rem;
    line-height: 1;
}

.celebration-body {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.celebration-body strong {
    font-size: 0.9rem;
}

.celebration-body span {
    font-size: 0.82rem;
    opacity: 0.75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.celebration-xp {
    font-weight: 700;
    font-size: 0.82rem;
    padding: 4px 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent, #4f7cff), var(--accent-2, #8b5cf6));
    color: #fff;
    white-space: nowrap;
}

.celebration-close {
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px;
    color: inherit;
    opacity: 0.5;
}

.celebration-close:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .celebration-toast,
    .celebration-toast.is-leaving { animation: none; }
}

/* --- Compact dashboard layout edit bar ------------------------------------ */
.layout-editbar,
.dashboard-layout-editbar {
    position: sticky;
    top: 8px;
    z-index: 30;
    margin-bottom: 4px;
}

.layout-editbar .dashboard-layout-editor,
.dashboard-layout-editbar .dashboard-layout-editor {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, rgba(127, 127, 127, 0.22));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.dashboard-editbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dashboard-editbar-hint {
    display: grid;
    gap: 2px;
    margin: 0;
    min-width: 0;
}

.dashboard-editbar-hint small {
    opacity: 0.7;
}

.dashboard-editbar-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.dashboard-layout-state {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.dashboard-layout-state > :where(span, strong) {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--muted);
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    font-size: 0.66rem;
    line-height: 1;
}

.dashboard-layout-state > strong {
    color: var(--good, #148563);
    background: color-mix(in srgb, var(--good, #148563) 10%, transparent);
}

body.layout-has-unsaved .dashboard-layout-state > strong {
    color: #9a5c00;
    background: color-mix(in srgb, #f59e0b 15%, transparent);
}

.dashboard-layout-visibility > summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 0;
    list-style: none;
}

.dashboard-layout-visibility > summary::-webkit-details-marker { display: none; }

.dashboard-layout-visibility > summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.18s ease;
}

.dashboard-layout-visibility[open] > summary::before {
    transform: rotate(90deg);
}

.dashboard-layout-visibility .dashboard-layout-editor-list {
    margin-top: 8px;
}

.dashboard-layout-editor-item.is-mobile-surface {
    border-color: color-mix(in srgb, #3b82f6 28%, var(--line));
    background: color-mix(in srgb, #3b82f6 6%, var(--surface));
}

.dashboard-layout-editor-item.is-mobile-surface .dashboard-layout-toggle::before {
    content: "M";
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 8px;
    color: #2563eb;
    background: color-mix(in srgb, #3b82f6 13%, var(--surface));
    font-size: 0.62rem;
    font-weight: 900;
}

.dashboard-editbar-reset {
    margin-top: 10px;
}

/* --- Notion field detail --------------------------------------------------- */
.notion-field-detail {
    margin-top: 12px;
}

.notion-field-detail > summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 0;
}

.notion-field-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.notion-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 10px;
    background: var(--surface-2, rgba(127, 127, 127, 0.08));
    font-size: 0.82rem;
}

.notion-field-row.is-bad {
    background: rgba(220, 78, 65, 0.12);
}

.notion-field-name { font-weight: 600; }

.notion-field-name,
.notion-field-prop {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.notion-field-prop {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    opacity: 0.75;
}

.notion-field-dir {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.notion-field-dir.dir-off { background: rgba(127, 127, 127, 0.18); opacity: 0.7; }
.notion-field-dir.dir-push { background: rgba(79, 124, 255, 0.18); }
.notion-field-dir.dir-two_way { background: rgba(52, 168, 110, 0.2); }

@media (max-width: 640px) {
    .notion-field-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .notion-field-prop {
        grid-column: 1 / -1;
    }
}

/* --- Cosmetics: avatar frames --------------------------------------------- */
.avatar-frame {
    position: relative;
    box-sizing: border-box;
    border-radius: 50%;
    border: 3px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.avatar-frame.frame-steel {
    background-image: linear-gradient(var(--surface, #fff), var(--surface, #fff)),
        linear-gradient(135deg, #9aa5b1, #d7dde3, #8d99a6);
}

.avatar-frame.frame-ember {
    background-image: linear-gradient(var(--surface, #fff), var(--surface, #fff)),
        linear-gradient(135deg, #ff7a18, #ff3d54, #ffb03a);
}

.avatar-frame.frame-aurora {
    background-image: linear-gradient(var(--surface, #fff), var(--surface, #fff)),
        linear-gradient(135deg, #35e0c0, #4f7cff, #a855f7);
}

.avatar-frame.frame-gold {
    background-image: linear-gradient(var(--surface, #fff), var(--surface, #fff)),
        linear-gradient(135deg, #f7c948, #fff0b3, #d99e0b);
}

.avatar-frame.frame-legend {
    background-image: linear-gradient(var(--surface, #fff), var(--surface, #fff)),
        linear-gradient(135deg, #ff3d54, #ffb03a, #4f7cff, #a855f7);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 6px 18px rgba(168, 85, 247, 0.32);
}

.avatar-frame.frame-iron {
    background-image: linear-gradient(var(--surface, #fff), var(--surface, #fff)),
        linear-gradient(135deg, #4b5563, #9ca3af, #374151);
}

.avatar-frame.frame-streaker {
    background-image: linear-gradient(var(--surface, #fff), var(--surface, #fff)),
        linear-gradient(135deg, #f97316, #fbbf24);
}

.cosmetics-form {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border, rgba(127, 127, 127, 0.2));
    display: grid;
    gap: 12px;
    justify-items: start;
}

.cosmetics-title {
    margin: 0;
    font-weight: 600;
    font-size: 0.9rem;
}

.cosmetics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 10px;
    width: 100%;
}

.cosmetic-option {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 10px 6px;
    border-radius: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    min-width: 0;
}

.cosmetic-option:hover { background: var(--surface-2, rgba(127, 127, 127, 0.08)); }

.cosmetic-option.is-equipped {
    border-color: var(--accent, #4f7cff);
    background: var(--surface-2, rgba(79, 124, 255, 0.1));
}

.cosmetic-option.is-locked {
    cursor: not-allowed;
    opacity: 0.55;
}

.cosmetic-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cosmetic-swatch {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background-color: var(--surface-2, rgba(127, 127, 127, 0.14));
    font-size: 0.9rem;
}

.cosmetic-swatch.frame-none {
    border: 3px dashed var(--border, rgba(127, 127, 127, 0.35));
}

.cosmetic-label {
    font-size: 0.76rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.cosmetic-hint {
    font-size: 0.68rem;
    opacity: 0.7;
    line-height: 1.25;
}

/* A tall modal on mobile used to end up underneath the fixed bottom nav, so its
   last control (Save/Equip) could not be tapped at all. Reserve the nav's height
   inside the scroll area rather than shortening the card, so the content still
   scrolls all the way. */
@media (max-width: 860px) {
    .app-modal-card {
        max-height: calc(100dvh - 2rem);
        padding-bottom: calc(clamp(1.2rem, 3vw, 1.6rem) + 84px + env(safe-area-inset-bottom, 0px));
    }
}

/* =========================================================================
   Round 2 fixes
   ========================================================================= */

/* #1 Achievements: the widget head used to give the action a full-width row,
   which pushed "View All" onto a second line. Keep title left / action right. */
@media (max-width: 700px) {
    .dashboard-achievements-panel .panel-head {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .dashboard-achievements-panel .panel-head > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
    }

    .dashboard-achievements-panel .panel-head > div:first-child .eyebrow,
    .dashboard-achievements-panel .panel-head > div:first-child .muted {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-achievements-summary {
        width: auto;
        flex: 0 0 auto;
        margin-left: auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .dashboard-achievements-summary .btn,
    .dashboard-achievements-summary .dashboard-panel-action {
        margin-left: 0;
        white-space: nowrap;
    }

    /* The three counters stacked into one column; keep them on one row and
       shrink the type instead, so nothing is hidden. */
    .achievement-summary-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .achievement-summary-card {
        justify-items: center;
        padding: 0.6rem 0.4rem;
        text-align: center;
    }

    .achievement-summary-card strong {
        font-size: 1.05rem;
    }

    .achievement-summary-card small {
        font-size: 0.6rem;
        letter-spacing: 0;
        line-height: 1.15;
    }
}

@media (max-width: 360px) {
    .achievement-summary-card {
        padding: 0.5rem 0.25rem;
    }

    .achievement-summary-card small {
        font-size: 0.55rem;
    }
}

/* A single team identity across Social, Profile, competitions and Team. */
.social-team-list {
    display: grid;
    gap: 0.38rem;
}

.social-team-list > a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 0.5rem;
    min-height: 52px;
    padding: 0.38rem 0.48rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 95%, var(--line));
    text-decoration: none;
}

.social-team-list-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    font-size: 0.66rem;
    font-weight: 900;
}

.social-team-list > a > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 0.05rem;
}

.social-team-list :is(strong, small) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-team-list strong {
    font-size: 0.78rem;
}

.social-team-list small {
    color: var(--muted);
    font-size: 0.62rem;
}

.team-mobile-team-selector {
    display: none;
}

@media (max-width: 899px) {
    .team-mobile-team-selector {
        display: block;
    }

    .team-mobile-team-selector label {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0.55rem;
        min-height: 50px;
        padding: 0.35rem 0.45rem 0.35rem 0.7rem;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
    }

    .team-mobile-team-selector label > span {
        color: var(--muted);
        font-size: 0.66rem;
        font-weight: 800;
        white-space: nowrap;
    }

    .team-mobile-team-selector select {
        width: 100%;
        min-width: 0;
        min-height: 40px !important;
        border-radius: 11px;
        font-size: 0.75rem;
        font-weight: 800;
    }
}

body[data-page="social"]:is([data-theme="dark"], .theme-active-dark) .social-team-list > a,
body[data-page="team"]:is([data-theme="dark"], .theme-active-dark) .team-mobile-team-selector label {
    border-color: var(--line);
    background: var(--surface);
}

body[data-page="team"] .team-page-identity-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
body[data-page="team"] .team-page-identity-hero.has-cover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0.22) 70%, rgba(0, 0, 0, 0.46)); }
body[data-page="team"] .team-page-cover { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
body[data-page="team"] .team-page-identity-hero > :not(.team-page-cover) { position: relative; z-index: 2; }
body[data-page="team"] .team-page-icon { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; overflow: hidden; border: 3px solid color-mix(in srgb, var(--surface) 86%, transparent); border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--primary), #2563eb); font-size: 0.7rem; font-weight: 900; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.22); }
body[data-page="team"] .team-page-icon.has-image img { width: 100%; height: 100%; object-fit: cover; }
body[data-page="team"] .team-page-desktop-hero.has-cover .hero-copy :is(.eyebrow, h1, p) { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.72); }

/* #2 Mobile edit layout: direct drag never actually worked on touch (the page is
   blurred behind an overlay there), so showing a grab handle was a lie. Drop the
   handle and the grab affordance below 900px — reordering happens in the
   "Visible widgets" list, which does work. Desktop keeps direct drag. */
@media (max-width: 899px) {
    body.layout-edit-active .dashboard-layout > [data-dashboard-widget]::before {
        content: none !important;
        display: none !important;
    }

    body.layout-edit-active .dashboard-layout > [data-dashboard-widget] {
        cursor: default;
        touch-action: auto;
        outline-style: solid;
        outline-width: 1px;
        outline-color: color-mix(in srgb, var(--primary) 30%, transparent);
    }

    /* The compact edit bar replaced the old edit-mode panel, so it needs the same
       "stays on top of the blurred page" treatment its predecessor had. */
    /* The bar is a grid item, and a sticky grid item has nothing to stick to: its
       containing block is its own grid area. It scrolled away with the page. Pin it
       to the bottom instead - within thumb reach, and clear of the fixed topbar. */
    body.layout-edit-active .layout-editbar,
    body.layout-edit-active .dashboard-layout-editbar {
        position: fixed;
        left: 0.6rem;
        right: 0.6rem;
        bottom: calc(0.6rem + env(safe-area-inset-bottom));
        top: auto;
        z-index: var(--z-edit-panel, 10060);
        max-height: 70vh;
        overflow-y: auto;
        box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.22);
    }

    /* The bottom nav (z-index 9999) painted straight over the pinned bar, swallowing
       every tap. Navigating away mid-edit is not the point of this mode anyway, so it
       stands down while editing. !important because the nav's own rules are stronger. */
    body.layout-edit-active .bottom-nav,
    body.layout-edit-active .bottom-nav.mobile-liquid-nav {
        display: none !important;
    }

    /* Keep the last card reachable above the pinned bar. */
    body.layout-edit-active .screen {
        padding-bottom: 42vh;
    }

    body.layout-edit-active .screen > .layout-editbar,
    body.layout-edit-active .screen > .dashboard-layout-editbar {
        filter: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }

    body.layout-edit-active .layout-editbar .dashboard-layout-editor-list,
    body.layout-edit-active .dashboard-layout-editbar .dashboard-layout-editor-list {
        max-height: 46vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Touch targets for the reorder arrows. */
    body.layout-edit-active .dashboard-layout-mobile-actions .btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* A widget unchecked in the editor is previewed as dimmed rather than removed,
   so the layout does not jump around while you are still deciding. */
body.layout-edit-active .dashboard-layout > [data-dashboard-widget].is-layout-hidden {
    display: block !important;
    opacity: 0.32;
    filter: grayscale(1);
}
body.layout-edit-active .dashboard-layout > [data-dashboard-widget][hidden] {
    display: block;
}

/* #4 Habits in the training sheet.

   The list was a 4-column grid capped at max-height:32px while each row is 36px
   tall, so rows were silently clipped (measured: scrollHeight 36 > clientHeight
   32). Nothing is hidden now: the list scrolls inside its cell instead. */
.sheet-habits-list {
    max-height: 68px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

@media (max-width: 899px) {
    /* One habit per row so a long name never breaks the whole row, with a real
       44px touch target on the checkbox. */
    .sheet-habits-list {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 220px;
        max-height: 148px;
        margin-left: 0;
        gap: 0.15rem;
    }

    .training-sheet-table .sheet-habits-list .check {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        min-height: 44px;
        padding: 0.25rem 0.35rem;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.2;
    }

    .training-sheet-table .sheet-habits-list .check input[type="checkbox"] {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
    }

    .training-sheet-table .sheet-habits-cell > .week-help-wrap {
        display: block;
        width: auto;
        margin-bottom: 0.35rem;
    }

    .training-sheet-table .sheet-custom-habit-toggle {
        min-width: 44px;
        min-height: 44px;
    }
}

/* #5 Custom habit panel: existing habits first, creation as a second step. */
.week-custom-habit {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding: 0.6rem;
    border: 1px solid var(--line, rgba(127, 127, 127, 0.2));
    border-radius: 14px;
    background: var(--surface, #fff);
    min-width: 220px;
}

.custom-habit-section-label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.65;
}

.custom-habit-existing.is-collapsed {
    display: none;
}

.custom-habit-list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
    max-height: 168px;
    overflow-y: auto;
}

.custom-habit-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.custom-habit-pick {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--line, rgba(127, 127, 127, 0.2));
    border-radius: 10px;
    background: transparent;
    color: inherit;
    text-align: left;
    font-size: 0.82rem;
    cursor: pointer;
}

.custom-habit-pick span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-habit-pick:hover { background: var(--surface-2, rgba(127, 127, 127, 0.08)); }
.custom-habit-pick.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }

.custom-habit-remove {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    font-size: 1rem;
}

.custom-habit-remove:hover { opacity: 1; background: var(--surface-2, rgba(127, 127, 127, 0.1)); }

.custom-habit-create-trigger {
    justify-self: start;
}

.custom-habit-empty {
    margin: 0.35rem 0 0;
}

/* The custom-habit panel stays in flow inside its cell (the row simply grows).
   An absolutely positioned popover ended up painted underneath the next row's
   habit labels, because each table row is its own stacking context. */
.training-sheet-table .week-custom-habit {
    width: 250px;
    max-width: min(250px, 78vw);
    margin-top: 0.4rem;
}

/* #6 Read-only training sheet (viewing someone else's data). */
.sheet-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.sheet-readonly-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    background: var(--surface-2, rgba(127, 127, 127, 0.12));
    font-size: 0.85rem;
    font-weight: 600;
}

.sheet-fieldset[disabled] .training-sheet-table input,
.sheet-fieldset[disabled] .training-sheet-table select,
.sheet-fieldset[disabled] .training-sheet-table textarea {
    opacity: 0.75;
    cursor: not-allowed;
}

/* #7 Photo post header: title, back link and the kebab all belong on the top row.
   They wrapped onto a second line on mobile, which pushed the kebab away from the
   title it acts on. */
@media (max-width: 700px) {
    .photo-post-head {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .photo-post-head > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .photo-post-title {
        margin: 0;
        font-size: 1.05rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .photo-post-head-actions {
        flex: 0 0 auto;
        width: auto;
        margin-left: auto;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.35rem;
    }

    .photo-back-btn {
        white-space: nowrap;
        padding: 0.35rem 0.55rem;
        font-size: 0.78rem;
    }
}

/* Keep the destination visible on narrow photo headers; the label is part of the
   navigation contract and the pill truncates safely if space is genuinely tight. */
@media (max-width: 400px) {
    .photo-back-btn {
        display: inline-flex;
        width: auto;
        max-width: 96px;
        min-height: 44px;
        padding-inline: 0.55rem;
        font-size: inherit;
    }

    .photo-back-btn::before { content: none; }
}

/* The legacy mobile edit-mode rule hides every .screen child except three named
   panels, using three :not() clauses (specificity 0,5,1). The analytics editbar is
   none of those, so it was rendered invisible and unclickable. Match that chain so
   the shared editbar survives on every page that uses it. */
@media (max-width: 899px) {
    body.layout-edit-active .screen
        > .layout-editbar:not(.dashboard-layout-edit-mode-panel):not(.team-layout-edit-mode-panel):not(.profile-layout-edit-mode-panel) {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        filter: none !important;
        user-select: auto !important;
    }
}

/* The full-screen blur backdrop belongs to the old "modal editor" model. Pages that
   use the compact editbar (Home, Analytics) do not need it, and it was swallowing
   clicks aimed at the bar. */
@media (max-width: 899px) {
    body.layout-edit-active[data-page="analytics"]::before {
        display: none !important;
    }

    body.layout-edit-active[data-page="analytics"] .screen
        > :not(.dashboard-layout-edit-mode-panel):not(.team-layout-edit-mode-panel):not(.profile-layout-edit-mode-panel) {
        opacity: 1 !important;
        filter: none !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
}

/* #14 Personal goals header: counters, title and the two actions used to break onto
   separate lines. Keep them on one row (counters + title stacked tight on the left,
   actions right), and only wrap the actions when there is genuinely no room. */
@media (max-width: 700px) {
    .profile-home-card-head {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.4rem;
    }

    .profile-home-card-head > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .profile-home-card-head h2 {
        font-size: 0.98rem;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .profile-home-card-head .eyebrow {
        font-size: 0.62rem;
        letter-spacing: 0.02em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .profile-home-card-head .inline-actions-mini {
        flex: 0 0 auto;
        display: flex;
        flex-wrap: nowrap;
        gap: 0.3rem;
    }

    .profile-home-card-head .inline-actions-mini .btn {
        white-space: nowrap;
        padding: 0.34rem 0.5rem;
        font-size: 0.74rem;
        min-height: 34px;
    }
}

@media (max-width: 380px) {
    .profile-home-card-head .inline-actions-mini .btn {
        padding: 0.32rem 0.42rem;
        font-size: 0.7rem;
    }
}

/* #11 Profile grid on mobile: the cards were sized for desktop, so every block ate
   most of the screen. Tighten padding and inner gaps (touch targets untouched). */
@media (max-width: 700px) {
    .profile-home-grid {
        gap: 0.6rem;
    }

    .profile-home-card {
        gap: 0.5rem;
        padding: 0.75rem 0.8rem;
    }

    .profile-home-goal-row,
    .profile-home-card .status-summary-card {
        padding: 0.5rem 0.6rem;
    }

    .profile-data-overview {
        gap: 0.55rem;
    }

    .profile-data-overview .panel-head {
        margin-bottom: 0.4rem;
    }

    .profile-home-card h2 {
        font-size: 0.98rem;
    }

    .profile-home-card .muted.small,
    .profile-home-card small {
        font-size: 0.72rem;
    }
}

/* Profile edit mode uses the compact editbar too, so it no longer needs (or wants)
   the blur backdrop that used to eat clicks on its Save button. */
@media (max-width: 899px) {
    body.layout-edit-active[data-page="profile"]::before {
        display: none !important;
    }

    body.layout-edit-active[data-page="profile"] .screen
        > :not(.dashboard-layout-edit-mode-panel):not(.team-layout-edit-mode-panel):not(.profile-layout-edit-mode-panel) {
        opacity: 1 !important;
        filter: none !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
}

/* #13 Avatar menu: the picture and the frame are different things, so they are
   different rows in the same sheet. */
.profile-avatar-trigger {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
    border-radius: 50%;
}

.profile-avatar-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.profile-avatar-edit-hint {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.72rem;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
}

.avatar-menu-option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem;
    border: 1px solid var(--line, rgba(127, 127, 127, 0.2));
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    min-height: 56px;
}

.avatar-menu-option:is(button) {
    width: 100%;
    background: transparent;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.avatar-menu-option:hover {
    background: var(--surface-2, rgba(127, 127, 127, 0.08));
}

.avatar-menu-icon {
    font-size: 1.3rem;
}

.avatar-menu-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.avatar-menu-copy small {
    opacity: 0.7;
}

.cosmetics-subtitle {
    margin: 0;
}

.cosmetics-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.workouts-start-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.7rem;
}

.workouts-start-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border-radius: 16px;
    border: 1px solid var(--line, rgba(127, 127, 127, 0.2));
    background: var(--surface, #fff);
    min-width: 0;
}

.workouts-start-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--surface-2, rgba(127, 127, 127, 0.1));
}

.workouts-start-icon svg {
    width: 20px;
    height: 20px;
}

.workouts-start-copy {
    display: grid;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}

.workouts-start-copy small {
    opacity: 0.7;
    font-size: 0.76rem;
    line-height: 1.25;
}

.workouts-start-card .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 40px;
}

.workouts-start-card .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .workouts-start-card {
        flex-wrap: wrap;
    }

    .workouts-start-card .btn {
        width: 100%;
    }
}

/* #17 Duels: state the standing in words, not just with a colour. */
.duel-standing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
    background: var(--surface-2, rgba(127, 127, 127, 0.1));
    font-size: 0.82rem;
}

.duel-standing-lead {
    font-weight: 700;
    min-width: 0;
}

.duel-standing-time {
    opacity: 0.7;
    white-space: nowrap;
}

/* #19 Creating another team is a deliberate secondary action once you have one. */
.squad-create-secondary > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.2rem 0;
}

.squad-create-secondary[open] > summary {
    margin-bottom: 0.6rem;
}

/* Keyboard focus for the new controls. The cosmetic radios are visually hidden, so
   without this the focus ring vanished while tabbing through the frames. */
.cosmetic-option:has(input:focus-visible),
.custom-habit-pick:focus-visible,
.custom-habit-remove:focus-visible,
.avatar-menu-option:focus-visible,
.workouts-resume-banner:focus-visible,
.workouts-start-card .btn:focus-visible,
.dashboard-layout-visibility > summary:focus-visible,
.notion-field-detail > summary:focus-visible,
.celebration-close:focus-visible,
.season-row a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 10px;
}

/* Broken media should read as "missing photo", not as a torn icon. */
img.is-broken {
    display: grid;
    place-items: center;
    min-height: 96px;
    border-radius: 14px;
    background: var(--surface-2, rgba(127, 127, 127, 0.12));
    color: var(--muted, #6b7280);
    font-size: 0.72rem;
}

/* Icon-only controls were 22-24px squares: fine with a mouse, a coin toss with a
   thumb. Give them a real target on touch widths without changing how they look. */
@media (max-width: 899px) {
    .achievement-delete-btn,
    .squad-member-x,
    .custom-habit-remove,
    .team-member-remove,
    .week-help-wrap > .week-help-trigger {
        min-width: 44px;
        min-height: 44px;
        display: inline-grid;
        place-items: center;
    }
}

@media (max-width: 899px) {
    .metric-help-popover > summary {
        min-width: 44px;
        min-height: 44px;
        display: inline-grid;
        place-items: center;
    }

    .team-mission-contrib > summary {
        min-height: 34px;
        display: flex;
        align-items: center;
    }
}

/* The sheet compresses its checkboxes to 32px for density; on touch that is below
   the comfortable target, and these are the controls people tap most. */
@media (max-width: 899px) {
    .training-sheet-table .check,
    .training-sheet-table .sheet-checkbox {
        min-height: 44px;
    }
}

/* =========================================================================
   Mobile: the page name moves into the topbar
   -------------------------------------------------------------------------
   Every page opened with a hero panel repeating its own name, a category
   eyebrow and a one-line description: measured at 157-247px, i.e. 19-29% of a
   phone screen, before any content. The name now sits in the topbar (where the
   app icon already says which app this is) and the duplicated copy is dropped.
   Hero *actions* and page-specific content (avatar, team switcher) stay.
   ========================================================================= */
.topbar-page-title {
    display: none;
}

@media (max-width: 899px) {
    .brand .brand-name {
        display: none;
    }

    .topbar-page-title {
        display: block;
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 0.1rem;
        font-family: "Plus Jakarta Sans", "Manrope", sans-serif;
        font-size: 1.02rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* The page name is redundant (it is in the topbar now) but the one-line
       description is not: it is the only place that says what the page is for. Keep
       it as a single compact line instead of a title block. */
    .hero-copy-page-title > .eyebrow,
    .hero-copy-page-title > h1 {
        display: none;
    }

    .hero-copy-page-title {
        display: block;
        min-width: 0;
    }

    .hero-copy-page-title > p.muted {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0;
        font-size: 0.78rem;
        line-height: 1.3;
    }

    /* Nothing but the name to show: no description, no reason to keep the panel. */
    .hero-copy-page-title:not(:has(p.muted)) {
        display: none;
    }

    /* Where the heading is data (a person, a team) keep the heading, drop the
       category label and the description. */
    .hero-copy:not(.hero-copy-page-title) > .eyebrow,
    .hero-copy:not(.hero-copy-page-title) > p.muted:not(.profile-hero-message) {
        display: none;
    }

    .hero-copy > h1 {
        font-size: 1.15rem;
        line-height: 1.25;
    }

    /* A hero left with only actions should not keep a full panel's padding. */
    .hero-panel {
        padding: 0.6rem 0.75rem;
        gap: 0.5rem;
    }

    .hero-panel:not(:has(.hero-copy > h1)):not(:has(.profile-title)) {
        padding: 0.45rem 0.6rem;
    }

    /* Nothing left to show at all: collapse it entirely rather than leaving an
       empty bar floating above the content. */
    .hero-panel:empty {
        display: none;
    }

    .hero-panel:has(> .hero-copy-page-title:only-child:not(:has(p.muted))),
    .page-hero:has(> .hero-copy-page-title:only-child:not(:has(p.muted))) {
        display: none;
    }
}

/* Achievement names were clamped to a single line with text-overflow:clip, so
   anything longer than ~18 chars ("Clean Choices Plus") was cut mid-word with no
   ellipsis to say so. Two lines fit inside the existing card height; longer names
   still get an ellipsis rather than a silent cut. */
.profile-achievement-content strong,
.team-achievement-body strong,
.achievement-card > strong,
.achievement-list-content h3,
.dashboard-achievement-title-row strong {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
}

/* iOS Safari zooms the whole page in when you focus a field smaller than 16px, and
   it never zooms back out. Every input in the app was 12.5-14.4px, so tapping any
   field on a phone left the layout stranded mid-zoom.

   Scoped to coarse pointers: real touch devices get 16px fields (where they should
   be bigger anyway), while a narrow desktop window keeps the dense look. */
@media (max-width: 899px) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px;
    }
}

/* On a phone 100vh counts the browser chrome that is not actually on screen, so
   full-height shells overflow and drawers/panels run past the visible area. Use the
   dynamic/small viewport units where they exist, keeping the vh value as fallback
   (declaration order does the work: older engines ignore what they cannot parse). */
body {
    min-height: 100svh;
}

.auth-wrap {
    min-height: calc(100svh - 3rem);
}

.auth-wrap-login {
    min-height: calc(100svh - 1.75rem);
}

@media (max-width: 899px) {
    .app-modal-card,
    .app-drawer-card {
        max-height: calc(100dvh - 2rem);
    }
}

/* A celebration toast is pinned to the bottom with a higher z-index than the layout
   editbar, so an unlock landing mid-edit painted over the Save button. Editor
   controls always win; while editing, the toasts move out of their way to the top. */
@media (max-width: 899px) {
    body.layout-edit-active .layout-editbar,
    body.layout-edit-active .dashboard-layout-editbar {
        z-index: 10090;
    }

    body.layout-edit-active .celebration-stack {
        top: calc(4.8rem + env(safe-area-inset-top));
        bottom: auto;
    }
}

/* A tall modal scrolls inside its card, and the close button lived at the top of that
   scroll area: scroll down to reach the frames and the X was gone. Pin the header.
   `background: inherit` (not a re-declared token) is deliberate: it always paints
   whatever the card's own *computed* background ended up being - including the
   flat --surface color dark mode forces onto .app-modal-card with !important - so
   the header can never drift out of sync with the card and read as a flat white/
   mismatched bar again. See theme-dark.css for the dark-mode override this relies on. */
.app-modal-card > .app-modal-head {
    position: sticky;
    top: calc(-1 * clamp(1.2rem, 3vw, 1.6rem));
    z-index: 2;
    margin-top: calc(-1 * clamp(1.2rem, 3vw, 1.6rem));
    padding-top: clamp(1.2rem, 3vw, 1.6rem);
    padding-bottom: 0.5rem;
    background: inherit;
    border-bottom: 1px solid var(--line, rgba(127, 127, 127, 0.16));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin-bottom: 0.6rem;
}

/* ==========================================================================
   Visual layout editing on desktop: analytics, profile and team join the dashboard

   Same affordance everywhere, so "edit layout" means the same thing on every page:
   the real cards get a grab handle and are dragged into place. Desktop only - on a
   phone the editor covers the page and a card cannot be grabbed, so the handle
   would be a lie (the "Visible widgets" list reorders there).
   ========================================================================== */
@media (min-width: 900px) {
    body.layout-edit-active .analytics-page > [data-analytics-section],
    body.layout-edit-active .profile-home-grid > [data-profile-block],
    body.layout-edit-active .team-layout-grid > [data-team-widget] {
        position: relative;
        cursor: grab;
        touch-action: none;
        user-select: none;
        outline: 2px dashed color-mix(in srgb, var(--primary) 45%, transparent);
        outline-offset: 3px;
        border-radius: var(--radius-lg, 16px);
        transition: transform 0.16s ease, box-shadow 0.16s ease;
    }

    body.layout-edit-active .analytics-page > [data-analytics-section]::before,
    body.layout-edit-active .profile-home-grid > [data-profile-block]::before,
    body.layout-edit-active .team-layout-grid > [data-team-widget]::before {
        content: "⠿";
        position: absolute;
        top: 6px;
        right: 8px;
        z-index: 5;
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: var(--primary);
        color: #fff;
        font-size: 0.8rem;
        line-height: 1;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
        pointer-events: none;
    }

    body.layout-edit-active .analytics-page > [data-analytics-section]:active,
    body.layout-edit-active .profile-home-grid > [data-profile-block]:active,
    body.layout-edit-active .team-layout-grid > [data-team-widget]:active {
        cursor: grabbing;
    }

    /* While editing, a card is an object to move, not a live control surface:
       neutralising its inner controls makes the whole card grabbable and stops an
       accidental navigation mid-rearrange. */
    body.layout-edit-active .analytics-page > [data-analytics-section] :where(a, button, input, select, textarea, summary, details, canvas),
    body.layout-edit-active .profile-home-grid > [data-profile-block] :where(a, button, input, select, textarea, summary, details, canvas),
    body.layout-edit-active .team-layout-grid > [data-team-widget] :where(a, button, input, select, textarea, summary, details, canvas) {
        pointer-events: none !important;
    }
}

[data-analytics-section].is-dragging,
[data-profile-block].is-dragging,
[data-team-widget].is-dragging {
    cursor: grabbing;
    opacity: 0.95;
    transform: scale(1.02);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    outline-color: var(--primary);
}

/* The handle is a desktop-only promise. */
@media (max-width: 899px) {
    body.layout-edit-active .analytics-page > [data-analytics-section]::before,
    body.layout-edit-active .profile-home-grid > [data-profile-block]::before,
    body.layout-edit-active .team-layout-grid > [data-team-widget]::before {
        content: none;
        display: none;
    }
}

/* ==========================================================================
   Notification bell: same size as the other topbar icons, plus a desktop preview
   ========================================================================== */
.topbar-notif-btn {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    cursor: pointer;
    list-style: none;
}

.topbar-notif-btn::-webkit-details-marker { display: none; }

.topbar-notif-btn svg {
    width: 22px;
    height: 22px;
}

.notif-menu {
    position: relative;
}

/* One control, two behaviours: the dropdown on desktop, the plain link on mobile. */
.notif-menu { display: none; }
.topbar-notif-link { display: inline-flex; }

@media (min-width: 900px) {
    .notif-menu { display: block; }
    .topbar-notif-link { display: none; }
}

.notif-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 200;
    width: min(390px, 92vw);
    display: grid;
    gap: 0.5rem;
    padding: 0.55rem;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--surface, #fff);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.notif-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0.2rem 0.25rem 0.35rem 0.45rem;
}

.notif-menu-title {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.notif-menu-title strong { font-size: 0.95rem; }
.notif-menu-title small { color: var(--muted); font-size: 0.68rem; font-weight: 700; }

.notif-menu-head form { flex: 0 0 auto; }
.notif-menu-head .btn {
    min-height: 36px;
    padding-inline: 0.65rem;
}

.notif-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
    max-height: 60vh;
    overflow-y: auto;
}

.notif-menu-item > a {
    position: relative;
    display: grid;
    gap: 2px;
    min-height: 68px;
    padding: 0.65rem 0.7rem 0.65rem 1rem;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
}

.notif-menu-item > a::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: 0.42rem;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: transparent;
}

.notif-menu-item > a:hover,
.notif-menu-item > a:focus-visible { background: var(--surface-2, rgba(127, 127, 127, 0.1)); }

.notif-menu-item strong { font-size: 0.88rem; }

.notif-menu-item span {
    font-size: 0.8rem;
    opacity: 0.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-menu-item small { font-size: 0.7rem; }

.notif-menu-item.is-unread > a {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.notif-menu-item.is-unread > a::before {
    background: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.notif-menu-empty { margin: 0.4rem 0; }
.notif-menu-all { min-height: 42px; }

/* The visually-hidden frame radios were position:absolute inside a label that was not
   position:relative, so they anchored to the modal card and stretched it 110px past
   its own width - that was the modal's mystery horizontal scrollbar. */
.cosmetic-option {
    position: relative;
}

.cosmetic-option input[type="radio"] {
    width: 1px;
    height: 1px;
    top: 0;
    left: 0;
    margin: 0;
}

/* Belt and braces: a modal is a column of content, never a horizontal scroller. */
.app-modal-card {
    overflow-x: hidden;
}

/* Six more frames. Same construction as the first wave: a gradient ring around the
   card surface, so they sit on any background and adapt to the theme. */
.avatar-frame.frame-mint {
    background-image: linear-gradient(var(--surface, #fff), var(--surface, #fff)),
        linear-gradient(135deg, #34d399, #a7f3d0, #10b981);
}

.avatar-frame.frame-ocean {
    background-image: linear-gradient(var(--surface, #fff), var(--surface, #fff)),
        linear-gradient(135deg, #0ea5e9, #38bdf8, #1d4ed8);
}

.avatar-frame.frame-sunset {
    background-image: linear-gradient(var(--surface, #fff), var(--surface, #fff)),
        linear-gradient(135deg, #fb7185, #fb923c, #fde047);
}

.avatar-frame.frame-carbon {
    background-image: linear-gradient(var(--surface, #fff), var(--surface, #fff)),
        linear-gradient(135deg, #111827, #4b5563, #0f172a);
}

.avatar-frame.frame-titan {
    background-image: linear-gradient(var(--surface, #fff), var(--surface, #fff)),
        linear-gradient(135deg, #94a3b8, #e2e8f0, #64748b, #cbd5e1);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.avatar-frame.frame-marathon {
    background-image: linear-gradient(var(--surface, #fff), var(--surface, #fff)),
        linear-gradient(135deg, #f43f5e, #f59e0b, #22c55e, #3b82f6);
    box-shadow: 0 6px 18px rgba(244, 63, 94, 0.25);
}

/* ==========================================================================
   Training sheet on mobile: reclaim the screen

   Measured before: the sheet header alone was 262px and every row 206px, inside a
   main that keeps 11.5px of padding on each side of an already-cramped table.
   ========================================================================== */
@media (max-width: 899px) {
    /* The sheet is a horizontal scroller; let it use the full width of the device
       rather than sitting inside the page gutter. */
    .training-sheet-wrap {
        margin-inline: -11.5px;
        padding-inline: 0;
        width: calc(100% + 23px);
    }

    /* Controls stack into a compact two-column grid instead of a tall column. */
    .training-sheet-head,
    .panel-head.training-sheet-head {
        gap: 0.4rem;
        margin-bottom: 0.5rem;
    }

    .training-sheet-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem 0.5rem;
        align-items: end;
    }

    .training-sheet-controls > label {
        display: grid;
        gap: 0.15rem;
        min-width: 0;
        font-size: 0.72rem;
    }

    .training-sheet-view-tabs {
        grid-column: 1 / -1;
    }

    .training-sheet-head .btn,
    .training-sheet-controls select,
    .training-sheet-controls input {
        min-height: 44px;
    }

    /* Rows were as tall as their tallest cell, and that cell was the habits list. */
    .sheet-habits-list {
        max-height: 96px;
    }

    .training-sheet-table .sheet-day-cell {
        padding: 0.35rem 0.45rem;
    }

    .training-sheet-table td,
    .training-sheet-table th {
        padding-block: 0.3rem;
    }
}

/* The week/scope tabs sit between the two selects in the DOM, so a two-column grid
   was forced into three rows (select / tabs / week). Send the tabs to the end and the
   two selects share a row. */
@media (max-width: 899px) {
    .training-sheet-controls > label {
        order: 1;
    }

    .training-sheet-view-tabs {
        order: 2;
    }

    .training-sheet-controls select,
    .training-sheet-controls input[type="week"] {
        height: 44px;
        min-height: 44px;
    }
}

/* ==========================================================================
   Duels: say what the thing does, and use the width on desktop
   ========================================================================== */
.duels-how {
    list-style: none;
    margin: 0;
    padding: 0.85rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--surface-2, rgba(127, 127, 127, 0.06));
}

.duels-how li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-width: 0;
}

.duels-how-step {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.duels-how li > span:last-child {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.duels-how strong { font-size: 0.86rem; }
.duels-how small { font-size: 0.76rem; opacity: 0.75; line-height: 1.3; }

.duels-columns {
    display: grid;
    gap: 0.85rem;
}

@media (min-width: 1000px) {
    .duels-columns {
        grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
        align-items: start;
    }

    .duels-col-main { grid-column: 1; }

    .duels-col-side {
        grid-column: 2;
        grid-row: 1 / span 3;
        position: sticky;
        top: 5.5rem;
    }
}

/* Competitions inside the team page. */
.team-comp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.team-comp-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    border-radius: 12px;
    background: var(--surface-2, rgba(127, 127, 127, 0.08));
    min-width: 0;
}

.team-comp-name {
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-comp-meta {
    font-size: 0.76rem;
    opacity: 0.75;
    white-space: nowrap;
}

@media (max-width: 620px) {
    .team-comp-row { flex-wrap: wrap; }
    .team-comp-meta { flex: 1 1 100%; }
}

/* Friends comparison: the gap, stated, and a way out of the page. */
.friends-compare-metric {
    display: grid;
    gap: 1px;
    justify-items: center;
    text-align: center;
}

.friends-compare-gap {
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.7;
    letter-spacing: 0;
}

.friends-compare-row.me-leads .friends-compare-gap { color: var(--primary); opacity: 1; }
.friends-compare-row.them-lead .friends-compare-gap { color: var(--danger, #e05260); opacity: 1; }

.friends-compare-row {
    padding: 0.5rem 0.6rem;
    border-radius: 12px;
}

.friends-compare-row.me-leads { background: color-mix(in srgb, var(--primary) 7%, transparent); }

.friends-compare-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line);
}

.friends-compare-cta p { margin: 0; min-width: 0; }

/* ==========================================================================
   Notifications: readable at a glance

   Unread was signalled by rgba(255,255,255,0.46) against a transparent card - a
   difference you had to look for. Now: an icon per kind, a coloured rail on unread,
   and the pending-decision ones stand apart from the news.
   ========================================================================== */
.notifications-panel {
    width: min(100%, 920px);
    margin-inline: auto;
}

.notifications-header > div:first-child { display: grid; gap: 0.12rem; }
.notifications-header p { margin: 0; }

:where(.notifications-filter-tabs, .achievement-filter-tabs) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 0.65rem;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ink) 3%, var(--surface));
}

:where(.notifications-filter-tabs, .achievement-filter-tabs) a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 44px;
    padding: 6px 8px;
    border-radius: 12px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

:where(.notifications-filter-tabs, .achievement-filter-tabs) a strong {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding-inline: 5px;
    border-radius: 999px;
    color: inherit;
    background: color-mix(in srgb, currentColor 9%, transparent);
    font-size: 0.66rem;
}

:where(.notifications-filter-tabs, .achievement-filter-tabs) a[aria-current="page"] {
    color: var(--primary-dark);
    background: var(--surface);
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08);
}

.notifications-tools {
    margin-bottom: 0.65rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.notifications-tools > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 8px 12px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}
.notifications-tools > summary::-webkit-details-marker { display: none; }
.notifications-tools[open] > summary { border-bottom: 1px solid var(--line); }
.notifications-tools[open] > summary span { transform: rotate(90deg); }
.notifications-tools .notifications-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 8px;
}
.notifications-tools :where(form, .btn) { width: 100%; }
.notifications-tools .btn { min-height: 42px; }

.notification-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    padding: 0.8rem;
    gap: 0.7rem;
    border-radius: 14px;
    border-bottom: 1px solid var(--line, rgba(148, 163, 184, 0.2));
}

.notification-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--surface-2, rgba(127, 127, 127, 0.1));
    color: var(--ink);
}

.notification-icon svg {
    width: 18px;
    height: 18px;
}

.notification-card.is-unread {
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    box-shadow: inset 3px 0 0 var(--primary);
}

.notification-card.is-read .notification-icon {
    opacity: 0.55;
}

/* A notification that still wants a decision should not look like yesterday's news. */
.notification-card.needs-action {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    box-shadow: inset 3px 0 0 var(--primary);
}

.notification-card.needs-action .notification-icon {
    background: var(--primary);
    color: #fff;
    opacity: 1;
}

.notification-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.notification-actions form { margin: 0; }
.notification-action-btn { width: 44px; height: 44px; }

.notification-cta {
    white-space: nowrap;
}

.notification-time {
    font-size: 0.72rem;
}

@media (max-width: 620px) {
    .notifications-panel { padding: 0.7rem; }
    :where(.notifications-filter-tabs, .achievement-filter-tabs) a { flex-direction: column; gap: 2px; min-height: 54px; padding-inline: 3px; line-height: 1.1; }
    .notifications-tools .notifications-toolbar { grid-template-columns: minmax(0, 1fr); }
    .notification-card {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 0.7rem;
    }

    .notification-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: 43px;
    }

    .notification-cta {
        order: -1;
    }
}

/* ==========================================================================
   Touch ergonomics

   Compact desktop controls were still only 35-40px tall on phones. Keep the
   dense desktop layout, but give touch users a reliable 44px hit area without
   inflating checkboxes/radios inside their already-clickable labels.
   ========================================================================== */
@media (max-width: 899px) and (pointer: coarse) {
    .btn,
    button:not([hidden]),
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        min-height: 44px;
    }

    .brand {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    .entry-day-arrow,
    .to-top-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .entry-data-form .check,
    .remember-me-check {
        min-height: 44px;
    }
}

/* ==========================================================================
   Narrow-phone and dark-mode polish
   ========================================================================== */
body[data-theme="dark"] .brand-mark,
body.theme-active-dark .brand-mark {
    color: #102028 !important;
    background: #edf7f4 !important;
}

@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .brand-mark {
        color: #102028 !important;
        background: #edf7f4 !important;
    }
}

@media (max-width: 899px) {
    /* The same title was already present in the fixed topbar. Keep only the
       unread counter in the page panel so mobile users do not read it twice. */
    .notifications-header > div:first-child,
    .notifications-header h1,
    .notifications-header .eyebrow {
        display: none;
    }

    .notifications-header {
        justify-content: flex-start;
    }
}

@media (max-width: 360px) {
    .topbar {
        gap: 0.4rem;
        padding-inline: 0.5rem;
    }

    .topbar-actions {
        gap: 0.3rem;
    }

    .dashboard-controls-trigger {
        gap: 0.25rem;
        padding-inline: 0.45rem;
        font-size: 0.78rem;
    }

    /* A date, two 44px day controls and the time field cannot remain legible
       in one 288px row. Stack the time field and give the date the full row. */
    .entry-date-time-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .entry-date-nav {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
    }

    .entry-date-nav input {
        min-width: 0;
        max-width: 100%;
    }

}

/* ==========================================================================
   Mobile menu sheets
   ========================================================================== */
.quick-entry-action {
    display: flex !important;
    align-items: center;
    gap: 0.65rem;
    text-align: left;
}

.quick-entry-icon {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: var(--primary-dark);
    background: rgba(20, 163, 139, 0.13);
}

.quick-entry-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 520px) {
    .topbar-context[open] .topbar-context-panel,
    .topbar .user-menu[open] .user-menu-panel {
        background: rgba(255, 255, 255, 0.96) !important;
    }

    .topbar-context .topbar-context-panel {
        max-height: calc(100dvh - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .topbar .user-menu-panel {
        position: fixed;
        top: calc(74px + env(safe-area-inset-top));
        left: max(8px, env(safe-area-inset-left));
        right: max(8px, env(safe-area-inset-right));
        width: auto;
        min-width: 0;
        max-height: calc(100dvh - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        padding: 10px;
        border-radius: 24px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .topbar .user-menu-panel > * {
        min-width: 0;
        margin: 0;
    }

    .topbar .user-menu-panel .user-menu-level {
        grid-column: 1 / -1;
        min-height: 54px;
    }

    .topbar .user-menu-panel a,
    .topbar .user-menu-panel .user-menu-theme-toggle,
    .topbar .user-menu-panel .user-menu-nav-button {
        min-height: 48px;
        padding: 0.65rem 0.72rem;
        border: 0;
        border-radius: 14px;
        line-height: 1.18;
    }

    .topbar .user-menu-panel a[aria-current="page"] {
        color: var(--primary-dark);
        background: rgba(20, 163, 139, 0.13);
        box-shadow: inset 0 0 0 1px rgba(20, 163, 139, 0.18);
    }

}

/* ==========================================================================
   Ranked training hub: weekly plan, exercise library and offline guides
   ========================================================================== */
.workouts-section-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
}
.social-section-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}
:where(.workouts-section-grid, .social-section-grid) > .hierarchy-nav-row {
    position: relative;
    grid-template-columns: 42px minmax(0, 1fr);
    align-content: center;
    min-height: 82px;
    border-color: color-mix(in srgb, var(--item-tone, var(--primary)) 24%, var(--line));
}
:where(.workouts-section-grid, .social-section-grid) .hierarchy-nav-icon {
    color: var(--item-tone, var(--primary-dark));
    background: color-mix(in srgb, var(--item-tone, var(--primary)) 12%, var(--surface));
}
:where(.workouts-section-grid, .social-section-grid) .hierarchy-nav-copy small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
:where(.workouts-section-grid, .social-section-grid) .hierarchy-nav-chevron { display: none; }
.workouts-section-intro,
.workouts-exercise-add-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 24%, var(--line));
    background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 4%, var(--surface));
}
.workouts-section-intro h2,
.workouts-section-intro p,
.workouts-exercise-add-panel h2,
.workouts-exercise-add-panel p { margin-block: 0.15rem; }
.workouts-day-chips,
.workouts-exercise-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.workouts-day-chips span,
.workouts-exercise-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0.18rem 0.52rem;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
    border-radius: 999px;
    color: var(--muted);
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    font-size: 0.72rem;
    font-weight: 750;
}
.workouts-exercise-tags .workouts-training-default-chip { color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 52%, var(--ink)); border-color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 36%, var(--line)); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 11%, var(--surface)); font-weight: 900; }
.workouts-day-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.workouts-day-picker legend { margin-bottom: 0.42rem; color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.workouts-day-picker > div { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; }
.workouts-day-picker label { position: relative; min-width: 0; }
.workouts-day-picker input { position: absolute; opacity: 0; pointer-events: none; }
.workouts-day-picker span {
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: 0.35rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--muted);
    background: var(--surface);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}
.workouts-day-picker input:checked + span { color: var(--ink); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 13%, var(--surface)); }
.workouts-day-picker input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.workouts-routine-identity-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.workouts-routine-identity-picker > legend { color: var(--ink); font-weight: 850; }
.workouts-routine-identity-picker > p { margin: 0.18rem 0 0.65rem; }
.workouts-routine-icon-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.workouts-routine-icon-options label,
.workouts-routine-color-options label { position: relative; min-width: 0; cursor: pointer; }
.workouts-routine-icon-options input,
.workouts-routine-color-options input { position: absolute; opacity: 0; pointer-events: none; }
.workouts-routine-icon-options label > span {
    display: grid;
    place-items: center;
    gap: 0.25rem;
    min-height: 64px;
    padding: 0.45rem 0.25rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--muted);
    background: var(--surface);
    text-align: center;
}
.workouts-routine-icon-options svg { width: 22px; height: 22px; }
.workouts-routine-icon-options small { max-width: 100%; overflow: hidden; font-size: 0.62rem; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.workouts-routine-icon-options input:checked + span { color: color-mix(in srgb, var(--workout-accent, var(--routine-accent, var(--primary))) 40%, var(--ink)); border-color: var(--workout-accent, var(--routine-accent, var(--primary))); background: color-mix(in srgb, var(--workout-accent, var(--routine-accent, var(--primary))) 11%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workout-accent, var(--routine-accent, var(--primary))) 25%, transparent); }
.workouts-routine-icon-options input:focus-visible + span,
.workouts-routine-color-options input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.workouts-routine-color-options { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 0.35rem; margin-top: 0.55rem; }
.workouts-routine-color-options label > span { display: grid; place-items: center; min-height: 46px; border: 1px solid transparent; border-radius: 12px; }
.workouts-routine-color-options label > span::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.workouts-routine-color-options input:checked + span { border-color: var(--swatch); background: color-mix(in srgb, var(--swatch) 12%, transparent); }
.workouts-routine-color-options input:checked + span::after { content: "✓"; position: absolute; top: 50%; left: 50%; color: #fff; font-size: 0.72rem; font-weight: 950; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32); transform: translate(-50%, -50%); }
.workouts-routine-custom-color { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; min-height: 60px; margin-top: 0.5rem; padding: 0.55rem 0.65rem; border: 1px solid color-mix(in srgb, var(--workout-accent, var(--routine-accent, var(--primary))) 30%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--workout-accent, var(--routine-accent, var(--primary))) 5%, var(--surface)); cursor: pointer; }
.workouts-routine-custom-color > span:first-child { display: grid; min-width: 0; gap: 0.08rem; }
.workouts-routine-custom-color strong { color: var(--ink); font-size: 0.76rem; }
.workouts-routine-custom-color small { color: var(--muted); font-size: 0.66rem; font-weight: 620; line-height: 1.3; }
.workouts-routine-custom-color-control { display: flex; align-items: center; gap: 0.45rem; }
.workouts-routine-custom-color input[type="color"] { width: 48px; height: 44px; padding: 3px; border: 1px solid color-mix(in srgb, var(--workout-accent, var(--routine-accent, var(--primary))) 46%, var(--line)); border-radius: 12px; background: var(--surface); cursor: pointer; }
.workouts-routine-custom-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.workouts-routine-custom-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 7px; }
.workouts-routine-custom-color input[type="color"]::-moz-color-swatch { border: 0; border-radius: 7px; }
.workouts-routine-custom-color input[type="color"]:focus-visible { outline: 2px solid var(--workout-accent, var(--routine-accent, var(--primary))); outline-offset: 2px; }
.workouts-routine-custom-color output { min-width: 64px; color: color-mix(in srgb, var(--workout-accent, var(--routine-accent, var(--primary))) 40%, var(--ink)); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.68rem; font-weight: 850; text-align: right; }
/* Identity (symbol + color picker) gets its own indigo accent, independent of
   --exercise-accent. It edits that very variable, so styling its chrome with
   the exercise's current color made it visually indistinguishable from the
   live preview card sitting right above it. Only the swatch itself (which is
   meant to preview the chosen mark/color) still uses --exercise-accent. */
.workouts-custom-color-details {
    --identity-accent: #6366f1;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--identity-accent) 26%, var(--line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--identity-accent) 4%, var(--surface));
}
.workouts-custom-color-details > summary { display: grid; grid-template-columns: 38px minmax(0, 1fr) 24px; align-items: center; gap: 0.65rem; min-height: 60px; padding: 0.55rem 0.7rem; cursor: pointer; list-style: none; }
.workouts-custom-color-details > summary::-webkit-details-marker { display: none; }
.workouts-custom-color-details > summary > span:nth-child(2) { display: grid; min-width: 0; gap: 0.08rem; }
.workouts-custom-color-details > summary strong { color: var(--ink); font-size: 0.78rem; }
.workouts-custom-color-details > summary small { overflow: hidden; color: var(--muted); font-size: 0.67rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.workouts-custom-color-details > summary > b { color: var(--identity-accent); font-size: 1.2rem; text-align: center; transition: transform 160ms ease; }
.workouts-custom-color-details[open] > summary > b { transform: rotate(45deg); }
.workouts-custom-color-swatch { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 55%, var(--line)); border-radius: 12px; color: #fff; background: var(--exercise-accent, var(--primary)); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--surface) 25%, transparent); font-size: 1.05rem; line-height: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); }
.workouts-custom-color-details-body { display: grid; gap: 0.8rem; padding: 0.65rem 0.7rem 0.7rem; border-top: 1px solid color-mix(in srgb, var(--identity-accent) 16%, var(--line)); }
.workouts-custom-defaults { overflow: hidden; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 24%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 3%, var(--surface)); }
.workouts-custom-defaults > summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 24px; align-items: center; gap: 0.55rem; min-height: 66px; padding: 0.55rem 0.65rem; cursor: pointer; list-style: none; }
.workouts-custom-defaults > summary::-webkit-details-marker { display: none; }
.workouts-custom-defaults > summary > span:first-child { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 48%, var(--ink)); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 12%, var(--surface)); }
.workouts-custom-defaults > summary > span:first-child svg { width: 21px; height: 21px; }
.workouts-custom-defaults > summary > span:nth-child(2) { display: grid; min-width: 0; gap: 0.08rem; }
.workouts-custom-defaults > summary strong { color: var(--ink); font-size: 0.78rem; }
.workouts-custom-defaults > summary small { overflow: hidden; color: var(--muted); font-size: 0.67rem; text-overflow: ellipsis; white-space: nowrap; }
.workouts-custom-defaults > summary em { display: inline-flex; align-items: center; min-height: 28px; padding: 0.24rem 0.48rem; border-radius: 999px; color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 48%, var(--ink)); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 11%, var(--surface)); font-size: 0.64rem; font-style: normal; font-weight: 850; white-space: nowrap; }
.workouts-custom-defaults > summary > b { color: var(--muted); font-size: 1.2rem; font-weight: 500; text-align: center; transition: transform 160ms ease; }
.workouts-custom-defaults[open] > summary > b { transform: rotate(45deg); }
.workouts-custom-defaults-body { display: grid; gap: 0.7rem; padding: 0.7rem; border-top: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 17%, var(--line)); }
.workouts-custom-defaults-body > p { margin: 0; color: var(--muted); font-size: 0.7rem; line-height: 1.45; }
.workouts-custom-defaults-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; align-items: end; }
.workouts-custom-defaults-grid > div { display: contents; }
.workouts-custom-defaults-grid > div[hidden] { display: none !important; }
.workouts-custom-defaults-grid label { display: grid; min-width: 0; gap: 0.28rem; }
.workouts-custom-defaults-grid input,
.workouts-custom-defaults-grid select { width: 100%; min-height: 44px; }
.workouts-default-rest-input { display: grid; gap: 0.15rem; }
.workouts-default-rest-input small { color: var(--muted); font-size: 0.62rem; font-weight: 600; line-height: 1.25; }
.workouts-custom-default-notes { grid-column: 1 / -1; }
.workouts-custom-default-notes textarea { min-height: 76px; resize: vertical; }
.workouts-exercise-color-picker,
.workouts-exercise-mark-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.workouts-exercise-color-picker > legend,
.workouts-exercise-mark-picker > legend { color: var(--ink); font-size: 0.76rem; font-weight: 850; }
.workouts-exercise-mark-picker > p { margin: 0.12rem 0 0.5rem; color: var(--muted); font-size: 0.66rem; line-height: 1.35; }
.workouts-exercise-mark-options { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 0.35rem; }
.workouts-exercise-mark-options label { position: relative; min-width: 0; cursor: pointer; }
.workouts-exercise-mark-options input { position: absolute; opacity: 0; pointer-events: none; }
.workouts-exercise-mark-options input + span { display: grid; min-height: 48px; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--surface); font-size: 1.25rem; line-height: 1; }
.workouts-exercise-mark-options input:checked + span { border-color: var(--exercise-accent, var(--primary)); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--exercise-accent, var(--primary)) 24%, transparent); }
.workouts-exercise-mark-options input:focus-visible + span { outline: 2px solid var(--exercise-accent, var(--primary)); outline-offset: 2px; }
.workouts-exercise-custom-mark { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; min-height: 60px; margin-top: 0.5rem; padding: 0.55rem 0.65rem; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 28%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 4%, var(--surface)); }
.workouts-exercise-custom-mark > span { display: grid; min-width: 0; gap: 0.08rem; }
.workouts-exercise-custom-mark strong { color: var(--ink); font-size: 0.76rem; }
.workouts-exercise-custom-mark small { color: var(--muted); font-size: 0.66rem; font-weight: 620; line-height: 1.3; }
.workouts-exercise-custom-mark input { width: 78px; min-height: 44px; padding-inline: 0.35rem; border-color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 42%, var(--line)); font-size: 1.05rem; font-weight: 850; text-align: center; }
.workouts-routine-media-settings { display: grid; gap: 0.8rem; min-width: 0; margin: 0; padding: 0.9rem; border: 1px solid color-mix(in srgb, var(--routine-accent, var(--primary)) 26%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--routine-accent, var(--primary)) 4%, var(--surface)); }
.workouts-routine-media-settings > legend { padding-inline: 0.35rem; color: var(--ink); font-weight: 850; }
.workouts-routine-media-settings > p { margin: -0.25rem 0 0; }
.workouts-routine-create-media { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.workouts-routine-create-media > summary { display: grid; grid-template-columns: 38px minmax(0, 1fr) 24px; align-items: center; gap: 0.6rem; min-height: 58px; padding: 0.55rem 0.7rem; cursor: pointer; list-style: none; }
.workouts-routine-create-media > summary::-webkit-details-marker { display: none; }
.workouts-routine-create-media > summary > span:first-child { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, var(--surface)); }
.workouts-routine-create-media > summary svg { width: 20px; height: 20px; }
.workouts-routine-create-media > summary > span:nth-child(2) { display: grid; min-width: 0; gap: 0.1rem; }
.workouts-routine-create-media > summary small { overflow: hidden; color: var(--muted); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.workouts-routine-create-media > summary > b { color: var(--muted); font-size: 1.2rem; text-align: center; transition: transform 0.16s ease; }
.workouts-routine-create-media[open] > summary > b { transform: rotate(45deg); }
.workouts-routine-create-media-body { display: grid; gap: 0.8rem; padding: 0.75rem; border-top: 1px solid var(--line); }
.workouts-week-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.workouts-day-card {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
    border-radius: 18px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 7%, var(--surface)), var(--surface));
    box-shadow: 0 10px 24px rgba(8, 18, 30, 0.07);
}
.workouts-day-card > header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.55rem; }
.workouts-day-card > header span { font-weight: 850; }
.workouts-day-card > header strong { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); font-size: 0.72rem; }
.workouts-day-card.is-rest { background: color-mix(in srgb, var(--surface) 92%, transparent); border-style: dashed; }
.workouts-day-card > p { margin: 0; color: var(--muted); font-size: 0.78rem; }
.workouts-day-routines { display: grid; gap: 0.45rem; }
.workouts-day-routine { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem; border: 1px solid color-mix(in srgb, var(--routine-accent, var(--primary)) 25%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, transparent); }
.workouts-day-routine > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; }
.workouts-day-routine-copy { display: grid; min-width: 0; gap: 0.08rem; }
.workouts-day-routine > a strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }
.workouts-day-routine-copy > span { color: var(--muted); font-size: 0.68rem; }
.workouts-day-routine form { flex: 0 0 auto; }
.workouts-day-routine .btn-icon { width: 38px; min-width: 38px; min-height: 38px; padding: 0; border-radius: 11px; }
.workouts-unscheduled-list { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.workouts-unscheduled-list a { display: flex; align-items: center; gap: 0.55rem; min-width: min(220px, 100%); padding: 0.65rem; border: 1px solid color-mix(in srgb, var(--routine-accent, var(--primary)) 25%, var(--line)); border-radius: 12px; color: inherit; text-decoration: none; }
.workouts-unscheduled-list a > span:last-child { display: grid; min-width: 0; gap: 0.08rem; }
.workouts-unscheduled-list small { color: var(--muted); font-size: 0.72rem; }
.workouts-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.workouts-preset-card { display: grid; grid-template-rows: auto 1fr auto auto; gap: 0.7rem; min-width: 0; padding: 0.9rem; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, transparent); }
.workouts-preset-card h3,
.workouts-preset-card p { margin: 0; }
.workouts-preset-card p { margin-top: 0.2rem; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }
.workouts-preset-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--primary); background: color-mix(in srgb, var(--primary) 13%, transparent); }
.workouts-preset-icon svg { width: 22px; height: 22px; }
.workouts-library-target {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 68px;
    padding: 0.65rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
.workouts-library-target-icon,
.workouts-routine-summary-icon {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: color-mix(in srgb, var(--routine-accent, var(--primary)) 40%, var(--ink));
    background: color-mix(in srgb, var(--routine-accent, var(--primary)) 12%, var(--surface));
}
.workouts-library-target-icon svg,
.workouts-routine-summary-icon svg { width: 23px; height: 23px; }
.workouts-library-target > div { display: grid; flex: 1; min-width: 0; gap: 0.08rem; }
.workouts-library-target small { color: var(--muted); font-size: 0.72rem; }
.workouts-library-target strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workouts-library-add.is-contextual .btn { min-width: 94px; }
.workouts-library-add .btn.is-added,
.workouts-exercise-add-form .btn.is-added { color: var(--positive, #16a34a); border-color: color-mix(in srgb, var(--positive, #16a34a) 35%, var(--line)); opacity: 1; }
.workouts-routine-summary { display: grid; gap: 0.9rem; border-color: color-mix(in srgb, var(--routine-accent, var(--primary)) 34%, var(--line)); }
.workouts-routine-summary-cover { position: relative; height: clamp(150px, 24vw, 230px); overflow: hidden; border-radius: 16px; background: color-mix(in srgb, var(--routine-accent, var(--primary)) 14%, var(--surface)); }
.workouts-routine-summary-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.workouts-routine-summary-main { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.workouts-routine-summary-main > div { min-width: 0; }
.workouts-routine-summary h2,
.workouts-routine-summary p { margin: 0; }
.workouts-routine-summary-main p:not(.eyebrow) { margin-top: 0.2rem; color: var(--muted); }
.workouts-routine-summary-days { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.workouts-routine-summary-days span { display: inline-flex; align-items: center; min-height: 30px; padding: 0.3rem 0.55rem; border-radius: 999px; color: color-mix(in srgb, var(--routine-accent, var(--primary)) 40%, var(--ink)); background: color-mix(in srgb, var(--routine-accent, var(--primary)) 10%, var(--surface)); font-size: 0.72rem; font-weight: 800; }
.workouts-routine-summary-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.workouts-routine-exercises-actions { align-items: center; }
.workouts-routine-organizer { display: grid; gap: 0.9rem; border-color: color-mix(in srgb, var(--routine-accent, var(--primary)) 28%, var(--line)); }
.workouts-routine-organizer-head h2,
.workouts-routine-organizer-head p { margin: 0; }
.workouts-routine-organizer-head p:not(.eyebrow) { margin-top: 0.2rem; }
.workouts-routine-organizer form { display: grid; gap: 0.9rem; }
.workouts-routine-organizer-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.workouts-routine-organizer-item { display: grid; grid-template-columns: 30px 44px minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; min-width: 0; min-height: 72px; padding: 0.55rem; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--routine-accent, var(--primary))) 20%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--exercise-accent, var(--routine-accent, var(--primary))) 3%, var(--surface)); }
.workouts-routine-organizer-position { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; color: color-mix(in srgb, var(--exercise-accent, var(--routine-accent, var(--primary))) 40%, var(--ink)); background: color-mix(in srgb, var(--exercise-accent, var(--routine-accent, var(--primary))) 11%, var(--surface)); font-size: 0.72rem; font-weight: 900; }
.workouts-routine-organizer-copy { display: grid; min-width: 0; gap: 0.12rem; }
.workouts-routine-organizer-copy strong,
.workouts-routine-organizer-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workouts-routine-organizer-copy small { color: var(--muted); font-size: 0.72rem; }
.workouts-routine-organizer-controls { display: flex; gap: 0.35rem; }
.workouts-routine-organizer-controls .btn { width: 44px; min-width: 44px; min-height: 44px; padding: 0; font-size: 1rem; }
.workouts-routine-organizer-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.workouts-routine-organizer-actions .btn { min-width: 124px; min-height: 44px; }
.workouts-organize-routines-link { min-height: 44px; }
.workouts-routine-library-organizer { display: grid; gap: 0.9rem; }
.workouts-routine-library-organizer-head h2,
.workouts-routine-library-organizer-head p { margin: 0; }
.workouts-routine-library-organizer-head p:not(.eyebrow) { max-width: 62ch; margin-top: 0.2rem; }
.workouts-routine-library-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 370px), 1fr)); align-items: start; gap: 0.75rem; }
.workouts-routine-order-group { display: grid; gap: 0.7rem; min-width: 0; padding: 0.75rem; border: 1px solid var(--line); border-radius: 17px; background: color-mix(in srgb, var(--ink) 2.5%, var(--surface)); }
.workouts-routine-order-group > header { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; min-height: 48px; }
.workouts-routine-order-group > header > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, var(--surface)); font-size: 1rem; }
.workouts-routine-order-group[data-routine-order-group="favorites"] > header > span { color: #a96800; background: color-mix(in srgb, #f5b94b 18%, var(--surface)); }
.workouts-favorite-order-group > header > span { color: #a96800; background: color-mix(in srgb, #f5b94b 18%, var(--surface)); }
.workouts-routine-order-group > header svg { width: 21px; height: 21px; }
.workouts-routine-order-group > header > div { display: grid; min-width: 0; gap: 0.08rem; }
.workouts-routine-order-group > header h3,
.workouts-routine-order-group > header p { margin: 0; }
.workouts-routine-order-group > header h3 { font-size: 0.94rem; }
.workouts-routine-order-group > header p { color: var(--muted); font-size: 0.7rem; line-height: 1.35; }
.workouts-routine-order-group > header > b { display: grid; place-items: center; min-width: 30px; height: 30px; padding-inline: 0.4rem; border-radius: 999px; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); font-size: 0.72rem; }
.workouts-routine-order-group form { display: grid; gap: 0.65rem; }
.workouts-routine-library-organizer-item { border-color: color-mix(in srgb, var(--routine-accent, var(--primary)) 24%, var(--line)); background: var(--surface); }
.workouts-routine-order-cover { color: color-mix(in srgb, var(--routine-accent, var(--primary)) 40%, var(--ink)); background: color-mix(in srgb, var(--routine-accent, var(--primary)) 10%, var(--surface)); }
.workouts-routine-order-cover svg { width: 22px; height: 22px; }
.workouts-routine-order-copy { color: inherit; text-decoration: none; }
.workouts-routine-order-copy:hover strong { color: color-mix(in srgb, var(--routine-accent, var(--primary)) 40%, var(--ink)); }
.workouts-routine-order-copy strong > span { color: #d59619; }
.workouts-routine-order-save { display: flex; justify-content: flex-end; }
.workouts-routine-order-save .btn { min-width: 132px; min-height: 44px; }
.workouts-favorite-order-panel { display: grid; width: min(820px, 100%); margin-inline: auto; }
.workouts-favorite-order-item { border-color: color-mix(in srgb, #f5b94b 28%, var(--line)); background: var(--surface); }
.workouts-favorite-order-item .workouts-routine-organizer-position { color: #a96800; background: color-mix(in srgb, #f5b94b 16%, var(--surface)); }
.workouts-session-organize-link { min-height: 44px; }
.workouts-session-organizer-remove { position: relative; display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; color: var(--danger, #dc2626); background: var(--surface); cursor: pointer; }
.workouts-session-organizer-remove input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.workouts-session-organizer-remove > span[aria-hidden] { font-size: 1.35rem; line-height: 1; }
.workouts-session-organizer-remove:has(input:checked) { color: #fff; border-color: var(--danger, #dc2626); background: var(--danger, #dc2626); }
.workouts-session-organizer-remove:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.workouts-session-organizer-remove.is-locked { color: var(--muted); background: color-mix(in srgb, var(--ink) 4%, var(--surface)); cursor: not-allowed; opacity: 0.48; }
.workouts-session-organizer-item.is-marked-for-removal { border-color: color-mix(in srgb, var(--danger, #dc2626) 45%, var(--line)); background: color-mix(in srgb, var(--danger, #dc2626) 7%, var(--surface)); }
.workouts-session-organizer-item.is-marked-for-removal .workouts-routine-organizer-copy { opacity: 0.58; }
.workouts-session-organizer-item.is-marked-for-removal .workouts-routine-organizer-copy strong { text-decoration: line-through; }
.workouts-session-organizer-note { margin: -0.2rem 0 0; color: var(--muted); font-size: 0.72rem; line-height: 1.4; }
.workouts-routine-settings-shell { display: grid; align-items: start; gap: 0.85rem; min-width: 0; }
.workouts-routine-settings-aside { display: grid; gap: 0.75rem; min-width: 0; padding: 0.8rem; border-color: color-mix(in srgb, var(--routine-accent, var(--primary)) 28%, var(--line)); }
.workouts-routine-settings-summary { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 0.65rem; min-width: 0; padding: 0.1rem; }
.workouts-routine-settings-summary > span:last-child { display: grid; min-width: 0; gap: 0.08rem; }
.workouts-routine-settings-summary small { overflow: hidden; color: var(--muted); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.workouts-routine-settings-summary strong { overflow: hidden; font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; }
.workouts-routine-settings-nav { display: grid; gap: 0.35rem; }
.workouts-routine-settings-nav > a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: center; gap: 0.6rem; min-width: 0; min-height: 62px; padding: 0.48rem 0.55rem; border: 1px solid transparent; border-radius: 14px; color: inherit; background: color-mix(in srgb, var(--ink) 2.5%, var(--surface)); text-decoration: none; }
.workouts-routine-settings-nav > a:hover { border-color: color-mix(in srgb, var(--routine-accent, var(--primary)) 22%, var(--line)); background: color-mix(in srgb, var(--routine-accent, var(--primary)) 5%, var(--surface)); }
.workouts-routine-settings-nav > a[aria-current="page"] { border-color: color-mix(in srgb, var(--routine-accent, var(--primary)) 48%, var(--line)); background: color-mix(in srgb, var(--routine-accent, var(--primary)) 11%, var(--surface)); box-shadow: inset 3px 0 0 var(--routine-accent, var(--primary)); }
.workouts-routine-settings-nav > a > span:first-child { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: color-mix(in srgb, var(--routine-accent, var(--primary)) 48%, var(--ink)); background: color-mix(in srgb, var(--routine-accent, var(--primary)) 11%, var(--surface)); }
.workouts-routine-settings-nav svg { width: 20px; height: 20px; }
.workouts-routine-settings-nav > a > span:nth-child(2) { display: grid; min-width: 0; gap: 0.08rem; }
.workouts-routine-settings-nav strong { font-size: 0.78rem; }
.workouts-routine-settings-nav small { display: -webkit-box; overflow: hidden; color: var(--muted); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 0.65rem; line-height: 1.28; }
.workouts-routine-settings-nav b { color: var(--muted); font-size: 1.15rem; font-weight: 500; text-align: center; }
.workouts-routine-settings-done { width: 100%; min-height: 44px; }
.workouts-routine-settings-content { min-width: 0; }
.workouts-routine-settings-content > :only-child { margin: 0; }
.workouts-routine-settings-content .workouts-routine-editor { min-width: 0; }
.workouts-routine-settings-content .workouts-routine-form > .inline-actions { justify-content: flex-end; padding-top: 0.15rem; }
.workouts-routine-settings-content .workouts-routine-form > .inline-actions .btn { min-width: 120px; min-height: 44px; }
.workouts-routine-settings-head { margin-bottom: 0.75rem; }
.workouts-routine-settings-head h2,
.workouts-routine-settings-head p { margin: 0; }
.workouts-routine-settings-head p:not(.eyebrow) { margin-top: 0.18rem; }
@media (min-width: 900px) {
    .workouts-routine-settings-shell { grid-template-columns: minmax(220px, 250px) minmax(0, 1fr); gap: 1rem; }
    .workouts-routine-settings-aside { position: sticky; top: 88px; }
    .workouts-routine-settings-content .workouts-routine-editor { padding: 1.1rem; }
}
.workouts-routine-danger { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.workouts-routine-danger > div:first-child { display: grid; gap: 0.1rem; }
.workouts-routine-danger small { color: var(--muted); }
.workouts-routine-empty { display: flex; align-items: center; gap: 0.7rem; min-height: 72px; padding: 0.7rem; border: 1px dashed var(--line); border-radius: 14px; }
.workouts-routine-empty > span,
.workouts-routine-add-more > span { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); font-size: 1.25rem; }
.workouts-routine-empty > div { display: grid; flex: 1; min-width: 0; gap: 0.1rem; }
.workouts-routine-empty small,
.workouts-routine-add-more small { color: var(--muted); }
.workouts-routine-add-more { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 0.7rem; min-height: 60px; padding: 0.55rem; border-radius: 13px; color: inherit; text-decoration: none; }
.workouts-routine-add-more:hover { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.workouts-routine-add-more > span { grid-row: 1 / 3; }
.workouts-routine-exercise-edit { flex: 0 0 44px; width: 44px; min-width: 44px; min-height: 44px; font-size: 1.45rem; text-decoration: none; }
.workouts-routine-exercise-editor { display: grid; gap: 1rem; border-color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 26%, var(--line)); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 3%, var(--surface)); }
.workouts-routine-exercise-editor-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; }
.workouts-routine-exercise-editor-head > span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 45%, var(--ink)); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 11%, var(--surface)); font-size: 0.72rem; font-weight: 900; }
.workouts-routine-exercise-editor-head > div { min-width: 0; }
.workouts-routine-exercise-editor-head h2,
.workouts-routine-exercise-editor-head p { margin: 0; }
.workouts-routine-exercise-editor-head p:not(.eyebrow) { margin-top: 0.15rem; color: var(--muted); font-size: 0.78rem; }
.workouts-routine-exercise-editor-head .workouts-exercise-cover { width: 52px; height: 52px; overflow: hidden; padding: 0; }
.workouts-exercise-appearance { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.7rem; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 24%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 5%, var(--surface)); }
.workouts-exercise-appearance-preview { position: relative; display: grid; place-items: center; width: 84px; height: 62px; overflow: hidden; border-radius: 12px; color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 45%, var(--ink)); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 10%, var(--surface)); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.04em; }
.workouts-exercise-appearance-preview:not(.has-media) { font-size: 1.35rem; letter-spacing: 0; }
.workouts-exercise-appearance-preview img { width: 100%; height: 100%; object-fit: cover; }
.workouts-exercise-appearance > div:nth-child(2) { display: grid; min-width: 0; gap: 0.08rem; }
.workouts-exercise-appearance p,
.workouts-exercise-appearance strong,
.workouts-exercise-appearance small { margin: 0; }
.workouts-exercise-appearance small { color: var(--muted); line-height: 1.35; }
.workouts-routine-exercise-form { display: grid; gap: 0.85rem; }
.workouts-target-section { display: grid; gap: 0.7rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }
.workouts-target-section > div:first-child { display: flex; align-items: flex-start; gap: 0.65rem; }
.workouts-target-section > div:first-child > span { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px; color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, var(--surface)); font-size: 0.74rem; font-weight: 900; }
.workouts-target-section h3,
.workouts-target-section p { margin: 0; }
.workouts-target-section p { margin-top: 0.1rem; color: var(--muted); font-size: 0.76rem; }
.workouts-target-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.workouts-target-grid.is-secondary { grid-template-columns: minmax(180px, 0.65fr) minmax(0, 2fr); }
.workouts-target-grid label { min-width: 0; }
.workouts-target-grid input,
.workouts-target-grid select,
.workouts-target-grid textarea { width: 100%; min-width: 0; }
.workouts-target-notes { grid-column: auto; }
.workouts-target-actions { display: flex; justify-content: flex-end; gap: 0.55rem; padding-top: 0.2rem; }
.workouts-routine-exercise-danger { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.workouts-routine-exercise-danger > div { display: grid; gap: 0.1rem; }
.workouts-routine-exercise-danger small { color: var(--muted); }
.workouts-library-head { display: grid; gap: 0.8rem; }
.workouts-library-layout-switch { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0; padding: 0.42rem 0.5rem 0.42rem 0.72rem; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--surface-2, var(--surface)) 70%, transparent); }
.workouts-library-layout-copy { display: grid; min-width: 0; gap: 0.05rem; }
.workouts-library-layout-copy strong { font-size: 0.78rem; }
.workouts-library-layout-copy small { overflow: hidden; color: var(--muted); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.workouts-library-layout-options { display: inline-flex; flex: 0 0 auto; gap: 0.25rem; padding: 0.22rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.workouts-library-layout-options button { display: inline-flex; align-items: center; justify-content: center; gap: 0.38rem; min-width: 82px; min-height: 46px; padding: 0.42rem 0.62rem; border: 1px solid transparent; border-radius: 9px; color: var(--muted); background: transparent; font: inherit; font-size: 0.72rem; font-weight: 820; cursor: pointer; }
.workouts-library-layout-options button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.workouts-library-layout-options button.is-active { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 32%, var(--line)); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.workouts-layout-icon { display: block; width: 17px; height: 14px; border: 1.5px solid currentColor; border-radius: 3px; opacity: 0.82; }
.workouts-layout-icon.is-cards { box-shadow: inset 0 -4px 0 color-mix(in srgb, currentColor 22%, transparent); }
.workouts-layout-icon.is-compact { border-inline: 0; border-radius: 0; background: repeating-linear-gradient(to bottom, currentColor 0 1.5px, transparent 1.5px 4.5px); }
.workouts-library-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr) auto; gap: 0.55rem; align-items: end; }
.workouts-library-filters label,
.workouts-library-filters input,
.workouts-library-filters select { width: 100%; min-width: 0; }
.workouts-muscle-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.workouts-muscle-filters a { display: inline-flex; align-items: center; min-height: 38px; padding: 0.42rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 0.74rem; font-weight: 780; text-decoration: none; }
.workouts-muscle-filters a:hover,
.workouts-muscle-filters a[aria-current="page"] { color: var(--ink); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.workouts-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.workouts-library-card { position: relative; display: grid; grid-template-rows: auto 1fr auto auto; gap: 0.72rem; min-width: 0; overflow: hidden; padding: 0.85rem; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 24%, var(--line)); border-radius: 18px; background: linear-gradient(150deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--exercise-accent, var(--primary)) 6%, var(--surface))); box-shadow: 0 10px 25px rgba(8, 18, 30, 0.07); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.workouts-library-card::before { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: 4px; background: var(--exercise-accent, var(--primary)); }
.workouts-library-card:hover { border-color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 46%, var(--line)); box-shadow: 0 14px 32px rgba(8, 18, 30, 0.11); }
@media (hover: hover) { .workouts-library-card:hover { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .workouts-library-card { transition: none; } .workouts-library-card:hover { transform: none; } }
.workouts-library-media {
    display: block;
    width: 100%;
    height: 136px;
    margin: 0;
    overflow: hidden;
    border-radius: 13px;
    background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 8%, var(--surface));
}
.workouts-library-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 180ms ease; }
.workouts-library-media:hover img { transform: scale(1.025); }
.workouts-library-card-head,
.workouts-library-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.workouts-library-copy { min-width: 0; }
.workouts-library-copy h3 { margin: 0; font-size: 1rem; }
.workouts-library-copy h3 a { color: inherit; text-decoration: none; }
.workouts-library-copy p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.45; }
/* Desktop list view: one true row per exercise, not a denser card grid. The
   accent color moves to a left rail (like the mobile compact row) so the two
   layouts share a mental model instead of "list" just meaning "smaller cards". */
.workouts-library-grid.is-compact { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.workouts-library-grid.is-compact .workouts-library-card {
    grid-template-columns: 68px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "media copy status"
        "media tags foot";
    align-items: center;
    gap: 0.22rem 0.85rem;
    padding: 0.6rem 0.9rem 0.6rem 0.75rem;
    border-width: 1px 1px 1px 4px;
    border-left-color: var(--exercise-accent, var(--primary));
    border-radius: 13px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(8, 18, 30, 0.04);
}
.workouts-library-grid.is-compact .workouts-library-card::before { display: none; }
.workouts-library-grid.is-compact .workouts-library-card:hover {
    border-color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 46%, var(--line));
    box-shadow: 0 6px 16px rgba(8, 18, 30, 0.08);
}
.workouts-library-grid.is-compact .workouts-library-media { grid-area: media; width: 68px; height: 68px; border-radius: 12px; }
.workouts-library-grid.is-compact .workouts-library-media-badges { top: 0.22rem; right: 0.22rem; align-items: flex-end; flex-direction: column; gap: 0.12rem; }
.workouts-library-grid.is-compact .workouts-library-media-badges em { min-height: 18px; padding: 0.1rem 0.26rem; font-size: 0.5rem; }
.workouts-library-grid.is-compact .workouts-library-media.is-placeholder > span:not(.workouts-library-media-badges) { width: 32px; height: 32px; border-radius: 10px; font-size: 0.72rem; }
.workouts-library-grid.is-compact .workouts-library-media.is-placeholder > small { display: none; }
.workouts-library-grid.is-compact .workouts-library-play { width: 28px; height: 28px; font-size: 0.65rem; }
.workouts-library-grid.is-compact .workouts-library-card-head { grid-area: status; align-self: start; }
.workouts-library-grid.is-compact .workouts-library-card-head > .workouts-muscle-token { display: none; }
.workouts-library-grid.is-compact .workouts-library-card-status { align-items: flex-end; flex-direction: row; gap: 0.55rem; }
.workouts-library-grid.is-compact .workouts-library-rank-meta { align-items: end; }
.workouts-library-grid.is-compact .workouts-library-copy { grid-area: copy; align-self: end; min-width: 0; }
.workouts-library-grid.is-compact .workouts-library-copy h3 { overflow: hidden; font-size: 0.9rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.workouts-library-grid.is-compact .workouts-library-copy p { display: none; }
.workouts-library-grid.is-compact .workouts-exercise-tags { grid-area: tags; align-self: start; flex-wrap: wrap; min-width: 0; }
.workouts-library-grid.is-compact .workouts-library-card-foot { grid-area: foot; align-items: center; flex-flow: row wrap; justify-content: flex-end; padding-top: 0; border-top: 0; }
.workouts-library-grid.is-compact .workouts-library-card-foot > * { min-width: 0; }
.workouts-library-grid.is-compact .workouts-library-card-foot .inline-actions { display: flex; flex: 0 1 auto; gap: 0.35rem; }
.workouts-library-grid.is-compact .workouts-library-add { flex: 0 0 auto; }
.workouts-library-grid.is-compact .workouts-library-add select { width: auto; min-width: 120px; }
.workouts-muscle-token,
.workouts-rank-position { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line)); border-radius: 12px; color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, transparent); font-size: 0.7rem; font-weight: 900; }
.workouts-rank-position { font-size: 1rem; }
.workouts-library-card .workouts-muscle-token { border-color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 36%, var(--line)); color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 48%, var(--ink)); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 11%, transparent); }
.workouts-rank-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 27px; padding: 0.2rem 0.55rem; border: 1px solid color-mix(in srgb, var(--rank-color, #64748b) 56%, transparent); border-radius: 999px; color: var(--rank-color, #64748b); background: color-mix(in srgb, var(--rank-color, #64748b) 12%, transparent); font-size: 0.68rem; font-weight: 900; white-space: nowrap; }
[data-rank="rookie"] { --rank-color: #94a3b8; }
[data-rank="bronze"] { --rank-color: #c47a44; }
[data-rank="silver"] { --rank-color: #a8b2bd; }
[data-rank="gold"] { --rank-color: #d6a928; }
[data-rank="platinum"] { --rank-color: #2fb5a5; }
[data-rank="diamond"] { --rank-color: #4f8ff7; }
[data-rank="elite"] { --rank-color: #9b6df3; }
.workouts-library-add { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; min-width: 0; }
.workouts-library-add label { min-width: 0; }
.workouts-library-add select { width: min(145px, 34vw); min-height: 38px; padding-block: 0.3rem; font-size: 0.72rem; }
.workouts-rank-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.1rem;
    padding: 1.15rem;
    border: 1px solid color-mix(in srgb, var(--rank-color, var(--primary)) 36%, var(--line));
    border-radius: 22px;
    background:
        radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--rank-color, var(--primary)) 18%, transparent), transparent 35%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--rank-color, var(--primary)) 7%, var(--surface)));
    box-shadow: 0 18px 42px rgba(8, 18, 30, 0.1);
}
.workouts-rank-hero h2,
.workouts-rank-hero p { margin-block: 0.15rem; }
.workouts-rank-hero p:not(.eyebrow) { color: var(--muted); }
.workouts-rank-hero small { display: block; margin-top: 0.45rem; color: var(--muted); }
.workouts-rank-emblem {
    display: grid;
    place-items: center;
    width: 112px;
    aspect-ratio: 1;
    border: 2px solid color-mix(in srgb, var(--rank-color, var(--primary)) 60%, var(--line));
    border-radius: 50%;
    color: var(--rank-color, var(--primary));
    background: color-mix(in srgb, var(--rank-color, var(--primary)) 10%, var(--surface));
    box-shadow: inset 0 0 0 7px color-mix(in srgb, var(--rank-color, var(--primary)) 8%, transparent);
    text-align: center;
}
.workouts-rank-emblem span { align-self: end; font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; }
.workouts-rank-emblem strong { align-self: start; font-size: 1.55rem; line-height: 1.1; }
.workouts-rank-notice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.72rem 0.85rem;
    border: 1px solid color-mix(in srgb, #f59e0b 38%, var(--line));
    border-radius: 14px;
    color: color-mix(in srgb, #b66d00 78%, var(--ink));
    background: color-mix(in srgb, #f59e0b 9%, var(--surface));
    font-size: 0.8rem;
    font-weight: 700;
}
.workouts-rank-notice svg { flex: 0 0 auto; width: 20px; height: 20px; }
.workouts-rank-notice span { flex: 1; }
.workouts-rank-notice a { color: inherit; font-weight: 900; }
.workouts-body-rank-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.workouts-body-rank-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--rank-color, var(--primary)) 25%, var(--line));
    border-radius: 14px;
    color: inherit;
    background: color-mix(in srgb, var(--rank-color, var(--primary)) 4%, var(--surface));
    text-decoration: none;
}
.workouts-body-rank-card > span:nth-child(2) { min-width: 0; display: grid; gap: 0.12rem; }
.workouts-body-rank-card > span:nth-child(2) strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }
.workouts-body-rank-card > span:nth-child(2) small { color: var(--muted); font-size: 0.66rem; }
.workouts-rank-columns { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, 0.65fr); gap: 0.8rem; align-items: start; }
.workouts-exercise-rank-list,
.workouts-leaderboard-list { display: grid; gap: 0.45rem; }
.workouts-exercise-rank-row,
.workouts-leaderboard-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: inherit;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    text-decoration: none;
}
.workouts-exercise-rank-row > span:nth-child(2),
.workouts-leaderboard-row > span:nth-child(3) { min-width: 0; display: grid; gap: 0.08rem; }
.workouts-exercise-rank-row > span:nth-child(2) strong,
.workouts-leaderboard-row > span:nth-child(3) strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; }
.workouts-exercise-rank-row small,
.workouts-leaderboard-row small { color: var(--muted); font-size: 0.67rem; }
.workouts-leaderboard-row { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.workouts-leaderboard-row > strong { color: var(--muted); font-size: 0.75rem; }
.workouts-leaderboard-row.is-me { border-color: color-mix(in srgb, var(--primary) 42%, var(--line)); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.workouts-exercise-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    border-color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 26%, var(--line));
    background: linear-gradient(145deg, color-mix(in srgb, var(--exercise-accent, var(--primary)) 9%, var(--surface)), var(--surface));
}
.workouts-exercise-hero-icon { display: grid; place-items: center; width: 72px; aspect-ratio: 1; border-radius: 21px; color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 45%, var(--ink)); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 14%, transparent); font-size: 1.05rem; font-weight: 950; }
.workouts-exercise-hero-copy { min-width: 0; }
.workouts-exercise-hero-copy h2,
.workouts-exercise-hero-copy p { margin-block: 0.18rem; }
.workouts-exercise-hero-copy > p:not(.eyebrow) { max-width: 68ch; color: var(--muted); line-height: 1.5; }
.workouts-exercise-rank-card { display: grid; justify-items: end; min-width: 115px; gap: 0.12rem; }
.workouts-exercise-rank-card > strong { color: var(--rank-color, var(--primary)); font-size: 1.55rem; }
.workouts-exercise-rank-card > small { color: var(--muted); font-size: 0.68rem; }
.workouts-rank-progress { width: 100%; height: 6px; margin-top: 0.25rem; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--line) 76%, transparent); }
.workouts-rank-progress span { display: block; height: 100%; border-radius: inherit; background: var(--rank-color, var(--primary)); }
.workouts-guide-media {
    padding: 0.75rem;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 24%, var(--line));
}
.workouts-exercise-media-viewer { display: grid; min-width: 0; gap: 0.7rem; }
.workouts-media-viewer-head { display: flex; align-items: end; justify-content: space-between; gap: 0.8rem; padding: 0.15rem 0.15rem 0; }
.workouts-media-viewer-head > div { min-width: 0; }
.workouts-media-viewer-head h2,
.workouts-media-viewer-head p { margin: 0; }
.workouts-media-viewer-head h2 { margin-top: 0.08rem; font-size: 1rem; }
.workouts-media-viewer-head p:not(.eyebrow) { margin-top: 0.2rem; color: var(--muted); font-size: 0.72rem; line-height: 1.4; }
.workouts-media-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem; padding: 0.3rem; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 4%, var(--surface)); }
.workouts-media-tabs button { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; gap: 0.4rem; padding: 0.4rem 0.75rem; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; font: inherit; font-size: 0.72rem; font-weight: 850; cursor: pointer; }
.workouts-media-tabs button span { display: grid; width: 19px; height: 19px; place-items: center; }
.workouts-media-tabs button svg { width: 17px; height: 17px; }
.workouts-media-tabs button[aria-selected="true"] { color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 52%, var(--ink)); border-color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 30%, var(--line)); background: var(--surface); box-shadow: 0 4px 12px rgba(8, 18, 30, 0.07); }
.workouts-media-tab-play { padding-left: 2px; font-size: 0.62rem; }
.workouts-media-stage { min-width: 0; overflow: hidden; border-radius: 16px; background: #0b1220; }
.workouts-media-panel { min-width: 0; margin: 0; overflow: hidden; }
.workouts-media-panel[hidden] { display: none !important; }
.workouts-media-photo,
.workouts-guide-video { aspect-ratio: 16 / 9; background: #0b1220; }
.workouts-media-photo { position: relative; }
.workouts-media-photo > img,
.workouts-guide-video iframe,
.workouts-guide-video video { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.workouts-media-photo:has(.workouts-media-gallery) { aspect-ratio: auto; background: var(--surface); }
.workouts-media-gallery { display: grid; min-width: 0; background: var(--surface); }
.workouts-media-gallery-stage { position: relative; aspect-ratio: 16 / 9; min-width: 0; overflow: hidden; background: #0b1220; touch-action: pan-y; }
.workouts-media-gallery-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.workouts-media-gallery-stage img[hidden] { display: none; }
.workouts-media-caption { position: absolute; z-index: 2; right: 0.6rem; bottom: 0.6rem; left: 0.6rem; width: fit-content; max-width: calc(100% - 1.2rem); margin: 0; padding: 0.42rem 0.58rem; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 10px; color: #fff; background: rgba(8, 18, 30, 0.76); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); backdrop-filter: blur(8px); font-size: 0.7rem; font-weight: 750; line-height: 1.35; }
.workouts-media-caption[hidden] { display: none; }
.workouts-media-gallery-controls { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 0.35rem; padding: 0.45rem 0.55rem 0.25rem; }
.workouts-media-gallery-controls button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 5%, var(--surface)); cursor: pointer; }
.workouts-media-gallery-controls button:focus-visible { outline: 2px solid var(--exercise-accent, var(--primary)); outline-offset: 2px; }
.workouts-media-gallery-controls output { color: var(--muted); font-size: 0.68rem; font-weight: 850; text-align: center; }
.workouts-media-gallery-thumbs { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 0.35rem; padding: 0.25rem 0.55rem 0.55rem; }
.workouts-media-gallery-thumbs button { min-width: 44px; height: 52px; overflow: hidden; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.workouts-media-gallery-thumbs button[aria-pressed="true"] { border-color: var(--exercise-accent, var(--primary)); box-shadow: inset 0 0 0 1px var(--exercise-accent, var(--primary)); }
.workouts-media-gallery-thumbs button:focus-visible { outline: 2px solid var(--exercise-accent, var(--primary)); outline-offset: 2px; }
.workouts-media-gallery-thumbs img { display: block; width: 100%; height: 100%; border-radius: 7px; object-fit: cover; }
.workouts-media-lazy-video { position: relative; display: grid; width: 100%; height: 100%; place-items: center; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--exercise-accent, var(--primary)) 38%, #162033), #0b1220 74%); }
.workouts-media-lazy-video > img { position: absolute; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0.72; filter: saturate(0.9) contrast(1.03); }
.workouts-media-lazy-video.has-thumbnail::after { position: absolute; z-index: -1; inset: 0; content: ''; background: linear-gradient(180deg, rgba(5, 10, 18, 0.08), rgba(5, 10, 18, 0.58)); }
.workouts-media-video-mark { position: absolute; z-index: -1; color: rgba(255, 255, 255, 0.2); font-size: clamp(3rem, 16vw, 7rem); font-weight: 950; }
.workouts-media-lazy-video > button { display: grid; grid-template-columns: 48px auto; grid-template-areas: "play title" "play provider"; align-items: center; gap: 0 0.65rem; min-width: 164px; min-height: 64px; padding: 0.55rem 1rem 0.55rem 0.65rem; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; color: #fff; background: rgba(8, 17, 29, 0.78); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24); backdrop-filter: blur(12px); cursor: pointer; text-align: left; }
.workouts-media-lazy-video > button > span { grid-area: play; display: grid; width: 48px; height: 48px; padding-left: 3px; place-items: center; border-radius: 50%; color: #07111d; background: #fff; font-size: 0.82rem; }
.workouts-media-lazy-video > button strong { grid-area: title; align-self: end; font-size: 0.76rem; }
.workouts-media-lazy-video > button small { grid-area: provider; align-self: start; color: rgba(255, 255, 255, 0.7); font-size: 0.64rem; }
.workouts-media-lazy-video.is-loaded { background: #000; }
.workouts-media-lazy-video iframe { position: absolute; inset: 0; }
.workouts-guide-video-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 45%, var(--ink));
    background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 8%, var(--surface));
    font-weight: 850;
    text-decoration: none;
}
.workouts-guide-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr); gap: 0.8rem; align-items: start; }
.workouts-guide-steps ol { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.workouts-guide-steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 0.7rem; }
.workouts-guide-steps li > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 45%, var(--ink)); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 13%, transparent); font-size: 0.78rem; font-weight: 900; }
.workouts-guide-steps li p { margin: 0; padding-top: 0.45rem; line-height: 1.55; }
.workouts-guide-note { border-left: 4px solid var(--exercise-accent, var(--primary)); }
.workouts-guide-note.mistakes { border-left-color: #f97316; }
.workouts-guide-note h3,
.workouts-guide-note p { margin-block: 0.18rem; }
.workouts-guide-note p { color: var(--muted); font-size: 0.8rem; line-height: 1.5; }
.workouts-guide-meta dl { display: grid; gap: 0.65rem; margin: 0; }
.workouts-guide-meta dl > div { display: grid; gap: 0.15rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--line); }
.workouts-guide-meta dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.workouts-guide-meta dt { color: var(--muted); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
.workouts-guide-meta dd { margin: 0; font-size: 0.83rem; font-weight: 800; }
.workouts-library-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.workouts-library-actions .btn { min-height: 44px; }
.workouts-library-scope-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; padding: 0.35rem; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--surface-2, var(--surface)) 74%, transparent); }
.workouts-library-scope-tabs a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; gap: 0.35rem; padding: 0.42rem 0.55rem; border: 1px solid transparent; border-radius: 11px; color: var(--muted); font-size: 0.72rem; font-weight: 820; text-decoration: none; }
.workouts-library-scope-tabs a strong { display: grid; min-width: 23px; height: 23px; place-items: center; padding-inline: 0.28rem; border-radius: 999px; color: inherit; background: color-mix(in srgb, currentColor 9%, transparent); font-size: 0.63rem; }
.workouts-library-scope-tabs a[aria-current="page"] { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); background: var(--surface); box-shadow: 0 5px 14px rgba(8, 18, 30, 0.06); }
.workouts-library-card.is-personal { border-color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 52%, var(--line)); }
.workouts-library-card.is-favorite { box-shadow: 0 12px 28px color-mix(in srgb, #f59e0b 10%, transparent); }
.workouts-library-media { position: relative; }
.workouts-library-media.is-placeholder { display: grid; place-items: center; align-content: center; gap: 0.3rem; color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 48%, var(--ink)); background: linear-gradient(145deg, color-mix(in srgb, var(--exercise-accent, var(--primary)) 10%, var(--surface)), color-mix(in srgb, var(--surface) 96%, transparent)); text-decoration: none; }
.workouts-library-media.is-placeholder > span:not(.workouts-library-media-badges) { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 30%, var(--line)); border-radius: 16px; font-size: 1.05rem; font-weight: 900; }
.workouts-library-media.is-placeholder > small { color: var(--muted); font-size: 0.68rem; font-weight: 750; }
.workouts-library-media.is-video-thumbnail { display: grid; place-items: center; isolation: isolate; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 24%, #111827), #111827); text-decoration: none; }
.workouts-library-video-fallback { font-size: 1.35rem; font-weight: 950; opacity: 0.68; }
.workouts-library-video-thumb { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(180deg, rgba(4, 10, 18, 0.06), rgba(4, 10, 18, 0.42)), var(--workout-video-thumb); background-position: center; background-size: cover; transition: transform 180ms ease; }
.workouts-library-media.is-video-thumbnail:hover .workouts-library-video-thumb { transform: scale(1.025); }
.workouts-library-play { position: absolute; z-index: 1; display: grid; width: 48px; height: 48px; place-items: center; padding-left: 3px; border: 1px solid rgba(255, 255, 255, 0.56); border-radius: 50%; color: #fff; background: rgba(8, 18, 30, 0.7); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24); backdrop-filter: blur(8px); font-size: 1rem; }
.workouts-library-media-badges { position: absolute; top: 0.55rem; right: 0.55rem; display: flex; gap: 0.3rem; }
.workouts-library-media-badges em { display: inline-flex; align-items: center; min-height: 28px; padding: 0.28rem 0.48rem; border: 1px solid rgba(255, 255, 255, 0.42); border-radius: 999px; color: #fff; background: rgba(8, 18, 30, 0.7); backdrop-filter: blur(8px); font-size: 0.64rem; font-style: normal; font-weight: 850; }
.workouts-library-card-actions { display: flex; align-items: center; gap: 0.4rem; }
.workouts-library-card-status { display: flex; align-items: center; gap: 0.42rem; }
.workouts-favorite-form { display: inline-flex; margin: 0; }
.workouts-favorite-toggle { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: var(--surface); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.workouts-favorite-toggle:hover,
.workouts-favorite-toggle.is-active { color: #d99000; border-color: color-mix(in srgb, #f59e0b 55%, var(--line)); background: color-mix(in srgb, #f59e0b 10%, var(--surface)); }
.workouts-exercise-edit { min-height: 44px; }
.workouts-exercise-hero-actions { display: flex; grid-column: 2 / -1; justify-content: flex-end; flex-wrap: wrap; gap: 0.45rem; }
.workouts-exercise-hero-actions .btn { min-height: 44px; }
.workouts-session-exercise { border-color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 24%, var(--line)); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 3%, var(--surface)); }

.workouts-custom-editor { display: grid; gap: 0.8rem; }
.workouts-custom-step-nav { display: none; }
.workouts-custom-draft { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; min-width: 0; padding: 0.6rem 0.7rem; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.workouts-custom-draft-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.workouts-custom-draft-icon > span { width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent); }
.workouts-custom-draft-copy { display: grid; min-width: 0; gap: 0.06rem; }
.workouts-custom-draft-copy strong { color: var(--ink); font-size: 0.75rem; }
.workouts-custom-draft-copy small { color: var(--muted); font-size: 0.64rem; line-height: 1.35; }
.workouts-custom-draft-copy small:empty { display: none; }
.workouts-custom-draft-actions { display: flex; align-items: center; gap: 0.35rem; }
.workouts-custom-draft-actions .btn { min-height: 44px; }
.workouts-custom-draft[data-state="saving"] .workouts-custom-draft-icon > span { background: transparent; border-top-color: transparent; animation: workout-draft-spin 700ms linear infinite; }
.workouts-custom-draft[data-state="saved"] { border-color: color-mix(in srgb, var(--success, #16a34a) 34%, var(--line)); background: color-mix(in srgb, var(--success, #16a34a) 6%, var(--surface)); }
.workouts-custom-draft[data-state="saved"] .workouts-custom-draft-icon,
.workouts-custom-draft[data-state="restored"] .workouts-custom-draft-icon { color: var(--success, #16a34a); background: color-mix(in srgb, var(--success, #16a34a) 12%, var(--surface)); }
.workouts-custom-draft[data-state="found"] { border-color: color-mix(in srgb, #f59e0b 42%, var(--line)); background: color-mix(in srgb, #f59e0b 7%, var(--surface)); }
.workouts-custom-draft[data-state="found"] .workouts-custom-draft-icon { color: #c57d00; background: color-mix(in srgb, #f59e0b 14%, var(--surface)); }
.workouts-custom-draft[data-state="unavailable"] { border-color: color-mix(in srgb, var(--danger, #dc2626) 30%, var(--line)); }
.workouts-custom-draft[data-state="unavailable"] .workouts-custom-draft-icon { color: var(--danger, #dc2626); }
@keyframes workout-draft-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .workouts-custom-draft[data-state="saving"] .workouts-custom-draft-icon > span { animation: none; } }
.workouts-custom-section { display: grid; gap: 1rem; padding: 1rem; }
.workouts-custom-section-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.workouts-custom-section-head > span { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); font-size: 0.78rem; font-weight: 900; }
.workouts-custom-section-head h2,
.workouts-custom-section-head p { margin: 0; }
.workouts-custom-section-head h2 { font-size: 1rem; }
.workouts-custom-section-head p { margin-top: 0.15rem; color: var(--muted); font-size: 0.76rem; line-height: 1.45; }
.workouts-exercise-live-preview { position: relative; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 30%, var(--line)); border-radius: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--exercise-accent, var(--primary)) 8%, var(--surface)), color-mix(in srgb, var(--surface) 97%, transparent)); }
.workouts-exercise-live-preview::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--exercise-accent, var(--primary)); }
.workouts-exercise-live-preview-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 24px; align-items: center; gap: 0.6rem; min-width: 0; min-height: 66px; padding: 0.55rem 0.7rem; cursor: pointer; list-style: none; }
.workouts-exercise-live-preview-head::-webkit-details-marker { display: none; }
.workouts-exercise-live-preview-head:focus-visible { outline: 2px solid var(--exercise-accent, var(--primary)); outline-offset: -3px; }
.workouts-exercise-live-preview-icon { display: grid; width: 42px; height: 42px; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 38%, var(--line)); border-radius: 13px; color: #fff; background: var(--exercise-accent, var(--primary)); font-size: 0.92rem; font-weight: 900; line-height: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.workouts-exercise-live-preview-head > div:nth-child(2) { min-width: 0; }
.workouts-exercise-live-preview-head .eyebrow,
.workouts-exercise-live-preview-head h3 { margin: 0; }
.workouts-exercise-live-preview-head .eyebrow { color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 54%, var(--ink)); font-size: 0.64rem; }
.workouts-exercise-live-preview-head h3 { overflow: hidden; margin-top: 0.08rem; color: var(--ink); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.workouts-exercise-live-preview-head > em { display: inline-flex; max-width: 120px; min-height: 28px; align-items: center; overflow: hidden; padding: 0.25rem 0.48rem; border-radius: 999px; color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 56%, var(--ink)); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 11%, var(--surface)); font-size: 0.61rem; font-style: normal; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.workouts-exercise-live-preview-head > b { color: var(--muted); font-size: 1.2rem; font-weight: 500; text-align: center; transition: transform 160ms ease; }
.workouts-exercise-live-preview[open] > .workouts-exercise-live-preview-head > b { transform: rotate(45deg); }
.workouts-exercise-live-preview-body { display: grid; gap: 0.6rem; padding: 0.7rem; border-top: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 18%, var(--line)); }
.workouts-exercise-live-preview-tabs { display: grid; grid-template-columns: repeat(2, minmax(82px, 1fr)); justify-self: end; width: min(100%, 360px); gap: 0.2rem; padding: 0.2rem; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.workouts-exercise-live-preview-tabs button { min-height: 44px; padding: 0.4rem 0.65rem; border: 0; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; font-size: 0.69rem; font-weight: 820; }
.workouts-exercise-live-preview-tabs button[aria-selected="true"] { color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 56%, var(--ink)); background: var(--surface); box-shadow: 0 1px 4px rgba(8, 18, 30, 0.08); }
.workouts-exercise-live-preview-tabs button:focus-visible { outline: 2px solid var(--exercise-accent, var(--primary)); outline-offset: 2px; }
.workouts-exercise-live-preview-stage { min-width: 0; }
.workouts-exercise-preview-card { display: grid; grid-template-columns: minmax(112px, 32%) minmax(0, 1fr); min-width: 0; min-height: 138px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 22%, var(--line)); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 20px rgba(8, 18, 30, 0.06); }
.workouts-exercise-preview-media { position: relative; display: grid; min-width: 0; min-height: 100%; place-items: center; overflow: hidden; color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 54%, var(--ink)); background: linear-gradient(145deg, color-mix(in srgb, var(--exercise-accent, var(--primary)) 17%, var(--surface)), color-mix(in srgb, var(--exercise-accent, var(--primary)) 5%, var(--surface))); }
.workouts-exercise-preview-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.workouts-exercise-preview-media img[hidden],
.workouts-exercise-preview-media [hidden] { display: none; }
.workouts-exercise-preview-mark { display: grid; width: 54px; height: 54px; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 34%, var(--line)); border-radius: 17px; color: #fff; background: var(--exercise-accent, var(--primary)); font-size: 1.1rem; font-weight: 900; line-height: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.workouts-exercise-preview-play { position: absolute; z-index: 2; display: grid; width: 38px; height: 38px; padding-left: 2px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 999px; color: #fff; background: rgba(8, 18, 30, 0.72); backdrop-filter: blur(8px); font-size: 0.76rem; }
.workouts-exercise-preview-badges { position: absolute; z-index: 3; inset: 0.4rem 0.4rem auto; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.25rem; }
.workouts-exercise-preview-badges em { display: inline-flex; max-width: 100%; min-height: 25px; align-items: center; overflow: hidden; padding: 0.22rem 0.4rem; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; color: #fff; background: rgba(8, 18, 30, 0.72); backdrop-filter: blur(8px); font-size: 0.57rem; font-style: normal; font-weight: 850; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.workouts-exercise-preview-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; gap: 0.45rem 0.55rem; min-width: 0; padding: 0.7rem; }
.workouts-exercise-preview-copy .workouts-muscle-token { align-self: start; }
.workouts-exercise-preview-copy > div:nth-child(2) { min-width: 0; }
.workouts-exercise-preview-copy h4,
.workouts-exercise-preview-copy p { margin: 0; }
.workouts-exercise-preview-copy h4 { overflow: hidden; color: var(--ink); font-size: 0.86rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.workouts-exercise-preview-copy p { display: -webkit-box; overflow: hidden; margin-top: 0.15rem; color: var(--muted); font-size: 0.66rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.workouts-exercise-preview-tags { display: flex; grid-column: 1 / -1; min-width: 0; flex-wrap: wrap; gap: 0.28rem; }
.workouts-exercise-preview-tags span { display: inline-flex; min-height: 25px; align-items: center; padding: 0.22rem 0.42rem; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 22%, var(--line)); border-radius: 999px; color: var(--muted); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 7%, var(--surface)); font-size: 0.58rem; font-weight: 760; }
.workouts-exercise-preview-tags .is-target { color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 58%, var(--ink)); font-weight: 900; }
.workouts-exercise-preview-session { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; min-height: 82px; padding: 0.65rem; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 23%, var(--line)); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 20px rgba(8, 18, 30, 0.06); }
.workouts-exercise-preview-session-cover { width: 58px; height: 58px; min-height: 58px; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 30%, var(--line)); border-radius: 15px; }
.workouts-exercise-preview-session-cover .workouts-exercise-preview-mark { width: 38px; height: 38px; border-radius: 12px; font-size: 0.78rem; }
.workouts-exercise-preview-session-cover .workouts-exercise-preview-play { right: 3px; bottom: 3px; width: 24px; height: 24px; font-size: 0.52rem; }
.workouts-exercise-preview-session-copy { min-width: 0; }
.workouts-exercise-preview-session-copy .eyebrow,
.workouts-exercise-preview-session-copy h4,
.workouts-exercise-preview-session-copy p { margin: 0; }
.workouts-exercise-preview-session-copy .eyebrow { color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 54%, var(--ink)); font-size: 0.58rem; }
.workouts-exercise-preview-session-copy h4 { overflow: hidden; margin-top: 0.1rem; color: var(--ink); font-size: 0.84rem; text-overflow: ellipsis; white-space: nowrap; }
.workouts-exercise-preview-session-copy p { overflow: hidden; margin-top: 0.15rem; color: var(--muted); font-size: 0.65rem; text-overflow: ellipsis; white-space: nowrap; }
.workouts-exercise-preview-session-target { display: grid; min-width: 56px; min-height: 44px; place-items: center; padding-inline: 0.55rem; border-radius: 12px; color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 58%, var(--ink)); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 11%, var(--surface)); font-size: 0.72rem; white-space: nowrap; }
.workouts-exercise-live-preview-note { display: flex; align-items: center; gap: 0.35rem; margin: 0; color: var(--muted); font-size: 0.64rem; line-height: 1.35; }
.workouts-exercise-live-preview-note span { color: var(--exercise-accent, var(--primary)); font-size: 0.5rem; }
.workouts-custom-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.workouts-custom-fields .workouts-custom-name { grid-column: 1 / -1; }
.workouts-custom-editor label,
.workouts-custom-muscles legend { color: var(--muted); font-size: 0.74rem; font-weight: 780; }
.workouts-custom-editor input:not([type="checkbox"]):not([type="file"]),
.workouts-custom-editor select,
.workouts-custom-editor textarea { width: 100%; margin-top: 0.35rem; }
.workouts-custom-editor input:not([type="checkbox"]):not([type="file"]),
.workouts-custom-editor select { min-height: 46px; }
.workouts-custom-editor textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.workouts-custom-cover-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.workouts-custom-cover-picker legend { color: var(--ink); font-size: 0.82rem; font-weight: 850; }
.workouts-custom-cover-picker > p { margin: 0.15rem 0 0.6rem; color: var(--muted); font-size: 0.7rem; line-height: 1.4; }
.workouts-custom-cover-picker > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.workouts-custom-cover-picker label { position: relative; min-width: 0; }
.workouts-custom-cover-picker input { position: absolute; opacity: 0; pointer-events: none; }
.workouts-custom-cover-picker label > span { display: grid; min-height: 64px; place-items: center; align-content: center; gap: 0.22rem; padding: 0.4rem 0.2rem; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: var(--surface); text-align: center; cursor: pointer; }
.workouts-custom-cover-picker svg { width: 21px; height: 21px; }
.workouts-custom-cover-picker b { display: grid; height: 21px; place-items: center; color: inherit; font-size: 0.72rem; line-height: 1; }
.workouts-custom-cover-picker strong { max-width: 100%; overflow: hidden; font-size: 0.67rem; text-overflow: ellipsis; white-space: nowrap; }
.workouts-custom-cover-picker input:checked + span { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent); }
.workouts-custom-cover-picker input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.workouts-image-focus-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.workouts-image-focus-picker legend { color: var(--ink); font-size: 0.82rem; font-weight: 850; }
.workouts-image-focus-picker > p { margin: 0.15rem 0 0.55rem; color: var(--muted); font-size: 0.7rem; line-height: 1.4; }
.workouts-image-focus-picker > output { display: inline-flex; min-height: 28px; margin: -0.15rem 0 0.55rem; padding: 0.3rem 0.55rem; align-items: center; border-radius: 999px; color: color-mix(in srgb, var(--media-accent, var(--primary)) 62%, var(--ink)); background: color-mix(in srgb, var(--media-accent, var(--primary)) 10%, var(--surface)); font-size: 0.62rem; font-weight: 850; }
.workouts-image-focus-picker > output[hidden] { display: none; }
.workouts-image-focal-editor { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(160px, 1fr); align-items: stretch; gap: 0.65rem; margin-bottom: 0.65rem; }
.workouts-image-focal-editor[hidden] { display: none; }
.workouts-image-focal-stage { position: relative; min-width: 0; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid color-mix(in srgb, var(--media-accent, var(--primary)) 36%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--media-accent, var(--primary)) 8%, var(--surface)); }
.workouts-image-focal-stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.workouts-image-focal-stage button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 62%, rgba(8, 18, 30, 0.2)); cursor: crosshair; touch-action: manipulation; }
.workouts-image-focal-stage button:focus-visible { outline: 3px solid var(--media-accent, var(--primary)); outline-offset: -4px; }
.workouts-image-focal-stage button::before,
.workouts-image-focal-stage button::after { content: ""; position: absolute; opacity: 0.22; background: #fff; pointer-events: none; }
.workouts-image-focal-stage button::before { top: 0; bottom: 0; left: 50%; width: 1px; }
.workouts-image-focal-stage button::after { top: 50%; right: 0; left: 0; height: 1px; }
.workouts-image-focal-stage [data-workout-gallery-focal-marker] { position: absolute; z-index: 1; left: 50%; top: 50%; width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; background: color-mix(in srgb, var(--media-accent, var(--primary)) 72%, transparent); box-shadow: 0 0 0 4px rgba(8, 18, 30, 0.26), 0 4px 14px rgba(8, 18, 30, 0.28); transform: translate(-50%, -50%); pointer-events: none; }
.workouts-image-focal-stage [data-workout-gallery-focal-marker]::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.workouts-image-focal-controls { display: grid; align-content: center; gap: 0.35rem; min-width: 0; padding: 0.55rem; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--media-accent, var(--primary)) 4%, var(--surface)); }
.workouts-image-focal-controls > p { margin: 0 0 0.15rem; color: var(--muted); font-size: 0.65rem; line-height: 1.35; }
.workouts-image-focal-controls label { display: grid; gap: 0.05rem; min-width: 0; color: var(--ink); font-size: 0.65rem; font-weight: 800; }
.workouts-image-focal-controls label > span { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.workouts-image-focal-controls label output { color: var(--media-accent, var(--primary)); font-size: 0.62rem; font-weight: 900; }
.workouts-image-focal-controls input[type="range"] { position: static; width: 100%; min-height: 44px; margin: 0; padding: 0; opacity: 1; accent-color: var(--media-accent, var(--primary)); pointer-events: auto; cursor: ew-resize; }
.workouts-image-focal-controls input[type="range"]:focus-visible { outline: 2px solid var(--media-accent, var(--primary)); outline-offset: 1px; }
.workouts-image-focal-value { justify-self: start; min-height: 28px; padding: 0.3rem 0.5rem; border-radius: 999px; color: color-mix(in srgb, var(--media-accent, var(--primary)) 65%, var(--ink)); background: color-mix(in srgb, var(--media-accent, var(--primary)) 10%, var(--surface)); font-size: 0.61rem; font-weight: 850; }
.workouts-image-focus-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; }
.workouts-image-focus-presets label { position: relative; min-width: 0; }
.workouts-image-focus-presets input { position: absolute; opacity: 0; pointer-events: none; }
.workouts-image-focus-presets label > span { display: grid; min-height: 56px; place-items: center; align-content: center; gap: 0.15rem; padding: 0.3rem 0.12rem; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--surface); text-align: center; cursor: pointer; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; }
.workouts-image-focus-presets b { font-size: 1rem; line-height: 1; }
.workouts-image-focus-presets strong { width: 100%; overflow: hidden; font-size: 0.62rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.workouts-image-focus-presets input:checked + span { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent); }
.workouts-image-focus-presets input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.workouts-custom-muscles { min-width: 0; margin: 0; padding: 0.85rem; border: 1px solid var(--line); border-radius: 14px; }
.workouts-custom-muscles legend { padding-inline: 0.3rem; }
.workouts-custom-muscles .chip-group { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.workouts-custom-muscles .chip { min-height: 44px; }
.workouts-custom-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.workouts-custom-guide-grid label { display: grid; align-content: start; }
.workouts-custom-guide-grid small,
.workouts-custom-media-control > small { display: block; margin-top: 0.15rem; color: var(--muted); font-size: 0.68rem; font-weight: 600; }
.workouts-guide-builder { display: grid; gap: 0.55rem; }
.workouts-guide-builder-section { --guide-accent: var(--primary); overflow: hidden; scroll-margin-block: 72px calc(var(--mobile-bottom-nav-height, 80px) + 16px); border: 1px solid color-mix(in srgb, var(--guide-accent) 22%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--guide-accent) 3%, var(--surface)); }
.workouts-guide-builder-section[data-guide-key="tips"] { --guide-accent: #0ea5e9; }
.workouts-guide-builder-section[data-guide-key="mistakes"] { --guide-accent: #f97316; }
.workouts-guide-builder-section[open] { border-color: color-mix(in srgb, var(--guide-accent) 48%, var(--line)); }
.workouts-guide-builder-section > summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 24px; align-items: center; gap: 0.55rem; min-height: 66px; padding: 0.55rem 0.65rem; cursor: pointer; list-style: none; }
.workouts-guide-builder-section > summary::-webkit-details-marker { display: none; }
.workouts-guide-builder-section > summary:focus-visible { outline: 2px solid var(--guide-accent); outline-offset: -3px; }
.workouts-guide-builder-section > summary > span:nth-child(2) { display: grid; min-width: 0; gap: 0.08rem; }
.workouts-guide-builder-section > summary strong { color: var(--ink); font-size: 0.8rem; }
.workouts-guide-builder-section > summary small { overflow: hidden; color: var(--muted); font-size: 0.68rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.workouts-guide-builder-section > summary em { display: grid; place-items: center; min-width: 28px; height: 28px; padding-inline: 0.35rem; border-radius: 999px; color: var(--guide-accent); background: color-mix(in srgb, var(--guide-accent) 10%, var(--surface)); font-size: 0.72rem; font-style: normal; font-weight: 850; }
.workouts-guide-builder-section > summary > b { color: var(--guide-accent); font-size: 1rem; transition: transform 0.2s ease; }
.workouts-guide-builder-section[open] > summary > b { transform: rotate(45deg); }
.workouts-guide-builder-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--guide-accent); background: color-mix(in srgb, var(--guide-accent) 11%, var(--surface)); font-size: 0.8rem; font-weight: 900; }
.workouts-guide-builder-body { display: grid; gap: 0.55rem; padding: 0.65rem; border-top: 1px solid color-mix(in srgb, var(--guide-accent) 16%, var(--line)); }
.workouts-guide-builder-items { display: grid; gap: 0.45rem; }
.workouts-guide-builder-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 0.45rem; padding: 0.45rem; border: 1px solid color-mix(in srgb, var(--guide-accent) 15%, var(--line)); border-radius: 13px; background: var(--surface); }
.workouts-guide-builder-item > span { display: grid; place-items: center; width: 28px; height: 44px; color: var(--guide-accent); font-size: 0.72rem; font-weight: 900; }
.workouts-guide-builder-item > label { min-width: 0; }
.workouts-guide-builder-item textarea { width: 100%; min-height: 44px; max-height: 120px; padding: 0.65rem 0.7rem; overflow-y: auto; resize: none; line-height: 1.35; }
.workouts-guide-builder-controls { display: grid; grid-template-columns: repeat(3, 44px); gap: 0.2rem; }
.workouts-guide-builder-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: color-mix(in srgb, var(--ink) 2%, var(--surface)); cursor: pointer; font-size: 0.9rem; }
.workouts-guide-builder-controls button:hover:not(:disabled) { color: var(--guide-accent); border-color: color-mix(in srgb, var(--guide-accent) 42%, var(--line)); }
.workouts-guide-builder-controls button:focus-visible { outline: 2px solid var(--guide-accent); outline-offset: 2px; }
.workouts-guide-builder-controls button:disabled { opacity: 0.3; cursor: default; }
.workouts-guide-builder-controls [data-guide-remove]:not(:disabled) { color: var(--danger, #dc2626); }
.workouts-guide-builder-empty { margin: 0; padding: 0.65rem; border: 1px dashed color-mix(in srgb, var(--guide-accent) 25%, var(--line)); border-radius: 12px; color: var(--muted); font-size: 0.72rem; text-align: center; }
.workouts-guide-builder-add { width: max-content; min-height: 44px; color: var(--guide-accent); }
.workouts-custom-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
/* Media step, grouped: "Appearance" (identity + cover) is a distinct decision
   from "Photos and video" (what actually gets uploaded). A small eyebrow
   label over each group replaces one long undifferentiated stack of
   disclosure widgets with two legible sub-sections. */
.workouts-custom-media-group { display: grid; gap: 0.55rem; }
.workouts-custom-media-group + .workouts-custom-media-group { padding-top: 0.35rem; border-top: 1px dashed var(--line); }
.workouts-custom-media-group-label { display: grid; gap: 0.1rem; margin: 0 0 -0.1rem; padding-inline: 0.1rem; color: var(--ink); font-size: 0.68rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; }
.workouts-custom-media-group-label span { color: var(--muted); font-size: 0.68rem; font-weight: 620; text-transform: none; letter-spacing: normal; }
.workouts-custom-media-menus { display: grid; gap: 0.55rem; }
.workouts-custom-media-details { --media-accent: var(--exercise-accent, var(--primary)); overflow: hidden; border: 1px solid color-mix(in srgb, var(--media-accent) 22%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--media-accent) 3%, var(--surface)); }
.workouts-custom-media-details[data-workout-video-details] { --media-accent: #8b5cf6; }
.workouts-custom-media-details > summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 24px; align-items: center; gap: 0.55rem; min-height: 68px; padding: 0.55rem 0.65rem; cursor: pointer; list-style: none; }
.workouts-custom-media-details > summary::-webkit-details-marker { display: none; }
.workouts-custom-media-details > summary > span:first-child { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: color-mix(in srgb, var(--media-accent) 45%, var(--ink)); background: color-mix(in srgb, var(--media-accent) 11%, var(--surface)); }
.workouts-custom-media-details > summary > span:first-child svg { width: 20px; height: 20px; }
.workouts-custom-media-play { padding-left: 2px; font-size: 0.82rem; line-height: 1; }
.workouts-custom-media-details > summary > span:nth-child(2) { display: grid; min-width: 0; gap: 0.08rem; }
.workouts-custom-media-details > summary strong { color: var(--ink); font-size: 0.78rem; }
.workouts-custom-media-details > summary small { overflow: hidden; color: var(--muted); font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
.workouts-custom-media-details > summary em { display: inline-flex; align-items: center; min-height: 28px; padding: 0.25rem 0.46rem; border-radius: 999px; color: var(--muted); background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: 0.61rem; font-style: normal; font-weight: 820; white-space: nowrap; }
.workouts-custom-media-details.has-media > summary em { color: color-mix(in srgb, var(--media-accent) 45%, var(--ink)); background: color-mix(in srgb, var(--media-accent) 12%, var(--surface)); }
.workouts-custom-media-details > summary > b { color: var(--muted); font-size: 1.2rem; text-align: center; transition: transform 160ms ease; }
.workouts-custom-media-details[open] > summary > b { transform: rotate(45deg); }
.workouts-custom-media-details-body { display: grid; gap: 0.75rem; padding: 0.75rem; border-top: 1px solid color-mix(in srgb, var(--media-accent) 16%, var(--line)); }
.workouts-custom-media-details-body > .workouts-custom-media-control { padding: 0; border: 0; }
.workouts-custom-media-details-body > .workouts-custom-preview { grid-template-columns: 1fr; }
.workouts-gallery-editor-body { gap: 0.65rem; }
.workouts-gallery-upload { position: relative; }
.workouts-gallery-upload > label { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 0.55rem; min-height: 62px; padding: 0.55rem 0.65rem; border: 1px dashed color-mix(in srgb, var(--media-accent, var(--primary)) 42%, var(--line)); border-radius: 14px; color: color-mix(in srgb, var(--media-accent, var(--primary)) 54%, var(--ink)); background: color-mix(in srgb, var(--media-accent, var(--primary)) 6%, var(--surface)); cursor: pointer; }
.workouts-gallery-upload > label > span { display: grid; grid-row: 1 / span 2; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #fff; background: var(--media-accent, var(--primary)); font-size: 1.2rem; font-weight: 700; }
.workouts-gallery-upload > label strong { align-self: end; color: var(--ink); font-size: 0.76rem; }
.workouts-gallery-upload > label small { align-self: start; color: var(--muted); font-size: 0.64rem; font-weight: 600; line-height: 1.3; }
.workouts-gallery-upload:focus-within > label { outline: 2px solid var(--media-accent, var(--primary)); outline-offset: 2px; }
.workouts-gallery-upload input[type="file"] { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0; cursor: pointer; }
.workouts-gallery-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.workouts-gallery-item { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color 160ms ease, box-shadow 160ms ease; }
.workouts-gallery-item.is-cover { border-color: color-mix(in srgb, var(--media-accent, var(--primary)) 60%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--media-accent, var(--primary)) 20%, transparent); }
.workouts-gallery-item.is-editing { outline: 2px solid color-mix(in srgb, var(--media-accent, var(--primary)) 72%, transparent); outline-offset: -2px; }
.workouts-gallery-item figure { position: relative; aspect-ratio: 16 / 10; margin: 0; overflow: hidden; background: color-mix(in srgb, var(--media-accent, var(--primary)) 8%, var(--surface)); }
.workouts-gallery-item figure::after { content: attr(data-photo-number); position: absolute; right: 0.4rem; bottom: 0.4rem; display: grid; min-width: 25px; height: 25px; place-items: center; border-radius: 999px; color: #fff; background: rgba(8, 18, 30, 0.7); font-size: 0.58rem; font-weight: 900; }
.workouts-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.workouts-gallery-item-meta { display: grid; gap: 0.4rem; padding: 0.45rem; }
.workouts-gallery-caption { display: grid; gap: 0.22rem; min-width: 0; color: var(--muted); font-size: 0.61rem; font-weight: 780; }
.workouts-gallery-caption input { width: 100%; min-width: 0; min-height: 44px; padding: 0.5rem 0.6rem; border-radius: 10px; font-size: 0.7rem; }
.workouts-gallery-cover-control { position: relative; }
.workouts-gallery-cover-control input { position: absolute; opacity: 0; pointer-events: none; }
.workouts-gallery-cover-control > span { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.4rem; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: color-mix(in srgb, var(--ink) 2%, var(--surface)); cursor: pointer; font-size: 0.64rem; }
.workouts-gallery-cover-control input:checked + span { color: color-mix(in srgb, var(--media-accent, var(--primary)) 60%, var(--ink)); border-color: color-mix(in srgb, var(--media-accent, var(--primary)) 52%, var(--line)); background: color-mix(in srgb, var(--media-accent, var(--primary)) 10%, var(--surface)); }
.workouts-gallery-cover-control input:focus-visible + span { outline: 2px solid var(--media-accent, var(--primary)); outline-offset: 2px; }
.workouts-gallery-cover-control b { font-size: 0.72rem; }
.workouts-gallery-item-controls { display: grid; grid-template-columns: repeat(4, 44px); justify-content: end; gap: 0.22rem; }
.workouts-gallery-item-controls button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: color-mix(in srgb, var(--ink) 2%, var(--surface)); cursor: pointer; }
.workouts-gallery-item-controls button:hover:not(:disabled) { color: var(--media-accent, var(--primary)); border-color: color-mix(in srgb, var(--media-accent, var(--primary)) 45%, var(--line)); }
.workouts-gallery-item-controls [data-workout-gallery-focus][aria-pressed="true"] { color: color-mix(in srgb, var(--media-accent, var(--primary)) 72%, var(--ink)); border-color: var(--media-accent, var(--primary)); background: color-mix(in srgb, var(--media-accent, var(--primary)) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--media-accent, var(--primary)) 20%, transparent); }
.workouts-gallery-item-controls [data-workout-gallery-focus][aria-pressed="true"] > span { color: inherit; opacity: 1; }
.workouts-gallery-focus-copy { display: none; }
.workouts-gallery-item-controls button:focus-visible { outline: 2px solid var(--media-accent, var(--primary)); outline-offset: 2px; }
.workouts-gallery-item-controls button:disabled { opacity: 0.3; cursor: default; }
.workouts-gallery-item-controls [data-workout-gallery-remove] { color: var(--danger, #dc2626); }
.workouts-gallery-empty { margin: 0; padding: 0.75rem; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); font-size: 0.68rem; line-height: 1.4; text-align: center; }
.workouts-custom-media-control { display: grid; align-content: start; gap: 0.4rem; min-width: 0; padding: 0.85rem; border: 1px solid var(--line); border-radius: 14px; }
.workouts-custom-media-control input[type="file"] { display: block; width: 100%; min-height: 44px; margin-top: 0.45rem; }
.workouts-custom-media-control input[type="url"] { min-height: 44px; }
.workouts-custom-media-control .check { display: flex; align-items: center; min-height: 44px; gap: 0.45rem; color: var(--ink); }
.workouts-custom-media-control .btn { justify-self: start; min-height: 44px; }
.workouts-custom-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.workouts-custom-preview figure,
.workouts-custom-preview-empty,
.workouts-custom-video-preview { aspect-ratio: 16 / 9; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.workouts-custom-preview figure[hidden],
.workouts-custom-preview-empty[hidden] { display: none; }
.workouts-custom-preview img,
.workouts-custom-video-preview iframe,
.workouts-custom-video-preview video { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.workouts-custom-video-preview:not(:empty) { background: #0b1220; }
.workouts-custom-preview-empty,
.workouts-custom-video-preview:empty { display: grid; place-items: center; align-content: center; gap: 0.35rem; color: var(--muted); font-size: 0.72rem; text-align: center; }
.workouts-custom-video-preview:empty::before { content: attr(data-empty-label); font-weight: 800; }
.workouts-custom-preview-empty span { color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 45%, var(--ink)); font-size: 1.7rem; }
.workouts-custom-video-preview a { display: grid; width: 100%; height: 100%; place-items: center; padding: 1rem; color: var(--primary); font-size: 0.78rem; font-weight: 800; text-align: center; }
.workouts-custom-savebar { display: flex; justify-content: flex-end; gap: 0.5rem; padding-block: 0.25rem; }
.workouts-custom-savebar .btn { min-width: 128px; min-height: 44px; }
.workouts-custom-danger { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.8rem; padding: 1rem; border-color: color-mix(in srgb, var(--danger, #dc2626) 34%, var(--line)); }
.workouts-custom-danger div { display: grid; gap: 0.18rem; }
.workouts-custom-danger small { color: var(--muted); font-size: 0.72rem; }
.workouts-exercise-add-form { display: flex; align-items: end; justify-content: flex-end; gap: 0.5rem; }
.workouts-exercise-add-form label { min-width: 95px; }
.workouts-exercise-add-form select,
.workouts-exercise-add-form input { min-height: 42px; }
.workouts-exercise-info p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.74rem; line-height: 1.4; }
.workouts-session-guide { margin-top: 0.5rem; padding: 0.55rem 0.65rem; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.workouts-session-guide summary { color: var(--primary); font-size: 0.76rem; font-weight: 850; cursor: pointer; }
.workouts-session-guide ol { margin: 0.55rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.76rem; line-height: 1.5; }
.workouts-session-guide p { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.74rem; }
.workouts-session-technique { margin: 0 0 0.55rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 24%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 4%, var(--surface)); }
.workouts-session-technique > summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: center; gap: 0.55rem; min-height: 60px; padding: 0.5rem 0.65rem; cursor: pointer; list-style: none; }
.workouts-session-technique > summary::-webkit-details-marker { display: none; }
.workouts-session-technique-icon { display: grid; width: 40px; height: 40px; padding-left: 2px; place-items: center; border-radius: 12px; color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 50%, var(--ink)); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 13%, var(--surface)); font-size: 0.72rem; }
.workouts-session-technique-icon svg { width: 20px; height: 20px; }
.workouts-session-technique > summary > span:nth-child(2) { display: grid; min-width: 0; gap: 0.08rem; }
.workouts-session-technique > summary strong { color: var(--ink); font-size: 0.76rem; }
.workouts-session-technique > summary small { overflow: hidden; color: var(--muted); font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
.workouts-session-technique > summary > b { color: var(--muted); font-size: 1.2rem; font-weight: 500; text-align: center; transition: transform 160ms ease; }
.workouts-session-technique[open] > summary > b { transform: rotate(45deg); }
.workouts-session-technique-body { padding: 0.65rem; border-top: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 18%, var(--line)); }
.workouts-exercise-media-viewer.is-compact { gap: 0.5rem; }
.workouts-exercise-media-viewer.is-compact .workouts-media-tabs { border-radius: 12px; }
.workouts-exercise-media-viewer.is-compact .workouts-media-stage { border-radius: 12px; }

@media (min-width: 1180px) {
    .workouts-week-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .workouts-library-grid,
    .workouts-body-rank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workouts-rank-columns,
    .workouts-guide-layout { grid-template-columns: 1fr; }
    .workouts-custom-guide-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    body.mobile-immersive-mode { --mobile-bottom-nav-height: 0px; --mobile-nav-height: 0px; }
    body.mobile-immersive-mode .bottom-nav,
    body.mobile-immersive-mode .floating-log { display: none !important; }
    .workouts-session-exercise-nav { display: grid; gap: 0.45rem; margin-bottom: 0.7rem; padding: 0.55rem; border: 1px solid color-mix(in srgb, var(--exercise-accent, var(--primary)) 24%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 5%, var(--surface)); }
    .workouts-session-exercise-nav-main { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 0.45rem; }
    .workouts-session-exercise-nav-main > a,
    .workouts-session-exercise-nav-main > span { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--surface); font-size: 1.1rem; font-weight: 800; text-decoration: none; }
    .workouts-session-exercise-nav-main > span { opacity: 0.32; }
    .workouts-session-exercise-nav-current { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.55rem; min-width: 0; }
    .workouts-session-exercise-nav-current .workouts-exercise-cover { width: 40px; height: 40px; flex-basis: 40px; border-radius: 11px; }
    .workouts-session-exercise-nav-current > div { display: grid; min-width: 0; gap: 0.02rem; }
    .workouts-session-exercise-nav-current small,
    .workouts-session-exercise-nav-current span { overflow: hidden; color: var(--muted); font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; }
    .workouts-session-exercise-nav-current strong { overflow: hidden; font-size: 0.84rem; text-overflow: ellipsis; white-space: nowrap; }
    .workouts-session-exercise-rail { display: flex; justify-content: center; gap: 0.25rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .workouts-session-exercise-rail::-webkit-scrollbar { display: none; }
    .workouts-session-exercise-rail a { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; color: var(--muted); background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: 0.7rem; font-weight: 900; text-decoration: none; }
    .workouts-session-exercise-rail a.is-complete { color: color-mix(in srgb, var(--exercise-accent, var(--primary)) 45%, var(--ink)); background: color-mix(in srgb, var(--exercise-accent, var(--primary)) 11%, var(--surface)); }
    .workouts-session-exercise-rail a.is-active { color: #fff; background: var(--exercise-accent, var(--primary)); box-shadow: 0 3px 10px color-mix(in srgb, var(--exercise-accent, var(--primary)) 28%, transparent); }
    .workouts-session-exercise:not(.is-active) { display: none; }
    .workouts-session-next-exercise { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; min-height: 60px; margin-top: 0.65rem; padding: 0.55rem 0.65rem; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)); border-radius: 13px; color: inherit; background: color-mix(in srgb, var(--primary) 6%, var(--surface)); text-decoration: none; }
    .workouts-session-next-exercise > span { display: grid; min-width: 0; gap: 0.05rem; }
    .workouts-session-next-exercise small { color: var(--primary); font-size: 0.66rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.04em; }
    .workouts-session-next-exercise strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .workouts-session-next-exercise b { color: var(--primary); font-size: 1.15rem; }
    .workouts-section-intro,
    .workouts-exercise-add-panel { align-items: stretch; flex-direction: column; }
    .workouts-week-grid,
    .workouts-preset-grid,
    .workouts-library-grid,
    .workouts-body-rank-grid { grid-template-columns: 1fr; }
    .workouts-library-grid.is-compact { grid-template-columns: 1fr; gap: 0.5rem; }
    .workouts-library-layout-switch { display: grid; grid-template-columns: 1fr; padding: 0.55rem; }
    .workouts-library-layout-copy { padding-inline: 0.15rem; }
    .workouts-library-layout-copy small { white-space: normal; }
    .workouts-library-layout-options { display: flex; width: 100%; }
    .workouts-library-layout-options button { flex: 1; min-width: 0; }
    .workouts-library-filters { grid-template-columns: 1fr; }
    .workouts-library-filters .btn { width: 100%; }
    .workouts-library-actions { display: grid; grid-template-columns: 1fr; }
    .workouts-library-actions .btn { width: 100%; padding-inline: 0.5rem; }
    .workouts-library-head.is-organizing { gap: 0; padding: 0.75rem; border-radius: 16px; }
    .workouts-library-head.is-organizing .panel-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; }
    .workouts-library-head.is-organizing .panel-head h2 { font-size: 1rem; }
    .workouts-library-head.is-organizing .panel-head .muted { margin-top: 0.12rem; font-size: 0.72rem; line-height: 1.3; }
    .workouts-library-head.is-organizing .workouts-library-actions { display: block; width: auto; }
    .workouts-library-head.is-organizing .workouts-library-actions .btn { width: auto; min-width: 72px; padding-inline: 0.75rem; }
    .workouts-library-target { min-height: 64px; padding: 0.55rem; }
    .workouts-library-target-icon { flex-basis: 42px; width: 42px; height: 42px; border-radius: 12px; }
    .workouts-library-target .btn { min-height: 44px; padding-inline: 0.7rem; }
    .workouts-library-scope-tabs a { flex-direction: column; gap: 0.1rem; padding-inline: 0.2rem; font-size: 0.66rem; line-height: 1.1; }
    .workouts-library-scope-tabs a strong { height: 20px; }
    .workouts-muscle-filters { flex-wrap: nowrap; margin-inline: calc(var(--page-pad, 1rem) * -1); padding-inline: var(--page-pad, 1rem); overflow-x: auto; scrollbar-width: none; }
    .workouts-muscle-filters::-webkit-scrollbar { display: none; }
    .workouts-muscle-filters a { flex: 0 0 auto; }
    .workouts-library-card-foot { align-items: stretch; flex-direction: column; }
    .workouts-library-card-actions { justify-content: space-between; }
    .workouts-library-grid.is-compact .workouts-library-card {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        gap: 0.4rem 0.55rem;
        padding: 0.6rem;
    }
    .workouts-library-grid.is-compact .workouts-library-media { width: 64px; height: 72px; border-radius: 11px; }
    .workouts-library-grid.is-compact .workouts-library-copy h3 { font-size: 0.88rem; }
    .workouts-library-grid.is-compact .workouts-library-copy p { -webkit-line-clamp: 1; line-clamp: 1; font-size: 0.66rem; }
    .workouts-library-grid.is-compact .workouts-library-card-foot { align-items: center; flex-direction: row; }
    .workouts-library-grid.is-compact .workouts-library-card-foot .inline-actions { flex-wrap: wrap; }
    .workouts-library-grid.is-compact .workouts-library-add { min-width: 145px; }
    .workouts-guide-media { padding: 0.55rem; border-radius: 16px; }
    .workouts-media-viewer-head { padding: 0.1rem 0.1rem 0; }
    .workouts-media-viewer-head h2 { font-size: 0.92rem; }
    .workouts-media-viewer-head p:not(.eyebrow) { font-size: 0.68rem; }
    .workouts-media-tabs button { min-height: 46px; padding-inline: 0.45rem; }
    .workouts-session-technique-body { padding: 0.5rem; }
    .workouts-exercise-media-viewer.is-compact .workouts-media-tabs button { min-height: 44px; }
    .workouts-custom-step-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
    .workouts-custom-step-nav button { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-content: center; gap: 0.3rem; min-width: 0; min-height: 48px; padding: 0.35rem 0.45rem; border: 0; border-radius: 11px; color: var(--muted); background: transparent; cursor: pointer; }
    .workouts-custom-step-nav button > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: 0.64rem; font-weight: 900; }
    .workouts-custom-step-nav button > strong { min-width: 0; overflow: hidden; font-size: 0.67rem; text-overflow: ellipsis; white-space: nowrap; }
    .workouts-custom-step-nav button[aria-pressed="true"] { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); box-shadow: 0 1px 0 color-mix(in srgb, var(--primary) 22%, transparent); }
    .workouts-custom-step-nav button[aria-pressed="true"] > span { color: #fff; background: var(--primary); }
    .workouts-custom-draft { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "icon copy" "actions actions"; gap: 0.45rem 0.6rem; padding: 0.55rem; scroll-margin-block-start: calc(4.75rem + env(safe-area-inset-top)); }
    .workouts-custom-draft-icon { grid-area: icon; width: 32px; height: 32px; }
    .workouts-custom-draft-copy { grid-area: copy; }
    .workouts-custom-draft-actions { grid-area: actions; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workouts-custom-draft-actions[hidden] { display: none; }
    .workouts-custom-draft-actions .btn { width: 100%; min-width: 0; }
    .workouts-exercise-live-preview { border-radius: 16px; }
    .workouts-exercise-live-preview-head { grid-template-columns: 38px minmax(0, 1fr) auto 22px; min-height: 64px; gap: 0.5rem; padding: 0.5rem 0.6rem; }
    .workouts-exercise-live-preview-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 0.8rem; }
    .workouts-exercise-live-preview-head > em { max-width: 82px; }
    .workouts-exercise-live-preview-body { padding: 0.6rem; }
    .workouts-exercise-live-preview-tabs { grid-template-columns: repeat(2, minmax(70px, 1fr)); width: 100%; }
    .workouts-exercise-preview-card { grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); min-height: 142px; }
    .workouts-exercise-preview-copy { gap: 0.38rem 0.45rem; padding: 0.55rem; }
    .workouts-exercise-preview-copy .workouts-muscle-token { width: 34px; min-width: 34px; height: 34px; border-radius: 10px; font-size: 0.62rem; }
    .workouts-exercise-preview-copy h4 { font-size: 0.8rem; }
    .workouts-exercise-preview-copy p { font-size: 0.62rem; }
    .workouts-exercise-preview-tags { flex-wrap: nowrap; overflow: hidden; }
    .workouts-exercise-preview-tags span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .workouts-exercise-preview-tags span:nth-child(3) { display: none; }
    .workouts-exercise-preview-tags .is-target { flex: 0 0 auto; }
    .workouts-exercise-preview-session { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 0.55rem; }
    .workouts-exercise-preview-session-cover { width: 52px; height: 52px; min-height: 52px; border-radius: 13px; }
    .workouts-exercise-preview-session-target { min-width: 50px; padding-inline: 0.42rem; }
    .workouts-image-focal-editor { grid-template-columns: 1fr; }
    .workouts-image-focal-stage { aspect-ratio: 16 / 9; }
    .workouts-image-focal-controls { padding: 0.5rem 0.6rem; }
    .workouts-gallery-list { grid-template-columns: 1fr; }
    .workouts-gallery-item { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: stretch; }
    .workouts-gallery-item figure { width: 68px; height: 100%; min-height: 168px; max-height: none; align-self: stretch; aspect-ratio: auto; }
    .workouts-gallery-item figure img { height: 100%; }
    .workouts-gallery-item-meta { align-content: center; }
    .workouts-gallery-item-controls { justify-content: stretch; grid-template-columns: minmax(49px, 1fr) repeat(3, 44px); gap: 0.1rem; }
    .workouts-gallery-item-controls button { width: 100%; }
    .workouts-gallery-item-controls [data-workout-gallery-focus] { display: flex; gap: 0.2rem; min-width: 0; font-size: 0.52rem; font-weight: 850; }
    .workouts-gallery-focus-copy { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .workouts-custom-section { padding: 0.85rem; }
    .workouts-custom-fields,
    .workouts-custom-media-grid,
    .workouts-custom-preview { grid-template-columns: 1fr; }
    .workouts-custom-defaults-grid { grid-template-columns: 1fr; }
    .workouts-custom-default-notes { grid-column: auto; }
    .workouts-guide-builder-section > summary { min-height: 64px; }
    .workouts-guide-builder-section > summary small { display: -webkit-box; overflow: hidden; text-overflow: initial; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .workouts-guide-builder-item { grid-template-columns: 28px minmax(0, 1fr); }
    .workouts-guide-builder-controls { grid-column: 2; width: 100%; grid-template-columns: repeat(3, minmax(44px, 1fr)); }
    .workouts-guide-builder-controls button { width: 100%; }
    .workouts-guide-builder-add { width: 100%; }
    .workouts-custom-preview-empty,
    .workouts-custom-video-preview:empty { min-height: 96px; aspect-ratio: auto; }
    .workouts-custom-fields .workouts-custom-name { grid-column: auto; }
    .workouts-custom-savebar { position: sticky; z-index: 8; bottom: calc(var(--mobile-nav-height, 72px) + 0.45rem); padding: 0.5rem; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--surface) 91%, transparent); box-shadow: 0 12px 28px rgba(8, 18, 30, 0.15); backdrop-filter: blur(16px); }
    .workouts-custom-savebar .btn { flex: 1; min-width: 0; }
    .workouts-custom-danger { align-items: stretch; flex-direction: column; }
    .workouts-custom-danger .btn { width: 100%; }
    .workouts-library-add { justify-content: stretch; }
    .workouts-library-add label,
    .workouts-library-add select { flex: 1; width: 100%; }
    .workouts-library-add.is-contextual .btn { width: 100%; min-height: 44px; }
    .workouts-library-grid.is-contextual .workouts-library-card {
        grid-template-columns: 68px minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "media copy status"
            "media tags status"
            "foot foot foot";
        gap: 0.45rem 0.6rem;
        padding: 0.65rem;
        border-radius: 15px;
        box-shadow: none;
        background: var(--surface);
    }
    .workouts-library-grid.is-contextual .workouts-library-media { grid-area: media; width: 68px; height: 68px; border-radius: 12px; }
    .workouts-library-grid.is-contextual .workouts-library-card-head { grid-area: status; align-self: start; }
    .workouts-library-grid.is-contextual .workouts-library-card-head > .workouts-muscle-token { display: none; }
    .workouts-library-grid.is-contextual .workouts-library-card-status { align-items: flex-end; flex-direction: column; }
    .workouts-library-grid.is-contextual .workouts-library-copy { grid-area: copy; align-self: end; }
    .workouts-library-grid.is-contextual .workouts-library-copy h3 { font-size: 0.9rem; line-height: 1.2; }
    .workouts-library-grid.is-contextual .workouts-library-copy p { display: none; }
    .workouts-library-grid.is-contextual .workouts-exercise-tags { grid-area: tags; align-self: start; flex-wrap: nowrap; overflow: hidden; }
    .workouts-library-grid.is-contextual .workouts-exercise-tags span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .workouts-library-grid.is-contextual .workouts-exercise-tags span:nth-child(3) { display: none; }
    .workouts-library-grid.is-contextual .workouts-library-card-foot { grid-area: foot; align-items: center; flex-direction: row; }
    .workouts-library-grid.is-contextual .workouts-library-card-foot .inline-actions { flex: 0 0 auto; }
    .workouts-library-grid.is-contextual .workouts-library-card-foot .inline-actions .btn { min-height: 44px; }
    .workouts-library-grid.is-contextual .workouts-library-add.is-contextual { flex: 1; }
    .workouts-routine-settings-shell { gap: 0.65rem; }
    .workouts-routine-settings-aside { gap: 0.6rem; padding: 0.68rem; border-radius: 18px; }
    .workouts-routine-settings-summary { grid-template-columns: 42px minmax(0, 1fr); min-height: 46px; }
    .workouts-routine-settings-summary .workouts-routine-summary-icon { width: 42px; height: 42px; }
    .workouts-routine-settings-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.42rem; }
    .workouts-routine-settings-nav > a { position: relative; grid-template-columns: 36px minmax(0, 1fr); align-content: center; gap: 0.45rem; min-height: 84px; padding: 0.5rem; border-color: color-mix(in srgb, var(--routine-accent, var(--primary)) 17%, var(--line)); }
    .workouts-routine-settings-nav > a[aria-current="page"] { box-shadow: inset 0 3px 0 var(--routine-accent, var(--primary)); }
    .workouts-routine-settings-nav > a > span:first-child { align-self: start; width: 36px; height: 36px; border-radius: 11px; }
    .workouts-routine-settings-nav svg { width: 18px; height: 18px; }
    .workouts-routine-settings-nav strong { font-size: 0.75rem; line-height: 1.18; }
    .workouts-routine-settings-nav small { font-size: 0.61rem; }
    .workouts-routine-settings-nav b { display: none; }
    .workouts-routine-settings-done { min-height: 44px; }
    .workouts-routine-settings-content .workouts-routine-editor { padding: 0.82rem; border-radius: 18px; }
    .workouts-routine-settings-content .workouts-routine-form > .inline-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workouts-routine-settings-content .workouts-routine-form > .inline-actions .btn { width: 100%; min-width: 0; }
    .workouts-routine-settings-content .workouts-day-picker > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.42rem; }
    .workouts-routine-settings-content .workouts-day-picker label:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .workouts-routine-settings-content .workouts-day-picker span { min-height: 48px; font-size: 0.72rem; }
    .workouts-routine-summary { gap: 0.75rem; padding: 0.85rem; }
    .workouts-routine-summary-cover { height: 138px; border-radius: 14px; }
    .workouts-routine-summary-main { align-items: flex-start; }
    .workouts-routine-summary-icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 13px; }
    .workouts-routine-summary-actions { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    .workouts-routine-summary-actions .btn { width: 100%; min-width: 0; min-height: 44px; padding-inline: 0.55rem; }
    .workouts-routine-summary-actions > :last-child:nth-child(3) { grid-column: 1 / -1; }
    .workouts-routine-card-cover { height: 112px; }
    .workouts-routine-media-settings { padding: 0.75rem; }
    .workouts-session-panel-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.45rem; }
    .workouts-session-routine-cover { flex-basis: 42px; width: 42px; height: 42px; border-radius: 12px; }
    .workouts-rest-timer {
        grid-template-columns: 58px minmax(0, 1fr) 48px;
        grid-template-areas:
            "clock copy toggle"
            "actions actions actions";
        gap: 0.5rem;
        padding: 0.6rem;
    }
    .workouts-rest-timer-clock { width: 56px; height: 56px; }
    .workouts-rest-timer-clock::before { width: 44px; height: 44px; }
    .workouts-rest-timer-copy small { white-space: normal; line-height: 1.25; }
    .workouts-rest-timer-toggle { width: 48px; min-width: 48px; padding: 0; }
    .workouts-rest-timer-toggle [data-rest-timer-toggle-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .workouts-rest-timer-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .workouts-rest-timer-actions .btn { width: 100%; min-width: 0; }
    .workouts-routine-exercises-panel .panel-head { align-items: stretch; flex-direction: column; }
    .workouts-routine-exercises-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .workouts-routine-exercises-panel .panel-head form,
    .workouts-routine-exercises-panel .panel-head .btn { width: 100%; }
    .workouts-routine-organizer { gap: 0.75rem; padding: 0.85rem; }
    .workouts-routine-library-organizer { gap: 0.75rem; padding: 0.85rem; }
    .workouts-routine-library-groups { grid-template-columns: 1fr; gap: 0.65rem; }
    .workouts-routine-order-group { gap: 0.6rem; padding: 0.6rem; border-radius: 15px; }
    .workouts-routine-order-group > header { gap: 0.55rem; }
    .workouts-routine-order-save { position: sticky; z-index: 3; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); padding-top: 0.4rem; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 96%, transparent) 28%); }
    .workouts-routine-order-save .btn { width: 100%; box-shadow: 0 9px 22px color-mix(in srgb, var(--primary) 22%, transparent); }
    .workouts-routine-organizer-item { grid-template-columns: 28px 44px minmax(0, 1fr) auto; gap: 0.5rem; min-height: 68px; padding: 0.45rem; border-radius: 13px; }
    .workouts-routine-organizer-controls { gap: 0.2rem; }
    .workouts-routine-organizer-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workouts-routine-organizer-actions .btn { width: 100%; min-width: 0; }
    .workouts-session-organizer-item { grid-template-columns: 28px 44px minmax(0, 1fr); }
    .workouts-session-organizer-controls { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(3, 44px); justify-content: end; width: 100%; }
    .workouts-exercise-row { min-height: 60px; padding: 0.55rem; }
    .workouts-exercise-row .btn-icon { width: 44px; min-width: 44px; min-height: 44px; }
    .workouts-routine-empty { align-items: flex-start; flex-wrap: wrap; }
    .workouts-routine-empty .btn { width: 100%; min-height: 44px; }
    .workouts-routine-danger { align-items: stretch; flex-direction: column; }
    .workouts-routine-danger .inline-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workouts-routine-danger form,
    .workouts-routine-danger .btn { width: 100%; }
    .workouts-routine-exercise-editor { padding: 0.85rem; }
    .workouts-routine-exercise-editor-head { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .workouts-routine-exercise-editor-head > .btn { grid-column: 1 / -1; width: 100%; min-height: 44px; }
    .workouts-exercise-appearance { grid-template-columns: 64px minmax(0, 1fr); gap: 0.65rem; padding: 0.65rem; }
    .workouts-exercise-appearance-preview { width: 64px; height: 54px; }
    .workouts-exercise-appearance > .btn,
    .workouts-exercise-appearance > form { grid-column: 1 / -1; width: 100%; }
    .workouts-exercise-appearance > form .btn { width: 100%; min-height: 44px; }
    .workouts-target-grid,
    .workouts-target-grid.is-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workouts-target-notes { grid-column: 1 / -1; }
    .workouts-target-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workouts-target-actions .btn { width: 100%; min-width: 0; min-height: 44px; }
    .workouts-routine-exercise-danger { align-items: stretch; flex-direction: column; }
    .workouts-routine-exercise-danger form,
    .workouts-routine-exercise-danger .btn { width: 100%; }
    .workouts-rank-hero { grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem; padding: 0.85rem; }
    .workouts-rank-emblem { width: 82px; }
    .workouts-rank-emblem strong { font-size: 1.2rem; }
    .workouts-rank-hero small { display: none; }
    .workouts-exercise-hero { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .workouts-exercise-hero-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .workouts-exercise-hero-actions .btn { width: 100%; }
    .workouts-exercise-hero-actions > :only-child { grid-column: 1 / -1; }
    .workouts-exercise-hero-icon { width: 54px; border-radius: 16px; }
    .workouts-exercise-rank-card { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; align-items: center; justify-items: start; width: 100%; padding-top: 0.6rem; border-top: 1px solid var(--line); }
    .workouts-exercise-rank-card > strong { justify-self: end; font-size: 1.2rem; }
    .workouts-exercise-rank-card > small { justify-self: end; }
    .workouts-exercise-rank-card .workouts-rank-progress { grid-column: 1 / -1; }
    .workouts-exercise-add-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .workouts-exercise-add-form label:first-of-type,
    .workouts-exercise-add-form .btn { grid-column: 1 / -1; }
    .workouts-exercise-add-form .btn { width: 100%; }
    .workouts-exercise-add-form.is-contextual { grid-template-columns: 1fr; }
    .workouts-exercise-add-form.is-contextual strong { text-align: center; }
    .workouts-day-picker > div { gap: 0.22rem; }
    .workouts-day-picker span { min-height: 42px; padding-inline: 0.15rem; font-size: 0.65rem; }
}
@media (max-width: 360px) {
    .workouts-rank-emblem { width: 72px; }
    .workouts-rank-hero h2 { font-size: 1rem; }
    .workouts-rank-notice { align-items: flex-start; flex-wrap: wrap; }
    .workouts-rank-notice a { margin-left: 1.65rem; }
    .workouts-body-rank-card .workouts-rank-badge { display: none; }
}

body[data-theme="dark"] .workouts-library-card,
body[data-theme="dark"] .workouts-day-card,
body[data-theme="dark"] .workouts-rank-hero,
body.theme-active-dark .workouts-library-card,
body.theme-active-dark .workouts-day-card,
body.theme-active-dark .workouts-rank-hero { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24); }
@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .workouts-library-card,
    body[data-theme="auto"] .workouts-day-card,
    body[data-theme="auto"] .workouts-rank-hero { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24); }
}

/* ===========================================================================
   Product-wide refinement: shared navigation, settings sections and overlays
   ========================================================================== */
.context-back-nav {
    display: flex;
    margin-bottom: -0.35rem;
}
.context-back-btn { min-height: 44px; }

.user-profile-link,
.user-inline-link,
.squad-member-profile {
    color: inherit;
    text-decoration: none;
}
.user-profile-link:focus-visible,
.user-inline-link:focus-visible,
.squad-member-profile:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 8px;
}
.user-inline-link:hover,
.squad-member-profile:hover { color: var(--primary); }

.settings-index-screen,
.settings-page[data-settings-section] {
    width: min(900px, 100%);
    margin-inline: auto;
}
.settings-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}
.settings-nav-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    min-height: 88px;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.settings-nav-item:hover,
.settings-nav-item:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
    outline: none;
}

@media (min-width: 701px) and (max-width: 899px) {
    .settings-nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.settings-nav-item[data-tone="blue"] { --settings-tone: #3b82f6; }
.settings-nav-item[data-tone="amber"] { --settings-tone: #f59e0b; }
.settings-nav-item[data-tone="violet"] { --settings-tone: #8b5cf6; }
.settings-nav-item[data-tone="green"] { --settings-tone: #10b981; }
.settings-nav-item[data-tone="cyan"] { --settings-tone: #0891b2; }
.settings-nav-item[data-tone="red"] { --settings-tone: #ef4444; }
.settings-nav-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.settings-nav-icon svg { width: 23px; height: 23px; }
.settings-nav-copy { display: grid; gap: 0.2rem; min-width: 0; }
.settings-nav-copy strong { font-size: 1rem; }
.settings-nav-copy small { color: var(--muted); line-height: 1.35; }
.settings-nav-arrow { color: var(--muted); font-size: 1.6rem; }
.settings-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.settings-section-head h1 { margin-bottom: 0.25rem; }
.settings-section-head > div { min-width: 0; }
.settings-compact-header { padding-block: 0.2rem 0.4rem; }
.settings-dirty-form.has-unsaved-changes {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary) 70%, transparent);
    padding-left: 0.75rem;
}

.settings-preferences-card,
.settings-telegram-card {
    display: grid;
    gap: 0.8rem;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.settings-preference-group {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
    margin: 0;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ink) 2.5%, var(--surface));
}
fieldset.settings-preference-group { min-inline-size: 0; }
.settings-preference-group > legend {
    max-width: 100%;
    padding-inline: 0.25rem;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 850;
}
.settings-preference-group > p { margin: 0; }
.settings-group-head,
.settings-integration-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}
.settings-group-head { grid-template-columns: 44px minmax(0, 1fr); }
.settings-group-head h2,
.settings-group-head p,
.settings-integration-head h2,
.settings-integration-head p { margin: 0; }
.settings-group-icon,
.settings-integration-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 11%, var(--surface));
}
.settings-group-icon svg,
.settings-integration-icon svg { width: 22px; height: 22px; }
.settings-integration-status {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    color: var(--muted);
    background: color-mix(in srgb, var(--muted) 10%, transparent);
    font-size: 0.68rem;
    font-weight: 850;
    white-space: nowrap;
}
.settings-integration-status.is-linked { color: #087f5b; background: color-mix(in srgb, #10b981 14%, transparent); }
.settings-integration-status.is-ready { color: #0369a1; background: color-mix(in srgb, #0ea5e9 14%, transparent); }
.settings-integration-status.is-offline { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.settings-preference-fields { align-items: end; }
.settings-preferences-form > .btn,
.settings-telegram-card > form > .btn { justify-self: end; min-width: 140px; }
.settings-preference-group .toggle-row { min-height: 48px; padding: 0.25rem 0.1rem; }
.settings-preference-group .standalone-check { width: 100%; min-height: 44px; }
.settings-body-card { display: grid; gap: 0.8rem; min-width: 0; }
.settings-weight-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}
.settings-weight-summary > span { display: grid; align-content: center; gap: 0.2rem; min-width: 0; min-height: 78px; padding: 0.75rem; }
.settings-weight-summary > span + span { border-left: 1px solid var(--line); }
.settings-weight-summary small { color: var(--muted); font-size: 0.65rem; line-height: 1.2; }
.settings-weight-summary strong { overflow-wrap: anywhere; font-size: 1.08rem; }
.settings-weight-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.settings-weight-actions .btn { flex: 1 1 180px; }
.settings-body-card > form > .btn { justify-self: end; min-width: 140px; }
.settings-weight-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.7rem; }
.settings-weight-history-head h2,
.settings-weight-history-head p { margin: 0; }
.settings-weight-history-actions { display: flex; align-items: center; gap: 0.55rem; }
.settings-weight-history-actions .btn { white-space: nowrap; }
.settings-weight-entry-form { margin-top: 0.25rem; }
.settings-weight-entry-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }

.workouts-session-detail-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
}
.workouts-session-share-button svg { width: 17px; height: 17px; }
.workouts-share-preview {
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.workouts-share-preview span { color: var(--muted); font-size: 0.76rem; }
.workouts-share-friends {
    display: grid;
    max-height: min(360px, 48dvh);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
}
.workouts-share-friends label {
    display: grid;
    grid-template-columns: auto 42px minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    min-height: 62px;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
}
.workouts-share-friends label + label { border-top: 1px solid var(--line); }
.workouts-share-friends label:has(input:checked) { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.workouts-share-friends input { width: auto; accent-color: var(--primary); }
.workouts-share-friends .member-avatar { width: 40px; height: 40px; }
.workouts-share-friends label > span:last-child { display: grid; min-width: 0; }
.workouts-share-friends small { color: var(--muted); }
.workouts-share-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
.workouts-share-empty { display: grid; justify-items: center; gap: 0.75rem; padding: 1rem; text-align: center; }
.workouts-share-empty p { margin: 0; color: var(--muted); }

.workouts-recent-history-link {
    color: var(--ink);
    text-decoration: none;
    border-radius: 12px;
}
.workouts-recent-history-link > span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--primary);
}
.workouts-recent-history-link > span small { font-weight: 800; }
.workouts-recent-history-link > span b { font-size: 1.2rem; transition: transform 0.18s ease; }
.workouts-recent-history-link:hover,
.workouts-recent-history-link:focus-visible {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    outline: none;
}
.workouts-recent-history-link:hover > span b,
.workouts-recent-history-link:focus-visible > span b { transform: translateX(2px); }
.workouts-session-list > li { padding: 0; }
.workouts-session-list > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 46px;
    padding: 0.5rem;
    border-radius: 11px;
    color: var(--ink);
    text-decoration: none;
}
.workouts-session-list > li > a > span { display: grid; min-width: 0; }
.workouts-session-list > li > a small { color: var(--muted); }
.workouts-session-list > li > a > b { color: var(--muted); font-size: 1.15rem; }
.workouts-session-list > li > a:hover,
.workouts-session-list > li > a:focus-visible {
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    outline: none;
}
.workouts-pr-list > li { padding: 0; }
.workouts-pr-list > li > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.45rem 0.5rem;
    border-radius: 11px;
    color: var(--ink);
    text-decoration: none;
}
.workouts-pr-list > li > a > span {
    overflow: hidden;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.workouts-pr-list > li > a > strong { white-space: nowrap; }
.workouts-pr-list > li > a > b { color: var(--muted); font-size: 1.15rem; }
.workouts-pr-list > li > a:hover,
.workouts-pr-list > li > a:focus-visible {
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    outline: none;
}
.workouts-pr-list > li > a:hover > b,
.workouts-pr-list > li > a:focus-visible > b { color: var(--primary); }

@media (max-width: 600px) {
    .workouts-session-detail-head {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .workouts-session-share-button {
        grid-column: 1 / -1;
        width: 100%;
    }
    .workouts-share-actions > * { flex: 1; }
}

.settings-weight-list { display: grid; overflow: hidden; margin-inline: -0.85rem; margin-bottom: -0.85rem; border-top: 1px solid var(--line); }
.settings-weight-list > a { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; min-height: 58px; padding: 0.55rem 0.85rem; color: var(--ink); text-decoration: none; }
.settings-weight-list > a + a { border-top: 1px solid var(--line); }
.settings-weight-list > a:hover,
.settings-weight-list > a:focus-visible { background: color-mix(in srgb, var(--primary) 6%, transparent); outline: none; }
.settings-weight-list > a > span { display: grid; gap: 0.1rem; min-width: 0; }
.settings-weight-list > a > span:last-child { text-align: right; }
.settings-weight-list strong { font-size: 0.78rem; }
.settings-weight-list small { color: var(--muted); font-size: 0.65rem; }
.settings-weight-empty { display: grid; place-items: center; gap: 0.45rem; min-height: 150px; padding: 1rem; text-align: center; }
.settings-weight-empty > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: var(--primary-dark); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.settings-weight-empty svg { width: 22px; height: 22px; }
.settings-weight-empty p { margin: 0; color: var(--muted); }
.settings-weight-empty a { color: var(--primary-dark); font-weight: 800; }

.settings-avatar-source-actions,
.settings-avatar-submit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.settings-avatar-source-actions .btn,
.settings-avatar-submit-actions .btn { flex: 1 1 150px; }
.settings-avatar-remove-form { margin-top: 0.7rem; }
.settings-avatar-remove-form .is-danger { color: var(--bad); }
.settings-avatar-card-focused .settings-avatar-preview-round {
    width: 72px;
    height: 72px;
}
.settings-image-cropper {
    width: min(100%, 360px);
    justify-self: center;
}
.settings-image-cropper canvas {
    width: min(100%, 280px);
    height: auto;
    aspect-ratio: 1;
    margin-inline: auto;
}
.settings-avatar-preview-stage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}
.settings-avatar-preview-stage .settings-avatar-current { min-width: 0; }
.settings-avatar-preview-stage .settings-avatar-preview-round { width: 88px; height: 88px; flex: 0 0 88px; }
.settings-avatar-status { display: inline-flex; align-items: center; min-height: 30px; padding: 0.25rem 0.6rem; border-radius: 999px; color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); font-size: 0.66rem; font-weight: 850; text-align: center; }
.settings-avatar-status.has-photo { color: #087f5b; background: color-mix(in srgb, #10b981 14%, transparent); }
.settings-avatar-source-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.settings-avatar-source-option {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    min-height: 68px;
    padding: 0.65rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--ink);
    background: var(--surface);
    cursor: pointer;
}
.settings-avatar-source-option:focus-within { border-color: var(--primary); outline: 2px solid color-mix(in srgb, var(--primary) 24%, transparent); outline-offset: 2px; }
.settings-avatar-source-option > span:nth-child(2) { display: grid; gap: 0.1rem; min-width: 0; }
.settings-avatar-source-option strong { font-size: 0.78rem; }
.settings-avatar-source-option small { color: var(--muted); font-size: 0.65rem; line-height: 1.25; }
.settings-avatar-source-option > span:last-of-type { color: var(--muted); font-size: 1.2rem; }
.settings-avatar-source-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--primary-dark); background: color-mix(in srgb, var(--primary) 11%, transparent); }
.settings-avatar-source-icon svg { width: 21px; height: 21px; }

.cosmetic-option { position: relative; min-height: 126px; align-content: start; }
.cosmetic-option:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.cosmetic-option:has(input:checked) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.cosmetic-swatch {
    position: relative;
    width: 62px;
    height: 62px;
    overflow: visible;
}
.cosmetic-swatch > img,
.cosmetic-swatch > span:not(.cosmetic-selected) {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
}
.cosmetic-lock,
.cosmetic-selected {
    position: absolute;
    right: -5px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.68rem;
    color: #fff;
    background: #475569;
    box-shadow: 0 0 0 2px var(--surface);
}
.cosmetic-selected { background: var(--primary); }
.cosmetic-option input:checked + .cosmetic-swatch::after {
    content: "✓";
    position: absolute;
    right: -5px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    box-shadow: 0 0 0 2px var(--surface);
    font-size: 0.68rem;
    font-weight: 900;
}
.cosmetic-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
}
.cosmetics-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.competition-empty-state { padding-block: 1rem; }
.squad-member-chip { gap: 0.2rem; }
.squad-member-profile { display: inline-flex; min-height: 32px; align-items: center; }

.challenge-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.8rem;
}
.challenge-archive-card {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    color: var(--ink);
    background: var(--surface);
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.challenge-archive-card:hover,
.challenge-archive-card:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
    outline: none;
}
.challenge-archive-head,
.challenge-archive-dates {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}
.challenge-archive-head strong { min-width: 0; overflow-wrap: anywhere; }
.challenge-archive-dates > span:not([aria-hidden]) { display: grid; gap: 0.15rem; }
.challenge-archive-dates small { color: var(--muted); }
.challenge-archive-meta { line-height: 1.4; }

.kebab-menu-panel.is-portaled {
    animation: kebabMenuIn 0.14s ease both;
    max-height: min(70vh, 440px);
    overflow-y: auto;
}
.week-custom-habit.is-portaled {
    max-height: min(72dvh, 520px);
    overflow-y: auto;
    margin: 0;
    border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
    box-shadow: 0 24px 60px rgba(8, 14, 22, 0.28);
}
.training-sheet-table .sheet-habits-list .check,
.custom-habit-pick span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
.training-sheet-table .sheet-habits-list {
    max-height: none;
    overflow: visible;
}

.gallery-tile-skeleton {
    min-height: 150px;
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--surface) 72%, var(--line)) 30%,
        color-mix(in srgb, var(--surface) 96%, #fff) 48%,
        color-mix(in srgb, var(--surface) 72%, var(--line)) 66%);
    background-size: 260% 100%;
    animation: gallerySkeleton 1.2s ease-in-out infinite;
}
@keyframes gallerySkeleton { to { background-position-x: -160%; } }

@media (min-width: 769px) {
    .team-goals-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 0.8rem;
    }
    .team-goal-card {
        position: relative;
        display: block;
        min-height: 112px;
        padding: 0;
        overflow: visible;
    }
    .team-goal-card > .team-goal-main { display: none; }
    .team-goal-mobile-preview {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "title status" "reward progress" "bar bar";
        align-items: center;
        gap: 0.45rem 0.8rem;
        width: 100%;
        min-height: 112px;
        padding: 1rem 3.5rem 1rem 1rem;
        border: 0;
        color: inherit;
        background: transparent;
        text-align: left;
        cursor: pointer;
    }
    .team-goal-mobile-preview-title { grid-area: title; overflow-wrap: anywhere; }
    .team-goal-mobile-preview-status { grid-area: status; justify-self: end; }
    .team-goal-mobile-preview-progress { grid-area: progress; justify-self: end; color: var(--primary); font-size: 1.05rem; font-weight: 800; }
    .team-goal-mobile-preview-reward { grid-area: reward; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .team-goal-mobile-preview-bar { grid-area: bar; display: block; height: 6px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--line) 65%, transparent); }
    .team-goal-mobile-preview-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #6fb0ff); }
    .team-goal-actions-menu { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 4; }
    .team-goal-detail-modal .team-goal-main { display: grid; }
}

@media (max-width: 700px) {
    .settings-index-screen,
    .settings-page[data-settings-section] { width: 100%; }
    .settings-nav-grid { grid-template-columns: 1fr; gap: 0.55rem; }
    .settings-nav-item { min-height: 72px; padding: 0.72rem; border-radius: 16px; box-shadow: none; }
    .settings-section-head { align-items: center; }
    .settings-section-head .btn,
    .settings-section-head .hierarchy-back { min-width: 44px; }
    .settings-preferences-card,
    .settings-telegram-card { padding: 0; }
    .settings-preference-group { padding: 0.72rem; }
    .settings-integration-head { grid-template-columns: 44px minmax(0, 1fr); }
    .settings-integration-status { grid-column: 1 / -1; justify-self: start; }
    .settings-preference-fields { grid-template-columns: 1fr; }
    .settings-preferences-form > .btn,
    .settings-telegram-card > form > .btn { width: 100%; min-height: 48px; }
    .settings-body-card > form > .btn { width: 100%; min-height: 48px; }
    .settings-weight-summary > span { min-height: 72px; padding: 0.6rem; }
    .settings-weight-summary small { font-size: 0.59rem; }
    .settings-weight-summary strong { font-size: 0.94rem; }
    .settings-weight-list { margin-inline: -0.72rem; margin-bottom: -0.72rem; }
    .settings-weight-history-head { align-items: center; }
    .settings-weight-history-head > div:first-child { min-width: 0; }
    .settings-weight-history-actions .badge { display: none; }
    .settings-weight-history-actions .btn { width: 42px; min-width: 42px; padding-inline: 0; overflow: hidden; font-size: 0; }
    .settings-weight-history-actions .btn svg { width: 18px; height: 18px; }
    .settings-weight-entry-form .grid-inline.two { grid-template-columns: 1fr; }
    .settings-weight-entry-actions > * { flex: 1; }
    .settings-avatar-card-focused { padding: 0.85rem; }
    .settings-avatar-card-focused .panel-head { margin-bottom: 0.35rem; }
    .settings-avatar-preview-stage { align-items: flex-start; padding: 0.72rem; }
    .settings-avatar-card-focused .settings-avatar-preview-round,
    .settings-avatar-preview-stage .settings-avatar-preview-round { width: 72px; height: 72px; flex-basis: 72px; }
    .settings-avatar-source-actions { grid-template-columns: 1fr; }
    .settings-image-cropper canvas { width: min(100%, 220px); }
    .settings-avatar-submit-actions {
        position: static;
        padding-top: 0.5rem;
    }
    .cosmetics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cosmetic-option { min-height: 148px; padding-inline: 3px; }
    .challenge-archive-grid { grid-template-columns: 1fr; }
    .kebab-menu-panel.is-portaled { animation: kebabSheetIn 0.18s ease both; }
    .week-custom-habit.is-portaled { border-radius: 20px; padding: 0.8rem; }
}

@media (max-width: 360px) {
    .settings-nav-item { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0.6rem; }
    .settings-nav-icon { width: 40px; height: 40px; }
    .settings-nav-copy small { font-size: 0.78rem; }
    .cosmetics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-avatar-source-actions .btn,
    .settings-avatar-submit-actions .btn { flex-basis: 100%; }
}

body[data-theme="dark"] .settings-nav-item,
body[data-theme="dark"] .challenge-archive-card,
body.theme-active-dark .settings-nav-item,
body.theme-active-dark .challenge-archive-card {
    color: var(--dark-ui-text, var(--ink));
    border-color: var(--dark-ui-border, var(--line));
    background: var(--dark-ui-surface, var(--surface));
}
@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .settings-nav-item,
    body[data-theme="auto"] .challenge-archive-card {
        color: var(--dark-ui-text, var(--ink));
        border-color: var(--dark-ui-border, var(--line));
        background: var(--dark-ui-surface, var(--surface));
    }
}

@media (max-width: 899px) {
    .topbar-context-panel .analytics-period-segments a,
    .topbar-context-panel .calendar-view-segments a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

body[data-theme="dark"] .quick-entry-icon,
body.theme-active-dark .quick-entry-icon {
    color: #74e3d0;
    background: rgba(45, 212, 191, 0.14);
}

body[data-theme="dark"] .topbar .user-menu-panel a[aria-current="page"],
body.theme-active-dark .topbar .user-menu-panel a[aria-current="page"] {
    color: #8debdc;
    background: rgba(45, 212, 191, 0.15);
    box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.18);
}

@media (max-width: 520px) {
    body[data-theme="dark"] .topbar-context[open] .topbar-context-panel,
    body[data-theme="dark"] .topbar .user-menu[open] .user-menu-panel,
    body.theme-active-dark .topbar-context[open] .topbar-context-panel,
    body.theme-active-dark .topbar .user-menu[open] .user-menu-panel {
        color: #f8fafc;
        background: rgba(15, 23, 42, 0.96) !important;
    }
}

/* ==========================================================================
   A closed menu must not exist

   The panels set `display: grid` unconditionally, which overrides the browser's own
   "children of a closed <details> are not rendered". So every collapsed menu kept its
   contents laid out: 15 links and buttons reachable by keyboard and announced by a
   screen reader inside menus the user sees as closed, plus phantom horizontal overflow
   from panels sticking out past the viewport.
   ========================================================================== */
:is(
    details.user-menu,
    details.add-menu,
    details.topbar-add-menu,
    details.topbar-context,
    details.notif-menu,
    details.inline-context,
    details.inline-context-sub,
    details.metric-help-popover,
    details.notifications-tools,
    details.team-join-more,
    details.bottom-nav-plus,
    details.dashboard-layout-context,
    details.workouts-archived,
    details[data-kebab-menu]
):not([open]) > :not(summary) {
    display: none !important;
}

/* ==========================================================================
   Mobile density pass

   Measured on an iPhone 13: the quests widget alone was 809px (1.2 screens), every
   chart 220-250px, and Team ran to 6.9 screens. Nothing is hidden here - the same
   content, in less space.
   ========================================================================== */
@media (max-width: 899px) {
    /* Quests: the button owns the padding, the item is a plain frame. */
    .quests-widget .quest-item {
        padding: 0;
    }

    .quests-widget .quest-summary {
        padding: 0.42rem 0.66rem;
        gap: 0.6rem;
    }

    .topbar .user-menu-panel > .user-menu-view {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .topbar .user-menu-panel .user-menu-subhead { grid-column: 1 / -1; }

    .quests-widget .quest-icon {
        width: 36px;
        height: 36px;
    }

    .quests-widget .quest-icon svg {
        width: 17px;
        height: 17px;
    }

    .quests-widget .quest-bar {
        height: 5px;
    }

    .quests-widget .quest-title {
        font-size: 0.85rem;
    }

    .quests-widget .quest-meta {
        font-size: 0.7rem;
    }

    .quests-group-label {
        margin: 0.5rem 0 0.25rem;
        font-size: 0.68rem;
    }

    /* Badges wrapped into four stacked rows. One row that scrolls sideways keeps them
       all reachable and gives back ~150px. */
    .badge-strip {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.4rem;
        padding-bottom: 0.3rem;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .badge-strip .badge-chip {
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-width: 148px;
    }

    /* Charts: 220-250px each, and there are six of them on Analytics. */
    .chart-card canvas,
    .analytics-chart-card canvas {
        max-height: 180px !important;
    }

    .chart-card {
        padding: 0.7rem;
    }

    /* Season leaderboard and hint. */
    .season-widget .season-your-xp {
        margin-bottom: 0.6rem;
    }

    .season-row {
        padding: 0.4rem 0.5rem;
    }

    .season-hint {
        margin-top: 0.6rem;
        font-size: 0.7rem;
    }

    /* Panels in general: the padding was tuned for a desktop grid. */
    .dashboard-layout > .panel,
    .team-layout-grid > .panel {
        padding: 0.8rem;
    }
}

@media (max-width: 700px) {
    /* Team keeps every desktop chart on phones, but related charts share one
       swipeable row instead of consuming one full screen apiece. */
    .team-widget-daily-charts,
    .team-widget-weekly-charts {
        display: flex;
        grid-template-columns: none;
        gap: 10px;
        overflow-x: auto;
        padding: 1px 1px 6px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .team-widget-daily-charts::-webkit-scrollbar,
    .team-widget-weekly-charts::-webkit-scrollbar {
        display: none;
    }

    .team-widget-daily-charts > .chart-card,
    .team-widget-weekly-charts > .chart-card {
        flex: 0 0 min(86vw, 430px);
        min-width: 0;
        scroll-snap-align: start;
    }

    .team-layout-grid :where(
        .team-widget-daily-charts,
        .team-widget-weekly-charts,
        .team-cumulative-chart-card
    ) .chart-card,
    .team-layout-grid :where(
        .team-widget-daily-charts,
        .team-widget-weekly-charts,
        .team-cumulative-chart-card
    ) {
        min-height: 0;
    }

    .team-layout-grid :where(
        .team-widget-daily-charts,
        .team-widget-weekly-charts,
        .team-cumulative-chart-card
    ) canvas {
        height: 145px !important;
        max-height: 145px !important;
    }
}

/* ==========================================================================
   Dashboard training widgets: strength rank + compact activity pulse
   ========================================================================== */
.dashboard-training-rank,
.dashboard-training-progress {
    position: relative;
    overflow: hidden;
}

.dashboard-achievement-open {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    width: fit-content;
    margin-top: auto;
    color: var(--primary-dark);
    font-size: 0.68rem;
    font-weight: 850;
}
.dashboard-training-rank::after,
.dashboard-training-progress::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--rank-color, var(--primary)), color-mix(in srgb, var(--primary) 18%, transparent));
}
.dashboard-training-rank-summary {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    margin: 0.65rem 0 0.75rem;
    padding: 0.72rem;
    border: 1px solid color-mix(in srgb, var(--rank-color, var(--primary)) 24%, var(--line));
    border-radius: 18px;
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--rank-color, var(--primary)) 16%, transparent), transparent 48%),
        color-mix(in srgb, var(--surface) 96%, var(--rank-color, var(--primary)) 4%);
}
.dashboard-training-rank-emblem {
    display: grid;
    place-items: center;
    align-content: center;
    width: 96px;
    aspect-ratio: 1;
    padding: 0.45rem;
    border: 1px solid color-mix(in srgb, var(--rank-color, var(--primary)) 48%, transparent);
    border-radius: 50%;
    color: var(--ink);
    background: linear-gradient(145deg, color-mix(in srgb, var(--rank-color, var(--primary)) 24%, var(--surface)), var(--surface));
    box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--rank-color, var(--primary)) 8%, transparent), 0 12px 28px color-mix(in srgb, var(--rank-color, var(--primary)) 20%, transparent);
    text-align: center;
}
.dashboard-training-rank-emblem span {
    color: var(--rank-color, var(--primary));
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.dashboard-training-rank-emblem strong { font-size: 1.45rem; line-height: 1.05; }
.dashboard-training-rank-emblem small { color: var(--muted); font-size: 0.58rem; font-weight: 750; }
.dashboard-training-rank-copy { display: grid; gap: 0.28rem; min-width: 0; }
.dashboard-training-rank-copy > strong { font-size: 1rem; }
.dashboard-training-rank-copy > small { color: var(--muted); font-size: 0.7rem; line-height: 1.3; }
.dashboard-training-rank-progress {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.dashboard-training-rank-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--rank-color, var(--primary)), color-mix(in srgb, var(--rank-color, var(--primary)) 60%, #fff));
}
.dashboard-training-board { display: grid; gap: 0.35rem; }
.dashboard-training-board-row {
    display: grid;
    grid-template-columns: 28px 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.48rem;
    min-width: 0;
    min-height: 46px;
    padding: 0.38rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 13px;
    color: inherit;
    text-decoration: none;
}
.dashboard-training-board-row:hover,
.dashboard-training-board-row:focus-visible,
.dashboard-training-board-row.is-selected {
    border-color: color-mix(in srgb, var(--rank-color, var(--primary)) 24%, var(--line));
    background: color-mix(in srgb, var(--rank-color, var(--primary)) 7%, transparent);
}
.dashboard-training-board-row > strong { color: var(--muted); font-size: 0.74rem; text-align: center; }
.dashboard-training-board-row img,
.dashboard-training-board-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    color: #fff;
    background: var(--primary);
    font-size: 0.68rem;
    font-weight: 900;
}
.dashboard-training-board-copy { display: grid; gap: 0.05rem; min-width: 0; }
.dashboard-training-board-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; }
.dashboard-training-board-copy small { color: var(--muted); font-size: 0.64rem; }
.dashboard-training-board-row .workouts-rank-badge { white-space: nowrap; }

.dashboard-training-progress-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
    margin-top: 0.65rem;
}
.dashboard-training-progress-grid > span {
    display: grid;
    align-content: space-between;
    gap: 0.35rem;
    min-height: 82px;
    padding: 0.62rem;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
}
.dashboard-training-progress-grid small { color: var(--muted); font-size: 0.66rem; font-weight: 780; line-height: 1.25; }
.dashboard-training-progress-grid strong { font-size: 1.35rem; line-height: 1; }
.dashboard-training-recent {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.55rem;
    padding: 0.55rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.dashboard-training-recent-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: var(--settings-tone, var(--primary));
    background: color-mix(in srgb, var(--settings-tone, var(--primary)) 12%, transparent);
}
.dashboard-training-recent-icon svg { width: 20px; height: 20px; }
.dashboard-training-recent > span:nth-child(2) { display: grid; min-width: 0; }
.dashboard-training-recent small { color: var(--muted); font-size: 0.64rem; font-weight: 750; }
.dashboard-training-recent strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; }
.dashboard-training-recent time { color: var(--muted); font-size: 0.68rem; font-weight: 750; }
.dashboard-training-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin-top: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-radius: 14px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
}
@media (min-width: 1180px) {
    .dashboard-training-progress-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dashboard-training-progress-grid > span { min-height: 76px; }
}
@media (max-width: 420px) {
    .dashboard-training-rank-summary { grid-template-columns: 78px minmax(0, 1fr); gap: 0.62rem; padding: 0.58rem; }
    .dashboard-training-rank-emblem { width: 78px; }
    .dashboard-training-rank-emblem strong { font-size: 1.2rem; }
    .dashboard-training-board-row { grid-template-columns: 24px 32px minmax(0, 1fr) auto; gap: 0.38rem; padding-inline: 0.3rem; }
    .dashboard-training-board-row img,
    .dashboard-training-board-avatar { width: 32px; height: 32px; }
    .dashboard-training-board-row .workouts-rank-badge { padding-inline: 0.4rem; font-size: 0.58rem; }
    .dashboard-training-progress-grid > span { min-height: 74px; padding: 0.52rem; }
    .dashboard-training-progress-grid strong { font-size: 1.15rem; }
}
body[data-theme="dark"] .dashboard-training-rank-summary,
body.theme-active-dark .dashboard-training-rank-summary,
body[data-theme="dark"] .dashboard-training-progress-grid > span,
body.theme-active-dark .dashboard-training-progress-grid > span {
    background-color: var(--dark-ui-surface, var(--surface));
    border-color: var(--dark-ui-border, var(--line));
}

/* Compact workout hub header: one navigation row and two period summaries. */
.workouts-hero {
    min-height: 0;
    padding-block: clamp(0.8rem, 2vw, 1.15rem);
}
.workouts-hero .hero-copy { gap: 0.2rem; }
.workouts-hero .hero-copy h1 { margin: 0; }
.workouts-hero .hero-copy > p:last-child { max-width: 58ch; margin: 0; }
.workouts-overview-summary {
    min-width: 0;
}
.workouts-overview-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 9px 24px rgba(8, 18, 30, 0.06);
}
.workouts-overview-kpi-strip > span {
    display: grid;
    align-content: center;
    gap: 0.2rem;
    min-width: 0;
    min-height: 76px;
    padding: 0.65rem 0.8rem;
}
.workouts-overview-kpi-strip > span + span { border-left: 1px solid var(--line); }
.workouts-overview-kpi-strip strong {
    order: -1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(1.02rem, 2vw, 1.28rem);
    line-height: 1;
}
.workouts-overview-kpi-strip small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 760;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
@media (max-width: 700px) {
    .workouts-screen { gap: 0.72rem; }
    .workouts-hero { padding: 0.68rem 0.8rem; border-radius: 16px; }
    .workouts-hero:not(.workouts-hero-hub) { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 0.68rem; padding: 0 0.75rem 0 0; border: 0; border-radius: 14px; box-shadow: none; }
    .workouts-hero:not(.workouts-hero-hub) .hero-copy { display: block; grid-column: 2; grid-row: 1; }
    .workouts-hero:not(.workouts-hero-hub) .hero-copy h1 { display: block; }
    .workouts-hero:not(.workouts-hero-hub) > .btn { grid-column: 1; grid-row: 1; width: 44px; min-width: 44px; height: 44px; padding: 0; overflow: hidden; border-radius: 14px; font-size: 0; }
    .workouts-hero:not(.workouts-hero-hub) > .btn::before { content: "←"; font-size: 1rem; }
    .workouts-hero .eyebrow,
    .workouts-hero .hero-copy > p:last-child { display: none; }
    .workouts-hero .hero-copy h1 { font-size: 1.28rem; line-height: 1.15; }
    .workouts-overview-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workouts-overview-kpi-strip > span { min-height: 64px; padding: 0.5rem 0.65rem; }
    .workouts-overview-kpi-strip > span:nth-child(odd) { border-left: 0; }
    .workouts-overview-kpi-strip > span:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .workouts-overview-kpi-strip strong { font-size: 1.02rem; }
    .workouts-overview-kpi-strip small { font-size: 0.57rem; }
}

/* ==========================================================================
   Shared application pages: compact headers and focused management surfaces
   ========================================================================== */
.app-page-hero {
    min-height: 0;
    padding: 1rem 1.15rem;
    border-radius: 20px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 58%),
        var(--surface);
    box-shadow: none;
}
.app-page-hero .hero-copy { display: grid; gap: 0.22rem; }
.app-page-hero .hero-copy :where(.eyebrow, h1, p) { margin: 0; }
.app-page-hero h1 { font-size: clamp(1.6rem, 2.3vw, 2.05rem); }
.app-page-hero > .btn { min-height: 44px; }

.team-settings-screen,
.admin-settings-screen { width: min(980px, 100%); margin-inline: auto; }
.team-settings-screen .hierarchy-page-header-root {
    grid-template-columns: minmax(0, 1fr) auto;
}
.team-settings-team-link { align-self: center; min-height: 44px; }
.team-settings-nav-grid,
.admin-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.team-settings-nav-grid .settings-nav-item,
.admin-group-grid .settings-nav-item { grid-template-columns: 46px minmax(0, 1fr) auto auto; }
.settings-nav-meta {
    display: grid;
    place-items: center;
    min-width: 28px;
    min-height: 28px;
    padding-inline: 0.45rem;
    border-radius: 999px;
    color: var(--settings-tone, var(--primary-dark));
    background: color-mix(in srgb, var(--settings-tone, var(--primary)) 10%, var(--surface));
    font-size: 0.72rem;
    font-weight: 850;
}
.team-settings-section-card {
    width: min(820px, 100%);
    margin-inline: auto;
    padding: clamp(0.9rem, 2vw, 1.25rem);
    border-radius: 20px;
    box-shadow: none;
}
.team-identity-editor {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}
.team-identity-editor legend { padding-inline: 5px; font-size: 0.76rem; font-weight: 850; }
.team-identity-editor > p { margin: -4px 0 0; }
.team-identity-preview {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    min-height: 126px;
    overflow: hidden;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 12%, var(--surface)), var(--surface-2));
}
.team-identity-preview.has-cover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, color-mix(in srgb, #000 58%, transparent), transparent 78%); }
.team-identity-cover { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.team-identity-preview > :not(.team-identity-cover) { position: relative; z-index: 2; }
.team-identity-preview > strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }
.team-identity-preview.has-cover > strong { color: #fff; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); }
.team-identity-icon { display: grid; place-items: center; flex: 0 0 54px; width: 54px; height: 54px; overflow: hidden; border: 3px solid color-mix(in srgb, var(--surface) 88%, transparent); border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--primary), #2563eb); font-size: 0.72rem; font-weight: 900; box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2); }
.team-identity-icon img { width: 100%; height: 100%; object-fit: cover; }
.team-identity-fields label { min-width: 0; }
.team-identity-fields input[type="file"] { width: 100%; min-width: 0; min-height: 44px; font-size: 0.68rem; }
.team-identity-remove-options { display: flex; flex-wrap: wrap; gap: 8px; }
.team-identity-remove-options .check { min-height: 44px; }
@media (max-width: 640px) {
    .team-identity-fields.grid-inline.two { grid-template-columns: minmax(0, 1fr); }
    .team-identity-preview { min-height: 112px; }
}
.settings-section-actions { display: flex; justify-content: flex-end; }
.settings-section-actions .btn { min-width: 132px; }
.team-member-add-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.65rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}
.team-settings-inline-note { margin: 0 0 0.85rem; }
.team-settings-member-list { display: grid; gap: 0.55rem; }
.team-settings-member-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ink) 2%, var(--surface));
}
.team-settings-member-row.is-inactive { opacity: 0.68; }
.team-settings-member-profile { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.team-settings-member-profile > span:last-child { display: grid; min-width: 0; }
.team-settings-member-profile strong,
.team-settings-member-profile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-settings-member-profile small { color: var(--muted); font-size: 0.75rem; }
.team-settings-member-actions,
.team-settings-member-actions form { display: flex; align-items: end; gap: 0.4rem; }
.team-settings-member-actions select { min-width: 108px; }
.team-danger-action-form { display: grid; grid-template-columns: minmax(150px, 1fr) auto; align-items: center; gap: 0.5rem; }

.admin-settings-hub { display: block; }
.admin-settings-hub.hidden { display: none; }
.admin-section-list-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0;
    border: 0;
    background: transparent;
}
.admin-section-list-menu .settings-row {
    min-height: 64px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}
.admin-settings-screen > .settings-panel {
    border-radius: 20px;
    box-shadow: none;
}

/* ==========================================================================
   Hierarchical mobile application shell
   Shared native-style primitives keep every hub and subpage on one rhythm.
   ========================================================================== */
.dashboard-mobile-home,
.analytics-mobile-root,
.team-mobile-root,
.profile-mobile-root,
.workouts-mobile-subheader { display: none; }
.mobile-widget-feed-head { display: none; }

.hierarchy-screen,
.dashboard-hierarchy-screen.has-section { width: min(100%, 760px); margin-inline: auto; }
.hierarchy-page-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 6px 0;
}
.hierarchy-page-header-root { grid-template-columns: minmax(0, 1fr); }
.hierarchy-page-header > div { display: grid; gap: 2px; min-width: 0; }
.hierarchy-page-header .eyebrow { margin: 0; color: var(--muted); font-size: 0.66rem; }
.hierarchy-page-header h1 { margin: 0; font-size: var(--ui-page-title-size); line-height: 1.18; }
.hierarchy-page-header p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: var(--ui-secondary-text-size); line-height: 1.35; }
.hierarchy-back {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    background: var(--surface);
    font: inherit;
    font-size: 1.1rem;
    cursor: pointer;
}
.hierarchy-back.destination-back {
    display: inline-flex;
    width: auto;
    min-width: 44px;
    max-width: 148px;
    height: auto;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
}
.hierarchy-back.destination-back:hover,
.hierarchy-back.destination-back:focus-visible {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
.hierarchy-back.destination-back > span { flex: 0 0 auto; font-size: 1rem; line-height: 1; }
.hierarchy-back.destination-back > strong {
    overflow: hidden;
    font-size: 0.68rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hierarchy-page-header:has(> .destination-back) { grid-template-columns: auto minmax(0, 1fr); }
.contextual-route-back .hierarchy-back.destination-back { width: auto; min-height: 44px; }

@media (max-width: 390px) {
    .hierarchy-back.destination-back { max-width: 92px; padding-inline: 9px; gap: 6px; }
    /* "Novedades" (es) / "Aggiornamenti" (it) overflow the generic 92px cap and
       ellipsize into unreadable text ("Noveda..."). Notifications' destination
       label is longer than the other contextual-back targets, so give it more room.
       Quests and season share the same problem: their back target is "Recompensas"
       (es) / "Ricompense" (it), which also overflows 92px and ellipsized down to
       "Recom...". */
    body[data-page="notifications"] .contextual-route-back .hierarchy-back.destination-back,
    body[data-page="quests"] .contextual-route-back .hierarchy-back.destination-back,
    body[data-page="season"] .contextual-route-back .hierarchy-back.destination-back { max-width: 132px; }
    /* Admin's group titles ("Personas y acceso", "Experiencia de la app", "Sistema de
       entreno" / "Sistema di allenamento") and team settings' hub title ("Ajustes de
       equipo") also overflow the generic 92px cap and ellipsize into unreadable
       fragments ("Person...", "Experie...", "Ajustes ..."). Give admin and
       team_settings back buttons enough room for their longest back-destination label.
       This covers both the page-header back button and the secondary in-panel back
       link some admin sections (e.g. achievements) render next to their primary action.
       (team_settings renders with currentPage="team" for bottom-nav purposes, so it is
       scoped via its own .team-settings-screen root class instead of body[data-page].) */
    body[data-page="admin"] .hierarchy-back.destination-back,
    .team-settings-screen .hierarchy-back.destination-back { max-width: 170px; }
    .hierarchy-page-header:has(> .destination-back) { gap: 8px; }
    .hierarchy-page-header:has(> .destination-back) h1 {
        display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}
.profile-section-header {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center !important;
    gap: 10px !important;
    min-height: 56px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.profile-section-heading { display: grid; gap: 2px; min-width: 0; }
.profile-section-heading :where(.eyebrow, h2, h3) { margin: 0; }
.profile-section-heading :where(h2, h3) {
    overflow: hidden;
    font-size: var(--ui-section-title-size);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-section-action {
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    font-size: 0.75rem;
    white-space: nowrap;
}
.hierarchy-nav-list { display: grid; gap: 8px; min-width: 0; }
.hierarchy-nav-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 64px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--ink);
    background: var(--surface);
    text-decoration: none;
    box-shadow: none;
}
.hierarchy-nav-row:hover,
.hierarchy-nav-row:focus-visible { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.hierarchy-nav-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    font-size: 0.82rem;
    font-weight: 900;
}
.hierarchy-nav-icon svg { width: 21px; height: 21px; }
.hierarchy-nav-copy { display: grid; gap: 2px; min-width: 0; }
.hierarchy-nav-copy strong,
.settings-nav-copy strong { overflow-wrap: anywhere; font-size: var(--ui-menu-title-size); line-height: 1.22; }
.hierarchy-nav-copy small,
.settings-nav-copy small { color: var(--muted); font-size: var(--ui-secondary-text-size); line-height: 1.3; overflow-wrap: anywhere; }
.achievements-page-panel .panel-head h2 { font-size: var(--ui-section-title-size); line-height: 1.2; }
.achievements-page-panel .achievement-list-content h3,
.profile-achievement-content strong,
.team-achievement-body strong,
.dashboard-achievement-title-row strong {
    font-size: var(--ui-menu-title-size);
    line-height: 1.25;
}
.achievements-page-panel .achievement-list-content p,
.profile-achievement-content p,
.team-achievement-body p,
.dashboard-achievement-content p {
    font-size: var(--ui-secondary-text-size);
    line-height: 1.4;
}
.achievement-list-title-row > .achievement-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    word-break: normal;
}
.achievements-page-panel .achievement-list-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}
.achievements-page-panel .achievement-list-content h3 {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}
.achievement-summary-card strong { font-size: 1.15rem; }
.achievement-summary-card small { font-size: var(--ui-caption-size); }
.hierarchy-nav-meta { max-width: 96px; overflow: hidden; color: var(--muted); font-size: 0.72rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.hierarchy-nav-chevron { color: var(--muted); font-size: 1.3rem; }
.hierarchy-status-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}
.hierarchy-status-strip > span { display: grid; place-items: center; gap: 3px; min-width: 0; min-height: 66px; padding: 9px 6px; text-align: center; }
.hierarchy-status-strip > span + span { border-left: 1px solid var(--line); }
.hierarchy-status-strip strong { max-width: 100%; overflow: hidden; font-size: 1.08rem; text-overflow: ellipsis; white-space: nowrap; }
.hierarchy-status-strip small { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; }
.mobile-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mobile-kpi-grid > :where(a, div) {
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 92px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--ink);
    background: var(--surface);
    text-decoration: none;
}
.mobile-kpi-grid small,
.mobile-kpi-grid span { overflow: hidden; color: var(--muted); font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
.mobile-kpi-grid strong { overflow: hidden; font-size: 1.18rem; text-overflow: ellipsis; white-space: nowrap; }
.native-list-card { display: grid; gap: 0; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.native-list-card > h2,
.native-list-card > h3,
.native-list-head { margin: 0; padding: 12px 14px; font-size: 0.88rem; }
.native-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.native-list-head h2 { margin: 0; font-size: 0.9rem; }
.native-list-head a { color: var(--primary-dark); font-size: 0.7rem; font-weight: 800; }
.native-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 0.75rem; }
.native-list-row > span { display: grid; gap: 2px; min-width: 0; }
.native-list-row small { color: var(--muted); }
.mobile-approval-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 68px; padding: 9px 12px; border-top: 1px solid var(--line); }
.mobile-approval-row > span:first-of-type { display: grid; gap: 2px; min-width: 0; }
.mobile-approval-row small { color: var(--muted); font-size: 0.66rem; }
.mobile-approval-actions { display: flex; gap: 5px; }
.mobile-approval-actions .btn { min-height: 44px; padding-inline: 9px; }
.native-secondary-link { display: block; min-height: 44px; padding: 12px; color: var(--primary-dark); font-size: 0.76rem; font-weight: 800; text-align: center; }
.social-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; overflow: hidden; border-radius: 16px; }
.social-preview-grid a { aspect-ratio: 1; min-width: 0; background: var(--surface); }
.social-preview-grid img { width: 100%; height: 100%; object-fit: cover; }
.social-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.social-quick-actions [data-tone="blue"] { --social-tone: #2563eb; }
.social-quick-actions [data-tone="green"] { --social-tone: #059669; }
.social-quick-actions [data-tone="violet"] { --social-tone: #7c3aed; }
.social-quick-actions [data-tone="orange"] { --social-tone: #ea580c; }
.social-quick-actions a {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 76px;
    padding: 8px 6px;
    border: 1px solid color-mix(in srgb, var(--social-tone) 24%, var(--line));
    border-radius: 16px;
    color: var(--ink);
    background: color-mix(in srgb, var(--social-tone) 5%, var(--surface));
    text-align: center;
    text-decoration: none;
}
.social-quick-actions a:hover,
.social-quick-actions a:focus-visible { border-color: color-mix(in srgb, var(--social-tone) 58%, var(--line)); }
.social-quick-actions a > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: var(--social-tone);
    background: color-mix(in srgb, var(--social-tone) 12%, var(--surface));
}
.social-quick-actions svg { width: 19px; height: 19px; }
.social-quick-actions strong { max-width: 100%; font-size: 0.7rem; line-height: 1.15; overflow-wrap: anywhere; }
.social-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}
.social-overview-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
}
.social-team-overview,
.social-circle-overview { grid-column: span 5; }
.social-competition-overview,
.social-community-overview { grid-column: span 7; }
.social-activity-overview { grid-column: 1 / -1; }
.social-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.social-card-head > div { display: grid; gap: 2px; min-width: 0; }
.social-card-head :where(.eyebrow, h2) { margin: 0; }
.social-card-head h2 { font-size: 0.98rem; line-height: 1.2; }
.social-card-head > a {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 13px 4px 10px;
    color: var(--primary-dark);
    font-size: 0.7rem;
    font-weight: 800;
    text-decoration: none;
}
.social-featured-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 8px 10px;
    border-radius: 14px;
    color: var(--ink);
    background: color-mix(in srgb, #2563eb 6%, var(--surface-2));
    text-decoration: none;
}
.social-featured-row > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.social-featured-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-featured-row small { color: var(--muted); font-size: 0.68rem; }
.social-featured-icon,
.social-activity-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: #2563eb;
    background: color-mix(in srgb, #2563eb 12%, var(--surface));
}
.social-featured-icon svg,
.social-activity-icon svg { width: 21px; height: 21px; }
.social-avatar-list { display: flex; align-items: center; min-height: 44px; padding-inline: 4px; }
.social-avatar-list > * + * { margin-left: -8px; }
.social-avatar-list a { display: grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 50%; text-decoration: none; }
.social-person-avatar,
.social-avatar-more {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 2px solid var(--surface);
    border-radius: 50%;
    color: #fff;
    background: #173042;
    font-size: 0.68rem;
    font-weight: 850;
    object-fit: cover;
    text-transform: uppercase;
}
.social-avatar-more { color: var(--muted); background: var(--surface-2); }
.social-competition-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
}
.social-competition-metrics a {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 72px;
    padding: 8px 5px;
    color: var(--ink);
    text-align: center;
    text-decoration: none;
}
.social-competition-metrics a + a { border-left: 1px solid var(--line); }
.social-competition-metrics strong { font-size: 1.12rem; }
.social-competition-metrics small { color: var(--muted); font-size: 0.61rem; line-height: 1.15; }
.social-preview-grid-root { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.social-preview-grid-root a { min-height: 68px; border-radius: 10px; }
.social-people-list,
.social-activity-list { display: grid; gap: 2px; }
.social-people-list > a,
.social-activity-list > a {
    display: grid;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 56px;
    padding: 6px 4px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
}
.social-people-list > a { grid-template-columns: 42px minmax(0, 1fr) auto; }
.social-activity-list > a { grid-template-columns: 42px minmax(0, 1fr) auto; }
.social-people-list > a > span:nth-child(2),
.social-activity-list > a > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.social-people-list strong,
.social-activity-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-activity-list strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.25;
}
.social-people-list small,
.social-activity-list small,
.social-activity-list time { color: var(--muted); font-size: 0.66rem; }
.social-activity-list time { max-width: 80px; text-align: right; }
.social-request-badge { color: #7c3aed !important; }
.social-inline-empty {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 70px;
    padding: 10px;
    border-radius: 14px;
    color: var(--muted);
    background: var(--surface-2);
}
.social-inline-empty > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--primary-dark); background: color-mix(in srgb, var(--primary) 11%, var(--surface)); }
.social-inline-empty svg { width: 20px; height: 20px; }
.social-inline-empty p { margin: 0; font-size: 0.72rem; line-height: 1.3; }
.social-inline-empty a { min-height: 44px; padding: 13px 4px; color: var(--primary-dark); font-size: 0.7rem; font-weight: 800; text-decoration: none; }

@media (max-width: 700px) {
    .social-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .social-overview-card { padding: 12px; border-radius: 16px; }
    .social-team-overview,
    .social-competition-overview { grid-column: span 1; }
    .social-community-overview,
    .social-circle-overview,
    .social-activity-overview { grid-column: 1 / -1; }
    .social-team-overview .social-card-head > a,
    .social-competition-overview .social-card-head > a { display: none; }
    .social-team-overview .social-featured-row { grid-template-columns: 38px minmax(0, 1fr); }
    .social-team-overview .social-featured-row > :last-child { display: none; }
    .social-team-overview .social-featured-row strong { overflow: visible; line-height: 1.15; text-overflow: clip; white-space: normal; }
    .social-team-overview .social-featured-icon { width: 38px; height: 38px; }
    .social-avatar-list { margin-top: -4px; }
    .social-competition-metrics { grid-template-columns: 1fr; }
    .social-competition-metrics a { grid-template-columns: auto minmax(0, 1fr); justify-content: start; min-height: 44px; padding-inline: 10px; text-align: left; }
    .social-competition-metrics a + a { border-top: 1px solid var(--line); border-left: 0; }
    .social-competition-metrics strong { min-width: 18px; font-size: 0.9rem; }
}

@media (max-width: 360px) {
    .social-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .social-quick-actions a { grid-template-columns: 34px minmax(0, 1fr); place-items: center start; min-height: 56px; padding-inline: 9px; text-align: left; }
    .social-quick-actions strong { font-size: 0.68rem; }
    .social-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .social-team-overview,
    .social-competition-overview,
    .social-community-overview,
    .social-circle-overview,
    .social-activity-overview { grid-column: 1; }
    .social-competition-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .social-competition-metrics a { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: 62px; padding: 6px 3px; text-align: center; }
    .social-competition-metrics a + a { border-top: 0; border-left: 1px solid var(--line); }
    .social-inline-empty { grid-template-columns: 36px minmax(0, 1fr); }
    .social-inline-empty > a { grid-column: 2; padding-block: 8px; }
}

@media (min-width: 701px) and (max-width: 899px) {
    .hierarchy-nav-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hierarchy-nav-list > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .dashboard-mobile-home,
    .analytics-mobile-root,
    .team-mobile-root,
    .profile-mobile-root { max-width: 760px; margin-inline: auto; }
}

@media (max-width: 899px) {
    :root { --topbar-height: 60px; }
    .topbar {
        min-height: calc(var(--topbar-height) + env(safe-area-inset-top));
        gap: 8px;
        padding: calc(7px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 7px max(12px, env(safe-area-inset-left));
    }
    .topbar > .brand { width: 40px; flex: 0 0 40px; }
    .topbar-actions { gap: 6px; min-width: 0; flex: 0 0 auto; }
    .topbar .brand-avatar,
    .topbar .brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
    .topbar :where(.btn-topbar, .topbar-notif-btn, .user-menu-trigger) {
        min-width: 44px;
        min-height: 44px;
        height: 44px;
    }
    .topbar .topbar-notif-btn,
    .topbar .user-menu-trigger { width: 44px; flex: 0 0 44px; }
    .topbar .btn-topbar { padding: 6px 12px; }
    .topbar-page-title { line-height: 1.2; }
    .container.container-with-nav {
        width: 100%;
        margin-top: calc(var(--topbar-height) + env(safe-area-inset-top) + 16px);
        padding-inline: 16px;
    }
    .screen { gap: 12px; }
    .screen :where(.btn, button.btn, summary.kebab-menu-trigger) { min-height: 44px; }
    .screen :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea) { min-height: 44px; }
    .screen .btn.small { min-height: 44px; }
    .screen summary { min-height: 44px; }
    .screen summary[aria-label] { min-width: 44px; }
    .screen .achievement-delete-btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
    .app-page-hero {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 0.65rem 0.75rem;
        border-radius: 16px;
    }
    .app-page-hero .hero-copy { min-width: 0; }
    .app-page-hero .hero-copy > h1 { font-size: 1.15rem; }
    .app-page-hero .hero-copy > p.muted { max-width: 100%; }
    .team-settings-screen,
    .admin-settings-screen { width: 100%; }
    .team-settings-section-card,
    .admin-settings-screen > .settings-panel { padding: 12px; border-radius: 18px; }
    .admin-settings-screen > .settings-panel > .panel-head [data-spa-back] { display: none; }
    .admin-section-list-menu { grid-template-columns: 1fr; gap: 8px; }
    .admin-section-list-menu .settings-row { min-height: 64px; padding: 10px 12px; }
    .team-settings-member-row { grid-template-columns: 1fr; }
    .team-settings-member-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
    .team-settings-member-actions form:first-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .team-settings-member-actions form:last-child { justify-content: end; }
    .team-settings-member-actions select { min-width: 0; }
    .team-danger-action-form { width: 100%; }
    .training-summary-screen .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .training-summary-screen .metric-card {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 8px;
        min-height: 86px;
        padding: 8px;
        border-radius: 16px;
        box-shadow: none;
    }
    .training-summary-screen .progress-ring { width: 44px; height: 44px; }
    .training-summary-screen .progress-ring span { width: 34px; font-size: 0.62rem; }
    .training-summary-screen .metric-card > div:last-child { min-width: 0; }
    .training-summary-screen .metric-card span { overflow: hidden; font-size: 0.63rem; text-overflow: ellipsis; white-space: nowrap; }
    .training-summary-screen .metric-card strong { overflow: hidden; margin-top: 2px; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
    .training-summary-screen .metric-card p { display: none; }
    .workouts-hero-hub { display: none; }
    .floating-log { display: none !important; }
    .topbar-context-panel :where(.edit-layout-button, .analytics-layout-link) { display: none !important; }
    nav.bottom-nav.mobile-liquid-nav {
        left: 50% !important;
        right: auto !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        z-index: 11010 !important;
        width: min(620px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
        max-width: 620px;
        height: 68px !important;
        margin-inline: 0;
        display: flex !important;
        align-items: stretch !important;
        transform: translateX(-50%) !important;
        will-change: auto !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 22px !important;
        background: transparent !important;
    }
    nav.bottom-nav.mobile-liquid-nav > .liquid-nav-pill {
        position: static !important;
        display: grid !important;
        flex: 1 1 100% !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        min-width: 0 !important;
        width: 100% !important;
        height: 68px !important;
        min-height: 68px !important;
        padding: 4px 8px !important;
        border: 1px solid color-mix(in srgb, var(--line) 92%, transparent) !important;
        border-radius: 22px !important;
        background: var(--surface) !important;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14), 0 1px 2px rgba(15, 23, 42, 0.08) !important;
        overflow: visible !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    nav.bottom-nav.mobile-liquid-nav > .liquid-nav-pill::before,
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-plus > summary::before {
        display: none !important;
        content: none !important;
    }
    nav.bottom-nav.mobile-liquid-nav [data-nav-destination="dashboard"] { --nav-tone: #2563eb; --nav-tone-dark: #60a5fa; }
    nav.bottom-nav.mobile-liquid-nav [data-nav-destination="table"] { --nav-tone: #c2410c; --nav-tone-dark: #fb923c; }
    nav.bottom-nav.mobile-liquid-nav [data-nav-destination="social"] { --nav-tone: #7c3aed; --nav-tone-dark: #a78bfa; }
    nav.bottom-nav.mobile-liquid-nav [data-nav-destination="profile"] { --nav-tone: #047857; --nav-tone-dark: #34d399; }
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-item,
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-plus > summary {
        min-width: 0 !important;
        min-height: 60px !important;
        padding: 4px 2px 3px !important;
        border: 0 !important;
        border-radius: 16px !important;
        color: #526171 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-item { position: relative; display: grid !important; grid-template-rows: 30px 13px; place-items: center; align-content: center; gap: 2px; transition: color 160ms ease, transform 120ms ease; }
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-item::before { content: none !important; }
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-item::after { content: ""; position: absolute; top: -4px; left: 50%; width: 22px; height: 3px; border-radius: 0 0 999px 999px; background: var(--nav-tone, var(--primary)); opacity: 0; transform: translateX(-50%) scaleX(0.45); transition: opacity 160ms ease, transform 160ms ease; }
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-item.active,
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-item[aria-current="page"] { color: var(--nav-tone, var(--primary)) !important; background: transparent !important; }
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-item[aria-current="page"]::after { opacity: 1; transform: translateX(-50%) scaleX(1); }
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-item .nav-icon { width: 36px !important; height: 30px !important; border-radius: 11px; transition: color 160ms ease, background 160ms ease, transform 160ms ease; }
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-item .nav-icon svg { width: 21px !important; height: 21px !important; }
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-item[aria-current="page"] .nav-icon { background: color-mix(in srgb, var(--nav-tone, var(--primary)) 12%, transparent); transform: translateY(-1px); }
    nav.bottom-nav.mobile-liquid-nav .nav-label { display: block !important; max-width: 100%; overflow: hidden; font-size: 0.64rem !important; font-weight: 760; letter-spacing: 0 !important; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
    nav.bottom-nav.mobile-liquid-nav > .liquid-nav-pill > .liquid-nav-plus { position: relative !important; inset: auto !important; display: block !important; width: 100% !important; min-width: 0 !important; height: 60px !important; min-height: 0 !important; border: 0 !important; border-radius: 15px !important; color: #526171 !important; background: transparent !important; box-shadow: none !important; transform: none !important; }
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-plus > summary { display: grid !important; grid-template-rows: 36px 13px; place-items: center; align-content: center; width: 100% !important; height: 60px !important; min-height: 60px !important; gap: 1px; cursor: pointer; list-style: none; }
    nav.bottom-nav.mobile-liquid-nav .bottom-nav-plus-icon { display: grid !important; place-items: center; width: 36px !important; height: 36px !important; margin: 0; border-radius: 14px; color: #fff !important; background: linear-gradient(145deg, #18b89f, #087f70) !important; box-shadow: 0 4px 10px rgba(8, 127, 112, 0.22) !important; font-size: 1.35rem !important; font-weight: 650; line-height: 1; transition: transform 160ms ease; }
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-plus[open] > summary { color: var(--primary-dark) !important; background: transparent !important; }
    nav.bottom-nav.mobile-liquid-nav :where(.liquid-nav-item, .liquid-nav-plus > summary):active,
    nav.bottom-nav.mobile-liquid-nav :where(.liquid-nav-item, .liquid-nav-plus > summary).is-pressed { transform: scale(0.97) !important; }
    nav.bottom-nav.mobile-liquid-nav :where(.liquid-nav-item, .liquid-nav-plus > summary):focus-visible { outline: 2px solid color-mix(in srgb, var(--nav-tone, var(--primary)) 74%, white); outline-offset: -2px; }
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-plus[open] .bottom-nav-plus-icon { transform: rotate(45deg); }
    nav.bottom-nav.mobile-liquid-nav details.bottom-nav-plus[open] > .bottom-nav-plus-menu.mobile-quick-sheet {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: calc(100% + 12px) !important;
        z-index: 11020 !important;
        display: grid !important;
        width: min(420px, calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
        max-height: min(70dvh, 560px);
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 10px !important;
        overflow-y: auto;
        border: 1px solid var(--line) !important;
        border-radius: 22px !important;
        background: var(--surface) !important;
        box-shadow: 0 20px 54px rgba(15, 23, 42, 0.22) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: translateX(-50%) !important;
    }
    body[data-theme="dark"] nav.bottom-nav.mobile-liquid-nav > .liquid-nav-pill,
    body.theme-active-dark nav.bottom-nav.mobile-liquid-nav > .liquid-nav-pill {
        color: #b6c1cd !important;
        border-color: var(--line) !important;
        background: var(--surface) !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    body[data-theme="dark"] nav.bottom-nav.mobile-liquid-nav > .liquid-nav-pill > .liquid-nav-plus,
    body[data-theme="dark"] nav.bottom-nav.mobile-liquid-nav .liquid-nav-plus > summary,
    body.theme-active-dark nav.bottom-nav.mobile-liquid-nav > .liquid-nav-pill > .liquid-nav-plus,
    body.theme-active-dark nav.bottom-nav.mobile-liquid-nav .liquid-nav-plus > summary,
    body[data-theme="dark"] nav.bottom-nav.mobile-liquid-nav .liquid-nav-item,
    body.theme-active-dark nav.bottom-nav.mobile-liquid-nav .liquid-nav-item {
        color: #b6c1cd !important;
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    body[data-theme="dark"] nav.bottom-nav.mobile-liquid-nav .liquid-nav-item[aria-current="page"],
    body.theme-active-dark nav.bottom-nav.mobile-liquid-nav .liquid-nav-item[aria-current="page"] {
        color: var(--nav-tone-dark, #5eead4) !important;
        background: transparent !important;
    }
    body[data-theme="dark"] nav.bottom-nav.mobile-liquid-nav .liquid-nav-plus[open] > summary,
    body.theme-active-dark nav.bottom-nav.mobile-liquid-nav .liquid-nav-plus[open] > summary {
        color: #5eead4 !important;
    }
    @media (prefers-color-scheme: dark) {
        body[data-theme="auto"] nav.bottom-nav.mobile-liquid-nav > .liquid-nav-pill {
            color: #b6c1cd !important;
            border-color: var(--line) !important;
            background: var(--surface) !important;
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        body[data-theme="auto"] nav.bottom-nav.mobile-liquid-nav > .liquid-nav-pill > .liquid-nav-plus,
        body[data-theme="auto"] nav.bottom-nav.mobile-liquid-nav .liquid-nav-plus > summary,
        body[data-theme="auto"] nav.bottom-nav.mobile-liquid-nav .liquid-nav-item {
            color: #b6c1cd !important;
            border-color: transparent !important;
            background: transparent !important;
            box-shadow: none !important;
        }
        body[data-theme="auto"] nav.bottom-nav.mobile-liquid-nav .liquid-nav-item[aria-current="page"] {
            color: var(--nav-tone-dark, #5eead4) !important;
            background: transparent !important;
        }
        body[data-theme="auto"] nav.bottom-nav.mobile-liquid-nav .liquid-nav-plus[open] > summary { color: #5eead4 !important; }
    }
    .mobile-sheet-backdrop { position: fixed; inset: 0; z-index: 11000; background: rgba(8, 18, 30, 0.36); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
    .mobile-quick-view { display: grid; gap: 6px; }
    .mobile-quick-view[hidden] { display: none !important; }
    .mobile-quick-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; min-height: 52px; }
    .mobile-quick-head > div { grid-column: 1 / 3; display: grid; gap: 2px; padding-left: 8px; }
    .mobile-quick-head > div small { color: var(--muted); font-size: 0.68rem; }
    .mobile-quick-head > strong { text-align: center; }
    .mobile-quick-head button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 13px; color: var(--ink); background: transparent; font-size: 1.15rem; cursor: pointer; }
    .mobile-quick-head:has(> .menu-destination-back) { grid-template-columns: auto minmax(0, 1fr) 44px; gap: 5px; }
    .mobile-quick-head button.menu-destination-back { display: inline-flex; width: auto; max-width: 112px; align-items: center; justify-content: center; gap: 5px; padding-inline: 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
    .mobile-quick-head button.menu-destination-back > strong { overflow: hidden; font-size: 0.62rem; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-quick-nav,
    .mobile-quick-action { display: grid; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--item-tone, var(--ink)) 18%, var(--line)); border-radius: 15px; color: var(--ink); background: color-mix(in srgb, var(--item-tone, var(--ink)) 5%, var(--surface)); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 120ms ease, box-shadow 160ms ease; }
    .mobile-quick-nav { grid-template-columns: 42px minmax(0, 1fr) 28px; }
    .mobile-quick-action { grid-template-columns: 42px minmax(0, 1fr); }
    .mobile-quick-nav-copy,
    .mobile-quick-action > span:last-child { display: grid; gap: 2px; }
    .mobile-quick-nav small,
    .mobile-quick-action small { color: var(--muted); font-size: 0.67rem; }
    .mobile-quick-nav-icon,
    .mobile-quick-action .quick-entry-icon,
    .mobile-quick-glyph { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--item-tone, var(--primary-dark)); background: color-mix(in srgb, var(--item-tone, var(--primary)) 13%, transparent); }
    .mobile-quick-nav-icon svg,
    .mobile-quick-action .quick-entry-icon svg { width: 21px; height: 21px; }
    .mobile-quick-nav-icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .mobile-quick-chevron { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; color: var(--item-tone, var(--muted)); background: color-mix(in srgb, var(--item-tone, var(--ink)) 9%, transparent); font-size: 1.2rem; line-height: 1; }
    .mobile-quick-nav:hover,
    .mobile-quick-nav:focus-visible,
    .mobile-quick-action:hover,
    .mobile-quick-action:focus-visible { border-color: color-mix(in srgb, var(--item-tone, var(--primary)) 42%, var(--line)); background: color-mix(in srgb, var(--item-tone, var(--primary)) 8%, var(--surface)); box-shadow: 0 7px 18px color-mix(in srgb, var(--item-tone, var(--primary)) 10%, transparent); outline: none; }
    .mobile-quick-nav:active,
    .mobile-quick-action:active { transform: scale(0.985); }
    .topbar .user-menu[open] .user-menu-panel,
    .topbar-context[open] .topbar-context-panel {
        position: fixed !important;
        top: calc(62px + env(safe-area-inset-top)) !important;
        left: 50% !important;
        right: auto !important;
        z-index: 11030 !important;
        display: grid !important;
        width: min(420px, calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
        min-width: 0 !important;
        max-height: calc(100dvh - 154px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        gap: 6px !important;
        padding: 10px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid var(--line) !important;
        border-radius: 20px !important;
        background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
        box-shadow: 0 22px 56px rgba(15, 23, 42, 0.2) !important;
        transform: translateX(-50%) !important;
        overscroll-behavior: contain;
    }
    .topbar .user-menu[open] .user-menu-panel {
        top: calc(58px + env(safe-area-inset-top)) !important;
        left: auto !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        width: min(252px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
        max-height: calc(100dvh - 138px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        gap: 2px !important;
        padding: 6px !important;
        border-radius: 17px !important;
        transform: none !important;
    }
    .topbar .user-menu-panel > .user-menu-view {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
    .topbar .user-menu-panel :where(a, .user-menu-theme-toggle, .user-menu-nav-button) {
        width: 100%;
        min-height: 42px;
        padding: 6px 8px;
        border-radius: 11px;
        text-align: left;
    }
    .topbar .user-menu-panel .user-menu-level { min-height: 52px; }
    .topbar-context-panel :where(form, label, select, .btn) { width: 100%; min-width: 0; }
    .topbar-context-panel :where(form, label) { display: grid; gap: 6px; }
    .topbar-context-panel :where(select, .btn) { min-height: 44px; }
    body.mobile-keyboard-open nav.bottom-nav.mobile-liquid-nav {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate(-50%, calc(100% + env(safe-area-inset-bottom))) !important;
    }
    body.mobile-sheet-open { overflow: hidden; }
    .dashboard-mobile-home,
    .analytics-mobile-root,
    .team-mobile-root,
    .profile-mobile-root { display: grid; gap: 12px; }
    body.layout-edit-active :where(.analytics-mobile-root, .team-mobile-root, .profile-mobile-root) { display: none !important; }
    .mobile-home-greeting { display: grid; gap: 2px; padding: 2px 2px 4px; }
    .mobile-home-greeting p,
    .mobile-home-greeting h1,
    .mobile-home-greeting small { margin: 0; }
    .mobile-home-greeting p { color: var(--muted); font-size: 0.7rem; font-weight: 750; }
    .mobile-home-greeting h1 { font-size: var(--ui-page-title-size); line-height: 1.18; }
    .mobile-home-greeting small { color: var(--muted); font-size: var(--ui-secondary-text-size); }
    body[data-page="team"] .team-page-identity-hero.mobile-home-greeting {
        position: relative;
        isolation: isolate;
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        gap: 1px 10px;
        min-height: 84px;
        overflow: hidden;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 17px;
        background: var(--surface);
    }
    body[data-page="team"] .team-page-identity-hero.mobile-home-greeting > :is(p, h1, small) { grid-column: 2; position: relative; z-index: 2; min-width: 0; }
    body[data-page="team"] .team-page-identity-hero.mobile-home-greeting > .team-page-icon { grid-column: 1; grid-row: 1 / 4; align-self: center; }
    body[data-page="team"] .team-page-identity-hero.mobile-home-greeting.has-cover > :is(p, h1, small) { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.72); }
    .workouts-hero .hero-copy h1 { font-size: var(--ui-page-title-size); line-height: 1.18; }
    .mobile-today-card,
    .mobile-progress-brief,
    .mobile-primary-action,
    .mobile-home-shortcuts { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
    [data-dashboard-mobile-surface][hidden] { display: none !important; }
    .mobile-today-card { display: grid; gap: 12px; padding: 14px; }
    .mobile-today-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 0.72rem; font-weight: 750; }
    .mobile-today-head strong { color: var(--primary-dark); font-size: 1.3rem; }
    .mobile-today-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
    .mobile-today-metrics a { display: grid; gap: 3px; min-width: 0; padding: 4px 10px; color: inherit; text-align: center; text-decoration: none; }
    .mobile-today-metrics a + a { border-left: 1px solid var(--line); }
    .mobile-today-metrics a:nth-child(3n + 1) { border-left: 0; }
    .mobile-today-metrics strong,
    .mobile-today-metrics small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-today-metrics strong { font-size: 1.05rem; }
    .mobile-today-metrics small { color: var(--muted); font-size: 0.62rem; }
    .mobile-primary-action { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 10px 14px; color: #fff; border-color: var(--primary); background: var(--primary); text-decoration: none; }
    .mobile-primary-action > span:first-child { display: grid; gap: 2px; }
    .mobile-primary-action small { color: rgba(255,255,255,.78); font-size: 0.67rem; }
    .mobile-progress-brief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: center; gap: 8px; min-height: 72px; padding: 10px 12px; }
    .mobile-progress-brief > div { display: grid; min-width: 0; }
    .mobile-progress-brief small { overflow: hidden; color: var(--muted); font-size: 0.6rem; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-progress-brief strong { overflow: hidden; font-size: 0.85rem; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-progress-brief a { min-height: 44px; display: grid; place-items: center; color: var(--primary-dark); font-size: 0.68rem; font-weight: 800; }
    .mobile-home-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 8px; }
    .mobile-home-shortcuts a { position: relative; display: grid; place-items: center; align-content: center; gap: 5px; min-width: 0; min-height: 66px; border-radius: 13px; color: var(--ink); text-decoration: none; text-align: center; }
    .mobile-home-shortcuts span { color: var(--primary-dark); font-size: 0.9rem; font-weight: 900; }
    .mobile-home-shortcuts strong { max-width: 100%; overflow: hidden; font-size: 0.6rem; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-home-shortcuts em { position: absolute; top: 5px; right: 7px; display: grid; place-items: center; min-width: 18px; height: 18px; padding-inline: 4px; border-radius: 999px; color: #fff; background: #dc3545; font-size: 0.58rem; font-style: normal; }
    .mobile-widget-feed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; margin-top: 4px; padding: 6px 2px; }
    .mobile-widget-feed-head > div { display: grid; gap: 2px; min-width: 0; }
    .mobile-widget-feed-head p,
    .mobile-widget-feed-head h2 { margin: 0; }
    .mobile-widget-feed-head p { color: var(--muted); font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.045em; }
    .mobile-widget-feed-head h2 { font-size: 1.02rem; }
    .mobile-widget-feed-head > a { display: grid; place-items: center; flex: 0 0 auto; min-height: 44px; padding: 0 12px; border-radius: 13px; color: var(--primary-dark); background: color-mix(in srgb, var(--primary) 9%, var(--surface)); font-size: 0.7rem; font-weight: 850; text-decoration: none; }
    body:not(.layout-edit-active) .dashboard-desktop-root,
    body:not(.layout-edit-active) .team-hierarchy-screen[data-team-section=""] > .team-desktop-root { display: block; }
    body:not(.layout-edit-active) .dashboard-desktop-root > .motivation-band,
    .team-hierarchy-screen[data-team-section=""] > .team-desktop-root > .hero-panel { display: none !important; }
    body:not(.layout-edit-active) .dashboard-desktop-root .dashboard-layout,
    .team-hierarchy-screen[data-team-section=""] .team-layout-grid,
    .profile-hierarchy-screen[data-profile-section=""] > .profile-home-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
    body:not(.layout-edit-active) .dashboard-desktop-root :where([data-dashboard-widget="kpis"], .dashboard-quick-actions) { display: none !important; }
    body:not(.layout-edit-active):has(.dashboard-mobile-home [data-dashboard-mobile-surface="mobile_today"][hidden]) .dashboard-desktop-root [data-dashboard-widget="kpis"] { display: grid !important; }
    :where(.dashboard-layout, .dashboard-layout > *, .team-layout-grid, .team-layout-grid > *, .profile-hierarchy-screen, .profile-hero, .profile-title, .profile-title .hero-copy, .profile-mobile-root, .profile-home-grid, .profile-home-card) {
        min-width: 0;
        max-width: 100%;
    }
    .profile-hero { width: 100%; }
    .profile-title { width: 100%; }
    .profile-title .hero-copy { overflow: hidden; }
    .profile-title :where(.profile-level, .profile-level-trigger, .profile-xp, .profile-team-badges) { min-width: 0; max-width: 100%; }
    .profile-team-badge { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dashboard-layout .quests-widget :where(.quest-item, .quest-body, .quest-title, .quest-bar) { min-width: 0; max-width: 100%; }
    .dashboard-layout .quests-widget .quest-item { width: 100%; }
    .analytics-page[data-analytics-view-section=""] > .analytics-summary-section { display: none !important; }
    .analytics-page[data-analytics-view-section=""] > .analytics-section:not(.analytics-summary-section) { margin: 0; }
    .analytics-page[data-analytics-view-section=""] .analytics-grid { grid-template-columns: 1fr; }
    body[data-page="profile"]:not(.layout-edit-active) .profile-hierarchy-screen[data-profile-section=""] > :where(.profile-challenge-switcher, .profile-data-overview, .profile-layout-editbar) { display: none !important; }
    .mobile-hub-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 88px; gap: 8px; }
    .mobile-hub-section-grid > .hierarchy-nav-row { position: relative; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; height: 100%; min-height: 88px; padding: 9px; border-color: color-mix(in srgb, var(--item-tone, var(--primary)) 24%, var(--line)); }
    .mobile-hub-section-grid > .hierarchy-nav-row:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .mobile-hub-section-grid .hierarchy-nav-icon { width: 38px; height: 38px; color: var(--item-tone, var(--primary-dark)); background: color-mix(in srgb, var(--item-tone, var(--primary)) 12%, var(--surface)); }
    .mobile-hub-section-grid .hierarchy-nav-copy small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .mobile-hub-section-grid .hierarchy-nav-meta { position: absolute; top: 7px; right: 8px; max-width: 52px; padding: 2px 5px; border-radius: 999px; color: var(--item-tone, var(--muted)); background: color-mix(in srgb, var(--item-tone, var(--primary)) 9%, var(--surface)); font-size: 0.58rem; }
    .mobile-hub-section-grid .hierarchy-nav-chevron { display: none; }
    .settings-nav-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-auto-rows: 88px; gap: 8px; }
    .settings-nav-item {
        grid-template-columns: 38px minmax(0, 1fr) 18px;
        gap: 8px;
        height: 100%;
        min-height: 88px;
        padding: 9px 11px;
        border-radius: 16px;
        border-color: color-mix(in srgb, var(--settings-tone, var(--primary)) 24%, var(--line));
        box-shadow: none;
    }
    .settings-nav-icon { width: 38px; height: 38px; border-radius: 13px; color: var(--settings-tone, var(--primary-dark)); background: color-mix(in srgb, var(--settings-tone, var(--primary)) 12%, var(--surface)); }
    .settings-nav-icon svg { width: 21px; height: 21px; }
    .settings-nav-copy small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .settings-nav-arrow { font-size: 1.3rem; line-height: 1; }
    [data-tone="blue"] { --item-tone: #3b82f6; }
    [data-tone="green"] { --item-tone: #10b981; }
    [data-tone="orange"] { --item-tone: #f97316; }
    [data-tone="amber"] { --item-tone: #eab308; }
    [data-tone="violet"] { --item-tone: #8b5cf6; }
    [data-tone="red"] { --item-tone: #ef4444; }
    [data-tone="cyan"] { --item-tone: #0891b2; }
    [data-tone="slate"] { --item-tone: #64748b; }
    .mobile-home-shortcuts [data-tone] span { color: var(--item-tone); }
    .mobile-home-shortcuts [data-tone] { border: 1px solid color-mix(in srgb, var(--item-tone) 18%, var(--line)); background: color-mix(in srgb, var(--item-tone) 6%, var(--surface)); }
    :where(.dashboard-layout > [data-dashboard-widget], .team-layout-grid > [data-team-widget], .profile-home-grid > [data-profile-block], .analytics-layout-item) { --widget-accent: var(--primary); }
    :where(.dashboard-layout > [data-dashboard-widget], .team-layout-grid > [data-team-widget], .profile-home-grid > [data-profile-block], .analytics-layout-item):not([style*="display:none"]) { border-top: 2px solid color-mix(in srgb, var(--widget-accent) 72%, var(--line)); }
    :where([data-dashboard-widget="kpis"], [data-dashboard-widget="training_progress"], [data-team-widget="metrics"], [data-team-widget="daily_charts"], [data-profile-block="training_progress"], [data-analytics-section="activity"]) { --widget-accent: #3b82f6; }
    :where([data-dashboard-widget="training_rank"], [data-dashboard-widget="achievements"], [data-team-widget="leaderboard"], [data-team-widget="achievements"], [data-profile-block="training_rank"], [data-profile-block="achievements"]) { --widget-accent: #eab308; }
    :where([data-dashboard-widget="quests"], [data-dashboard-widget="weekly"], [data-team-widget="challenges"], [data-team-widget="members"], [data-profile-block="goals"], [data-profile-block="friends"], [data-analytics-section="nutrition"]) { --widget-accent: #10b981; }
    :where([data-dashboard-widget="season"], [data-dashboard-widget="ranking"], [data-team-widget="weekly_charts"], [data-profile-block="activity"], [data-analytics-section="body"]) { --widget-accent: #8b5cf6; }
    :where([data-dashboard-widget="duels"], [data-dashboard-widget="competitions"], [data-team-widget="competitions"], [data-profile-block="duels"], [data-profile-block="competitions"], [data-analytics-section="comparison"]) { --widget-accent: #ef4444; }
    :where([data-dashboard-widget="approvals"], [data-team-widget="active_challenge"], [data-profile-block="setup"], [data-analytics-section="food"]) { --widget-accent: #f97316; }
    .dashboard-layout > [data-dashboard-widget="training_progress"],
    .dashboard-layout > [data-dashboard-widget="training_rank"],
    .dashboard-layout > [data-dashboard-widget="duels"],
    .dashboard-layout > [data-dashboard-widget="competitions"] { border-top: 0; }
    .workouts-mobile-subheader { display: grid; }
    .workouts-mobile-subheader { margin-bottom: 0; }
    .workouts-library-pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
    .workouts-library-pagination .btn { min-height: 44px; }
    .workouts-library-pagination span { color: var(--muted); font-size: 0.7rem; }
    .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-desktop-root > .hero-panel,
    .profile-hierarchy-screen[data-profile-section]:not([data-profile-section=""]) > .profile-hero,
    .profile-hierarchy-screen[data-profile-section]:not([data-profile-section=""]) > .context-back-nav { display: none !important; }
    .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-desktop-root { display: block; }
    .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-layout-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
    .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-layout-item { grid-column: 1 !important; }
    .profile-hierarchy-screen[data-profile-section]:not([data-profile-section=""]) > .profile-challenge-switcher { display: none; }
    .profile-native-section { margin: 0; padding: 12px; border-radius: 18px; background: var(--surface); box-shadow: none; }
    .profile-native-section-head { min-height: 56px; }
    .panel > .panel-head :where(h2, h3) { font-size: var(--ui-section-title-size); line-height: 1.2; }
    .settings-row strong { font-size: var(--ui-menu-title-size); line-height: 1.25; }
    .settings-row small { font-size: var(--ui-secondary-text-size); line-height: 1.35; }
    .analytics-page[data-analytics-view-section=""] > .analytics-mobile-root { display: grid; }
    .analytics-page[data-analytics-view-section]:not([data-analytics-view-section=""]) > .analytics-mobile-root { display: none; }
    .analytics-page[data-analytics-view-section]:not([data-analytics-view-section=""]) > .analytics-section { margin: 0; }
    .analytics-page[data-analytics-view-section]:not([data-analytics-view-section=""]) .analytics-grid { grid-template-columns: 1fr; }
    .analytics-chart-card { min-width: 0; overflow: hidden; box-shadow: none; }
    .analytics-chart-card canvas { max-width: 100% !important; }
}

@media (max-width: 700px) {
    body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
    nav.bottom-nav.mobile-liquid-nav {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: calc(68px + env(safe-area-inset-bottom)) !important;
        border-radius: 22px 22px 0 0 !important;
        transform: none !important;
    }
    nav.bottom-nav.mobile-liquid-nav > .liquid-nav-pill {
        align-items: start !important;
        height: calc(68px + env(safe-area-inset-bottom)) !important;
        min-height: calc(68px + env(safe-area-inset-bottom)) !important;
        padding: 4px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 22px 22px 0 0 !important;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.11) !important;
    }
    body.mobile-keyboard-open nav.bottom-nav.mobile-liquid-nav {
        transform: translateY(calc(100% + env(safe-area-inset-bottom))) !important;
    }
    .container.container-with-nav { padding-inline: 16px !important; }
    .team-settings-screen .hierarchy-page-header-root { grid-template-columns: minmax(0, 1fr) auto; }
    .team-settings-team-link { width: 44px; min-width: 44px; padding: 0; overflow: hidden; font-size: 0; }
    .team-settings-team-link::before { content: "↗"; font-size: 1rem; }
    .team-settings-nav-grid,
    .admin-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 108px; gap: 8px; }
    .team-settings-nav-grid .settings-nav-item,
    .admin-group-grid .settings-nav-item {
        position: relative;
        grid-template-columns: 36px minmax(0, 1fr);
        align-content: center;
        gap: 8px;
        min-height: 108px;
        padding: 9px;
    }
    .team-settings-nav-grid .settings-nav-icon,
    .admin-group-grid .settings-nav-icon { width: 36px; height: 36px; border-radius: 12px; }
    .team-settings-nav-grid .settings-nav-icon svg,
    .admin-group-grid .settings-nav-icon svg { width: 19px; height: 19px; }
    .team-settings-nav-grid .settings-nav-copy small,
    .admin-group-grid .settings-nav-copy small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .team-settings-nav-grid .settings-nav-meta,
    .admin-group-grid .settings-nav-meta { position: absolute; top: 7px; right: 8px; min-width: 22px; min-height: 22px; padding-inline: 5px; font-size: 0.58rem; }
    .team-settings-nav-grid .settings-nav-arrow,
    .admin-group-grid .settings-nav-arrow { display: none; }
    .team-member-add-form { grid-template-columns: 1fr; }
    .team-member-add-form .btn { width: 100%; }
    .team-danger-row { align-items: stretch; flex-direction: column; }
    .team-danger-action-form { grid-template-columns: 1fr; }
    .team-mobile-root .hierarchy-nav-row,
    .profile-mobile-root .hierarchy-nav-row { min-height: 60px; }
    .workouts-overview-kpi-strip { border-radius: 14px; box-shadow: none; }
    .social-hub-screen { gap: 12px; }
    .profile-home-card-head { flex-wrap: wrap; }
    .profile-home-card-head .inline-actions-mini {
        flex: 1 1 180px;
        min-width: 0;
        flex-wrap: wrap;
    }
    .profile-home-card-head .inline-actions-mini .btn {
        flex: 1 1 90px;
        min-width: 0;
        min-height: 44px;
    }
}

@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
    nav.bottom-nav.mobile-liquid-nav,
    nav.bottom-nav.mobile-liquid-nav > .liquid-nav-pill { height: 58px !important; min-height: 58px !important; }
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-item,
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-plus,
    nav.bottom-nav.mobile-liquid-nav .liquid-nav-plus > summary { height: 50px !important; min-height: 50px !important; }
    nav.bottom-nav.mobile-liquid-nav .bottom-nav-plus-icon {
        width: 32px !important;
        height: 32px !important;
        margin: 0;
    }
    nav.bottom-nav.mobile-liquid-nav details.bottom-nav-plus[open] > .bottom-nav-plus-menu.mobile-quick-sheet {
        bottom: calc(100% + 8px) !important;
        max-height: calc(100dvh - 84px) !important;
    }
    .topbar .user-menu[open] .user-menu-panel,
    .topbar-context[open] .topbar-context-panel {
        top: calc(54px + env(safe-area-inset-top)) !important;
        max-height: calc(100dvh - 68px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 360px) {
    nav.bottom-nav.mobile-liquid-nav .nav-label { font-size: 0.58rem !important; }
    .hierarchy-nav-row { grid-template-columns: 38px minmax(0, 1fr) auto 14px; gap: 8px; padding-inline: 9px; }
    .hierarchy-nav-icon { width: 38px; height: 38px; }
    .hierarchy-nav-meta { max-width: 66px; }
    .mobile-home-shortcuts strong { font-size: 0.55rem; }
}

body[data-theme="dark"] :where(.hierarchy-page-header .hierarchy-back, .hierarchy-nav-row, .hierarchy-status-strip, .mobile-kpi-grid > a, .mobile-kpi-grid > div, .native-list-card, .mobile-today-card, .mobile-progress-brief, .mobile-home-shortcuts, .profile-native-section),
body.theme-active-dark :where(.hierarchy-page-header .hierarchy-back, .hierarchy-nav-row, .hierarchy-status-strip, .mobile-kpi-grid > a, .mobile-kpi-grid > div, .native-list-card, .mobile-today-card, .mobile-progress-brief, .mobile-home-shortcuts, .profile-native-section) {
    color: var(--dark-ui-text, var(--ink));
    border-color: var(--dark-ui-border, var(--line));
    background: var(--dark-ui-surface, var(--surface));
}

/* The fixed topbar follows reading direction: down hides, up reveals. */
.topbar {
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition: transform 210ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease;
}
body.topbar-scroll-hidden .topbar {
    pointer-events: none;
    transform: translate3d(0, calc(-100% - 2px), 0);
    box-shadow: none;
}
body.topbar-scroll-hidden:is(.app-scroll-locked, .layout-edit-active) .topbar {
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .topbar { transition: none; }
}

/* Admin / Training: dense management tools with progressive disclosure. */
.admin-training-dashboard {
    max-width: 1120px;
}

.admin-training-block {
    margin: 0;
    overflow: clip;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
}

details.admin-training-block > summary,
.admin-training-block > .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 64px;
    margin: 0;
    padding: 0.85rem 1rem;
    cursor: pointer;
    list-style: none;
}

details.admin-training-block > summary::-webkit-details-marker { display: none; }
details.admin-training-block > summary > span:first-child {
    display: grid;
    gap: 0.12rem;
}
details.admin-training-block > summary small { color: var(--muted); font-weight: 500; }
details.admin-training-block[open] > summary { border-bottom: 1px solid var(--line); }
.admin-training-block > form,
.admin-training-block > .admin-season-manager { padding: 1rem; }
.settings-panel .admin-rank-tier-form { width: 100%; max-width: none; }

.admin-training-feature > .panel-head { cursor: default; border-bottom: 1px solid var(--line); }
.admin-training-feature > .panel-head > span:first-child { display: grid; gap: 0.12rem; min-width: 0; }
.admin-training-feature > .panel-head small { color: var(--muted); font-weight: 500; }
.admin-media-search-form { width: 100%; max-width: none; }
.admin-media-search-form .standalone-check > span { display: grid; min-width: 0; gap: 0.14rem; }
.admin-media-search-form .standalone-check small { color: var(--muted); font-weight: 500; line-height: 1.4; }
.admin-media-search-providers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.admin-media-search-providers > span { display: grid; min-width: 0; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 0.05rem 0.55rem; padding: 0.6rem; border: 1px solid var(--line); border-radius: 13px; font-size: 0.72rem; font-weight: 800; }
.admin-media-search-providers > span > b { grid-row: 1 / 3; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #fff; background: #64748b; }
.admin-media-search-providers > span:first-child > b { background: linear-gradient(145deg, #4285f4, #2563eb); }
.admin-media-search-providers > span:nth-child(2) > b { padding-left: 2px; background: linear-gradient(145deg, #ff1744, #dc002c); font-size: 0.62rem; }
.admin-media-search-providers small { overflow: hidden; color: var(--muted); font-size: 0.61rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.admin-media-search-providers .is-ready small { color: var(--success, #15803d); }
.admin-media-search-providers .is-missing { border-style: dashed; }

.admin-rank-tier-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.admin-rank-tier-row {
    display: grid;
    grid-template-columns: minmax(92px, 1fr) 72px 72px auto;
    align-items: end;
    gap: 0.55rem;
    min-width: 0;
    margin: 0;
    padding: 0.7rem;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.admin-rank-tier-row legend {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-inline: 0.25rem;
    font-weight: 800;
}
.admin-rank-tier-row label { min-width: 0; font-size: 0.72rem; }
.admin-rank-tier-row input:not([type="checkbox"]) { min-width: 0; }
.admin-rank-tier-row input[type="color"] { min-width: 52px; padding: 0.2rem; }
.rank-dot {
    width: 0.7rem;
    height: 0.7rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--rank-color, #64748b);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rank-color, #64748b) 18%, transparent);
}

.admin-season-form { align-items: end; }
.admin-season-list { gap: 0.55rem; }
.admin-season-item { padding: 0; overflow: clip; }
.admin-season-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 58px;
    padding: 0.7rem 0.8rem;
    cursor: pointer;
    list-style: none;
}
.admin-season-item > summary::-webkit-details-marker { display: none; }
.admin-season-item > summary > span:first-child { display: grid; gap: 0.08rem; }
.admin-season-item > summary small { color: var(--muted); }
.admin-season-item[open] > summary { border-bottom: 1px solid var(--line); }
.admin-season-item > form { margin: 0.75rem; }

.admin-training-exercises {
    overflow: hidden;
}
.admin-training-exercises-body {
    min-height: 0;
    padding-bottom: 0.45rem;
}
.admin-training-exercises-body > .panel-head {
    position: sticky;
    z-index: 2;
    top: 0;
    min-height: 52px;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(12px);
}
.admin-training-exercise-list {
    min-height: 0;
    max-height: min(620px, calc(100dvh - 230px));
    padding-right: 0.25rem;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-color: color-mix(in srgb, var(--primary) 48%, var(--line)) transparent;
    scrollbar-width: thin;
}
.admin-training-exercise-list::-webkit-scrollbar {
    width: 10px;
}
.admin-training-exercise-list::-webkit-scrollbar-track {
    background: transparent;
}
.admin-training-exercise-list::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 48%, var(--line));
    background-clip: padding-box;
}
.admin-training-exercise-list::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--primary) 68%, var(--line));
    background-clip: padding-box;
}
.admin-training-exercise-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.7rem;
}
.admin-training-exercise-row > img,
.admin-training-exercise-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
}
.admin-training-exercise-icon {
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    background: var(--surface-soft, var(--surface));
    font-size: 1.1rem;
}
.admin-training-exercise-copy { display: grid; gap: 0.08rem; min-width: 0; }
.admin-training-exercise-copy strong,
.admin-training-exercise-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.admin-training-exercise-form { max-width: 1120px; }
.admin-training-core-fields { grid-template-columns: repeat(4, minmax(130px, 1fr)); }
.admin-training-guide-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-training-muscles,
.admin-training-media-fields {
    margin: 0;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 16px;
}
.admin-training-muscles legend { padding-inline: 0.25rem; font-weight: 800; }
.admin-training-media-fields { display: grid; gap: 0.75rem; }
.admin-training-image-preview {
    width: min(100%, 420px);
    max-height: 240px;
    border-radius: 14px;
    object-fit: cover;
    background: var(--surface-soft, var(--surface));
}
.admin-training-toggle-fields { grid-template-columns: repeat(2, max-content); }

@media (max-width: 900px) {
    .admin-rank-tier-list { grid-template-columns: 1fr; }
    .admin-training-core-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-training-guide-fields { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    details.admin-training-block > summary,
    .admin-training-block > .panel-head { min-height: 58px; padding: 0.7rem 0.75rem; }
    .admin-training-block > form,
    .admin-training-block > .admin-season-manager { padding: 0.7rem; }
    .admin-rank-tier-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
    }
    .admin-rank-tier-row .check { align-self: end; min-height: 44px; }
    .admin-training-core-fields { grid-template-columns: 1fr; }
    .admin-training-toggle-fields { grid-template-columns: 1fr; }
    .admin-media-search-providers { grid-template-columns: 1fr; }
    .admin-training-exercise-list {
        max-height: none;
        padding-right: 0;
        overflow: visible;
        scrollbar-gutter: auto;
    }
    .admin-training-exercise-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .admin-training-exercise-row > img,
    .admin-training-exercise-icon { width: 40px; height: 40px; }
    .admin-training-exercise-row .badge { display: none; }
    .admin-training-exercise-copy small { font-size: 0.67rem; }
    .admin-season-item > form.grid-inline { grid-template-columns: 1fr; }
}

/* Profile and Team cleanup: one-line friend rows, a deliberate tablet hero and
   complete/equal-height team metrics at every responsive breakpoint. */
.team-leaderboard-metrics {
    grid-auto-rows: 1fr;
    align-items: stretch;
}
.team-leaderboard-metrics > span {
    height: 100%;
    min-height: 58px;
    align-content: center;
}

@media (max-width: 899px) {
    .team-widget-metrics.metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .team-widget-metrics .team-metric-steps,
    .team-widget-metrics .team-metric-distance {
        display: grid !important;
    }
    .team-mobile-combo-card {
        display: none !important;
    }
}

@media (min-width: 700px) and (max-width: 899px) {
    body[data-page="profile"] .profile-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 1rem !important;
    }
    body[data-page="profile"] .profile-hero-actions {
        display: inline-flex;
        width: auto;
        max-width: 340px;
        justify-self: end;
        align-items: flex-start;
    }
    body[data-page="profile"] .profile-friend-actions-hero {
        width: auto;
        max-width: 100%;
        flex-wrap: nowrap;
    }
}

@media (max-width: 640px) {
    .profile-friend-row {
        min-height: 52px;
        align-items: center;
        flex-direction: row;
    }
    .profile-friend-row .profile-friend-actions {
        flex: 0 0 auto;
        width: auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }
    .profile-friend-row .profile-friend-card-action,
    .profile-friend-row .profile-friend-action-form {
        flex: 0 0 auto;
    }
    .profile-friend-row .profile-friend-action-form .btn {
        width: auto;
        min-width: 0;
    }
}

.profile-training-rank-card,
.profile-training-progress-card {
    overflow: hidden;
}
.profile-training-rank-main {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
}
.profile-training-rank-emblem {
    display: grid;
    place-items: center;
    min-height: 96px;
    padding: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--rank-color) 45%, var(--line));
    border-radius: 20px;
    color: var(--rank-color);
    background: color-mix(in srgb, var(--rank-color) 10%, var(--surface));
    text-align: center;
}
.profile-training-rank-emblem strong,
.profile-training-rank-emblem small {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.profile-training-rank-emblem b {
    font-size: 1.65rem;
    line-height: 1;
}
.profile-training-rank-detail {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}
.profile-training-rank-detail small { color: var(--muted); }
.profile-training-rank-bar {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.profile-training-rank-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--rank-color);
}
.profile-training-muscles,
.profile-training-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.38rem;
}
.profile-training-muscles > span,
.profile-training-stat-grid > span {
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 54px;
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: color-mix(in srgb, var(--ink) 3%, var(--surface));
}
.profile-training-muscles small,
.profile-training-stat-grid small,
.profile-training-recent small {
    color: var(--muted);
    font-size: 0.64rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-training-muscles strong,
.profile-training-stat-grid strong {
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-training-stat-grid strong { font-size: 1.08rem; }
.profile-training-recent {
    display: grid;
    gap: 0.3rem;
}
.profile-training-recent > span,
.profile-training-recent > a {
    display: grid;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    min-height: 38px;
    padding-top: 0.3rem;
    border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.profile-training-recent > span {
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
}
.profile-training-recent > a {
    margin-inline: -0.35rem;
    padding-inline: 0.35rem;
    border-radius: 9px;
    color: var(--ink);
    text-decoration: none;
}
.profile-training-recent > a:hover,
.profile-training-recent > a:focus-visible {
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    outline: none;
}
.profile-training-recent > a > b {
    color: var(--muted);
    font-size: 1.15rem;
    transition: transform 0.18s ease;
}
.profile-training-recent > a:hover > b,
.profile-training-recent > a:focus-visible > b {
    color: var(--primary);
    transform: translateX(2px);
}
.profile-training-recent strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-training-empty {
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}
.profile-setup-more {
    border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    padding-top: 0.38rem;
}
.profile-setup-more > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 12px;
    color: var(--primary-dark);
    font-size: 0.76rem;
    font-weight: 850;
    cursor: pointer;
    list-style: none;
}
.profile-setup-more > summary::-webkit-details-marker { display: none; }
.profile-setup-more > summary span:last-child,
.profile-setup-more[open] > summary span:first-child { display: none; }
.profile-setup-more[open] > summary span:last-child { display: inline; }
.profile-setup-more > .profile-home-facts { margin-top: 0.45rem; }

@media (max-width: 440px) {
    .profile-training-rank-main { grid-template-columns: 90px minmax(0, 1fr); }
    .profile-training-rank-emblem { min-height: 84px; }
    .profile-training-rank-emblem b { font-size: 1.4rem; }
    .profile-training-muscles,
    .profile-training-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 340px) {
    .workouts-overview-kpi-strip > span { padding-inline: 0.48rem; }
    .workouts-overview-kpi-strip strong { font-size: 0.96rem; }
    .workouts-overview-kpi-strip small { font-size: 0.53rem; }
}
body[data-theme="dark"] .workouts-overview-kpi-strip,
body.theme-active-dark .workouts-overview-kpi-strip {
    background: var(--dark-ui-surface, var(--surface));
    border-color: var(--dark-ui-border, var(--line));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

/* Layout editor controls: real card handles plus explicit add/remove actions. */
.layout-card-controls { display: none; }
.layout-visibility-toggle {
    min-width: 76px;
    min-height: 34px;
    padding: 0.35rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line));
    border-radius: 999px;
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
    font: inherit;
    font-size: 0.7rem;
    font-weight: 850;
    cursor: pointer;
}
.layout-visibility-toggle[data-visible="1"] {
    color: var(--muted);
    border-color: var(--line);
    background: color-mix(in srgb, var(--ink) 4%, var(--surface));
}

@media (min-width: 900px) {
    body[data-page="workouts"] .workouts-mobile-subheader { display: none !important; }
    body.layout-edit-active .layout-card-controls {
        position: absolute;
        top: 7px;
        right: 8px;
        z-index: 80;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px;
        border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
        border-radius: 11px;
        background: color-mix(in srgb, var(--surface) 90%, transparent);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        pointer-events: auto !important;
    }
    body.layout-edit-active .layout-card-drag-handle,
    body.layout-edit-active .layout-card-remove {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        pointer-events: auto !important;
    }
    body.layout-edit-active .layout-card-drag-handle {
        color: #fff;
        background: var(--primary);
        cursor: grab;
        font-size: 0.85rem;
        font-weight: 900;
    }
    body.layout-edit-active .layout-card-remove {
        border: 0;
        color: #9f2d36;
        background: color-mix(in srgb, #ef4444 10%, var(--surface));
        cursor: pointer;
        font-size: 1.05rem;
        line-height: 1;
    }
    body.layout-edit-active .layout-card-remove:hover,
    body.layout-edit-active .layout-card-remove:focus-visible {
        color: #fff;
        background: #c53b45;
    }
    body.layout-edit-active .dashboard-layout > [data-dashboard-widget]::before,
    body.layout-edit-active .analytics-page > [data-analytics-section]::before,
    body.layout-edit-active .profile-home-grid > [data-profile-block]::before,
    body.layout-edit-active .team-layout-grid > [data-team-widget]::before {
        content: none;
        display: none;
    }
    body.layout-edit-active .layout-card-controls :where(button, span) {
        pointer-events: auto !important;
    }
    body.layout-edit-active .dashboard-layout > [data-dashboard-widget] > .layout-card-controls > .layout-card-remove,
    body.layout-edit-active .analytics-page > [data-analytics-section] > .layout-card-controls > .layout-card-remove,
    body.layout-edit-active .profile-home-grid > [data-profile-block] > .layout-card-controls > .layout-card-remove,
    body.layout-edit-active .team-layout-grid > [data-team-widget] > .layout-card-controls > .layout-card-remove {
        pointer-events: auto !important;
    }
    body.layout-edit-active :where(.dashboard-layout-editor-item, .team-layout-editor-item, .analytics-layout-editor-item) {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.55rem;
    }
    body.layout-edit-active :where(.dashboard-layout-mobile-actions, .team-layout-mobile-actions, .analytics-layout-mobile-actions) {
        display: none !important;
    }
}

body[data-theme="dark"] .layout-visibility-toggle,
body.theme-active-dark .layout-visibility-toggle,
body[data-theme="dark"] .layout-card-controls,
body.theme-active-dark .layout-card-controls {
    color: var(--dark-ui-text, var(--ink));
    border-color: var(--dark-ui-border, var(--line));
    background: var(--dark-ui-surface-strong, var(--surface));
}

/* Challenge Log mobile: the accordion layout and its sizing are owned by the
   "Challenge Log mobile" @media (max-width: 900px) block further up (search
   .training-sheet-wrap.week-editor-grid); this used to be a second, older
   copy of the same rules built for a horizontal-scroll table instead of the
   accordion, and it re-broke things the newer block had already fixed (the
   habits list got clipped back into a horizontal strip, the custom-habit
   toggle's tap target lost its label, and the weekday/date column read
   blank on tablet widths between 700-900px). Kept only what was not already
   covered above. */
@media (max-width: 700px) {
    .training-sheet-panel { border-radius: 18px; }
    .training-sheet-table .sheet-review-details > summary {
        min-height: 44px;
        padding: 0.4rem 0.5rem;
    }
}

/* ==========================================================================
   Shared widget rhythm and typography

   Page modules used to carry their own near-identical values (10px, 0.85rem,
   0.9rem, 1.1rem). Keeping the public contract here makes equivalent cards
   align without changing the denser rhythm inside tables, lists or KPI rows.
   ========================================================================== */
.screen.stack-lg {
    gap: var(--ui-screen-gap);
}

.dashboard-layout,
.analytics-grid,
.profile-home-grid,
.profile-data-grid,
.social-dashboard-grid,
.team-layout-grid,
.settings-nav-grid,
.team-settings-nav-grid,
.admin-group-grid,
.metric-grid,
.grid-two,
.duels-columns,
.workouts-start-grid,
.achievement-grid,
.achievement-page-grid,
.achievement-summary-strip,
.hierarchy-nav-list,
.spa-shell .admin-section-list-menu,
.stack.entry-data-form {
    gap: var(--ui-widget-gap);
}

/* A few responsive components use a two-class selector, so mirror that
   specificity while keeping their column definitions untouched. */
.dashboard-kpis.metric-grid,
.team-widget-metrics.metric-grid,
.training-summary-screen .metric-grid {
    gap: var(--ui-widget-gap);
}

.panel > :is(h2, h3),
.panel > .panel-head :is(h2, h3),
.dashboard-layout > [data-dashboard-widget] h2,
.dashboard-layout > [data-dashboard-widget] h3,
.analytics-layout-item > .analytics-section-title h2,
.analytics-chart-card h3,
.profile-home-grid > [data-profile-block] h2,
.social-dashboard-grid > .social-overview-card h2,
.team-layout-grid > [data-team-widget] h2,
.workouts-screen > .panel h2,
.achievements-page-panel .panel-head h2,
.mobile-widget-feed-head h2 {
    margin-block: 0;
    font-family: var(--ui-heading-font);
    font-size: var(--ui-widget-title-size);
    font-weight: 700;
    line-height: var(--ui-widget-title-line-height);
    letter-spacing: 0;
}

.panel > .panel-head .eyebrow,
.dashboard-layout > [data-dashboard-widget] .eyebrow,
.profile-home-grid > [data-profile-block] .eyebrow,
.social-dashboard-grid > .social-overview-card .eyebrow,
.team-layout-grid > [data-team-widget] .eyebrow,
.workouts-screen > .panel .eyebrow {
    font-family: var(--ui-body-font);
    font-size: var(--ui-caption-size);
    line-height: 1.3;
}

.admin-section-list-menu .settings-row > span:first-child {
    font-family: var(--ui-heading-font);
    font-size: var(--ui-menu-title-size);
    font-weight: 700;
    line-height: 1.22;
}

@media (max-width: 899px) {
    :root {
        --ui-screen-gap: 0.75rem;
        --ui-widget-gap: 0.75rem;
    }
}

/* Final cascade guarantees for the responsive components introduced above. */
.dashboard-achievements-grid.dashboard-achievement-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.dashboard-achievement-card.dashboard-achievement-row {
    grid-template-columns: 54px minmax(0, 1fr);
    min-height: 76px;
    padding: 0.65rem;
}

@media (max-width: 700px) {
    .dashboard-achievements-grid.dashboard-achievement-rows {
        grid-template-columns: 1fr;
    }

    .inline-list-toggle {
        min-height: 44px;
        padding-block: 0.55rem;
    }

    /* The week editor's mobile accordion layout is defined once, in the
       "Challenge Log mobile" @media (max-width: 900px) block above; this used
       to be a second, older copy of the same rules (missing the habits-list
       and custom-habit-toggle fixes made since), and the two disagreed with
       each other - e.g. it forced .sheet-habits-list back into a clipped
       horizontal strip and blanked out the weekday/date column on desktop.
       Removed rather than patched again to stop the drift. */

    body.has-workout-filter-sheet::after {
        z-index: 9998;
        pointer-events: none;
    }

    body.has-workout-filter-sheet :is(.topbar, .mobile-bottom-nav) {
        pointer-events: none;
    }

    .workouts-filter-sheet {
        z-index: 9999;
    }
}

/* Compact responsive components. Kept after legacy page rules as the canonical layer. */
.compact-metrics-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ui-soft-border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.compact-metrics-row > span,
.compact-metrics-row > span:nth-child(odd),
.compact-metrics-row > span:nth-child(n + 3) {
    display: grid;
    align-content: center;
    gap: 0.22rem;
    min-width: 0;
    min-height: 64px;
    padding: 0.5rem 0.42rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.compact-metrics-row > span + span {
    border-inline-start: 1px solid var(--ui-soft-border);
}

.compact-metrics-row strong {
    order: -1;
    overflow: hidden;
    font-size: clamp(0.98rem, 3.5vw, 1.2rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.compact-metrics-row small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: clamp(0.52rem, 1.6vw, 0.62rem);
    font-weight: 780;
    line-height: 1.2;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Workout overview: immediate work first, everything secondary disclosed on
   demand. This keeps the home useful even with many routines and statistics. */
.workouts-overview-priority {
    display: grid;
    gap: 0.62rem;
    min-width: 0;
}

.workouts-overview-disclosure {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.workouts-overview-disclosure > summary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 0.62rem;
    min-height: 58px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--ui-soft-border, var(--line));
    border-radius: var(--ui-panel-radius, 16px);
    background: var(--surface);
    box-shadow: none;
    cursor: pointer;
    list-style: none;
}

.workouts-overview-disclosure[open] > summary {
    margin-bottom: 0.62rem;
}

.workouts-overview-disclosure > summary::-webkit-details-marker {
    display: none;
}

.workouts-overview-disclosure > summary > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.workouts-overview-disclosure > summary strong,
.workouts-overview-disclosure > summary small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workouts-overview-disclosure > summary strong {
    color: var(--ink);
    font-size: 0.8rem;
}

.workouts-overview-disclosure > summary small {
    color: var(--muted);
    font-size: 0.66rem;
}

.workouts-overview-disclosure > summary > b {
    color: var(--muted);
    font-size: 1.3rem;
    text-align: center;
    transform: rotate(0deg);
    transition: transform 160ms ease;
}

.workouts-overview-disclosure[open] > summary > b {
    transform: rotate(90deg);
}

.workouts-overview-disclosure-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.workouts-overview-disclosure-icon svg {
    width: 20px;
    height: 20px;
}

.workouts-overview-disclosure-body {
    display: grid;
    gap: 0.62rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.workouts-tools-disclosure .workouts-section-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.42rem;
}

.workouts-tools-disclosure .workouts-section-grid > .hierarchy-nav-row {
    min-height: 68px;
    padding: 0.52rem;
    border-radius: 13px;
}

.workouts-tools-disclosure .workouts-start-grid {
    gap: 0.42rem;
}

.workouts-tools-disclosure .workouts-start-card {
    min-height: 58px;
    padding: 0.55rem 0.62rem;
    border-radius: 13px;
}

.workouts-routines-disclosure-body {
    gap: 0.34rem;
}

.workouts-routines-head-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    min-width: 0;
}

.workouts-routines-head-actions .btn {
    min-height: 36px;
    padding: 0.38rem 0.58rem;
    font-size: 0.67rem;
}

.workouts-routines-empty-create {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 0.62rem;
    width: 100%;
    min-height: 58px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--ui-soft-border, var(--line));
    border-radius: var(--ui-panel-radius, 16px);
    color: var(--ink);
    background: var(--surface);
    box-shadow: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.workouts-routines-empty-create > strong {
    min-width: 0;
    overflow: hidden;
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workouts-routines-empty-create > span:last-child {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    font-size: 1.05rem;
    font-weight: 800;
}

.workouts-routines-empty-create:is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
    outline: none;
}

.workouts-routine-preview-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.34rem;
}

.workouts-routine-preview-grid .workouts-routine-card {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.48rem;
    min-height: 58px;
    padding: 0.36rem 0.4rem 0.36rem 0.5rem;
    overflow: visible;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: none;
    transform: none;
}

.workouts-routine-preview-grid .workouts-routine-card::before {
    width: 3px;
    border-radius: 12px 0 0 12px;
}

.workouts-routine-preview-media {
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--routine-accent, var(--primary)) 28%, var(--line));
    border-radius: 11px;
    color: color-mix(in srgb, var(--routine-accent, var(--primary)) 48%, var(--ink));
    background: color-mix(in srgb, var(--routine-accent, var(--primary)) 11%, var(--surface));
    text-decoration: none;
}

.workouts-routine-preview-media > span:first-child svg {
    width: 19px;
    height: 19px;
}

.workouts-routine-preview-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.workouts-routine-preview-media.has-image > span {
    position: absolute;
    right: 3px;
    bottom: 3px;
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(7, 13, 23, 0.72);
    font-size: 0.46rem;
}

.workouts-routine-preview-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.workouts-routine-preview-copy > span:first-child {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
}

.workouts-routine-preview-copy strong {
    min-width: 0;
    overflow: hidden;
    font-size: 0.76rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workouts-routine-preview-meta {
    display: flex;
    align-items: center;
    gap: 0.26rem;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.57rem;
    font-weight: 730;
    line-height: 1.1;
    white-space: nowrap;
}

.workouts-routine-preview-meta > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.workouts-routine-preview-meta i {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--muted);
}

.workouts-routine-preview-meta .state-active i {
    background: var(--primary);
}

.workouts-routine-preview-meta .state-completed i {
    background: var(--good);
}

.workouts-routine-preview-meta .state-scheduled i {
    background: var(--warning);
}

.workouts-routine-preview-count {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workouts-routine-preview-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
}

.workouts-routine-preview-grid .workouts-routine-start-btn {
    display: inline-grid;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    place-items: center;
    border-radius: 10px;
    font-size: 0.68rem;
    line-height: 1;
}

.workouts-routine-preview-actions .kebab-menu > summary.kebab-menu-trigger {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-color: transparent;
}

.workouts-routine-preview-more {
    min-height: 38px;
    margin-top: 0;
}

.workouts-overview-priority .workouts-today-card {
    gap: 0.5rem;
    padding: 0.68rem !important;
    border-radius: var(--ui-panel-radius, 16px);
    background: var(--surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.workouts-overview-priority .workouts-today-card::before {
    display: none;
}

.workouts-overview-priority .workouts-today-picker {
    gap: 0.5rem;
}

.workouts-overview-priority .workouts-today-routine-chips span {
    min-height: 34px;
    padding: 0.36rem 0.62rem;
    font-size: 0.7rem;
}

.workouts-overview-priority .workouts-today-card.has-active-session .workouts-today-picker {
    opacity: 0.66;
}

body[data-page="workouts"]:is([data-theme="dark"], .theme-active-dark) :is(
    .workouts-routines-empty-create,
    .workouts-overview-priority .workouts-today-card
) {
    border-color: var(--dark-ui-border, var(--line)) !important;
    background: var(--dark-ui-surface, var(--surface)) !important;
    background-image: none !important;
    box-shadow: none !important;
}

body[data-page="workouts"]:is([data-theme="dark"], .theme-active-dark) .workouts-overview-disclosure > summary {
    border-color: var(--dark-ui-border, var(--line)) !important;
    background: var(--dark-ui-surface, var(--surface)) !important;
    background-image: none !important;
    box-shadow: none !important;
}

@media (max-width: 700px) {
    .workouts-overview-priority {
        gap: 0.5rem;
    }

    .workouts-overview-disclosure[open] > summary {
        margin-bottom: 0.42rem;
    }

    .workouts-overview-disclosure-body {
        gap: 0.42rem;
        min-width: 0;
    }

    .workouts-overview-disclosure-body > * {
        min-width: 0;
    }

    .workouts-tools-disclosure .workouts-section-grid {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(122px, 38vw);
        gap: 0.38rem;
        margin: 0;
        padding: 0 0.05rem 0.18rem;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .workouts-tools-disclosure .workouts-section-grid::-webkit-scrollbar {
        display: none;
    }

    .workouts-tools-disclosure .workouts-section-grid > .hierarchy-nav-row {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 0.4rem;
        min-height: 54px;
        padding: 0.4rem 0.46rem;
        border-radius: 12px;
        scroll-snap-align: start;
    }

    .workouts-tools-disclosure .workouts-section-grid .hierarchy-nav-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .workouts-tools-disclosure .workouts-section-grid .hierarchy-nav-icon svg {
        width: 16px;
        height: 16px;
    }

    .workouts-tools-disclosure .workouts-section-grid .hierarchy-nav-copy strong {
        font-size: 0.68rem;
    }

    .workouts-tools-disclosure .workouts-section-grid .hierarchy-nav-copy small {
        display: none;
    }

    .workouts-tools-disclosure .workouts-overview-kpi-strip {
        border-radius: 12px;
        box-shadow: none;
    }

    .workouts-tools-disclosure .workouts-overview-kpi-strip > span {
        min-height: 52px;
        padding: 0.4rem 0.48rem;
    }

    .workouts-tools-disclosure .workouts-overview-kpi-strip strong {
        font-size: 0.92rem;
    }

    .workouts-tools-disclosure .workouts-overview-kpi-strip small {
        font-size: 0.52rem;
        line-height: 1.12;
    }

    .workouts-tools-disclosure .workouts-start-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.34rem;
    }

    .workouts-tools-disclosure .workouts-start-card {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.44rem;
        min-height: 50px;
        padding: 0.38rem 0.44rem;
        border-radius: 12px;
    }

    .workouts-tools-disclosure .workouts-start-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .workouts-tools-disclosure .workouts-start-icon svg {
        width: 17px;
        height: 17px;
    }

    .workouts-tools-disclosure .workouts-start-copy strong {
        overflow: hidden;
        font-size: 0.68rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .workouts-tools-disclosure .workouts-start-copy small {
        display: none;
    }

    .workouts-tools-disclosure .workouts-start-card .btn {
        width: auto;
        min-height: 34px;
        padding: 0.3rem 0.46rem;
        border-radius: 9px;
        font-size: 0.61rem;
    }

    .workouts-history-disclosure .workouts-overview-disclosure-body > .grid-two {
        gap: 0.42rem;
    }

    .workouts-history-disclosure .workouts-overview-disclosure-body .panel {
        padding: 0.62rem !important;
        border-radius: 14px;
        background: var(--surface) !important;
        background-image: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .workouts-history-disclosure .workouts-overview-disclosure-body .panel::before {
        display: none;
    }

    .workouts-overview-priority .workouts-today-picker {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .workouts-overview-priority .workouts-today-picker > .btn {
        min-height: 40px;
    }

    .workouts-routines-head-actions .btn {
        min-height: 36px;
    }

    .workouts-routine-preview-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 430px) {
    .workouts-routines-disclosure > summary,
    .workouts-routines-empty-create {
        grid-template-columns: 34px minmax(0, 1fr) 24px;
        gap: 0.48rem;
        min-height: 50px;
        padding: 0.4rem 0.5rem;
    }

    .workouts-routines-disclosure .workouts-overview-disclosure-icon,
    .workouts-routines-empty-create .workouts-overview-disclosure-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .workouts-routines-disclosure[open] > summary {
        margin-bottom: 0.4rem;
    }

    .workouts-routines-disclosure-body {
        gap: 0.28rem;
    }

    .workouts-tools-disclosure .workouts-section-grid {
        grid-auto-columns: minmax(112px, 41vw);
    }

    .workouts-routines-head-actions {
        justify-content: stretch;
    }

    .workouts-routines-head-actions .btn:first-child {
        flex: 1 1 auto;
    }

    .workouts-overview-disclosure > summary {
        min-height: 56px;
        padding: 0.48rem 0.58rem;
    }

    .workouts-routines-disclosure > summary {
        min-height: 50px;
        padding: 0.4rem 0.5rem;
    }

    .workouts-overview-disclosure > summary small {
        font-size: 0.62rem;
    }

    .workouts-overview-priority .workouts-today-picker > .btn {
        min-height: 40px;
        padding-block: 0.4rem;
        white-space: nowrap;
    }

    .workouts-routines-head-actions .workouts-organize-routines-link {
        width: 36px;
        min-width: 36px;
        padding: 0;
        overflow: hidden;
        font-size: 0;
    }

    .workouts-routines-head-actions .workouts-organize-routines-link::before {
        content: "→";
        font-size: 0.8rem;
    }

    .workouts-routine-preview-grid .workouts-routine-card {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 0.42rem;
        min-height: 54px;
        padding: 0.32rem 0.32rem 0.32rem 0.46rem;
    }

    .workouts-routine-preview-media {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .workouts-routine-preview-grid .workouts-routine-start-btn {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        border-radius: 9px;
    }

    .workouts-routine-preview-actions .kebab-menu > summary.kebab-menu-trigger {
        width: 30px;
        min-width: 30px;
        height: 34px;
        min-height: 34px;
    }
}

@media (max-width: 350px) {
    .workouts-routine-preview-count,
    .workouts-routine-preview-meta > span[aria-hidden="true"] {
        display: none;
    }
}

/* Workout statistics: dense snapshot first, detail second. */
.workouts-analytics-page {
    display: grid;
    gap: 0.72rem;
    min-width: 0;
}

.workouts-analytics-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.48rem;
}

.workouts-analytics-kpi {
    --analytics-tone: var(--primary);
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    min-height: 74px;
    padding: 0.58rem 0.64rem;
    border: 1px solid color-mix(in srgb, var(--analytics-tone) 22%, var(--line));
    border-radius: 15px;
    background: var(--surface);
}

.workouts-analytics-kpi[data-tone="orange"] { --analytics-tone: #f97316; }
.workouts-analytics-kpi[data-tone="blue"] { --analytics-tone: #3b82f6; }
.workouts-analytics-kpi[data-tone="violet"] { --analytics-tone: #8b5cf6; }
.workouts-analytics-kpi[data-tone="green"] { --analytics-tone: #16a34a; }

.workouts-analytics-kpi-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    color: var(--analytics-tone);
    background: color-mix(in srgb, var(--analytics-tone) 12%, var(--surface));
}

.workouts-analytics-kpi-icon svg {
    width: 19px;
    height: 19px;
}

.workouts-analytics-kpi > span:last-child {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.workouts-analytics-kpi small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.59rem;
    font-weight: 760;
    line-height: 1.15;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.workouts-analytics-kpi strong {
    overflow: hidden;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workouts-analytics-insights {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.58rem;
    min-width: 0;
    padding: 0.42rem;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.workouts-analytics-insights-head {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding-inline: 0.24rem;
    color: var(--primary-dark);
    font-size: 0.68rem;
}

.workouts-analytics-insights-head > span {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
}

.workouts-analytics-insights-head svg {
    width: 16px;
    height: 16px;
}

.workouts-analytics-insights .workouts-messages {
    display: flex;
    gap: 0.36rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.workouts-analytics-insights .workouts-messages::-webkit-scrollbar {
    display: none;
}

.workouts-analytics-insights .workouts-message {
    flex: 0 0 auto;
    gap: 0.36rem;
    min-height: 36px;
    max-width: min(320px, 72vw);
    padding: 0.3rem 0.48rem;
    border-color: var(--line);
    border-radius: 10px;
    background: var(--surface);
    font-size: 0.65rem;
    line-height: 1.2;
}

.workouts-analytics-insights .workouts-message-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
}

.workouts-analytics-insights .workouts-message-icon svg {
    width: 14px;
    height: 14px;
}

.workouts-analytics-chart-panel,
.workouts-analytics-detail-card {
    padding: 0.72rem !important;
    border-radius: 17px !important;
    background: var(--surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.workouts-analytics-chart-panel::before,
.workouts-analytics-detail-card::before {
    display: none;
}

.workouts-analytics-panel-head {
    align-items: center;
    gap: 0.62rem;
    margin: 0 0 0.58rem;
}

.workouts-analytics-panel-head :is(.eyebrow, h2) {
    margin: 0;
}

.workouts-analytics-week-now {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
}

.workouts-analytics-week-now > span {
    display: grid;
    gap: 0.08rem;
    min-width: 92px;
    padding: 0.34rem 0.5rem;
}

.workouts-analytics-week-now > span + span {
    border-left: 1px solid var(--line);
}

.workouts-analytics-week-now small {
    color: var(--muted);
    font-size: 0.53rem;
    font-weight: 740;
}

.workouts-analytics-week-now strong {
    font-size: 0.68rem;
    white-space: nowrap;
}

.workouts-analytics-chart-panel .workouts-bar-chart {
    height: 176px;
    padding: 0.65rem 0.45rem 0.38rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ink) 2%, var(--surface));
}

.workouts-analytics-chart-panel .workouts-bar {
    width: min(100%, 34px);
    border-radius: 7px 7px 3px 3px;
    box-shadow: none;
}

.workouts-analytics-chart-panel .workouts-bar-col.is-current .workouts-bar {
    background: linear-gradient(180deg, #8b5cf6, var(--primary));
}

.workouts-analytics-chart-panel .workouts-bar-col.is-current .workouts-bar-label {
    color: var(--primary-dark);
    font-weight: 850;
}

.workouts-analytics-chart-panel .workouts-bar-sub {
    display: inline-flex;
    align-items: baseline;
    gap: 0.1rem;
    font-size: 0.67rem;
}

.workouts-analytics-chart-panel .workouts-bar-sub small {
    color: var(--muted);
    font-size: 0.46rem;
}

.workouts-analytics-period-total {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.48rem;
}

.workouts-analytics-period-total > span {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    padding: 0.42rem 0.5rem;
    border-radius: 11px;
    background: color-mix(in srgb, var(--ink) 3%, var(--surface));
}

.workouts-analytics-period-total small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.54rem;
    font-weight: 740;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workouts-analytics-period-total strong {
    overflow: hidden;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workouts-analytics-detail-grid {
    gap: 0.52rem;
}

.workouts-analytics-frequency-list {
    display: grid;
    gap: 0.24rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.workouts-analytics-frequency-list li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.46rem;
    min-height: 38px;
    padding: 0.3rem 0.4rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 3%, var(--surface));
}

.workouts-analytics-frequency-list li > span {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 8px;
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 11%, var(--surface));
    font-size: 0.57rem;
    font-weight: 850;
}

.workouts-analytics-frequency-list li > strong {
    overflow: hidden;
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workouts-analytics-frequency-list li > b {
    min-width: 32px;
    padding: 0.22rem 0.36rem;
    border-radius: 999px;
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
    font-size: 0.59rem;
    text-align: center;
}

.workouts-analytics-detail-card .workouts-muscle-list {
    gap: 0.42rem;
}

.workouts-analytics-detail-card .workouts-muscle-row {
    grid-template-columns: minmax(70px, 0.8fr) minmax(70px, 1.3fr) 34px;
    gap: 0.42rem;
    min-height: 32px;
}

.workouts-analytics-detail-card .workouts-muscle-name {
    font-size: 0.68rem;
}

.workouts-analytics-detail-card .workouts-muscle-pct {
    font-size: 0.65rem;
}

.workouts-analytics-empty {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    min-height: 124px;
    place-content: center;
    padding: 0.7rem;
    color: var(--muted);
    text-align: center;
}

.workouts-analytics-empty.is-small {
    min-height: 92px;
}

.workouts-analytics-empty > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.workouts-analytics-empty svg {
    width: 19px;
    height: 19px;
}

.workouts-analytics-empty p {
    max-width: 34ch;
    margin: 0;
    font-size: 0.7rem;
}

@media (max-width: 700px) {
    .workouts-analytics-page {
        gap: 0.52rem;
    }

    .workouts-analytics-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.38rem;
    }

    .workouts-analytics-kpi {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 0.42rem;
        min-height: 62px;
        padding: 0.45rem 0.48rem;
        border-radius: 13px;
    }

    .workouts-analytics-kpi-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .workouts-analytics-kpi-icon svg {
        width: 16px;
        height: 16px;
    }

    .workouts-analytics-kpi small {
        font-size: 0.54rem;
    }

    .workouts-analytics-kpi strong {
        font-size: 1rem;
    }

    .workouts-analytics-insights {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.3rem;
        padding: 0.36rem;
    }

    .workouts-analytics-insights-head {
        min-height: 28px;
    }

    .workouts-analytics-insights .workouts-message {
        max-width: 78vw;
    }

    .workouts-analytics-chart-panel,
    .workouts-analytics-detail-card {
        padding: 0.58rem !important;
        border-radius: 14px !important;
    }

    .workouts-analytics-panel-head {
        margin-bottom: 0.45rem;
    }

    .workouts-analytics-week-now > span {
        min-width: 0;
        padding: 0.28rem 0.38rem;
    }

    .workouts-analytics-week-now > span:first-child small {
        display: none;
    }

    .workouts-analytics-chart-panel .workouts-bar-chart {
        height: 148px;
        gap: 0.24rem;
        padding: 0.55rem 0.18rem 0.3rem;
        border-radius: 12px;
    }

    .workouts-analytics-chart-panel .workouts-bar-label {
        font-size: 0.53rem;
    }

    .workouts-analytics-chart-panel .workouts-bar-sub {
        font-size: 0.59rem;
    }

    .workouts-analytics-period-total {
        gap: 0.25rem;
        margin-top: 0.35rem;
    }

    .workouts-analytics-period-total > span {
        padding: 0.34rem 0.38rem;
    }

    .workouts-analytics-detail-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.42rem;
    }
}

@media (max-width: 390px) {
    .workouts-analytics-week-now > span:last-child {
        display: none;
    }

    .workouts-analytics-chart-panel .workouts-bar-sub small {
        display: none;
    }

    .workouts-analytics-period-total > span {
        padding-inline: 0.3rem;
    }
}

.dashboard-ranking-panel .leaderboard-list {
    gap: 0.3rem;
}

.dashboard-ranking-panel .leaderboard-row.compact-list-item {
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    min-height: 0;
    padding: 0.42rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.dashboard-ranking-panel .leaderboard-position {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.dashboard-ranking-panel .leaderboard-row:nth-child(1) .leaderboard-position { color: #e0a422; }
.dashboard-ranking-panel .leaderboard-row:nth-child(2) .leaderboard-position { color: #9aa7b2; }
.dashboard-ranking-panel .leaderboard-row:nth-child(3) .leaderboard-position { color: #b87333; }

.dashboard-ranking-panel .leaderboard-avatar { width: 30px; height: 30px; }

.dashboard-ranking-panel .leaderboard-row.is-me {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
    background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.dashboard-ranking-panel .leaderboard-name {
    gap: 0.5rem;
}
.dashboard-ranking-panel .leaderboard-name,
.dashboard-ranking-panel .leaderboard-name-text {
    min-width: 0;
}

.dashboard-ranking-panel .leaderboard-name-text strong {
    display: block;
    overflow: hidden;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-ranking-panel .leaderboard-name-text span {
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--warning, #d18f10);
}

.leaderboard-end {
    display: grid;
    gap: 0.04rem;
    justify-items: end;
    text-align: right;
    min-width: 0;
}
.leaderboard-score {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.dashboard-ranking-panel .leaderboard-row.is-me .leaderboard-score {
    color: var(--primary);
}
.leaderboard-steps {
    font-size: 0.62rem;
    font-weight: 620;
    color: var(--muted);
    white-space: nowrap;
}

.season-widget-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0.55rem;
}

.season-user-progress {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    margin-bottom: 0.6rem;
}

.season-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
.season-progress-head small:first-child {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.season-progress-head small:last-child {
    flex: none;
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.season-user-progress .goal-progress { height: 8px; }
.season-user-progress .goal-progress > span {
    background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #4ade80));
}

.season-ranking-page > .season-user-progress {
    padding: 0.7rem;
    border: 1px solid var(--ui-soft-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.quest-item {
    display: block;
    padding: 0;
}

.quest-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
    padding: 0.46rem 0.7rem;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.quest-summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 48%, transparent);
    outline-offset: -3px;
}

.quest-chevron {
    color: var(--muted);
    font-size: 1.25rem;
    transition: transform 160ms ease;
}

.quest-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}

.quest-summary.is-expanded .quest-chevron {
    transform: rotate(90deg);
}

.quest-detail,
.versus-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    min-width: 0;
    padding: 0.55rem 0.7rem 0.65rem;
    border-top: 1px solid var(--ui-soft-border);
    background: color-mix(in srgb, var(--surface-2) 54%, transparent);
}

.quest-detail[hidden],
.versus-details[hidden] {
    display: none;
}

.quest-detail > span,
.versus-details > span {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.quest-detail small,
.versus-details small {
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 760;
}

.quest-detail strong,
.versus-details strong {
    overflow-wrap: anywhere;
    font-size: 0.7rem;
}

.versus-details-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: 38px;
    padding: 0.42rem 0.1rem 0.1rem;
    border: 0;
    border-top: 1px solid var(--ui-soft-border);
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 800;
    text-align: start;
    cursor: pointer;
}

.versus-details-toggle > span:last-child {
    font-size: 1.2rem;
    transition: transform 160ms ease;
}

.versus-details-toggle.is-expanded > span:last-child {
    transform: rotate(90deg);
}

.workouts-routine-state {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0.2rem 0.48rem;
    border-radius: 999px;
    color: var(--muted);
    background: color-mix(in srgb, var(--muted) 9%, transparent);
    font-size: 0.6rem;
    font-weight: 850;
}

.workouts-routine-state.state-active,
.workouts-routine-card[data-state="active"] {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--ui-soft-border));
}

.workouts-routine-state.state-active {
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 13%, transparent);
}

.workouts-routine-state.state-completed,
.workouts-routine-card[data-state="completed"] {
    border-color: color-mix(in srgb, var(--good) 36%, var(--ui-soft-border));
}

.workouts-routine-state.state-completed {
    color: var(--good);
    background: color-mix(in srgb, var(--good) 11%, transparent);
}

.workouts-routine-card.compact-list-item.is-completed::before {
    content: none;
}

/* Active cards already force border + status dot to --primary; keep the accent bar in step. */
.workouts-routine-card.compact-list-item.is-active::before {
    background: var(--primary);
}

.workouts-routine-state.state-scheduled {
    color: #9a6500;
    background: color-mix(in srgb, var(--warning) 17%, transparent);
}

.workouts-routine-state.state-unavailable,
.workouts-routine-card[data-state="unavailable"] {
    color: var(--muted);
    opacity: 0.78;
}

.workouts-day-routine[data-state="active"],
.workouts-unscheduled-list > [data-state="active"] {
    box-shadow: inset 3px 0 0 var(--primary);
}

.workouts-day-routine[data-state="completed"],
.workouts-unscheduled-list > [data-state="completed"] {
    box-shadow: inset 3px 0 0 var(--good);
}

.photos-gallery-tile.is-image-loading {
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--surface) 72%, var(--line)) 30%,
        color-mix(in srgb, var(--surface) 96%, #fff) 48%,
        color-mix(in srgb, var(--surface) 72%, var(--line)) 66%);
    background-size: 220% 100%;
    animation: gallery-skeleton 1.1s ease-in-out infinite;
}

.photos-gallery-tile.is-image-loading img,
.photos-gallery-tile.is-image-error img {
    opacity: 0;
}

.gallery-image-error {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0.55rem;
    color: var(--muted);
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    font-size: 0.66rem;
    font-weight: 800;
    text-align: center;
}

.gallery-load-error {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.7rem;
    color: var(--bad);
    background: color-mix(in srgb, var(--bad) 6%, var(--surface));
}

.gallery-load-error[hidden] {
    display: none;
}

.gallery-load-error > span:first-child {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: var(--bad);
    font-weight: 900;
}

.gallery-load-error p {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 0.72rem;
}

@media (max-width: 700px) {
    .profile-training-muscles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-ranking-panel .leaderboard-row.compact-list-item {
        grid-template-columns: 1.7rem minmax(0, 1fr) auto;
        gap: 0.42rem;
    }

    .quest-detail,
    .versus-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 430px) {
    .season-ranking-summary.compact-metrics-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .season-ranking-summary.compact-metrics-row > span:nth-child(n + 3) {
        border-top: 1px solid var(--ui-soft-border);
    }

    .season-ranking-summary.compact-metrics-row > span:nth-child(3) {
        border-inline-start: 0;
    }

    .season-widget-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .season-widget-summary > span:last-child {
        grid-column: 1 / -1;
        border-top: 1px solid var(--ui-soft-border);
        border-inline-start: 0;
    }

    .gallery-load-error {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .gallery-load-error .btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 340px) {
    .compact-metrics-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compact-metrics-row > span:nth-child(odd) {
        border-inline-start: 0;
    }

    .compact-metrics-row > span:nth-child(n + 3) {
        border-top: 1px solid var(--ui-soft-border);
    }

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

}

/* ==========================================================================
   Entries — quick data form polish (match widget UI language)
   ========================================================================== */
.entries-toggles.pill-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.entries-toggles.pill-toggles .check {
    width: auto;
    min-height: 0;
    gap: 0.45rem;
    padding: 0.46rem 0.8rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.entries-toggles.pill-toggles .check input {
    width: 16px;
    height: 16px;
}
.entries-toggles.pill-toggles .check:has(input:checked) {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary-dark);
}
body[data-theme="dark"] .entries-toggles.pill-toggles .check:has(input:checked),
body.theme-active-dark .entries-toggles.pill-toggles .check:has(input:checked) {
    color: color-mix(in srgb, var(--primary) 45%, #ffffff);
}

/* Workout row: keep the remove control as a small circular icon button */
.entry-data-form .workout-row {
    grid-template-columns: minmax(0, 1fr) 36px !important;
    align-items: center;
}
.entry-data-form .workout-row .workout-type-field,
.entry-data-form .workout-row .workout-custom-field {
    grid-column: 1;
}
.entry-data-form .workout-row .workout-subfields {
    grid-column: 1 / -1;
}
.entry-data-form .workout-remove-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    align-self: center !important;
    justify-self: end !important;
    font-size: 1.1rem;
}

.entry-data-form .entry-section-title {
    margin: 0.3rem 0 -0.1rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

/* ==========================================================================
   Entries / data — responsive surface and dark-mode consolidation
   ========================================================================== */
body[data-page="entries"] .entry-mode-tabs {
    width: min(460px, 100%);
    margin-inline: auto;
    border-color: color-mix(in srgb, var(--ink) 10%, transparent);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--ink) 9%, transparent);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}

body[data-page="entries"] .entry-mode-tabs a {
    position: relative;
    min-height: 42px;
    text-decoration: none;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body[data-page="entries"] .entry-mode-tabs a:not(.active):hover,
body[data-page="entries"] .entry-mode-tabs a:not(.active):focus-visible {
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 5%, transparent);
}

body[data-page="entries"] .entry-data-panel {
    width: min(760px, 100%);
    margin-inline: auto;
    border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 22px 60px color-mix(in srgb, var(--ink) 10%, transparent);
}

body[data-page="entries"] .entry-data-toolbar {
    margin-bottom: 0.8rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}

body[data-page="entries"] .entry-date-time-row {
    grid-template-columns: minmax(0, 1fr) minmax(132px, 0.35fr);
}

body[data-page="entries"] .entry-day-arrow {
    border-color: color-mix(in srgb, var(--ink) 10%, transparent);
    background: color-mix(in srgb, var(--surface-2) 75%, var(--surface));
    box-shadow: none;
}

body[data-page="entries"] .entry-date-nav input,
body[data-page="entries"] .entry-date-time-row input,
body[data-page="entries"] .entry-data-form input:not([type="checkbox"]):not([type="radio"]),
body[data-page="entries"] .entry-data-form select,
body[data-page="entries"] .entry-data-form textarea {
    border-color: color-mix(in srgb, var(--ink) 12%, transparent);
    background: color-mix(in srgb, var(--surface) 84%, var(--surface-2));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 44%, transparent);
}

body[data-page="entries"] .entry-data-form {
    gap: 0.78rem;
}

body[data-page="entries"] .entry-data-form .entry-form-section,
body[data-page="entries"] .entry-data-form .workout-repeater {
    border-color: color-mix(in srgb, var(--ink) 10%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-2) 40%, var(--surface));
    box-shadow: none;
}

body[data-page="entries"] .entry-data-form .entry-metric-pair > label {
    gap: 0.45rem;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 800;
}

body[data-page="entries"] .entry-data-form .entry-metric-pair > label > input {
    min-height: 48px;
    font-size: 1rem;
    font-weight: 750;
}

body[data-page="entries"] .entry-weight-control {
    border-color: color-mix(in srgb, var(--primary) 18%, var(--line));
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

body[data-page="entries"] .entry-weight-icon {
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

body[data-page="entries"] .entry-workout-toggle,
body[data-page="entries"] .entry-data-form .workout-row,
body[data-page="entries"] .entries-toggles.pill-toggles .check {
    border-color: color-mix(in srgb, var(--ink) 11%, transparent);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
}

body[data-page="entries"] .workout-toggle-row [data-workout-add] {
    border-color: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
    box-shadow: none;
}

body[data-page="entries"] .entry-data-form .workout-row {
    padding: 0.68rem;
    border-radius: 14px;
}

body[data-page="entries"] .entry-data-form .entry-section-title {
    margin: 0.45rem 0 0;
    padding-inline: 0.15rem;
    color: var(--muted);
    font-size: 0.7rem;
    letter-spacing: 0.075em;
}

body[data-page="entries"] .entries-toggles.pill-toggles .check {
    min-height: 44px;
    padding: 0.55rem 0.82rem;
}

body[data-page="entries"] .entry-reason-section:empty,
body[data-page="entries"] .entry-reason-section:has(> [hidden]:only-child) {
    display: none;
}

body[data-page="entries"] .entry-reason-section .conditional-reason,
body[data-page="entries"] .entry-notes-field {
    gap: 0.45rem;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-2) 40%, var(--surface));
}

body[data-page="entries"] .entry-reason-section .conditional-reason > span,
body[data-page="entries"] .entry-notes-field {
    font-weight: 800;
}

body[data-page="entries"] .entry-form-actions {
    padding-top: 0.1rem;
}

body[data-page="entries"] .entry-form-actions .btn {
    min-height: 50px;
    font-size: 0.96rem;
}

body[data-page="entries"] .entry-pending-hint {
    margin: 0.8rem 0 0;
    padding: 0 0.3rem;
    line-height: 1.45;
}

body[data-page="entries"][data-theme="dark"] .entry-mode-tabs,
body[data-page="entries"].theme-active-dark .entry-mode-tabs,
body[data-page="entries"][data-theme="dark"] .entry-data-panel,
body[data-page="entries"].theme-active-dark .entry-data-panel {
    border-color: rgba(170, 193, 204, 0.18);
    background: rgba(18, 27, 36, 0.88);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
}

body[data-page="entries"][data-theme="dark"] .entry-data-form .entry-form-section,
body[data-page="entries"].theme-active-dark .entry-data-form .entry-form-section,
body[data-page="entries"][data-theme="dark"] .entry-data-form .workout-repeater,
body[data-page="entries"].theme-active-dark .entry-data-form .workout-repeater,
body[data-page="entries"][data-theme="dark"] .entry-reason-section .conditional-reason,
body[data-page="entries"].theme-active-dark .entry-reason-section .conditional-reason,
body[data-page="entries"][data-theme="dark"] .entry-notes-field,
body[data-page="entries"].theme-active-dark .entry-notes-field {
    border-color: rgba(170, 193, 204, 0.17);
    background: rgba(24, 37, 50, 0.72);
}

body[data-page="entries"][data-theme="dark"] .entry-data-form input:not([type="checkbox"]):not([type="radio"]),
body[data-page="entries"].theme-active-dark .entry-data-form input:not([type="checkbox"]):not([type="radio"]),
body[data-page="entries"][data-theme="dark"] .entry-data-form select,
body[data-page="entries"].theme-active-dark .entry-data-form select,
body[data-page="entries"][data-theme="dark"] .entry-data-form textarea,
body[data-page="entries"].theme-active-dark .entry-data-form textarea,
body[data-page="entries"][data-theme="dark"] .entry-date-nav input,
body[data-page="entries"].theme-active-dark .entry-date-nav input,
body[data-page="entries"][data-theme="dark"] .entry-date-time-row input,
body[data-page="entries"].theme-active-dark .entry-date-time-row input {
    color: var(--ink);
    border-color: rgba(170, 193, 204, 0.20);
    background: rgba(8, 14, 20, 0.64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body[data-page="entries"][data-theme="dark"] .entry-workout-toggle,
body[data-page="entries"].theme-active-dark .entry-workout-toggle,
body[data-page="entries"][data-theme="dark"] .entry-data-form .workout-row,
body[data-page="entries"].theme-active-dark .entry-data-form .workout-row,
body[data-page="entries"][data-theme="dark"] .entries-toggles.pill-toggles .check,
body[data-page="entries"].theme-active-dark .entries-toggles.pill-toggles .check {
    color: var(--ink);
    border-color: rgba(170, 193, 204, 0.18);
    background: rgba(12, 21, 29, 0.72);
}

body[data-page="entries"][data-theme="dark"] .entry-weight-control,
body[data-page="entries"].theme-active-dark .entry-weight-control,
body[data-page="entries"][data-theme="dark"] .workout-toggle-row [data-workout-add],
body[data-page="entries"].theme-active-dark .workout-toggle-row [data-workout-add] {
    color: #72dec9;
    border-color: rgba(20, 163, 139, 0.28);
    background: rgba(20, 163, 139, 0.10);
}

body[data-page="entries"][data-theme="dark"] .entry-weight-icon,
body[data-page="entries"].theme-active-dark .entry-weight-icon,
body[data-page="entries"][data-theme="dark"] .entry-weight-control > a,
body[data-page="entries"].theme-active-dark .entry-weight-control > a {
    color: #72dec9;
}

@media (max-width: 520px) {
    body[data-page="entries"] .screen.stack-lg {
        gap: 0.72rem;
        padding-bottom: calc(var(--mobile-bottom-nav-height, 0px) + env(safe-area-inset-bottom) + 34px);
    }

    body[data-page="entries"] .entry-mode-tabs {
        padding: 0.2rem;
        border-radius: 18px;
    }

    body[data-page="entries"] .entry-mode-tabs a {
        min-height: 42px;
        padding-inline: 0.5rem;
        border-radius: 14px;
        font-size: 0.82rem;
    }

    body[data-page="entries"] .entry-data-panel {
        padding: 0.75rem;
        border-radius: 20px;
    }

    body[data-page="entries"] .entry-data-toolbar {
        margin-bottom: 0.7rem;
        padding: 0 0 0.72rem;
    }

    body[data-page="entries"] .entry-date-time-row {
        grid-template-columns: minmax(0, 1fr) minmax(92px, 0.36fr);
        gap: 0.42rem;
    }

    body[data-page="entries"] .entry-date-nav {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        gap: 0.32rem;
    }

    body[data-page="entries"] .entry-day-arrow {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    body[data-page="entries"] .entry-date-nav input,
    body[data-page="entries"] .entry-date-time-row input {
        min-height: 44px;
        padding-inline: 0.52rem;
    }

    body[data-page="entries"] .entry-data-form .entry-form-section,
    body[data-page="entries"] .entry-data-form .workout-repeater,
    body[data-page="entries"] .entry-reason-section .conditional-reason,
    body[data-page="entries"] .entry-notes-field {
        padding: 0.72rem;
        border-radius: 16px;
    }

    body[data-page="entries"] .entry-data-form .entry-metric-pair {
        gap: 0.5rem;
    }

    body[data-page="entries"] .entry-data-form .entry-metric-pair > label > input {
        min-height: 46px;
    }

    body[data-page="entries"] .entry-weight-control {
        grid-template-columns: minmax(0, 1fr) 108px;
        gap: 0.45rem 0.55rem;
        padding: 0.62rem;
        border-radius: 14px;
    }

    body[data-page="entries"] .entry-weight-control > a {
        min-height: 34px;
    }

    body[data-page="entries"] .workout-toggle-row {
        gap: 0.45rem;
    }

    body[data-page="entries"] .workout-toggle-row [data-workout-add] {
        min-width: 0;
        min-height: 44px;
        padding-inline: 0.72rem;
        font-size: 0.76rem;
        white-space: nowrap;
    }

    body[data-page="entries"] .entries-toggles.pill-toggles {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.48rem;
    }

    body[data-page="entries"] .entries-toggles.pill-toggles .check {
        width: 100%;
        min-width: 0;
        padding-inline: 0.7rem;
        border-radius: 14px;
        font-size: 0.8rem;
        overflow-wrap: anywhere;
    }

    body[data-page="entries"] .entry-notes-field textarea {
        min-height: 104px;
    }

    body[data-page="entries"] .entry-form-actions {
        padding: 0.45rem;
        border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
        border-radius: 18px;
        background: color-mix(in srgb, var(--surface) 88%, transparent);
        box-shadow: 0 16px 38px color-mix(in srgb, var(--ink) 16%, transparent);
        backdrop-filter: blur(18px) saturate(135%);
        -webkit-backdrop-filter: blur(18px) saturate(135%);
    }

    body[data-page="entries"] .entry-form-actions .btn {
        min-height: 48px;
    }

    body[data-page="entries"][data-theme="dark"] .entry-form-actions,
    body[data-page="entries"].theme-active-dark .entry-form-actions {
        border-color: rgba(170, 193, 204, 0.18);
        background: rgba(18, 27, 36, 0.84);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
    }
}

@media (max-width: 360px) {
    body[data-page="entries"] .entry-date-time-row {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-page="entries"] .entry-time-inline {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
    }

    body[data-page="entries"] .entry-date-time-row .entry-time-inline span {
        min-width: 76px;
    }

    body[data-page="entries"] .entry-data-form .entry-metric-pair,
    body[data-page="entries"] .entries-toggles.pill-toggles {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="entries"] .entry-weight-control {
        grid-template-columns: minmax(0, 1fr) 98px;
    }
}

/* ==========================================================================
   Entries / meal — complete themed upload flow
   ========================================================================== */
body[data-page="entries"] .proof-photo-panel,
body[data-page="entries"] .entry-recent-photos-panel,
body[data-page="entries"] .entry-calendar-link-panel {
    width: min(920px, 100%);
    margin-inline: auto;
}

body[data-page="entries"] .proof-photo-panel {
    --meal-card: color-mix(in srgb, var(--surface-2) 36%, var(--surface));
    --meal-card-strong: color-mix(in srgb, var(--surface) 92%, transparent);
    --meal-field: color-mix(in srgb, var(--surface) 82%, var(--surface-2));
    --meal-soft: color-mix(in srgb, var(--primary) 5%, var(--surface));
    --meal-border: color-mix(in srgb, var(--ink) 11%, transparent);
    --meal-border-accent: color-mix(in srgb, var(--primary) 34%, transparent);
    --meal-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 7%, transparent);
}

body[data-page="entries"] .proof-photo-panel > .panel-head {
    margin-bottom: 0.75rem;
    padding-bottom: 0.72rem;
    border-bottom: 1px solid var(--meal-border);
}

body[data-page="entries"] .proof-photo-panel > .panel-head h2,
body[data-page="entries"] .entry-recent-photos-panel .panel-head h2 {
    margin-bottom: 0;
}

body[data-page="entries"] .proof-photo-main-card,
body[data-page="entries"] .proof-photo-side-card {
    gap: 0.75rem;
    padding: 0.85rem;
    border-color: var(--meal-border);
    border-radius: 18px;
    background:
        linear-gradient(145deg, color-mix(in srgb, #fff 38%, transparent), transparent 42%),
        var(--meal-card);
    box-shadow: var(--meal-shadow);
}

body[data-page="entries"] .proof-photo-form label {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 800;
}

body[data-page="entries"] .proof-photo-form :is(input:not([type="file"]), select, textarea),
body[data-page="entries"] .proof-photo-upload-label input[type="file"] {
    min-height: 46px;
    color: var(--ink);
    border-color: var(--meal-border);
    background: var(--meal-field);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent);
}

body[data-page="entries"] .proof-photo-upload-block {
    gap: 0.48rem;
    padding: 0.75rem;
    border-color: var(--meal-border-accent);
    border-radius: 15px;
    background: var(--meal-soft);
}

body[data-page="entries"] .proof-photo-upload-label > span {
    color: var(--ink);
}

body[data-page="entries"] .proof-photo-upload-label input[type="file"] {
    padding: 0.38rem;
    border-radius: 13px;
}

body[data-page="entries"] .proof-photo-upload-label input[type="file"]::file-selector-button {
    min-height: 36px;
    margin-right: 0.7rem;
    padding: 0.5rem 0.95rem;
    border: 0;
    border-radius: 999px;
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 16%, var(--meal-card-strong));
    cursor: pointer;
    font-weight: 800;
    transition: background 0.16s ease;
}
body[data-page="entries"] .proof-photo-upload-label input[type="file"]::file-selector-button:hover {
    background: color-mix(in srgb, var(--primary) 26%, var(--meal-card-strong));
}

body[data-page="entries"] .proof-photo-upload-state {
    color: color-mix(in srgb, var(--primary) 58%, var(--ink));
}

body[data-page="entries"] .proof-photo-submit {
    min-height: 50px;
    border-color: rgba(20, 163, 139, 0.56);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 46%),
        linear-gradient(135deg, var(--primary), #0b7f70);
    box-shadow: 0 14px 30px rgba(20, 163, 139, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

body[data-page="entries"] .proof-photo-side-card {
    grid-template-rows: auto auto minmax(220px, 1fr);
}

body[data-page="entries"] .photo-nutrition-tools .btn {
    min-height: 42px;
    border-color: var(--meal-border);
    color: color-mix(in srgb, var(--primary) 62%, var(--ink));
    background: var(--meal-card-strong);
    box-shadow: none;
}

body[data-page="entries"] .photo-nutrition-panel {
    padding: 0.72rem;
    border-color: var(--meal-border);
    border-radius: 14px;
    background: var(--meal-soft);
}

body[data-page="entries"] .proof-photo-preview,
body[data-page="entries"] .photo-placeholder {
    min-width: 0;
}

body[data-page="entries"] .photo-placeholder,
body[data-page="entries"] .proof-photo-preview img {
    border-color: var(--meal-border);
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 42%),
        var(--meal-field);
}

body[data-page="entries"] .photo-placeholder-content {
    gap: 0.42rem;
}

body[data-page="entries"] .photo-placeholder-content svg {
    color: color-mix(in srgb, var(--primary) 52%, var(--muted));
}

body[data-page="entries"] .photo-placeholder-content p {
    color: var(--ink);
}

body[data-page="entries"] .proof-photo-server-hint {
    margin: 0.7rem 0 0;
    padding-inline: 0.2rem;
    line-height: 1.45;
}

body[data-page="entries"] .entry-recent-photos-panel .photo-grid figure {
    border-color: color-mix(in srgb, var(--ink) 11%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-2) 36%, var(--surface));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 9%, transparent);
}

body[data-page="entries"] .entry-recent-photos-panel .photo-grid figcaption {
    color: var(--ink);
    border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
    background: color-mix(in srgb, var(--surface-2) 36%, var(--surface));
}

body[data-page="entries"] .entry-calendar-link-panel {
    display: flex;
    justify-content: flex-end;
    padding: 0.65rem;
}

body[data-page="entries"] .entry-calendar-link-panel .btn {
    min-height: 44px;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .proof-photo-panel {
    --meal-card: rgba(19, 31, 42, 0.92);
    --meal-card-strong: rgba(31, 47, 61, 0.90);
    --meal-field: rgba(8, 15, 22, 0.76);
    --meal-soft: rgba(20, 163, 139, 0.075);
    --meal-border: rgba(170, 193, 204, 0.19);
    --meal-border-accent: rgba(20, 163, 139, 0.34);
    --meal-shadow: 0 18px 42px rgba(0, 0, 0, 0.25);
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .proof-photo-main-card,
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .proof-photo-side-card {
    color: var(--ink);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018) 74px, transparent 150px),
        var(--meal-card);
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .proof-photo-form :is(input:not([type="file"]), select, textarea),
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .proof-photo-upload-label input[type="file"] {
    color: #edf7f4;
    border-color: var(--meal-border);
    background: var(--meal-field);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .proof-photo-upload-label input[type="file"]::file-selector-button {
    color: color-mix(in srgb, var(--primary) 52%, #ffffff);
    border: 0;
    background: color-mix(in srgb, var(--primary) 30%, var(--meal-field));
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .photo-nutrition-tools .btn,
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .proof-photo-upload-state,
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .photo-nutrition-line {
    color: #72dec9;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .photo-placeholder,
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .proof-photo-preview img,
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .photo-nutrition-panel {
    border-color: var(--meal-border);
    background:
        radial-gradient(circle at 50% 16%, rgba(20, 163, 139, 0.11), transparent 44%),
        rgba(8, 15, 22, 0.66);
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .photo-placeholder-unsupported {
    background: rgba(84, 37, 27, 0.28);
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .entry-recent-photos-panel .photo-grid figure,
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .entry-recent-photos-panel .photo-grid figcaption {
    color: #edf7f4;
    border-color: rgba(170, 193, 204, 0.18);
    background: rgba(15, 25, 35, 0.90);
}

@media (max-width: 768px) {
    body[data-page="entries"] .proof-photo-panel,
    body[data-page="entries"] .entry-recent-photos-panel,
    body[data-page="entries"] .entry-calendar-link-panel {
        border-radius: 20px;
    }

    body[data-page="entries"] .proof-photo-panel {
        padding: 0.75rem;
    }

    body[data-page="entries"] .proof-photo-panel > .panel-head {
        margin-bottom: 0.65rem;
        padding-bottom: 0.65rem;
    }

    /* Phones: flatten the two nested cards into the panel — one clean flow. */
    body[data-page="entries"] .proof-photo-main-card,
    body[data-page="entries"] .proof-photo-side-card {
        gap: 0.7rem;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    body[data-page="entries"] .proof-photo-grid {
        gap: 0.85rem;
    }

    body[data-page="entries"] .proof-photo-meta {
        gap: 0.55rem;
    }

    body[data-page="entries"] .proof-photo-upload-block {
        padding: 0.68rem;
    }

    body[data-page="entries"] .proof-photo-side-card {
        grid-template-rows: auto auto;
    }

    body[data-page="entries"] .proof-photo-preview {
        height: auto;
    }

    body[data-page="entries"] .photo-placeholder {
        height: auto;
        min-height: 150px;
    }

    body[data-page="entries"] .proof-photo-preview img {
        height: auto;
        min-height: 200px;
        max-height: 340px;
    }

    body[data-page="entries"] .entry-recent-photos-panel,
    body[data-page="entries"] .entry-calendar-link-panel {
        padding: 0.75rem;
    }

    body[data-page="entries"] .entry-calendar-link-panel .btn {
        width: 100%;
    }
}

@media (max-width: 420px) {
    body[data-page="entries"] .proof-photo-meta {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-page="entries"] .photo-nutrition-advanced {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Entries data form — dark mode: sections/rows had hardcoded light backgrounds
   (same family as the .check fix) which made labels unreadable in dark. */
body[data-theme="dark"] .entry-form-section,
body.theme-active-dark .entry-form-section,
body[data-theme="dark"] .entry-data-form .workout-row,
body.theme-active-dark .entry-data-form .workout-row,
body[data-theme="dark"] .entry-workout-toggle,
body.theme-active-dark .entry-workout-toggle {
    background: var(--dark-ui-row, rgba(19, 31, 42, 0.88));
    border-color: var(--dark-ui-border, rgba(170, 193, 204, 0.20));
}
@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .entry-form-section,
    body[data-theme="auto"] .entry-data-form .workout-row,
    body[data-theme="auto"] .entry-workout-toggle {
        background: var(--dark-ui-row, rgba(19, 31, 42, 0.88));
        border-color: var(--dark-ui-border, rgba(170, 193, 204, 0.20));
    }
}

/* ==========================================================================
   Team — overlapping member avatar stack (roster at a glance)
   ========================================================================== */
.team-avatar-stack {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
    margin: 0.1rem 0 0.9rem;
    padding-inline-start: 2px;
}
.team-avatar-stack-item {
    width: 36px;
    height: 36px;
    margin-inline-start: -11px;
    border: 2px solid var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
    transition: transform 0.14s ease;
}
.team-avatar-stack-item:first-child { margin-inline-start: 0; }
.team-avatar-stack-item:hover { transform: translateY(-2px); position: relative; z-index: 2; }
.team-avatar-stack-more {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    margin-inline-start: -11px;
    padding: 0 9px;
    border-radius: 999px;
    border: 2px solid var(--surface);
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 800;
}
body[data-theme="dark"] .team-avatar-stack-item,
body.theme-active-dark .team-avatar-stack-item,
body[data-theme="dark"] .team-avatar-stack-more,
body.theme-active-dark .team-avatar-stack-more { border-color: var(--dark-ui-surface); }
body[data-theme="dark"] .team-avatar-stack-more,
body.theme-active-dark .team-avatar-stack-more {
    background: color-mix(in srgb, var(--primary) 24%, var(--dark-ui-surface));
    color: color-mix(in srgb, var(--primary) 55%, #ffffff);
}

.team-active-challenge-contributors {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    margin: 0.2rem 0 0;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.team-active-challenge-contributors:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.team-active-challenge-contributors .team-avatar-stack { margin: 0; }
.team-active-challenge-contributors small { color: var(--muted); }
.team-active-challenge-contributors small strong { color: var(--ink); }

.team-challenge-detail-contributors { margin-top: 0.9rem; }
.team-challenge-detail-contributors > strong { display: block; margin-bottom: 0.5rem; }

.dashboard-active-challenge-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.dashboard-active-challenge-contributors { margin-top: 0.8rem; }
.dashboard-active-challenge-contributors > p { margin: 0 0 0.5rem; }

/* This widget only ever has 2 stats (current/target), so it needs its own
   2-up grid — the shared .compact-metrics-row is hardcoded to 4 columns,
   which squeezes goal values like "9500 steps" into a quarter-width cell
   and wraps them onto two lines. */
.dashboard-active-challenge-panel .compact-metrics-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Social hub — the hierarchy screen is capped at 760px, so the 12-col
   two-up layout is always cramped and clips content. Stack the overview
   cards full-width at every size. */
.social-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}
.social-dashboard-grid > .social-overview-card {
    grid-column: 1 / -1;
}

/* ==========================================================================
   Meal entry + Social hub — final layout repair
   ========================================================================== */
@media (max-width: 768px) {
    body[data-page="entries"] .proof-photo-grid {
        gap: 0.8rem;
    }

    body[data-page="entries"] .proof-photo-main-card,
    body[data-page="entries"] .proof-photo-side-card {
        gap: 0.72rem;
        padding: 0.72rem;
        border: 1px solid var(--meal-border);
        border-radius: 17px;
        background:
            linear-gradient(145deg, color-mix(in srgb, #fff 30%, transparent), transparent 42%),
            var(--meal-card);
        box-shadow: var(--meal-shadow);
    }

    body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .proof-photo-main-card,
    body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .proof-photo-side-card {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.015) 68px, transparent 132px),
            var(--meal-card);
    }

    body[data-page="entries"] .proof-photo-side-card {
        grid-template-rows: auto auto auto;
    }

    body[data-page="entries"] .photo-nutrition-tools,
    body[data-page="entries"] .photo-nutrition-tools .btn {
        width: 100%;
    }

    body[data-page="entries"] .photo-nutrition-tools .btn {
        justify-content: center;
    }

    body[data-page="entries"] .proof-photo-preview {
        height: auto;
    }

    body[data-page="entries"] .photo-placeholder {
        height: 190px;
        min-height: 190px;
    }

    body[data-page="entries"] .proof-photo-preview img {
        height: auto;
        min-height: 210px;
        max-height: 360px;
    }

    body[data-page="entries"] .entry-recent-photos-panel,
    body[data-page="entries"] .entry-calendar-link-panel {
        margin-top: 0.15rem;
    }
}

@media (min-width: 341px) and (max-width: 768px) {
    body[data-page="entries"] .proof-photo-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body[data-page="social"] .social-hub-screen {
    display: grid;
    gap: clamp(0.9rem, 2.5vw, 1.15rem);
}

body[data-page="social"] .social-hub-screen > * {
    min-width: 0;
    margin-block: 0;
}

body[data-page="social"] .social-quick-actions,
body[data-page="social"] .social-section-grid {
    gap: 0.65rem;
}

body[data-page="social"] .social-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

body[data-page="social"] .social-dashboard-grid > .social-overview-card {
    grid-column: 1;
    gap: 0.85rem;
    padding: 0.9rem;
    border-radius: 19px;
}

body[data-page="social"] .social-team-overview {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--ui-soft-shadow);
}

body[data-page="social"] .social-team-overview::before {
    content: none;
}

body[data-page="social"] .social-team-overview .social-card-head {
    align-items: center;
    padding-left: 0;
}

body[data-page="social"] .social-team-overview .social-card-head h2 {
    margin: 0;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

body[data-page="social"] .social-team-overview .social-card-head > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 13px 4px 10px;
    border: 0;
    border-radius: 0;
    color: var(--primary-dark);
    background: transparent;
}

body[data-page="social"] .social-team-overview-list {
    display: grid;
    gap: 8px;
    min-width: 0;
}

body[data-page="social"] .social-team-summary-card {
    position: relative;
    isolation: isolate;
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 0;
    border-radius: 15px;
    background: var(--surface-2);
    box-shadow: none;
}

body[data-page="social"] .social-team-summary-card.has-cover::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 74%, transparent), color-mix(in srgb, var(--surface) 45%, transparent) 62%, color-mix(in srgb, var(--surface) 64%, transparent));
    content: "";
}

body[data-page="social"] .social-team-summary-cover {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    object-fit: cover;
}

body[data-page="social"] .social-team-summary-card > :not(.social-team-summary-cover) {
    position: relative;
    z-index: 2;
}

body[data-page="social"] .social-team-summary-identity {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 62px;
    padding: 8px 10px 6px;
    color: inherit;
    text-decoration: none;
}

body[data-page="social"] .social-team-summary-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--surface) 88%, transparent);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #2563eb, #14a38b);
    font-size: 0.65rem;
    font-weight: 900;
}

body[data-page="social"] .social-team-summary-icon.has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body[data-page="social"] .social-team-summary-identity > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 2px;
}

body[data-page="social"] .social-team-summary-identity :is(strong, small) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="social"] .social-team-summary-identity strong { font-size: 0.78rem; }
body[data-page="social"] .social-team-summary-identity small { color: var(--muted); font-size: 0.58rem; }
body[data-page="social"] .social-team-summary-identity > b { color: var(--muted); font-size: 1.15rem; font-weight: 500; }

body[data-page="social"] .social-team-summary-members {
    display: flex;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 10px 7px;
    border-top: 0;
}

body[data-page="social"] .social-team-summary-members > strong {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.58rem;
    white-space: nowrap;
}

body[data-page="social"] .social-team-summary-members .social-avatar-list {
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 0;
}

body[data-page="social"] .social-team-summary-members .social-avatar-list > * + * { margin-left: -20px; }

body[data-page="social"] .social-team-summary-members .social-avatar-list > a {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    transition: transform 0.16s ease;
}

body[data-page="social"] .social-team-summary-members :is(.social-person-avatar, .social-avatar-more) {
    width: 34px;
    height: 34px;
    border-width: 2px;
    font-size: 0.58rem;
}

body[data-page="social"] .social-team-summary-members .social-avatar-list a:hover,
body[data-page="social"] .social-team-summary-members .social-avatar-list a:focus-visible {
    z-index: 12;
    transform: translateY(-2px);
}

body[data-page="social"] .social-competition-overview {
    gap: 8px;
    padding: 10px;
    border-color: var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: none;
}

body[data-page="social"] .social-competition-overview .social-card-head {
    min-height: 36px;
    align-items: center;
}

body[data-page="social"] .social-competition-overview .social-card-head h2 {
    margin: 0;
    font-size: 0.86rem;
}

body[data-page="social"] .social-competition-overview .social-card-head > a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 8px 3px;
    color: var(--primary-dark);
    font-size: 0.62rem;
}

body[data-page="social"] .social-competition-overview .social-competition-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
    border: 0;
    border-radius: 0;
}

body[data-page="social"] .social-competition-overview .social-competition-metrics > a {
    --competition-stat-tone: #7c3aed;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    min-width: 0;
    min-height: 50px;
    place-items: center stretch;
    align-content: center;
    gap: 6px;
    padding: 6px;
    border: 0;
    border-radius: 11px;
    color: var(--ink);
    background: color-mix(in srgb, var(--competition-stat-tone) 7%, var(--surface-2));
    text-align: left;
    text-decoration: none;
}

body[data-page="social"] .social-competition-overview .social-competition-metrics > a[data-tone="team"] { --competition-stat-tone: #2563eb; }
body[data-page="social"] .social-competition-overview .social-competition-metrics > a[data-tone="pending"] { --competition-stat-tone: #f59e0b; }
body[data-page="social"] .social-competition-overview .social-competition-metrics > a + a { border: 0; }

body[data-page="social"] .social-competition-stat-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    color: var(--competition-stat-tone);
    background: color-mix(in srgb, var(--competition-stat-tone) 11%, var(--surface));
}

body[data-page="social"] .social-competition-stat-icon svg { width: 15px; height: 15px; }

body[data-page="social"] .social-competition-stat-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

body[data-page="social"] .social-competition-stat-copy strong {
    font-size: 0.8rem;
    line-height: 1;
}

body[data-page="social"] .social-competition-stat-copy small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.5rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="social"] .social-circle-overview .social-people-list {
    max-height: min(430px, 52dvh);
    gap: 5px;
    padding-right: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

body[data-page="social"] .social-person-row {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 62px;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 14px;
    background: var(--surface-2);
}

body[data-page="social"] .social-person-row::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 74%, transparent), color-mix(in srgb, var(--surface) 45%, transparent) 62%, color-mix(in srgb, var(--surface) 64%, transparent));
}

body[data-page="social"] .social-person-row:not(.has-cover)::before {
    display: none;
}

body[data-page="social"] .social-person-row > :not(.social-person-cover) {
    position: relative;
    z-index: 2;
}

body[data-page="social"] .social-person-cover {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 0.84;
    object-fit: cover;
}

body[data-page="social"] .social-person-row .social-person-avatar {
    border-color: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.16);
}

body[data-page="social"] .social-person-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

body[data-page="social"] .social-person-chevron {
    color: var(--muted);
    font-size: 1.25rem;
}

body[data-page="social"] .social-person-row.has-cover :is(strong, small, .social-person-chevron) {
    text-shadow: 0 1px 5px color-mix(in srgb, var(--surface) 72%, transparent);
}

body[data-page="social"] .social-team-identity-row {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

body[data-page="social"] .social-team-identity-row.has-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 76%, transparent), color-mix(in srgb, var(--surface) 48%, transparent) 64%, color-mix(in srgb, var(--surface) 66%, transparent));
}

body[data-page="social"] .social-team-identity-row > :not(.social-team-row-cover) {
    position: relative;
    z-index: 2;
}

body[data-page="social"] .social-team-row-cover {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 0.84;
    object-fit: cover;
}

body[data-page="social"] .social-team-list-mark.has-image,
body[data-page="social"] .social-team-custom-icon.has-image {
    overflow: hidden;
    padding: 0;
}

body[data-page="social"] :is(.social-team-list-mark, .social-team-custom-icon).has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body[data-page="social"] .social-team-section-list > a {
    min-height: 66px;
    border-radius: 16px;
}

body[data-page="social"] .social-team-create-disclosure {
    display: grid;
    padding: 10px;
    border: 1px solid color-mix(in srgb, #2563eb 24%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, #2563eb 5%, var(--surface));
}

body[data-page="social"] .social-team-create-disclosure > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 12px;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

body[data-page="social"] .social-team-create-disclosure > summary::-webkit-details-marker { display: none; }
body[data-page="social"] .social-team-create-disclosure > summary > :first-child { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #2563eb; background: color-mix(in srgb, #2563eb 12%, var(--surface)); }
body[data-page="social"] .social-team-create-disclosure > summary svg { width: 18px; height: 18px; }
body[data-page="social"] .social-team-create-disclosure > summary strong { flex: 1; font-size: 0.76rem; }
body[data-page="social"] .social-team-create-disclosure > summary > :last-child { font-size: 1.1rem; transition: transform 0.16s ease; }
body[data-page="social"] .social-team-create-disclosure[open] > summary > :last-child { transform: rotate(45deg); }

body[data-page="social"] .social-team-create-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    padding: 8px 4px 3px;
}

body[data-page="social"] .social-team-create-form label { display: grid; min-width: 0; gap: 4px; color: var(--muted); font-size: 0.65rem; font-weight: 800; }
body[data-page="social"] .social-team-create-form input { width: 100%; min-width: 0; min-height: 44px; }
body[data-page="social"] .social-team-create-form .btn { min-height: 44px; white-space: nowrap; }

body[data-page="social"]:is([data-theme="dark"], .theme-active-dark) .social-team-overview {
    border-color: var(--line);
    background: var(--surface);
}

body[data-page="social"]:is([data-theme="dark"], .theme-active-dark) .social-team-overview .social-card-head > a {
    color: var(--primary);
    border-color: transparent;
    background: transparent;
}

body[data-page="social"]:is([data-theme="dark"], .theme-active-dark) .social-team-summary-card {
    border-color: transparent;
    background: var(--surface-2);
}

body[data-page="social"]:is([data-theme="dark"], .theme-active-dark) .social-team-overview .social-person-avatar,
body[data-page="social"]:is([data-theme="dark"], .theme-active-dark) .social-team-overview .social-avatar-more {
    border-color: #10202c;
}

@media (min-width: 700px) {
    body[data-page="social"] .social-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="social"] .social-team-overview,
    body[data-page="social"] .social-competition-overview,
    body[data-page="social"] .social-community-overview,
    body[data-page="social"] .social-circle-overview {
        grid-column: span 1;
    }

    body[data-page="social"] .social-activity-overview {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    body[data-page="social"] .social-hub-screen {
        gap: 0.9rem;
    }

    body[data-page="social"] .social-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem;
    }

    body[data-page="social"] .social-dashboard-grid > .social-overview-card { grid-column: 1; }

    body[data-page="social"] .social-team-overview .social-card-head > a {
        min-height: 44px;
        padding-inline: 0.58rem;
    }

    body[data-page="social"] .social-team-create-form {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-page="social"] .social-team-create-form .btn {
        width: 100%;
    }
}

@media (min-width: 421px) and (max-width: 699px) {
    body[data-page="social"] .social-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    body[data-page="social"] .social-dashboard-grid > .social-overview-card { grid-column: 1; }
}

/* Entries / meal — match Home's flat, near-black dark surfaces. */
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) {
    --meal-pitch-panel: rgba(18, 27, 36, 0.96);
    --meal-pitch-card: rgba(15, 25, 35, 0.98);
    --meal-pitch-field: rgba(7, 13, 19, 0.94);
    --meal-pitch-raised: rgba(24, 37, 50, 0.96);
    --meal-pitch-border: rgba(170, 193, 204, 0.20);
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .entry-mode-tabs {
    color: #edf7f4;
    border-color: var(--meal-pitch-border);
    background: var(--meal-pitch-panel);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) :is(
    .proof-photo-panel,
    .entry-recent-photos-panel,
    .entry-calendar-link-panel
) {
    color: #edf7f4;
    border-color: var(--meal-pitch-border) !important;
    background: var(--meal-pitch-panel) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) :is(
    .proof-photo-panel,
    .entry-recent-photos-panel,
    .entry-calendar-link-panel
)::before {
    display: none;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .proof-photo-panel {
    --meal-card: var(--meal-pitch-card);
    --meal-card-strong: var(--meal-pitch-raised);
    --meal-field: var(--meal-pitch-field);
    --meal-soft: rgba(10, 39, 41, 0.82);
    --meal-border: var(--meal-pitch-border);
    --meal-border-accent: rgba(20, 163, 139, 0.38);
    --meal-shadow: none;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .proof-photo-panel > .panel-head {
    border-bottom-color: var(--meal-pitch-border);
    background: transparent;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) :is(
    .proof-photo-main-card,
    .proof-photo-side-card
) {
    color: #edf7f4;
    border-color: var(--meal-pitch-border);
    background: var(--meal-pitch-card);
    background-image: none;
    box-shadow: none;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .proof-photo-form :is(
    input:not([type="file"]),
    select,
    textarea
),
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .proof-photo-upload-label input[type="file"] {
    color: #edf7f4;
    border-color: var(--meal-pitch-border);
    background: var(--meal-pitch-field);
    background-image: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .proof-photo-upload-block {
    border-color: rgba(20, 163, 139, 0.38);
    background: rgba(9, 38, 40, 0.78);
    background-image: none;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .proof-photo-upload-label input[type="file"]::file-selector-button {
    color: #8ce9d7;
    background: rgba(20, 163, 139, 0.18);
    background-image: none;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) :is(
    .photo-nutrition-panel,
    .photo-placeholder,
    .proof-photo-preview img
) {
    color: #edf7f4;
    border-color: var(--meal-pitch-border);
    background: var(--meal-pitch-field);
    background-image: none;
    box-shadow: none;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .photo-nutrition-tools .btn,
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .entry-calendar-link-panel .btn.btn-ghost {
    color: #72dec9 !important;
    border-color: var(--meal-pitch-border) !important;
    background: var(--meal-pitch-raised) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .photo-nutrition-tools .btn:hover,
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .entry-calendar-link-panel .btn.btn-ghost:hover {
    color: #a8f3e5 !important;
    border-color: rgba(20, 163, 139, 0.44) !important;
    background: rgba(24, 52, 54, 0.96) !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .entry-recent-photos-panel .photo-grid figure,
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .entry-recent-photos-panel .photo-grid figcaption {
    color: #edf7f4;
    border-color: var(--meal-pitch-border);
    background: var(--meal-pitch-card);
    background-image: none;
    box-shadow: none;
}

/* Entries / meal — compact mobile composition. */
@media (max-width: 768px) {
    body[data-page="entries"] .screen.stack-lg {
        gap: 0.62rem;
    }

    body[data-page="entries"] .entry-mode-tabs {
        min-height: 46px;
        padding: 0.16rem;
    }

    body[data-page="entries"] .entry-mode-tabs a {
        min-height: 40px;
        padding-block: 0.42rem;
    }

    body[data-page="entries"] .proof-photo-panel {
        padding: 0.68rem;
    }

    body[data-page="entries"] .proof-photo-panel > .panel-head {
        margin-bottom: 0.55rem;
        padding-bottom: 0.52rem;
    }

    body[data-page="entries"] .proof-photo-panel > .panel-head .eyebrow {
        margin-bottom: 0.15rem;
    }

    body[data-page="entries"] .proof-photo-panel > .panel-head h2 {
        font-size: 1rem;
    }

    body[data-page="entries"] .proof-photo-form,
    body[data-page="entries"] .proof-photo-grid {
        gap: 0.55rem;
    }

    body[data-page="entries"] .proof-photo-main-card,
    body[data-page="entries"] .proof-photo-side-card {
        gap: 0.55rem;
        padding: 0.62rem;
        border-radius: 15px;
    }

    body[data-page="entries"] .proof-photo-form label {
        gap: 0.28rem;
        font-size: 0.76rem;
    }

    body[data-page="entries"] .proof-photo-form :is(input:not([type="file"]), select, textarea),
    body[data-page="entries"] .proof-photo-upload-label input[type="file"] {
        min-height: 44px;
        padding-block: 0.55rem;
        border-radius: 13px;
    }

    body[data-page="entries"] .proof-photo-meta {
        gap: 0.48rem;
        margin-bottom: 0;
    }

    body[data-page="entries"] .proof-photo-upload-block {
        gap: 0.3rem;
        padding: 0.58rem;
        border-radius: 13px;
    }

    body[data-page="entries"] .proof-photo-upload-label {
        gap: 0.32rem;
    }

    body[data-page="entries"] .proof-photo-upload-label input[type="file"] {
        padding: 0.3rem;
    }

    body[data-page="entries"] .proof-photo-upload-label input[type="file"]::file-selector-button {
        min-height: 32px;
        margin-right: 0.5rem;
        padding: 0.4rem 0.7rem;
        font-size: 0.75rem;
    }

    body[data-page="entries"] .proof-photo-upload-state {
        font-size: 0.7rem;
        line-height: 1.25;
    }

    body[data-page="entries"] .proof-photo-upload-block > .muted:last-child {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 0.68rem;
        line-height: 1.3;
    }

    body[data-page="entries"] .proof-photo-submit {
        min-height: 46px;
    }

    body[data-page="entries"] .proof-photo-side-card {
        grid-template-rows: auto auto;
    }

    body[data-page="entries"] .photo-nutrition-tools .btn {
        min-height: 40px;
        padding-block: 0.45rem;
        font-size: 0.75rem;
    }

    body[data-page="entries"] .photo-nutrition-panel {
        gap: 0.45rem;
        padding: 0.58rem;
    }

    body[data-page="entries"] .photo-placeholder {
        height: 108px;
        min-height: 108px;
        border-radius: 13px;
    }

    body[data-page="entries"] .photo-placeholder-content {
        grid-template-columns: 30px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        justify-items: start;
        gap: 0.08rem 0.65rem;
        width: 100%;
        max-width: 310px;
        padding: 0.75rem;
        text-align: left;
    }

    body[data-page="entries"] .photo-placeholder-content svg {
        grid-row: 1 / 3;
        width: 28px;
        height: 28px;
    }

    body[data-page="entries"] .photo-placeholder-content p {
        font-size: 0.85rem;
        line-height: 1.2;
    }

    body[data-page="entries"] .photo-placeholder-content small {
        font-size: 0.68rem;
        line-height: 1.25;
    }

    body[data-page="entries"] .proof-photo-preview img {
        min-height: 160px;
        max-height: 300px;
        border-radius: 13px;
    }

    body[data-page="entries"] .proof-photo-server-hint {
        margin-top: 0.48rem;
        font-size: 0.67rem;
        line-height: 1.3;
    }

    body[data-page="entries"] .entry-recent-photos-panel {
        padding: 0.68rem;
    }

    body[data-page="entries"] .entry-recent-photos-panel .panel-head {
        margin-bottom: 0.45rem;
    }

    body[data-page="entries"] .entry-recent-photos-panel .panel-head .eyebrow {
        margin-bottom: 0.12rem;
    }

    body[data-page="entries"] .entry-recent-photos-panel .panel-head h2 {
        font-size: 0.96rem;
    }

    body[data-page="entries"] .entry-recent-photos-panel > .muted {
        margin-bottom: 0;
        font-size: 0.78rem;
    }

    body[data-page="entries"] .entry-calendar-link-panel {
        padding: 0.45rem;
    }

    body[data-page="entries"] .entry-calendar-link-panel .btn {
        min-height: 42px;
        padding-block: 0.5rem;
        font-size: 0.8rem;
    }
}

/* Entries / data — use the same flat near-black system as meal and Home. */
body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .entry-data-panel {
    color: #edf7f4;
    border-color: var(--meal-pitch-border) !important;
    background: var(--meal-pitch-panel) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .entry-data-panel::before {
    display: none;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .entry-data-toolbar {
    border-bottom-color: var(--meal-pitch-border);
    background: transparent;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .entry-data-form :is(
    .entry-form-section,
    .workout-repeater,
    .entry-reason-section .conditional-reason,
    .entry-notes-field,
    .entry-form-actions
) {
    color: #edf7f4;
    border-color: var(--meal-pitch-border);
    background: var(--meal-pitch-card);
    background-image: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) :is(
    .entry-date-nav input,
    .entry-date-time-row input,
    .entry-data-form input:not([type="checkbox"]):not([type="radio"]),
    .entry-data-form select,
    .entry-data-form textarea
) {
    color: #edf7f4;
    border-color: var(--meal-pitch-border);
    background: var(--meal-pitch-field);
    background-image: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) :is(
    .entry-day-arrow,
    .workout-toggle-row [data-workout-add]
) {
    color: #72dec9 !important;
    border-color: var(--meal-pitch-border) !important;
    background: var(--meal-pitch-raised) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) :is(
    .entry-workout-toggle,
    .entry-data-form .workout-row,
    .entries-toggles.pill-toggles .check
) {
    color: #edf7f4;
    border-color: var(--meal-pitch-border);
    background: var(--meal-pitch-field);
    background-image: none;
    box-shadow: none;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .entry-weight-control {
    color: #edf7f4;
    border-color: rgba(20, 163, 139, 0.34);
    background: rgba(9, 38, 40, 0.78);
    background-image: none;
    box-shadow: none;
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .entry-weight-input input {
    background: var(--meal-pitch-field);
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .entry-weight-icon {
    color: #72dec9;
    background: rgba(20, 163, 139, 0.18);
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .entry-form-actions .btn-primary {
    border-color: rgba(20, 163, 139, 0.56);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 46%),
        linear-gradient(135deg, var(--primary), #0b7f70);
    box-shadow: 0 12px 26px rgba(20, 163, 139, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body[data-page="entries"]:is([data-theme="dark"], .theme-active-dark) .workout-remove-btn {
    border-color: rgba(223, 76, 67, 0.30) !important;
    background: rgba(86, 28, 29, 0.42) !important;
    background-image: none !important;
}

/* ==========================================================================
   External profile: clearer identity, relationship CTA and card rhythm
   ========================================================================== */
.profile-external-view {
    gap: 0.9rem;
}

.profile-external-view > .context-back-nav {
    margin-bottom: -0.1rem;
}

.profile-external-view .context-back-btn {
    min-height: 42px;
    padding: 0.55rem 0.78rem;
    border-radius: 13px;
    font-size: 0.78rem;
    font-weight: 800;
}

.profile-external-view > .profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.05rem !important;
    border-radius: 22px !important;
    border-color: color-mix(in srgb, var(--primary) 18%, var(--line)) !important;
    background: var(--surface) !important;
    background-image: none !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.profile-external-view .profile-title {
    min-width: 0;
}

.profile-external-view .profile-title .hero-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.profile-external-view .profile-title .hero-copy :is(.eyebrow, h1, p) {
    margin: 0;
}

.profile-external-view .profile-title .hero-copy h1 {
    font-size: clamp(1.42rem, 2.5vw, 1.85rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.profile-external-view .profile-title .hero-copy > .muted {
    overflow: hidden;
    font-size: 0.76rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-external-view .profile-level {
    margin-top: 0.2rem;
}

.profile-external-view .profile-hero-actions.has-friend-actions {
    display: block;
    width: 100%;
    max-width: none;
    justify-self: stretch;
}

.profile-external-view .profile-friend-actions-hero {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.62rem;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
    box-shadow: none;
}

.profile-friend-status-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 13%, var(--surface));
}

.profile-friend-status-icon svg {
    width: 21px;
    height: 21px;
}

.profile-external-view .profile-friend-actions-hero > .profile-friend-status {
    display: grid;
    align-content: center;
    gap: 0.12rem;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--ink);
    background: transparent;
    white-space: normal;
}

.profile-external-view .profile-friend-status strong,
.profile-external-view .profile-friend-status small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-external-view .profile-friend-status strong {
    font-size: 0.8rem;
    font-weight: 850;
    line-height: 1.18;
    white-space: nowrap;
}

.profile-external-view .profile-friend-status small {
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 650;
    line-height: 1.25;
    white-space: normal;
}

.profile-friend-action-controls {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    min-width: 0;
}

.profile-external-view .profile-friend-action-controls .profile-friend-action-form {
    flex: 0 1 auto;
}

.profile-external-view .profile-friend-action-controls .btn-primary {
    min-height: 42px;
    padding: 0.58rem 0.78rem;
    border-radius: 13px;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(20, 163, 139, 0.18);
}

.profile-external-view .profile-friend-actions-hero[data-friend-status="none"] .btn-primary::before {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-right: 0.32rem;
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 50%;
    font-size: 0.9rem;
    line-height: 1;
}

.profile-external-view .profile-friend-action-controls .kebab-menu > summary.kebab-menu-trigger {
    border-radius: 13px;
}

.profile-external-view .profile-mobile-root,
.profile-external-view .profile-home-grid {
    gap: 0.75rem;
}

.profile-external-view .hierarchy-status-strip,
.profile-external-view .hierarchy-nav-row,
.profile-external-view .profile-home-grid > .profile-home-card {
    border-radius: 18px;
    box-shadow: none !important;
}

.profile-external-view > .profile-hero::before,
.profile-external-view .profile-home-grid > .profile-home-card::before {
    content: none !important;
    display: none !important;
}

.profile-external-view .profile-home-grid > .profile-home-card {
    border-color: var(--line) !important;
    background: var(--surface) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-page="profile"]:is([data-theme="dark"], .theme-active-dark) .profile-external-view {
    --profile-external-bg: var(--dark-ui-surface, rgba(18, 27, 36, 0.94));
    --profile-external-raised: var(--dark-ui-surface-strong, rgba(22, 34, 46, 0.96));
    --profile-external-border: var(--dark-ui-border, rgba(170, 193, 204, 0.20));
}

body[data-page="profile"]:is([data-theme="dark"], .theme-active-dark) .profile-external-view :is(
    .context-back-btn,
    .profile-hero,
    .profile-friend-actions-hero,
    .hierarchy-status-strip,
    .hierarchy-nav-row,
    .profile-home-grid > .profile-home-card
) {
    color: #eef7f4;
    border-color: var(--profile-external-border) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.045)),
        var(--profile-external-bg) !important;
    box-shadow:
        var(--liquid-glass-shadow, 0 18px 42px rgba(0, 0, 0, 0.34)),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

body[data-page="profile"]:is([data-theme="dark"], .theme-active-dark) .profile-external-view .profile-friend-actions-hero {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
        var(--profile-external-raised) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

body[data-page="profile"]:is([data-theme="dark"], .theme-active-dark) .profile-external-view > .profile-hero::before,
body[data-page="profile"]:is([data-theme="dark"], .theme-active-dark) .profile-external-view .profile-home-grid > .profile-home-card::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 1px 1px auto;
    height: 42%;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent);
    opacity: 0.5;
    pointer-events: none;
}

body[data-page="profile"]:is([data-theme="dark"], .theme-active-dark) .profile-external-view :is(
    .profile-friend-status-icon,
    .hierarchy-nav-icon,
    .hierarchy-nav-meta
) {
    color: #71dfc9;
    background: rgba(20, 163, 139, 0.14);
}

body[data-page="profile"]:is([data-theme="dark"], .theme-active-dark) .profile-external-view .profile-friend-actions-hero > .profile-friend-status {
    color: #eef7f4;
    border: 0 !important;
    background: transparent !important;
}

@media (max-width: 899px) {
    .profile-external-view > .profile-hero {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .profile-external-view .profile-hero-actions.has-friend-actions {
        justify-self: stretch;
    }
}

@media (max-width: 560px) {
    .profile-external-view {
        gap: 0.75rem;
    }

    .profile-external-view > .context-back-nav {
        margin-bottom: -0.2rem;
    }

    .profile-external-view > .profile-hero {
        gap: 0.8rem;
        padding: 0.85rem !important;
        border-radius: 20px !important;
    }

    .profile-external-view .profile-title {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 0.7rem;
        align-items: center;
    }

    .profile-external-view .profile-avatar {
        width: 64px !important;
        height: 64px !important;
        min-height: 64px !important;
        flex-basis: 64px !important;
    }

    .profile-external-view .profile-title .hero-copy h1 {
        font-size: 1.38rem;
    }

    .profile-external-view .profile-title .hero-copy > .muted {
        white-space: normal;
    }

    .profile-external-view .profile-friend-actions-hero {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 0.45rem;
        padding: 0.45rem;
        border-radius: 15px;
    }

    .profile-external-view .profile-friend-status-icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .profile-external-view .profile-friend-status-icon svg {
        width: 18px;
        height: 18px;
    }

    .profile-external-view .profile-friend-status small {
        display: none;
    }

    .profile-external-view .profile-friend-action-controls {
        grid-column: auto;
        width: auto;
    }

    .profile-external-view .profile-friend-action-controls .profile-friend-action-form {
        flex: 0 1 auto;
    }

    .profile-external-view .profile-friend-action-controls .profile-friend-action-form .btn {
        width: auto;
        min-height: 42px;
        padding-inline: 0.65rem;
        font-size: 0.7rem;
    }

    .profile-external-view .hierarchy-status-strip > span {
        min-height: 58px;
        padding-block: 7px;
    }

    .profile-external-view .mobile-hub-section-grid {
        grid-auto-rows: 82px;
        gap: 0.6rem;
    }

    .profile-external-view .mobile-hub-section-grid > .hierarchy-nav-row {
        min-height: 82px;
        border-radius: 17px;
    }
}

@media (max-width: 360px) {
    .profile-external-view .profile-friend-actions-hero {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .profile-external-view .profile-friend-status-icon {
        display: none;
    }

    .profile-external-view .profile-friend-actions-hero[data-friend-status="none"] .btn-primary::before {
        display: none;
    }
}

/* External profiles use the same surfaces and card language as the owner's
   profile. Only the relationship control stays special and compact. */
.profile-external-view > .profile-hero {
    display: block;
    min-height: 132px;
    padding: 1.05rem !important;
    padding-right: min(18rem, 34vw) !important;
    border-color: var(--liquid-glass-border, var(--line)) !important;
    border-radius: var(--radius) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.045)),
        var(--liquid-glass-bg, var(--surface)) !important;
    box-shadow:
        var(--liquid-glass-shadow, var(--shadow)),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(var(--liquid-glass-blur, 0px)) saturate(var(--liquid-glass-saturation, 100%)) !important;
    -webkit-backdrop-filter: blur(var(--liquid-glass-blur, 0px)) saturate(var(--liquid-glass-saturation, 100%)) !important;
}

.profile-external-view .profile-hero-actions.has-friend-actions {
    position: absolute;
    inset: 0.7rem 0.7rem auto auto;
    display: inline-flex;
    width: auto;
    max-width: min(260px, calc(100% - 1.4rem));
    justify-self: auto;
}

.profile-external-view .profile-friend-actions-hero {
    display: inline-flex;
    grid-template-columns: none;
    width: auto;
    max-width: 100%;
    min-height: 40px;
    gap: 0.3rem;
    padding: 3px;
    border-color: var(--liquid-glass-border, var(--line));
    border-radius: 999px;
    background: var(--liquid-glass-bg-strong, var(--surface)) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12) !important;
    backdrop-filter: blur(14px) saturate(145%);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.profile-external-view .profile-friend-status-icon,
.profile-external-view .profile-friend-actions-hero > .profile-friend-status small {
    display: none;
}

.profile-external-view .profile-friend-actions-hero > .profile-friend-status {
    min-height: 34px;
    max-width: 100px;
    padding: 0.3rem 0.55rem;
    border: 0 !important;
    color: var(--ink) !important;
    background: transparent !important;
}

.profile-external-view .profile-friend-actions-hero > .profile-friend-status strong {
    overflow: hidden;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-external-view .profile-friend-actions-hero[data-friend-status="none"] > .profile-friend-status {
    display: none;
}

.profile-external-view .profile-friend-action-controls {
    width: auto;
    gap: 0.22rem;
}

.profile-external-view .profile-friend-action-controls :is(.profile-friend-action-form, .profile-friend-hero-action) {
    flex: 0 0 auto;
    width: auto;
}

.profile-external-view .profile-friend-action-controls .profile-friend-action-form .btn {
    width: auto;
    min-width: 0;
    min-height: 34px;
    padding: 0.36rem 0.62rem;
    border-radius: 999px;
    font-size: 0.66rem;
    box-shadow: none;
}

.profile-external-view .profile-friend-action-controls .kebab-menu > summary.kebab-menu-trigger {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 50%;
}

.profile-external-view .profile-home-grid > .profile-home-card {
    border-color: var(--liquid-glass-border, var(--line)) !important;
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.045)),
        var(--liquid-glass-bg, var(--surface)) !important;
    box-shadow:
        var(--liquid-glass-shadow, var(--shadow)),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(var(--liquid-glass-blur, 0px)) saturate(var(--liquid-glass-saturation, 100%)) !important;
    -webkit-backdrop-filter: blur(var(--liquid-glass-blur, 0px)) saturate(var(--liquid-glass-saturation, 100%)) !important;
}

.profile-external-view > .profile-hero::before,
.profile-external-view .profile-home-grid > .profile-home-card::before {
    content: none !important;
    display: none !important;
}

body[data-page="profile"]:is([data-theme="dark"], .theme-active-dark) .profile-external-view :is(
    .profile-hero,
    .profile-home-grid > .profile-home-card,
    .profile-friend-actions-hero,
    .hierarchy-nav-row
) {
    color: var(--dark-ui-text, var(--ink));
    border-color: var(--dark-ui-border, var(--line)) !important;
    background: var(--dark-ui-surface, var(--surface)) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.profile-rank-heading-link {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
    color: inherit;
    text-decoration: none;
}

.profile-rank-heading-link:hover h2,
.profile-rank-heading-link:focus-visible h2 {
    color: var(--primary-dark);
}

@media (max-width: 640px) {
    .profile-external-view > .profile-hero {
        min-height: 0;
        padding: 0.85rem !important;
        padding-top: 3.55rem !important;
        border-radius: var(--radius) !important;
    }

    .profile-external-view .profile-hero-actions.has-friend-actions {
        inset: 0.55rem 0.55rem auto auto;
        width: auto;
        justify-self: auto;
    }

    .profile-external-view .profile-friend-actions-hero {
        display: inline-flex;
        grid-template-columns: none;
        width: auto;
        padding: 3px;
    }

    .profile-external-view .profile-title {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .profile-external-view .profile-mobile-root {
        gap: 0.6rem;
    }

    .profile-external-view .mobile-hub-section-grid {
        grid-auto-rows: 88px;
        gap: 8px;
    }

    .profile-external-view .mobile-hub-section-grid > .hierarchy-nav-row {
        min-height: 88px;
        border-radius: 16px;
    }
}

@media (max-width: 380px) {
    .profile-external-view .profile-friend-actions-hero > .profile-friend-status {
        display: none;
    }
}

/* ==========================================================================
   Team overview: Home-density widgets without losing comparison data
   ========================================================================== */
body[data-page="team"] .team-hierarchy-screen[data-team-section=""] {
    gap: 0.75rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid {
    gap: 0.72rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid > .panel,
body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid > .grid-two > .panel {
    padding: 0.75rem !important;
    border-radius: 18px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid .panel-head {
    min-height: 0;
    gap: 0.45rem;
    margin-bottom: 0.48rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid .panel-head :is(.eyebrow, h2),
body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid > .chart-card > h2,
body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid > .grid-two > .chart-card > h2 {
    margin: 0;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid .panel-head .eyebrow {
    margin-bottom: 0.1rem;
    font-size: 0.62rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid .panel-head h2,
body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid > .chart-card > h2,
body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid > .grid-two > .chart-card > h2 {
    font-size: 0.94rem;
    line-height: 1.18;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-metrics.metric-grid {
    gap: 0.58rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-metrics .metric-card {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 0.55rem;
    min-height: 84px;
    padding: 0.58rem;
    border-radius: 16px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-metrics .progress-ring {
    width: 54px;
    height: 54px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-metrics .progress-ring > span {
    width: 40px;
    font-size: 0.66rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-metrics .metric-card > div:last-child > span {
    font-size: 0.65rem;
    line-height: 1.08;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-metrics .metric-card strong {
    margin-top: 0.12rem;
    font-size: 1.06rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-metrics .metric-card p {
    margin-top: 0.12rem;
    font-size: 0.65rem;
    line-height: 1.15;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-leaderboard-cards {
    gap: 0.45rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-leaderboard-card {
    grid-template-columns: minmax(250px, 0.95fr) minmax(0, 1.45fr);
    gap: 0.55rem;
    padding: 0.55rem;
    border-radius: 14px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-leaderboard-card-head {
    gap: 0.42rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-rank {
    min-width: 32px;
    height: 28px;
    border-radius: 9px;
    font-size: 0.76rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-leaderboard-user {
    gap: 0.4rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-leaderboard-user .member-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-leaderboard-user strong {
    font-size: 0.82rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-leaderboard-user small {
    font-size: 0.64rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-leaderboard-metrics {
    gap: 0.34rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-leaderboard-metrics > span {
    min-height: 46px;
    padding: 0.32rem 0.4rem;
    border-radius: 10px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-leaderboard-metrics strong {
    font-size: 0.82rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-leaderboard-metrics small {
    font-size: 0.61rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-challenges-panel .card-list,
body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-members-panel .card-list,
body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-missions-list,
body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-achievements-panel .achievement-grid {
    gap: 0.5rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-goal-card,
body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-goal-mobile-preview {
    min-height: 88px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-goal-mobile-preview {
    gap: 0.3rem 0.6rem;
    padding: 0.68rem 3rem 0.68rem 0.72rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-avatar-stack {
    display: none;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-members-panel .member-card {
    min-height: 48px;
    gap: 0.45rem;
    padding: 0.42rem 0.5rem;
    border-radius: 13px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-members-panel .member-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-members-panel .member-card-body strong {
    font-size: 0.82rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-members-panel .member-card-meta {
    font-size: 0.64rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-competitions .empty-state {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    justify-items: stretch;
    gap: 0.5rem;
    padding: 0.35rem 0;
    text-align: left;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-competitions .empty-state-icon {
    width: 34px;
    height: 34px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-competitions .empty-state-icon svg {
    width: 20px;
    height: 20px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-competitions .empty-state p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.7rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-competitions .empty-state .btn {
    min-height: 44px;
    padding-inline: 0.62rem;
    font-size: 0.7rem;
    white-space: nowrap;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid :is(
    .team-widget-daily-charts,
    .team-widget-weekly-charts
) {
    gap: 0.72rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid :is(
    .team-widget-daily-charts,
    .team-widget-weekly-charts,
    .team-cumulative-chart-card
) .chart-card,
body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid :is(
    .team-widget-daily-charts,
    .team-widget-weekly-charts,
    .team-cumulative-chart-card
) {
    min-height: 0;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid :is(
    .team-widget-daily-charts,
    .team-widget-weekly-charts,
    .team-cumulative-chart-card
) canvas {
    height: 178px !important;
    max-height: 178px !important;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-achievements-panel .achievement-grid {
    --achievement-panel-card-height: 86px;
    --achievement-panel-grid-gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-achievement-card {
    grid-template-columns: 46px minmax(0, 1fr);
    height: auto;
    min-height: 86px;
    gap: 0.52rem;
    padding: 0.52rem;
    border-radius: 14px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-achievement-media {
    width: 46px;
    height: 46px;
    border-radius: 12px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-achievement-body {
    gap: 0.16rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-achievement-body strong {
    font-size: 0.8rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-achievement-body p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-achievement-card .achievement-chip {
    min-height: 20px;
    padding: 0.1rem 0.38rem;
    font-size: 0.62rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] > .team-desktop-root > .hero-panel {
    gap: 0.65rem;
    padding: 0.78rem !important;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] > .team-desktop-root > .hero-panel h1 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
}

body[data-page="team"] .team-hierarchy-screen[data-team-section=""] > .team-desktop-root > .hero-panel .muted {
    margin: 0;
    font-size: 0.76rem;
}

@media (max-width: 700px) {
    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid {
        gap: 0.62rem;
    }

    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid > .panel,
    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid > .grid-two > .panel {
        padding: 0.65rem !important;
        border-radius: 16px;
    }

    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-metrics.metric-grid {
        gap: 0.48rem;
    }

    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-metrics .metric-card {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 0.42rem;
        min-height: 76px;
        padding: 0.48rem;
        border-radius: 14px;
    }

    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-metrics .progress-ring {
        width: 46px;
        height: 46px;
    }

    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-metrics .progress-ring > span {
        width: 34px;
        font-size: 0.6rem;
    }

    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-metrics .metric-card strong {
        font-size: 0.92rem;
    }

    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-leaderboard-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.4rem;
        padding: 0.48rem;
    }

    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-leaderboard-card-head {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-leaderboard-card-head .badge {
        grid-column: auto;
        justify-self: end;
        max-width: 78px;
        padding: 0.1rem 0.34rem;
        font-size: 0.61rem;
    }

    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-leaderboard-metrics {
        grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
        gap: 0.28rem;
    }

    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-leaderboard-metrics > span {
        min-height: 42px;
        padding: 0.26rem 0.32rem;
    }

    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-layout-grid :is(
        .team-widget-daily-charts,
        .team-widget-weekly-charts,
        .team-cumulative-chart-card
    ) canvas {
        height: 118px !important;
        max-height: 118px !important;
    }

    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-daily-charts > .chart-card,
    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-weekly-charts > .chart-card {
        flex-basis: min(82vw, 390px);
    }

    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-achievements-panel .achievement-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 340px) {
    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-competitions .empty-state {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body[data-page="team"] .team-hierarchy-screen[data-team-section=""] .team-widget-competitions .empty-state-icon {
        display: none;
    }
}

/* Team chart and section menus: quiet accents, real empty states and the same
   compact component density inside every mobile hub destination. */
body[data-page="team"] .team-layout-grid > [data-team-widget] {
    border-top: 0 !important;
}

body[data-page="team"] .team-widget-daily-charts,
body[data-page="team"] .team-widget-weekly-charts {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
}

body[data-page="team"] .team-widget-daily-charts > .chart-card,
body[data-page="team"] .team-widget-weekly-charts > .chart-card {
    width: 100%;
    min-width: 0;
}

body[data-page="team"] .team-chart-card-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 52px !important;
    padding: 0.6rem 0.7rem !important;
}

body[data-page="team"] .team-chart-card-empty::before {
    height: 100%;
    opacity: 0.22;
}

body[data-page="team"] .team-chart-card-empty > h2 {
    min-width: 0;
    overflow: hidden;
    font-size: 0.84rem !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="team"] .team-chart-empty {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.22rem 0.48rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.2;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) {
    gap: 0.65rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-layout-grid {
    gap: 0.62rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-layout-grid > .panel,
body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-layout-grid > .grid-two > .panel {
    padding: 0.65rem !important;
    border-radius: 16px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-layout-grid .panel-head {
    min-height: 0;
    gap: 0.42rem;
    margin-bottom: 0.45rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-layout-grid .panel-head .eyebrow {
    margin-bottom: 0.08rem;
    font-size: 0.61rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-layout-grid .panel-head h2 {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.18;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-widget-metrics.metric-grid {
    gap: 0.48rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-widget-metrics .metric-card {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 0.42rem;
    min-height: 76px;
    padding: 0.48rem;
    border-radius: 14px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-widget-metrics .progress-ring {
    width: 46px;
    height: 46px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-widget-metrics .progress-ring > span {
    width: 34px;
    font-size: 0.6rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-widget-metrics .metric-card > div:last-child > span {
    font-size: 0.64rem;
    line-height: 1.08;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-widget-metrics .metric-card strong {
    margin-top: 0.1rem;
    font-size: 0.92rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-widget-metrics .metric-card p {
    margin-top: 0.1rem;
    font-size: 0.64rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-leaderboard-cards {
    gap: 0.45rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-leaderboard-card {
    gap: 0.4rem;
    padding: 0.48rem;
    border-radius: 14px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-leaderboard-card-head {
    gap: 0.42rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-rank {
    min-width: 32px;
    height: 28px;
    border-radius: 9px;
    font-size: 0.76rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-leaderboard-user {
    gap: 0.4rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-leaderboard-user .member-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-leaderboard-user strong {
    font-size: 0.82rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-leaderboard-user small {
    font-size: 0.64rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-leaderboard-metrics {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 0.28rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-leaderboard-metrics > span {
    min-height: 42px;
    padding: 0.26rem 0.32rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-members-panel .card-list {
    gap: 0.45rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-members-panel .member-card {
    min-height: 48px;
    gap: 0.45rem;
    padding: 0.42rem 0.5rem;
    border-radius: 13px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-achievements-panel .achievement-grid {
    --achievement-panel-card-height: 86px;
    --achievement-panel-grid-gap: 0.5rem;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-achievement-card {
    grid-template-columns: 46px minmax(0, 1fr);
    height: auto;
    min-height: 86px;
    gap: 0.52rem;
    padding: 0.52rem;
    border-radius: 14px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-achievement-media {
    width: 46px;
    height: 46px;
    border-radius: 12px;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-achievement-body {
    gap: 0.16rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-achievement-body strong {
    font-size: 0.8rem;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section]:not([data-team-section=""]) .team-achievement-body p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 0.68rem;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body[data-page="team"] .team-achievements-head-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex: 0 0 auto;
}

body[data-page="team"] .team-achievements-head-actions .btn {
    min-height: 40px;
    padding-inline: 0.62rem;
    font-size: 0.7rem;
    white-space: nowrap;
}

@media (max-width: 700px) {
    body[data-page="team"] .team-widget-daily-charts,
    body[data-page="team"] .team-widget-weekly-charts {
        display: grid;
        grid-template-columns: 1fr;
        overflow: visible;
        padding: 0;
    }

    body[data-page="team"] .team-widget-daily-charts > .chart-card,
    body[data-page="team"] .team-widget-weekly-charts > .chart-card {
        flex: none;
        width: 100%;
    }
}

/* Compact secondary screens: achievements, competitions and team workflows. */
.achievements-page-screen,
body[data-page="competitions"] .competitions-screen,
body[data-page="competitions"] .contextual-route-back {
    width: min(100%, 920px);
    margin-inline: auto;
}

.achievements-page-screen {
    display: grid;
    gap: 0.6rem;
}

.achievements-page-screen > :where(.achievements-page-header, .achievement-summary-strip, .achievement-filter-tabs, .achievements-page-panel) {
    width: 100%;
    margin: 0;
}

.achievements-page-screen .achievements-page-header {
    min-height: 52px;
    padding: 0;
}

.achievements-page-screen .achievements-page-header > div {
    gap: 0;
}

.achievements-page-screen .achievements-page-header h1 {
    font-size: 1.08rem;
}

.achievements-page-screen .achievements-page-header p:not(.eyebrow) {
    font-size: 0.68rem;
}

.achievements-page-screen .achievement-summary-strip {
    gap: 0.45rem;
}

.achievements-page-screen .achievement-summary-card {
    min-height: 58px;
    align-content: center;
    justify-items: center;
    gap: 0.12rem;
    padding: 0.45rem;
    border-radius: 14px;
    text-align: center;
    box-shadow: none;
}

.achievements-page-screen .achievement-summary-card strong {
    font-size: 1rem;
}

.achievements-page-screen .achievement-summary-card small {
    font-size: 0.58rem;
    line-height: 1.12;
    letter-spacing: 0;
}

.achievements-page-screen .achievement-filter-tabs {
    min-height: 42px;
    padding: 3px;
}

.achievements-page-screen .achievement-filter-tabs a {
    min-height: 36px;
    padding: 0.3rem 0.4rem;
    font-size: 0.7rem;
}

.achievements-page-screen .achievements-page-panel {
    padding: 0.65rem;
    border-radius: 16px;
    box-shadow: none;
}

.achievements-page-screen .achievements-page-panel .panel-head {
    min-height: 0;
    margin-bottom: 0.45rem;
}

.achievements-page-screen .achievements-page-panel .panel-head .eyebrow {
    margin-bottom: 0.08rem;
    font-size: 0.58rem;
}

.achievements-page-screen .achievements-page-panel .panel-head h2 {
    font-size: 0.9rem;
}

.achievements-page-screen .achievement-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.achievements-page-screen .achievement-list-card {
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    min-height: 88px;
    height: auto;
    padding: 0.48rem;
    border-radius: 14px;
    box-shadow: none;
}

.achievements-page-screen .achievement-list-card .achievement-visual {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 12px;
}

.achievements-page-screen .achievement-list-card .achievement-visual svg {
    width: 22px;
    height: 22px;
}

.achievements-page-screen .achievement-list-content {
    gap: 0.14rem;
}

.achievements-page-screen .achievement-list-title-row {
    align-items: center;
    gap: 0.3rem;
}

.achievements-page-screen .achievement-list-content h3 {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.79rem;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.achievements-page-screen .achievement-list-content > p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.66rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.achievements-page-screen .achievement-card-meta {
    flex-wrap: nowrap;
    min-height: 0;
    gap: 0.22rem;
    margin: 0;
    overflow: hidden;
}

.achievements-page-screen .achievement-chip {
    min-height: 18px;
    padding: 0.1rem 0.34rem;
    font-size: 0.58rem;
    line-height: 1.1;
    white-space: nowrap;
}

.achievements-page-screen .achievement-progress {
    gap: 0.12rem;
    margin-top: 0;
}

.achievements-page-screen .achievement-progress .goal-progress {
    height: 4px;
}

.achievements-page-screen .achievement-progress small {
    overflow: hidden;
    font-size: 0.58rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="competitions"] .competitions-screen {
    gap: 0.62rem;
}

body[data-page="competitions"] .contextual-route-back {
    margin-bottom: 0.35rem;
}

body[data-page="competitions"] .contextual-route-back .hierarchy-back {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    box-shadow: none;
}
body[data-page="competitions"] .contextual-route-back .hierarchy-back.destination-back {
    width: auto;
    max-width: 104px;
    height: auto;
    border-radius: 999px;
}

body[data-page="competitions"] .competitions-screen > .app-page-hero {
    min-height: 68px;
    padding: 0.65rem 0.75rem;
    border-radius: 16px;
    box-shadow: none;
}

body[data-page="competitions"] .competitions-screen > .app-page-hero h1 {
    font-size: 1.08rem;
}

body[data-page="competitions"] .competitions-screen > .app-page-hero .muted {
    margin-top: 0.1rem;
    font-size: 0.68rem;
    line-height: 1.3;
}

body[data-page="competitions"] .competitions-screen > .panel {
    padding: 0.65rem;
    border-radius: 16px;
    box-shadow: none;
}

body[data-page="competitions"] .competitions-screen > .panel > .panel-head {
    min-height: 0;
    margin-bottom: 0.45rem;
}

body[data-page="competitions"] .competitions-screen > .panel > .panel-head h2 {
    font-size: 0.9rem;
}

body[data-page="competitions"] .competitions-screen .stack-md {
    gap: 0.45rem;
}

body[data-page="competitions"] .competitions-screen .duel-card {
    gap: 0.4rem;
    padding: 0.55rem 0.6rem;
    border-radius: 13px;
}

body[data-page="competitions"] .competitions-screen .duel-vs {
    gap: 0.35rem;
}

body[data-page="competitions"] .competitions-screen .duel-side {
    gap: 0.16rem;
    padding: 0.25rem;
}

body[data-page="competitions"] .competitions-screen .comp-squad-badge {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 11px;
    font-size: 0.76rem;
}

body[data-page="competitions"] .competitions-screen .duel-side strong {
    font-size: 0.76rem;
}

body[data-page="competitions"] .competitions-screen .duel-value {
    font-size: 0.9rem;
}

body[data-page="competitions"] .competitions-screen .duel-metric-tag,
body[data-page="competitions"] .competitions-screen .duel-vs-label {
    font-size: 0.6rem;
}

body[data-page="competitions"] .competitions-screen .versus-details-toggle {
    min-height: 36px;
    padding: 0.35rem 0.45rem;
    font-size: 0.68rem;
}

body[data-page="competitions"] .competitions-screen .versus-details {
    gap: 0.3rem;
    padding: 0.45rem;
}

body[data-page="competitions"] .competitions-screen .competition-empty-state {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas: "icon title action" "icon hint action";
    align-items: center;
    gap: 0.08rem 0.55rem;
    min-height: 64px;
    padding: 0.45rem;
    text-align: left;
}

body[data-page="competitions"] .competition-empty-state .empty-state-icon {
    grid-area: icon;
    width: 38px;
    height: 38px;
}

body[data-page="competitions"] .competition-empty-state p {
    margin: 0;
}

body[data-page="competitions"] .competition-empty-state p:first-of-type {
    grid-area: title;
    font-size: 0.76rem;
}

body[data-page="competitions"] .competition-empty-state p.muted {
    grid-area: hint;
    font-size: 0.62rem;
    line-height: 1.25;
}

body[data-page="competitions"] .competition-empty-state > .btn {
    grid-area: action;
    white-space: nowrap;
}

body[data-page="competitions"] .competitions-screen .squad-card {
    gap: 0.42rem;
    padding: 0.55rem;
    border-radius: 13px;
}

body[data-page="competitions"] .competitions-screen .squad-card-head strong {
    font-size: 0.86rem;
}

body[data-page="competitions"] .competitions-screen .squad-members {
    gap: 0.3rem;
}

body[data-page="competitions"] .competitions-screen .squad-member-chip {
    min-height: 32px;
    padding: 0.18rem 0.42rem;
    font-size: 0.7rem;
}

body[data-page="competitions"] .competitions-screen .squad-secondary-actions {
    margin-top: 0.25rem;
}

body[data-page="competitions"] .competitions-screen .squad-secondary-actions-body {
    gap: 0.4rem;
}

body[data-page="competitions"] .competitions-screen .squad-secondary-actions-body :is(.squad-add-form, .squad-challenge-form) {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(110px, 0.7fr) 82px auto;
    gap: 0.4rem;
    padding: 0.45rem;
}

body[data-page="competitions"] .competitions-screen .squad-add-form {
    grid-template-columns: minmax(160px, 1fr) auto !important;
}

/* The create/edit challenge sheet keeps related fields on the same row. */
.confirm-modal-card.team-goal-modal-card {
    width: min(94vw, 720px);
    gap: 0.55rem;
    padding: 0.85rem;
}

.confirm-modal-card.team-goal-modal-card > h3 {
    margin: 0;
    padding-right: 2.5rem;
    font-size: 1rem;
}

.team-goal-modal-close {
    top: 0.55rem;
    right: 0.55rem;
}

.team-goal-form {
    gap: 0.5rem;
}

.team-goal-form > label,
.team-goal-datetime-row > label {
    min-width: 0;
    gap: 0.22rem;
    font-size: 0.67rem;
    font-weight: 800;
}

.team-goal-form :is(input, select) {
    width: 100%;
    min-width: 0;
}

/* Fecha + hora share a row instead of each taking a full one — date gets more
   room than time since native date pickers need it, but both stay wide
   enough to render without clipping. */
.team-goal-datetime-row {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 0.5rem;
}

.team-goal-form .check {
    min-height: 38px;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: color-mix(in srgb, var(--surface) 94%, var(--line));
    font-size: 0.68rem;
}

.team-goal-form-helper {
    margin: -0.05rem 0 0;
    font-size: 0.61rem;
    line-height: 1.25;
}

.team-goal-form .confirm-modal-actions {
    position: sticky;
    bottom: -0.85rem;
    z-index: 4;
    margin: 0.1rem -0.85rem -0.85rem;
    padding: 0.55rem 0.85rem calc(0.55rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body[data-page="team"] .team-hierarchy-screen[data-team-section="members"] .team-members-panel .team-avatar-stack {
    display: none;
}

body[data-page="team"] .team-hierarchy-screen[data-team-section="members"] .team-members-panel .member-card {
    min-height: 52px;
}

body[data-page="achievements"]:is([data-theme="dark"], .theme-active-dark) .achievements-page-screen :is(.achievement-summary-card, .achievement-list-card, .achievements-page-panel, .achievement-filter-tabs),
body[data-page="competitions"]:is([data-theme="dark"], .theme-active-dark) .competitions-screen :is(.app-page-hero, .panel, .duel-card, .squad-card) {
    border-color: var(--line) !important;
    background: var(--surface) !important;
    background-image: none !important;
    box-shadow: none !important;
}

@media (max-width: 700px) {
    .achievements-page-screen .achievement-page-grid {
        grid-template-columns: 1fr;
    }

    .achievements-page-screen .achievement-list-card {
        min-height: 88px;
        height: auto;
    }

    body[data-page="competitions"] .competitions-screen .competition-empty-state {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }

    body[data-page="competitions"] .competitions-screen .squad-secondary-actions-body :is(.squad-add-form, .squad-challenge-form) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="competitions"] .competitions-screen .squad-secondary-actions-body :is(.squad-add-form, .squad-challenge-form) > .btn {
        grid-column: 1 / -1;
    }

    .confirm-modal:has(.team-goal-modal-card) {
        place-items: end center;
        padding: 8px 8px 0;
    }

    .confirm-modal-card.team-goal-modal-card {
        width: 100%;
        max-height: calc(100dvh - 8px);
        padding: 0.75rem;
        border-radius: 20px 20px 0 0;
    }

    .team-goal-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .team-goal-form-full {
        grid-column: 1 / -1;
    }

    .team-goal-form .confirm-modal-actions {
        bottom: -0.75rem;
        margin: 0.1rem -0.75rem -0.75rem;
        padding-inline: 0.75rem;
    }

    body:has([data-team-goal-modal]:not([hidden])) .bottom-nav.mobile-liquid-nav {
        display: none !important;
    }
}

@media (max-width: 360px) {
    body[data-page="competitions"] .competitions-screen .competition-empty-state {
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-areas: "icon title" "icon hint" "action action";
    }

    body[data-page="competitions"] .competition-empty-state > .btn {
        width: 100%;
    }
}

/* Social creation and discovery flows. */
body[data-page="competitions"] .competition-new-challenge { display: grid; margin-bottom: 12px; }
body[data-page="competitions"] .competition-new-challenge > summary,
body[data-page="duels"] .duel-create-disclosure > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-height: 44px;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(145deg, #7c3aed, #5b21b6);
    box-shadow: 0 8px 18px rgba(109, 40, 217, 0.2);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 850;
    list-style: none;
}
body[data-page="competitions"] .competition-new-challenge > summary::-webkit-details-marker,
body[data-page="duels"] .duel-create-disclosure > summary::-webkit-details-marker { display: none; }
body[data-page="competitions"] .competition-new-challenge > summary svg,
body[data-page="duels"] .duel-create-disclosure > summary svg { width: 18px; height: 18px; }
body[data-page="competitions"] .competition-new-challenge > summary > span:last-child,
body[data-page="duels"] .duel-create-disclosure > summary > span:last-child { margin-left: 2px; font-size: 1rem; transition: transform 160ms ease; }
body[data-page="competitions"] .competition-new-challenge[open] > summary > span:last-child,
body[data-page="duels"] .duel-create-disclosure[open] > summary > span:last-child { transform: rotate(45deg); }
body[data-page="competitions"] .competition-new-challenge-body,
body[data-page="duels"] .duel-create-disclosure-body { margin-top: 10px; }

body[data-page="duels"] .duel-create-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 5%, var(--surface)), var(--surface) 58%);
}
body[data-page="duels"] .duel-create-intro { display: flex; align-items: center; min-width: 0; gap: 10px; }
body[data-page="duels"] .duel-create-intro-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--primary-dark); background: color-mix(in srgb, var(--primary) 13%, var(--surface)); }
body[data-page="duels"] .duel-create-intro-icon svg { width: 21px; height: 21px; }
body[data-page="duels"] .duel-create-intro > div { display: grid; min-width: 0; gap: 2px; }
body[data-page="duels"] .duel-create-intro :is(h2, p) { margin: 0; }
body[data-page="duels"] .duel-create-intro h2 { font-size: 0.98rem; }
body[data-page="duels"] .duel-create-intro p { color: var(--muted); font-size: 0.66rem; line-height: 1.35; }
body[data-page="duels"] .duel-add-friends-link { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px; min-height: 46px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--surface); font-size: 0.68rem; text-decoration: none; }
body[data-page="duels"] .duel-add-friends-link > span:first-child { color: var(--muted); }
body[data-page="duels"] .duel-add-friends-link > span:last-child { font-size: 1.2rem; }
body[data-page="duels"] .duel-create-disclosure { display: grid; }
body[data-page="duels"] .duel-create-disclosure > summary { width: auto; justify-content: center; justify-self: start; padding-inline: 11px 13px; border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line)); border-radius: 999px; color: #fff; background: linear-gradient(145deg, var(--primary), var(--primary-dark)); box-shadow: 0 7px 16px color-mix(in srgb, var(--primary) 24%, transparent); }
body[data-page="duels"] .duel-create-disclosure > summary > span:first-child { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.15); }
body[data-page="duels"] .duel-create-disclosure > summary > span:first-child svg { width: 15px; height: 15px; }
body[data-page="duels"] .duel-create-disclosure > summary > strong { font-size: 0.7rem; }
body[data-page="duels"] .duel-create-disclosure-body { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
body[data-page="duels"] .duel-create-disclosure-body > p { margin: 0 0 9px; line-height: 1.4; }
body[data-page="duels"] .duel-create-form { gap: 11px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-2); }
body[data-page="duels"] .duel-create-form-grid { display: grid; grid-template-columns: minmax(180px, 1.35fr) minmax(150px, 1fr) minmax(92px, 0.45fr); gap: 9px; }
body[data-page="duels"] .duel-create-form label { display: grid; min-width: 0; gap: 5px; color: var(--muted); font-size: 0.64rem; font-weight: 800; }
body[data-page="duels"] .duel-create-form :is(select, input) { width: 100%; min-width: 0; min-height: 46px; border-color: color-mix(in srgb, var(--primary) 14%, var(--line)); border-radius: 12px; color: var(--ink); background: var(--surface); font-size: 0.74rem; }
body[data-page="duels"] .duel-create-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body[data-page="duels"] .duel-create-form-actions > small { max-width: 50ch; color: var(--muted); font-size: 0.62rem; line-height: 1.35; }
body[data-page="duels"] .duel-create-form .btn { display: inline-flex; flex: 0 0 auto; width: auto; min-height: 44px; gap: 7px; padding-inline: 14px; }
body[data-page="duels"] .duel-create-form .btn svg { width: 16px; height: 16px; }

/* Duelos owns its route identity. Keep the restored page-specific UI compact
   and prevent long names or metric values from stretching the mobile grid. */
body[data-page="duels"] .duels-page > .app-page-hero {
    min-height: 68px;
    padding: 0.65rem 0.75rem;
    border-radius: 16px;
    box-shadow: none;
}
body[data-page="duels"] .duels-page > .app-page-hero h1 { font-size: 1.08rem; }
body[data-page="duels"] .duels-page > .app-page-hero .muted { margin-top: 0.1rem; font-size: 0.68rem; line-height: 1.3; }
body[data-page="duels"] .duels-explainer-panel { order: 2; }
body[data-page="duels"] .duels-explainer-panel > .panel-head { margin-bottom: 8px; }
body[data-page="duels"] .duels-how { gap: 9px; padding: 0; border: 0; background: transparent; }
body[data-page="duels"] .duels-columns { grid-template-columns: minmax(0, 1fr); }
body[data-page="duels"] .duels-create-panel { order: 1; }
body[data-page="duels"] .duels-active-panel { order: 3; }
body[data-page="duels"] .duels-incoming-panel { order: 4; }
body[data-page="duels"] .duels-outgoing-panel { order: 5; }
body[data-page="duels"] .duels-col-main { grid-column: 1; }
body[data-page="duels"] .duels-columns > .panel,
body[data-page="duels"] .duels-page > .panel { min-width: 0; padding: 12px; }
body[data-page="duels"] .duels-active-panel > .stack-md,
body[data-page="duels"] .duels-outgoing-panel > .stack-md { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
body[data-page="duels"] .duel-card { min-width: 0; overflow: hidden; gap: 8px; padding: 10px; border-color: color-mix(in srgb, var(--ink) 9%, var(--line)); background: var(--surface); }
body[data-page="duels"] .duel-card.is-active { border-color: color-mix(in srgb, var(--primary) 32%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 5%, var(--surface)), var(--surface) 48%); }
body[data-page="duels"] .duel-card.is-pending { border-style: dashed; background: color-mix(in srgb, #f59e0b 3%, var(--surface)); }
body[data-page="duels"] .duel-vs { grid-template-columns: minmax(0, 1fr) minmax(54px, auto) minmax(0, 1fr); gap: 7px; }
body[data-page="duels"] .duel-side { min-width: 0; padding: 6px 4px; border-radius: 13px; color: var(--ink); text-decoration: none; }
body[data-page="duels"] .duel-side strong,
body[data-page="duels"] .duel-value { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-page="duels"] .duel-pending-status { display: inline-flex; align-items: center; justify-self: center; gap: 6px; margin: 0; padding: 5px 9px; border-radius: 999px; color: #9a6700; background: color-mix(in srgb, #f59e0b 11%, var(--surface)); font-size: 0.63rem; font-weight: 800; }
body[data-page="duels"] .duel-pending-status > span { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 16%, transparent); }
body[data-page="duels"] .duel-card > .inline-form { justify-self: end; margin: 0; }
body[data-page="duels"] .duel-card-actions .btn { min-height: 44px; padding-inline: 10px; border-radius: 10px; font-size: 0.62rem; }
body[data-page="duels"] .duel-card > .inline-actions { margin-top: 0; }
body[data-page="duels"] .duels-incoming-panel .inline-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
body[data-page="duels"] .duels-incoming-panel .inline-actions :is(.inline-form, .btn) { width: 100%; }

@media (max-width: 430px) {
    body[data-page="duels"] .duels-page { gap: 0.75rem; }
    body[data-page="duels"] .duels-how { grid-template-columns: minmax(0, 1fr); }
    body[data-page="duels"] .duels-how li { gap: 8px; }
    body[data-page="duels"] .duels-how small { font-size: 0.68rem; }
    body[data-page="duels"] .duel-create-disclosure > summary { width: 100%; justify-self: stretch; }
    body[data-page="duels"] .duel-create-form-grid { grid-template-columns: minmax(0, 1fr); }
    body[data-page="duels"] .duel-create-form-actions { align-items: stretch; flex-direction: column; }
    body[data-page="duels"] .duel-create-form-actions > small { max-width: none; }
    body[data-page="duels"] .duel-create-form .btn { width: 100%; justify-content: center; }
    body[data-page="duels"] .duel-side .member-avatar { width: 42px; height: 42px; }
    body[data-page="duels"] .duel-side strong { font-size: 0.72rem; }
    body[data-page="duels"] .duel-value { font-size: 0.9rem; }
    body[data-page="duels"] .duel-metric-tag { max-width: 74px; font-size: 0.58rem; overflow-wrap: anywhere; }
    body[data-page="duels"] .duel-standing { align-items: flex-start; margin-top: 2px; padding: 7px 8px; font-size: 0.68rem; }
    body[data-page="duels"] .versus-details { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 4px; }
}

body[data-page="friends"] .friend-discovery-panel {
    overflow: hidden;
    padding: 0;
    border-color: color-mix(in srgb, #e1306c 16%, var(--line));
    background: linear-gradient(155deg, color-mix(in srgb, #fd1d1d 3%, var(--surface)), var(--surface) 42%);
}
body[data-page="friends"] .friends-list-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
body[data-page="friends"] .friends-list-heading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}
body[data-page="friends"] .friends-list-heading h1 {
    min-width: 0;
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.02rem, 2.4vw, 1.28rem);
    line-height: 1.12;
}
body[data-page="friends"] .friends-page-back {
    flex: 0 0 auto;
    min-height: 40px;
}
body[data-page="friends"] .friends-list-panel-head > .badge {
    flex: 0 0 auto;
    margin-left: auto;
}
body[data-page="friends"] .friend-discovery-head { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: 12px; padding: 14px 14px 8px; }
body[data-page="friends"] .friend-discovery-head > div { display: grid; min-width: 0; gap: 2px; }
body[data-page="friends"] .friend-discovery-head :is(p, h2) { margin: 0; }
body[data-page="friends"] .friend-discovery-head .eyebrow { color: #c13584; }
/* #c13584 only clears ~4:1 contrast against the dark-theme surface (--surface:
   #050505), under the 4.5:1 AA text minimum. Brighten it in dark mode the same
   way the base .eyebrow rule brightens var(--primary-dark) for dark surfaces. */
body[data-theme="dark"][data-page="friends"] .friend-discovery-head .eyebrow,
body.theme-active-dark[data-page="friends"] .friend-discovery-head .eyebrow {
    color: #f472b6;
}
body[data-page="friends"] .friend-discovery-head h2 { font-size: 1rem; }
body[data-page="friends"] .friend-discovery-head p:not(.eyebrow) { color: var(--muted); font-size: 0.68rem; line-height: 1.35; }
body[data-page="friends"] .friend-search-box { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 7px; margin: 4px 14px 12px; padding: 0 11px; border: 1px solid color-mix(in srgb, #8b5cf6 22%, var(--line)); border-radius: 13px; background: var(--surface); box-shadow: 0 5px 16px rgba(15, 23, 42, 0.05); }
body[data-page="friends"] .friend-search-box > span:first-child { display: grid; place-items: center; color: var(--muted); }
body[data-page="friends"] .friend-search-box svg { width: 18px; height: 18px; }
body[data-page="friends"] .friend-search-box input { width: 100%; min-width: 0; height: 46px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 0.76rem; box-shadow: none; }
body[data-page="friends"] .friend-suggestions-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px 7px; }
body[data-page="friends"] .friend-suggestions-head strong { font-size: 0.72rem; }
body[data-page="friends"] .friend-suggestions-head small { color: var(--muted); font-size: 0.58rem; }
body[data-page="friends"] .friend-suggestion-list { display: grid; max-height: 430px; overflow-y: auto; border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent); }
body[data-page="friends"] .friend-suggestion-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-width: 0; gap: 10px; min-height: 66px; padding: 8px 14px; }
body[data-page="friends"] .friend-suggestion-row[hidden] { display: none !important; }
body[data-page="friends"] .friend-suggestion-row + .friend-suggestion-row { border-top: 1px solid color-mix(in srgb, var(--line) 66%, transparent); }
body[data-page="friends"] .friend-suggestion-profile { display: flex; align-items: center; min-width: 0; gap: 10px; color: var(--ink); text-decoration: none; }
body[data-page="friends"] .friend-suggestion-profile .member-avatar { flex: 0 0 46px; width: 46px; height: 46px; object-fit: cover; border-radius: 50%; }
body[data-page="friends"] .friend-suggestion-profile > span { display: grid; min-width: 0; gap: 1px; }
body[data-page="friends"] .friend-suggestion-profile strong,
body[data-page="friends"] .friend-suggestion-profile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-page="friends"] .friend-suggestion-profile strong { font-size: 0.74rem; }
body[data-page="friends"] .friend-suggestion-profile small { color: var(--muted); font-size: 0.62rem; }
body[data-page="friends"] .friend-suggestion-row .btn { min-width: 78px; min-height: 44px; border-radius: 10px; }
body[data-page="friends"] .friend-search-empty,
body[data-page="friends"] .friend-discovery-empty { margin: 0; padding: 24px 14px; color: var(--muted); font-size: 0.7rem; text-align: center; }

/* Friend bars keep identity and actions on one row, with the profile cover as context. */
body[data-page="friends"] .mini-card.friends-row {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 82px;
}
body[data-page="friends"] .friends-row-cover {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}
body[data-page="friends"] .friends-row.has-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 72%, transparent) 0%, color-mix(in srgb, var(--surface) 42%, transparent) 54%, color-mix(in srgb, var(--surface) 62%, transparent) 100%);
}
body[data-page="friends"] .friends-row > :not(.friends-row-cover) {
    position: relative;
    z-index: 2;
}
body[data-page="friends"] .friends-row.has-cover .member-avatar {
    border: 2px solid color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.16);
}
body[data-page="friends"] .friends-row.has-cover :is(.friends-row-id strong, .friends-row-id small) {
    text-shadow: 0 1px 8px color-mix(in srgb, var(--surface) 92%, transparent);
}
body[data-page="friends"] .friends-row-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    width: auto;
    margin: 0;
}
body[data-page="friends"] .friends-row-actions > .btn,
body[data-page="friends"] .friends-row-actions .friends-action-form,
body[data-page="friends"] .friends-row-actions .friends-action-form .btn {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    white-space: nowrap;
}
body[data-page="friends"] .friends-row-actions .friends-action-form .btn {
    min-width: 72px;
    padding-inline: 11px;
}
body[data-page="friends"] .friends-secondary-menu {
    flex: 0 0 44px;
}

/* Comparison is one centred column. The legacy three-column rule on the row
   was also placing its two real children in the left two thirds. */
body[data-page="friends"] .friends-compare-panel {
    width: min(820px, 100%);
    margin-inline: auto;
}
body[data-page="friends"] .friends-compare-panel > .panel-head {
    align-items: center;
}
body[data-page="friends"] .friends-compare-head,
body[data-page="friends"] .friends-compare-lead,
body[data-page="friends"] .friends-compare-grid {
    width: min(700px, 100%);
    margin-inline: auto;
}
body[data-page="friends"] .friends-compare-row {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}
body[data-page="friends"] .friends-compare-line {
    grid-template-columns: minmax(72px, 1fr) minmax(112px, auto) minmax(72px, 1fr);
    width: 100%;
}
body[data-page="friends"] .friends-compare-val {
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

/* Joinable teams: compact row and an explicit, non-clickable requested state. */
body[data-page="team"] .team-join-screen .team-join-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 68px;
    padding: 10px 12px;
}
body[data-page="team"] .team-join-card-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}
body[data-page="team"] .team-join-card-copy strong,
body[data-page="team"] .team-join-card-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body[data-page="team"] .team-join-card-copy strong { font-size: 0.78rem; }
body[data-page="team"] .team-join-card-copy span { color: var(--muted); font-size: 0.64rem; }
body[data-page="team"] .team-join-card-action {
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding-inline: 12px;
    white-space: nowrap;
}
body[data-page="team"] .team-access-requested:disabled {
    color: color-mix(in srgb, var(--primary) 78%, var(--ink));
    border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
    opacity: 1;
    cursor: default;
}

@media (max-width: 700px) {
    body[data-page="team"] .btn.small { min-height: 44px; }
    body[data-page="competitions"] .competition-new-challenge > summary { width: 100%; justify-self: stretch; }
    body[data-page="competitions"] .competition-new-challenge-body { margin-top: 8px; }
    body[data-page="friends"] .friend-discovery-head { padding: 12px 12px 7px; }
    body[data-page="friends"] .friends-list-panel-head { gap: 8px; }
    body[data-page="friends"] .friends-list-heading { gap: 7px; }
    body[data-page="friends"] .friends-page-back { max-width: 90px; padding-inline: 9px; }
    body[data-page="friends"] .friend-search-box { margin-inline: 12px; }
    body[data-page="friends"] .friend-suggestions-head { padding-inline: 12px; }
    body[data-page="friends"] .friend-suggestion-row { min-height: 64px; padding-inline: 12px; }
    body[data-page="friends"] .friend-suggestion-profile .member-avatar { flex-basis: 42px; width: 42px; height: 42px; }
    body[data-page="friends"] .friend-suggestion-row .btn { min-width: 72px; padding-inline: 10px; }
    body[data-page="friends"] .mini-card.friends-row { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; min-height: 74px; padding: 8px; }
    body[data-page="friends"] .friends-row-id { gap: 7px; }
    body[data-page="friends"] .friends-row-id .member-avatar { flex: 0 0 40px; width: 40px; height: 40px; }
    body[data-page="friends"] .friends-row-actions { justify-content: flex-end; }
    body[data-page="friends"] .friends-compare-panel { padding-inline: 10px; }
    body[data-page="friends"] .friends-compare-head { padding-inline: 4px; }
    body[data-page="friends"] .friends-compare-line { grid-template-columns: minmax(58px, 1fr) minmax(92px, auto) minmax(58px, 1fr); gap: 7px; }
    body[data-page="friends"] .friends-compare-metric { font-size: 0.66rem; white-space: normal; }
    body[data-page="friends"] .friends-compare-val { font-size: 0.86rem; }
    body[data-page="team"] .team-join-screen .team-join-card { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 8px; }
    body[data-page="team"] .team-join-card-action { max-width: 142px; padding-inline: 10px; overflow: hidden; font-size: 0.66rem; text-overflow: ellipsis; }
}

@media (max-width: 359px) {
    body[data-page="friends"] .friends-row-actions .friends-action-form .btn { min-width: 64px; padding-inline: 8px; }
    body[data-page="friends"] .friends-row-id .member-avatar { flex-basis: 38px; width: 38px; height: 38px; }
    body[data-page="team"] .team-join-card-action { max-width: 126px; padding-inline: 8px; font-size: 0.61rem; }
}
.settings-tracked-metrics,
.dashboard-metric-visibility {
    display: grid;
    gap: 12px;
}

.settings-metric-toggle-grid,
.dashboard-metric-toggle-grid,
.onboarding-metric-preferences {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}

.settings-metric-toggle,
.onboarding-metric-toggle {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
}

.settings-metric-toggle > span,
.onboarding-metric-toggle > span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.settings-metric-toggle > span svg,
.onboarding-metric-toggle > span svg {
    width: 17px;
    height: 17px;
}

.settings-metric-toggle small {
    grid-column: 3;
    color: var(--muted);
}

.dashboard-metric-toggle-grid .dashboard-layout-toggle {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.dashboard-metric-target-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.dashboard-metric-target-grid label {
    display: grid;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 750;
}

.meal-card-no-photo .photo-card-media {
    display: grid;
    min-height: 150px;
    place-items: center;
    color: var(--muted);
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-2));
}

.meal-card-no-photo .entries-calendar-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
}

.meal-card-no-photo .entries-calendar-empty svg {
    width: 28px;
    height: 28px;
}

.meal-entry-editor {
    margin-top: 8px;
}

.meal-entry-editor > summary {
    cursor: pointer;
    color: var(--primary-dark);
    font-weight: 750;
}

.meal-entry-delete-form {
    margin-top: 6px;
}

.mobile-today-score.is-empty strong {
    max-width: 86px;
    font-size: 0.72rem;
    line-height: 1.1;
}

@media (max-width: 700px) {
    .settings-metric-toggle-grid,
    .dashboard-metric-toggle-grid,
    .dashboard-metric-target-grid,
    .onboarding-metric-preferences {
        grid-template-columns: 1fr;
    }
}

/* The shared .table min-width (760px) assumes wide data tables. This table
   only has 4 short columns (category, weight %, value %, score pts) and sits
   inside a half-width card in the two-column desktop layout, so the 760px
   floor forced permanent horizontal scrolling that hid the Score total
   column - the most important number on the page - off-screen by default. */
.comparison-detail-screen .table {
    min-width: 0;
}

/* Comparison detail (score breakdown) reuses the dashboard KPI card look, but
   without the .progress-ring icon the dashboard version always has. On mobile
   the shared rules reserve a 44px icon column and allow the value to break
   anywhere, which left an empty gutter and wrapped short values like "100,0%"
   into "100," / "0%" across two lines. Give these icon-less cards their own
   single-column layout instead of touching the shared dashboard rules. */
.comparison-detail-screen .dashboard-kpis .metric-card {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 700px) {
    .comparison-detail-screen .dashboard-kpis .metric-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: 74px;
    }

    .comparison-detail-screen .dashboard-kpis .metric-card strong {
        overflow-wrap: normal;
        white-space: nowrap;
    }
}
/* Nutrition workspace */
.nutrition-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding:.5rem 0}.nutrition-hero h1{margin:.15rem 0;font-size:clamp(2rem,5vw,3.5rem)}.nutrition-setup-callout{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;border-color:#f59e0b}.nutrition-setup-callout>span{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:#fef3c7;color:#b45309}.nutrition-setup-callout svg,.nutrition-meal-icon svg,.nutrition-photo-badge svg{width:22px;height:22px}.nutrition-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.nutrition-kpi{padding:1.15rem;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:var(--shadow-soft)}.nutrition-kpi small,.nutrition-kpi span{display:block;color:var(--muted)}.nutrition-kpi strong{display:block;margin:.3rem 0;font-size:clamp(1.6rem,4vw,2.4rem)}.nutrition-kpi.is-deficit strong{color:#0f9f7f}.nutrition-kpi.is-surplus strong{color:#e25b45}.nutrition-chart-panel .metric-chart-wrap{height:320px}.nutrition-entry-list{display:grid}.nutrition-entry-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.8rem;padding:.9rem 0;border-top:1px solid var(--line)}.nutrition-entry-row:first-child{border-top:0}.nutrition-entry-row>span:nth-child(2) small{display:block;color:var(--muted);margin-top:.15rem}.nutrition-entry-row>strong small{color:var(--muted)}.nutrition-meal-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#fff1e8;color:#f97316}.nutrition-photo-badge{color:var(--accent)}.app-dialog{width:min(680px,calc(100% - 1.25rem));max-height:calc(100dvh - 2rem);overflow:auto;border:1px solid var(--line);border-radius:24px;background:var(--panel);color:var(--text);box-shadow:0 24px 80px #0005;padding:1.25rem}.app-dialog::backdrop{background:#07110db3;backdrop-filter:blur(6px)}.app-dialog header{display:flex;justify-content:space-between;align-items:flex-start}.dialog-close{border:0;background:var(--soft);color:var(--text);width:40px;height:40px;border-radius:50%;font-size:1.5rem}.span-two{grid-column:1/-1}
@media(max-width:800px){.nutrition-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nutrition-hero{align-items:center}.nutrition-setup-callout{grid-template-columns:auto 1fr}.nutrition-setup-callout .btn{grid-column:1/-1}.nutrition-entry-row{grid-template-columns:auto minmax(0,1fr) auto}.nutrition-photo-badge{display:none}}
.entry-custom-metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-bottom:.8rem}.entry-custom-metric-field{display:flex;align-items:center;gap:.7rem;padding:.75rem;border:1px solid color-mix(in srgb,var(--custom-metric-color) 35%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--custom-metric-color) 7%,var(--panel))}.entry-custom-metric-field>span{min-width:0;flex:1}.entry-custom-metric-field small{display:block;color:var(--muted)}.entry-custom-metric-field input{width:110px}.form-error{color:var(--danger);margin:0}
@media(max-width:600px){.entry-custom-metric-grid{grid-template-columns:1fr}}
.notification-date-heading{position:sticky;top:calc(var(--topbar-height,64px) + .35rem);z-index:2;margin:1rem 0 .35rem;padding:.4rem .2rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px)}@media(max-width:700px){.notifications-page{padding-inline:0}.notifications-panel{border:0;border-radius:0;background:transparent;box-shadow:none;padding:.75rem}.notifications-filter-tabs{overflow-x:auto;scrollbar-width:none}.notifications-filter-tabs a{min-width:max-content}.notification-card{grid-template-columns:auto minmax(0,1fr);padding:.9rem;border-radius:18px;box-shadow:0 5px 20px #07110d0c}.notification-actions{grid-column:2;justify-content:flex-end}.notifications-header{align-items:flex-start}.notifications-unread-badge{white-space:nowrap}.notification-main p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}
.team-goal-extra-grid,
.goal-extra-target {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(110px, .8fr) minmax(90px, .6fr) auto;
    gap: .65rem;
    align-items: end;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
}

.goal-target-breakdown {
    display: grid;
    gap: .25rem;
    margin-top: .6rem;
}

.goal-target-breakdown small {
    color: var(--muted);
}

.entry-inline-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.entry-inline-table {
    min-width: 650px;
}

.entry-table-controls {
    display: flex;
    gap: .75rem;
    align-items: end;
    margin-bottom: .8rem;
}

.entry-table-controls label {
    flex: 1;
}

.entry-table-controls span {
    display: block;
    margin-bottom: .3rem;
    color: var(--muted);
    font-size: .78rem;
}

.entry-metric-chart-link {
    margin-left: auto;
    text-decoration: none;
}

.sync-conflict-tray {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--mobile-bottom-nav-height, 0px) + 1rem);
    z-index: 120;
    width: min(420px, calc(100vw - 2rem));
    padding: .85rem;
    border: 1px solid color-mix(in srgb, #f59e0b 55%, var(--border));
    border-radius: 16px;
    background: var(--panel);
    box-shadow: 0 18px 50px rgb(15 23 42 / .22);
}

.sync-conflict-tray > div:first-child,
.sync-conflict-row {
    display: flex;
    gap: .6rem;
    align-items: center;
}

.sync-conflict-tray small {
    display: block;
    color: var(--muted);
}

.sync-conflict-list {
    display: grid;
    gap: .6rem;
    margin-top: .75rem;
}

.sync-conflict-row {
    flex-wrap: wrap;
    padding-top: .6rem;
    border-top: 1px solid var(--border);
}

.sync-conflict-row span {
    flex: 1 0 100%;
}

.sync-conflict-comparison {
    display: grid;
    flex: 1 0 100%;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.sync-conflict-comparison small {
    overflow-wrap: anywhere;
    padding: .55rem;
    border-radius: 10px;
    background: var(--surface-soft, rgb(148 163 184 / .1));
}

.pwa-update-toast {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--mobile-bottom-nav-height, 0px) + 1rem);
    z-index: 130;
    padding: .8rem 1rem;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: #5b4ff7;
    box-shadow: 0 14px 40px rgb(15 23 42 / .28);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.dashboard-nutrition-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
}

.dashboard-nutrition-grid span {
    padding: .8rem;
    border-radius: 14px;
    background: var(--surface-soft, rgb(148 163 184 / .1));
}

.dashboard-nutrition-grid small,
.dashboard-nutrition-grid strong {
    display: block;
}

.dashboard-nutrition-grid small {
    color: var(--muted);
}

.dashboard-nutrition-grid .is-deficit strong {
    color: #16a34a;
}

.dashboard-nutrition-grid .is-surplus strong {
    color: #ea580c;
}

@media (max-width: 720px) {
    .team-goal-extra-grid,
    .goal-extra-target {
        grid-template-columns: 1fr 1fr;
    }

    .entry-table-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-nutrition-grid {
        grid-template-columns: 1fr 1fr;
    }

    [data-notification-swipe] .notification-actions form {
        width: 0;
        opacity: 0;
        overflow: hidden;
        transition: width .2s ease, opacity .2s ease;
    }

    [data-notification-swipe].is-swiped .notification-actions form,
    [data-notification-swipe]:focus-within .notification-actions form {
        width: 42px;
        opacity: 1;
    }

    [data-notification-swipe].is-unread:not(.is-swiped)::after {
        content: "Desliza para gestionar";
        grid-column: 2;
        color: var(--muted);
        font-size: .7rem;
        text-align: right;
    }
}