:root{
  --cream:#FAF3DD; --cream-card:#FFFDF5; --amber:#D9A441; --olive:#6F7D3F;
  --rust:#9E3B26; --navy:#11243B; --ink:#2C2A24; --muted:#8A8472; --line:#EADFC2;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--cream);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  padding-bottom:90px}
.app{max-width:520px;margin:0 auto;padding:0 18px}
.greeting{padding:max(env(safe-area-inset-top),16px) 6px 0}
.greeting .date{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.greeting h1{font-family:Georgia,serif;font-size:30px;font-weight:700;margin-top:2px}

.card{background:var(--cream-card);border:1px solid var(--line);border-radius:24px;
  padding:18px;margin:14px 4px;box-shadow:0 6px 18px rgba(120,90,30,.05)}
.card h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin-bottom:14px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.card h2 .edit-btn{font-size:11px;color:var(--rust);background:none;border:none;cursor:pointer;font-weight:700;letter-spacing:.04em}

/* day remaining */
.dayleft{background:var(--navy);color:var(--cream);border-radius:24px;padding:18px 22px;margin:16px 4px 14px}
.dayleft .label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin-bottom:6px}
.dayleft .pct{font-size:44px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;margin-bottom:10px}
.dayleft .pct small{font-size:24px;font-weight:700;opacity:.85}
.dayleft .clock-row{display:flex;align-items:baseline}
.dayleft .hms{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;opacity:.85}
.dayleft .sep{font-size:18px;font-weight:700;opacity:.55;margin:0 1px}
.dayleft .ms{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--amber)}
.dayleft .bar{height:5px;background:rgba(255,255,255,.15);border-radius:99px;margin-top:12px;overflow:hidden}
.dayleft .bar>i{display:block;height:100%;background:var(--amber);border-radius:99px}

/* rings */
.rings{display:flex;justify-content:space-around;align-items:flex-start}
.ring-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.ring{position:relative;width:96px;height:96px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring .val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ring .num{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.cap{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* habits */
.habit{display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.habit:last-child{border-bottom:none}
.check{width:26px;height:26px;border-radius:50%;border:2px solid var(--olive);flex:none;position:relative;cursor:pointer;transition:background .2s ease}
.check.done{background:var(--olive)}
.check.done::after{content:"✓";color:#fff;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.check.rest{border-color:var(--line);border-style:dashed;cursor:default}
.habit .name{flex:1;font-size:15px;font-weight:600}
.habit .name.rest{color:var(--muted);font-weight:500}
.streak{font-size:13px;font-weight:700;color:var(--amber)}

/* goals */
.goal-period{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px}
.goal-title{font-size:17px;font-weight:700;margin-bottom:10px}
.countdown{display:flex;gap:5px;margin-bottom:14px}
.cd{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:7px 0;flex:1;text-align:center}
.cd b{display:block;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--navy)}
.cd span{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tactic{display:flex;align-items:center;gap:10px;font-size:14px;padding:5px 0}
.tactic .tc{width:20px;height:20px;border-radius:6px;border:2px solid var(--olive);flex:none;position:relative;cursor:pointer}
.tactic .tc.done{background:var(--olive)}
.tactic .tc.done::after{content:"✓";color:#fff;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.exec{margin-top:14px}
.exec .row{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:6px}
.exec .track{height:10px;background:var(--cream);border:1px solid var(--line);border-radius:99px;position:relative;overflow:hidden}
.exec .track>i{display:block;height:100%;background:var(--olive)}
.exec .target{position:absolute;left:85%;top:-3px;bottom:-3px;width:2px;background:var(--rust)}
.pace{font-size:12px;font-weight:700;margin-top:8px}
.pace.ok{color:var(--olive)} .pace.behind{color:var(--rust)}

/* relationship */
.rel-stat{display:flex;gap:12px;margin-bottom:14px}
.rel-box{flex:1;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:12px 12px 14px;display:flex;flex-direction:column}
.rel-box .k{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;height:2.6em;display:flex;align-items:flex-end;margin-bottom:6px}
.rel-box .v{font-size:26px;font-weight:800;line-height:1}
.rel-box .v small{font-size:13px;font-weight:600;color:var(--muted);margin-left:2px}
.rel-next{background:var(--amber);color:var(--navy);border-radius:16px;padding:12px 14px;font-size:14px;font-weight:700;margin-bottom:12px}
.rel-next span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.75;font-weight:700;margin-bottom:2px}

/* inline editor rows */
.edit-row{display:flex;gap:8px;align-items:center;padding:6px 0}
.edit-row input[type=text]{flex:1;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--cream)}
.edit-row .del{color:var(--rust);background:none;border:none;font-size:18px;cursor:pointer}
.daypick{display:flex;gap:4px}
.daypick label{font-size:11px;font-weight:700;width:26px;height:26px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted)}
.daypick input{display:none}
.daypick input:checked + span{}
.daypick label.on{background:var(--olive);color:#fff;border-color:var(--olive)}
.add-btn{margin-top:8px;font-size:13px;font-weight:700;color:var(--olive);background:none;border:1px dashed var(--olive);border-radius:10px;padding:8px 12px;cursor:pointer;width:100%}
.save-bar{display:flex;gap:8px;margin-top:12px}
.save-bar button{flex:1;padding:10px;border-radius:12px;border:none;font-weight:700;cursor:pointer}
.save-bar .save{background:var(--navy);color:var(--cream)}
.save-bar .cancel{background:var(--cream);color:var(--ink);border:1px solid var(--line)}

/* tab bar */
.tabs{position:fixed;bottom:0;left:0;right:0;height:74px;background:var(--cream-card);
  border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-around;
  padding-bottom:max(env(safe-area-inset-bottom),14px);z-index:10}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:700;
  color:var(--muted);background:none;border:none;cursor:pointer}
.tab.active{color:var(--rust)}
.tab:disabled{opacity:.4}
.tab .dot{width:22px;height:22px;border-radius:7px;background:currentColor;opacity:.85}

/* desktop */
@media (min-width:900px){
  body{padding-bottom:0;padding-left:200px}
  .app{max-width:1100px}
  #view-today{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start}
  #view-today .dayleft{grid-column:1 / -1}
  .tabs{flex-direction:column;justify-content:flex-start;gap:18px;width:180px;height:100vh;
    top:0;right:auto;border-top:none;border-right:1px solid var(--line);padding-top:30px}
}