/* ============================= TOKENS ============================= */
/* LOCKIN — dark by default, this is the brand. A light theme is available as an
   explicit account setting (see Settings), not tied to the OS preference. */
:root{
  color-scheme: dark;
  --ground:      #0a0b0d;
  --ground-2:    #101216;
  --surface:     #16181d;
  --surface-2:   #1d2025;
  --surface-3:   #262a30;
  --border:      #34383f;
  --border-soft: #212429;
  --text:        #f3f4f6;
  --text-dim:    #c6c9ce;
  --text-mute:   #7d828b;
  --accent:      #2e7dfd;
  --accent-2:    #5b9bff;
  --accent-ink:  #eaf2ff;
  --success:     #34d399;
  --success-bg:  #10251d;
  --danger:      #f0503b;
  --danger-bg:   #2c1712;
  --shadow:      0 20px 60px -20px rgba(0,0,0,.7);
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

/* Explicit light theme — set by toggling the switch in Settings, stored per account. */
:root[data-theme="light"]{
  color-scheme: light;
  --ground:      #f4f5f7;
  --ground-2:    #eceef2;
  --surface:     #ffffff;
  --surface-2:   #f1f2f5;
  --surface-3:   #e3e6ea;
  --border:      #d5d9df;
  --border-soft: #e6e8ec;
  --text:        #14161a;
  --text-dim:    #43474f;
  --text-mute:   #767b84;
  --success:     #0c9464;
  --success-bg:  #e1f7ee;
  --danger:      #d1402b;
  --danger-bg:   #fce9e6;
  --shadow:      0 20px 50px -24px rgba(15,18,24,.16);
}

/* ============================= RESET / BASE ============================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; letter-spacing:.005em; margin:0; text-wrap:balance; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }
::selection{ background:var(--accent); color:var(--accent-ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
}
[hidden]{ display:none!important; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* ============================= AUTH GATE ============================= */
.auth-gate{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(58% 60% at 78% 8%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%);
}
.auth-card{
  width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border-soft);
  border-radius:20px; padding:36px 32px; box-shadow:var(--shadow);
}
.auth-brand{ display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.auth-brand .brand-mark{ width:26px; height:26px; flex:none; }
.auth-brand .brand-word{ font-family:var(--font-display); font-weight:400; letter-spacing:.02em; font-size:18px; color:var(--text); }
.auth-brand .brand-word em{ font-style:normal; color:var(--accent); }
.auth-card h1{ font-size:26px; margin-bottom:8px; }
.auth-card .auth-sub{ color:var(--text-mute); font-size:14.5px; line-height:1.5; margin-bottom:26px; }
.auth-field{ margin-bottom:16px; }
.auth-field label{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); margin-bottom:8px; }
.auth-field input{
  width:100%; background:var(--surface-2); border:1px solid var(--border-soft); color:var(--text);
  font-size:15px; padding:12px 14px; border-radius:10px;
}
.auth-field input:focus{ border-color:var(--accent); }
.auth-field input.code-input{ font-family:var(--font-mono); font-size:22px; letter-spacing:.3em; text-align:center; }
.auth-submit{ width:100%; justify-content:center; margin-top:6px; }
.auth-error{ color:var(--danger); font-size:13.5px; margin-top:14px; line-height:1.5; }
.auth-note{ color:var(--text-mute); font-size:13px; margin-top:18px; line-height:1.5; }
.auth-note button{ background:none; border:none; color:var(--accent); font-size:13px; padding:0; text-decoration:underline; }
.auth-loading{ opacity:.6; pointer-events:none; }

