:root{
  --black:#08080A;
  --panel:#0E0E12;
  --card:#14141A;
  --card-hi:#1A1A21;
  --line:rgba(255,255,255,.09);
  --line-gold:rgba(201,160,68,.30);
  --gold:#C9A044;
  --gold-hi:#E4C378;
  --gold-dim:rgba(201,160,68,.11);
  --text:#EDEAE4;
  --soft:#C9C5BD;
  --gray:#9A968E;
  --green:#6FBF9F;
  --amber:#E4C378;
  --red:#D98B80;
  --neutral:#8A8378;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--sans);
  background:var(--black);
  color:var(--text);
  min-height:100vh;
  -webkit-user-select:none; user-select:none;
  -webkit-font-smoothing:antialiased;
}

.topbar{background:#0B0B0F; border-bottom:1px solid var(--line-gold); padding:14px 20px; text-align:center;}
.brand-mark{color:var(--gold); font-style:italic; font-size:13px; letter-spacing:.02em;}

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

.hidden{display:none !important;}

.eyebrow{color:var(--gold); font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; margin:0 0 10px;}
h1{font-family:var(--serif); font-size:27px; font-weight:600; color:#fff; margin:0 0 10px; line-height:1.18; letter-spacing:-.01em;}
.subtitle{color:var(--soft); font-size:14px; line-height:1.55; margin:0 0 18px;}

.back-link{background:none; border:none; color:var(--gold-hi); font-weight:700; font-size:13px; padding:0 0 16px; cursor:pointer; font-family:inherit;}
.back-link:hover{color:var(--gold);}

.card{background:var(--card); border:1px solid var(--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(--gold); color:#100D06; border:none; font-size:15px; font-weight:700;
  padding:14px 28px; border-radius:999px; cursor:pointer; width:100%; margin-top:6px;
  font-family:inherit; transition:background .2s ease;
}
.primary-btn:hover{background:var(--gold-hi);}
.primary-btn:active{background:var(--gold-hi);}
.secondary-btn{
  background:transparent; color:var(--gold-hi); border:1.5px solid var(--line-gold);
  font-size:13.5px; font-weight:700; padding:10px 18px; border-radius:999px;
  cursor:pointer; font-family:inherit;
}
.secondary-btn:hover{background:var(--gold-dim);}
.link-btn{background:none; border:none; color:var(--gray); font-size:12px; text-decoration:underline; cursor:pointer; padding:4px; font-family:inherit;}
.link-btn:hover{color:var(--gold-hi);}

/* ---------- 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; border:1px solid transparent;}
.status-pill.done{background:rgba(111,191,159,.12); color:var(--green); border-color:rgba(111,191,159,.35);}
.status-pill.pending{background:var(--gold-dim); color:var(--gold-hi); border-color:var(--line-gold);}

.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:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12px; color:var(--soft);}
.mini-item .val{font-weight:800;}

.section-title{font-family:var(--serif); font-size:16px; font-weight:600; color:#fff; margin:28px 0 12px;}

.range-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.range-btn{
  background:var(--card); border:1.5px solid var(--line); border-radius:999px; padding:8px 14px;
  font-size:12.5px; font-weight:700; color:var(--soft); cursor:pointer; font-family:inherit;
  transition:border-color .18s ease, background .18s ease;
}
.range-btn:hover{border-color:var(--line-gold); background:var(--card-hi);}
.range-btn.active{background:var(--gold); border-color:var(--gold); color:#100D06;}

.date-range-row{display:flex; gap:8px; align-items:center; margin-bottom:16px; color:var(--soft);}
.date-range-row input{
  padding:8px 10px; border:1.5px solid var(--line); border-radius:8px;
  font-family:inherit; font-size:13px; background:var(--card); color:var(--text);
}
.date-range-row input:focus{outline:none; border-color:var(--gold);}

.score-hero{text-align:center; padding:18px 10px; margin-bottom:16px;}
.score-hero .value{font-family:var(--serif); font-size:46px; font-weight:600;}
.score-hero .label{font-size:12px; color:var(--gray); font-weight:700; letter-spacing:.1em;}

.summary-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px;}
.summary-box{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px;}
.summary-box .label{font-size:11px; color:var(--gray); font-weight:700; margin:0 0 4px; letter-spacing:.05em;}
.summary-box .value{font-family:var(--serif); font-size:18px; font-weight:600;}

.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(--line); font-size:13px; color:var(--soft);}
.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:var(--card); border:1px solid var(--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-family:var(--serif); font-size:14.5px; font-weight:600; color:#fff;}
.gauge-value{font-size:13px; font-weight:800;}
.gauge-note{font-size:11.5px; color:var(--gray); line-height:1.45; 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; border-top:1px solid var(--line); margin-top:30px;
}