:root {

    --bg:#080808;
    --surface:#151515;
    --card:#202020;

    --red:#e10600;
    --red-dark:#8b0000;

    --text:#ffffff;
    --muted:#a0a0a0;

}

.edit-workout-exercises {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(110px, 0.4fr)) auto;
    gap: 14px;
    align-items: end;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
}

.edit-workout-exercises > div {
    grid-column: 1 / -1;
}

.edit-workout-exercises h4,
.edit-workout-exercises p {
    margin: 4px 0 0;
}

.edit-session-exercise-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.routine-set-editor {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0;
    padding: 12px;
    border-radius: 12px;
    background: rgba(225, 6, 0, 0.08);
    border: 1px solid rgba(225, 6, 0, 0.25);
}

.routine-set-editor strong {
    margin-right: auto;
}

@media (max-width: 720px) {
    .edit-workout-exercises {
        grid-template-columns: 1fr;
    }

    .edit-workout-exercises > div {
        grid-column: auto;
    }
}


/* Global Reset */

* {

    box-sizing:border-box;
    margin:0;
    padding:0;

}


/* Main App */

body {

    background:var(--bg);

    color:var(--text);

    font-family:
    Arial, Helvetica, sans-serif;

    min-height:100vh;

}


/* Header */

.hero {

    background:
    linear-gradient(
        135deg,
        #8b0000,
        #e10600
    );

    padding:40px 20px;

    text-align:center;

}


.hero h1 {

    font-size:42px;

    letter-spacing:4px;

    font-weight:800;

}


.hero p {

    margin-top:10px;

    color:#eeeeee;

}


/* Dashboard */

.dashboard {

    padding:20px;

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:15px;

}


/* Metric Cards */

.metric-card {

    background:var(--card);

    padding:20px;

    border-radius:18px;

    display:flex;

    gap:15px;

    align-items:center;

    border-left:
    5px solid var(--red);

    box-shadow:
    0 8px 20px rgba(0,0,0,.35);

}


.metric-icon {

    font-size:30px;

}


.metric-card h3 {

    margin:0;

    color:var(--muted);

    font-size:14px;

}


.metric-card p {

    margin-top:8px;

    font-size:22px;

    font-weight:bold;

}


/* Content Sections */

.section-card {

    margin:20px;

    padding:20px;

    background:var(--surface);

    border-radius:18px;

    box-shadow:
    0 8px 20px rgba(0,0,0,.35);

}


.section-card h2 {

    margin-bottom:15px;

}


/* Buttons */

.primary-btn {

    background:var(--red);

    color:white;

    border:none;

    padding:14px 25px;

    border-radius:12px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

}


.primary-btn:hover {

    background:#ff1a1a;

}


.primary-btn:active {

    transform:scale(.97);

}


/* Bottom Navigation */

.bottom-nav {

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    background:#111;

    border-top:
    2px solid var(--red);

    display:flex;

    justify-content:space-around;

    padding:12px;

}


.bottom-nav button {

    background:none;

    border:none;

    color:white;

    font-size:20px;

    cursor:pointer;

}


.bottom-nav button:hover {

    color:var(--red);

}


.bottom-nav span {

    display:block;

    font-size:12px;

    margin-top:4px;

}


/* Mobile Optimization */

@media(max-width:600px) {


    .dashboard {

        grid-template-columns:1fr;

    }


    .hero h1 {

        font-size:36px;

    }


}

.goal-box{

background:#202020;

padding:15px;

margin-top:15px;

border-radius:14px;

border-left:4px solid var(--red);

}


.goal-box h3{

color:var(--muted);

font-size:14px;

margin-bottom:8px;

}


.goal-box p{

font-size:22px;

font-weight:bold;

}


select{

width:100%;

padding:12px;

background:#111;

color:white;

border:1px solid var(--red);

border-radius:10px;

font-size:16px;

}
.progress-tabs {

    display:flex;

    gap:10px;

    margin:20px 0;

}


.progress-tab {

    flex:1;

    padding:13px;

    background:#111;

    color:white;

    border:1px solid #444;

    border-radius:10px;

    cursor:pointer;

}


.progress-tab.active {

    background:var(--red);

    border-color:var(--red);

}


.weight-section-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}


.weight-entry-card {

    display:grid;

    gap:10px;

    padding:18px;

    margin-top:15px;

    background:#111;

    border-radius:14px;

}


.weight-entry-card label {

    color:var(--muted);

}


.weight-entry-card input {

    width:100%;

    padding:13px;

    background:#080808;

    color:white;

    border:1px solid #444;

    border-radius:10px;

    font-size:16px;

}


.weight-summary {

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:15px;

    margin-top:20px;

}


.weight-chart-card {

    margin-top:20px;

    padding:18px;

    background:#111;

    border-radius:14px;

    border-top:
        4px solid var(--red);

}


.weight-chart-card canvas {

    width:100%;

    max-width:100%;

    margin-top:15px;

}


.chart-header {

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    flex-wrap:wrap;

}


.chart-header p {

    color:var(--muted);

    margin-top:5px;

}


.chart-rate-summary {

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}


.rate-stat {

    background:#1d1d1d;

    border-left:
        3px solid var(--red);

    padding:10px 14px;

    border-radius:8px;

    min-width:135px;

}


.rate-stat span {

    display:block;

    color:var(--muted);

    font-size:12px;

    margin-bottom:4px;

}


.rate-stat strong {

    font-size:17px;

}


.weight-history {

    margin-top:25px;

}


.weight-table {

    margin-top:15px;

    background:#111;

    border-radius:12px;

    overflow:hidden;

}


.weight-table-header,
.weight-table-row {

    display:grid;

    grid-template-columns:
        1.2fr
        1fr
        1.35fr
        1.15fr;

    gap:10px;

    align-items:center;

    padding:12px 15px;

}


.weight-table-header {

    background:#1d1d1d;

    color:var(--muted);

    font-size:13px;

    font-weight:bold;

    border-bottom:
        2px solid var(--red);

}


.weight-table-row {

    border-bottom:
        1px solid #2e2e2e;

}


.weight-table-row:last-child {

    border-bottom:none;

}


.empty-state {

    color:var(--muted);

    margin-top:15px;

}


.secondary-btn {

    background:#222;

    color:white;

    border:1px solid #555;

    padding:12px 18px;

    border-radius:10px;

    cursor:pointer;

}


.secondary-btn:hover {

    border-color:var(--red);

}


@media(max-width:600px) {

    .weight-summary {

        grid-template-columns:1fr;

    }


    .weight-table-header,
    .weight-table-row {

        grid-template-columns:
            1fr
            .85fr
            1.25fr
            1.1fr;

        font-size:12px;

        padding:10px 8px;

        gap:6px;

    }


    .chart-rate-summary {

        width:100%;

    }


    .rate-stat {

        flex:1;

    }

}
.rate-negative {

    color:#7dd3fc !important;

    font-weight:700;

}


