/* =====================================================================
   v6 layer — loaded after theme.css.
   Shell (3 swipeable panes + tab bar), level road, cardio console,
   onboarding and exercise swap. Same DA: mauve/indigo, green = done,
   3D buttons with a solid bottom edge, Nunito 900 for big numbers.
   ===================================================================== */

:root {
    --tabbar-height: 64px;
    --hero-bg:
        radial-gradient(120% 80% at 0% 0%, #3b2a8f 0%, transparent 55%),
        linear-gradient(160deg, #1e1b4b 0%, #2a1660 55%, #160f3a 100%);
    --gold: #f59e0b;
    --gold-3d: #b45309;
}

/* ---------- Home pager ---------- */

#screen-home {
    position: relative;
    background: var(--bg-secondary);
}

.home-pager {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.home-pager::-webkit-scrollbar {
    display: none;
}

.home-pane {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.home-pane > .pane-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: calc(var(--safe-top) + 14px) 18px calc(var(--tabbar-height) + var(--safe-bottom) + 28px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overscroll-behavior-y: contain;
}

.home-pane > .pane-scroll > * {
    flex-shrink: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* The old segmented tabs hid half the content; panes replace them. */

.home-content[data-tab] > * {
    display: revert;
}

.progress-zone {
    animation: none !important;
}

.pane-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 2px 2px;
}

.pane-header-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pane-header h1 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text-primary);
    text-wrap: balance;
}

.pane-header-btn {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 2px solid #e4e4f7;
    background: var(--card-bg);
    color: var(--primary-dark);
    box-shadow: 0 3px 0 #e4e4f7;
    cursor: pointer;
    transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}

.pane-header-btn:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #e4e4f7;
}

.pane-header-btn svg {
    width: 20px;
    height: 20px;
}

.home-pane .home-actions {
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.home-pane .home-actions .btn {
    min-height: 50px;
    justify-content: center;
}

.pz-card-note {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-muted);
}

.backup-card .backup-actions {
    justify-content: stretch;
    gap: 10px;
}

.backup-card .backup-actions .btn {
    flex: 1;
    min-height: 46px;
    justify-content: center;
    border: 2px solid #e4e4f7;
    box-shadow: 0 3px 0 #e4e4f7;
    background: var(--card-bg);
    color: var(--primary-dark);
}

/* ---------- Tab bar ---------- */

.tabbar {
    --tab-pos: 0;
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(var(--safe-bottom) + 10px);
    z-index: 30;
    height: var(--tabbar-height);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 6px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border: 2px solid #ececfb;
    box-shadow: 0 4px 0 #e4e4f7, 0 18px 40px rgba(49, 46, 129, 0.16);
}

.tabbar-indicator {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: calc((100% - 12px) / 4);
    border-radius: 18px;
    background: var(--tint-primary-strong);
    transform: translateX(calc(var(--tab-pos) * 100%));
    pointer-events: none;
    z-index: 0;
}

.tabbar-btn {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s var(--ease-spring);
}

.tabbar-btn svg {
    width: 24px;
    height: 24px;
    transition: transform 0.25s var(--ease-spring);
}

.tabbar-btn.active {
    color: var(--primary-dark);
}

.tabbar-btn.active svg {
    transform: translateY(-1px) scale(1.08);
}

.tabbar-btn:active {
    transform: scale(0.94);
}

.tabbar .home-tab-dot {
    top: 6px;
    right: calc(50% - 20px);
}

/* ---------- Stats pane ---------- */

.overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.overview-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 10px 9px;
    border-radius: 16px;
    background: var(--bg-secondary);
    min-width: 0;
}

.overview-icon {
    font-size: 17px;
    line-height: 1;
}

.overview-tile strong {
    margin-top: 4px;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overview-tile span:last-child {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

.overview-tile.is-gold {
    background: #fffbeb;
}

.overview-tile.is-gold strong {
    color: #b45309;
}

.cardio-week-track {
    height: 12px;
    border-radius: 999px;
    background: #fee2e2;
    overflow: hidden;
    margin-bottom: 14px;
}

.cardio-week-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f43f5e, #fb7185);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
    animation: bar-grow-x 0.9s var(--ease-out) both;
    transform-origin: left center;
}

.cardio-bars {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    align-items: end;
    height: 120px;
}

.cardio-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    min-width: 0;
}

.cardio-bar-value {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-muted);
    min-height: 13px;
}

.cardio-bar {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    border-radius: 8px;
    background: #fff1f2;
}

.cardio-bar span {
    display: block;
    width: 100%;
    border-radius: 8px;
    background: linear-gradient(180deg, #fb7185, #f43f5e);
    animation: bar-grow-y 0.8s var(--ease-out) both;
    transform-origin: bottom center;
}

.cardio-bar-col.is-current .cardio-bar span {
    background: linear-gradient(180deg, #f43f5e, #be123c);
}

.cardio-bar-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

@keyframes bar-grow-x {
    from { transform: scaleX(0); }
}

@keyframes bar-grow-y {
    from { transform: scaleY(0); }
}

/* ---------- Home: compact muscle map ---------- */

.physique-card.is-compact .physique-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.physique-tile {
    --muscle: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-radius: 16px;
    background: var(--bg-secondary);
    min-width: 0;
}

.physique-tile-top {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    min-width: 0;
}

.physique-tile-top .muscle-badge {
    grid-row: 1 / span 2;
}

.physique-tile-top .muscle-badge {
    flex: none;
}

.physique-tile-name {
    grid-column: 2;
    min-width: 0;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.physique-tile-value {
    grid-column: 2;
    line-height: 1.1;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 900;
    color: var(--text-primary);
}

.physique-tile-value small {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
}

.physique-tile .physique-meter {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: #e9e9f6;
    overflow: hidden;
}

.physique-tile .physique-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(135deg, rgba(34, 197, 94, 0.28) 0 4px, rgba(34, 197, 94, 0.12) 4px 8px);
    border-left: 2px solid rgba(34, 197, 94, 0.7);
    border-right: 2px solid rgba(34, 197, 94, 0.7);
}

.physique-tile .physique-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: inherit;
    background: var(--muscle);
    animation: bar-grow-x 0.9s var(--ease-out) both;
    transform-origin: left center;
}

.physique-tile-zone {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
}

.physique-tile.zone-grow .physique-tile-zone,
.physique-tile.zone-intense .physique-tile-zone {
    color: #15803d;
}

.physique-tile.zone-overload .physique-tile-zone {
    color: #b91c1c;
}

.physique-tile.zone-grow {
    background: #f0fdf4;
}

.physique-more {
    margin-top: 10px;
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .cardio-bar span,
        .cardio-week-track span,
        .physique-tile .physique-fill {
        animation: none;
    }
}

/* Bubble flips to the left when the node sits on the right side of the wave. */

@keyframes journey-bob {
    50% { transform: translateY(-4px); }
}

@keyframes journey-ring {
    0% { transform: scale(0.85); opacity: 1; }
    100% { transform: scale(1.25); opacity: 0; }
}

/* =====================================================================
   Cardio console
   ===================================================================== */

.cardio-console {
    --cc-accent: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cardio-console.goal-reached,
.cardio-console.phase-rest {
    --cc-accent: var(--success);
}

.cc-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px;
    border-radius: 24px;
    background: var(--card-bg);
    border: 2px solid #ececfb;
    box-shadow: 0 4px 0 #e4e4f7, 0 12px 28px rgba(79, 70, 229, 0.06);
    color: var(--text-primary);
}

.cc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cc-machine {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
}

.cc-chip {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--tint-primary);
    font-size: 12px;
    font-weight: 800;
    color: var(--primary-dark);
}

