/* PHEATS Design System
   This file intentionally loads after styles.css. Put new theme decisions here first. */

:root {
    --pheats-bg: #030202;
    --pheats-bg-raised: #0d0908;
    --pheats-card: rgba(16, 13, 12, 0.94);
    --pheats-card-strong: rgba(22, 15, 12, 0.98);
    --pheats-line: rgba(226, 112, 43, 0.2);
    --pheats-line-hot: rgba(226, 112, 43, 0.42);
    --pheats-orange: #d46324;
    --pheats-orange-bright: #f07a2d;
    --pheats-red: #a32820;
    --pheats-cream: #fff3ea;
    --pheats-muted: rgba(255, 243, 234, 0.66);
    --pheats-dim: rgba(255, 243, 234, 0.46);
    --pheats-radius: 22px;
    --pheats-radius-pill: 999px;
    --pheats-shadow: 0 20px 55px rgba(0, 0, 0, 0.34);
    --pheats-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    font-family: var(--pheats-font) !important;
    background:
        radial-gradient(circle at 50% -16rem, rgba(240, 122, 45, 0.18), transparent 38rem),
        radial-gradient(circle at 110% 18%, rgba(163, 40, 32, 0.16), transparent 30rem),
        linear-gradient(180deg, #050303 0%, #020101 100%) !important;
}

#content {
    width: min(1160px, calc(100% - 2rem)) !important;
}

.dashboard-card,
.profile-feed-card,
.leaderboard-card,
.badge-card,
.add-form,
.profile-section-card,
.record-card,
.template-card,
.goal-item,
.nutrition-log-card {
    border-radius: var(--pheats-radius) !important;
    border: 1px solid var(--pheats-line) !important;
    background:
        linear-gradient(150deg, rgba(22, 15, 12, 0.96), rgba(7, 5, 5, 0.97)) !important;
    box-shadow: var(--pheats-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

h1,
h2,
h3,
h4 {
    color: var(--pheats-cream) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

p,
small,
label,
.empty-note {
    color: var(--pheats-muted) !important;
}

button,
.file-upload-control {
    border-radius: var(--pheats-radius-pill) !important;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

button:hover,
.file-upload-control:hover {
    transform: translateY(-1px);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.file-upload-control:focus-within {
    outline: 2px solid rgba(240, 122, 45, 0.85);
    outline-offset: 3px;
}

.secondary-action,
.quiet-action {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--pheats-cream) !important;
}

.pheats-daily-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
    gap: clamp(1rem, 2vw, 1.4rem);
}

.daily-command-card {
    display: grid;
    gap: 1rem;
    padding: clamp(1.1rem, 2.4vw, 1.55rem) !important;
}

.daily-command-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem;
    border-radius: 18px;
    border: 1px solid rgba(226, 112, 43, 0.14);
    background: rgba(255, 255, 255, 0.04);
}

.daily-command-row strong {
    color: var(--pheats-cream);
}

.daily-command-row span {
    color: var(--pheats-muted);
}

.daily-command-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--pheats-orange), var(--pheats-red));
}

.nav-hint-layer {
    position: fixed;
    z-index: 2500;
    display: none;
    width: min(320px, calc(100vw - 2rem));
    padding: 0.85rem;
    border: 1px solid var(--pheats-line-hot);
    border-radius: 18px;
    color: var(--pheats-cream);
    background:
        radial-gradient(circle at 16% 0%, rgba(240, 122, 45, 0.18), transparent 42%),
        rgba(8, 6, 5, 0.96);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(16px);
}

.nav-hint-layer.visible {
    display: block;
}

.nav-hint-layer strong {
    display: block;
    margin-bottom: 0.25rem;
}

.nav-hint-layer p {
    margin: 0;
    color: var(--pheats-muted);
    font-size: 0.9rem;
}

.nav-hint-layer .nav-hint-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.nav-hint-layer button {
    min-height: 34px;
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
    color: var(--pheats-cream);
    border: 1px solid rgba(226, 112, 43, 0.18);
    background: rgba(255, 255, 255, 0.055);
}

.storage-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 30px;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--pheats-radius-pill);
    color: var(--pheats-dim);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.75rem;
    font-weight: 750;
}

.storage-status::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.32);
}

.storage-status.online {
    color: #ffd7bd;
    border-color: rgba(240, 122, 45, 0.28);
    background: rgba(212, 99, 36, 0.09);
}

.storage-status.online::before {
    background: var(--pheats-orange-bright);
    box-shadow: 0 0 16px rgba(240, 122, 45, 0.72);
}

.storage-status.ai-ready {
    color: #fff3ea;
}

.serving-picker {
    display: grid;
    gap: 0.65rem;
    margin: 1rem 0;
    padding: 0.9rem;
    border: 1px solid rgba(226, 112, 43, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
}

.serving-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}

.serving-options label {
    cursor: pointer;
}

.serving-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.serving-options span {
    display: grid;
    min-height: 38px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--pheats-radius-pill);
    color: var(--pheats-muted);
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.82rem;
    font-weight: 760;
}

.serving-options input:checked + span {
    color: #fff;
    border-color: rgba(240, 122, 45, 0.42);
    background: linear-gradient(135deg, var(--pheats-orange), var(--pheats-red));
}

#serving-preview {
    margin: 0;
    color: var(--pheats-cream) !important;
    font-weight: 760;
}

.food-recommendation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.35rem);
}

.food-recommendation-card {
    display: grid;
    grid-template-columns: minmax(130px, 0.42fr) minmax(0, 1fr);
    gap: 1rem;
    overflow: hidden;
    padding: 0.8rem;
    border: 1px solid var(--pheats-line);
    border-radius: var(--pheats-radius);
    background:
        linear-gradient(150deg, rgba(22, 15, 12, 0.96), rgba(7, 5, 5, 0.97));
    box-shadow: var(--pheats-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.food-recommendation-card img {
    width: 100%;
    height: 100%;
    min-height: 150px;
    object-fit: cover;
    border-radius: 16px;
}

.food-recommendation-card h3 {
    margin: 0.2rem 0 0.4rem;
}

.food-recommendation-card p {
    margin: 0 0 0.8rem;
}

.recommendation-macros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.recommendation-macros span {
    padding: 0.35rem 0.6rem;
    border-radius: var(--pheats-radius-pill);
    color: #ffd7bd;
    background: rgba(212, 99, 36, 0.1);
    font-size: 0.8rem;
    font-weight: 760;
}

@media (max-width: 760px) {
    .pheats-daily-grid {
        grid-template-columns: 1fr;
    }

    .daily-command-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .daily-command-row button {
        grid-column: 1 / -1;
    }

    .nav-hint-layer {
        display: none !important;
    }

    .storage-status {
        display: none !important;
    }

    .serving-options,
    .food-recommendation-grid,
    .food-recommendation-card {
        grid-template-columns: 1fr;
    }

    .food-recommendation-card img {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }
}

/* Spacious formatting pass
   Revert this section if the global layout direction needs to be rolled back. */
:root {
    --pheats-page-max: 1040px;
    --pheats-readable: 64ch;
    --pheats-space-1: 0.7rem;
    --pheats-space-2: 1rem;
    --pheats-space-3: 1.45rem;
    --pheats-space-4: 2rem;
    --pheats-space-5: 2.8rem;
    --pheats-card-pad: clamp(1.35rem, 3vw, 2.35rem);
}

html {
    font-size: 15px;
}

body {
    font-size: 1rem !important;
    line-height: 1.68 !important;
}

#main-content {
    display: block;
}

#content {
    width: min(var(--pheats-page-max), calc(100% - 2rem)) !important;
    padding-top: var(--pheats-space-3) !important;
}

#content > *,
.live-screen,
.feature-screen,
.home-screen,
.profile-screen,
.nutrition-screen,
.achievements-screen {
    gap: var(--pheats-space-5) !important;
}

.hero-prime,
.today-hero,
.leaderboard-header,
.nutrition-hero,
.achievements-hero,
.vault-hero,
.profile-hero,
.dashboard-card,
.profile-feed-card,
.leaderboard-card,
.badge-card,
.add-form,
.add-card-panel,
.profile-section-card,
.record-card,
.template-card,
.goal-item,
.nutrition-log-card,
.food-recommendation-card {
    padding: var(--pheats-card-pad) !important;
}

.hero-prime,
.today-hero,
.nutrition-hero,
.profile-hero {
    min-height: min(640px, calc(100vh - 190px));
    align-content: center;
}

h1,
h2,
h3,
h4,
p,
small,
span,
label,
button,
input,
select,
textarea {
    letter-spacing: 0 !important;
}

h1,
h2 {
    max-width: 11ch !important;
    line-height: 1.04 !important;
}

h1 {
    font-size: clamp(2.65rem, 8vw, 5.4rem) !important;
}

h2 {
    font-size: clamp(2.25rem, 6vw, 4.55rem) !important;
}

h3 {
    line-height: 1.15 !important;
}

p,
.home-platform-copy,
.post-caption,
.badge-card p,
.profile-feed-card p {
    max-width: var(--pheats-readable);
    line-height: 1.75 !important;
}

.home-platform-copy {
    margin-top: var(--pheats-space-2) !important;
    margin-bottom: var(--pheats-space-4) !important;
}

button,
input,
select,
textarea,
.file-upload-control {
    min-height: 54px !important;
    padding: 0.95rem 1.25rem !important;
    font-size: 0.98rem !important;
}

button,
.file-upload-control,
.heart-btn,
.follow-btn,
.save-log-btn,
.comment-form button,
.social-comment-form button {
    border: 1px solid rgba(240, 122, 45, 0.26) !important;
    color: var(--pheats-cream) !important;
    background:
        linear-gradient(135deg, rgba(212, 99, 36, 0.92), rgba(163, 40, 32, 0.92)) !important;
    box-shadow: 0 12px 28px rgba(163, 40, 32, 0.18) !important;
}

button:hover,
.file-upload-control:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 18px 38px rgba(163, 40, 32, 0.24) !important;
}

button:active,
.file-upload-control:active {
    transform: translateY(0) scale(0.99);
}

.secondary-action,
.quiet-action,
.ghost-btn,
.section-subnav button:not(.active),
.leaderboard-controls select,
.calorie-goal-control input,
.manual-food-grid input,
.manual-food-inline input,
input,
select,
textarea {
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: rgba(240, 122, 45, 0.18) !important;
    color: var(--pheats-cream) !important;
}

.nav-icon {
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    color: currentColor;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
}

.nav-icon svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
}

nav button::before {
    content: none !important;
}

nav button {
    min-height: 50px !important;
    padding: 0.7rem 1rem !important;
}

.dashboard-grid,
.stat-command-grid,
.home-lower-grid,
.lift-card-grid,
.profile-stats-grid,
.challenge-strip,
.nutrition-layout,
.food-recommendation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--pheats-space-4) !important;
}

.stat-grid,
.badge-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: var(--pheats-space-4) !important;
}

.home-lower-grid .dashboard-card,
.dashboard-grid .dashboard-card,
.lift-card,
.profile-section-card,
.nutrition-analysis-card,
.nutrition-coach-card {
    min-height: 260px;
}

.stat-item,
.mini-achievement,
.goal-strip,
.recent-row,
.leaderboard-row,
.daily-command-row {
    padding: var(--pheats-space-3) !important;
    gap: var(--pheats-space-2) !important;
}

.workout-post-card.social-feed-card,
.profile-feed-card.social-feed-card,
.interactive-feed-card {
    width: min(820px, 100%) !important;
    min-height: min(560px, 52vh);
    margin-inline: auto !important;
    padding: clamp(1.5rem, 3.5vw, 2.75rem) !important;
    gap: var(--pheats-space-4) !important;
}

.workout-post-card .post-media,
.workout-post-card .post-graphic,
.rank-post-media {
    min-height: 240px;
}

.workout-post-card .post-media video,
.workout-post-card .post-media img,
.rank-post-media video,
.rank-post-media img {
    min-height: 240px;
}

