/* ─── COMPONENTS: Buttons, Badges, Modals, Inline Save/Lock ────────────── */
  /* ── GLOBAL CTA LOADING STATE ───────────────────────────── */
  @keyframes spin { to { transform: rotate(360deg); } }
  .btn-spinner {
    display: none; width: 15px; height: 15px;
    border: 2px solid rgba(0,0,0,0.25); border-top-color: currentColor;
    border-radius: 50%; animation: spin 0.65s linear infinite;
    vertical-align: middle; margin-right: 6px; flex-shrink: 0;
  }
  .btn-loading { opacity: 0.7 !important; cursor: not-allowed !important; pointer-events: none !important; }
  .btn-loading .btn-spinner { display: inline-block; }
  .form-saving input, .form-saving select, .form-saving textarea {
    pointer-events: none; opacity: 0.5;
  }

  /* PHASE BADGE */
  .phase-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 99px;
    padding: 6px 14px;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 1px;
    text-transform: uppercase;
  }
  .phase-dot { width: 7px; height: 7px; border-radius: 50%; }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 2px; }

  /* ONTRACK indicator */
  .track-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 99px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 1px; text-transform: uppercase;
    font-weight: 600;
  }
  .track-pill.ahead { background: rgba(124,255,196,0.15); color: var(--accent); }
  .track-pill.ontarget { background: rgba(107,184,255,0.15); color: var(--accent4); }
  .track-pill.behind { background: rgba(255,107,107,0.15); color: var(--accent2); }
  .track-pill::before { content: '●'; font-size: 8px; }

  /* STEPS DELTA */
  .steps-delta {
    font-family: var(--font-mono); font-size: 11px;
    margin-top: 6px; font-weight: 600;
  }

  /* DISABLED CTA */
  .ob-cta:disabled { opacity: 0.4; cursor: not-allowed; }
  .save-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  /* CONFIRM MODAL */
  .confirm-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
  }
  .confirm-overlay.visible { opacity: 1; pointer-events: all; }
  .confirm-box {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 20px;
    padding: 28px 24px 24px;
    width: 100%; max-width: 320px;
    display: flex; flex-direction: column; gap: 20px;
    transform: scale(0.92);
    transition: transform 0.2s;
  }
  .confirm-overlay.visible .confirm-box { transform: scale(1); }
  .confirm-icon { font-size: 36px; text-align: center; }
  .confirm-title {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 800;
    letter-spacing: -0.5px; text-align: center;
  }
  .confirm-msg {
    font-size: 14px; color: var(--text2);
    font-family: var(--font-mono);
    text-align: center; line-height: 1.5;
    margin-top: -10px;
  }
  .confirm-actions { display: flex; gap: 10px; }
  .confirm-cancel {
    flex: 1; padding: 14px;
    background: var(--surface3);
    border: 1px solid var(--border2);
    color: var(--text2);
    font-family: var(--font-display);
    font-size: 15px; font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer; transition: all 0.15s;
  }
  .confirm-cancel:active { opacity: 0.7; }
  .confirm-confirm {
    flex: 1; padding: 14px;
    background: var(--accent2-dim);
    border: 1px solid var(--accent2);
    color: var(--accent2);
    font-family: var(--font-display);
    font-size: 15px; font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer; transition: all 0.15s;
  }
  .confirm-confirm:active { opacity: 0.7; }
  .confirm-confirm.confirm-signout {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
  }

  /* Remove number input spinners */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

  /* INLINE SAVE / LOCK / EDIT */
  .field-save-btn {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--surface3); border: 1px solid var(--border2);
    color: var(--text3); font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s; flex-shrink: 0;
  }
  .field-save-btn:active { transform: scale(0.92); }
  .field-save-btn.ready {
    background: rgba(124,255,196,0.15);
    border-color: var(--accent); color: var(--accent);
  }
  .field-save-btn.saved {
    background: var(--accent); border-color: var(--accent);
    color: #000; font-weight: 700;
  }

  /* LOCKED STATE — shows saved value + edit button */
  .field-locked-row {
    display: none; align-items: center; justify-content: space-between;
    gap: 10px;
  }
  .field-locked-row.visible { display: flex; }
  .field-locked-value {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.5px; color: var(--accent);
    line-height: 1;
  }
  .field-locked-unit {
    font-family: var(--font-mono); font-size: 12px;
    color: var(--text3); margin-left: 3px;
  }
  .field-edit-btn {
    padding: 6px 14px; border-radius: 8px;
    background: var(--surface3); border: 1px solid var(--border2);
    color: var(--text2); font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; transition: all 0.15s; flex-shrink: 0;
  }
  .field-edit-btn:active { transform: scale(0.96); }
  .field-edit-btn:hover { border-color: var(--accent3); color: var(--accent3); }

  /* input row when editing mode */
  .field-input-row { display: flex; align-items: center; gap: 6px; }
  .field-input-row.hidden { display: none; }

  /* card faded when all locked */
  .tod-card.is-done { opacity: 0.72; }
  .tod-card.is-done:hover { opacity: 1; }
  .tod-card.is-done .tod-header { border-bottom-color: transparent; }

  /* workout saved state */
  .workout-saved-row {
    display: none; align-items: center; gap: 10px;
  }
  .workout-saved-row.visible { display: flex; }
  .workout-saved-icon { font-size: 22px; }
  .workout-saved-text {
    font-family: var(--font-display);
    font-size: 16px; font-weight: 700; flex: 1;
  }

  /* STEPS MINI BAR */
  .steps-mini-bar { margin-top: 14px; }
  .steps-bar-track {
    height: 5px; background: var(--surface3);
    border-radius: 99px; overflow: hidden; margin-bottom: 5px;
  }
  .steps-bar-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, var(--accent3), var(--accent));
    transition: width 0.5s cubic-bezier(0.34,1.56,0.64,1);
  }
  .steps-bar-label {
    font-family: var(--font-mono); font-size: 10px; color: var(--text3);
    display: flex; justify-content: space-between;
  }

  /* DAY SELECTOR */
  .day-selector {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  }
  .ds-cell {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px; border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer; transition: all 0.15s;
    position: relative;
  }
  .ds-cell .ds-day { font-family: var(--font-mono); font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; }
  .ds-cell .ds-num { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text2); }
  .ds-cell.has-data { border-color: rgba(124,255,196,0.3); background: rgba(124,255,196,0.05); }
  .ds-cell.has-data .ds-num { color: var(--accent); }
  .ds-cell.is-today { border-color: var(--border2); }
  .ds-cell.is-today .ds-num { color: var(--text); }
  .ds-cell.selected { border-color: var(--accent); background: rgba(124,255,196,0.12); }
  .ds-cell.selected .ds-num { color: var(--accent); }
  .ds-cell.is-sunday::after { content: '📏'; font-size: 8px; position: absolute; top: 3px; right: 3px; }
  .ds-cell.is-future { opacity: 0.25; cursor: not-allowed; }
  .ds-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0; }
  .ds-cell.has-data .ds-dot { opacity: 1; }