.cc-modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    border-radius: 16px;
    background: var(--bg-tertiary);
}

.cc-mode {
    min-height: 38px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.cc-mode.active {
    background: var(--card-bg);
    color: var(--primary-dark);
    box-shadow: 0 2px 0 #e4e4f7;
}

.cc-mode:disabled:not(.active) {
    opacity: 0.4;
    cursor: default;
}

.cc-dial {
    position: relative;
    width: min(220px, 64vw);
    aspect-ratio: 1;
    margin: 0 auto;
}

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

.cc-ring-track,
.cc-ring-fill {
    fill: none;
    stroke-width: 7;
}

.cc-ring-track {
    stroke: #ececfb;
}

.cc-ring-fill {
    stroke: var(--cc-accent);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.4s linear, stroke 0.3s ease, opacity 0.2s ease;
}

.cc-dial-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
}

.cc-phase {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cardio-console.phase-work .cc-phase,
.cardio-console.is-running .cc-phase {
    color: var(--cc-accent);
}

.cc-time {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: clamp(44px, 14vw, 56px);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.cc-target {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.cardio-console.goal-reached .cc-target {
    color: var(--success);
}

.cc-rounds {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: -6px;
}

.cc-rounds i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bg-tertiary);
}

.cc-rounds i.on {
    background: var(--primary);
}

.cc-rounds i.now {
    background: var(--primary);
    box-shadow: 0 0 0 3px var(--tint-primary);
}

.cc-rounds i.now.rest {
    background: var(--success);
    box-shadow: 0 0 0 3px var(--tint-success);
}

.cc-live {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 12px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.cc-live-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.cc-live-item + .cc-live-item {
    border-left: 1px solid var(--border);
}

.cc-live-item strong {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.cc-live-item span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.cc-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cc-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cc-stepper-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
}

.cc-stepper-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cc-step {
    width: 42px;
    height: 42px;
    border: 2px solid #e4e4f7;
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--primary-dark);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 3px 0 #e4e4f7;
    cursor: pointer;
}

.cc-step:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #e4e4f7;
}

.cc-step-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    min-width: 76px;
}

.cc-step-value input,
.cc-step-value strong {
    width: 48px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 22px;
    text-align: right;
    padding: 0;
    -moz-appearance: textfield;
}

.cc-step-value.is-static strong {
    width: auto;
}

.cc-step-value input::-webkit-outer-spin-button,
.cc-step-value input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cc-step-value input:focus {
    outline: none;
    border-bottom: 2px solid var(--primary);
}

.cc-step-value small {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.cc-intervals-config {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cc-presets {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.cc-presets::-webkit-scrollbar {
    display: none;
}

.cc-preset {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 2px solid #e4e4f7;
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.cc-preset.active {
    border-color: var(--primary);
    background: var(--tint-primary);
    color: var(--primary-dark);
}

.cc-interval-steppers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.cc-mini-stepper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.cc-mini-stepper > span {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.cc-mini-stepper > div {
    display: flex;
    align-items: center;
    gap: 2px;
}

.cc-mini-stepper button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid #e4e4f7;
    border-radius: 9px;
    background: var(--card-bg);
    color: var(--primary-dark);
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 2px 0 #e4e4f7;
    cursor: pointer;
}

.cc-mini-stepper strong {
    min-width: 36px;
    text-align: center;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 16px;
    color: var(--text-primary);
}

.cc-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cc-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cc-btn-start,
.cc-btn-pause,
.cc-btn-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 54px;
    border: none;
    border-radius: 16px;
    font: inherit;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.cc-btn-start {
    width: 100%;
    background: var(--grad-success);
    color: #fff;
    text-shadow: 0 1px 0 rgba(21, 128, 61, 0.35);
    box-shadow: 0 var(--btn-depth) 0 var(--success-3d), 0 10px 20px rgba(34, 197, 94, 0.22);
}

.cc-btn-start:active {
    transform: translateY(var(--btn-depth));
    box-shadow: 0 0 0 var(--success-3d), 0 4px 10px rgba(34, 197, 94, 0.2);
}

.cc-btn-pause {
    background: var(--card-bg);
    color: var(--primary-dark);
    border: 2px solid #e4e4f7;
    box-shadow: 0 var(--btn-depth-sm) 0 #e4e4f7;
}

.cc-btn-stop {
    background: var(--grad-primary);
    color: #fff;
    box-shadow: 0 var(--btn-depth) 0 var(--primary-3d), 0 10px 22px rgba(99, 102, 241, 0.25);
}

.cc-btn-pause:active,
.cc-btn-stop:active {
    transform: translateY(var(--btn-depth-sm));
    box-shadow: none;
}

.cc-link {
    align-self: center;
    padding: 8px 12px;
    border: none;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.cc-drawer {
    margin: 0 -18px -18px;
    border-top: 2px solid #ececfb;
}

.cc-drawer-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    border: none;
    background: transparent;
    font: inherit;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
}

.cc-drawer-title {
    font-size: 15px;
    font-weight: 800;
}

.cc-drawer-summary {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.cc-drawer-chevron {
    flex: none;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.cc-drawer.is-open .cc-drawer-chevron {
    transform: rotate(180deg);
}

.cc-drawer-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px 18px;
    animation: screenEnter 0.2s ease both;
}

.cc-drawer-note {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.cc-details-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
}

.cc-finish {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cc-finish-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
}

.cc-finish-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

.cc-field-input {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 10px 12px;
    border: 2px solid #e4e4f7;
    border-radius: 14px;
    background: var(--card-bg);
}

.cc-field-input input {
    flex: 1;
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 17px;
    font-weight: 800;
    padding: 0;
}

.cc-field-input input:focus {
    outline: none;
}

.cc-field-input:focus-within {
    border-color: var(--primary);
}

.cc-field-input small {
    font-size: 12px;
    color: var(--text-muted);
}

.cc-finish-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

.cc-feelings {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: var(--bg-tertiary);
}

.cc-feeling {
    min-height: 38px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.cc-feeling.active {
    background: var(--card-bg);
    color: var(--primary-dark);
    box-shadow: 0 2px 0 #e4e4f7;
}

.cc-validate {
    margin-top: 4px;
}

.cc-plan {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 20px;
    background: #f5f3ff;
    border: 2px solid #ede9fe;
    color: var(--primary-dark);
}

.cc-plan-icon {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 1px;
}

.cc-plan-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cc-plan-main strong {
    font-size: 15px;
    font-weight: 800;
}

.cc-plan-main small {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.cc-done-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cc-done-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.13), rgba(34, 197, 94, 0.04));
    border: 2px solid rgba(34, 197, 94, 0.3);
}

.cc-done-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--grad-success);
    box-shadow: 0 3px 0 var(--success-3d);
    color: #fff;
}

.cc-done-check svg {
    width: 16px;
    height: 16px;
    stroke-width: 3;
}

.cc-done-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.cc-done-main strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}

.cc-done-main small {
    font-size: 13px;
    color: var(--text-muted);
}

.cc-done-undo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.cc-complete {
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 28px 18px;
}

.cc-complete-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
}