.leaderboard-list,
.horizontal-leaderboard-list {
    gap: var(--pheats-space-3) !important;
}

.rank-post.elite-board-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "top move"
        "score score"
        "meta meta"
        "media media" !important;
    min-height: 300px;
}

.rank-post .rank-post-score {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.badge-card {
    min-height: 300px;
}

.badge-icon,
.daily-command-icon,
.feed-icon,
.post-graphic-icon {
    filter: drop-shadow(0 0 18px rgba(240, 122, 45, 0.28));
}

.badge-card::after,
.profile-section-card::after,
.nutrition-coach-card::after {
    content: "";
    display: block;
    width: min(180px, 45%);
    height: 3px;
    margin-top: var(--pheats-space-3);
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--pheats-orange), var(--pheats-red), transparent);
    opacity: 0.72;
}

.add-card,
.premium-log-screen {
    display: grid !important;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
    gap: var(--pheats-space-5) !important;
}

.premium-log-form,
.input-stack,
.form-row,
.exercise-row,
.premium-exercise-row,
.manual-food-grid {
    gap: var(--pheats-space-3) !important;
}

.exercise-row,
.premium-exercise-row {
    padding: var(--pheats-space-3) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(240, 122, 45, 0.16) !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

.section-subnav {
    margin: var(--pheats-space-2) 0 var(--pheats-space-4) !important;
    gap: var(--pheats-space-2) !important;
}

.section-subnav button {
    min-height: 48px !important;
    padding: 0.85rem 1.15rem !important;
}

@media (min-width: 1180px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 900px) {
    html {
        font-size: 15px;
    }

    .dashboard-grid,
    .stat-command-grid,
    .home-lower-grid,
    .lift-card-grid,
    .profile-stats-grid,
    .challenge-strip,
    .nutrition-layout,
    .food-recommendation-grid,
    .add-card,
    .premium-log-screen {
        grid-template-columns: 1fr !important;
    }

    .hero-prime,
    .today-hero,
    .nutrition-hero,
    .profile-hero {
        min-height: auto;
    }
}

@media (max-width: 620px) {
    #content {
        width: min(100% - 1rem, var(--pheats-page-max)) !important;
    }

    .hero-prime,
    .today-hero,
    .leaderboard-header,
    .nutrition-hero,
    .achievements-hero,
    .vault-hero,
    .profile-hero,
    .dashboard-card,
    .profile-feed-card,
    .leaderboard-card,
    .badge-card,
    .add-form,
    .add-card-panel,
    .profile-section-card,
    .record-card,
    .template-card,
    .goal-item,
    .nutrition-log-card,
    .food-recommendation-card {
        padding: 1.25rem !important;
    }

    h1,
    h2 {
        max-width: 100% !important;
    }

    .stat-grid,
    .badge-grid,
    .rank-post .rank-post-score {
        grid-template-columns: 1fr !important;
    }
}

/* Simplified product mode */
.simple-screen {
    display: grid;
    gap: var(--pheats-space-5);
}

.simple-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--pheats-space-5);
}

.compact-simple-hero {
    min-height: auto !important;
}

.simple-hero p {
    font-size: 1.08rem;
}

.simple-score-card {
    display: grid;
    place-items: center;
    min-width: 220px;
    min-height: 220px;
    padding: var(--pheats-space-4);
    border: 1px solid rgba(240, 122, 45, 0.28);
    border-radius: 36px;
    background:
        radial-gradient(circle at 50% 20%, rgba(240, 122, 45, 0.22), transparent 52%),
        rgba(255, 255, 255, 0.04);
}

.simple-score-card strong {
    color: var(--pheats-cream);
    font-size: clamp(4rem, 12vw, 7rem);
    line-height: 0.9;
}

.simple-score-card span,
.simple-score-card small {
    color: var(--pheats-muted);
    font-weight: 800;
}

.simple-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pheats-space-2);
    margin-top: var(--pheats-space-4);
}

.simple-metric-grid,
.simple-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pheats-space-4);
}

.simple-metric-card {
    display: grid;
    gap: var(--pheats-space-2);
    min-height: 220px;
}

.simple-metric-card > span,
.simple-mini-card > span {
    color: var(--pheats-orange);
    font-size: 0.8rem;
    font-weight: 850;
    text-transform: uppercase;
}

.simple-metric-card strong {
    color: var(--pheats-cream);
    font-size: clamp(1.7rem, 4vw, 3.1rem);
    line-height: 1.08;
}

.simple-section {
    display: grid;
    gap: var(--pheats-space-4);
}

.simple-list {
    display: grid;
    gap: var(--pheats-space-3);
}

.simple-list-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--pheats-space-3);
    padding: var(--pheats-space-4);
    border: 1px solid rgba(240, 122, 45, 0.18);
    border-radius: var(--pheats-radius);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

.simple-list-card:hover {
    border-color: rgba(240, 122, 45, 0.38);
    transform: translateY(-2px);
}

.simple-mini-card {
    display: grid;
    gap: 0.55rem;
    min-height: 170px;
    padding: var(--pheats-space-3);
    border: 1px solid rgba(240, 122, 45, 0.16);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
}

.simple-mini-card strong {
    color: var(--pheats-cream);
}

.simple-bars {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    align-items: end;
    gap: 0.8rem;
    min-height: 260px;
}

.simple-bars div {
    display: grid;
    align-items: end;
    gap: 0.6rem;
    height: 240px;
}

.simple-bars span {
    display: block;
    min-height: 10px;
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, var(--pheats-orange-bright), var(--pheats-red));
}

.simple-bars small {
    text-align: center;
    font-size: 0.72rem;
}

.relaxed-feed-list {
    display: grid;
    gap: var(--pheats-space-5);
}

.relaxed-feed-list .workout-post-card.social-feed-card {
    width: min(880px, 100%) !important;
    min-height: 58vh;
}

.simplified-badge-grid .badge-card {
    min-height: 340px;
    align-content: space-between;
}

@media (max-width: 900px) {
    .simple-hero,
    .simple-metric-grid,
    .simple-card-grid,
    .simple-list-card {
        grid-template-columns: 1fr;
    }

    .simple-score-card {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 620px) {
    .simple-bars {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Log redesign and text containment guardrails */
#app,
#content,
#content *,
button,
input,
select,
textarea {
    box-sizing: border-box;
    min-width: 0;
}

h1,
h2,
h3,
h4,
p,
small,
span,
label,
button,
input,
select,
textarea,
strong {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

button,
.file-upload-control,
.log-start-card,
.simple-list-card,
.badge-card,
.dashboard-card {
    max-width: 100%;
}

.log-redesign-screen {
    gap: var(--pheats-space-5);
}

.log-hero {
    position: relative;
    overflow: hidden;
}

.log-hero::after {
    content: "";
    position: absolute;
    right: 2rem;
    bottom: 1.2rem;
    width: min(220px, 34%);
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(240, 122, 45, 0.9), rgba(163, 40, 32, 0.55), transparent);
    opacity: 0.78;
}

.log-start-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--pheats-space-3);
}

.log-start-card {
    display: grid !important;
    justify-items: start;
    align-content: start;
    gap: 0.7rem;
    min-height: 190px !important;
    padding: var(--pheats-space-4) !important;
    text-align: left;
    border-radius: 28px !important;
    border: 1px solid rgba(240, 122, 45, 0.18) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(240, 122, 45, 0.13), transparent 42%),
        linear-gradient(145deg, rgba(18, 13, 11, 0.96), rgba(7, 5, 5, 0.96)) !important;
    box-shadow: var(--pheats-shadow) !important;
}

.log-start-card.primary-log-card {
    border-color: rgba(240, 122, 45, 0.35) !important;
}

.log-start-card strong {
    color: var(--pheats-cream);
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    line-height: 1.12;
}

.log-start-card small {
    max-width: 28ch;
    color: var(--pheats-muted);
    line-height: 1.55;
}

.log-card-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--pheats-orange), var(--pheats-red));
}

.clean-log-form {
    display: grid;
    gap: var(--pheats-space-4) !important;
}

.log-form-section {
    display: grid;
    gap: var(--pheats-space-3);
}

.clean-exercise-list {
    display: grid;
    gap: var(--pheats-space-3);
}

.clean-exercise-row {
    grid-template-columns: minmax(220px, 1fr) minmax(120px, 0.36fr) minmax(130px, 0.42fr) auto !important;
    align-items: end;
    gap: var(--pheats-space-3) !important;
    padding: var(--pheats-space-4) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)) !important;
}

.clean-exercise-row label,
.log-optional-panel label {
    display: block;
    margin-bottom: 0.55rem;
    color: var(--pheats-muted) !important;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.clean-exercise-row input,
.log-optional-panel input {
    width: 100%;
    border-radius: 18px !important;
}

.clean-row-actions {
    justify-content: flex-start;
}

.log-optional-panel {
    padding: var(--pheats-space-3);
    border: 1px solid rgba(240, 122, 45, 0.14);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.035);
}

.log-optional-panel summary {
    cursor: pointer;
    color: var(--pheats-cream);
    font-size: 1.08rem;
    font-weight: 820;
}

.log-optional-panel[open] {
    display: grid;
    gap: var(--pheats-space-3);
}

.log-optional-panel > p {
    margin: 0;
}

.quiet-upload,
.secondary-action,
.remove-row-btn,
.ghost-btn,
.section-subnav button:not(.active),
.log-optional-panel button {
    background: rgba(255, 255, 255, 0.055) !important;
    color: var(--pheats-cream) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

.dashboard-card button,
.simple-hero button,
.log-start-card {
    isolation: isolate;
}

.dashboard-card[style*="orange"] button,
.daily-command-icon + div + button,
.simple-score-card button {
    background: rgba(7, 5, 5, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.final-save-btn {
    justify-self: stretch;
    min-height: 64px !important;
    font-size: 1.08rem !important;
}

@media (max-width: 900px) {
    .clean-exercise-row {
        grid-template-columns: 1fr 1fr !important;
    }

    .clean-exercise-row .exercise-input-main,
    .clean-exercise-row .remove-row-btn {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .log-start-grid,
    .clean-exercise-row {
        grid-template-columns: 1fr !important;
    }

    .log-start-card {
        min-height: 170px !important;
    }
}

/* Feed redesign inspired by social fitness stories and workout posts */
.feed-redesign-screen {
    display: grid;
    gap: var(--pheats-space-4);
    width: min(1240px, 100%);
    margin-inline: auto;
    padding-inline: clamp(0.5rem, 2vw, 1rem);
}

.feed-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pheats-space-3);
    padding: var(--pheats-space-2) 0;
}

.feed-topbar h2 {
    margin: 0;
    max-width: none !important;
    font-size: clamp(2rem, 6vw, 4.5rem) !important;
    color: var(--pheats-orange-bright) !important;
    text-shadow: 0 0 28px rgba(240, 60, 45, 0.28);
}

.feed-top-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.7rem;
}

.pheats-story-rail {
    display: flex;
    gap: clamp(0.9rem, 2vw, 1.4rem);
    padding: 0.4rem 0 1rem;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    scrollbar-width: thin;
}

.story-bubble {
    flex: 0 0 auto;
    display: grid !important;
    justify-items: center;
    gap: 0.55rem;
    width: 92px;
    min-height: 116px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--pheats-cream) !important;
}