/* ============================= SHELL / NAV ============================= */
.shell{ min-height:100vh; display:flex; flex-direction:column; }
.topnav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,4vw,48px);
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark{ width:34px; height:34px; flex:none; }
.brand-word{ font-family:var(--font-display); font-weight:400; font-size:25px; letter-spacing:.02em; color:var(--text); }
.brand-dots{ display:inline-flex; align-items:center; gap:4px; margin-left:6px; vertical-align:middle; }
.brand-dots i{ width:6px; height:6px; border-radius:50%; background:var(--accent); font-style:normal; opacity:.25; animation:dotWave 1.2s ease-in-out infinite; }
.brand-dots i:nth-child(1){ animation-delay:0s; }
.brand-dots i:nth-child(2){ animation-delay:.2s; }
.brand-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes dotWave{
  0%,60%,100%{ opacity:.25; transform:scale(.8); }
  30%{ opacity:1; transform:scale(1); }
}
.brand-word em{ font-style:normal; color:var(--accent); }
.navlinks{ display:flex; align-items:center; gap:4px; }
.navlink{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--text-mute); padding:9px 14px; border-radius:8px; transition:color .15s, background .15s;
}
.navlink:hover{ color:var(--text); background:var(--surface-2); }
.navlink.is-active{ color:var(--text); background:var(--surface-2); }
.account-chip{
  display:flex; align-items:center; gap:8px; margin-left:6px; padding:6px 6px 6px 12px;
  border:1px solid var(--border); border-radius:999px; background:var(--surface);
}
.account-chip .account-email{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-chip button{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--text-mute); background:var(--surface-2);
  border:none; border-radius:999px; padding:6px 11px; transition:color .15s, background .15s;
}
.account-chip button:hover{ color:var(--danger); }
.streak-chip{
  display:flex; align-items:center; gap:6px; margin-left:6px; padding:6px 12px;
  border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text-dim);
}
.streak-chip svg{ width:13px; height:13px; color:var(--accent); flex:none; }
.streak-chip b{ color:var(--text); font-size:13px; }

main{ flex:1; }
footer.site{
  padding:28px clamp(20px,4vw,48px) 40px; border-top:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
footer.site .fine{ font-size:13px; color:var(--text-mute); }

/* ============================= BUTTONS ============================= */
.btn{
  display:inline-flex; align-items:center; gap:8px; border-radius:10px; border:1px solid transparent;
  padding:12px 20px; font-weight:600; font-size:14.5px; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background .15s, border-color .15s;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:0 10px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-primary:hover{ background:var(--accent-2); }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--text); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-sm{ padding:7px 12px; font-size:13px; border-radius:8px; }
.btn[disabled]{ opacity:.55; pointer-events:none; }

/* ============================= HOME ============================= */
.view{ display:none; }
.view.is-active{ display:block; }

.hero{
  position:relative; overflow:hidden;
  padding:88px clamp(20px,6vw,64px) 80px;
  background:
    radial-gradient(58% 60% at 78% 8%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%);
}
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image: radial-gradient(65% 65% at 50% 32%, black, transparent 78%);
  mask-image: radial-gradient(65% 65% at 50% 32%, black, transparent 78%);
}
.hero-grid{
  position:relative; z-index:1; max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
}
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } }
.hero-inner{ min-width:0; }
.hero .eyebrow{ display:inline-block; margin-bottom:22px; }
.hero-streak{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px; padding:7px 14px 7px 12px;
  border:1px solid var(--border-soft); border-radius:999px; background:color-mix(in srgb, var(--surface) 80%, transparent);
  font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim);
}
.hero-streak svg{ width:14px; height:14px; color:var(--accent); flex:none; }
.hero-streak b{ color:var(--accent); font-size:13.5px; }
.hero h1{
  font-size:clamp(42px,6vw,72px); line-height:.98; letter-spacing:-.01em;
}
.hero h1 .accent-word{ color:var(--accent); }
.hero-sub{
  margin-top:26px; max-width:50ch; font-size:18px; line-height:1.6; color:var(--text-dim);
}
.hero-actions{ margin-top:36px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }

.hero-proof{
  position:relative; background:color-mix(in srgb, var(--surface) 90%, transparent);
  border:1px solid var(--border-soft); border-radius:20px; padding:26px 26px 20px;
  backdrop-filter:blur(6px); box-shadow:var(--shadow);
}
.proof-title{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); display:block; margin-bottom:16px; }
.proof-row{ display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--border-soft); }
.proof-row:first-of-type{ border-top:none; padding-top:0; }
.proof-ring-wrap{ position:relative; width:44px; height:44px; flex:none; }
.proof-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.proof-label{ font-size:12.5px; color:var(--text-mute); }
.proof-value{ font-size:18px; color:var(--text); }
.proof-link{
  display:block; margin-top:16px; padding-top:14px; border-top:1px solid var(--border-soft);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; color:var(--accent); text-decoration:none;
}
.proof-link:hover{ color:var(--accent-2); }