.cc-complete-icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 3;
}

.cc-complete strong {
    font-size: 20px;
    font-weight: 800;
}

.cc-complete span:last-child {
    font-size: 14px;
    color: var(--text-muted);
}

/* The weight × reps helpers make no sense next to the console. */

#screen-exercise.is-cardio-console #logbook-card,
#screen-exercise.is-cardio-console #exercise-progress-card,
#screen-exercise.is-cardio-console #coach-decision-card,
#screen-exercise.is-cardio-console #live-adaptation-card {
    display: none !important;
}

/* ---------- Slot editor: cardio role ---------- */

#edit-slot-form:not([data-tracking="cardio"]) .se-cardio-only {
    display: none;
}

.se-role {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.se-role-option {
    position: relative;
    cursor: pointer;
}

.se-role-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.se-role-option span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
    padding: 12px;
    border-radius: 16px;
    border: 2px solid #e4e4f7;
    background: var(--card-bg);
    box-shadow: 0 3px 0 #e4e4f7;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.se-role-option strong {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
}

.se-role-option small {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.3;
}

.se-role-option input:checked + span {
    border-color: var(--primary);
    background: var(--tint-primary);
    box-shadow: 0 3px 0 var(--primary-light);
}

.se-role-option input:focus-visible + span {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}

/* ---------- Session list: warmup tag ---------- */

.slot-role-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #f97316, #f43f5e);
    box-shadow: 0 2px 0 #be123c;
    white-space: nowrap;
}

/* =====================================================================
   Onboarding
   ===================================================================== */

.onboard {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    flex-direction: column;
    background:
        radial-gradient(90% 50% at 100% 0%, rgba(168, 85, 247, 0.12), transparent 60%),
        radial-gradient(80% 50% at 0% 100%, rgba(99, 102, 241, 0.1), transparent 60%),
        var(--bg-secondary);
    padding: calc(var(--safe-top) + 10px) 0 calc(var(--safe-bottom) + 14px);
}

.onboard.active {
    display: flex;
    animation: screenEnter 0.35s var(--ease-out) both;
}

.onboard-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 18px 10px;
}

.onboard-back {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.onboard-progress {
    flex: 1;
    height: 16px;
    border-radius: 999px;
    background: #e4e4f7;
    overflow: hidden;
}

.onboard-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--grad-success);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12), inset 0 3px 0 rgba(255, 255, 255, 0.35);
    transition: width 0.45s var(--ease-spring);
}

.onboard[data-step="welcome"] .onboard-progress {
    visibility: hidden;
}

.onboard-stage {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.onboard-stage.is-forward > * {
    animation: onboard-in 0.42s var(--ease-out) both;
}

.onboard-stage.is-back > * {
    animation: onboard-in-back 0.42s var(--ease-out) both;
}

.onboard-stage > *:nth-child(2) { animation-delay: 0.05s; }

.onboard-stage > *:nth-child(3) { animation-delay: 0.1s; }

.onboard-stage > *:nth-child(4) { animation-delay: 0.15s; }

.onboard-footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 20px 0;
}

.onboard-footer[hidden] {
    display: none;
}

.onboard-cta {
    width: 100%;
    min-height: 58px;
    font-size: 17px;
    border-radius: 18px;
}

.onboard-link {
    align-self: center;
    padding: 10px 14px;
    border: none;
    background: none;
    color: var(--primary-dark);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

/* Welcome */

.onboard-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding-top: 10px;
}

.onboard-logo {
    position: relative;
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    border-radius: 40px;
    background: var(--hero-bg);
    box-shadow: 0 8px 0 #120c33, 0 24px 50px rgba(67, 56, 202, 0.35);
    animation: journey-bob 2.6s ease-in-out infinite;
}

.onboard-logo-emoji {
    font-size: 64px;
    filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.25));
}

.onboard-logo-ring {
    position: absolute;
    inset: -12px;
    border-radius: 48px;
    border: 3px solid rgba(139, 92, 246, 0.35);
    animation: journey-ring 2.2s var(--ease-out) infinite;
}

.onboard-hero h1 {
    margin-top: 10px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.onboard-hero p {
    max-width: 330px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
}

.onboard-perks {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 360px;
    margin-top: 6px;
}

.onboard-perks li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    background: var(--card-bg);
    border: 2px solid #ececfb;
    box-shadow: 0 3px 0 #e4e4f7;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}

.onboard-perks li span {
    font-size: 22px;
}

/* Mascot + speech bubble */

.onboard-mascot {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding-top: 8px;
}

.onboard-mascot-face {
    flex: none;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    font-size: 34px;
    background: var(--hero-bg);
    box-shadow: 0 5px 0 #120c33;
    animation: journey-bob 2.4s ease-in-out infinite;
}

.onboard-bubble {
    position: relative;
    flex: 1;
    padding: 14px 16px;
    border-radius: 20px;
    background: var(--card-bg);
    border: 2px solid #ececfb;
    box-shadow: 0 3px 0 #e4e4f7;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.onboard-bubble::before {
    content: '';
    position: absolute;
    left: -9px;
    bottom: 18px;
    width: 14px;
    height: 14px;
    background: var(--card-bg);
    border-left: 2px solid #ececfb;
    border-bottom: 2px solid #ececfb;
    transform: rotate(45deg);
}

/* Choices */

.onboard-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.onboard-choices.is-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.onboard-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 20px;
    border: 2px solid #e4e4f7;
    background: var(--card-bg);
    box-shadow: 0 4px 0 #e4e4f7;
    font: inherit;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out), border-color 0.15s ease, background 0.15s ease;
}

.onboard-choice:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #e4e4f7;
}

.onboard-choice-emoji {
    flex: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-size: 26px;
    background: var(--bg-secondary);
}

.onboard-choice-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.onboard-choice-text strong {
    font-size: 16px;
    font-weight: 800;
}