.story-ring,
.feed-avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background:
        linear-gradient(#050303, #050303) padding-box,
        linear-gradient(135deg, var(--pheats-orange-bright), #ff3030, rgba(255,255,255,0.18)) border-box;
    border: 3px solid transparent;
}

.story-ring {
    width: 78px;
    height: 78px;
}

.story-ring img,
.feed-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-ring span,
.feed-avatar span {
    color: #fff;
    font-weight: 900;
    font-size: 1.5rem;
}

.story-bubble strong {
    width: 100%;
    color: var(--pheats-cream);
    font-size: 0.82rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pheats-feed-list {
    display: grid;
    gap: clamp(2.25rem, 5vw, 4rem);
}

.pheats-feed-post {
    display: grid;
    gap: var(--pheats-space-3);
    width: min(1120px, 100%);
    margin-inline: auto;
    padding: clamp(1.1rem, 2vw, 1.6rem) clamp(0.55rem, 1.6vw, 1rem) clamp(1.4rem, 3vw, 2.2rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.feed-post-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
}

.feed-avatar {
    width: 58px;
    height: 58px;
}

.feed-post-header h3 {
    margin: 0;
    color: var(--pheats-cream);
    font-size: clamp(1.35rem, 3vw, 1.85rem) !important;
}

.feed-post-header p {
    margin: 0.1rem 0 0;
    color: var(--pheats-muted) !important;
}

.feed-post-header p::first-letter {
    color: var(--pheats-orange-bright);
}

.feed-more-button {
    min-width: 44px !important;
    width: 44px;
    min-height: 44px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 1.35rem !important;
}

.feed-post-body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    min-height: min(560px, 56vh);
    overflow: hidden;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.035);
}

.feed-media-frame {
    min-height: 360px;
    background: #060404;
}

.feed-media-frame img,
.feed-media-frame video {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    display: block;
}

.sample-workout-visual {
    position: relative;
    display: grid;
    align-content: end;
    width: 100%;
    height: 100%;
    min-height: 360px;
    overflow: hidden;
    padding: clamp(1.4rem, 4vw, 2.4rem);
    color: var(--pheats-cream);
    background:
        radial-gradient(circle at 70% 18%, rgba(255, 65, 28, 0.34), transparent 28%),
        linear-gradient(145deg, rgba(40, 12, 8, 0.95), rgba(4, 3, 3, 0.98));
}

.sample-workout-visual::before {
    content: "";
    position: absolute;
    inset: 8%;
    border: 2px solid rgba(240, 122, 45, 0.2);
    border-radius: 34px;
    transform: rotate(-5deg);
}

.sample-workout-visual::after {
    content: "";
    position: absolute;
    inset: auto -8% -18% 18%;
    height: 48%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 58, 53, 0.28), transparent 64%);
    filter: blur(14px);
}

.sample-workout-visual.visual-legs {
    background:
        radial-gradient(circle at 72% 20%, rgba(255, 88, 38, 0.3), transparent 28%),
        linear-gradient(145deg, rgba(45, 11, 8, 0.95), rgba(6, 4, 4, 0.98));
}

.sample-workout-visual.visual-pull {
    background:
        radial-gradient(circle at 70% 20%, rgba(240, 122, 45, 0.34), transparent 28%),
        linear-gradient(145deg, rgba(31, 17, 10, 0.95), rgba(4, 3, 3, 0.98));
}

.sample-workout-visual.visual-push {
    background:
        radial-gradient(circle at 68% 18%, rgba(255, 58, 53, 0.32), transparent 28%),
        linear-gradient(145deg, rgba(46, 10, 8, 0.95), rgba(4, 3, 3, 0.98));
}

.sample-visual-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: clamp(110px, 22vw, 210px);
    height: clamp(110px, 22vw, 210px);
    border-radius: 50%;
    color: rgba(255, 109, 43, 0.58);
    background: rgba(255, 255, 255, 0.035);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 90px rgba(240, 83, 35, 0.18);
}

.sample-visual-mark svg {
    width: 48%;
    height: 48%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sample-workout-visual > div {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.45rem;
}

.sample-workout-visual small {
    color: var(--pheats-orange);
    font-weight: 800;
    text-transform: uppercase;
}

.sample-workout-visual strong {
    font-size: clamp(2rem, 5vw, 4.4rem);
    line-height: 0.9;
    text-transform: uppercase;
}

.sample-workout-visual p {
    margin: 0;
    color: var(--pheats-muted);
}

.feed-workout-panel {
    display: grid;
    align-content: center;
    gap: var(--pheats-space-2);
    padding: clamp(1.25rem, 3vw, 2rem);
    border-left: 3px solid var(--pheats-red);
    background:
        radial-gradient(circle at 100% 0%, rgba(240, 60, 45, 0.16), transparent 42%),
        linear-gradient(145deg, rgba(17, 15, 14, 0.96), rgba(8, 7, 7, 0.98));
}

.feed-panel-kicker {
    color: #ff3a35;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.feed-workout-panel h3 {
    margin: 0;
    color: var(--pheats-cream);
    font-size: clamp(1.65rem, 4vw, 2.55rem) !important;
    text-transform: uppercase !important;
}

.feed-exercise-list {
    display: grid;
    gap: 0.95rem;
}

.feed-exercise-list > div {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0.8rem;
    align-items: center;
}

.feed-lift-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #ff3a35;
    border-radius: 10px;
    background: rgba(255, 58, 53, 0.08);
    font-weight: 900;
}

.feed-exercise-list p {
    display: grid;
    gap: 0.15rem;
    margin: 0;
}

.feed-exercise-list strong {
    color: var(--pheats-cream);
    font-size: 1.02rem;
}

.feed-exercise-list small {
    color: var(--pheats-muted);
}

.feed-caption-block {
    display: grid;
    gap: 0.35rem;
}

.feed-caption-block p {
    margin: 0;
    color: var(--pheats-cream) !important;
    font-size: 1.08rem;
}

.feed-caption-block small {
    color: #ff3a35 !important;
    font-size: 1rem;
}

.feed-action-row {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 4vw, 3rem);
}

.feed-action-row button {
    display: inline-flex !important;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px !important;
    padding: 0.35rem 0 !important;
    border: 0 !important;
    color: var(--pheats-cream) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 1rem !important;
}

.feed-action-row button.active,
.feed-action-row button:hover {
    color: #ff3a35 !important;
}

.feed-like-button.active,
.feed-save-button.saved,
.quick-action-button.active {
    color: #fff !important;
    background: rgba(163, 40, 32, 0.18) !important;
}

.feed-heart-icon,
.feed-comment-icon,
.feed-save-button span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-weight: 900;
}

.feed-heart-icon svg,
.feed-comment-icon svg,
.feed-save-button svg,
.feed-lift-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feed-heart-icon svg {
    fill: rgba(255, 58, 53, 0.12);
}

.feed-action-row button.active .feed-heart-icon svg,
.feed-action-row button:hover .feed-heart-icon svg {
    fill: currentColor;
}

.feed-like-button.active .feed-heart-icon,
.feed-save-button.saved span,
.quick-action-button.active {
    border-color: var(--pheats-orange-bright) !important;
    box-shadow: 0 0 30px rgba(240, 83, 35, 0.42), inset 0 0 18px rgba(240, 83, 35, 0.16) !important;
}

.feed-like-button.active .feed-heart-icon svg,
.feed-save-button.saved svg {
    color: var(--pheats-orange-bright);
    fill: rgba(240, 83, 35, 0.34);
    stroke: var(--pheats-orange-bright);
}

.feed-save-button {
    margin-left: auto;
}

.feed-comment-strip p {
    margin: 0;
}

.feed-comment-strip strong {
    color: var(--pheats-cream);
}

.feed-comment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
}

/* Fuel AI loading state */
.fuel-loading-state {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(1.4rem, 4vw, 3rem);
    min-height: 340px;
    padding: clamp(1.2rem, 3vw, 2rem);
}

.fuel-loading-media {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(240, 122, 45, 0.26);
    background:
        radial-gradient(circle at 35% 15%, rgba(255, 70, 28, 0.22), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), 0 0 34px rgba(240, 83, 35, 0.2);
}

.fuel-loading-media img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    display: block;
    filter: saturate(1.05) contrast(1.04) brightness(0.82);
}

.fuel-loading-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: 0.45;
    pointer-events: none;
}

.fuel-loading-media::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    top: -25%;
    height: 28%;
    background: linear-gradient(180deg, transparent, rgba(255, 87, 34, 0.72), transparent);
    filter: blur(1px);
    animation: fuelScanSweep 1.55s ease-in-out infinite;
    pointer-events: none;
}

.fuel-scan-grid {
    position: absolute;
    inset: 1rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 109, 43, 0.36);
    box-shadow: inset 0 0 34px rgba(255, 75, 31, 0.15);
    pointer-events: none;
}

.fuel-loading-copy {
    display: grid;
    gap: 1rem;
    align-content: center;
    max-width: 560px;
}

.fuel-loading-copy h3 {
    margin: 0;
    color: var(--pheats-cream);
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.fuel-loading-copy p {
    margin: 0;
    max-width: 44ch;
    color: var(--pheats-muted);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.7;
}

.fuel-loader {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 38px;
}

.fuel-loader span {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--pheats-orange), var(--pheats-red));
    box-shadow: 0 0 24px rgba(255, 75, 31, 0.45);
    animation: fuelPulse 0.9s ease-in-out infinite;
}

.fuel-loader span:nth-child(2) {
    animation-delay: 0.14s;
}

.fuel-loader span:nth-child(3) {
    animation-delay: 0.28s;
}

@keyframes fuelScanSweep {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    14% {
        opacity: 1;
    }
    100% {
        transform: translateY(520%);
        opacity: 0;
    }
}

@keyframes fuelPulse {
    0%,
    100% {
        transform: translateY(0) scale(0.82);
        opacity: 0.52;
    }
    50% {
        transform: translateY(-8px) scale(1.08);
        opacity: 1;
    }
}

/* Engagement upgrades: auto share, player profile, useful notifications */
.notification-bell {
    position: relative;
    display: inline-grid !important;
    place-items: center;
    width: 46px;
    height: 46px;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(240, 122, 45, 0.28) !important;
    background: rgba(0, 0, 0, 0.34) !important;
    color: var(--pheats-cream) !important;
    box-shadow: none !important;
}

#user-info {
    position: relative;
}

.notification-bell svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-bell span {
    position: absolute;
    top: -5px;
    right: -4px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.28rem;
    border-radius: 999px;
    color: #fff;
    background: var(--pheats-red);
    font-size: 0.72rem;
    font-weight: 800;
}

.notification-tray {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 1rem;
    z-index: 40;
    width: min(380px, calc(100vw - 2rem));
    padding: 1rem;
    border-radius: 24px;
    border: 1px solid rgba(240, 122, 45, 0.24);
    background: rgba(10, 8, 7, 0.98);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.54);
}

.notification-tray-head,
.notification-list article {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.notification-tray-head {
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.notification-tray-head button {
    min-height: 34px !important;
    padding: 0.3rem 0.7rem !important;
    font-size: 0.82rem !important;
}

.notification-list {
    display: grid;
    gap: 0.7rem;
}

.notification-list article {
    padding: 0.8rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
}

.notification-list article.unread {
    background: rgba(240, 83, 35, 0.13);
}

.notification-list article > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 999px;
    color: var(--pheats-orange);
    background: rgba(240, 122, 45, 0.12);
}

.notification-list p {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    color: var(--pheats-cream);
    line-height: 1.35;
}

.notification-list small {
    color: var(--pheats-muted);
}

.auto-share-screen {
    max-width: 1180px;
    margin: 0 auto;
}

.auto-share-shell {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.5rem, 4vw, 3rem) !important;
}

