/* =====================================================================
   v7 layer — loaded last. See DESIGN.md.
   Réglages as a right drawer with a profile card, Stats (friends ranking,
   overview with a drawn tonnage comparison, records, exercise search),
   home muscles list and calendar.
   ===================================================================== */

/* ---------- Réglages: full-screen drawer from the right ---------- */

.bottom-sheet.is-drawer {
    z-index: 149; /* sheets opened from it (Mes séances…) stay on top */
}

.bottom-sheet.is-drawer > .sheet-content {
    inset: 0;
    max-height: none;
    border-radius: 0;
    padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 14px) 18px calc(var(--safe-bottom, 0px) + 28px);
    box-shadow: -12px 0 40px rgba(30, 27, 75, 0.18);
    animation: drawerIn 0.32s var(--ease-out) both;
}

@keyframes drawerIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .bottom-sheet.is-drawer > .sheet-content { animation: none; }
}

#sheet-settings h3 {
    margin: 4px 0 6px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: left;
}

/* ---------- Réglages: profile card ---------- */

.set-profile {
    padding: 18px 16px 16px;
}

.set-profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.set-avatar {
    position: relative;
    flex: none;
    width: 88px;
    height: 88px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.set-avatar-art {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--card-bg), 0 0 0 6px var(--tint-primary-strong);
}

.set-avatar-edit {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--grad-primary);
    color: #fff;
    box-shadow: 0 0 0 3px var(--card-bg), 0 2px 0 var(--primary-3d);
}

.set-profile-id {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 4px 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
}

.set-profile-id strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.set-profile-id > span:not(.set-profile-badge) {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

.set-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--tint-primary);
    color: var(--primary-dark);
    font-size: 12.5px;
    font-weight: 800;
}

.set-profile-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    color: var(--text-muted);
}

.set-profile-name strong {
    color: var(--text-primary);
}

.set-profile-id[aria-expanded="true"] .set-profile-name {
    color: var(--primary);
}

.set-profile-done {
    width: 100%;
    margin-top: 16px;
}

.set-profile-done[hidden] {
    display: none;
}

/* Réglages: back chevron top-left, since the drawer comes from the right */

.sheet-close.is-back {
    float: none;
    width: 40px;
    height: 40px;
    margin: -6px 0 4px -10px;
    background: none;
    color: var(--text-primary);
}

.set-profile-fields {
    margin: 14px -16px 0;
}

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

/* Avatar editor */

.set-avatar-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}

.set-avatar-editor[hidden],
.set-profile-fields[hidden] {
    display: none;
}

.set-avatar-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

.set-avatar-grid {
    display: grid;
    gap: 8px;
}

.set-avatar-grid.is-poses { grid-template-columns: repeat(5, 1fr); }

.set-avatar-grid.is-colors { grid-template-columns: repeat(8, 1fr); }

.set-avatar-grid.is-patterns { grid-template-columns: repeat(5, 1fr); }

.set-avatar-choice {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: var(--bg-secondary);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.12s var(--ease-out);
}

.set-avatar-choice:active { transform: scale(0.94); }

.set-avatar-choice.is-active {
    box-shadow: 0 0 0 2.5px var(--primary);
}

.set-avatar-choice.is-pose img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1) translateY(4%);
}

.set-avatar-choice.is-color {
    border-radius: 50%;
    background: none;
}

.set-avatar-choice.is-color span {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--b1) 0 50%, var(--b2) 50% 100%);
}

.set-avatar-choice.is-color.is-active {
    box-shadow: 0 0 0 2.5px var(--primary);
}

.set-avatar-choice.is-pattern .buddy-art {
    position: absolute;
    inset: 0;
}

/* Poids · Taille · Séances: three tiles, the wheel opens full width below */

.set-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 8px;
    margin-top: 18px;
}

.set-profile-stats .set-row.set-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 0;
    padding: 12px;
    border-radius: 16px;
    background: var(--bg-secondary);
}

.set-profile-stats .set-row.set-stat::before {
    display: none;
}

.set-stat-icon {
    width: 22px;
    height: 22px;
    margin-bottom: 6px;
    color: var(--primary);
}

.set-stat .set-label {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

.set-stat .set-pick {
    padding: 0;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: var(--text-primary);
}

.set-stat .set-pick .set-unit {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

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

.set-profile-stats .set-wheel {
    grid-column: 1 / -1;
    border-radius: 16px;
    background: var(--bg-secondary);
}

/* ---------- Home: calendar under the muscles ---------- */

#pane-home .history-calendar-section {
    margin-top: 0;
}

.history-calendar-heading {
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px 10px;
}

/* Long month names (septembre 2026) are cut, the session count stays on the line. */

#history-calendar-title {
    min-width: 0;
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-calendar-heading .history-calendar-summary {
    flex-shrink: 0;
    white-space: nowrap;
}

.history-calendar-summary {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--tint-primary);
    color: var(--primary-dark);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.history-calendar-summary::before {
    content: none;
}

/* ---------- Stats: friends ranking ---------- */

.friends-board.is-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 20px 20px;
    background: transparent;
    border: 2.5px dashed color-mix(in srgb, var(--primary) 38%, transparent);
    box-shadow: none;
}

.fb-empty-art {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.fb-empty-art .sf-avatar.is-lg {
    width: 64px;
    height: 64px;
    margin: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--bg-secondary);
    z-index: 2;
}

.fb-slot {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2.5px dashed color-mix(in srgb, var(--primary) 45%, transparent);
    background: var(--bg-secondary);
    color: var(--primary);
}

.fb-slot + .fb-slot {
    width: 48px;
    height: 48px;
    opacity: 0.7;
}

.friends-board.is-empty h4 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.friends-board.is-empty p {
    max-width: 280px;
    margin: 6px 0 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-secondary);
}

.fb-add {
    gap: 8px;
    min-height: 50px;
    padding: 0 22px;
}

.fb-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
}

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

.fb-row.is-me {
    margin: 0 -8px;
    padding: 10px 12px;
    border-radius: 14px;
    border-top-color: transparent;
    background: var(--tint-primary);
}

.fb-row.is-me + .fb-row {
    border-top-color: transparent;
}

.fb-rank {
    width: 20px;
    flex: none;
    display: grid;
    place-items: center;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 900;
    color: var(--text-muted);
}

.fb-row.is-first .fb-rank {
    color: #f59e0b;
}

.fb-row.is-first .fb-rank svg {
    fill: #fbbf24;
    stroke: #d97706;
}

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

.fb-name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fb-name strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

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

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

.fb-xp small {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
}

.fb-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}

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

/* ---------- Stats: overview ---------- */

.ov-tonnage {
    --ov-tint: var(--tint-primary);
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.ov-art {
    flex: none;
    display: grid;
    place-items: center;
    position: relative;
    width: 108px;
    height: 108px;
    animation: ovArtIn 0.45s var(--ease-spring) both;
}

/* Soft tinted disc behind the 3D object; the object overflows it a bit. */
.ov-art::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: var(--ov-tint);
}

.ov-art img,
.ov-art svg {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 8px rgba(30, 27, 75, 0.18));
}

.ov-art.is-mascot img {
    clip-path: circle(49px at 50% 50%);
    object-fit: cover;
    filter: none;
}

@keyframes ovArtIn {
    from { transform: scale(0.85) rotate(-3deg); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.ov-tonnage-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ov-tonnage-text strong {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.ov-tonnage-text span {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-secondary);
}

.ov-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 16px 0 0;
    border-top: 1px solid var(--border-light);
}

.ov-stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 2px;
    padding: 12px 10px 4px 0;
}

.ov-stat:nth-child(3n + 2),
.ov-stat:nth-child(3n) {
    padding-left: 12px;
    border-left: 1px solid var(--border-light);
}

.ov-stat:nth-child(n + 4) {
    border-top: 1px solid var(--border-light);
}

.ov-stat dd {
    margin: 0;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--text-primary);
    white-space: nowrap;
}

.ov-stat dt {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-muted);
}

.ov-stat.is-gold dd {
    color: #d97706;
}

.ov-stats.is-quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.ov-stats.is-quad .ov-stat {
    padding: 14px 12px 12px 0;
}

.ov-stats.is-quad .ov-stat:nth-child(n) {
    padding-left: 0;
    border-left: 0;
}

.ov-stats.is-quad .ov-stat:nth-child(2n) {
    padding-left: 16px;
    border-left: 1px solid var(--border-light);
}

.ov-stats.is-quad .ov-stat:nth-child(n + 3) {
    border-top: 1px solid var(--border-light);
}

.ov-stats.is-quad .ov-stat dd {
    font-size: 30px;
    letter-spacing: -0.02em;
}

.ov-stats.is-quad .ov-stat dt {
    font-size: 13px;
}

.ov-tonnage-text b {
    font-weight: 800;
    color: var(--text-primary);
}

/* Stats with a line icon in front: icon on the left, number over label. */
.ov-stat.is-primary { --ov-c: var(--primary); }
.ov-stat.is-gold { --ov-c: var(--gold); }
.ov-stat.is-danger { --ov-c: var(--danger); }
.ov-stat.is-violet { --ov-c: var(--violet); }

.ov-stats.has-icons .ov-stat {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas: "icon value" "icon label";
    align-items: center;
    column-gap: 10px;
    row-gap: 1px;
}

.ov-stat-icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ov-c) 14%, transparent);
    color: var(--ov-c);
}

.ov-stat-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ov-stats.has-icons .ov-stat dd {
    grid-area: value;
    align-self: end;
    font-size: 26px;
}

.ov-stats.has-icons .ov-stat dt {
    grid-area: label;
    align-self: start;
}

.activity-card .ov-stats,
.cardio-card .ov-stats {
    margin-top: 14px;
}

/* ---------- Stats: exercise search ---------- */

.exo-search {
    position: relative;
}

.exo-search .exo-search-field {
    min-height: 54px;
    border-radius: 18px;
    background: var(--card-bg);
    border: 2px solid #ececfb;
    box-shadow: 0 4px 0 #e4e4f7;
}

.exo-search.has-results .exo-search-field {
    border-color: #a78bfa;
}

.exo-search-results:empty {
    display: none;
}

.exo-search-results {
    display: block;
    margin-top: 10px;
    padding: 4px 14px;
    border-radius: 20px;
    background: var(--card-bg);
    border: 2px solid #ececfb;
    box-shadow: 0 4px 0 #e4e4f7;
}

