/* ============================================================
   ATLAS — Design System v9 (premium, typography-first)
   Tokens: cores, raio, sombra, espaçamento. Tudo herda daqui.
   ============================================================ */
:root {
  /* ----- DARK premium (crafted, estilo Arc/Linear) ----- */
  --bg: #0c0d12;
  --bg2: #14151b;
  --card: #17181f;
  --card2: #1d1f28;
  --border: #24262f;
  --border-soft: rgba(255,255,255,.06);
  --txt: #ECEDF2;
  --txt2: #9aa0ae;
  --txt3: #61656f;
  --accent: #6366F1;
  --accent2: #818CF8;
  --accent-weak: rgba(99,102,241,.14);
  --green: #34D399;
  --red: #F87171;
  --orange: #FBBF24;
  --yellow: #FBBF24;
  --cyan: #38BDF8;
  --pink: #C084FC;
  /* raio (escala consistente) */
  --r-card: 24px;
  --r-ctrl: 12px;
  --r-pill: 999px;
  --radius: 24px;
  /* sombras suaves */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 6px 24px -8px rgba(0,0,0,.55);
  --shadow-lg: 0 18px 50px -12px rgba(0,0,0,.65);
  --ring: 0 0 0 3px rgba(99,102,241,.30);
  /* layout */
  --nav-h: 64px;
  --top-h: 38px;
  --sub-h: 48px;
  --banner-h: 30px;
  --topbar-bg: rgba(12,13,18,.82);
  --nav-bg: rgba(14,15,21,.86);
  --modal-backdrop: rgba(0,0,0,.55);
  --hairline: rgba(255,255,255,.055);
  font-size: 15px;
}

/* ============ TEMA CLARO (paleta premium minimalista) ============ */
:root[data-theme="light"] {
  --bg: #FAFAF8;
  --bg2: #FFFFFF;
  --card: #FFFFFF;
  --card2: #F4F4F1;
  --border: #ECECEA;
  --border-soft: rgba(17,17,17,.06);
  --txt: #111111;
  --txt2: #6B7280;
  --txt3: #9AA0AB;
  --accent: #4F46E5;
  --accent2: #6366F1;
  --accent-weak: rgba(79,70,229,.08);
  --green: #22C55E;
  --red: #EF4444;
  --orange: #F59E0B;
  --yellow: #F59E0B;
  --cyan: #0EA5E9;
  --pink: #A855F7;
  --shadow-sm: 0 1px 2px rgba(17,17,17,.04);
  --shadow-md: 0 1px 2px rgba(17,17,17,.04), 0 10px 28px -12px rgba(17,17,17,.10);
  --shadow-lg: 0 24px 60px -18px rgba(17,17,17,.18);
  --ring: 0 0 0 3px rgba(79,70,229,.16);
  --topbar-bg: rgba(250,250,248,.82);
  --nav-bg: rgba(255,255,255,.86);
  --modal-backdrop: rgba(17,17,17,.30);
  --hairline: rgba(17,17,17,.06);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* ============ TOP BAR (NASDAQ ticker) ============ */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: calc(var(--top-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.ticker-wrap { height: var(--top-h); display: flex; align-items: center; overflow: hidden; }
.ticker {
  display: inline-flex; gap: 28px; white-space: nowrap;
  animation: ticker-scroll 30s linear infinite;
  padding-left: 8px;
  will-change: transform;
}
.ticker:hover { animation-play-state: paused; }
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.tk-item { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.tk-label { color: var(--txt3); font-weight: 500; text-transform: uppercase; font-size: .68rem; }
.tk-up { color: var(--green); }
.tk-down { color: var(--red); }
.tk-warn { color: var(--orange); }
.tk-flash { animation: tk-blink 1s steps(2) infinite; color: var(--red); }
@keyframes tk-blink { 50% { opacity: .25; } }

/* ============ ALERT BANNER ============ */
#alert-banner {
  position: fixed; top: calc(var(--top-h) + env(safe-area-inset-top)); left: 0; right: 0; z-index: 49;
  height: var(--banner-h);
  background: linear-gradient(90deg, #b3123a, #ff4d6d);
  color: #fff; font-size: .78rem; font-weight: 600;
  padding: 0 14px;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: banner-pulse 1.4s ease-in-out infinite;
  cursor: pointer;
}
#alert-banner b { overflow: hidden; text-overflow: ellipsis; }
@keyframes banner-pulse { 50% { filter: brightness(1.35); } }

/* ============ LAYOUT ============ */
#content {
  padding: calc(env(safe-area-inset-top) + 12px) 14px calc(var(--nav-h) + env(safe-area-inset-bottom) + 20px);
  max-width: 1100px; margin: 0 auto;
}
.tab.hidden, .hidden { display: none !important; }

h2.tab-title { font-size: 1.5rem; font-weight: 600; margin: 6px 2px 18px; letter-spacing: -.025em; line-height: 1.15; }
h2.tab-title small { display: block; color: var(--txt2); font-weight: 400; font-size: .82rem; margin: 4px 0 0; letter-spacing: -.005em; }

/* ============ BENTO GRID ============ */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(4, 1fr); } }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 18px;
  position: relative;
  overflow: hidden;
  min-height: 90px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
@media (hover: hover) { .card:hover { box-shadow: var(--shadow-md); } }
.card.span2 { grid-column: span 2; }
.card.span4 { grid-column: span 2; }
@media (min-width: 760px) { .card.span4 { grid-column: span 4; } .card { padding: 20px; } }
.card h3 {
  font-size: .76rem; text-transform: none; letter-spacing: -.005em;
  color: var(--txt); font-weight: 600; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.card h3 .h3-action { cursor: pointer; color: var(--accent); font-size: .74rem; font-weight: 600; text-transform: none; letter-spacing: 0; transition: opacity .15s; }
.card h3 .h3-action:hover { opacity: .7; }
.card .big { font-size: 1.8rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.card .sub { font-size: .76rem; color: var(--txt2); margin-top: 4px; }
/* destaque de alerta — estático, sutil */
.card.alert-red { border-color: rgba(239,68,68,.5); box-shadow: 0 0 0 1px rgba(239,68,68,.18), var(--shadow-sm); }

/* ============ BOTTOM NAV ============ */
#bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-around; align-items: stretch;
}
.nav-btn {
  flex: 1; background: none; border: none; color: var(--txt3);
  font-size: .62rem; font-weight: 600; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer; transition: color .15s;
}
.nav-btn .nav-ico { font-size: 1.15rem; line-height: 1; }
.nav-btn.active { color: var(--accent2); }
.nav-btn.has-alert::after {
  content: ""; position: absolute; margin-top: -26px; margin-left: 26px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  animation: tk-blink 1s steps(2) infinite;
}

/* ============ ELEMENTOS ============ */
button.btn {
  background: var(--accent); color: #fff; border: none; border-radius: var(--r-ctrl);
  padding: 10px 16px; font-size: .82rem; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: filter .15s, transform .08s, background .15s, box-shadow .15s;
  letter-spacing: -.01em;
}
@media (hover: hover) { button.btn:hover { filter: brightness(1.06); } }
button.btn:active { transform: scale(.975); }
button.btn.ghost { background: var(--card2); color: var(--txt); border: 1px solid var(--border); }
@media (hover: hover) { button.btn.ghost:hover { filter: none; border-color: var(--txt3); } }
button.btn.small { padding: 6px 11px; font-size: .74rem; border-radius: 10px; }
button.btn.green { background: var(--green); color: #04241a; }
button.btn.red { background: rgba(239,68,68,.12); color: var(--red); border: 1px solid rgba(239,68,68,.35); }
button.btn.full { width: 100%; }

input, select, textarea {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-ctrl);
  color: var(--txt); font-family: inherit; font-size: .88rem;
  padding: 10px 12px; width: 100%; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--txt3); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--ring); }
label.fld { display: block; font-size: .7rem; color: var(--txt2); font-weight: 600; margin-bottom: 5px; text-transform: none; letter-spacing: -.005em; }
.row { display: flex; gap: 8px; align-items: center; }
.row > * { min-width: 0; }
.grow { flex: 1; }

/* progress bar */
.pbar { height: 8px; background: var(--bg2); border-radius: 99px; overflow: hidden; }
.pbar > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s ease; }
.pbar.green > div { background: linear-gradient(90deg, #00b377, var(--green)); }
.pbar.cyan > div { background: linear-gradient(90deg, #0ea5c4, var(--cyan)); }

/* ============ TO-DO ============ */
.todo-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 4px;
  border-bottom: 1px solid rgba(38,38,58,.5); font-size: .88rem;
}
.todo-item:last-child { border-bottom: none; }
.todo-check {
  width: 21px; height: 21px; min-width: 21px; border-radius: 7px; border: 2px solid var(--txt3);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: .7rem; color: transparent; transition: all .15s;
}
.todo-item.done .todo-check { background: var(--green); border-color: var(--green); color: #04241a; }
.todo-item.done .todo-text { text-decoration: line-through; color: var(--txt3); }
.todo-text { flex: 1; word-break: break-word; }
.prio { font-size: .58rem; font-weight: 800; padding: 2px 7px; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; }
.prio.high { background: rgba(255,77,109,.16); color: var(--red); }
.prio.med { background: rgba(255,159,67,.16); color: var(--orange); }
.prio.low { background: rgba(34,211,238,.13); color: var(--cyan); }
.x-btn { background: none; border: none; color: var(--txt3); cursor: pointer; font-size: .95rem; padding: 2px 6px; }
.x-btn:hover { color: var(--red); }

/* ============ SUPLEMENTOS ============ */
.supp-period { margin-bottom: 14px; }
.supp-period h4 { font-size: .7rem; color: var(--txt2); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; display:flex; justify-content: space-between; }
.supp-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card2); border: 1px solid var(--border); border-radius: 99px;
  padding: 7px 13px; margin: 0 6px 6px 0; font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: all .15s; user-select: none;
}
.supp-pill.taken { background: rgba(0,214,143,.13); border-color: var(--green); color: var(--green); }
.supp-pill .dose { color: var(--txt3); font-weight: 500; font-size: .68rem; }
.supp-pill.taken .dose { color: rgba(0,214,143,.7); }

/* ============ RING (hidratação) ============ */
.ring-wrap { display: flex; align-items: center; gap: 14px; }
.ring-svg { transform: rotate(-90deg); }
.ring-bg { stroke: var(--bg2); }
.ring-fg { stroke: var(--cyan); stroke-linecap: round; transition: stroke-dashoffset .5s ease; }

/* containers rápidos */
.qa-btn {
  background: var(--card2); border: 1px solid var(--border); border-radius: 12px;
  color: var(--txt); padding: 10px 8px; font-size: .72rem; font-weight: 700; font-family: inherit;
  cursor: pointer; text-align: center; flex: 1;
}
.qa-btn small { display: block; color: var(--txt2); font-weight: 500; margin-top: 2px; }
.qa-btn:active { background: var(--accent); }

/* ============ CAFEÍNA ============ */
.drink-result {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: .82rem;
}
.drink-result:hover, .drink-result:active { background: var(--card2); }
.drink-result .mg { color: var(--orange); font-weight: 700; font-size: .75rem; }
.caf-log-item { display: flex; justify-content: space-between; font-size: .78rem; padding: 5px 0; color: var(--txt2); border-bottom: 1px solid rgba(38,38,58,.4); }

/* ============ GYM ============ */
.ex-block { background: var(--card2); border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.ex-block h4 { font-size: .9rem; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.set-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; font-size: .8rem; }
.set-row input { padding: 6px 8px; text-align: center; font-size: .85rem; }
.coach-tip {
  background: rgba(0,214,143,.1); border: 1px solid rgba(0,214,143,.35); color: var(--green);
  border-radius: 10px; padding: 8px 11px; font-size: .76rem; font-weight: 600; margin-top: 8px;
}
.coach-tip.keep { background: rgba(108,92,231,.1); border-color: rgba(108,92,231,.4); color: var(--accent2); }

/* fotos */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.photo-thumb { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 3/4; cursor: pointer; border: 2px solid transparent; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb.sel { border-color: var(--accent); }
.photo-thumb .pdate { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.65); font-size: .6rem; padding: 3px 6px; text-align: center; }
.compare-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compare-wrap img { width: 100%; border-radius: 12px; }
.compare-cap { text-align: center; font-size: .68rem; color: var(--txt2); margin-top: 4px; }

/* ============ FINANCE ============ */
.asset-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px; border-bottom: 1px solid rgba(38,38,58,.5); font-size: .85rem; }
.asset-row .cat-dot { width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; display: inline-block; }
.asset-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; font-size: .72rem; color: var(--txt2); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* patrimônio em destaque (sem card) + entradas/saídas/poupança/distribuição */
.nw-hero { grid-column: span 2; padding: 2px 2px 4px; }
@media (min-width: 760px) { .nw-hero { grid-column: span 4; } }
.nw-hero .nw-eyebrow { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt3); margin-bottom: 6px; }
.nw-hero .nw-big { font-size: 2.3rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.nw-hero .nw-delta { font-size: .82rem; font-weight: 600; margin-top: 6px; }
.nw-panel { grid-column: span 2; display: flex; flex-direction: column; }
@media (min-width: 760px) { .nw-panel { grid-column: span 4; } }
.nw-panel > .mt12 { margin-top: 10px; }
.nw-io { display: flex; gap: 10px; }
.nw-io-box { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-ctrl); padding: 11px 13px; }
.nw-io-l { font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt3); }
.nw-io-v { font-size: 1.1rem; font-weight: 800; letter-spacing: -.03em; margin-top: 3px; }
.nw-block { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-ctrl); padding: 12px 13px; }

/* ============ PEAK ============ */
.dw-window {
  background: rgba(108,92,231,.12); border: 1px solid rgba(108,92,231,.4);
  border-radius: 10px; padding: 8px 12px; font-size: .78rem; font-weight: 600; color: var(--accent2);
  margin-bottom: 6px; display: flex; justify-content: space-between;
}

/* ============ MODAL ============ */
#modal-backdrop {
  position: fixed; inset: 0; z-index: 100; background: var(--modal-backdrop);
  backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 760px) { #modal-backdrop { align-items: center; } }
#modal-backdrop { transition: opacity .2s ease; }
#modal {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 26px 26px 0 0; width: 100%; max-width: 540px;
  max-height: 88vh; overflow-y: auto; padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  animation: modal-up .26s cubic-bezier(.22,1,.36,1);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 760px) { #modal { border-radius: 26px; } }
@keyframes modal-up { from { transform: translateY(28px); opacity: 0; } }
#modal h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 16px; }
.fld-group { margin-bottom: 13px; }

/* ============ TOAST ============ */
#toast {
  position: fixed; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);
  left: 50%; transform: translateX(-50%); z-index: 110;
  background: var(--txt); color: var(--bg); border: none;
  border-radius: var(--r-pill); padding: 11px 20px; font-size: .82rem; font-weight: 600;
  box-shadow: var(--shadow-lg); white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
  animation: toast-in .26s cubic-bezier(.22,1,.36,1);
}
@keyframes toast-in { from { transform: translate(-50%, 12px); opacity: 0; } }

