:root {
  --bg: #f5f5f5;
  --bg-card: #fff;
  --bg-card-alt: #f9f9f9;
  --text-primary: #333;
  --text-secondary: #555;
  --text-tertiary: #888;
  --text-heading: #2c3e50;
  --text-muted: #aaa;
  --text-faint: #999;
  --text-dim: #666;
  --border: #ddd;
  --border-light: #f0f0f0;
  --border-lighter: #f5f5f5;
  --border-subtle: #eee;
  --accent: #4CAF50;
  --accent-hover: #43a047;
  --accent-active: #388e3c;
  --accent-light: #e8f5e9;
  --accent-text: #2e7d32;
  --accent-pale: #f1f8e9;
  --accent-mid: #81C784;
  --accent-bright: #66BB6A;
  --danger: #e53935;
  --danger-hover: #c62828;
  --danger-light: #ffebee;
  --danger-text: #c62828;
  --warning: #ff9800;
  --amber: #FFC107;
  --amber-light: #fff8e1;
  --amber-light-alt: #fff3e0;
  --info-bg: #e3f2fd;
  --info-text: #1565c0;
  --shadow: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-nav: 0 -2px 10px rgba(0,0,0,0.08);
  --shadow-login: 0 8px 32px rgba(0,0,0,0.1);
  --neutral: #e0e0e0;
  --neutral-light: #e8e8e8;
  --neutral-lighter: #ccc;
  --head-skin: #ddd;
  --login-grad-start: #e8f5e9;
  --login-grad-mid: #c8e6c9;
  --login-grad-end: #a5d6a7;
  --gym-gradient-start: #4CAF50;
  --gym-gradient-end: #66BB6A;
}

[data-theme="dark"] {
  --bg: #121212;
  --bg-card: #1e1e1e;
  --bg-card-alt: #252525;
  --text-primary: #e0e0e0;
  --text-secondary: #bbb;
  --text-tertiary: #999;
  --text-heading: #e0e0e0;
  --text-muted: #777;
  --text-faint: #888;
  --text-dim: #aaa;
  --border: #333;
  --border-light: #2a2a2a;
  --border-lighter: #222;
  --border-subtle: #2a2a2a;
  --accent: #4CAF50;
  --accent-hover: #66BB6A;
  --accent-active: #388e3c;
  --accent-light: #1b3a1b;
  --accent-text: #81C784;
  --accent-pale: #1a2e1a;
  --accent-mid: #81C784;
  --accent-bright: #66BB6A;
  --danger: #ef5350;
  --danger-hover: #e53935;
  --danger-light: #3a1a1a;
  --danger-text: #ef5350;
  --warning: #ff9800;
  --amber: #FFC107;
  --amber-light: #3a3010;
  --amber-light-alt: #3a3010;
  --info-bg: #1a2a3a;
  --info-text: #64b5f6;
  --shadow: 0 1px 4px rgba(0,0,0,0.3);
  --shadow-nav: 0 -2px 10px rgba(0,0,0,0.4);
  --shadow-login: 0 8px 32px rgba(0,0,0,0.4);
  --neutral: #444;
  --neutral-light: #333;
  --neutral-lighter: #555;
  --head-skin: #555;
  --login-grad-start: #1a2a1a;
  --login-grad-mid: #122212;
  --login-grad-end: #0a1a0a;
  --gym-gradient-start: #2E7D32;
  --gym-gradient-end: #4CAF50;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;
}

[data-theme="dark"] { color-scheme: dark; }

input, select, textarea, option {
  color: var(--text-primary);
  background: var(--bg-card);
}

.container {
  padding: 24px 20px 80px;
}

/* Pages */
.page { animation: fadeIn 0.25s ease; }

/* Titulo del mes */
.month-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 12px;
}

/* Navegacion */
.month-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.nav-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  color: var(--text-secondary);
}

.nav-btn:active { background: var(--border); }

/* Cards */
.card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.card h2 {
  font-size: 1.15rem;
  color: var(--text-heading);
  margin-bottom: 14px;
}

/* Agregar habito */
.add-habit-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

#habit-input {
  flex: 1;
  min-width: 180px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  background: var(--bg-card);
  color: var(--text-primary);
}

#habit-input:focus { border-color: var(--accent); }

.emoji-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.emoji-option {
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.15s;
  user-select: none;
}

.emoji-option.selected {
  border-color: var(--accent);
  background: var(--accent-light);
}

.btn-add {
  background: var(--accent);
  color: var(--bg-card);
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-add:active { background: var(--accent-active); }

/* Semanas */
.week-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
  animation: fadeIn 0.35s ease;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.week-card h3 {
  font-size: 1.05rem;
  color: var(--text-heading);
  margin-bottom: 12px;
}

.week-table {
  width: 100%;
  border-collapse: collapse;
}

.week-table thead th {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  font-weight: 600;
  padding: 4px 0 8px;
  text-align: center;
}

.week-table thead th:first-child {
  text-align: left;
  padding-left: 4px;
}

.week-table tbody td {
  text-align: center;
  padding: 6px 0;
  position: relative;
}

.week-table tbody td:first-child {
  text-align: left;
  padding-left: 4px;
  font-size: 0.92rem;
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.habit-row { position: relative; }

.habit-name {
  display: inline;
  vertical-align: middle;
}
.habit-name.name-sm { font-size: 0.82em; }
.habit-name.name-xs { font-size: 0.72em; }

/* Actions column */
.col-actions-th {
  width: 52px;
  padding: 0 2px;
}
.col-actions-td {
  text-align: center;
  padding: 2px 2px;
  white-space: nowrap;
  vertical-align: middle;
}

.btn-delete {
  background: var(--danger);
  color: var(--bg-card);
  border: none;
  border-radius: 4px;
  font-size: 0.78rem;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  margin-left: 3px;
  padding: 0;
  transition: background 0.15s;
}
.btn-delete:hover { background: var(--danger-hover); }

/* Streak badges */
.streak-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--amber-light);
  color: #e65100;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1.4;
}
.streak-badge.streak-hot {
  background: #ff6d00;
  color: #fff;
  animation: streakPulse 1.5s ease-in-out infinite;
}
@keyframes streakPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Collapsible week headers */
.week-header.clickable {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
  -webkit-user-select: none;
}

.week-header.clickable h3 { margin-bottom: 0; }

.week-complete-badge {
  display: inline-block;
  background: var(--accent-light);
  color: var(--accent-text);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
}
.week-ended-badge {
  display: inline-block;
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
}

.week-toggle {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  transition: transform 0.2s;
}

.week-card.collapsed { padding: 14px 24px; }

/* Today highlight */
.today-header { color: var(--accent) !important; font-weight: 700 !important; }
.today-cell { background: var(--accent-pale); border-radius: 6px; }

/* Checkboxes */
.day-check {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
  cursor: pointer;
}

.day-check:disabled { opacity: 0.5; cursor: not-allowed; }
.day-beyond { opacity: 0.25; }
.day-beyond-cell { opacity: 0.2; }

/* Plan lock — hábitos y rutinas bloqueados por exceder límite del plan */
.habit-locked td { opacity: 0.45; }
.habit-locked .habit-name { color: var(--text-tertiary); text-decoration: line-through; }
.gym-routine-locked { opacity: 0.45; pointer-events: none; }
.gym-routine-locked .gym-delete-btn { pointer-events: all; opacity: 1; }
.plan-lock-badge { font-size: 0.75rem; margin-left: 4px; }

/* Progreso */
.progress-section { margin-top: 4px; }
.progress-table { width: 100%; border-collapse: collapse; }

.progress-table th,
.progress-table td {
  padding: 10px 8px;
  text-align: center;
  font-size: 0.95rem;
}

.progress-table th {
  color: var(--text-tertiary);
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
}

.total-label { font-weight: 700; color: var(--text-heading); text-align: left !important; }

.progress-bar-container {
  width: 100%;
  background: var(--neutral);
  border-radius: 10px;
  height: 24px;
  position: relative;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 10px;
  transition: width 0.4s ease;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 20px 0;
  font-size: 0.95rem;
}

/* ─── Bottom Navbar ─── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 68px;
  background: var(--bg-card);
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: var(--shadow-nav);
  z-index: 900;
  padding: 0 8px env(safe-area-inset-bottom);
  border-top: 1px solid var(--border);
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  transition: color 0.2s, transform 0.15s;
  padding: 8px 0;
  border-radius: 12px;
}
.nav-tab:hover { color: var(--accent); transform: translateY(-1px); }
.nav-tab.active { color: var(--accent); }
.nav-tab i { font-size: 1.5rem; }

/* Center account button — hexagonal */
.nav-center-btn {
  flex: 0 0 52px;
  width: 52px; height: 52px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border-radius: 0 !important;
  background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%) !important;
  color: #fff !important;
  box-shadow: none;
  margin-bottom: 8px;
  padding: 0 !important;
  transition: transform 0.2s, filter 0.2s !important;
}
.nav-center-btn:hover { transform: translateY(-3px) scale(1.08) !important; filter: brightness(1.15); }
.nav-center-btn.active { color: #fff !important; filter: brightness(1.1); }
.nav-center-btn i { font-size: 1.5rem; }
.nav-avatar-img { display: none !important; }

/* ─── Profile Page ─── */
.profile-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 40px 24px;
  text-align: center;
  box-shadow: var(--shadow);
  margin-top: 20px;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
  border: 3px solid var(--accent-light);
}

.profile-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 4px;
}

.profile-email {
  font-size: 0.9rem;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.btn-signout-large {
  margin-top: 20px;
  padding: 12px 32px;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--danger);
  color: var(--bg-card);
  transition: background 0.2s;
}

.btn-signout-large:active { background: var(--danger-hover); }

/* ─── Finance Page ─── */
.finance-summary .summary-cards {
  display: flex;
  gap: 10px;
}

.summary-item {
  flex: 1;
  text-align: center;
  padding: 12px 6px;
  border-radius: 10px;
}

.summary-item.income { background: var(--accent-light); }
.summary-item.expense { background: var(--danger-light); }
.summary-item.balance { background: var(--info-bg); }

.summary-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.summary-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
}

.summary-item.income .summary-value { color: var(--accent-text); }
.summary-item.expense .summary-value { color: var(--danger-text); }
.summary-item.balance .summary-value { color: var(--info-text); }

/* Budget */
.budget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.budget-header h2 { margin-bottom: 0; }

.btn-edit-budget {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.budget-item { margin-bottom: 12px; }

.budget-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 0.88rem;
}

.budget-cat { font-weight: 600; color: var(--text-heading); }
.budget-amounts { color: var(--text-tertiary); font-size: 0.82rem; }

.budget-bar-container {
  width: 100%;
  background: var(--neutral);
  border-radius: 6px;
  height: 8px;
  overflow: hidden;
}

.budget-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
  background: var(--accent);
}

.budget-bar.warning { background: var(--warning); }
.budget-bar.danger { background: var(--danger); }

.budget-pct {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  text-align: right;
  margin-top: 2px;
}

.budget-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.budget-edit-row label {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-heading);
}

.budget-edit-row input {
  width: 100px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.88rem;
  outline: none;
  background: var(--bg-card);
  color: var(--text-primary);
}

.budget-edit-row input:focus { border-color: var(--accent); }

/* Transaction form */
.transaction-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tx-type-toggle {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.tx-type-btn {
  flex: 1;
  padding: 10px;
  border: none;
  background: var(--bg-card);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  color: var(--text-tertiary);
}

.tx-type-btn.active[data-type="income"] {
  background: var(--accent-light);
  color: var(--accent-text);
}

.tx-type-btn.active[data-type="expense"] {
  background: var(--danger-light);
  color: var(--danger-text);
}

#tx-amount, #tx-description {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  background: var(--bg-card);
  color: var(--text-primary);
}