.exo-search-results .exo-row {
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.exo-search-results .exo-row + .exo-row {
    border-top: 1px solid var(--border-light);
}

.exo-search-results .exo-row:active {
    transform: none;
    opacity: 0.7;
}

.exo-search-results .exo-tier {
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.exo-search-empty {
    padding: 14px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

.tier-medal {
    display: block;
    flex: none;
}

.exo-hero-tier {
    background: none;
    box-shadow: none;
    border: 0;
}

/* ---------- Stats: records ---------- */

.lift-best {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 2px 0 14px;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.lift-best-crown {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fef3c7;
}

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

.lift-best-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
}

.lift-best-main small {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.lift-best-value {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.lift-best-value strong {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    color: #d97706;
}

.lift-best-value small {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
}

.lifts-card .lift-list {
    border-top: 1px solid var(--border-light);
}

.lifts-card .lift-row {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

/* ---------- Dark mode ---------- */

html[data-theme="dark"] .exo-search .exo-search-field,
html[data-theme="dark"] .exo-search-results {
    border-color: var(--border);
    box-shadow: 0 4px 0 var(--border);
}

html[data-theme="dark"] .lift-best-crown { background: #3a2e10; }

html[data-theme="dark"] .lift-best-value strong,
html[data-theme="dark"] .ov-stat.is-gold dd { color: #fbbf24; }

html[data-theme="dark"] .ov-art::before { background: color-mix(in srgb, var(--ov-tint) 22%, #1b1733); }

html[data-theme="dark"] .bottom-sheet.is-drawer > .sheet-content { box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5); }

/* ---------- Settings: rows hidden for now, app version ---------- */

.set-row[hidden],
.pz-card[hidden] {
    display: none;
}

.set-version {
    margin: 22px 0 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

/* ---------- Friends: duo illustration ---------- */

.sf-duo {
    display: block;
    width: min(100%, 220px);
    height: auto;
    margin: 0 auto 4px;
    pointer-events: none;
}

/* ---------- Friends nudge (once, after a finished session) ---------- */

.friends-nudge {
    position: fixed;
    inset: 0;
    z-index: 2900;
    display: grid;
    place-items: safe center;
    overflow-y: auto;
    padding: 96px 16px calc(var(--safe-bottom, 0px) + 24px);
    background: rgba(15, 12, 40, 0.62);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.friends-nudge.is-open {
    opacity: 1;
}

.friends-nudge-card {
    position: relative;
    width: min(100%, 360px);
    min-width: 0;
    padding: 0 22px 12px;
    border: 2px solid var(--border-light);
    border-radius: 28px;
    background: var(--card-bg);
    box-shadow: 0 6px 0 var(--border);
    text-align: center;
    opacity: 0;
    transform: translateY(48px) scale(0.92);
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.friends-nudge.is-open .friends-nudge-card {
    opacity: 1;
    transform: none;
}

.friends-nudge-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
}

/* The rhinos step out of the top of the card. */

.friends-nudge-art {
    position: relative;
    width: min(100%, 250px);
    height: 200px;
    margin: -92px auto 4px;
}

.friends-nudge-disc {
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 176px;
    height: 176px;
    margin-left: -88px;
    transform: scale(0);
}

.friends-nudge-art img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform-origin: 50% 90%;
}

.friends-nudge h3 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: pre-line;
    color: var(--text-primary);
}

.friends-nudge p {
    margin: 0 auto 18px;
    max-width: 290px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.friends-nudge-add {
    width: 100%;
    gap: 8px;
}

.friends-nudge-later {
    width: 100%;
    margin-top: 4px;
    padding: 12px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
}

.friends-nudge h3,
.friends-nudge p,
.friends-nudge-add,
.friends-nudge-later {
    opacity: 0;
    transform: translateY(10px);
}

.friends-nudge.is-open .friends-nudge-disc {
    animation: nudge-disc 0.5s 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.friends-nudge.is-open .friends-nudge-art img {
    animation:
        nudge-pop 0.45s 0.12s ease-out forwards,
        nudge-breathe 4.8s 0.57s ease-in-out infinite;
}

.friends-nudge.is-open h3 { animation: nudge-rise 0.4s 0.3s ease-out forwards; }

.friends-nudge.is-open p { animation: nudge-rise 0.4s 0.38s ease-out forwards; }

.friends-nudge.is-open .friends-nudge-add { animation: nudge-rise 0.4s 0.46s ease-out forwards; }

.friends-nudge.is-open .friends-nudge-later { animation: nudge-rise 0.4s 0.52s ease-out forwards; }

/* Account: same popup, one rhino, two steps (email, then code). */

.account-nudge .friends-nudge-art {
    width: 196px;
    height: 184px;
    margin: -70px auto 8px;
}

.account-nudge .friends-nudge-art img {
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
    transform-origin: 50% 60%;
}

.account-nudge p {
    margin-bottom: 14px;
}

.account-input {
    margin-bottom: 10px;
    text-align: center;
}

.account-code {
    font-family: 'Nunito', var(--font-family, sans-serif);
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.3em;
}

.account-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 2px 0 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    color: var(--text-secondary);
    cursor: pointer;
}

.account-check input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--primary);
}

.account-note {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.account-links {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
}

.account-links button {
    padding: 12px 10px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
}

.account-nudge.is-open .account-input,
.account-nudge.is-open .account-check,
.account-nudge.is-open .account-note {
    animation: nudge-rise 0.4s 0.42s ease-out both;
}

/* The code step comes in without the entrance delays. */
.account-step[data-step="code"] h3,
.account-step[data-step="code"] p,
.account-step[data-step="code"] .friends-nudge-add {
    opacity: 1;
    transform: none;
    animation: none;
}

.account-email {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-danger .set-label {
    color: var(--danger, #dc2626);
}

@keyframes nudge-disc {
    to { transform: scale(1); }
}

@keyframes nudge-pop {
    0% { opacity: 0; transform: translateY(6px) scale(0.97); }
    60% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}

/* A slow breath, with no lateral movement or rotation. */
@keyframes nudge-breathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.015); }
}

@keyframes nudge-rise {
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .friends-nudge-card,
        .friends-nudge.is-open .friends-nudge-card {
        transition: opacity 0.2s ease;
        transform: none;
    }

    .friends-nudge .friends-nudge-disc { transform: none; }


    .friends-nudge.is-open .friends-nudge-art img,
        .friends-nudge.is-open h3,
        .friends-nudge.is-open p,
        .friends-nudge.is-open .friends-nudge-add,
        .friends-nudge.is-open .friends-nudge-later {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ---------- Stats: muscles (donut + radar) ---------- */

.mc-donut-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
}

.mc-donut {
    position: relative;
    flex: none;
    width: 140px;
    height: 140px;
}

.mc-donut svg {
    width: 100%;
    height: 100%;
    animation: mcIn 0.5s var(--ease-spring) both;
}

.mc-arc {
    fill: none;
    stroke-width: 20;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.mc-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    text-align: center;
    pointer-events: none;
}

.mc-center strong {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.mc-center span {
    max-width: 100%;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-legend {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

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

.mc-row i {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--muscle);
}

.mc-row-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-row strong {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-weight: 900;
}

.mc-arc.is-dim,
.mc-row.is-dim {
    opacity: 0.25;
}

.mc-radar-block {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.mc-radar-block h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}

.mc-radar {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 4px auto 0;
    overflow: visible;
}

.mc-grid polygon,
.mc-grid line {
    fill: none;
    stroke: var(--border-light);
    stroke-width: 1.5;
}

.mc-target {
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 1.5;
    stroke-dasharray: 3 4;
}

.mc-shape {
    fill: var(--tint-primary-strong);
    fill-opacity: 0.55;
    stroke: var(--primary);
    stroke-width: 2.5;
    stroke-linejoin: round;
    transform-origin: 130px 116px;
    animation: mcIn 0.5s var(--ease-spring) both;
}

.mc-dots circle {
    fill: var(--primary);
    stroke: var(--card-bg);
    stroke-width: 2;
}

.mc-labels text {
    font-size: 12px;
    font-weight: 700;
    fill: var(--text-secondary);
}

.mc-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.mc-note i {
    width: 16px;
    border-top: 2px dotted var(--text-muted);
}

@keyframes mcIn {
    from { transform: scale(0.88); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* =====================================================================
   Accueil : série (flamme + boucliers) et chemin de la semaine
   ===================================================================== */

.home-streak,
.week-card {
    --flame-1: #f97316;
    --flame-2: #fbbf24;
    --flame-3: #fff7d6;
    --flame-4: #fde68a;
    --flame-rim: #c2410c;
    --flame-rim-3d: #9a3412;
    --flame-glow: rgba(249, 115, 22, 0.42);
}

.home-streak {
    --shield: var(--primary);
    --shield-bg: #ededf7;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 2px 0;
}

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

.streak-count {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Halo de chaleur qui respire derrière la flamme. */
.streak-count::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: -14px;
    top: 50%;
    width: 78px;
    height: 78px;
    margin-top: -42px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--flame-glow) 0%, transparent 68%);
    animation: streak-glow 2.4s ease-in-out infinite;
    pointer-events: none;
}

.streak-count.is-off::before { display: none; }

.streak-flame {
    width: 50px;
    height: 55px;
    flex: none;
    overflow: visible;
    filter: drop-shadow(0 3px 0 var(--flame-rim-3d)) drop-shadow(0 0 14px rgba(249, 115, 22, 0.55));
}

/* Braises qui s'échappent du haut de la flamme. */
.streak-flame-sparks circle {
    fill: var(--flame-2);
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: streak-spark 2.2s ease-out infinite;
}

.streak-flame-sparks circle:nth-child(2) { animation-delay: 0.75s; }

.streak-flame-sparks circle:nth-child(3) { animation-delay: 1.5s; }

.streak-count.is-off .streak-flame-sparks { display: none; }

.streak-flame-body {
    transform-origin: 50% 100%;
    animation: streak-flicker 2.4s ease-in-out infinite;
}

.streak-flame-outer {
    stroke: var(--flame-rim);
    stroke-width: 5;
    stroke-linejoin: round;
    paint-order: stroke;
}

.streak-flame-shine {
    fill: none;
    stroke: #fff;
    stroke-width: 5;
    stroke-linecap: round;
    opacity: 0.55;
}

.streak-flame-stop-1 { stop-color: var(--flame-1); }

.streak-flame-stop-2 { stop-color: var(--flame-2); }

.streak-flame-stop-3 { stop-color: var(--flame-3); }

.streak-flame-stop-4 { stop-color: var(--flame-4); }

.streak-flame-inner {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: streak-flicker-inner 1.6s ease-in-out infinite;
}

.streak-count.is-lit .streak-flame-body { animation-duration: 1.9s; }

.streak-count.is-blaze .streak-flame-body { animation-duration: 1.4s; }

.streak-count.is-lit { --flame-glow: rgba(249, 115, 22, 0.52); }

.streak-count.is-blaze {
    --flame-1: #ef4444;
    --flame-rim: #b91c1c;
    --flame-rim-3d: #7f1d1d;
    --flame-glow: rgba(239, 68, 68, 0.5);
}

.streak-count.is-blaze .streak-flame {
    filter: drop-shadow(0 3px 0 var(--flame-rim-3d)) drop-shadow(0 0 22px rgba(249, 115, 22, 0.75));
}

.streak-count.is-blaze::before { animation-duration: 1.4s; }

.streak-count.is-blaze .streak-flame-sparks circle { animation-duration: 1.5s; }

.streak-count.is-off {
    --flame-1: #cbd5e1;
    --flame-2: #e2e8f0;
    --flame-3: #f8fafc;
    --flame-4: #f1f5f9;
    --flame-rim: #a3abc2;
    --flame-rim-3d: #8b93ab;
}

.streak-count.is-off .streak-flame { filter: drop-shadow(0 3px 0 var(--flame-rim-3d)); }

.streak-count.is-off .streak-flame-body,
.streak-count.is-off .streak-flame-inner { animation: none; }

.streak-number {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.streak-unit {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-secondary);
}

.streak-shields {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding: 6px 0 6px 8px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.streak-shields:active { transform: scale(0.96); }

.streak-shield-row {
    display: flex;
    gap: 3px;
}

.streak-shield-count {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
}

.shield-icon {
    width: 26px;
    height: 26px;
    flex: none;
}

.shield-icon .shield-bg { fill: var(--shield-bg, #ededf7); }

.shield-icon .shield-fill { fill: var(--shield, var(--primary)); }

.shield-icon .shield-line {
    fill: none;
    stroke: var(--shield, var(--primary));
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.shield-icon.is-empty .shield-line {
    stroke: var(--text-muted);
    stroke-dasharray: 3 3;
    opacity: 0.6;
}

.streak-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

.streak-status > svg { width: 18px; height: 18px; flex: none; }

.streak-status.is-shield { color: var(--primary-dark); }

.streak-status.is-warning { color: #b45309; }

.streak-status.is-danger { color: #dc2626; }

.streak-status.is-lost {
    width: 100%;
    padding: 12px 14px;
    border: 2px dashed var(--gold);
    border-radius: 16px;
    background: none;
    color: #b45309;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.flame-icon {
    fill: var(--gold);
    stroke: var(--gold-3d);
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.home-streak.celebrating .streak-number {
    animation: streak-pop 0.9s var(--ease-spring);
}

@keyframes streak-flicker {
    0%, 100% { transform: scale(1, 1); }
    30% { transform: scale(1.04, 0.95) skewX(-2deg); }
    60% { transform: scale(0.97, 1.06) skewX(2deg); }
}

@keyframes streak-flicker-inner {
    0%, 100% { transform: scaleY(1); opacity: 0.85; }
    50% { transform: scaleY(1.1); opacity: 1; }
}

@keyframes streak-glow {
    0%, 100% { transform: scale(0.9); opacity: 0.75; }
    50% { transform: scale(1.12); opacity: 1; }
}

@keyframes streak-spark {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(-40px) scale(0.3); opacity: 0; }
}

@keyframes streak-pop {
    40% { transform: scale(1.18) rotate(-3deg); }
}

/* ---------- Carte Semaine ---------- */

.week-card {
    --path-rail: #ededf7;
}

.week-card .pz-card-head {
    align-items: center;
    margin-bottom: 10px;
}

.week-path {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--nodes, 4), minmax(0, 1fr));
    align-items: start;
    margin: 0;
    padding: 0 0 16px;
    list-style: none;
    border-bottom: 1px solid var(--border-light);
}

/* Rail from the first node centre to the last, filled up to the next session. */

.week-path::before,
.week-path::after {
    content: '';
    position: absolute;
    top: 29px;
    left: calc(50% / var(--nodes, 4));
    height: 6px;
    border-radius: 999px;
}

.week-path::before {
    right: calc(50% / var(--nodes, 4));
    background: var(--path-rail);
}

.week-path::after {
    width: calc((100% - 100% / var(--nodes, 4)) * var(--fill, 0));
    background: var(--success);
}

.week-node {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.week-node-dot {
    width: 48px;
    height: 48px;
    margin: 8px 0 8px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--path-rail);
    box-shadow: 0 4px 0 #dcdcf0;
    color: var(--text-muted);
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 900;
}

.week-node-dot svg { width: 22px; height: 22px; }

.week-node-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
}

.week-node-day {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

.week-node.is-done .week-node-dot {
    background: var(--success);
    box-shadow: 0 4px 0 var(--success-3d);
    color: #fff;
}

.week-node.is-next .week-node-dot {
    width: 64px;
    height: 64px;
    margin: 0 0 8px;
    background: var(--grad-primary);
    box-shadow: 0 5px 0 var(--primary-3d), 0 0 0 6px var(--tint-primary-strong);
    color: #fff;
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.08s;
    animation: week-next-pulse 2.4s ease-in-out infinite;
}

.week-node.is-next .week-node-dot svg { width: 26px; height: 26px; margin-left: 3px; }

.week-node.is-next .week-node-dot:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 var(--primary-3d), 0 0 0 6px var(--tint-primary-strong);
    animation: none;
}

.week-node.is-next .week-node-dot:disabled { opacity: 0.5; animation: none; }

.week-node.is-next .week-node-name { color: var(--primary); }

/* Finish line: gold flag, then a gold check once the week is done. */

.week-node.is-reward .week-node-dot {
    background: color-mix(in srgb, var(--gold) 16%, var(--card-bg));
    box-shadow: 0 4px 0 color-mix(in srgb, var(--gold) 34%, var(--card-bg));
    color: var(--gold);
}

.week-flag-cloth {
    transform-box: fill-box;
    transform-origin: left center;
    animation: week-flag-wave 2.6s ease-in-out infinite;
}

.week-node.is-reward .week-node-name { color: var(--gold-3d); }

.week-node.is-reward.is-won .week-node-dot {
    background: var(--gold);
    box-shadow: 0 4px 0 var(--gold-3d);
    color: #fff;
}

.week-node.is-reward.is-won .week-node-day { color: var(--gold-3d); font-weight: 800; }

/* Goal of 5+ sessions: smaller dots, day only. */

.week-path.is-dense::before,
.week-path.is-dense::after { top: 22px; }

.week-path.is-dense .week-node-dot { width: 34px; height: 34px; margin: 8px 0 6px; font-size: 14px; }

.week-path.is-dense .week-node-dot svg { width: 16px; height: 16px; }

.week-path.is-dense .week-node.is-next .week-node-dot { width: 48px; height: 48px; margin: 0 0 6px; }

.week-path.is-dense .week-node:not(.is-next):not(.is-reward) .week-node-name { display: none; }

/* 6–7 sessions: eight columns of ~38 px, so everything shrinks again and the
   play button keeps a thin halo that stays inside its column. */

.week-path.is-tight::before,
.week-path.is-tight::after { top: 21px; }

.week-path.is-tight .week-node-dot { width: 30px; height: 30px; margin: 9px 0 6px; font-size: 13px; }

.week-path.is-tight .week-node-dot svg { width: 14px; height: 14px; }

.week-path.is-tight .week-node.is-next .week-node-dot { width: 40px; height: 40px; margin: 4px 0 6px; box-shadow: 0 4px 0 var(--primary-3d), 0 0 0 3px var(--tint-primary-strong); }

.week-path.is-tight .week-node.is-next .week-node-dot:active { box-shadow: 0 0 0 var(--primary-3d), 0 0 0 3px var(--tint-primary-strong); }

.week-path.is-tight .week-node.is-next .week-node-dot svg { width: 18px; height: 18px; margin-left: 2px; }

.week-path.is-tight .week-node.is-reward .week-node-name { display: none; }

.week-path.is-tight .week-node-day { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }

@keyframes week-flag-wave {
    0%, 100% { transform: skewY(0deg) scaleX(1); }
    50% { transform: skewY(-8deg) scaleX(0.9); }
}

@keyframes week-next-pulse {
    50% { box-shadow: 0 5px 0 var(--primary-3d), 0 0 0 10px var(--tint-primary); }
}

.week-session {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
}

.week-session-copy { min-width: 0; }

.week-card .session-name {
    margin: 0;
    font-size: 24px;
    letter-spacing: -0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.week-session-muscles {
    margin-top: 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

.week-session-muscles[hidden] { display: none; }

.week-swap {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--tint-primary);
    color: var(--primary);
    cursor: pointer;
}

.week-swap:active { transform: scale(0.94); }

.week-swap:disabled { opacity: 0.4; }

.week-start {
    width: 100%;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* ---------- Feuilles boucliers et série perdue ---------- */

.btn-reward {
    background: linear-gradient(135deg, #fbbf24, var(--gold));
    box-shadow: 0 var(--btn-depth) 0 var(--gold-3d), 0 10px 22px rgba(245, 158, 11, 0.25);
    color: #fff;
}

.btn-reward:active {
    transform: translateY(var(--btn-depth));
    box-shadow: 0 0 0 var(--gold-3d);
}

.btn-reward .flame-icon { width: 18px; height: 18px; fill: #fff; stroke: none; }

.shield-sheet,
.streak-lost {
    --shield: var(--primary);
    --shield-bg: #ededf7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.shield-sheet .btn,
.streak-lost .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.shield-sheet-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.shield-sheet-row .shield-icon { width: 44px; height: 44px; }

.shield-sheet h3,
.streak-lost h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.shield-rules {
    width: 100%;
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
    text-align: left;
}

.shield-rules li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border-light);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.shield-rules li > svg { width: 24px; height: 24px; flex: none; }

.shield-full {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.streak-lost-rhino {
    width: 172px;
    height: 160px;
    object-fit: contain;
}

.streak-lost-count {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-muted);
}

.streak-lost-count s {
    margin-right: 4px;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 900;
    color: var(--text-primary);
    text-decoration-color: var(--danger);
    text-decoration-thickness: 3px;
}

.streak-lost-text {
    max-width: 290px;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.streak-lost-skip {
    padding: 8px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-muted);
    cursor: pointer;
}

html[data-theme="dark"] .home-streak,
html[data-theme="dark"] .shield-sheet,
html[data-theme="dark"] .streak-lost {
    --shield: #818cf8;
    --shield-bg: #2a2448;
}

html[data-theme="dark"] .streak-count.is-off {
    --flame-1: #3a3360;
    --flame-2: #4a4378;
    --flame-3: #5b5490;
    --flame-4: #4a4378;
}

html[data-theme="dark"] .streak-count.is-off .streak-flame { filter: drop-shadow(0 3px 0 #1b1733); }

html[data-theme="dark"] .streak-status.is-warning,
html[data-theme="dark"] .streak-status.is-lost { color: #fbbf24; }

html[data-theme="dark"] .streak-status.is-danger { color: #f87171; }

html[data-theme="dark"] .week-card { --path-rail: #2a2448; }

html[data-theme="dark"] .week-node-dot { box-shadow: 0 4px 0 #1b1733; }

html[data-theme="dark"] .week-node.is-reward .week-node-name,
html[data-theme="dark"] .week-node.is-reward.is-won .week-node-day { color: #fbbf24; }

@media (prefers-reduced-motion: reduce) {
    .streak-flame-body,
        .streak-flame-inner,
        .streak-count::before,
        .week-node.is-next .week-node-dot,
        .week-flag-cloth {
        animation: none;
    }
}

/* ---------- Duo stage: purple disc, starburst and sparkles behind the rhinos ---------- */

.duo-stage {
    position: relative;
    display: grid;
    place-items: end center;
    width: min(100%, 260px);
    margin: 4px auto 0;
}

.duo-stage .sf-duo {
    position: relative;
    z-index: 1;
    width: 220px;
    margin: 0;
}

.duo-stage > .duo-disc {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 204px;
    height: 204px;
    margin-left: -102px;
}

.friends-nudge-disc > .duo-disc {
    position: absolute;
    inset: 0;
}

.duo-disc-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #a78bfa 0%, #7c3aed 52%, #4c1d95 100%);
    box-shadow: 0 5px 0 #3b1782, 0 14px 30px rgba(76, 29, 149, 0.35);
}

.duo-rays {
    position: absolute;
    inset: -50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.22) 0deg 10deg, transparent 10deg 30deg);
    -webkit-mask: radial-gradient(circle, #000 8%, transparent 62%);
    mask: radial-gradient(circle, #000 8%, transparent 62%);
    animation: duo-spin 16s linear infinite;
}

.duo-rays-b {
    background: repeating-conic-gradient(from 15deg, rgba(196, 181, 253, 0.3) 0deg 5deg, transparent 5deg 30deg);
    animation-duration: 24s;
    animation-direction: reverse;
}

.duo-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 3px solid rgba(139, 92, 246, 0.55);
    animation: duo-ring 2.6s ease-out infinite;
}

.duo-spark {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fde68a;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: duo-twinkle 2.2s ease-in-out infinite;
}

.duo-spark.s1 { top: 6%; left: -4%; }

.duo-spark.s2 { top: 0; right: 2%; width: 11px; height: 11px; background: #fff; animation-delay: 0.7s; }

.duo-spark.s3 { top: 46%; right: -9%; width: 13px; height: 13px; background: #c4b5fd; animation-delay: 1.3s; }

.duo-spark.s4 { top: 52%; left: -10%; width: 10px; height: 10px; background: #fff; animation-delay: 0.3s; }

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

@keyframes duo-ring {
    0% { opacity: 0.8; transform: scale(0.96); }
    100% { opacity: 0; transform: scale(1.22); }
}

@keyframes duo-twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.5) rotate(0); }
    50% { opacity: 1; transform: scale(1.15) rotate(25deg); }
}

@media (prefers-reduced-motion: reduce) {
    .duo-rays, .duo-ring, .duo-spark { animation: none; }

    .duo-ring { display: none; }
}

/* =====================================================================
   Parcours (levels.js): level card, weekly challenges, level road,
   trophy showcase. One XP, one level; everything else hangs off it.
   ===================================================================== */

/* ---------- Level badge: shield with the level number ---------- */

.lvl-badge {
    --face: var(--primary);
    --slice: var(--primary-3d);
    position: relative;
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 72px;
}

.lvl-badge.is-lg { width: 76px; height: 86px; }
.lvl-badge.is-sm { width: 56px; height: 63px; }

.lvl-badge > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.lvl-badge-face { fill: var(--face); }
.lvl-badge-slice { fill: var(--slice); }

.lvl-badge strong {
    position: relative;
    margin-top: -4px;
    font-family: 'Nunito', sans-serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
}

.lvl-badge.is-lg strong { font-size: 34px; }
.lvl-badge.is-sm strong { font-size: 24px; }

.lvl-badge.tier-violet { --face: var(--violet); --slice: var(--primary-dark); }
.lvl-badge.tier-gold { --face: var(--gold); --slice: var(--gold-3d); }
.lvl-badge.tier-legend { --face: #1e1b4b; --slice: var(--gold-3d); }
.lvl-badge.tier-legend strong { color: var(--gold); }

.achievement-toast-icon .lvl-badge,
.achievement-toast-icon .medal {
    margin: 0 auto;
}

.achievement-toast-icon > svg {
    width: 56px;
    height: 56px;
    color: var(--primary);
}

/* ---------- Level card ---------- */

.lvl-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lvl-identity {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lvl-identity h4 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.lvl-xp {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

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

.lvl-track {
    height: 14px;
    margin-top: 14px;
    border-radius: 999px;
    background: #ededf7;
    overflow: hidden;
}

.lvl-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--grad-primary);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
    animation: lvlFill 0.9s var(--ease-out) both;
}

@keyframes lvlFill {
    from { width: 0; }
}

.lvl-bonus {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.lvl-bonus span { flex: 1; }

.lvl-bonus strong {
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 900;
    color: var(--text-muted);
}

.lvl-bonus.is-on { color: var(--text-secondary); }
.lvl-bonus.is-on svg,
.lvl-bonus.is-on strong { color: var(--gold); }

/* ---------- Weekly challenges ---------- */

.wc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border-light);
}

.wc-row:first-child { padding-top: 0; border-top: 0; }
.wc-row:last-child { padding-bottom: 0; }

.wc-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    color: var(--primary);
}

.wc-row.is-bolt .wc-icon { color: var(--gold); }
.wc-row.is-trend .wc-icon { color: var(--success); }
.wc-row.is-heart .wc-icon { color: #ec4899; }
.wc-row.is-target .wc-icon { color: #f43f5e; }
.wc-row.is-done .wc-icon { color: var(--success); }

.wc-main,
.tc-next-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wc-main strong,
.tc-next-main strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wc-main small,
.tc-next-main small {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
}

.wc-track {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #ededf7;
    overflow: hidden;
}

.wc-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.wc-row.is-done .wc-track span { background: var(--success); }
.tc-next .wc-track span { background: var(--gold); }

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

.wc-xp small {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
}

.wc-row.is-done .wc-xp { color: var(--success); }

/* ---------- Level road ---------- */

.lvl-road {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 4px 0 6px;
}

.lvl-road-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
}

.lvl-row {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    transform: translateX(var(--offset, 0));
}

.lvl-node {
    --face: var(--primary);
    --slice: var(--primary-3d);
    position: relative;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--face);
    box-shadow: 0 6px 0 var(--slice);
    color: #fff;
    cursor: pointer;
    transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}

.lvl-node:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--slice);
}

.lvl-node.tier-violet { --face: var(--violet); --slice: var(--primary-dark); }
.lvl-node.tier-gold { --face: var(--gold); --slice: var(--gold-3d); }
.lvl-node.tier-legend { --face: #1e1b4b; --slice: var(--gold-3d); }

.lvl-node-face {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.lvl-node-face strong {
    font-family: 'Nunito', sans-serif;
    font-size: 22px;
    font-weight: 900;
}

.lvl-node.is-locked {
    --face: #e4e4f2;
    --slice: #cfcfe4;
    color: var(--text-muted);
}

.lvl-node.is-current {
    width: 78px;
    height: 78px;
}

.lvl-node.is-current .lvl-node-face strong { font-size: 28px; }

.lvl-node-ring {
    position: absolute;
    top: -9px;
    left: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    transform: rotate(-90deg);
    pointer-events: none;
}

.lvl-node-ring circle {
    fill: none;
    stroke: #e4e4f2;
    stroke-width: 6;
}

.lvl-node-ring .lvl-node-ring-fill {
    stroke: var(--face);
    stroke-linecap: round;
}

/* Reward nodes: bigger, with the reward drawn inside */
.lvl-node.is-reward {
    width: 72px;
    height: 72px;
}

.lvl-node.is-reward.is-current { width: 82px; height: 82px; }

.lvl-node.is-reward .buddy-art {
    width: 100%;
    height: 100%;
}

.lvl-node.kind-title {
    --face: var(--gold);
    --slice: var(--gold-3d);
}

.lvl-node.is-reward.is-locked .lvl-node-face {
    filter: grayscale(1);
    opacity: 0.45;
}

.lvl-node.kind-pose {
    --face: var(--violet);
    --slice: var(--primary-dark);
}

.lvl-node.kind-title.is-locked,
.lvl-node.kind-pose.is-locked {
    --face: #e4e4f2;
    --slice: #cfcfe4;
}

/* Passed levels turn green: validated at a glance */
.lvl-node.is-done {
    --face: var(--success);
    --slice: var(--success-3d);
}

.lvl-node.kind-pattern .lvl-node-face {
    padding: 5px;
}

.lvl-node.kind-pattern .buddy-art {
    border-radius: 50%;
}

.lvl-node.is-done .lvl-node-check {
    color: var(--success);
    background: #fff;
}

.lvl-node-check,
.lvl-node-lock {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 3px solid var(--bg-secondary);
    border-radius: 50%;
    color: #fff;
    background: var(--success);
}

.lvl-node-lock {
    color: var(--text-muted);
    background: #e4e4f2;
}

.lvl-node-label,
.lvl-bubble {
    position: absolute;
    top: 50%;
    left: calc(50% + 50px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-width: 130px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text-secondary);
}

.lvl-node-label small {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
}

.lvl-row.is-right .lvl-node-label,
.lvl-row.is-right .lvl-bubble {
    left: auto;
    right: calc(50% + 50px);
    align-items: flex-end;
    text-align: right;
}

.lvl-node-label {
    pointer-events: none;
}

.lvl-bubble {
    left: calc(50% + 58px);
    padding: 8px 12px;
    border: 2px solid #ececfb;
    border-radius: 16px;
    background: var(--card-bg);
    box-shadow: 0 3px 0 #e4e4f7;
    color: var(--text-primary);
    white-space: nowrap;
}

.lvl-row.is-right .lvl-bubble { right: calc(50% + 58px); }

.lvl-bubble strong { font-size: 14px; font-weight: 800; }

.lvl-bubble small {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.lvl-avatar {
    position: absolute;
    top: 50%;
    right: calc(50% + 52px);
    width: 52px;
    height: 52px;
    border: 3px solid var(--card-bg);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 3px 0 #e4e4f7;
    pointer-events: none;
}

.lvl-row.is-right .lvl-avatar {
    right: auto;
    left: calc(50% + 52px);
}

.lvl-road-more {
    padding: 10px 16px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--primary-dark);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

/* ---------- Trophies ---------- */

.medal {
    --face: #e4e4f2;
    --slice: #cfcfe4;
    --ribbon: #d6d6ea;
    position: relative;
    flex: none;
    display: inline-block;
    width: 36px;
    height: 42px;
    color: var(--text-muted);
}

.medal.is-lg { width: 50px; height: 58px; }

.medal > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.medal-face { fill: var(--face); }
.medal-slice { fill: var(--slice); }
.medal-ribbon { fill: var(--ribbon); }

.medal-glyph {
    position: absolute;
    left: 0;
    right: 0;
    top: 41%;
    display: grid;
    place-items: center;
}

.medal.is-unlocked { --ribbon: var(--primary); color: #fff; }
.medal.is-unlocked.tier-1 { --face: #fb923c; --slice: #c2410c; }
.medal.is-unlocked.tier-2 { --face: #cbd5e1; --slice: #94a3b8; color: #475569; }
.medal.is-unlocked.tier-3 { --face: var(--gold); --slice: var(--gold-3d); }
.medal.is-unlocked.tier-4 { --face: var(--violet); --slice: var(--primary-dark); --ribbon: var(--gold); }

.tc-next {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
}

.tc-families {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tc-family {
    padding: 12px 0;
    border-top: 1px solid var(--border-light);
}

.tc-family:last-child { padding-bottom: 0; }

.tc-family-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
}

.tc-family-head small {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
}

.tc-medals {
    display: flex;
    gap: 6px;
}

.tc-medal {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.tc-medal:active { transform: scale(0.92); }

/* ---------- Avatar editor: poses and backgrounds locked by level ---------- */

.set-avatar-choice.is-locked > img,
.set-avatar-choice.is-locked > .buddy-art {
    filter: grayscale(1);
    opacity: 0.35;
}

.set-avatar-lock {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

/* ---------- Workout recap: streak bonus next to the XP ---------- */

.fin-xp-mult {
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.16);
    color: var(--fin-gold, #facc15);
    font-size: 0.72rem;
    font-weight: 900;
}

@media (prefers-reduced-motion: reduce) {
    .lvl-track span { animation: none; }
}

html[data-theme="dark"] .lvl-track,
html[data-theme="dark"] .wc-track { background: #2a2448; }

html[data-theme="dark"] .lvl-node.is-locked,
html[data-theme="dark"] .lvl-node.kind-title.is-locked,
html[data-theme="dark"] .lvl-node.kind-pose.is-locked,
html[data-theme="dark"] .medal:not(.is-unlocked) {
    --face: #2e2850;
    --slice: #221d3d;
    --ribbon: #3a3360;
}

html[data-theme="dark"] .lvl-node-ring circle { stroke: #2e2850; }
html[data-theme="dark"] .lvl-node-ring .lvl-node-ring-fill { stroke: var(--face); }
html[data-theme="dark"] .lvl-node-lock { background: #2e2850; }

html[data-theme="dark"] .lvl-bubble,
html[data-theme="dark"] .lvl-avatar {
    border-color: #2e2850;
    box-shadow: 0 3px 0 #221d3d;
}

/* =====================================================================
   Écran exercice : carte Coach Gryno+ et encart « Nouveau mouvement »
   ===================================================================== */
#screen-exercise .coach-plus {
    --plus-edge: #c9c4f7;
    position: relative;
    order: 1;
    padding: 16px;
    border-radius: 24px;
    border: 2px solid transparent;
    background:
        linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
        linear-gradient(120deg, #6366f1, #8b5cf6, #f59e0b, #8b5cf6, #6366f1) border-box;
    background-size: 100% 100%, 300% 100%;
    box-shadow: 0 4px 0 var(--plus-edge), 0 14px 30px rgba(99, 102, 241, 0.14);
    color: var(--text-primary);
    animation: coach-plus-in 0.45s var(--ease-out) both, coach-plus-edge 7s linear infinite;
}

#screen-exercise .coach-plus.is-updated {
    animation: coach-plus-bump 0.5s var(--ease-spring), coach-plus-edge 7s linear infinite;
}

.coach-plus-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.coach-plus-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--grad-primary);
    box-shadow: 0 3px 0 var(--primary-3d);
    color: #fff;
}

.coach-plus-avatar svg { width: 22px; height: 22px; }

/* The coach "scans": a ring leaves the avatar every 3 s. */
.coach-plus-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: coach-plus-ping 3s ease-out infinite;
}

.coach-plus-aim {
    transform-origin: 12px 12px;
    animation: coach-plus-aim 3s ease-in-out infinite;
}

.coach-plus-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.coach-plus-title b {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.coach-plus-title small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.coach-plus-pill {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24, var(--gold));
    box-shadow: 0 2px 0 var(--gold-3d);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.coach-plus-pill svg {
    width: 13px;
    height: 13px;
    animation: coach-plus-twinkle 2.6s ease-in-out infinite;
}

.coach-plus-goal {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.coach-plus-load { min-width: 0; }

.coach-plus-load-label {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.coach-plus-load-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.coach-plus-kg b {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 44px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.coach-plus-kg b.is-text { font-size: 28px; }

.coach-plus-kg small {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-muted);
}

.coach-plus-change {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--tint-primary);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.coach-plus-change svg { width: 13px; height: 13px; }
.coach-plus-change.is-up { background: var(--tint-success); color: #15803d; }
.coach-plus-change.is-up svg { animation: coach-plus-rise 1.6s ease-in-out infinite; }
.coach-plus-change.is-down { background: #fef3c7; color: #b45309; }

.coach-plus-subnote {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.coach-plus-reps {
    display: flex;
    gap: 6px;
    flex: none;
}

.coach-plus-rep {
    width: 34px;
    padding: 5px 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 11px;
    background: var(--tint-primary);
    animation: coach-plus-drop 0.4s var(--ease-spring) both;
    animation-delay: calc(0.25s + var(--i, 0) * 0.08s);
}

.coach-plus-rep.is-wide { width: auto; padding: 6px 12px; }

.coach-plus-rep b {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.05;
    color: var(--primary-dark);
}

.coach-plus-rep small {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-muted);
}

.coach-plus-rep.is-now { background: var(--grad-primary); box-shadow: 0 3px 0 var(--primary-3d); }
.coach-plus-rep.is-now b,
.coach-plus-rep.is-now small { color: #fff; }
.coach-plus-rep.is-done { background: var(--tint-success); }
.coach-plus-rep.is-done b { color: #15803d; }

.coach-plus-extras[hidden] { display: none; }

.coach-plus-extras {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
}

.coach-plus-extra {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.coach-plus-extra strong { margin-left: 4px; font-weight: 800; color: var(--text-primary); }

.coach-plus-advice {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-secondary);
}

.coach-plus-advice:empty { display: none; }

#screen-exercise .coach-plus-signals {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.coach-plus-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 800;
    color: #15803d;
}

.coach-plus-trend[hidden] { display: none; }
.coach-plus-trend svg { width: 15px; height: 15px; }
.coach-plus-trend.is-down { color: #b45309; }

#screen-exercise .coach-plus .coach-energy {
    flex: 0 1 auto;
    gap: 6px;
}

.coach-plus .coach-energy-bolt {
    width: 16px;
    height: 16px;
    flex: none;
    fill: var(--success);
    stroke: var(--success-3d);
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.coach-plus .coach-energy.is-mid .coach-energy-bolt { fill: var(--gold); stroke: var(--gold-3d); }
.coach-plus .coach-energy.is-low .coach-energy-bolt { fill: var(--danger); stroke: #b91c1c; }

#screen-exercise .coach-plus .coach-energy-segs {
    flex: none;
    display: flex;
    gap: 2px;
}

#screen-exercise .coach-plus .coach-energy-segs span {
    width: 6px;
    height: 12px;
    border-radius: 3px;
    background: #ededf7;
    box-shadow: none;
}

#screen-exercise .coach-plus .coach-energy-segs span.is-on {
    background: var(--success);
    box-shadow: none;
    animation: coach-plus-fill 0.25s ease-out both;
    animation-delay: calc(0.5s + var(--i, 0) * 0.05s);
}

#screen-exercise .coach-plus .coach-energy.is-mid .coach-energy-segs span.is-on { background: var(--gold); }
#screen-exercise .coach-plus .coach-energy.is-low .coach-energy-segs span.is-on { background: var(--danger); }

#screen-exercise .coach-plus .coach-energy-value {
    min-width: 0;
    font-size: 13px;
    color: var(--text-primary);
}

.coach-plus-icon-btn {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.coach-plus-icon-btn svg { width: 18px; height: 18px; }
.coach-plus-icon-btn:active { transform: scale(0.92); }
#btn-coach-fatigue-info,
#btn-coach-fatigue-info[style*="none"] + #btn-coach-toggle-drawer { margin-left: auto; }
#btn-coach-toggle-drawer[aria-expanded="true"] { background: var(--tint-primary); color: var(--primary); }

#screen-exercise .coach-plus .coach-plus-drawer {
    margin: 0;
    padding: 0;
    border: 0;
}

#screen-exercise .coach-plus .coach-plus-drawer.is-open {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

#screen-exercise .coach-plus .coaching-advice-drawer-body { margin: 0; }

@keyframes coach-plus-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes coach-plus-edge { to { background-position: 0 0, 300% 0; } }
@keyframes coach-plus-bump { 40% { transform: scale(1.02); } }
@keyframes coach-plus-ping {
    0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.45); }
    70%, 100% { box-shadow: 0 0 0 12px rgba(139, 92, 246, 0); }
}
@keyframes coach-plus-aim { 50% { transform: scale(0.75); } }
@keyframes coach-plus-twinkle { 50% { transform: scale(1.25) rotate(20deg); } }
@keyframes coach-plus-rise { 50% { transform: translateY(-2px); } }
@keyframes coach-plus-drop { from { opacity: 0; transform: translateY(-10px) scale(0.8); } }
@keyframes coach-plus-fill { from { opacity: 0; transform: scaleY(0.2); } }

/* ---------- Nouveau mouvement ---------- */
#screen-exercise .new-move {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 14px;
    padding: 10px 14px 10px 10px;
    border: 2px dashed var(--primary);
    border-radius: 20px;
    background: var(--card-bg);
    color: var(--primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#screen-exercise .new-move[hidden] { display: none; }
#screen-exercise .new-move:active { transform: scale(0.98); }

.new-move-thumb {
    width: 72px;
    height: 60px;
    flex: none;
    border-radius: 14px;
    object-fit: cover;
    background: #fff;
}

.new-move-thumb[hidden] { display: none; }

.new-move-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.new-move-copy strong { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.new-move-copy small { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.new-move > svg { width: 20px; height: 20px; margin-left: auto; flex: none; }

#screen-exercise .exercise-note-editor:first-child { margin-top: 0; }

html[data-theme="dark"] #screen-exercise .coach-plus {
    --plus-edge: #2e2860;
    box-shadow: 0 4px 0 var(--plus-edge), 0 14px 30px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .coach-plus-change.is-up,
html[data-theme="dark"] .coach-plus-trend,
html[data-theme="dark"] .coach-plus-rep.is-done b { color: #4ade80; }
html[data-theme="dark"] .coach-plus-change.is-down { background: #3a2e10; color: #fbbf24; }
html[data-theme="dark"] .coach-plus-trend.is-down { color: #fbbf24; }
html[data-theme="dark"] #screen-exercise .coach-plus .coach-energy-segs span:not(.is-on) { background: #2a2448; }

@media (prefers-reduced-motion: reduce) {
    #screen-exercise .coach-plus,
    #screen-exercise .coach-plus *,
    #screen-exercise .coach-plus *::after {
        animation: none !important;
    }
}

/* Réglages : liste déroulante native (langue) alignée sur .set-value */
.set-select {
    flex: none;
    max-width: 55%;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: right;
    text-align-last: right;
    -webkit-appearance: none;
    appearance: none;
    padding: 4px 18px 4px 4px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 7px center, right 2px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* ---------- Amis : mois de Gryno+ offert par ami inscrit ---------- */

.sf-gift {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
    row-gap: 10px;
    padding: 14px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--gold) 13%, var(--card-bg));
    box-shadow: 0 4px 0 color-mix(in srgb, var(--gold) 32%, var(--card-bg));
}

.sf-gift-art {
    grid-row: span 2;
    width: 56px;
    height: 56px;
}

.sf-gift-art .g-box { fill: var(--gold); }
.sf-gift-art .g-lid { fill: #fbbf24; stroke: var(--gold); stroke-width: 2; }
.sf-gift-art .g-ribbon { stroke: var(--primary); stroke-width: 6; }
.sf-gift-art .g-bow { fill: var(--violet); }

.sf-gift-text {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--text-primary);
}

.sf-gift-text small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-3d);
}

.sf-gift-btn {
    justify-self: start;
    width: auto;
    min-height: 0;
    padding: 10px 16px;
    font-size: 14px;
}

/* Rewards wait for an email account: one plain link under the card body. */
.sf-gift-account {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
html[data-theme="dark"] .sf-gift-account { color: var(--primary); }

/* Centred with left: 50%, the toast would shrink to half the screen. */
.achievement-toast {
    width: max-content;
    max-width: calc(100vw - 48px);
}

/* ---------- Mois de Gryno+ gagné grâce à un ami ---------- */
/* Same loot-box rhythm as the new-friend reveal, in gold. */

.plus-reward {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 46%, #4c2d0a 0%, #1e1240 55%, #0d0826 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.plus-reward.is-in { opacity: 1; }
.plus-reward.is-leaving { opacity: 0; }

.plus-reward-rays {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 220vmax;
    height: 220vmax;
    margin: -110vmax 0 0 -110vmax;
    background: repeating-conic-gradient(rgba(251, 191, 36, 0.13) 0deg 9deg, transparent 9deg 18deg);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.plus-reward.is-open .plus-reward-rays {
    opacity: 1;
    transform: scale(1);
    animation: buddyRaysSpin 22s linear infinite;
}

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

.plus-reward-friends {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: plusDrop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) 0.1s both;
}

.plus-reward-avatars {
    display: flex;
}

.plus-reward-avatars .sf-avatar {
    width: 84px;
    height: 84px;
    margin: 0;
    border-radius: 28px;
    border: 4px solid #fbbf24;
    box-shadow: 0 6px 0 #b45309;
}

.plus-reward-avatars .sf-avatar + .sf-avatar {
    margin-left: -18px;
}

.plus-reward-friends p {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.plus-reward-box {
    width: 150px;
    height: 150px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.3));
    animation: buddyBoxFloat 1.6s ease-in-out infinite;
}

.plus-reward-box .sf-gift-art {
    width: 100%;
    height: 100%;
}

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

.plus-reward.is-open .plus-reward-box {
    display: none;
}

/* The prize sits straight on the rays: a big gold number, no box. */
.plus-reward-prize {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 0 6px;
}

.plus-reward.is-open .plus-reward-prize {
    display: flex;
    animation: plusTicketPop 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.plus-reward-crown {
    display: grid;
    place-items: center;
    color: #fde68a;
    filter: drop-shadow(0 3px 0 #b45309);
}

.plus-reward-crown svg {
    fill: currentColor;
    stroke: none;
}

.plus-reward-count {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 112px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fbbf24;
    text-shadow: 0 4px 0 #d97706, 0 8px 0 #92400e, 0 14px 28px rgba(251, 191, 36, 0.45);
}

.plus-reward-unit {
    margin-top: 12px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}

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

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

@keyframes plusDrop {
    from { transform: translateY(-30px) scale(0.6); opacity: 0; }
}

@keyframes plusTicketPop {
    0% { transform: scale(0.2) rotate(-10deg); opacity: 0; }
    70% { transform: scale(1.06) rotate(2deg); opacity: 1; }
}

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

/* Note d'exercice : une ligne avec crayon, éditeur au clic */
#screen-exercise .exercise-notes {
    padding: 0;
}

#screen-exercise .exercise-note-view {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 16px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

#screen-exercise .exercise-note-view[hidden],
#screen-exercise .exercise-note-editor[hidden] {
    display: none;
}

#screen-exercise .exercise-note-view.is-empty {
    color: var(--text-secondary);
}

#screen-exercise .exercise-note-pencil {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--primary);
}

#screen-exercise .exercise-note-text {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#screen-exercise .exercise-note-editor {
    margin: 0;
    padding: 16px;
}

#screen-exercise .exercise-note-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

#screen-exercise .exercise-note-actions .btn {
    width: auto;
    min-width: 0;
    padding: 10px 18px;
}

/* « Pourquoi ce conseil » sans Gryno+ : une seule ligne qui ouvre l'offre */
#screen-exercise .coach-decision-card.is-locked .coach-decision-header {
    margin-bottom: 8px;
}

#screen-exercise .coach-decision-card.is-locked .coach-decision-grid {
    display: block;
}

#screen-exercise .coach-decision-unlock {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 0 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    text-align: left;
    cursor: pointer;
}

#screen-exercise .coach-decision-unlock svg {
    flex: none;
    width: 20px;
    height: 20px;
}

#screen-exercise .coach-decision-unlock span {
    flex: 1;
}

#screen-exercise .coach-decision-unlock-chevron {
    color: var(--text-muted);
}

/* Technique sheet: the animations have a white background baked in,
   so their frame stays white in dark mode. */
html[data-theme="dark"] .technique-media,
html[data-theme="dark"] .technique-result img {
    background: #fff;
}

/* =====================================================================
   Superset (A/B) et unilatéral (G/D) : même coach, mêmes séries,
   même historique que les exercices standard
   ===================================================================== */

/* ---------- Coach IA à deux lignes ---------- */
#screen-exercise .coach-plus-dual {
    margin-bottom: 16px;
}

#screen-exercise .coach-plus-dual.is-refresh:not(.is-updated) {
    animation: coach-plus-edge 7s linear infinite;
}

.coach-plus-dual.is-refresh .coach-plus-rep,
.coach-plus-dual.is-refresh .coach-energy-segs span.is-on {
    animation: none;
}

.coach-dual-row + .coach-dual-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.coach-dual-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
}

.coach-dual-name > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coach-dual-badge {
    width: 22px;
    height: 22px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--grad-side-left);
    box-shadow: 0 2px 0 var(--primary-3d);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.coach-dual-badge.is-b,
.coach-dual-badge.is-right {
    background: var(--grad-side-right);
    box-shadow: 0 2px 0 var(--purple-dark);
}

.coach-plus-dual .coach-plus-goal { align-items: center; }
.coach-plus-dual .coach-plus-load-row {
    flex-direction: column;
    align-items: flex-start;
}
.coach-plus-dual .coach-plus-change { align-self: flex-start; }
.coach-plus-dual .coach-plus-kg b { font-size: 34px; }
.coach-plus-dual .coach-plus-kg b.is-text { font-size: 24px; }

.coach-plus-dual .coach-dual-rule {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.coach-plus-dual .coach-dual-rule + .coach-dual-rule { margin-top: 6px; }
.coach-plus-dual .coach-dual-rule .coach-dual-badge { margin-top: -1px; }
.coach-plus-dual .coach-dual-info { margin-left: auto; }

/* ---------- Historique : un seul bloc, bascule A/B ou G/D ---------- */
.logbook-switch {
    margin-bottom: 14px;
}

.logbook-switch .segmented-btn {
    min-width: 0;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
}

.logbook-switch-badge {
    width: 20px;
    height: 20px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--grad-side-left);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.logbook-switch-badge.is-b,
.logbook-switch-badge.is-right { background: var(--grad-side-right); }

.logbook-switch-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Séries superset : deux blocs séparés par un filet ---------- */
#series-list .superset-series-card-new .superset-series-header {
    margin-bottom: 12px;
}

#series-list .superset-input-block,
#series-list .superset-input-block.block-a,
#series-list .superset-input-block.block-b {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

#series-list .superset-input-block + .superset-input-block {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
}

#series-list .superset-input-header {
    gap: 8px;
    margin-bottom: 8px;
}

#series-list .superset-input-badge {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 2px 0 var(--primary-3d);
}

#series-list .superset-input-badge.badge-b { box-shadow: 0 2px 0 var(--purple-dark); }

#series-list .superset-input-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
}

#series-list .superset-input-block .series-inputs { margin-bottom: 0; }
#series-list .superset-input-block .series-coach-inline { margin: 10px 0 0; }
#series-list .superset-input-block .series-challenge-inline { margin: 0 0 10px; }

#series-list .btn-superset-validate,
#series-list .btn-save-edit-superset {
    margin-top: 14px;
}

/* Série validée : deux lignes à plat */
#series-list .superset-completed-results {
    gap: 0;
    margin-top: 10px;
}

#series-list .superset-completed-exercise,
#series-list .superset-completed-exercise.exercise-a,
#series-list .superset-completed-exercise.exercise-b {
    flex-wrap: wrap;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: none;
}

#series-list .superset-completed-exercise + .superset-completed-exercise {
    border-top: 1px solid rgba(34, 197, 94, 0.18);
}

#series-list .superset-completed-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Séries unilatérales ---------- */
#series-list .uni-side + .uni-side {
    border-top: 1px solid var(--border-light);
}

#series-list .uni-side.is-next::before { content: none; }

#series-list .uni-side .unilateral-input-group label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary);
}

/* Série validée (superset / unilatéral) : en-tête du standard */
.superset-series-card-new.completed .series-done-main .series-number,
.unilateral-series-card.completed .series-done-main .series-number {
    color: #15803d;
}

.superset-series-card-new.just-completed .series-done-badge,
.unilateral-series-card.just-completed .series-done-badge {
    animation: checkPop 0.5s var(--ease-spring) both;
}

html[data-theme="dark"] .superset-series-card-new.completed .series-done-main .series-number,
html[data-theme="dark"] .unilateral-series-card.completed .series-done-main .series-number {
    color: #4ade80;
}

#series-list .uni-coach-inline {
    margin: 0 0 10px 44px;
}

#series-list .uni-side .suggested-label {
    text-transform: uppercase;
}

#series-list .uni-side .unilateral-input-group.is-coach input {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.05);
}

#series-list .uni-side .unilateral-input-group.is-coach .suggested-label {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}


/* ===== Bibliothèque d'exercices ===== */

#sheet-exercise-library .sheet-content {
    display: flex;
    flex-direction: column;
    height: min(88dvh, 760px);
    max-height: none;
    overflow: hidden;
}

#sheet-exercise-library .sheet-titlebar {
    flex: none;
    margin-bottom: 12px;
}

.exlib-search {
    position: relative;
    display: flex;
    align-items: center;
}

.exlib-search > svg {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

.exlib-search .form-input {
    width: 100%;
    height: 48px;
    padding: 0 44px 0 44px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
}

.exlib-clear {
    position: absolute;
    right: 8px;
    display: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
}

.exlib-search.has-value .exlib-clear {
    display: grid;
}

#sheet-exercise-library .exercise-library-toolbar {
    flex: none;
    margin-bottom: 10px;
}

#sheet-exercise-library .exercise-library-filters {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
    padding: 0;
    margin: 0 -20px 6px;
}

.exlib-chips {
    display: flex;
    gap: 8px;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.exlib-chips::-webkit-scrollbar { display: none; }

.exlib-chips .exercise-library-filter {
    padding: 8px 14px;
    border: 2px solid var(--border-light);
    font-weight: 700;
}

.exlib-chips .exercise-library-filter.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.exlib-chips.is-equipment .exercise-library-filter {
    padding: 6px 12px;
    font-size: 12px;
}

.exlib-chips.is-equipment .exercise-library-filter.active {
    background: var(--tint-primary-strong);
    border-color: transparent;
    color: var(--primary);
}

#sheet-exercise-library .exercise-library-list {
    flex: 1;
    min-height: 0;
    gap: 0;
    margin: 0 -20px;
    padding: 0 20px calc(var(--safe-bottom) + 8px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.exlib-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 16px 0 4px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.exlib-head span {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 900;
    color: var(--text-muted);
}

#sheet-exercise-library .exercise-library-item {
    gap: 12px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

#sheet-exercise-library .exercise-library-item:active .exlib-add {
    transform: scale(0.9);
}

.exlib-thumb {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 16px;
    background: color-mix(in srgb, var(--muscle) 14%, var(--card-bg));
    color: var(--muscle);
}

.exlib-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
}

.exlib-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.exlib-name {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.exlib-meta {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exlib-add {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tint-primary-strong);
    color: var(--primary);
    transition: transform 0.12s ease;
}

.exercise-library-item.is-custom .exlib-thumb {
    background: var(--tint-primary);
    color: var(--primary);
}

.exlib-more {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border: 2px dashed var(--border);
    border-radius: 16px;
    background: none;
    color: var(--primary);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.exlib-loading {
    padding: 18px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
}

#sheet-exercise-library .exercise-library-empty {
    margin-top: 16px;
    border: 2px dashed var(--border);
    background: none;
}

#sheet-exercise-library .exercise-library-empty .btn {
    margin-top: 12px;
}

#sheet-exercise-library .sheet-close {
    position: absolute;
    top: 14px;
    right: 16px;
    float: none;
    margin: 0;
}

#sheet-exercise-library .sheet-back-button {
    visibility: hidden;
}

/* =====================================================================
   Gryno+ — offer sheet, locked entries, programs, trends, profile
   See premium.js. Gold is kept for the crown only.
   ===================================================================== */

:root {
    --plus-gold: #b45309;
    --plus-gold-tint: #fef3c7;
}

html[data-theme="dark"] {
    --plus-gold: #fbbf24;
    --plus-gold-tint: rgba(251, 191, 36, 0.16);
}

/* Crown chip next to a Gryno+ entry. */
.plus-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    vertical-align: middle;
    color: var(--plus-gold);
    background: var(--plus-gold-tint);
    white-space: nowrap;
}