.section{ padding:64px clamp(20px,6vw,64px); max-width:1180px; margin:0 auto; }
.section-head{ max-width:64ch; margin-bottom:40px; }
.section-head .eyebrow{ margin-bottom:14px; display:block; }
.section-head h2{ font-size:clamp(28px,4vw,38px); letter-spacing:-.01em; }
.section-head p{ margin-top:14px; color:var(--text-dim); font-size:16.5px; max-width:58ch; }

.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.feature-card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:16px; padding:26px;
  display:flex; flex-direction:column; gap:12px;
  text-decoration:none; color:inherit;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.feature-card:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow); }
.fc-top-row{ display:flex; align-items:center; justify-content:space-between; }
.feature-card .fc-icon{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--accent);
}
.feature-card .fc-icon svg{ width:19px; height:19px; }
.fc-ring-wrap{ width:38px; height:38px; flex:none; }
.feature-card h3{ font-size:19px; }
.feature-card p{ color:var(--text-mute); font-size:14.5px; line-height:1.55; }
.feature-card .fc-cta{ margin-top:auto; padding-top:4px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.05em; color:var(--accent); }

.quote-strip{
  margin:8px clamp(20px,6vw,64px) 0; max-width:1180px; margin-left:auto; margin-right:auto;
  border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
  padding:44px 0; display:flex; gap:28px; align-items:center; flex-wrap:wrap; justify-content:space-between;
}
.quote-strip p{ font-family:var(--font-body); font-weight:500; font-style:italic; font-size:clamp(20px,2.6vw,27px); max-width:38ch; color:var(--text); }
.quote-strip .quote-mark{ font-size:52px; color:var(--accent); font-family:var(--font-display); line-height:.6; }

/* ============================= TRACKERS LIST ============================= */
.page-head{ padding:56px clamp(20px,6vw,64px) 8px; max-width:1180px; margin:0 auto; }
.page-head .crumb{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-mute); text-decoration:none; }
.page-head .crumb:hover{ color:var(--accent); }
.page-head h2{ font-size:clamp(30px,4.4vw,42px); margin-top:14px; letter-spacing:-.01em; }
.page-head p.lede{ margin-top:12px; color:var(--text-dim); max-width:60ch; font-size:16.5px; }

.tracker-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; padding:36px clamp(20px,6vw,64px) 80px; max-width:1180px; margin:0 auto; }
.tracker-card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:18px; padding:28px;
  display:flex; flex-direction:column; gap:16px; text-decoration:none; color:inherit;
  transition:border-color .18s, transform .18s, box-shadow .18s;
  position:relative; overflow:hidden;
}
.tracker-card.is-live:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow); }
.tracker-card .tc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.tracker-card h3{ font-size:21px; }
.tag{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; white-space:nowrap;
}
.tag-live{ background:var(--success-bg); color:var(--success); }
.tag-soon{ background:var(--surface-2); color:var(--text-mute); }
.tracker-card p.desc{ color:var(--text-mute); font-size:14.5px; line-height:1.55; }
.tracker-card .tc-stat{ font-family:var(--font-mono); font-size:13px; color:var(--text-dim); display:flex; gap:6px; align-items:baseline; }
.tracker-card .tc-stat b{ color:var(--accent); font-size:16px; }
.tracker-card.is-soon{ opacity:.55; border-style:dashed; }
.tracker-card .tc-cta{ margin-top:auto; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.05em; color:var(--accent); display:flex; align-items:center; gap:6px; }

