@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');


/* ============================================================
   STRIVE THEME
   ============================================================ */

:root {
    --strive-pink: #ff208e;
    --strive-pink-light: #ff5aae;
    --strive-pink-dark: #dc0871;
    --strive-blue: #2563ff;
    --strive-blue-light: #4285ff;
    --strive-blue-dark: #1448db;
    --strive-navy: #101a29;
    --strive-navy-light: #162033;
    --strive-card: #151f2d;
    --strive-card-hover: #1a2637;
    --strive-white: #ffffff;
    --strive-off-white: #f7f9fc;
    --strive-text: #f8fafc;
    --strive-muted: #98a2b3;
    --strive-muted-light: #c6ced9;
    --strive-border: rgba(255, 255, 255, .08);
    --strive-border-light: rgba(255, 255, 255, .12);
    --strive-gradient: linear-gradient( 135deg, var(--strive-pink) 0%, #a337e5 48%, var(--strive-blue) 100% );
    --strive-gradient-horizontal: linear-gradient( 90deg, var(--strive-pink) 0%, var(--strive-blue) 100% );
    --strive-radius-sm: 10px;
    --strive-radius: 16px;
    --strive-radius-lg: 24px;
    --strive-shadow: 0 25px 70px rgba(0, 0, 0, .28);
    --strive-container: 1160px;
}


/* ============================================================
   GLOBAL
   ============================================================ */

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background: radial-gradient( circle at 80% 0%, rgba(37, 99, 255, .10), transparent 28% ), radial-gradient( circle at 15% 12%, rgba(255, 32, 142, .08), transparent 25% ), var(--strive-navy);
    color: var(--strive-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

* {
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button {
    color: inherit;
}

img {
    max-width: 100%;
}

.site-shell {
    min-height: 100vh;
}

.site-container {
    width: min( calc(100% - 40px), var(--strive-container) );
    margin: 0 auto;
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--strive-border);
}

.nav-container {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ============================================================
   BRAND / LOGO
   ============================================================ */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    background: transparent;
    overflow: hidden;
    box-shadow: 0 5px 16px rgba(255, 32, 142, .14), 0 5px 16px rgba(37, 99, 255, .12);
}

.brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-mark.small {
    width: 36px;
    height: 36px;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}

.brand-name {
    color: var(--strive-white);
    font-size: 20px;
    font-weight: 800;
    font-style: italic;
    line-height: 1;
    letter-spacing: .045em;
}

.brand-tagline {
    margin-top: 6px;
    color: var(--strive-pink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .13em;
    white-space: nowrap;
}

    .brand-tagline span {
        color: var(--strive-blue-light);
    }


/* ============================================================
   NAVIGATION
   ============================================================ */

.main-nav {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .nav-links > a {
        padding: 8px 12px;
        border-radius: 9px;
        color: var(--strive-muted-light);
        font-size: 13px;
        font-weight: 600;
        transition: color .2s ease, background .2s ease, transform .2s ease;
    }

        .nav-links > a:hover,
        .nav-links > a.active {
            color: white;
            background: rgba(255, 255, 255, .055);
        }

            .nav-links > a.active:not(.btn) {
                color: var(--strive-pink-light);
            }

.nav-login {
    margin-left: 6px;
}

.mobile-nav-button {
    display: none;
    padding: 8px;
    background: none;
    border: 0;
    cursor: pointer;
}

    .mobile-nav-button span {
        display: block;
        width: 24px;
        height: 2px;
        margin: 5px 0;
        background: white;
    }


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 18px;
    border: 0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

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

.btn-primary {
    color: white !important;
    background: var(--strive-gradient-horizontal) !important;
    box-shadow: 0 10px 28px rgba(255, 32, 142, .20), 0 10px 28px rgba(37, 99, 255, .14);
}

    .btn-primary:hover {
        box-shadow: 0 14px 38px rgba(255, 32, 142, .28), 0 14px 38px rgba(37, 99, 255, .22);
    }

.btn-secondary {
    color: white;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--strive-border-light);
}

    .btn-secondary:hover {
        background: rgba(255, 255, 255, .07);
        border-color: rgba(255, 255, 255, .18);
    }

.btn-large {
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 12px;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.gradient-text {
    color: transparent;
    background: var(--strive-gradient-horizontal);
    background-clip: text;
    -webkit-background-clip: text;
}

.section-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--strive-pink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
}

.section-heading {
    max-width: 680px;
}

    .section-heading.centered {
        margin: 0 auto 38px;
        text-align: center;
    }

    .section-heading h1,
    .section-heading h2 {
        margin: 0;
        line-height: 1.08;
        letter-spacing: -.04em;
    }

    .section-heading h1 {
        font-size: clamp(38px, 5.5vw, 62px);
    }

    .section-heading h2 {
        font-size: clamp(32px, 4vw, 46px);
    }

    .section-heading p {
        max-width: 600px;
        margin: 15px auto 0;
        color: var(--strive-muted);
        font-size: 15px;
        line-height: 1.7;
    }


/* ============================================================
   HERO
   ============================================================ */

.hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 75px;
}

.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .9fr 1.2fr;
    align-items: center;
    gap: 50px;
}

.hero-content h1 {
    max-width: 540px;
    margin: 16px 0 20px;
    font-size: clamp(48px, 6vw, 72px);
    line-height: .98;
    letter-spacing: -.055em;
}

.hero-description {
    max-width: 540px;
    margin: 0;
    color: var(--strive-muted-light);
    font-size: 16px;
    line-height: 1.65;
}

.eyebrow {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px;
    border: 1px solid var(--strive-border);
    border-radius: 50px;
    background: rgba(255, 255, 255, .025);
    color: var(--strive-muted-light);
    font-size: 12px;
    font-weight: 600;
}

.eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--strive-pink);
    box-shadow: 0 0 12px var(--strive-pink);
}

.hero-actions {
    display: flex;
    gap: 10px;
    margin-top: 27px;
}

.hero-trust {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
}

    .hero-trust div:not(.trust-divider) {
        display: flex;
        flex-direction: column;
    }

    .hero-trust strong {
        font-size: 12px;
    }

    .hero-trust span {
        margin-top: 1px;
        color: var(--strive-muted);
        font-size: 12px;
    }

.trust-divider {
    width: 1px;
    height: 28px;
    background: var(--strive-border-light);
}

.hero-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    opacity: .12;
    filter: blur(100px);
}

.hero-glow-pink {
    top: -120px;
    left: -300px;
    background: var(--strive-pink);
}

.hero-glow-blue {
    top: 0;
    right: -220px;
    background: var(--strive-blue);
}


/* ============================================================
   DASHBOARD MOCKUP
   ============================================================ */

.hero-dashboard {
    position: relative;
}

    .hero-dashboard::before {
        content: "";
        position: absolute;
        inset: 18% -8% -8% 25%;
        z-index: -1;
        background: rgba(37, 99, 255, .25);
        filter: blur(80px);
    }

.dashboard-window {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: linear-gradient( 145deg, rgba(27, 38, 55, .97), rgba(14, 22, 34, .98) );
    box-shadow: 0 32px 70px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .02);
}

.dashboard-topbar {
    height: 56px;
    display: grid;
    grid-template-columns: 145px 1fr 38px;
    align-items: center;
    gap: 14px;
    padding: 0 15px;
    border-bottom: 1px solid var(--strive-border);
}

.dashboard-logo {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-style: italic;
    font-weight: 700;
}

.mini-brand-mark {
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--strive-gradient);
}

.dashboard-search {
    width: 70%;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .04);
    border-radius: 7px;
    background: rgba(255, 255, 255, .035);
    color: #687387;
    font-size: 12px;
}

.avatar {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--strive-gradient);
    font-size: 12px;
    font-weight: 700;
}

.dashboard-body {
    min-height: 375px;
    display: grid;
    grid-template-columns: 115px 1fr;
}

.dashboard-sidebar {
    padding: 15px 10px;
    border-right: 1px solid var(--strive-border);
}

.sidebar-item {
    margin-bottom: 6px;
    padding: 7px 9px;
    border-radius: 6px;
    color: #8590a1;
    font-size: 12px;
}

    .sidebar-item.active {
        color: var(--strive-pink-light);
        background: rgba(255, 32, 142, .12);
    }

.dashboard-content {
    padding: 17px;
}

.dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

    .dashboard-heading span {
        display: block;
        font-size: 13px;
        font-weight: 700;
    }

    .dashboard-heading small {
        display: block;
        margin-top: 1px;
        color: #667185;
        font-size: 12px;
    }

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

.stat-card,
.chart-card,
.nutrition-card {
    position: relative;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 9px;
    background: rgba(255, 255, 255, .025);
}

.stat-label {
    display: block;
    margin-bottom: 6px;
    color: #a8b0bd;
    font-size: 12px;
}

.stat-card strong {
    display: block;
    font-size: 19px;
}

.stat-card small {
    color: #758093;
    font-size: 12px;
}

.mini-progress {
    overflow: hidden;
    height: 4px;
    margin-top: 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
}

    .mini-progress span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--strive-gradient-horizontal);
    }

.ring-chart,
.nutrition-ring {
    width: 32px;
    height: 32px;
    margin-top: 8px;
    border: 5px solid rgba(255, 255, 255, .07);
    border-top-color: var(--strive-pink);
    border-right-color: var(--strive-blue);
    border-radius: 50%;
}

.protein-bars {
    display: flex;
    gap: 3px;
    margin-top: 10px;
}

    .protein-bars span {
        width: 25%;
        height: 4px;
        border-radius: 5px;
        background: var(--strive-gradient-horizontal);
    }

.dashboard-lower {
    display: grid;
    grid-template-columns: 2.1fr .8fr;
    gap: 9px;
    margin-top: 9px;
}

.card-heading {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

    .card-heading span {
        color: #6f798a;
    }

.fake-chart {
    position: relative;
    height: 115px;
    margin-top: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: repeating-linear-gradient( to bottom, transparent 0, transparent 26px, rgba(255, 255, 255, .035) 27px );
}

.chart-line {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 15%;
    height: 2px;
    background: var(--strive-gradient-horizontal);
    transform: rotate(-10deg);
}

.point {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--strive-pink);
}

.p1 {
    left: 0;
}

.p2 {
    left: 16%;
    bottom: 18px;
}

.p3 {
    left: 32%;
    bottom: 31px;
}

.p4 {
    left: 48%;
    bottom: 23px;
}

.p5 {
    left: 64%;
    bottom: 50px;
    background: var(--strive-blue);
}

.p6 {
    left: 80%;
    bottom: 40px;
    background: var(--strive-blue);
}

.p7 {
    right: 0;
    bottom: 67px;
    background: var(--strive-blue);
}

.chart-days {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    color: #737e90;
    font-size: 12px;
}

.nutrition-ring {
    width: 44px;
    height: 44px;
    margin: 7px 0 13px;
}

.macro-row {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-size: 12px;
}

    .macro-row span {
        color: #8f99a8;
    }


/* ============================================================
   FEATURE STRIP
   ============================================================ */

.feature-strip {
    border-top: 1px solid var(--strive-border);
    border-bottom: 1px solid var(--strive-border);
    background: rgba(0, 0, 0, .08);
}

.feature-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.feature-strip-item {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 16px;
    border-right: 1px solid var(--strive-border);
}

    .feature-strip-item:last-child {
        border-right: 0;
    }

.feature-icon {
    color: var(--strive-pink);
    font-size: 22px;
}

.feature-strip-item div {
    display: flex;
    flex-direction: column;
}

.feature-strip-item strong {
    font-size: 12px;
}

.feature-strip-item div span {
    color: var(--strive-muted);
    font-size: 12px;
}


/* ============================================================
   SECTIONS / FEATURES
   ============================================================ */

.section {
    padding: 78px 0;
}

.feature-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.feature-card {
    min-height: 215px;
    padding: 23px;
    border: 1px solid var(--strive-border);
    border-radius: var(--strive-radius);
    background: linear-gradient( 145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015) );
    transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

    .feature-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 255, 255, .15);
        background: var(--strive-card-hover);
        box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
    }

.feature-card-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 11px;
    font-size: 18px;
}

    .feature-card-icon.pink {
        color: var(--strive-pink);
        background: rgba(255, 32, 142, .11);
    }

    .feature-card-icon.blue {
        color: var(--strive-blue-light);
        background: rgba(37, 99, 255, .11);
    }

    .feature-card-icon.mixed {
        color: white;
        background: var(--strive-gradient);
    }

.feature-card h3 {
    margin: 0 0 7px;
    font-size: 17px;
}

.feature-card p {
    margin: 0;
    color: var(--strive-muted);
    font-size: 13px;
    line-height: 1.6;
}


/* ============================================================
   CTA
   ============================================================ */

.cta-section {
    padding: 15px 0 78px;
}

.cta-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 42px 46px;
    border: 1px solid var(--strive-border-light);
    border-radius: var(--strive-radius-lg);
    background: linear-gradient( 135deg, rgba(255, 32, 142, .07), rgba(37, 99, 255, .07) );
}

    .cta-card h2 {
        margin: 0;
        font-size: clamp(32px, 4vw, 45px);
        line-height: 1.08;
        letter-spacing: -.04em;
    }

.cta-actions {
    position: relative;
    z-index: 2;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.cta-glow {
    position: absolute;
    right: -120px;
    width: 350px;
    height: 350px;
    background: var(--strive-blue);
    opacity: .10;
    filter: blur(90px);
}


/* ============================================================
   PAGE HERO
   ============================================================ */

.page-hero {
    padding: 70px 0 25px;
}

    .page-hero .section-heading {
        margin-bottom: 20px;
    }


/* ============================================================
   PRICING
   ============================================================ */

.plans-section {
    padding: 25px 0 80px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 16px;
}

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid var(--strive-border);
    border-radius: 18px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .018) );
}

    .pricing-card.featured {
        border-color: rgba(255, 32, 142, .55);
        box-shadow: 0 18px 50px rgba(255, 32, 142, .09);
    }

    .pricing-card.annual {
        border-color: rgba(37, 99, 255, .45);
    }

.popular-badge,
.save-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 13px;
    border-radius: 30px;
    color: white;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    white-space: nowrap;
}

.popular-badge {
    background: var(--strive-pink);
}

.save-badge {
    background: var(--strive-blue);
}

.plan-label {
    display: block;
    margin-bottom: 8px;
    color: var(--strive-pink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
}

.pricing-card.annual .plan-label {
    color: var(--strive-blue-light);
}

.pricing-heading h2 {
    margin: 0;
    font-size: 22px;
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 17px 0 5px;
}

    .plan-price strong {
        font-size: 38px;
        line-height: 1;
    }

    .plan-price span {
        color: var(--strive-muted);
        font-size: 12px;
    }

.annual-price {
    margin-bottom: 8px;
    color: var(--strive-blue-light);
    font-size: 12px;
    font-weight: 600;
}

.pricing-heading p {
    min-height: 50px;
    margin-bottom: 0;
    color: var(--strive-muted);
    font-size: 12px;
    line-height: 1.6;
}

.plan-features {
    flex: 1;
    margin: 20px 0;
    padding: 18px 0;
    border-top: 1px solid var(--strive-border);
    border-bottom: 1px solid var(--strive-border);
    list-style: none;
}

    .plan-features li {
        display: flex;
        gap: 9px;
        margin-bottom: 10px;
        color: var(--strive-muted-light);
        font-size: 12px;
    }

        .plan-features li:last-child {
            margin-bottom: 0;
        }

    .plan-features span {
        color: var(--strive-pink);
    }

.annual .plan-features span {
    color: var(--strive-blue-light);
}

.plan-button {
    width: 100%;
}

.plans-note {
    max-width: 600px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 32px auto 0;
    padding: 17px;
    border: 1px solid var(--strive-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
}

.plans-note-icon {
    color: var(--strive-pink);
    font-size: 23px;
}

.plans-note p {
    margin: 3px 0 0;
    color: var(--strive-muted);
    font-size: 12px;
}


/* ============================================================
   CONTACT
   ============================================================ */

.contact-section {
    padding: 20px 0 80px;
}

.contact-grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    align-items: start;
    gap: 55px;
}

.contact-info h2 {
    margin: 7px 0 13px;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.contact-info > p {
    margin-bottom: 26px;
    color: var(--strive-muted);
    font-size: 14px;
}

.contact-info-card {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid var(--strive-border);
    border-radius: 11px;
    background: rgba(255, 255, 255, .02);
}

.contact-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    color: var(--strive-pink);
    background: rgba(255, 32, 142, .10);
    font-weight: 700;
}

.contact-info-card div:last-child {
    display: flex;
    flex-direction: column;
}

.contact-info-card span {
    color: var(--strive-muted);
    font-size: 12px;
}

.contact-info-card strong {
    font-size: 12px;
}

.contact-form-card {
    padding: 30px;
    border: 1px solid var(--strive-border);
    border-radius: 18px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .018) );
    box-shadow: 0 20px 55px rgba(0, 0, 0, .25);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.form-group {
    margin-bottom: 15px;
}

    .form-group label {
        display: block;
        margin-bottom: 6px;
        color: var(--strive-muted-light);
        font-size: 12px;
        font-weight: 600;
    }

.form-control {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--strive-border-light);
    border-radius: 9px;
    outline: none;
    color: white;
    background: rgba(255, 255, 255, .035);
    font-size: 13px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .form-control:focus {
        border-color: var(--strive-pink);
        background: rgba(255, 255, 255, .05);
        box-shadow: 0 0 0 3px rgba(255, 32, 142, .10);
    }

    .form-control::placeholder {
        color: #677386;
    }

select.form-control {
    color-scheme: dark;
}

.form-textarea {
    min-height: 135px;
    resize: vertical;
}

.validation-message {
    display: block;
    margin-top: 5px;
    color: var(--strive-pink-light);
    font-size: 12px;
}

.submit-button {
    width: 100%;
}

.success-message {
    min-height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.success-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    border-radius: 50%;
    background: var(--strive-gradient);
    font-size: 24px;
    font-weight: 700;
}

.success-message h3 {
    margin: 0;
    font-size: 23px;
}

.success-message p {
    max-width: 350px;
    margin: 9px 0 22px;
    color: var(--strive-muted);
    font-size: 13px;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    padding: 32px 0;
    border-top: 1px solid var(--strive-border);
    background: rgba(0, 0, 0, .10);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    align-items: center;
    gap: 25px;
}

.footer-description {
    max-width: 330px;
    margin: 11px 0 0;
    color: var(--strive-muted);
    font-size: 12px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 19px;
}

    .footer-links a {
        color: var(--strive-muted);
        font-size: 12px;
        transition: color .2s ease;
    }

        .footer-links a:hover {
            color: var(--strive-pink);
        }