.plus-chip svg {
    flex: none;
}

/* ---------- Exercise screen: locked coach ---------- */

.coach-locked-line {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 2px dashed var(--border);
    border-radius: 20px;
    background: var(--card-bg);
    font: inherit;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
}

.coach-locked-line[hidden] {
    display: none;
}

.coach-locked-line:active {
    transform: scale(0.99);
}

.coach-locked-icon {
    display: inline-flex;
    color: var(--text-muted);
}

.coach-locked-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------- Mes séances: profile session, rebuild, saved programs ---------- */

.se-template-profile .se-template-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.se-template-profile.is-locked .se-template-hint,
.se-template-profile.is-locked .se-template-meta {
    color: var(--text-muted);
}

.se-rebuild {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--card-bg);
    color: var(--primary-dark);
    border: 2px solid var(--border);
    box-shadow: 0 var(--btn-depth-sm, 3px) 0 var(--border);
}

.se-rebuild > span:not(.plus-chip) {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    text-align: left;
    white-space: nowrap;
}

.se-rebuild:active {
    transform: translateY(var(--btn-depth-sm, 3px));
    box-shadow: 0 0 0 var(--border);
}

.se-saved-list {
    display: flex;
    flex-direction: column;
}

.se-saved-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 0;
    border: 0;
    border-top: 1px solid var(--border-light);
    background: none;
    font: inherit;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
}