/* ============ MISC ============ */
.muted { color: var(--txt2); font-size: .78rem; }
.tiny { color: var(--txt3); font-size: .68rem; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mb8 { margin-bottom: 8px; }
.center { text-align: center; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-box { background: var(--card2); border-radius: 12px; padding: 10px; text-align: center; }
.stat-box .v { font-size: 1.15rem; font-weight: 800; }
.stat-box .l { font-size: .62rem; color: var(--txt2); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.streak-flame { font-size: 1.4rem; color: var(--orange); }
.streak-flame .ic { width: 1.3rem; height: 1.3rem; vertical-align: -.18em; }
svg.chart text { fill: var(--txt3); font-size: 9px; font-family: inherit; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.sync-on { background: var(--green); } .sync-off { background: var(--txt3); } .sync-err { background: var(--red); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

/* ============ SUB-NAV ============ */
#subnav {
  position: fixed; left: 0; right: 0; z-index: 48;
  top: env(safe-area-inset-top);
  height: var(--sub-h);
  background: var(--topbar-bg); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; gap: 6px; padding: 0 10px; align-items: center;
  overflow-x: auto; scrollbar-width: none;
}
#subnav::-webkit-scrollbar { display: none; }
.subnav-btn {
  flex: 0 0 auto; background: transparent; border: 1px solid transparent;
  color: var(--txt2); font-family: inherit; font-size: .76rem; font-weight: 600;
  padding: 7px 13px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s;
}
.subnav-btn .sn-ico { font-size: .85rem; opacity: .85; }
@media (hover: hover) { .subnav-btn:hover { background: var(--card2); color: var(--txt); } }
.subnav-btn.active { background: var(--accent-weak); color: var(--accent); border-color: transparent; }
.subnav-btn.sub-custom { margin-left: auto; color: var(--txt3); padding: 7px 9px; }
body.has-subnav #content {
  padding-top: calc(var(--sub-h) + env(safe-area-inset-top) + 12px);
}

/* nav com 8 itens — compacto */
.nav-btn { font-size: .54rem; gap: 2px; padding: 0 1px; }
.nav-btn .nav-ico { font-size: 1rem; }

/* ============ WEATHER (Main) ============ */
.weather-card { display: flex; align-items: center; gap: 14px; }
.weather-ico { font-size: 2.6rem; line-height: 1; }
.weather-main { flex: 1; }
.weather-temp { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.weather-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.weather-meta span { font-size: .72rem; color: var(--txt2); display: inline-flex; align-items: center; gap: 4px; }
.clock-big { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* highlight pills (pendências/destaques) */
.hl-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; font-size: .82rem; border-bottom: 1px solid rgba(128,128,160,.12); }
.hl-row:last-child { border-bottom: none; }
.hl-ico { font-size: .95rem; }
.hl-bad { color: var(--red); } .hl-warn { color: var(--orange); } .hl-ok { color: var(--green); }

/* ============ ACCORDION / clickable settings ============ */
.set-link { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; background: var(--card2); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; cursor: pointer; font-size: .86rem; font-weight: 600; }
.set-link:active { background: var(--bg2); }
.set-link .chev { color: var(--txt3); }
.set-link .si { display: inline-flex; align-items: center; gap: 9px; }
.set-link .si .em { font-size: 1.1rem; }

/* setup do perfil (checklist) */
.setup-card .setup-frac { font-size: .8rem; font-weight: 800; color: var(--accent2); letter-spacing: -.02em; }
.setup-steps { display: flex; flex-direction: column; gap: 8px; }
.setup-step { display: flex; align-items: center; gap: 11px; background: var(--card2); border: 1px solid var(--border); border-radius: var(--r-ctrl); padding: 11px 13px; }
.setup-step .ss-check { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--bg); }
.setup-step .ss-check .ic { width: 13px; height: 13px; }
.setup-step.done .ss-check { background: var(--green); border-color: var(--green); }
.setup-step .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.setup-step b { font-size: .84rem; font-weight: 600; letter-spacing: -.01em; }
.setup-step.done b { color: var(--txt2); }
.setup-step .tiny { color: var(--txt3); }

/* visão geral de metas no perfil */
.goals-overview .go-list { display: flex; flex-direction: column; }
.goals-overview .go-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; font-size: .86rem; border-bottom: 1px solid var(--hairline); }
.goals-overview .go-row:last-child { border-bottom: none; }
.goals-overview .go-row span { color: var(--txt2); }
.goals-overview .go-row b { font-weight: 700; letter-spacing: -.01em; }

/* login */
.auth-status { display: flex; align-items: center; gap: 10px; background: var(--card2); border-radius: 12px; padding: 12px; }
.auth-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-weak); border: 1px solid var(--accent-border); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--accent); }

/* toggle switch */
.tgl { position: relative; width: 42px; height: 24px; min-width: 42px; background: var(--bg2); border: 1px solid var(--border); border-radius: 99px; cursor: pointer; transition: background .2s; }
.tgl::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--txt3); transition: all .2s; }
.tgl.on { background: var(--accent); border-color: var(--accent); }
.tgl.on::after { left: 20px; background: #fff; }
.tgl-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; font-size: .84rem; border-bottom: 1px solid rgba(128,128,160,.12); }
.tgl-row:last-child { border-bottom: none; }

/* sports & reading */
.sport-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sport-btn { background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 4px; text-align: center; cursor: pointer; font-size: .62rem; font-weight: 600; color: var(--txt2); }
.sport-btn .se { font-size: 1.3rem; display: block; }
.sport-btn:active { background: var(--accent); color: #fff; }
.book-card { display: flex; gap: 11px; background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: 11px; margin-bottom: 9px; }
.book-cover { width: 44px; height: 62px; min-width: 44px; border-radius: 7px; background: var(--accent-weak); border: 1px solid var(--accent-border); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.stars { color: var(--yellow); font-size: .8rem; letter-spacing: 1px; }
.gauge-row { display: flex; gap: 10px; }
.gauge { flex: 1; background: var(--card2); border-radius: 12px; padding: 11px; text-align: center; }
.gauge .gv { font-size: 1.3rem; font-weight: 800; } .gauge .gl { font-size: .6rem; color: var(--txt2); text-transform: uppercase; letter-spacing: .04em; }

/* ============ MEDITAÇÃO ============ */
.breathe-circle { width: 150px; height: 150px; border-radius: 50%; margin: 14px auto; background: var(--accent-weak); border: 2px solid var(--accent-border); display: flex; align-items: center; justify-content: center; transition: transform 4s ease-in-out; }
.breathe-circle.expand { transform: scale(1.5); }
.breathe-circle.contract { transform: scale(0.85); }
.breathe-label { font-size: .95rem; font-weight: 700; color: var(--accent2); }
.med-tile { background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 8px; text-align: center; cursor: pointer; font-size: .72rem; font-weight: 600; }
.med-tile.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.med-tile .me { font-size: 1.4rem; display: block; margin-bottom: 4px; }
.med-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

/* ============ JOURNAL / MOOD ============ */
.mood-row { display: flex; gap: 8px; justify-content: space-between; }
.mood-face { flex: 1; font-size: 1.7rem; text-align: center; padding: 8px 0; border-radius: 12px; background: var(--card2); border: 1px solid var(--border); cursor: pointer; opacity: .55; transition: all .15s; }
.mood-face.on { opacity: 1; background: var(--accent); transform: scale(1.05); }
.journal-entry { background: var(--card2); border-radius: 12px; padding: 11px; margin-bottom: 8px; font-size: .82rem; }
.journal-entry .je-meta { font-size: .66rem; color: var(--txt2); margin-bottom: 5px; }

/* ============ BIOMARKERS ============ */
.bm-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(128,128,160,.12); }
.bm-dot { width: 9px; height: 9px; border-radius: 50%; min-width: 9px; }
.bm-ok { background: var(--green); } .bm-low { background: var(--cyan); } .bm-high { background: var(--red); } .bm-unknown { background: var(--txt3); }
.bm-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.bm-ref { font-size: .66rem; color: var(--txt3); }

/* ============ NOTES (markdown) ============ */
.note-card { background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 9px; cursor: pointer; }
.note-card h4 { font-size: .92rem; margin-bottom: 5px; display: flex; justify-content: space-between; }
.note-preview { font-size: .76rem; color: var(--txt2); max-height: 48px; overflow: hidden; line-height: 1.5; }
.md-body { font-size: .86rem; line-height: 1.6; }
.md-body h1, .md-body h2, .md-body h3 { margin: 12px 0 6px; }
.md-body h1 { font-size: 1.15rem; } .md-body h2 { font-size: 1.02rem; } .md-body h3 { font-size: .92rem; }
.md-body ul { margin: 6px 0 6px 18px; } .md-body li { margin: 3px 0; }
.md-body code { background: var(--bg2); padding: 1px 5px; border-radius: 5px; font-size: .8em; }
.md-body a { color: var(--accent2); }
.md-body blockquote { border-left: 3px solid var(--accent); padding-left: 10px; color: var(--txt2); margin: 8px 0; }
.bl-item { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid rgba(128,128,160,.12); font-size: .84rem; }
.bl-item.done .bl-text { text-decoration: line-through; color: var(--txt3); }
.bl-meta { font-size: .62rem; color: var(--txt3); }
.due-soon { color: var(--orange); } .due-over { color: var(--red); }

/* ============ AI BUTTON ============ */
button.btn.ai {
  background: var(--accent); color: #fff;
  background-size: auto; animation: none;
}
@keyframes ai-shift { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
button.btn.ai:disabled { opacity: .7; }
.ai-box {
  background: var(--accent-weak);
  border: 1px solid var(--accent-border); border-radius: 12px; padding: 11px 13px;
  font-size: .8rem; line-height: 1.55; margin-top: 10px; white-space: pre-wrap;
}
.ai-box b { color: var(--accent2); }

/* segmented control */
.seg { display: inline-flex; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.seg button { background: none; border: none; color: var(--txt2); font-family: inherit; font-size: .76rem; font-weight: 700; padding: 7px 14px; cursor: pointer; }
.seg button.on { background: var(--accent); color: #fff; }

/* ============ STOCK (suplementos) ============ */
.stock-card { display: flex; align-items: center; gap: 12px; background: var(--card2); border: 1px solid var(--border); border-radius: 14px; padding: 11px 13px; margin-bottom: 9px; }
.stock-ico { width: 42px; height: 42px; min-width: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.stock-card.alert-red { border-color: var(--red); box-shadow: 0 0 0 1px rgba(255,77,109,.3); }
.stock-bar { height: 6px; background: var(--bg2); border-radius: 99px; overflow: hidden; margin-top: 5px; }
.stock-bar > div { height: 100%; border-radius: 99px; }

/* ============ MEASURE / FOOD inputs grid ============ */
.measure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.measure-grid .fld-group { margin: 0; }
/* diário de hoje · macros (anel + barras, sem card) */
.macros-hero { grid-column: span 2; display: flex; gap: 16px; align-items: center; padding: 2px; }
/* nutrição: cards levemente mais baixos (achatados) */
.bento-tight .card { padding-top: 13px; padding-bottom: 13px; min-height: 0; }
/* card achatado verticalmente (hidratação, cafeína, etc.) */
.flat-card { padding-top: 14px; padding-bottom: 14px; min-height: 0; }
/* meditação: sliders maiores (label acima + slider full-width) com mais respiro */
.med-ctrl { margin-top: 18px; }
.med-ctrl:first-of-type { margin-top: 22px; }
.med-ctrl .med-ctrl-l { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; font-weight: 600; color: var(--txt2); margin-bottom: 9px; }
.med-ctrl .med-ctrl-l b { color: var(--txt); font-weight: 800; }
.med-ctrl input[type="range"] { width: 100%; height: 26px; }
.bento-tight .card h3 { margin-bottom: 9px; }
@media (min-width: 760px) { .macros-hero { grid-column: span 4; } }
.mh-ring { position: relative; width: 86px; height: 86px; min-width: 86px; }
.mh-ring .mh-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.mh-ring .mh-kcal { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; }
.mh-ring .mh-kcal-t { font-size: .6rem; color: var(--txt3); margin-top: 3px; }
.mh-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.mh-bar { display: flex; align-items: center; gap: 10px; }
.mh-bar-l { width: 66px; min-width: 66px; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--txt2); }
.mh-bar-track { flex: 1; height: 8px; border-radius: 99px; background: var(--bg2); overflow: hidden; }
.mh-bar-track i { display: block; height: 100%; border-radius: 99px; }
.mh-bar-v { width: 64px; min-width: 64px; text-align: right; font-size: .72rem; color: var(--txt3); }
.mh-bar-v b { color: var(--txt); font-weight: 800; }

/* refeições — acordeão (toque para abrir os itens) */
.meals-sec { grid-column: span 2; }
@media (min-width: 760px) { .meals-sec { grid-column: span 4; } }
.meals-sec-head { display: flex; align-items: center; gap: 10px; margin: 2px 2px 10px; }
.meals-sec-head .ms-title { font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--txt2); }
.meals-sec-head .ms-total { font-size: .72rem; color: var(--txt3); margin-left: auto; }
.meal-acc { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); margin-bottom: 9px; overflow: hidden; }
.meal-acc-head { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; padding: 13px 14px; cursor: pointer; font-family: inherit; color: var(--txt); text-align: left; }
.meal-acc-head .ma-dot { width: 9px; height: 9px; min-width: 9px; border-radius: 50%; }
.meal-acc-head .ma-name { font-size: .9rem; font-weight: 700; letter-spacing: -.01em; }
.meal-acc-head .ma-time { font-size: .66rem; color: var(--txt3); }
.meal-acc-head .ma-kcal { font-size: .82rem; font-weight: 700; }
.meal-acc-head .ma-chev { display: flex; color: var(--txt3); transition: transform .2s; transform: rotate(90deg); }
.meal-acc-head .ma-chev .ic { width: 16px; height: 16px; }
.meal-acc.open .meal-acc-head .ma-chev { transform: rotate(270deg); }
.meal-acc-body { padding: 0 14px 12px; }
.ma-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hairline); font-size: .85rem; }
.ma-item-name { flex: 1; min-width: 0; }
.ma-item-g { font-size: .74rem; color: var(--txt3); }
.ma-item-kcal { font-size: .74rem; font-weight: 700; color: var(--txt2); }
.ma-add { background: none; border: none; color: var(--txt3); font-family: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; padding: 11px 0 2px; }
@media (hover: hover) { .ma-add:hover { color: var(--accent); } }

/* macro bars v2 — label/valor em cima, barra cheia embaixo (track de macros) */
.mh-bar2 { cursor: pointer; }
.mh-bar2-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.mh-bar2-l { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txt2); }
.mh-bar2-v { font-size: .72rem; color: var(--txt3); white-space: nowrap; }
.mh-bar2-v b { color: var(--txt); font-weight: 800; }
.mh-bar2-track { display: block; height: 5px; border-radius: 99px; background: var(--bg2); overflow: hidden; }
.mh-bar2-track i { display: block; height: 100%; border-radius: 99px; transition: width .4s ease; }