.auto-share-shell h2 {
    margin: 0.2rem 0 0.8rem;
    color: var(--pheats-cream);
    font-size: clamp(2rem, 5vw, 4.8rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.auto-share-shell p {
    max-width: 68ch;
    color: var(--pheats-muted);
    line-height: 1.7;
}

.auto-share-card {
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid rgba(240, 122, 45, 0.25);
    background:
        radial-gradient(circle at 92% 12%, rgba(255, 45, 27, 0.2), transparent 36%),
        linear-gradient(145deg, rgba(20, 13, 10, 0.98), rgba(5, 4, 4, 0.98));
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

.auto-share-flame {
    padding: 1.2rem clamp(1.2rem, 3vw, 2rem) 0;
    color: var(--pheats-red);
    font-size: clamp(1.35rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.auto-share-main {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: stretch;
    padding: clamp(1.2rem, 3vw, 2rem);
}

.auto-share-main img,
.auto-share-photo-placeholder {
    width: 100%;
    min-height: 340px;
    border-radius: 26px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.045);
}

.auto-share-photo-placeholder {
    display: grid;
    place-items: center;
    color: var(--pheats-muted);
    border: 1px dashed rgba(240, 122, 45, 0.36);
}

.auto-share-main > div:last-child {
    display: grid;
    align-content: center;
    gap: 1rem;
}

.auto-share-main h3 {
    margin: 0;
    color: var(--pheats-cream);
    font-size: clamp(2rem, 5vw, 4.2rem);
    line-height: 0.95;
    text-transform: uppercase;
}

.auto-share-main strong {
    color: var(--pheats-orange);
    font-size: clamp(1.2rem, 3vw, 2rem);
}

.auto-share-fields {
    display: grid;
    grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
    gap: 1rem;
}

.auto-share-fields textarea {
    min-height: 96px;
    resize: vertical;
}

.auto-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.profile-player-card {
    max-width: 1180px;
}

.profile-legacy-hero {
    gap: clamp(1.5rem, 4vw, 3rem);
}

.profile-social-line {
    margin-top: 0.8rem;
    color: var(--pheats-muted);
}

.profile-wide-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-legacy-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
    gap: var(--pheats-space-4);
}

.profile-mini-chart {
    display: flex;
    align-items: end;
    gap: 0.65rem;
    min-height: 190px;
    padding: 1.2rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.035);
}

.profile-mini-chart span {
    flex: 1;
    min-width: 18px;
    border-radius: 999px 999px 10px 10px;
    background: linear-gradient(180deg, var(--pheats-red), var(--pheats-orange));
    box-shadow: 0 0 22px rgba(240, 83, 35, 0.24);
}

.favorite-exercise-list {
    display: grid;
    gap: 0.8rem;
}

.favorite-exercise-list p {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
}

.favorite-exercise-list span {
    color: var(--pheats-muted);
}

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

.profile-post-grid button {
    overflow: hidden;
    min-height: 190px !important;
    padding: 0 !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

.profile-post-grid img,
.profile-post-grid video {
    width: 100%;
    height: 100%;
    min-height: 190px;
    object-fit: cover;
}

/* Quality of life usability pass */
.pheats-brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    width: fit-content;
    max-width: 100%;
    color: var(--pheats-orange);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pheats-brand-mark img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(240, 83, 35, 0.34));
}

.pheats-brand-mark.hero-brand img {
    width: clamp(58px, 8vw, 86px);
    height: clamp(58px, 8vw, 86px);
}

.pheats-brand-mark.hero-brand span {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
}

.pheats-brand-mark.streak-brand {
    margin-bottom: 1rem;
    justify-self: center;
}

.pheats-brand-mark.streak-brand img {
    width: 54px;
    height: 54px;
}

.pheats-brand-mark.feed-brand img {
    width: 54px;
    height: 54px;
}

.pheats-brand-mark.share-brand {
    padding: 1rem clamp(1.2rem, 3vw, 2rem) 0;
}

.pheats-brand-mark.share-brand img {
    width: clamp(54px, 8vw, 84px);
    height: clamp(54px, 8vw, 84px);
}

.pheats-brand-mark.share-brand span {
    color: var(--pheats-red);
    font-size: clamp(1.25rem, 3vw, 2.2rem);
    text-shadow: 0 0 22px rgba(240, 83, 35, 0.32);
}

.pheats-brand-mark.profile-brand {
    margin-bottom: 0.55rem;
}

.pheats-brand-mark.profile-brand img {
    width: 44px;
    height: 44px;
}

.pheats-brand-mark.sample-brand {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    z-index: 2;
}

.pheats-brand-mark.sample-brand img,
.pheats-brand-mark.empty-brand img,
.pheats-brand-mark.mini-brand img {
    width: 34px;
    height: 34px;
}

.branded-empty {
    display: grid;
    justify-items: start;
    gap: 0.9rem;
}

.qol-home,
.qol-history,
.qol-achievements {
    position: relative;
    max-width: 1120px;
    margin-inline: auto;
    gap: clamp(2rem, 5vw, 4rem) !important;
}

.qol-daily-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.38fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    min-height: min(560px, 62vh);
    padding: clamp(2rem, 6vw, 4.5rem) !important;
}

.qol-daily-hero h2 {
    max-width: 12ch;
    margin: 0.25rem 0 1rem;
    color: var(--pheats-cream);
    font-size: clamp(2.8rem, 8vw, 6.8rem);
    line-height: 0.92;
    letter-spacing: 0;
}

.qol-daily-hero p {
    max-width: 58ch;
    color: var(--pheats-muted);
    font-size: clamp(1rem, 2vw, 1.22rem);
    line-height: 1.8;
}

.qol-helper-text {
    display: block;
    margin-top: 1rem;
    color: var(--pheats-orange);
}

.qol-streak-card {
    display: grid;
    place-items: center;
    min-height: 280px;
    padding: 2rem;
    border-radius: 34px;
    border: 1px solid rgba(240, 122, 45, 0.28);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 65, 28, 0.22), transparent 48%),
        rgba(255, 255, 255, 0.045);
    text-align: center;
}

.qol-streak-card span,
.qol-streak-card small {
    color: var(--pheats-muted);
}

.qol-streak-card strong {
    color: var(--pheats-orange);
    font-size: clamp(5rem, 12vw, 9rem);
    line-height: 0.9;
}

.qol-home-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
}

.qol-home-grid .simple-metric-card {
    min-height: 220px;
}

.qol-home-grid .simple-metric-card strong {
    overflow-wrap: anywhere;
}

.qol-filter-row {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    padding: 0.35rem 0 0.8rem;
    scrollbar-width: thin;
}

.qol-filter-row button {
    flex: 0 0 auto;
    min-height: 46px !important;
    padding: 0.75rem 1.15rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(240, 122, 45, 0.24) !important;
    color: var(--pheats-cream) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: none !important;
}

.qol-filter-row button.active,
.qol-filter-row button:hover {
    color: #fff !important;
    background: linear-gradient(135deg, var(--pheats-red), var(--pheats-orange)) !important;
}

.quick-action-button {
    position: fixed;
    right: clamp(1rem, 4vw, 2rem);
    bottom: clamp(5.5rem, 8vw, 7rem);
    z-index: 35;
    width: 64px;
    height: 64px;
    min-height: 64px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 2rem !important;
    box-shadow: 0 16px 48px rgba(240, 83, 35, 0.36) !important;
}

.quick-action-menu {
    position: fixed;
    right: clamp(1rem, 4vw, 2rem);
    bottom: clamp(10rem, 13vw, 11.5rem);
    z-index: 35;
    display: none;
    min-width: 220px;
    padding: 0.75rem;
    border-radius: 24px;
    border: 1px solid rgba(240, 122, 45, 0.24);
    background: rgba(8, 6, 5, 0.96);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.5);
}

.quick-action-menu.open {
    display: grid;
    gap: 0.65rem;
}

.quick-action-menu button {
    justify-content: flex-start;
    width: 100%;
    min-height: 46px !important;
    box-shadow: none !important;
}

.qol-undo-toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: min(420px, calc(100vw - 2rem));
    padding: 1rem;
    border-radius: 999px;
    border: 1px solid rgba(240, 122, 45, 0.28);
    color: var(--pheats-cream);
    background: rgba(8, 6, 5, 0.96);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.46);
    transform: translateX(-50%);
}

.qol-undo-toast span {
    flex: 1;
}

.qol-undo-toast button {
    min-height: 36px !important;
    padding: 0.35rem 0.8rem !important;
}

.qol-undo-toast .undo-close-btn {
    display: none !important;
    width: 28px;
    height: 28px;
    min-height: 28px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(240, 122, 45, 0.38) !important;
    background: rgba(163, 40, 32, 0.2) !important;
    color: #fff !important;
    font-size: 0.86rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.qol-undo-toast.can-dismiss .undo-close-btn {
    display: grid !important;
    place-items: center;
}

.qol-checklist > div:last-child {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.qol-checklist button {
    justify-content: flex-start;
    min-height: 54px !important;
    border: 1px solid rgba(240, 122, 45, 0.22) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: none !important;
}

.qol-checklist button.done {
    color: var(--pheats-orange) !important;
    background: rgba(240, 122, 45, 0.1) !important;
}

.qol-checklist button span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--pheats-red), var(--pheats-orange));
}

@media (max-width: 840px) {
    .feed-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .feed-top-actions {
        justify-content: flex-start;
    }

    .feed-post-body {
        grid-template-columns: 1fr;
    }

    .feed-workout-panel {
        border-left: 0;
        border-top: 3px solid var(--pheats-red);
    }

    .fuel-loading-state {
        grid-template-columns: 1fr;
    }

    .fuel-loading-media,
    .fuel-loading-media img {
        min-height: 230px;
    }

    .auto-share-main,
    .auto-share-fields,
    .profile-legacy-grid {
        grid-template-columns: 1fr;
    }

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

    .qol-daily-hero,
    .qol-home-grid {
        grid-template-columns: 1fr;
    }

    .qol-streak-card {
        min-height: 220px;
    }
}

@media (max-width: 620px) {
    .story-bubble {
        width: 76px;
    }

    .story-ring {
        width: 64px;
        height: 64px;
    }

    .feed-media-frame,
    .feed-media-frame img,
    .feed-media-frame video {
        min-height: 280px;
    }

    .feed-post-body {
        min-height: auto;
    }

    .feed-comment-form {
        grid-template-columns: 1fr;
    }
}

/* Scroll handling pass */
html {
    scroll-behavior: auto;
    scroll-padding-top: 0;
    scrollbar-gutter: auto;
    overscroll-behavior: auto;
}

body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: auto;
    touch-action: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(240, 122, 45, 0.58) rgba(255, 255, 255, 0.035);
}

body::-webkit-scrollbar,
.pheats-story-rail::-webkit-scrollbar,
.qol-filter-row::-webkit-scrollbar,
nav::-webkit-scrollbar {
    width: 11px;
    height: 8px;
}

body::-webkit-scrollbar-track,
.pheats-story-rail::-webkit-scrollbar-track,
.qol-filter-row::-webkit-scrollbar-track,
nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.035);
}

body::-webkit-scrollbar-thumb,
.pheats-story-rail::-webkit-scrollbar-thumb,
.qol-filter-row::-webkit-scrollbar-thumb,
nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 2px solid rgba(5, 3, 3, 0.92);
    background: linear-gradient(180deg, var(--pheats-orange), var(--pheats-red));
}

#main-content {
    overflow: visible !important;
}

#content {
    scroll-margin-top: 0;
    overscroll-behavior: auto;
}

#content > *,
.simple-screen,
.live-screen,
.dashboard-card,
.profile-showcase-card,
.pheats-feed-post {
    scroll-margin-top: 0;
}

.pheats-story-rail,
.qol-filter-row,
nav {
    overscroll-behavior-inline: auto;
    scroll-snap-type: none;
    scroll-padding-inline: 0;
    touch-action: auto;
    -webkit-overflow-scrolling: touch;
}

.pheats-story-rail > *,
.qol-filter-row > *,
nav > * {
    scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Launch demo visual sweep: no grey text, clearer hierarchy, brighter motion */
:root {
    --pheats-muted: rgba(255, 218, 190, 0.78);
    --pheats-dim: rgba(255, 173, 111, 0.68);
}

#content,
#content * {
    min-width: 0;
}

p,
small,
label,
.empty-note,
.profile-social-line,
.feed-caption-block p,
.feed-exercise-list small,
.notification-list small,
.favorite-exercise-list span,
.qol-helper-text,
.brand-tagline {
    color: rgba(255, 218, 190, 0.82) !important;
}

.eyebrow,
.form-kicker,
.feed-panel-kicker,
.pheats-brand-mark,
.card-title > span,
.simple-metric-card > span,
.profile-stat-tile span,
.badge-meta span {
    color: var(--pheats-orange-bright) !important;
}

