/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    --bg:          #f5f5f5;
    --bg-surface:  #ffffff;
    --bg-elevated: #ffffff;
    --bg-hover:    #f0f0f0;

    --text:        #111111;
    --text-muted:  #6b7280;
    --text-faint:  #9ca3af;

    --border:      #e5e7eb;
    --border-focus: #10b981;

    --accent:       #10b981;
    --accent-hover: #059669;
    --accent-light: #d1fae5;

    --danger:       #dc2626;
    --danger-bg:    #fef2f2;

    --input-bg:     #ffffff;
    --input-border: #d1d5db;

    --shadow-sm:  0 1px 2px rgba(0,0,0,.06);
    --shadow:     0 2px 8px rgba(0,0,0,.08);
    --shadow-lg:  0 8px 24px rgba(0,0,0,.12);

    --radius-sm:   4px;
    --radius:      8px;
    --radius-lg:  12px;
    --sidebar-w:  200px;
}

/* ============================================================
   DARK THEME
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:          #111111;
        --bg-surface:  #1c1c1e;
        --bg-elevated: #2c2c2e;
        --bg-hover:    rgba(255,255,255,.07);
        --text:        #f5f5f5;
        --text-muted:  #8e8e93;
        --text-faint:  #636366;
        --border:      #3a3a3c;
        --input-bg:    #2c2c2e;
        --input-border: #48484a;
        --accent-light: #064e3b;
        --danger-bg:   #450a0a;
        --shadow-sm:   0 1px 2px rgba(0,0,0,.4);
        --shadow:      0 2px 8px rgba(0,0,0,.5);
        --shadow-lg:   0 8px 24px rgba(0,0,0,.7);
    }
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; touch-action: manipulation; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100dvh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font: inherit; }
input, textarea, select { font: inherit; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell { display: flex; min-height: 100dvh; }

/* ============================================================
   SIDEBAR (desktop)
   ============================================================ */
.sidebar {
    width: var(--sidebar-w);
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0;
    height: 100dvh; overflow-y: auto; z-index: 100;
}
.sidebar-header {
    padding: 1rem; border-bottom: 1px solid var(--border);
    font-weight: 700; font-size: 1rem; letter-spacing: -.02em;
}
.nav-list { list-style: none; padding: .5rem 0; flex: 1; }
.nav-link {
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem .75rem; margin: .1rem .5rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted); font-size: .875rem;
    transition: background .12s, color .12s;
    text-decoration: none; background: none; border: none;
    width: calc(100% - 1rem); text-align: left; cursor: pointer;
}
.nav-link:hover     { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.nav-link.is-active { background: var(--accent-light); color: var(--accent); font-weight: 600; }
.nav-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; }
.sidebar-footer { border-top: 1px solid var(--border); padding: .5rem 0; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content {
    flex: 1; margin-left: var(--sidebar-w);
    padding: 1.5rem; max-width: 680px;
}

/* ============================================================
   PAGES — common
   ============================================================ */
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.25rem;
}
.page-title { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }
.section-title {
    font-size: .875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted); margin-bottom: .75rem;
}
.section-subtitle { color: var(--text-muted); margin-bottom: 1rem; font-size: .9rem; }
.icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius);
    color: var(--text-muted); background: none; border: none;
    transition: background .12s, color .12s; text-decoration: none;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }

/* ============================================================
   ACTIVITY CARDS
   ============================================================ */
.activity-section { margin-bottom: 1.5rem; }
.activity-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
}
.activity-card {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: 1.25rem .75rem;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer; transition: background .12s, border-color .12s, transform .1s;
    min-height: 80px;
}
.activity-card:hover  { background: var(--bg-hover); border-color: var(--accent); }
.activity-card:active { transform: scale(.97); }
.activity-card-icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
}
.activity-card-icon .act-icon { width: 100%; height: 100%; }