#tx-amount:focus, #tx-description:focus { border-color: var(--accent); }

#tx-category {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  background: var(--bg-card);
  color: var(--text-primary);
}

/* Transaction history */
.tx-day-group { margin-bottom: 8px; }

/* Header desplegable del día */
.tx-day-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.tx-day-header:hover { background: var(--border-light); }
.tx-day-header-left {
  display: flex;
  align-items: center;
  gap: 7px;
}
.tx-day-arrow {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  width: 12px;
}
.tx-day-name {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text-heading);
}
.tx-day-count {
  font-size: 0.73rem;
  color: var(--text-tertiary);
  background: var(--border);
  border-radius: 10px;
  padding: 1px 7px;
}
.tx-day-net {
  font-size: 0.85rem;
  font-weight: 700;
}
.tx-day-net.income  { color: var(--accent); }
.tx-day-net.expense { color: var(--danger-text, #e53935); }

/* Body desplegable */
.tx-day-body {
  padding: 2px 4px 4px;
}

.tx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

.tx-item:last-child { border-bottom: none; }

.tx-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.tx-cat-icon { font-size: 1.1rem; }

.tx-desc {
  font-size: 0.88rem;
  color: var(--text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tx-amount {
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  margin-left: 8px;
}

.tx-amount.income { color: var(--accent-text); }
.tx-amount.expense { color: var(--danger-text); }

.tx-delete {
  background: none;
  border: none;
  color: var(--neutral-lighter);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: 4px;
  transition: color 0.2s;
}

.tx-delete:hover { color: var(--danger); }

.tx-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 20px 0;
  font-size: 0.9rem;
}

.tx-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.tx-filter-cat {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 0.82rem;
  cursor: pointer;
  max-width: 180px;
}

/* ─── Login Screen ─── */
.login-screen {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, var(--login-grad-start) 0%, var(--login-grad-mid) 50%, var(--login-grad-end) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.login-card {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 40px 28px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-login);
}

.login-icon { font-size: 3rem; margin-bottom: 10px; }
.login-title { font-size: 1.6rem; font-weight: 700; color: var(--text-heading); margin-bottom: 8px; }
.login-subtitle { font-size: 0.9rem; color: var(--text-tertiary); margin-bottom: 28px; line-height: 1.4; }

.btn-google-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 2px solid var(--neutral);
  border-radius: 12px;
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  width: 100%;
}

.btn-google-login:active { background: var(--border-light); }

.login-error { color: var(--danger); font-size: 0.85rem; margin-top: 16px; }
.login-footer { font-size: 0.8rem; color: var(--text-muted); margin-top: 20px; }
.login-privacy { font-size: 0.78rem; margin-top: 12px; }
.login-privacy a { color: var(--accent); text-decoration: none; }
.profile-privacy-link { display: block; color: var(--accent); font-size: 0.85rem; margin-top: 16px; text-decoration: none; }

.hidden { display: none !important; }

.sync-status-text { font-size: 0.8rem; color: var(--text-tertiary); }
.sync-status-text.connected { color: var(--accent); font-weight: 600; }
.sync-status-text.error { color: var(--danger); }

/* ─── RESPONSIVE ─── */
@media (max-width: 600px) {
  .container { padding: 12px 8px 72px; }
  .month-title { font-size: 1.4rem; margin-bottom: 6px; }
  .month-nav { gap: 6px; margin-bottom: 12px; }
  .nav-btn { padding: 7px 12px; font-size: 0.82rem; }
  .card { padding: 12px 10px; border-radius: 10px; margin-bottom: 12px; }
  .card h2 { font-size: 0.95rem; margin-bottom: 8px; }
  .add-habit-form { gap: 8px; }
  #habit-input { min-width: 100%; font-size: 0.95rem; padding: 10px; }
  .emoji-selector { gap: 3px; width: 100%; justify-content: center; flex-wrap: wrap; }
  .emoji-option { font-size: 1.3rem; padding: 5px 6px; }
  .btn-add { width: 100%; padding: 10px; font-size: 0.92rem; }
  .week-card { padding: 10px 6px; border-radius: 10px; }
  .week-card h3 { font-size: 0.9rem; }
  .week-table thead th { font-size: 0.65rem; padding: 2px 0 6px; }
  .week-table tbody td:first-child { font-size: 0.72rem; max-width: 100px; }
  .col-actions-th { width: 46px; }
  .btn-edit-habit { width: 20px; height: 20px; font-size: 0.68rem; }
  .btn-delete { width: 20px; height: 20px; font-size: 0.7rem; margin-left: 2px; }
  .day-check { width: 22px; height: 22px; font-size: 0.7rem; }
  .progress-table th { font-size: 0.7rem; }
  .progress-table td { font-size: 0.8rem; padding: 6px 3px; }
  .summary-value { font-size: 0.95rem; }
  .summary-cards { gap: 6px; }
  .summary-item { padding: 10px 4px; }
  .summary-label { font-size: 0.65rem; }
  .budget-edit-row input { width: 80px; }
  .tx-type-toggle { font-size: 0.85rem; }
  .tx-edit { padding: 5px 8px; font-size: 0.85rem; }
  .tx-delete { padding: 5px 8px; font-size: 1rem; }
  /* Gym responsive */
  .gym-tab { font-size: 0.78rem; padding: 8px 2px; }
  .gym-today-routine { font-size: 1rem !important; }
  .gym-set-input { width: 48px; padding: 6px 2px; font-size: 0.82rem; }
  .gym-set-label { width: 34px; font-size: 0.72rem; }
  .gym-set-unit { font-size: 0.7rem; }
  .gym-timer-btn { padding: 8px 10px; font-size: 0.78rem; }
  #gym-timer-text { font-size: 0.95rem; }
  .gym-exercise-edit-detail { font-size: 0.78rem; }
  .gym-muscle-chip { padding: 4px 8px; font-size: 0.72rem; }
  .gym-muscle-legend { grid-template-columns: 1fr 1fr; gap: 4px; }
  .gym-muscle-legend-item { padding: 4px 6px; font-size: 0.75rem; }
  .gym-color-key { gap: 10px; font-size: 0.68rem; }
  .gym-body-stat-row { flex-wrap: wrap; }
  .gym-stat-input { width: 70px; }
  .gym-schedule-day { width: 36px; font-size: 0.82rem; }
  .gym-day-btn { width: 34px; height: 34px; font-size: 0.65rem; }
  .gym-routine-name-input { font-size: 1rem; }
  .gym-ex-numbers label { font-size: 0.8rem; }
  .gym-ex-numbers input { font-size: 0.9rem; }
  .gym-alarm-status { font-size: 0.8rem; padding: 8px 10px; }
  .login-card { padding: 30px 20px; }
  .login-title { font-size: 1.4rem; }
  .login-subtitle { font-size: 0.85rem; }
}

@media (max-width: 360px) {
  .container { padding: 10px 6px 70px; }
  .month-title { font-size: 1.2rem; }
  .card { padding: 10px 8px; }
  .card h2 { font-size: 0.9rem; }
  .emoji-option { font-size: 1.1rem; padding: 4px 5px; }
  .summary-value { font-size: 0.82rem; }
  .summary-label { font-size: 0.6rem; }
  .week-table thead th { font-size: 0.6rem; }
  .week-table tbody td:first-child { font-size: 0.65rem; max-width: 72px; }
  .btn-delete { width: 18px; height: 18px; font-size: 0.65rem; }
  .btn-edit-habit { width: 18px; height: 18px; font-size: 0.62rem; }
  .day-check { width: 20px; height: 20px; font-size: 0.65rem; }
  .gym-set-input { width: 42px; font-size: 0.78rem; }
  .gym-set-label { width: 28px; font-size: 0.68rem; }
  .gym-muscle-legend { grid-template-columns: 1fr; }
  .gym-muscle-chip { padding: 3px 6px; font-size: 0.68rem; }
  .gym-timer-btn { padding: 6px 8px; font-size: 0.72rem; }
  .gym-day-btn { width: 30px; height: 30px; font-size: 0.6rem; }
  .nav-tab i { font-size: 1.3rem; }
  .budget-edit-row input { width: 70px; font-size: 0.82rem; }
  .login-card { padding: 24px 16px; margin: 0 8px; }
}

/* ─── Gym Section ─── */
.gym-mode-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 6px 0 10px;
  font-size: 0.85rem; font-weight: 600; color: var(--accent-text);
  cursor: pointer; transition: opacity 0.15s;
}
.gym-mode-back-btn:hover { opacity: 0.7; }
/* gym-sub-tabs and gym-tab redefined below in redesign section */

.gym-banner {
  background: linear-gradient(135deg, var(--gym-gradient-start), var(--gym-gradient-end));
  color: var(--bg-card);
  padding: 12px 16px;
  border-radius: 10px;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 12px;
}

.gym-today-info { text-align: center; padding: 8px 0; }
.gym-today-date { font-size: 1rem; color: var(--text-dim); }
.gym-today-routine { font-size: 1.2rem; font-weight: 600; margin-top: 4px; }
.gym-attendance-info { font-size: 0.95rem; color: var(--text-dim); margin-bottom: 8px; }
.gym-attend-btn.btn-add { width: 100%; }

.gym-exercise-card {
  background: var(--bg-card-alt);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}

.gym-exercise-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 8px; }
.gym-sets-list { display: flex; flex-direction: column; gap: 6px; }

.gym-set-row { display: flex; align-items: center; gap: 6px; }
.gym-set-label { font-size: 0.8rem; color: var(--text-tertiary); width: 40px; flex-shrink: 0; }

.gym-set-input {
  width: 55px;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
  font-size: 0.9rem;
  background: var(--bg-card);
  color: var(--text-primary);
}

.gym-set-unit { font-size: 0.8rem; color: var(--text-faint); }

.gym-add-set-btn {
  border: none;
  background: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
  font-size: 0.85rem;
}

.gym-timer-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.gym-timer-section h3 { font-size: 0.95rem; margin-bottom: 8px; }
.gym-timer-presets { display: flex; gap: 6px; flex-wrap: wrap; }

.gym-timer-btn {
  padding: 10px 14px;
  border: 1px solid var(--accent);
  background: var(--bg-card);
  color: var(--accent);
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
}

.gym-timer-btn:active { background: var(--accent); color: var(--bg-card); }

.gym-timer-display { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.gym-timer-display .budget-bar-container { flex: 1; }
.gym-timer-bar { background: var(--accent); transition: width 0.5s linear; }
#gym-timer-text { font-weight: 700; font-size: 1.1rem; min-width: 45px; }

.gym-timer-cancel {
  border: none;
  background: var(--danger);
  color: var(--bg-card);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 0.8rem;
}

.gym-complete-btn { width: 100%; margin-top: 12px; }
.gym-complete-btn.completed { background: var(--accent-mid); cursor: default; }

.gym-weight-input-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

.gym-weight-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--bg-card);
  color: var(--text-primary);
}

.gym-weight-progress { font-size: 0.9rem; padding: 8px 0; color: var(--text-dim); }
.gym-weight-progress.weight-down { color: var(--accent); }
.gym-weight-progress.weight-up { color: var(--danger); }

.gym-weight-chart { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

.gym-weight-entry {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  background: var(--bg-card-alt);
  border-radius: 6px;
  font-size: 0.85rem;
}

.gym-weight-day { color: var(--text-tertiary); }
.gym-weight-val { font-weight: 600; }
.gym-weight-summary { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 0.95rem; }

.gym-routine-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}