h1,
h2,
h3,
h4,
strong,
.profile-record-item b,
.simple-metric-card strong,
.feed-workout-panel h3,
.auto-share-main h3 {
    color: var(--pheats-cream) !important;
    text-wrap: balance;
}

button,
.file-upload-control,
.dashboard-card,
.profile-showcase-card,
.badge-card,
.pheats-feed-post,
.auto-share-card,
.sample-workout-visual {
    animation-duration: 420ms;
    animation-timing-function: cubic-bezier(0.2, 0.85, 0.2, 1);
}

.dashboard-card,
.profile-showcase-card,
.badge-card,
.pheats-feed-post,
.auto-share-card {
    animation-name: pheatsRiseIn;
}

button:hover,
.file-upload-control:hover,
.badge-card:hover,
.pheats-feed-post:hover,
.profile-post-grid button:hover {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(240, 122, 45, 0.55) !important;
    box-shadow: 0 22px 70px rgba(240, 83, 35, 0.16), 0 0 28px rgba(240, 83, 35, 0.14) !important;
}

button:active,
.quick-action-button:active {
    transform: translateY(0) scale(0.98);
}

.quick-action-button,
.progress-fill,
.xp-endpoint,
.qol-streak-card strong,
.sample-visual-mark {
    animation: pheatsGlowPulse 2.4s ease-in-out infinite;
}

.badge-card.unlocked .badge-icon,
.profile-achievement-item:not(.locked) .profile-hex,
.dynamic-badge-icon {
    animation: pheatsBadgeFloat 2.8s ease-in-out infinite;
}

.badge-icon,
.profile-hex {
    color: var(--pheats-orange-bright) !important;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 123, 45, 0.24), transparent 48%),
        rgba(255, 255, 255, 0.045) !important;
}

.dynamic-badge-icon,
.dynamic-badge-icon svg {
    display: grid;
    place-items: center;
}

.dynamic-badge-icon svg {
    width: clamp(2.4rem, 5vw, 4rem);
    height: clamp(2.4rem, 5vw, 4rem);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.badge-card.locked {
    opacity: 0.7;
    filter: saturate(0.75);
}

.badge-card.locked .dynamic-badge-icon {
    opacity: 0.55;
    animation: none;
}

.simple-list-card,
.profile-activity-row,
.daily-command-row,
.recent-row,
.leaderboard-row,
.notification-list article {
    border-color: rgba(240, 122, 45, 0.18) !important;
    background: rgba(255, 111, 45, 0.055) !important;
}

.simple-list-card p,
.simple-list-card span,
.profile-activity-row span,
.recent-row span,
.leaderboard-row small {
    color: rgba(255, 218, 190, 0.82) !important;
}

input,
select,
textarea {
    color: var(--pheats-cream) !important;
    background: rgba(255, 111, 45, 0.075) !important;
    border-color: rgba(240, 122, 45, 0.26) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 194, 150, 0.62) !important;
}

.empty-state,
.branded-empty {
    border: 1px dashed rgba(240, 122, 45, 0.32);
    background:
        radial-gradient(circle at 20% 0%, rgba(240, 83, 35, 0.14), transparent 36%),
        rgba(255, 111, 45, 0.045) !important;
}

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

@keyframes pheatsGlowPulse {
    0%,
    100% {
        filter: drop-shadow(0 0 10px rgba(240, 83, 35, 0.2));
    }
    50% {
        filter: drop-shadow(0 0 24px rgba(240, 83, 35, 0.44));
    }
}

@keyframes pheatsBadgeFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-5px) rotate(-1.5deg);
    }
}

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

/* Launch hardening: terms, saved posts, upload progress, lively reactions */
.terms-gate {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(3, 2, 2, 0.84);
    backdrop-filter: blur(18px);
    pointer-events: auto !important;
}

.terms-card {
    display: grid;
    gap: 1.15rem;
    width: min(620px, 100%);
    padding: clamp(1.5rem, 5vw, 3rem);
    border-radius: 34px;
    border: 1px solid rgba(240, 122, 45, 0.34);
    background:
        radial-gradient(circle at 80% 0%, rgba(240, 83, 35, 0.2), transparent 34%),
        linear-gradient(145deg, rgba(22, 12, 8, 0.98), rgba(5, 3, 3, 0.98));
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.62);
    animation: pheatsRiseIn 420ms cubic-bezier(0.2, 0.85, 0.2, 1);
    pointer-events: auto !important;
}

.terms-card h2 {
    margin: 0;
    font-size: clamp(2rem, 6vw, 4.4rem);
    line-height: 0.95;
}

.terms-card p {
    margin: 0;
    line-height: 1.75;
}

.terms-scroll {
    max-height: 160px;
    overflow: auto;
    padding: 1rem;
    border-radius: 22px;
    border: 1px solid rgba(240, 122, 45, 0.2);
    background: rgba(255, 111, 45, 0.055);
}

.feed-save-button.saved {
    color: var(--pheats-orange-bright) !important;
}

.feed-save-button.saved span {
    background: rgba(240, 122, 45, 0.16);
    box-shadow: 0 0 24px rgba(240, 83, 35, 0.3);
}

.sizzling-heart {
    position: relative;
}

.feed-action-row button.reaction-sizzle .sizzling-heart,
.feed-action-row button.active .sizzling-heart {
    animation: fireSizzle 560ms ease-out;
}

.feed-action-row button.reaction-sizzle .reaction-count,
.feed-action-row button.active .reaction-count {
    animation: numberLift 420ms ease-out;
}

.reaction-count {
    display: inline-block;
    min-width: 1.5ch;
}

.fire-upload-progress {
    position: fixed;
    left: 50%;
    bottom: 6.5rem;
    z-index: 4200;
    display: grid;
    gap: 0.6rem;
    width: min(460px, calc(100vw - 2rem));
    padding: 1rem;
    border-radius: 22px;
    border: 1px solid rgba(240, 122, 45, 0.32);
    color: var(--pheats-cream);
    background: rgba(8, 5, 4, 0.96);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
    transform: translateX(-50%);
}

.fire-upload-progress > div {
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 111, 45, 0.12);
}

.fire-upload-progress > div span {
    display: block;
    height: 100%;
    min-width: 8%;
    border-radius: inherit;
    background:
        linear-gradient(90deg, var(--pheats-red), var(--pheats-orange-bright), #ffd0a3, var(--pheats-red));
    background-size: 220% 100%;
    box-shadow: 0 0 24px rgba(240, 83, 35, 0.42);
    animation: uploadFireFlow 1s linear infinite;
    transition: width 180ms ease;
}

.fire-upload-progress.done {
    animation: uploadDone 700ms ease forwards;
}

.avatar-upload-control {
    width: 100%;
}

.notification-tray {
    border-color: rgba(240, 122, 45, 0.38);
    background:
        radial-gradient(circle at 100% 0%, rgba(240, 83, 35, 0.18), transparent 36%),
        rgba(8, 5, 4, 0.98);
}

.notification-list article.unread {
    border: 1px solid rgba(240, 122, 45, 0.28);
    box-shadow: inset 3px 0 0 var(--pheats-orange);
}

@keyframes fireSizzle {
    0% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 0 rgba(240, 83, 35, 0));
    }
    42% {
        transform: scale(1.28) rotate(-7deg);
        filter: drop-shadow(0 0 22px rgba(240, 83, 35, 0.65));
    }
    68% {
        transform: scale(0.94) rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

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

@keyframes uploadFireFlow {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 220% 50%;
    }
}

@keyframes uploadDone {
    to {
        opacity: 0;
        transform: translate(-50%, 10px);
    }
}

.profile-link-avatar {
    min-height: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.profile-name-link {
    min-height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--pheats-cream) !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 1.35rem !important;
    font-weight: 850 !important;
    text-align: left;
}

.profile-name-link:hover {
    color: var(--pheats-orange-bright) !important;
    transform: none;
    box-shadow: none !important;
}

.public-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.profile-private-card {
    display: grid;
    gap: 1rem;
    max-width: 680px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) !important;
}

.profile-public-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid rgba(240, 122, 45, 0.22);
    background: rgba(255, 111, 45, 0.055);
}

.profile-public-toggle input {
    width: 20px;
    height: 20px;
    accent-color: var(--pheats-orange-bright);
}

/* Text containment repair pass */
.profile-player-card,
.public-profile-page,
.profile-player-card *,
.public-profile-page *,
.qol-home *,
.pheats-feed-post *,
.auto-share-card * {
    min-width: 0;
}

.profile-legacy-hero,
.profile-identity,
.profile-xp-row,
.profile-stat-row,
.profile-legacy-grid,
.profile-record-preview,
.profile-achievement-preview,
.profile-activity-row,
.profile-edit-panel,
.favorite-exercise-list p,
.card-title,
.simple-list-card,
.simple-metric-card {
    overflow: hidden;
}

.profile-identity {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center;
}

.profile-identity > div {
    min-width: 0;
}

.profile-identity h2,
.profile-motto,
.profile-social-line,
.profile-section-heading h3,
.profile-stat-tile strong,
.profile-stat-tile small,
.profile-record-item strong,
.profile-record-item b,
.profile-record-item small,
.profile-achievement-item strong,
.profile-achievement-item span,
.profile-activity-row strong,
.profile-activity-row span,
.favorite-exercise-list strong,
.favorite-exercise-list span,
.simple-metric-card strong,
.simple-metric-card small,
.card-title h3,
.feed-post-header h3,
.feed-post-header p,
.profile-name-link {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.profile-motto,
.profile-social-line,
.profile-record-item small,
.profile-achievement-item span,
.profile-activity-row span,
.simple-metric-card small,
.feed-post-header p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-identity h2 {
    font-size: clamp(2.1rem, 6vw, 5rem) !important;
    line-height: 0.95 !important;
}

.profile-stat-tile {
    display: grid !important;
    justify-items: center;
    align-content: center;
    min-height: 180px;
    padding: clamp(1.1rem, 2.5vw, 1.7rem) !important;
    text-align: center;
}

.profile-stat-tile strong {
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
    line-height: 1 !important;
}

.profile-record-preview,
.profile-achievement-preview {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: 1rem !important;
}

.profile-record-item,
.profile-achievement-item {
    min-height: 190px;
    padding: 1rem !important;
}

.profile-activity-row {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 1rem !important;
}

.profile-activity-row b {
    white-space: nowrap;
}

.profile-edit-panel {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.favorite-exercise-list p {
    align-items: flex-start;
}

.favorite-exercise-list span {
    text-align: right;
    overflow-wrap: anywhere;
}

@media (max-width: 980px) {
    .profile-wide-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    .profile-identity {
        grid-template-columns: 1fr !important;
        justify-items: center;
        text-align: center;
    }

    .profile-xp-row,
    .profile-activity-row {
        grid-template-columns: 1fr !important;
        justify-items: stretch;
        text-align: left;
    }

    .profile-wide-stats,
    .profile-record-preview,
    .profile-achievement-preview {
        grid-template-columns: 1fr !important;
    }

    .profile-stat-tile,
    .profile-record-item,
    .profile-achievement-item {
        min-height: auto;
    }
}

/* Final palette enforcement: no grey text */
:root {
    --pheats-cream: #fff7f0;
    --pheats-muted: #ffd8bd;
    --pheats-dim: #ffb36f;
}

body,
#content,
#content p,
#content small,
#content label,
#content span,
#content li,
#content td,
#content th,
#content input,
#content textarea,
#content select,
.auth-panel,
.auth-panel p,
.auth-panel small,
.auth-panel label,
.brand-tagline {
    color: var(--pheats-cream) !important;
}

#content .eyebrow,
#content .form-kicker,
#content .feed-panel-kicker,
#content .card-title > span,
#content .pheats-brand-mark,
#content .badge-meta span,
#content .qol-helper-text,
#content a,
.storage-status,
.profile-social-line,
.feed-caption-block small {
    color: var(--pheats-orange-bright) !important;
}

#content .locked,
#content .locked *,
#content .empty-note,
#content .empty-state p,
#content .empty-state small,
#content .form-help,
#content input::placeholder,
#content textarea::placeholder,
.notification-list small,
.feed-exercise-list small,
.profile-record-item small,
.profile-achievement-item span,
.profile-activity-row span,
.simple-metric-card small,
.favorite-exercise-list span {
    color: var(--pheats-muted) !important;
}

button,
#content button,
.file-upload-control {
    color: #fff !important;
}

.secondary-action,
.quiet-action,
.filter-btn,
.qol-filter-row button,
.section-subnav button:not(.active),
.quick-action-menu button {
    color: var(--pheats-cream) !important;
    background: rgba(163, 40, 32, 0.16) !important;
    border-color: rgba(240, 122, 45, 0.32) !important;
}

.secondary-action:hover,
.quiet-action:hover,
.filter-btn:hover,
.qol-filter-row button:hover,
.section-subnav button:hover {
    color: #fff !important;
    background: linear-gradient(135deg, var(--pheats-red), var(--pheats-orange)) !important;
}

#content input,
#content textarea,
#content select {
    background: #090504 !important;
    border-color: rgba(240, 122, 45, 0.38) !important;
}

#content input:disabled,
#content button:disabled,
#content select:disabled,
#content textarea:disabled {
    color: var(--pheats-dim) !important;
    opacity: 0.72;
}

