/* THE REBUILD TRACKER — SGN design system */
:root{
  --navy:#060B17; --navy-light:#0E1A2E; --navy-mid:#16263D;
  --cream:#EFE7D4; --cream-dim:#8B96A8; --cream-mute:#5B687D;
  --yellow:#E8C547; --orange:#E55A2B; --purple:#6B4FA0;
  --success:#4CAF50; --grid-line:rgba(120,165,220,0.15);
  --font-display:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{background:var(--navy);color:var(--cream);font-family:var(--font-display);
  min-height:100%;overscroll-behavior-y:none;}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}

/* blueprint grid */
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse at 50% 30%,#000 0%,transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 0%,transparent 85%);}

#app{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:20px 18px 60px;}

/* header */
.app-header{text-align:center;padding:14px 0 18px;}
.brand-mark{display:flex;align-items:center;justify-content:center;gap:8px;}
.brand-name{font-weight:800;letter-spacing:.14em;font-size:15px;color:var(--cream);}
.brand-tick{font-family:var(--font-mono);color:var(--cream-mute);font-size:14px;}
.brand-tagline{font-family:var(--font-mono);font-size:11px;color:var(--cream-mute);
  letter-spacing:.05em;margin-top:6px;}

/* tabs */
.tabbar{display:flex;gap:4px;background:var(--navy-light);border:1px solid var(--grid-line);
  border-radius:10px;padding:4px;margin-bottom:22px;}
.tab{flex:1;background:none;border:none;color:var(--cream-mute);font-family:var(--font-mono);
  font-size:10px;font-weight:500;letter-spacing:.06em;padding:9px 4px;border-radius:7px;
  cursor:pointer;transition:all .18s;white-space:nowrap;}
.tab.active{background:var(--navy-mid);color:var(--cream);}
.tab:not(.active):active{color:var(--cream-dim);}

.view{display:none;animation:fade .25s ease;}
.view.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* today */
.today-head{margin-bottom:22px;}
.today-date{font-family:var(--font-mono);font-size:13px;color:var(--cream-dim);
  letter-spacing:.08em;text-transform:uppercase;}
.streak-banner{display:flex;align-items:baseline;gap:10px;margin-top:6px;}
.streak-num{font-family:var(--font-mono);font-size:52px;font-weight:700;line-height:1;
  color:var(--yellow);}
.streak-cap{font-family:var(--font-mono);font-size:11px;color:var(--cream-mute);
  letter-spacing:.1em;}

.habit-list{display:flex;flex-direction:column;gap:10px;}
.habit-row{display:flex;align-items:center;gap:14px;background:var(--navy-light);
  border:1px solid var(--grid-line);border-radius:12px;padding:16px 16px;cursor:pointer;
  position:relative;overflow:hidden;transition:transform .12s,border-color .2s;}
.habit-row:active{transform:scale(.99);}
.habit-row .fill{position:absolute;inset:0;width:0;opacity:.16;transition:width .35s ease;}
.habit-row.done .fill{width:100%;}
.habit-row.done.BODY .fill{background:var(--orange);}
.habit-row.done.MIND .fill{background:var(--purple);}
.habit-row.done.CRAFT .fill{background:var(--yellow);}
.habit-row.done{border-color:var(--success);}
.check{width:26px;height:26px;border-radius:7px;border:2px solid var(--cream-mute);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;z-index:1;
  transition:all .2s;}
.habit-row.done .check{background:var(--success);border-color:var(--success);}
.check svg{width:14px;height:14px;opacity:0;transform:scale(.5);transition:all .2s;}
.habit-row.done .check svg{opacity:1;transform:scale(1);}
.habit-meta{z-index:1;flex:1;min-width:0;}
.habit-name{font-size:15px;font-weight:600;color:var(--cream);}
.habit-pillar{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;margin-top:4px;}
.habit-pillar.BODY{color:var(--orange);}
.habit-pillar.MIND{color:var(--purple);}
.habit-pillar.CRAFT{color:var(--yellow);}
.habit-emoji{font-size:20px;z-index:1;}

.empty-state{text-align:center;color:var(--cream-mute);font-family:var(--font-mono);
  font-size:12px;padding:40px 20px;line-height:1.6;}

.add-habit-btn{width:100%;margin-top:16px;background:none;border:1px dashed var(--cream-mute);
  color:var(--cream-dim);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  padding:14px;border-radius:12px;cursor:pointer;transition:all .2s;}
.add-habit-btn:active{border-color:var(--cream-dim);color:var(--cream);}

.done-state{margin-top:24px;text-align:center;padding:24px 16px;
  background:var(--navy-light);border:1px solid var(--grid-line);border-radius:14px;
  animation:fade .4s ease;}
.done-msg{font-size:16px;font-weight:700;color:var(--success);letter-spacing:.02em;}
.reflect{font-family:var(--font-mono);font-size:12px;color:var(--cream-dim);
  margin-top:12px;line-height:1.6;font-style:italic;}

/* calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.cal-title{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:var(--cream);}
.cal-nav{background:var(--navy-light);border:1px solid var(--grid-line);color:var(--cream-dim);
  width:36px;height:36px;border-radius:9px;font-size:18px;cursor:pointer;}
.cal-nav:active{background:var(--navy-mid);}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;}
.cal-dow span{text-align:center;font-family:var(--font-mono);font-size:9px;color:var(--cream-mute);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-cell{aspect-ratio:1;border-radius:7px;background:var(--navy-light);
  border:1px solid var(--grid-line);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;color:var(--cream-mute);cursor:pointer;
  transition:transform .12s;}
.cal-cell.empty{background:none;border:none;cursor:default;}
.cal-cell:not(.empty):active{transform:scale(.92);}
.cal-cell.lvl1{border-color:var(--cream-mute);color:var(--cream-dim);}
.cal-cell.lvl2{background:rgba(232,197,71,.35);color:var(--navy);border-color:transparent;}
.cal-cell.lvl3{background:var(--yellow);color:var(--navy);border-color:transparent;font-weight:700;}
.cal-cell.today{box-shadow:0 0 0 2px var(--cream);}
.cal-legend{display:flex;gap:14px;justify-content:center;margin-top:18px;flex-wrap:wrap;}
.lg{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:9px;color:var(--cream-mute);}
.sw{width:12px;height:12px;border-radius:3px;display:inline-block;border:1px solid var(--grid-line);}
.sw0{background:var(--navy-light);}
.sw1{border-color:var(--cream-mute);}
.sw2{background:rgba(232,197,71,.35);border-color:transparent;}
.sw3{background:var(--yellow);border-color:transparent;}
.cal-detail{margin-top:20px;background:var(--navy-light);border:1px solid var(--grid-line);
  border-radius:12px;padding:16px;}
.cal-detail .cd-date{font-family:var(--font-mono);font-size:11px;color:var(--cream-dim);
  letter-spacing:.08em;margin-bottom:10px;}
.cal-detail .cd-item{font-size:13px;padding:5px 0;display:flex;gap:8px;align-items:center;}
.cal-detail .cd-item .dot{width:8px;height:8px;border-radius:50%;}
.cd-item .dot.BODY{background:var(--orange);}.cd-item .dot.MIND{background:var(--purple);}
.cd-item .dot.CRAFT{background:var(--yellow);}
.cd-item.miss{color:var(--cream-mute);}

/* stats */
.stats-head{margin-bottom:24px;}
.stats-title{font-weight:800;letter-spacing:.12em;font-size:18px;}
.stats-sub{font-family:var(--font-mono);font-size:11px;color:var(--cream-mute);margin-top:6px;}
.big-counters{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.bc{background:var(--navy-light);border:1px solid var(--grid-line);border-radius:14px;
  padding:20px 16px;text-align:center;}
.bc-num{font-family:var(--font-mono);font-size:42px;font-weight:700;color:var(--cream);line-height:1;}
.bc-cap{font-family:var(--font-mono);font-size:10px;color:var(--cream-mute);letter-spacing:.08em;margin-top:8px;}
.rate-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;}
.rate{background:var(--navy-light);border:1px solid var(--grid-line);border-radius:12px;padding:16px;text-align:center;}
.rate-num{font-family:var(--font-mono);font-size:26px;font-weight:700;color:var(--yellow);}
.rate-cap{font-family:var(--font-mono);font-size:10px;color:var(--cream-mute);margin-top:5px;letter-spacing:.06em;}
.pillar-bars{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;}
.pbar{}
.pbar-top{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;margin-bottom:6px;letter-spacing:.08em;}
.pbar.BODY .pbar-label{color:var(--orange);}.pbar.MIND .pbar-label{color:var(--purple);}.pbar.CRAFT .pbar-label{color:var(--yellow);}
.pbar-track{height:8px;background:var(--navy-light);border-radius:6px;overflow:hidden;}
.pbar-fill{height:100%;border-radius:6px;transition:width .6s ease;}
.pbar.BODY .pbar-fill{background:var(--orange);}.pbar.MIND .pbar-fill{background:var(--purple);}.pbar.CRAFT .pbar-fill{background:var(--yellow);}
.best-worst{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.bw{background:var(--navy-light);border:1px solid var(--grid-line);border-radius:12px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;}
.bw-label{font-family:var(--font-mono);font-size:10px;color:var(--cream-mute);letter-spacing:.06em;}
.bw-val{font-size:14px;font-weight:600;color:var(--cream);}
.bw-pct{font-family:var(--font-mono);font-size:13px;color:var(--cream-dim);}
.share-btn{width:100%;background:var(--yellow);color:var(--navy);border:none;font-family:var(--font-mono);
  font-weight:700;font-size:12px;letter-spacing:.1em;padding:16px;border-radius:12px;cursor:pointer;transition:transform .12s;}
.share-btn:active{transform:scale(.98);}

/* settings */
.setup-head,.danger-zone{}
.setup-head{font-weight:800;letter-spacing:.12em;font-size:16px;margin-bottom:18px;}
.setup-list{display:flex;flex-direction:column;gap:10px;}
.setup-row{display:flex;align-items:center;gap:12px;background:var(--navy-light);border:1px solid var(--grid-line);
  border-radius:12px;padding:14px 16px;}
.setup-row .sr-emoji{font-size:18px;}
.setup-row .sr-meta{flex:1;min-width:0;}
.setup-row .sr-name{font-size:14px;font-weight:600;}
.setup-row .sr-pillar{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;margin-top:2px;}
.sr-pillar.BODY{color:var(--orange);}.sr-pillar.MIND{color:var(--purple);}.sr-pillar.CRAFT{color:var(--yellow);}
.sr-actions{display:flex;gap:8px;}
.sr-btn{background:var(--navy-mid);border:none;color:var(--cream-dim);font-size:14px;width:32px;height:32px;
  border-radius:8px;cursor:pointer;}
.sr-btn:active{color:var(--cream);}
.add-row-btn{width:100%;margin-top:14px;background:none;border:1px dashed var(--cream-mute);color:var(--cream-dim);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;padding:14px;border-radius:12px;cursor:pointer;}
.startdate-block{margin-top:26px;background:var(--navy-light);border:1px solid var(--grid-line);border-radius:12px;padding:16px;}
.sd-head{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--cream-dim);margin-bottom:10px;}
.sd-input{width:100%;background:var(--navy);border:1px solid var(--grid-line);color:var(--cream);font-family:var(--font-mono);font-size:14px;padding:12px 14px;border-radius:10px;outline:none;color-scheme:dark;}
.sd-input:focus{border-color:var(--cream-mute);}
.sd-hint{font-family:var(--font-mono);font-size:10px;color:var(--cream-mute);margin-top:8px;line-height:1.5;}
.danger-zone{margin-top:40px;display:flex;flex-direction:column;gap:10px;}
.export-btn,.reset-btn{width:100%;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  padding:14px;border-radius:12px;cursor:pointer;}
.export-btn{background:var(--navy-light);border:1px solid var(--grid-line);color:var(--cream-dim);}
.reset-btn{background:none;border:1px solid var(--orange);color:var(--orange);}
.reset-btn:active{background:rgba(229,90,43,.12);}
.foot-credit{text-align:center;font-family:var(--font-mono);font-size:9px;color:var(--cream-mute);
  letter-spacing:.12em;margin-top:36px;}

