/* =========================================================
   VELORA — Daily Routine & Habit Tracker
   ========================================================= */

:root{
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --font-display: 'Marcellus', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-hand: 'Caveat', cursive;
}

/* ---------- THEME: VELORA ROSE 🌸 (default) ---------- */
body.theme-rose{
  --c-primary: #E11D48;
  --c-secondary: #FDA4AF;
  --c-bg: #FFF1F2;
  --c-text: #4C0519;
  --c-surface: #FFFFFF;
  --c-surface-2: #FFE4E6;
  --c-border: rgba(225,29,72,0.16);
  --c-shadow: rgba(225,29,72,0.18);
  --c-muted: #9F1239;
  --c-red: #E11D48;
  --c-yellow: #D97706;
  --c-green: #15803D;
}

/* ---------- THEME: VELORA DARK PREMIUM 🖤 ---------- */
body.theme-dark{
  --c-primary: #8B5CF6;
  --c-secondary: #C084FC;
  --c-bg: #0F172A;
  --c-text: #E2E8F0;
  --c-surface: #1A2236;
  --c-surface-2: #232C45;
  --c-border: rgba(192,132,252,0.18);
  --c-shadow: rgba(139,92,246,0.35);
  --c-muted: #94A3B8;
  --c-red: #F87171;
  --c-yellow: #FBBF24;
  --c-green: #4ADE80;
}

/* ---------- THEME: BIRTHDAY GOLD 🎂 (auto-applied for one day only) ---------- */
body.theme-birthday{
  --c-primary: #B8860B;
  --c-secondary: #F4D58D;
  --c-bg: #FFFBEA;
  --c-text: #4A3404;
  --c-surface: #FFFFFF;
  --c-surface-2: #FCEFC7;
  --c-border: rgba(184,134,11,0.22);
  --c-shadow: rgba(184,134,11,0.30);
  --c-muted: #8A6D1E;
  --c-red: #E11D48;
  --c-yellow: #B8860B;
  --c-green: #15803D;
}

*{ box-sizing: border-box; margin:0; padding:0; }

html, body{ height:100%; }

body{
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-text);
  overflow-x: hidden;
  transition: background .4s ease, color .4s ease;
  -webkit-font-smoothing: antialiased;
}

button{ font-family: inherit; cursor:pointer; border:none; background:none; color:inherit; }
input{ font-family: inherit; color: inherit; }

/* ============ SCREEN MANAGEMENT ============ */
.screen{
  display:none;
  min-height:100vh;
  width:100%;
}
.screen.active{ display:block; }

/* ============ SPLASH ============ */
.splash-screen.active{
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(160deg, var(--c-bg) 0%, var(--c-surface-2) 100%);
}
.splash-content{
  text-align:center;
  animation: splashIn 1.1s cubic-bezier(.22,1,.36,1);
}
.splash-mark{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin-bottom: 18px;
  box-shadow: 0 10px 30px var(--c-shadow);
}
.splash-logo{
  font-family: var(--font-display);
  font-size: clamp(48px, 12vw, 76px);
  letter-spacing: 0.14em;
  color: var(--c-primary);
  text-transform: uppercase;
}
.splash-tagline{
  margin-top: 10px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  font-weight: 500;
}
.splash-loader{
  margin-top: 36px;
  display:flex;
  gap:8px;
  justify-content:center;
}
.splash-loader span{
  width:8px; height:8px; border-radius:50%;
  background: var(--c-primary);
  opacity:0.3;
  animation: dotPulse 1.2s ease-in-out infinite;
}
.splash-loader span:nth-child(2){ animation-delay:0.15s; }
.splash-loader span:nth-child(3){ animation-delay:0.3s; }