.footer-copy {
    color: var(--strive-muted);
    text-align: right;
    font-size: 12px;
}


/* ============================================================
   RESPONSIVE - TABLET
   ============================================================ */

@media (max-width: 1050px) {

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .hero-content {
        max-width: 720px;
    }

    .hero-dashboard {
        max-width: 800px;
    }

    .pricing-grid {
        max-width: 650px;
        grid-template-columns: 1fr;
        margin: 0 auto;
        gap: 22px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}


/* ============================================================
   RESPONSIVE - SMALL TABLET
   ============================================================ */

@media (max-width: 800px) {

    .nav-container {
        min-height: 66px;
    }

    .mobile-nav-button {
        display: block;
    }

    .nav-links {
        position: absolute;
        top: 66px;
        left: 20px;
        right: 20px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        border: 1px solid var(--strive-border);
        border-radius: 14px;
        background: #162236;
        box-shadow: var(--strive-shadow);
    }

        .nav-links.open {
            display: flex;
        }

        .nav-links > a {
            width: 100%;
            padding: 10px 12px;
        }

    .nav-login {
        margin-left: 0;
    }

    .hero {
        padding: 55px 0 60px;
    }

    .hero-grid {
        gap: 38px;
    }

    .section {
        padding: 60px 0;
    }

    .feature-strip-grid {
        grid-template-columns: 1fr 1fr;
    }

    .feature-strip-item:nth-child(2) {
        border-right: 0;
    }

    .feature-card-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cta-section {
        padding-bottom: 60px;
    }

    .cta-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 34px;
    }

    .cta-actions {
        width: 100%;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand {
        justify-content: center;
    }

    .footer-description {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-copy {
        text-align: center;
    }
}


/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */

@media (max-width: 560px) {

    .site-container {
        width: min( calc(100% - 28px), var(--strive-container) );
    }

    .brand-tagline {
        display: none;
    }

    .brand-name {
        font-size: 18px;
    }

    .hero-content h1 {
        font-size: 44px;
    }

    .hero-description {
        font-size: 14px;
    }

    .hero-actions {
        flex-direction: column;
    }

        .hero-actions .btn {
            width: 100%;
        }

    .hero-trust {
        gap: 10px;
    }

        .hero-trust strong {
            font-size: 12px;
        }

        .hero-trust span {
            font-size: 12px;
        }

    .dashboard-sidebar {
        display: none;
    }

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

    .dashboard-topbar {
        grid-template-columns: 105px 1fr 32px;
        gap: 8px;
        padding: 0 11px;
    }

    .dashboard-search {
        width: 100%;
    }

    .dashboard-content {
        padding: 13px;
    }

    .stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stat-card:last-child {
        grid-column: 1 / -1;
    }

    .dashboard-lower {
        grid-template-columns: 1fr;
    }

    .feature-strip-grid {
        grid-template-columns: 1fr;
    }

    .feature-strip-item {
        min-height: 74px;
        justify-content: flex-start;
        padding: 14px 18px;
        border-right: 0;
        border-bottom: 1px solid var(--strive-border);
    }

        .feature-strip-item:last-child {
            border-bottom: 0;
        }

    .feature-card-grid {
        grid-template-columns: 1fr;
    }

    .feature-card {
        min-height: 0;
    }

    .page-hero {
        padding-top: 50px;
    }

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

    .contact-form-card {
        padding: 22px;
    }

    .cta-card {
        padding: 26px;
    }

        .cta-card h2 {
            font-size: 32px;
        }
}

/* ============================================================
   AUTHENTICATION
   LOGIN / REGISTER
   ============================================================ */

.auth-page {
    position: relative;
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 48px 20px 60px;
}

.auth-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
}

.auth-container-wide {
    max-width: 680px;
}

.auth-brand-mobile {
    display: none;
    justify-content: center;
    margin-bottom: 24px;
}


/* ============================================================
   AUTH CARD
   ============================================================ */

.auth-card {
    position: relative;
    padding: 34px;
    border: 1px solid var(--strive-border-light);
    border-radius: 20px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018) ), rgba(15, 23, 42, .88);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .015);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.register-card {
    padding: 34px 38px;
}

.auth-card-header {
    margin-bottom: 27px;
    text-align: center;
}

.auth-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--strive-pink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
}

.auth-card-header h1 {
    margin: 0;
    font-size: 31px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.04em;
}

.auth-card-header p {
    max-width: 420px;
    margin: 11px auto 0;
    color: var(--strive-muted);
    font-size: 12px;
    line-height: 1.6;
}


/* ============================================================
   AUTH INPUTS
   ============================================================ */

.auth-input {
    min-height: 44px;
}

.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

    .form-label-row label {
        margin-bottom: 6px;
    }

.form-link {
    color: var(--strive-pink-light);
    font-size: 12px;
    font-weight: 600;
    transition: color .2s ease;
}

    .form-link:hover {
        color: white;
    }


/* ============================================================
   CHECKBOX
   ============================================================ */

.auth-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 3px 0 20px;
    color: var(--strive-muted-light);
    font-size: 12px;
    cursor: pointer;
}

    .auth-checkbox input {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
        margin-top: 1px;
        accent-color: var(--strive-pink);
    }

    .auth-checkbox a {
        color: var(--strive-pink-light);
        font-weight: 600;
    }

        .auth-checkbox a:hover {
            color: white;
        }

.terms-checkbox {
    margin-top: 21px;
    margin-bottom: 7px;
    line-height: 1.5;
}

.auth-terms-error {
    margin-bottom: 15px;
}


/* ============================================================
   AUTH BUTTONS
   ============================================================ */

.auth-submit,
.auth-secondary-button {
    width: 100%;
}

.auth-submit {
    margin-top: 2px;
}

.auth-secondary-button {
    min-height: 45px;
}


/* ============================================================
   DIVIDER
   ============================================================ */

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 17px;
    color: var(--strive-muted);
    font-size: 12px;
    text-align: center;
}

    .auth-divider::before,
    .auth-divider::after {
        content: "";
        height: 1px;
        flex: 1;
        background: var(--strive-border);
    }

    .auth-divider span {
        white-space: nowrap;
    }


/* ============================================================
   AUTH FOOTER
   ============================================================ */

.auth-footer-text {
    max-width: 340px;
    margin: 19px auto 0;
    color: #687487;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

.auth-back-link {
    display: block;
    width: fit-content;
    margin: 17px auto 0;
    color: var(--strive-muted);
    font-size: 12px;
    font-weight: 600;
    transition: color .2s ease;
}

    .auth-back-link:hover {
        color: var(--strive-pink-light);
    }


/* ============================================================
   AUTH GLOW
   ============================================================ */

.auth-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(115px);
}

.auth-glow-pink {
    top: 10%;
    left: -250px;
    background: var(--strive-pink);
    opacity: .10;
}

.auth-glow-blue {
    right: -250px;
    bottom: 5%;
    background: var(--strive-blue);
    opacity: .12;
}


/* ============================================================
   ALERTS
   ============================================================ */

.auth-alert {
    margin-bottom: 18px;
    padding: 11px 13px;
    border-radius: 9px;
    font-size: 12px;
}

.auth-alert-error {
    color: #ff8bc4;
    background: rgba(255, 32, 142, .08);
    border: 1px solid rgba(255, 32, 142, .24);
}


/* ============================================================
   PASSWORD REQUIREMENTS
   ============================================================ */

.password-requirements {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -4px 0 22px;
    color: #778296;
    font-size: 12px;
}

.requirement-dot {
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--strive-blue-light);
}


/* ============================================================
   REGISTER PLAN
   ============================================================ */

.register-plan-section {
    margin-top: 6px;
    padding-top: 23px;
    border-top: 1px solid var(--strive-border);
}

.register-plan-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
}

    .register-plan-heading .auth-eyebrow {
        margin-bottom: 4px;
    }

    .register-plan-heading h3 {
        margin: 0;
        font-size: 15px;
    }

.register-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.register-plan-option {
    position: relative;
    min-height: 116px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
    border: 1px solid var(--strive-border);
    border-radius: 12px;
    outline: none;
    color: var(--strive-text);
    background: rgba(255, 255, 255, .025);
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

    .register-plan-option:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, .17);
        background: rgba(255, 255, 255, .045);
    }

    .register-plan-option.selected {
        border-color: rgba(255, 32, 142, .65);
        background: linear-gradient( 145deg, rgba(255, 32, 142, .10), rgba(37, 99, 255, .035) );
        box-shadow: 0 8px 25px rgba(255, 32, 142, .08);
    }

    .register-plan-option.annual.selected {
        border-color: rgba(37, 99, 255, .65);
        background: linear-gradient( 145deg, rgba(37, 99, 255, .11), rgba(255, 32, 142, .035) );
    }

.register-plan-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.register-plan-name {
    color: var(--strive-muted-light);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.plan-selected {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    background: var(--strive-pink);
    font-size: 12px;
    font-weight: 700;
}

.register-plan-option.annual .plan-selected {
    background: var(--strive-blue);
}

.register-plan-option strong {
    font-size: 22px;
    line-height: 1;
}

.register-plan-price-detail {
    margin-top: 4px;
    color: var(--strive-muted);
    font-size: 12px;
}

.register-plan-option small {
    margin-top: 4px;
    color: var(--strive-blue-light);
    font-size: 12px;
}

.register-best-value {
    position: absolute;
    top: -8px;
    right: 10px;
    padding: 3px 7px;
    border-radius: 20px;
    color: white;
    background: var(--strive-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}


/* ============================================================
   AUTH VALIDATION
   ============================================================ */

.auth-card .validation-message {
    margin-top: 5px;
    color: var(--strive-pink-light);
    font-size: 12px;
}


/* ============================================================
   AUTH RESPONSIVE
   ============================================================ */

@media (max-width: 800px) {

    .auth-page {
        padding-top: 38px;
    }

    .register-plan-grid {
        grid-template-columns: 1fr;
    }

    .register-plan-option {
        min-height: 95px;
    }
}


@media (max-width: 560px) {

    .auth-page {
        min-height: calc(100vh - 60px);
        padding: 28px 14px 45px;
    }

    .auth-card,
    .register-card {
        padding: 25px 21px;
    }

    .auth-card-header {
        margin-bottom: 23px;
    }

        .auth-card-header h1 {
            font-size: 27px;
        }

    .register-card .form-row {
        grid-template-columns: 1fr;
    }

    .register-plan-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .auth-checkbox {
        font-size: 12px;
    }
}

.form-control,
.form-control:focus,
.auth-input,
.auth-input:focus {
    color: var(--strive-text) !important;
    background-color: rgba(255, 255, 255, .035) !important;
    caret-color: var(--strive-pink);
}

    .form-control::placeholder,
    .auth-input::placeholder {
        color: #6f7a8d !important;
        opacity: 1;
    }

    .form-control:focus,
    .auth-input:focus {
        border-color: var(--strive-pink);
        box-shadow: 0 0 0 3px rgba(255, 32, 142, .10);
    }

    /* Helps with browser/autofill styling */
    .form-control:-webkit-autofill,
    .form-control:-webkit-autofill:hover,
    .form-control:-webkit-autofill:focus,
    .auth-input:-webkit-autofill,
    .auth-input:-webkit-autofill:hover,
    .auth-input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--strive-text) !important;
        caret-color: var(--strive-text);
        -webkit-box-shadow: 0 0 0 1000px #182235 inset !important;
        transition: background-color 9999s ease-in-out 0s;
    }

/* ============================================================
   LEGAL PAGES
   TERMS / PRIVACY
   ============================================================ */

.legal-page {
    position: relative;
    overflow: hidden;
    padding: 68px 0 90px;
}

.legal-header {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin-bottom: 45px;
}

    .legal-header h1 {
        margin: 0;
        font-size: clamp(40px, 5vw, 58px);
        line-height: 1.05;
        letter-spacing: -.045em;
    }

    .legal-header > p {
        max-width: 600px;
        margin: 16px 0 0;
        color: var(--strive-muted);
        font-size: 14px;
        line-height: 1.7;
    }

.legal-effective-date {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: #6f7c90;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
}

    .legal-effective-date span {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--strive-pink);
    }


/* ============================================================
   LEGAL LAYOUT
   ============================================================ */

.legal-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 42px;
    align-items: start;
}


/* ============================================================
   LEGAL SIDEBAR
   ============================================================ */

.legal-sidebar {
    position: sticky;
    top: 90px;
}

.legal-sidebar-card {
    padding: 18px;
    border: 1px solid var(--strive-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .02);
}

.legal-sidebar-title {
    display: block;
    margin-bottom: 13px;
    color: var(--strive-muted-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
}

.legal-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

    .legal-nav a {
        display: block;
        padding: 5px 7px;
        border-radius: 6px;
        color: #758195;
        font-size: 12px;
        font-weight: 500;
        transition: color .2s ease, background .2s ease;
    }

        .legal-nav a:hover {
            color: var(--strive-pink-light);
            background: rgba(255, 32, 142, .06);
        }


/* ============================================================
   LEGAL CONTENT
   ============================================================ */

.legal-content {
    min-width: 0;
    padding: 35px 40px;
    border: 1px solid var(--strive-border);
    border-radius: 20px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012) );
}

.legal-intro {
    margin-bottom: 36px;
    padding: 15px 17px;
    border: 1px solid rgba(37, 99, 255, .17);
    border-left: 3px solid var(--strive-blue);
    border-radius: 9px;
    color: var(--strive-muted-light);
    background: rgba(37, 99, 255, .045);
    font-size: 12px;
    line-height: 1.7;
}

    .legal-intro strong {
        color: white;
    }


/* ============================================================
   LEGAL SECTIONS
   ============================================================ */

.legal-section {
    padding: 0 0 34px;
    margin: 0 0 34px;
    border-bottom: 1px solid var(--strive-border);
    scroll-margin-top: 100px;
}

    .legal-section:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }

    .legal-section h2 {
        display: flex;
        align-items: center;
        gap: 11px;
        margin: 0 0 18px;
        color: white;
        font-size: 19px;
        line-height: 1.25;
        letter-spacing: -.025em;
    }

        .legal-section h2 > span {
            color: var(--strive-pink);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .06em;
        }

    .legal-section h3 {
        margin: 24px 0 9px;
        color: var(--strive-muted-light);
        font-size: 13px;
    }

    .legal-section p {
        margin: 0 0 14px;
        color: var(--strive-muted);
        font-size: 12px;
        line-height: 1.8;
    }

        .legal-section p:last-child {
            margin-bottom: 0;
        }

    .legal-section strong {
        color: var(--strive-muted-light);
    }

    .legal-section ul {
        margin: 10px 0 18px;
        padding-left: 19px;
    }

    .legal-section li {
        margin-bottom: 7px;
        padding-left: 3px;
        color: var(--strive-muted);
        font-size: 12px;
        line-height: 1.7;
    }

        .legal-section li::marker {
            color: var(--strive-pink);
        }


/* ============================================================
   LEGAL LINKS
   ============================================================ */

.legal-link {
    color: var(--strive-pink-light);
    font-weight: 600;
    transition: color .2s ease;
}

    .legal-link:hover {
        color: white;
    }


/* ============================================================
   LEGAL WARNING
   ============================================================ */

.legal-warning {
    margin: 0 0 19px;
    padding: 15px 17px;
    border: 1px solid rgba(255, 32, 142, .20);
    border-left: 3px solid var(--strive-pink);
    border-radius: 9px;
    background: rgba(255, 32, 142, .05);
    color: var(--strive-muted-light);
    font-size: 12px;
    line-height: 1.7;
}


/* ============================================================
   LEGAL SUBSCRIPTION SUMMARY
   ============================================================ */

.legal-plan-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin: 20px 0;
}

    .legal-plan-summary > div {
        display: flex;
        flex-direction: column;
        padding: 14px;
        border: 1px solid var(--strive-border);
        border-radius: 10px;
        background: rgba(255, 255, 255, .02);
    }

    .legal-plan-summary span {
        margin-bottom: 8px;
        color: var(--strive-pink);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .12em;
    }

    .legal-plan-summary strong {
        color: white;
        font-size: 18px;
    }

    .legal-plan-summary small {
        margin-top: 2px;
        color: #748095;
        font-size: 12px;
    }


/* ============================================================
   LEGAL UPPERCASE SECTIONS
   ============================================================ */

.legal-uppercase {
    margin: 15px 0;
    padding: 17px;
    border: 1px solid var(--strive-border);
    border-radius: 10px;
    background: rgba(0, 0, 0, .10);
}

    .legal-uppercase p {
        color: #aeb7c5;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.75;
        letter-spacing: .015em;
    }


/* ============================================================
   LEGAL CONTACT
   ============================================================ */

.legal-contact {
    width: fit-content;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    padding: 17px 20px;
    border: 1px solid var(--strive-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
    color: var(--strive-muted);
    font-size: 12px;
    line-height: 1.7;
}

    .legal-contact strong {
        margin-bottom: 4px;
        color: white;
    }


/* ============================================================
   LEGAL BACKGROUND GLOW
   ============================================================ */

.legal-glow {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(120px);
}

.legal-glow-pink {
    top: 100px;
    left: -300px;
    background: var(--strive-pink);
    opacity: .07;
}

.legal-glow-blue {
    top: 450px;
    right: -300px;
    background: var(--strive-blue);
    opacity: .08;
}


/* ============================================================
   LEGAL RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-sidebar {
        display: none;
    }

    .legal-content {
        padding: 30px;
    }
}


@media (max-width: 560px) {

    .legal-page {
        padding: 48px 0 65px;
    }

    .legal-header {
        margin-bottom: 30px;
    }

        .legal-header h1 {
            font-size: 38px;
        }

    .legal-effective-date {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

        .legal-effective-date span {
            display: none;
        }

    .legal-content {
        padding: 23px 20px;
        border-radius: 15px;
    }

    .legal-section {
        padding-bottom: 27px;
        margin-bottom: 27px;
    }

        .legal-section h2 {
            align-items: flex-start;
            font-size: 17px;
        }

    .legal-plan-summary {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PRIVACY POLICY ENHANCEMENTS
   ============================================================ */

.legal-section h3:first-of-type {
    margin-top: 16px;
}

.legal-section ul + h3 {
    margin-top: 25px;
}

.legal-section ul {
    padding-left: 20px;
}

.legal-section li {
    margin-bottom: 6px;
}

    .legal-section li:last-child {
        margin-bottom: 0;
    }

/* ============================================================
   FREE PLAN
   ============================================================ */

.pricing-grid-single {
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
}

.pricing-card-free {
    position: relative;
    padding: 34px 38px;
    border-color: rgba(255, 32, 142, .38);
    background: radial-gradient( circle at 15% 0%, rgba(255, 32, 142, .08), transparent 35% ), radial-gradient( circle at 90% 100%, rgba(37, 99, 255, .08), transparent 38% ), linear-gradient( 145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018) );
    box-shadow: 0 22px 60px rgba(0, 0, 0, .20), 0 0 45px rgba(255, 32, 142, .035);
}