/* ============================= TRACKER APP ============================= */
.app-wrap{ padding:28px clamp(16px,3vw,40px) 90px; max-width:1500px; margin:0 auto; }
.app-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.app-head .crumb{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-mute); text-decoration:none; }
.app-head .crumb:hover{ color:var(--accent); }
.app-title{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:6px; }
.app-title h2{ font-size:clamp(24px,3vw,32px); }
.week-control{
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border-soft);
  border-radius:12px; padding:6px 8px 6px 14px;
}
.week-control label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); }
.week-control input[type=date]{
  background:transparent; border:none; color:var(--text); font-family:var(--font-mono); font-size:13.5px; padding:6px 4px;
}
.icon-btn{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2);
  color:var(--text-dim); display:flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s;
}
.icon-btn:hover{ color:var(--accent); border-color:var(--accent); }
.icon-btn svg{ width:14px; height:14px; }

.stat-row{ display:grid; grid-template-columns:1.1fr 1fr 1.3fr; gap:18px; margin-bottom:24px; }
@media (max-width:1000px){ .stat-row{ grid-template-columns:1fr; } }
.panel{ background:var(--surface); border:1px solid var(--border-soft); border-radius:16px; padding:20px 22px; }
.panel-title{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-mute); margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; }

.overall-flex{ display:flex; align-items:center; gap:22px; }
.overall-ring-wrap{ flex:none; position:relative; width:118px; height:118px; }
.overall-ring-wrap .ring-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.overall-ring-wrap .ring-pct b{ font-family:var(--font-mono); font-size:24px; }
.overall-meta b{ font-family:var(--font-mono); font-size:26px; display:block; color:var(--text); }
.overall-meta .sub{ color:var(--text-mute); font-size:13px; margin-top:4px; }

.bars-svg{ width:100%; height:auto; display:block; }

.habit-table{ width:100%; border-collapse:collapse; }
.habit-table th{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); font-weight:500; padding:0 4px 8px; text-align:center; }
.habit-table th:first-child{ text-align:left; }
.habit-table td{ padding:6px 4px; border-top:1px solid var(--border-soft); text-align:center; }
.habit-table td:first-child{ text-align:left; }
.habit-name-wrap{ display:flex; align-items:center; gap:2px; }
.habit-name{ background:transparent; border:none; color:var(--text); font-size:13.5px; width:100%; flex:1; min-width:0; padding:4px 2px; border-radius:6px; }
.habit-name:hover, .habit-name:focus{ background:var(--surface-2); }
.chk{ appearance:none; width:18px; height:18px; border-radius:5px; border:1.5px solid var(--border); background:var(--surface-2); cursor:pointer; position:relative; transition:border-color .15s,background .15s; }
.chk:hover{ border-color:var(--accent); }
.chk:checked{ background:var(--accent); border-color:var(--accent); }
.chk:checked::after{ content:''; position:absolute; left:5px; top:1px; width:4px; height:9px; border:solid var(--accent-ink); border-width:0 2px 2px 0; transform:rotate(45deg); }
.habit-pct{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); width:38px; display:inline-block; }
.add-habit-row{ margin-top:12px; }
.add-row-btn{ font-family:var(--font-mono); font-size:12px; color:var(--text-mute); background:none; border:1px dashed var(--border); border-radius:8px; padding:7px 12px; width:100%; text-align:left; transition:border-color .15s,color .15s; }
.add-row-btn:hover{ color:var(--accent); border-color:var(--accent); }

.day-board{ display:grid; grid-template-columns:repeat(7,minmax(220px,1fr)); gap:16px; overflow-x:auto; padding-bottom:8px; }
@media (max-width:1300px){ .day-board{ grid-auto-flow:column; grid-auto-columns:250px; grid-template-columns:none; } }