.onboard-choice-text small {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.onboard-choice-check {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid #e4e4f7;
    color: transparent;
    font-size: 14px;
    font-weight: 900;
    transition: all 0.2s var(--ease-spring);
}

.onboard-choice.is-selected {
    border-color: var(--primary);
    background: #f5f3ff;
    box-shadow: 0 4px 0 var(--primary-light);
}

.onboard-choice.is-selected .onboard-choice-check {
    border-color: transparent;
    background: var(--grad-primary);
    color: #fff;
    transform: scale(1.1);
}

.onboard-choice.is-selected .onboard-choice-emoji {
    background: #ede9fe;
    animation: checkPop 0.4s var(--ease-spring) both;
}

.onboard-choice.is-large {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 10px;
}

.onboard-choice.is-large .onboard-choice-text {
    align-items: center;
}

.onboard-choice.is-large .onboard-choice-check {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Frequency */

.onboard-frequency {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.onboard-freq {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0 10px;
    border-radius: 20px;
    border: 2px solid #e4e4f7;
    background: var(--card-bg);
    box-shadow: 0 4px 0 #e4e4f7;
    font: inherit;
    cursor: pointer;
    color: var(--text-primary);
    transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}

.onboard-freq:active {
    transform: translateY(4px);
    box-shadow: none;
}

.onboard-freq strong {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.onboard-freq span {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

.onboard-freq.is-selected {
    color: #fff;
    border-color: transparent;
    background: var(--grad-primary);
    box-shadow: 0 4px 0 var(--primary-3d);
}

.onboard-freq.is-selected span {
    color: rgba(255, 255, 255, 0.8);
}

.onboard-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.onboard-week span {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 12px;
    border: 2px dashed #dcdcf3;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-muted);
    transition: all 0.25s var(--ease-spring);
}

.onboard-week span.on {
    border: none;
    background: var(--grad-success);
    color: #fff;
    box-shadow: 0 3px 0 var(--success-3d);
}

.onboard-caption {
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-dark);
}

.onboard-note {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Body weight */

.onboard-weight {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
}

.onboard-weight-step {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    border: 2px solid #e4e4f7;
    background: var(--card-bg);
    box-shadow: 0 4px 0 #e4e4f7;
    font: inherit;
    font-size: 28px;
    font-weight: 900;
    color: var(--primary-dark);
    cursor: pointer;
}

.onboard-weight-step:active {
    transform: translateY(4px);
    box-shadow: none;
}

.onboard-weight-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 130px;
    justify-content: center;
}

.onboard-weight-value strong {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    color: var(--text-primary);
}

.onboard-weight-value span {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-muted);
}

.onboard-range {
    width: 100%;
    accent-color: var(--primary);
}

/* Building */

.onboard-building {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
}

.onboard-building-orb {
    width: 110px;
    height: 110px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--hero-bg);
    box-shadow: 0 7px 0 #120c33, 0 0 0 10px rgba(139, 92, 246, 0.12);
    font-size: 52px;
}

.onboard-building-orb span {
    animation: onboard-spin 1.6s linear infinite;
}

.onboard-building h2 {
    font-size: 22px;
    font-weight: 800;
}

.onboard-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.onboard-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    opacity: 0;
    animation: onboard-check 0.4s var(--ease-out) forwards;
    animation-delay: calc(var(--i) * 0.45s + 0.2s);
}

.onboard-checklist li::before {
    content: '✓';
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--grad-success);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 2px 0 var(--success-3d);
}

/* Program preview */

.onboard-program {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.onboard-program-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.onboard-program-badge {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    font-size: 36px;
    background: linear-gradient(135deg, #fde68a, #fbbf24);
    box-shadow: 0 5px 0 var(--gold-3d), 0 0 30px rgba(251, 191, 36, 0.5);
    animation: checkPop 0.6s var(--ease-spring) both;
}

.onboard-program-head h2 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.onboard-program-head p {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.onboard-sessions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.onboard-session {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 20px;
    background: var(--card-bg);
    border: 2px solid #ececfb;
    box-shadow: 0 4px 0 #e4e4f7;
    animation: onboard-in 0.4s var(--ease-out) both;
    animation-delay: calc(var(--i) * 0.08s + 0.15s);
}

.onboard-session-emoji {
    flex: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-size: 25px;
    background: var(--grad-primary);
    box-shadow: 0 3px 0 var(--primary-3d);
}

.onboard-session-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.onboard-session-main strong {
    font-size: 16px;
    font-weight: 800;
}

.onboard-session-main small {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
}

.onboard-session-muscles {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

/* Install */

.onboard-install {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.onboard-install-phone {
    width: 92px;
    height: 150px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    border: 5px solid #1e1b4b;
    background: var(--bg-secondary);
    box-shadow: 0 6px 0 #120c33;
}

.onboard-install-phone span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 24px;
    background: var(--hero-bg);
    animation: journey-bob 2s ease-in-out infinite;
}

.onboard-install-steps {
    list-style: none;
    counter-reset: install;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.onboard-install-steps li {
    counter-increment: install;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    background: var(--card-bg);
    border: 2px solid #ececfb;
    box-shadow: 0 3px 0 #e4e4f7;
    font-size: 14.5px;
    font-weight: 600;
}

.onboard-install-steps li::before {
    content: counter(install);
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--grad-primary);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 2px 0 var(--primary-3d);
}

@keyframes onboard-in {
    from { opacity: 0; transform: translateX(28px); }
}

@keyframes onboard-in-back {
    from { opacity: 0; transform: translateX(-28px); }
}

@keyframes onboard-check {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes onboard-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .onboard-stage > *,
        .onboard-logo,
        .onboard-logo-ring,
        .onboard-mascot-face,
        .onboard-building-orb span,
        .onboard-session {
        animation: none !important;
    }

    .onboard-checklist li {
        animation: none;
        opacity: 1;
    }
}

/* =====================================================================
   Exercise swap sheet
   ===================================================================== */

#sheet-pool .pool-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 4px;
}

#sheet-pool .pool-subtitle {
    margin-bottom: 12px;
}

.swap-reasons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.swap-reason {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 2px solid #e4e4f7;
    background: var(--card-bg);
    box-shadow: 0 3px 0 #e4e4f7;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
}

.swap-reason span {
    font-size: 18px;
}

.swap-reason.active {
    border-color: var(--primary);
    background: var(--tint-primary);
    color: var(--primary-dark);
    box-shadow: 0 3px 0 var(--primary-light);
}

.swap-scope {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 18px;
    background: var(--bg-tertiary);
}

.swap-scope-btn {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 10px;
    border: none;
    border-radius: 14px;
    background: transparent;
    font: inherit;
    text-align: left;
    color: var(--text-secondary);
    cursor: pointer;
}

.swap-scope-btn strong {
    font-size: 13.5px;
    font-weight: 800;
}

.swap-scope-btn small {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.swap-scope-btn.active {
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: 0 2px 0 #e4e4f7, 0 4px 12px rgba(79, 70, 229, 0.08);
}

.swap-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    min-height: 44px;
    border-radius: 14px;
    border: 2px solid #e4e4f7;
    background: var(--card-bg);
    color: var(--text-muted);
}

.swap-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--text-primary);
}

.swap-search input:focus {
    outline: none;
}

.swap-hint {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 2px 2px 4px;
}