.free-plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    border-radius: 30px;
    color: white;
    background: var(--strive-gradient-horizontal);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .10em;
    white-space: nowrap;
}

.pricing-card-free .pricing-heading {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.pricing-card-free .plan-label {
    margin-bottom: 9px;
}

.pricing-card-free .pricing-heading h2 {
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -.03em;
}

.pricing-card-free .plan-price {
    justify-content: center;
    margin: 20px 0 8px;
}

    .pricing-card-free .plan-price strong {
        font-size: 46px;
    }

.pricing-card-free .pricing-heading p {
    min-height: 0;
    max-width: 500px;
    margin: 14px auto 0;
    font-size: 13px;
    line-height: 1.65;
}


/* ============================================================
   FREE PLAN FEATURES
   ============================================================ */

.free-plan-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 28px 0 26px;
    padding: 24px 0;
    border-top: 1px solid var(--strive-border);
    border-bottom: 1px solid var(--strive-border);
}

.free-plan-feature {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 13px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .018);
}

.free-plan-check {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: white;
    background: linear-gradient( 135deg, var(--strive-pink), var(--strive-blue) );
    font-size: 12px;
    font-weight: 700;
}

.free-plan-feature > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.free-plan-feature strong {
    color: var(--strive-text);
    font-size: 12px;
}

.free-plan-feature div span {
    color: var(--strive-muted);
    font-size: 12px;
    line-height: 1.5;
}


/* ============================================================
   FREE PLAN ACTION
   ============================================================ */

.free-plan-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
}

    .free-plan-action .plan-button {
        width: min(100%, 340px);
    }

.free-plan-action-note {
    color: var(--strive-muted);
    font-size: 12px;
}

/* ============================================================
   STRIVE PORTAL
   ============================================================ */

.portal-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    background: #101a29;
}

.portal-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 230px;
    display: flex;
    flex-direction: column;
    padding: 22px 14px 16px;
    border-right: 1px solid var(--strive-border);
    background: #142033;
}

.portal-brand {
    padding: 0 7px 27px;
}

.portal-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.portal-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 9px;
    color: #8f9aae;
    font-size: 12px;
    font-weight: 600;
    transition: .2s ease;
}

    .portal-nav-link:hover {
        color: white;
        background: rgba(255,255,255,.035);
    }

    .portal-nav-link.active {
        color: var(--strive-pink-light);
        background: rgba(255,32,142,.13);
    }

.portal-nav-icon {
    width: 17px;
    text-align: center;
}

.portal-user {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px;
    border-top: 1px solid var(--strive-border);
}

.portal-avatar,
.portal-header-avatar {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: white;
    background: var(--strive-gradient);
    font-size: 12px;
    font-weight: 700;
}

.portal-user-copy {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

    .portal-user-copy strong {
        overflow: hidden;
        color: white;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .portal-user-copy span {
        margin-top: 1px;
        color: var(--strive-blue-light);
        font-size: 12px;
    }

.portal-logout-button {
    border: 0;
    color: #778397;
    background: none;
    cursor: pointer;
}

.portal-main {
    min-width: 0;
    grid-column: 2;
}

.portal-header {
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    border-bottom: 1px solid var(--strive-border);
    background: rgba(15,25,39,.92);
    backdrop-filter: blur(18px);
}

.portal-header-kicker {
    color: var(--strive-pink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
}

.portal-header h2 {
    margin: 2px 0 0;
    font-size: 18px;
}

.portal-header-actions {
    display: flex;
    align-items: center;
    gap: 13px;
}

.portal-search {
    width: 220px;
    padding: 8px 11px;
    border: 1px solid var(--strive-border);
    border-radius: 8px;
    color: #697589;
    background: rgba(255,255,255,.025);
    font-size: 12px;
}

.portal-content {
    padding: 27px 30px 50px;
}

.portal-page {
    max-width: 1250px;
    margin: 0 auto;
}

.portal-page-heading {
    margin-bottom: 24px;
}

.portal-page-heading-actions {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
}

.portal-page-heading h1 {
    margin: 0;
    font-size: 31px;
    letter-spacing: -.035em;
}

.portal-page-heading p {
    margin: 6px 0 0;
    color: var(--strive-muted);
    font-size: 12px;
}

.portal-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 13px;
}

.portal-stat-card,
.portal-panel {
    border: 1px solid var(--strive-border);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.014));
}

.portal-stat-card {
    min-height: 145px;
    padding: 17px;
}

.portal-stat-label {
    display: block;
    margin-bottom: 10px;
    color: var(--strive-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.portal-stat-card > strong {
    display: block;
    font-size: 25px;
}

.portal-stat-sub {
    display: block;
    margin-top: 2px;
    color: #758196;
    font-size: 12px;
}

.portal-progress {
    overflow: hidden;
    height: 5px;
    margin-top: 20px;
    border-radius: 20px;
    background: rgba(255,255,255,.07);
}

    .portal-progress span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--strive-gradient-horizontal);
    }

.portal-ring-small,
.portal-ring {
    margin-top: 13px;
    border: 7px solid rgba(255,255,255,.06);
    border-top-color: var(--strive-pink);
    border-right-color: var(--strive-blue);
    border-radius: 50%;
}

.portal-ring-small {
    width: 38px;
    height: 38px;
}

.portal-mini-line {
    margin-top: 16px;
    color: var(--strive-blue-light);
    letter-spacing: 3px;
}

.portal-dashboard-grid {
    display: grid;
    grid-template-columns: 2fr .75fr;
    gap: 13px;
}

.portal-panel {
    padding: 19px;
}

.portal-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}

    .portal-panel-heading > div {
        display: flex;
        flex-direction: column;
    }

    .portal-panel-heading strong {
        font-size: 12px;
    }

    .portal-panel-heading span {
        margin-top: 2px;
        color: var(--strive-muted);
        font-size: 12px;
    }

    .portal-panel-heading button {
        padding: 6px 9px;
        border: 1px solid var(--strive-border);
        border-radius: 7px;
        color: var(--strive-muted);
        background: rgba(255,255,255,.025);
        font-size: 12px;
    }

.portal-chart {
    position: relative;
    height: 230px;
    overflow: hidden;
}

.portal-chart-grid {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 52px, rgba(255,255,255,.035) 53px);
}

.portal-chart-line {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 40%;
    height: 3px;
    background: var(--strive-gradient-horizontal);
    transform: rotate(-7deg);
    box-shadow: 0 0 25px rgba(37,99,255,.25);
}

.chart-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--strive-pink);
}

.d1 {
    left: 5%;
    bottom: 32%;
}

.d2 {
    left: 21%;
    bottom: 41%;
}

.d3 {
    left: 37%;
    bottom: 38%;
}

.d4 {
    left: 54%;
    bottom: 48%;
}

.d5 {
    left: 71%;
    bottom: 57%;
    background: var(--strive-blue);
}

.d6 {
    right: 5%;
    bottom: 67%;
    background: var(--strive-blue);
}

.portal-chart-days {
    display: flex;
    justify-content: space-between;
    color: #737f91;
    font-size: 12px;
}

.portal-nutrition-total {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 17px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--strive-border);
}

.portal-ring {
    width: 55px;
    height: 55px;
    margin: 0;
}

.portal-nutrition-total > div:last-child {
    display: flex;
    flex-direction: column;
}

.portal-nutrition-total strong {
    font-size: 22px;
}

.portal-nutrition-total span {
    color: var(--strive-muted);
    font-size: 12px;
}

.portal-macro,
.settings-field,
.nutrition-meal {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.portal-macro {
    padding: 8px 0;
    font-size: 12px;
}

    .portal-macro span {
        color: var(--strive-muted);
    }

.nutrition-meal {
    padding: 15px 5px;
    border-top: 1px solid var(--strive-border);
}

    .nutrition-meal > div {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

.nutrition-meal-type {
    color: var(--strive-pink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
}

.nutrition-meal strong {
    font-size: 12px;
}

.nutrition-meal > span {
    color: var(--strive-muted-light);
    font-size: 12px;
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.settings-field {
    padding: 12px 0;
    border-top: 1px solid var(--strive-border);
    font-size: 12px;
}

    .settings-field span {
        color: var(--strive-muted);
    }

@media (max-width: 900px) {
    .portal-shell {
        grid-template-columns: 74px minmax(0,1fr);
    }

    .portal-sidebar {
        width: 74px;
    }

    .portal-brand .brand-copy, .portal-nav-link span:last-child, .portal-user-copy, .portal-logout-button {
        display: none;
    }

    .portal-brand .brand {
        justify-content: center;
    }

    .portal-nav-link {
        justify-content: center;
    }

    .portal-main {
        grid-column: 2;
    }

    .portal-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .portal-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .portal-shell {
        display: block;
    }

    .portal-sidebar {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 62px;
        z-index: 1000;
        padding: 7px 16px;
        border-top: 1px solid var(--strive-border);
        border-right: 0;
    }

    .portal-brand, .portal-user {
        display: none;
    }

    .portal-nav {
        height: 100%;
        flex-direction: row;
        justify-content: space-around;
    }

    .portal-nav-link {
        flex: 1;
        flex-direction: column;
        gap: 2px;
        padding: 5px;
        font-size: 12px;
    }

        .portal-nav-link span:last-child {
            display: block;
        }

    .portal-header {
        height: 62px;
        padding: 0 15px;
    }

    .portal-search {
        display: none;
    }

    .portal-content {
        padding: 20px 14px 90px;
    }

    .portal-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }
}

.portal-nav-icon {
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.portal-nav-link.active .portal-nav-icon {
    color: var(--strive-pink);
}

.portal-search {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .portal-search i {
        font-size: 12px;
    }

.portal-logout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

    .portal-logout-button i {
        font-size: 12px;
    }

.portal-stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.portal-stat-icon {
    color: var(--strive-pink);
    font-size: 14px;
}

.portal-panel-heading strong i {
    margin-right: 6px;
    color: var(--strive-pink);
}

.btn i {
    margin-right: 6px;
}

.btn i {
    margin-right: 6px;
}

    .btn i:last-child {
        margin-right: 0;
        margin-left: 6px;
    }

.feature-icon,
.feature-card-icon,
.contact-icon,
.success-icon,
.plans-note-icon,
.free-plan-check {
    display: flex;
    align-items: center;
    justify-content: center;
}

select.form-control,
select.auth-input {
    color: var(--strive-text) !important;
    background-color: rgba(255,255,255,.035) !important;
    color-scheme: dark;
}

    select.form-control option,
    select.auth-input option {
        color: #ffffff;
        background-color: #101a29;
    }

        select.form-control option:checked,
        select.auth-input option:checked {
            color: #ffffff;
            background-color: #1e293b;
        }

        select.form-control option[value=""],
        select.auth-input option[value=""] {
            color: #94a3b8;
        }

/* ============================================================
   DYNAMIC SUBSCRIPTION PLANS
   ============================================================ */

.pricing-grid-dynamic {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 22px;
    margin: 0 auto;
}

    .pricing-grid-dynamic .pricing-card {
        width: 100%;
        max-width: 360px;
        flex: 0 1 360px;
        transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
    }

        .pricing-grid-dynamic .pricing-card:hover {
            transform: translateY(-4px);
            border-color: rgba(255, 255, 255, .16);
            background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022));
            box-shadow: 0 22px 55px rgba(0, 0, 0, .24);
        }

        .pricing-grid-dynamic .pricing-card.featured {
            border-color: rgba(255, 32, 142, .55);
            box-shadow: 0 18px 50px rgba(255, 32, 142, .09);
        }

            .pricing-grid-dynamic .pricing-card.featured:hover {
                border-color: rgba(255, 32, 142, .78);
                box-shadow: 0 24px 60px rgba(255, 32, 142, .14), 0 18px 45px rgba(0, 0, 0, .22);
            }

        .pricing-grid-dynamic .pricing-card.annual {
            border-color: rgba(37, 99, 255, .45);
        }

            .pricing-grid-dynamic .pricing-card.annual:hover {
                border-color: rgba(37, 99, 255, .72);
                box-shadow: 0 24px 60px rgba(37, 99, 255, .13), 0 18px 45px rgba(0, 0, 0, .22);
            }

    .pricing-grid-dynamic .pricing-heading {
        display: flex;
        flex-direction: column;
    }

        .pricing-grid-dynamic .pricing-heading p {
            min-height: 58px;
        }

    .pricing-grid-dynamic .plan-features {
        width: 100%;
    }

        .pricing-grid-dynamic .plan-features li {
            align-items: flex-start;
        }

            .pricing-grid-dynamic .plan-features li > span {
                width: 18px;
                flex: 0 0 18px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding-top: 2px;
            }

                .pricing-grid-dynamic .plan-features li > span i {
                    font-size: 12px;
                }

    .pricing-grid-dynamic .plan-button {
        margin-top: auto;
    }

.plans-loading {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--strive-muted);
    text-align: center;
}

    .plans-loading i {
        color: var(--strive-pink);
        font-size: 16px;
    }

.plans-empty {
    min-height: 260px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
    padding: 35px 20px;
    border: 1px solid var(--strive-border);
    border-radius: 16px;
    color: var(--strive-muted);
    background: linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015));
    text-align: center;
}

    .plans-empty i {
        margin-bottom: 4px;
        color: var(--strive-pink);
        font-size: 24px;
    }

    .plans-empty strong {
        color: var(--strive-text);
        font-size: 14px;
    }

    .plans-empty span {
        font-size: 12px;
    }


/* ============================================================
   DYNAMIC PLANS RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {

    .pricing-grid-dynamic {
        max-width: 760px;
    }

        .pricing-grid-dynamic .pricing-card {
            flex-basis: 350px;
            max-width: 350px;
        }
}

@media (max-width: 760px) {

    .pricing-grid-dynamic {
        max-width: 560px;
    }

        .pricing-grid-dynamic .pricing-card {
            flex-basis: 100%;
            max-width: 560px;
        }

        .pricing-grid-dynamic .pricing-heading p {
            min-height: 0;
        }
}

@media (max-width: 560px) {

    .pricing-grid-dynamic {
        gap: 20px;
    }

        .pricing-grid-dynamic .pricing-card {
            max-width: 100%;
            flex-basis: 100%;
            padding: 23px;
        }

        .pricing-grid-dynamic .plan-price strong {
            font-size: 34px;
        }

    .plans-loading,
    .plans-empty {
        min-height: 220px;
    }
}

/* ============================================================
   REGISTER SELECTED PLAN
   ============================================================ */

.register-selected-plan {
    position: relative;
    margin-top: 8px;
    padding: 23px;
    border: 1px solid var(--strive-border);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .018));
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .register-selected-plan.featured {
        border-color: rgba(255, 32, 142, .55);
        box-shadow: 0 15px 40px rgba(255, 32, 142, .08);
    }

    .register-selected-plan.annual {
        border-color: rgba(37, 99, 255, .50);
        box-shadow: 0 15px 40px rgba(37, 99, 255, .07);
    }

.register-plan-badge {
    position: absolute;
    top: -10px;
    right: 18px;
    padding: 4px 10px;
    border-radius: 30px;
    color: white;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    white-space: nowrap;
}

    .register-plan-badge.popular {
        background: var(--strive-pink);
    }

    .register-plan-badge.value {
        background: var(--strive-blue);
    }

.register-selected-plan-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

    .register-selected-plan-header .auth-eyebrow {
        margin-bottom: 6px;
    }

    .register-selected-plan-header .plan-label {
        margin-bottom: 3px;
    }

    .register-selected-plan-header h2 {
        margin: 0;
        font-size: 20px;
        line-height: 1.2;
        letter-spacing: -.025em;
    }

.register-change-plan {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 9px;
    border: 1px solid var(--strive-border);
    border-radius: 8px;
    color: var(--strive-muted-light);
    background: rgba(255, 255, 255, .025);
    font-size: 12px;
    font-weight: 700;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

    .register-change-plan:hover {
        color: white;
        border-color: rgba(255, 255, 255, .18);
        background: rgba(255, 255, 255, .055);
    }

    .register-change-plan i {
        color: var(--strive-pink);
        font-size: 12px;
    }

.register-selected-plan.annual .register-change-plan i {
    color: var(--strive-blue-light);
}

.register-selected-plan-price {
    margin-top: 18px;
}

    .register-selected-plan-price .plan-price {
        margin: 0 0 7px;
    }

        .register-selected-plan-price .plan-price strong {
            font-size: 33px;
        }

    .register-selected-plan-price p {
        margin: 9px 0 0;
        color: var(--strive-muted);
        font-size: 12px;
        line-height: 1.55;
    }

.register-selected-plan-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    margin-top: 18px;
    padding-top: 17px;
    border-top: 1px solid var(--strive-border);
}

.register-selected-plan-feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--strive-muted-light);
    font-size: 12px;
    line-height: 1.45;
}

    .register-selected-plan-feature > span {
        width: 17px;
        height: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 17px;
        margin-top: 1px;
        border-radius: 50%;
        color: white;
        background: var(--strive-pink);
    }

.register-selected-plan.annual .register-selected-plan-feature > span {
    background: var(--strive-blue);
}

.register-selected-plan-feature i {
    font-size: 12px;
}

@media (max-width: 560px) {

    .register-selected-plan {
        padding: 20px;
    }

    .register-selected-plan-header {
        flex-direction: column;
        gap: 12px;
    }

    .register-change-plan {
        align-self: flex-start;
    }

    .register-selected-plan-features {
        grid-template-columns: 1fr;
    }

    .register-selected-plan-price .plan-price strong {
        font-size: 30px;
    }
}

/* ============================================================
   STRIVE SETTINGS
   ============================================================ */

.settings-panel {
    position: relative;
    min-width: 0;
}

.settings-panel-wide {
    grid-column: 1 / -1;
}

.settings-panel-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--strive-border);
    border-radius: 9px;
    color: var(--strive-pink);
    background: rgba(255, 32, 142, .07);
    font-size: 12px;
}


/* ============================================================
   LOADING / ALERTS
   ============================================================ */

.settings-loading {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--strive-muted);
    font-size: 12px;
}

    .settings-loading i {
        color: var(--strive-pink);
        font-size: 15px;
    }

.settings-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 15px;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.5;
}

    .settings-alert.success {
        color: #9ee7c1;
        border: 1px solid rgba(52, 211, 153, .18);
        background: rgba(52, 211, 153, .06);
    }

    .settings-alert.error {
        color: #ff94c8;
        border: 1px solid rgba(255, 32, 142, .20);
        background: rgba(255, 32, 142, .06);
    }


