s:root{
  --bg:#fbf7f2; --card:#fff; --muted:#bfb7af; --accent:#e9e0d8; --text:#222;
  --radius:12px; --soft: 0 10px 30px rgba(20,20,20,0.06);
  --green: #1e8e3e; --green-soft: #e6f6ea;
  --blue: #1e6fe8; --blue-soft: #e8f0ff;
}
*{box-sizing:border-box}
html,body{height:100%;scroll-padding-top:80px}
.body-plain{min-height:100%}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased}
.sidebar{width:220px; position:fixed; left:0; top:0; bottom:0; background:linear-gradient(#fff, #fbf7f2); border-right:1px solid var(--accent); padding:28px; display:flex; flex-direction:column; gap:20px}
.brand{font-weight:700; font-size:14px}
.nav button{display:block; width:100%; padding:10px 12px; margin-top:6px; border-radius:8px; border:none; background:transparent; text-align:left}
.nav button.active{background:#f3ebe3}
.support{margin-top:auto; font-size:13px; color:var(--muted)}
.main{margin-left:260px; padding:40px; max-width:1100px; padding-bottom:120px}

.hero{position:sticky; top:0; background:#fbf7f2; padding:16px 0; z-index:30; border-bottom:1px solid #e9e0d8; box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.hero-inner{display:flex; justify-content:space-between; align-items:center}
.hero h1{font-size:34px; margin:0}
.hero .sub{color:var(--muted); margin:6px 0 0}
.settings-toggle button{padding:8px 12px; border-radius:8px; border:1px solid var(--accent); background:#fff}

.progress{display:flex; gap:18px; align-items:stretch; margin-top:24px; position:relative; z-index:10}
.progress-left{flex:2}
.progress-right{flex:1; display:flex; gap:12px; align-items:center}
.progress-card{background:var(--card); padding:12px 14px; border-radius:12px; box-shadow:var(--soft); text-align:center}
.progress-card.large{padding:18px}
.card-label{color:var(--muted); font-size:13px}
.card-number{font-size:26px; font-weight:700}
.progress-bar{height:8px; background:#f1f1f1; border-radius:8px; margin-top:10px; overflow:hidden}
.bar-fill{height:100%; background:linear-gradient(90deg,var(--green),#6cc07a); width:0%}

.controls{margin-top:12px}
.controls.collapsed{display:none}
.controls-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.controls-row label{font-size:13px; color:var(--text)}
.controls-row input{margin-left:6px; padding:8px 10px; border-radius:10px; border:1px solid #eee; background:#fff}

.goals-manage{flex-direction:column;align-items:flex-start;gap:10px;margin-top:10px}
.goals-manage label{font-weight:600;color:var(--text)}
.goals-manage>div:nth-of-type(1){display:flex;gap:8px;width:100%}
.goals-manage input{flex:1;padding:8px 10px;border-radius:8px;border:1px solid #eee;font-size:13px}
.goals-manage button{padding:8px 14px;border-radius:8px;border:1px solid var(--accent);background:#fff;cursor:pointer;font-size:13px;white-space:nowrap}
.goal-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;width:100%}
.goal-tag{display:inline-flex;align-items:center;gap:6px;background:var(--blue-soft);color:var(--blue);border-radius:6px;padding:6px 10px;font-size:12px;font-weight:500}
.goal-tag .goal-remove{background:none;border:none;cursor:pointer;font-size:14px;color:inherit;padding:0;line-height:1;opacity:0.7}
.goal-tag .goal-remove:hover{opacity:1}
.col-goal{width:88px}
.table-wrap{background:transparent; margin-top:18px}
.sprint-table{width:100%; border-collapse:collapse; background:transparent}
.sprint-table thead th{font-weight:700; text-align:left; padding:12px 12px; color:var(--muted); font-size:14px}
.sprint-table thead .col-sub{display:block; font-size:11px; color:var(--muted); margin-top:2px}
.sprint-table tbody td{padding:14px 12px; border-top:1px solid rgba(0,0,0,0.03); background:rgba(255,255,255,0.9); vertical-align:middle}
.sprint-table tr:nth-child(odd) td{background:rgba(255,255,255,0.98)}
.sprint-table tr.today td{background:linear-gradient(90deg, rgba(255,248,230,0.6), rgba(255,255,255,0.6)); border-left:4px solid rgba(255,200,80,0.6)}
.col-day{width:64px}
.col-date{width:120px}
.col-move,.col-water{width:88px}
.col-weight{width:120px}
.col-notes{min-width:180px}

/* Tri-state button styles */
.tri-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:30px;border-radius:8px;border:1px solid #e6e0d8;background:#fff;cursor:pointer;font-size:14px;transition:all 0.15s}
.tri-btn.movement.done{background:var(--green-soft);color:var(--green);border-color:rgba(30,142,62,0.15)}
.tri-btn.movement.missed{background:#fff0f0;color:#a12b2b;border-color:rgba(200,80,80,0.12)}
.tri-btn.water.done{background:var(--blue-soft);color:var(--blue);border-color:rgba(30,111,232,0.12)}
.tri-btn.water.missed{background:#fff5f0;color:#c04a2a;border-color:rgba(200,120,100,0.08)}
.tri-btn:not(.movement):not(.water).done{background:#f0f0f0;color:#333;border-color:#ddd}
.tri-btn:not(.movement):not(.water).missed{background:#ffe8e8;color:#8b4a4a;border-color:#d9b5b5}
.weight{width:100px;padding:6px;border-radius:8px;border:1px solid #eee}
.weight-display{color:var(--text); cursor:pointer}

.table-actions{margin-top:12px}
.hidden-row{display:none}
.future-row td{opacity:0.35; pointer-events:none}
.future-row .tri-btn,.future-row input{cursor:not-allowed}
@media (max-width:1000px){.sidebar{display:none}.main{margin-left:20px;padding:20px}}