/* modals */
[hidden]{display:none !important;}
.modal-wrap{position:fixed;inset:0;z-index:50;background:rgba(6,11,23,.82);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .2s ease;}
.modal{width:100%;max-width:380px;background:var(--navy-light);border:1px solid var(--grid-line);
  border-radius:16px;padding:24px;}
.modal-title{font-weight:800;letter-spacing:.08em;font-size:14px;margin-bottom:18px;}
.inp{width:100%;background:var(--navy);border:1px solid var(--grid-line);color:var(--cream);
  font-family:var(--font-display);font-size:15px;padding:13px 14px;border-radius:10px;margin-bottom:14px;outline:none;}
.inp:focus{border-color:var(--cream-mute);}
.pillar-pick{display:flex;gap:8px;margin-bottom:14px;}
.pp{flex:1;background:var(--navy);border:1px solid var(--grid-line);font-family:var(--font-mono);
  font-size:10px;letter-spacing:.08em;padding:11px 4px;border-radius:9px;cursor:pointer;color:var(--cream-mute);transition:all .2s;}
.pp.body.sel{background:var(--orange);color:var(--navy);border-color:transparent;}
.pp.mind.sel{background:var(--purple);color:var(--cream);border-color:transparent;}
.pp.craft.sel{background:var(--yellow);color:var(--navy);border-color:transparent;}
.modal-actions{display:flex;gap:10px;margin-top:6px;}
.m-cancel,.m-save{flex:1;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;padding:13px;border-radius:10px;cursor:pointer;border:none;}
.m-cancel{background:var(--navy-mid);color:var(--cream-dim);}
.m-save{background:var(--yellow);color:var(--navy);font-weight:700;}
.m-save.danger{background:var(--orange);color:var(--navy);}
.confirm-msg{font-size:14px;color:var(--cream-dim);line-height:1.5;margin-bottom:20px;}

/* ---- FREE VERSION: upgrade UI ---- */
.share-btn.locked{background:var(--navy-light);color:var(--cream-dim);border:1px solid var(--yellow);}
.export-btn.locked{border-color:var(--yellow);color:var(--cream-dim);}
.upgrade-link{display:block;text-align:center;font-family:var(--font-mono);font-size:11px;
  color:var(--yellow);text-decoration:none;margin-top:12px;letter-spacing:.04em;}
.upgrade-link:active{opacity:.7;}
.pro-banner{display:block;text-decoration:none;background:linear-gradient(135deg,var(--navy-mid),var(--navy-light));
  border:1px solid var(--yellow);border-radius:14px;padding:18px;margin-bottom:24px;transition:transform .12s;}
.pro-banner:active{transform:scale(.99);}
.pro-banner-top{font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--yellow);}
.pro-banner-mid{font-size:13px;color:var(--cream);margin-top:8px;}
.pro-banner-cta{font-family:var(--font-mono);font-size:11px;color:var(--cream-dim);margin-top:10px;letter-spacing:.04em;}