.se-saved-row:first-child {
    border-top: 0;
}

.se-saved-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

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

/* ---------- Stats: Évolution ---------- */

.trend-card .pz-card-head {
    align-items: center;
}

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

.trend-periods button {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 6px 9px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

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

.trend-periods button.is-locked {
    color: var(--text-muted);
}

.trend-hero {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 10px;
}

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

.trend-delta {
    font-size: 14px;
    font-weight: 800;
}

.trend-delta.is-up {
    color: var(--success);
}

.trend-delta.is-down {
    color: var(--gold-3d);
}

.trend-sub {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.trend-bars {
    display: flex;
    align-items: stretch;
    gap: 6px;
    height: 120px;
    margin-top: 14px;
}

.trend-bar {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.trend-bar i {
    width: 100%;
    max-width: 28px;
    border-radius: 6px 6px 3px 3px;
    background: var(--violet);
    opacity: 0.35;
    transition: height 0.4s var(--ease-out);
}

.trend-bar.is-now i {
    background: var(--grad-primary);
    opacity: 1;
}

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

/* ---------- Streak: free buy-back with Gryno+ ---------- */

.streak-plus-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 10px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    color: var(--plus-gold);
    cursor: pointer;
}

/* ---------- Friends: crown and Gryno+ poses ---------- */

.sf-plus {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    vertical-align: 1px;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    background: var(--gold);
    box-shadow: 0 2px 0 var(--gold-3d);
}

.set-avatar-choice.is-plus {
    position: relative;
}

.set-avatar-plus {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--plus-gold);
    background: var(--plus-gold-tint);
}

.set-avatar-choice.is-plus.is-locked img {
    opacity: 0.55;
}

/* ---------- Réglages: app icon ---------- */

.set-row-icons {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.set-app-icons {
    display: flex;
    gap: 14px;
    padding: 0 0 4px 2px;
}

.set-app-icon {
    position: relative;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: none;
    cursor: pointer;
}

.set-app-icon img {
    width: 100%;
    height: 100%;
    border-radius: 13px;
    object-fit: cover;
}

.set-app-icon.active {
    box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--primary);
}

.set-app-icon-plus {
    position: absolute;
    right: -5px;
    bottom: -5px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--card-bg);
    color: var(--plus-gold);
    background: var(--card-bg);
}