.gym-routine-info { flex: 1; min-width: 0; }
.gym-routine-info strong { font-size: 0.95rem; }
.gym-routine-exercises { font-size: 0.8rem; color: var(--text-tertiary); margin-top: 2px; }
.gym-routine-detail-list { margin-top: 6px; }
.gym-routine-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 0.82rem;
}
.gym-routine-ex-name { color: var(--text-secondary); }
.gym-routine-ex-info { color: var(--text-tertiary); font-weight: 500; white-space: nowrap; margin-left: 8px; }
.gym-routine-actions { display: flex; gap: 8px; }

.gym-edit-btn, .gym-delete-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 6px;
}

.gym-add-routine-form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

.gym-add-routine-form input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  background: var(--bg-card);
  color: var(--text-primary);
}

.gym-schedule-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-lighter);
}

.gym-schedule-day { font-weight: 600; width: 40px; font-size: 0.9rem; }

.gym-schedule-select {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  background: var(--bg-card);
  color: var(--text-primary);
}

.gym-exercise-edit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

.gym-exercise-edit-name { font-weight: 600; font-size: 0.9rem; }
.gym-exercise-edit-detail { color: var(--text-tertiary); font-size: 0.85rem; }

.gym-add-exercise-form {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.gym-add-exercise-form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 8px;
  box-sizing: border-box;
  background: var(--bg-card);
  color: var(--text-primary);
}

.gym-ex-numbers { display: flex; gap: 8px; margin-bottom: 8px; }

.gym-ex-numbers label {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gym-ex-numbers input { width: 100%; padding: 8px; margin-bottom: 0; }

.gym-back-btn {
  border: none;
  background: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  padding: 12px 0;
  font-size: 0.9rem;
}

/* Routine editor header */
.gym-editor-header { margin-bottom: 12px; }
.gym-routine-name-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  box-sizing: border-box;
  background: var(--bg-card);
  color: var(--text-primary);
}

.gym-exercise-edit-info { flex: 1; min-width: 0; }
.gym-exercise-muscles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gym-muscle-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent-light);
  color: var(--accent-active);
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
}

.gym-show-exercise-form { width: 100%; margin-top: 8px; }

/* Muscle chip selector */
.gym-muscle-selector { margin: 8px 0; }
.gym-muscle-selector label { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 6px; display: block; }
.gym-muscle-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gym-muscle-chip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.gym-muscle-chip.active {
  background: var(--accent);
  color: var(--bg-card);
  border-color: var(--accent);
}
.gym-exercise-form-btns { display: flex; gap: 8px; margin-top: 8px; }
.gym-exercise-form-btns .btn-add { flex: 1; }

/* Body stats */
.gym-body-stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.gym-body-stat-row label { font-weight: 600; white-space: nowrap; }
.gym-stat-input {
  width: 80px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
  font-size: 1rem;
  background: var(--bg-card);
  color: var(--text-primary);
}
.btn-small { padding: 8px 12px !important; font-size: 0.85rem !important; }
.gym-body-subtitle { color: var(--text-tertiary); font-size: 0.85rem; margin: 0 0 8px 0; }

/* Body silhouette */
.gym-body-container { display: flex; justify-content: center; padding: 10px 0; overflow-x: auto; }
.gym-silhouette { width: 100%; max-width: 420px; height: auto; }

/* Muscle legend */
.gym-muscle-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 12px;
}
.gym-muscle-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.82rem;
}
.gym-muscle-legend-item.muscle-high { background: var(--accent-light); }
.gym-muscle-legend-item.muscle-mid { background: var(--amber-light); }
.gym-muscle-legend-item.muscle-none { background: var(--bg); }
.gym-muscle-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.muscle-high .gym-muscle-dot { background: var(--accent); }
.muscle-mid .gym-muscle-dot { background: var(--amber); }
.muscle-none .gym-muscle-dot { background: var(--neutral); }
.gym-muscle-freq { margin-left: auto; color: var(--text-tertiary); font-size: 0.75rem; }

.gym-color-key {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}
.gym-key-item { display: flex; align-items: center; gap: 4px; }
.gym-key-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.gym-key-dot.muscle-high { background: var(--accent); }
.gym-key-dot.muscle-mid { background: var(--amber); }
.gym-key-dot.muscle-none { background: var(--neutral); }

.gym-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}

.gym-config-row label { font-weight: 600; font-size: 0.95rem; }

.gym-toggle {
  padding: 10px 22px;
  border: 2px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-tertiary);
}

.gym-toggle.active { background: var(--accent); border-color: var(--accent); color: var(--bg-card); }

.gym-alarm-days { display: flex; gap: 4px; }

.gym-day-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-tertiary);
}

.gym-day-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg-card); }

#gym-alarm-time {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  background: var(--bg-card);
  color: var(--text-primary);
}

.gym-alarm-status {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--accent-light);
  border-radius: 8px;
  color: var(--accent-text);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
}

/* Theme toggle */
.theme-toggle-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
  padding: 16px;
  background: var(--bg-card-alt);
  border-radius: 10px;
}
.theme-toggle-label { font-weight: 600; color: var(--text-primary); }
.theme-switch { position: relative; width: 50px; height: 26px; display: inline-block; }
.theme-switch input { opacity: 0; width: 0; height: 0; }
.theme-slider {
  position: absolute; inset: 0; background: var(--border);
  border-radius: 26px; cursor: pointer; transition: background 0.3s;
}
.theme-slider::before {
  content: ''; position: absolute; width: 20px; height: 20px;
  left: 3px; bottom: 3px; background: var(--bg-card);
  border-radius: 50%; transition: transform 0.3s;
}
.theme-switch input:checked + .theme-slider { background: var(--accent); }
.theme-switch input:checked + .theme-slider::before { transform: translateX(24px); }

/* Toast notifications */
.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.5s forwards;
  pointer-events: auto;
  text-align: center;
  max-width: 320px;
}
.toast.success { background: var(--accent); }
.toast.error { background: var(--danger); }
.toast.warning { background: var(--warning); }
.toast.info { background: #1976d2; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(-10px); }
}

/* Confirm dialog */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}
.confirm-overlay.hidden { display: none; }
.confirm-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 24px;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.confirm-message {
  font-size: 1rem;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.5;
}
.confirm-actions {
  display: flex;
  gap: 12px;
}
.confirm-btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.confirm-btn.cancel {
  background: var(--neutral);
  color: var(--text-primary);
}
.confirm-btn.ok {
  background: var(--danger);
  color: #fff;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── Intro / Splash Screen ─── */
#intro-screen {
  position: fixed; inset: 0; z-index: 30000;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.intro-glow {
  position: absolute; width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(76,175,80,0.25) 0%, transparent 70%);
  border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%);
  pointer-events: none;
}
.intro-particles {
  position: absolute; inset: 0; pointer-events: none;
}
.intro-particle {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(76,175,80,0.6);
}
.intro-content {
  position: relative; z-index: 1; text-align: center; padding: 0 24px;
}
.intro-logo {
  width: 130px; height: 130px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
}
.intro-mascot-img {
  width: 130px; height: 130px; object-fit: contain;
}
.intro-brand {
  display: flex; gap: 10px; justify-content: center; align-items: baseline;
  margin-bottom: 12px;
}
.intro-word-1 {
  font-size: 2.6rem; font-weight: 800; color: #fff; letter-spacing: -1px;
}
.intro-word-2 {
  font-size: 2.6rem; font-weight: 800; color: #4CAF50; letter-spacing: -1px;
}
.intro-tagline {
  font-size: 0.95rem; color: rgba(255,255,255,0.5); letter-spacing: 0.3px; margin: 0 0 36px;
}
.intro-dots {
  display: flex; gap: 10px; justify-content: center;
}
.intro-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: #4CAF50; opacity: 0.3;
}