.rate-positive {

    color:#fbbf24 !important;

    font-weight:700;

}


.rate-neutral {

    color:var(--text) !important;

    font-weight:700;

}
.workout-builder-actions {

    margin:20px 0;

}


.preset-section {

    margin-top:25px;

}


.preset-grid {

    display:grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:12px;

    margin-top:15px;

}


.preset-plan-card {

    background:#111;

    color:white;

    border:1px solid #444;

    border-radius:14px;

    padding:18px;

    text-align:left;

    cursor:pointer;

}


.preset-plan-card:hover {

    border-color:var(--red);

}


.preset-plan-card strong {

    display:block;

    margin-bottom:10px;

    font-size:16px;

}


.preset-plan-card span {

    display:block;

    color:#ddd;

    margin-top:4px;

}


.preset-plan-card small {

    display:block;

    color:var(--muted);

    margin-top:10px;

    line-height:1.4;

}


.plan-builder {

    margin-top:30px;

}


.plan-builder > input {

    width:100%;

    background:#090909;

    color:white;

    border:1px solid #444;

    border-radius:10px;

    padding:13px;

    margin-top:8px;

}


.workout-day-card {

    margin-top:20px;

    background:#111;

    border-radius:14px;

    padding:18px;

    border-left:
        4px solid var(--red);

}


.day-name-input {

    width:100%;

    background:#181818;

    color:white;

    border:1px solid #444;

    padding:12px;

    border-radius:9px;

    font-size:18px;

    font-weight:bold;

}


.exercise-builder-row {

    margin-top:15px;

    padding:14px;

    background:#1b1b1b;

    border-radius:10px;

}


.exercise-builder-row select {

    width:100%;

    padding:12px;

    background:#080808;

    color:white;

    border:1px solid #444;

    border-radius:8px;

}


.exercise-prescription {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:10px;

    margin-top:12px;

}


.exercise-prescription label {

    color:var(--muted);

    font-size:13px;

}


.exercise-prescription input {

    width:100%;

    display:block;

    margin-top:5px;

    padding:10px;

    background:#080808;

    color:white;

    border:1px solid #444;

    border-radius:8px;

}


.exercise-recommendation {

    margin-top:10px;

    padding:10px;

    background:#101010;

    border-radius:8px;

    color:var(--muted);

}


.exercise-recommendation span {

    text-transform:capitalize;

    margin-right:10px;

}


.exercise-recommendation strong {

    color:white;

}


.remove-exercise-btn {

    margin-top:10px;

    background:none;

    color:#ff6b6b;

    border:none;

    cursor:pointer;

}


.add-exercise-btn {

    margin-top:15px;

}


@media(max-width:700px) {

    .preset-grid {

        grid-template-columns:1fr;

    }

}
.workout-page {
    padding-bottom:100px;
}


.workout-page-title {
    margin-bottom:30px;
}


.eyebrow {
    display:block;
    color:var(--red);
    font-size:11px;
    font-weight:800;
    letter-spacing:1.5px;
    margin-bottom:6px;
}


.workout-home-section {
    margin-top:35px;
}


.workout-section-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:16px;
}


.workout-section-heading h3 {
    margin:0;
    font-size:22px;
}


.workout-section-heading p {
    margin:5px 0 0;
    color:var(--muted);
    line-height:1.5;
}


.workout-plan-grid {
    display:grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(240px,1fr)
        );
    gap:15px;
}


.workout-empty-state {
    background:#101010;
    border:1px dashed #444;
    border-radius:16px;
    padding:30px 20px;
    text-align:center;
    color:var(--muted);
}


.workout-empty-state.compact {
    padding:18px;
}


.workout-empty-state h4 {
    margin:8px 0;
    color:white;
}


.empty-state-icon {
    color:var(--red);
    font-size:32px;
    font-weight:bold;
}


.preset-grid {
    display:grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(230px,1fr)
        );
    gap:15px;
}


.preset-plan-card {
    display:block;
    width:100%;

    background:#111;
    color:white;

    border:1px solid #333;
    border-radius:16px;

    padding:18px;

    text-align:left;

    cursor:pointer;

    transition:
        transform .15s ease,
        border-color .15s ease;
}


.preset-plan-card:hover {
    border-color:var(--red);
    transform:translateY(-2px);
}


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


.plan-type-label {
    color:var(--red);
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
}


.template-frequency {
    color:var(--muted);
    font-size:12px;
}


.preset-plan-card h4 {
    margin:15px 0 8px;
    font-size:19px;
}


.preset-plan-card p {
    margin:0;
    color:var(--muted);
    line-height:1.5;
}


.template-details {
    display:flex;
    justify-content:space-between;
    gap:10px;

    margin-top:18px;

    color:#ddd;
    font-size:12px;
}


.template-action {
    margin-top:18px;

    color:white;

    font-size:13px;
    font-weight:700;
}


.plan-builder {
    margin-top:35px;

    padding:22px;

    background:#0f0f0f;

    border-top:4px solid var(--red);
    border-radius:16px;
}


.builder-heading h3 {
    margin:3px 0;
}


.builder-heading p {
    color:var(--muted);
    line-height:1.5;
}


.builder-field {
    margin-top:20px;
}


.builder-field label {
    display:block;
    margin-bottom:7px;

    font-weight:700;
}


.builder-field input {
    width:100%;

    padding:14px;

    background:#080808;
    color:white;

    border:1px solid #444;
    border-radius:10px;

    font-size:16px;
}


.workout-day-card {
    margin-top:20px;

    padding:18px;

    background:#161616;

    border-left:4px solid var(--red);
    border-radius:14px;
}


.day-name-input {
    width:100%;

    padding:12px;

    background:#080808;
    color:white;

    border:1px solid #444;
    border-radius:9px;

    font-size:18px;
    font-weight:700;
}


.exercise-builder-row {
    margin-top:15px;

    padding:15px;

    background:#202020;

    border-radius:12px;
}


.exercise-builder-row select {
    width:100%;

    padding:12px;

    background:#080808;
    color:white;

    border:1px solid #444;
    border-radius:9px;
}


.exercise-prescription {
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:12px;

    margin-top:12px;
}


.exercise-prescription label {
    color:var(--muted);
    font-size:12px;
}


.exercise-prescription input {
    display:block;

    width:100%;

    margin-top:5px;
    padding:11px;

    background:#080808;
    color:white;

    border:1px solid #444;
    border-radius:8px;

    font-size:16px;
}


.exercise-recommendation {
    margin-top:12px;

    padding:10px;

    background:#101010;

    border-radius:8px;

    color:var(--muted);
}


.exercise-recommendation strong {
    color:white;
}


.remove-exercise-btn {
    margin-top:10px;

    border:none;
    background:none;

    color:#ff6464;

    cursor:pointer;
}


.builder-footer {
    display:flex;
    justify-content:space-between;

    gap:12px;

    margin-top:20px;

    flex-wrap:wrap;
}


