/* ============================================================
   REPTRA — app.css
   Single source of truth for all shared styles
   ============================================================ */

/* === CSS VARIABLES === */
:root {
    --bg-page:      #080f1e;
    --bg-card:      #0d1b2e;
    --bg-input:     #111c2d;
    --border:       #1e2d45;
    --border-light: #3a5070;

    --text-primary:  #fff;
    --text-bright:   #e2e8f0;
    --text-secondary:#94a3b8;
    --text-muted:    #64748b;

    --blue-primary:  #2563eb;
    --blue-hover:    #1d4ed8;
    --blue-light:    #3b82f6;
    --blue-lighter:  #60a5fa;
    --blue-bg:       #1e3a5f;

    --green:         #22c55e;
    --green-light:   #4ade80;
    --green-bg:      #14532d;

    --red:           #ef4444;
    --red-light:     #f87171;
    --red-bg:        #450a0a;

    --amber:         #f59e0b;
    --amber-light:   #fbbf24;
    --amber-bg:      #451a03;

    --purple:        #a855f7;
    --purple-light:  #c084fc;

    /* Admin shorthand aliases */
    --bg:      #080f1e;
    --panel:   #0d1b2e;
    --card:    #111c2d;
    --blue:    #2563eb;
    --blue-lt: #60a5fa;
    --text:    #e2e8f0;
    --muted:   #64748b;
}

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: #080f1e;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    min-height: 100vh;
    padding-bottom: 80px; /* room for mobile nav */
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* === LAYOUT === */
.content {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 16px 24px;
}

.page-wrap {
    max-width: 600px;
    margin: 0 auto;
    padding: 16px 16px 24px;
}

/* === NAVIGATION — TOP BAR === */
.top-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px;
    position: sticky;
    top: 0;
    background: #080f1e;
    z-index: 100;
}

.page-header {
    padding: 14px 16px 10px;
    position: sticky;
    top: 0;
    background: #080f1e;
    z-index: 100;
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* === NAVIGATION — MOBILE BOTTOM NAV === */
.mobile-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #0d1b2e;
    border-top: 1px solid #1e2d45;
    display: flex;
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom);
}

.mobile-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 12px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    gap: 4px;
    transition: color 0.15s;
}