.day-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.day-card.is-today{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.day-head{ background:var(--ground-2); padding:14px 16px 12px; text-align:center; }
.day-head .dname{ font-family:var(--font-display); font-weight:400; font-size:17px; letter-spacing:.01em; }
.day-head .ddate{ font-family:var(--font-mono); font-size:11px; color:var(--text-mute); margin-top:2px; }
.day-ring-wrap{ display:flex; justify-content:center; padding:16px 0 8px; position:relative; }
.day-ring-wrap .ring-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.day-ring-wrap .ring-pct b{ font-family:var(--font-mono); font-size:16px; }

.day-block{ padding:10px 14px 14px; }
.day-block-title{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute); padding:8px 0 6px; }
.task-row{ display:flex; align-items:flex-start; gap:8px; padding:5px 0; }
.task-row input[type=text]{ flex:1; min-width:0; background:transparent; border:none; color:var(--text); font-size:13.5px; padding:3px 4px; border-radius:6px; }
.task-row input[type=text]:hover, .task-row input[type=text]:focus{ background:var(--surface-2); }
.task-row.done input[type=text]{ color:var(--text-mute); text-decoration:line-through; }
.task-row .chk{ margin-top:3px; flex:none; }
.row-del{ opacity:.5; flex:none; width:20px; height:20px; border:none; background:none; color:var(--text-mute); border-radius:5px; display:flex; align-items:center; justify-content:center; transition:opacity .12s, color .12s, background .12s; }
.row-del:hover{ opacity:1; color:var(--danger); background:var(--danger-bg); }
.row-del svg{ width:11px; height:11px; }

.counts-strip{ display:flex; justify-content:space-between; padding:10px 14px; background:var(--ground-2); font-family:var(--font-mono); font-size:12px; }
.counts-strip .c-done{ color:var(--success); }
.counts-strip .c-left{ color:var(--text-mute); }

.note-line{ width:100%; background:transparent; border:none; border-bottom:1px dashed var(--border-soft); color:var(--text-dim); font-size:13px; padding:5px 2px; }
.note-line:hover, .note-line:focus{ background:var(--surface-2); border-radius:4px; }
.note-line::placeholder{ color:var(--text-mute); opacity:.7; }

/* ============================= WORKOUT TRACKER ============================= */
.unit-toggle{ display:flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.unit-toggle button{
  background:var(--surface-2); color:var(--text-mute); border:none; padding:8px 13px; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.04em;
}
.unit-toggle button.is-on{ background:var(--accent); color:var(--accent-ink); }

.bests-table{ width:100%; border-collapse:collapse; }
.bests-table td{ padding:8px 4px; border-top:1px solid var(--border-soft); }
.bests-table td:first-child{ width:52%; }
.bests-name{ background:transparent; border:none; color:var(--text); font-size:13.5px; width:100%; padding:4px 2px; border-radius:6px; }
.bests-name:hover,.bests-name:focus{ background:var(--surface-2); }
.bests-weight-wrap{ display:flex; align-items:center; gap:5px; justify-content:flex-end; }
.bests-weight{ background:var(--surface-2); border:1px solid var(--border-soft); color:var(--accent); font-family:var(--font-mono); font-size:15px; font-weight:600;
  width:64px; text-align:right; padding:5px 6px; border-radius:7px; }
.bests-weight:focus{ border-color:var(--accent); }
.bests-unit{ font-family:var(--font-mono); font-size:11px; color:var(--text-mute); }

.focus-row{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:6px; }
.focus-pill{
  background:var(--surface-2); border:1px solid var(--border-soft); color:var(--accent); font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; text-align:center; padding:4px 10px; border-radius:999px; width:auto; max-width:120px;
}
.focus-pill:focus{ border-color:var(--accent); }
.day-card.is-rest .day-ring-wrap{ opacity:.4; }
.rest-flag{ text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--text-mute); letter-spacing:.06em; text-transform:uppercase; padding:14px 0 6px; }

.exercise-row{ padding:7px 0; border-bottom:1px dashed var(--border-soft); }
.exercise-row:last-of-type{ border-bottom:none; }
.exercise-top{ display:flex; align-items:flex-start; gap:8px; }
.exercise-top .chk{ margin-top:3px; flex:none; }
.exercise-top input[type=text]{ flex:1; min-width:0; background:transparent; border:none; color:var(--text); font-size:13.5px; padding:3px 4px; border-radius:6px; }
.exercise-top input[type=text]:hover, .exercise-top input[type=text]:focus{ background:var(--surface-2); }
.exercise-row.done .exercise-top input[type=text]{ color:var(--text-mute); text-decoration:line-through; }
.exercise-meta{ display:flex; align-items:center; gap:4px; padding-left:26px; margin-top:2px; }
.num-field{ background:var(--surface-2); border:1px solid transparent; color:var(--text-dim); font-family:var(--font-mono); font-size:12px;
  width:34px; text-align:center; padding:4px 2px; border-radius:6px; }