/* Loading Screen */
.loading-screen { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10000; }
.loading-screen.hidden { display: none; }
.loading-logo { font-size: 3rem; margin-bottom: 20px; }
.loading-spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Edit Habit Modal */
.edit-habit-input { width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 1rem; margin-bottom: 12px; color: var(--text-primary); background: var(--bg-card); outline: none; }
.edit-habit-input:focus { border-color: var(--accent); }
.confirm-btn.save { background: var(--accent); color: #fff; }

/* Edit Habit Button */
.btn-edit-habit { background: var(--accent-light); border: none; color: var(--accent-text); cursor: pointer; font-size: 0.75rem; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 4px; padding: 0; transition: background 0.15s; }
.btn-edit-habit:hover { background: var(--accent); color: #fff; }

/* Edit Transaction */
.tx-edit { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 0.8rem; padding: 2px 5px; border-radius: 4px; margin-right: 2px; transition: color 0.15s; }
.tx-edit:hover { color: var(--accent); }
.btn-cancel-edit-tx { width: 100%; margin-top: 6px; padding: 9px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-secondary); font-size: 0.9rem; cursor: pointer; }
.btn-cancel-edit-tx.hidden { display: none; }
.tx-form-editing #btn-add-tx { background: var(--accent-hover); }

/* Progress Chart */
.progress-chart { margin-top: 8px; }
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
  padding: 8px 0;
}
.chart-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.chart-bar-fill {
  width: 100%;
  max-width: 40px;
  background: var(--accent-mid);
  border-radius: 6px 6px 0 0;
  min-height: 3px;
  transition: height 0.3s ease;
}
.chart-bar.current .chart-bar-fill {
  background: var(--accent);
}
.chart-bar-pct {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.chart-bar-label {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* Stats page */
.stats-section {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.stats-section h2 {
  font-size: 1.15rem;
  color: var(--text-heading);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stats-section h2 i { color: var(--accent); }
.stats-subtitle {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}
.stats-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.stats-metric:last-child { border-bottom: none; }
.stats-metric-label { font-size: 0.88rem; color: var(--text-secondary); }
.stats-metric-value { font-size: 0.95rem; font-weight: 700; color: var(--text-heading); }
.stats-cat-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.stats-cat-row { display: flex; align-items: center; gap: 8px; }
.stats-cat-name { font-size: 0.82rem; width: 90px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-cat-bar-container { flex: 1; height: 8px; background: var(--neutral); border-radius: 4px; overflow: hidden; }
.stats-cat-bar { height: 100%; border-radius: 4px; background: var(--danger); }
.stats-cat-amount { font-size: 0.78rem; font-weight: 600; color: var(--text-tertiary); min-width: 50px; text-align: right; }
.chart-bars-dual {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 160px;
  padding: 8px 0;
}
.chart-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 2px;
}
.chart-bar-pair {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  width: 100%;
  justify-content: center;
  flex: 1;
}
.chart-bar-income {
  width: 45%;
  max-width: 18px;
  background: var(--accent-mid);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
}
.chart-bar-expense {
  width: 45%;
  max-width: 18px;
  background: var(--danger);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  opacity: 0.7;
}
.chart-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--text-tertiary);
}
.chart-legend-item { display: flex; align-items: center; gap: 4px; }
.chart-legend-dot {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block;
}
.chart-legend-dot.income { background: var(--accent-mid); }
.chart-legend-dot.expense { background: var(--danger); opacity: 0.7; }

/* Chart toggle */
.stats-chart-toggle { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.stats-toggle-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-tertiary); cursor: pointer; font-size: 1.1rem; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.stats-toggle-btn:hover { color: var(--text-secondary); border-color: var(--accent); }
.stats-toggle-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Line chart */
.stats-line-chart { width: 100%; overflow: visible; }
.stats-line-chart polyline { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.stats-line-chart .line-area { stroke: none; opacity: 0.1; }
.stats-line-chart text { font-size: 10px; fill: var(--text-tertiary); text-anchor: middle; }
.stats-line-chart .val-text { font-size: 9px; fill: var(--text-secondary); font-weight: 700; }

/* Donut chart */
.stats-donut-container { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; padding: 8px 0; }
.stats-donut { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
.stats-donut svg { transform: rotate(-90deg); }
.stats-donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.stats-donut-value { font-size: 1.4rem; font-weight: 700; color: var(--text-heading); display: block; }
.stats-donut-label { font-size: 0.7rem; color: var(--text-tertiary); display: block; }
.stats-donut-legend { display: flex; flex-direction: column; gap: 6px; }
.stats-donut-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-secondary); }
.stats-donut-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Reminder hint */
.reminder-hint {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Gym alarm hint */
.gym-alarm-hint {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 10px 0 4px;
  line-height: 1.5;
}

/* Language selector */
.lang-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  background: var(--bg-card);
  color: var(--text-primary);
}

/* Input validation highlight */
.input-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px rgba(229,57,53,0.2) !important;
}

/* Onboarding */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
  padding: 20px;
}
.onboarding-card {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 40px 28px 28px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-login);
}
.onboarding-slide { display: none; animation: fadeIn 0.35s ease; }
.onboarding-slide.active { display: flex; flex-direction: column; align-items: center; }
.onboarding-icon { font-size: 3.5rem; margin-bottom: 14px; }
.onboarding-slide h2 {
  font-size: 1.25rem; font-weight: 700;
  color: var(--text-heading); margin-bottom: 10px; text-align: center;
}
.onboarding-slide p {
  font-size: 0.88rem; color: var(--text-secondary);
  line-height: 1.5; margin-bottom: 8px; text-align: center;
}
/* Mascota en slide 1 */
.onboarding-mascot-wrap { margin-bottom: 12px; }
.onboarding-mascot-img  { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.18)); }
.onboarding-mascot-fallback { font-size: 80px; line-height: 1; display: flex; align-items: center; justify-content: center; }
/* Features en slide 2 */
.onboarding-features {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; margin-top: 8px;
}
.onboarding-feature-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-input); border-radius: 12px; padding: 10px 14px;
}
.onboarding-feature-icon { font-size: 1.5rem; flex-shrink: 0; }
.onboarding-feature-item strong { font-size: 0.9rem; display: block; }
.onboarding-feature-item small  { font-size: 0.75rem; color: var(--text-tertiary); }
/* Botón Groq en slide 3 */
.onboarding-groq-btn {
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: white; border: none; border-radius: 12px;
  padding: 13px 28px; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; margin: 14px 0 8px;
  box-shadow: 0 4px 14px rgba(249,115,22,0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.onboarding-groq-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(249,115,22,0.4); }
.onboarding-groq-skip { font-size: 0.75rem; color: var(--text-tertiary); text-align: center; margin: 0; }
.onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 24px 0 20px;
}
.onboarding-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--neutral);
  transition: background 0.3s, transform 0.3s;
}
.onboarding-dot.active {
  background: var(--accent);
  transform: scale(1.2);
}
.onboarding-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.onboarding-btn-skip {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 10px 16px;
}
.onboarding-btn-next {
  background: var(--accent);
  color: var(--bg-card);
  border: none;
  border-radius: 10px;
  padding: 12px 32px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

/* ─── Mascota IA ──────────────────────────────────── */
@keyframes mascotBlink {
  0%, 88%, 100% { transform: scaleY(1); }
  93% { transform: scaleY(0.08); }
}
@keyframes mascotBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.mascot-avatar-wrap {
  animation: mascotBounce 2.6s ease-in-out infinite;
  flex-shrink: 0;
}
.mascot-avatar-emoji {
  font-size: 4rem;
  animation: mascotBounce 2.6s ease-in-out infinite;
  display: block;
  flex-shrink: 0;
  line-height: 1;
}
.mascot-eye {
  animation: mascotBlink 3.2s ease-in-out infinite;
  transform-origin: center;
}
.mascot-eye:nth-child(2) { animation-delay: 0.18s; }

.mascot-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}
.mascot-hero-info { flex: 1; }
.mascot-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
}
.mascot-mood-label {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.mascot-score-bar {
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  margin-top: 6px;
  overflow: hidden;
}
.mascot-score-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.mascot-bubble {
  background: var(--accent-light);
  border-radius: 14px 14px 14px 4px;
  padding: 12px 16px;
  font-size: 0.9rem;
  color: var(--accent-text);
  line-height: 1.5;
  border-left: 3px solid var(--accent);
}

/* Insights */
.mascot-insight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-light);
  animation: fadeIn 0.25s ease both;
}
.mascot-insight:last-child { border-bottom: none; }
.mascot-insight-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.mascot-insight-text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.45;
}
.mascot-insight.celebration .mascot-insight-text {
  color: var(--accent-text);
  font-weight: 600;
}
.mascot-insight.warning .mascot-insight-text {
  color: var(--danger);
}
.mascot-insight.tip .mascot-insight-text {
  color: var(--text-secondary);
  font-style: italic;
}

/* Personalizar */
.mascot-customize-toggle {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 0;
  font-family: inherit;
}
.mascot-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.95rem;
  margin: 8px 0 4px;
  font-family: inherit;
}
.mascot-emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.mascot-emoji-opt {
  font-size: 1.75rem;
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 9px;
  border: 2px solid transparent;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
  line-height: 1.2;
  user-select: none;
}
.mascot-emoji-opt.selected,
.mascot-emoji-opt:active {
  border-color: var(--accent);
  background: var(--accent-light);
}
.mascot-persona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 10px 0;
}
.mascot-persona-btn {
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 11px 8px;
  cursor: pointer;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.83rem;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
  text-align: center;
}
.mascot-persona-btn.active {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent-text);
  font-weight: 600;
}

/* Nav con 6 tabs */
.bottom-nav .nav-tab { font-size: 1.1rem; }

/* Dark mode adjustments */
[data-theme="dark"] .mascot-bubble {
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
  border-left-color: #4CAF50;
}
[data-theme="dark"] .mascot-name-input {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme="dark"] .mascot-persona-btn {
  background: var(--bg-card);
}

/* ─── Chat de la Mascota ────────────────────────── */
/* Collapsible sections */
.mascot-card-collapsible { padding-bottom: 4px; }
.mascot-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: inherit;
  padding: 0;
  text-align: left;
}
.mascot-toggle-arrow {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  transition: transform 0.2s;
}
.mascot-collapsible-body { margin-top: 10px; }
.mascot-insights-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  margin-left: 6px;
  vertical-align: middle;
}
.mascot-chat-card {
  display: flex;
  flex-direction: column;
}
.mascot-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mascot-ia-badge {
  font-size: 0.75rem;
  color: var(--accent-text, #22c55e);
  background: var(--accent-light, #dcfce7);
  padding: 3px 9px;
  border-radius: 10px;
  font-weight: 600;
}
.mascot-chat-history {
  min-height: 220px;
  max-height: min(520px, 52vh);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 8px;
  margin-bottom: 10px;
  flex: 1;
}
.mascot-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.mascot-msg.user { flex-direction: row-reverse; }
.mascot-msg-avatar {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
  align-self: flex-end;
}
.mascot-msg-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 82%;
}
.mascot-msg-bubble {
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 0.87rem;
  line-height: 1.48;
  word-break: break-word;
}
.mascot-msg.mascot .mascot-msg-bubble {
  background: var(--bg-input, #f0f0f0);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}
.mascot-msg.user .mascot-msg-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
  margin-left: auto;
}
.mascot-chat-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mascot-chat-input {
  flex: 1;
  padding: 11px 16px;
  border: 1.5px solid var(--border);
  border-radius: 24px;
  background: var(--bg-input, var(--bg-card));
  color: var(--text-primary);
  font-size: 0.93rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.mascot-chat-input:focus { border-color: var(--accent); }
.mascot-chat-send {
  width: 42px;
  height: 42px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.mascot-chat-send:hover { opacity: 0.85; }

/* Rich content */
.mascot-rich-content { margin-top: 4px; }
.mascot-routine-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  margin: 4px 0;
}
.mascot-routine-info { flex: 1; min-width: 0; }
.mascot-routine-info strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mascot-routine-info span {
  font-size: 0.76rem;
  color: var(--text-secondary);
}
.mascot-add-routine-btn {
  background: var(--accent-light);
  color: var(--accent-text);
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.8rem;
  white-space: nowrap;
  margin-left: 8px;
  font-family: inherit;
  transition: opacity 0.15s;
}
.mascot-add-routine-btn:hover { opacity: 0.8; }
.mascot-habit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0;
}
.mascot-habit-chip {
  font-size: 0.82rem;
  padding: 4px 10px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.mascot-habit-chip.done {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-light);
}
.mascot-confirm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 4px 0;
}
.mascot-confirm-row span {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-primary);
}
.mascot-confirm-yes {
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: inherit;
}
.mascot-confirm-no {
  background: var(--bg-input, #eee);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--text-secondary);
}

/* Confirm cards (habits + routine) */
.mascot-confirm-card {
  background: var(--bg-input, #f5f5f5);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 4px 0;
}
.mascot-habits-check-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.mascot-habit-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.87rem;
  cursor: pointer;
}
.mascot-habit-check-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.mascot-add-habits-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 600;
  width: 100%;
}
.mascot-save-routine-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 600;
  flex: 1;
}
.mascot-cancel-routine-btn {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
}
[data-theme="dark"] .mascot-confirm-card {
  background: #2a2a2a;
}

/* Dark mode - chat */
[data-theme="dark"] .mascot-msg.mascot .mascot-msg-bubble {
  background: #2a2a2a;
}
[data-theme="dark"] .mascot-chat-input {
  background: var(--bg-card);
  color: var(--text-primary);
}
[data-theme="dark"] .mascot-confirm-no {
  background: var(--bg-card);
  color: var(--text-secondary);
}

/* Typing indicator */
@keyframes mascotTyping {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
.mascot-typing-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-tertiary);
  margin: 0 2px;
  animation: mascotTyping 1.2s ease-in-out infinite;
}
.mascot-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.mascot-typing-dot:nth-child(3) { animation-delay: 0.4s; }
.mascot-chat-input:disabled { opacity: 0.6; }

/* ═══════════════════════════════════════════════════════
   AD BANNER — Banner de anuncios (plan Free)
   ═══════════════════════════════════════════════════════ */

.ad-banner {
  width: 100%;
  background: var(--bg-card-alt);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  position: relative;
  z-index: 100;
}
.ad-banner-inner {
  width: 100%;
  max-width: 500px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
}
.ad-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ad-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ad-placeholder-content {
  background: var(--border-light);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
}
.ad-placeholder-text {
  font-size: 0.8rem;
  color: var(--text-tertiary);
}

/* ═══════════════════════════════════════════════════════
   AD SIDEBAR — Anuncios laterales (solo desktop ancho)
   ═══════════════════════════════════════════════════════ */