/* ADICIONAR — grade de 4 ações + linha de refeições prontas */
.add-sec { grid-column: span 2; }
@media (min-width: 760px) { .add-sec { grid-column: span 4; } }
.add-sec-head { font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--txt2); margin: 2px 2px 10px; }
.add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.add-card { display: flex; flex-direction: column; align-items: flex-start; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px; cursor: pointer; font-family: inherit; text-align: left; }
.add-card .ac-ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.add-card .ac-ico .ic { width: 17px; height: 17px; }
.add-card .ac-title { font-size: .9rem; font-weight: 700; color: var(--txt); letter-spacing: -.01em; }
.add-card .ac-sub { font-size: .68rem; color: var(--txt3); margin-top: 2px; }
.ac-purple { background: var(--accent-weak); color: var(--accent2); }
.ac-cyan { background: var(--info-weak); color: var(--cyan); }
.ac-green { background: var(--success-weak); color: var(--green); }
.ac-gold { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); }
@media (hover: hover) { .add-card:hover { border-color: var(--txt3); } }

.meal-line { display: flex; align-items: center; gap: 11px; width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 13px 14px; margin-top: 10px; cursor: pointer; font-family: inherit; color: var(--txt); font-size: .82rem; font-weight: 600; }
.meal-line .ml-ico { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--txt2); flex-shrink: 0; }
.meal-line .ml-ico .ic { width: 14px; height: 14px; }
.meal-line .ml-count { font-size: .76rem; color: var(--txt3); }
.meal-line .ml-chev { display: flex; color: var(--txt3); }
.meal-line .ml-chev .ic { width: 16px; height: 16px; }
@media (hover: hover) { .meal-line:hover { border-color: var(--txt3); } }

/* cabeçalhos de grupo dentro dos modais de busca/favoritos */
.search-out { margin-top: 8px; }
.search-grp { font-size: .58rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--txt3); margin: 12px 2px 4px; }
.search-grp:first-child { margin-top: 4px; }

/* chevron de minimizar micros */
.micro-chev { display: inline-flex; color: var(--txt3); transition: transform .2s; transform: rotate(90deg); }
.micro-chev .ic { width: 14px; height: 14px; }
.micro-chev.open { transform: rotate(270deg); }

.macro-ring-row { display: flex; gap: 6px; flex-wrap: nowrap; }
.macro-chip { flex: 1 1 0; min-width: 0; background: var(--card2); border-radius: 12px; padding: 8px 4px; text-align: center; }
.macro-chip .mv { font-size: .98rem; font-weight: 800; white-space: nowrap; }
.macro-chip .mv .tiny { font-size: .58rem; }
.macro-chip .ml { font-size: .52rem; color: var(--txt2); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* badge de objetivo (Comida) — sóbrio, sem emoji, toque → Perfil */
.goal-badge { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-ctrl); padding: 11px 14px; font-family: inherit; font-size: .9rem; font-weight: 700; letter-spacing: -.01em; color: var(--txt); cursor: pointer; }
.goal-badge .chev { color: var(--txt3); font-size: 1.1rem; }
@media (hover: hover) { .goal-badge:hover { border-color: var(--txt3); } }
.micro-row { display: flex; justify-content: space-between; align-items: center; font-size: .76rem; padding: 5px 0; border-bottom: 1px solid rgba(128,128,160,.12); }
.micro-bar { flex: 1; height: 5px; background: var(--bg2); border-radius: 99px; margin: 0 10px; overflow: hidden; }
.micro-bar > div { height: 100%; background: var(--green); border-radius: 99px; }
.meal-group { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; background: var(--card2); }
.meal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: .82rem; }
.meal-head .tiny { color: var(--txt2); }

/* ============ ROUTINE timeline ============ */
.day-pills { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.day-pills::-webkit-scrollbar { display: none; }
.day-pill { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--card2); border: 1px solid var(--border); color: var(--txt2); font-weight: 700; font-size: .8rem; cursor: pointer; }
.day-pill.on { background: var(--accent); color: #fff; border-color: var(--accent); }
/* bloco de rotina: linha única na identidade do app (horário dentro do bloco) */
.rt-block { display: flex; align-items: center; gap: 11px; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-ctrl); padding: 10px 13px; margin-bottom: 8px; }
.rt-block.active { box-shadow: 0 0 0 1.5px var(--accent-border); }
.rt-block .rt-time { width: 44px; min-width: 44px; font-size: .8rem; font-weight: 800; color: var(--txt); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rt-block .rt-icon { width: 30px; height: 30px; min-width: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.rt-block .rt-icon .ic { width: 16px; height: 16px; }
.rt-block .grow { min-width: 0; }
.rt-block .rt-title { font-weight: 700; font-size: .86rem; letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; }
.rt-block .rt-meta { font-size: .68rem; color: var(--txt3); margin-top: 2px; }

/* scan overlay */
#scan-overlay { position: fixed; inset: 0; z-index: 120; background: #000; display: flex; flex-direction: column; }
#scan-overlay video { width: 100%; flex: 1; object-fit: cover; }
#scan-overlay .scan-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 78%; height: 26%; border: 3px solid var(--cyan); border-radius: 16px; box-shadow: 0 0 0 9999px rgba(0,0,0,.45); }
#scan-overlay .scan-bar { display: flex; gap: 10px; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

.pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: .62rem; font-weight: 700; padding: 3px 8px; border-radius: 7px; background: var(--card2); color: var(--txt2); }

/* ============ v8: componentes novos + refino estético ============ */
.nav-btn .nav-ico svg { display: block; }

/* navegação por dia (agenda) */
.daynav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.daynav .dn-label { text-align: center; flex: 1; }
.daynav .dn-label b { font-size: .92rem; }
.daynav input[type="date"] { padding: 6px 8px; }

/* gráfico interativo */
.ichart { position: relative; }
.ichart .ic-axis { fill: var(--txt3); font-size: 7px; }
.ichart-tip { position: absolute; pointer-events: none; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; font-size: .7rem; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity .12s; box-shadow: 0 4px 14px rgba(0,0,0,.3); z-index: 3; }
.ichart-tip.show { opacity: 1; }
.ichart-tip .tiny { font-weight: 500; color: var(--txt2); }

/* estágios do sono */
.stage-bar { display: flex; height: 12px; border-radius: 7px; overflow: hidden; background: var(--bg2); }
.stage-bar > div { height: 100%; }

/* mapa OSM (médicos) */
.osm-map { width: 100%; height: 190px; border: 1px solid var(--border); border-radius: 12px; }

/* My Coach */
.coach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.coach-stat { background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: 10px; text-align: center; }
.coach-stat .cs-v { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.coach-stat .cs-l { font-size: .58rem; color: var(--txt2); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* sliders mais sóbrios e consistentes */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 99px; background: var(--card2); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; box-shadow: none; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; box-shadow: none; }
.slider-row .fld { font-size: .8rem; }
.wikilink { color: var(--accent2); cursor: pointer; border-bottom: 1px dashed var(--accent2); }
.bl-mention { font-size: .78rem; color: var(--accent2); cursor: pointer; padding: 4px 0; }
.bl-mention:active { opacity: .6; }
.med-tile.on { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); }

/* ============================================================
   V9 PREMIUM — refino global, microinterações, skeleton,
   empty states, tooltip e command palette
   ============================================================ */

/* hairlines coerentes (substitui bordas escuras hardcoded) */
.todo-item, .caf-log-item, .micro-row, .hl-row, .tgl-row, .bm-row, .bl-item, .asset-row {
  border-bottom-color: var(--hairline) !important;
}

/* linhas de lista: hover sutil */
@media (hover: hover) {
  .asset-row, .drink-result, .set-link, .note-card, .stock-card, .book-card, .journal-entry { transition: background .15s, transform .1s; }
  .note-card:hover, .stock-card:hover, .book-card:hover { background: var(--bg2); }
}

/* accent gradient bar */
.pbar > div { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.pbar.green > div { background: var(--green); }
.pbar.cyan > div { background: var(--cyan); }

/* prioridades / chips com a nova paleta */
.prio.high { background: rgba(239,68,68,.13); color: var(--red); }
.prio.med { background: rgba(245,158,11,.14); color: var(--orange); }
.prio.low { background: var(--accent-weak); color: var(--accent); }
.tag { background: var(--card2); color: var(--txt2); border-radius: 8px; font-weight: 600; }

/* coach tip / deep-work / ai-box → paleta única */
.coach-tip { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.30); color: var(--green); border-radius: var(--r-ctrl); }
.coach-tip.keep { background: var(--accent-weak); border-color: rgba(99,102,241,.30); color: var(--accent); }
.dw-window { background: var(--accent-weak); border-color: rgba(99,102,241,.28); color: var(--accent); border-radius: var(--r-ctrl); }
.ai-box { background: var(--accent-weak); border-color: rgba(99,102,241,.22); border-radius: var(--r-ctrl); }
.ai-box b { color: var(--accent); }

/* botão IA — gradiente sóbrio (sem arco-íris) */
button.btn.ai { background: var(--accent); background-size: auto; animation: none; }

/* segmented / seg control */
.seg { border-radius: var(--r-ctrl); background: var(--card2); padding: 3px; gap: 2px; }
.seg button { border-radius: 9px; transition: background .15s, color .15s; color: var(--txt2); }
.seg button.on { background: var(--card); color: var(--txt); box-shadow: var(--shadow-sm); }
:root[data-theme="light"] .seg button.on { background: #fff; }

/* breathe circle com accent */
.breathe-circle { background: var(--accent-weak); border-color: var(--accent-border); }
.breathe-label { color: var(--accent); }

/* sub-cards e tiles arredondam mais */
.ex-block, .stock-card, .book-card, .note-card, .journal-entry, .meal-group, .stat-box, .gauge, .coach-stat, .macro-chip, .qa-btn, .med-tile, .sport-btn, .set-link, .tgl-row { border-radius: var(--r-ctrl); }
.stock-card, .ex-block { border-radius: 16px; }

/* gráfico: grades discretas, linha suave */
svg.chart text { fill: var(--txt3); font-size: 8px; }
.ichart-tip { background: var(--card); border-radius: 10px; box-shadow: var(--shadow-md); }

/* ----- SKELETON loaders ----- */
.skeleton { position: relative; overflow: hidden; background: var(--card2); border-radius: var(--r-ctrl); }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--hairline), transparent); transform: translateX(-100%); animation: sk-shimmer 1.3s infinite; }
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }
.sk-line { height: 12px; margin: 8px 0; }
.sk-line.lg { height: 22px; width: 60%; }
.sk-block { height: 90px; }

/* ----- EMPTY STATES ----- */
.empty-state { text-align: center; padding: 26px 16px; }
.empty-state .es-ico { font-size: 1.9rem; display: block; margin-bottom: 8px; opacity: .55; }
.empty-state .es-text { color: var(--txt2); font-size: .82rem; line-height: 1.5; max-width: 280px; margin: 0 auto; }
.empty-state .es-action { margin-top: 12px; }

/* ----- TOOLTIP genérico (desktop) ----- */
@media (hover: hover) {
  [data-tip] { position: relative; }
  [data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-6px); background: var(--txt); color: var(--bg); font-size: .68rem; font-weight: 600; padding: 5px 9px; border-radius: 8px; white-space: nowrap; z-index: 60; pointer-events: none; box-shadow: var(--shadow-md); }
}

/* ----- COMMAND PALETTE / BUSCA UNIVERSAL ----- */
#cmdk-fab {
  position: fixed; right: 16px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);
  z-index: 90; width: 48px; height: 48px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  box-shadow: var(--shadow-lg); transition: transform .12s, filter .15s;
}
#cmdk-fab:active { transform: scale(.92); }
@media (hover: hover) { #cmdk-fab:hover { filter: brightness(1.08); } }
#cmdk-backdrop { position: fixed; inset: 0; z-index: 130; background: var(--modal-backdrop); backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center; padding: 14vh 14px 14px; }
#cmdk {
  width: 100%; max-width: 600px; background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden;
  animation: modal-up .2s cubic-bezier(.22,1,.36,1); max-height: 70vh; display: flex; flex-direction: column;
}
#cmdk-input { border: none; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; font-size: 1rem; padding: 16px 18px; box-shadow: none !important; }
#cmdk-input:focus { box-shadow: none; }
#cmdk-results { overflow-y: auto; padding: 6px; }
.cmdk-sec { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--txt3); font-weight: 700; padding: 10px 12px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: .86rem; }
.cmdk-item .ck-ico { font-size: 1.05rem; width: 22px; text-align: center; opacity: .8; }
.cmdk-item .ck-sub { color: var(--txt3); font-size: .72rem; }
.cmdk-item.sel, .cmdk-item:hover { background: var(--accent-weak); color: var(--accent); }
.cmdk-item.sel .ck-sub { color: var(--accent); opacity: .8; }
.cmdk-empty { padding: 26px; text-align: center; color: var(--txt3); font-size: .82rem; }
.cmdk-hint { padding: 8px 14px; border-top: 1px solid var(--border); font-size: .66rem; color: var(--txt3); display: flex; gap: 12px; }
.cmdk-hint kbd { background: var(--card2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font-family: inherit; font-size: .62rem; }

/* ----- ÍCONES (linha, estilo Lucide) ----- */
.ic { display: inline-block; vertical-align: -0.14em; }
.th-ic { display: inline-flex; align-items: center; color: var(--accent); vertical-align: -2px; margin-right: 2px; }
.th-ic .ic { width: 1.05em; height: 1.05em; }
h2.tab-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h2.tab-title small { flex-basis: 100%; }
.nav-btn .nav-ico .ic { width: 1.25rem; height: 1.25rem; }
.subnav-btn .sn-ico { display: inline-flex; align-items: center; }
.subnav-btn .sn-ico .ic { width: 1rem; height: 1rem; }
.empty-state .es-ico .ic { stroke-width: 1.6; }
.h3-action .ic { width: .95em; height: .95em; vertical-align: -.12em; }
.set-link .em { color: var(--accent); display: inline-flex; align-items: center; }
.set-link .em .ic { width: 1.15em; height: 1.15em; }
.hl-ico .ic { width: 1.05em; height: 1.05em; vertical-align: -.18em; }
.corr-ico .ic, .ck-ico .ic { width: 1.05em; height: 1.05em; }
.stock-ico .ic, .tl-dot .ic { width: 1.15em; height: 1.15em; }
.supp-pill .ic { width: 1em; height: 1em; vertical-align: -.14em; }
.mood-face .ic { width: 1.6rem; height: 1.6rem; }
.empty-state .es-ico .ic { width: 1.9rem; height: 1.9rem; }
.coach-stat .cs-v .ic { width: 1em; height: 1em; vertical-align: -.1em; }

/* perf: pular renderização de cards fora da viewport */
.card { content-visibility: auto; contain-intrinsic-size: auto 120px; }

/* ----- HEATMAP (estilo GitHub) ----- */
.heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); gap: 3px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.heatmap::-webkit-scrollbar { display: none; }
.hm-cell { width: 11px; height: 11px; min-width: 11px; border-radius: 3px; background: var(--card2); }
.hm-l1 { background: var(--hm-color); opacity: .30; }
.hm-l2 { background: var(--hm-color); opacity: .52; }
.hm-l3 { background: var(--hm-color); opacity: .76; }
.hm-l4 { background: var(--hm-color); opacity: 1; }
.hm-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--txt3); }
.hm-legend .hm-cell { --hm-color: var(--accent); }

