:root {
  --purple: #6d5cff;
  --purple-deep: #5b4cf0;
  --purple-2: #7c6cff;
  --purple-soft: #f4f2ff;
  --green: #22c55e;
  --green-2: #16a34a;
  --orange: #f59e0b;
  --red: #ef4444;
  --ink: #1a1633;
  --muted: #8b8fa3;
  --line: #eef0f5;
  --bg: #f6f6fb;
  --card: #ffffff;
  --radius: 18px;
  --nav-h: 58px;
  --safe-b: env(safe-area-inset-bottom);
  --shadow: 0 1px 2px rgba(26,22,51,.04), 0 10px 28px rgba(109,92,255,.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Inter, system-ui, sans-serif;
  background: #eceaf6;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -.015em;
  -webkit-font-smoothing: antialiased;
}
b, strong { font-weight: 600; }
button, input, select, textarea { font-family: inherit; font-weight: 500; }
a { color: inherit; }
img { max-width: 100%; }
svg { stroke-linecap: round; stroke-linejoin: round; }

/* Auth */
.auth-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(900px 420px at 100% 0, rgba(99,102,241,.22), transparent), #ece8f8;
}
.auth-card {
  width: min(380px, 92vw);
  background: #fff;
  border-radius: 24px;
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow);
}
.auth-logo { font-weight: 700; letter-spacing: .22em; color: var(--purple); text-align: center; font-size: .95rem; }
.auth-tag { text-align: center; color: var(--muted); margin: .15rem 0 1rem; font-size: .78rem; font-weight: 400; }
.auth-card h1 { margin: 0; font-size: 1.25rem; font-weight: 650; letter-spacing: -.03em; }
.auth-lead { color: var(--muted); margin: .25rem 0 .9rem; font-size: .85rem; font-weight: 400; }
.auth-card label { display: block; font-size: .75rem; color: var(--muted); margin-bottom: .2rem; font-weight: 500; }
.auth-card input {
  width: 100%; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 12px; margin: .15rem 0 .85rem;
  font-weight: 400;
}
.btn-primary, .btn-main {
  width: 100%; padding: .72rem; border: 0; border-radius: 999px;
  background: var(--purple); color: #fff; font-weight: 600; cursor: pointer; font-size: .9rem;
}
.err { color: #c0392b; display: block; margin-bottom: .6rem; }
.hint { color: #678; font-size: .85rem; margin-top: 1rem; }

/* Shell */
.app-shell { display: flex; min-height: 100vh; justify-content: center; }
.desk-side {
  display: none;
  width: 220px;
  background: #16132b;
  color: #ecebff;
  padding: 1.1rem .85rem;
  flex-direction: column;
  gap: .08rem;
}
.desk-side .brand { display: flex; align-items: center; gap: .5rem; font-weight: 650; margin-bottom: 1rem; text-decoration: none; color: #fff; letter-spacing: .08em; font-size: .82rem; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 9px; background: var(--purple);
  display: grid; place-items: center; font-weight: 700; font-size: .8rem;
}
.desk-side nav a, .desk-side .side-out {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 10px;
  color: rgba(236,235,255,.72); text-decoration: none; cursor: pointer; font-size: .84rem; font-weight: 500;
}
.desk-side nav a svg { width: 16px; height: 16px; }
.desk-side nav a.active, .desk-side nav a:hover { background: rgba(109,92,255,.22); color: #fff; }
.desk-side nav a.active, .desk-side nav a:hover { background: rgba(99,102,241,.35); color: #fff; }
.desk-side .side-out { margin-top: auto; }
.phone-wrap {
  width: min(430px, 100%);
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  box-shadow: 0 0 0 1px rgba(17,24,39,.06);
}
.app { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 8px); min-height: 100vh; }

.bottom-nav {
  position: sticky; bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: #fff;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  z-index: 40;
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: .62rem; color: #a1a5b8; text-decoration: none; cursor: pointer; font-weight: 500;
}
.bottom-nav a.active { color: var(--purple); font-weight: 600; }
.bottom-nav svg { width: 18px; height: 18px; }

@media (min-width: 980px) {
  .app-shell { justify-content: stretch; }
  .desk-side { display: flex; position: sticky; top: 0; height: 100vh; }
  .phone-wrap {
    width: min(1100px, calc(100% - 240px));
    margin: 0 auto;
    background: var(--bg);
    box-shadow: none;
    overflow-x: hidden;
  }
  .bottom-nav { display: none; }
  .app { padding-bottom: 32px; }
  .desk-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: start; }
}

/* Common UI */
.page { padding: 10px 16px 18px; min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: 8px; padding: 4px 0 8px;
}
.topbar h1, .topbar .title { flex: 1; margin: 0; font-size: 1.05rem; text-align: center; color: #2a2156; font-weight: 650; letter-spacing: -.02em; }
.icon-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--purple);
  display: grid; place-items: center; cursor: pointer;
}
.icon-btn svg { width: 18px; height: 18px; }
.sub { color: var(--muted); font-size: .78rem; text-align: center; margin-top: -4px; margin-bottom: 10px; font-weight: 400; }
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,.9);
}
.banner {
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex; gap: 10px; align-items: center;
}
.banner.purple { background: linear-gradient(135deg, #6d28d9, #6366f1); color: #fff; }
.banner.soft { background: var(--purple-soft); color: #312e81; }
.banner.green { background: #ecfdf5; color: #065f46; }
.banner.orange { background: #fff7ed; color: #9a3412; }
.banner.blue { background: #eef2ff; color: #3730a3; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.muted { color: var(--muted); font-size: .82rem; }
.tiny { font-size: .7rem; color: var(--muted); font-weight: 400; }
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; padding: 1px 7px; font-size: .65rem; font-weight: 600;
}
.pill.good { background: #dcfce7; color: #15803d; }
.pill.fair, .pill.warn { background: #ffedd5; color: #c2410c; }
.pill.bad { background: #fee2e6; color: #b91c1c; }
.pill.purple { background: #ede9fe; color: #5b21b6; }
.chip {
  border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 10px 8px;
  text-align: center; cursor: pointer; font-size: .78rem; position: relative;
  font-family: inherit; color: inherit;
}
.grid-4 > .chip { width: 100%; }
.chip.sel { border-color: var(--green-2); box-shadow: 0 0 0 2px rgba(16,185,129,.15); }
.chip.sel .check, .sel-badge {
  position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--green-2); color: #fff; font-size: 10px; display: grid; place-items: center;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hscroll {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 8px 0 12px;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.hscroll.is-hold, .hscroll.is-drag,
.hscroll.is-hold *, .hscroll.is-drag * { cursor: grabbing !important; user-select: none !important; }
.hscroll-track {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 10px;
  width: max-content;
  max-width: none;
}
.hscroll-track > * { flex: 0 0 auto; }
.hscroll > .choice,
.hscroll > .card,
.hscroll > .plan-mini,
.hscroll > span {
  flex: 0 0 auto;
}
.hscroll:not(:has(.hscroll-track)) {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
}
.progress {
  height: 4px; background: #eef0f6; border-radius: 99px; overflow: hidden;
}
.progress > i { display: block; height: 100%; background: var(--purple); }
.link {
  color: var(--purple); font-weight: 500; font-size: .78rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; line-height: 1.2;
  border: 0; background: none; padding: 0; font-family: inherit;
}
.chev {
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 1.6px solid currentColor;
  border-top: 1.6px solid currentColor;
  transform: rotate(45deg);
  flex: 0 0 auto;
  margin-left: 2px;
  position: relative;
  top: -1px;
}
.list-row > .chev, .hp-card > .chev { color: #c5c9d6; margin-left: 4px; }
.btn-block {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: .7rem; border: 0; border-radius: 999px;
  background: var(--purple); color: #fff; font-weight: 600; cursor: pointer; font-size: .88rem;
}
.btn-block svg { width: 16px; height: 16px; }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: .62rem 12px; border-radius: 12px; border: 1px solid #d9d4f7;
  background: #fff; color: var(--purple); font-weight: 600; cursor: pointer; font-size: .82rem;
  white-space: nowrap;
}
.btn-outline svg { width: 16px; height: 16px; flex: 0 0 auto; display: block; }
.btn-ghost { background: #fff; border: 1px dashed var(--line); }
.stat { text-align: center; }
.stat b { display: block; font-size: 1.05rem; font-weight: 650; }
.section-h { font-size: .95rem; font-weight: 700; margin: 14px 0 8px; }

/* Dashboard */
.logo-row { text-align: center; padding-top: 2px; }
.logo-row b { letter-spacing: .22em; font-size: .78rem; color: var(--purple); font-weight: 650; }
.logo-row .tiny { font-size: .62rem; letter-spacing: 0; }
.dash-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 0; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #ddd6fe, #a5b4fc); color: #fff;
  display: grid; place-items: center; font-weight: 600; position: relative; font-size: .75rem;
}
.avatar .lvl {
  position: absolute; right: -2px; bottom: -2px; background: var(--purple); color: #fff;
  font-size: .55rem; border-radius: 99px; padding: 0 4px; font-weight: 600;
}
.bio-card { position: relative; }
.bio-num { font-size: 1.85rem; font-weight: 700; color: var(--green-2); margin: 0; letter-spacing: -.04em; }
.gauge {
  width: 72px; height: 72px; border-radius: 50%;
  background: conic-gradient(#22c55e 0 82%, #eceef5 0);
  display: grid; place-items: center; margin: 0 auto;
  overflow: hidden; pointer-events: none;
}
.gauge span, .gauge-in {
  width: 56px; height: 56px; border-radius: 50%; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-weight: 600; font-size: .58rem; line-height: 1.1;
}
.gauge-in svg { width: 12px; height: 12px; color: #16a34a; }
.gauge-in small { font-size: .58rem; font-weight: 600; color: #3f3a5a; letter-spacing: -.02em; }
.factor { display: flex; justify-content: space-between; font-size: .8rem; padding: 3px 0; }
.metric-mini {
  flex: 0 0 112px;
  width: 112px;
  min-width: 112px;
  min-height: 118px;
  background: #fff; border-radius: 16px; padding: 10px 10px 8px;
  box-shadow: var(--shadow);
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start;
  box-sizing: border-box;
}
.mini-add {
  width: 18px; height: 18px; border-radius: 50%; padding: 0;
  border: 0; background: var(--purple-soft); color: var(--purple);
  display: grid; place-items: center; flex: 0 0 auto; cursor: pointer;
}
.mini-add i, .mini-add svg { width: 11px; height: 11px; }
.metric-mini .mini-add, .card.stat .mini-add {
  position: absolute; top: 8px; right: 8px;
}
.card.vital, .card.js-go { cursor: pointer; }
.metric-mini b { display: block; font-size: .95rem; margin-top: 2px; font-weight: 650; }
.coins-bar {
  display: flex; align-items: center; gap: 8px; background: #fff7ed; border-radius: 14px; padding: 10px 12px;
}

/* Lists */
.list-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.list-row:last-child { border-bottom: 0; }
.ico {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto;
}
.ico svg { width: 16px; height: 16px; }
.ico.red { background: #fff1f2; color: #e11d48; }
.ico.purple { background: #f3f0ff; color: #6d5cff; }
.ico.green { background: #ecfdf5; color: #059669; }
.ico.orange { background: #fff7ed; color: #ea580c; }
.ico.blue { background: #eff6ff; color: #2563eb; }
.ico.teal { background: #f0fdfa; color: #0d9488; }
.ico.gray { background: #f1f5f9; color: #64748b; }

/* Forms */
.seg {
  display: flex; background: #f0f1f6; border-radius: 999px; padding: 3px; gap: 2px; margin-bottom: 10px;
}
.seg button {
  flex: 1; border: 0; background: transparent; border-radius: 999px; padding: .38rem .3rem;
  font-size: .72rem; font-weight: 550; color: #8b8fa3; cursor: pointer;
}
.seg button.on { background: #fff; color: var(--purple); box-shadow: 0 1px 3px rgba(26,22,51,.08); }
.choice-row { display: flex; flex-wrap: wrap; gap: 6px; }
.choice {
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 10px;
  font-size: .78rem; cursor: pointer; position: relative;
}
.choice.on { border-color: currentColor; font-weight: 600; }
.field {
  background: #f8fafc; border-radius: 14px; padding: 10px; display: flex; justify-content: space-between; align-items: center;
}
textarea, .textin {
  width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 12px; min-height: 90px; resize: vertical;
}

/* Charts */
.chart-bar { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding: 8px 0; }
.chart-bar .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.chart-bar .bar { width: 100%; max-width: 28px; border-radius: 8px 8px 4px 4px; background: var(--purple); }
.chart-bar .bar.good { background: var(--green-2); }
.chart-bar .bar.warn { background: var(--orange); }
.spark { height: 36px; }

/* Lab */
.seg-bar { display: flex; height: 6px; border-radius: 99px; overflow: hidden; }
.seg-bar i { display: block; height: 100%; }
.upload-dash {
  position: relative; overflow: hidden;
  border: 1.5px dashed #c4b5fd; border-radius: 16px; padding: 22px 16px;
  text-align: center; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  min-height: 180px; cursor: pointer; background: #faf8ff;
  box-sizing: border-box; margin: 0;
}
.upload-dash-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; width: 100%; max-width: 240px; margin: 0 auto;
  pointer-events: none; position: relative; z-index: 1;
}
.upload-dash .upload-title {
  display: block; font-weight: 700; color: var(--ink); font-size: .92rem;
}
.upload-dash svg {
  width: 32px; height: 32px; color: var(--purple); display: block; flex: 0 0 auto; margin: 0 auto;
}
.upload-dash .watch {
  margin: 6px auto 0; pointer-events: none; align-self: center;
}
.upload-dash .lab-file-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 2; margin: 0; padding: 0;
  font-size: 100px;
}
.upload-dash.is-busy { opacity: .7; pointer-events: none; }
.lab-supported .list-row { width: 100%; text-align: left; }
.lab-supported .list-row:hover { color: var(--purple); }
button.list-row {
  width: 100%; border: 0; background: transparent; font: inherit; color: inherit;
  text-align: left; padding: 10px 0;
}

/* Dark sleep */
.theme-dark {
  background: #0b0c1e; color: #f8fafc; min-height: 100vh;
}
.theme-dark .card { background: #171b29; color: #f8fafc; box-shadow: none; }
.theme-dark .muted, .theme-dark .tiny { color: #94a3b8; }

/* Workout dark */
.hero-plan {
  border-radius: 20px; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, #1e1b4b, #4c1d95);
  padding: 16px; position: relative; min-height: 170px;
}
.week-dots { display: flex; gap: 6px; }
.week-dots span {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  display: grid; place-items: center; font-size: .65rem;
}
.week-dots span.done { background: var(--green-2); border-color: var(--green-2); }
.week-dots span.rest { font-size: .58rem; border-radius: 12px; width: auto; padding: 0 6px; }
.week-dots.light span { border-color: var(--line); color: var(--ink); }
.week-dots.light span.done { color: #fff; }
.week-dots.light span.today { border-color: var(--purple); color: var(--purple); box-shadow: 0 0 0 2px rgba(109,92,255,.2); }

.ex-row { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.thumb {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
}
.watch {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--purple); color: #fff; border: 0; border-radius: 999px;
  padding: 6px 12px; font-size: .75rem; cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}
.watch svg { width: 14px; height: 14px; flex: 0 0 auto; display: block; }

/* Chat */
.chat-log { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.bubble { max-width: 85%; padding: 8px 12px; border-radius: 14px; font-size: .84rem; font-weight: 400; }
.bubble.ai { background: #fff; align-self: flex-start; }
.bubble.me { background: var(--purple); color: #fff; align-self: flex-end; }
.bubble.me a { color: #fff; }
.chat-thumb { display: block; max-width: 180px; max-height: 140px; border-radius: 10px; margin-bottom: 6px; object-fit: cover; }
.chat-file { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; margin-bottom: 4px; }
.chat-file svg { width: 14px; height: 14px; }
.chat-input {
  display: flex; align-items: center; gap: 8px; position: static; background: transparent; padding-top: 0;
}
.chat-input input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; background: #fff; }
.chat-icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--purple); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto;
}
.chat-icon-btn svg { width: 18px; height: 18px; }
.chat-dock { background: var(--bg); padding-top: 8px; }
.chat-dock .hscroll { margin: 0 0 8px; }
.chat-attach {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 6px 10px; margin-bottom: 8px; font-size: .78rem; color: var(--ink);
}
.chat-attach.hidden { display: none; }
.chat-attach-x {
  margin-left: auto; border: 0; background: transparent; color: var(--muted); cursor: pointer;
  width: 28px; height: 28px; display: grid; place-items: center;
}
.chat-attach-x svg { width: 14px; height: 14px; }

body.chat-open .phone-wrap {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.chat-open .app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  overflow: hidden;
}
body.chat-open .page.chat-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}
body.chat-open .chat-page > .topbar,
body.chat-open .chat-page > .sub { flex: 0 0 auto; }
body.chat-open .chat-log { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.chat-open .chat-dock { flex: 0 0 auto; }
body.chat-open .bottom-nav { flex: 0 0 auto; position: relative; }

@media (min-width: 980px) {
  body.chat-open .app { padding-bottom: 12px; }
}

/* Modal */
.sheet {
  position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 90;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-card {
  width: min(430px, 100%); background: #fff; border-radius: 20px 20px 0 0; padding: 16px 16px calc(20px + var(--safe-b));
  max-height: 92vh; overflow-y: auto;
}
.sheet-head-actions { display: flex; align-items: center; gap: 10px; }
.sheet-head-actions .link { border: 0; background: none; padding: 0; font: inherit; }
.field-in { margin: 10px 0; }
.field-in label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 4px; }
.field-in input, .field-in select {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; font-size: .9rem;
  background: #fff; color: var(--ink); font-weight: 400;
}
.date-pick-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); font-weight: 500; cursor: pointer; font-size: .9rem;
}
.date-pick-btn svg { width: 16px; height: 16px; color: var(--purple); flex: 0 0 auto; }
.date-pick-btn span { flex: 1; text-align: left; }
.cal { display: none; margin-top: 8px; border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: #fafbff; }
.cal.open { display: block; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-nav b { font-size: .85rem; font-weight: 600; }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-dow span { font-size: .62rem; color: var(--muted); padding: 4px 0; font-weight: 500; }
.cal-empty { min-height: 32px; }
.cal-d {
  border: 0; background: transparent; border-radius: 9px; min-height: 32px;
  font-size: .8rem; cursor: pointer; color: var(--ink); font-weight: 500;
}
.cal-d.today { box-shadow: inset 0 0 0 1px var(--purple); color: var(--purple); }
.cal-d.on { background: var(--purple); color: #fff; box-shadow: none; }
.sheet.hidden { display: none !important; }
.js-log { cursor: pointer; }

.donut {
  width: 96px; height: 96px; border-radius: 50%;
  background: conic-gradient(#8b5cf6 0 27%, #22c55e 0 72%, #f59e0b 0 93%, #eceef5 0);
  display: grid; place-items: center;
}
.donut span { width: 62px; height: 62px; background: #fff; border-radius: 50%; display: grid; place-items: center; font-weight: 650; font-size: .85rem; }

body.hide-nav .bottom-nav { display: none; }
body.hide-nav .app { padding-bottom: 24px; }

/* ===== Screenshot-accurate components ===== */
.logo-row b { color: var(--purple); }
.avatar.photo {
  background:
    radial-gradient(circle at 35% 30%, #fde68a, transparent 40%),
    linear-gradient(160deg, #c4b5fd, #6366f1);
}
.avatar .lvl { background: var(--purple); }
.bell-btn { position: relative; border: 1px solid #ddd6fe; }
.bell-btn .dot {
  position: absolute; top: 6px; right: 6px; width: 6px; height: 6px;
  background: #ef4444; border: 1.5px solid #fff; border-radius: 50%;
}
.z-badge { display: inline-flex; align-items: center; gap: 5px; }
.z-disk {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fde68a;
  color: #92400e; font-size: .6rem; font-weight: 700;
  display: grid; place-items: center; box-shadow: none;
}
.z-n { color: var(--purple); font-weight: 650; font-size: .82rem; }

.hp-card {
  background: #fff; border-radius: var(--radius); padding: 10px 12px;
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.hp-card b { color: var(--purple); font-weight: 600; font-size: .88rem; }
.ico.soft { background: #f3f0ff; color: var(--purple); }
.ico.leaf { background: #ecfdf5; color: #059669; }

.bio-layout {
  display: grid; grid-template-columns: 1.1fr auto 1fr; gap: 8px; align-items: center;
}
.bio-num.purple { color: var(--purple); font-size: 1.85rem; font-weight: 700; }
.z-sub { display: block; font-size: .62rem; color: var(--muted); font-weight: 500; }
.bio-num.green { color: var(--green-2); }
.gauge.mix {
  background: conic-gradient(#22c55e 0 28%, #6d5cff 0 82%, #eceef5 0);
}
.gauge .leaf { color: var(--green-2); width: 12px; height: 12px; }
.factor-col { display: flex; flex-direction: column; gap: 4px; }
.factor-row {
  display: flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 500;
}
.factor-row .arr { font-size: .65rem; }
.factor-row .ico { width: 22px; height: 22px; border-radius: 7px; }
.factor-row .ico svg { width: 12px; height: 12px; }
.view-full {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
  color: var(--purple); font-weight: 550; font-size: .8rem;
  display: flex; justify-content: space-between; align-items: center;
}

.sec-head {
  display: flex; align-items: center; justify-content: space-between; margin: 12px 0 6px;
}
.sec-head .link { flex: 0 0 auto; }
.sec-l { display: flex; align-items: center; gap: 8px; }
.sec-l b { font-size: .9rem; font-weight: 650; }
.sec-l .ico { width: 24px; height: 24px; border-radius: 8px; }
.sec-l .ico svg { width: 13px; height: 13px; }

.metric-mini { text-align: left; }
.metric-mini svg { width: 15px; height: 15px; flex: 0 0 auto; }
.metric-mini .val-first {
  font-size: .92rem; font-weight: 650; margin: 4px 0 1px; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  padding-right: 4px;
}
.metric-mini .tiny {
  min-height: 2.4em;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}
.metric-mini .pill { margin-top: auto; align-self: flex-start; }
.metric-mini.sleep svg { color: #7c3aed; }
.metric-mini.steps svg { color: #16a34a; }
.metric-mini.bp svg { color: #ef4444; }
.metric-mini.hyd svg { color: #2563eb; }
.metric-mini.stress svg { color: #7c3aed; }

.goal-card { display: flex; align-items: center; gap: 10px; }
.goal-card .flame {
  width: 38px; height: 38px; border-radius: 50%; background: #ecfdf5; color: #16a34a;
  display: grid; place-items: center; flex: 0 0 auto;
}
.goal-card .flame svg { width: 18px; height: 18px; }
.goal-lost { text-align: right; }
.goal-lost b { color: #16a34a; display: block; }
.progress.green > i { background: #22c55e; }

.plan-mini { flex: 0 0 156px; width: 156px; min-width: 156px; padding: 10px; }
.plan-mini .ico { width: 28px; height: 28px; margin-bottom: 4px; }
.plan-mini b { font-size: .82rem; font-weight: 600; }
.progress.green > i, .plan-mini.nutrition .progress > i { background: #22c55e; }
.plan-mini.exercise .progress > i { background: #f59e0b; }
.plan-mini.recovery .progress > i { background: #8b5cf6; }
.plan-mini.sleep .progress > i { background: #38bdf8; }

.coins-bar {
  background: #f5f3ff; color: #4c1d95; margin-top: 10px;
}
.scan-card { display: flex; gap: 12px; align-items: center; }
.body-frame {
  width: 78px; height: 108px; border-radius: 12px; position: relative;
  background: #eef2ff; display: grid; place-items: center;
}
.body-frame::before, .body-frame::after {
  content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid var(--purple);
}
.body-frame::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.body-frame::after { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }
.body-svg { width: 46px; height: 90px; }
.scan-metrics { flex: 1; }
.scan-metrics .row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: .82rem; }

.people-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.people-card {
  border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer;
}
.people-card.coach { background: #ecfdf5; }
.people-card.peer { background: #eff6ff; }
.faces { display: flex; }
.faces .avatar { width: 28px; height: 28px; font-size: .65rem; margin-left: -8px; border: 2px solid #fff; }
.faces .avatar:first-child { margin-left: 0; }
.go-round {
  width: 32px; height: 32px; border-radius: 50%; border: 0; color: #fff; margin-left: auto;
  display: grid; place-items: center;
}
.people-card.coach .go-round { background: #10b981; pointer-events: none; }
.people-card.peer .go-round { background: #3b82f6; pointer-events: none; }
.person-hero { text-align: center; padding: 20px 12px; }
.person-hero .avatar { width: 64px; height: 64px; margin: 0 auto 10px; font-size: 1.15rem; }

.mascot-card { display: flex; gap: 10px; align-items: center; }
.robot {
  width: 52px; height: 52px; border-radius: 14px;
  background: #f8fafc;
  display: grid; place-items: center; font-size: 1.3rem; flex: 0 0 auto;
}
.vital { position: relative; }
.vital-top { display: flex; align-items: flex-start; gap: 8px; }
.vital-actions { display: flex; justify-content: space-between; margin-top: 8px; }
.vital-actions button { background: transparent; border: 0; color: var(--purple); cursor: pointer; }

.toggle {
  width: 42px; height: 24px; border-radius: 99px; background: #ddd; position: relative; border: 0;
  cursor: pointer; flex: 0 0 auto; padding: 0;
}
.toggle.on { background: var(--purple); }
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: .15s;
}
.toggle.on::after { left: 21px; }

.stepper {
  display: flex; justify-content: center; gap: 18px; margin: 4px 0 12px; font-size: .78rem; color: var(--muted);
}
.stepper span.on { color: var(--purple); font-weight: 700; }

.lab-tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--line); margin: 8px 0 14px; overflow-x: auto; }
.lab-tabs button {
  background: 0; border: 0; padding: 6px 2px 8px; color: #8b8fa3; font-weight: 550; cursor: pointer; white-space: nowrap; font-size: .82rem;
}
.lab-tabs button.on { color: var(--purple); border-bottom: 1.5px solid var(--purple); }

.qact-grid { margin-top: 10px; }
button.qact, .qact {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; cursor: pointer; position: relative; padding-right: 28px;
  width: 100%; font: inherit; color: inherit;
}
.qact .chev { position: absolute; right: 10px; top: 50%; margin-top: -6px; }
.plan-kv { margin-top: 8px; }
.plan-kv .row-between { padding: 8px 0; border-bottom: 1px solid var(--line); }
.plan-kv .row-between:last-child { border-bottom: 0; padding-bottom: 0; }
.plan-kv b { font-size: .88rem; font-weight: 650; }
.plan-tabs button {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px 8px; text-align: left; cursor: pointer; font-weight: 550;
}
.plan-tabs button.on { background: var(--purple-soft); color: var(--purple); border-color: #ddd6fe; }
.plan-tabs button .tiny { color: inherit; opacity: .8; }

.stat-card { text-align: left; min-width: 0; }
.stat-card .ico { margin-bottom: 6px; }

.tip-card { background: #eff6ff; color: #1e3a8a; }
.tip-card .ico { background: #ede9fe; color: var(--purple); }

.range-legend { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: .72rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.dot.g { background: #22c55e; } .dot.o { background: #f59e0b; } .dot.r { background: #ef4444; }

.filter-pill {
  border: 0; border-radius: 999px; padding: 4px 10px; font-weight: 550; font-size: .72rem; cursor: pointer;
}
.filter-pill.all { background: var(--purple); color: #fff; }
.filter-pill.opt { background: #dcfce7; color: #15803d; }
.filter-pill.att { background: #ffedd5; color: #c2410c; }
.filter-pill.out { background: #fee2e6; color: #b91c1c; }
.filter-pill.cat { background: #f3f4f6; color: #374151; }
.filter-pill.cat.on { background: #fff; color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }

.impact-row { padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.impact-row:last-child { border-bottom: 0; }
.bar-pos { background: #dcfce7; }
.progress.bar-pos > i { background: #22c55e; }
.progress.bar-neg > i { background: #f59e0b; }

.chart-wrap {
  width: 100%;
  min-height: 220px;
  margin: 8px 0 10px;
  display: block;
}
.svg-chart {
  width: 100% !important;
  height: 220px !important;
  min-height: 220px;
  display: block;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}
.svg-chart text { stroke: none; stroke-width: 0; paint-order: fill; }
.theme-dark .svg-chart { filter: none; }
.date-nav { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: .78rem; color: var(--muted); margin: 6px 0 10px; }

.how-card { background: #fff; }
.how-card li { display: flex; gap: 8px; margin: 8px 0; font-size: .85rem; }

.ex-dark { background: #0f172a; color: #f8fafc; min-height: 100vh; }
.theme-dark, .ex-dark { background: #0b0c1e; color: #f8fafc; }
.theme-dark .topbar .title, .ex-dark .topbar .title { color: #fff; }
.theme-dark .icon-btn, .ex-dark .icon-btn { color: #fff; }
.theme-dark .card, .ex-dark .card { background: #171b29; color: #f8fafc; }
.theme-dark .seg { background: #1e2233; }
.theme-dark .sub { color: #94a3b8; }
.chip-act {
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 6px; width: 100%; white-space: nowrap; font-family: inherit; color: inherit;
}
.chip-act svg { width: 14px; height: 14px; flex: 0 0 auto; display: block; }
.theme-dark .chip-act.sel { border-color: #a78bfa; box-shadow: 0 0 0 2px rgba(167,139,250,.25); }
.theme-dark .btn-block { }

.video-box {
  background: #111; min-height: 180px; border-radius: 16px; display: grid; place-items: center;
  color: #fff; position: relative; overflow: hidden; cursor: pointer; margin-bottom: 10px;
}
.video-box .play {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(99,102,241,.95);
  display: grid; place-items: center; border: 0; color: #fff; cursor: pointer; z-index: 2;
  padding: 0;
}
.video-box .play svg { width: 22px; height: 22px; }
.video-stage { width: 72px; opacity: .8; pointer-events: none; }
.video-stage svg { width: 72px; height: 126px; display: block; }
.video-box.is-playing .video-stage { animation: ex-demo 1.1s ease-in-out infinite; }
.video-box.is-playing .play { background: rgba(99,102,241,.75); }
.video-prog {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #2a2a3d;
}
.video-prog i { display: block; height: 100%; width: 0; background: #818cf8; }
.video-time {
  position: absolute; bottom: 10px; left: 12px; font-size: .7rem; color: #cbd5e1; z-index: 2;
}
@keyframes ex-demo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.num-step { width: 22px; height: 22px; border-radius: 50%; background: var(--purple); color: #fff; font-size: .7rem; display: grid; place-items: center; flex: 0 0 auto; }

.muscle-pair { display: flex; gap: 12px; justify-content: center; }
.body-mini {
  width: 70px; height: 110px; border-radius: 12px; background: #1e2233;
  display: grid; place-items: center;
}

.photo-slot {
  background: linear-gradient(180deg, #e0e7ff, #c7d2fe); min-height: 110px; border-radius: 12px;
  display: grid; place-items: center; color: #4338ca; font-size: .75rem; text-align: center;
}
.photo-slot.has-photo { padding: 0; background: #eef2ff; overflow: hidden; }
.photo-preview { width: 100%; height: 140px; object-fit: cover; display: block; border-radius: 12px; }
.photo-pose { display: grid; place-items: center; gap: 4px; padding: 14px 6px; }
.photo-pose svg { width: 36px; height: 36px; color: #6366f1; }
.how-h { font-size: .82rem; font-weight: 700; margin: 12px 0 8px; }
.scan-tips {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; margin-bottom: 4px;
}
.scan-tips b { display: block; margin: 4px 0 2px; color: var(--ink); font-size: .72rem; }
.scan-tips svg { width: 22px; height: 22px; margin: 0 auto; color: var(--purple); display: block; }
.scan-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.scan-shot { text-align: center; }
.scan-shot b { display: block; margin: 6px 0 8px; font-size: .82rem; }
.scan-shot .btn-outline { font-size: .72rem; padding: .5rem 6px; }
.btn-block.is-wait { opacity: .85; }
.file-off {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

.addr-full { font-size: .78rem; color: #334155; }

@media (max-width: 979px) {
  .bio-layout { grid-template-columns: 1fr auto; }
  .factor-col { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .labs-split { grid-template-columns: 1fr; }
}