/* Inline activity icons (tags, chips, lists) */
.act-icon { flex-shrink: 0; display: inline-block; vertical-align: middle; }
.recent-activity-tag .act-icon,
.history-summary-chip .act-icon { color: var(--text-muted); }
.activity-card-name { font-size: .8rem; font-weight: 600; color: var(--text-muted); text-align: center; }

/* ============================================================
   WEIGHT SUMMARY (home)
   ============================================================ */
.weight-summary {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: .875rem 1rem; margin-bottom: 1.5rem;
}
.weight-summary-link {
    display: flex; align-items: center; gap: .5rem;
    text-decoration: none; color: var(--text);
}
.weight-summary-link:hover { text-decoration: none; }
.weight-summary-icon  { display: flex; color: var(--text-muted); }
.weight-summary-value { font-size: 1.25rem; font-weight: 700; }
.weight-summary-date  { font-size: .8rem; color: var(--text-muted); flex: 1; }

/* ============================================================
   RECENT LIST (home)
   ============================================================ */
.recent-section { }
.recent-list { display: flex; flex-direction: column; }
.recent-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .375rem 0; border-bottom: 1px solid var(--border);
    min-height: 44px;
}
.recent-row:last-child { border-bottom: none; }
.recent-date { font-size: .8125rem; color: var(--text-muted); min-width: 92px; }
.recent-row--empty .recent-date { color: var(--text-faint); }
.recent-activities { display: flex; flex-wrap: wrap; gap: .375rem; flex: 1; }
.recent-none { color: var(--text-faint); font-size: .8125rem; }
.day-edit-btn { flex-shrink: 0; }

/* Day edit modal */
.modal-hint { font-size: .875rem; color: var(--text-muted); margin: 0 0 .75rem; }
.day-activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.day-activity-option {
    display: flex; flex-direction: column; align-items: center; gap: .375rem;
    padding: .75rem .5rem;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text-muted);
    font-size: .8125rem; font-weight: 600; cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.day-activity-option:hover { background: var(--bg-hover); }
.day-activity-option.is-active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.recent-activity-tag {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 99px; padding: .2rem .6rem; font-size: .8125rem;
}

/* ============================================================
   CHECK-IN
   ============================================================ */