/* ----- SCORES ----- */
.score-hero { display: flex; align-items: center; gap: 16px; }
.score-ring { position: relative; width: 92px; height: 92px; min-width: 92px; }
.score-ring .sr-val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-ring .sr-num { font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.score-ring .sr-lbl { font-size: .56rem; text-transform: uppercase; letter-spacing: .05em; color: var(--txt2); margin-top: 2px; }
.score-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.score-item { background: var(--card2); border-radius: var(--r-ctrl); padding: 10px 12px; }
.score-item .si-top { display: flex; justify-content: space-between; align-items: baseline; }
.score-item .si-name { font-size: .76rem; color: var(--txt2); font-weight: 500; }
.score-item .si-val { font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; }
.score-item .si-trend { font-size: .64rem; font-weight: 700; }
.trend-up { color: var(--green); } .trend-down { color: var(--red); } .trend-flat { color: var(--txt3); }

/* ----- NOTES: toolbar + markdown rico ----- */
.md-toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.md-toolbar button { background: var(--card2); border: 1px solid var(--border); color: var(--txt2); border-radius: 8px; min-width: 32px; height: 32px; padding: 0 8px; font-size: .8rem; font-family: inherit; cursor: pointer; transition: background .15s, color .15s; }
@media (hover: hover) { .md-toolbar button:hover { background: var(--accent-weak); color: var(--accent); } }
.md-body pre { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-ctrl); padding: 10px 12px; overflow-x: auto; margin: 8px 0; }
.md-body pre code { background: none; padding: 0; font-size: .8rem; line-height: 1.5; }
.md-body .md-check { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; font-size: .86rem; }
.md-body .md-check.done { color: var(--txt3); text-decoration: line-through; }
.md-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: .8rem; }
.md-table th, .md-table td { border: 1px solid var(--border); padding: 6px 9px; text-align: left; }
.md-table th { background: var(--card2); font-weight: 600; }
.md-body hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.md-body s { opacity: .6; }

/* ----- onboarding ----- */
.ob-progress { display: flex; gap: 6px; margin-bottom: 16px; }
.ob-progress span { flex: 1; height: 4px; border-radius: 99px; background: var(--card2); transition: background .2s; }
.ob-progress span.on { background: var(--accent); }

/* ----- plano / pagamento ----- */
.plan-card { border: 1.5px solid var(--border); border-radius: var(--r-card); padding: 16px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.plan-card.sel { border-color: var(--accent); background: var(--accent-weak); }
.plan-card .pc-price { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.plan-card .pc-cycle { font-size: .76rem; color: var(--txt2); }
.plan-card .pc-badge { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); background: var(--accent-weak); padding: 2px 7px; border-radius: 99px; }

.tgl.disabled { opacity: .4; pointer-events: none; }

/* ----- Year in Review (Wrapped) ----- */
.wrapped { border-radius: var(--r-card); padding: 22px; background: var(--accent-weak); border: 1px solid var(--accent-border); color: var(--txt); }
.wrapped-hd { margin-bottom: 16px; }
.wrap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wrap-stat { background: rgba(255,255,255,.12); border-radius: 14px; padding: 12px 14px; }
.wrap-stat .ws-v { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.wrap-stat .ws-l { font-size: .66rem; opacity: .85; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

/* ----- correlações / comparações ----- */
.corr-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: .82rem; }
.corr-row:last-child { border-bottom: none; }
.corr-row .corr-ico { font-size: 1rem; }
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmp-box { background: var(--card2); border-radius: var(--r-ctrl); padding: 10px 12px; }
.cmp-box .cmp-l { font-size: .66rem; color: var(--txt2); text-transform: uppercase; letter-spacing: .04em; }
.cmp-box .cmp-v { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.cmp-box .cmp-d { font-size: .68rem; font-weight: 700; }

/* ----- dashboard customize ----- */
.dash-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: .86rem; }
.dash-row:last-child { border-bottom: none; }
.dash-row .x-btn:disabled { opacity: .3; }

/* ----- TIMELINE da vida ----- */
.tl-day { margin-bottom: 18px; }
.tl-date { font-size: .72rem; font-weight: 600; color: var(--txt2); text-transform: capitalize; margin-bottom: 8px; position: sticky; top: 0; }
.tl-row { display: flex; gap: 12px; padding: 7px 0; position: relative; }
.tl-row::before { content: ""; position: absolute; left: 15px; top: 0; bottom: 0; width: 1px; background: var(--hairline); }
.tl-row:last-child::before { display: none; }
.tl-dot { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; background: var(--card2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .95rem; z-index: 1; }
.tl-dot-event { background: var(--accent-weak); border-color: var(--accent); }
.tl-body { flex: 1; padding-top: 3px; }
.tl-title { font-size: .86rem; font-weight: 500; }
.tl-sub { font-size: .74rem; color: var(--txt2); margin-top: 2px; line-height: 1.45; }

/* ============================================================
   ATLAS DESIGN SYSTEM v10
   Camada de consolidação visual: tokens, componentes e estados.
   Mantém a lógica existente e estabiliza a aparência entre telas.
   ============================================================ */
:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #0b0c10;
  --bg2: #111219;
  --card: #15161d;
  --card2: #1a1c24;
  --surface-1: var(--card);
  --surface-2: var(--card2);
  --surface-3: #20232d;

  /* text */
  --txt: #f1f2f6;
  --txt2: #a2a7b4;
  --txt3: #6f7582;

  /* borders */
  --border: rgba(255,255,255,.085);
  --border-soft: rgba(255,255,255,.055);
  --hairline: rgba(255,255,255,.07);

  /* accent scale */
  --accent: #7477f5;
  --accent2: #9a9cf9;
  --accent-weak: rgba(116,119,245,.13);
  --accent-border: rgba(116,119,245,.28);

  /* semantic scale: restrained, not competing */
  --green: #35c98f;
  --red: #ef7070;
  --orange: #e8b85b;
  --yellow: #e8b85b;
  --cyan: #54bfe8;
  --pink: #b989f0;
  --success-weak: rgba(53,201,143,.12);
  --danger-weak: rgba(239,112,112,.12);
  --warning-weak: rgba(232,184,91,.13);
  --info-weak: rgba(84,191,232,.12);

  /* radius */
  --r-xs: 7px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-card: 18px;
  --r-ctrl: 12px;
  --r-pill: 999px;
  --radius: var(--r-card);

  /* spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;

  /* shadows */
  --shadow-sm: 0 1px 1px rgba(0,0,0,.22);
  --shadow-md: 0 12px 34px -22px rgba(0,0,0,.78);
  --shadow-lg: 0 24px 70px -30px rgba(0,0,0,.85);
  --ring: 0 0 0 3px rgba(116,119,245,.24);

  /* chrome */
  --topbar-bg: rgba(11,12,16,.82);
  --nav-bg: rgba(13,14,19,.88);
  --modal-backdrop: rgba(0,0,0,.58);

  /* typography */
  --fs-xxs: .64rem;
  --fs-xs: .72rem;
  --fs-sm: .8rem;
  --fs-md: .88rem;
  --fs-lg: 1rem;
  --fs-xl: 1.35rem;
  --fs-2xl: 1.75rem;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f7f7f5;
  --bg2: #ffffff;
  --card: #ffffff;
  --card2: #f1f2f4;
  --surface-1: var(--card);
  --surface-2: var(--card2);
  --surface-3: #e9ebef;

  --txt: #131419;
  --txt2: #676d78;
  --txt3: #9aa0aa;

  --border: rgba(19,20,25,.09);
  --border-soft: rgba(19,20,25,.06);
  --hairline: rgba(19,20,25,.075);

  --accent: #5657d9;
  --accent2: #6d6ee8;
  --accent-weak: rgba(86,87,217,.085);
  --accent-border: rgba(86,87,217,.22);

  --green: #1fa872;
  --red: #dc5f61;
  --orange: #c88a28;
  --yellow: #c88a28;
  --cyan: #168fbe;
  --pink: #9a6de2;

  --success-weak: rgba(31,168,114,.095);
  --danger-weak: rgba(220,95,97,.095);
  --warning-weak: rgba(200,138,40,.105);
  --info-weak: rgba(22,143,190,.09);

  --shadow-sm: 0 1px 2px rgba(19,20,25,.04);
  --shadow-md: 0 14px 36px -28px rgba(19,20,25,.28);
  --shadow-lg: 0 30px 80px -36px rgba(19,20,25,.30);
  --ring: 0 0 0 3px rgba(86,87,217,.15);
  --topbar-bg: rgba(247,247,245,.86);
  --nav-bg: rgba(255,255,255,.88);
  --modal-backdrop: rgba(19,20,25,.28);
}

body {
  line-height: 1.45;
  letter-spacing: 0;
  background: var(--bg);
}

#content {
  padding-left: var(--s-4);
  padding-right: var(--s-4);
}

.bento { gap: var(--s-3); }

h2.tab-title {
  font-size: 1.38rem;
  font-weight: 650;
  letter-spacing: -.02em;
  margin: 4px 2px var(--s-4);
}

h2.tab-title small {
  color: var(--txt2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-4);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 760px) {
  .card { padding: var(--s-5); }
}

@media (hover: hover) {
  .card:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-md);
  }
}

.card h3 {
  color: var(--txt2);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .01em;
  margin-bottom: var(--s-3);
}

.card h3 .h3-action,
.h3-action {
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 650;
}

.card .big {
  font-size: var(--fs-2xl);
  font-weight: 720;
  letter-spacing: -.03em;
}

.card .sub,
.muted {
  color: var(--txt2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.tiny {
  color: var(--txt3);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

button,
input,
select,
textarea {
  font: inherit;
}

button.btn,
#cmdk-fab {
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--r-ctrl);
  box-shadow: none;
  color: #fff;
  min-height: 40px;
}

button.btn {
  padding: 9px 14px;
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: 0;
}

button.btn.small {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
}

button.btn.ghost {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--txt);
}

button.btn.green {
  background: var(--green);
  color: #061b13;
}

button.btn.red {
  background: var(--danger-weak);
  border-color: rgba(239,112,112,.32);
  color: var(--red);
}

button.btn.ai {
  background: var(--accent);
  animation: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

button.btn:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: .56;
}

@media (hover: hover) {
  button.btn:hover,
  #cmdk-fab:hover {
    filter: brightness(1.04);
  }

  button.btn.ghost:hover,
  .subnav-btn:hover,
  .drink-result:hover,
  .cmdk-item:hover,
  .md-toolbar button:hover {
    background: var(--surface-3);
    border-color: var(--border);
    color: var(--txt);
  }
}

input,
select,
textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-ctrl);
  color: var(--txt);
  font-size: var(--fs-md);
  min-height: 40px;
  padding: 9px 11px;
}

textarea { min-height: 86px; resize: vertical; }

input::placeholder,
textarea::placeholder {
  color: var(--txt3);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

label.fld {
  color: var(--txt2);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0;
}

#bottomnav,
#subnav,
#topbar {
  border-color: var(--hairline);
  box-shadow: 0 -12px 30px -26px rgba(0,0,0,.65);
}

#alert-banner {
  background: var(--red);
  animation: none;
}

.tk-flash {
  animation: none;
}

.nav-btn {
  color: var(--txt3);
  font-size: .56rem;
  font-weight: 650;
}

.nav-btn.active {
  color: var(--accent);
}

.nav-btn.has-alert::after {
  animation: none;
  box-shadow: 0 0 0 3px var(--danger-weak);
}

.subnav-btn {
  border-radius: var(--r-pill);
  color: var(--txt2);
  font-size: var(--fs-xs);
  font-weight: 650;
}

.subnav-btn.active {
  background: var(--accent-weak);
  color: var(--accent);
}

.pbar,
.stock-bar,
.micro-bar,
.stage-bar {
  background: var(--surface-2);
}

.pbar > div {
  background: var(--accent);
}

.pbar.green > div { background: var(--green); }
.pbar.cyan > div { background: var(--cyan); }

.asset-row,
.todo-item,
.caf-log-item,
.micro-row,
.hl-row,
.tgl-row,
.bm-row,
.bl-item,
.corr-row,
.dash-row {
  border-bottom-color: var(--hairline) !important;
  color: var(--txt);
}

.asset-row,
.todo-item,
.micro-row,
.hl-row,
.bm-row,
.bl-item,
.corr-row,
.dash-row {
  padding-top: 9px;
  padding-bottom: 9px;
}

.x-btn {
  border-radius: var(--r-xs);
  color: var(--txt3);
  min-width: 28px;
  min-height: 28px;
}

@media (hover: hover) {
  .x-btn:hover {
    background: var(--danger-weak);
    color: var(--red);
  }
}

.tag,
.prio,
.plan-card .pc-badge {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  color: var(--txt2);
  font-size: var(--fs-xxs);
  font-weight: 650;
  letter-spacing: .01em;
}

.prio.high {
  background: var(--danger-weak);
  border-color: rgba(239,112,112,.20);
  color: var(--red);
}

.prio.med {
  background: var(--warning-weak);
  border-color: rgba(232,184,91,.22);
  color: var(--orange);
}

.prio.low {
  background: var(--accent-weak);
  border-color: var(--accent-border);
  color: var(--accent);
}

.supp-pill,
.qa-btn,
.sport-btn,
.med-tile,
.md-toolbar button,
.day-pill {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--txt2);
  font-weight: 650;
}

.qa-btn,
.sport-btn,
.med-tile,
.day-pill {
  border-radius: var(--r-md);
}

.supp-pill.taken,
.med-tile.on,
.day-pill.on {
  background: var(--accent-weak);
  border-color: var(--accent-border);
  color: var(--accent);
}

.todo-check {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xs);
}

.todo-item.done .todo-check {
  background: var(--green);
  border-color: var(--green);
  color: #061b13;
}

.stock-card,
.book-card,
.note-card,
.journal-entry,
.meal-group,
.ex-block,
.set-link,
.score-item,
.stat-box,
.gauge,
.coach-stat,
.macro-chip,
.cmp-box,
.wrap-stat,
.auth-status {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: none;
}

.stat-box .v,
.gauge .gv,
.coach-stat .cs-v,
.macro-chip .mv,
.cmp-box .cmp-v,
.score-item .si-val {
  font-weight: 720;
  letter-spacing: -.02em;
}

.stat-box .l,
.gauge .gl,
.coach-stat .cs-l,
.macro-chip .ml,
.cmp-box .cmp-l,
.score-ring .sr-lbl {
  color: var(--txt2);
  font-size: var(--fs-xxs);
  font-weight: 650;
  letter-spacing: .03em;
}