.cc-mode .plus-lock,
.trend-periods .plus-lock {
    flex: none;
    margin-right: 3px;
    vertical-align: -2px;
}
/* Legal links use the existing flat settings rows. */
a.set-row { text-decoration: none; }
#modal-app-dialog:has(#app-dialog-icon[style*="none"]) .modal-content { text-align: left; }

/* ---------- Exercise screen: locked coach, Coach AI line ---------- */

.coach-locked-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.coach-locked-text strong,
.coach-locked-text small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.coach-locked-text small {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
}

/* ---------- Coach AI: weekly program review ---------- */

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

.cr-content h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.cr-tag {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    vertical-align: middle;
    color: var(--primary-dark);
    background: var(--tint-primary-strong, var(--tint-primary));
}

.cr-prompt,
.cr-loading,
.cr-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 6px;
    text-align: center;
}

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

/* Static rays keep the checklist readable in light and dark themes. */
.cr-mascot-art,
.account-nudge .friends-nudge-art {
    isolation: isolate;
}

.cr-mascot-art {
    position: relative;
    display: grid;
    place-items: center;
    width: 184px;
    height: 168px;
}

.cr-mascot-art::before,
.account-nudge .friends-nudge-art::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 8px;
    border-radius: 50%;
    background: repeating-conic-gradient(var(--tint-primary-strong) 0deg 10deg, transparent 10deg 30deg);
    -webkit-mask-image: radial-gradient(circle, #000 22%, transparent 69%);
    mask-image: radial-gradient(circle, #000 22%, transparent 69%);
}

.cr-rhino {
    width: 184px;
    height: 168px;
    object-fit: contain;
}

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

.cr-cta .plus-chip {
    background: #fff;
}

.cr-later {
    padding: 4px 12px 2px;
}

/* Loading ring */

.cr-ring {
    position: relative;
    width: 148px;
    height: 148px;
    margin: 8px 0 6px;
}

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

.cr-ring circle {
    fill: none;
    stroke-width: 12;
}

.cr-ring-rail {
    stroke: var(--bg-tertiary);
}

.cr-ring-fill {
    stroke: var(--primary);
    stroke-linecap: round;
}

.cr-ring-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 40px;
    font-weight: 900;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.cr-ring-value::after {
    content: "%";
    margin: -12px 0 0 2px;
    font-size: 16px;
    color: var(--text-muted);
}

.cr-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 260px;
    margin: 6px 0 4px;
    padding: 0;
    list-style: none;
    text-align: left;
}

.cr-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.cr-step-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: transparent;
    background: var(--bg-tertiary);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cr-steps li.is-active {
    color: var(--text-primary);
}

.cr-steps li.is-active .cr-step-mark {
    background: var(--tint-primary-strong, var(--tint-primary));
    animation: cr-pulse 0.9s ease-in-out infinite;
}

.cr-steps li.is-done {
    color: var(--text-primary);
}

.cr-steps li.is-done .cr-step-mark {
    color: #fff;
    background: var(--success);
    animation: none;
}

@keyframes cr-pulse {
    50% { transform: scale(0.82); }
}

/* Results */

.cr-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 40px;
}

.cr-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.cr-summary strong {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 44px;
    font-weight: 900;
    line-height: 1;
    color: var(--primary);
}

.cr-summary span {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
}

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

.cr-dots {
    display: flex;
    gap: 6px;
}

.cr-dot {
    flex: 1;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: background 0.2s ease;
}

.cr-dot.is-active,
.cr-dot.is-done {
    background: var(--accent);
}

.cr-dot.is-done {
    opacity: 0.45;
}

.cr-session h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.cr-session h4 .pz-chip {
    margin-left: auto;
}

.cr-session-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
}

.cr-changes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cr-change {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--border-light);
    transition: opacity 0.2s ease;
}

.cr-change:first-child {
    border-top: 0;
}

.cr-change-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: var(--primary);
    background: var(--tint-primary);
}

.cr-change.is-swap .cr-change-icon {
    color: var(--plus-gold);
    background: var(--plus-gold-tint);
}

.cr-change-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cr-change-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cr-change-name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text-primary);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cr-head h3 {
    text-align: left;
}

.cr-change-top .spark {
    flex: none;
}

.cr-change-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

.cr-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 15px;
    font-weight: 800;
}

.cr-values svg {
    flex: none;
    color: var(--text-muted);
}

.cr-from {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.cr-to {
    color: var(--primary-dark);
}

.cr-reason {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-muted);
}

.cr-change.is-refused .cr-change-body,
.cr-change.is-refused .cr-change-icon {
    opacity: 0.4;
}

.cr-change.is-refused .cr-to {
    text-decoration: line-through;
}

.cr-choice {
    flex: none;
    display: flex;
    gap: 6px;
    align-self: center;
}

.cr-choice button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 2px solid var(--border-light);
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-muted);
    box-shadow: 0 3px 0 var(--border-light);
    cursor: pointer;
    transition: transform 0.08s ease;
}

.cr-choice button:active {
    transform: translateY(3px);
    box-shadow: none;
}

.cr-choice-yes.is-on {
    border-color: transparent;
    color: #fff;
    background: var(--grad-success);
    box-shadow: 0 3px 0 var(--success-3d);
}

.cr-choice-no.is-on {
    border-color: transparent;
    color: #fff;
    background: var(--text-muted);
    box-shadow: 0 3px 0 var(--text-secondary);
}

.cr-untouched {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

.cr-untouched svg {
    flex: none;
    color: var(--success);
}

.cr-footer {
    position: sticky;
    bottom: calc(-20px - var(--safe-bottom, 0px));
    margin: 0 -20px calc(-20px - var(--safe-bottom, 0px));
    padding: 12px 20px calc(20px + var(--safe-bottom, 0px));
    background: var(--card-bg);
}

.cr-footer .btn {
    width: 100%;
}

/* Free: values blurred, Muscu+ offer below */

.cr-change.is-locked .cr-values {
    filter: blur(5px);
    user-select: none;
}

.cr-change.is-locked .cr-change-top .spark {
    opacity: 0.5;
}

.cr-unlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--border-light);
}