.ad-sidebar {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  z-index: 100;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 8px;
  text-align: center;
}
.ad-sidebar-left  { left: 12px; }
.ad-sidebar-right { right: 12px; }
.ad-sidebar-label {
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.ad-sidebar .ad-remove-btn {
  display: block;
  margin: 6px auto 0;
  font-size: 0.65rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  padding: 3px 6px;
  cursor: pointer;
  white-space: nowrap;
}
.ad-sidebar .ad-remove-btn:hover { color: var(--primary); border-color: var(--primary); }

@media (min-width: 1280px) {
  .ad-sidebar { display: block; }
  .ad-banner   { display: none !important; }
}
.ad-remove-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.ad-remove-btn:hover { background: var(--accent); color: white; }
[data-theme="dark"] .ad-placeholder-content { background: var(--bg-input); border-color: var(--border); }

/* ═══════════════════════════════════════════════════════
   PRICING — Modal de planes y badges de perfil
   ═══════════════════════════════════════════════════════ */

/* Upgrade prompt banner (aparece en la parte inferior) */
.upgrade-prompt-banner {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1.5px solid var(--accent);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  max-width: min(92vw, 420px);
  animation: slideUpBanner 0.3s ease;
}
@keyframes slideUpBanner {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.upgrade-prompt-msg { flex: 1; font-size: 0.85rem; color: var(--text-primary); }
.upgrade-prompt-btn {
  background: var(--accent); color: white;
  border: none; border-radius: 8px;
  padding: 6px 12px; font-size: 0.82rem;
  cursor: pointer; white-space: nowrap;
}
.upgrade-prompt-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-tertiary); font-size: 1rem; padding: 2px 4px;
}

/* Modal overlay */
.pricing-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}
.pricing-modal-overlay.hidden { display: none; }

/* Modal box */
.pricing-modal {
  background: var(--bg-card);
  border-radius: 20px;
  width: 100%; max-width: 680px;
  max-height: 90vh; overflow-y: auto;
  padding: 24px 20px 28px;
  position: relative;
}
.pricing-close {
  position: absolute; top: 14px; right: 16px;
  background: var(--bg-input); border: none;
  border-radius: 50%; width: 32px; height: 32px;
  cursor: pointer; font-size: 1rem;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
}
.pricing-modal-head { text-align: center; margin-bottom: 20px; }
.pricing-modal-head h2 { margin: 0 0 4px; font-size: 1.4rem; color: var(--text-heading); }
.pricing-subtitle { margin: 0; font-size: 0.8rem; color: var(--text-tertiary); }

/* Cards grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.pricing-card {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 18px 16px 16px;
  position: relative;
  display: flex; flex-direction: column;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.pricing-card--current {
  border-color: var(--plan-color, var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--plan-color, var(--accent)) 20%, transparent);
}
.pricing-card--featured {
  border-color: var(--plan-color, var(--accent));
}
.pricing-popular {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--plan-color, var(--accent));
  color: white; font-size: 0.68rem; font-weight: 700;
  padding: 2px 10px; border-radius: 20px; white-space: nowrap;
  letter-spacing: 0.04em;
}
.pricing-card-top { text-align: center; margin-bottom: 14px; }
.pricing-plan-emoji { font-size: 1.8rem; display: block; margin-bottom: 4px; }
.pricing-plan-name { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--text-heading); }
.pricing-price-block { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.pricing-amount { font-size: 1.4rem; font-weight: 700; color: var(--plan-color, var(--accent)); }
.pricing-amount--trial { color: #FF9800; }
.pricing-period { font-size: 0.75rem; color: var(--text-tertiary); }

/* Features list */
.pricing-features {
  list-style: none; margin: 0 0 16px; padding: 0;
  flex: 1; display: flex; flex-direction: column; gap: 7px;
}
.pricing-feature {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 0.82rem; color: var(--text-primary);
}
.pricing-feature--no { color: var(--text-tertiary); }
.pricing-feature-icon {
  font-size: 0.78rem; font-weight: 700; width: 14px; flex-shrink: 0; margin-top: 1px;
}
.pricing-feature--ok .pricing-feature-icon { color: var(--plan-color, var(--accent)); }
.pricing-feature--no .pricing-feature-icon { color: var(--text-muted); }

/* CTA button */
.pricing-select-btn {
  width: 100%; padding: 10px;
  background: var(--plan-color, var(--accent));
  color: white; border: none; border-radius: 10px;
  font-size: 0.88rem; font-weight: 600; cursor: pointer;
  transition: opacity 0.15s;
}
.pricing-select-btn:hover:not(:disabled) { opacity: 0.87; }
.pricing-select-btn--current { background: var(--bg-input); color: var(--text-secondary); cursor: default; }
.pricing-select-btn:disabled { cursor: default; }
.pricing-btn-test { font-weight: 400; font-size: 0.78rem; opacity: 0.85; }

/* ─── Badge de plan en la página de Perfil ─── */
.profile-plan-section { width: 100%; margin: 4px 0 8px; }
.profile-plan-row {
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--plan-color, var(--accent)) 10%, var(--bg-card));
  border: 1.5px solid var(--plan-color, var(--accent));
  border-radius: 14px; padding: 12px 14px;
}
.profile-plan-info { display: flex; align-items: center; gap: 10px; }
.profile-plan-emoji { font-size: 1.5rem; }
.profile-plan-name { font-weight: 700; font-size: 0.95rem; color: var(--text-heading); }
.profile-plan-desc { font-size: 0.78rem; color: var(--text-tertiary); }
.profile-plan-upgrade-btn {
  background: var(--plan-color, var(--accent)); color: white;
  border: none; border-radius: 10px; padding: 7px 14px;
  font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}