.coach-tip,
.dw-window,
.ai-box {
  background: var(--accent-weak);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
  color: var(--txt);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.coach-tip {
  background: var(--success-weak);
  border-color: rgba(53,201,143,.26);
  color: var(--green);
}

.coach-tip.keep,
.dw-window,
.ai-box {
  background: var(--accent-weak);
  border-color: var(--accent-border);
  color: var(--txt);
}

.ai-box b,
.dw-window b {
  color: var(--accent);
}

.card.alert-red,
.stock-card.alert-red {
  background: var(--surface-1);
  border-color: rgba(239,112,112,.38);
  box-shadow: none;
}

.hl-bad { color: var(--red); }
.hl-warn { color: var(--orange); }
.hl-ok { color: var(--green); }

.seg {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-ctrl);
  padding: 3px;
}

.seg button {
  border-radius: calc(var(--r-ctrl) - 3px);
  color: var(--txt2);
}

.seg button.on {
  background: var(--surface-1);
  color: var(--txt);
  box-shadow: var(--shadow-sm);
}

.tgl {
  background: var(--surface-2);
  border-color: var(--border);
}

.tgl::after {
  background: var(--txt3);
}

.tgl.on {
  background: var(--accent);
  border-color: var(--accent);
}

#modal {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-lg);
}

@media (min-width: 760px) {
  #modal { border-radius: var(--r-xl); }
}

#modal h3 {
  font-size: 1.08rem;
  font-weight: 680;
  letter-spacing: -.015em;
}

#toast {
  background: var(--txt);
  color: var(--bg);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
}

#cmdk,
.plan-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

#cmdk-fab {
  box-shadow: var(--shadow-md);
}

#cmdk-input {
  background: transparent;
}

.cmdk-item {
  border-radius: var(--r-sm);
}

.cmdk-item.sel,
.cmdk-item:hover {
  background: var(--accent-weak);
  color: var(--accent);
}

.empty-state {
  padding: var(--s-6) var(--s-4);
}

.empty-state .es-ico {
  color: var(--txt3);
  opacity: .72;
}

.empty-state .es-text {
  color: var(--txt2);
}

.breathe-circle,
.auth-avatar,
.book-cover,
.wrapped {
  background: var(--accent-weak);
  border: 1px solid var(--accent-border);
  color: var(--accent);
}

.wrapped {
  color: var(--txt);
}

.wrap-stat {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.10);
}

:root[data-theme="light"] .wrap-stat {
  background: rgba(86,87,217,.06);
  border-color: rgba(86,87,217,.10);
}

::-webkit-scrollbar-thumb {
  background: var(--surface-3);
}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::after,
  *::before {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   ATLAS — v11 "BUNDLE LOOK": flat & dense
   Migra a aparência para o design bundle (Claude Design export):
   raios apertados (6px), hairline, barra superior, estados (vazio/
   erro/skeleton), ring animado, input de tags, cards de refeição,
   onboarding full-screen. SÓ estética/UI nova — lógica intacta.
   ============================================================ */
:root {
  /* raios apertados do bundle */
  --r-xs: 4px;   /* badges de prioridade */
  --r-sm: 6px;
  --r-md: 6px;   /* tiles / cards internos */
  --r-lg: 10px;  /* botões de ícone, controles maiores */
  --r-xl: 16px;  /* modal / cmdk / sheets */
  --r-card: 6px; /* cards */
  --r-ctrl: 6px; /* botões, inputs */
  --radius: 6px;
  --app-h: 46px; /* altura da barra superior */
}

/* cards e tiles ficam planos (sem sombra), borda hairline */
.card { box-shadow: none; }
@media (hover: hover) {
  .card:hover { box-shadow: none; border-color: var(--border-soft); }
}

/* ---------- BARRA SUPERIOR (app bar) ---------- */
#appbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 51;
  height: calc(var(--app-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding-left: 12px; padding-right: 12px;
  background: var(--topbar-bg); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hairline);
}
#appbar.hidden { display: none; }
.ab-left { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.ab-back {
  background: none; border: none; color: var(--txt2); font-size: 1.6rem; line-height: 1;
  cursor: pointer; padding: 0 3px 3px 0; font-weight: 400; display: flex; align-items: center;
}
.ab-back[hidden] { display: none; }
@media (hover: hover) { .ab-back:hover { color: var(--txt); } }
.ab-brand {
  font-size: .7rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--txt); user-select: none; cursor: default;
}
/* data centralizada na barra superior (substitui o card de calendário) */
.ab-date { display: none; }
.ab-date.on { display: flex; flex: 1; align-items: center; justify-content: center; gap: 2px; min-width: 0; }
.ab-date .abd-arrow { background: none; border: none; color: var(--txt3); font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 2px 5px; }
@media (hover: hover) { .ab-date .abd-arrow:hover { color: var(--txt); } }
.ab-date .abd-label { position: relative; font-size: .64rem; font-weight: 700; letter-spacing: .04em; color: var(--txt); white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; }
.ab-date .abd-label input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none; padding: 0; min-height: 0; cursor: pointer; }
.ab-actions { display: flex; align-items: center; gap: 2px; }
.ab-btn {
  width: 34px; height: 34px; border-radius: var(--r-lg); background: none; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--txt2); position: relative; transition: color .15s, background .15s;
}
.ab-btn .ic { width: 18px; height: 18px; }
@media (hover: hover) { .ab-btn:hover { background: var(--surface-2); color: var(--txt); } }
.ab-badge {
  position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); border: 1.5px solid var(--bg);
}
.ab-avatar {
  width: 29px; height: 29px; border-radius: 50%; margin-left: 4px;
  background: var(--accent-weak); border: 1.5px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 800; color: var(--accent); cursor: pointer;
}

/* offsets de layout quando a barra superior está presente */
body.has-appbar #subnav { top: calc(var(--app-h) + env(safe-area-inset-top)); }
body.has-appbar #content {
  padding-top: calc(var(--app-h) + env(safe-area-inset-top) + 12px);
}
body.has-appbar.has-subnav #content {
  padding-top: calc(var(--app-h) + var(--sub-h) + env(safe-area-inset-top) + 12px);
}
/* a barra superior já mostra "Atlas"; o título da tela vive no conteúdo */

/* ---------- esconder barras ao rolar para baixo (mais espaço); voltam ao subir ----------
   Só deslizamos as barras (fixas) para fora; o conteúdo por trás delas fica visível,
   dando mais espaço, sem mexer no padding (evita reflow/pulos no scroll). */
#appbar, #subnav, #bottomnav {
  transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .28s ease;
  will-change: transform;
}
body.bars-hidden #appbar { transform: translateY(-100%); opacity: 0; pointer-events: none; }
body.bars-hidden #subnav { transform: translateY(calc(-100% - var(--app-h) - env(safe-area-inset-top))); opacity: 0; pointer-events: none; }
body.bars-hidden #bottomnav { transform: translateY(100%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #appbar, #subnav, #bottomnav { transition: none; } }

/* ---------- BOTTOM NAV: só ícones (bundle) ---------- */
body.nav-iconly .nav-btn { gap: 0; }
body.nav-iconly .nav-btn span:not(.nav-ico) { display: none; }
body.nav-iconly .nav-btn .nav-ico { font-size: 1.2rem; }
body.nav-iconly .nav-btn .nav-ico .ic { width: 1.32rem; height: 1.32rem; }

/* ---------- ESTADO DE ERRO (edge case) ---------- */
.error-state { text-align: center; padding: var(--s-6) var(--s-4); }
.error-state .err-ico {
  width: 60px; height: 60px; border-radius: 16px; margin: 0 auto 16px;
  background: var(--danger-weak); border: 1px solid rgba(239,112,112,.22);
  display: flex; align-items: center; justify-content: center; color: var(--red);
}
.error-state .err-ico .ic { width: 26px; height: 26px; }
.error-state .err-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.025em; margin-bottom: 7px; }
.error-state .err-text { font-size: .8rem; color: var(--txt2); line-height: 1.55; max-width: 270px; margin: 0 auto 16px; }
.error-state .err-actions { display: flex; flex-direction: column; gap: 8px; }
.err-detail {
  border-left: 3px solid rgba(239,112,112,.4); padding: 7px 0 7px 13px;
  margin: 4px 0 16px; text-align: left;
}
.err-detail p { font-size: .72rem; color: var(--red); font-weight: 500; opacity: .8; line-height: 1.4; }

/* CTA tracejado (conectar fonte / empty premium) */
.connect-cta {
  background: var(--card); border: 1.5px dashed var(--border); border-radius: var(--r-lg);
  padding: 22px 18px; text-align: center;
}
.connect-cta .cc-ico {
  width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 12px;
  background: var(--accent-weak); border: 1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.connect-cta .cc-ico .ic { width: 20px; height: 20px; }
.connect-cta .cc-title { font-size: .9rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; }
.connect-cta .cc-text { font-size: .76rem; color: var(--txt2); line-height: 1.55; margin-bottom: 14px; }

/* skeleton em bloco de métrica (edge case loading) */
.sk-metric { height: 78px; border-radius: var(--r-card); }
.sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- INPUT DE TAGS (ingredientes — Cook) ---------- */
.tag-input {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-ctrl);
  padding: 8px; min-height: 44px;
}
.tag-input:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.tag-input .ti-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-weak); border: 1px solid var(--accent-border);
  color: var(--accent); border-radius: var(--r-pill);
  padding: 4px 6px 4px 10px; font-size: .74rem; font-weight: 600;
}
.tag-input .ti-tag button {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: .9rem; line-height: 1; padding: 0 2px; opacity: .7;
}
.tag-input .ti-tag button:hover { opacity: 1; }
.tag-input input {
  flex: 1; min-width: 90px; border: none; background: none; box-shadow: none !important;
  padding: 4px 6px; min-height: 28px; width: auto;
}
.tag-input input:focus { border: none; }

/* ---------- CARD DE REFEIÇÃO (Cook — sugestões IA) ---------- */
.meal-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 14px; margin-bottom: 10px;
}
.meal-card .mc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.meal-card .mc-name { font-size: .92rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.meal-card .mc-kcal { font-size: .68rem; color: var(--txt2); margin-top: 3px; }
.meal-card .mc-match {
  flex-shrink: 0; text-align: center; min-width: 52px;
}
.meal-card .mc-match .mm-pct { font-size: 1.05rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.meal-card .mc-match .mm-lbl { font-size: .52rem; color: var(--txt3); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.match-hi { color: var(--green); } .match-mid { color: var(--orange); } .match-lo { color: var(--txt3); }
.meal-card .mc-macros { display: flex; gap: 8px; }
.meal-card .mc-macro {
  flex: 1; background: var(--surface-2); border-radius: var(--r-sm); padding: 8px 6px; text-align: center;
}
.meal-card .mc-macro .mv { font-size: .9rem; font-weight: 800; letter-spacing: -.02em; }
.meal-card .mc-macro .ml { font-size: .52rem; color: var(--txt3); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.ai-hint { font-size: .68rem; color: var(--txt3); display: flex; align-items: center; gap: 6px; margin: 2px 0 12px; }
.ai-hint .ic { width: .95em; height: .95em; }

/* ---------- SCORE RING animado on-load (microinteração) ---------- */
@keyframes ring-draw { from { stroke-dashoffset: var(--ring-from, 339); } }
.ring-anim { animation: ring-draw 1.2s cubic-bezier(.22,1,.36,1) .15s both; }

/* checkbox: animação de conclusão */
@keyframes check-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.todo-item.done .todo-check .ic,
.todo-check.just-done { animation: check-pop .28s cubic-bezier(.22,1,.36,1); }

/* ---------- transição sutil de aba (fade) ---------- */
@keyframes tab-fade { from { opacity: 0; transform: translateY(6px); } }
.tab-fade-in { animation: tab-fade .22s ease both; }

/* ---------- ONBOARDING full-screen ---------- */
#ob-screen {
  position: fixed; inset: 0; z-index: 140; background: var(--bg);
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 22px) 22px calc(env(safe-area-inset-bottom) + 22px);
}
#ob-screen.hidden { display: none; }
#ob-screen .ob-top { margin-bottom: 26px; }
#ob-screen .ob-progress { margin-bottom: 0; }
#ob-screen .ob-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; }
#ob-screen .ob-eyebrow { font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
#ob-screen h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.18; margin-bottom: 8px; }
#ob-screen .ob-sub { font-size: .84rem; color: var(--txt2); line-height: 1.5; margin-bottom: 22px; }
#ob-screen .ob-fields { margin-bottom: 8px; }
#ob-screen .ob-foot { display: flex; gap: 10px; align-items: center; padding-top: 16px; }
#ob-screen .ob-skip { background: none; border: none; color: var(--txt2); font-family: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; padding: 10px; }
#ob-screen .ob-skip:hover { color: var(--txt); }
/* termos de uso / privacidade (último passo do onboarding) */
#ob-screen .ob-terms { max-height: 38vh; overflow-y: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 16px; margin-bottom: 16px; -webkit-overflow-scrolling: touch; }
#ob-screen .ob-terms h4 { font-size: .8rem; font-weight: 700; letter-spacing: -.01em; margin: 12px 0 5px; }
#ob-screen .ob-terms h4:first-child { margin-top: 0; }
#ob-screen .ob-terms p { font-size: .78rem; color: var(--txt2); line-height: 1.55; margin: 0; }
#ob-screen .ob-check { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; color: var(--txt); line-height: 1.45; cursor: pointer; }
#ob-screen .ob-check input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }

/* ---------- onboarding refinado ---------- */
/* barra de progresso fina, contínua, com brilho sutil */
#ob-screen .ob-bar { height: 3px; border-radius: 99px; background: var(--card2); overflow: hidden; }
#ob-screen .ob-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 0 10px var(--accent-border); transition: width .45s cubic-bezier(.4,0,.2,1); }
/* entrada suave de cada tela */
@keyframes ob-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#ob-screen .ob-anim { animation: ob-in .4s cubic-bezier(.22,1,.36,1) both; }
#ob-screen input::placeholder { color: var(--txt3); }
/* senha em tempo real */
#ob-screen .ob-pwhint { font-size: .72rem; margin-top: 6px; min-height: 14px; color: var(--txt3); }
#ob-screen .ob-pwhint.weak { color: var(--orange); }
#ob-screen .ob-pwhint.ok { color: var(--green); }

/* multi-intent (objetivos) */
.ob-focus { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ob-focus-chip { display: flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--r-ctrl); padding: 12px 13px; cursor: pointer; font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--txt); text-align: left; }
.ob-focus-chip .ofc-ico { display: flex; color: var(--txt3); }
.ob-focus-chip.on { border-color: var(--accent); background: var(--accent-weak); color: var(--accent); }
.ob-focus-chip.on .ofc-ico { color: var(--accent); }

/* cards de objetivo corporal */
.ob-cards { display: flex; flex-direction: column; gap: 9px; }
.ob-card-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--r-ctrl); padding: 14px 16px; cursor: pointer; font-family: inherit; color: var(--txt); text-align: left; }
.ob-card-opt b { font-size: .98rem; font-weight: 700; letter-spacing: -.02em; }
.ob-card-opt span { font-size: .72rem; color: var(--txt3); text-transform: uppercase; letter-spacing: .04em; }
.ob-card-opt.on { border-color: var(--accent); background: var(--accent-weak); }
.ob-card-opt.on b, .ob-card-opt.on span { color: var(--accent); }