/* ============================================================
   FORM FIELDS
   ============================================================ */

.settings-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.settings-form-group {
    margin-bottom: 13px;
}

    .settings-form-group label {
        display: block;
        margin-bottom: 6px;
        color: var(--strive-muted);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
    }

.settings-input {
    width: 100%;
    min-height: 41px;
    padding: 9px 11px;
    border: 1px solid var(--strive-border-light);
    border-radius: 8px;
    outline: none;
    color: var(--strive-text);
    background: rgba(255, 255, 255, .025);
    font-size: 12px;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

    .settings-input:focus {
        border-color: var(--strive-pink);
        background: rgba(255, 255, 255, .04);
        box-shadow: 0 0 0 3px rgba(255, 32, 142, .08);
    }

    .settings-input:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

.settings-select {
    color-scheme: dark;
}

    .settings-select option {
        color: white;
        background: #101a29;
    }


/* ============================================================
   ACCOUNT META
   ============================================================ */

.settings-account-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 5px;
    padding-top: 15px;
    border-top: 1px solid var(--strive-border);
}

    .settings-account-meta > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .settings-account-meta span {
        color: var(--strive-muted);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .settings-account-meta strong {
        color: var(--strive-muted-light);
        font-size: 12px;
    }


/* ============================================================
   ACTIONS
   ============================================================ */

.settings-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--strive-border);
}

    .settings-actions .btn {
        min-width: 135px;
        min-height: 38px;
        padding: 8px 14px;
        font-size: 12px;
    }


/* ============================================================
   SUBSCRIPTION
   ============================================================ */

.settings-status-badge {
    padding: 4px 8px;
    border-radius: 20px;
    color: #78e5af;
    background: rgba(52, 211, 153, .08);
    border: 1px solid rgba(52, 211, 153, .16);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
}

.settings-current-plan {
    margin-bottom: 18px;
    padding: 15px;
    border: 1px solid rgba(255, 32, 142, .18);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(255, 32, 142, .06), rgba(37, 99, 255, .035));
}

.settings-current-plan-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

    .settings-current-plan-header > div:first-child {
        display: flex;
        flex-direction: column;
    }

    .settings-current-plan-header span {
        color: var(--strive-pink);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .09em;
    }

    .settings-current-plan-header strong {
        margin-top: 2px;
        font-size: 16px;
    }

.settings-current-plan-price {
    color: white;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.settings-current-plan p {
    margin: 9px 0 0;
    color: var(--strive-muted);
    font-size: 12px;
    line-height: 1.5;
}

.settings-plan-meta {
    display: flex;
    gap: 16px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .055);
}

    .settings-plan-meta span {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #7e8a9e;
        font-size: 12px;
    }

    .settings-plan-meta i {
        color: var(--strive-blue-light);
    }

.settings-empty-state {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    padding: 13px;
    border: 1px solid var(--strive-border);
    border-radius: 9px;
    color: var(--strive-muted);
    background: rgba(255, 255, 255, .02);
    font-size: 12px;
}

    .settings-empty-state i {
        color: var(--strive-pink);
    }


/* ============================================================
   MEASUREMENT SYSTEM
   ============================================================ */

.settings-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.settings-choice {
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
    border: 1px solid var(--strive-border);
    border-radius: 11px;
    color: var(--strive-text);
    background: rgba(255, 255, 255, .02);
    text-align: left;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

    .settings-choice:hover:not(:disabled) {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, .15);
        background: rgba(255, 255, 255, .035);
    }

    .settings-choice.selected {
        border-color: rgba(255, 32, 142, .55);
        background: linear-gradient(145deg, rgba(255, 32, 142, .08), rgba(37, 99, 255, .025));
        box-shadow: 0 10px 30px rgba(255, 32, 142, .06);
    }

.settings-choice-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-choice-radio {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--strive-border-light);
    border-radius: 50%;
    color: white;
    font-size: 12px;
}

.settings-choice.selected .settings-choice-radio {
    border-color: var(--strive-pink);
    background: var(--strive-pink);
}

.settings-choice-top strong {
    font-size: 12px;
}

.settings-choice > span {
    margin-top: 10px;
    color: var(--strive-muted);
    font-size: 12px;
    line-height: 1.5;
}

.settings-choice > small {
    margin-top: auto;
    padding-top: 10px;
    color: var(--strive-blue-light);
    font-size: 12px;
    font-weight: 700;
}


/* ============================================================
   SECURITY
   ============================================================ */

.settings-security-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 0;
    border-top: 1px solid var(--strive-border);
}

    .settings-security-row:first-of-type {
        border-top: 0;
    }

.settings-security-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    color: var(--strive-pink);
    background: rgba(255, 32, 142, .07);
    font-size: 12px;
}

.settings-security-row > div:last-child {
    display: flex;
    flex-direction: column;
}

.settings-security-row span {
    color: var(--strive-muted);
    font-size: 12px;
}

.settings-security-row strong {
    margin-top: 1px;
    font-size: 12px;
}


/* ============================================================
   NUTRITION GOALS
   ============================================================ */

.settings-goal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.settings-goal {
    padding: 14px;
    border: 1px solid var(--strive-border);
    border-radius: 11px;
    background: rgba(255, 255, 255, .018);
}

.settings-goal-header {
    min-height: 46px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.settings-goal-icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    color: var(--strive-pink);
    background: rgba(255, 32, 142, .08);
    font-size: 12px;
}

.settings-goal-header > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.settings-goal-header strong {
    font-size: 12px;
}

.settings-goal-header span {
    overflow: hidden;
    margin-top: 2px;
    color: var(--strive-muted);
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-goal-input-wrap {
    position: relative;
    margin-top: 11px;
}

.settings-goal-input {
    padding-right: 48px;
    font-size: 13px;
    font-weight: 700;
}

.settings-goal-input-wrap > span {
    position: absolute;
    top: 50%;
    right: 11px;
    color: var(--strive-muted);
    font-size: 12px;
    font-weight: 700;
    transform: translateY(-50%);
    pointer-events: none;
}

.settings-goal-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 13px;
    color: var(--strive-muted);
    font-size: 12px;
    line-height: 1.5;
}

    .settings-goal-note i {
        margin-top: 2px;
        color: var(--strive-blue-light);
    }


/* ============================================================
   SETTINGS RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {

    .settings-goal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 750px) {

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-panel-wide {
        grid-column: auto;
    }

    .settings-account-meta {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {

    .settings-form-grid,
    .settings-choice-grid,
    .settings-goal-grid {
        grid-template-columns: 1fr;
    }

    .settings-account-meta {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .settings-current-plan-header {
        flex-direction: column;
    }

    .settings-plan-meta {
        flex-direction: column;
        gap: 6px;
    }

    .settings-actions .btn {
        width: 100%;
    }
}

/* ============================================================
   NUTRITION DIARY
   ============================================================ */

.nutrition-date-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 10px 12px;
    border: 1px solid var(--strive-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
}

.nutrition-date-nav,
.nutrition-modal-close,
.nutrition-entry-delete {
    border: 1px solid var(--strive-border);
    color: var(--strive-muted-light);
    background: rgba(255, 255, 255, .025);
    cursor: pointer;
}

.nutrition-date-nav {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    border-radius: 8px;
}

    .nutrition-date-nav:hover {
        color: white;
        border-color: rgba(255, 32, 142, .35);
        background: rgba(255, 32, 142, .07);
    }

.nutrition-date-current {
    min-width: 190px;
    display: flex;
    flex-direction: column;
}

    .nutrition-date-current span {
        color: var(--strive-pink);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .1em;
    }

    .nutrition-date-current strong {
        margin-top: 2px;
        font-size: 12px;
    }

.nutrition-date-input {
    min-height: 34px;
    margin-left: auto;
    padding: 6px 9px;
    border: 1px solid var(--strive-border);
    border-radius: 8px;
    outline: none;
    color: var(--strive-text);
    color-scheme: dark;
    background: rgba(255, 255, 255, .025);
    font-size: 12px;
}

.nutrition-today-button {
    min-height: 34px;
    padding: 6px 11px;
    font-size: 12px;
}

.nutrition-loading {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--strive-muted);
    font-size: 12px;
}

    .nutrition-loading i {
        color: var(--strive-pink);
    }

.nutrition-stat-progress {
    overflow: hidden;
    height: 3px;
    margin-top: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
}

    .nutrition-stat-progress span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--strive-gradient-horizontal);
    }

.nutrition-diary {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.nutrition-meal-panel {
    padding: 0;
    overflow: hidden;
}

.nutrition-meal-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--strive-border);
}

    .nutrition-meal-heading > div {
        display: flex;
        flex-direction: column;
    }

.nutrition-meal-type {
    color: var(--strive-pink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
}

.nutrition-meal-heading strong {
    margin-top: 2px;
    font-size: 12px;
}

.nutrition-add-meal-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 32, 142, .18);
    border-radius: 7px;
    color: var(--strive-pink-light);
    background: rgba(255, 32, 142, .05);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.nutrition-empty-meal {
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    color: var(--strive-muted);
    background: transparent;
    font-size: 12px;
    cursor: pointer;
}

    .nutrition-empty-meal i,
    .nutrition-empty-meal strong {
        color: var(--strive-pink);
    }

.nutrition-entry {
    display: flex;
    border-bottom: 1px solid var(--strive-border);
}

    .nutrition-entry:last-child {
        border-bottom: 0;
    }

.nutrition-entry-main {
    min-width: 0;
    display: flex;
    align-items: center;
    flex: 1;
    gap: 18px;
    padding: 13px 16px;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

    .nutrition-entry-main:hover {
        background: rgba(255, 255, 255, .018);
    }

.nutrition-entry-copy {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

    .nutrition-entry-copy strong {
        overflow: hidden;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nutrition-entry-copy span {
        margin-top: 2px;
        color: var(--strive-muted-light);
        font-size: 12px;
    }

    .nutrition-entry-copy small {
        overflow: hidden;
        max-width: 450px;
        margin-top: 2px;
        color: var(--strive-muted);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.nutrition-entry-macros {
    min-width: 280px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

    .nutrition-entry-macros div {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .nutrition-entry-macros strong {
        font-size: 12px;
    }

    .nutrition-entry-macros span {
        color: var(--strive-muted);
        font-size: 12px;
    }

.nutrition-entry-delete {
    width: 40px;
    border-width: 0 0 0 1px;
    border-radius: 0;
    color: var(--strive-muted);
}

    .nutrition-entry-delete:hover {
        color: var(--strive-pink-light);
        background: rgba(255, 32, 142, .06);
    }

.nutrition-daily-summary {
    margin-top: 12px;
}

.nutrition-summary-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

    .nutrition-summary-grid > div {
        padding: 10px;
        border: 1px solid var(--strive-border);
        border-radius: 8px;
        background: rgba(255, 255, 255, .018);
    }

    .nutrition-summary-grid span {
        display: block;
        color: var(--strive-muted);
        font-size: 12px;
    }

    .nutrition-summary-grid strong {
        display: block;
        margin-top: 3px;
        font-size: 12px;
    }


/* ============================================================
   NUTRITION MODAL
   ============================================================ */

.nutrition-modal-backdrop {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 55px 20px;
    background: rgba(3, 7, 18, .80);
    backdrop-filter: blur(5px);
}

.nutrition-modal {
    width: 100%;
    max-width: 760px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    background: #121d2e;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .48);
}

.nutrition-modal-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--strive-border);
}

    .nutrition-modal-heading h2 {
        margin: 3px 0 0;
        font-size: 20px;
    }

    .nutrition-modal-heading p {
        margin: 3px 0 0;
        color: var(--strive-muted);
        font-size: 12px;
    }

.nutrition-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.nutrition-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.nutrition-textarea {
    min-height: 78px;
    resize: vertical;
}

.nutrition-optional {
    color: var(--strive-muted);
    font-size: 12px;
    font-weight: 400;
}

.nutrition-form-section {
    margin-top: 18px;
    padding-top: 17px;
    border-top: 1px solid var(--strive-border);
}

.nutrition-form-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 11px;
}

    .nutrition-form-section-heading strong {
        font-size: 12px;
    }

    .nutrition-form-section-heading span {
        color: var(--strive-muted);
        font-size: 12px;
    }

.nutrition-serving-grid {
    display: grid;
    grid-template-columns: .6fr 1fr 1.4fr;
    gap: 10px;
}

.nutrition-macro-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.nutrition-secondary-macro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.nutrition-macro-field label {
    display: block;
    margin-bottom: 5px;
    color: var(--strive-muted);
    font-size: 12px;
    font-weight: 700;
}

.nutrition-macro-field > div {
    position: relative;
}

.nutrition-macro-field .settings-input {
    padding-right: 42px;
}

.nutrition-macro-field > div > span {
    position: absolute;
    top: 50%;
    right: 10px;
    color: var(--strive-muted);
    font-size: 12px;
    font-weight: 700;
    transform: translateY(-50%);
}

.nutrition-estimated {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 18px;
    padding: 11px;
    border: 1px solid var(--strive-border);
    border-radius: 9px;
    background: rgba(255, 255, 255, .018);
    cursor: pointer;
}

    .nutrition-estimated > span {
        display: flex;
        flex-direction: column;
    }

    .nutrition-estimated strong {
        font-size: 12px;
    }

    .nutrition-estimated small {
        margin-top: 2px;
        color: var(--strive-muted);
        font-size: 12px;
    }

.nutrition-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid var(--strive-border);
}

    .nutrition-modal-actions .btn {
        min-width: 120px;
    }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 950px) {
    .nutrition-summary-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .nutrition-entry-macros {
        min-width: 230px;
    }
}

@media (max-width: 700px) {
    .nutrition-date-bar {
        flex-wrap: wrap;
    }

    .nutrition-date-current {
        flex: 1;
    }

    .nutrition-date-input {
        order: 5;
        width: 100%;
        margin-left: 0;
    }

    .nutrition-entry-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .nutrition-entry-macros {
        width: 100%;
        min-width: 0;
    }

        .nutrition-entry-macros div {
            align-items: flex-start;
        }

    .nutrition-summary-grid,
    .nutrition-macro-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nutrition-serving-grid {
        grid-template-columns: 1fr 1fr;
    }

        .nutrition-serving-grid .settings-form-group:last-child {
            grid-column: 1 / -1;
        }
}

@media (max-width: 520px) {
    .nutrition-modal-backdrop {
        padding: 15px 10px;
    }

    .nutrition-modal {
        padding: 19px;
    }

    .nutrition-form-grid,
    .nutrition-serving-grid,
    .nutrition-secondary-macro-grid {
        grid-template-columns: 1fr;
    }

        .nutrition-serving-grid .settings-form-group:last-child {
            grid-column: auto;
        }

    .nutrition-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nutrition-modal-actions {
        flex-direction: column-reverse;
    }

        .nutrition-modal-actions .btn {
            width: 100%;
        }
}
/* ============================================================
   DASHBOARD - LIVE DATA
   ============================================================ */

.dashboard-loading {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--strive-muted);
    font-size: 12px;
}

    .dashboard-loading i {
        color: var(--strive-pink);
    }


/* ============================================================
   DYNAMIC RINGS
   ============================================================ */

.dashboard-ring {
    position: relative;
    border: 0 !important;
    border-radius: 50%;
    background: conic-gradient( var(--strive-pink) 0%, var(--strive-blue) var(--progress), rgba(255, 255, 255, .07) var(--progress), rgba(255, 255, 255, .07) 100% );
}

    .dashboard-ring::after {
        content: "";
        position: absolute;
        inset: 6px;
        border-radius: 50%;
        background: var(--strive-navy);
    }

.dashboard-ring-large::after {
    inset: 7px;
}


/* ============================================================
   WEEKLY CHART
   ============================================================ */

.dashboard-chart {
    position: relative;
    min-height: 180px;
}

.dashboard-chart-svg {
    width: 100%;
    height: 180px;
    overflow: visible;
}

.dashboard-chart-grid-line {
    stroke: rgba(255, 255, 255, .055);
    stroke-width: 1;
}

.dashboard-chart-data-line {
    fill: none;
    stroke: var(--strive-pink);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 4px 8px rgba(255, 32, 142, .20));
}

.dashboard-chart-goal-line {
    fill: none;
    stroke: var(--strive-blue-light);
    stroke-width: 1.5;
    stroke-dasharray: 6 5;
    opacity: .65;
}

.dashboard-chart-point {
    fill: var(--strive-pink);
    stroke: #ffffff;
    stroke-width: 2;
}

.dashboard-chart-today {
    color: var(--strive-pink) !important;
    font-weight: 700;
}

.dashboard-period {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--strive-muted-light);
    font-size: 12px;
}

    .dashboard-period i {
        color: var(--strive-blue-light);
    }

.dashboard-chart-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 8px;
    color: var(--strive-muted);
    font-size: 12px;
}

    .dashboard-chart-legend span {
        display: flex;
        align-items: center;
        gap: 5px;
    }

.dashboard-legend-actual {
    color: var(--strive-pink);
    font-size: 12px;
}

.dashboard-legend-goal {
    color: var(--strive-blue-light);
}


/* ============================================================
   NUTRITION PANEL
   ============================================================ */

.dashboard-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--strive-pink-light);
    font-size: 12px;
    font-weight: 700;
}

    .dashboard-panel-link:hover {
        color: white;
    }

.portal-macro strong small {
    margin-left: 3px;
    color: var(--strive-muted);
    font-size: 12px;
    font-weight: 500;
}