#confirm-payment-banner {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: var(--bg-card); border: 2px solid var(--accent);
  border-radius: 16px; padding: 16px 20px; z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25); width: 90%; max-width: 380px;
}
.confirm-payment-inner { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.confirm-payment-msg { margin: 0; font-size: 0.9rem; color: var(--text-secondary); text-align: center; }
.confirm-payment-btn {
  width: 100%; padding: 12px; background: var(--accent); color: white;
  border: none; border-radius: 12px; font-size: 0.95rem; font-weight: 700; cursor: pointer;
}
.confirm-payment-cancel {
  background: none; border: none; color: var(--text-tertiary);
  font-size: 0.8rem; cursor: pointer; text-decoration: underline;
}
.trial-badge {
  display: inline-block; background: #FF9800; color: white;
  font-size: 0.6rem; font-weight: 700; padding: 1px 6px;
  border-radius: 6px; vertical-align: middle; margin-left: 4px;
}
.pricing-trial-badge {
  background: #FF9800; color: white; text-align: center;
  font-size: 0.75rem; font-weight: 700; padding: 5px 10px;
  border-radius: 8px; margin-bottom: 8px;
}
.plan-cancel-btn {
  width: 100%; margin-top: 8px; padding: 7px;
  background: none; border: 1.5px solid var(--text-tertiary);
  border-radius: 10px; color: var(--text-tertiary);
  font-size: 0.78rem; cursor: pointer;
}
.plan-cancel-btn:hover { border-color: #e53935; color: #e53935; }
.plan-cancelled-note {
  font-size: 0.75rem; color: var(--text-tertiary);
  margin: 6px 0 0; text-align: center;
}

/* Dark mode adjustments */
[data-theme="dark"] .pricing-modal { background: var(--bg-card); }
[data-theme="dark"] .pricing-card { border-color: var(--border); }
[data-theme="dark"] .upgrade-prompt-banner { background: var(--bg-card); }

/* ═══════════════════════════════════════════════════════
   EXPORT — Sección de exportar datos en Perfil
   ═══════════════════════════════════════════════════════ */
.profile-export-card {
  width: 100%;
  background: var(--bg-card-alt);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 4px 0 8px;
}
.profile-export-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 10px;
}
.profile-export-btns { display: flex; gap: 10px; }
.profile-export-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: white;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.profile-export-btn:hover { opacity: 0.87; }
.profile-export-btn.locked {
  background: var(--bg-input);
  border-color: var(--border);
  color: var(--text-tertiary);
}
.profile-export-hint {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 8px;
  text-align: center;
}
.export-plan-tag {
  font-size: 0.68rem;
  background: var(--border);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 1px 6px;
  font-weight: 700;
}
.profile-export-btn.report-btn {
  background: var(--bg-input);
  border-color: var(--border);
  color: var(--text-primary);
}
.profile-export-btn.report-btn:hover { background: var(--border); }

/* ═══════════════════════════════════════════════════════
   MONTHLY REPORT — Modal de reporte mensual
   ═══════════════════════════════════════════════════════ */
.monthly-report-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
  animation: fadeIn 0.2s ease;
}
.monthly-report-modal {
  background: var(--bg-card);
  border-radius: 20px 20px 0 0;
  width: 100%; max-width: 540px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.25s ease;
}
@keyframes slideUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.monthly-report-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.monthly-report-title { font-size: 1.15rem; font-weight: 700; color: var(--text-heading); margin: 0; }
.monthly-report-sub   { font-size: 0.78rem; color: var(--text-tertiary); margin-top: 2px; }
.monthly-report-close {
  background: var(--bg-input); border: none; border-radius: 50%;
  width: 30px; height: 30px; cursor: pointer;
  color: var(--text-secondary); font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.monthly-report-body {
  overflow-y: auto; padding: 16px 18px 24px;
  display: flex; flex-direction: column; gap: 4px;
}

/* Secciones */
.report-section {
  background: var(--bg-card-alt);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.report-section-title {
  font-size: 0.88rem; font-weight: 700; color: var(--text-heading);
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.report-global-pct {
  font-size: 0.78rem; font-weight: 600;
  background: var(--accent); color: white;
  padding: 2px 8px; border-radius: 20px;
}
.report-empty { text-align: center; color: var(--text-tertiary); padding: 24px 0; font-size: 0.9rem; }

/* Hábitos */
.report-habit-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.report-habit-info  { display: flex; align-items: center; gap: 6px; width: 120px; flex-shrink: 0; }
.report-habit-emoji { font-size: 1rem; }
.report-habit-name  { font-size: 0.8rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-habit-bar-wrap {
  flex: 1; height: 7px; background: var(--border-light);
  border-radius: 4px; overflow: hidden;
}
.report-habit-bar { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.report-habit-pct { font-size: 0.78rem; font-weight: 700; width: 36px; text-align: right; flex-shrink: 0; }

/* Finanzas */
.report-fin-cards {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.report-fin-card {
  flex: 1; background: var(--bg-card); border-radius: 10px;
  padding: 10px 8px; text-align: center;
  border: 1.5px solid var(--border-light);
}
.report-fin-card.income  { border-color: #4CAF5030; }
.report-fin-card.expense { border-color: #ef535030; }
.report-fin-amount { font-size: 1rem; font-weight: 700; color: var(--text-heading); }
.report-fin-card.income  .report-fin-amount { color: #4CAF50; }
.report-fin-card.expense .report-fin-amount { color: #ef5350; }
.report-fin-label  { font-size: 0.7rem; color: var(--text-tertiary); margin-top: 2px; }
.report-cats-title { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 7px; }
.report-cat-row {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
}
.report-cat-icon { font-size: 0.95rem; width: 20px; text-align: center; flex-shrink: 0; }
.report-cat-name { font-size: 0.78rem; color: var(--text-primary); width: 80px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-cat-bar-wrap { flex: 1; height: 6px; background: var(--border-light); border-radius: 3px; overflow: hidden; }
.report-cat-bar  { height: 100%; background: #ef5350; border-radius: 3px; }
.report-cat-amount { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); width: 44px; text-align: right; flex-shrink: 0; }

/* Gym */
.report-gym-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.report-gym-big  { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.report-gym-info { flex: 1; }
.report-gym-label { font-size: 0.78rem; color: var(--text-tertiary); }
.report-gym-days { display: flex; flex-wrap: wrap; gap: 5px; }
.report-gym-day {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 8px; font-size: 0.75rem; color: var(--text-secondary);
}

/* ─── Welcome Splash — widget esquina inferior derecha ─── */
@keyframes mascotSplashIn {
  0%   { opacity: 0; transform: translateY(60px) scale(0.85); }
  65%  { transform: translateY(-8px) scale(1.03); }
  85%  { transform: translateY(3px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mascotBubbleIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mascotSplashOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(40px); }
}

/* Widget flotante */
.mascot-splash-widget {
  position: fixed;
  bottom: 72px; right: 14px;
  z-index: 9999;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0;
  animation: mascotSplashIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: none;
}
.mascot-splash-widget.mascot-splash-out {
  animation: mascotSplashOut 0.38s ease forwards;
}

/* Burbuja de mensaje */
.mascot-splash-bubble {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 16px 16px 16px 4px;
  padding: 13px 14px 12px;
  max-width: 230px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  pointer-events: all;
  cursor: pointer;
  animation: mascotBubbleIn 0.4s ease 0.35s both;
  margin-right: 20px;
  margin-bottom: 4px;
}
/* Cola de la burbuja apuntando abajo-derecha */
.mascot-splash-tail {
  position: absolute;
  bottom: -10px; right: 18px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 4px solid transparent;
  border-top: 10px solid var(--bg-card);
}
.mascot-splash-tail::before {
  content: '';
  position: absolute;
  bottom: 1px; right: -5px;
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 5px solid transparent;
  border-top: 11px solid var(--border-light);
  z-index: -1;
}

/* Botón cerrar */
.mascot-splash-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; cursor: pointer;
  font-size: 0.75rem; color: var(--text-tertiary);
  padding: 2px 4px; line-height: 1;
  pointer-events: all;
}
.mascot-splash-close:hover { color: var(--text-primary); }

.mascot-splash-name {
  font-size: 0.72rem; font-weight: 700;
  color: var(--accent-text); letter-spacing: 0.05em;
  text-transform: uppercase; margin-bottom: 5px;
  padding-right: 14px;
}
.mascot-splash-msg {
  font-size: 0.85rem; color: var(--text-primary);
  line-height: 1.45;
}

/* Imagen PNG */
.mascot-splash-img-wrap {
  width: 90px; height: 90px;
  cursor: pointer; pointer-events: all;
  flex-shrink: 0;
}
.mascot-splash-img {
  width: 90px; height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.22));
  transition: transform 0.2s ease;
}
.mascot-splash-img:hover { transform: scale(1.08); }

/* Fallback (emoji o SVG si no hay PNG) */
.mascot-splash-img-fallback {
  width: 90px; height: 90px;
  font-size: 64px; line-height: 1;
  align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
}
.mascot-splash-img-fallback .mascot-svg { width: 90px; height: 90px; }

/* ─── Modal Guía Groq ─── */
.groq-guide-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.groq-guide-overlay.hidden { display: none; }
.groq-guide-modal {
  background: var(--bg-card); border-radius: 20px;
  padding: 24px; max-width: 360px; width: 100%;
  position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: fadeIn 0.25s ease;
}
.groq-guide-close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; font-size: 1rem;
  color: var(--text-tertiary); cursor: pointer; padding: 4px 8px;
}
.groq-guide-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.groq-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.groq-step  { display: flex; align-items: flex-start; gap: 12px; }
.groq-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; flex-shrink: 0; margin-top: 2px;
}
.groq-step-body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.groq-step-body strong { font-size: 0.88rem; color: var(--text-primary); }
.groq-step-body small  { font-size: 0.76rem; color: var(--text-tertiary); }
.groq-link-btn {
  display: inline-block; margin-top: 6px;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--accent-text); border-radius: 8px;
  padding: 7px 12px; font-size: 0.82rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.groq-guide-input {
  width: 100%; box-sizing: border-box;
  background: var(--bg-input); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
  font-size: 0.88rem; color: var(--text-primary);
  margin-top: 6px; outline: none; font-family: monospace;
}
.groq-guide-input:focus { border-color: var(--accent); }
.groq-guide-save-btn {
  width: 100%; background: var(--accent); color: white;
  border: none; border-radius: 12px; padding: 13px;
  font-size: 0.95rem; font-weight: 700; cursor: pointer;
  transition: opacity 0.2s;
}
.groq-guide-save-btn:hover { opacity: 0.9; }

/* Botón activar IA en mascot customize */
.mascot-activate-ia-btn {
  width: 100%; margin-top: 8px;
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: white; border: none; border-radius: 10px;
  padding: 11px; font-size: 0.88rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 3px 10px rgba(249,115,22,0.3);
  transition: transform 0.15s;
}
.mascot-activate-ia-btn:hover { transform: translateY(-1px); }

/* ─── Modal de downgrade de plan ─── */
.downgrade-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.downgrade-modal {
  background: var(--bg-card); border-radius: 20px; padding: 24px;
  width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
}
.downgrade-modal h3 { margin: 0 0 12px; font-size: 1.1rem; }
.downgrade-intro { font-size: 0.88rem; color: var(--text-secondary); margin: 0 0 16px; }
.downgrade-section { margin-bottom: 20px; }
.downgrade-section h4 { margin: 0 0 4px; font-size: 0.92rem; display: flex; align-items: center; gap: 8px; }
.downgrade-limit { background: #ef4444; color: #fff; font-size: 0.7rem; padding: 2px 7px; border-radius: 99px; font-weight: 700; }
.downgrade-hint { font-size: 0.78rem; color: var(--text-tertiary); margin: 0 0 10px; }
.downgrade-list { display: flex; flex-direction: column; gap: 6px; }
.downgrade-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-secondary); border-radius: 10px; padding: 9px 12px;
  cursor: pointer; font-size: 0.88rem; transition: background 0.15s;
}
.downgrade-item:has(input:checked) { background: color-mix(in srgb, var(--accent) 15%, var(--bg-secondary)); }
.downgrade-item input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }
.downgrade-confirm-btn {
  width: 100%; padding: 13px; border: none; border-radius: 12px;
  background: var(--accent); color: #fff; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; margin-top: 4px;
}
.downgrade-confirm-btn:hover { opacity: 0.9; }
.downgrade-upgrade-btn {
  width: 100%; padding: 13px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #a855f7, #6366f1); color: #fff;
  font-size: 0.95rem; font-weight: 700; cursor: pointer; margin-top: 4px;
}
.downgrade-upgrade-btn:hover { opacity: 0.9; }
.downgrade-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0; color: var(--text-tertiary); font-size: 0.8rem;
}
.downgrade-divider::before, .downgrade-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ═══════════════════════════════════════
   GYM PAGE HEADER
═══════════════════════════════════════ */
.gym-page-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0 14px;
}
.gym-page-title {
  font-size: 1.4rem; font-weight: 700; color: var(--text-heading); margin: 0;
}

/* Training mode tabs (Gym | Deporte | Gaming) */
.training-tabs {
  display: flex; gap: 6px;
  background: var(--bg-card-alt); border-radius: 12px;
  padding: 4px; border: 1px solid var(--border);
}
.training-tab {
  padding: 7px 14px; border: none; border-radius: 9px;
  background: transparent; font-size: 0.82rem; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.training-tab.active {
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.training-tab:not(.active):hover { background: var(--border-light); color: var(--text-primary); }

/* Gym sub-tabs (Hoy | Rutinas | Cuerpo | Config) */
.gym-sub-tabs {
  display: flex; gap: 4px; margin-bottom: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 4px;
}
.gym-tab {
  flex: 1; padding: 8px 4px; border: none; border-radius: 9px;
  background: transparent; font-size: 0.84rem; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.gym-tab.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.gym-tab:not(.active):hover { background: var(--border-light); color: var(--text-primary); }

/* Gym KPI row */
.gym-kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px;
}
.gym-kpi-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  display: flex; align-items: center; gap: 12px;
  position: relative; overflow: hidden;
}
.gym-kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 4px; height: 100%; border-radius: 14px 0 0 14px;
}
.gkpi-blue::before   { background: #3b82f6; }
.gkpi-green::before  { background: #22c55e; }
.gkpi-orange::before { background: #f97316; }
.gkpi-purple::before { background: #a855f7; }

.gym-kpi-icon {
  font-size: 1.5rem; width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.gkpi-blue   .gym-kpi-icon { background: #eff6ff; }
.gkpi-green  .gym-kpi-icon { background: #f0fdf4; }
.gkpi-orange .gym-kpi-icon { background: #fff7ed; }
.gkpi-purple .gym-kpi-icon { background: #faf5ff; }
[data-theme="dark"] .gkpi-blue   .gym-kpi-icon { background: rgba(59,130,246,0.15); }
[data-theme="dark"] .gkpi-green  .gym-kpi-icon { background: rgba(34,197,94,0.15); }
[data-theme="dark"] .gkpi-orange .gym-kpi-icon { background: rgba(249,115,22,0.15); }
[data-theme="dark"] .gkpi-purple .gym-kpi-icon { background: rgba(168,85,247,0.15); }

.gym-kpi-body { min-width: 0; }
.gym-kpi-label {
  font-size: 0.67rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-tertiary);
}
.gym-kpi-value {
  font-size: 1.5rem; font-weight: 700; color: var(--text-heading); line-height: 1.15;
}
.gym-kpi-small { font-size: 0.9rem; font-weight: 400; color: var(--text-tertiary); }
.gym-kpi-routine-name {
  font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gym-kpi-sub { font-size: 0.71rem; color: var(--text-tertiary); margin-top: 1px; }

/* Attend card */
.gym-attend-card { padding: 14px 18px !important; }
.gym-attend-row { display: flex; align-items: center; gap: 16px; }
.gym-attend-right { flex: 1; display: flex; align-items: center; gap: 10px; }
.gym-attend-bar { flex: 1; margin: 0 !important; }
.gym-attend-btn { white-space: nowrap; }

@media (max-width: 900px) { .gym-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) {
  .gym-page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .gym-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
.training-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 600; color: var(--accent-text);
  cursor: pointer; margin-bottom: 16px; padding: 6px 0;
  transition: opacity 0.15s;
}
.training-back-btn:hover { opacity: 0.75; }

/* ═══════════════════════════════════════
   SPORT SECTION
═══════════════════════════════════════ */
.sport-section {
  padding: 8px 0 32px;
}
.sport-title {
  font-size: 1.1rem; font-weight: 700; color: var(--text-heading);
  margin: 0 0 4px;
}
.sport-subtitle {
  font-size: 0.82rem; color: var(--text-secondary); margin: 0 0 18px;
}
.sport-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 12px;
}
.sport-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 16px 12px;
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 14px; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  position: relative;
}
.sport-card:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(76,175,80,0.12);
}
.sport-card--selected {
  border-color: var(--accent); background: var(--accent-light);
}
.sport-icon { font-size: 2rem; }
.sport-name { font-size: 0.85rem; font-weight: 600; color: var(--text-heading); text-align: center; }
.sport-check {
  position: absolute; top: 8px; right: 10px;
  color: var(--accent); font-size: 1rem; font-weight: 700;
}
.sport-custom-form {
  display: flex; gap: 8px; margin-top: 8px;
}
.sport-custom-input {
  flex: 1; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px 14px; font-size: 0.9rem;
  background: var(--bg-card); color: var(--text-primary);
  outline: none;
}
.sport-custom-input:focus { border-color: var(--accent); }
.sport-custom-confirm {
  padding: 10px 16px; border: none; border-radius: 10px;
  background: var(--accent); color: #fff;
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.sport-skills-list {
  display: flex; flex-direction: column; gap: 10px;
}
.sport-skill-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 14px 16px; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.sport-skill-card:hover {
  border-color: var(--accent); transform: translateX(4px);
}
.sport-skill-name { font-size: 0.95rem; font-weight: 700; color: var(--text-heading); }
.sport-skill-desc { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }
.sport-skill-arrow { margin-left: auto; color: var(--accent); font-size: 1.1rem; flex-shrink: 0; }
.sport-drills-list {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;
}
.sport-drill-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px;
}
.sport-drill-header {
  display: flex; align-items: flex-start; gap: 12px;
}
.sport-drill-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-light); color: var(--accent-text);
  font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.sport-drill-info { flex: 1; min-width: 0; }
.sport-drill-name { font-size: 0.92rem; font-weight: 700; color: var(--text-heading); }
.sport-drill-desc { font-size: 0.78rem; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }
.sport-drill-duration {
  font-size: 0.75rem; color: var(--text-tertiary); font-weight: 600;
  white-space: nowrap; flex-shrink: 0; margin-top: 2px;
}
.sport-create-routine-btn {
  width: 100%; padding: 14px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff; font-size: 0.95rem; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.sport-create-routine-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.sport-create-routine-btn:disabled { opacity: 0.7; cursor: default; transform: none; }

/* ═══════════════════════════════════════
   GAMING SECTION
═══════════════════════════════════════ */
.gaming-section {
  padding: 8px 0 32px;
}
.gaming-title {
  font-size: 1.1rem; font-weight: 700; color: var(--text-heading);
  margin: 0 0 4px;
}
.gaming-subtitle {
  font-size: 0.82rem; color: var(--text-secondary); margin: 0 0 18px;
}
.gaming-game-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 12px;
}
.gaming-game-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 14px 10px;
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 14px; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.gaming-game-card:hover {
  border-color: #a855f7; transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(168,85,247,0.13);
}
.gaming-game-card--current {
  border-color: #a855f7;
  box-shadow: 0 0 0 2px rgba(168,85,247,0.2);
  position: relative;
}
.gaming-game-current-badge {
  position: absolute; top: 7px; right: 8px;
  background: #a855f7; color: #fff;
  font-size: 0.7rem; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.gaming-game-logo {
  width: 64px; height: 64px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.gaming-logo-img {
  width: 38px; height: 38px; object-fit: contain; filter: brightness(0) invert(1);
}
.gaming-custom-icon { font-size: 1.8rem; }
.gaming-game-name { font-size: 0.82rem; font-weight: 600; color: var(--text-heading); text-align: center; line-height: 1.2; }
.gaming-custom-form {
  display: flex; gap: 8px; margin-top: 8px;
}
.gaming-custom-input {
  flex: 1; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px 14px; font-size: 0.9rem;
  background: var(--bg-card); color: var(--text-primary); outline: none;
}
.gaming-custom-input:focus { border-color: #a855f7; }
.gaming-custom-confirm {
  padding: 10px 16px; border: none; border-radius: 10px;
  background: #a855f7; color: #fff;
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
/* Setup header */
.gaming-setup-header {
  display: flex; align-items: center; gap: 12px;
  border-radius: 14px; padding: 14px 18px; margin-bottom: 4px;
  color: #fff;
}
.gaming-setup-logo-img {
  width: 36px; height: 36px; object-fit: contain;
  filter: brightness(0) invert(1); flex-shrink: 0;
}
.gaming-setup-header-name {
  font-size: 1.05rem; font-weight: 700;
}
/* Profile header */
.gaming-profile-header {
  display: flex; align-items: center; gap: 14px;
  border-radius: 16px; padding: 16px 18px; margin-bottom: 16px;
  color: #fff;
}
.gaming-profile-logo {
  width: 48px; height: 48px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.gaming-profile-logo-img {
  width: 40px; height: 40px; object-fit: contain;
  filter: brightness(0) invert(1);
}
.gaming-profile-icon { font-size: 2.2rem; }
.gaming-profile-info { flex: 1; min-width: 0; }
.gaming-profile-name { font-size: 1rem; font-weight: 700; }
.gaming-profile-rank { font-size: 0.85rem; opacity: 0.85; margin-top: 2px; }
.gaming-profile-role { font-size: 0.78rem; opacity: 0.65; margin-top: 2px; }
.gaming-edit-profile-btn {
  background: rgba(255,255,255,0.15); border: none;
  border-radius: 8px; padding: 6px 10px; color: #fff;
  font-size: 0.9rem; cursor: pointer; flex-shrink: 0;
}
.gaming-edit-profile-btn:hover { background: rgba(255,255,255,0.25); }
/* Stats */
.gaming-stats-row {
  display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
}
.gaming-stat-card {
  flex: 1; min-width: 70px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; text-align: center;
}
.gaming-stat-card--good { border-color: var(--accent); background: var(--accent-light); }
.gaming-stat-value { font-size: 1.05rem; font-weight: 800; color: var(--text-heading); }
.gaming-stat-label { font-size: 0.7rem; color: var(--text-tertiary); margin-top: 2px; }
/* Log session button */
.gaming-log-session-btn {
  width: 100%; padding: 14px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #fff; font-size: 0.95rem; font-weight: 700; cursor: pointer;
  margin-bottom: 20px; transition: opacity 0.15s, transform 0.15s;
}
.gaming-log-session-btn:hover { opacity: 0.9; transform: translateY(-1px); }
/* No sessions placeholder */
.gaming-no-sessions {
  text-align: center; color: var(--text-tertiary);
  font-size: 0.85rem; padding: 24px 16px; line-height: 1.6;
  background: var(--bg-card-alt); border-radius: 14px; margin-bottom: 20px;
}
/* History */
.gaming-history-section { margin-bottom: 20px; }
.gaming-history-title {
  font-size: 0.9rem; font-weight: 700; color: var(--text-heading);
  margin: 0 0 10px;
}
.gaming-session-card {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
}
.gaming-session-win { border-color: #4CAF50; background: #f0fbf1; }
.gaming-session-loss { border-color: #e53935; background: #fff5f5; }
.gaming-session-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.gaming-session-result { font-size: 0.88rem; font-weight: 700; color: var(--text-heading); }
.gaming-session-date { font-size: 0.75rem; color: var(--text-tertiary); margin-left: auto; }
.gaming-rank-change { font-size: 0.78rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.gaming-rank-up { background: #e8f5e9; color: #2e7d32; }
.gaming-rank-down { background: #ffebee; color: #c62828; }
.gaming-session-kda { font-size: 0.82rem; color: var(--text-secondary); }
.gaming-session-notes { font-size: 0.78rem; color: var(--text-tertiary); margin-top: 4px; font-style: italic; }
/* Tips */
.gaming-tips-section { margin-top: 4px; }
.gaming-tips-title { font-size: 0.9rem; font-weight: 700; color: var(--text-heading); margin: 0 0 10px; }
.gaming-tips-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gaming-tip-item {
  font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5;
  background: var(--bg-card); border-radius: 10px; padding: 10px 13px;
  border-left: 3px solid #a855f7;
}
/* Setup form */
.gaming-setup-form { display: flex; flex-direction: column; gap: 16px; }
.gaming-setup-field { display: flex; flex-direction: column; gap: 6px; }
.gaming-setup-label { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }
.gaming-setup-input, .gaming-setup-select {
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 11px 14px; font-size: 0.9rem;
  background: var(--bg-card); color: var(--text-primary); outline: none;
}
.gaming-setup-input:focus, .gaming-setup-select:focus { border-color: #a855f7; }
.gaming-setup-save-btn {
  padding: 14px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #fff; font-size: 0.95rem; font-weight: 700; cursor: pointer;
  margin-top: 4px; transition: opacity 0.15s;
}
.gaming-setup-save-btn:hover { opacity: 0.9; }
/* Session form */
.gaming-form { display: flex; flex-direction: column; gap: 18px; }
.gaming-form-field { display: flex; flex-direction: column; gap: 6px; }
.gaming-form-label { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }
.gaming-form-input {
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 11px 14px; font-size: 0.9rem;
  background: var(--bg-card); color: var(--text-primary); outline: none;
}
.gaming-form-input:focus { border-color: #a855f7; }
.gaming-form-textarea {
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 11px 14px; font-size: 0.9rem; min-height: 80px; resize: vertical;
  background: var(--bg-card); color: var(--text-primary); outline: none;
}
.gaming-form-textarea:focus { border-color: #a855f7; }
.gaming-result-toggle { display: flex; gap: 10px; }
.gaming-result-btn {
  flex: 1; padding: 12px; border: 2px solid var(--border);
  border-radius: 12px; font-size: 0.9rem; font-weight: 700;
  background: var(--bg-card); color: var(--text-secondary); cursor: pointer;
  transition: all 0.15s;
}
.gaming-result-btn--win.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent-text); }
.gaming-result-btn--loss.active { border-color: var(--danger); background: var(--danger-light); color: var(--danger-text); }
.gaming-kda-row {
  display: flex; align-items: center; gap: 6px;
}
.gaming-kda-group { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.gaming-kda-input {
  width: 100%; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px 8px; font-size: 1rem; font-weight: 700; text-align: center;
  background: var(--bg-card); color: var(--text-heading); outline: none;
}
.gaming-kda-input:focus { border-color: #a855f7; }
.gaming-kda-label { font-size: 0.7rem; color: var(--text-tertiary); font-weight: 600; }
.gaming-kda-sep { font-size: 1.2rem; color: var(--text-tertiary); font-weight: 300; margin-bottom: 18px; }
.gaming-rank-row { display: flex; gap: 8px; }
.gaming-save-session-btn {
  padding: 14px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #fff; font-size: 0.95rem; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.gaming-save-session-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* ─── Habits layout: sidebar + main ─── */
.habits-layout {
  display: flex; gap: 16px; align-items: flex-start;
}
.habits-sidebar {
  width: 240px; flex-shrink: 0; position: sticky; top: 12px;
}
.habits-main { flex: 1; min-width: 0; }

.sidebar-month {
  font-size: 1.3rem; font-weight: 700; color: var(--text-heading);
  margin: 0 0 8px; text-align: center;
}
.sidebar-month-nav {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 14px;
}
.nav-btn-sm {
  padding: 6px 18px; font-size: 1.1rem;
}
.sidebar-section-title {
  font-size: 0.95rem; font-weight: 700; color: var(--text-heading);
  margin: 0 0 12px;
}
.add-habit-form--col {
  flex-direction: column !important; align-items: stretch !important;
}
.add-habit-form--col #habit-input { min-width: 0; width: 100%; }
.btn-add-full { width: 100%; justify-content: center; }

.habit-chart-svg { width: 100%; height: auto; display: block; }

.habit-chart-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px;
}
.hchart-btns { display: flex; gap: 4px; }
.hchart-btn {
  background: none; border: 1px solid var(--border); border-radius: 7px;
  width: 28px; height: 28px; font-size: 0.85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); transition: background 0.15s, border-color 0.15s;
}
.hchart-btn:hover { background: var(--accent-light); border-color: var(--accent); }
.hchart-btn.active { background: var(--accent-light); border-color: var(--accent); }

#habit-chart-svg-wrap:hover .habit-chart-svg { opacity: 0.85; }
.hchart-expand-hint {
  font-size: 0.65rem; color: var(--text-tertiary); text-align: right;
  margin: 4px 0 0; cursor: pointer;
}

/* Modal gráfica */
.hchart-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.hchart-modal.hidden { display: none; }
.hchart-modal-box {
  background: var(--bg-card); border-radius: 18px;
  padding: 24px 28px; width: min(780px, 95vw);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  border: 1px solid var(--border);
}
.hchart-modal-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.hchart-modal-title {
  font-size: 1rem; font-weight: 700; color: var(--text-heading); flex: 1;
}
.hchart-modal-close {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  width: 32px; height: 32px; font-size: 1.2rem; cursor: pointer;
  color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.hchart-modal-close:hover { background: var(--danger-light); color: var(--danger-text); }

/* Fix tabla estirada: columnas de días con ancho fijo */
.week-table { width: auto; min-width: 100%; table-layout: fixed; }
.week-table thead th:not(:first-child) { width: 68px; }
.week-table thead th:last-child { width: 52px; } /* acciones */
.week-table tbody td:first-child { width: 180px; max-width: 180px; }

@media (max-width: 800px) {
  .habits-layout { flex-direction: column; }
  .habits-sidebar { width: 100%; position: static; }
  .add-habit-form--col { flex-direction: row !important; flex-wrap: wrap; }
}

/* ─── Habit Hero & Stats ─── */
.habit-hero-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #1a472a 0%, #2d6a4f 50%, #40916c 100%);
  border-radius: 18px; padding: 22px 28px;
  margin-bottom: 16px; overflow: hidden; position: relative;
}
.habit-hero-banner::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255,255,255,0.06); pointer-events: none;
}
.habit-hero-banner::after {
  content: ''; position: absolute; bottom: -60px; right: 80px;
  width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255,255,255,0.04); pointer-events: none;
}
.habit-hero-text { position: relative; z-index: 1; }
.habit-greeting {
  font-size: 1.6rem; font-weight: 700; color: #fff; margin: 0 0 4px; letter-spacing: -0.02em;
}
.habit-date {
  font-size: 0.85rem; color: rgba(255,255,255,0.65); margin: 0;
}
.habit-hero-ring {
  position: relative; z-index: 1; width: 72px; height: 72px; flex-shrink: 0;
}
.habit-hero-ring svg { width: 100%; height: 100%; }

.habit-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 20px;
}
.habit-stat-card {
  background: var(--bg-card); border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.habit-stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.1); }
.habit-stat-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 4px; height: 100%; border-radius: 14px 0 0 14px;
}
.hstat-blue::before  { background: #3b82f6; }
.hstat-orange::before { background: #f97316; }
.hstat-green::before  { background: #22c55e; }
.hstat-purple::before { background: #a855f7; }

.hstat-icon {
  font-size: 1.6rem; line-height: 1; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.hstat-blue .hstat-icon  { background: #eff6ff; }
.hstat-orange .hstat-icon { background: #fff7ed; }
.hstat-green .hstat-icon  { background: #f0fdf4; }
.hstat-purple .hstat-icon { background: #faf5ff; }
[data-theme="dark"] .hstat-blue .hstat-icon  { background: rgba(59,130,246,0.15); }
[data-theme="dark"] .hstat-orange .hstat-icon { background: rgba(249,115,22,0.15); }
[data-theme="dark"] .hstat-green .hstat-icon  { background: rgba(34,197,94,0.15); }
[data-theme="dark"] .hstat-purple .hstat-icon { background: rgba(168,85,247,0.15); }

.hstat-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hstat-label {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-tertiary);
}
.hstat-value {
  font-size: 1.6rem; font-weight: 700; color: var(--text-heading); line-height: 1.15;
}
.hstat-sub {
  font-size: 0.72rem; color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 900px) {
  .habit-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .habit-hero-banner { padding: 16px 18px; }
  .habit-greeting { font-size: 1.25rem; }
  .habit-stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .habit-stat-card { padding: 12px 14px; gap: 10px; }
  .hstat-value { font-size: 1.3rem; }
}

/* ─── Finance Redesign ─── */
.finance-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0 14px;
}
.finance-title {
  font-size: 1.4rem; font-weight: 700; color: var(--text-heading); margin: 0;
}
.finance-header-right { display: flex; align-items: center; gap: 10px; }
.finance-currency-sel {
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text-primary); font-size: .82rem;
  cursor: pointer; outline: none; max-width: 220px;
}
.finance-currency-sel:focus { border-color: var(--accent); }
[data-theme="dark"] .finance-currency-sel { background: var(--bg-card); color: var(--text-primary); }
.finance-month-nav {
  display: flex; align-items: center; gap: 10px;
}
.finance-month-label {
  font-size: 1rem; font-weight: 600; color: var(--text-heading);
  min-width: 130px; text-align: center;
}

.finance-kpi-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px;
}
.fkpi-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  display: flex; align-items: center; gap: 14px;
  position: relative; overflow: hidden;
}
.fkpi-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 4px; height: 100%; border-radius: 14px 0 0 14px;
}
.fkpi-income::before { background: #22c55e; }
.fkpi-expense::before { background: #ef4444; }
.fkpi-balance::before { background: #3b82f6; }

.fkpi-icon {
  font-size: 1.5rem; line-height: 1; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.fkpi-income .fkpi-icon  { background: #f0fdf4; }
.fkpi-expense .fkpi-icon { background: #fef2f2; }
.fkpi-balance .fkpi-icon { background: #eff6ff; }
[data-theme="dark"] .fkpi-income .fkpi-icon  { background: rgba(34,197,94,0.15); }
[data-theme="dark"] .fkpi-expense .fkpi-icon { background: rgba(239,68,68,0.15); }
[data-theme="dark"] .fkpi-balance .fkpi-icon { background: rgba(59,130,246,0.15); }

.fkpi-body { display: flex; flex-direction: column; gap: 2px; }
.fkpi-label {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-tertiary);
}
.fkpi-value {
  font-size: 1.55rem; font-weight: 700; color: var(--text-heading); line-height: 1.15;
}
.fkpi-income .fkpi-value  { color: #16a34a; }
.fkpi-expense .fkpi-value { color: #dc2626; }
.fkpi-balance .fkpi-value { color: #2563eb; }
[data-theme="dark"] .fkpi-income .fkpi-value  { color: #4ade80; }
[data-theme="dark"] .fkpi-expense .fkpi-value { color: #f87171; }
[data-theme="dark"] .fkpi-balance .fkpi-value { color: #60a5fa; }

.finance-layout {
  display: flex; gap: 14px; align-items: flex-start;
}
.finance-sidebar {
  width: 300px; flex-shrink: 0; position: sticky; top: 12px;
}
.finance-sidebar .card { padding: 16px; }
.finance-main { flex: 1; min-width: 0; }

.finance-sidebar .sidebar-section-title {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-tertiary); margin: 0 0 12px;
}

.fstats-col { display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 800px) {
  .finance-layout { flex-direction: column; }
  .finance-sidebar { width: 100%; position: static; }
  .finance-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .finance-kpi-row { grid-template-columns: 1fr; }
  .fkpi-value { font-size: 1.3rem; }
}

/* ─── Finance Stats ─── */
.fstats-row {
  display: flex; gap: 20px; align-items: flex-start;
}
.fstats-panel {
  flex: 1; min-width: 0;
}
.fstats-panel-title {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-tertiary); margin: 0 0 10px;
}
.fstat-donut-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.fstat-donut-svg {
  width: 160px; height: 160px;
}
.fstat-legend {
  display: flex; flex-direction: column; gap: 5px; width: 100%;
}
.fstat-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--text-primary); min-width: 0;
}
.fstat-legend-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.fstat-legend-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fstat-legend-pct {
  font-size: 0.72rem; color: var(--text-tertiary); flex-shrink: 0;
}
.fstat-legend-val {
  font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
  flex-shrink: 0; min-width: 50px; text-align: right;
}

.fstat-compare-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--border-subtle);
  font-size: 0.82rem;
}
.fstat-compare-row:last-child { border-bottom: none; }
.fstat-compare-label {
  width: 90px; flex-shrink: 0; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.78rem;
}
.fstat-compare-bar-bg {
  flex: 1; height: 7px; border-radius: 4px;
  background: var(--border-light); overflow: hidden;
}
.fstat-compare-bar {
  height: 100%; border-radius: 4px;
  transition: width 0.4s ease;
}
.fstat-compare-val {
  font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
  flex-shrink: 0; min-width: 50px; text-align: right;
}
.fstat-empty {
  font-size: 0.84rem; color: var(--text-tertiary); text-align: center; padding: 20px 0;
}

@media (max-width: 700px) {
  .fstats-row { flex-direction: column; }
  .fstat-donut-wrap { flex-direction: column; align-items: flex-start; }
}

/* ─── Mascot IA v2 ─── */
.mascot-page-header { padding: 4px 0 14px; }
.mascot-page-title { font-size: 1.4rem; font-weight: 700; color: var(--text-heading); margin: 0; }

.m-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.m-kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.m-kpi-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); margin-bottom: 4px; }
.m-kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--text-heading); line-height: 1.1; }
.m-kpi-emoji { font-size: 1.5rem; }
.m-kpi-sub { font-size: .74rem; color: var(--text-tertiary); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.m-layout { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-start; }
.m-panel-left { flex: 4; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.m-panel-right { flex: 6; min-width: 0; }

.m-hero-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 16px; }
.m-hero-card .mascot-avatar-wrap { margin-bottom: 0; }
.m-hero-card .mascot-svg { width: 90px; height: 90px; }
.m-hero-card .mascot-avatar-emoji { font-size: 3.5rem; line-height: 1; }
.m-hero-name { font-size: 1.15rem; font-weight: 700; color: var(--text-heading); margin-top: 10px; margin-bottom: 2px; }
.m-hero-card .mascot-mood-label { font-size: .82rem; color: var(--text-secondary); }
.m-hero-card .mascot-score-bar { margin-top: 10px; width: 100%; }
.m-hero-bubble { margin-top: 12px; width: 100%; box-sizing: border-box; text-align: left; }

.m-chat-full { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.m-chat-full .mascot-chat-history { flex: 1; max-height: 360px; }

.m-customize-card { margin-bottom: 12px; }

@media (max-width: 700px) {
  .m-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .m-layout { flex-direction: column; }
  .m-chat-full .mascot-chat-history { max-height: 220px; }
}

/* ─── Profile v2 ─── */
.prof-page-header { padding: 4px 0 14px; }
.prof-page-title { font-size: 1.4rem; font-weight: 700; color: var(--text-heading); margin: 0; }

.prof-user-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px; margin-bottom: 12px;
}
.prof-avatar-wrap { position: relative; flex-shrink: 0; }
.prof-avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--accent); display: block;
}
.prof-avatar-fallback {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff;
}
.prof-avatar-fallback.hidden, .prof-avatar.hidden { display: none; }
.prof-user-info { flex: 1; min-width: 0; }
.prof-name { font-size: 1.2rem; font-weight: 700; color: var(--text-heading); margin: 0 0 2px; }
.prof-email { font-size: .82rem; color: var(--text-tertiary); margin: 0 0 4px; }

.prof-stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px;
}
.prof-stat-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 12px; text-align: center; box-shadow: var(--shadow);
}
.prof-stat-icon { font-size: 1.4rem; margin-bottom: 4px; }
.prof-stat-value { font-size: 1.4rem; font-weight: 700; color: var(--text-heading); line-height: 1.1; }
.prof-stat-balance.negative { color: var(--danger, #ef4444); }
.prof-stat-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); margin-top: 3px; }

.prof-settings-card { padding: 16px 20px; margin-bottom: 12px; }
.prof-section-title {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-tertiary); margin: 0 0 12px;
}
.prof-setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid var(--border-subtle);
}
.prof-setting-row:last-child { border-bottom: none; padding-bottom: 0; }
.prof-setting-left {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.prof-setting-icon { font-size: 1.1rem; flex-shrink: 0; width: 22px; text-align: center; }

.prof-footer {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 8px 0 20px;
}
.prof-footer .profile-privacy-link { margin: 0; }
.prof-footer .btn-signout-large { margin: 0; width: 100%; }

@media (max-width: 500px) {
  .prof-stats-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .prof-stat-value { font-size: 1.1rem; }
  .prof-user-card { flex-direction: column; text-align: center; }
  .prof-user-info { text-align: center; }
}