/* intro / nota do fundador */
#ob-screen .ob-intro { justify-content: center; text-align: left; }
.ob-brand { font-size: .72rem; font-weight: 800; letter-spacing: .3em; color: var(--accent); margin-bottom: 18px; }
.ob-hero-title { font-size: 2.1rem; font-weight: 800; letter-spacing: -.045em; line-height: 1.08; margin-bottom: 14px; }
.ob-hero-sub { font-size: .92rem; color: var(--txt2); line-height: 1.55; margin-bottom: 22px; }
.ob-proof { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 24px; }
.ob-proof span { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: var(--txt2); }
.ob-proof span .ic { width: 15px; height: 15px; color: var(--accent); }
.ob-founder { display: flex; gap: 12px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px; }
.ob-founder-av { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; background: var(--accent-weak); border: 1.5px solid var(--accent-border); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; color: var(--accent); }
.ob-founder-note { font-size: .82rem; color: var(--txt2); line-height: 1.5; font-style: italic; }
.ob-founder-sig { font-style: normal; font-weight: 700; color: var(--txt); margin-top: 6px; font-size: .78rem; }

/* tela montando o plano */
#ob-screen .ob-calc { justify-content: center; align-items: center; text-align: center; }
.ob-calc-ring { position: relative; width: 96px; height: 96px; margin: 0 auto 20px; }
.ob-calc-ring .ob-calc-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; }
.ob-calc-lines { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%; max-width: 280px; }
.ob-calc-line { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--txt3); transition: color .3s; }
.ob-calc-line .occ-dot { width: 16px; height: 16px; min-width: 16px; border-radius: 50%; border: 1.5px solid var(--border); position: relative; }
.ob-calc-line.done { color: var(--txt); }
.ob-calc-line.done .occ-dot { background: var(--green); border-color: var(--green); }
.ob-calc-line.done .occ-dot::after { content: ""; position: absolute; left: 4.5px; top: 2px; width: 4px; height: 7px; border: solid #04241a; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* tela de resultado / unlock */
.ob-results-badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: var(--accent-weak); color: var(--accent); border-radius: var(--r-pill); padding: 5px 11px; font-size: .7rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 14px; }
.ob-results-badge .ic { width: 14px; height: 14px; }
.ob-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.ob-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px; text-align: center; }
.ob-stat-v { font-size: 1.5rem; font-weight: 800; letter-spacing: -.04em; color: var(--accent2); }
.ob-stat-l { font-size: .62rem; color: var(--txt3); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.ob-unlocked { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 16px; }
.ob-unlocked-t { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txt3); margin-bottom: 10px; }
.ob-unlocked-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: .86rem; }
.ob-unlocked-row .our-ico { display: flex; color: var(--accent); }
.ob-unlocked-row .our-check { display: flex; color: var(--green); }
.ob-unlocked-row .our-check .ic { width: 16px; height: 16px; }

/* prévia de notificações */
.ob-notif-preview { display: flex; flex-direction: column; gap: 9px; }
.ob-notif-row { display: flex; align-items: center; gap: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-card); padding: 12px 14px; }
.ob-notif-row .onr-ico { width: 34px; height: 34px; min-width: 34px; border-radius: 9px; background: var(--accent-weak); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.ob-notif-row b { font-size: .84rem; font-weight: 600; }

/* guia rápido pós-onboarding */
.guide-head { text-align: center; margin-bottom: 14px; }
.guide-spark { width: 46px; height: 46px; border-radius: 14px; margin: 0 auto 12px; background: var(--accent-weak); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.guide-spark .ic { width: 22px; height: 22px; }
.guide-prog { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: .72rem; font-weight: 700; color: var(--txt2); }
.guide-list { display: flex; flex-direction: column; gap: 8px; }
.guide-item { display: flex; align-items: center; gap: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-ctrl); padding: 12px 13px; cursor: pointer; font-family: inherit; text-align: left; color: var(--txt); }
.guide-item .gi-ico { width: 30px; height: 30px; min-width: 30px; border-radius: 9px; background: var(--card2); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.guide-item .gi-ico .ic { width: 16px; height: 16px; }
.guide-item.done .gi-ico { background: var(--green); color: #04241a; }
.guide-item .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.guide-item b { font-size: .86rem; font-weight: 600; letter-spacing: -.01em; }
.guide-item .tiny { color: var(--txt3); }
.guide-item.done b { color: var(--txt2); }
.guide-item .chev { color: var(--txt3); font-size: 1.1rem; }
/* pílula flutuante "voltar ao guia" */
#guide-resume { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px); z-index: 60; display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: #fff; border: none; border-radius: var(--r-pill); padding: 10px 16px; font-family: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-lg); animation: ob-in .3s ease both; }
#guide-resume .ic { width: 15px; height: 15px; }

/* ============================================================
   ATLAS — v12: FIDELIDADE AO BUNDLE (typography-first, denso)
   Cabeçalhos uppercase tracked, sub-nav underline, métricas pesadas,
   barras finas. É o que dá a "cara" do design bundle.
   ============================================================ */

/* títulos de seção: uppercase + tracking (assinatura do bundle) */
.card h3 {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--txt2);
}
.card h3 .h3-action,
.card h3 .h3-action.ic,
.h3-action {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* valores de métrica mais pesados/condensados (bundle: weight 800) */
.card .big { font-weight: 800; letter-spacing: -.04em; }
.stat-box .v, .gauge .gv, .coach-stat .cs-v, .macro-chip .mv,
.cmp-box .cmp-v, .score-item .si-val, .wrap-stat .ws-v, .score-ring .sr-num {
  font-weight: 800; letter-spacing: -.035em;
}

/* rótulos minúsculos uppercase (bundle: ~.55rem, tracking .06em) */
.stat-box .l, .gauge .gl, .coach-stat .cs-l, .macro-chip .ml,
.cmp-box .cmp-l, .score-ring .sr-lbl, .ws-l {
  font-size: .55rem; letter-spacing: .06em;
}

/* cards um pouco mais densos */
.card { padding: 15px; }
@media (min-width: 760px) { .card { padding: 16px; } }

/* título de tela mais "hero" */
h2.tab-title { font-weight: 700; letter-spacing: -.03em; }

/* barras de progresso finas (bundle: 3px) */
.pbar { height: 4px; }

/* ---------- SUB-NAV: indicador underline minimalista (bundle) ---------- */
:root { --sub-h: 40px; }              /* faixa mais achatada (fonte mantém .72rem) */
/* sub-abas preenchem a largura (sem precisar arrastar); o ⊞ fica fixo no fim */
#subnav { gap: 0; padding: 0 6px; overflow-x: hidden; }
#subnav::-webkit-scrollbar { display: none; }
.subnav-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border-radius: 0;
  background: none !important;
  border: none;
  box-shadow: none;
  color: var(--txt3);
  padding: 0 6px;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: center;
}
.subnav-btn.sub-custom { flex: 0 0 auto; padding: 0 10px; }
.subnav-btn .sn-ico { display: none; }      /* texto puro, como no bundle */
.subnav-btn.active {
  background: none !important;
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}
@media (hover: hover) {
  .subnav-btn:hover { background: none; color: var(--txt2); }
}
.subnav-btn.sub-custom { box-shadow: none; color: var(--txt3); padding: 0 12px; }
.subnav-btn.sub-custom:hover { box-shadow: none; }

/* perfil: cabeçalho + stats no estilo do bundle */
.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-head .ph-avatar {
  width: 52px; height: 52px; min-width: 52px; border-radius: 50%;
  background: var(--accent-weak); border: 2px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 800; color: var(--accent);
}
.profile-head .ph-name { font-size: .96rem; font-weight: 700; letter-spacing: -.02em; }
.profile-head .ph-meta { font-size: .74rem; color: var(--txt2); margin-top: 2px; }
.profile-head .ph-plan { font-size: .62rem; color: var(--accent); font-weight: 700; margin-top: 4px; letter-spacing: .02em; }
.profile-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* ============================================================
   v13: hero da Home, habit tiles, quick log e ajustes finos
   ============================================================ */

/* botão de busca (FAB) redondo */
#cmdk-fab { border-radius: 50%; }

/* sub-abas: fonte levemente menor p/ caber mais preenchendo a largura */
.subnav-btn { font-size: .68rem; }

/* quadros de calendário/dia mais achatados e centralizados */
.card:has(.daynav) { padding-top: 7px; padding-bottom: 7px; }
.daynav { justify-content: space-between; align-items: center; }
.daynav .dn-label b { font-size: .86rem; }

/* ---------- HOME HERO (estilo bundle) ---------- */
.home-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 2px 2px 14px; }
.hero-text { flex: 1; min-width: 0; }
.hero-eyebrow { font-size: .61rem; font-weight: 600; color: var(--txt3); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.hero-greet { font-size: 1.42rem; font-weight: 700; letter-spacing: -.045em; line-height: 1.2; color: var(--txt); margin-bottom: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-summary { font-size: .76rem; color: var(--txt2); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.hero-summary .hs-bolt { display: inline-flex; color: var(--orange); flex-shrink: 0; }
.hero-summary .hs-bolt .ic { width: 13px; height: 13px; }
.hero-ring { position: relative; width: 78px; height: 78px; min-width: 78px; flex-shrink: 0; }
.hero-ring .hr-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; letter-spacing: -.04em; }

/* ---------- INSIGHT BANNER (estilo bundle) ---------- */
.insight-banner { border-left: 3px solid var(--orange); padding: 7px 0 7px 13px; margin: 0 2px 18px; }
.insight-banner p { font-size: .73rem; color: var(--orange); font-weight: 500; line-height: 1.4; opacity: .9; margin: 0; }

/* ---------- HABIT TILES (estilo bundle) ---------- */
.habit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.habit-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 14px 6px; border-radius: var(--r-md); border: 1px solid var(--border); background: rgba(255,255,255,.025); cursor: pointer; user-select: none; transition: border-color .2s, background .2s; }
:root[data-theme="light"] .habit-tile { background: var(--surface-2); }
.habit-tile .habit-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--txt3); transition: all .2s; }
.habit-tile .habit-label { font-size: .62rem; font-weight: 600; color: var(--txt3); text-align: center; line-height: 1.3; }
.habit-tile.done { border-color: rgba(53,201,143,.28); background: var(--success-weak); }
.habit-tile.done .habit-dot { background: var(--green); box-shadow: 0 0 8px rgba(53,201,143,.45); }
.habit-tile.done .habit-label { color: var(--green); }
.habit-tile .habit-x { position: absolute; top: 1px; right: 1px; min-width: 20px; min-height: 20px; font-size: .68rem; opacity: .3; }
@media (hover: hover) { .habit-tile:hover .habit-x { opacity: .6; } }

/* ---------- QUICK LOG (estilo bundle) ---------- */
.quicklog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quicklog-btn { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-card); padding: 12px 14px; cursor: pointer; color: var(--txt); font-size: .78rem; font-weight: 600; font-family: inherit; letter-spacing: -.01em; }
.quicklog-btn .ql-ico { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quicklog-btn .ql-ico .ic { width: 13px; height: 13px; }
.quicklog-btn .ql-food { background: var(--accent-weak); color: var(--accent); }
.quicklog-btn .ql-workout { background: var(--success-weak); color: var(--green); }
@media (hover: hover) { .quicklog-btn:hover { border-color: var(--txt3); } }

/* ============================================================
   v14: teclado, transição de sub-aba, calendário, notas, onboarding
   ============================================================ */

/* teclado mobile: empurra overlays acima do teclado (--kb via JS) */
:root { --kb: 0px; }
#modal-backdrop { padding-bottom: var(--kb); transition: padding-bottom .18s ease; }
#modal { max-height: min(88vh, calc(100dvh - var(--kb) - 36px)); }
#ob-screen { padding-bottom: calc(env(safe-area-inset-bottom) + 22px + var(--kb)); }
#modal input, #modal textarea, #modal select { scroll-margin-block: 70px; }

/* transição simples ao trocar de sub-aba (passa da direita) */
@keyframes sub-slide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.sub-slide-in { animation: sub-slide .2s cubic-bezier(.22,1,.36,1) both; }

/* calendário/datas: mais achatado e centralizado */
.card:has(.daynav) { padding: 6px 10px; }
.daynav { min-height: 40px; }
.daynav .btn.small { min-height: 30px; padding: 4px 9px; }
.daynav input[type="date"] { min-height: 32px; padding: 4px 8px; }
.daynav .dn-label { line-height: 1.15; }

/* labels/tags de notas */
.note-filter { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.note-label-chip { font-size: .6rem; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--txt3); border: 1px solid var(--border); cursor: pointer; transition: all .15s; }
.note-label-chip.on { background: var(--accent-weak); color: var(--accent); border-color: var(--accent-border); }
.note-card .nc-labels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

/* onboarding: sliders com leitura ao vivo */
.ob-slider { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.ob-slider input[type="range"] { flex: 1; }
/* valor digitável, sem caixa cinza */
.ob-slider .ob-num-wrap { display: flex; align-items: baseline; gap: 4px; min-width: 96px; justify-content: flex-end; }
.ob-slider .ob-num { width: 78px; border: none !important; background: none; box-shadow: none !important; padding: 0; text-align: right; font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; color: var(--txt); -moz-appearance: textfield; }
.ob-slider .ob-num::-webkit-outer-spin-button, .ob-slider .ob-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ob-slider .ob-num:focus { border: none !important; outline: none; }
.ob-slider .ob-num-wrap small { font-size: .7rem; font-weight: 600; color: var(--txt2); }
.ob-slider .ob-val { min-width: 80px; text-align: right; font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; color: var(--txt); }
.ob-slider .ob-val small { font-size: .7rem; font-weight: 600; color: var(--txt2); }
.ob-slider .ob-val.empty { color: var(--txt3); }

/* ============ v15: modo edição de cards (long-press) ============ */
#edit-bar {
  position: fixed; left: 12px; right: 12px; z-index: 95;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-ctrl);
  box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 10px 8px 14px; font-size: .72rem; color: var(--txt2);
}
.editing-cards .edit-card { position: relative; touch-action: none; cursor: grab; animation: jiggle .32s ease-in-out infinite alternate; }
.editing-cards .edit-card .h3-action, .editing-cards .edit-card button:not(.ec-btn) { pointer-events: none; }
@keyframes jiggle { from { transform: rotate(-.45deg); } to { transform: rotate(.45deg); } }
.editing-cards .edit-card.dragging { animation: none; z-index: 90; box-shadow: var(--shadow-lg); opacity: .96; }
.edit-ctrls { position: absolute; top: 6px; right: 6px; display: flex; gap: 6px; z-index: 4; }
.edit-ctrls .ec-btn { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--txt); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sm); }
.edit-ctrls .ec-btn .ic { width: 14px; height: 14px; }
.edit-ctrls .ec-remove { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .editing-cards .edit-card { animation: none; } }

/* ============ v16: sliders evidentes + modo edição refinado ============ */