#sheet-pool .pool-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swap-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 12px 12px 14px;
    border-radius: 18px;
    border: 2px solid #ececfb;
    background: var(--card-bg);
    box-shadow: 0 3px 0 #e4e4f7;
    font: inherit;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}

.swap-option:active {
    transform: translateY(3px);
    box-shadow: none;
}

.swap-option.is-original {
    border-color: #bbf7d0;
    background: #f0fdf4;
    box-shadow: 0 3px 0 #bbf7d0;
}

.swap-option-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.swap-option-main strong {
    font-size: 15px;
    font-weight: 800;
}

.swap-option-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.swap-chip {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}

.swap-chip.is-pool {
    color: var(--primary-dark);
    background: var(--tint-primary);
}

.swap-chip.is-original {
    color: #15803d;
    background: #dcfce7;
}

.swap-chip.level-high,
.swap-chip.level-good {
    color: #15803d;
    background: var(--tint-success);
}

.swap-chip.level-partial {
    color: #b45309;
    background: #fef3c7;
}

.swap-chip.level-low {
    color: #b91c1c;
    background: #fee2e2;
}

.swap-option-last {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    min-height: 15px;
}

.swap-option-last.has-history {
    color: var(--primary-dark);
}

.swap-option-go {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: var(--grad-primary);
    box-shadow: 0 3px 0 var(--primary-3d);
}

.exercise-swap-btn[hidden] {
    display: none !important;
}

/* ---------- "Mes séances": program generator entry ---------- */

.se-generate {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
    padding: 14px;
    border-radius: 20px;
    border: 2px solid transparent;
    background:
        linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
        linear-gradient(135deg, #6366f1, #a855f7, #f59e0b) border-box;
    box-shadow: 0 4px 0 #e4e4f7;
    font: inherit;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
}

.se-generate:active {
    transform: translateY(4px);
    box-shadow: none;
}

.se-generate-icon {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 22px;
    background: var(--hero-bg);
    box-shadow: 0 3px 0 #120c33;
}

.se-generate strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
}

.se-generate small {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.onboard-back.is-close svg {
    display: none;
}

.onboard-back.is-close::before {
    content: '✕';
    font-size: 20px;
    font-weight: 800;
}

/* =====================================================================
   Share button of the workout recap
   ===================================================================== */
.fin-share {
    width: 100%;
    min-height: 50px;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.fin-share:disabled {
    opacity: 0.6;
}

/* Gryno+ paywall: v7.css. This link is still used by the 5-week review. */

.paywall-link {
    align-self: center;
    border: none;
    background: none;
    color: var(--primary-dark);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

/* =====================================================================
   Toolbox: plates, 1RM, body tracking
   ===================================================================== */

.tools-list {
    display: flex;
    flex-direction: column;
}

.tools-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 2px;
    border: none;
    background: transparent;
    font: inherit;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
}

.tools-row + .tools-row {
    border-top: 1px solid var(--border);
}

.tools-row-icon {
    display: inline-flex;
    flex: none;
    color: var(--primary);
}

.tools-row-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.tools-row-text strong {
    font-size: 15px;
    font-weight: 700;
}

.tools-row-text small {
    font-size: 13px;
    color: var(--text-muted);
}

.tools-row-chevron {
    flex: none;
    color: var(--text-muted);
}

.tools-row:active {
    opacity: 0.6;
}

.tools-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tools-content > * {
    flex-shrink: 0;
}

.tools-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tools-head h3 {
    margin: 0;
    text-align: left;
}

.tools-head small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-muted);
}

.tools-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.tools-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    border-radius: 16px;
    background: var(--bg-tertiary);
}

.tools-tab {
    padding: 9px 4px;
    border: none;
    border-radius: 12px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-secondary);
    cursor: pointer;
}

.tools-tab.active {
    background: var(--card-bg);
    color: var(--primary-dark);
    box-shadow: 0 2px 0 #e4e4f7;
}

.tools-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tools-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.tools-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 18px;
    background: var(--bg-secondary);
}

.tools-stepper button {
    flex: none;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--primary-dark);
    font: inherit;
    font-size: 22px;
    font-weight: 900;
    box-shadow: 0 3px 0 #e4e4f7;
    cursor: pointer;
}

.tools-stepper input {
    flex: 1;
    width: 0;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    text-align: center;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 900;
    color: var(--text-primary);
}

.tools-stepper input:focus {
    outline: none;
}

.tools-unit {
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
}

.tools-orm-inputs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.tools-orm-inputs .tools-stepper button {
    width: 36px;
    height: 36px;
}

.tools-orm-inputs .tools-stepper input {
    font-size: 22px;
}

.tools-orm-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px;
    border-radius: 18px;
    background: var(--tint-primary);
    text-align: center;
}

.tools-orm-hero span {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
}

.tools-orm-hero strong {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--text-primary);
}

.tools-orm-hero small {
    font-size: 12px;
    color: var(--text-muted);
}

.tools-orm-table {
    display: flex;
    flex-direction: column;
}

.tools-orm-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: baseline;
    gap: 8px;
    padding: 10px 2px;
}

.tools-orm-row + .tools-orm-row {
    border-top: 1px solid var(--border);
}

.tools-orm-row span {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

.tools-orm-row strong {
    white-space: nowrap;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 900;
    color: var(--text-primary);
}

.tools-orm-row small {
    font-size: 13px;
    color: var(--text-muted);
}

.tools-body-chart {
    padding: 14px;
    border-radius: 20px;
    background: var(--bg-secondary);
}

.tools-body-chart .spark {
    width: 100%;
    height: 70px;
}

.tools-body-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.tools-body-head strong {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 900;
}

.tools-hint {
    font-size: 12px;
    color: var(--text-muted);
}

.tools-body-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tools-measure {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border-radius: 16px;
    border: 2px solid #ececfb;
    background: var(--card-bg);
    font-size: 12px;
    font-weight: 800;
    color: var(--text-secondary);
}

.tools-measure-input {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.tools-measure-input input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: var(--text-primary);
}

.tools-measure-input input:focus {
    outline: none;
}

.tools-measure-input small {
    color: var(--text-muted);
}

.tools-measure em {
    font-style: normal;
    font-size: 11px;
    color: var(--primary-dark);
}

.tools-save {
    grid-column: 1 / -1;
    margin-top: 4px;
}

.tools-body-history {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tools-body-row {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--bg-secondary);
}

.tools-body-row span {
    font-size: 13px;
    font-weight: 800;
}

.tools-body-row small {
    font-size: 11.5px;
    color: var(--text-muted);
}

/* =====================================================================
   Dark theme tokens (rules swapping hard-coded colours: dark.css)
   ===================================================================== */

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #120f24;
    --bg-secondary: #120f24;
    --bg-tertiary: #221d3d;
    --card-bg: #1b1733;
    --text-primary: #f1f0ff;
    --text-secondary: #c3c0e6;
    --text-muted: #8f8ab8;
    --border: #2e2850;
    --border-light: #221d3d;
    --primary-dark: #a5b4fc;
    --tint-primary: rgba(129, 140, 248, 0.16);
    --tint-primary-strong: rgba(129, 140, 248, 0.26);
    --tint-purple: rgba(192, 132, 252, 0.16);
    --tint-success: rgba(34, 197, 94, 0.16);
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] body,
html[data-theme="dark"] #screen-home {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    color: var(--text-primary);
}