.cr-unlock p {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    color: var(--plus-gold);
}

.cr-unlock-icon {
    display: inline-flex;
}

/* Done */

.cr-done-mark {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 8px 0 4px;
    border-radius: 50%;
    color: #fff;
    background: var(--grad-success);
    box-shadow: 0 5px 0 var(--success-3d);
    animation: cr-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cr-pop {
    from { transform: scale(0.5); opacity: 0; }
}

.cr-content > .sheet-close {
    flex: none;
    align-self: flex-end;
    margin: -4px -6px -50px 0;
}

/* App dialogs (confirm, alert) stay on top of the onboarding and popups. */
#modal-app-dialog.active {
    z-index: 3000;
}

/* ---------- Rest screen ---------- */

/* Faces: one tone per step, drawn in SVG. */
[data-rpe="6"] { --face: #22c55e; --face-rgb: 34, 197, 94; }
[data-rpe="7"] { --face: #818cf8; --face-rgb: 129, 140, 248; }
[data-rpe="8"] { --face: #f59e0b; --face-rgb: 245, 158, 11; }
[data-rpe="9"] { --face: #f97316; --face-rgb: 249, 115, 22; }
[data-rpe="10"] { --face: #f43f5e; --face-rgb: 244, 63, 94; }

#timer-overlay .rpe-question {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(237, 233, 254, 0.85);
}

#timer-overlay .rpe-chip {
    min-height: 62px;
    padding: 8px 2px 7px;
    gap: 5px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 3px 0 rgba(10, 6, 30, 0.45);
    transition: transform 0.15s var(--ease-out), background 0.2s ease, border-color 0.2s ease, box-shadow 0.15s ease;
}

#timer-overlay .rpe-chip:active {
    transform: translateY(3px);
    box-shadow: none;
}

#timer-overlay .rpe-chip-icon {
    display: inline-flex;
    width: 26px;
    height: 26px;
    color: rgba(221, 214, 254, 0.7);
}

#timer-overlay .rpe-chip-icon svg {
    stroke-width: 2;
}

#timer-overlay .rpe-chip.active {
    background: rgba(var(--face-rgb), 0.16);
    border-color: rgba(var(--face-rgb), 0.75);
    box-shadow: 0 3px 0 rgba(var(--face-rgb), 0.45);
}

#timer-overlay .rpe-chip.active .rpe-chip-icon {
    color: var(--face);
    animation: facePop 0.4s var(--ease-spring);
}

@keyframes facePop {
    0% { transform: scale(0.7) rotate(-8deg); }
    60% { transform: scale(1.18) rotate(4deg); }
    100% { transform: none; }
}

#timer-overlay .rpe-hint {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    color: rgba(221, 214, 254, 0.55);
}

/* Next set: exercise on one line, the target as one big number. No box. */

#timer-overlay .timer-context-card {
    padding: 0;
    gap: 2px;
    align-items: center;
    text-align: center;
    background: none;
    border: none;
    box-shadow: none;
}

#timer-overlay .timer-context-header {
    justify-content: center;
    gap: 6px;
    max-width: 100%;
}

#timer-overlay .timer-context-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

#timer-overlay .timer-context-progress {
    flex: none;
    padding: 0;
    background: none;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(221, 214, 254, 0.55);
}

#timer-overlay .timer-context-progress::before {
    content: '· ';
}

#timer-overlay .timer-context-metrics {
    display: block;
    margin: 0;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.15;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

#timer-overlay .timer-context-note:not(:empty):not([hidden]) {
    display: block;
    margin: 2px 0 0;
    text-align: center;
    font-size: 12px;
    color: rgba(221, 214, 254, 0.6);
}

/* Validated set: plain case, XP that counts up and pops. */

#timer-overlay .timer-done-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.timer-done-xp {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
    transform-origin: center;
    animation: xpPillIn 0.45s var(--ease-spring) 0.25s both;
}

.timer-done-xp-icon:empty {
    display: none;
}

.timer-done-xp-icon {
    display: inline-flex;
}

.timer-done-xp.is-popping {
    animation: xpPillPop 0.45s var(--ease-spring);
}

@keyframes xpPillIn {
    from { opacity: 0; transform: scale(0.4) rotate(-6deg); }
    to { opacity: 1; transform: none; }
}

@keyframes xpPillPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.28) rotate(-3deg); }
    100% { transform: scale(1); }
}

/* ---------- Validated set rows ---------- */

.series-done-chip.is-face {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-primary);
}

.series-done-chip.is-face svg {
    flex: none;
    color: var(--face);
}

.series-done-chip.is-flag {
    color: #be185d;
    background: #fce7f3;
    border-color: #fbcfe8;
}

.btn-set-note {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1.5px solid #e4e4f7;
    background: var(--card-bg);
    color: var(--primary-dark);
    box-shadow: 0 2px 0 #e4e4f7;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.btn-set-note:active {
    transform: translateY(2px);
    box-shadow: none;
}

.btn-set-note.is-noted {
    padding: 0 9px;
}

.btn-set-note-side {
    font-weight: 800;
    color: var(--text-muted);
}

.btn-set-note-face {
    display: inline-flex;
    color: var(--face);
}

.btn-set-note-flag {
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: #ec4899;
}

html[data-theme="dark"] .btn-set-note {
    border-color: #2a2448;
    box-shadow: 0 2px 0 #2a2448;
}

html[data-theme="dark"] .series-done-chip.is-flag {
    color: #f9a8d4;
    background: rgba(236, 72, 153, 0.16);
    border-color: transparent;
}

/* ---------- Set note sheet ---------- */

.set-note-sheet .sheet-content {
    padding-bottom: calc(var(--safe-bottom, 0px) + 20px);
}

.set-note-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.set-note-result {
    margin: 2px 0 16px;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-secondary);
}

.set-note-faces {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
}

.set-note-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 10px 2px 8px;
    border-radius: 16px;
    border: 2px solid var(--border);
    background: var(--card-bg);
    box-shadow: 0 3px 0 var(--border);
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
    transition: transform 0.15s var(--ease-out), box-shadow 0.15s ease, border-color 0.2s ease, background 0.2s ease;
}

.set-note-face svg {
    color: var(--face);
}

.set-note-face span {
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--text-secondary);
}

.set-note-face:active {
    transform: translateY(3px);
    box-shadow: none;
}

.set-note-face[aria-pressed="true"] {
    color: var(--face);
    border-color: rgba(var(--face-rgb), 0.7);
    background: rgba(var(--face-rgb), 0.1);
    box-shadow: 0 3px 0 rgba(var(--face-rgb), 0.45);
}

.set-note-face[aria-pressed="true"] svg {
    animation: facePop 0.4s var(--ease-spring);
}

.set-note-face[aria-pressed="true"] span {
    color: var(--text-primary);
}

.set-note-flags {
    display: flex;
    flex-direction: column;
}

.set-note-flag {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 0;
    border: none;
    border-bottom: 1px solid var(--border-light);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.set-note-flag:last-child {
    border-bottom: none;
}

.set-note-flag-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.set-note-flag-text strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.set-note-flag-text small {
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--text-muted);
}

.set-note-check {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    border: 2px solid var(--border);
    color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-spring);
}

.set-note-flag[aria-pressed="true"] .set-note-check {
    border-color: transparent;
    background: var(--grad-primary);
    box-shadow: 0 2px 0 var(--primary-3d);
    color: #fff;
    transform: scale(1.06);
}

/* ---------- Exercise summary: stats without boxes ---------- */

#exercise-summary .summary-stats {
    gap: 0;
    margin-bottom: 18px;
}

#exercise-summary .stat {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    padding: 2px 12px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

#exercise-summary .stat + .stat {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

#exercise-summary .stat-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.6);
}

#exercise-summary .stat-value {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 34px;
    line-height: 1.1;
}

/* ---------- Deload modal ---------- */

.modal-deload {
    padding: 28px 22px 22px;
    border-radius: 24px;
    border: 2px solid var(--border-light);
    box-shadow: 0 4px 0 var(--border), 0 24px 60px rgba(30, 27, 75, 0.25);
}

.modal-deload .deload-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    border-radius: 50%;
    font-size: 0;
    color: #fff;
    background: var(--grad-success);
    box-shadow: 0 5px 0 var(--success-3d);
    animation: achCoinIn 0.55s var(--ease-spring) both;
}

.modal-deload .deload-icon-cell {
    stroke-width: 3.4;
}

.modal-deload h3 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.modal-deload .deload-reason {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.modal-deload .deload-changes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0 0 22px;
}

.modal-deload .deload-change {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    background: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.modal-deload .deload-change + .deload-change {
    border-left: 1px solid var(--border);
}

.modal-deload .deload-change strong {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--text-primary);
}

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

.modal-deload .modal-actions .btn {
    min-width: 0;
    white-space: nowrap;
}

/* ---------- Achievement popup ---------- */

.achievement-toast {
    width: min(320px, calc(100vw - 48px));
    padding: 26px 22px 22px;
    border-radius: 24px;
    background: var(--card-bg);
    border: 2px solid var(--border-light);
    box-shadow: 0 4px 0 var(--border), 0 24px 60px rgba(30, 27, 75, 0.28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translate(-50%, -50%) scale(0.82);
    transition: opacity 0.25s ease, transform 0.45s var(--ease-spring);
}

.achievement-toast.visible {
    transform: translate(-50%, -50%) scale(1);
}

.achievement-toast.is-leaving {
    transform: translate(-50%, -46%) scale(0.96);
    transition: opacity 0.25s ease, transform 0.3s var(--ease-out);
}

.achievement-toast-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 0;
    animation: none;
}

.ach-coin {
    position: relative;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    color: #fff;
    animation: achCoinIn 0.6s var(--ease-spring) 0.1s both;
}

.ach-coin.tone-gold { background: linear-gradient(180deg, #fcd34d, var(--gold)); box-shadow: 0 5px 0 var(--gold-3d); }
.ach-coin.tone-success { background: var(--grad-success); box-shadow: 0 5px 0 var(--success-3d); }
.ach-coin.tone-primary { background: var(--grad-primary); box-shadow: 0 5px 0 var(--primary-3d); }

.ach-coin::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 3px solid currentColor;
    opacity: 0;
    animation: achRing 0.9s var(--ease-out) 0.35s;
}

.ach-coin.tone-gold::after { color: var(--gold); }
.ach-coin.tone-success::after { color: var(--success); }
.ach-coin.tone-primary::after { color: var(--violet); }

.achievement-toast-icon .ach-coin > svg {
    width: 38px;
    height: 38px;
    color: #fff;
}

@keyframes achCoinIn {
    0% { opacity: 0; transform: scale(0.3) rotate(-25deg); }
    60% { opacity: 1; transform: scale(1.12) rotate(6deg); }
    100% { opacity: 1; transform: none; }
}

@keyframes achRing {
    0% { opacity: 0.7; transform: scale(0.85); }
    100% { opacity: 0; transform: scale(1.35); }
}

.achievement-toast-title {
    margin-bottom: 4px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-wrap: balance;
}

.achievement-toast-message {
    font-size: 14px;
    line-height: 1.4;
}

.achievement-toast-xp {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    margin-top: 16px;
    padding: 8px 16px;
    border-radius: 999px;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: #78350f;
    background: linear-gradient(180deg, #fde68a, var(--gold));
    box-shadow: 0 3px 0 var(--gold-3d);
    animation: xpPillIn 0.45s var(--ease-spring) 0.3s both;
}

.achievement-toast-xp.is-popping {
    animation: xpPillPop 0.45s var(--ease-spring);
}

/* Identify the user's own profile before they add friends. */
.sf-setup-description,
.sf-setup-hint {
    margin: 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.5;
}

.sf-setup-form {
    gap: 16px;
}

.sf-setup-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sf-setup-field .sf-label {
    color: var(--text-primary);
    font-size: 14px;
}

.sf-setup-hint {
    margin-top: -8px;
    font-size: 13px;
}

.sf-handle-input {
    position: relative;
    display: flex;
    align-items: center;
}

.sf-handle-input > span {
    position: absolute;
    left: 16px;
    color: var(--text-secondary);
    font-size: 17px;
    font-weight: 700;
    pointer-events: none;
}

.sf-handle-input .sf-input {
    padding-left: 40px;
}

html[data-theme="dark"] .achievement-toast,
html[data-theme="dark"] .modal-deload {
    border-color: #2a2448;
    box-shadow: 0 4px 0 #2a2448, 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* =====================================================================
   Ensemble (ensemble.js): tab, invites, goal, invite link preview
   ===================================================================== */

.together-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-success {
    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);
}

.btn-success:active {
    transform: translateY(var(--btn-depth));
    box-shadow: 0 0 0 var(--success-3d);
}

/* Home: second action of the session card, and an invitation received */

.week-invite {
    width: 100%;
    min-height: 46px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 0;
    border-radius: 16px;
    background: var(--tint-primary);
    color: var(--primary-dark);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.week-invite[hidden] { display: none; }

.week-invite span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.week-invite .sf-avatar.is-xs { width: 24px; height: 24px; }

.week-invite.is-pending { color: var(--text-secondary); background: var(--bg-tertiary); }

.week-invite:active { transform: scale(0.98); }

.home-invite {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

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

.home-invite-text strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}

.home-invite-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.home-invite-more {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--primary);
    cursor: pointer;
}

/* Rows of the Ensemble cards and sheets: full width, separated by a line */

.tg-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tg-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

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

.tg-row.is-tappable { cursor: pointer; }

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

.tg-row-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}

.tg-row-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.tg-row-icon {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--tint-primary);
    color: var(--primary);
}

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

.tg-row .sf-btn-ghost { padding: 0 6px; }

.tg-row .sf-btn-join { padding: 0 12px; }

.tg-tag {
    margin-left: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-weight: 800;
    vertical-align: 2px;
}

.tg-pill {
    flex: none;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: var(--grad-primary);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 3px 0 var(--primary-3d);
    cursor: pointer;
}

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

.tg-pill.is-done,
.tg-pill:disabled.is-done {
    background: var(--tint-success);
    color: #15803d;
    box-shadow: none;
    opacity: 1;
}

.tg-pill:disabled { opacity: 0.6; }

/* Session to do together */

.tg-duo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 4px;
}

.tg-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.tg-actions > .btn { flex: 1; min-height: 48px; font-weight: 800; }

.tg-main {
    width: 100%;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tg-cancel {
    display: flex;
    margin: 8px auto 0;
    color: var(--text-muted);
}

/* Empty states: dashed, one sentence, one action */

.is-dashed {
    background: transparent;
    border: 2.5px dashed color-mix(in srgb, var(--primary) 38%, transparent);
    box-shadow: none;
}

.together-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 20px 20px;
}

.together-empty h4 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.together-empty p,
.together-goal-empty p {
    max-width: 290px;
    margin: 6px 0 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-secondary);
}

.together-empty > p:only-child { margin: 0; }

.together-empty .fb-link { margin-top: 8px; }