.num-field:focus{ border-color:var(--accent); color:var(--text); }
.num-field.wt{ width:44px; }
.meta-x{ color:var(--text-mute); font-size:11px; font-family:var(--font-mono); }
.meta-unit{ color:var(--text-mute); font-size:10.5px; font-family:var(--font-mono); margin-left:2px; }

.week-control input[type=month]{
  background:transparent; border:none; color:var(--text); font-family:var(--font-mono); font-size:13.5px; padding:6px 4px;
}

/* ============================= FINANCE TRACKER ============================= */
.fn-summary-row{ display:flex; justify-content:space-between; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border-soft); }
.fn-summary-row > div{ display:flex; flex-direction:column; gap:5px; }
.fn-summary-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); }
.fn-summary-row b.num{ font-family:var(--font-mono); font-size:16px; color:var(--text); }
.fn-summary-input{ background:var(--surface-2); border:1px solid var(--border-soft); color:var(--text); font-family:var(--font-mono); font-size:16px; font-weight:600; width:82px; padding:5px 6px; border-radius:7px; }
.fn-summary-input:focus{ border-color:var(--accent); }

.cat-bar-row{ padding:9px 0; }
.cat-bar-row:not(:last-child){ border-bottom:1px dashed var(--border-soft); }
.cat-bar-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; margin-bottom:6px; gap:8px; }
.cat-bar-head .cat-name{ color:var(--text); }
.cat-bar-head .cat-amt{ font-family:var(--font-mono); font-size:12px; color:var(--text-mute); flex:none; }
.cat-bar-track{ height:7px; border-radius:4px; background:var(--surface-2); overflow:hidden; }
.cat-bar-fill{ height:100%; border-radius:4px; background:var(--accent); transition:width .3s ease; }
.cat-bar-fill.over{ background:var(--danger); }

.fn-txn-panel{ margin-bottom:24px; }
.fn-add-txn{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; align-items:center; }
.fn-add-txn input, .fn-add-txn select{ background:var(--surface-2); border:1px solid var(--border-soft); color:var(--text); font-family:var(--font-mono); font-size:12.5px; padding:8px 10px; border-radius:9px; }
.fn-add-txn input:focus, .fn-add-txn select:focus{ border-color:var(--accent); }
.fn-add-txn input[type=date]{ min-width:132px; }
.fn-add-txn select{ min-width:120px; }
.fn-add-txn input[type=text]{ flex:1; min-width:140px; }
.fn-add-txn input[type=number]{ width:100px; }
.txn-table{ width:100%; border-collapse:collapse; }
.txn-table th{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); font-weight:500; padding:0 8px 8px; text-align:left; }
.txn-table td{ padding:9px 8px; border-top:1px solid var(--border-soft); font-size:13.5px; }
.txn-table td.amt{ font-family:var(--font-mono); text-align:right; color:var(--text); }
.txn-empty{ color:var(--text-mute); font-size:13px; padding:14px 4px; text-align:center; }