html[data-theme="dark"] .tabbar {
    background: rgba(27, 23, 51, 0.92);
    border-color: #2e2850;
    box-shadow: 0 4px 0 #0b0918, 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* Solid brand surfaces keep the deep indigo in dark mode. */

html[data-theme="dark"] .btn-link-superset.linked:hover,
html[data-theme="dark"] .btn-unilateral-validate {
    --primary-dark: #4f46e5;
}

/* ===== Friends (social.js) ===== */

.pane-header-actions {
    display: flex;
    gap: 8px;
    flex: none;
}

.friends-btn {
    position: relative;
}

.friends-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--success);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-secondary);
}

.friends-badge[hidden] {
    display: none;
}

.sf-sheet {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sf-head h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    text-align: left;
}

.sf-icon-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
}

.sf-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    text-align: center;
}

.sf-intro h3 {
    margin: 4px 0 0;
    font-size: 20px;
    font-weight: 900;
}

.sf-intro p {
    margin: 0;
    max-width: 300px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.sf-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
}

.sf-avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.sf-avatar.is-xs {
    width: 22px;
    height: 22px;
}

.sf-avatar.is-sm {
    width: 32px;
    height: 32px;
}

.sf-avatar.is-lg {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    margin-bottom: 4px;
}

.sf-actions-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 10px;
}

.sf-actions-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sf-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sf-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: center;
    padding: 8px 12px;
    border: none;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
}

.sf-invite {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    background: #f5f3ff;
    border: 2px solid #ede9fe;
    flex-wrap: wrap;
}

.sf-invite-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 140px;
}

.sf-invite-text strong {
    font-size: 15px;
    font-weight: 800;
}

.sf-invite-text small {
    font-size: 13px;
    color: var(--text-secondary);
}

.sf-invite-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.sf-btn-ghost,
.sf-btn-join {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.sf-btn-ghost {
    border: none;
    background: transparent;
    color: var(--text-muted);
}

.sf-btn-join {
    border: none;
    background: var(--grad-success);
    color: #fff;
    box-shadow: 0 3px 0 var(--success-3d);
}

.sf-btn-join:active {
    transform: translateY(3px);
    box-shadow: none;
}

.sf-board {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sf-board .sf-kicker {
    margin-bottom: 6px;
}

.sf-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
}

.sf-row.is-me {
    background: var(--tint-primary);
}

.sf-rank {
    width: 18px;
    flex: none;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 900;
    color: var(--text-muted);
    text-align: center;
}

.sf-row-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.sf-row-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 800;
}

.sf-row-text small {
    font-size: 13px;
    color: var(--text-muted);
}

.sf-live {
    color: var(--success);
    font-weight: 700;
}

.sf-live::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 1px;
}

.sf-xp {
    flex: none;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 900;
    color: var(--text-primary);
}

.sf-xp small {
    font-size: 11px;
    color: var(--text-muted);
}

.sf-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sf-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

.sf-input {
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    border: 2px solid #e4e4f7;
    border-radius: 16px;
    background: var(--card-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: 17px;
    font-weight: 700;
}

.sf-input:focus {
    outline: none;
    border-color: var(--primary);
}

.sf-code-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px;
    border-radius: 20px;
    background: #f5f3ff;
    border: 2px solid #ede9fe;
}

.sf-code {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 900;
    color: var(--text-primary);
    word-break: break-all;
    text-align: center;
}

.sf-code-actions {
    display: flex;
    gap: 14px;
}

.sf-choices {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-top: -6px;
}

.sf-choices::-webkit-scrollbar {
    display: none;
}

.sf-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 6px 14px 6px 6px;
    border: 2px solid #e4e4f7;
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 3px 0 #e4e4f7;
    cursor: pointer;
}

.sf-choice.active {
    border-color: var(--primary);
    background: var(--tint-primary);
    box-shadow: 0 3px 0 var(--primary);
}

.sf-sessions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: -6px;
}

.sf-session {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e4e4f7;
    border-radius: 18px;
    background: var(--card-bg);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    box-shadow: 0 3px 0 #e4e4f7;
    cursor: pointer;
}

.sf-session.active {
    border-color: var(--primary);
    box-shadow: 0 3px 0 var(--primary);
}

.sf-session-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.sf-session-text strong {
    font-size: 16px;
    font-weight: 800;
}

.sf-session-text small {
    font-size: 13px;
    color: var(--text-muted);
}

.sf-radio {
    display: grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #e4e4f7;
    color: transparent;
}

.sf-session.active .sf-radio {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.sf-launch {
    margin-top: 4px;
}

/* Session screen: friend's live progress */

.duo-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 16px 12px;
    padding: 10px 14px;
    border-radius: 18px;
    background: var(--card-bg);
    border: 2px solid #ececfb;
    box-shadow: 0 3px 0 #e4e4f7;
}

.duo-strip-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.duo-strip-text strong {
    font-size: 14px;
    font-weight: 800;
}

.duo-strip-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--text-muted);
}

.duo-strip-bar {
    flex: none;
    width: 56px;
    height: 6px;
    border-radius: 999px;
    background: #ececfb;
    overflow: hidden;
}

.duo-strip-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--success);
    transition: width 0.4s ease;
}

/* End of session: you vs your friend (dark recap screen) */

.duo-compare-head,
.duo-compare-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    gap: 12px;
}

.duo-compare-head {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--fin-muted);
}

.duo-compare-head span:last-child,
.duo-compare-row strong:last-child {
    text-align: right;
}

.duo-compare-row {
    padding: 8px 0;
    border-top: 1px solid var(--fin-line);
}

.duo-compare-row span {
    font-size: 13px;
    color: var(--fin-muted);
}

.duo-compare-row strong {
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
    font-weight: 900;
    color: var(--fin-text);
    opacity: 0.6;
}

.duo-compare-row strong.is-best {
    opacity: 1;
    color: #4ade80;
}

.duo-compare-note {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--fin-muted);
}

/* =====================================================================
   Bottom sheets: always closable (close button, swipe down, backdrop strip)
   ===================================================================== */

.bottom-sheet > .sheet-content {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Never cover the whole screen: a strip of backdrop stays tappable. */
    max-height: min(85vh, calc(100dvh - 72px - env(safe-area-inset-top, 0px)));
}

.sheet-close {
    position: sticky;
    top: 0;
    z-index: 5;
    float: right;
    width: 36px;
    height: 36px;
    margin: -4px -6px -36px 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-secondary, #475569);
    cursor: pointer;
}

.sheet-close:active {
    transform: scale(0.94);
}

/* =====================================================================
   Session slot cards: name + muscle on one line, name cropped if long
   ===================================================================== */

#screen-session .slot-title {
    flex-wrap: wrap;
    align-items: center;
}