@keyframes dotPulse{
  0%,80%,100%{ opacity:0.25; transform: scale(0.85); }
  40%{ opacity:1; transform: scale(1.15); }
}
@keyframes splashIn{
  from{ opacity:0; transform: translateY(14px) scale(.97); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* ============ ONBOARDING ============ */
.onboarding-screen{
  display:none;
  min-height:100vh;
  align-items:center;
  justify-content:center;
  padding: 24px;
}
.onboarding-screen.active{ display:flex; }

.onboard-card{
  width:100%;
  max-width: 420px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: 0 20px 50px var(--c-shadow);
  border: 1px solid var(--c-border);
}
.onboard-eyebrow{
  font-size:12px;
  letter-spacing:0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight:600;
  margin-bottom: 10px;
}
.onboard-progress{
  height:4px;
  border-radius: 2px;
  background: var(--c-surface-2);
  overflow:hidden;
  margin-bottom: 26px;
}
.onboard-progress span{
  display:block;
  height:100%;
  width: 33.33%;
  background: var(--c-primary);
  border-radius:2px;
  transition: width .4s cubic-bezier(.22,1,.36,1);
}

.onboard-step{ display:none; animation: fadeUp .4s ease; }
.onboard-step.active{ display:block; }
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

.onboard-title{
  font-family: var(--font-display);
  font-size: 24px;
  margin-bottom: 6px;
}
.onboard-sub{
  font-size: 13.5px;
  color: var(--c-muted);
  margin-bottom: 22px;
}
.onboard-input{
  width:100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 15px;
  margin-bottom: 22px;
  outline:none;
  transition: border-color .2s ease;
}
.onboard-input:focus{ border-color: var(--c-primary); }

.btn-primary{
  width:100%;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--c-primary);
  color:#fff;
  font-weight:700;
  font-size:14.5px;
  letter-spacing:0.02em;
  transition: transform .15s ease, opacity .15s ease;
}
.btn-primary:active{ transform: scale(0.97); }
.btn-primary:hover{ opacity:0.92; }

.btn-ghost{
  flex:1;
  padding:14px;
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-weight:600;
  font-size:14.5px;
}
.onboard-btn-row{ display:flex; gap:10px; }
.onboard-btn-row .btn-primary{ flex:1.4; }

.color-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.color-swatch{
  width:100%;
  aspect-ratio:1;
  border-radius:50%;
  border: 2.5px solid transparent;
  transition: transform .15s ease, border-color .15s ease;
}
.color-swatch.selected{
  border-color: var(--c-text);
  transform: scale(1.12);
}
.profile-preview{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 14px;
  background: var(--c-bg);
  border-radius: var(--radius-sm);
  margin-bottom: 22px;
}
.profile-pill{
  width:42px; height:42px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-size:18px;
  color:#fff;
  background: var(--c-muted);
  flex-shrink:0;
}
.profile-preview-name{ font-size:14px; color: var(--c-muted); font-weight:500; }

/* ============ MAIN APP ============ */
.main-screen{
  display:none;
  padding: 18px 18px 100px;
  max-width: 480px;
  margin: 0 auto;
}
.main-screen.active{ display:block; }

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 4px;
}
.topbar-right{ display:flex; gap:8px; }

.profile-mark{
  width:40px; height:40px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-size:17px;
  color:#fff;
  background: var(--c-primary);
  box-shadow: 0 4px 10px var(--c-shadow);
}

.brand-mark{
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.1em;
  color: var(--c-primary);
}

.icon-btn{
  width:40px; height:40px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  font-size:16px;
  transition: transform .15s ease, background .2s ease;
}
.icon-btn:active{ transform: scale(0.92); }

.date-line{
  text-align:center;
  font-size:13.5px;
  color: var(--c-muted);
  font-weight:600;
  margin: 10px 0 22px;
  letter-spacing:0.02em;
}

.overall-wrap{
  display:flex;
  justify-content:center;
  margin-bottom: 30px;
}
.overall-ring{
  position:relative;
  width:140px; height:140px;
}
.ring-svg{ width:100%; height:100%; transform: rotate(-90deg); }
.ring-bg{
  fill:none;
  stroke: var(--c-surface-2);
  stroke-width:10;
}
.ring-fg{
  fill:none;
  stroke: var(--c-red);
  stroke-width:10;
  stroke-linecap:round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .6s cubic-bezier(.22,1,.36,1), stroke .4s ease;
}
.overall-text{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.overall-pct{ font-family: var(--font-display); font-size:30px; }
.overall-label{ font-size:11px; color: var(--c-muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:2px; }

.habits-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 14px;
}
.habits-head h2{
  font-family: var(--font-display);
  font-size: 19px;
}
.add-fab{
  width:36px; height:36px;
  border-radius:50%;
  background: var(--c-primary);
  color:#fff;
  font-size:20px;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 10px var(--c-shadow);
  transition: transform .15s ease;
}
.add-fab:active{ transform: scale(0.9) rotate(90deg); }

.habits-list{ display:flex; flex-direction:column; gap:14px; }

.habit-card{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 16px 16px 14px;
  animation: fadeUp .35s ease;
}
.habit-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 8px;
  gap:10px;
}
.habit-title{
  font-weight:700;
  font-size:15.5px;
  flex:1;
  word-break: break-word;
}
.habit-pct{
  flex-shrink:0;
  min-width:48px;
  text-align:center;
  padding: 4px 9px;
  border-radius: 20px;
  font-size:12.5px;
  font-weight:800;
  color:#fff;
}
.habit-pct.pct-red{ background: var(--c-red); }
.habit-pct.pct-yellow{ background: var(--c-yellow); }
.habit-pct.pct-green{ background: var(--c-green); }