.workout-message {
    margin-top:20px;
    color:#4ade80;
}


@media(max-width:600px) {

    .workout-section-heading {
        align-items:stretch;
    }


    .workout-section-heading .primary-btn {
        width:100%;
    }


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


    .exercise-prescription {
        grid-template-columns:1fr 1fr;
    }


    .builder-footer {
        flex-direction:column;
    }


    .builder-footer button {
        width:100%;
    }

}

/* Active Workout Logger */

.workout-session-logger {
    scroll-margin-top:20px;
}

.workout-start-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin:20px 0;
}

.workout-start-fields label {
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}

.workout-start-fields input,
.workout-start-fields select {
    width:100%;
    margin-top:7px;
    padding:13px;
    background:#080808;
    color:white;
    border:1px solid #444;
    border-radius:9px;
    font-size:16px;
}

.session-exercise-card {
    margin:20px 0;
    padding:18px;
    background:#161616;
    border-left:4px solid var(--red);
    border-radius:14px;
}

.session-exercise-card h4 {
    font-size:19px;
}

.session-target {
    margin-top:6px;
    color:var(--muted);
}

.previous-performance {
    display:grid;
    gap:5px;
    margin:14px 0;
    padding:11px;
    background:#0d0d0d;
    border-radius:9px;
    color:var(--muted);
}

.previous-performance strong {
    color:white;
    font-size:13px;
}

.session-set-header,
.session-set-row {
    display:grid;
    grid-template-columns:50px minmax(110px,1fr) 1fr 1fr;
    gap:10px;
    align-items:center;
}

.session-set-header {
    margin-top:12px;
    padding:0 8px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.session-set-row {
    margin-top:8px;
}

.session-set-row strong {
    text-align:center;
}

.session-set-row input {
    width:100%;
    min-width:0;
    padding:13px 10px;
    background:#080808;
    color:white;
    border:1px solid #444;
    border-radius:9px;
    font-size:16px;
}

.session-set-row {
    grid-template-columns:50px minmax(110px,1fr) 1fr 1fr minmax(108px, auto);
}

.session-set-row.completed {
    background:rgba(70,190,110,.08);
    border-radius:10px;
}

.complete-set-btn {
    min-height:44px;
    padding:8px 10px;
    font-size:12px;
}

.workout-session-status,
.rest-timer-panel {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    margin:18px 0;
    padding:16px;
    background:#111115;
    border:1px solid var(--line);
    border-radius:14px;
}

.workout-session-status > div:first-child,
.rest-timer-panel > div:first-child {
    display:grid;
    gap:3px;
    margin-right:auto;
}

.workout-session-status span,
.rest-timer-panel label,
.rest-timer-panel p {
    color:var(--muted);
    font-size:12px;
}

#workout-duration-display,
#rest-timer-display {
    font-size:24px;
    font-variant-numeric:tabular-nums;
}

.workout-timer-actions,
.session-completion-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.rest-timer-panel select,
.rest-timer-panel input {
    min-height:44px;
    padding:9px 10px;
    color:white;
    background:#09090b;
    border:1px solid #444;
    border-radius:9px;
}

.active-workout-banner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    border-color:rgba(239,24,33,.5);
}

.history-workout-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:15px;
}