.mobile-nav a i { font-size: 20px; }
.mobile-nav a.active { color: #2563eb; }
.mobile-nav a:hover { color: #94a3b8; }

/* === TYPOGRAPHY === */
.page-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.page-sub {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.section-title {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}

.section-label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.total-count {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

/* === BUTTONS === */
.btn-back {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: background 0.15s;
}
.btn-back:hover { background: #1e2d45; }

.btn-primary, .btn-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 800;
    transition: background 0.15s;
}
.btn-primary:hover, .btn-save:hover { background: #1d4ed8; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: #94a3b8;
    border: 1.5px solid #1e2d45;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.15s;
}
.btn-secondary:hover { border-color: #3a5070; color: #fff; }

.btn-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1e3a5f;
    color: #60a5fa;
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.15s;
}
.btn-add:hover { background: #2563eb; color: #fff; }

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.15s;
}
.btn-icon:hover { background: #1e2d45; color: #fff; }

.btn-danger, .btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #450a0a;
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.15s;
}
.btn-danger:hover, .btn-delete:hover { background: #f87171; color: #fff; }

/* Admin button variants */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}
.btn.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.btn.btn-primary { background: #2563eb; color: #fff; }
.btn.btn-primary:hover { background: #1d4ed8; }
.btn.btn-ghost { background: #111c2d; color: #e2e8f0; border: 1px solid #1e2d45; }
.btn.btn-ghost:hover { border-color: #2563eb; }
.btn.btn-danger { background: #450a0a; color: #f87171; border: 1px solid rgba(248,113,113,0.27); }
.btn.btn-danger:hover { background: #f87171; color: #fff; }

/* === CARDS === */
.card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 18px;
}

.stat-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 14px;
}

.stat-val { font-size: 22px; font-weight: 900; line-height: 1; }
.stat-lbl { font-size: 11px; color: #64748b; font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }

.stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0 16px 12px;
}

.form-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 18px;
    margin: 0 16px 16px;
}

.chart-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 18px;
    margin: 0 16px 16px;
}

/* Workout cards */
.workout-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 16px;
    margin: 0 16px 12px;
}

.workout-list { padding-top: 4px; }

.wk-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.wk-name { font-size: 15px; font-weight: 800; color: #fff; }
.wk-date { font-size: 12px; color: #64748b; margin-top: 2px; }

.wk-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.wk-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #94a3b8;
}

.wk-pr {
    color: #f59e0b;
    font-weight: 700;
}

.wk-share-btn {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: all 0.15s;
}
.wk-share-btn:hover { color: #3b82f6; border-color: #3b82f6; }

.wk-difficulty {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 99px;
    flex-shrink: 0;
}
.diff-Easy       { background: #14532d; color: #4ade80; }
.diff-Moderate   { background: #1e3a5f; color: #60a5fa; }
.diff-Hard       { background: #451a03; color: #fbbf24; }
.diff-VeryHard   { background: #450a0a; color: #f87171; }

/* Exercise cards */
.exercise-card, .ex-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 14px;
    margin: 0 16px 10px;
}

.exercise-name, .ex-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.ex-gif, .ex-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: #111c2d;
    flex-shrink: 0;
}

.ex-gif-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #111c2d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a5070;
    font-size: 20px;
    flex-shrink: 0;
}

/* === FORMS & INPUTS === */
.search-wrap {
    position: relative;
    margin-bottom: 10px;
}

.search-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 14px;
    pointer-events: none;
}

.search-input {
    width: 100%;
    background: #111c2d;
    border: 1.5px solid #3a5070;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    padding: 12px 14px 12px 40px;
    transition: border-color 0.15s;
}
.search-input:focus { outline: none; border-color: #2563eb; }
.search-input::placeholder { color: #64748b; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    background: #111c2d;
    border: 1.5px solid #3a5070;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    padding: 11px 14px;
    transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: #2563eb; }
input::placeholder, textarea::placeholder { color: #64748b; }

select { appearance: none; cursor: pointer; }

.form-group, .form-field {
    margin-bottom: 14px;
}

.form-group label, .form-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

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

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

/* === FILTERS & CHIPS === */
.filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    background: #111c2d;
    border: 1.5px solid #1e2d45;
    white-space: nowrap;
    transition: all 0.15s;
}
.filter-chip.active, .filter-chip:hover {
    background: #1e3a5f;
    border-color: #2563eb;
    color: #60a5fa;
}

/* === BADGES === */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
}

.badge-green  { background: #14532d; color: #4ade80; }
.badge-red    { background: #450a0a; color: #f87171; }
.badge-amber  { background: #451a03; color: #fbbf24; }
.badge-blue   { background: #1e3a5f; color: #60a5fa; }
.badge-gray   { background: #1e2d45; color: #94a3b8; }
.badge-purple { background: #2e1a4a; color: #c084fc; }

.badge-upper    { background: #1e3a5f; color: #60a5fa; }
.badge-lower    { background: #14532d; color: #4ade80; }
.badge-push     { background: #451a03; color: #fbbf24; }
.badge-pull     { background: #2e1a4a; color: #c084fc; }
.badge-rest     { background: #1e2d45; color: #94a3b8; }
.badge-full     { background: #450a0a; color: #f87171; }
.badge-optional { background: #111c2d; color: #64748b; border: 1px solid #1e2d45; }

/* === PROGRESS BARS === */
.progress-track {
    height: 8px;
    background: #111c2d;
    border-radius: 99px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 99px;
    background: #2563eb;
    transition: width 0.3s ease;
}

.progress-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 18px;
    margin: 0 16px 16px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.progress-stats {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.prog-stat { flex: 1; }
.prog-stat-val { font-size: 17px; font-weight: 800; }
.prog-stat-lbl { font-size: 11px; color: #64748b; margin-top: 2px; }

/* === MESSAGES & ALERTS === */
.msg {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    margin: 0 16px 12px;
}
.msg.success { background: #14532d; color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
.msg.error   { background: #450a0a; color: #f87171; border: 1px solid rgba(248,113,113,0.2); }
.msg.info    { background: #1e3a5f; color: #60a5fa; border: 1px solid rgba(96,165,250,0.2); }

/* === EMPTY STATE === */
.empty {
    text-align: center;
    padding: 60px 32px;
    color: #64748b;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.empty h3 { font-size: 18px; font-weight: 800; color: #94a3b8; margin-bottom: 8px; }
.empty p  { font-size: 14px; line-height: 1.6; margin-bottom: 20px; }

.empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2563eb;
    color: #fff;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
}

/* === PAGINATION === */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 16px;
}

.page-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.15s;
}
.page-btn:hover, .page-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }

/* === MODALS & OVERLAYS === */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 20, 0.92);
    z-index: 400;
    align-items: flex-end;
    justify-content: center;
}
.modal-overlay.active { display: flex; }

.modal-sheet {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px 20px;
}

.modal-handle {
    width: 40px;
    height: 4px;
    background: #1e2d45;
    border-radius: 99px;
    margin: 0 auto 20px;
}

/* === CHART TABS === */
.chart-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.chart-tab {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    background: #111c2d;
    border: 1.5px solid #1e2d45;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}
.chart-tab.active { background: #1e3a5f; border-color: #2563eb; color: #60a5fa; }

/* === SNAPSHOT / HISTORY GRIDS === */
.snapshot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.snap-card {
    background: #111c2d;
    border: 1px solid #1e2d45;
    border-radius: 10px;
    padding: 12px;
}

.snap-val  { font-size: 20px; font-weight: 800; }
.snap-lbl  { font-size: 11px; color: #64748b; margin-top: 2px; }
.snap-change { font-size: 11px; font-weight: 700; margin-top: 4px; }

.history-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-item {
    background: #111c2d;
    border: 1px solid #1e2d45;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.history-date { font-size: 12px; color: #64748b; }
.history-chip {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 99px;
    background: #1e2d45;
    color: #94a3b8;
}

/* === MUSCLE GRID === */
.muscle-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 0 16px 12px;
}

.muscle-img-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 10px;
    background: #111c2d;
    border: 1.5px solid #1e2d45;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: all 0.15s;
}
.muscle-img-btn img { width: 36px; height: 36px; object-fit: contain; }
.muscle-img-btn.active { border-color: #2563eb; color: #60a5fa; }
.muscle-img-btn:hover  { border-color: #3a5070; color: #94a3b8; }

.muscle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #111c2d;
    border: 1.5px solid #1e2d45;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    transition: all 0.15s;
}
.muscle-btn i { font-size: 13px; color: #64748b; flex-shrink: 0; }
.muscle-btn.active { border-color: #2563eb; color: #60a5fa; background: #1e3a5f33; }
.muscle-btn.active i { color: #60a5fa; }
.muscle-btn:hover { border-color: #3a5070; color: #fff; }

/* === GOAL / NUTRITION CARDS === */
.goal-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 18px;
    margin: 0 16px 16px;
}

.goal-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.goal-label { font-size: 13px; color: #94a3b8; }
.goal-num   { font-size: 22px; font-weight: 900; }

/* === ADMIN LAYOUT === */
body.admin-body {
    padding-bottom: 0;
    display: flex;
    min-height: 100vh;
    font-size: 14px;
}

.admin-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #0d1b2e;
    border-right: 1px solid #1e2d45;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 10;
}

.sidebar-logo { padding: 20px 16px 16px; border-bottom: 1px solid #1e2d45; }
.sidebar-logo img { height: 28px; }
.sidebar-logo .admin-badge {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 4px;
}

.sidebar-nav { flex: 1; padding: 12px 8px; overflow-y: auto; }

.nav-section {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 14px 8px 6px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    transition: all 0.15s;
    margin-bottom: 2px;
}
.nav-link:hover            { background: #111c2d; color: #e2e8f0; }
.nav-link.active           { background: #1e3a5f; color: #60a5fa; }
.nav-link i                { width: 16px; text-align: center; font-size: 14px; }
.nav-link.logout:hover     { background: #450a0a; color: #f87171; }

.sidebar-footer { padding: 12px 8px; border-top: 1px solid #1e2d45; }

.admin-main {
    margin-left: 220px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.admin-topbar {
    background: #0d1b2e;
    border-bottom: 1px solid #1e2d45;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 5;
}

.topbar-title { font-size: 18px; font-weight: 800; }
.topbar-right { display: flex; align-items: center; gap: 12px; }

.admin-tag {
    background: #1e3a5f;
    color: #60a5fa;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
}

.admin-content { padding: 28px; flex: 1; }

/* Admin stat row */
.stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.stat-card .label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
.stat-card .value { font-size: 28px; font-weight: 900; line-height: 1; }
.stat-card .sub   { font-size: 12px; color: #64748b; margin-top: 4px; }

.blue   { color: #60a5fa; }
.green  { color: #22c55e; }
.amber  { color: #f59e0b; }
.red    { color: #ef4444; }
.purple { color: #a855f7; }

/* Admin tables */
.table-wrap {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    overflow: hidden;
}

.table-header {
    padding: 16px 20px;
    border-bottom: 1px solid #1e2d45;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.table-header h3 { font-size: 15px; font-weight: 800; }

table { width: 100%; border-collapse: collapse; }
th {
    background: #111c2d;
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .05em;
}
td {
    padding: 12px 16px;
    border-top: 1px solid #1e2d45;
    font-size: 13px;
    vertical-align: middle;
}
tr:hover td { background: rgba(255,255,255,0.02); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Admin search/filter */
select.filter {
    background: #111c2d;
    border: 1.5px solid #1e2d45;
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 13px;
    padding: 8px 12px;
}
select.filter:focus { outline: none; border-color: #2563eb; }

/* === DATE ROW === */
.date-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    margin-bottom: 4px;
}

/* === UTILITIES === */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.text-muted   { color: #64748b; }
.text-success { color: #22c55e; }
.text-danger  { color: #ef4444; }
.text-warning { color: #f59e0b; }
.text-blue    { color: #3b82f6; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }

/* === DASHBOARD === */

/* Top bar logo variant */
.top-bar-logo { display: flex; align-items: center; }
.top-bar-logo img { height: 28px; }

.top-bar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.top-bar-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.15s;
}
.top-bar-icon:hover { color: #fff; border-color: #3a5070; }

/* Greeting */
.greeting { margin-bottom: 16px; padding: 0 16px; }
.greeting-text { font-size: 20px; font-weight: 800; color: #fff; }
.greeting-sub   { font-size: 13px; color: #64748b; margin-top: 2px; }

/* Banners */
.banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 14px;
    margin: 0 16px 12px;
}
.banner.beta   { border-color: #3b82f644; }
.banner.deload { border-color: #f59e0b44; }
.banner.install{ border-color: #2563eb44; }

.banner-emoji { font-size: 24px; flex-shrink: 0; }
.banner-text  { flex: 1; }
.banner-title { font-size: 14px; font-weight: 800; color: #fff; }
.banner-sub   { font-size: 12px; color: #64748b; margin-top: 2px; }
.banner-btn {
    flex-shrink: 0;
    background: #1e3a5f;
    color: #60a5fa;
    border: none;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.banner-btn:hover { background: #2563eb; color: #fff; }

/* Score card */
.score-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 16px;
    margin: 0 16px 14px;
}
.score-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.score-label  { font-size: 13px; font-weight: 700; color: #94a3b8; }
.score-number { font-size: 32px; font-weight: 900; color: #fff; line-height: 1; }
.score-max    { font-size: 11px; color: #64748b; margin-top: 2px; }
.score-tier {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 99px;
}
.score-bar-track {
    height: 6px;
    background: #111c2d;
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 14px;
}
.score-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    transition: width 0.4s ease;
}
.score-components {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.score-comp { text-align: center; }
.score-comp-val { font-size: 16px; font-weight: 800; }
.score-comp-lbl { font-size: 10px; color: #64748b; margin-top: 2px; font-weight: 600; }

/* Quick links */
.quick-links {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 16px 14px;
    scrollbar-width: none;
}
.quick-links::-webkit-scrollbar { display: none; }

.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
    transition: all 0.15s;
    flex-shrink: 0;
}
.quick-link i   { font-size: 18px; color: #3b82f6; }
.quick-link:hover { border-color: #3a5070; color: #fff; }

/* Section header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    margin-bottom: 10px;
    margin-top: 6px;
}
.section-link {
    font-size: 12px;
    font-weight: 700;
    color: #3b82f6;
}

/* Today card */
.today-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 18px;
    margin: 0 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.today-card.workout-day { border-color: #2563eb44; }
.today-card.completed   { border-color: #22c55e44; }
.today-card.rest        { border-color: #1e2d45; }

.today-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.today-card-icon  { font-size: 18px; color: #3b82f6; }
.today-card-label { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }

.today-workout-name { font-size: 20px; font-weight: 900; color: #fff; }
.today-workout-sub  { font-size: 13px; color: #64748b; }
.today-split-tag    { font-size: 12px; color: #60a5fa; font-weight: 700; }

.btn-start-workout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 16px;
    font-weight: 800;
    transition: background 0.15s;
}
.btn-start-workout:hover    { background: #1d4ed8; }
.btn-start-workout.completed { background: #14532d; color: #4ade80; }

/* Stats grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 16px 14px;
}

.stat-card.blue   { border-color: #3b82f644; }
.stat-card.green  { border-color: #22c55e44; }
.stat-card.purple { border-color: #a855f744; }
.stat-card.amber  { border-color: #f59e0b44; }
.stat-card.sky    { border-color: #60a5fa44; }
.stat-card.red    { border-color: #ef444444; }

.stat-icon   { font-size: 20px; margin-bottom: 8px; }
.stat-label  { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.stat-number { font-size: 26px; font-weight: 900; color: #fff; line-height: 1; }
.stat-sub    { font-size: 11px; color: #64748b; margin-top: 4px; }

.stat-card.blue   .stat-icon { color: #3b82f6; }
.stat-card.green  .stat-icon { color: #22c55e; }
.stat-card.purple .stat-icon { color: #a855f7; }
.stat-card.amber  .stat-icon { color: #f59e0b; }
.stat-card.sky    .stat-icon { color: #60a5fa; }
.stat-card.red    .stat-icon { color: #ef4444; }

/* Week card */
.week-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 16px;
    margin: 0 16px 14px;
}
.week-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.week-title { font-size: 14px; font-weight: 800; color: #fff; }
.week-link  { font-size: 12px; font-weight: 700; color: #3b82f6; }

.week-progress-bar {
    height: 4px;
    background: #111c2d;
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 14px;
}
.week-progress-fill {
    height: 100%;
    background: #2563eb;
    border-radius: 99px;
    transition: width 0.4s ease;
}

.week-days {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}
.week-day { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.week-day-label { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; }
.week-day-dot {
    width: 32px;
    height: 32px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: #111c2d;
    color: #64748b;
    border: 1.5px solid transparent;
}
.week-day-dot.done     { background: #14532d; color: #4ade80; }
.week-day-dot.today    { background: #1e3a5f; color: #60a5fa; border-color: #2563eb; }
.week-day-dot.missed   { background: #450a0a; color: #f87171; }
.week-day-dot.rest     { background: #111c2d; color: #3a5070; }
.week-day-dot.upcoming { background: #111c2d; color: #64748b; }

/* Next workout card */
.next-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 14px 16px;
    margin: 0 16px 14px;
    transition: border-color 0.15s;
}
.next-card:hover { border-color: #3a5070; }
.next-icon  { font-size: 20px; color: #3b82f6; flex-shrink: 0; }
.next-info  { flex: 1; }
.next-label { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
.next-name  { font-size: 15px; font-weight: 800; color: #fff; margin-top: 2px; }
.next-date  { font-size: 12px; color: #64748b; margin-top: 2px; }
.next-arrow { color: #64748b; font-size: 14px; flex-shrink: 0; }

/* PRs */
.pr-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #1e2d45;
}
.pr-item:last-child { border-bottom: none; padding-bottom: 0; }

.pr-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    background: #451a03;
    color: #f59e0b;
    flex-shrink: 0;
}
.pr-name { flex: 1; font-size: 13px; font-weight: 700; color: #fff; }
.pr-val  { font-size: 13px; font-weight: 700; color: #f59e0b; }

/* Recent workouts */
.recent-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 16px 8px;
}
.recent-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #1e3a5f;
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.recent-info { flex: 1; }
.recent-name { font-size: 14px; font-weight: 700; color: #fff; }
.recent-meta { font-size: 12px; color: #64748b; margin-top: 2px; }

/* === TODAY WORKOUT PAGE === */

/* Page header */
.page-header-left { flex: 1; }

.tagline {
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
}

/* Sticky progress bar */
.sticky-progress {
    position: sticky;
    top: 56px;
    background: #080f1e;
    border-bottom: 1px solid #1e2d45;
    padding: 8px 16px;
    z-index: 90;
}

.sticky-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.sticky-progress-label { font-size: 12px; color: #64748b; font-weight: 600; }
.sticky-progress-count { color: #fff; font-weight: 800; }
.sticky-progress-sets  { font-size: 12px; color: #94a3b8; font-weight: 600; }

.sticky-progress-track {
    height: 4px;
    background: #111c2d;
    border-radius: 99px;
    overflow: hidden;
}

.sticky-progress-fill {
    height: 100%;
    background: #2563eb;
    border-radius: 99px;
    transition: width 0.4s ease;
}

/* Workout meta pills */
.workout-meta {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    overflow-x: auto;
    scrollbar-width: none;
}
.workout-meta::-webkit-scrollbar { display: none; }

.meta-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 99px;
    padding: 6px 12px;
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
}
.meta-pill i  { font-size: 12px; }
.pill-val { font-weight: 800; color: #fff; }

/* Exercise cards */
body.today-workout-page .exercise-card, .card-body-wrap {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    margin: 0 16px 10px;
    overflow: hidden;
    padding: 0;
}
body.today-workout-page .exercise-card.completed { border-color: #22c55e33; }

.exercise-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    cursor: pointer;
}

body.today-workout-page .exercise-name {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}

.exercise-info-link {
    font-size: 11px;
    color: #3b82f6;
    font-weight: 600;
    margin-top: 2px;
    display: block;
}

.card-body {
    background: transparent;
    padding: 0 14px 14px;
}
body.today-workout-page .exercise-card.collapsed .card-body { display: none; }
body.today-workout-page .exercise-card.collapsed .btn-expand i { transform: rotate(-90deg); }

/* Sets progress pill */
.sets-progress-pill {
    font-size: 12px;
    font-weight: 700;
    background: #111c2d;
    border: 1px solid #1e2d45;
    border-radius: 99px;
    padding: 4px 10px;
    color: #64748b;
    white-space: nowrap;
}
.sets-progress-pill .done-count { color: #22c55e; }

/* Expand button */
.btn-expand {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.btn-expand i { transition: transform 0.2s; }

/* Progression box */
.progression-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: #e2e8f0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    font-size: 12px;
}

.prog-cell {
    background: #f8fafc;
    padding: 10px;
}

.prog-label { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.prog-value { font-size: 14px; font-weight: 800; color: #0f172a; }
.prog-goal-text { font-size: 13px; font-weight: 800; color: #2563eb; }
.prog-goal-sub  { font-size: 11px; color: #64748b; margin-top: 3px; }
.prog-divider   { border: none; border-top: 1px solid #e2e8f0; margin: 6px 0; }
.prog-meta-icon { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #64748b; margin-bottom: 4px; }
.prog-meta-val  { font-size: 12px; color: #475569; }

/* Live volume bar */
.live-volume-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111c2d;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #64748b;
}
.live-volume-value { font-size: 13px; font-weight: 800; color: #3b82f6; }

/* Exercise actions */
.exercise-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-swap        { background: #1e3a5f; color: #60a5fa; }
.btn-swap:hover  { background: #2563eb; color: #fff; }
.action-btn.btn-add         { background: #14532d; color: #4ade80; }
.action-btn.btn-add:hover   { background: #22c55e; color: #fff; }
.btn-remove-set  { background: #450a0a; color: #f87171; }
.btn-remove-set:hover { background: #ef4444; color: #fff; }
.btn-skip        { background: #111c2d; color: #64748b; border: 1px solid #1e2d45; }
.btn-skip:hover  { color: #94a3b8; }

/* Note area */
.exercise-note-wrap {
    background: #111c2d;
    border: 1px solid #1e2d45;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.note-save-btn {
    background: transparent;
    border: 1px solid #1e2d45;
    border-radius: 8px;
    color: #94a3b8;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.note-save-btn:hover { border-color: #3a5070; color: #fff; }
.note-saved-msg { font-size: 11px; color: #22c55e; font-weight: 700; display: none; }

/* Set blocks */
.sets-container { display: flex; flex-direction: column; gap: 8px; }

.set-block {
    background: #111c2d;
    border: 1px solid #1e2d45;
    border-radius: 12px;
    padding: 12px;
    transition: border-color 0.15s;
}
.set-block.completed { border-color: #22c55e44; background: #0d1b2e; }
.set-block.warmup    { border-color: #f59e0b22; }

.set-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.set-title { font-size: 12px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }

.set-meta {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 10px;
}
.target { font-weight: 700; color: #60a5fa; }
.today-val { font-weight: 800; color: #fff; }

.set-completed-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 6px 6px 12px;
    border-radius: 99px;
    background: #14532d;
    color: #4ade80;
}

/* Warmup */
.warmup-header {
    font-size: 11px;
    font-weight: 700;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.warmup-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
    background: #451a03;
    color: #fbbf24;
}

/* Set inputs */
.set-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.input-group { display: flex; flex-direction: column; gap: 4px; }
.input-group label { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }

.stepper-wrap {
    display: flex;
    align-items: center;
    background: #0d1b2e;
    border: 1.5px solid #3a5070;
    border-radius: 10px;
    overflow: hidden;
}

.stepper-btn {
    width: 40px;
    height: 44px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.1s;
}
.stepper-btn:hover:not(:disabled) { background: #1e2d45; color: #fff; }
.stepper-btn:disabled { opacity: 0.4; cursor: default; }

.stepper-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    padding: 0;
    width: 100%;
    min-width: 0;
    border-radius: 0;
}
.stepper-wrap input:focus { outline: none; border: none; }
.stepper-wrap input.active-input { color: #60a5fa; }

/* Complete row */
.complete-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.btn-complete-set {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-complete-set:hover { background: #1d4ed8; }

.btn-edit-set {
    padding: 4px 12px;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.25);
    border: none;
    color: #d1fae5;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.btn-remove-set-inline {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #450a0a;
    border: 1px solid rgba(248,113,113,0.2);
    color: #f87171;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}

/* Bottom actions */
.bottom-actions {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-finish-workout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #22c55e;
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 16px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s;
}
.btn-finish-workout:hover { background: #16a34a; }

.btn-add-exercise {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: #64748b;
    border: 1.5px solid #1e2d45;
    border-radius: 14px;
    padding: 13px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: all 0.15s;
}
.btn-add-exercise:hover { border-color: #3a5070; color: #94a3b8; }

.workout-done {
    text-align: center;
    padding: 20px;
    font-size: 14px;
    color: #64748b;
}

/* Difficulty section */
.difficulty-section {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 16px;
    margin: 0 16px 12px;
}
.difficulty-label { font-size: 13px; font-weight: 700; color: #94a3b8; margin-bottom: 10px; }
.difficulty-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.diff-btn {
    flex: 1;
    min-width: 80px;
    padding: 9px 6px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    border: 1.5px solid #1e2d45;
    background: #111c2d;
    color: #64748b;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.diff-btn:hover, .diff-btn.active, .diff-btn.selected { border-color: #2563eb; background: #1e3a5f; color: #60a5fa; }

@keyframes shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.difficulty-row.shake { animation: shake 0.5s; }

/* Rest timer */
.rest-timer {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 20, 0.96);
    z-index: 550;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    overflow-y: auto;
    padding: 24px 0;
}
.rest-timer.active { display: flex; }

.rest-timer-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.rest-timer-label { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.rest-timer-count { font-size: 72px; font-weight: 900; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }

.rest-timer-ring { position: relative; width: 220px; height: 220px; margin: 0 auto 16px; }
.rest-timer-ring-bg   { stroke: #1e2d45; fill: none; }
.rest-timer-ring-fill { stroke: #2563eb; fill: none; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }

.rest-timer-skip {
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #94a3b8;
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.rest-timer-next { text-align: center; }
.rest-timer-next-label { font-size: 11px; color: #64748b; margin-bottom: 4px; }
.rest-timer-next-name  { font-size: 15px; font-weight: 800; color: #94a3b8; }

/* Summary modal */
.summary-modal {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 600px;
    padding: 32px 20px 24px;
    text-align: center;
}

.summary-trophy { font-size: 52px; margin-bottom: 10px; }
.summary-title  { font-size: 24px; font-weight: 900; color: #fff; margin-bottom: 6px; }
.summary-sub    { font-size: 14px; color: #64748b; margin-bottom: 20px; }

.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.summary-stat-box {
    background: #111c2d;
    border: 1px solid #1e2d45;
    border-radius: 12px;
    padding: 14px;
}
.summary-stat-val   { font-size: 24px; font-weight: 900; color: #fff; }
.summary-stat-label { font-size: 11px; color: #64748b; font-weight: 700; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }

.btn-summary-close {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    margin-bottom: 10px;
    background: #2563eb;
    color: #fff;
    transition: background 0.15s;
}
.btn-summary-close:hover { background: #1d4ed8; }

/* Focus mode overlay */
.focus-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: #080f1e;
    z-index: 500;
    flex-direction: column;
    overflow-y: auto;
}
.focus-overlay.active { display: flex; }

.focus-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #1e2d45;
    position: sticky;
    top: 0;
    background: #080f1e;
    z-index: 5;
}

.focus-header-left { display: flex; flex-direction: column; gap: 2px; }
.focus-header-actions { display: flex; gap: 8px; }

.focus-pill, .focus-pill-exit, .focus-pill-swap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
}
.focus-pill      { background: #1e2d45; color: #94a3b8; }
.focus-pill-exit { background: #111c2d; border: 1px solid #1e2d45; color: #64748b; }
.focus-pill-swap { background: #1e3a5f; color: #60a5fa; }

.focus-progress-bar { height: 3px; background: #1e2d45; }
.focus-progress-fill { height: 100%; background: #2563eb; transition: width 0.4s; }

.focus-gif-wrap { position: relative; width: 100%; height: 220px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #0d1b2e; }
.focus-gif-wrap img { width: 100%; height: 100%; object-fit: cover; }
.focus-gif-placeholder { height: 160px; display: flex; align-items: center; justify-content: center; color: #1e2d45; font-size: 48px; }
.focus-gif-tap-hint {
    position: absolute;
    bottom: 8px;
    right: 10px;
    background: rgba(4, 8, 20, 0.7);
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.focus-exercise-name { font-size: 22px; font-weight: 900; color: #fff; padding: 16px 16px 4px; }
.focus-exercise-meta { display: flex; gap: 8px; padding: 0 16px 16px; flex-wrap: wrap; }

.focus-set-label { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 16px 8px; }

.focus-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 4px; }
.focus-input-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }

.focus-stat-row { display: flex; gap: 8px; padding: 12px 16px; }
.focus-stat-card {
    flex: 1;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}
.focus-stat-value { font-size: 20px; font-weight: 800; color: #fff; }
.focus-stat-label { font-size: 10px; color: #64748b; font-weight: 700; margin-top: 2px; }

.focus-stepper {
    display: flex;
    align-items: center;
    background: #0d1b2e;
    border: 1.5px solid #3a5070;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}
.focus-stepper-btn {
    width: 40px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: background 0.1s;
}
.focus-stepper-btn:hover { background: #1e2d45; color: #fff; }
.focus-stepper-btn:active { background: #1e2d45; }

.focus-stepper input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    padding: 0;
}
.focus-stepper input:focus { outline: none; }
.focus-stepper.active-input { border-color: #2563eb; }

.focus-stepper input::-webkit-outer-spin-button,
.focus-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.focus-stepper input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}




.focus-body { flex: 1; overflow-y: auto; }

.focus-complete-btn {
    margin: 0 16px 12px;
    width: calc(100% - 32px);
    padding: 18px;
    border-radius: 14px;
    background: #2563eb;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    transition: background 0.15s;
}
.focus-complete-btn:hover { background: #1d4ed8; }

.focus-ex-complete {
    display: none;
    padding: 40px 20px;
    text-align: center;
}
.focus-ex-complete.show { display: block; }
.focus-ex-complete-icon { font-size: 52px; margin-bottom: 12px; }
.focus-ex-complete-text { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.focus-ex-complete-next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    margin-top: 12px;
}

.focus-footer {
    padding: 12px 16px;
    border-top: 1px solid #1e2d45;
    background: #080f1e;
    position: sticky;
    bottom: 0;
}
.focus-footer-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

/* Plate calculator modal */
.plate-modal {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 20, 0.92);
    z-index: 600;
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.plate-modal.active { display: flex; }

.plate-sheet {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 600px;
    padding: 20px 20px 32px;
}

.plate-total   { font-size: 28px; font-weight: 900; color: #fff; margin-bottom: 4px; }
.plate-sub     { font-size: 13px; color: #64748b; margin-bottom: 16px; }
.plate-close-btn {
    float: right;
    width: 32px;
    height: 32px;
    border-radius: 99px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
}

.plate-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 60px;
    margin-bottom: 16px;
}
.plate-handle {
    width: 60px;
    height: 10px;
    background: #3a5070;
    border-radius: 3px;
}
.plate-collar {
    width: 12px;
    height: 30px;
    background: #64748b;
    border-radius: 2px;
}
.plate-disc {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 3px;
    margin: 0 1px;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    writing-mode: vertical-rl;
}

.plate-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    align-items: flex-end;
}
.plate-input-row input {
    flex: 1;
    background: #111c2d;
    border: 1.5px solid #1e2d45;
    border-radius: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 12px;
}
.plate-input-row input:focus { outline: none; border-color: #2563eb; }

.plate-list { display: flex; flex-direction: column; gap: 6px; }
.plate-list-title { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.plate-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #111c2d;
    border-radius: 8px;
    font-size: 13px;
}
.plate-list-count { font-weight: 700; color: #60a5fa; }

/* Workout done / locked state */
.icon-muscle, .icon-equipment {
    font-size: 12px;
    color: #64748b;
}

.pr-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    background: #451a03;
    color: #f59e0b;
    flex-shrink: 0;
}

/* === PROFILE PAGE === */

.shell {
    display: flex;
    min-height: 100vh;
    max-width: 900px;
    margin: 0 auto;
}

.sidebar {
    width: 200px;
    flex-shrink: 0;
    padding: 20px 12px;
    border-right: 1px solid #1e2d45;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.brand { margin-bottom: 20px; padding: 0 4px; }

.side-nav { display: flex; flex-direction: column; gap: 2px; }

.side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    transition: all 0.15s;
}
.side-link:hover  { background: #111c2d; color: #e2e8f0; }
.side-link.active { background: #1e3a5f; color: #60a5fa; }
.side-link i      { width: 16px; text-align: center; }

.main {
    flex: 1;
    padding: 20px 20px 40px;
    min-width: 0;
}

.main .page-header {
    position: static;
    padding: 0 0 16px;
    border-bottom: 1px solid #1e2d45;
    margin-bottom: 16px;
}

.main .page-header .sub {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

/* Flash messages */
.flash {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
}
.flash.success { background: #14532d; color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
.flash.error   { background: #450a0a; color: #f87171; border: 1px solid rgba(248,113,113,0.2); }

/* Stat strip */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

/* Panels */
.panel {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 16px;
}

.panel-title {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel-title i { color: #3b82f6; }

.form-section-label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 14px 0 8px;
}

.section-divider {
    border: none;
    border-top: 1px solid #1e2d45;
    margin: 16px 0;
}

/* Current weight display */
.current-weight-display {
    font-size: 22px;
    font-weight: 900;
    color: #22c55e;
    margin-top: 4px;
}

/* Weight progress bar */
.weight-progress-bar {
    height: 8px;
    background: #111c2d;
    border-radius: 99px;
    overflow: hidden;
    margin: 12px 0 6px;
}
.weight-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #3b82f6);
    border-radius: 99px;
    transition: width 0.4s ease;
}
.weight-progress-label {
    font-size: 12px;
    color: #64748b;
    display: flex;
    justify-content: space-between;
}

/* Duration cards */
.duration-cards {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.duration-card {
    flex: 1;
    min-width: 80px;
    background: #111c2d;
    border: 1.5px solid #1e2d45;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.duration-card.active, .duration-card:hover {
    border-color: #2563eb;
    background: #1e3a5f;
}
.duration-card input[type="radio"] { display: none; }
.duration-card-label { font-size: 14px; font-weight: 800; color: #fff; }
.duration-card-sub   { font-size: 10px; color: #64748b; margin-top: 2px; }

/* Toggle grid (days/priorities/equipment) */
.toggle-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    background: #111c2d;
    border: 1.5px solid #1e2d45;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.toggle-label:hover { border-color: #3a5070; color: #94a3b8; }
.toggle-label input[type="checkbox"] { display: none; }
.toggle-check {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #1e2d45;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #22c55e;
    font-weight: 900;
}
.toggle-label:has(input:checked) {
    background: #1e3a5f;
    border-color: #2563eb;
    color: #60a5fa;
}
.toggle-label:has(input:checked) .toggle-check {
    background: #2563eb;
    color: #fff;
}

@media (max-width: 640px) {
    .shell    { flex-direction: column; }
    .sidebar  { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid #1e2d45; padding: 12px 16px; }
    .side-nav { flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none; }
    .side-nav::-webkit-scrollbar { display: none; }
    .side-link { white-space: nowrap; padding: 8px 12px; font-size: 13px; }
    .main  { padding: 16px 16px 40px; }
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
}

/* === INDEX / LANDING PAGE === */

body.landing-page {
    padding-bottom: 0;
    font-size: 16px;
}

/* Nav */
nav {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(8, 15, 30, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #1e2d45;
}
.nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.nav-logo img { height: 28px; }
.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 16px;
    flex: 1;
}
body.landing-page .nav-link {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    border-radius: 8px;
    transition: color 0.15s;
}
.nav-link:hover { color: #fff; }
.nav-btn {
    padding: 9px 18px;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    transition: background 0.15s;
}
.nav-btn:hover { background: #1d4ed8; }
.nav-btn-ghost {
    padding: 9px 18px;
    border-radius: 10px;
    background: transparent;
    border: 1.5px solid #1e2d45;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.15s;
}
.nav-btn-ghost:hover { border-color: #3a5070; color: #fff; }

/* Hero */
.hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 40%, #1e3a5f 0%, #080f1e 70%);
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, #080f1e 100%);
}
.hero-inner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 24px;
    display: flex;
    align-items: center;
    gap: 48px;
    width: 100%;
}
.hero-content { flex: 1; }
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1e3a5f;
    border: 1px solid #2563eb44;
    color: #60a5fa;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 99px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hero-content h1 {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 16px;
}
.hero-content p {
    font-size: 18px;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 28px;
    max-width: 500px;
}
.hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.hero-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hero-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #64748b;
}
.hero-feature i { color: #22c55e; }
.hero-phone {
    flex-shrink: 0;
    width: 280px;
}
.hero-phone img { width: 100%; border-radius: 24px; box-shadow: 0 40px 80px rgba(0,0,0,0.6); }

/* Goals section */
.goals-section {
    text-align: center;
    padding: 48px 24px;
    max-width: 800px;
    margin: 0 auto;
}
.goals-label {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}
.goals-image img { width: 100%; border-radius: 16px; }

/* Stats strip */
.strip {
    background: #0d1b2e;
    border-top: 1px solid #1e2d45;
    border-bottom: 1px solid #1e2d45;
    padding: 28px 24px;
}
.strip-inner {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    text-align: center;
}
.strip-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.strip-icon { font-size: 24px; color: #3b82f6; }
.strip-item strong { font-size: 28px; font-weight: 900; color: #fff; }
.strip-item span   { font-size: 13px; color: #64748b; }

/* Section headers */
body.landing-page .section-header {
    text-align: center;
    margin-bottom: 40px;
}
.section-tag {
    display: inline-block;
    background: #1e3a5f;
    color: #60a5fa;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}
body.landing-page .section-title {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 900;
    color: #fff;
    margin-bottom: 10px;
}
.section-sub {
    font-size: 16px;
    color: #64748b;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Features */
.features-section {
    padding: 80px 24px;
    max-width: 1100px;
    margin: 0 auto;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.feature-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 24px;
    transition: border-color 0.15s;
}
.feature-card:hover { border-color: #3a5070; }
.feature-card h3 { font-size: 16px; font-weight: 800; color: #fff; margin: 12px 0 8px; }
.feature-card p  { font-size: 14px; color: #64748b; line-height: 1.6; }

.f-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.f-icon.blue   { background: #1e3a5f; color: #60a5fa; }
.f-icon.green  { background: #14532d; color: #4ade80; }
.f-icon.amber  { background: #451a03; color: #fbbf24; }
.f-icon.purple { background: #2e1a4a; color: #c084fc; }
.f-icon.red    { background: #450a0a; color: #f87171; }
.f-icon.teal   { background: #0f2d2d; color: #2dd4bf; }

/* How it works */
.how-section {
    padding: 80px 24px;
    background: #0d1b2e;
    border-top: 1px solid #1e2d45;
    border-bottom: 1px solid #1e2d45;
}
.how-section .section-header { max-width: 1100px; margin: 0 auto 40px; }
.steps-grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.step-card {
    text-align: center;
    padding: 24px 16px;
}
.step-num {
    width: 48px;
    height: 48px;
    border-radius: 99px;
    background: #1e3a5f;
    border: 2px solid #2563eb;
    color: #60a5fa;
    font-size: 20px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.step-card h3 { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.step-card p  { font-size: 13px; color: #64748b; line-height: 1.6; }

/* FAQ */
.faq-section {
    padding: 80px 24px;
    max-width: 800px;
    margin: 0 auto;
}
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    overflow: hidden;
}
.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}
.faq-icon { color: #64748b; transition: transform 0.2s; font-size: 14px; }
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-a {
    padding: 0 20px 18px;
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.7;
    display: none;
}
.faq-item.open .faq-a { display: block; }

/* CTA section */
.cta-section {
    padding: 80px 24px;
    text-align: center;
    background: radial-gradient(ellipse at center, #1e3a5f 0%, #080f1e 70%);
}
.cta-inner { max-width: 560px; margin: 0 auto; }
.cta-inner h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 900; color: #fff; margin-bottom: 12px; }
.cta-inner p  { font-size: 16px; color: #64748b; margin-bottom: 28px; }
.cta-note { font-size: 12px; color: #64748b; margin-top: 12px; }

/* Footer */
footer {
    background: #0d1b2e;
    border-top: 1px solid #1e2d45;
    padding: 24px;
}
.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-logo img { height: 24px; }
.footer-right { font-size: 13px; color: #64748b; display: flex; gap: 16px; flex-wrap: wrap; }
.footer-right a { color: #64748b; transition: color 0.15s; }
.footer-right a:hover { color: #94a3b8; }

@media (max-width: 768px) {
    .nav-links { display: none; }
    .hero-inner { flex-direction: column; padding: 40px 20px; }
    .hero-phone { width: 100%; max-width: 300px; }
    .features-grid { grid-template-columns: 1fr; }
    .steps-grid    { grid-template-columns: repeat(2, 1fr); }
    .strip-inner   { grid-template-columns: repeat(2, 1fr); }
}

/* === AUTH PAGES (login, register, forgot password) === */

body.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 20px;
    padding-bottom: 24px; /* override mobile nav padding */
}

body.auth-page .card {
    width: 100%;
    max-width: 400px;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 20px;
    padding: 32px 28px;
}

.logo {
    text-align: center;
    margin-bottom: 20px;
}
.logo img { height: 36px; margin: 0 auto; }

.card h1 {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 4px;
}

.card .sub {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 22px;
}

.card .error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #450a0a;
    border: 1px solid rgba(248,113,113,0.3);
    color: #f87171;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
}

.card .form-group {
    margin-bottom: 14px;
}

.card .form-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.input-wrap {
    position: relative;
}

.input-wrap .icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 14px;
    pointer-events: none;
}

.input-wrap input {
    padding-left: 40px;
}

.pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
}
.pw-toggle:hover { color: #94a3b8; }

.forgot-link {
    display: block;
    text-align: right;
    font-size: 12px;
    color: #3b82f6;
    font-weight: 600;
    margin-top: 6px;
}

.btn-signin {
    width: 100%;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    transition: background 0.15s;
}
.btn-signin:hover { background: #1d4ed8; }

.divider {
    text-align: center;
    font-size: 12px;
    color: #64748b;
    margin: 18px 0 12px;
    position: relative;
}
.divider::before, .divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28%;
    height: 1px;
    background: #1e2d45;
}
.divider::before { left: 0; }
.divider::after  { right: 0; }

.btn-create {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px;
    border-radius: 12px;
    background: transparent;
    border: 1.5px solid #1e2d45;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.15s;
}
.btn-create:hover { border-color: #3a5070; color: #fff; }

.back-home {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: #64748b;
}
.back-home a { color: #64748b; display: inline-flex; align-items: center; gap: 6px; }
.back-home a:hover { color: #94a3b8; }

/* === PR HALL OF FAME === */

.top-bar-title { flex: 1; }
.top-bar-title .sub { font-size: 12px; color: #64748b; margin-top: 2px; }

body.pr-hof-page .hero {
    position: static;
    min-height: 0;
    display: block;
    align-items: unset;
    overflow: visible;
    text-align: center;
    padding: 28px 16px 20px;
    background: linear-gradient(180deg, #0d1b2e 0%, #080f1e 100%);
    border-bottom: 1px solid #1e2d45;
    margin-bottom: 4px;
}
.hero-trophy  { font-size: 48px; margin-bottom: 8px; }
.hero-number  { font-size: 56px; font-weight: 900; color: #f59e0b; line-height: 1; }
.hero-label   { font-size: 13px; color: #64748b; font-weight: 600; margin-bottom: 16px; }
.hero-stats   { display: flex; justify-content: center; gap: 24px; }
.hero-stat    { text-align: center; }
.hero-stat-num   { font-size: 22px; font-weight: 900; color: #fff; }
.hero-stat-label { font-size: 11px; color: #64748b; font-weight: 600; margin-top: 2px; }

.tabs {
    display: flex;
    border-bottom: 1px solid #1e2d45;
    padding: 0 16px;
    gap: 4px;
    background: #080f1e;
}
.tab {
    flex: 1;
    padding: 12px 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}
.tab.active { color: #60a5fa; border-bottom-color: #2563eb; }

.tab-panel { display: none; padding: 16px; }
.tab-panel.active { display: block; }

/* Recent PR cards */
.recent-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

body.pr-hof-page .recent-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 14px;
    gap: 12px;
    margin: 0;
}
.recent-card-left { flex: 1; min-width: 0; }
body.pr-hof-page .recent-name { font-size: 14px; font-weight: 800; color: #fff; }
body.pr-hof-page .recent-meta { font-size: 11px; color: #64748b; margin-top: 2px; }
.recent-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.recent-val  { text-align: right; font-size: 17px; font-weight: 900; color: #fff; flex-shrink: 0; }
.unit { font-size: 11px; color: #64748b; font-weight: 600; }

.pr-badge.weight { background: #451a03; color: #fbbf24; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.pr-badge.rep    { background: #14532d; color: #4ade80; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.pr-badge.volume { background: #1e3a5f; color: #60a5fa; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }

/* PR cards (weight/reps tabs) */
.pr-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.pr-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 14px;
    transition: border-color 0.15s;
}
.pr-card:hover { border-color: #3a5070; }

.pr-card-header { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }

.pr-gif {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.pr-gif-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #111c2d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a5070;
    font-size: 18px;
    flex-shrink: 0;
}

.pr-info { flex: 1; min-width: 0; }
body.pr-hof-page .pr-name { flex: initial; font-size: 14px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-date { font-size: 11px; color: #64748b; margin-top: 2px; }

.pr-weight { text-align: right; flex-shrink: 0; }
.pr-weight-num  { font-size: 22px; font-weight: 900; color: #f59e0b; line-height: 1; }
.pr-weight-unit { font-size: 11px; color: #64748b; font-weight: 600; }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: #64748b;
}
.empty-state-icon { font-size: 44px; margin-bottom: 14px; opacity: 0.4; }
.empty-state h3   { font-size: 17px; font-weight: 800; color: #94a3b8; margin-bottom: 8px; }
.empty-state p    { font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.empty-state-cta  {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2563eb;
    color: #fff;
    border-radius: 12px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 700;
}

/* === TOUR OVERLAY (dashboard only) === */
.tour-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 20, 0.96);
    z-index: 500;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
}
.tour-overlay.active { display: flex; }
.tour-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 24px;
    width: 100%;
    max-width: 380px;
    overflow: hidden;
}
.tour-visual {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
}
.tour-icon-wrap {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}
.tour-body { padding: 20px 24px 24px; }
.tour-step-label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}
.tour-title  { font-size: 22px; font-weight: 800; color: #e2e8f0; margin-bottom: 10px; line-height: 1.2; }
.tour-text   { font-size: 14px; color: #e2e8f0; line-height: 1.7; margin-bottom: 20px; }
.tour-dots   { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
.tour-dot    { width: 6px; height: 6px; border-radius: 99px; background: #1e2d45; transition: all 0.2s; }
.tour-dot.active { background: #2563eb; width: 18px; }
.tour-actions { display: flex; gap: 10px; }
.tour-btn-skip {
    flex: 1;
    background: transparent;
    border: 1.5px solid #1e2d45;
    color: #94a3b8;
    border-radius: 12px;
    padding: 13px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.tour-btn-next {
    flex: 2;
    background: #2563eb;
    border: none;
    color: #fff;
    border-radius: 12px;
    padding: 13px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* === SINGLE EXERCISE PAGE === */

body.single-exercise-page .exercise-name { font-size: 17px; font-weight: 800; color: #fff; }
.exercise-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ex-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 99px;
    background: #111c2d;
    color: #94a3b8;
}
.ex-tag.primary { background: #1e3a5f; color: #60a5fa; }
.ex-tag.difficulty-beginner     { background: #14532d; color: #4ade80; }
.ex-tag.difficulty-intermediate { background: #451a03; color: #fbbf24; }
.ex-tag.difficulty-advanced     { background: #450a0a; color: #f87171; }

/* Goal banner */
.goal-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 14px 16px;
    margin: 0 16px 16px;
}
.goal-banner-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.goal-banner-val { font-size: 16px; font-weight: 800; color: #fff; }
.goal-banner-icon { font-size: 20px; color: #3b82f6; flex-shrink: 0; }

/* Estimated 1RM card */
.orm-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 16px;
    margin: 0 16px 16px;
}
.orm-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.orm-title { font-size: 13px; font-weight: 700; color: #94a3b8; display: flex; align-items: center; gap: 6px; }
.orm-title i { color: #f59e0b; }
.orm-value { font-size: 32px; font-weight: 900; color: #fff; }
.orm-value span { font-size: 16px; font-weight: 700; color: #64748b; }

.orm-level { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.orm-level-badge { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 99px; }
.orm-level-note { font-size: 12px; color: #64748b; }

.orm-bar-wrap { height: 8px; background: #111c2d; border-radius: 99px; overflow: hidden; margin: 12px 0; }
.orm-bar { height: 100%; border-radius: 99px; transition: width 0.4s; }

.orm-standards { display: flex; justify-content: space-between; gap: 4px; margin-top: 12px; }
.orm-std-item { flex: 1; text-align: center; }
.orm-std-label { font-size: 9px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.orm-std-val { font-size: 12px; font-weight: 800; }

.orm-no-data { text-align: center; padding: 16px 0; color: #64748b; font-size: 13px; }

/* Tabs */
body.single-exercise-page .tabs {
    display: flex;
    gap: 4px;
    margin: 0 16px 8px;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 12px;
    padding: 4px;
}
.tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 6px;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.tab-btn.active { background: #1e3a5f; color: #60a5fa; }

/* Muscles worked */
.muscles-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.muscle-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    border-radius: 12px;
    padding: 12px;
}
.muscle-chip.primary i { color: #3b82f6; }
.muscle-chip.secondary i { color: #64748b; }
.muscle-chip-label { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
.muscle-chip-val { font-size: 14px; font-weight: 700; color: #fff; margin-top: 2px; }

.muscle-image { width: 100%; max-height: 280px; object-fit: contain; border-radius: 12px; display: block; background: #111c2d; }
.muscle-image-placeholder {
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #111c2d;
    border-radius: 12px;
    color: #1e2d45;
    font-size: 32px;
}
.muscle-image-placeholder div { font-size: 12px; color: #64748b; }

/* Accordion */
.accordion-item { border-bottom: 1px solid #1e2d45; }
.accordion-item:last-child { border-bottom: none; }
.accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 0;
    cursor: pointer;
    text-align: left;
}
.chevron { color: #64748b; transition: transform 0.2s; font-size: 12px; }
.accordion-trigger.open .chevron { transform: rotate(180deg); }
.accordion-body { display: none; padding: 0 0 16px; color: #94a3b8; font-size: 13px; line-height: 1.6; }
.accordion-body.open { display: block; }
.accordion-body ol, .accordion-body ul { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* Video */
.video-embed { border-radius: 12px; overflow: hidden; background: #111c2d; }
.video-embed video { width: 100%; display: block; }
.video-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 140px;
    background: #111c2d;
    border-radius: 12px;
    color: #64748b;
    font-size: 13px;
}
.video-wrap i { font-size: 28px; color: #1e2d45; }

/* History tab */
.history-session { margin-bottom: 16px; }
.history-date-header { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.history-set-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    font-size: 13px;
}
.history-set-num { color: #64748b; font-weight: 700; min-width: 44px; }
.history-set-weight { color: #fff; font-weight: 800; }
.history-set-reps { color: #94a3b8; flex: 1; }
.pr-chip { font-size: 10px; font-weight: 800; background: #451a03; color: #fbbf24; padding: 2px 7px; border-radius: 99px; }

/* Progress charts */
.chart-wrap { height: 200px; position: relative; }

/* Plate calculator additions */
.plate-title { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.plate-bar-wrap { display: flex; align-items: center; justify-content: center; margin: 16px 0; flex-wrap: wrap; }
.plate-bar { width: 60px; height: 8px; background: #475569; flex-shrink: 0; }
.plate-calc-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #2563eb;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 0 18px;
    border-radius: 10px;
    cursor: pointer;
}
.plate-list-weight { color: #94a3b8; font-size: 13px; }

/* === SWAP EXERCISE PAGE === */

.current-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 16px;
    margin: 0 16px 18px;
}
.current-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.current-name { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.current-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.meta-chip {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #94a3b8;
}

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

.exercise-card-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}
.exercise-gif {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    background: #111c2d;
    flex-shrink: 0;
}
.exercise-gif-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background: #111c2d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e2d45;
    font-size: 22px;
    flex-shrink: 0;
}
.exercise-info { flex: 1; min-width: 0; }
.exercise-info .exercise-name { font-size: 14px; margin-bottom: 4px; }
.exercise-info .exercise-tags { margin-top: 0; }

.ex-tag.compound { background: #14532d; color: #4ade80; }
.ex-tag.score { background: #1e3a5f; color: #60a5fa; }

.exercise-card-inner .btn-swap {
    width: 40px;
    height: 40px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}

/* === ADD EXERCISE PAGE === */

.exercise-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px;
    cursor: pointer;
}
.exercise-card-name { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.exercise-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.chevron-icon { color: #64748b; font-size: 13px; flex-shrink: 0; transition: transform 0.2s; }

.exercise-form {
    display: none;
    padding: 0 14px 14px;
}
.exercise-form.open { display: block; }
.exercise-form .form-row { grid-template-columns: repeat(3, 1fr); }

/* === EXERCISE LIBRARY PAGE === */

.exercise-list { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }

.exercise-list .exercise-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ex-info { flex: 1; min-width: 0; }
.ex-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

.ex-compound { background: #14532d; color: #4ade80; }
.ex-isolation { background: #1e3a5f; color: #60a5fa; }

.ex-right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ex-best { font-size: 14px; font-weight: 800; color: #fff; }
.ex-last { font-size: 11px; color: #64748b; font-weight: 600; }
.ex-arrow { color: #1e2d45; font-size: 13px; }

/* === ACHIEVEMENTS PAGE === */

.progress-title { font-size: 14px; font-weight: 700; color: #94a3b8; }
.progress-count { font-size: 14px; font-weight: 800; color: #fff; }

.new-unlock {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #451a03 0%, #1e3a5f 100%);
    border: 1px solid #f59e0b44;
    border-radius: 14px;
    padding: 14px;
    margin: 0 16px 16px;
}
.new-unlock-icon { font-size: 28px; flex-shrink: 0; }
.new-unlock-text { display: flex; flex-direction: column; gap: 2px; }
.new-unlock-text strong { font-size: 14px; color: #fff; }
.new-unlock-text span { font-size: 12px; color: #94a3b8; }

.category { margin-bottom: 20px; }
.category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 16px 10px;
}
.category-header i { color: #3b82f6; }

.badge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 16px;
}

.badge-card {
    position: relative;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 14px;
    text-align: center;
}
.badge-card.locked { opacity: 0.55; }
.badge-card.earned { border-color: var(--badge-color, #2563eb); }

.badge-new {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #f59e0b;
    color: #080f1e;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 99px;
    text-transform: uppercase;
}
.badge-lock {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #3a5070;
    font-size: 13px;
}
.badge-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 10px;
}
.badge-name { font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.badge-desc { font-size: 11px; color: #64748b; line-height: 1.4; margin-bottom: 6px; }
.badge-date { font-size: 10px; color: #94a3b8; font-weight: 700; }

/* === WEEKLY SCHEDULE PAGE === */

.header-left { display: flex; align-items: center; gap: 12px; }

.btn-edit {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: 10px;
}

.week-progress {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 16px;
    margin: 0 16px 16px;
}
.week-progress-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.week-progress-label { font-size: 13px; font-weight: 700; color: #94a3b8; }
.week-progress-pct { font-size: 16px; font-weight: 800; color: #fff; }

.week-stats { display: flex; gap: 12px; margin-top: 14px; }
.week-stat { flex: 1; text-align: center; }
.week-stat-val { font-size: 20px; font-weight: 900; }
.week-stat-lbl { font-size: 11px; color: #64748b; font-weight: 600; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.03em; }

.plan-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 16px; }
.plan-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    background: #111c2d;
    border: 1px solid #1e2d45;
    padding: 5px 11px;
    border-radius: 99px;
}

.day-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }

.day-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 12px 14px;
}
.day-card.today { border-color: #2563eb; background: #0f1f38; }
.day-card.completed { opacity: 0.6; }
.day-card.rest { opacity: 0.75; }

.day-date { text-align: center; width: 38px; flex-shrink: 0; }
.day-date-num { font-size: 18px; font-weight: 800; color: #fff; line-height: 1; }
.day-date-abbr { font-size: 10px; color: #64748b; font-weight: 700; text-transform: uppercase; margin-top: 2px; }

.day-info { flex: 1; min-width: 0; }
.day-name { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-type { font-size: 12px; color: #64748b; margin-top: 2px; }

.day-actions { flex-shrink: 0; }
.completed-check { color: #4ade80; font-size: 18px; }
.day-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 10px;
}
.day-action-btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; }

/* === WEIGHT TRACKING PAGE === */

.log-form {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 18px;
    margin: 0 16px 16px;
}
.log-form-title { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 14px; }
.log-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.log-form-row.three { grid-template-columns: 1fr 1fr 1fr; }

.btn-log {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #2563eb;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 13px;
    border-radius: 12px;
    cursor: pointer;
}
.btn-log.logged { background: #14532d; color: #4ade80; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px; }
.stat-number.blue  { color: #3b82f6; }
.stat-number.amber { color: #f59e0b; }
.stat-number.green { color: #22c55e; }
.stat-number.red   { color: #ef4444; }

.goal-bar-wrap {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 16px;
    margin: 0 16px 16px;
}
.goal-bar-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.goal-bar-label { font-size: 13px; font-weight: 700; color: #94a3b8; }
.goal-bar-pct { font-size: 16px; font-weight: 800; color: #fff; }
.goal-bar-track { height: 8px; background: #111c2d; border-radius: 99px; overflow: hidden; }
.goal-bar-fill { height: 100%; border-radius: 99px; background: #2563eb; transition: width 0.4s; }
.goal-bar-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: #64748b; font-weight: 600; }

.chart-title { font-size: 13px; font-weight: 700; color: #94a3b8; padding: 16px 16px 0; }
.chart-container { padding: 12px 16px 16px; height: 220px; position: relative; }

.history-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }
.history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 12px 14px;
}
.history-meta { font-size: 12px; color: #64748b; margin-top: 2px; }
.history-weight { font-size: 16px; font-weight: 800; color: #fff; }
.history-change { font-size: 11px; font-weight: 700; margin-top: 2px; }
.history-change.green { color: #4ade80; }
.history-change.red { color: #f87171; }

.btn-delete {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.btn-delete:hover { color: #f87171; border-color: #f8717144; }

/* === NUTRITION / PROTEIN TRACKER PAGE === */

.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 16px; }
.quick-btn {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 12px;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
}
.quick-btn:hover { border-color: #3a5070; }
.quick-btn-name { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.quick-btn-grams { font-size: 12px; color: #22c55e; font-weight: 700; }

.entry-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #1e2d45;
}
.entry-item:last-child { border-bottom: none; }
.entry-grams { font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0; }
.entry-note { font-size: 13px; color: #94a3b8; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-time { font-size: 11px; color: #64748b; flex-shrink: 0; }
.btn-delete-entry {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #64748b;
    flex-shrink: 0;
    cursor: pointer;
}
.btn-delete-entry:hover { color: #f87171; }

.history-bar-wrap { flex: 1; height: 8px; background: #111c2d; border-radius: 99px; overflow: hidden; margin: 0 12px; }
.history-bar { height: 100%; border-radius: 99px; transition: width 0.4s; }
.history-total { font-size: 13px; font-weight: 800; flex-shrink: 0; width: 44px; text-align: right; }

.btn-save-goal {
    background: #2563eb;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 10px;
    cursor: pointer;
}

.progress-total { font-size: 32px; font-weight: 900; color: #fff; line-height: 1; }
.progress-total span { font-size: 16px; font-weight: 700; color: #64748b; margin-left: 2px; }
.progress-goal { text-align: right; }

/* === EDIT SCHEDULE PAGE === */

.day-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
}

.swap-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 12px 14px;
    margin: 0 16px 16px;
}
.swap-bar.ready { border-color: #2563eb; }
.swap-info { flex: 1; font-size: 13px; color: #94a3b8; }
.btn-clear {
    background: transparent;
    border: 1px solid #1e2d45;
    color: #64748b;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex-shrink: 0;
    cursor: pointer;
}
.btn-swap-confirm {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #2563eb;
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
}
.btn-swap-confirm:disabled { background: #1e2d45; color: #64748b; cursor: not-allowed; }

.day-cards { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }
.day-card.selected-first  { border-color: #2563eb; background: #0f1f38; }
.day-card.selected-second { border-color: #22c55e; background: #0f2418; }
.day-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #111c2d;
    border: 1px solid #1e2d45;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.day-workout { font-size: 12px; margin-top: 2px; }

.edit-panel {
    display: none;
    background: #0d1b2e;
    border: 1px solid #2563eb;
    border-radius: 16px;
    padding: 18px;
    margin: 0 16px 16px;
}
.edit-panel.visible { display: block; }
.edit-panel h3 { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 14px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.field-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #e2e8f0;
    text-transform: none;
    font-weight: 600;
    cursor: pointer;
}
.field-check input { width: 16px; height: 16px; }

.edit-actions { display: flex; gap: 10px; }
.edit-actions .btn-save { flex: 1; justify-content: center; }
.btn-cancel {
    flex: 1;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 700;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
}

.regen-wrap { padding: 0 16px 24px; }
.btn-regen {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 700;
    padding: 13px;
    border-radius: 12px;
    cursor: pointer;
}
.btn-regen:hover { border-color: #f59e0b44; color: #f59e0b; }

/* === FEEDBACK PAGE === */

.beta-note {
    background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2e 100%);
    border: 1px solid #2563eb44;
    border-radius: 14px;
    padding: 14px 16px;
    margin: 0 16px 18px;
}
.beta-note-title { font-size: 13px; font-weight: 800; color: #60a5fa; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.beta-note-text { font-size: 12px; color: #94a3b8; line-height: 1.6; }

.form-card form > label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 16px 0 6px;
}
.form-card form > label:first-child { margin-top: 0; }
.form-card form > label + input,
.form-card form > label + textarea { margin-bottom: 4px; }
.form-card textarea { min-height: 110px; resize: vertical; }

.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
.type-option { position: absolute; opacity: 0; width: 0; height: 0; }
.type-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #111c2d;
    border: 1.5px solid #1e2d45;
    border-radius: 12px;
    padding: 14px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}
.type-label i { font-size: 18px; }
.type-option:checked + .type-label { border-color: #2563eb; background: #1e3a5f; color: #60a5fa; }

.btn-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #2563eb;
    border: none;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 14px;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 18px;
}
.btn-submit:hover { background: #1d4ed8; }

/* === ONBOARDING PAGE === */

.progress-wrap { padding: 16px; }
.progress-step { font-size: 12px; font-weight: 700; color: #94a3b8; }

.error-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #450a0a;
    border: 1px solid #f8717144;
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 16px 16px;
    color: #f87171;
    font-size: 13px;
}

#stepForm { padding: 0 16px 24px; }

.step-emoji { font-size: 40px; display: block; margin-bottom: 12px; }
.step-title { font-size: 22px; font-weight: 900; color: #fff; margin-bottom: 8px; line-height: 1.3; }
.step-sub { font-size: 14px; color: #94a3b8; line-height: 1.5; margin-bottom: 20px; }

.options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.option-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d1b2e;
    border: 1.5px solid #1e2d45;
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.15s;
}
.option-card.selected { border-color: #2563eb; background: #0f1f38; }
.option-card input { display: none; }
.option-icon { flex-shrink: 0; width: 32px; text-align: center; color: #60a5fa; }
.option-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.option-label { font-size: 14px; font-weight: 700; color: #fff; }
.option-desc { font-size: 12px; color: #94a3b8; }
.option-check { width: 22px; height: 22px; flex-shrink: 0; color: #2563eb; font-weight: 900; text-align: center; }

.days-section-label { font-size: 12px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.days-grid .day-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0d1b2e;
    border: 1.5px solid #1e2d45;
    border-radius: 10px;
    padding: 12px 2px;
    margin: 0;
    gap: 0;
    cursor: pointer;
    transition: all 0.15s;
}
.days-grid .day-card.selected { border-color: #2563eb; background: #0f1f38; }
.days-grid .day-card input { display: none; }
.day-abbr { font-size: 12px; font-weight: 700; color: #94a3b8; }
.days-grid .day-card.selected .day-abbr { color: #60a5fa; }

.count-label { font-size: 12px; color: #64748b; font-weight: 600; margin-bottom: 20px; }

.options-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
.options-grid.cols2 { grid-template-columns: 1fr 1fr; }
.grid-card {
    background: #0d1b2e;
    border: 1.5px solid #1e2d45;
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}
.grid-card.selected { border-color: #2563eb; background: #0f1f38; }
.grid-card input { display: none; }
.grid-card-main { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.grid-card-sub { font-size: 11px; color: #94a3b8; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
    display: inline-flex;
    align-items: center;
    background: #0d1b2e;
    border: 1.5px solid #1e2d45;
    border-radius: 99px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s;
}
.chip.selected { border-color: #2563eb; background: #1e3a5f; color: #60a5fa; }
.chip input { display: none; }

.field-note {
    display: flex;
    align-items: center;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 20px;
}

.form-fields { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.field-row { display: flex; gap: 10px; }
.field-row .field-group { flex: 1; }
.field-group label { display: block; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.field-optional { font-size: 11px; color: #64748b; margin-top: 6px; }

.btn-continue {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #2563eb;
    border: none;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 14px;
    border-radius: 12px;
    cursor: pointer;
}
.btn-continue:hover { background: #1d4ed8; }
#stepForm .btn-skip {
    width: 100%;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    padding: 12px;
    margin-top: 4px;
    cursor: pointer;
}

.success-screen {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}
.success-emoji { font-size: 64px; margin-bottom: 20px; }
.success-title { font-size: 24px; font-weight: 900; color: #fff; margin-bottom: 12px; }
.success-sub { font-size: 14px; color: #94a3b8; line-height: 1.6; margin-bottom: 28px; max-width: 320px; }
.btn-go {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 28px;
    border-radius: 12px;
}

/* === CUSTOM WORKOUT BUILDER PAGE === */

.btn-new {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #2563eb;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: 10px;
}

body.workout-builder-page .workout-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 14px;
    margin: 0 16px 10px;
}
.workout-info { flex: 1; min-width: 0; }
.workout-name { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 4px; }
body.workout-builder-page .workout-meta { font-size: 12px; color: #94a3b8; }
.workout-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-icon.danger { color: #f87171; }
.btn-icon.danger:hover { color: #fff; background: #f87171; border-color: #f87171; }

.builder-wrap { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 16px; }
.builder-left, .builder-right {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 16px;
}

.picker-search { margin-bottom: 12px; }
.muscle-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.mf-btn {
    background: #111c2d;
    border: 1.5px solid #1e2d45;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 99px;
    cursor: pointer;
}
.mf-btn.active { border-color: #2563eb; color: #60a5fa; background: #1e3a5f33; }

#exerciseList { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ex-pick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
}
.ex-pick-name { font-size: 13px; font-weight: 700; color: #fff; }
.ex-pick-meta { font-size: 11px; color: #64748b; margin-top: 2px; }
.ex-pick-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 99px; flex-shrink: 0; }
.btn-add-ex {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #1e3a5f;
    border: none;
    color: #60a5fa;
    flex-shrink: 0;
    cursor: pointer;
}

.build-name {
    width: 100%;
    background: #111c2d;
    border: 1.5px solid #3a5070;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.build-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.build-meta label { display: block; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }

#buildList { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.build-exercise {
    background: #111c2d;
    border: 1px solid #1e2d45;
    border-radius: 12px;
    padding: 12px;
}
.build-ex-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.build-ex-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1e3a5f;
    color: #60a5fa;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.build-ex-name { flex: 1; font-size: 13px; font-weight: 700; color: #fff; }
.btn-remove-ex {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: #64748b;
    flex-shrink: 0;
    cursor: pointer;
}
.btn-remove-ex:hover { color: #f87171; }
.build-ex-inputs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.build-ex-inputs label { display: block; font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 4px; }
.build-ex-inputs input {
    width: 100%;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    text-align: center;
    padding: 8px 4px;
}

.empty-build {
    text-align: center;
    padding: 30px 16px;
    color: #64748b;
    font-size: 13px;
}
.empty-build i { font-size: 28px; margin-bottom: 10px; display: block; color: #1e2d45; }

.btn-save-workout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #2563eb;
    border: none;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 14px;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 16px;
}

.modal-title { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.modal-sub { font-size: 13px; color: #94a3b8; margin-bottom: 16px; }

#dayOptions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.day-option {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #111c2d;
    border: 1.5px solid #1e2d45;
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
}
.day-option.selected { border-color: #2563eb; background: #0f1f38; }
.day-option input { display: none; }
.day-date-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0d1b2e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.day-date-circle.today { background: #1e3a5f; }
.day-num { font-size: 13px; font-weight: 800; color: #fff; line-height: 1; }
.day-info-text { flex: 1; min-width: 0; }
.day-label { font-size: 13px; font-weight: 700; color: #fff; }
.day-current { font-size: 11px; color: #64748b; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.modal-actions { display: flex; gap: 10px; }
.btn-modal-cancel {
    flex: 1;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 700;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
}
.btn-modal-confirm {
    flex: 1;
    background: #2563eb;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
}

/* === EXERCISE HISTORY / PROGRESS PAGE === */

body.exercise-history-page .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px; }
.summary-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 14px;
}
.summary-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.summary-num { font-size: 24px; font-weight: 900; color: #fff; line-height: 1; }
.summary-trend { font-size: 11px; font-weight: 600; margin-top: 6px; }
.summary-trend.up { color: #4ade80; }
.summary-trend.down { color: #f87171; }
.summary-trend.neutral { color: #64748b; }

.muscle-bars { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 8px; }
.muscle-bar-row { display: flex; align-items: center; gap: 10px; }
.muscle-bar-label { width: 80px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muscle-bar-track { flex: 1; height: 8px; background: #111c2d; border-radius: 99px; overflow: hidden; }
.muscle-bar-fill { height: 100%; border-radius: 99px; transition: width 0.4s; }
.muscle-bar-val { flex-shrink: 0; width: 56px; font-size: 11px; }

.card-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }
body.exercise-history-page .progress-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    padding: 12px 14px;
    margin: 0;
}
.progress-card-info { flex: 1; min-width: 0; }
.progress-card-name { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-card-meta { font-size: 12px; color: #64748b; margin-top: 2px; }
.progress-card-val { text-align: right; flex-shrink: 0; }
.progress-card-num { font-size: 16px; font-weight: 800; color: #fff; }
.progress-card-num.up { color: #4ade80; }
.progress-card-unit { font-size: 10px; color: #64748b; margin-top: 2px; }
.stall-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; }

.muscle-section { margin-bottom: 18px; }
.ex-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.ex-stats { text-align: right; flex-shrink: 0; }
.ex-stat-num { font-size: 15px; font-weight: 800; color: #fff; }
.ex-stat-label { font-size: 10px; color: #64748b; margin-top: 2px; }
.ex-meta { font-size: 12px; color: #64748b; margin-top: 2px; }

/* === HELP / HOW REPTRA WORKS PAGE === */

.section { padding: 0 16px 24px; }

body.help-page .feature-card { padding: 16px; margin-bottom: 10px; }
.feature-card:last-child { margin-bottom: 0; }
.feature-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.feature-icon.blue   { background: #1e3a5f; color: #60a5fa; }
.feature-icon.green  { background: #14532d; color: #4ade80; }
.feature-icon.amber  { background: #451a03; color: #fbbf24; }
.feature-icon.purple { background: #2e1a4a; color: #c084fc; }
.feature-icon.teal   { background: #042f2e; color: #2dd4bf; }
.feature-icon.red    { background: #450a0a; color: #f87171; }
.feature-name { font-size: 14px; font-weight: 800; color: #fff; }
.feature-tagline { font-size: 12px; color: #64748b; margin-top: 2px; }
.feature-body { font-size: 13px; color: #94a3b8; line-height: 1.6; }
.feature-body p { margin-bottom: 8px; }
.feature-body p:last-child { margin-bottom: 0; }

.tip-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #111c2d;
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 12px;
}
.tip-icon { color: #f59e0b; font-size: 13px; margin-top: 2px; flex-shrink: 0; }
.tip-text { font-size: 12px; color: #94a3b8; line-height: 1.5; }

.tab-grid { display: flex; flex-direction: column; gap: 14px; }
.tab-item { display: flex; align-items: center; gap: 12px; }
.tab-item-icon { width: 28px; text-align: center; font-size: 16px; flex-shrink: 0; }
.tab-item-name { font-size: 13px; font-weight: 700; color: #fff; }
.tab-item-desc { font-size: 11px; color: #64748b; margin-top: 2px; }

.replay-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    padding: 13px;
    border-radius: 12px;
    cursor: pointer;
}
.replay-btn:hover { border-color: #3a5070; color: #fff; }

/* === EXPORT DATA PAGE === */

.summary {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 18px;
    margin: 0 16px 20px;
}
body.export-data-page .summary-title { font-size: 14px; font-weight: 800; color: #fff; text-align: center; margin-bottom: 14px; }
.summary-stat { text-align: center; }

.export-list { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 20px; }
.export-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    padding: 16px;
}
.export-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.export-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.export-icon.green { background: #14532d; color: #4ade80; }
.export-icon.amber { background: #451a03; color: #fbbf24; }
.export-icon.blue  { background: #1e3a5f; color: #60a5fa; }
.export-name { font-size: 14px; font-weight: 800; color: #fff; }
.export-desc { font-size: 12px; color: #64748b; margin-top: 2px; }
.export-meta { display: flex; gap: 12px; font-size: 11px; color: #94a3b8; margin-bottom: 14px; flex-wrap: wrap; }

.btn-export {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    padding: 12px;
    border-radius: 10px;
}
.btn-export.green { background: #14532d; border-color: #22c55e44; color: #4ade80; }
.btn-export.amber { background: #451a03; border-color: #f59e0b44; color: #fbbf24; }

.privacy-note {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 16px 20px;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
}
.privacy-note i { color: #3b82f6; flex-shrink: 0; }

/* === ADMIN: WORKOUTX BROWSER === */

.controls { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.filter-btns { display: flex; gap: 6px; }
.filter-btn {
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 99px;
}
.filter-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }

.stats-bar {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #94a3b8;
    padding: 0 16px 16px;
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 0 16px 20px; }

.wx-card {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 14px;
    overflow: hidden;
}
.wx-card.linked { border-color: #22c55e44; }

.wx-gif { position: relative; width: 100%; height: 160px; background: #111c2d; cursor: pointer; overflow: hidden; }
.wx-gif img { width: 100%; height: 100%; object-fit: cover; }
.wx-gif-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #1e2d45;
    font-size: 12px;
}
.wx-gif-expand {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(4, 8, 20, 0.7);
    border: none;
    color: #fff;
    font-size: 12px;
}

.wx-body { padding: 14px; }
.wx-name { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.wx-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.wx-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 99px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #94a3b8;
}
.wx-tag.muscle { background: #1e3a5f; color: #60a5fa; border: none; }
.wx-tag.equip { background: #2e1a4a; color: #c084fc; border: none; }

.wx-linked-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #4ade80;
    background: #14532d;
    padding: 6px 10px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.wx-actions { display: flex; gap: 6px; }
.wx-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #111c2d;
    border: 1px solid #1e2d45;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    padding: 9px 8px;
    border-radius: 8px;
    cursor: pointer;
}
.wx-btn-add { background: #14532d; border-color: #22c55e44; color: #4ade80; flex: 2; }
.wx-btn-link { background: #1e3a5f; border-color: #2563eb44; color: #60a5fa; flex: 2; }
.wx-btn-view { flex: 0 0 36px; }

/* Modal system (this admin page uses modal-backdrop instead of modal-overlay) */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 20, 0.85);
    z-index: 500;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-backdrop.active { display: flex; }
.modal {
    background: #0d1b2e;
    border: 1px solid #1e2d45;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #1e2d45;
}

.modal-close {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
}
.modal-body { padding: 20px; }
.modal-gif {
    width: 100%;
    height: 140px;
    background: #111c2d;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    overflow: hidden;
}
.modal-gif img { width: 100%; height: 100%; object-fit: cover; }
.modal-footer {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #1e2d45;
}
.modal-footer .btn-primary, .modal-footer .btn-secondary { flex: 1; justify-content: center; }

.form-label { display: block; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.form-input, .form-select {
    width: 100%;
    background: #111c2d;
    border: 1.5px solid #3a5070;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    padding: 10px 12px;
}
.form-input:focus, .form-select:focus { outline: none; border-color: #2563eb; }

.gif-fullscreen {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 600;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.gif-fullscreen.active { display: flex; }
.gif-fullscreen img { max-width: 100%; max-height: 100%; border-radius: 12px; }

.msg-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #14532d;
    color: #4ade80;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 99px;
    z-index: 700;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s;
}
.msg-bar.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.msg-bar.show.error { background: #450a0a; color: #f87171; }

.link-ex-row:hover { background: #111c2d; }