.habit-track{
  height:5px;
  border-radius:3px;
  background: var(--c-surface-2);
  overflow:hidden;
  margin-bottom: 12px;
}
.habit-track-fill{
  height:100%;
  border-radius:3px;
  transition: width .4s ease, background .3s ease;
}

.sub-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.sub-item{
  display:flex;
  align-items:center;
  gap:6px;
  padding: 8px 10px;
  background: var(--c-bg);
  border-radius: var(--radius-sm);
}
.sub-check{
  width:20px; height:20px;
  border-radius:6px;
  border: 2px solid var(--c-border);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
  color:#fff;
  transition: background .15s ease, border-color .15s ease;
}
.sub-check.checked{
  background: var(--c-primary);
  border-color: var(--c-primary);
}
.sub-label{
  flex:1;
  font-size:13.5px;
  word-break: break-word;
}
.sub-label.checked{
  text-decoration: line-through;
  color: var(--c-muted);
}
.sub-del{
  font-size:14px;
  color: var(--c-muted);
  opacity:0.6;
  flex-shrink:0;
  padding:2px 6px;
}

.add-sub-btn{
  width:100%;
  padding: 9px;
  border-radius: var(--radius-sm);
  border: 1.5px dashed var(--c-border);
  font-size: 12.5px;
  font-weight:600;
  color: var(--c-muted);
  text-align:center;
}
.add-sub-btn:active{ transform: scale(0.98); }

.empty-state{
  display:none;
  text-align:center;
  padding: 40px 20px;
}
.empty-state.show{ display:block; }
.empty-glyph{ font-size:26px; color: var(--c-primary); margin-bottom:8px; }
.empty-title{ font-weight:700; font-size:15px; margin-bottom:4px; }
.empty-sub{ font-size:13px; color: var(--c-muted); }

.reward-btn{
  width:100%;
  margin-top:26px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: linear-gradient(120deg, var(--c-primary), var(--c-secondary));
  color:#fff;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:14.5px;
  box-shadow: 0 10px 24px var(--c-shadow);
}
.reward-btn-icon{ font-size:18px; }
.reward-btn-arrow{ margin-left:auto; opacity:0.85; }
.reward-btn:active{ transform: scale(0.98); }

/* ============ SUBPAGES (calendar / rewards) ============ */
.calendar-screen, .rewards-screen{
  display:none;
  padding: 18px 18px 60px;
  max-width: 480px;
  margin: 0 auto;
  min-height:100vh;
}
.calendar-screen.active, .rewards-screen.active{ display:block; }

.subpage-bar{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 16px;
}
.subpage-bar h2{
  font-family: var(--font-display);
  font-size: 20px;
  flex:1;
}
.back-btn{ background: var(--c-surface); }