.together-goal-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.together-goal-empty h4 {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.together-goal-empty p { margin-bottom: 12px; }

.together-goal-empty .btn { min-height: 44px; font-weight: 800; }

.together-offline {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
}

.together-board .fb-row.is-tappable { cursor: pointer; }

/* Shared weekly goal: one number, one bar split by member */

.tg-goal-count {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

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

.tg-goal-count span {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-muted);
}

.tg-goal-bar {
    display: flex;
    gap: 3px;
    height: 12px;
    margin: 12px 0 14px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.tg-goal-bar span {
    height: 100%;
    background: var(--seg, var(--primary));
    transition: width 0.5s var(--ease-spring, ease);
}


.tg-goal-members {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tg-goal-members li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

.tg-goal-members strong {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-weight: 900;
    color: var(--text-primary);
}

.tg-goal-edit { margin-top: 10px; padding-left: 0; }

/* Sheets */

.tg-sheet {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tg-sheet .tg-main { margin-top: 0; }

.tg-sheet-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tg-sheet-title h3 {
    margin: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px;
    font-weight: 900;
}

.tg-sheet-title small {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.tg-sheet-note {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.tg-sheet-h4 {
    margin: 4px 0 -6px;
    font-size: 16px;
    font-weight: 800;
}

.tg-sheet-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tg-sheet-actions .tg-cancel { margin-top: 0; }

.tg-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 0;
}

.tg-profile h3 {
    margin: 4px 0 0;
    font-size: 22px;
    font-weight: 900;
}

.tg-profile small {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

.tg-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}

.tg-stats div + div { border-left: 1px solid var(--border-light); }

.tg-stats strong {
    display: block;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--text-primary);
}

.tg-stats span {
    display: block;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-muted);
}

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

.tg-exercises {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.tg-exercises li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.tg-exercises li + li { border-top: 1px solid var(--border-light); }

.tg-exercises small {
    flex: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.tg-goal-pick { margin: 0 -4px; }

.tg-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 0;
}

.tg-stepper .sf-icon-btn { width: 48px; height: 48px; border-radius: 16px; }

.tg-stepper-value {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

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

.tg-stepper-value span {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

/* Session screen: invite without leaving the session */

.duo-invite {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    margin: 0 0 12px;
    border: 2px dashed color-mix(in srgb, var(--primary) 38%, transparent);
    border-radius: 16px;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.duo-strip-wait {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--tint-primary);
    color: var(--primary);
}

.duo-strip-action {
    flex: none;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: var(--tint-primary);
    color: var(--primary-dark);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

/* End of a session done together: invite the same partner again */

.duo-again { margin-top: 14px; }

.duo-again-btn {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 16px;
    background: var(--grad-primary);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 3px 0 var(--primary-3d);
    cursor: pointer;
}

.duo-again-btn:disabled {
    background: rgba(74, 222, 128, 0.16);
    color: #4ade80;
    box-shadow: none;
}

/* Invite link preview: before any account, full screen */

.join-screen {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    overflow-y: auto;
    background: var(--bg-secondary);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.join-screen.is-open { opacity: 1; }

.join-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    min-height: 100%;
    margin: 0 auto;
    padding: calc(var(--safe-top, 0px) + 56px) 20px calc(var(--safe-bottom, 0px) + 24px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translateY(12px);
    transition: transform 0.3s var(--ease-spring, ease);
}

.join-screen.is-open .join-card { transform: none; }

.join-close {
    position: absolute;
    top: calc(var(--safe-top, 0px) + 12px);
    right: 16px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 14px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
}

.join-host .sf-avatar.is-lg {
    width: 96px;
    height: 96px;
    border-radius: 32px;
}

.join-card h2 {
    margin: 8px 0 4px;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.join-session {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
}

.join-session strong { color: var(--text-primary); font-weight: 800; }

.join-highlight {
    width: 100%;
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 20px;
    background: #fef3c7;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.join-highlight em {
    font-style: normal;
    font-size: 15px;
    font-weight: 800;
    color: #92400e;
}

.join-highlight strong {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 900;
    color: #92400e;
}

.join-highlight span {
    font-size: 13px;
    font-weight: 700;
    color: #b45309;
}

.join-card .tg-exercises {
    width: 100%;
    padding: 4px 16px;
    border-radius: 24px;
    background: var(--card-bg);
    border: 2px solid #ececfb;
    box-shadow: 0 4px 0 #e4e4f7;
}

.join-note {
    margin: 18px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-secondary);
}

.join-card > .btn {
    width: 100%;
    margin-top: auto;
}

.join-card > .tg-exercises + .btn,
.join-card > .join-note + .btn,
.join-card > .join-note:first-child + .btn {
    margin-top: 22px;
}

.join-hint {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.join-later {
    margin-top: 8px;
    padding: 12px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
}

.join-loading {
    flex: 1;
    display: grid;
    place-items: center;
    min-height: 50vh;
}

.join-loading span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 4px solid var(--tint-primary-strong);
    border-top-color: var(--primary);
    animation: join-spin 0.8s linear infinite;
}

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

html[data-theme="dark"] .tg-tag,
html[data-theme="dark"] .join-highlight { background: rgba(245, 158, 11, 0.16); }

html[data-theme="dark"] .tg-tag,
html[data-theme="dark"] .join-highlight strong,
html[data-theme="dark"] .join-highlight em,
html[data-theme="dark"] .join-highlight span { color: #fbbf24; }

html[data-theme="dark"] .join-card .tg-exercises {
    border-color: var(--border-light);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .tg-pill.is-done { color: #4ade80; }

.tg-dismiss {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: pointer;
}

.tg-streak {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    color: var(--gold);
    font-weight: 800;
}

/* Activity, records and comparison between friends */

.tg-gold { color: var(--gold-3d); }

.tg-record-value.tg-gold {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tg-record-value small {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-muted);
}

.tg-select {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 58%;
    display: flex;
    align-items: center;
    color: var(--primary-dark);
}

.tg-select select {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 26px 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--tint-primary);
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.tg-select svg {
    position: absolute;
    right: 10px;
    transform: rotate(90deg);
    pointer-events: none;
}

.tg-cmp-legend {
    margin: -8px 0 2px;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.tg-cmp-row.is-me strong { color: var(--primary-dark); }

.tg-cmp-bar {
    display: block;
    height: 6px;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    overflow: hidden;
}

.tg-cmp-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--text-muted);
    opacity: 0.55;
}

.tg-cmp-row.is-me .tg-cmp-bar span { background: var(--primary); opacity: 1; }

.tg-duel-head,
.tg-duel-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px 64px;
    align-items: center;
    gap: 8px;
}

.tg-duel-head span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
}

.tg-duel-row { padding: 10px 0; border-top: 1px solid var(--border-light); }

.tg-duel-head + .tg-duel-row { border-top: 0; }

.tg-duel-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.tg-duel-row strong {
    text-align: center;
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 900;
    color: var(--text-muted);
}

.tg-duel-row strong.is-win { color: var(--success-3d); }

.tg-duel-note {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

html[data-theme="dark"] .tg-gold { color: #fbbf24; }

html[data-theme="dark"] .tg-cmp-row.is-me strong,
html[data-theme="dark"] .tg-select { color: #c7d2fe; }

html[data-theme="dark"] .tg-duel-row strong.is-win { color: #4ade80; }

/* Shared close button (shell.js) in the column layout of these sheets */
.tg-sheet > .sheet-close {
    align-self: flex-end;
    float: none;
    margin: -4px -6px -50px 0;
}

.tg-sheet-title { padding-right: 44px; }

/* Friend names stay readable without stretching rows or picker chips. */
.sf-choices {
    padding-bottom: 5px;
    margin-bottom: -5px;
}

.sf-choice > span {
    min-width: 0;
    max-width: min(12ch, 34vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-invite-text strong,
.duo-strip-text strong,
.tg-profile h3,
.buddy-reveal-card strong,
.duo-compare-head > span:first-child,
.duo-compare-head > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tg-profile h3 { max-width: 100%; }
.buddy-reveal-card strong { max-width: min(82vw, 18ch); }

.tg-goal-members li > span {
    min-width: 0;
    max-width: min(12ch, 40vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Exercise search, face to face and headline record */

.tg-search {
    position: relative;
    display: flex;
    align-items: center;
}

.tg-search > svg {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

.tg-search-input {
    width: 100%;
    min-height: 44px;
    padding: 0 14px 0 42px;
    border: 2px solid var(--border-light);
    border-radius: 14px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    appearance: none;
    -webkit-appearance: none;
}

.tg-search-input:focus { outline: none; border-color: var(--primary); background: var(--card-bg); }

.tg-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 5;
    max-height: 210px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    border: 2px solid var(--border-light);
    border-radius: 14px;
    background: var(--card-bg);
    box-shadow: 0 8px 24px rgba(30, 27, 75, 0.14);
}

.tg-suggest[hidden], .tg-suggest li[hidden] { display: none; }

.tg-suggest button {
    width: 100%;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.tg-suggest button.is-current { background: var(--tint-primary); color: var(--primary-dark); }

.tg-suggest-empty { padding: 10px; font-size: 14px; font-weight: 600; color: var(--text-muted); }

.tg-block { display: flex; flex-direction: column; gap: 10px; }

.tg-block .tg-sheet-h4 { margin: 0; }

.tg-sheet { gap: 22px; }

.tg-duel { display: flex; flex-direction: column; gap: 14px; }

.tg-duel .tg-duel-note { margin: 0; }

.tg-vs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.tg-vs-side { min-width: 0; display: flex; flex-direction: column; }

.tg-vs-side > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-muted);
}

.tg-vs-side strong {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 38px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--text-muted);
}

.tg-vs-side strong small { font-size: 15px; font-weight: 800; }

.tg-vs-side.is-win strong { color: var(--success-3d); }

.tg-vs-side .tg-cmp-bar { margin-top: 4px; }

.tg-vs-side.is-win .tg-cmp-bar span { background: var(--success); opacity: 1; }

.tg-vs-side.is-me:not(.is-win) .tg-cmp-bar span { background: var(--primary); opacity: 1; }

.tg-lead {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 0 12px;
    border-bottom: 1px solid var(--border-light);
}

.tg-lead.is-tappable { cursor: pointer; }

.tg-lead-value {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--gold-3d);
}

.tg-lead-value small { font-size: 16px; font-weight: 800; }

.tg-lead-value span { font-size: 24px; }

.tg-lead-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.tg-lead-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tg-lead-meta b { color: var(--text-primary); font-weight: 800; }

.tg-compare .tg-search { margin-bottom: 10px; }

html[data-theme="dark"] .tg-vs-side.is-win strong { color: #4ade80; }
html[data-theme="dark"] .tg-lead-value { color: #fbbf24; }
html[data-theme="dark"] .tg-suggest { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .tg-suggest button.is-current { color: #c7d2fe; }

.tg-block .tg-sheet-h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 800;
}

.tg-sheet-h4 > svg { flex: none; color: var(--primary); }

.tg-block:nth-of-type(2) .tg-sheet-h4 > svg { color: var(--gold); }

/* =====================================================================
   Gryno+ paywall (premium.js): full screen, dark in both themes.
   Offer (carousel + plans), member status, welcome after the purchase.
   ===================================================================== */

#sheet-paywall {
    --pwb-gold: linear-gradient(135deg, #fde68a 0%, #fbbf24 35%, #f59e0b 70%, #f97316 100%);
    --pwb-muted: rgba(255, 255, 255, 0.62);
    --pwb-faint: rgba(255, 255, 255, 0.08);
    --pwb-line: rgba(255, 255, 255, 0.12);
    --pwb-spring: cubic-bezier(.34, 1.56, .64, 1);
    z-index: 160;
}

#sheet-paywall > .sheet-content {
    inset: 0;
    max-height: none;
    padding: 0;
    border-radius: 0;
    background: var(--hero-bg);
    color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    animation: pwbUp 0.45s var(--ease-out) both;
}
#sheet-paywall > .sheet-content::-webkit-scrollbar { display: none; }
@keyframes pwbUp { from { transform: translateY(100%); } }

.pwb {
    position: relative;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 12px) 18px calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 16px);
    overflow: hidden;
}

.pwb-rays {
    /* Centred on the medal's disc. */
    position: absolute;
    left: 50%;
    top: 82px;
    width: 640px;
    height: 640px;
    margin: -320px 0 0 -320px;
    background: repeating-conic-gradient(from 0deg, rgba(251, 191, 36, 0.11) 0 9deg, transparent 9deg 24deg);
    -webkit-mask: radial-gradient(circle, #000 0, transparent 62%);
    mask: radial-gradient(circle, #000 0, transparent 62%);
    animation: pwbSpin 40s linear infinite;
    pointer-events: none;
}
@keyframes pwbSpin { to { transform: rotate(360deg); } }

.pwb > * { position: relative; }

.pwb-top { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.pwb-stories { flex: 1; display: flex; gap: 4px; height: 4px; }
.pwb-stories span { flex: 1; border-radius: 4px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.pwb-stories i { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; }
.pwb-stories .is-done i { width: 100%; }
.pwb-stories .is-run i { animation: pwbStory 3.2s linear forwards; }
@keyframes pwbStory { to { width: 100%; } }

.pwb-close {
    margin-left: auto;
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}
.is-offer .pwb-close { animation: pwbFade 0.4s 1.4s ease both; }
@keyframes pwbFade { from { opacity: 0; } }

/* ---------- Hero: rhino in its medal + logo ---------- */
.pwb-hero { display: flex; flex-direction: column; align-items: center; margin-top: 6px; }
.pwb-medal { position: relative; width: 128px; height: 146px; animation: pwbDrop 0.8s 0.15s var(--pwb-spring) both; }
.pwb-disc,
.pwb-ring {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 128px;
    border-radius: 50%;
}
.pwb-ring {
    inset: auto -4px -4px;
    height: 136px;
    background: conic-gradient(from 0deg, #fde68a, #f59e0b, #fff7d6, #f97316, #fbbf24, #fde68a);
    animation: pwbSpin 6s linear infinite;
}
.pwb-disc { background: radial-gradient(circle at 50% 30%, #8b7bff 0%, #5b3fd6 45%, #2a1660 100%); }
/* Square on top (head and crown stick out), round at the bottom: the edge
   of the picture stays hidden under the medal. */
.pwb-medal-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 0 0 64px 64px;
}
.pwb-medal-clip img {
    position: absolute;
    left: 50%;
    top: -6px;
    width: 166px;
    height: 166px;
    margin-left: -83px;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
    animation: pwbFloat 4s 1.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pwbDrop { from { opacity: 0; transform: translateY(40px) scale(.6); } }
@keyframes pwbFloat { 50% { transform: translateY(-4px); } }

.pwb-logo {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: 8px;
    animation: pwbRise 0.5s 0.4s var(--ease-out) both;
}
.pwb-word {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 38px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    /* Light sweeping over a white-to-gold metal. */
    background:
        linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.95) 48%, transparent 58%) 0 0 / 260% 100% no-repeat,
        linear-gradient(180deg, #ffffff 35%, #fde68a 75%, #fbbf24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 0 #2a1660) drop-shadow(0 0 18px rgba(251, 191, 36, 0.35));
    animation: pwbSheen 3.6s 1s ease-in-out infinite;
}
@keyframes pwbSheen { 0% { background-position: 100% 0, 0 0; } 45%, 100% { background-position: 0 0, 0 0; } }
.pwb-plus {
    /* An exponent: its top lines up with the top of the capital G. */
    position: relative;
    width: 26px;
    height: 26px;
    margin-top: 3px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--pwb-gold);
    box-shadow: 0 3px 0 #b45309, 0 6px 14px rgba(245, 158, 11, 0.45);
    font-family: 'Nunito', sans-serif;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 0 #b45309;
    animation: pwbPlus 0.6s 0.6s var(--pwb-spring) both;
}
.pwb-plus::after {
    content: "";
    position: absolute;
    inset: -20% auto -20% -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    transform: skewX(-18deg);
    animation: pwbGlint 3.6s 1.6s ease-in-out infinite;
}
@keyframes pwbPlus { from { opacity: 0; transform: scale(.3); } }
@keyframes pwbGlint { 0% { left: -60%; } 30%, 100% { left: 140%; } }

.pwb-spark { position: absolute; z-index: 1; width: 14px; height: 14px; fill: #c7d2fe; opacity: 0; animation: pwbTwinkle 2.6s ease-in-out infinite; }
.pwb-spark.is-gold { fill: #fbbf24; }
.pwb-spark.s2 { width: 10px; height: 10px; animation-delay: 0.7s; }
.pwb-spark.s3 { width: 12px; height: 12px; animation-delay: 1.3s; }
.pwb-spark.s4 { width: 9px; height: 9px; animation-delay: 1.9s; }
@keyframes pwbTwinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 70% { opacity: 0; transform: scale(.4) rotate(90deg); } }

.pwb-context {
    align-self: center;
    margin-top: 12px;
    max-width: 320px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: #fde68a;
}

/* ---------- Carousel ---------- */
.pwb-slides { display: grid; flex: 1; min-height: 250px; margin-top: 8px; touch-action: pan-y; }
.pwb-slide {
    /* Stack slides in flow so the tallest copy reserves space above the plans. */
    position: relative;
    grid-area: 1 / 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.3s, transform 0.4s var(--ease-out);
    pointer-events: none;
}
.pwb-slide.is-on { opacity: 1; transform: none; }
.pwb-art { flex: none; width: 100%; min-height: 150px; display: grid; place-items: center; padding: 0 34px; }
.pwb-slide h3 { margin: 12px 0 0; font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.pwb-slide p { margin: 6px 0 0; max-width: 310px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--pwb-muted); }

.pwb-arrow {
    position: absolute;
    top: 59px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
}
.pwb-arrow.is-prev { left: -4px; }
.pwb-arrow.is-next { right: -4px; }
.pwb-arrow:active { transform: scale(.9); }

/* Coach */
.pwb-coach { width: 100%; padding: 14px; border-radius: 20px; background: var(--pwb-faint); text-align: left; }
.pwb-coach-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pwb-coach-head strong { font-size: 15px; font-weight: 800; }
.pwb-coach-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #3b1d00; background: var(--pwb-gold); }
.pwb-coach-row { display: flex; align-items: center; gap: 8px; }
.pwb-coach-row > div { flex: 1; min-width: 0; }
.pwb-coach-row .is-next { text-align: right; }
.pwb-coach-row small { display: block; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.55); }
.pwb-coach-row b { font-family: 'Nunito', sans-serif; font-size: 23px; font-weight: 900; white-space: nowrap; color: rgba(255, 255, 255, 0.75); }
.pwb-coach-row b i { font-style: normal; font-size: 15px; color: rgba(255, 255, 255, 0.45); }
.pwb-coach-row .is-next b { color: #fde68a; }
.pwb-coach-arrow { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fde68a; }
.pwb-coach-pill {
    margin-top: 10px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    color: #86efac;
    background: rgba(34, 197, 94, 0.18);
    opacity: 0;
    transform: scale(.85);
    transition: opacity 0.3s, transform 0.45s var(--pwb-spring);
}
.pwb-coach.is-done .pwb-coach-pill { opacity: 1; transform: none; }

/* Review */
.pwb-bars { position: relative; width: 100%; height: 128px; display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding-bottom: 18px; }
.pwb-bars i { position: relative; width: 32px; height: var(--h); border-radius: 10px 10px 6px 6px; background: rgba(255, 255, 255, 0.16); transform-origin: bottom; }
.pwb-bars i:last-of-type { background: var(--pwb-gold); }
.pwb-slide.is-on .pwb-bars i { animation: pwbGrow 0.6s calc(var(--i) * 0.1s) var(--pwb-spring) both; }
@keyframes pwbGrow { from { transform: scaleY(0); } }
.pwb-bars span { position: absolute; left: 0; right: 0; bottom: -18px; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.5); }
.pwb-bars-tag { position: absolute; top: 0; right: 4px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #052e16; background: #4ade80; }
.pwb-slide.is-on .pwb-bars-tag { animation: pwbPlus 0.45s 0.65s var(--pwb-spring) both; }

/* Scan: front, side, back */
.pwb-scan { display: flex; justify-content: center; gap: 10px; }
.pwb-scan figure { position: relative; width: 84px; height: 140px; margin: 0; display: grid; place-items: center; overflow: hidden; border-radius: 16px; background: var(--pwb-faint); }
.pwb-scan svg { width: 62px; height: 104px; margin-bottom: 14px; }
.pwb-scan .pwb-arm { fill: #d9d3ff; }
.pwb-scan .pwb-muscle { fill: none; stroke: #7c6cf0; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
.pwb-scan figcaption { position: absolute; left: 0; right: 0; bottom: 6px; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.55); }
.pwb-scan-line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #fbbf24; box-shadow: 0 0 10px 2px rgba(251, 191, 36, 0.6); opacity: 0; }
.pwb-slide.is-on .pwb-scan-line { animation: pwbScan 1.3s calc(var(--i) * 0.3s) ease-in-out 2 both; }
@keyframes pwbScan { 0% { top: 6%; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: 94%; opacity: 0; } }

/* Program week */
.pwb-week { display: flex; justify-content: center; gap: 6px; }
.pwb-week span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pwb-week small { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.5); }
.pwb-week i { width: 34px; height: 84px; display: grid; place-items: center; border-radius: 12px; background: var(--pwb-faint); font-style: normal; font-size: 10px; font-weight: 800; writing-mode: vertical-rl; transform: rotate(180deg); }
.pwb-week i.is-on { background: var(--grad-primary); box-shadow: 0 4px 0 var(--primary-3d, #4338ca); }
.pwb-slide.is-on .pwb-week i.is-on { animation: pwbFill 0.45s calc(var(--i) * 0.08s + 0.1s) var(--pwb-spring) both; }
@keyframes pwbFill { from { opacity: 0; transform: rotate(180deg) scale(.6); } }

/* Watch */
.pwb-watch { width: 128px; height: 146px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 38px; background: #050414; border: 6px solid #2e2a52; box-shadow: 0 0 0 2px #4c4785; }
.pwb-watch small { font-size: 11px; font-weight: 700; color: #a5b4fc; }
.pwb-watch b { font-family: 'Nunito', sans-serif; font-size: 30px; font-weight: 900; }
.pwb-hr { width: 86px; height: 20px; fill: none; stroke: #f43f5e; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 140; stroke-dashoffset: 140; }
.pwb-slide.is-on .pwb-hr { animation: pwbDraw 1.4s linear infinite; }
@keyframes pwbDraw { to { stroke-dashoffset: -140; } }
.pwb-bpm { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: #fda4af; }
.pwb-bpm em { font-style: normal; }
.pwb-bpm i { width: 7px; height: 7px; border-radius: 50%; background: #f43f5e; animation: pwbBeat 0.8s infinite; }
@keyframes pwbBeat { 50% { transform: scale(1.5); } }

/* More */
.pwb-more { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.pwb-more li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.pwb-more svg { color: #4ade80; }
.pwb-slide.is-on .pwb-more li { animation: pwbRise 0.4s calc(var(--i) * 0.08s) var(--ease-out) both; }
@keyframes pwbRise { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Plans: fixed sizes, nothing moves when switching ---------- */
.pwb-plans { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; animation: pwbRise 0.5s 0.55s var(--ease-out) both; }
.pwb-plan {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 58px;
    padding: 0 14px;
    border-radius: 16px;
    border: 2px solid var(--pwb-line);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.pwb-plan.is-on { border-color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
.pwb-radio { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); }
.pwb-plan.is-on .pwb-radio { border-color: #fbbf24; }
.pwb-plan.is-on .pwb-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fbbf24; animation: pwbPlus 0.3s var(--pwb-spring); }
.pwb-plan-main { flex: 1; min-width: 0; }
.pwb-plan-main strong { display: block; font-size: 15px; font-weight: 800; }
.pwb-plan-main small { display: block; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.pwb-badge { padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; color: #3b1d00; background: var(--pwb-gold); }
.pwb-plan-price { font-family: 'Nunito', sans-serif; font-size: 18px; font-weight: 900; white-space: nowrap; text-align: right; }
.pwb-plan-price small { margin-left: 2px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.55); }

/* ---------- Main button ---------- */
.pwb-foot { margin-top: 14px; }
.pwb-cta {
    position: relative;
    width: 100%;
    height: 58px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: var(--pwb-gold);
    color: #3b1d00;
    font: inherit;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    box-shadow: 0 5px 0 #b45309, 0 12px 28px rgba(245, 158, 11, 0.35);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    animation: pwbPlus 0.5s 0.8s var(--pwb-spring) both;
}
.pwb-cta span { position: relative; z-index: 1; }
.pwb-cta::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-18deg);
    animation: pwbShine 3.2s 1.4s ease-in-out infinite;
}
@keyframes pwbShine { 0% { left: -40%; } 35%, 100% { left: 130%; } }
.pwb-cta:active { transform: translateY(5px); box-shadow: 0 0 0 #b45309; }
.pwb-cta:disabled { opacity: 0.55; box-shadow: 0 5px 0 #7c4a12; cursor: default; }
.pwb-cta:disabled::after { display: none; }
.pwb-cta.is-swap span { animation: pwbSwap 0.3s var(--pwb-spring); }
@keyframes pwbSwap { from { opacity: 0; transform: translateY(6px); } }
.pwb-cta.is-success { background: var(--grad-success); color: #fff; box-shadow: 0 5px 0 var(--success-3d, #15803d); }
.pwb-cta.is-success::after { display: none; }

/* Two lines kept for the small print: the button never jumps. */
.pwb-fine { min-height: 2.8em; margin: 10px 0 0; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.4; color: rgba(255, 255, 255, 0.55); }
.pwb-legal { margin: 4px 0 0; text-align: center; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.45); }
.pwb-legal a, .pwb-legal button { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: none; cursor: pointer; }

/* ---------- Member ---------- */
.pwb-status { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 18px; text-align: center; }
.pwb-status-label { font-size: 13px; font-weight: 800; color: #fde68a; }
.pwb-status-title { display: inline-flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.pwb-status-title .pwb-check { animation: none; }
.pwb-days { font-family: 'Nunito', sans-serif; font-size: 48px; font-weight: 900; line-height: 1; }
.pwb-days small { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--pwb-muted); }
.pwb-rail { width: 100%; max-width: 260px; height: 10px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.pwb-rail i { display: block; height: 100%; border-radius: inherit; background: var(--pwb-gold); }
.pwb-status-sub { max-width: 300px; margin-top: 4px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--pwb-muted); }
.is-member .pwb-cta { margin-top: 16px; animation-delay: 0.3s; }
.pwb-manage {
    align-self: center;
    margin-top: 14px;
    padding: 10px 18px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.pwb-list-title { margin: 26px 0 4px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.pwb-list { margin: 0; padding: 0; list-style: none; }
.pwb-list li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--pwb-line); }
.pwb-list li:first-child { border-top: 0; }
.pwb-list-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(251, 191, 36, 0.14); color: #fbbf24; }
.pwb-list strong { display: block; font-size: 15px; font-weight: 800; }
.pwb-list small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--pwb-muted); }
.is-member .pwb-legal { margin-top: 14px; }

/* ---------- Given days about to end ---------- */
.is-keep .pwb-days { font-size: 40px; }
.pwb-keep-stat {
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    color: #86efac;
    background: rgba(34, 197, 94, 0.16);
}
.pwb-keep-stat[hidden] { display: none; }
.is-keep .pwb-list-title { margin-top: 22px; }
.pwb-lose { display: flex; flex-direction: column; gap: 9px; margin: 6px 0 0; padding: 0; list-style: none; }
.pwb-lose li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.88); animation: pwbRise 0.4s calc(0.3s + var(--i) * 0.08s) var(--ease-out) both; }
.pwb-lock { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(251, 191, 36, 0.16); color: #fbbf24; }
.is-keep .pwb-plans { margin-top: 20px; }

/* ---------- Welcome ---------- */
.is-welcome { text-align: center; }
.is-welcome .pwb-hero { margin-top: auto; }
.is-welcome .pwb-cta { margin-bottom: auto; }
.pwb-hero.is-win .pwb-medal { animation: pwbWin 0.9s var(--pwb-spring) both; }
@keyframes pwbWin { from { opacity: 0; transform: scale(.3) rotate(-14deg); } }
.pwb-welcome-title { margin: 18px 0 0; font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: #fff; animation: pwbRise 0.5s 0.5s var(--ease-out) both; }
.pwb-welcome-line { max-width: 320px; margin: 8px auto 0; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--pwb-muted); animation: pwbRise 0.5s 0.6s var(--ease-out) both; }
.pwb-unlocked { display: flex; flex-direction: column; gap: 10px; margin: 22px auto 0; padding: 0; list-style: none; text-align: left; }
.pwb-unlocked li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; animation: pwbRise 0.4s calc(0.8s + var(--i) * 0.12s) var(--ease-out) both; }
.pwb-check { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #22c55e; color: #fff; animation: pwbPlus 0.4s calc(0.85s + var(--i) * 0.12s) var(--pwb-spring) both; }
.is-welcome .pwb-cta { margin-top: 30px; animation-delay: 1.6s; }

/* ---------- Home header: Gryno+ pill ---------- */
.pane-header-btn.plus-pill {
    width: auto;
    gap: 6px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px 0 12px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.pane-header-btn.plus-pill svg { flex: none; width: 18px; height: 18px; color: var(--gold); stroke-width: 2.4; }

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

/* ---------- Ensemble: free Gryno+ days for inviting friends ---------- */
.tg-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    background: color-mix(in srgb, var(--gold) 13%, var(--card-bg));
    border-color: color-mix(in srgb, var(--gold) 30%, var(--card-bg));
    box-shadow: 0 4px 0 color-mix(in srgb, var(--gold) 34%, var(--card-bg));
}
.tg-promo h4 { margin: 4px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.tg-promo p { margin: 0; max-width: 300px; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--text-secondary); }
.tg-promo-gifts { display: flex; gap: 14px; }
.tg-promo-gift { display: flex; flex-direction: column; align-items: center; gap: 2px; animation: tgGiftHop 4s calc(var(--i) * 0.25s + 1s) ease-in-out infinite; }
.tg-promo-gift .sf-gift-art { width: 46px; height: 46px; }
.tg-promo-gift small { font-family: 'Nunito', 'Inter', sans-serif; font-size: 14px; font-weight: 900; color: var(--gold-3d); }
.tg-promo-gift.is-earned { animation: none; opacity: 0.45; filter: grayscale(0.4); }
.tg-promo-gift.is-earned small { color: var(--success); }
@keyframes tgGiftHop { 0%, 80%, 100% { transform: none; } 86% { transform: translateY(-5px) rotate(-4deg); } 92% { transform: translateY(0) rotate(3deg); } }
.tg-promo-btn { width: 100%; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .tg-promo-gift { animation: none; } }

/* Feedback opens above the settings drawer. */
.feedback-form { display: grid; gap: 12px; margin-top: 20px; }
.feedback-form .form-textarea { color: var(--text-primary); background: var(--card-bg); font-size: 16px; }
.feedback-note, .feedback-status { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.feedback-status:empty { display: none; }
#btn-settings-feedback .set-label { white-space: normal; }
html[data-theme="dark"] .sf-gift-text small,
html[data-theme="dark"] .tg-promo-gift small { color: #fbbf24; }
.tg-promo-gift small svg { display: block; stroke-width: 3; }