/* ============================= DASHBOARD ============================= */
.dash-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; padding:8px clamp(20px,6vw,64px) 0; max-width:1180px; margin:0 auto; }
.dash-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:18px; }
.dash-card-top{ display:flex; align-items:center; gap:12px; }
.dash-icon{ width:38px; height:38px; border-radius:10px; background:var(--surface-2); color:var(--accent); flex:none; display:flex; align-items:center; justify-content:center; }
.dash-icon svg{ width:18px; height:18px; }
.dash-card-name{ flex:1; min-width:0; }
.dash-card-name h3{ font-size:16.5px; }
.dash-tag{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); }
.dash-open{ width:30px; height:30px; border-radius:8px; border:1px solid var(--border); color:var(--text-dim); flex:none; display:flex; align-items:center; justify-content:center; transition:border-color .15s,color .15s; }
.dash-open:hover{ color:var(--accent); border-color:var(--accent); }
.dash-open svg{ width:13px; height:13px; }
.dash-body{ display:flex; align-items:center; gap:18px; }
.dash-ring-wrap{ position:relative; width:84px; height:84px; flex:none; }
.dash-ring-wrap .ring-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.dash-ring-wrap .ring-pct b{ font-family:var(--font-mono); font-size:16px; }
.dash-metrics{ display:flex; flex-direction:column; gap:10px; flex:1; min-width:0; }
.dash-metric{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.dash-metric b{ font-family:var(--font-mono); font-size:15px; color:var(--text); white-space:nowrap; }
.dash-metric span{ font-size:12px; color:var(--text-mute); }
.streak-body{ align-items:center; }
.streak-current{ font-size:40px; color:var(--accent); flex:none; line-height:1; }
.dash-footnote{ text-align:center; color:var(--text-mute); font-size:13px; padding:30px clamp(20px,6vw,64px) 70px; }

.trend-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; max-width:1180px; margin:0 auto; padding:0 clamp(20px,6vw,64px) 60px; }
.trend-range{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-mute); text-transform:none; letter-spacing:normal; }
.trend-empty{ color:var(--text-mute); font-size:13px; text-align:center; padding:30px 4px; line-height:1.5; }

/* ============================= TRIAL BANNER ============================= */
.trial-banner{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  padding:10px clamp(16px,4vw,32px); text-align:center;
  background:color-mix(in srgb, var(--accent) 16%, var(--ground));
  border-bottom:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-family:var(--font-mono); font-size:12.5px; color:var(--text);
}
.trial-banner-btn{
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:.03em;
  color:var(--accent-ink); background:var(--accent); padding:6px 14px; border-radius:999px;
  text-decoration:none; white-space:nowrap; transition:transform .12s;
}
.trial-banner-btn:hover{ transform:translateY(-1px); }

/* ============================= PAYWALL ============================= */
.paywall-wrap{ min-height:70vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.paywall-card{
  width:100%; max-width:640px; background:var(--surface); border:1px solid var(--border-soft);
  border-radius:20px; padding:44px 40px; text-align:center; box-shadow:var(--shadow);
}
.paywall-card h2{ font-size:34px; margin:10px 0 14px; }
.paywall-card .lede{ color:var(--text-mute); font-size:15px; line-height:1.6; margin:0 auto 32px; max-width:460px; }
.plan-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; text-align:left; }
@media (max-width:560px){ .plan-grid{ grid-template-columns:1fr; } }
.plan-card{
  position:relative; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:14px;
  padding:22px 20px; display:flex; flex-direction:column; gap:6px;
}
.plan-card.is-best{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.plan-badge{
  position:absolute; top:-11px; right:16px; background:var(--accent); color:var(--accent-ink);
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.04em;
  padding:4px 10px; border-radius:999px;
}
.plan-name{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute); }
.plan-price{ font-family:var(--font-mono); font-size:32px; font-weight:600; color:var(--text); }
.plan-price span{ font-size:14px; font-weight:500; color:var(--text-mute); }
.plan-sub{ font-size:12px; color:var(--text-mute); margin-bottom:8px; }
.plan-card .btn{ margin-top:auto; text-align:center; justify-content:center; }

/* ============================= COACH UPSELL ============================= */
.coach-upsell{
  max-width:520px; margin:60px auto; text-align:center; background:var(--surface);
  border:1px solid var(--border-soft); border-radius:18px; padding:40px 34px;
}
.coach-upsell h3{ font-size:26px; margin:10px 0 14px; }
.coach-upsell p{ color:var(--text-mute); font-size:14.5px; line-height:1.6; margin:0 0 26px; }

/* ============================= BILLING PANEL ============================= */
.billing-wrap{ padding:8px clamp(20px,6vw,64px) 0; max-width:1180px; margin:0 auto; }
.billing-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 0; border-top:1px solid var(--border-soft);
}
.billing-row:first-of-type{ border-top:none; padding-top:4px; }
.billing-info{ display:flex; flex-direction:column; gap:4px; }
.billing-label{ font-size:14.5px; font-weight:600; color:var(--text); }
.billing-status{ font-family:var(--font-mono); font-size:12px; color:var(--text-mute); }
.billing-status.is-good{ color:var(--success); }
.billing-status.is-bad{ color:var(--danger); }
.billing-note{ color:var(--text-mute); font-size:12.5px; margin:16px 0 0; line-height:1.5; }