.year-switch{ display:flex; gap:6px; }
.year-chip{
  padding: 7px 13px;
  border-radius: 20px;
  font-size:12.5px;
  font-weight:700;
  background: var(--c-surface-2);
  color: var(--c-muted);
}
.year-chip.active{ background: var(--c-primary); color:#fff; }

.cal-legend{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:11.5px;
  color: var(--c-muted);
  margin-bottom: 18px;
  font-weight:600;
}
.cal-legend span{ display:flex; align-items:center; gap:5px; }
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot-red{ background: var(--c-red); }
.dot-yellow{ background: var(--c-yellow); }
.dot-green{ background: var(--c-green); }
.dot-birthday{ background: linear-gradient(135deg, #D4AF37, #F4D58D); }

.year-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.month-block{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 14px;
}
.month-name{
  font-weight:800;
  font-size:13.5px;
  margin-bottom:10px;
  letter-spacing:0.03em;
}
.month-dow{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom:6px;
}
.month-dow span{
  text-align:center;
  font-size:9.5px;
  font-weight:700;
  color: var(--c-muted);
}
.month-days{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:3px;
}
.day-cell{
  aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px;
  border-radius:6px;
  color: var(--c-text);
  position:relative;
}
.day-cell.blank{ visibility:hidden; }
.day-cell.has-data{ color:#fff; font-weight:700; }
.day-cell.cell-red{ background: var(--c-red); }
.day-cell.cell-yellow{ background: var(--c-yellow); }
.day-cell.cell-green{ background: var(--c-green); }
.day-cell.cell-birthday{
  background: linear-gradient(135deg, #D4AF37, #F4D58D);
  color:#4A3404;
  box-shadow: 0 0 0 2px #B8860B inset;
  font-weight:800;
}
.day-cell.is-today{ box-shadow: 0 0 0 2px var(--c-primary) inset; }

.streak-pill{
  display:flex; align-items:center; gap:6px;
  padding: 8px 14px;
  border-radius:20px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  font-weight:800;
  font-size:14px;
}

.section-label{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color: var(--c-muted);
  margin: 18px 0 10px;
}
.streak-strip-wrap{ margin-bottom: 6px; }
.streak-strip{
  display:flex;
  gap:5px;
  overflow-x:auto;
  padding-bottom: 6px;
}
.streak-day{
  flex-shrink:0;
  width:38px; height:52px;
  border-radius:10px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;
  font-size:9px;
  color: var(--c-muted);
  font-weight:700;
}
.streak-day .glyph{ font-size:16px; }
.streak-day.linked{ background: var(--c-surface-2); border-color: var(--c-primary); }

.badge-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.badge{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 16px 8px;
  text-align:center;
  opacity:0.4;
  filter: grayscale(1);
}
.badge.unlocked{ opacity:1; filter:none; box-shadow: 0 8px 20px var(--c-shadow); }
.badge-icon{ font-size:24px; margin-bottom:6px; }
.badge-name{ font-size:10.5px; font-weight:700; }

/* ============ SHEETS (theme / add habit / add sub) ============ */
.sheet-backdrop{
  display:none;
  position:fixed; inset:0;
  background: rgba(0,0,0,0.4);
  z-index:40;
}
.sheet-backdrop.show{ display:block; animation: fadeIn .2s ease; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

.theme-sheet, .habit-sheet{
  position:fixed;
  left:0; right:0; bottom:-100%;
  background: var(--c-surface);
  border-radius: 26px 26px 0 0;
  padding: 22px 22px 28px;
  max-width:480px;
  margin:0 auto;
  z-index:50;
  transition: bottom .35s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
}
.theme-sheet.show, .habit-sheet.show{ bottom:0; }

.sheet-title{
  font-family: var(--font-display);
  font-size:18px;
  margin-bottom: 16px;
  text-align:center;
}

.theme-option{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding: 14px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--c-border);
  margin-bottom:10px;
  font-weight:600;
  font-size:14px;
}
.theme-option.active{ border-color: var(--c-primary); background: var(--c-surface-2); }
.theme-swatch{ width:28px; height:28px; border-radius:50%; flex-shrink:0; }
.swatch-rose{ background: linear-gradient(135deg,#E11D48,#FDA4AF); }
.swatch-dark{ background: linear-gradient(135deg,#8B5CF6,#0F172A); }
.theme-option-label{ flex:1; text-align:left; }
.theme-check{ opacity:0; color: var(--c-primary); font-weight:800; }
.theme-option.active .theme-check{ opacity:1; }

/* ============ MOOD PICKER ============ */
.mood-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:8px;
  margin-bottom: 14px;
}
.mood-option{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding: 12px 4px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--c-border);
  font-size:11px;
  font-weight:600;
  color: var(--c-muted);
}
.mood-option.active{ border-color: var(--c-primary); background: var(--c-surface-2); color: var(--c-text); }
.mood-emoji{ font-size:24px; }
.mood-note{
  font-size:11.5px;
  color: var(--c-muted);
  text-align:center;
  line-height:1.4;
}
.mood-chip{
  display:none;
  align-items:center;
  gap:6px;
  padding: 6px 12px;
  border-radius:16px;
  background: var(--c-surface-2);
  font-size:12.5px;
  font-weight:700;
}

/* ============ WEEKLY STREAK BLOCKS ============ */
.weekly-streak-wrap{ margin-bottom: 6px; }
.weekly-streak-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.locked-msg{
  font-size:13px;
  color: var(--c-muted);
  text-align:center;
  padding: 20px 14px;
  background: var(--c-surface);
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-md);
}
.week-block{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  text-align:left;
}
.week-block.week-red{ border-left: 5px solid var(--c-red); }
.week-block.week-yellow{ border-left: 5px solid var(--c-yellow); }
.week-block.week-green{ border-left: 5px solid var(--c-green); }
.week-tier-icon{ font-size:20px; flex-shrink:0; }
.week-range{ flex:1; font-size:13px; font-weight:600; }
.week-pct{ font-size:13px; font-weight:800; }
.week-tier-name{
  font-size:10.5px;
  color: var(--c-muted);
  font-weight:600;
  width:100%;
  margin-top: -4px;
  padding-left: 30px;
}
.week-block{ flex-wrap:wrap; }

.badge-sub{ font-size:9px; color: var(--c-muted); margin-top:3px; }

/* ============ DAY DETAIL PAGE ============ */
.day-detail-screen{
  display:none;
  padding: 18px 18px 60px;
  max-width: 480px;
  margin: 0 auto;
  min-height:100vh;
}
.day-detail-screen.active{ display:block; }
.day-detail-summary{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 20px;
}
.day-detail-pct{
  font-family: var(--font-display);
  font-size: 26px;
  padding: 6px 16px;
  border-radius: 20px;
  color:#fff;
}
.day-detail-pct.pct-red{ background: var(--c-red); }
.day-detail-pct.pct-yellow{ background: var(--c-yellow); }
.day-detail-pct.pct-green{ background: var(--c-green); }

/* ============ WEEK DETAIL PAGE ============ */
.week-detail-screen{
  display:none;
  padding: 18px 18px 60px;
  max-width: 480px;
  margin: 0 auto;
  min-height:100vh;
}
.week-detail-screen.active{ display:block; }
.week-detail-card{
  text-align:center;
  padding: 30px 20px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  margin-bottom: 18px;
}
.week-detail-tier{ font-size:16px; font-weight:700; margin-bottom:8px; }
.week-detail-pct{ font-family: var(--font-display); font-size:40px; color: var(--c-primary); }
.week-detail-sub{ font-size:12px; color: var(--c-muted); margin-top:4px; }

.week-stats-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.week-stat{
  text-align:center;
  padding: 16px 8px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
}
.week-stat-num{ display:block; font-family: var(--font-display); font-size:22px; }
.week-stat-label{ font-size:10.5px; color: var(--c-muted); font-weight:600; }

/* ============ FOOTER (every page) ============ */
.velora-footer{
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--c-border);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.footer-mark{
  width:32px;
  height:32px;
  border-radius:50%;
  opacity:0.9;
}
.footer-tagline{
  font-size:11.5px;
  color: var(--c-muted);
  font-weight:500;
  letter-spacing:0.01em;
}
.footer-links{
  display:flex;
  gap:10px;
  margin-top:4px;
}
.footer-link{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-muted);
  text-decoration:none;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.footer-link svg{
  width:16px;
  height:16px;
}
.footer-link:hover{ color: var(--c-primary); }
.footer-link:active{ transform: scale(0.9); }

/* ============ RESPONSIVE ============ */
@media (min-width: 540px){
  .main-screen, .calendar-screen, .rewards-screen{ padding-left:0; padding-right:0; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Focus visibility for accessibility */
button:focus-visible, input:focus-visible{
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* ============ PERSONAL DIARY (inside mood sheet) ============ */
.diary-divider{
  height:1px;
  background: var(--c-border);
  margin: 18px 0 16px;
}
.diary-title{ margin-bottom:10px; text-align:left; }
.diary-color-row{
  display:flex;
  gap:10px;
  margin-bottom: 14px;
  overflow-x:auto;
  padding-bottom: 2px;
}
.diary-swatch{
  width:30px; height:30px;
  border-radius:50%;
  border: 2px solid var(--c-border);
  flex-shrink:0;
  transition: transform .15s ease, border-color .15s ease;
}
.diary-swatch.selected{ border-color: var(--c-primary); transform: scale(1.15); box-shadow: 0 2px 8px var(--c-shadow); }

.diary-textarea{
  width:100%;
  min-height: 120px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--c-border);
  background: var(--diary-bg, var(--c-bg));
  color: var(--diary-text, var(--c-text));
  font-family: var(--font-hand);
  font-size: 20px;
  line-height: 1.5;
  resize: vertical;
  outline:none;
  transition: border-color .2s ease, background .3s ease;
}
.diary-textarea:focus{ border-color: var(--c-primary); }
.diary-textarea::placeholder{ font-family: var(--font-body); font-size:14px; color: var(--c-muted); opacity:0.8; }

.diary-saved-hint{
  font-size:11px;
  color: var(--c-muted);
  text-align:center;
  margin-top:8px;
}

/* Diary sheet can grow taller than the mood-only sheet used to */
.diary-sheet{ max-height: 88vh; overflow-y:auto; }

/* ============ GOOD MORNING / BIRTHDAY POPUPS ============ */
.greet-backdrop{
  display:none;
  position:fixed; inset:0;
  background: rgba(0,0,0,0.45);
  z-index:80;
  align-items:center;
  justify-content:center;
}
.greet-backdrop.show{ display:flex; animation: fadeIn .25s ease; }

.greet-card{
  width: calc(100% - 56px);
  max-width: 340px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: 30px 24px 26px;
  text-align:center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  animation: splashIn .4s cubic-bezier(.22,1,.36,1);
}
.greet-emoji{ font-size:40px; margin-bottom:10px; }
.greet-text{
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 18px;
  color: var(--c-text);
}
.greet-ok{ width:100%; }

.birthday-card{
  background: linear-gradient(160deg, #FFFBEA 0%, #FCEFC7 100%);
  border: 1.5px solid rgba(184,134,11,0.3);
}
.birthday-quote{
  font-size: 13.5px;
  color: #8A6D1E;
  font-style: italic;
  margin-bottom: 18px;
  line-height:1.5;
}
.birthday-ok{
  background: linear-gradient(120deg, #B8860B, #D4AF37);
}

/* ============ HABIT EDIT / DRAG-AND-DROP ============ */
.habit-card{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.habit-card-body{ flex:1; min-width:0; }
.habit-drag-handle{
  flex-shrink:0;
  width:22px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--c-muted);
  opacity:0.55;
  cursor: grab;
  font-size:16px;
  letter-spacing:-2px;
  touch-action: none;
}
.habit-drag-handle:active{ cursor: grabbing; }
.habit-card.dragging{
  opacity:0.5;
  box-shadow: 0 12px 28px var(--c-shadow);
}
.habit-card.drag-over{
  border-color: var(--c-primary);
}

.habit-edit-btn{
  flex-shrink:0;
  width:26px; height:26px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--c-muted);
  font-size:13px;
  background: var(--c-bg);
}
.habit-edit-btn:active{ transform: scale(0.9); }

.danger-ghost{
  background: rgba(225,29,72,0.12);
  color: #E11D48;
}

.diary-readonly{
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
}
.diary-readonly-text{
  font-family: var(--font-hand);
  font-size: 19px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============ SUB-TASK ICON BUTTONS + REMINDER ============ */
.sub-label-wrap{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.sub-reminder-badge{
  font-size:10.5px;
  font-weight:700;
  color: var(--c-primary);
  display:inline-flex;
  align-items:center;
  gap:3px;
  width:fit-content;
}
.sub-icon-btn{
  font-size:13px;
  color: var(--c-muted);
  opacity:0.65;
  flex-shrink:0;
  padding:2px 6px;
}
.sub-icon-btn.has-reminder{ opacity:1; color: var(--c-primary); }
.sub-icon-btn:active{ transform: scale(0.9); }

.reminder-sub{
  text-align:center;
  font-size:13px;
  font-weight:700;
  color: var(--c-primary);
  margin-bottom: 18px;
}
.reminder-field-label{
  display:block;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color: var(--c-muted);
  margin-bottom: 8px;
}
.reminder-lead-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
  margin-bottom: 22px;
}
.lead-chip{
  padding: 10px 4px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--c-border);
  font-size:12.5px;
  font-weight:700;
  color: var(--c-muted);
  text-align:center;
}
.lead-chip.selected{ border-color: var(--c-primary); background: var(--c-surface-2); color: var(--c-text); }

.backup-hint{
  font-size: 12.5px;
  color: var(--c-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}
.backup-status{
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
  min-height: 16px;
  color: var(--c-green);
}
.backup-status.error{ color: var(--c-red); }