:root{
  --navy:#130a22;
  --purple:#7c3aed;
  --purple-dark:#5b21b6;
  --purple-tint:#f1eefc;
  --gray:#6b6478;
  --gray-line:#e6e1f0;
  --ink:#1c1530;
  --green:#16a34a;
  --amber:#f59e0b;
  --red:#dc2626;
  --neutral:#8b7fb0;
}

*{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;
  -webkit-user-select:none; user-select:none;
}

.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;}

.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;}

.back-link{background:none; border:none; color:var(--purple-dark); font-weight:700; font-size:13px; padding:0 0 16px; cursor:pointer;}

.card{background:#fff; border:1px solid var(--gray-line); border-radius:14px; padding:16px; margin-bottom:14px;}
.card-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}

.primary-btn{
  background:var(--purple); color:#fff; border:none; font-size:15px; font-weight:700;
  padding:14px 28px; border-radius:999px; cursor:pointer; width:100%; margin-top:6px;
}
.primary-btn:active{background:var(--purple-dark);}
.secondary-btn{
  background:#fff; color:var(--purple-dark); border:1.5px solid var(--purple-tint-border, var(--purple)); font-size:13.5px; font-weight:700;
  padding:10px 18px; border-radius:999px; cursor:pointer;
}
.link-btn{background:none; border:none; color:var(--gray); font-size:12px; text-decoration:underline; cursor:pointer; padding:4px;}

/* ---------- Home ---------- */
.today-status{margin-bottom:20px;}
.status-pill{display:inline-block; font-size:12px; font-weight:700; padding:5px 14px; border-radius:999px; margin-bottom:10px;}
.status-pill.done{background:#ecfdf5; color:var(--green);}
.status-pill.pending{background:var(--purple-tint); color:var(--purple-dark);}

.mini-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px;}
.mini-item{display:flex; align-items:center; justify-content:space-between; background:#faf9fd; border-radius:8px; padding:8px 10px; font-size:12px;}
.mini-item .val{font-weight:800;}

.section-title{font-size:15px; font-weight:800; color:var(--navy); margin:28px 0 12px;}

.range-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.range-btn{
  background:#fff; border:1.5px solid var(--gray-line); border-radius:999px; padding:8px 14px;
  font-size:12.5px; font-weight:700; color:var(--ink); cursor:pointer;
}
.range-btn.active{background:var(--purple); border-color:var(--purple); color:#fff;}

.date-range-row{display:flex; gap:8px; align-items:center; margin-bottom:16px;}
.date-range-row input{padding:8px 10px; border:1.5px solid var(--gray-line); border-radius:8px; font-family:inherit; font-size:13px;}

.score-hero{text-align:center; padding:18px 10px; margin-bottom:16px;}
.score-hero .value{font-size:44px; font-weight:800;}
.score-hero .label{font-size:12px; color:var(--gray); font-weight:700; letter-spacing:.5px;}

.summary-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px;}
.summary-box{background:#fff; border:1px solid var(--gray-line); border-radius:12px; padding:12px;}
.summary-box .label{font-size:11px; color:var(--gray); font-weight:700; margin:0 0 4px;}
.summary-box .value{font-size:16px; font-weight:800;}

.day-list{margin-bottom:20px;}
.day-list-row{display:flex; align-items:center; justify-content:space-between; padding:9px 4px; border-bottom:1px solid var(--gray-line); font-size:13px;}
.day-list-row:last-child{border-bottom:none;}
.day-dot{width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:8px;}
.empty-note{color:var(--gray); font-size:13px; text-align:center; padding:20px 0;}

.export-row{display:flex; gap:10px; justify-content:center; margin:24px 0 4px; flex-wrap:wrap;}

/* ---------- Gauges ---------- */
.gauge-form{}
.gauge-card{background:#fff; border:1px solid var(--gray-line); border-radius:14px; padding:12px 16px 6px; margin-bottom:12px;}
.gauge-label-row{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2px;}
.gauge-label{font-size:13.5px; font-weight:700; color:var(--navy);}
.gauge-value{font-size:13px; font-weight:800;}
.gauge-note{font-size:11.5px; color:var(--gray); line-height:1.4; margin:0 0 8px;}
.gauge-svg-wrap{display:flex; justify-content:center; touch-action:none;}
.gauge-svg-wrap svg{width:200px; height:118px; cursor:pointer;}
.gauge-hint{text-align:center; font-size:10.5px; color:var(--gray); margin:-6px 0 8px;}

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