/* ============================= THE LONG GAME ============================= */
.goal-statement{
  width:100%; min-height:118px; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:10px;
  color:var(--text); font-family:inherit; font-size:14.5px; line-height:1.65; padding:14px 16px; resize:vertical;
}
.goal-statement:focus{ border-color:var(--accent); }
.goal-statement::placeholder{ color:var(--text-mute); }

/* ============================= SETTINGS ============================= */
.settings-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:22px; padding:8px clamp(20px,6vw,64px) 80px; max-width:1180px; margin:0 auto; }
@media (max-width:800px){ .settings-wrap{ grid-template-columns:1fr; } }
.color-field{ margin-bottom:22px; }
.color-field label{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); margin-bottom:10px; }
.color-row{ display:flex; align-items:center; gap:14px; }
.color-row input[type=color]{
  width:54px; height:42px; border:1px solid var(--border-soft); border-radius:10px; background:var(--surface-2);
  padding:3px; cursor:pointer;
}
.color-hex{ font-family:var(--font-mono); font-size:13.5px; color:var(--text-dim); letter-spacing:.02em; }
.color-preview{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.preview-ring-wrap{ width:54px; height:54px; flex:none; }

/* ============================= COACH ============================= */
.coach-wrap{ max-width:820px; margin:0 auto; padding:8px clamp(20px,6vw,64px) 80px; display:flex; flex-direction:column; gap:16px; }
.coach-log{
  display:flex; flex-direction:column; gap:14px; min-height:340px; max-height:60vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border-soft); border-radius:16px; padding:22px;
}
.coach-empty{ margin:auto; text-align:center; color:var(--text-mute); font-size:14px; max-width:36ch; line-height:1.5; }
.coach-msg{ max-width:78%; padding:11px 15px; border-radius:14px; font-size:14.5px; line-height:1.55; white-space:pre-wrap; }
.coach-msg.user{ align-self:flex-end; background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:4px; }
.coach-msg.assistant{ align-self:flex-start; background:var(--surface-2); color:var(--text); border-bottom-left-radius:4px; }
.coach-typing{
  align-self:flex-start; display:flex; align-items:center; gap:4px; padding:14px 15px;
  background:var(--surface-2); border-radius:14px; border-bottom-left-radius:4px;
}
.coach-typing i{ width:6px; height:6px; border-radius:50%; background:var(--text-mute); font-style:normal; opacity:.35; animation:dotWave 1.2s ease-in-out infinite; }
.coach-typing i:nth-child(1){ animation-delay:0s; }
.coach-typing i:nth-child(2){ animation-delay:.2s; }
.coach-typing i:nth-child(3){ animation-delay:.4s; }
.coach-input-row{ display:flex; gap:10px; }
.coach-input-row input{
  flex:1; min-width:0; background:var(--surface-2); border:1px solid var(--border-soft); color:var(--text);
  font-size:14.5px; padding:12px 16px; border-radius:12px;
}
.coach-input-row input:focus{ border-color:var(--accent); }
.coach-note{ color:var(--danger); font-size:13px; text-align:center; }

.save-flag{
  position:fixed; bottom:18px; right:18px; z-index:60; font-family:var(--font-mono); font-size:12px;
  background:var(--surface-3); border:1px solid var(--border); color:var(--text-mute); padding:8px 14px; border-radius:999px;
  display:flex; align-items:center; gap:8px; opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s;
  box-shadow:var(--shadow);
}
.save-flag.show{ opacity:1; transform:translateY(0); }
.save-flag .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1s infinite ease-in-out; }
.save-flag.saved .dot{ background:var(--success); animation:none; }
.save-flag.error .dot{ background:var(--danger); animation:none; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

@media (max-width:640px){
  .navlinks .navlink span.full{ display:none; }
  .hero{ padding-top:64px; }
  .account-chip .account-email{ display:none; }
}