/* CSS Variables */
:root {
  --primary-green: #11B981;
  --border-gray: #E5E7EB;
  --background-subtle: #F9FAFB;
  --bg-primary: #FFFFFF;
  --bg-secondary: #F9FAFB;
  --bg-tertiary: #F3F4F6;
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --border-color: #E5E7EB;
  --border-light: #F3F4F6;
  --card-bg: #FFFFFF;
  --sidebar-bg: #FFFFFF;
  --input-bg: #FFFFFF;
  --hover-bg: #F9FAFB;
  /* v1.9.43: Card shadows for premium feel */
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Base Styles */
/* v1.9.42: Upgraded to Inter font for modern SaaS look */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
/* v1.9.2: Ensure html and body fill viewport */
html, body { width: 100%; height: 100%; }
body { background: var(--bg-secondary); color: var(--text-primary); }

/* App Container */
/* v1.9.2: Added width: 100% to ensure full viewport width */
.app-container { display: flex; height: 100vh; width: 100%; }

/* Sidebar - v1.7.0 Slim Icon Rail (FROZEN) */
.sidebar { width: 60px; background: var(--sidebar-bg); padding: 12px 0; display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--border-color); }
.nav-logo { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; color: var(--primary-green); }
.nav-logo svg { width: 28px; height: 28px; }
.nav-item { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; color: var(--text-secondary); margin-bottom: 4px; transition: all 0.15s ease; outline: none; }
.nav-item:hover { background: var(--hover-bg); color: var(--text-primary); }
.nav-item.active { color: var(--primary-green); background: #f0fdf4; }
.nav-item.active::before { content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--primary-green); border-radius: 0 3px 3px 0; }
.nav-item:focus-visible { background: #f0fdf4; color: var(--primary-green); }
.nav-item.disabled { color: #bbb; cursor: not-allowed; }
.nav-item.disabled:hover { background: transparent; }
.nav-item svg { width: 22px; height: 22px; flex-shrink: 0; }
.nav-spacer { flex: 1; }

/* Main Content - v1.8.6 overflow:visible to prevent popover clipping */
.main-content { flex: 1; display: flex; flex-direction: column; overflow: visible; background: var(--bg-primary); position: relative; }

/* Header */
.header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: var(--bg-primary); border-bottom: 1px solid var(--border-light); }
.month-selector { display: flex; align-items: center; gap: 10px; }
.month-selector button { background: none; border: none; cursor: pointer; padding: 4px; color: var(--text-muted); display: flex; align-items: center; }
.month-selector button:hover { color: var(--text-primary); }
/* v1.9.44: Page titles use 700 for clear hierarchy */
.month-selector h2 { font-size: 20px; font-weight: 700; min-width: 140px; text-align: center; color: var(--text-primary); }

/* Today Progress */
.today-progress { display: flex; align-items: center; gap: 12px; }
.today-progress.hidden { display: none; }
.today-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.today-stats { display: flex; align-items: center; gap: 10px; }
.today-count { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.today-bar { width: 80px; height: 8px; background: var(--border-color); border-radius: 4px; overflow: hidden; }
.today-bar-fill { height: 100%; background: var(--primary-green); border-radius: 4px; transition: width 0.3s; }
.today-pct { font-size: 13px; font-weight: 600; color: var(--primary-green); min-width: 36px; }

/* v1.8.39: Completion celebration message */
.completion-message { display: inline-flex; align-items: center; gap: 8px; background: #ECFDF5; border: 1px solid #D1FAE5; border-radius: 20px; padding: 8px 12px 8px 16px; font-size: 13px; font-weight: 500; color: #065F46; max-width: 320px; position: relative; animation: completionMessageIn 0.3s ease; }
.completion-message.fade-out { animation: completionMessageOut 0.3s ease forwards; }
@keyframes completionMessageIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes completionMessageOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } }
.completion-message-close { background: none; border: none; padding: 4px; cursor: pointer; color: #9CA3AF; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.completion-message-close:hover { color: #6B7280; background: rgba(0,0,0,0.05); }
.completion-message-dropdown { position: absolute; top: 100%; right: 0; margin-top: 4px; background: white; border: 1px solid #E5E7EB; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; z-index: 100; }
.completion-message-dropdown button { display: block; width: 100%; padding: 10px 16px; text-align: left; background: none; border: none; font-size: 13px; color: #374151; cursor: pointer; white-space: nowrap; }
.completion-message-dropdown button:hover { background: #F9FAFB; }
.completion-message-dropdown button:last-child { color: #DC2626; }

/* v1.9.54: Soft Lock Banner for expired subscriptions */
.soft-lock-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 24px;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 8px;
  margin-bottom: 16px;
}

.soft-lock-message {
  font-size: 14px;
  font-weight: 500;
  color: #92400E;
}

.soft-lock-button {
  background: #10B981;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.soft-lock-button:hover {
  background: #0EA472;
}

body.soft-locked .checkbox,
body.soft-locked .wellness-checkbox,
body.soft-locked .wellness-row,
body.soft-locked .clear-rating-btn,
body.soft-locked .habit-action-btn,
body.soft-locked .fab-button,
body.soft-locked .fab-container,
body.soft-locked .modal-btn.primary {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Content Area - v1.8.9 added 96px bottom padding for FAB safe zone */
.content-area { flex: 1; overflow-y: auto; overflow-x: visible; padding: 20px 24px 96px 24px; width: 100%; }

/* Habit Grid - v1.8.12 fixed layout, no horizontal scroll, explicit column widths */
/* v1.8.23: container polish with rounded corners, border, shadow */
/* v1.8.24: fixed corner clipping with overflow:hidden and proper border handling */
/* v1.9.43: Updated to use card shadow variable */
.habit-grid-wrapper { width: 100%; border-radius: 12px; border: 1px solid var(--border-color); box-shadow: var(--card-shadow); background: var(--card-bg); overflow: hidden; }
.habit-grid { border-collapse: collapse; font-size: 14px; background: var(--card-bg); table-layout: fixed; width: 100%; }
.habit-grid th, .habit-grid td { border: 1px solid var(--border-color); padding: 0; text-align: center; vertical-align: middle; }
/* Remove outer borders since wrapper provides them */
.habit-grid tr:first-child th, .habit-grid tr:first-child td { border-top: none; }
.habit-grid tr:last-child th, .habit-grid tr:last-child td { border-bottom: none; }
.habit-grid th:first-child, .habit-grid td:first-child { border-left: none; }
.habit-grid th:last-child, .habit-grid td:last-child { border-right: none; }
/* v1.8.12 habit name column: originally 140px fixed */
/* v1.8.27: increased to 180px (~20 chars), v1.8.28: increased to 210px (~26 chars) */
.habit-name-header { width: 210px; text-align: center !important; padding: 10px 12px !important; font-weight: 600 !important; text-transform: uppercase; color: var(--text-primary); letter-spacing: 0.025em; }
.habit-count { font-weight: 400; color: var(--text-secondary); }
.habit-name-cell { width: 210px; height: 40px; text-align: left !important; padding: 8px 10px !important; white-space: nowrap; font-size: 14px; background: var(--card-bg); position: relative; overflow: hidden; color: var(--text-primary); }
.habit-name-content { display: flex; align-items: center; justify-content: space-between; }
/* v1.8.30: removed truncation since input is limited to 26 chars */
.habit-name-text { overflow: visible; }
.habit-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.habit-name-cell:hover .habit-actions { opacity: 1; }
.habit-action-btn { background: none; border: none; cursor: pointer; padding: 2px; display: flex; align-items: center; justify-content: center; }
.habit-action-btn svg { width: 14px; height: 14px; stroke: #ccc; stroke-width: 1.5; fill: none; transition: stroke 0.15s; }
.habit-action-btn:hover svg { stroke: #666; }
.habit-action-btn.delete:hover svg { stroke: #e57373; }
.week-header { background: var(--bg-secondary) !important; font-weight: 500; padding: 6px 0 !important; font-size: 10px; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.05em; border-bottom: 2px solid var(--border-light) !important; }
/* Week separators - add subtle right border to last day of each week */
.week-header:not(:last-child) { border-right: 1px solid var(--border-color); }
/* v1.8.12 day cells: NO min-width, auto-distribute in remaining space */
.day-header { font-size: 10px; color: var(--text-muted); padding: 4px 0 !important; font-weight: 500; text-transform: uppercase; }
/* v1.8.25: Today column highlight extends to day label row */
.day-header.today-day { background: #e8f5e9; color: var(--primary-green); }
.date-header { font-size: 12px; color: var(--text-primary); padding: 4px 0 !important; font-weight: 600; }
.date-header.today-date { background: #e8f5e9; color: var(--primary-green); font-weight: 700; }
.day-cell { height: 40px; cursor: pointer; padding: 6px 4px !important; background: var(--card-bg); }
.day-cell.today-cell { background: #f0fdf4; }
/* v1.8.38: Disabled future day checkboxes */
.day-cell.disabled-future { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.day-cell.disabled-future .checkbox { cursor: not-allowed; }
.wellness-cell.disabled-future { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.wellness-cell.disabled-future .wellness-checkbox { cursor: not-allowed; }
.day-cell:hover .checkbox { background: #f0fdf4; border-color: #a7d9b8; }
.day-cell:hover .checkbox.done { background: #0d9668; }
.checkbox { width: 20px; height: 20px; border-radius: 6px; background: var(--input-bg); border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; margin: 0 auto; transition: all 0.12s ease; }
.checkbox.done { background: var(--primary-green); border-color: var(--primary-green); border-radius: 6px; }
.checkbox svg { width: 12px; height: 12px; opacity: 0; }
.checkbox.done svg { opacity: 1; }

/* Empty State */
.empty-state-cell { background: var(--bg-secondary) !important; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: var(--text-muted); cursor: pointer; transition: color 0.15s; }
.empty-state:hover { color: var(--text-secondary); }
.empty-state:hover .empty-state-icon { background: #c8e6c9; }
.empty-state-icon { width: 40px; height: 40px; border-radius: 50%; background: #e8f5e9; color: #4caf50; font-size: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; transition: background 0.15s; }
.empty-state-text { font-size: 13px; }

/* Undo Toast */
.undo-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--bg-tertiary); color: var(--text-primary); padding: 12px 20px; border-radius: 8px; font-size: 13px; display: none; align-items: center; gap: 16px; z-index: 300; box-shadow: 0 4px 12px rgba(0,0,0,0.15); opacity: 0; transition: opacity 0.2s, transform 0.2s; border: 1px solid var(--border-color); }
.undo-toast.show { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.undo-toast button { background: none; border: none; color: #7dd3a0; cursor: pointer; font-size: 13px; font-weight: 600; }
.undo-toast button:hover { color: #a8e6c1; }

/* Analysis Section - v1.8.12 fixed 120px total, white-space nowrap, no clipping */
.analysis-header { padding: 6px 8px !important; font-weight: 600; background: var(--bg-secondary) !important; font-size: 11px; width: 120px; white-space: nowrap; color: var(--text-primary); }
/* v1.8.31: added bottom border and padding for visual separation from data rows */
.analysis-sub-header { padding: 4px 6px 10px 6px !important; font-size: 10px; width: 60px; white-space: nowrap; overflow: visible; border-bottom: 2px solid var(--border-color) !important; color: var(--text-secondary); }
.goal-cell, .actual-cell { padding: 10px 6px 4px 6px !important; font-size: 11px; width: 60px; background: var(--card-bg); text-align: center; color: var(--text-primary); }
.progress-cell { padding: 10px 8px 4px 8px !important; width: 60px; background: var(--card-bg); }
.mini-progress { width: 100%; height: 12px; background: #e8f5e9; border-radius: 2px; overflow: hidden; }
.mini-progress-fill { height: 100%; background: var(--primary-green); }

/* v1.8.20 Statistics Toggle Switch */
.stats-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  margin-top: 12px;
}

.stats-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.stats-toggle-track {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--border-color);
  border-radius: 11px;
  transition: background 150ms ease;
}

.stats-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 150ms ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ON state */
.stats-toggle-input:checked + .stats-toggle-track {
  background: var(--primary-green);
}

.stats-toggle-input:checked + .stats-toggle-track .stats-toggle-thumb {
  transform: translateX(18px);
}

/* Focus state */
.stats-toggle-input:focus-visible + .stats-toggle-track {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

.stats-toggle-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.statistics-section { width: 100%; }

/* Charts Section - v1.8.10 reduced heights (max 120-130px), secondary visual priority */
.charts-section { margin-top: 16px; width: 100%; }
.performance-section { margin-bottom: 0; width: 100%; }
.performance-header { padding-left: 160px; margin-bottom: 4px; }
.performance-title { font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; }
.chart-row { display: flex; align-items: flex-start; width: 100%; }
/* v1.8.10 Daily chart capped at 125px max */
/* v1.9.47: Reduced padding-right to 2px for ALL charts - labels right next to chart */
.chart-y-axis { width: 160px; min-width: 160px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; height: 125px; max-height: 130px; padding-right: 2px; text-align: right; font-size: 10px; color: var(--text-muted); font-weight: 500; padding-top: 2px; padding-bottom: 2px; }

/* v1.8.19: CSS-only reveal animation */
@keyframes chartReveal {
  from {
    opacity: 0;
    transform: scaleY(0.85);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* v1.9.30: Bar animations for Analytics */
@keyframes barGrowX {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes barFillY {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
.chart-container { flex: 1; height: 125px; max-height: 130px; position: relative; background: transparent; border-bottom: 1px solid var(--border-light); overflow: visible; transform-origin: bottom; animation: chartReveal 0.5s ease-out backwards; }
#mentalChartContainer { animation-delay: 0.1s; }

.chart-svg { width: 100%; height: 100%; overflow: visible; shape-rendering: geometricPrecision; }
/* Chart line styles with morph transitions */
.green-fill { fill: url(#greenGradient); transition: d 0.4s ease-out, opacity 0.3s ease-out; }
.green-line { fill: none; stroke: #22c55e; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; shape-rendering: geometricPrecision; transition: d 0.4s ease-out; }
.pink-fill { fill: url(#pinkGradient); transition: d 0.4s ease-out, opacity 0.3s ease-out; }
.pink-line { fill: none; stroke: #875BD3; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; shape-rendering: geometricPrecision; transition: d 0.4s ease-out; }

/* Mental Wellness Section - v1.8.10 reduced height (max 125px), secondary visual priority */
.mental-section { margin-top: 16px; position: relative; overflow: visible; width: 100%; }
.mental-wellness-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; padding-left: 160px; }
.wellness-title { font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; }
.wellness-hint { font-size: 11px; color: #a78bfa; font-weight: 400; }
.mental-chart-section { display: flex; align-items: flex-start; width: 100%; }
/* v1.8.10 Mental chart capped at 125px (within 130px max) */
.mental-chart-section .chart-y-axis { height: 125px; max-height: 130px; }
.mental-chart-section .chart-container { height: 125px; max-height: 130px; }
/* v1.8.8 wellness row: div-based layout with CSS grid for day alignment */
.wellness-row { display: flex; align-items: flex-start; margin-top: 14px; width: 100%; }
.wellness-row-spacer { width: 160px; min-width: 160px; flex-shrink: 0; }
.wellness-row-cells { display: grid; grid-template-columns: repeat(31, 1fr); }
/* v1.8.7 wellness cell reduced to match day cell */
.wellness-cell { height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; background: transparent; }
.wellness-value { display: none; }
/* v1.8.7 wellness checkbox reduced to match day checkbox proportion */
/* v1.8.24: Updated wellness checkbox to match green checkbox styling */
.wellness-checkbox { width: 20px; height: 20px; border-radius: 6px; background: var(--input-bg); border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; margin: 0 auto; transition: all 0.12s ease; }
.wellness-checkbox svg { width: 12px; height: 12px; opacity: 0; }
.wellness-cell:hover .wellness-checkbox { background: #f5f3ff; border-color: #875BD3; }
.wellness-cell.logged .wellness-checkbox { background: #875BD3; border-color: #875BD3; border-radius: 6px; }
.wellness-cell.logged .wellness-checkbox svg { opacity: 1; }
.wellness-cell.today .wellness-checkbox { animation: pulse-wellness 2s infinite; }
.wellness-cell.today.logged .wellness-checkbox { animation: none; }
@keyframes pulse-wellness { 0%, 100% { box-shadow: 0 0 0 0 rgba(135, 91, 211, 0.4); } 50% { box-shadow: 0 0 0 4px rgba(135, 91, 211, 0); } }
.wellness-popover { position: fixed; background: var(--card-bg); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); padding: 10px; z-index: 1000; display: none; border: 1px solid var(--border-color); }
.wellness-popover.active { display: block; }
.popover-title { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; text-align: center; }
/* v1.8.34: Bold + green date in popover title */
.popover-date { font-weight: 600; color: var(--primary-green); }
.popover-ratings { display: flex; gap: 4px; }
.popover-btn { width: 26px; height: 26px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--input-bg); cursor: pointer; font-size: 11px; transition: all 0.15s; color: var(--text-primary); }
.popover-btn:hover { background: #875BD3; border-color: #875BD3; color: #fff; }
/* v1.8.32: highlighted current rating */
.popover-btn.rating-selected { background: var(--primary-green); border-color: var(--primary-green); color: #fff; }
/* v1.8.32: clear rating button */
.clear-rating-btn { display: block; margin-top: 10px; padding: 6px 8px; font-size: 12px; color: var(--text-secondary); background: none; border: none; cursor: pointer; width: 100%; text-align: center; border-top: 1px solid var(--border-color); }
.clear-rating-btn:hover { color: #EF4444; }

/* FAB */
.fab-container { position: fixed; bottom: 28px; right: 28px; display: flex; flex-direction: column; align-items: flex-end; z-index: 100; }
.fab-button { width: 56px; height: 56px; border-radius: 50%; background: var(--primary-green); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, background 0.2s, box-shadow 0.2s; box-shadow: 0 4px 12px rgba(17, 185, 129, 0.4); }
.fab-button:hover { background: #0d9668; transform: scale(1.08); box-shadow: 0 6px 16px rgba(17, 185, 129, 0.5); }
.fab-button:active { transform: scale(0.95); }
.fab-button svg { width: 28px; height: 28px; color: #fff; }
.fab-tooltip { position: absolute; bottom: 58px; right: -4px; background: #444; color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 11px; line-height: 1.3; white-space: nowrap; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 0.15s, transform 0.15s; }
.fab-tooltip::after { content: ''; position: absolute; bottom: -4px; right: 22px; width: 8px; height: 8px; background: #444; transform: rotate(45deg); }
.fab-tooltip.show { opacity: 1; transform: translateY(0); }

/* Modal */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: none; align-items: center; justify-content: center; z-index: 200; }
.modal-overlay.active { display: flex; }
.modal { background: var(--card-bg); border-radius: 8px; padding: 20px; width: 300px; border: 1px solid var(--border-color); }
.modal h3 { margin-bottom: 14px; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.modal-field { margin-bottom: 14px; }
.modal-field label { display: block; margin-bottom: 5px; font-size: 11px; color: var(--text-secondary); }
.modal-field input, .modal-field select { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 5px; font-size: 13px; background: var(--input-bg); color: var(--text-primary); }
.modal-field input:focus, .modal-field select:focus { outline: none; border-color: var(--primary-green); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
/* v1.9.44: Buttons use 500 medium weight */
.modal-btn { padding: 8px 16px; border-radius: 5px; font-size: 12px; font-weight: 500; cursor: pointer; border: none; }
.modal-btn.secondary { background: var(--bg-tertiary); color: var(--text-secondary); }
.modal-btn.secondary:hover { background: var(--hover-bg); }
.modal-btn.primary { background: var(--primary-green); color: #fff; }
.modal-btn.primary:hover { background: #0d9668; }
.error-message { color: #e53935; font-size: 11px; margin-bottom: 10px; padding: 6px 10px; background: #ffebee; border-radius: 4px; }

/* Analytics View */
/* v1.9.1: Force full-width on analytics page - all containers */
.analytics-view { 
  background: var(--bg-secondary); 
  width: 100% !important; 
  max-width: 100% !important;
}
.analytics-header { 
  justify-content: space-between; 
  padding: 16px 32px; 
  border-bottom: 1px solid var(--border-color); 
  width: 100%;
  box-sizing: border-box;
}
.analytics-title-section { display: flex; align-items: center; gap: 12px; }
/* v1.9.44: Page titles use 700 for clear hierarchy */
.analytics-page-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0; }
.analytics-date-range { font-size: 12px; color: var(--text-secondary); background: var(--bg-tertiary); padding: 4px 10px; border-radius: 6px; }
.range-filter { display: flex; gap: 6px; }
.range-chip { padding: 6px 12px; font-size: 12px; font-weight: 500; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-secondary); border-radius: 6px; cursor: pointer; transition: all 0.15s; }
.range-chip:hover { border-color: var(--text-muted); color: var(--text-primary); }
.range-chip.active { background: var(--text-primary); color: var(--bg-primary); border-color: var(--text-primary); }
.analytics-header-label { font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; }
/* v1.9.6: Full-width analytics content - reduced padding for no-scroll layout */
.analytics-content { 
  padding: 16px 32px; 
  overflow-x: hidden;
  overflow-y: auto; 
  flex: 1; 
  width: 100% !important; 
  max-width: 100% !important; 
  box-sizing: border-box; 
}
/* v1.9.6: Full-width analytics rows and cards - tighter spacing */
.analytics-row { 
  display: flex; 
  gap: 16px; 
  margin-bottom: 12px; 
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
/* v1.9.43: Added card shadow for premium feel */
.analytics-card { 
  background: var(--card-bg); 
  border-radius: 10px; 
  padding: 16px; 
  flex: 1 1 0%; 
  border: 1px solid var(--border-color); 
  box-shadow: var(--card-shadow);
  min-width: 0; 
  max-width: none;
  transition: box-shadow 0.2s ease;
}
.analytics-card.wide { 
  flex: 1 1 100%; 
  width: 100%; 
  max-width: 100%;
}

/* Primary Stat Cards - v1.9.6: More compact for no-scroll layout */
.analytics-card.big-stat { padding: 12px 16px; display: flex; flex-direction: column; align-items: center; }
.analytics-card.big-stat:hover { box-shadow: var(--card-shadow-hover); }
.analytics-card.big-stat.primary { background: var(--card-bg); border-color: var(--border-color); }
/* v1.9.45: Reduced margin-bottom from 8px to 6px for tighter spacing */
.stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; font-size: 20px; }
.stat-icon.green { background: #dcfce7; }
.stat-icon.orange { background: #fff7ed; }
.stat-icon.blue { background: #dbeafe; }
.stat-icon.red { background: #fee2e2; }
/* v1.9.45: Consistent stat label spacing */
.stat-label-small { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; font-weight: 500; }
.big-number { font-size: 32px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.big-number.green { color: #059669; font-size: 36px; }
.big-number.orange { color: #ea580c; }
.big-number.blue { color: #3b82f6; }
.big-number.red { color: #dc2626; }
/* v1.9.45: Consistent stat subtitle spacing */
.stat-subtitle { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
/* v1.9.45: Consistent stat context spacing */
.stat-context { font-size: 10px; color: var(--text-muted); margin-top: 6px; background: var(--bg-secondary); padding: 3px 8px; border-radius: 16px; }
.delta { font-size: 10px; margin-top: 4px; padding: 2px 6px; border-radius: 4px; font-weight: 500; display: inline-flex; align-items: center; gap: 2px; }
.delta.positive { color: #059669; background: #ecfdf5; }
.delta.negative { color: #dc2626; background: #fef2f2; }
.delta.neutral { color: #6b7280; background: #f3f4f6; }

/* Secondary Cards - v1.9.5: Consistent borders, softer headers */
/* v1.9.43: Inherits shadow from .analytics-card */
.analytics-card.secondary { background: var(--card-bg); border: 1px solid var(--border-color); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0; text-transform: none; margin: 0; }

/* v1.9.6: Two-column layout for Top Performers + Daily Breakdown */
.analytics-two-column {
  display: flex;
  gap: 24px;
  align-items: stretch;
}
.analytics-two-column > .analytics-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.analytics-two-column .habit-ranking,
.analytics-two-column .weekly-bars {
  flex: 1;
}

/* Habit Rankings - v1.9.6: More compact for two-column layout */
.habit-ranking { display: flex; flex-direction: column; gap: 6px; }
.habit-ranking.horizontal { flex-direction: column; gap: 6px; }
.habit-ranking.horizontal .habit-rank-item { flex: none; min-width: auto; }
.habit-rank-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-secondary); border-radius: 6px; border: none; }
.rank-badge { min-width: 24px; height: 24px; border-radius: 6px; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; background: var(--bg-tertiary); color: var(--text-secondary); }
.rank-badge.gold { background: #fef3c7; color: #b45309; }
.rank-badge.silver { background: #f3f4f6; color: #6b7280; }
.rank-badge.bronze { background: #ffedd5; color: #c2410c; }
.rank-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.rank-name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 100px; }
.rank-progress-container { flex: 1; margin-top: 0; }
.rank-progress-bar { height: 8px; background: var(--border-color); border-radius: 4px; overflow: hidden; }
/* v1.9.30: Horizontal bar grow animation with stagger */
.rank-progress-fill { height: 100%; border-radius: 4px; background: var(--primary-green); transform-origin: left; animation: barGrowX 0.4s ease-out backwards; }
.rank-item:nth-child(1) .rank-progress-fill { animation-delay: 0ms; }
.rank-item:nth-child(2) .rank-progress-fill { animation-delay: 50ms; }
.rank-item:nth-child(3) .rank-progress-fill { animation-delay: 100ms; }
.rank-item:nth-child(4) .rank-progress-fill { animation-delay: 150ms; }
.rank-item:nth-child(5) .rank-progress-fill { animation-delay: 200ms; }
.rank-percent { font-size: 13px; font-weight: 600; min-width: 40px; text-align: right; color: #059669; }
.empty-ranking { color: var(--text-muted); font-size: 13px; padding: 16px; text-align: center; background: var(--bg-secondary); border-radius: 6px; }

/* v1.9.48: Low Momentum section */
.low-momentum-card .card-subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 12px; margin-top: -4px; }
.low-momentum-list { display: flex; flex-direction: column; }
.low-momentum-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--bg-secondary); border-radius: 6px; margin-bottom: 8px; }
.low-momentum-item:last-child { margin-bottom: 0; }
.low-momentum-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.low-momentum-reason { font-size: 12px; color: var(--text-muted); }

/* Weekly Breakdown - v1.9.6: Reduced height for two-column layout */
.weekly-bars { display: flex; gap: 6px; height: 160px; padding: 4px 0; }
.weekly-bars-empty { color: var(--text-muted); font-size: 13px; padding: 24px 16px; text-align: center; background: var(--card-bg); border-radius: 6px; }
.week-bar-container { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 2px; border-radius: 6px; }
.week-bar-wrapper { flex: 1; display: flex; align-items: flex-end; width: 100%; padding: 0 2px; }
/* v1.9.52: Restored original flex-based layout that works */
.week-bar { width: 100%; height: 100%; background: var(--bg-tertiary); border-radius: 4px; display: flex; align-items: flex-end; overflow: hidden; }
.week-bar-fill { width: 100%; background: var(--primary-green); border-radius: 4px 4px 0 0; min-height: 2px; }
/* v1.9.31: Reduced font-size for date range labels (longer than "Week X") */
/* v1.9.32: Increased margin-top for breathing room */
.week-bar-label { font-size: 8px; color: var(--text-muted); margin-top: 8px; font-weight: 500; white-space: nowrap; text-align: center; }
.week-bar-value { font-size: 11px; font-weight: 600; color: var(--text-primary); margin-top: 2px; }

/* Mental Wellness Analytics - v1.9.11: Fixed height constraints */
.wellness-analytics { display: flex; align-items: flex-start; gap: 16px; padding: 4px 0; max-height: 180px; }
.wellness-stat-group { display: flex; flex-direction: column; align-items: center; padding: 10px 14px; background: #f5f3ff; border-radius: 8px; min-width: 70px; flex-shrink: 0; }
.wellness-avg { font-size: 28px; font-weight: 700; color: #875BD3; line-height: 1; }
.wellness-avg-label { font-size: 9px; color: #6b7280; margin-top: 3px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; }
.wellness-out-of { font-size: 10px; color: #a78bfa; margin-top: 2px; }
/* v1.9.11: Analytics chart section with strict height constraints */
.analytics-mental-chart-section { display: flex; align-items: flex-start; flex: 1 0 auto; }
/* v1.9.47: Reduced padding-right to 2px for ALL charts - labels right next to chart */
.analytics-mental-chart-section .chart-y-axis { width: 40px; min-width: 40px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; height: 100px !important; max-height: 100px !important; padding-right: 2px; text-align: right; font-size: 10px; color: var(--text-muted); font-weight: 500; padding-top: 2px; padding-bottom: 2px; }
/* v1.9.11: Chart main wrapper - v1.9.18: Changed to flex: 1 to fill available width */
.analytics-chart-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* v1.9.11: Chart container - strict 100px height */
/* v1.9.29: Added chartReveal animation to match Dashboard */
.analytics-chart-container { flex: none !important; height: 100px !important; max-height: 100px !important; min-height: 100px !important; position: relative; background: transparent; border-bottom: 1px solid var(--border-light); overflow: visible; transform-origin: bottom; animation: chartReveal 0.5s ease-out backwards; }
.analytics-chart-container .chart-svg { width: 100%; height: 100px !important; max-height: 100px !important; overflow: visible; shape-rendering: geometricPrecision; }
/* v1.9.11: X-axis labels styling - OUTSIDE chart height */
/* v1.9.18: Added flex: 1 to spans to ensure proper distribution */
.chart-x-axis { display: flex; justify-content: space-between; padding: 6px 0 0 0; font-size: 10px; color: var(--text-muted); font-weight: 500; height: 20px; flex-shrink: 0; }
.chart-x-axis span { text-align: center; flex: 1; min-width: 0; }
/* v1.9.15: Dense labels for 30D (30 labels need smaller font and tighter spacing) */
.chart-x-axis.dense-labels { font-size: 8px; gap: 0; }
.chart-x-axis.dense-labels span { flex: 1; min-width: 0; padding: 0; }
.wellness-trend-header { font-size: 10px; color: var(--text-secondary); margin-top: 6px; font-weight: 500; text-align: right; flex-shrink: 0; }
/* v1.9.11: Constrain the mental wellness card container */
#mentalWellnessCard { max-height: 200px !important; overflow: hidden; }
.wellness-empty { text-align: center; padding: 20px; color: var(--text-muted); font-size: 13px; background: var(--bg-secondary); border-radius: 8px; border: 1px dashed var(--border-color); }
.wellness-empty-icon { font-size: 20px; margin-bottom: 6px; display: block; }

/* Settings View */
.settings-view { padding: 0; width: 100%; }
.settings-header { padding: 24px 32px 16px; border-bottom: 1px solid var(--border-light); }
/* v1.9.44: Page titles use 700 for clear hierarchy */
.settings-page-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0; }
.settings-content { padding: 24px 32px; display: flex; flex-direction: column; gap: 32px; max-width: 560px; }
.settings-section-title { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
/* v1.9.43: Added card shadow for premium feel */
.settings-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; box-shadow: var(--card-shadow); }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
.settings-row-info { flex: 1; }
.settings-row-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.settings-row-value { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.settings-row-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.settings-divider { height: 1px; background: var(--border-light); margin: 0 20px; }
/* v1.9.44: Buttons use 500 medium weight */
.settings-btn { padding: 8px 16px; font-size: 13px; font-weight: 500; border-radius: 6px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-primary); cursor: pointer; transition: all 0.15s; }
.settings-btn:hover { background: var(--hover-bg); border-color: var(--text-muted); }
.settings-btn.primary { background: #10b981; border-color: #10b981; color: #fff; }
.settings-btn.primary:hover { background: #059669; }
.settings-btn.danger { color: #dc2626; border-color: #fecaca; }
.settings-btn.danger:hover { background: #fef2f2; border-color: #f87171; }
.settings-select { padding: 8px 12px; font-size: 13px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-primary); cursor: pointer; min-width: 140px; }
.settings-select:hover { border-color: var(--text-muted); }
.plan-badge { display: inline-block; padding: 2px 8px; background: var(--bg-tertiary); border-radius: 4px; font-size: 12px; font-weight: 500; color: var(--text-secondary); }

/* v1.9.33: Settings email display + footer */
.settings-row-email { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.settings-footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border-light); font-size: 12px; color: var(--text-muted); text-align: center; }
.settings-footer-separator { margin: 0 8px; }
.settings-support-link { color: var(--text-muted); text-decoration: none; cursor: pointer; }
.settings-support-link:hover { text-decoration: underline; color: var(--text-secondary); }

/* v1.9.36: Delete Account modal styles */
.modal-title-danger { font-size: 18px; font-weight: 600; color: #DC2626; margin-bottom: 12px; }
.modal-message { color: var(--text-secondary); margin-bottom: 12px; line-height: 1.5; font-size: 14px; }
.modal-instruction { color: var(--text-primary); margin-bottom: 8px; font-size: 14px; }
.modal-input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 6px; margin-bottom: 16px; font-size: 14px; box-sizing: border-box; background: var(--input-bg); color: var(--text-primary); }
.modal-input:focus { outline: none; border-color: var(--primary-green); }
.modal-btn.danger { background: #EF4444; color: white; border: none; }
.modal-btn.danger:hover { background: #DC2626; }
.modal-btn.danger:disabled { background: #FCA5A5; cursor: not-allowed; }

/* v1.9.36: Contact Support modal styles */
.modal-email { color: var(--text-primary); margin: 16px 0; font-size: 14px; }
.support-email-link { color: var(--primary-green); font-weight: 600; text-decoration: none; }
.support-email-link:hover { text-decoration: underline; }
.modal-thanks { color: var(--text-secondary); font-style: italic; margin-top: 16px; font-size: 14px; }

/* v1.9.40: Loading Screen (prevents FOUC) */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #F9FAFB;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #E5E7EB;
  border-top-color: #10B981;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* v1.9.53: Service Unavailable Screen */
.service-unavailable-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #F9FAFB;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.service-unavailable-card {
  background: white;
  padding: 48px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  text-align: center;
  max-width: 400px;
}

.service-unavailable-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.service-unavailable-title {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
}

.service-unavailable-message {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 24px;
}

.service-unavailable-button {
  background: #10B981;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 16px;
}

.service-unavailable-button:hover {
  background: #0EA472;
}

.service-unavailable-support {
  font-size: 12px;
  color: #9CA3AF;
}

.service-unavailable-support a {
  color: #10B981;
  text-decoration: none;
}

/* v1.9.39: Full-screen Auth Page */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
}

/* v1.9.43: Auth card uses slightly stronger shadow for prominence */
.auth-card {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: var(--card-shadow-hover);
  padding: 40px;
  width: 100%;
  max-width: 400px;
  margin: 20px;
}

/* v1.9.44: Auth title uses 700 bold for hierarchy */
.auth-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 8px;
}

.auth-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 32px;
}

.auth-form .form-group {
  margin-bottom: 20px;
}

/* v1.9.44: Form labels use 500 medium weight */
.auth-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.auth-form input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  background: var(--input-bg);
  color: var(--text-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(17, 185, 129, 0.1);
}

.auth-form input::placeholder {
  color: var(--text-muted);
}

/* v1.9.44: Auth buttons use 500 medium weight */
.auth-btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background 0.15s, border-color 0.15s;
}

.auth-btn.btn-primary {
  background: var(--primary-green);
  color: white;
  border: none;
}

.auth-btn.btn-primary:hover {
  background: #0EA472;
}

.auth-btn.btn-secondary {
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.auth-btn.btn-secondary:hover {
  background: var(--hover-bg);
}

.forgot-password-link {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  margin-top: 16px;
}

.forgot-password-link:hover {
  color: var(--primary-green);
}

.auth-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #DC2626;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

.auth-success {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* v1.9.6: Responsive breakpoint for analytics (includes two-column stacking) */
@media (max-width: 768px) {
  .analytics-content {
    padding: 16px !important;
  }
  .analytics-header {
    padding: 16px !important;
  }
  .analytics-row {
    flex-direction: column;
    gap: 16px;
  }
  .analytics-two-column {
    flex-direction: column;
  }
}