.checkin-datebar { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; }
.checkin-datebar .icon-btn:disabled { opacity: .3; cursor: default; }
.checkin-date {
    position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: .5rem .75rem; background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); cursor: pointer; text-align: center;
}
.checkin-date-label  { font-weight: 600; }
.checkin-date-status { font-size: .75rem; color: var(--text-faint); }
.checkin-date-status[data-state="done"]     { color: var(--accent); font-weight: 600; }
.checkin-date-status[data-state="progress"] { color: #d97706; }
.checkin-date-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; border: 0; padding: 0;
}
.checkin-group { margin-bottom: 1.25rem; }
.checkin-group .section-title { margin-bottom: .5rem; }
.checkin-list {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
}
.checkin-check {
    display: flex; align-items: center; gap: .75rem;
    position: relative; padding: .625rem .875rem; min-height: 48px;
    border-bottom: 1px solid var(--border); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.checkin-check:last-child { border-bottom: none; }
.checkin-check input { position: absolute; opacity: 0; pointer-events: none; }
.checkin-switch {
    flex-shrink: 0; position: relative; width: 44px; height: 26px;
    border-radius: 99px; background: var(--border);
    transition: background .15s;
}
.checkin-switch::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2);
    transition: transform .15s;
}
.checkin-check input:checked + .checkin-switch { background: var(--accent); }
.checkin-check input:checked + .checkin-switch::after { transform: translateX(18px); }
.checkin-check input:focus-visible + .checkin-switch { box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
.checkin-check-name { flex: 1; }
.checkin-check:has(input:checked) .checkin-check-name { font-weight: 600; }
.checkin-note { resize: vertical; min-height: 4.5rem; }
.btn--full { width: 100%; }
#checkinDone:disabled { background: var(--accent-light); border-color: var(--accent-light); color: var(--accent); opacity: 1; cursor: default; }
.checkin-note-status { display: block; min-height: 1.1em; margin-top: .25rem; font-size: .75rem; color: var(--text-faint); }
.checkin-done-hint { margin: .5rem 0 0; font-size: .8rem; color: var(--text-muted); text-align: center; }
.checkin-progress-mark { font-size: .75rem; color: #d97706; align-self: center; }
.checkin-recent { margin-top: 2rem; }
.checkin-recent-row {
    width: 100%; background: none; border: none; border-bottom: 1px solid var(--border);
    color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.checkin-recent-row:hover { background: var(--bg-hover); }
.checkin-recent-row.is-selected .recent-date { color: var(--accent); font-weight: 600; }
.checkin-nothing { color: var(--text-muted); font-size: .8125rem; }
.checkin-note-mark {
    display: inline-flex; align-items: center; font-size: .75rem; color: var(--text-muted);
    border: 1px dashed var(--border); border-radius: 99px; padding: .2rem .6rem;
}

/* ============================================================
   FOOD
   ============================================================ */
.food-quickdays { display: flex; gap: .375rem; justify-content: center; margin: -.5rem 0 1.25rem; }
.food-entries { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.food-entry {
    display: flex; flex-direction: column; gap: .375rem; width: 100%; text-align: left;
    padding: .75rem 1rem; background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); color: var(--text); font: inherit; cursor: pointer;
    transition: background .12s;
}
.food-entry:hover { background: var(--bg-hover); }
.food-entry-head { display: flex; align-items: baseline; gap: .5rem; }
.food-entry-meal { font-weight: 600; }
.food-entry-time { font-size: .8125rem; color: var(--text-muted); }
.food-entry-note { font-size: .9375rem; white-space: pre-line; overflow-wrap: anywhere; }
.food-entry-photos { display: flex; gap: .375rem; flex-wrap: wrap; }
.food-entry-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); background: var(--bg-hover); }
.food-photo-count { display: inline-flex; align-items: center; gap: .15rem; color: var(--text-muted); }

/* Food modal */
.food-meal-options { display: flex; flex-wrap: wrap; gap: .375rem; }
.food-time-row { display: flex; gap: .5rem; align-items: center; }
.food-time-row .form-input { flex: 1; min-width: 0; }
.food-note { resize: vertical; min-height: 6rem; }
.food-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: .5rem; }
.food-photo-grid:not(:empty) { margin-bottom: .5rem; }
.food-photo { position: relative; aspect-ratio: 1; }
.food-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); background: var(--bg-hover); }
.food-photo-remove {
    position: absolute; top: .25rem; right: .25rem; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 50%;
    font-size: .75rem; line-height: 1; cursor: pointer;
}
.food-photo-add { display: inline-flex; align-items: center; gap: .375rem; cursor: pointer; }

/* ============================================================
   WEIGHT PAGE
   ============================================================ */
.period-selector { display: flex; gap: .375rem; margin-bottom: 1.25rem; }
.period-btn {
    flex: 1; padding: .4rem .75rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-surface); color: var(--text-muted);
    font-size: .875rem; font-weight: 500; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.period-btn:hover     { background: var(--bg-hover); color: var(--text); }
.period-btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