.feed-post-header p,
.feed-post-header p *,
.feed-post-header p::first-letter {
    color: #fff !important;
}

.nutrition-log-card {
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    align-items: center;
}

.meal-copy,
.meal-macros {
    min-width: 0;
}

.meal-copy strong,
.meal-copy p,
.meal-macros small {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.meal-remove-btn {
    min-height: 40px !important;
    padding: 0.45rem 0.85rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(163, 40, 32, 0.48) !important;
    color: #fff !important;
    background: rgba(163, 40, 32, 0.22) !important;
    box-shadow: none !important;
    font-size: 0.86rem !important;
}

.meal-remove-btn:hover {
    background: linear-gradient(135deg, var(--pheats-red), var(--pheats-orange)) !important;
}

@media (max-width: 680px) {
    .nutrition-log-card {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .meal-macros,
    .meal-remove-btn {
        grid-column: 2;
        justify-self: start;
    }
}

/* File upload controls: circular action button with readable outside text. */
.file-upload-control {
    position: relative !important;
    max-width: 100% !important;
}

.file-upload-control input[type="file"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

.file-upload-control.circular-file-control,
#content .file-upload-control.circular-file-control {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.85rem !important;
    width: fit-content !important;
    min-width: 0 !important;
    min-height: 58px !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    overflow: visible !important;
}

.file-upload-control.circular-file-control:hover,
#content .file-upload-control.circular-file-control:hover {
    background: transparent !important;
    transform: translateY(-1px);
}

.file-circle {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 1.8rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 226, 125, 0.96), transparent 28%),
        linear-gradient(145deg, #ff2a1c 0%, #ff6a00 52%, #a32820 100%) !important;
    border: 1px solid rgba(255, 203, 119, 0.82) !important;
    box-shadow: 0 0 0 6px rgba(255, 91, 25, 0.12), 0 14px 30px rgba(255, 58, 20, 0.34) !important;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}

.file-upload-control.circular-file-control:hover .file-circle {
    transform: scale(1.06) rotate(-3deg);
    filter: saturate(1.18);
    box-shadow: 0 0 0 8px rgba(255, 91, 25, 0.16), 0 18px 36px rgba(255, 58, 20, 0.45) !important;
}

.video-file-circle {
    font-size: 1.25rem !important;
    padding-left: 0.15rem;
}

.file-label,
.file-upload-control.circular-file-control .file-label {
    display: block !important;
    min-width: 0 !important;
    max-width: min(34ch, calc(100vw - 7rem)) !important;
    color: #fff !important;
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.file-upload-control.circular-file-control .form-help {
    max-width: min(30ch, calc(100vw - 7rem)) !important;
    color: #fff !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
}

.compact-upload-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 1.15rem 1.5rem !important;
    min-width: 0 !important;
}

.nutrition-upload.circular-file-control,
.avatar-upload-control.circular-file-control {
    margin-top: 0.25rem !important;
}

@media (max-width: 560px) {
    .file-upload-control.circular-file-control,
    #content .file-upload-control.circular-file-control {
        width: 100% !important;
        min-height: 62px !important;
    }

    .file-circle {
        flex-basis: 50px !important;
        width: 50px !important;
        height: 50px !important;
    }

    .file-label,
    .file-upload-control.circular-file-control .file-label {
        font-size: 0.92rem !important;
        max-width: calc(100vw - 8rem) !important;
    }
}

/* Streamlined profile editor. */
.profile-settings-card {
    padding: clamp(1.25rem, 3vw, 2rem) !important;
}

.profile-settings-card .profile-section-heading {
    margin-bottom: 1.25rem !important;
}

.profile-settings-card .profile-edit-panel {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    align-items: end !important;
    overflow: visible !important;
}

.profile-settings-card .avatar-upload-control {
    grid-column: 1 / -1;
    width: fit-content !important;
    margin: 0 0 0.35rem !important;
}

.profile-settings-card .profile-public-toggle {
    grid-column: 1 / -1;
    width: fit-content !important;
    margin: 0.15rem 0 !important;
}

.profile-settings-card .profile-edit-panel input[type="text"] {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 0.95rem 1.05rem !important;
    border-radius: 18px !important;
    color: #fff !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
}

.profile-settings-card .profile-edit-panel input::placeholder {
    color: #fff !important;
    opacity: 0.72 !important;
}

.profile-settings-card .profile-edit-panel .follow-btn {
    grid-column: 1 / -1;
    width: 100% !important;
    min-height: 56px !important;
    border-radius: 999px !important;
    margin-top: 0.25rem !important;
}

@media (max-width: 720px) {
    .profile-settings-card .profile-edit-panel {
        grid-template-columns: 1fr !important;
        gap: 0.9rem !important;
    }

    .profile-settings-card .avatar-upload-control,
    .profile-settings-card .profile-public-toggle {
        width: 100% !important;
    }
}

.install-pwa-btn {
    min-height: 40px !important;
    padding: 0.65rem 1rem !important;
    border: 1px solid rgba(255, 203, 119, 0.58) !important;
    border-radius: 999px !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 28% 20%, rgba(255, 226, 125, 0.55), transparent 30%),
        linear-gradient(135deg, #ff2a1c, #ff6a00) !important;
    box-shadow: 0 12px 28px rgba(255, 58, 20, 0.28) !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}

.install-pwa-btn:hover {
    transform: translateY(-1px) scale(1.02);
    filter: saturate(1.15);
    box-shadow: 0 16px 34px rgba(255, 58, 20, 0.4) !important;
}

.install-pwa-btn[hidden] {
    display: none !important;
}

@media (max-width: 680px) {
    #user-info .install-pwa-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

.notification-bell {
    pointer-events: auto !important;
    z-index: 120 !important;
}

.notification-tray {
    position: fixed !important;
    top: calc(var(--app-header-height, 82px) + 0.75rem) !important;
    right: clamp(0.75rem, 3vw, 2rem) !important;
    z-index: 5000 !important;
    width: min(390px, calc(100vw - 1.5rem)) !important;
    max-height: min(70vh, 560px) !important;
    overflow-y: auto !important;
}

.notification-list article > span {
    min-width: 44px !important;
    height: 34px !important;
    padding: 0 0.55rem !important;
    border-radius: 999px !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

.blank-workout-state {
    display: grid;
    gap: 0.45rem;
    min-height: 150px;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px dashed rgba(240, 122, 45, 0.48);
    border-radius: 24px;
    background:
        radial-gradient(circle at 10% 0%, rgba(255, 106, 0, 0.14), transparent 34%),
        rgba(10, 5, 4, 0.72);
    align-content: center;
}

.blank-workout-state strong,
.blank-workout-state p {
    max-width: 48ch;
    color: #fff !important;
    overflow-wrap: anywhere;
}

.blank-workout-state strong {
    font-size: clamp(1.15rem, 3vw, 1.75rem);
}

.blank-workout-state p {
    margin: 0;
    line-height: 1.45;
}

/* Sign-in create-account toggle: brighter, charged, and still readable. */
.sign-in-card .switch-label {
    position: relative !important;
    isolation: isolate !important;
    align-items: center !important;
    gap: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    cursor: pointer !important;
}

.sign-in-card .switch-label input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

.sign-in-card .switch-label span {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    max-width: 100% !important;
    padding: 0.7rem 1rem 0.7rem 2.2rem !important;
    border: 1px solid rgba(255, 203, 119, 0.74) !important;
    border-radius: 999px !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 238, 150, 0.95), transparent 16%),
        linear-gradient(135deg, #ff2218 0%, #ff6a00 48%, #b01614 100%) !important;
    box-shadow: 0 0 0 5px rgba(255, 91, 25, 0.1), 0 16px 32px rgba(255, 58, 20, 0.36) !important;
    font-size: 0.86rem !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42) !important;
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease !important;
}

.sign-in-card .switch-label span::before {
    content: "";
    position: absolute;
    left: 0.76rem;
    width: 0.74rem;
    height: 1.35rem;
    background: #fff;
    clip-path: polygon(58% 0, 10% 55%, 48% 55%, 32% 100%, 92% 38%, 55% 38%);
    filter: drop-shadow(0 0 8px rgba(255, 238, 150, 0.9));
}

.sign-in-card .switch-label span::after {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    opacity: 0;
    transform: translateX(-35%);
}

.sign-in-card .switch-label:hover span,
.sign-in-card .switch-label:focus-within span {
    transform: translateY(-2px) scale(1.03);
    filter: saturate(1.22);
    box-shadow: 0 0 0 7px rgba(255, 91, 25, 0.14), 0 20px 42px rgba(255, 58, 20, 0.5) !important;
}

.sign-in-card .switch-label:hover span::after,
.sign-in-card .switch-label:focus-within span::after {
    animation: pheatsElectricSweep 850ms ease;
}

.sign-in-card .switch-label input:checked + span {
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 250, 190, 0.98), transparent 17%),
        linear-gradient(135deg, #ff6a00 0%, #ff2a1c 48%, #7c0e0a 100%) !important;
    box-shadow: 0 0 0 7px rgba(255, 91, 25, 0.18), 0 0 34px rgba(255, 106, 0, 0.58) !important;
}

@keyframes pheatsElectricSweep {
    0% {
        opacity: 0;
        transform: translateX(-45%);
    }
    35% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateX(45%);
    }
}

@media (max-width: 540px) {
    .sign-in-card-header {
        align-items: stretch !important;
    }

    .sign-in-card .switch-label,
    .sign-in-card .switch-label span {
        width: 100% !important;
    }
}