/* sliders minimalistas: linha fina (4px) + bolinha grande (22px) */
input[type="range"] { -webkit-appearance: none; appearance: none; min-height: 0; height: 22px; padding: 0; background: transparent; border: none; box-shadow: none; border-radius: 99px; }
input[type="range"]:focus, input[type="range"]:focus-visible { border: none; box-shadow: none; outline: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: var(--surface-3); }
input[type="range"].filled::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--accent) var(--fill, 0%), var(--surface-3) var(--fill, 0%)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--accent); border: none; box-shadow: none; cursor: pointer; }
input[type="range"]:focus { outline: none; }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 99px; background: var(--surface-3); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--accent); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; }

/* modo edição: balança parado; ao arrastar pelo grip, acompanha o dedo */
.editing-cards .edit-card { position: relative; overflow: visible !important; content-visibility: visible !important; box-shadow: 0 0 0 1.5px var(--accent-border), var(--shadow-sm); }
.editing-cards .edit-card:not(.dragging) { animation: jiggle .3s ease-in-out infinite alternate; }
.editing-cards .edit-card.dragging { animation: none; z-index: 90; box-shadow: var(--shadow-lg); opacity: .97; will-change: transform; cursor: grabbing; }
.edit-grip { position: absolute; top: 6px; left: 6px; z-index: 4; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--txt2); cursor: grab; touch-action: none; }
.edit-grip .ic { width: 16px; height: 16px; }
.ec-remove { position: absolute; top: -9px; right: -9px; z-index: 5; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; border: 2px solid var(--bg); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); padding: 0; }
.ec-remove .ic { width: 13px; height: 13px; }

/* ============ v17: day-nav (data centralizada, "Hoje" embaixo no meio, setas fixas) ============ */
/* achatado: a data fica centralizada verticalmente, card o mais baixo possível */
.card:has(.daynav) { padding: 2px 8px; min-height: 0; }
.daynav { display: flex; align-items: center; gap: 4px; min-height: 34px; }
.daynav .dn-arrow { flex: 0 0 auto; background: none; border: none; color: var(--txt3); font-size: 1.45rem; line-height: 1; cursor: pointer; padding: 2px 8px; }
.daynav .dn-center { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; }
.daynav .dn-picker { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.08; cursor: pointer; }
.daynav .dn-picker .dn-wd { font-size: .9rem; font-weight: 700; letter-spacing: -.01em; text-transform: capitalize; }
.daynav .dn-picker .dn-full { font-size: .62rem; color: var(--txt3); }
.daynav .dn-picker input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none; padding: 0; min-height: 0; cursor: pointer; }
.daynav .dn-today { background: none; border: none; color: var(--accent); font-size: .58rem; font-weight: 600; cursor: pointer; padding: 0 6px; line-height: 1.1; }
.daynav .dn-today-ph { height: 0; }
.subview-ghost { background: var(--bg); }

/* ============ v18: grade de esportes uniforme (5 colunas, compacta no celular) ============ */
.sport-grid { grid-template-columns: repeat(5, 1fr); gap: 5px; }
.sport-btn { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-height: 52px; padding: 6px 2px; font-size: .5rem; line-height: 1.1; word-break: break-word; hyphens: auto; }
.sport-btn .se { font-size: 1.02rem; line-height: 1; }
.sport-btn .se .ic { width: 18px; height: 18px; }

/* plano semanal de treino (estilo mockup): hero fora do card + tiles quadrados no card */
.wk-hero { grid-column: span 2; padding: 2px 2px 2px; }
@media (min-width: 760px) { .wk-hero { grid-column: span 4; } }
.wk-hero .wk-eyebrow { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt3); }
.wk-hero .wk-title-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.wk-hero .wk-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.wk-hero .wk-badge { font-size: .56rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); background: var(--accent-weak); color: var(--accent); }
.wk-hero .wk-badge.recovery { background: rgba(180,160,80,.16); color: #c9b25e; }
.wk-hero .wk-sub { font-size: .82rem; color: var(--txt2); margin-top: 5px; line-height: 1.4; }
.wk-hero .wk-note { margin-top: 12px; border-left: 3px solid #c9b25e; background: rgba(180,160,80,.08); color: #d8c479; font-size: .78rem; line-height: 1.45; padding: 9px 12px; border-radius: 0 var(--r-ctrl) var(--r-ctrl) 0; }
.wk-hero .wk-note.ok { border-left-color: var(--accent2); background: var(--accent-weak); color: var(--accent); }
/* checklist de exercícios do treino de hoje */
.ex-checklist { display: flex; flex-direction: column; gap: 8px; }
.ex-check-row { display: flex; align-items: center; gap: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-ctrl); padding: 11px 13px; cursor: pointer; }
.ex-check-row .ex-check { width: 22px; height: 22px; min-width: 22px; border-radius: 7px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: #fff; }
.ex-check-row .ex-check .ic { width: 13px; height: 13px; }
.ex-check-row.done .ex-check { background: var(--green); border-color: var(--green); }
.ex-check-row.done .ex-check-name { color: var(--txt2); }
.ex-check-row .ex-check-name { font-size: .88rem; font-weight: 600; letter-spacing: -.01em; }
.ex-check-row .ex-check-target { font-size: .76rem; color: var(--txt2); font-weight: 600; }
.ex-check-row .ex-check-kg { font-size: .76rem; color: var(--txt3); width: 52px; text-align: right; }
.wkplan-card .wk-week-row { display: flex; align-items: center; justify-content: space-between; }
.wkplan-card .wk-week-l { font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txt3); }
.wkplan-card .wk-week-v { font-size: .82rem; font-weight: 800; letter-spacing: -.02em; }
.wk-days { display: flex; gap: 7px; justify-content: space-between; }
.wk-day { flex: 1; min-width: 0; background: none; border: none; padding: 0; cursor: pointer; display: flex; font-family: inherit; }
.wk-day .wk-dot { width: 100%; max-width: 48px; aspect-ratio: 1; margin: 0 auto; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--bg2); border: 1.5px solid var(--border); }
.wk-day .wk-dl { font-size: .82rem; font-weight: 800; letter-spacing: -.02em; color: var(--txt3); line-height: 1; }
.wk-day .wk-pt { width: 5px; height: 5px; border-radius: 50%; background: var(--txt3); opacity: 0; }
.wk-day.on .wk-dot { background: var(--accent-weak); border-color: var(--accent-border); }
.wk-day.on .wk-dl { color: var(--accent); }
.wk-day.on .wk-pt { background: var(--accent); opacity: 1; }
.wk-day.done .wk-dot { background: var(--accent); border-color: var(--accent); }
.wk-day.done .wk-dl { color: #fff; }
.wk-day.done .wk-pt { background: #fff; opacity: 1; }
.wk-day.today .wk-dot { border-color: #c9b25e; border-width: 2px; background: var(--bg2); }
.wk-day.today .wk-dl { color: #c9b25e; }
.wk-day.today .wk-pt { background: #c9b25e; opacity: 1; }
.drink-result.sel { border-color: var(--accent); background: var(--accent-weak); }

/* campo de busca com ícone (lupa) dentro da barra */
.search-inline { display: inline-flex; align-items: center; gap: 8px; width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-ctrl); padding: 0 12px; }
.search-inline .si-ico { display: flex; color: var(--txt3); flex: 0 0 auto; }
.search-inline .si-ico .ic { width: 16px; height: 16px; }
.search-inline input { flex: 1; min-width: 0; border: none !important; background: none; box-shadow: none !important; padding: 10px 0; }
.search-inline:focus-within { border-color: var(--accent); }

/* macros (Comida): 5 cards iguais cabem na largura do celular; nome compacto, sem sobra de altura */
.macro-ring-row { gap: 5px; flex-wrap: nowrap; }
.macro-chip { padding: 7px 3px; }
.macro-chip .mv { font-size: .9rem; }
.macro-chip .mv .tiny { font-size: .55rem; }
.macro-chip .ml { font-size: .5rem; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* lista de ciclos de sono: sem contorno (variação plana de .dw-window) */
.dw-window.dw-flat { background: none; border: none; border-radius: 0; padding: 5px 2px; color: var(--txt); margin-bottom: 0; border-bottom: 1px solid var(--hairline); }
.dw-window.dw-flat:last-child { border-bottom: none; }
.dw-window.dw-flat span:last-child { color: var(--txt3); font-weight: 600; }

/* metric card no estilo do bundle: rótulo + mini-ícone, valor grande, barra fina */
.metric-card { display: flex; flex-direction: column; }
.metric-card .mc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.metric-card .mc-head h3 { margin: 0; }
.metric-card .mc-head .mc-ico { display: inline-flex; align-items: center; }
.metric-card .mc-head .mc-ico .ic { width: 13px; height: 13px; }
.metric-card .big { line-height: 1.05; }
.metric-card .pbar { margin-top: 9px; }
.metric-card .sub { font-size: .57rem; color: var(--txt3); margin-top: 6px; }

/* ============================================================
   REDESIGN: section headers, sleep highlights, ex-accordion,
   weight card, reading, exam-photo card, coach chat
   ============================================================ */

/* heros/seções fora de card precisam ocupar a linha toda (utilitário .span* é escopo de .card) */
.sec-head, .stock-list, .exam-photo-card, .sleep-block, .read-stats, .read-actions, .rd-now-list, #bm-photo-out, #rd-ai-out,
.acct-list, .cf-pills, .cf-list, .bento > .meal-line, .tl-filterbar, .tl-feed, .sports-hero { grid-column: 1 / -1; }
/* esportes: seta de recolher no título (mesma cor do título) */
.sports-collapse { display: inline-flex; align-items: center; color: inherit; cursor: pointer; transition: transform .2s; transform: rotate(90deg); }
.sports-collapse.open { transform: rotate(270deg); }
.sports-collapse .ic { width: 17px; height: 17px; }
/* atividades: hero de calorias gastas */
.sports-hero { padding: 2px; }
.sports-hero .sh-eyebrow { font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--txt3); }
.sports-hero .sh-main { display: flex; align-items: baseline; gap: 7px; margin-top: 6px; }
.sports-hero .sh-kcal { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--orange); }
.sports-hero .sh-unit { font-size: .9rem; color: var(--txt3); font-weight: 600; }
.sports-hero .sh-sub { font-size: .72rem; color: var(--txt3); margin-top: 5px; }
#bm-photo-out:empty, #rd-ai-out:empty { display: none; }
/* timeline: marco em destaque */
.tl-row-event .tl-title { font-weight: 800; }
.tl-row-event .tl-dot { background: var(--accent-weak); color: var(--accent2); }
/* timeline: chips de filtro retangulares que preenchem a largura */
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tl-chip { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; padding: 9px 13px; border-radius: var(--r-ctrl); background: var(--card); border: 1px solid var(--border); color: var(--txt2); font-family: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; }
.tl-chip .ic { width: 14px; height: 14px; }
.tl-chip.on { background: var(--accent-weak); border-color: var(--accent-border); color: var(--accent2); }
@media (hover: hover) { .tl-chip:hover { border-color: var(--txt3); } }

/* ----- Finanças: Contas ----- */
.acct-list { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.acct-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 15px; background: none; border: none; border-top: 1px solid var(--hairline); cursor: pointer; font-family: inherit; color: var(--txt); text-align: left; }
.acct-row:first-child { border-top: none; }
.acct-badge { width: 38px; height: 38px; min-width: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; }
.acct-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.acct-name { font-size: .9rem; font-weight: 700; letter-spacing: -.01em; }
.acct-type { font-size: .68rem; color: var(--txt3); margin-top: 1px; }
.acct-right { display: flex; flex-direction: column; align-items: flex-end; }
.acct-val { font-size: .92rem; font-weight: 800; }
.acct-pct { font-size: .68rem; color: var(--txt3); margin-top: 1px; }
@media (hover: hover) { .acct-row:hover { background: var(--bg2); } }

/* ----- Finanças: Fluxo ----- */
.cf-pills { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cf-pill { display: inline-flex; align-items: center; padding: 8px 13px; border-radius: var(--r-ctrl); font-size: .82rem; font-weight: 800; background: var(--card); border: 1px solid var(--border); }
.cf-pill.in { color: var(--green); }
.cf-pill.out { color: var(--red); }
.cf-pill.bal { color: var(--txt); margin-left: auto; }
.cf-list { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.cf-row { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-top: 1px solid var(--hairline); }
.cf-row:first-child { border-top: none; }
.cf-ico { width: 34px; height: 34px; min-width: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--bg2); color: var(--txt2); }
.cf-ico.in { background: var(--success-weak); color: var(--green); }
.cf-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cf-desc { font-size: .88rem; font-weight: 700; letter-spacing: -.01em; }
.cf-sub { font-size: .68rem; color: var(--txt3); margin-top: 1px; }
.cf-amt { font-size: .9rem; font-weight: 800; white-space: nowrap; }
.cf-amt.in { color: var(--green); }
.cf-amt.out { color: var(--txt); }
.cf-row .x-btn { margin-left: 2px; }

/* ----- Fitness: carga de treino + grupos musculares ----- */
.load-head { display: flex; align-items: baseline; justify-content: space-between; }
.load-l { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt3); }
.load-v { font-size: .9rem; font-weight: 800; }
.load-bar { height: 6px; border-radius: 99px; background: var(--bg2); overflow: hidden; margin-top: 8px; }
.load-bar i { display: block; height: 100%; border-radius: 99px; }
.mg-title { font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--txt3); margin: 18px 0 10px; }
.mg-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.mg-row.off { opacity: .5; }
.mg-dot { width: 8px; height: 8px; min-width: 8px; border-radius: 50%; }
.mg-name { font-size: .76rem; font-weight: 600; width: 112px; min-width: 112px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--bg2); overflow: hidden; }
.mg-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.mg-sets { font-size: .7rem; color: var(--txt3); width: 66px; text-align: right; white-space: nowrap; }
.ex-acc-body .coach-tip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----- Fitness: todas as sessões ----- */
.sess-list { display: flex; flex-direction: column; }
.sess-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 2px; background: none; border: none; border-top: 1px solid var(--hairline); cursor: pointer; font-family: inherit; color: var(--txt); text-align: left; }
.sess-row:first-child { border-top: none; }
.sess-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sess-name { font-size: .88rem; font-weight: 700; letter-spacing: -.01em; }
.sess-sub { font-size: .68rem; color: var(--txt3); margin-top: 2px; }
.sess-chev { display: flex; color: var(--txt3); }
.sess-chev .ic { width: 16px; height: 16px; }
@media (hover: hover) { .sess-row:hover .sess-name { color: var(--accent); } }

/* ----- Hábitos: grade de hoje ----- */
.hg-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.hg-title { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt2); }
.hg-count { font-size: .82rem; font-weight: 800; color: var(--txt3); }
.habit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.habit-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 15px 10px; border-radius: var(--r-ctrl); background: var(--bg2); border: 1px solid var(--border); cursor: pointer; font-family: inherit; color: var(--txt2); text-align: center; }
.habit-tile .ht-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--txt3); }
.habit-tile .ht-name { font-size: .76rem; font-weight: 600; line-height: 1.2; }
.habit-tile.done { border-color: var(--green); color: var(--txt); background: var(--success-weak); }
.habit-tile.done .ht-dot { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); }
@media (hover: hover) { .habit-tile:hover { border-color: var(--txt3); } }
/* hábito em formação como card individual */
.habit-card { display: flex; align-items: center; gap: 12px; }

