:root{
  --navy:#130a22;
  --purple:#7c3aed;
  --purple-dark:#5b21b6;
  --purple-tint:#f1eefc;
  --purple-tint-border:#e3daf9;
  --teal:#0d9488;
  --teal-tint:#ecfdf5;
  --red:#c0392b;
  --red-tint:#fdf1f0;
  --amber:#f59e0b;
  --ink:#1c1530;
  --gray:#6b6478;
  --gray-line:#e6e1f0;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background:#fbfaff;
  color:var(--ink);
  min-height:100vh;
}

.topbar{
  background:var(--navy);
  border-bottom:4px solid var(--purple);
  padding:14px 20px;
  text-align:center;
}
.brand-mark{color:#b9a9e8; font-style:italic; font-size:13px;}

main{max-width:640px; margin:0 auto; padding:24px 20px 8px;}

.hidden{display:none !important;}

/* ---------- Home / dashboard ---------- */
.eyebrow{color:var(--purple); font-weight:700; font-size:11px; letter-spacing:1.5px; margin:0 0 8px;}
h1{font-size:26px; font-weight:800; color:var(--navy); margin:0 0 8px; line-height:1.2;}
.subtitle{color:var(--gray); font-size:14px; line-height:1.5; margin:0 0 18px;}

.persona-pill{
  display:inline-block;
  background:var(--purple-tint);
  color:var(--purple-dark);
  font-weight:700;
  font-size:12.5px;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:18px;
}

.progress-wrap{margin-bottom:24px;}
.progress-label{font-size:12.5px; color:var(--gray); font-weight:600; margin-bottom:6px;}
.progress-track{background:var(--gray-line); border-radius:999px; height:8px; overflow:hidden;}
.progress-fill{background:var(--purple); height:100%; border-radius:999px; transition:width .25s ease;}

.phase-group{margin-bottom:22px;}
.phase-title{font-size:13.5px; font-weight:800; color:var(--navy); margin:0 0 2px;}
.phase-sub{font-size:11.5px; color:var(--gray); margin:0 0 10px;}

.day-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid var(--gray-line);
  border-radius:12px;
  padding:13px 14px;
  margin-bottom:8px;
  cursor:pointer;
  font-family:inherit;
}
.day-row.locked{cursor:default; opacity:.55; background:#f7f6fb;}
.day-row.current{border-color:var(--purple); box-shadow:0 4px 14px rgba(124,58,237,.12);}
.day-row.done{border-color:var(--teal-tint);}

.day-status{
  width:30px; height:30px; min-width:30px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800;
  background:var(--purple-tint); color:var(--purple);
}
.day-row.done .day-status{background:var(--teal); color:#fff;}
.day-row.locked .day-status{background:var(--gray-line); color:var(--gray);}

.day-row-title{font-size:13.5px; font-weight:700; color:var(--navy);}
.day-row-num{font-size:11px; color:var(--gray); font-weight:600; margin-bottom:1px;}

/* ---------- Day detail view ---------- */
.day-view{max-width:520px; margin:0 auto;}
.back-link{
  background:none; border:none; color:var(--purple-dark); font-weight:700; font-size:13px;
  padding:0 0 16px; cursor:pointer;
}
.day-phase-label{color:var(--purple); font-weight:800; font-size:11px; letter-spacing:1px; margin:0 0 6px;}
.day-view h2{font-size:22px; font-weight:800; color:var(--navy); margin:0 0 14px;}
.day-instruction{font-size:14px; line-height:1.7; color:#3a3350; margin:0 0 20px;}

.field-label{font-size:12.5px; font-weight:700; color:var(--purple-dark); margin:0 0 8px;}
.field-block{margin-bottom:20px;}

.persona-input{
  width:100%; padding:12px 14px; border:1.5px solid var(--gray-line); border-radius:10px;
  font-size:14px; font-family:inherit; color:var(--ink);
}
.persona-input:focus{outline:none; border-color:var(--purple);}

.rating-row{display:flex; gap:6px; flex-wrap:wrap;}
.rating-btn{
  width:34px; height:34px;
  border-radius:8px; border:1.5px solid var(--gray-line); background:#fff;
  font-weight:700; font-size:13px; color:var(--ink); cursor:pointer;
}
.rating-btn.selected{background:var(--purple); border-color:var(--purple); color:#fff;}

textarea.reflection{
  width:100%; min-height:90px; padding:12px 14px; border:1.5px solid var(--gray-line); border-radius:10px;
  font-size:13.5px; font-family:inherit; color:var(--ink); line-height:1.5; resize:vertical;
}
textarea.reflection:focus{outline:none; border-color:var(--purple);}

.primary-btn{
  background:var(--purple);
  color:#fff;
  border:none;
  font-size:15px;
  font-weight:700;
  padding:14px 32px;
  border-radius:999px;
  cursor:pointer;
  width:100%;
  margin-top:6px;
}
.primary-btn:active{background:var(--purple-dark);}

/* ---------- Completion screen (day 15) ---------- */
.completion{text-align:center; padding:10px 0;}
.completion .big-icon{font-size:44px; margin-bottom:6px;}
.completion h2{font-size:22px;}
.compare-ratings{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin:22px 0;
}
.compare-box{background:var(--purple-tint); border-radius:12px; padding:16px 22px; min-width:90px;}
.compare-box .label{font-size:11px; color:var(--purple-dark); font-weight:700; margin-bottom:4px;}
.compare-box .value{font-size:28px; font-weight:800; color:var(--navy);}
.compare-arrow{font-size:20px; color:var(--purple);}

footer{
  text-align:center;
  color:var(--gray);
  font-size:12px;
  font-style:italic;
  padding:26px 20px 40px;
}

.reset-link{
  display:block;
  text-align:center;
  color:var(--gray);
  font-size:11.5px;
  margin-top:6px;
  cursor:pointer;
  text-decoration:underline;
  background:none;
  border:none;
}