.history-workout-card,
.history-active-workout {
    padding:20px;
    background:linear-gradient(145deg, #202027, #151519);
    border:1px solid var(--line);
    border-radius:17px;
    box-shadow:0 12px 30px rgba(0,0,0,.22);
}

.history-active-workout {
    border-color:rgba(239,24,33,.55);
}

.history-workout-card-top,
.history-workout-metrics {
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:var(--muted);
    font-size:12px;
}

.history-workout-card h3 {
    margin-top:14px;
}

.history-workout-card > p {
    margin-top:4px;
    color:var(--muted);
}

.history-workout-metrics {
    margin:18px 0;
    padding:11px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.history-status {
    padding:4px 8px;
    color:#8ee7ae;
    background:rgba(50,180,95,.1);
    border-radius:99px;
    font-weight:800;
}

@media(max-width:600px) {

    .workout-start-fields {
        grid-template-columns:1fr;
    }

    .session-set-header,
    .session-set-row {
        grid-template-columns:36px minmax(88px,1fr) 1fr 1fr;
        gap:7px;
    }

    .session-set-row {
        grid-template-columns:36px minmax(74px,1fr) 1fr 1fr;
        padding:8px 0;
    }

    .session-set-row .complete-set-btn {
        grid-column:2 / -1;
    }

    .active-workout-banner,
    .workout-session-status {
        align-items:stretch;
        flex-direction:column;
    }

    .history-workout-grid {
        grid-template-columns:1fr;
    }

    .rest-timer-panel > * {
        flex:1 1 140px;
    }

}


.plan-last-workout {
    margin-top:10px !important;
    color:#f1f1f1 !important;
    font-weight:700;
}

.previous-set-value {
    color:#ddd;
    font-size:14px;
    text-align:center;
}

@media(max-width:600px) {

    .session-set-header {
        font-size:10px;
    }

    .previous-set-value {
        font-size:12px;
    }

}


/* Training Progress Analytics */

.training-progress-header {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:18px;
    flex-wrap:wrap;
}

.training-progress-header p,
.analytics-note {
    margin-top:6px;
    color:var(--muted);
}

.training-progress-header label,
.exercise-progress-controls label {
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.training-progress-header select,
.exercise-progress-controls select {
    margin-top:6px;
    min-width:170px;
}

.training-summary-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin:20px 0;
}

.training-summary-card {
    padding:16px;
    background:#101010;
    border-left:4px solid var(--red);
    border-radius:12px;
}

.training-summary-card span {
    display:block;
    color:var(--muted);
    font-size:12px;
}

.training-summary-card strong {
    display:block;
    margin-top:8px;
    font-size:20px;
}

.training-progress-tabs {
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:5px;
    margin-bottom:18px;
}

.training-progress-tab {
    flex:1;
    min-width:max-content;
    padding:11px 14px;
    color:white;
    background:#111;
    border:1px solid #444;
    border-radius:10px;
    cursor:pointer;
}

.training-progress-tab.active {
    background:var(--red);
    border-color:var(--red);
}

.training-progress-view {
    display:grid;
    gap:16px;
}


.training-progress-view[hidden] {
    display:none;
}

.analytics-card {
    padding:18px;
    background:#101010;
    border-radius:14px;
}

.analytics-card h4 {
    font-size:18px;
}

.training-chart {
    display:block;
    width:100%;
    height:280px;
    margin-top:15px;
}

.exercise-progress-controls {
    max-width:420px;
}

.exercise-history-header,
.exercise-history-row {
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr .6fr;
    gap:10px;
    padding:11px 8px;
    align-items:center;
}

.exercise-history-header {
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    border-bottom:2px solid var(--red);
}

.exercise-history-row {
    border-bottom:1px solid #292929;
}

.improvement-row,
.history-session-card {
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:13px 0;
    border-bottom:1px solid #292929;
}

.improvement-row span,
.history-session-card span {
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:13px;
}

.history-session-card > div:last-child {
    text-align:right;
}

.muscle-bar-row {
    display:grid;
    grid-template-columns:100px 1fr 35px;
    gap:12px;
    align-items:center;
    margin-top:13px;
}

.muscle-bar-track {
    height:12px;
    overflow:hidden;
    background:#292929;
    border-radius:999px;
}

.muscle-bar-fill {
    height:100%;
    background:var(--red);
    border-radius:999px;
}

.history-export-actions {
    display:flex;
    gap:10px;
    justify-content:flex-end;
    flex-wrap:wrap;
}

@media(max-width:750px) {

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

}

@media(max-width:520px) {

    .training-progress-header label,
    .training-progress-header select {
        width:100%;
    }

    .training-summary-card strong {
        font-size:16px;
    }

    .exercise-history-header,
    .exercise-history-row {
        grid-template-columns:1fr .9fr .8fr .4fr;
        gap:5px;
        font-size:11px;
    }

    .training-chart {
        height:240px;
    }

    .muscle-bar-row {
        grid-template-columns:75px 1fr 28px;
        gap:8px;
        font-size:12px;
    }

}


.training-header-actions {
    display:flex;
    align-items:end;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

@media(max-width:650px) {

    .training-header-actions {
        width:100%;
        justify-content:stretch;
    }

    .training-header-actions label,
    .training-header-actions button {
        width:100%;
    }

}


.rep-target-achievement {
    display:grid;
    gap:5px;
    margin:14px 0;
    padding:12px;
    color:#e7f8ec;
    background:#102418;
    border:1px solid #2d7a48;
    border-radius:10px;
}

.rep-target-achievement strong {
    color:#4ade80;
}

.rep-target-achievement span {
    line-height:1.45;
    font-size:13px;
}


.custom-exercise-form {
    margin:22px 0;
    padding:18px;
    background:#161616;
    border:1px solid #444;
    border-radius:14px;
}

.custom-exercise-form[hidden] {
    display:none;
}

.custom-exercise-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-top:15px;
}

.custom-exercise-grid label {
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.custom-exercise-grid input,
.custom-exercise-grid select {
    width:100%;
    margin-top:6px;
    padding:12px;
    color:white;
    background:#080808;
    border:1px solid #444;
    border-radius:9px;
}

@media(max-width:600px) {

    .custom-exercise-grid {
        grid-template-columns:1fr;
    }

}


/* Notes-based cardio planning and workout logging */

.cardio-prescription {
    grid-template-columns:1fr;
}

.exercise-notes,
.session-cardio-notes {
    width:100%;
    min-height:96px;
    margin-top:7px;
    padding:12px;
    resize:vertical;
    color:white;
    background:#080808;
    border:1px solid #444;
    border-radius:9px;
    font:inherit;
    line-height:1.45;
}

.exercise-notes:focus,
.session-cardio-notes:focus {
    border-color:var(--red);
    outline:2px solid color-mix(in srgb, var(--red) 35%, transparent);
}

.cardio-session-card {
    display:grid;
    gap:12px;
}

.cardio-plan-note {
    margin:0;
    padding:11px 12px;
    color:#ddd;
    background:#161616;
    border-radius:9px;
    line-height:1.45;
}

.cardio-notes-label {
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}


/* Level Up professional brand system */

:root {
    --bg:#09090b;
    --surface:#121216;
    --surface-raised:#18181d;
    --card:#1c1c22;
    --red:#ef1821;
    --red-dark:#a90e15;
    --red-glow:rgba(239,24,33,.22);
    --text:#f7f7f8;
    --muted:#9b9ba5;
    --line:rgba(255,255,255,.09);
    --shadow:0 18px 50px rgba(0,0,0,.38);
}

html {
    background:var(--bg);
    scroll-behavior:smooth;
}

body {
    background:
        radial-gradient(circle at 15% -10%, rgba(239,24,33,.11), transparent 34rem),
        var(--bg);
    color:var(--text);
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height:1.5;
    padding-bottom:104px;
}

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

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

#app {
    min-height:100vh;
}

#content {
    width:min(1180px, 100%);
    margin:0 auto;
    padding:30px 22px 10px;
}

.hero {
    position:relative;
    overflow:hidden;
    padding:26px max(22px, calc((100vw - 1136px) / 2));
    text-align:left;
    background:
        linear-gradient(110deg, rgba(239,24,33,.13), transparent 38%),
        linear-gradient(180deg, #111114 0%, #0b0b0e 100%);
    border-bottom:1px solid var(--line);
}

.hero::after {
    content:"";
    position:absolute;
    inset:auto -90px -150px auto;
    width:360px;
    height:360px;
    border:1px solid rgba(239,24,33,.18);
    border-radius:50%;
    box-shadow:0 0 100px rgba(239,24,33,.08);
    pointer-events:none;
}

.hero-inner {
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:34px;
    width:min(1136px, 100%);
    margin:0 auto;
}

.brand {
    flex:0 0 auto;
    display:block;
    width:164px;
    height:164px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    border-radius:26px;
    box-shadow:0 18px 48px rgba(0,0,0,.5), 0 0 30px rgba(239,24,33,.08);
}

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

.hero-copy {
    max-width:680px;
}

.hero-kicker {
    display:block;
    margin-bottom:9px;
    color:#ff5259;
    font-size:11px;
    font-weight:800;
    letter-spacing:.2em;
}

.hero h1 {
    max-width:650px;
    font-size:clamp(30px, 4vw, 51px);
    line-height:1.04;
    letter-spacing:-.045em;
    font-weight:850;
}

.hero h1 span {
    color:#ff3139;
}

.hero p {
    max-width:620px;
    margin-top:15px;
    color:#b9b9c1;
    font-size:15px;
    line-height:1.65;
}

.section-card,
.plan-builder,
.analytics-card,
.weight-chart-card {
    border:1px solid var(--line);
    box-shadow:var(--shadow);
}

.section-card {
    width:100%;
    max-width:none;
    margin:0 0 22px;
    padding:clamp(20px, 3vw, 30px);
    background:linear-gradient(145deg, rgba(28,28,34,.96), rgba(17,17,21,.98));
    border-radius:20px;
}

.section-card h2 {
    letter-spacing:-.025em;
}

.dashboard {
    width:100%;
    padding:0;
    margin-bottom:22px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
}

.metric-card,
.training-summary-card,
.preset-plan-card,
.workout-day-card,
.session-exercise-card {
    border:1px solid var(--line);
    border-left:1px solid var(--line);
    box-shadow:0 12px 30px rgba(0,0,0,.22);
}

.metric-card {
    min-height:112px;
    padding:21px;
    background:linear-gradient(145deg, #202027, #17171c);
    border-radius:17px;
}

.metric-card::before {
    content:"";
    align-self:stretch;
    width:3px;
    border-radius:99px;
    background:linear-gradient(#ff3b43, #a90e15);
}

.metric-icon {
    display:grid;
    place-items:center;
    width:45px;
    height:45px;
    flex:0 0 45px;
    background:rgba(239,24,33,.1);
    border:1px solid rgba(239,24,33,.22);
    border-radius:13px;
    font-size:22px;
}

.primary-btn,
.secondary-btn,
.progress-tab,
.training-progress-tab {
    min-height:44px;
    border-radius:11px;
    font-weight:750;
    transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.primary-btn {
    background:linear-gradient(135deg, #ff2831, #d90f17);
    box-shadow:0 8px 22px rgba(239,24,33,.22);
}

.primary-btn:hover {
    background:linear-gradient(135deg, #ff3b43, #e5161e);
    box-shadow:0 10px 26px rgba(239,24,33,.32);
    transform:translateY(-1px);
}

.secondary-btn {
    background:#202027;
    border-color:var(--line);
}

select,
input,
textarea {
    transition:border-color .15s ease, box-shadow .15s ease;
}

select:focus,
input:focus,
textarea:focus {
    outline:none;
    border-color:rgba(255,50,58,.8) !important;
    box-shadow:0 0 0 3px rgba(239,24,33,.13);
}

.bottom-nav {
    z-index:100;
    left:50%;
    bottom:max(14px, env(safe-area-inset-bottom));
    width:min(560px, calc(100% - 28px));
    transform:translateX(-50%);
    justify-content:stretch;
    gap:4px;
    padding:7px;
    background:rgba(18,18,22,.92);
    border:1px solid rgba(255,255,255,.11);
    border-radius:18px;
    box-shadow:0 16px 46px rgba(0,0,0,.55);
    backdrop-filter:blur(18px);
}

.bottom-nav button {
    position:relative;
    flex:1;
    min-height:55px;
    padding:7px 4px;
    color:#a8a8b1;
    border-radius:12px;
    font-size:19px;
    transition:color .15s ease, background .15s ease;
}

.bottom-nav button span {
    margin-top:2px;
    font-size:10px;
    font-weight:750;
    letter-spacing:.02em;
}

.bottom-nav button:hover,
.bottom-nav button.active {
    color:white;
    background:linear-gradient(145deg, rgba(239,24,33,.24), rgba(239,24,33,.09));
}

.bottom-nav button.active::after {
    content:"";
    position:absolute;
    left:50%;
    bottom:3px;
    width:18px;
    height:2px;
    transform:translateX(-50%);
    background:#ff3038;
    border-radius:99px;
}

.more-menu-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
}

.more-menu-card {
    display:grid;
    grid-template-columns:52px 1fr auto;
    gap:15px;
    align-items:center;
    min-height:118px;
    padding:20px;
    color:var(--text);
    text-align:left;
    background:linear-gradient(145deg, #202027, #17171c);
    border:1px solid var(--line);
    border-radius:17px;
    box-shadow:0 12px 30px rgba(0,0,0,.22);
    cursor:pointer;
}

.more-menu-card:hover {
    border-color:rgba(239,24,33,.58);
}

.more-menu-icon {
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    background:rgba(239,24,33,.1);
    border:1px solid rgba(239,24,33,.22);
    border-radius:14px;
    font-size:24px;
}

.more-menu-icon .app-silhouette-icon {
    width:26px;
    height:26px;
    color:#fff;
    fill:currentColor;
    flex:0 0 auto;
}

.more-menu-card strong,
.more-menu-card small {
    display:block;
}

.more-menu-card strong {
    font-size:17px;
}

.more-menu-card small {
    margin-top:5px;
    color:var(--muted);
    line-height:1.45;
}

.more-menu-arrow {
    color:#ff464e;
    font-size:30px;
}

.eyebrow,
.plan-type-label {
    color:#ff464e;
}

.workout-empty-state {
    background:rgba(10,10,12,.58);
    border-color:rgba(255,255,255,.13);
}

.preset-plan-card,
.workout-day-card,
.session-exercise-card,
.training-summary-card,
.analytics-card {
    background:linear-gradient(145deg, #19191e, #121216);
}

.preset-plan-card:hover {
    border-color:rgba(239,24,33,.65);
    box-shadow:0 16px 34px rgba(0,0,0,.28);
}

.plan-builder {
    background:linear-gradient(145deg, #17171c, #0e0e11);
    border-top:3px solid var(--red);
    border-radius:18px;
}

.workout-message {
    font-weight:700;
}

@media(max-width:700px) {
    body {
        padding-bottom:96px;
    }

    #content {
        padding:20px 15px 6px;
    }

    .hero {
        padding:16px 18px;
    }

    .hero-inner {
        gap:16px;
    }

    .brand {
        width:92px;
        height:92px;
        border-radius:18px;
    }

    .hero-kicker {
        margin-bottom:5px;
        font-size:9px;
    }

    .hero h1 {
        font-size:clamp(23px, 7vw, 32px);
    }

    .hero p {
        display:none;
    }

    .section-card {
        padding:19px 16px;
        border-radius:17px;
    }

    .dashboard {
        grid-template-columns:1fr;
        gap:11px;
    }

    .metric-card {
        min-height:92px;
        padding:16px;
    }

    .more-menu-grid {
        grid-template-columns:1fr;
    }
}

@media(max-width:390px) {
    .brand {
        width:78px;
        height:78px;
    }

    .hero h1 {
        font-size:22px;
    }

    .hero-kicker {
        letter-spacing:.12em;
    }

    .bottom-nav {
        width:calc(100% - 18px);
        bottom:max(8px, env(safe-area-inset-bottom));
    }
}


/* Nutrition hub */

.nutrition-page {
    display:grid;
    gap:22px;
}

.nutrition-hero-card {
    position:relative;
    min-height:390px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:var(--shadow);
}

.nutrition-hero-card::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(5,5,7,.96) 0%, rgba(5,5,7,.76) 38%, rgba(5,5,7,.05) 76%);
}

.nutrition-hero-card img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.nutrition-hero-overlay {
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:min(520px, 62%);
    min-height:390px;
    padding:clamp(28px, 5vw, 58px);
}

.nutrition-hero-overlay h2 {
    max-width:480px;
    font-size:clamp(32px, 5vw, 55px);
    line-height:1.04;
    letter-spacing:-.045em;
}

.nutrition-hero-overlay p {
    max-width:480px;
    margin-top:16px;
    color:#c4c4ca;
    line-height:1.65;
}

.nutrition-intro {
    display:grid;
    grid-template-columns:minmax(0, 1fr) 360px;
    gap:34px;
    align-items:center;
    margin:0;
}

.nutrition-intro p {
    max-width:610px;
    margin-top:10px;
    color:var(--muted);
    line-height:1.65;
}

.plate-guide {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    min-height:270px;
    overflow:hidden;
    color:white;
    background:#111;
    border:7px solid #efeff1;
    border-radius:50%;
    box-shadow:inset 0 0 0 2px #2c2c32, 0 15px 35px rgba(0,0,0,.3);
}

.plate-guide > div {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:15px;
    text-align:center;
}

.plate-guide strong {
    font-size:28px;
}

.plate-guide span {
    font-size:12px;
    font-weight:750;
}

.plate-half {
    grid-row:1 / 3;
    background:linear-gradient(145deg, #2b7a48, #164d2c);
}

.plate-quarter.protein {
    background:linear-gradient(145deg, #d22d35, #831219);
}

.plate-quarter.grains {
    background:linear-gradient(145deg, #b88935, #72531d);
}

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

.nutrition-food-card {
    position:relative;
    overflow:hidden;
    min-height:270px;
    padding:22px;
    background:linear-gradient(145deg, #1b1b20, #111115);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 13px 30px rgba(0,0,0,.22);
}

.nutrition-food-card::after {
    content:"";
    position:absolute;
    right:-35px;
    bottom:-35px;
    width:110px;
    height:110px;
    border-radius:50%;
    opacity:.13;
}

.nutrition-food-card.vegetables::after {
    background:#42c970;
}

.nutrition-food-card.protein::after {
    background:#ff3b43;
}

.nutrition-food-card.grains::after {
    background:#e6ad45;
}

.nutrition-food-card.fats::after {
    background:#9dc53e;
}

.nutrition-card-icon {
    display:grid;
    place-items:center;
    width:47px;
    height:47px;
    margin-bottom:22px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--line);
    border-radius:13px;
    font-size:23px;
}

.nutrition-food-card h3 {
    font-size:18px;
}

.nutrition-food-card p {
    margin:9px 0 16px;
    color:var(--muted);
    font-size:13px;
    line-height:1.58;
}

.nutrition-food-card > strong {
    display:block;
    margin-bottom:4px;
    color:#f1f1f3;
    font-size:12px;
}

.nutrition-food-card > span:last-child {
    color:#bdbdc5;
    font-size:12px;
    line-height:1.5;
}

.nutrition-habits-card {
    margin:0;
}

.nutrition-section-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
}

.nutrition-section-heading p {
    max-width:600px;
    margin-top:7px;
    color:var(--muted);
}

.nutrition-date-label {
    min-width:190px;
    color:var(--muted);
    font-size:12px;
    font-weight:750;
}

.nutrition-date-label input {
    width:100%;
    margin-top:6px;
    padding:11px;
    color:white;
    background:#0b0b0e;
    border:1px solid #3b3b43;
    border-radius:9px;
}

.nutrition-habit-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px;
    margin-top:22px;
}

.nutrition-habit {
    position:relative;
    display:grid;
    grid-template-columns:24px 42px 1fr;
    gap:12px;
    align-items:center;
    min-height:94px;
    padding:15px;
    background:#111115;
    border:1px solid var(--line);
    border-radius:14px;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
}

.nutrition-habit:hover {
    border-color:rgba(239,24,33,.42);
}

.nutrition-habit:has(input:checked) {
    background:rgba(239,24,33,.07);
    border-color:rgba(239,24,33,.5);
}

.nutrition-habit input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.habit-check {
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    border:2px solid #595961;
    border-radius:7px;
}

.nutrition-habit input:checked + .habit-check {
    background:var(--red);
    border-color:var(--red);
}

.nutrition-habit input:checked + .habit-check::after {
    content:"✓";
    color:white;
    font-size:14px;
    font-weight:900;
}

.habit-icon {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    background:#202027;
    border-radius:11px;
    font-size:20px;
}

.nutrition-habit strong,
.nutrition-habit small {
    display:block;
}

.nutrition-habit strong {
    font-size:14px;
}

.nutrition-habit small {
    margin-top:4px;
    color:var(--muted);
    font-size:11px;
    line-height:1.45;
}

.nutrition-notes-label {
    display:block;
    margin-top:20px;
    color:var(--muted);
    font-size:12px;
    font-weight:750;
}

.nutrition-notes-label textarea {
    width:100%;
    min-height:116px;
    margin-top:7px;
    padding:13px;
    resize:vertical;
    color:white;
    background:#0b0b0e;
    border:1px solid #3b3b43;
    border-radius:11px;
    line-height:1.5;
}

.nutrition-save-row {
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:15px;
}

.nutrition-message {
    color:#72df98;
    font-size:13px;
    font-weight:750;
}

.nutrition-tip-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.nutrition-tip-card {
    display:flex;
    gap:16px;
    padding:21px;
    background:linear-gradient(145deg, #19191e, #111115);
    border:1px solid var(--line);
    border-radius:17px;
}

.nutrition-tip-card > span {
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    flex:0 0 48px;
    background:rgba(239,24,33,.09);
    border:1px solid rgba(239,24,33,.2);
    border-radius:13px;
    font-size:22px;
}

.nutrition-tip-card h3 {
    font-size:16px;
}

.nutrition-tip-card p {
    margin-top:6px;
    color:var(--muted);
    font-size:13px;
    line-height:1.55;
}

.nutrition-evidence-card {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(280px, .8fr);
    gap:35px;
    padding:clamp(22px, 4vw, 34px);
    background:
        linear-gradient(130deg, rgba(239,24,33,.1), transparent 40%),
        #131317;
    border:1px solid var(--line);
    border-radius:20px;
}

.nutrition-evidence-card p {
    max-width:620px;
    margin-top:8px;
    color:var(--muted);
    line-height:1.6;
}

.nutrition-resource-links {
    display:grid;
    gap:9px;
}

.nutrition-resource-links a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:13px 15px;
    color:white;
    background:#1c1c22;
    border:1px solid var(--line);
    border-radius:11px;
    text-decoration:none;
    font-size:13px;
    font-weight:750;
}

.nutrition-resource-links a:hover {
    border-color:rgba(239,24,33,.58);
}

.nutrition-resource-links span {
    color:#ff464e;
    font-size:17px;
}

@media(max-width:900px) {
    .nutrition-intro {
        grid-template-columns:1fr;
    }

    .plate-guide {
        width:min(370px, 100%);
        min-height:300px;
        margin:0 auto;
    }

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

@media(max-width:650px) {
    .nutrition-hero-card {
        min-height:430px;
    }

    .nutrition-hero-card::after {
        background:linear-gradient(0deg, rgba(5,5,7,.98) 0%, rgba(5,5,7,.66) 58%, rgba(5,5,7,.12) 100%);
    }

    .nutrition-hero-overlay {
        justify-content:flex-end;
        width:100%;
        min-height:430px;
        padding:25px 20px;
    }

    .nutrition-hero-overlay h2 {
        font-size:34px;
    }

    .nutrition-food-grid,
    .nutrition-habit-list,
    .nutrition-tip-grid,
    .nutrition-evidence-card {
        grid-template-columns:1fr;
    }

    .nutrition-section-heading {
        align-items:stretch;
        flex-direction:column;
    }

    .nutrition-date-label {
        width:100%;
    }

    .nutrition-habit {
        grid-template-columns:23px 40px 1fr;
    }

    .nutrition-save-row {
        align-items:stretch;
        flex-direction:column;
    }

    .nutrition-save-row button {
        width:100%;
    }
}


/* Live dashboard */

.dashboard-welcome {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:22px;
}

.dashboard-welcome h2 {
    font-size:clamp(30px, 4vw, 44px);
    line-height:1;
    letter-spacing:-.04em;
}

.dashboard-welcome p {
    max-width:650px;
    margin-top:10px;
    color:var(--muted);
}

.dashboard-status {
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 12px;
    color:#b9b9c1;
    background:#15151a;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:11px;
    font-weight:750;
    white-space:nowrap;
}

.status-dot {
    width:8px;
    height:8px;
    background:#4ade80;
    border-radius:50%;
    box-shadow:0 0 0 4px rgba(74,222,128,.1);
}

.dashboard-detail-grid {
    display:grid;
    grid-template-columns:minmax(0, 1.35fr) minmax(300px, .65fr);
    gap:16px;
}

.dashboard-detail-grid .section-card {
    margin:0 0 22px;
}

.dashboard-card-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.dashboard-card-heading time,
.dashboard-total {
    padding:7px 10px;
    color:#b9b9c1;
    background:#202027;
    border:1px solid var(--line);
    border-radius:9px;
    font-size:11px;
    font-weight:750;
    white-space:nowrap;
}

.latest-workout-title {
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:23px;
}

.latest-workout-icon {
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    background:rgba(239,24,33,.11);
    border:1px solid rgba(239,24,33,.24);
    border-radius:15px;
    font-size:25px;
}

.latest-workout-title h3 {
    font-size:20px;
}

.latest-workout-title p {
    margin-top:3px;
    color:var(--muted);
    font-size:13px;
}

.latest-workout-stats {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:19px;
}

.latest-workout-stats > div {
    padding:13px;
    background:#111115;
    border:1px solid var(--line);
    border-radius:12px;
}

.latest-workout-stats span,
.latest-workout-stats strong {
    display:block;
}

.latest-workout-stats span {
    color:var(--muted);
    font-size:11px;
}

.latest-workout-stats strong {
    margin-top:5px;
    font-size:21px;
}

.latest-exercise-list {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:16px;
}

.latest-exercise-list span {
    padding:7px 10px;
    color:#d5d5da;
    background:#202027;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:11px;
}

.nutrition-dashboard-score {
    color:#72df98;
    font-size:24px;
    font-weight:850;
}

.nutrition-dashboard-progress {
    height:9px;
    overflow:hidden;
    margin-top:25px;
    background:#292930;
    border-radius:99px;
}

.nutrition-dashboard-progress span {
    display:block;
    height:100%;
    background:linear-gradient(90deg, #2a9a55, #72df98);
    border-radius:inherit;
}

.dashboard-nutrition > p {
    margin-top:15px;
    color:var(--muted);
    font-size:13px;
    line-height:1.55;
}

.dashboard-note {
    display:grid;
    gap:4px;
    margin-top:16px;
    padding:12px;
    background:#111115;
    border:1px solid var(--line);
    border-radius:11px;
}

.dashboard-note strong {
    font-size:11px;
}

.dashboard-note span {
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
}

.dashboard-history {
    margin:0 0 22px;
}

.dashboard-session-list {
    display:grid;
    margin-top:18px;
}

.dashboard-session-row {
    display:grid;
    grid-template-columns:54px minmax(0, 1fr) auto;
    gap:14px;
    align-items:center;
    padding:13px 0;
    border-bottom:1px solid var(--line);
}

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

.session-date-badge {
    display:grid;
    place-items:center;
    width:50px;
    height:50px;
    background:#202027;
    border:1px solid var(--line);
    border-radius:12px;
}

.session-date-badge strong,
.session-date-badge span {
    display:block;
    line-height:1;
}

.session-date-badge strong {
    font-size:18px;
}

.session-date-badge span {
    margin-top:3px;
    color:var(--muted);
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
}

.dashboard-session-name strong,
.dashboard-session-name span,
.dashboard-session-summary strong,
.dashboard-session-summary span {
    display:block;
}

.dashboard-session-name span,
.dashboard-session-summary span {
    margin-top:3px;
    color:var(--muted);
    font-size:11px;
}

.dashboard-session-summary {
    text-align:right;
}

.dashboard-session-summary strong {
    font-size:12px;
}

.dashboard-empty {
    display:grid;
    place-items:center;
    min-height:190px;
    padding:25px;
    text-align:center;
}

.dashboard-empty > span {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    margin-bottom:10px;
    color:#ff464e;
    background:rgba(239,24,33,.09);
    border:1px solid rgba(239,24,33,.2);
    border-radius:13px;
    font-size:23px;
}

.dashboard-empty p {
    max-width:400px;
    margin-top:5px;
    color:var(--muted);
    font-size:12px;
}

@media(max-width:800px) {
    .dashboard-detail-grid {
        grid-template-columns:1fr;
    }
}

@media(max-width:600px) {
    .dashboard-welcome {
        align-items:flex-start;
        flex-direction:column;
    }

    .dashboard-status {
        align-self:flex-start;
    }

    .dashboard-session-row {
        grid-template-columns:48px minmax(0, 1fr);
    }

    .dashboard-session-summary {
        grid-column:2;
        text-align:left;
    }
}


.weight-entry-actions {
    display:flex;
    gap:6px;
    justify-content:flex-end;
}

.weight-entry-actions button {
    padding:7px 9px;
    color:#e8e8ec;
    background:#24242a;
    border:1px solid var(--line);
    border-radius:8px;
    font-size:11px;
    font-weight:750;
    cursor:pointer;
}

.weight-entry-actions .edit-weight-entry:hover {
    border-color:#7dd3fc;
}

.weight-entry-actions .remove-weight-entry {
    color:#ff8d92;
}

.weight-entry-actions .remove-weight-entry:hover {
    border-color:#ef1821;
}

@media(max-width:600px) {
    .weight-entry-actions {
        flex-direction:column;
    }

    .weight-entry-actions button {
        padding:6px;
        font-size:9px;
    }
}


/* Backup and restore */

.dashboard-backup {
    display:grid;
    grid-template-columns:64px minmax(0, 1fr) auto;
    gap:22px;
    align-items:center;
}

.backup-icon {
    display:grid;
    place-items:center;
    width:60px;
    height:60px;
    background:rgba(125,211,252,.09);
    border:1px solid rgba(125,211,252,.22);
    border-radius:17px;
    font-size:28px;
}

.backup-copy p {
    max-width:670px;
    margin-top:8px;
    color:var(--muted);
    font-size:13px;
    line-height:1.6;
}

.backup-details {
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    margin-top:13px;
    color:#bdbdc5;
    font-size:11px;
    font-weight:700;
}

.backup-details span::first-letter {
    color:#72df98;
}

.backup-actions {
    display:grid;
    gap:9px;
    min-width:185px;
}

.backup-actions button {
    width:100%;
}

.backup-message {
    max-width:250px;
    color:#72df98;
    font-size:11px;
    line-height:1.45;
}

.backup-message.error {
    color:#ff8d92;
}

@media(max-width:760px) {
    .dashboard-backup {
        grid-template-columns:52px minmax(0, 1fr);
        align-items:start;
    }

    .backup-icon {
        width:50px;
        height:50px;
        border-radius:14px;
        font-size:23px;
    }

    .backup-actions {
        grid-column:1 / -1;
        width:100%;
    }
}


/* Private photo journal */

.photo-journal {
    margin-top:28px;
    padding:clamp(20px, 3vw, 28px);
    background:linear-gradient(145deg, #18181d, #101014);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow);
}

.photo-journal-heading,
.photo-gallery-heading,
.photo-compare-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.photo-journal-heading p,
.photo-compare-heading p {
    max-width:660px;
    margin-top:6px;
    color:var(--muted);
    font-size:13px;
    line-height:1.55;
}

.photo-private-badge {
    padding:8px 11px;
    color:#c8c8cf;
    background:#212127;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:10px;
    font-weight:750;
    white-space:nowrap;
}

.photo-entry-panel {
    display:grid;
    grid-template-columns:160px minmax(220px, 1fr) minmax(220px, 1fr) auto;
    gap:12px;
    align-items:end;
    margin-top:22px;
    padding:17px;
    background:#111115;
    border:1px solid var(--line);
    border-radius:15px;
}

.photo-entry-panel label,
.photo-compare-selectors label {
    color:var(--muted);
    font-size:11px;
    font-weight:750;
}

.photo-entry-panel input,
.photo-compare-selectors select {
    width:100%;
    margin-top:6px;
    padding:11px;
    color:white;
    background:#09090c;
    border:1px solid #3b3b43;
    border-radius:9px;
}

.photo-file-control input {
    padding:8px;
    font-size:11px;
}

.photo-journal-message {
    grid-column:1 / -1;
    color:#72df98;
    font-size:11px;
    font-weight:750;
}

.photo-journal-message.error {
    color:#ff8d92;
}

.photo-compare-panel {
    margin-top:20px;
    padding:18px;
    background:#111115;
    border:1px solid var(--line);
    border-radius:16px;
}

.photo-compare-selectors {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:15px;
}

.photo-comparison {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    min-height:220px;
    margin-top:15px;
}

.photo-comparison > p {
    grid-column:1 / -1;
    display:grid;
    place-items:center;
    min-height:220px;
    padding:24px;
    color:var(--muted);
    background:#0b0b0e;
    border:1px dashed #3d3d45;
    border-radius:13px;
    text-align:center;
}

.photo-comparison figure {
    overflow:hidden;
    background:#0b0b0e;
    border:1px solid var(--line);
    border-radius:14px;
}

.photo-comparison img {
    display:block;
    width:100%;
    height:clamp(240px, 38vw, 470px);
    object-fit:contain;
    background:#050506;
}

.photo-comparison figcaption {
    display:grid;
    gap:3px;
    padding:12px;
}

.photo-comparison figcaption span {
    color:var(--muted);
    font-size:11px;
}

.photo-gallery-heading {
    align-items:center;
    margin-top:24px;
}

.photo-gallery-heading > span {
    color:var(--muted);
    font-size:11px;
}

.photo-journal-gallery {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
    gap:12px;
    margin-top:13px;
}

.photo-empty-state {
    grid-column:1 / -1;
    padding:34px 20px;
    color:var(--muted);
    background:#0b0b0e;
    border:1px dashed #3d3d45;
    border-radius:13px;
    text-align:center;
}

.photo-journal-card {
    overflow:hidden;
    background:#111115;
    border:1px solid var(--line);
    border-radius:14px;
}

.photo-journal-card > img {
    display:block;
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    background:#050506;
}

.photo-card-copy {
    padding:12px;
}

.photo-card-copy strong,
.photo-card-copy p {
    display:block;
}

.photo-card-copy p {
    min-height:34px;
    margin-top:4px;
    color:var(--muted);
    font-size:11px;
    line-height:1.45;
}

.photo-card-copy button {
    margin-top:10px;
    padding:7px 9px;
    color:#ff8d92;
    background:#222229;
    border:1px solid var(--line);
    border-radius:8px;
    font-size:10px;
    font-weight:750;
    cursor:pointer;
}

.photo-card-copy button:hover {
    border-color:#ef1821;
}

@media(max-width:900px) {
    .photo-entry-panel {
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:600px) {
    .photo-journal-heading {
        flex-direction:column;
    }

    .photo-entry-panel,
    .photo-compare-selectors {
        grid-template-columns:1fr;
    }

    .photo-entry-panel button {
        width:100%;
    }

    .photo-comparison {
        grid-template-columns:1fr;
    }

    .photo-comparison img {
        height:auto;
        max-height:520px;
    }

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


/* Google Drive beta transfer */

.dashboard-drive {
    display:grid;
    grid-template-columns:64px minmax(0, 1fr) auto;
    gap:22px;
    align-items:center;
    background:
        linear-gradient(135deg, rgba(66,133,244,.08), transparent 42%),
        var(--card);
}

.drive-icon {
    color:#fff;
    background:
        conic-gradient(
            from 215deg,
            #34a853,
            #4285f4,
            #ea4335,
            #fbbc04,
            #34a853
        );
    border:0;
    font-family:Arial, sans-serif;
    font-size:25px;
    font-weight:900;
}

.drive-state-row {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px 14px;
    margin-top:14px;
    color:var(--muted);
    font-size:11px;
}

.drive-status {
    padding:6px 9px;
    color:#d6d6dc;
    background:#24242a;
    border:1px solid var(--line);
    border-radius:999px;
    font-weight:800;
}

.drive-status.connected {
    color:#8bf0ad;
    background:rgba(74,222,128,.08);
    border-color:rgba(74,222,128,.3);
}

.drive-safety-note {
    padding-left:11px;
    border-left:2px solid rgba(125,211,252,.45);
    font-size:11px !important;
}

.drive-actions .text-btn {
    padding:8px;
    color:var(--muted);
    background:transparent;
    border:0;
    cursor:pointer;
    font-size:11px;
    font-weight:750;
}

.drive-actions .text-btn:hover {
    color:white;
}

.drive-actions button:disabled {
    cursor:not-allowed;
    opacity:.48;
}

@media(max-width:760px) {
    .dashboard-drive {
        grid-template-columns:52px minmax(0, 1fr);
        align-items:start;
    }

    .drive-actions {
        grid-column:1 / -1;
        width:100%;
    }
}