.badge-card .badge-description,
.profile-achievement-description {
    display: block !important;
    max-width: 100% !important;
    color: #fff !important;
    font-size: 0.92rem !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

.badge-card .badge-status,
.badge-card .badge-flavor,
.profile-achievement-item small {
    display: block !important;
    max-width: 100% !important;
    margin-top: 0.45rem !important;
    color: var(--pheats-orange) !important;
    font-size: 0.82rem !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
}

.profile-achievement-item {
    gap: 0.55rem !important;
}

/* Front-end QoL layer: empty states, accessibility, and calmer spacing. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(255, 203, 119, 0.96) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 7px rgba(255, 91, 25, 0.18) !important;
}

#content,
#content * {
    min-width: 0;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content strong,
#content p,
#content span,
#content small,
#content button,
#content label,
#content input,
#content textarea,
#content select {
    overflow-wrap: anywhere;
    word-break: normal;
}

.pheats-empty-state {
    display: grid !important;
    justify-items: start !important;
    gap: 0.8rem !important;
    min-height: 220px !important;
    padding: clamp(1.4rem, 4vw, 2.4rem) !important;
    border-style: dashed !important;
    border-color: rgba(240, 122, 45, 0.46) !important;
    background:
        radial-gradient(circle at 14% 12%, rgba(255, 106, 0, 0.18), transparent 32%),
        linear-gradient(145deg, rgba(14, 4, 3, 0.96), rgba(5, 2, 2, 0.96)) !important;
}

.pheats-empty-state .empty-flame-mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, var(--pheats-red), var(--pheats-orange));
    box-shadow: 0 0 34px rgba(255, 74, 20, 0.38);
    font-weight: 950;
}

.pheats-empty-state strong {
    color: #fff !important;
    font-size: clamp(1.35rem, 4vw, 2.25rem) !important;
    line-height: 1.05 !important;
}

.pheats-empty-state p,
.inline-empty-copy {
    color: #fff !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.qol-notification-tray .notification-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

.qol-notification-tray .notification-actions button {
    min-height: 34px !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: 999px !important;
    font-size: 0.76rem !important;
}

.delete-notifications-btn {
    background: linear-gradient(135deg, var(--pheats-red), var(--pheats-orange)) !important;
}

.duplicate-row-btn,
.finish-workout-btn,
.saved-profile-shortcut {
    min-height: 44px !important;
    padding: 0.65rem 1rem !important;
    border-radius: 999px !important;
    color: #fff !important;
    border: 1px solid rgba(240, 122, 45, 0.42) !important;
    background: rgba(163, 40, 32, 0.2) !important;
}

.finish-workout-btn,
.saved-profile-shortcut {
    background: linear-gradient(135deg, var(--pheats-red), var(--pheats-orange)) !important;
    box-shadow: 0 14px 30px rgba(255, 58, 20, 0.28) !important;
}

.privacy-preview-row {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid rgba(240, 122, 45, 0.3);
    border-radius: 22px;
    background: rgba(10, 4, 3, 0.72);
}

.privacy-preview-row p {
    margin: 0;
    color: #fff !important;
    line-height: 1.45;
}

.privacy-status-chip {
    width: fit-content;
    max-width: 100%;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    color: #fff !important;
    background: rgba(163, 40, 32, 0.24);
    border: 1px solid rgba(240, 122, 45, 0.46);
    font-size: 0.8rem;
    font-weight: 900;
}

.privacy-status-chip.public {
    background: linear-gradient(135deg, rgba(163, 40, 32, 0.5), rgba(255, 106, 0, 0.42));
}

.moderation-helper-strip {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 1.15rem;
    padding: clamp(1rem, 3vw, 1.35rem);
    border: 1px solid rgba(240, 122, 45, 0.36);
    border-radius: 22px;
    background:
        radial-gradient(circle at 8% 20%, rgba(255, 106, 0, 0.16), transparent 28%),
        rgba(7, 3, 3, 0.84);
}

.moderation-helper-strip strong,
.moderation-helper-strip p {
    color: #fff !important;
}

.moderation-helper-strip p {
    margin: 0;
    line-height: 1.45;
}

.pheats-offline-card {
    min-height: 100vh;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 50% 15%, rgba(255, 106, 0, 0.22), transparent 32%),
        #050100;
}

.pheats-offline-card img {
    width: min(160px, 40vw);
    height: auto;
}

.pheats-offline-card h1,
.pheats-offline-card p,
.pheats-offline-card a {
    color: #fff !important;
    max-width: 520px;
}

.pheats-offline-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 1.2rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--pheats-red), var(--pheats-orange));
    text-decoration: none;
    font-weight: 900;
}

@media (max-width: 680px) {
    .qol-notification-tray .notification-tray-head {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .qol-notification-tray .notification-actions,
    .qol-notification-tray .notification-actions button,
    .duplicate-row-btn,
    .finish-workout-btn,
    .saved-profile-shortcut {
        width: 100% !important;
    }
}

/* Launch polish pass: stronger hierarchy, calmer borders, stricter type rhythm. */
:root {
    --pheats-type-xs: 0.78rem;
    --pheats-type-sm: 0.9rem;
    --pheats-type-base: 1rem;
    --pheats-type-md: 1.12rem;
    --pheats-type-lg: clamp(1.45rem, 4vw, 2.25rem);
    --pheats-type-xl: clamp(2.4rem, 8vw, 5.6rem);
}

.dashboard-card,
.simple-list-card,
.profile-showcase-card,
.nutrition-log-card,
.feed-workout-card,
.profile-feed-card,
.challenge-card,
.template-card,
.badge-card {
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34) !important;
}

.dashboard-card:hover,
.simple-list-card:hover,
.feed-workout-card:hover,
.badge-card:hover {
    border-color: rgba(240, 122, 45, 0.36) !important;
}

.simple-hero,
.hero-prime,
.vault-hero,
.log-hero,
.nutrition-hero,
.feed-topbar {
    border-color: rgba(240, 122, 45, 0.42) !important;
    box-shadow: 0 24px 70px rgba(255, 58, 20, 0.16), 0 24px 80px rgba(0, 0, 0, 0.45) !important;
}

#content h1,
.sign-in-copy h1 {
    font-size: var(--pheats-type-xl) !important;
    line-height: 0.98 !important;
    letter-spacing: 0 !important;
}

#content h2,
.simple-hero h2,
.hero-prime h2,
.feed-topbar h2 {
    font-size: var(--pheats-type-lg) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
}

#content h3,
#content h4,
.card-title h3,
.badge-card h3,
.profile-section-heading h3 {
    letter-spacing: 0 !important;
    line-height: 1.12 !important;
}

.eyebrow,
.form-kicker,
.small-label,
.card-title span,
.badge-meta span,
.profile-stat-tile small,
.simple-metric-card small,
.feed-post-header p,
.feed-post-caption small,
.notification-list small {
    font-size: var(--pheats-type-xs) !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    font-weight: 800 !important;
}

#content p,
#content li,
.home-platform-copy,
.badge-description,
.profile-achievement-description {
    font-size: var(--pheats-type-base) !important;
    line-height: 1.5 !important;
}

#content button:not(.secondary-action):not(.quiet-action):not(.filter-btn):not(.section-subnav button):not(.quick-action-menu button),
.sign-in-card #submit-btn {
    box-shadow: 0 16px 34px rgba(255, 58, 20, 0.28) !important;
}

.sign-in-copy {
    max-width: min(720px, 100%) !important;
}

.sign-in-copy p {
    max-width: 58ch !important;
    color: #fff !important;
    font-size: clamp(1rem, 2.2vw, 1.22rem) !important;
}

.form-kicker {
    color: var(--pheats-orange) !important;
}

.storage-status {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

@media (max-width: 680px) {
    .simple-hero,
    .hero-prime,
    .vault-hero,
    .log-hero,
    .nutrition-hero {
        padding: clamp(1.25rem, 6vw, 1.85rem) !important;
    }
}

/* Production PWA mobile shell. */
html {
    width: 100%;
    overflow-x: hidden !important;
    background: #050100;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
    -webkit-tap-highlight-color: rgba(255, 106, 0, 0.18);
    touch-action: auto;
}

#app,
#main-content,
#content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

button,
a,
input,
textarea,
select,
.file-upload-control,
.story-bubble,
.feed-action-button,
.feed-save-button,
.profile-name-link {
    min-height: 44px;
}

button,
a,
.file-upload-control {
    -webkit-user-select: none;
    user-select: none;
}

button:active,
.feed-action-button:active,
.feed-save-button:active,
.story-bubble:active,
.simple-list-card:active {
    transform: translateY(1px) scale(0.98) !important;
    filter: saturate(1.1);
}

@media (max-width: 760px) {
    :root {
        --app-header-height: 68px;
    }

    body {
        overscroll-behavior-y: contain;
        touch-action: pan-y;
    }

    body.is-authenticated {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    body.is-authenticated header {
        min-height: calc(var(--app-header-height) + env(safe-area-inset-top)) !important;
        padding: calc(0.55rem + env(safe-area-inset-top)) 1rem 0.55rem !important;
    }

    .logo-image {
        max-height: 46px !important;
    }

    #user-info {
        gap: 0.4rem !important;
        padding: 0.25rem !important;
        background: transparent !important;
        border-color: transparent !important;
    }

    #user-name,
    .storage-status {
        display: none !important;
    }

    #logout-btn,
    .install-pwa-btn {
        min-height: 38px !important;
        padding: 0.45rem 0.7rem !important;
        font-size: 0.72rem !important;
    }

    body.is-authenticated nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 4200 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0.42rem max(0.45rem, env(safe-area-inset-left)) calc(0.42rem + env(safe-area-inset-bottom)) max(0.45rem, env(safe-area-inset-right)) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-bottom: 0 !important;
        border-radius: 0 !important;
        background: rgba(5, 1, 0, 0.94) !important;
        box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.58) !important;
        backdrop-filter: blur(18px);
    }

    body.is-authenticated nav button {
        display: grid !important;
        justify-items: center !important;
        align-content: center !important;
        gap: 0.2rem !important;
        min-width: 0 !important;
        min-height: 58px !important;
        padding: 0.35rem 0.2rem !important;
        border: 0 !important;
        border-radius: 18px !important;
        background: transparent !important;
        color: #fff !important;
        font-size: 0.72rem !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    body.is-authenticated nav button.active {
        background: linear-gradient(180deg, rgba(255, 106, 0, 0.22), rgba(163, 40, 32, 0.14)) !important;
        color: #fff !important;
    }

    body.is-authenticated nav .nav-icon {
        width: 24px !important;
        height: 24px !important;
    }

    body.is-authenticated nav .nav-icon svg {
        width: 22px !important;
        height: 22px !important;
    }

    body.is-authenticated nav #community-tab {
        order: 1;
    }

    body.is-authenticated nav #nutrition-tab {
        order: 2;
    }

    body.is-authenticated nav #add-workout-btn {
        order: 3;
        transform: translateY(-10px) !important;
        border-radius: 22px !important;
        background:
            radial-gradient(circle at 30% 20%, rgba(255, 226, 125, 0.72), transparent 28%),
            linear-gradient(145deg, var(--pheats-red), var(--pheats-orange)) !important;
        box-shadow: 0 14px 30px rgba(255, 58, 20, 0.36) !important;
    }

    body.is-authenticated nav #home-tab {
        order: 4;
    }

    body.is-authenticated nav #profile-tab {
        order: 5;
    }

    #main-content {
        padding: calc(var(--app-header-height) + env(safe-area-inset-top) + 0.75rem) clamp(0.85rem, 4vw, 1.1rem) calc(6rem + env(safe-area-inset-bottom)) !important;
    }

    #content {
        display: grid;
        gap: 1rem;
    }

    .dashboard-card,
    .simple-list-card,
    .profile-showcase-card,
    .feed-workout-card,
    .badge-card,
    .nutrition-log-card {
        border-radius: 22px !important;
        padding: clamp(1rem, 4vw, 1.35rem) !important;
    }

    .feed-media-layout,
    .profile-legacy-grid,
    .profile-record-preview,
    .profile-achievement-preview,
    .profile-wide-stats,
    .badge-grid,
    .quick-stats,
    .metric-grid {
        grid-template-columns: 1fr !important;
    }

    .feed-card-media,
    .feed-card-detail {
        min-height: 220px !important;
    }

    input,
    textarea,
    select {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    textarea {
        min-height: 112px !important;
    }

    .exercise-row,
    .clean-exercise-row,
    .premium-exercise-row {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .notification-tray {
        top: calc(var(--app-header-height) + env(safe-area-inset-top) + 0.5rem) !important;
    }
}

@media (display-mode: standalone) {
    body {
        background: #050100;
    }
}

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

/* Desktop/trackpad scroll recovery. Keep native scrolling on pointer devices. */
@media (hover: hover) and (pointer: fine) {
    html,
    body {
        overflow-y: auto !important;
        overscroll-behavior: auto !important;
        touch-action: auto !important;
    }

    #app,
    #main-content,
    #content {
        overflow-y: visible !important;
        touch-action: auto !important;
    }
}

/* Home cleanup + tab containment. */
body.tab-home #content::before,
.daily-home-screen::before,
.qol-home::before,
.qol-daily-hero::before,
.qol-daily-hero::after {
    display: none !important;
    content: none !important;
}