.weight-stats {
    margin-bottom: 1.25rem; padding: 1rem;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.weight-stat-main { display: flex; align-items: baseline; gap: .25rem; }
.weight-stat-value { font-size: 2.25rem; font-weight: 700; letter-spacing: -.03em; }
.weight-stat-unit  { font-size: 1rem; color: var(--text-muted); }
.weight-stat-meta  { font-size: .875rem; color: var(--text-muted); margin-top: .25rem; }

.chart-container {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 1rem;
    margin-bottom: 1.5rem; position: relative;
}
#weightChart { width: 100%; height: 200px; display: block; touch-action: pan-y; }
.chart-tooltip {
    position: absolute; top: .75rem; pointer-events: none; z-index: 10;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: .4rem .6rem; font-size: .75rem; line-height: 1.35; white-space: nowrap;
}
.chart-tooltip-date  { color: var(--text-muted); }
.chart-tooltip-value { color: var(--text); font-weight: 700; font-size: .9rem; }
.chart-tooltip-trend { color: var(--text-muted); }
.chart-empty { text-align: center; color: var(--text-faint); padding: 2rem 0; }

.entries-section { margin-top: .5rem; }
.entries-list { display: flex; flex-direction: column; }
.entry-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem 0; border-bottom: 1px solid var(--border);
}
.entry-item:last-child { border-bottom: none; }
.entry-date   { font-size: .875rem; color: var(--text-muted); min-width: 70px; }
.entry-value  { font-size: 1rem; font-weight: 600; flex: 1; }
.entry-actions { display: flex; gap: .25rem; }
.entry-btn {
    background: none; border: none; color: var(--text-faint);
    font-size: .8rem; cursor: pointer; padding: .2rem .4rem;
    border-radius: var(--radius-sm); transition: color .1s, background .1s;
}
.entry-btn:hover          { background: var(--bg-hover); color: var(--text); }
.entry-btn--danger:hover  { color: var(--danger); background: var(--danger-bg); }

/* ============================================================
   WORKOUT PAGE
   ============================================================ */
.gym-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }

.exercise-list { display: flex; flex-direction: column; gap: .5rem; }
.exercise-item {
    display: flex; align-items: center; gap: .75rem; padding: 1rem;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); cursor: pointer;
    transition: background .12s, border-color .12s;
}
.exercise-item:hover { background: var(--bg-hover); border-color: var(--accent); }
.exercise-item-name { font-weight: 600; font-size: .9375rem; flex: 1; }
.exercise-weight    { font-size: 1.0625rem; font-weight: 700; white-space: nowrap; }
.exercise-weight-arrow { color: var(--text-faint); margin: 0 .2rem; }
.exercise-target    { color: var(--text-muted); }
.exercise-no-data   { color: var(--text-faint); font-size: .875rem; }

/* ============================================================
   HISTORY PAGE
   ============================================================ */
.month-nav { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.month-label { font-size: 1rem; font-weight: 600; flex: 1; text-align: center; }
.month-btn {
    background: none; border: 1px solid var(--border); border-radius: var(--radius);
    width: 36px; height: 36px; font-size: 1.1rem; color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .12s;
}
.month-btn:hover { background: var(--bg-hover); }

.calendar {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
    margin-bottom: 1.25rem;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden; padding: .75rem .5rem;
}
.cal-day-header {
    text-align: center; font-size: .7rem; font-weight: 600;
    color: var(--text-faint); text-transform: uppercase; padding: .25rem 0;
}
.cal-day {
    aspect-ratio: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); font-size: .8rem;
}
.cal-day--today { background: var(--accent-light); font-weight: 700; color: var(--accent); }
.cal-day-num { line-height: 1; }
.cal-day-dots {
    display: flex; gap: 1px; margin-top: 2px;
    flex-wrap: wrap; justify-content: center; max-width: 30px;
}
.cal-dot { display: flex; line-height: 1; color: var(--accent); }