#screen-session .slot-title > .slot-name-row {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

#screen-session .slot-name-row > .slot-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#screen-session .slot-name-row > .muscle-badge {
    flex: none;
    gap: 4px;
    padding: 2px 8px 2px 2px;
    font-size: 11px;
}

#screen-session .slot-name-row > .muscle-badge .muscle-badge-icon,
#screen-session .slot-name-row > .muscle-badge .muscle-badge-icon:has(img) {
    width: 20px;
    height: 20px;
}

/* Other tags (superset, unilateral, variant...) go on their own row. */

#screen-session .slot-title:has(> span:not(.slot-id):not(.slot-name-row))::after {
    content: '';
    order: 3;
    flex-basis: 100%;
    height: 0;
}

#screen-session .slot-title > span:not(.slot-id):not(.slot-name-row) {
    order: 4;
}

/* Session challenge: one gold banner, clearly labelled */

#screen-session .slot-challenge-note,
.slot-challenge-note {
    border: 2px solid #fbbf24;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(251, 191, 36, 0.28) 0%, transparent 60%),
        linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #78350f;
    box-shadow: 0 3px 0 #f59e0b;
}

.slot-challenge-kicker {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b45309;
}

.slot-challenge-xp {
    color: #78350f;
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    box-shadow: 0 2px 0 #b45309;
}

html[data-theme="dark"] #screen-session .slot-challenge-note,
html[data-theme="dark"] .slot-challenge-note {
    border-color: rgba(251, 191, 36, 0.55);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(245, 158, 11, 0.08));
    color: #fde68a;
    box-shadow: 0 3px 0 rgba(180, 83, 9, 0.6);
}

html[data-theme="dark"] .slot-challenge-kicker {
    color: #fbbf24;
}

/* Session recap: estimated calories, one quiet line */

.fin-calories {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 18px 0;
    border-bottom: 1px solid var(--fin-line);
    text-align: center;
    animation: finCaloriesIn 0.5s 0.8s both;
}

.fin-calories-icon {
    align-self: center;
    display: grid;
    color: #fb923c;
    filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.6));
}

.fin-calories-icon svg {
    width: 20px;
    height: 20px;
}

.fin-calories-copy {
    display: contents;
}

.fin-calories-copy strong {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    color: #fff;
}

.fin-calories-copy strong small {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--fin-muted);
}

.fin-calories-copy span {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--fin-muted);
}

@keyframes finCaloriesIn {
    from { opacity: 0; transform: translateY(10px); }
}

/* =====================================================================
   Buddy pictures: rhino pose on a generated brand background
   ===================================================================== */

.buddy-art {
    --b1: #ddd6fe;
    --b2: #8b5cf6;
    position: relative;
    display: inline-block;
    overflow: hidden;
    isolation: isolate;
    background: var(--b1);
}

.buddy-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The poses are busts: frame on the face. */
    transform: scale(1.08) translateY(4%);
    pointer-events: none;
    user-select: none;
}

/* Studio: plain colour with a soft key light */

.buddy-bg-studio {
    background:
        radial-gradient(70% 60% at 30% 22%, rgba(255, 255, 255, 0.85) 0%, transparent 60%),
        radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--b2) 45%, var(--b1)) 0%, var(--b1) 70%);
}

/* Starburst: rays from behind the head */

.buddy-bg-starburst {
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.75) 0%, transparent 38%),
        repeating-conic-gradient(from 0deg at 50% 45%, var(--b1) 0deg 12deg, color-mix(in srgb, var(--b2) 38%, var(--b1)) 12deg 24deg);
}

/* Pois: polka dots */

.buddy-bg-dots {
    background:
        radial-gradient(circle, color-mix(in srgb, var(--b2) 35%, var(--b1)) 22%, transparent 24%) 0 0 / 14px 14px,
        radial-gradient(circle, color-mix(in srgb, var(--b2) 35%, var(--b1)) 22%, transparent 24%) 7px 7px / 14px 14px,
        var(--b1);
}

/* Rayures: diagonal stripes */

.buddy-bg-stripes {
    background: repeating-linear-gradient(135deg, var(--b1) 0 9px, color-mix(in srgb, var(--b2) 30%, var(--b1)) 9px 18px);
}

/* Halo: concentric rings */

.buddy-bg-halo {
    background: repeating-radial-gradient(circle at 50% 42%, var(--b1) 0 10px, color-mix(in srgb, var(--b2) 28%, var(--b1)) 10px 20px);
}

.sf-row.is-first .sf-avatar {
    box-shadow: 0 0 0 3px #fbbf24;
}

/* ---------- Loot-box reveal when a friendship starts ---------- */

.buddy-reveal {
    --reveal: #8b5cf6;
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--reveal) 55%, #1e1b4b) 0%, #120c33 70%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.buddy-reveal.is-in { opacity: 1; }

.buddy-reveal.is-leaving { opacity: 0; }

.buddy-reveal-rays {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 220vmax;
    height: 220vmax;
    margin: -110vmax 0 0 -110vmax;
    background: repeating-conic-gradient(rgba(255, 255, 255, 0.09) 0deg 10deg, transparent 10deg 20deg);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.buddy-reveal.is-open .buddy-reveal-rays {
    opacity: 1;
    transform: scale(1);
    animation: buddyRaysSpin 18s linear infinite;
}

.buddy-reveal-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: min(100%, 340px);
    text-align: center;
    color: #fff;
}

.buddy-reveal-kicker {
    margin: 0;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fde68a;
}

.buddy-reveal-box {
    position: relative;
    width: 150px;
    height: 150px;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    animation: buddyBoxFloat 1.6s ease-in-out infinite;
}