.qol-daily-hero,
.daily-home-screen .simple-hero {
    background:
        radial-gradient(circle at 88% 16%, rgba(255, 74, 20, 0.12), transparent 30%),
        linear-gradient(145deg, rgba(12, 4, 3, 0.96), rgba(4, 1, 1, 0.98)) !important;
}

.section-subnav,
.profile-subnav {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    padding: 0.2rem 0.25rem 0.4rem !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.section-subnav button,
.profile-subnav button,
.profile-subnav-btn {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    max-width: min(58vw, 240px) !important;
    min-width: fit-content !important;
    min-height: 46px !important;
    padding-inline: 1.15rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.section-subnav button *,
.profile-subnav button *,
.profile-subnav-btn * {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (min-width: 761px) {
    body.is-authenticated nav {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: thin;
    }

    body.is-authenticated nav button {
        flex: 0 1 auto !important;
        min-width: max-content !important;
        max-width: 180px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 520px) {
    .section-subnav button,
    .profile-subnav button,
    .profile-subnav-btn {
        max-width: 56vw !important;
        padding-inline: 0.95rem !important;
        font-size: 0.8rem !important;
    }
}

/* Auth/mobile logo integrity. */
.logo-brand {
    align-items: flex-start !important;
}

.logo-image {
    display: block !important;
    width: min(320px, 42vw) !important;
    max-width: 320px !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
}

body:not(.is-authenticated) .logo-image {
    width: clamp(132px, 38vw, 260px) !important;
    height: auto !important;
    max-height: none !important;
}

@media (max-width: 760px) {
    body:not(.is-authenticated) .logo-brand {
        position: static !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        margin: calc(0.75rem + env(safe-area-inset-top)) auto 0 !important;
    }

    body:not(.is-authenticated) header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        gap: 0.75rem !important;
        min-height: auto !important;
        padding: 0.75rem 1rem 1rem !important;
    }

    body:not(.is-authenticated) .logo-image {
        width: min(58vw, 210px) !important;
        min-width: 132px !important;
        height: auto !important;
        max-height: none !important;
    }

    body.is-authenticated .logo-image {
        width: min(148px, 34vw) !important;
        height: auto !important;
        max-height: 46px !important;
        object-fit: contain !important;
    }
}

@media (max-width: 420px) {
    body:not(.is-authenticated) .logo-image {
        width: min(64vw, 190px) !important;
    }
}

/* Desktop nav placement: keep the tab rail tucked under the header. */
@media (min-width: 761px) {
    body.is-authenticated #main-content {
        padding-top: calc(var(--app-header-height, 82px) + 0.35rem) !important;
    }

    body.is-authenticated nav {
        top: var(--app-header-height, 82px) !important;
        margin: 0 auto 1rem !important;
        padding: 0.55rem 0.75rem !important;
        border-radius: 0 0 24px 24px !important;
    }

    body.is-authenticated #content {
        padding-top: 0 !important;
    }

    .section-subnav,
    .profile-subnav {
        margin-top: 0 !important;
        margin-bottom: 1rem !important;
    }
}

/* Scroll and tab rail repair. Desktop should use normal browser/trackpad scrolling. */
html,
body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: auto !important;
    touch-action: auto !important;
    scrollbar-gutter: auto !important;
    scroll-padding-top: 0 !important;
}

#app,
#main-content,
#content,
.simple-screen,
.daily-home-screen {
    height: auto !important;
    min-height: 0 !important;
    overflow-y: visible !important;
    overscroll-behavior: auto !important;
}

@media (min-width: 761px) {
    body.is-authenticated nav {
        position: sticky !important;
        top: var(--app-header-height, 82px) !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.7rem !important;
        width: fit-content !important;
        max-width: min(920px, calc(100vw - 2rem)) !important;
        margin: 0 auto 1.2rem !important;
        padding: 0.58rem 0.85rem !important;
        border-radius: 0 0 24px 24px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior: auto !important;
        touch-action: auto !important;
    }

    body.is-authenticated nav button {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 112px !important;
        max-width: none !important;
        padding-inline: 1.15rem !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    body.is-authenticated #main-content {
        padding-top: calc(var(--app-header-height, 82px) + 0.75rem) !important;
    }
}

.section-subnav,
.profile-subnav {
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.7rem !important;
    padding: 0.35rem 0.45rem 0.5rem !important;
}

.section-subnav button,
.profile-subnav button,
.profile-subnav-btn {
    max-width: none !important;
    min-width: max-content !important;
    padding-inline: 1.35rem !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

@media (max-width: 760px) {
    body {
        overscroll-behavior-y: auto !important;
        touch-action: auto !important;
    }

    body.is-authenticated nav {
        overflow: visible !important;
    }

    body.is-authenticated nav button {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .section-subnav,
    .profile-subnav {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-inline: 0.5rem !important;
    }

    .section-subnav button,
    .profile-subnav button,
    .profile-subnav-btn {
        max-width: none !important;
        min-width: max-content !important;
        padding-inline: 1.2rem !important;
    }
}

/* iPhone installed-PWA polish. */
:root {
    --visual-keyboard-offset: 0px;
}

@media (max-width: 760px) {
    html {
        background: #050100 !important;
    }

    body {
        min-width: 0 !important;
        background: #050100 !important;
        color: #fff7f2 !important;
        -webkit-tap-highlight-color: rgba(255, 82, 22, 0.18);
    }

    body.is-authenticated header {
        padding-top: calc(0.5rem + env(safe-area-inset-top)) !important;
        padding-left: max(0.9rem, env(safe-area-inset-left)) !important;
        padding-right: max(0.9rem, env(safe-area-inset-right)) !important;
    }

    body.is-authenticated #main-content {
        padding-left: max(0.9rem, env(safe-area-inset-left)) !important;
        padding-right: max(0.9rem, env(safe-area-inset-right)) !important;
        padding-bottom: calc(7.35rem + env(safe-area-inset-bottom)) !important;
    }

    body.is-authenticated nav {
        position: fixed !important;
        left: max(0.6rem, env(safe-area-inset-left)) !important;
        right: max(0.6rem, env(safe-area-inset-right)) !important;
        bottom: max(0.45rem, env(safe-area-inset-bottom)) !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0.35rem !important;
        padding: 0.45rem !important;
        border-radius: 26px !important;
        background:
            linear-gradient(145deg, rgba(22, 7, 5, 0.98), rgba(6, 1, 1, 0.98)) !important;
        border: 1px solid rgba(255, 92, 28, 0.3) !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
        z-index: 900 !important;
        transform: translateY(0) !important;
        transition: transform 220ms ease, border-color 180ms ease, background 180ms ease !important;
    }

    body.keyboard-open.is-authenticated nav {
        transform: translateY(calc(110% + env(safe-area-inset-bottom))) !important;
    }

    body.is-authenticated nav button {
        min-height: 56px !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 0.35rem 0.2rem !important;
        border-radius: 18px !important;
        font-size: clamp(0.68rem, 2.8vw, 0.82rem) !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        touch-action: manipulation !important;
        transition: transform 140ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease !important;
    }

    body.is-authenticated nav button:active {
        transform: scale(0.94) !important;
    }

    body.is-authenticated nav button.active {
        background: linear-gradient(135deg, #ff5a1f, #df1f16) !important;
        color: #050100 !important;
        border-color: rgba(255, 132, 54, 0.9) !important;
        box-shadow: 0 10px 24px rgba(255, 62, 19, 0.26) !important;
    }

    body.is-authenticated nav .nav-icon {
        width: 21px !important;
        height: 21px !important;
        margin-bottom: 0.18rem !important;
    }

    input,
    textarea,
    select,
    button {
        font-size: 16px !important;
    }

    #workout-form,
    .clean-log-card,
    .nutrition-screen,
    .auth-panel,
    .profile-screen {
        scroll-margin-bottom: 42vh !important;
    }

    #workout-form input,
    #workout-form textarea,
    #workout-form select,
    .nutrition-screen input,
    .nutrition-screen textarea,
    .nutrition-screen select {
        min-height: 52px !important;
        border-radius: 18px !important;
        padding: 0.95rem 1rem !important;
        line-height: 1.25 !important;
    }

    .exercise-row,
    .clean-exercise-row {
        gap: 0.85rem !important;
    }
}

.ios-install-prompt {
    position: fixed;
    left: max(0.9rem, env(safe-area-inset-left));
    right: max(0.9rem, env(safe-area-inset-right));
    bottom: calc(6.7rem + env(safe-area-inset-bottom));
    z-index: 1200;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid rgba(255, 92, 28, 0.42);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(14, 4, 3, 0.98), rgba(5, 1, 1, 0.98));
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 75, 22, 0.12);
    color: #fff7f2;
}

.ios-install-prompt strong,
.ios-install-prompt p {
    margin: 0;
}

.ios-install-prompt p {
    margin-top: 0.15rem;
    color: #ffd8c7 !important;
    font-size: 0.86rem;
}

.ios-install-primary,
.ios-install-close {
    min-height: 46px;
    border: 0;
    border-radius: 999px;
    padding: 0.7rem 1rem;
    background: linear-gradient(135deg, #ff671f, #e32015);
    color: #090100;
    font-weight: 800;
    cursor: pointer;
}

.ios-install-dismiss {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 214, 196, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff7f2;
    cursor: pointer;
}

.ios-install-sheet {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    align-items: end;
    padding: 1rem max(1rem, env(safe-area-inset-left)) calc(1rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-right));
    background: rgba(0, 0, 0, 0.72);
    color: #fff7f2;
}

.ios-install-sheet-card {
    width: min(100%, 460px);
    margin: 0 auto;
    padding: 1.25rem;
    border: 1px solid rgba(255, 92, 28, 0.36);
    border-radius: 28px;
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 98, 32, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(17, 5, 3, 0.98), rgba(5, 1, 1, 0.99));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.68);
}

.ios-install-sheet-card h2 {
    margin: 0.35rem 0 0.8rem;
    color: #fff7f2;
    font-size: clamp(1.45rem, 7vw, 2.25rem);
    line-height: 1.02;
}

.ios-install-sheet-card ol {
    display: grid;
    gap: 0.7rem;
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    color: #ffd8c7;
}

.ios-install-close {
    width: 100%;
}

@media (max-width: 430px) {
    .ios-install-prompt {
        grid-template-columns: 1fr auto;
        bottom: calc(6.45rem + env(safe-area-inset-bottom));
    }

    .ios-install-primary {
        grid-column: 1 / -1;
        width: 100%;
    }

    .ios-install-dismiss {
        grid-column: 2;
        grid-row: 1;
    }
}

/* Auth controls should stay roomy inside the installed web app. */
@media (max-width: 760px) {
    body:not(.is-authenticated) .sign-in-panel {
        width: min(100%, 520px) !important;
        padding-inline: 0 !important;
    }

    body:not(.is-authenticated) .sign-in-card {
        width: min(100%, calc(100vw - 1.5rem)) !important;
        padding: clamp(1.15rem, 5vw, 1.65rem) !important;
        border-radius: 28px !important;
    }

    body:not(.is-authenticated) .sign-in-card-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.9rem !important;
        align-items: stretch !important;
    }

    body:not(.is-authenticated) .sign-in-card .switch-label {
        width: 100% !important;
        min-width: 0 !important;
        justify-self: stretch !important;
    }

    body:not(.is-authenticated) .sign-in-card .switch-label span {
        width: 100% !important;
        min-height: 50px !important;
        padding: 0.78rem 1.1rem 0.78rem 2.45rem !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        line-height: 1.15 !important;
    }

    body:not(.is-authenticated) .sign-in-card #submit-btn {
        min-height: 58px !important;
        width: 100% !important;
        padding: 0.95rem 1.15rem !important;
        border-radius: 999px !important;
        font-size: 1rem !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
}

@media (max-width: 360px) {
    body:not(.is-authenticated) .sign-in-card .switch-label span,
    body:not(.is-authenticated) .sign-in-card #submit-btn {
        font-size: 0.92rem !important;
    }
}