/* ----- cabeçalho de seção fora de card (Estoque, Leitura) ----- */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 6px 2px 2px; }
.sec-head .sec-title { font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--txt2); }
.sec-head .sec-count { font-size: .72rem; color: var(--txt3); }
.sec-head .h3-action { margin-left: auto; }
.stock-list { display: flex; flex-direction: column; gap: 10px; }

/* ----- Exames: card "ler exame por foto (IA)" ----- */
.exam-photo-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 13px 14px; cursor: pointer; font-family: inherit; color: var(--txt); }
.exam-photo-card .epc-ico { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent-weak); color: var(--accent2); }
.exam-photo-card .epc-ico .ic { width: 18px; height: 18px; }
.exam-photo-card .epc-txt { display: flex; flex-direction: column; min-width: 0; }
.exam-photo-card .epc-title { font-size: .9rem; font-weight: 700; letter-spacing: -.01em; }
.exam-photo-card .epc-sub { font-size: .68rem; color: var(--txt3); margin-top: 2px; }
.exam-photo-card .epc-chev { margin-left: auto; color: var(--txt3); display: flex; }
.exam-photo-card .epc-chev .ic { width: 18px; height: 18px; }
@media (hover: hover) { .exam-photo-card:hover { border-color: var(--txt3); } }

/* ----- Sono: highlights (hero sem card · stats em cards · trend em card próprio) ----- */
.sleep-block { display: flex; flex-direction: column; gap: 12px; }
.sleep-hero { padding: 2px; }
.sleep-hero .shl-eyebrow { font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--txt3); }
.sleep-hero .shl-main { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.sleep-hero .shl-dur { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.sleep-hero .shl-goal { font-size: .82rem; color: var(--txt3); }
.sleep-hero .shl-prog { height: 5px; border-radius: 99px; background: var(--bg2); overflow: hidden; margin-top: 12px; }
.sleep-hero .shl-prog i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.sleep-hero .shl-cap { font-size: .72rem; color: var(--txt3); margin-top: 8px; }
.sleep-hero .shl-sec { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt3); margin: 16px 0 8px; }
.sleep-hero .stage-bar { height: 12px; }
.sleep-hero .shl-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.sleep-hero .shl-legend span { font-size: .68rem; color: var(--txt2); display: inline-flex; align-items: center; gap: 5px; }
.sleep-hero .shl-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.sleep-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sleep-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-ctrl); padding: 13px 6px; text-align: center; }
.sleep-stat .ss-v { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.sleep-stat .ss-l { font-size: .55rem; color: var(--txt3); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.sleep-trend-card .shl-trend { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.sleep-trend-card .shl-trend > span:first-child { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt3); }
.shl-trend .shl-avg { font-size: .72rem; color: var(--txt3); letter-spacing: 0; text-transform: none; font-weight: 600; }
.sleep-bars { display: flex; align-items: flex-end; gap: 7px; height: 96px; }
.sleep-bars .slp-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.sleep-bars .slp-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.sleep-bars .slp-bar { width: 70%; max-width: 22px; border-radius: 5px; overflow: hidden; display: flex; flex-direction: column-reverse; }
.sleep-bars .slp-bar i { display: block; width: 100%; }
.sleep-bars .slp-x { font-size: .56rem; color: var(--txt3); margin-top: 6px; white-space: nowrap; }
.sleep-bars .slp-x.on { color: var(--accent2); font-weight: 700; }

/* ----- Academia: exercícios em acordeão (plano + log unificados) ----- */
.ex-acc-list { display: flex; flex-direction: column; gap: 8px; }
.ex-acc { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-ctrl); overflow: hidden; }
.ex-acc-head { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 12px 13px; cursor: pointer; font-family: inherit; color: var(--txt); text-align: left; }
.ex-acc-head .ex-acc-check { width: 18px; height: 18px; min-width: 18px; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; color: #fff; }
.ex-acc-head .ex-acc-check .ic { width: 12px; height: 12px; }
.ex-acc.done .ex-acc-head .ex-acc-check { background: var(--green); border-color: var(--green); }
.ex-acc-head .ex-acc-name { font-size: .88rem; font-weight: 700; letter-spacing: -.01em; min-width: 0; }
.ex-acc-head .ex-acc-target { font-size: .68rem; color: var(--txt3); }
.ex-acc-head .ex-acc-kg { font-size: .72rem; font-weight: 700; color: var(--txt2); min-width: 48px; text-align: right; }
.ex-acc-head .ex-acc-chev { display: flex; color: var(--txt3); transition: transform .2s; transform: rotate(90deg); }
.ex-acc-head .ex-acc-chev .ic { width: 16px; height: 16px; }
.ex-acc.open .ex-acc-head .ex-acc-chev { transform: rotate(270deg); }
.ex-acc-body { padding: 2px 13px 13px; }
.ex-acc-head .ex-evo-ico { display: flex; align-items: center; color: var(--accent); padding: 0 2px; }
.ex-acc-head .ex-evo-ico .ic { width: 15px; height: 15px; }
.ex-acc-body .set-row .ex-addset { margin-left: auto; font-size: .72rem; white-space: nowrap; }
/* editor de treino (split): cabeçalho de colunas + valores centrados */
.spm-head { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; font-size: .56rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt3); }
.spm-head .grow { flex: 1; }
.spm-col { width: 54px; min-width: 54px; text-align: center; }
.spm-ex { margin-top: 6px; }
/* arrastar para reordenar treinos */
.sp-grip { display: flex; color: var(--txt3); cursor: grab; }
.sp-grip .ic { width: 16px; height: 16px; }
.sp-row.dragging { opacity: .45; }

/* ----- Medidas: IMC · FFMI · Gordura — 3 cards iguais, alinhados, clicáveis ----- */
.measure-saved { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: .68rem; color: var(--green); margin: 2px; }
.measure-saved .ic { width: 13px; height: 13px; }
.measure-top { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: stretch; }
.measure-top .mz-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-height: 0; padding: 14px 13px; cursor: pointer; font-family: inherit; text-align: left; }
.measure-top .mz-card .mz-h { font-size: .62rem; font-weight: 700; letter-spacing: .04em; color: var(--txt2); }
.measure-top .mz-card .mz-v { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-top: 6px; }
.measure-top .mz-card .mz-s { font-size: .6rem; color: var(--txt3); margin-top: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .measure-top .mz-card:hover { border-color: var(--txt3); } }

/* ----- Progresso: peso (hero sem card · tendência em card) ----- */
.weight-block { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
.weight-hero { padding: 2px; }
.weight-hero .wc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.weight-hero .wc-eyebrow { font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--txt3); }
.weight-hero .wc-main { display: flex; align-items: baseline; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.weight-hero .wc-kg { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.weight-hero .wc-unit { font-size: .9rem; color: var(--txt3); font-weight: 600; }
.weight-hero .wc-delta { font-size: .8rem; font-weight: 700; margin-left: 6px; }
.weight-hero .wc-goal { font-size: .74rem; color: var(--txt3); margin-top: 10px; }
.weight-hero .wc-goal.set { color: var(--accent2); font-weight: 600; }
.weight-hero .wc-prog { height: 5px; border-radius: 99px; background: var(--bg2); overflow: hidden; margin-top: 8px; }
.weight-hero .wc-prog i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--green), var(--cyan)); }
.weight-trend-card .wc-trend-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.weight-trend-card .wc-trend-head span:first-child { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt3); }
.weight-trend-card .wc-range { font-size: .72rem; color: var(--txt3); }

/* ----- Leitura: stats topo, ações, lendo agora, fila, concluídos ----- */
.read-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.read-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-ctrl); padding: 14px 6px; text-align: center; }
.read-stat .rs-v { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.read-stat .rs-v .rs-u { font-size: .82rem; color: var(--txt3); font-weight: 600; margin-left: 2px; }
.read-stat .rs-l { font-size: .58rem; color: var(--txt3); text-transform: uppercase; letter-spacing: .06em; margin-top: 5px; }
.read-actions { display: flex; gap: 8px; }
.rd-now { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 13px; margin-bottom: 10px; cursor: pointer; }
.rd-now .rd-now-body { min-width: 0; }
.rd-now .rd-now-title { font-size: .92rem; font-weight: 700; letter-spacing: -.01em; }
.rd-now .rd-now-author { font-size: .72rem; color: var(--txt3); margin-top: 2px; }
.rd-now .rd-now-bar { height: 5px; border-radius: 99px; background: var(--bg2); overflow: hidden; margin-top: 10px; }
.rd-now .rd-now-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--orange), #f6c976); }
.rd-now .rd-now-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: .7rem; color: var(--txt3); }
.rd-now .rd-now-meta .rd-days { color: var(--orange); font-weight: 700; }
.rd-q-card, .rd-done-card { padding: 4px 14px; }
.rd-q-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; cursor: pointer; border-top: 1px solid var(--hairline); }
.rd-q-card .rd-q-row:first-child, .rd-done-card .rd-done-row:first-child { border-top: none; }
.rd-q-row .rd-q-title { font-size: .85rem; font-weight: 600; letter-spacing: -.01em; }
.rd-q-row .rd-q-sub { font-size: .7rem; color: var(--txt3); margin-top: 1px; }
.rd-q-row .rd-cat { font-size: .56rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.book-cover.sm { width: 34px; height: 46px; min-width: 34px; font-size: .9rem; border-radius: 5px; }
.rd-done-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; cursor: pointer; border-top: 1px solid var(--hairline); }
.rd-done-row .rd-done-title { font-size: .82rem; font-weight: 600; letter-spacing: -.01em; }
.rd-done-row .rd-done-sub { font-size: .68rem; color: var(--txt3); margin-top: 1px; }
.rd-done-row .rd-stars { color: var(--yellow, var(--orange)); font-size: .72rem; letter-spacing: 1px; white-space: nowrap; }
.rd-done-row .rd-done-date { font-size: .66rem; color: var(--txt3); white-space: nowrap; min-width: 54px; text-align: right; }

/* ----- Coach IA: FAB + chat tela cheia ----- */
#coach-fab {
  position: fixed; right: 16px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px + 48px + 12px);
  z-index: 90; width: 44px; height: 44px; border-radius: var(--r-pill);
  background: linear-gradient(140deg, var(--accent2), var(--accent)); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); transition: transform .12s, filter .15s;
}
#coach-fab:active { transform: scale(.92); }
@media (hover: hover) { #coach-fab:hover { filter: brightness(1.08); } }

#coach-panel {
  position: fixed; inset: 0; z-index: 200; background: var(--bg, #0a0a0f);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
  animation: coachIn .22s ease;
}
@keyframes coachIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.coach-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.coach-head .coach-x { width: 34px; height: 34px; border-radius: 10px; border: none; background: var(--bg2); color: var(--txt2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.coach-head .coach-x .ic { width: 18px; height: 18px; }
.coach-head .coach-title { font-weight: 800; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 7px; }
.coach-head .coach-logo { color: var(--accent2); display: inline-flex; }
/* scores selecionáveis (cards retangulares arredondados) */
.coach-scores { display: flex; gap: 8px; overflow-x: auto; padding: 12px 14px; border-bottom: 1px solid var(--border); -webkit-overflow-scrolling: touch; }
.coach-scores::-webkit-scrollbar { display: none; }
.coach-score { flex: 1 0 auto; min-width: 64px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-ctrl); padding: 8px 10px; cursor: pointer; font-family: inherit; }
.coach-score .cs-v { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.coach-score .cs-l { font-size: .6rem; color: var(--txt3); }
.coach-score.on { border-color: var(--accent); background: var(--accent-weak); }
.coach-score.on .cs-l { color: var(--accent2); }
/* sugestões de perguntas (chips retangulares) */
.coach-suggest { padding: 0 14px 10px; }
.coach-suggest-l { font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txt3); margin: 6px 2px 8px; }
.coach-suggest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.coach-sugg { flex: 1 1 auto; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-ctrl); padding: 9px 12px; font-family: inherit; font-size: .76rem; font-weight: 500; color: var(--txt2); cursor: pointer; }
@media (hover: hover) { .coach-sugg:hover { border-color: var(--txt3); } }
.coach-thread { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 14px; }
.coach-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.coach-msg.user { flex-direction: row-reverse; }
.coach-msg .coach-msg-logo { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; background: linear-gradient(140deg, var(--accent2), var(--accent)); color: #fff; display: flex; align-items: center; justify-content: center; }
.coach-bubble { max-width: 80%; padding: 11px 13px; border-radius: 16px; font-size: .85rem; line-height: 1.5; }
.coach-msg.assistant .coach-bubble { background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.coach-msg.user .coach-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.coach-bubble.sum { background: var(--bg2); }
.coach-sum-title { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent2); margin-bottom: 7px; }
.coach-sum-tips { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.coach-sum-tips .cst-row { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; }
.coach-sum-tips .cst-dot { width: 6px; height: 6px; min-width: 6px; border-radius: 50%; background: var(--orange); margin-top: 7px; }
.coach-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.coach-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--txt3); animation: coachBlink 1.2s infinite; }
.coach-typing i:nth-child(2) { animation-delay: .2s; }
.coach-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes coachBlink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.coach-bar { display: flex; align-items: flex-end; gap: 9px; padding: 10px 14px; border-top: 1px solid var(--border); }
.coach-input-wrap { flex: 1; position: relative; display: flex; align-items: center; }
#coach-input { flex: 1; resize: none; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 8px 64px 8px 14px; color: var(--txt); font-family: inherit; font-size: .88rem; line-height: 1.35; max-height: 90px; }
.coach-io { position: absolute; right: 8px; bottom: 5px; display: flex; gap: 2px; }
.coach-io-btn { width: 28px; height: 28px; border: none; background: none; color: var(--txt3); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.coach-io-btn .ic { width: 17px; height: 17px; }
@media (hover: hover) { .coach-io-btn:hover { color: var(--txt2); } }
.coach-send { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: none; background: var(--bg2); color: var(--txt2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.coach-send.is-send { background: linear-gradient(140deg, var(--accent2), var(--accent)); color: #fff; }
.coach-send .ic { width: 18px; height: 18px; }
/* botão "Fale com seu Coach" na My Coach */
.coach-cta { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px; cursor: pointer; font-family: inherit; color: var(--txt); }
.coach-cta .coach-cta-logo { width: 38px; height: 38px; min-width: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--accent2), var(--accent)); color: #fff; }
.coach-cta .grow { display: flex; flex-direction: column; min-width: 0; }
.coach-cta .coach-cta-t { font-size: .9rem; font-weight: 700; letter-spacing: -.01em; }
.coach-cta .coach-cta-s { font-size: .68rem; color: var(--txt3); margin-top: 2px; }
.coach-cta .coach-cta-chev { margin-left: auto; color: var(--txt3); display: flex; }
.coach-cta .coach-cta-chev .ic { width: 18px; height: 18px; }
@media (hover: hover) { .coach-cta:hover { border-color: var(--txt3); } }
body.coach-open #cmdk-fab, body.coach-open #coach-fab { display: none; }