.buddy-reveal-body {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 104px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(160deg, #a78bfa, #6d28d9);
    box-shadow: 0 8px 0 #4c1d95, inset 0 0 0 4px rgba(255, 255, 255, 0.18);
}

.buddy-reveal-body::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 22px;
    margin-left: -11px;
    background: linear-gradient(180deg, #fde68a, #f59e0b);
}

.buddy-reveal-lid {
    position: absolute;
    left: 0;
    right: 0;
    top: 22px;
    height: 40px;
    z-index: 2;
    border-radius: 14px;
    background: linear-gradient(160deg, #c4b5fd, #7c3aed);
    box-shadow: 0 5px 0 #5b21b6;
    transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.4s ease;
}

.buddy-reveal-lid::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 22px;
    margin-left: -11px;
    background: linear-gradient(180deg, #fef3c7, #fbbf24);
}

.buddy-reveal-q {
    position: relative;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 54px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 3px 0 #4c1d95;
}

.buddy-reveal.is-shaking .buddy-reveal-box {
    animation: buddyBoxShake 0.9s ease-in-out;
}

.buddy-reveal.is-open .buddy-reveal-box {
    animation: none;
    pointer-events: none;
}

.buddy-reveal.is-open .buddy-reveal-lid {
    transform: translateY(-120px) rotate(-24deg);
    opacity: 0;
}

.buddy-reveal.is-open .buddy-reveal-body {
    transform: scale(0.2);
    opacity: 0;
    transition: transform 0.35s ease 0.1s, opacity 0.3s ease 0.15s;
}

.buddy-reveal-card {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.buddy-reveal.is-open .buddy-reveal-box {
    position: absolute;
    top: 30px;
}

.buddy-reveal.is-open .buddy-reveal-card {
    display: flex;
    animation: buddyCardPop 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) 0.15s both;
}

.buddy-reveal-art {
    width: 200px;
    height: 200px;
    margin-bottom: 10px;
    border-radius: 44px;
    border: 5px solid #fff;
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.25), 0 0 60px color-mix(in srgb, var(--reveal) 70%, transparent);
}

.buddy-reveal-card strong {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.1;
}

.buddy-reveal-card span {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
}

.buddy-reveal-hint {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
}

.buddy-reveal.is-open .buddy-reveal-hint { display: none; }

.buddy-reveal-ok {
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.3s ease 0.6s, transform 0.3s ease 0.6s;
}

.buddy-reveal.is-open .buddy-reveal-ok {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

@keyframes buddyBoxFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes buddyBoxShake {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(-9deg) scale(1.04); }
    30% { transform: rotate(8deg) scale(1.06); }
    45% { transform: rotate(-7deg) scale(1.08); }
    60% { transform: rotate(6deg) scale(1.1); }
    75% { transform: rotate(-4deg) scale(1.12); }
}

@keyframes buddyCardPop {
    from { transform: scale(0.2) rotate(-8deg); opacity: 0; }
}

@keyframes buddyRaysSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .buddy-reveal-box,
        .buddy-reveal.is-open .buddy-reveal-rays {
        animation: none;
    }
}

/* ---------- Duo: friend's set on my set card ---------- */

#series-list .series-card {
    position: relative;
}

.duo-set-pill {
    --pill: #8b5cf6;
    position: absolute;
    top: -11px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px 2px 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pill) 18%, var(--card-bg));
    color: color-mix(in srgb, var(--pill) 60%, #1e1b4b);
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
    animation: checkPop 0.35s var(--ease-spring, ease) both;
}

html[data-theme="dark"] .duo-set-pill {
    background: color-mix(in srgb, var(--pill) 26%, var(--card-bg));
    color: color-mix(in srgb, var(--pill) 45%, #fff);
}

.sf-form .sf-note {
    text-align: center;
}

/* =====================================================================
   Réglages: one flat grouped list. Small uppercase kicker per group,
   rows = label on the left, control on the right. Saves on change.
   ===================================================================== */

#sheet-settings .sheet-content {
    background: var(--bg-secondary);
}

.set-kicker {
    margin: 22px 8px 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

#sheet-settings h3 + .set-kicker {
    margin-top: 4px;
}

.set-list {
    margin: 0;
    border-radius: 20px;
    background: var(--card-bg);
    box-shadow: 0 3px 0 var(--border);
    overflow: hidden;
}

.set-rows {
    display: contents;
}

.set-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 10px 16px;
    border: none;
    background: none;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

.set-row:not(:first-child)::before,
.set-more:not(:first-child) > summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 0;
    height: 1px;
    background: var(--border);
}

label.set-row,
button.set-row,
.set-more > summary {
    cursor: pointer;
}

.set-link:active,
.set-more > summary:active {
    background: var(--tint-primary);
}

.set-row.is-saved {
    animation: set-saved 1.3s ease;
}

@keyframes set-saved {
    0%, 35% { background: var(--tint-success); }
    100% { background: transparent; }
}

.set-label {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.set-label small {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.set-plus {
    font-weight: 900;
    color: var(--primary-dark);
}

.set-value {
    flex: none;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
}

.set-value.is-warn {
    color: var(--warning);
}

.set-chevron {
    flex: none;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

/* Text fields: borderless, right aligned, like a value you can tap. */

.set-input {
    flex: none;
    width: 58%;
    min-width: 0;
    padding: 8px 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: right;
}

.set-input::placeholder {
    color: var(--text-muted);
    font-weight: 500;
}

.set-input:focus {
    outline: none;
    color: var(--text-primary);
}

/* Number value: tap the row, an inline wheel opens below (iOS-style). */

.set-row:has(> .set-pick) {
    cursor: pointer;
}

.set-pick {
    flex: none;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.set-pick-text {
    font-variant-numeric: tabular-nums;
}

.set-pick.is-empty .set-pick-text {
    color: var(--text-muted);
}

.set-pick[aria-expanded="true"] {
    background: var(--tint-primary);
    color: var(--primary-dark);
}

.set-unit {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

.set-wheel {
    --item: 40px;
    position: relative;
    height: calc(var(--item) * 5);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
    mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
}

.set-wheel::-webkit-scrollbar {
    display: none;
}

.set-wheel.is-open {
    opacity: 1;
    transform: none;
}

.set-wheel-track {
    padding: calc(var(--item) * 2) 0;
}

/* Selection band behind the centre row. */

.set-wheel-track::before {
    content: '';
    position: sticky;
    top: calc(var(--item) * 2);
    display: block;
    height: var(--item);
    margin: 0 16px calc(var(--item) * -1);
    border-radius: 12px;
    background: var(--tint-primary);
    pointer-events: none;
}

.set-wheel-item {
    position: relative;
    height: var(--item);
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding-top: 7px;
    scroll-snap-align: center;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: color 0.12s ease, transform 0.12s ease;
}

.set-wheel-item small {
    margin-left: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.set-wheel-item.is-selected {
    color: var(--primary-dark);
    font-size: 22px;
}

html[data-theme="dark"] .set-wheel-item.is-selected {
    color: #c4b5fd;
}

.set-row .toggle-switch {
    flex: none;
}

/* Dark: keep the toggle knob and its off track readable on dark rows. */

html[data-theme="dark"] .toggle-slider {
    background-color: #3a3360;
}

html[data-theme="dark"] .toggle-slider::before {
    background-color: var(--text-primary);
}

/* Segmented control (Apparence) */

.set-segmented {
    flex: none;
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 13px;
    background: var(--bg-tertiary);
}

.set-segmented button {
    padding: 7px 11px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.set-segmented button.active {
    background: var(--grad-primary);
    color: #fff;
    box-shadow: 0 2px 0 var(--primary-3d);
}

.set-action {
    flex: none;
    padding: 9px 14px;
    border: none;
    border-radius: 12px;
    background: var(--tint-primary-strong);
    color: var(--primary-dark);
    font: inherit;
    font-size: 13.5px;
    font-weight: 800;
    box-shadow: 0 3px 0 rgba(99, 102, 241, 0.3);
    cursor: pointer;
}

.set-action:disabled {
    opacity: 0.45;
    box-shadow: none;
    cursor: default;
}

/* "Réglages avancés": one row that opens in place. */

.set-more > summary {
    list-style: none;
}

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

.set-more[open] > summary .set-chevron {
    transform: rotate(90deg);
}