.dashboard-nutrition-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--strive-border);
}

    .dashboard-nutrition-footer > div {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .dashboard-nutrition-footer span {
        color: var(--strive-muted);
        font-size: 12px;
    }

    .dashboard-nutrition-footer strong {
        font-size: 12px;
    }


@media (max-width: 650px) {

    .dashboard-chart-svg {
        height: 150px;
    }

    .dashboard-chart {
        min-height: 150px;
    }

    .dashboard-chart-legend {
        justify-content: flex-start;
    }

    .dashboard-nutrition-footer {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* ============================================================
   STRIVE MOBILE RESPONSIVE
   Keep at bottom of app.css
   ============================================================ */


/* ============================================================
   GLOBAL RESPONSIVE SAFETY
   ============================================================ */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg {
    max-width: 100%;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

.portal-page,
.site-container,
.auth-container,
.legal-content,
.portal-panel,
.portal-stat-card {
    min-width: 0;
}


/* ============================================================
   TABLET / SMALL DESKTOP
   ============================================================ */

@media (max-width: 1100px) {

    /* -------------------------
       PORTAL
       ------------------------- */

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

    .portal-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .portal-panel-large {
        grid-column: auto;
    }


    /* -------------------------
       SETTINGS
       ------------------------- */

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-panel-wide {
        grid-column: auto;
    }

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


    /* -------------------------
       HOME
       ------------------------- */

    .hero-grid {
        gap: 45px;
    }

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


    /* -------------------------
       LEGAL
       ------------------------- */

    .legal-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 30px;
    }
}


/* ============================================================
   TABLET / LARGE PHONE
   ============================================================ */

@media (max-width: 900px) {

    /* -------------------------
       GLOBAL
       ------------------------- */

    .site-container {
        width: 100%;
        max-width: none;
        padding-left: 24px;
        padding-right: 24px;
    }


    /* -------------------------
       PORTAL
       ------------------------- */

    .portal-page-heading {
        align-items: flex-start;
    }

    .portal-page-heading-actions {
        flex-direction: column;
        gap: 14px;
    }

        .portal-page-heading-actions > .btn {
            align-self: flex-start;
        }


    /* -------------------------
       DASHBOARD
       ------------------------- */

    .portal-dashboard-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .dashboard-chart {
        width: 100%;
        overflow: hidden;
    }

    .dashboard-chart-svg {
        width: 100%;
    }


    /* -------------------------
       SETTINGS
       ------------------------- */

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

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


    /* -------------------------
       NUTRITION
       ------------------------- */

    .nutrition-entry-main {
        min-width: 0;
    }

    .nutrition-entry-copy {
        min-width: 0;
    }

    .nutrition-entry-macros {
        min-width: 250px;
    }

    .nutrition-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }


    /* -------------------------
       HOME
       ------------------------- */

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-content {
        max-width: 720px;
    }

    .hero-dashboard {
        width: 100%;
    }

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

    .cta-card {
        grid-template-columns: 1fr;
        gap: 28px;
    }


    /* -------------------------
       CONTACT
       ------------------------- */

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-info {
        order: 2;
    }

    .contact-form-card {
        order: 1;
    }


    /* -------------------------
       PLANS
       ------------------------- */

    .pricing-grid,
    .pricing-grid-dynamic {
        grid-template-columns: 1fr;
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }


    /* -------------------------
       LEGAL
       Privacy + Terms
       ------------------------- */

    .legal-layout {
        display: block;
    }

    .legal-sidebar {
        display: none;
    }

    .legal-content {
        width: 100%;
        max-width: none;
    }

    .legal-section {
        scroll-margin-top: 25px;
    }
}


/* ============================================================
   PRIMARY PHONE BREAKPOINT
   ============================================================ */

@media (max-width: 700px) {

    /* ========================================================
       MOBILE FOUNDATION
       ======================================================== */

    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        min-width: 0;
    }

    .site-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /*
       iOS Safari zooms forms when font-size is below 16px.
       Keep actual input controls at 16px on phone.
    */

    input,
    select,
    textarea,
    .form-control,
    .auth-input,
    .settings-input,
    .nutrition-date-input {
        font-size: 16px !important;
    }

        button,
        .btn,
        input[type="button"],
        input[type="submit"] {
            touch-action: manipulation;
        }


    /* ========================================================
       BUTTONS / TOUCH TARGETS
       ======================================================== */

    .btn {
        min-height: 44px;
    }

    .btn-large {
        min-height: 48px;
    }


    /* ========================================================
       PORTAL COMMON
       Dashboard / Nutrition / Settings
       ======================================================== */

    .portal-page {
        width: 100%;
        padding-bottom: 90px;
    }

    .portal-page-heading {
        margin-bottom: 18px;
    }

        .portal-page-heading h1 {
            line-height: 1.1;
        }

        .portal-page-heading p {
            max-width: 100%;
            line-height: 1.5;
        }

    .portal-page-heading-actions {
        width: 100%;
    }

        .portal-page-heading-actions > .btn {
            width: 100%;
            justify-content: center;
        }

    .portal-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .portal-stat-card {
        min-width: 0;
        padding: 14px;
    }

        .portal-stat-card > strong {
            overflow-wrap: anywhere;
        }

    .portal-panel {
        min-width: 0;
    }

    .portal-panel-heading {
        align-items: flex-start;
        gap: 10px;
    }


    /* ========================================================
       DASHBOARD
       ======================================================== */

    .portal-dashboard-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dashboard-period {
        white-space: nowrap;
    }

    .dashboard-chart {
        min-height: 160px;
    }

    .dashboard-chart-svg {
        height: 160px;
    }

    .portal-chart-days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        width: 100%;
    }

        .portal-chart-days span {
            min-width: 0;
            text-align: center;
        }

    .dashboard-chart-legend {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
    }

    .portal-nutrition-total {
        align-items: center;
    }

    .dashboard-nutrition-footer {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    /* ========================================================
       SETTINGS
       ======================================================== */

    .settings-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .settings-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .settings-choice-grid {
        grid-template-columns: 1fr;
    }

    .settings-choice {
        min-height: 0;
    }

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

    .settings-current-plan-header {
        flex-direction: column;
        gap: 8px;
    }

    .settings-current-plan-price {
        white-space: normal;
    }

    .settings-plan-meta {
        flex-direction: column;
        gap: 7px;
    }

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

    .settings-actions {
        width: 100%;
    }

        .settings-actions .btn,
        .settings-actions > a {
            width: 100%;
            min-height: 44px;
            justify-content: center;
        }


    /* ========================================================
       NUTRITION DATE NAVIGATION
       ======================================================== */

    .nutrition-date-bar {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        grid-template-areas:
            "previous current next"
            "picker picker picker"
            "today today today";
        gap: 9px;
        width: 100%;
        padding: 11px;
    }

        .nutrition-date-bar > .nutrition-date-nav:first-child {
            grid-area: previous;
        }

        .nutrition-date-bar > .nutrition-date-nav:last-child {
            grid-area: next;
        }

    .nutrition-date-current {
        grid-area: current;
        min-width: 0;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

        .nutrition-date-current strong {
            overflow: hidden;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .nutrition-date-input {
        grid-area: picker;
        width: 100%;
        min-height: 44px;
        margin: 0;
    }

    .nutrition-today-button {
        grid-area: today;
        width: 100%;
        min-height: 44px;
    }

    .nutrition-date-nav {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }


    /* ========================================================
       NUTRITION MEALS / ENTRIES
       ======================================================== */

    .nutrition-diary {
        gap: 10px;
    }

    .nutrition-meal-heading {
        padding: 13px;
    }

    .nutrition-add-meal-button {
        min-height: 40px;
        padding: 8px 11px;
    }

    .nutrition-empty-meal {
        min-height: 64px;
    }

    .nutrition-entry {
        position: relative;
        align-items: stretch;
    }

    .nutrition-entry-main {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 13px;
    }

    .nutrition-entry-copy strong,
    .nutrition-entry-copy span,
    .nutrition-entry-copy small {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .nutrition-entry-macros {
        width: 100%;
        min-width: 0;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

        .nutrition-entry-macros div {
            align-items: flex-start;
            min-width: 0;
        }

    .nutrition-entry-delete {
        width: 44px;
        min-width: 44px;
    }

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


    /* ========================================================
       NUTRITION MODAL -> MOBILE BOTTOM SHEET
       ======================================================== */

    .nutrition-modal-backdrop {
        align-items: flex-end;
        justify-content: center;
        padding: 0;
    }

    .nutrition-modal {
        width: 100%;
        max-width: none;
        max-height: 94dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 18px 18px 0 0;
    }

    .nutrition-modal-heading {
        position: sticky;
        z-index: 4;
        top: -18px;
        margin: -18px -16px 18px;
        padding: 18px 16px 14px;
        background: #121d2e;
    }

    .nutrition-modal-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .nutrition-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .nutrition-serving-grid {
        grid-template-columns: 1fr 1fr;
    }

        .nutrition-serving-grid .settings-form-group:last-child {
            grid-column: 1 / -1;
        }

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

    .nutrition-secondary-macro-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nutrition-modal-actions {
        position: sticky;
        z-index: 4;
        bottom: calc(-18px - env(safe-area-inset-bottom));
        margin: 20px -16px calc(-18px - env(safe-area-inset-bottom));
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
        background: #121d2e;
    }

        .nutrition-modal-actions .btn {
            min-height: 46px;
        }


    /* ========================================================
       HOME / MARKETING
       ======================================================== */

    .hero {
        overflow: hidden;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .hero-content {
        min-width: 0;
    }

        .hero-content h1 {
            max-width: 100%;
            overflow-wrap: normal;
        }

    .hero-description {
        max-width: 100%;
    }

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

        .hero-actions .btn {
            width: 100%;
            justify-content: center;
        }

    .hero-trust {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }

        .hero-trust > div:not(.trust-divider) {
            min-width: 0;
            flex: 1;
        }

    /*
       The dashboard on the home page is decorative.
       Hiding it on a phone keeps the call-to-action front and center
       instead of rendering a tiny desktop dashboard.
    */

    .hero-dashboard {
        display: none;
    }

    .feature-strip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .feature-strip-item {
        min-width: 0;
    }

    .feature-card-grid {
        grid-template-columns: 1fr;
    }

    .feature-card {
        min-width: 0;
    }

    .section-heading {
        max-width: 100%;
    }

        .section-heading h1,
        .section-heading h2 {
            overflow-wrap: normal;
        }

    .cta-card {
        grid-template-columns: 1fr;
        padding: 28px 20px;
    }

    .cta-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 10px;
    }

        .cta-actions .btn {
            width: 100%;
            justify-content: center;
        }


    /* ========================================================
       LOGIN / REGISTER
       ======================================================== */

    .auth-page {
        min-height: 100dvh;
        align-items: flex-start;
        overflow-x: hidden;
        padding: max(24px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom));
    }

    .auth-container,
    .auth-container-wide {
        width: 100%;
        max-width: 560px;
    }

    .auth-card,
    .register-card {
        width: 100%;
        padding: 22px 18px;
        border-radius: 14px;
    }

    .auth-card-header h1 {
        line-height: 1.15;
    }

    .auth-card-header p {
        line-height: 1.5;
    }

    .auth-brand-mobile {
        width: 100%;
    }

    .auth-submit,
    .auth-secondary-button {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-label-row {
        align-items: center;
        gap: 10px;
    }

    .form-link {
        white-space: nowrap;
    }

    .auth-checkbox {
        align-items: flex-start;
        gap: 10px;
    }

        .auth-checkbox input[type="checkbox"] {
            width: 20px;
            height: 20px;
            min-width: 20px;
            margin-top: 1px;
        }

    .register-selected-plan-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .register-change-plan {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .register-selected-plan-price {
        min-width: 0;
    }

    .register-selected-plan-features {
        grid-template-columns: 1fr;
    }


    /* ========================================================
       PLANS
       ======================================================== */

    .page-hero {
        padding-left: 0;
        padding-right: 0;
    }

    .pricing-grid,
    .pricing-grid-dynamic {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 16px;
    }

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

    .plan-price {
        flex-wrap: wrap;
    }

    .plan-button {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .plans-note {
        align-items: flex-start;
    }


    /* ========================================================
       CONTACT
       ======================================================== */

    .contact-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .contact-form-card,
    .contact-info-card {
        min-width: 0;
    }

    .contact-form-card {
        padding: 20px 16px;
    }

        .contact-form-card .form-row {
            grid-template-columns: 1fr;
        }

    .submit-button {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }


    /* ========================================================
       PRIVACY / TERMS
       ======================================================== */

    .legal-page {
        overflow-x: hidden;
    }

    .legal-header {
        padding-top: 30px;
    }

        .legal-header h1 {
            line-height: 1.15;
        }

        .legal-header p {
            max-width: 100%;
        }

    .legal-effective-date {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

        .legal-effective-date > span {
            display: none;
        }

    .legal-layout {
        display: block;
    }

    .legal-sidebar {
        display: none;
    }

    .legal-content {
        width: 100%;
        min-width: 0;
    }

    .legal-section {
        min-width: 0;
        scroll-margin-top: 20px;
    }

        .legal-section h2 {
            align-items: flex-start;
            line-height: 1.3;
        }

            .legal-section h2 span {
                flex-shrink: 0;
            }

        .legal-section p,
        .legal-section li,
        .legal-warning,
        .legal-intro {
            overflow-wrap: break-word;
        }

    .legal-warning,
    .legal-intro,
    .legal-contact {
        padding: 14px;
    }
}


/* ============================================================
   SMALL PHONE
   iPhone SE / narrow Android
   ============================================================ */

@media (max-width: 480px) {

    /* -------------------------
       GLOBAL
       ------------------------- */

    .site-container {
        padding-left: 14px;
        padding-right: 14px;
    }


    /* -------------------------
       PORTAL
       ------------------------- */

    .portal-stat-grid {
        gap: 8px;
    }

    .portal-stat-card {
        padding: 12px;
    }

    .portal-stat-label {
        white-space: normal;
    }


    /* -------------------------
       SETTINGS
       ------------------------- */

    .settings-account-meta {
        grid-template-columns: 1fr;
    }

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


    /* -------------------------
       NUTRITION
       ------------------------- */

    .nutrition-entry-macros {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 8px;
    }

    .nutrition-secondary-macro-grid {
        grid-template-columns: 1fr;
    }

    .nutrition-serving-grid {
        grid-template-columns: 1fr;
    }

        .nutrition-serving-grid .settings-form-group:last-child {
            grid-column: auto;
        }

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


    /* -------------------------
       HOME
       ------------------------- */

    .hero-trust {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

        .hero-trust .trust-divider {
            width: 100%;
            height: 1px;
        }

    .feature-strip-grid {
        grid-template-columns: 1fr;
    }


    /* -------------------------
       AUTH
       ------------------------- */

    .auth-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .auth-card,
    .register-card {
        padding: 20px 15px;
    }


    /* -------------------------
       DASHBOARD
       ------------------------- */

    .dashboard-nutrition-footer {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 5px;
    }

    .dashboard-period {
        font-size: 12px;
    }
}


/* ============================================================
   VERY NARROW PHONE
   ============================================================ */

@media (max-width: 380px) {

    .portal-stat-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-nutrition-footer {
        grid-template-columns: 1fr;
    }

    .nutrition-macro-form-grid,
    .nutrition-summary-grid {
        grid-template-columns: 1fr;
    }

    .portal-panel-heading {
        flex-wrap: wrap;
    }
}


/* ============================================================
   LANDSCAPE PHONE
   ============================================================ */

@media (max-height: 520px) and (orientation: landscape) {

    .nutrition-modal-backdrop {
        align-items: flex-start;
    }

    .nutrition-modal {
        max-height: 100dvh;
        border-radius: 0;
    }

    .auth-page {
        min-height: auto;
    }
}


/* ============================================================
   SAFE AREA SUPPORT
   iPhone notch / home indicator
   ============================================================ */

@supports (padding: max(0px)) {

    @media (max-width: 700px) {

        .portal-page {
            padding-bottom: calc(90px + env(safe-area-inset-bottom));
        }
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ============================================================
   NUTRITION FOOD SEARCH
   ============================================================ */

.nutrition-search-modal {
    max-width: 900px;
}

.nutrition-search-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
}

.nutrition-search-input-wrap {
    position: relative;
}

    .nutrition-search-input-wrap > i {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 13px;
        color: var(--strive-muted);
        font-size: 12px;
        transform: translateY(-50%);
        pointer-events: none;
    }

.nutrition-search-input {
    padding-left: 36px;
}

.nutrition-search-bar .btn {
    min-width: 105px;
}

.nutrition-search-manual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--strive-border);
    border-radius: 9px;
    background: rgba(255, 255, 255, .018);
}

    .nutrition-search-manual > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .nutrition-search-manual strong {
        font-size: 12px;
    }

    .nutrition-search-manual span {
        margin-top: 2px;
        color: var(--strive-muted);
        font-size: 12px;
    }

    .nutrition-search-manual .btn {
        min-height: 34px;
        flex-shrink: 0;
        font-size: 12px;
    }

.nutrition-search-loading {
    min-height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--strive-muted);
    font-size: 12px;
}

    .nutrition-search-loading i {
        color: var(--strive-pink);
    }

.nutrition-search-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 17px;
    padding-bottom: 8px;
}

    .nutrition-search-summary strong {
        font-size: 12px;
    }

    .nutrition-search-summary span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: var(--strive-muted);
        font-size: 12px;
    }

.nutrition-search-results {
    max-height: 55vh;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--strive-border);
    border-radius: 10px;
}

    .nutrition-search-results::-webkit-scrollbar {
        width: 6px;
    }

    .nutrition-search-results::-webkit-scrollbar-track {
        background: transparent;
    }

    .nutrition-search-results::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(255, 255, 255, .10);
    }

.nutrition-search-result {
    width: 100%;
    min-height: 76px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px 20px;
    align-items: center;
    gap: 18px;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--strive-border);
    color: var(--strive-text);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease;
}

    .nutrition-search-result:last-child {
        border-bottom: 0;
    }

    .nutrition-search-result:hover {
        background: rgba(255, 255, 255, .025);
    }

    .nutrition-search-result:disabled {
        opacity: .55;
        cursor: wait;
    }

.nutrition-search-result-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .nutrition-search-result-main strong {
        overflow: hidden;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nutrition-search-result-main > span {
        overflow: hidden;
        margin-top: 2px;
        color: var(--strive-muted-light);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nutrition-search-result-main small {
        overflow: hidden;
        margin-top: 3px;
        color: var(--strive-muted);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.nutrition-search-result-macros {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

    .nutrition-search-result-macros > div {
        min-width: 0;
        display: flex;
        align-items: flex-end;
        flex-direction: column;
    }

    .nutrition-search-result-macros strong {
        color: var(--strive-muted-light);
        font-size: 12px;
        font-weight: 700;
    }

    .nutrition-search-result-macros span {
        margin-top: 2px;
        color: var(--strive-muted);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .06em;
    }

.nutrition-search-result:hover .nutrition-search-result-macros strong {
    color: white;
}

.nutrition-search-result-arrow {
    color: var(--strive-muted);
    font-size: 12px;
}

.nutrition-search-result:hover .nutrition-search-result-arrow {
    color: var(--strive-pink);
}

.nutrition-search-empty,
.nutrition-search-start {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 25px;
    text-align: center;
}

.nutrition-search-empty-icon,
.nutrition-search-start-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 11px;
    border: 1px solid rgba(255, 32, 142, .14);
    border-radius: 50%;
    color: var(--strive-pink);
    background: rgba(255, 32, 142, .07);
}

.nutrition-search-empty strong,
.nutrition-search-start strong {
    font-size: 12px;
}

.nutrition-search-empty > span,
.nutrition-search-start > span {
    max-width: 420px;
    margin-top: 5px;
    color: var(--strive-muted);
    font-size: 12px;
    line-height: 1.5;
}

.nutrition-search-empty .btn {
    margin-top: 14px;
}

.nutrition-search-start small {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    color: var(--strive-muted);
    font-size: 12px;
}

    .nutrition-search-start small i {
        color: var(--strive-blue-light);
    }


/* ============================================================
   MOBILE FOOD SEARCH
   ============================================================ */

@media (max-width: 700px) {

    .nutrition-search-modal {
        max-width: none;
    }

    .nutrition-search-bar {
        grid-template-columns: 1fr;
    }

    .nutrition-search-input {
        min-height: 46px;
    }

    .nutrition-search-bar .btn {
        width: 100%;
        min-height: 46px;
    }

    .nutrition-search-manual {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

        .nutrition-search-manual .btn {
            width: 100%;
            min-height: 44px;
            justify-content: center;
        }

    .nutrition-search-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .nutrition-search-results {
        max-height: none;
        overflow: visible;
    }

    .nutrition-search-result {
        min-height: 92px;
        grid-template-columns: minmax(0, 1fr) 18px;
        gap: 9px;
        padding: 13px;
    }

    .nutrition-search-result-main {
        grid-column: 1;
        grid-row: 1;
    }

        .nutrition-search-result-main strong {
            overflow: visible;
            font-size: 12px;
            text-overflow: unset;
            white-space: normal;
        }

        .nutrition-search-result-main > span {
            overflow: visible;
            font-size: 12px;
            text-overflow: unset;
            white-space: normal;
        }

        .nutrition-search-result-main small {
            overflow: visible;
            line-height: 1.45;
            text-overflow: unset;
            white-space: normal;
        }

    .nutrition-search-result-macros {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        margin-top: 7px;
    }

        .nutrition-search-result-macros > div {
            align-items: flex-start;
        }

    .nutrition-search-result-arrow {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
    }
}


@media (max-width: 420px) {

    .nutrition-search-result-macros {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 8px;
    }
}

.nutrition-search-result-nutrition {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nutrition-search-result-basis {
    color: var(--strive-muted);
    font-size: 12px;
    text-align: right;
    letter-spacing: .03em;
}

@media (max-width: 700px) {

    .nutrition-search-result-nutrition {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        margin-top: 7px;
    }

    .nutrition-search-result-macros {
        margin-top: 0;
    }

    .nutrition-search-result-basis {
        text-align: left;
    }
}

/* ============================================================
   NUTRITION DELETE CONFIRMATION
   ============================================================ */

.nutrition-confirm-backdrop {
    position: fixed;
    z-index: 6000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 7, 18, .82);
    backdrop-filter: blur(6px);
}

.nutrition-confirm-dialog {
    width: 100%;
    max-width: 460px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    background: #121d2e;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}

.nutrition-confirm-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px auto 0;
    border: 1px solid rgba(255, 32, 142, .18);
    border-radius: 50%;
    color: var(--strive-pink-light);
    background: rgba(255, 32, 142, .08);
    font-size: 17px;
}

.nutrition-confirm-content {
    padding: 18px 24px 22px;
    text-align: center;
}

    .nutrition-confirm-content h3 {
        margin: 5px 0 0;
        color: white;
        font-size: 18px;
    }

    .nutrition-confirm-content > p {
        margin: 9px auto 0;
        max-width: 370px;
        color: var(--strive-muted);
        font-size: 12px;
        line-height: 1.6;
    }

        .nutrition-confirm-content > p strong {
            color: var(--strive-muted-light);
            font-weight: 700;
        }

.nutrition-confirm-food {
    display: grid;
    grid-template-columns: 1.8fr .8fr .8fr;
    gap: 8px;
    margin-top: 18px;
    padding: 11px;
    border: 1px solid var(--strive-border);
    border-radius: 9px;
    background: rgba(255, 255, 255, .018);
    text-align: left;
}

    .nutrition-confirm-food > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .nutrition-confirm-food span {
        color: var(--strive-muted);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .07em;
    }

    .nutrition-confirm-food strong {
        overflow: hidden;
        margin-top: 3px;
        color: var(--strive-muted-light);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.nutrition-confirm-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    margin-top: 13px;
    color: var(--strive-muted);
    font-size: 12px;
}

    .nutrition-confirm-note i {
        margin-top: 1px;
        color: var(--strive-blue-light);
    }

.nutrition-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    padding: 14px 24px 24px;
    border-top: 1px solid var(--strive-border);
}

    .nutrition-confirm-actions .btn {
        min-height: 42px;
        justify-content: center;
    }

.nutrition-delete-confirm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 32, 142, .32);
    border-radius: 8px;
    color: white;
    background: rgba(255, 32, 142, .12);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

    .nutrition-delete-confirm-button:hover:not(:disabled) {
        border-color: rgba(255, 32, 142, .60);
        background: rgba(255, 32, 142, .22);
    }

    .nutrition-delete-confirm-button:disabled {
        opacity: .55;
        cursor: not-allowed;
    }


/* ============================================================
   MOBILE DELETE CONFIRMATION
   ============================================================ */

@media (max-width: 700px) {

    .nutrition-confirm-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .nutrition-confirm-dialog {
        max-width: none;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .nutrition-confirm-food {
        grid-template-columns: 1fr 1fr;
    }

        .nutrition-confirm-food > div:first-child {
            grid-column: 1 / -1;
        }

    .nutrition-confirm-actions {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}


@media (max-width: 420px) {

    .nutrition-confirm-content {
        padding-right: 18px;
        padding-left: 18px;
    }

    .nutrition-confirm-actions {
        grid-template-columns: 1fr;
        padding-right: 18px;
        padding-left: 18px;
    }

        .nutrition-confirm-actions .btn,
        .nutrition-delete-confirm-button {
            width: 100%;
            min-height: 46px;
        }
}

.portal-logout-form {
    display: flex;
    margin: 0;
    padding: 0;
}

/* ============================================================
   RECENT FOODS
   ============================================================ */

.nutrition-recent-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.nutrition-recent-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

    .nutrition-recent-heading > div {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }

    .nutrition-recent-heading strong {
        font-size: 1.05rem;
        font-weight: 700;
        color: #f8fafc;
    }

    .nutrition-recent-heading span {
        font-size: 0.9rem;
        color: #94a3b8;
    }

    .nutrition-recent-heading > i {
        font-size: 1.1rem;
        color: #ff2b93;
    }

.nutrition-recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.nutrition-recent-food {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
    padding: 0;
    border: 1px solid var(--strive-border);
    border-radius: 11px;
    background: var(--strive-surface-raised);
    overflow: hidden;
}

.nutrition-recent-food-open {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 13px 14px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    .nutrition-recent-food-open:hover {
        background: rgba(255, 255, 255, .03);
    }

.nutrition-recent-quick-add {
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-left: 1px solid var(--strive-border);
    color: var(--strive-pink);
    background: rgba(255, 32, 142, .055);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

    .nutrition-recent-quick-add:hover {
        color: white;
        background: rgba(255, 32, 142, .16);
    }

    .nutrition-recent-quick-add i {
        font-size: 15px;
    }

/* ============================================================
   STRIVE 2026 PREMIUM SAAS DESIGN SYSTEM
   Production UX baseline
   ============================================================ */

:root {
    /* Brand */
    --strive-pink: #ff208e;
    --strive-pink-light: #ff63b2;
    --strive-pink-dark: #d90b70;
    --strive-blue: #2563ff;
    --strive-blue-light: #5b8cff;
    --strive-blue-dark: #1647d8;
    /* Surfaces */
    --strive-navy: #101a29;
    --strive-navy-light: #142033;
    --strive-card: #182538;
    --strive-card-hover: #1f2f46;
    --strive-surface: #182538;
    --strive-surface-raised: #1d2b40;
    --strive-surface-hover: #223249;
    --strive-sidebar: #142033;
    --strive-header: #152236;
    --strive-input: #142033;
    /* Text */
    --strive-text: #f5f7fb;
    --strive-text-secondary: #c8d1dd;
    --strive-muted-light: #b7c2d0;
    --strive-muted: #98a6b8;
    --strive-muted-dark: #77869a;
    /* Borders */
    --strive-border: rgba(255, 255, 255, .10);
    --strive-border-light: rgba(255, 255, 255, .15);
    --strive-border-strong: rgba(255, 255, 255, .20);
    /* Type scale */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-md: 18px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 30px;
    --text-3xl: 36px;
    /* Radius */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    /* Shadows */
    --shadow-card: 0 10px 30px rgba(0, 0, 0, .14);
    --shadow-modal: 0 28px 80px rgba(0, 0, 0, .40);
}


/* ============================================================
   BASE / ACCESSIBILITY
   ============================================================ */

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-size: 16px;
    line-height: 1.55;
    color: var(--strive-text);
    background: radial-gradient(circle at 82% 0%, rgba(37, 99, 255, .09), transparent 31%), radial-gradient(circle at 12% 12%, rgba(255, 32, 142, .06), transparent 28%), var(--strive-navy);
}

strong {
    font-weight: 600;
}

button,
input,
select,
textarea {
    font-size: 15px;
}

    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 2px solid var(--strive-blue-light);
        outline-offset: 2px;
    }


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.btn-large {
    min-height: 48px;
    font-size: 15px;
}

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


/* ============================================================
   FORMS
   ============================================================ */

.form-group label,
.settings-form-group label,
.nutrition-macro-field label {
    margin-bottom: 7px;
    color: var(--strive-text-secondary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
}

.form-control,
.auth-input,
.settings-input,
.nutrition-date-input {
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--strive-border-light);
    border-radius: 10px;
    color: var(--strive-text) !important;
    background: var(--strive-input) !important;
    font-size: 15px;
}

    .form-control:focus,
    .auth-input:focus,
    .settings-input:focus,
    .nutrition-date-input:focus {
        border-color: rgba(255, 32, 142, .65);
        background: #17253a !important;
        box-shadow: 0 0 0 3px rgba(255, 32, 142, .10);
    }

    .form-control::placeholder,
    .auth-input::placeholder,
    .settings-input::placeholder {
        color: #7d8ca2 !important;
    }


/* ============================================================
   PORTAL
   ============================================================ */

.portal-shell {
    background: var(--strive-navy);
}

.portal-sidebar {
    background: var(--strive-sidebar);
}

.portal-header {
    background: rgba(21, 34, 54, .94);
}

.portal-nav-link {
    min-height: 44px;
    font-size: 14px;
    font-weight: 500;
}

.portal-user-copy strong {
    font-size: 13px;
}

.portal-user-copy span {
    font-size: 12px;
}

.portal-header-kicker {
    font-size: 12px;
}

.portal-header h2 {
    font-size: 20px;
    font-weight: 600;
}

.portal-search {
    min-height: 40px;
    font-size: 13px;
}

.portal-content {
    padding: 30px 32px 56px;
}

.portal-page-heading h1 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.portal-page-heading p {
    font-size: 15px;
    line-height: 1.55;
}

.portal-panel,
.portal-stat-card {
    background: var(--strive-surface);
    border-color: var(--strive-border);
    box-shadow: var(--shadow-card);
}

.portal-stat-label {
    font-size: 12px;
    font-weight: 600;
}

.portal-stat-card > strong {
    font-size: 28px;
    font-weight: 650;
}

.portal-stat-sub {
    font-size: 13px;
}

.portal-panel-heading strong {
    font-size: 16px;
    font-weight: 600;
}

.portal-panel-heading span,
.portal-panel-heading button {
    font-size: 13px;
}

.portal-macro,
.settings-field {
    font-size: 14px;
}


/* ============================================================
   SETTINGS
   ============================================================ */

.settings-alert {
    font-size: 13px;
}

.settings-account-meta span {
    font-size: 12px;
}

.settings-account-meta strong {
    font-size: 14px;
}

.settings-actions .btn {
    min-height: 44px;
    font-size: 14px;
}

.settings-status-badge {
    font-size: 12px;
}

.settings-current-plan-header span {
    font-size: 12px;
}

.settings-current-plan-header strong {
    font-size: 18px;
}

.settings-current-plan-price {
    font-size: 15px;
}

.settings-current-plan p,
.settings-plan-meta span,
.settings-empty-state {
    font-size: 13px;
}

.settings-choice-top strong,
.settings-security-row strong,
.settings-goal-header strong {
    font-size: 14px;
}

.settings-choice > span,
.settings-choice > small,
.settings-security-row span,
.settings-goal-header span,
.settings-goal-note {
    font-size: 13px;
}


/* ============================================================
   NUTRITION DIARY
   ============================================================ */

.nutrition-date-bar {
    background: var(--strive-surface);
    border-radius: 14px;
}

.nutrition-date-current span {
    font-size: 12px;
}

.nutrition-date-current strong {
    font-size: 14px;
    font-weight: 600;
}

.nutrition-date-input,
.nutrition-today-button {
    min-height: 40px;
}

.nutrition-today-button {
    font-size: 13px;
}

.nutrition-meal-panel {
    background: var(--strive-surface);
}

.nutrition-meal-heading {
    padding: 16px 18px;
    background: rgba(255,255,255,.018);
}

.nutrition-meal-type {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.nutrition-meal-heading strong {
    font-size: 18px;
    font-weight: 600;
}

.nutrition-add-meal-button {
    min-height: 40px;
    padding: 8px 11px;
    font-size: 13px;
    font-weight: 600;
}

.nutrition-empty-meal {
    min-height: 72px;
    font-size: 14px;
}

.nutrition-entry {
    min-height: 72px;
}

.nutrition-entry-main {
    padding: 15px 18px;
}

.nutrition-entry-copy strong {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.nutrition-entry-copy span {
    margin-top: 4px;
    font-size: 13px;
}

.nutrition-entry-copy small {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.4;
}

.nutrition-entry-macros {
    min-width: 330px;
    gap: 10px;
}

    .nutrition-entry-macros strong {
        font-size: 14px;
        font-weight: 600;
    }

    .nutrition-entry-macros span {
        margin-top: 3px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: .03em;
    }

.nutrition-entry-delete {
    width: 48px;
    min-width: 48px;
    font-size: 15px;
}

.nutrition-summary-grid span {
    font-size: 12px;
}

.nutrition-summary-grid strong {
    font-size: 15px;
    font-weight: 600;
}


/* ============================================================
   NUTRITION MODAL
   ============================================================ */

.nutrition-modal {
    border-radius: 18px;
    background: #121d2e;
    box-shadow: var(--shadow-modal);
}

.nutrition-modal-heading h2 {
    font-size: 24px;
    font-weight: 650;
}

.nutrition-modal-heading p {
    font-size: 13px;
}

.nutrition-modal-close {
    width: 40px;
    height: 40px;
}

.nutrition-optional,
.nutrition-form-section-heading span,
.nutrition-macro-field > div > span,
.nutrition-estimated small {
    font-size: 12px;
}

.nutrition-form-section-heading strong,
.nutrition-estimated strong {
    font-size: 14px;
}

.nutrition-modal-actions .btn {
    min-height: 44px;
    font-size: 14px;
}


/* ============================================================
   FOOD SEARCH
   ============================================================ */

.nutrition-search-input {
    min-height: 46px;
}

.nutrition-search-input-wrap > i {
    font-size: 14px;
}

.nutrition-search-manual {
    padding: 12px 14px;
}

    .nutrition-search-manual strong {
        font-size: 14px;
    }

    .nutrition-search-manual span {
        font-size: 12px;
    }

    .nutrition-search-manual .btn {
        min-height: 38px;
        font-size: 12px;
    }

.nutrition-search-summary strong {
    font-size: 13px;
}

.nutrition-search-summary span {
    font-size: 12px;
}

.nutrition-search-result {
    min-height: 82px;
    padding: 14px 16px;
}

.nutrition-search-result-main strong {
    font-size: 15px;
    font-weight: 600;
}

.nutrition-search-result-main > span {
    font-size: 13px;
}

.nutrition-search-result-main small {
    font-size: 12px;
}

.nutrition-search-result-macros strong {
    font-size: 14px;
}

.nutrition-search-result-macros span {
    font-size: 12px;
}

.nutrition-search-result-basis {
    font-size: 12px;
}

.nutrition-search-empty strong,
.nutrition-search-start strong {
    font-size: 16px;
}

.nutrition-search-empty > span,
.nutrition-search-start > span {
    font-size: 13px;
}

.nutrition-search-start small {
    font-size: 12px;
}


/* ============================================================
   RECENT FOODS
   ============================================================ */

.nutrition-recent-heading strong {
    font-size: 17px;
    font-weight: 600;
}

.nutrition-recent-heading span {
    font-size: 13px;
}

.nutrition-recent-food {
    border-radius: 12px;
    background: var(--strive-surface-raised);
}

.nutrition-recent-food-open {
    min-height: 68px;
    padding: 13px 15px;
}

.nutrition-recent-food-main strong {
    font-size: 15px;
    font-weight: 600;
}

.nutrition-recent-food-main span {
    font-size: 13px;
}

.nutrition-recent-food-main small {
    font-size: 12px;
}

.nutrition-recent-food-macros strong {
    font-size: 14px;
}

.nutrition-recent-food-macros span {
    font-size: 12px;
}

.nutrition-recent-quick-add {
    width: 48px;
    min-width: 48px;
    font-size: 16px;
}


/* ============================================================
   AUTH / LEGAL / PUBLIC COPY
   ============================================================ */

.auth-card-header p,
.auth-checkbox,
.auth-alert,
.password-requirements,
.form-link {
    font-size: 13px;
}

.auth-footer-text,
.auth-back-link {
    font-size: 12px;
}

.legal-section p,
.legal-section li {
    font-size: 14px;
}

.legal-section h3 {
    font-size: 16px;
}

.legal-intro,
.legal-warning,
.legal-contact {
    font-size: 13px;
}

.feature-card p,
.pricing-heading p,
.contact-info > p,
.footer-description {
    font-size: 14px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {
    body {
        font-size: 16px;
    }

    input,
    select,
    textarea,
    .form-control,
    .auth-input,
    .settings-input,
    .nutrition-date-input {
        font-size: 16px !important;
    }

    .portal-nav-link {
        font-size: 12px;
    }

    .portal-page-heading h1 {
        font-size: 27px;
    }

    .portal-page-heading p {
        font-size: 14px;
    }

    .portal-stat-label {
        font-size: 12px;
    }

    .portal-stat-card > strong {
        font-size: 25px;
    }

    .portal-stat-sub {
        font-size: 12px;
    }

    .nutrition-meal-heading strong {
        font-size: 17px;
    }

    .nutrition-meal-type {
        font-size: 12px;
    }

    .nutrition-entry-main {
        padding: 15px;
    }

    .nutrition-entry-copy strong {
        font-size: 16px;
        white-space: normal;
    }

    .nutrition-entry-copy span {
        font-size: 14px;
    }

    .nutrition-entry-copy small {
        font-size: 13px;
        white-space: normal;
    }

    .nutrition-entry-macros strong {
        font-size: 15px;
    }

    .nutrition-entry-macros span {
        font-size: 12px;
    }

    .nutrition-modal {
        background: #121d2e;
    }

    .nutrition-modal-heading,
    .nutrition-modal-actions {
        background: #121d2e;
    }

    .nutrition-search-result-main strong {
        font-size: 16px;
    }

    .nutrition-search-result-main > span {
        font-size: 14px;
    }

    .nutrition-search-result-main small {
        font-size: 12px;
    }

    .nutrition-recent-food-main strong {
        font-size: 16px;
    }

    .nutrition-recent-food-main span {
        font-size: 14px;
    }

    .nutrition-recent-food-main small {
        font-size: 13px;
    }
}

/* ============================================================
   MOBILE NUTRITION DIARY - SIMPLIFIED FOOD ROWS
   ============================================================ */

@media (max-width: 700px) {

    .nutrition-entry {
        min-height: 0;
    }

    .nutrition-entry-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 15px 14px;
    }

    .nutrition-entry-copy {
        grid-column: 1;
        min-width: 0;
    }

        .nutrition-entry-copy strong {
            font-size: 16px;
            font-weight: 600;
            line-height: 1.35;
        }

        .nutrition-entry-copy span {
            margin-top: 4px;
            color: var(--strive-text-secondary);
            font-size: 14px;
        }

        .nutrition-entry-copy small {
            margin-top: 3px;
            color: var(--strive-muted);
            font-size: 13px;
        }


    /*
       Keep calories only on individual food rows.
       Protein / carbs / fat remain available in the daily totals.
    */

    .nutrition-entry-macros {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        min-width: auto;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

        .nutrition-entry-macros > div {
            display: none;
        }

            .nutrition-entry-macros > div:first-child {
                display: flex;
                align-items: flex-end;
                flex-direction: column;
                white-space: nowrap;
            }

                .nutrition-entry-macros > div:first-child strong {
                    color: var(--strive-text);
                    font-size: 16px;
                    font-weight: 600;
                }

                .nutrition-entry-macros > div:first-child span {
                    margin-top: 2px;
                    color: var(--strive-muted);
                    font-size: 12px;
                    font-weight: 500;
                    text-transform: lowercase;
                    letter-spacing: 0;
                }


    /* Delete remains a large touch target */

    .nutrition-entry-delete {
        width: 48px;
        min-width: 48px;
        font-size: 15px;
    }
}

@media (max-width: 700px) {

    .nutrition-search-result-macros {
        display: flex;
        width: auto;
        gap: 0;
    }

        .nutrition-search-result-macros > div {
            display: none;
        }

            .nutrition-search-result-macros > div:first-child {
                display: flex;
                align-items: flex-start;
                flex-direction: column;
            }

                .nutrition-search-result-macros > div:first-child strong {
                    font-size: 14px;
                }

                .nutrition-search-result-macros > div:first-child span {
                    font-size: 11px;
                }
}

@media (max-width: 700px) {

    .nutrition-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

        .nutrition-summary-grid > div {
            min-height: 76px;
            padding: 14px;
            border-radius: 12px;
            background: var(--strive-surface-raised);
        }

        .nutrition-summary-grid span {
            color: var(--strive-muted);
            font-size: 12px;
            font-weight: 500;
        }

        .nutrition-summary-grid strong {
            margin-top: 5px;
            color: var(--strive-text);
            font-size: 17px;
            font-weight: 600;
        }
}

/* ============================================================
   NUTRITION MOBILE STAT SUMMARY
   ============================================================ */

.nutrition-mobile-stats {
    display: none;
}

@media (max-width: 700px) {

    .nutrition-desktop-stats {
        display: none !important;
    }

    .nutrition-mobile-stats {
        display: grid;
        gap: 14px;
        margin: 0 0 18px;
    }

    .nutrition-mobile-calories-card,
    .nutrition-mobile-macro-card {
        width: 100%;
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 20px;
        background: #182536;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
    }

    .nutrition-mobile-calories-card {
        padding: 22px 20px;
    }

    .nutrition-mobile-stat-title {
        display: block;
        margin-bottom: 18px;
        color: var(--strive-text);
        font-size: 18px;
        font-weight: 500;
        line-height: 1.25;
    }

    .nutrition-mobile-calories-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
    }

    .nutrition-mobile-calories-consumed,
    .nutrition-mobile-calories-left,
    .nutrition-mobile-macro-value {
        display: flex;
        align-items: baseline;
        gap: 4px;
        min-width: 0;
    }

        .nutrition-mobile-calories-consumed strong,
        .nutrition-mobile-calories-left strong {
            color: var(--strive-text);
            font-size: 27px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: -.025em;
        }

        .nutrition-mobile-calories-consumed > span,
        .nutrition-mobile-calories-left > span {
            color: var(--strive-text);
            font-size: 17px;
            font-weight: 500;
            line-height: 1;
        }

        .nutrition-mobile-calories-consumed small {
            color: var(--strive-muted);
            font-size: 16px;
            font-weight: 400;
            line-height: 1;
            white-space: nowrap;
        }

    .nutrition-mobile-calories-left {
        flex-shrink: 0;
        justify-content: flex-end;
    }

        .nutrition-mobile-calories-left > span {
            color: var(--strive-muted);
            font-weight: 400;
        }

    .nutrition-mobile-progress {
        position: relative;
        width: 100%;
        height: 8px;
        overflow: hidden;
        margin-top: 20px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .10);
    }

        .nutrition-mobile-progress > span {
            display: block;
            height: 100%;
            min-width: 2px;
            border-radius: inherit;
            background: var(--strive-gradient-horizontal);
            transition: width .25s ease;
        }

    .nutrition-mobile-macro-card {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
        padding: 22px 20px;
    }

    .nutrition-mobile-macro {
        min-width: 0;
    }

    .nutrition-mobile-macro-title {
        display: block;
        margin-bottom: 9px;
        color: var(--strive-text);
        font-size: 17px;
        font-weight: 500;
        line-height: 1.2;
    }

    .nutrition-mobile-macro-value {
        flex-wrap: nowrap;
    }

        .nutrition-mobile-macro-value strong {
            color: var(--strive-text);
            font-size: 22px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: -.02em;
            white-space: nowrap;
        }

        .nutrition-mobile-macro-value > span {
            color: var(--strive-text);
            font-size: 16px;
            font-weight: 500;
            line-height: 1;
            white-space: nowrap;
        }

        .nutrition-mobile-macro-value small {
            color: var(--strive-muted);
            font-size: 14px;
            font-weight: 400;
            line-height: 1;
            white-space: nowrap;
        }

    .nutrition-mobile-macro .nutrition-mobile-progress {
        height: 7px;
        margin-top: 15px;
    }

    .nutrition-mobile-micro {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

        .nutrition-mobile-micro strong {
            color: var(--strive-text);
            font-size: 15px;
            font-weight: 700;
            line-height: 1;
        }

        .nutrition-mobile-micro span {
            color: var(--strive-muted);
            font-size: 11px;
            font-weight: 500;
        }
}

@media (max-width: 430px) {

    .nutrition-mobile-calories-card,
    .nutrition-mobile-macro-card {
        border-radius: 18px;
    }

    .nutrition-mobile-calories-card {
        padding: 20px 17px;
    }

    .nutrition-mobile-macro-card {
        gap: 12px;
        padding: 20px 17px;
    }

    .nutrition-mobile-calories-consumed strong,
    .nutrition-mobile-calories-left strong {
        font-size: 24px;
    }

    .nutrition-mobile-calories-consumed > span,
    .nutrition-mobile-calories-left > span {
        font-size: 15px;
    }

    .nutrition-mobile-calories-consumed small {
        font-size: 14px;
    }

    .nutrition-mobile-macro-title {
        font-size: 15px;
    }

    .nutrition-mobile-macro-value strong {
        font-size: 19px;
    }

    .nutrition-mobile-macro-value > span {
        font-size: 14px;
    }

    .nutrition-mobile-macro-value small {
        font-size: 12px;
    }

    .nutrition-mobile-micro {
        margin-top: 10px;
        padding-top: 10px;
    }

        .nutrition-mobile-micro strong {
            font-size: 14px;
        }

        .nutrition-mobile-micro span {
            font-size: 10px;
        }
}

@media (max-width: 360px) {

    .nutrition-mobile-calories-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .nutrition-mobile-calories-left {
        justify-content: flex-start;
    }

    .nutrition-mobile-macro-card {
        gap: 9px;
        padding-right: 14px;
        padding-left: 14px;
    }

    .nutrition-mobile-macro-title {
        font-size: 14px;
    }

    .nutrition-mobile-macro-value {
        gap: 2px;
    }

        .nutrition-mobile-macro-value strong {
            font-size: 17px;
        }

        .nutrition-mobile-macro-value > span {
            font-size: 13px;
        }

        .nutrition-mobile-macro-value small {
            font-size: 11px;
        }
}

/* ============================================================
   PORTAL SIDEBAR BRAND FIX
   ============================================================ */

.portal-sidebar {
    overflow-x: hidden;
}

.portal-brand {
    width: 100%;
    min-width: 0;
    padding: 0 2px 24px;
}

    .portal-brand .brand {
        width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .portal-brand .brand-mark {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    .portal-brand .brand-copy {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .portal-brand .brand-name {
        display: block;
        max-width: 100%;
        overflow: hidden;
        color: var(--strive-white);
        font-size: 17px;
        font-weight: 800;
        font-style: italic;
        line-height: 1;
        letter-spacing: .025em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .portal-brand .brand-tagline {
        display: none;
    }

@media (max-width: 900px) {
    .settings-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .settings-choice-grid {
        grid-template-columns: 1fr;
    }
}

.portal-mobile-logout-form {
    display: none;
}

@media (max-width: 768px) {
    .portal-mobile-logout-form {
        display: block;
    }

    .portal-mobile-logout-button {
        display: flex;
        align-items: center;
        gap: 8px;
        border: none;
        background: transparent;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
        padding: 8px 12px;
    }
}

.portal-header-user-menu {
    position: relative;
}

.portal-header-avatar-button {
    border: 0;
    outline: 0;
    cursor: pointer;
    font: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .portal-header-avatar-button:hover {
        transform: scale(1.04);
        box-shadow: 0 0 0 3px rgba(255, 32, 142, .12);
    }

.portal-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    overflow: hidden;
    z-index: 2000;
    border: 1px solid var(--strive-border-light);
    border-radius: 12px;
    background: var(--strive-surface-raised);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .32);
}

.portal-user-dropdown-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--strive-border);
}

    .portal-user-dropdown-header strong {
        overflow: hidden;
        color: var(--strive-text);
        font-size: 14px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .portal-user-dropdown-header span {
        color: var(--strive-muted);
        font-size: 12px;
        font-weight: 500;
    }

.portal-user-dropdown form {
    margin: 0;
    padding: 0;
}

.portal-user-dropdown-item {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border: 0;
    color: var(--strive-text-secondary);
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

    .portal-user-dropdown-item i {
        width: 18px;
        color: var(--strive-pink);
        text-align: center;
    }

    .portal-user-dropdown-item:hover {
        color: white;
        background: rgba(255, 32, 142, .08);
    }

/* ============================================================
   NUTRITION MEAL SUMMARY / EXPANDABLE MEALS
   ============================================================ */

.nutrition-meal-heading {
    align-items: stretch;
    gap: 12px;
}

.nutrition-meal-summary {
    min-width: 0;
    display: block;
    flex: 1;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

    .nutrition-meal-summary:disabled {
        opacity: 1;
        cursor: default;
    }

.nutrition-meal-heading-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.nutrition-meal-heading-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nutrition-meal-item-count {
    color: var(--strive-muted);
    font-size: 12px;
    font-weight: 500;
}

.nutrition-meal-chevron {
    flex-shrink: 0;
    color: var(--strive-muted);
    font-size: 12px;
    transition: transform .2s ease, color .2s ease;
}

.nutrition-meal-summary:hover .nutrition-meal-chevron {
    color: var(--strive-pink);
}

.nutrition-meal-panel.expanded .nutrition-meal-chevron {
    transform: rotate(180deg);
}

.nutrition-meal-summary-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

    .nutrition-meal-summary-grid > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .nutrition-meal-summary-grid strong {
        margin: 0;
        color: var(--strive-text);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
    }

    .nutrition-meal-summary-grid span {
        margin-top: 3px;
        color: var(--strive-muted);
        font-size: 11px;
        font-weight: 500;
    }

.nutrition-entry-list {
    border-top: 1px solid var(--strive-border);
}

@media (max-width: 700px) {
    .nutrition-meal-heading {
        gap: 10px;
        padding: 14px;
    }

    .nutrition-meal-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px 6px;
        margin-top: 14px;
    }

        .nutrition-meal-summary-grid strong {
            font-size: 14px;
        }

        .nutrition-meal-summary-grid span {
            font-size: 11px;
        }

    .nutrition-add-meal-button {
        width: 40px;
        min-width: 40px;
        height: 40px;
        justify-content: center;
        padding: 0;
    }

        .nutrition-add-meal-button span {
            display: none;
        }
}

/* ============================================================
   NUTRITION MOBILE DATE CENTERING
   ============================================================ */

@media (max-width: 700px) {
    .nutrition-date-current {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

        .nutrition-date-current span,
        .nutrition-date-current strong {
            width: 100%;
            text-align: center;
        }

    .nutrition-date-input {
        text-align: center;
        text-align-last: center;
    }
}

/* ============================================================
   FINAL NUTRITION MEAL OVERRIDES
   Keep this section at the absolute bottom of app.css
   ============================================================ */

.nutrition-add-meal-button {
    min-width: 112px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 7px;
    padding: 9px 17px;
    border: 0 !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    background: var(--strive-gradient-horizontal) !important;
    box-shadow: 0 8px 20px rgba(255, 32, 142, .18), 0 8px 20px rgba(37, 99, 255, .12);
    font-size: 13px;
    font-weight: 600;
}

    .nutrition-add-meal-button i {
        margin: 0 !important;
    }

@media (max-width: 700px) {
    .nutrition-meal-heading {
        position: relative !important;
        display: block !important;
        padding: 14px !important;
    }

    .nutrition-meal-summary {
        width: 100% !important;
    }

    .nutrition-meal-heading-top {
        min-height: 40px;
        padding-right: 84px;
    }

    .nutrition-meal-chevron {
        position: absolute !important;
        top: 27px !important;
        right: 60px !important;
        transform: translateY(-50%);
    }

    .nutrition-meal-panel.expanded .nutrition-meal-chevron {
        transform: translateY(-50%) rotate(180deg);
    }

    .nutrition-meal-summary-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        column-gap: 0 !important;
        row-gap: 11px !important;
        margin-top: 8px !important;
    }

        .nutrition-meal-summary-grid > div {
            min-width: 0;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-direction: column !important;
            text-align: center !important;
        }

            .nutrition-meal-summary-grid > div:nth-child(1),
            .nutrition-meal-summary-grid > div:nth-child(2),
            .nutrition-meal-summary-grid > div:nth-child(3) {
                grid-column: span 4 !important;
            }

            .nutrition-meal-summary-grid > div:nth-child(4),
            .nutrition-meal-summary-grid > div:nth-child(5),
            .nutrition-meal-summary-grid > div:nth-child(6),
            .nutrition-meal-summary-grid > div:nth-child(7) {
                grid-column: span 3 !important;
            }

            .nutrition-meal-summary-grid > div:nth-child(1) strong,
            .nutrition-meal-summary-grid > div:nth-child(2) strong,
            .nutrition-meal-summary-grid > div:nth-child(3) strong {
                color: var(--strive-text) !important;
                font-size: 16px !important;
                font-weight: 650 !important;
                text-align: center !important;
            }

            .nutrition-meal-summary-grid > div:nth-child(1) span,
            .nutrition-meal-summary-grid > div:nth-child(2) span,
            .nutrition-meal-summary-grid > div:nth-child(3) span {
                margin-top: 3px !important;
                color: var(--strive-muted-light) !important;
                font-size: 11px !important;
                text-align: center !important;
            }

            .nutrition-meal-summary-grid > div:nth-child(4) strong,
            .nutrition-meal-summary-grid > div:nth-child(5) strong,
            .nutrition-meal-summary-grid > div:nth-child(6) strong,
            .nutrition-meal-summary-grid > div:nth-child(7) strong {
                color: var(--strive-text-secondary) !important;
                font-size: 13px !important;
                font-weight: 600 !important;
                text-align: center !important;
            }

            .nutrition-meal-summary-grid > div:nth-child(4) span,
            .nutrition-meal-summary-grid > div:nth-child(5) span,
            .nutrition-meal-summary-grid > div:nth-child(6) span,
            .nutrition-meal-summary-grid > div:nth-child(7) span {
                margin-top: 3px !important;
                color: var(--strive-muted) !important;
                font-size: 10px !important;
                text-align: center !important;
            }

    .nutrition-add-meal-button {
        position: absolute !important;
        top: 13px !important;
        right: 13px !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        color: #ffffff !important;
        background: var(--strive-gradient) !important;
        box-shadow: 0 7px 18px rgba(255, 32, 142, .22), 0 7px 18px rgba(37, 99, 255, .16) !important;
    }

        .nutrition-add-meal-button span {
            display: none !important;
        }

        .nutrition-add-meal-button i {
            margin: 0 !important;
            font-size: 14px !important;
        }
}

@media (max-width: 430px) {
    .nutrition-meal-heading {
        padding: 13px 12px 14px !important;
    }

    .nutrition-meal-heading-top {
        padding-right: 80px;
    }

    .nutrition-meal-chevron {
        top: 26px !important;
        right: 57px !important;
    }

    .nutrition-add-meal-button {
        top: 12px !important;
        right: 12px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    .nutrition-meal-summary-grid > div:nth-child(1) strong,
    .nutrition-meal-summary-grid > div:nth-child(2) strong,
    .nutrition-meal-summary-grid > div:nth-child(3) strong {
        font-size: 15px !important;
    }

    .nutrition-meal-summary-grid > div:nth-child(4) strong,
    .nutrition-meal-summary-grid > div:nth-child(5) strong,
    .nutrition-meal-summary-grid > div:nth-child(6) strong,
    .nutrition-meal-summary-grid > div:nth-child(7) strong {
        font-size: 12px !important;
    }
}

/* ============================================================
   NUTRITION LOG
   Compact meal journal
   ============================================================ */

.nutrition-log {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.nutrition-log-meal {
    overflow: hidden;
    border: 1px solid var(--strive-border);
    border-radius: 14px;
    background: var(--strive-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}

.nutrition-log-header {
    min-height: 58px;
    display: flex;
    align-items: stretch;
}

.nutrition-log-toggle {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 20px;
    align-items: center;
    flex: 1;
    gap: 14px;
    padding: 13px 14px 8px 16px;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

    .nutrition-log-toggle:disabled {
        cursor: default;
    }

.nutrition-log-title {
    min-width: 0;
}

    .nutrition-log-title > div {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 9px;
    }

.nutrition-log-meal-name {
    color: var(--strive-pink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
}

.nutrition-log-count {
    color: #91a6bf;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.nutrition-log-chevron {
    color: #7f9bbb;
    font-size: 11px;
    transition: color .18s ease, transform .18s ease;
}

.nutrition-log-toggle:hover .nutrition-log-chevron {
    color: var(--strive-pink);
}

.nutrition-log-meal.expanded .nutrition-log-chevron {
    transform: rotate(180deg);
}


/* ============================================================
   ADD FOOD
   ============================================================ */

.nutrition-log-add {
    min-width: 105px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 6px;
    margin-right: 14px;
    padding: 8px 15px;
    border: 0;
    border-radius: 999px;
    color: white;
    background: var(--strive-gradient-horizontal);
    box-shadow: 0 6px 16px rgba(255, 32, 142, .16), 0 6px 16px rgba(37, 99, 255, .11);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

    .nutrition-log-add:hover {
        transform: translateY(-1px);
        filter: brightness(1.06);
        box-shadow: 0 8px 20px rgba(255, 32, 142, .22), 0 8px 20px rgba(37, 99, 255, .15);
    }

    .nutrition-log-add i {
        margin: 0;
        font-size: 11px;
    }


/* ============================================================
   MACRO SUMMARY
   ============================================================ */

.nutrition-log-macros {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: center;
    gap: 14px;
    padding: 2px 16px 14px;
}

.nutrition-log-macros-row {
    display: contents;
}

    .nutrition-log-macros-row > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .nutrition-log-macros-row strong {
        color: var(--strive-text);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.1;
    }

    .nutrition-log-macros-row span {
        margin-top: 3px;
        color: #88a8cc;
        font-size: 10px;
        font-weight: 500;
    }


/* ============================================================
   EMPTY MEAL
   ============================================================ */

.nutrition-log-empty {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    border: 0;
    border-top: 1px solid var(--strive-border);
    color: var(--strive-muted);
    background: rgba(255, 255, 255, .012);
    font-size: 12px;
    cursor: pointer;
}

    .nutrition-log-empty i {
        color: var(--strive-pink);
        font-size: 11px;
    }

    .nutrition-log-empty:hover {
        color: var(--strive-text-secondary);
        background: rgba(255, 255, 255, .025);
    }


/* ============================================================
   EXPANDED FOODS
   ============================================================ */

.nutrition-log-foods {
    border-top: 1px solid var(--strive-border);
    background: rgba(8, 16, 28, .10);
}

.nutrition-log-food {
    min-height: 58px;
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--strive-border);
}

    .nutrition-log-food:last-child {
        border-bottom: 0;
    }

.nutrition-log-food-main {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    align-items: center;
    flex: 1;
    gap: 16px;
    padding: 11px 14px 11px 16px;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

    .nutrition-log-food-main:hover {
        background: rgba(255, 255, 255, .018);
    }

.nutrition-log-food-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .nutrition-log-food-copy strong {
        overflow: hidden;
        color: var(--strive-text);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nutrition-log-food-copy span {
        margin-top: 2px;
        color: var(--strive-text-secondary);
        font-size: 12px;
        line-height: 1.3;
    }

    .nutrition-log-food-copy small {
        overflow: hidden;
        margin-top: 2px;
        color: var(--strive-muted);
        font-size: 11px;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.nutrition-log-food-calories {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}

    .nutrition-log-food-calories strong {
        color: var(--strive-text);
        font-size: 14px;
        font-weight: 600;
    }

    .nutrition-log-food-calories span {
        margin-top: 1px;
        color: var(--strive-muted);
        font-size: 10px;
    }

.nutrition-log-food-delete {
    width: 42px;
    min-width: 42px;
    border: 0;
    border-left: 1px solid var(--strive-border);
    color: #7189a5;
    background: transparent;
    font-size: 12px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

    .nutrition-log-food-delete:hover {
        color: var(--strive-pink);
        background: rgba(255, 32, 142, .05);
    }


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 950px) {
    .nutrition-log-macros {
        gap: 10px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {
    .nutrition-log {
        gap: 9px;
    }

    .nutrition-log-meal {
        border-radius: 14px;
    }

    .nutrition-log-header {
        position: relative;
        min-height: 55px;
    }

    .nutrition-log-toggle {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) 18px;
        gap: 9px;
        padding: 12px 58px 8px 13px;
    }

    .nutrition-log-title > div {
        align-items: center;
        gap: 7px;
    }

    .nutrition-log-meal-name {
        font-size: 12px;
    }

    .nutrition-log-count {
        font-size: 11px;
    }

    .nutrition-log-chevron {
        font-size: 10px;
    }

    .nutrition-log-add {
        position: absolute;
        top: 9px;
        right: 10px;
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        background: var(--strive-gradient);
        box-shadow: 0 5px 14px rgba(255, 32, 142, .20), 0 5px 14px rgba(37, 99, 255, .15);
    }

        .nutrition-log-add span {
            display: none;
        }

        .nutrition-log-add i {
            font-size: 13px;
        }

    .nutrition-log-macros {
        display: block;
        padding: 3px 13px 12px;
    }

    .nutrition-log-macros-row {
        display: grid;
    }

    .nutrition-log-macros-row-primary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 6px;
    }

    .nutrition-log-macros-row-minor {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 6px;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, .055);
    }

    .nutrition-log-macros-row > div {
        align-items: center;
        text-align: center;
    }

    .nutrition-log-macros-row strong {
        font-size: 13px;
    }

    .nutrition-log-macros-row span {
        font-size: 10px;
    }

    .nutrition-log-macros-row-minor strong {
        color: var(--strive-text-secondary);
        font-size: 11px;
    }

    .nutrition-log-macros-row-minor span {
        color: var(--strive-muted);
        font-size: 9px;
    }

    .nutrition-log-food {
        min-height: 61px;
    }

    .nutrition-log-food-main {
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 8px;
        padding: 11px 10px 11px 13px;
    }

    .nutrition-log-food-copy strong {
        overflow: visible;
        font-size: 14px;
        line-height: 1.32;
        text-overflow: unset;
        white-space: normal;
    }

    .nutrition-log-food-copy span {
        font-size: 12px;
    }

    .nutrition-log-food-copy small {
        overflow: visible;
        font-size: 10px;
        text-overflow: unset;
        white-space: normal;
    }

    .nutrition-log-food-calories strong {
        font-size: 14px;
    }

    .nutrition-log-food-calories span {
        font-size: 9px;
    }

    .nutrition-log-food-delete {
        width: 38px;
        min-width: 38px;
        font-size: 11px;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 400px) {
    .nutrition-log-toggle {
        padding-left: 11px;
    }

    .nutrition-log-meal-name {
        font-size: 11px;
    }

    .nutrition-log-count {
        font-size: 10px;
    }

    .nutrition-log-macros-row strong {
        font-size: 12px;
    }

    .nutrition-log-macros-row span {
        font-size: 9px;
    }

    .nutrition-log-macros-row-minor strong {
        font-size: 10px;
    }
}

/* ============================================================
   NUTRITION PAGE REFRESH
   Decluttered layout + pill/circle buttons only (scoped to the
   nutrition page + its modals so the rest of the site is
   untouched)
   ============================================================ */

/* Tighten overall page rhythm */
.nutrition-page .portal-page-heading {
    margin-bottom: 18px;
}

.nutrition-page .nutrition-date-bar {
    margin-bottom: 14px;
}

.nutrition-page .portal-stat-grid.nutrition-desktop-stats {
    margin-bottom: 0;
}

/* Micronutrient strip: replaces the old duplicate "Daily Nutrition"
   panel. Shows only what isn't already in the stat cards above. */
.nutrition-micro-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 12px 0 18px;
}

    .nutrition-micro-strip > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        border: 1px solid var(--strive-border);
        border-radius: 999px;
        background: rgba(255, 255, 255, .02);
    }

    .nutrition-micro-strip span {
        color: var(--strive-muted);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .04em;
    }

    .nutrition-micro-strip strong {
        color: var(--strive-text);
        font-size: 13px;
        font-weight: 700;
    }

@media (max-width: 700px) {
    .nutrition-micro-strip {
        display: none;
    }
}


/* ----------------------------------------------------------
   PILL / CIRCLE BUTTONS
   Rectangular CTAs -> pill. Icon-only controls -> circle.
   Full-width list/card rows that happen to be <button>
   elements (meal toggle, food row, search result, recent
   food row, empty-meal prompt) are left as cards, not pills -
   turning an entire row into a pill would look broken.
   ---------------------------------------------------------- */

.nutrition-page .btn,
.nutrition-modal-backdrop .btn,
.nutrition-confirm-backdrop .btn {
    border-radius: 999px;
}

.nutrition-date-nav,
.nutrition-modal-close {
    border-radius: 50% !important;
}

/* Meal-entry delete: circular icon button instead of a flush
   full-height strip glued to the row's edge */
.nutrition-log-food-delete {
    align-self: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    margin: 0 12px;
    border: 1px solid var(--strive-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, .03);
}

    .nutrition-log-food-delete:hover {
        border-color: rgba(255, 32, 142, .35);
        background: rgba(255, 32, 142, .08);
    }

@media (max-width: 700px) {
    .nutrition-log-food-delete {
        width: 32px;
        min-width: 32px;
        height: 32px;
        margin: 0 8px;
    }
}

/* Recent-food quick add: circular icon button instead of a
   flush full-height strip */
.nutrition-recent-food {
    padding-right: 10px;
}

.nutrition-recent-quick-add {
    align-self: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    margin: 0;
    border: 1px solid rgba(255, 32, 142, .18);
    border-radius: 50%;
}

    .nutrition-recent-quick-add i {
        font-size: 13px;
    }


/* ============================================================
   NUTRITION MOBILE DATE BAR — 2-ROW LAYOUT
   Earlier rules stack the bar into 3 rows (nav / date picker /
   Today button), which reads as oversized and disjointed on a
   phone. This collapses the picker and Today button onto one
   row instead of two, and reins in the native date input's
   size so it matches the rest of the bar.
   ============================================================ */

@media (max-width: 700px) {
    .nutrition-date-bar {
        grid-template-columns: 44px minmax(0, 1fr) auto 44px;
        grid-template-areas:
            "previous current current next"
            "picker picker today today";
        gap: 8px;
    }

    .nutrition-date-input {
        min-height: 40px;
        padding: 9px 10px;
    }

    .nutrition-today-button {
        width: auto;
        min-width: 84px;
        padding: 9px 14px;
        white-space: nowrap;
    }
}


/* ============================================================
   REPORT IMAGE EXPORT — DASHBOARD WEEKLY REPORT
   The report markup is invisible in normal use. To generate the
   share/download PNG, JS temporarily adds .strive-exporting so
   the element renders off-screen at a fixed width for a clean,
   consistent capture, then removes it once the image is ready.
   The @media print rules are also kept as a manual Ctrl+P/"Print"
   fallback, but PNG-via-share is now the primary export path.
   ============================================================ */

.dashboard-print-report {
    display: none;
}

    .dashboard-print-report.strive-exporting {
        display: block;
        position: fixed;
        top: 0;
        left: -9999px;
        width: 650px;
        padding: 24px;
        color: #111;
        background: #fff;
        z-index: -1;
    }

@media print {

    body * {
        visibility: hidden;
    }

    .dashboard-print-report,
    .dashboard-print-report * {
        visibility: visible;
    }

    .dashboard-print-report {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 24px;
        color: #111;
        background: #fff;
    }
}

@media print {

    .dashboard-print-report *,
    .nutrition-print-report * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

.print-report-banner {
    margin-bottom: 18px;
    padding: 22px 26px;
    border-radius: 12px;
    background: linear-gradient(120deg, #ff208e 0%, #7b2ff7 55%, #2b6bff 100%);
}

.print-report-wordmark {
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .16em;
}

.print-report-banner h1 {
    margin: 6px 0 16px;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
}

.print-report-meta {
    display: flex;
    gap: 30px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .32);
}

    .print-report-meta > div {
        display: flex;
        flex-direction: column;
    }

    .print-report-meta span {
        color: rgba(255, 255, 255, .78);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .print-report-meta strong {
        margin-top: 3px;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
    }

.print-report-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.print-report-stat {
    flex: 1;
    padding: 14px 16px;
    border: 1px solid #e4e4e8;
    border-top: 3px solid #ff208e;
    border-radius: 8px;
    background: #fafafa;
}

    .print-report-stat:nth-child(2) {
        border-top-color: #7b2ff7;
    }

    .print-report-stat:nth-child(3) {
        border-top-color: #2b6bff;
    }

    .print-report-stat:nth-child(4) {
        border-top-color: #0fb37d;
    }

    .print-report-stat span {
        display: block;
        color: #666;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .print-report-stat strong {
        display: block;
        margin-top: 6px;
        color: #111;
        font-size: 22px;
        font-weight: 800;
        line-height: 1;
    }

    .print-report-stat small {
        display: block;
        margin-top: 3px;
        color: #888;
        font-size: 10px;
        font-weight: 600;
    }

.print-report-highlights {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

    .print-report-highlights > div {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 10px 14px;
        border: 1px solid #eee;
        border-radius: 8px;
        background: #f7f5ff;
    }

    .print-report-highlights i {
        color: #7b2ff7;
        font-size: 13px;
    }

    .print-report-highlights span {
        color: #666;
        font-size: 10px;
        font-weight: 600;
    }

    .print-report-highlights strong {
        margin-left: auto;
        color: #111;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

.print-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .print-report-table th,
    .print-report-table td {
        padding: 9px 10px;
        border-bottom: 1px solid #eee;
        text-align: left;
    }

    .print-report-table th {
        background: #17253a;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .print-report-table tbody tr:nth-child(even) {
        background: #f7f7f9;
    }

    .print-report-table td {
        color: #222;
    }

.print-report-total-row td {
    background: #fdeef6;
    color: #111;
    font-weight: 700;
    border-top: 2px solid #ff208e;
}

.print-report-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    color: #888;
    font-size: 10px;
}


/* ============================================================
   PAGE HEADING — MULTIPLE ACTION BUTTONS
   Used where a page heading needs more than one button (e.g.
   Nutrition's Share Daily Log + Add Food) while keeping the
   title-left / buttons-right layout. Both Dashboard and Nutrition
   use the exact same markup/classes here so the buttons are
   guaranteed to look identical between pages.
   ============================================================ */

.portal-page-heading-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.portal-icon-button-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .portal-icon-button-row .btn {
        border-radius: 999px;
    }

.portal-export-recipient {
    min-width: 190px;
    min-height: 44px;
}

@media (max-width: 900px) {
    .portal-page-heading-buttons {
        align-self: flex-start;
    }
}

@media (max-width: 700px) {
    .portal-page-heading-buttons {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 10px;
    }

    .portal-icon-button-row {
        width: 100%;
    }

    .portal-export-recipient {
        width: 100%;
        min-width: 0;
    }

    /* Circular icon-only buttons on mobile instead of stretched
       full-width text pills. title/aria-label keep the action name
       available to screen readers and long-press tooltips. */
    .portal-icon-button-row .portal-icon-btn {
        width: 46px;
        min-width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
        flex: 0 0 auto;
    }

    .portal-icon-btn span {
        display: none;
    }
}


/* ============================================================
   REPORT IMAGE EXPORT — NUTRITION DAILY LOG
   Same pattern as the dashboard weekly report — see that section's
   comment for details.
   ============================================================ */

.nutrition-print-report {
    display: none;
}

    .nutrition-print-report.strive-exporting {
        display: block;
        position: fixed;
        top: 0;
        left: -9999px;
        width: 650px;
        padding: 24px;
        color: #111;
        background: #fff;
        z-index: -1;
    }

@media print {

    body * {
        visibility: hidden;
    }

    .nutrition-print-report,
    .nutrition-print-report * {
        visibility: visible;
    }

    .nutrition-print-report {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 24px;
        color: #111;
        background: #fff;
    }
}


/* ============================================================
   SHARE A SINGLE FOOD ENTRY / A WHOLE MEAL
   Circle icon buttons matching the existing nutrition-log-*
   icon-button language, plus the off-screen container used to
   capture a dynamically-built share card (see
   ExportHtmlSnippetAsImageAsync).
   ============================================================ */

.nutrition-log-meal-share {
    align-self: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    margin-right: 10px;
    border: 1px solid var(--strive-border);
    border-radius: 50%;
    color: #7189a5;
    background: rgba(255, 255, 255, .03);
    font-size: 12px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

    .nutrition-log-meal-share:hover:not(:disabled) {
        color: var(--strive-pink);
        border-color: rgba(255, 32, 142, .35);
        background: rgba(255, 32, 142, .08);
    }

    .nutrition-log-meal-share:disabled {
        opacity: .4;
        cursor: default;
    }

.nutrition-log-food-share {
    align-self: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    margin: 0 0 0 12px;
    border: 1px solid var(--strive-border);
    border-radius: 50%;
    color: #7189a5;
    background: rgba(255, 255, 255, .03);
    font-size: 12px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

    .nutrition-log-food-share:hover:not(:disabled) {
        color: var(--strive-pink);
        border-color: rgba(255, 32, 142, .35);
        background: rgba(255, 32, 142, .08);
    }

    .nutrition-log-food-share:disabled {
        opacity: .4;
        cursor: default;
    }

@media (max-width: 700px) {
    .nutrition-log-meal-share,
    .nutrition-log-food-share {
        width: 32px;
        min-width: 32px;
        height: 32px;
    }

    .nutrition-log-meal-share {
        margin-right: 8px;
    }

    .nutrition-log-food-share {
        margin: 0 0 0 8px;
    }
}

.print-report-subtitle {
    margin: -10px 0 16px;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
}

.strive-share-snippet {
    position: fixed;
    top: 0;
    left: -9999px;
    padding: 20px;
    color: #111;
    background: #fff;
    z-index: -1;
}


/* ============================================================
   SHARED-FOOD PRE-FILL BANNER
   Shown inside the Add/Edit Food modal when it was opened
   automatically from a shared food link.
   ============================================================ */

.nutrition-shared-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: -6px;
    margin-bottom: 20px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 32, 142, .20);
    border-radius: 9px;
    color: #ff94c8;
    background: rgba(255, 32, 142, .06);
    font-size: 12px;
    line-height: 1.5;
}

    .nutrition-shared-banner i {
        margin-top: 1px;
        font-size: 11px;
    }