.history-summary { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.history-summary-chip {
    display: flex; align-items: center; gap: .4rem;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: 99px; padding: .35rem .75rem; font-size: .875rem;
}
.history-summary-chip-count { font-weight: 700; }

.history-log { display: flex; flex-direction: column; }
.history-log-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.history-log-row:last-child { border-bottom: none; }
.history-log-date { font-size: .8125rem; color: var(--text-muted); min-width: 70px; }
.history-log-activity { display: flex; flex-wrap: wrap; gap: .375rem; flex: 1; }

/* ============================================================
   ADMIN PAGE
   ============================================================ */
.admin-section { margin-bottom: 2rem; }
.admin-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.admin-list { display: flex; flex-direction: column; gap: .375rem; }
.admin-item {
    display: flex; align-items: center; gap: .625rem; padding: .625rem .875rem;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.admin-item-icon { display: flex; color: var(--text-muted); }
.checkbox-icon-label { display: inline-flex; align-items: center; gap: .4rem; }
.checkbox-icon-label .act-icon { color: var(--text-muted); }

/* Icon picker (admin) */
.icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: .375rem; }
.icon-option {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1; padding: 0;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-muted);
    cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.icon-option:hover { background: var(--bg-hover); }
.icon-option.is-active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.admin-item-name { font-weight: 500; flex: 1; }
.admin-item-meta { font-size: .8rem; color: var(--text-muted); }

/* Exercise groups (admin) */
.exercise-group { margin-bottom: 1.25rem; }
.exercise-group:last-child { margin-bottom: 0; }
.exercise-group-title {
    display: flex; align-items: center; gap: .4rem;
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); margin: 0 0 .5rem;
}
.exercise-group-count {
    font-weight: 600; font-size: .7rem; color: var(--text-faint);
    background: var(--bg-hover); border-radius: 99px; padding: .05rem .45rem;
}
.exercise-group-empty { font-size: .875rem; color: var(--text-faint); margin: 0; padding: .25rem 0; }
.admin-item--exercise { padding-left: .375rem; }
.reorder-btns { display: flex; flex-direction: column; }
.reorder-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 18px; padding: 0;
    background: none; border: none; border-radius: var(--radius-sm);
    color: var(--text-muted); cursor: pointer;
}
.reorder-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
.reorder-btn:disabled { opacity: .25; cursor: default; }
.badge { display: inline-block; padding: .1rem .45rem; border-radius: 99px; font-size: .7rem; font-weight: 600; }
.badge--inactive { background: var(--bg-hover); color: var(--text-faint); }
.export-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
    padding: .5rem 1rem; border-radius: var(--radius);
    font-size: .875rem; font-weight: 500; border: 1px solid transparent;
    transition: background .12s, color .12s, border-color .12s;
    text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn--primary   { background: var(--accent);   color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--secondary { background: var(--bg-surface); color: var(--text); border-color: var(--border); }
.btn--secondary:hover { background: var(--bg-hover); }
.btn--danger    { background: none; color: var(--danger); border-color: var(--danger); }
.btn--danger:hover { background: var(--danger-bg); }
.btn--ghost     { background: none; color: var(--text-muted); border-color: transparent; }
.btn--ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn--full { width: 100%; }
#checkinDone:disabled { background: var(--accent-light); border-color: var(--accent-light); color: var(--accent); opacity: 1; cursor: default; }
.checkin-note-status { display: block; min-height: 1.1em; margin-top: .25rem; font-size: .75rem; color: var(--text-faint); }
.checkin-done-hint { margin: .5rem 0 0; font-size: .8rem; color: var(--text-muted); text-align: center; }
.checkin-progress-mark { font-size: .75rem; color: #d97706; align-self: center; }
.btn--sm   { padding: .3rem .75rem; font-size: .8125rem; }

/* Unit toggle (kg / lbs) */
.unit-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.unit-toggle.unit-inline .unit-btn { padding: .4rem .6rem; font-size: .8125rem; }
.unit-btn {
    padding: .25rem .625rem; font-size: .8rem; font-weight: 600;
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; transition: background .1s, color .1s; line-height: 1.5;
}
.unit-btn.is-active { background: var(--accent); color: #fff; }

/* FAB */
.fab {
    display: none; position: fixed;
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
    right: 1.5rem; width: 52px; height: 52px;
    border-radius: 50%; background: var(--accent); color: #fff;
    font-size: 1.5rem; line-height: 1; border: none;
    box-shadow: var(--shadow-lg); z-index: 200;
    transition: background .12s, transform .12s;
    align-items: center; justify-content: center;
}
.fab:hover  { background: var(--accent-hover); transform: scale(1.05); }
.fab:active { transform: scale(.97); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.35);
    z-index: 300; opacity: 0; pointer-events: none; transition: opacity .18s;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }

.modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -48%);
    width: min(480px, calc(100dvw - 2rem));
    max-height: calc(100dvh - 4rem);
    background: var(--bg-surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); z-index: 400;
    display: flex; flex-direction: column;
    opacity: 0; transition: opacity .18s, transform .18s;
}
.modal.is-open { opacity: 1; transform: translate(-50%, -50%); }
.modal[hidden] { display: none; }

.modal-inner { overflow-y: auto; flex: 1; padding: 1.5rem; -webkit-overflow-scrolling: touch; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.modal-title  { font-size: 1.0625rem; font-weight: 700; }
.modal-close  {
    background: none; border: none; color: var(--text-muted);
    font-size: 1.25rem; padding: .25rem; border-radius: var(--radius-sm);
    line-height: 1; cursor: pointer;
}
.modal-close:hover { background: var(--bg-hover); }
.modal-footer {
    display: flex; align-items: center; gap: .75rem;
    padding: 1rem 1.5rem; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.modal-footer-actions { display: flex; gap: .5rem; margin-left: auto; }

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: .8125rem; font-weight: 500; color: var(--text-muted); margin-bottom: .3rem; }
.form-input {
    width: 100%; padding: .5rem .75rem;
    background: var(--input-bg); border: 1px solid var(--input-border);
    border-radius: var(--radius); color: var(--text);
    transition: border-color .12s, box-shadow .12s;
    -webkit-appearance: none; appearance: none;
}
.form-input:focus {
    outline: none; border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.form-input--pin    { font-size: 1.25rem; letter-spacing: .2em; text-align: center; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.checkbox-label { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .875rem; }

/* Large weight input (workout/weight modal) */
.weight-input-wrap { display: flex; align-items: center; gap: .5rem; margin: .75rem 0; overflow: hidden; }
.weight-input-large {
    flex: 1; min-width: 0; padding: .75rem; font-size: 1.75rem; font-weight: 700;
    text-align: center; border: 1.5px solid var(--input-border);
    border-radius: var(--radius-lg); background: var(--input-bg); color: var(--text);
    -webkit-appearance: none; appearance: none; width: 100%;
}
.weight-input-large:focus {
    outline: none; border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.weight-unit { font-size: 1rem; color: var(--text-muted); font-weight: 500; }

/* Body weight picker — native selects render as a scroll wheel on iOS */
.weight-picker { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .75rem 0; }
.weight-picker-select {
    padding: .75rem 1rem; font-size: 1.75rem; font-weight: 700; text-align: center; text-align-last: center;
    border: 1.5px solid var(--input-border); border-radius: var(--radius-lg);
    background: var(--input-bg); color: var(--text);
    -webkit-appearance: none; appearance: none; min-width: 6rem;
}
.weight-picker-select--dec { min-width: 3.5rem; }
.weight-picker-select:focus {
    outline: none; border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.weight-picker-sep { font-size: 1.75rem; font-weight: 700; color: var(--text-muted); }

/* Exercise history in modal */
.ex-history-list { display: flex; flex-direction: column; gap: .25rem; margin-top: .75rem; }
.ex-history-row { display: flex; gap: .75rem; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.ex-history-row:last-child { border-bottom: none; }
.ex-history-date  { font-size: .8125rem; color: var(--text-muted); min-width: 70px; }
.ex-history-value { font-size: .9375rem; font-weight: 600; }

/* Set logging in exercise modal */
.ex-set-list  { display: flex; flex-direction: column; }
.ex-set-row   { display: flex; align-items: center; gap: .75rem; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.ex-set-row:last-child { border-bottom: none; }
.ex-set-num   { font-size: .8125rem; color: var(--text-faint); min-width: 1.25rem; }
.ex-set-value { font-size: 1rem; font-weight: 600; flex: 1; }
.ex-set-empty { font-size: .875rem; color: var(--text-faint); margin: 0; padding: .25rem 0; }
.ex-set-add   { display: flex; align-items: flex-end; gap: .5rem; }
.ex-set-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.ex-set-field label { font-size: .8125rem; color: var(--text-muted); }
.ex-set-times { font-size: 1.5rem; font-weight: 700; color: var(--text-muted); padding-bottom: .8rem; }
.ex-set-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .75rem 0 1.25rem; }
.mode-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; }
.mode-toggle .unit-btn { flex: 1; padding: .45rem .5rem; font-size: .8125rem; }
.ex-set-band { margin-top: .75rem; }
.label-hint { font-weight: 400; color: var(--text-faint); }
.exercise-sets-today { display: block; font-size: .75rem; font-weight: 500; color: var(--accent); margin-top: .1rem; }

/* ============================================================
   TOAST
   ============================================================ */
.toast-container {
    position: fixed; bottom: calc(5rem + env(safe-area-inset-bottom));
    left: 50%; transform: translateX(-50%);
    z-index: 500; display: flex; flex-direction: column; gap: .5rem;
    pointer-events: none; min-width: 240px; max-width: calc(100vw - 2rem);
}
.toast {
    padding: .625rem 1rem; border-radius: var(--radius);
    background: var(--bg-elevated); box-shadow: var(--shadow-lg);
    border: 1px solid var(--border); font-size: .875rem;
    display: flex; align-items: center; gap: .75rem;
    pointer-events: auto; animation: toastIn .18s ease;
}
.toast--error { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
@keyframes toastIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state { text-align: center; color: var(--text-faint); padding: 2rem 1rem; font-size: .9375rem; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100dvh; padding: 1rem;
}
.login-container {
    width: min(380px, 100%); background: var(--bg-surface);
    border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-lg);
}
.login-logo     { font-size: 2rem; margin-bottom: .5rem; }
.login-title    { font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; }
.login-subtitle { color: var(--text-muted); font-size: .875rem; margin-bottom: 1.25rem; }
.login-tagline  { color: var(--text-muted); font-size: .75rem; letter-spacing: .04em; margin-bottom: 1.5rem; opacity: .6; }
.login-form .form-group { margin-bottom: .875rem; }
.login-form label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .3rem; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .875rem; }
.alert--error   { background: var(--danger-bg); color: var(--danger); }
.alert--success { background: var(--accent-light); color: var(--accent-hover); }

/* ============================================================
   ERROR PAGE
   ============================================================ */
.error-page { display: flex; align-items: center; justify-content: center; min-height: 100dvh; }
.error-container { text-align: center; padding: 2rem; }
.error-container h1 { font-size: 4rem; font-weight: 700; color: var(--text-faint); }
.error-container p  { color: var(--text-muted); margin: 1rem 0 1.5rem; }

/* ============================================================
   BOTTOM NAV (mobile)
   ============================================================ */
.bottom-nav {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--bg-surface); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 100; flex-direction: row; justify-content: space-around;
}
.bottom-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: .5rem .25rem; color: var(--text-faint); font-size: .7rem;
    flex: 1; text-align: center; text-decoration: none;
    transition: color .12s; background: none; border: none;
    cursor: pointer; font-family: inherit;
}
.bottom-nav-item.is-active { color: var(--accent); }
.bottom-nav-item:hover { color: var(--text); text-decoration: none; }
.bottom-nav-icon  { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.bottom-nav-label { line-height: 1.2; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
    .sidebar    { display: none; }
    .bottom-nav { display: flex; }

    .main-content {
        margin-left: 0;
        padding: 1rem 1rem calc(5.5rem + env(safe-area-inset-bottom));
        max-width: 100%;
    }

    .activity-grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
    .activity-card { padding: 1rem .5rem; min-height: 72px; }
    .activity-card-icon { width: 24px; height: 24px; }

    .fab {
        display: flex;
        bottom: calc(4.5rem + env(safe-area-inset-bottom));
    }

    .form-group  { margin-bottom: .75rem; }
    .form-row    { grid-template-columns: 1fr; }

    input[type="date"],
    input[type="number"],
    input[type="text"] { -webkit-appearance: none; appearance: none; }

    .toast-container { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 900px) {
    .modal {
        top: auto; left: 0; right: 0; bottom: 0;
        transform: translateY(8px);
        width: 100%; max-height: 90dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .modal.is-open { transform: translateY(0); }
    .modal-inner { padding: 1.25rem; }
}

@media (min-width: 769px) {
    .fab { display: none; }
}