:root {
  --bg: #FBF7F1;
  --surface: #FFFFFF;
  --ink: #2F2A25;
  --muted: #8C8379;
  --line: #EFE6DA;
  --sun: #F4A259;
  --sun-deep: #E8805F;
  --sun-soft: #FDEBDB;
  --sage: #8FB996;
  --sage-soft: #E5F0E6;
  --sky: #8DC3D4;
  --sky-soft: #E3F1F5;
  --lav: #B7A9D6;
  --lav-soft: #EEE9F7;
  --shadow: 0 6px 24px rgba(120, 90, 60, .08);
  --r: 22px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  min-height: 100dvh;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }

#app {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px calc(32px + env(safe-area-inset-bottom));
}

/* ---------- topo ---------- */
.hero {
  margin: 0 -16px 20px;
  padding: calc(28px + env(safe-area-inset-top)) 20px 26px;
  background: linear-gradient(180deg, #FCE3CC 0%, #FDEFE2 55%, var(--bg) 100%);
}
.hero small { color: var(--sun-deep); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.hero h1 { font-size: 30px; font-weight: 700; margin-top: 4px; letter-spacing: -.01em; }
.hero p { color: var(--muted); margin-top: 6px; }

.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: calc(14px + env(safe-area-inset-top)) 0 10px;
}
.topbar h1 { font-size: 22px; font-weight: 700; }
.back {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow);
  font-size: 20px;
}
.lead { color: var(--muted); margin: 2px 0 18px; line-height: 1.45; }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin: 22px 4px 10px; }

/* ---------- cartões ---------- */
.card {
  display: block; width: 100%; text-align: left;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 18px; margin-bottom: 12px;
}
.card h3 { font-size: 17px; font-weight: 650; }
.card p { color: var(--muted); font-size: 14px; margin-top: 4px; line-height: 1.4; }

.card-main {
  background: linear-gradient(135deg, #F7B267 0%, #F28C6B 100%);
  color: #fff; padding: 22px;
}
.card-main p { color: rgba(255,255,255,.9); }
.card-main .pill { background: rgba(255,255,255,.25); color: #fff; }
.card-main .cta { background: #fff; color: var(--sun-deep); }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid .card { margin: 0; }
.tile { min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; }
.tile .dot { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; }
.t-sky .dot { background: var(--sky-soft); color: #4F94A8; }
.t-sage .dot { background: var(--sage-soft); color: #5C8F65; }
.t-lav .dot { background: var(--lav-soft); color: #7D6BB0; }
.t-sun .dot { background: var(--sun-soft); color: var(--sun-deep); }

.pill {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--sun-soft); color: var(--sun-deep);
}
.pill.sage { background: var(--sage-soft); color: #4F7F57; }
.pill.sky { background: var(--sky-soft); color: #3F8297; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink); color: #fff; border-radius: 999px; padding: 14px 22px; font-weight: 650;
}
.cta.block { width: 100%; }
.cta.soft { background: var(--sun-soft); color: var(--sun-deep); }
.cta:active { transform: scale(.98); }

.steps { list-style: none; padding: 0; margin: 14px 0 0; }
.steps li { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: rgba(255,255,255,.95); border-top: 1px solid rgba(255,255,255,.2); }
.steps li:first-child { border-top: 0; }

.streak { display: flex; gap: 6px; margin-top: 14px; }
.streak span { flex: 1; height: 6px; border-radius: 3px; background: rgba(0,0,0,.07); }
.streak span.on { background: var(--sage); }

/* ---------- lista de desafios ---------- */
.day {
  display: flex; align-items: center; gap: 14px; padding: 12px;
}
.day img { width: 86px; height: 56px; object-fit: cover; border-radius: 14px; flex: none; }
.day .info { flex: 1; min-width: 0; }
.day.today { outline: 2px solid var(--sun); }
.extra-card { background: linear-gradient(135deg, var(--sage-soft), #F4F8EF); }

/* ---------- prévia ---------- */
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.clip { background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.clip video, .clip img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #eee; }
.clip div { padding: 8px 10px 10px; font-size: 13px; line-height: 1.3; }
.clip b { color: var(--sun-deep); margin-right: 4px; }
.sticky-cta {
  position: sticky; bottom: 0; padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(251,247,241,0), var(--bg) 35%);
  display: flex; gap: 10px;
}

/* ---------- respiração ---------- */
.breath-card { display: flex; gap: 14px; align-items: center; }
.breath-card .mini { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle, var(--sky) 0%, var(--sky-soft) 70%); flex: none; }
.breath-card .mini.lav { background: radial-gradient(circle, var(--lav) 0%, var(--lav-soft) 70%); }
.breath-card .mini.sun { background: radial-gradient(circle, var(--sun) 0%, var(--sun-soft) 70%); }
.breath-card .mini.num { display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; }
.breath-main { background: linear-gradient(135deg, #8DC3D4 0%, #6FA9C9 100%); }
.breath-main .cta { color: #3F7F97; }

.p-video.vertical { width: auto; height: min(46vh, 420px); aspect-ratio: 9/16; }
.p-video.vertical video { height: 100%; aspect-ratio: 9/16; }
/* modelos de respiração desenhados pelo app (sobre o vídeo de fundo) */
.p-video.guiado { width: min(100%, 34vh); aspect-ratio: 1; }
.p-video.guiado video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.guia { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.guia svg { position: absolute; width: 82%; aspect-ratio: 1; }
.guia rect { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.7); stroke-width: .8; }
.guia-ponto { fill: #fff; filter: drop-shadow(0 0 3px #fff); }
.guia-orb {
  position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 70%);
  border: 2px solid rgba(255,255,255,.85); box-shadow: 0 0 30px rgba(255,255,255,.35);
  transform: scale(.45); transition: transform .1s linear;
}
.guia-texto { position: relative; display: flex; flex-direction: column; align-items: center; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.guia-fase { font-size: 22px; font-weight: 600; }
.guia-seg { font-size: 46px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.opcoes { display: flex; justify-content: center; gap: 14px; margin-bottom: 10px; }
.opcao {
  width: 56px; height: 56px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; line-height: 1; color: #3F8297; border: 2px solid transparent;
}
.opcao small { font-size: 11px; font-weight: 600; margin-top: 2px; opacity: .8; }
.opcao.ultima { border-color: var(--sky); }
.opcao.on { background: #3F8297; color: #fff; }
.guia-ciclo { position: absolute; bottom: 14px; font-size: 13px; opacity: .85; text-shadow: 0 1px 6px rgba(0,0,0,.5); }

.orb.calma { animation: respirar 10s ease-in-out infinite; }
@keyframes respirar { 0%, 100% { transform: scale(.55); } 50% { transform: scale(.95); } }

/* ---------- trabalho ---------- */
.task { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.task input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--sage); }
.task span { flex: 1; }
.task.done span { text-decoration: line-through; color: var(--muted); }
.task button { color: var(--muted); font-size: 18px; padding: 4px 8px; }
.add { display: flex; gap: 8px; margin-bottom: 12px; }
.add input {
  flex: 1; font: inherit; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface);
}
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; background: var(--sun-soft); color: var(--sun-deep); font-size: 18px; }
.stepper b { min-width: 46px; text-align: center; }

/* ---------- player (tela cheia) ---------- */
#overlay {
  position: fixed; inset: 0; z-index: 10; background: var(--bg);
  display: flex; flex-direction: column; overflow: auto;
  transition: background .6s;
}
#overlay[hidden] { display: none; }
#overlay.rest { background: #EEF5EC; }
#overlay.prep { background: #FDF1E5; }
#overlay.breath { background: linear-gradient(180deg, #E6F2F6, var(--bg)); }

.p-head {
  display: flex; align-items: center; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 8px; max-width: 560px; width: 100%; margin: 0 auto;
}
.p-head .ttl { flex: 1; min-width: 0; }
.p-head small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.p-head h2 { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; font-size: 17px; }
.icon-btn.off { opacity: .55; color: #D9534F; }

.progress { display: flex; gap: 4px; padding: 0 16px; max-width: 560px; width: 100%; margin: 0 auto; }
.progress span { flex: 1; height: 4px; border-radius: 2px; background: rgba(0,0,0,.08); }
.progress span.done { background: var(--sage); }
.progress span.now { background: var(--sun); }

.p-body { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 14px 16px 0; max-width: 560px; width: 100%; margin: 0 auto; }
.p-video { width: 100%; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); background: #ddd; position: relative; }
.p-video video { width: 100%; aspect-ratio: 16/9; display: block; object-fit: cover; }
.p-video .badge { position: absolute; left: 10px; top: 10px; }
.p-label { margin-top: 16px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sun-deep); }
.rest .p-label { color: #4F7F57; }
.p-name { font-size: 22px; font-weight: 700; text-align: center; margin-top: 4px; line-height: 1.25; }
.p-tip { color: var(--muted); text-align: center; font-size: 14.5px; line-height: 1.45; margin-top: 8px; max-width: 460px; }

.ring { position: relative; width: 168px; height: 168px; margin: 18px 0 6px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring .track { stroke: rgba(0,0,0,.07); }
.ring .bar { stroke: var(--sun); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.rest .ring .bar { stroke: var(--sage); }
.breath .ring .bar { stroke: var(--sky); }
.breath .ring { width: 120px; height: 120px; margin-top: 10px; }
.breath .ring .num { font-size: 30px; }
.breath .ring .num.small { font-size: 28px; }
.ring .num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 52px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ring .num.small { font-size: 40px; }
.ring.warn .num { color: var(--sun-deep); }

/* ---------- sprint ---------- */
.grid > .tile:last-child:nth-child(odd) { grid-column: span 2; min-height: 0; flex-direction: row; align-items: center; gap: 14px; justify-content: flex-start; }
.sprint-main { background: linear-gradient(135deg, #F7B267 0%, #EF6F6C 100%); }
.sprint-ex { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 0; }
.sprint-n { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--sun-soft); color: var(--sun-deep); }
.sprint-ex .trocas { color: var(--sun-deep); font-weight: 600; }
.sprint-pausa { margin: 6px 0 6px 30px; padding: 6px 0 6px 18px; border-left: 2px dashed var(--sage); color: #4F7F57; font-size: 13px; font-weight: 600; }
#overlay.treino { background: linear-gradient(180deg, #FDE6D6, var(--bg)); }
.treino-num { margin-top: 14px; font-size: 64px; font-weight: 800; line-height: 1; color: var(--sun); font-variant-numeric: tabular-nums; }
.treino-num small { font-size: 22px; color: var(--muted); font-weight: 600; }
.treino-nome { font-size: 34px; font-weight: 800; text-align: center; margin-top: 6px; line-height: 1.15; }
.side-flag.troca { color: var(--sun-deep); background: var(--sun-soft); }
[data-theme="escuro"] .sprint-main { background: linear-gradient(135deg, #FF6A1A 0%, #FF1F4B 100%); box-shadow: 0 8px 36px rgba(255,50,60,.45); }
[data-theme="escuro"] .sprint-pausa { color: var(--sage); }
[data-theme="escuro"] #overlay.treino { background: radial-gradient(circle at 50% 30%, #2A0B03, #000 70%); }
[data-theme="escuro"] .treino-num { text-shadow: 0 0 18px rgba(255,106,26,.8); }
[data-theme="escuro"] .treino-nome { color: #fff; text-shadow: 0 0 14px rgba(255,106,26,.5); }

/* pausa em tela cheia com uma palavra grande (ex.: HIDRATAÇÃO) */
#overlay.grande-tela { background: linear-gradient(180deg, #E3F3F9, var(--bg)); }
.grande {
  font-size: min(11vw, 64px); font-weight: 900; letter-spacing: .02em; text-transform: uppercase; text-align: center;
  color: #2B9CC0; line-height: 1; animation: pulsar 2.4s ease-in-out infinite;
}
.grande-tela .ring .bar { stroke: var(--sky); }
[data-theme="escuro"] #overlay.grande-tela { background: radial-gradient(circle at 50% 40%, #022433, #000 70%); }
[data-theme="escuro"] .grande { color: #00D4FF; text-shadow: 0 0 18px rgba(0,212,255,.8), 0 0 48px rgba(0,212,255,.45); }

.side-flag { margin-top: 6px; font-size: 13px; font-weight: 600; color: #3F8297; background: var(--sky-soft); padding: 5px 12px; border-radius: 999px; }

.checklist { width: 100%; margin-top: 16px; }
.checklist label { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border-radius: 14px; margin-bottom: 8px; box-shadow: var(--shadow); }
.checklist input { width: 22px; height: 22px; accent-color: var(--sage); }

/* respiração animada */
.orb-wrap { width: 260px; height: 260px; display: grid; place-items: center; margin: 22px 0 4px; position: relative; }
.orb {
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #CFE8F0 0%, var(--sky) 60%, #6FAFC4 100%);
  box-shadow: 0 0 60px rgba(141,195,212,.55);
  transform: scale(.5); transition-property: transform; transition-timing-function: ease-in-out;
}
.orb-text { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #fff; font-weight: 700; font-size: 24px; text-shadow: 0 1px 8px rgba(40,90,110,.35); }
.orb-text small { display: block; font-size: 15px; font-weight: 600; opacity: .9; }

.p-controls {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  padding: 18px 16px calc(22px + env(safe-area-inset-bottom));
}
.ctrl { width: 54px; height: 54px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; font-size: 20px; }
.ctrl.main { width: 74px; height: 74px; background: var(--ink); color: #fff; font-size: 26px; }

.done-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 10px; }
.done-screen .sun { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(180deg, #F7B267, #F28C6B); box-shadow: 0 0 80px rgba(247,178,103,.6); margin-bottom: 14px; }
.done-screen h2 { font-size: 26px; }
.done-screen p { color: var(--muted); }
.choices { display: grid; gap: 10px; width: 100%; max-width: 360px; margin-top: 14px; }

/* tela final da rotina: Parabéns! */
#overlay.parabens-tela { background: radial-gradient(circle at 50% 35%, #FFE3C7 0%, var(--bg) 70%); overflow: hidden; }
.parabens { position: relative; z-index: 1; }
.parabens small { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sun-deep); }
.palmas { display: flex; gap: 10px; font-size: 76px; line-height: 1; margin: 18px 0 6px; }
.palmas span { display: inline-block; animation: palma .9s ease-in-out infinite; }
.palmas span:last-child { animation-delay: .45s; }
@keyframes palma { 0%, 100% { transform: scale(1) rotate(-6deg); } 50% { transform: scale(1.18) rotate(6deg); } }
.parabens h2 { font-size: min(16vw, 72px); font-weight: 900; letter-spacing: -.02em; line-height: 1; color: var(--sun);
  animation: surgir .7s cubic-bezier(.2,.8,.2,1) both .1s; opacity: 0; transform: scale(.8); }
.parabens p { font-size: 17px; max-width: 320px; margin-top: 4px; color: var(--ink); opacity: .8; }
.sequencia { margin-top: 8px; padding: 8px 16px; border-radius: 999px; background: var(--sun-soft); color: var(--sun-deep); font-weight: 700; }
.confete { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confete i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; opacity: .9; animation: cair 3.2s linear infinite; }
@keyframes cair { to { transform: translateY(110vh) rotate(540deg); } }
[data-theme="escuro"] #overlay.parabens-tela { background: radial-gradient(circle at 50% 35%, #3A1405 0%, #000 70%); }
[data-theme="escuro"] .parabens h2 { color: #FF6A1A; text-shadow: 0 0 22px rgba(255,106,26,.9), 0 0 60px rgba(255,106,26,.5); }
[data-theme="escuro"] .parabens small { color: #FFD23F; text-shadow: 0 0 10px rgba(255,210,63,.7); }

/* tela de abertura: Respira / Agradece / Hidrata */
#splash {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7vh;
  background: #000;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: opacity .5s ease;
}
#splash.saindo { opacity: 0; pointer-events: none; }
#splash[hidden] { display: none; }
#splash .w {
  font-size: min(17vw, 96px); font-weight: 800; letter-spacing: -.02em; line-height: 1;
  opacity: 0; transform: translateY(24px) scale(.9);
  animation: surgir .9s cubic-bezier(.2,.8,.2,1) forwards, pulsar 2.4s ease-in-out infinite;
}
#splash .w { font-size: min(19vw, 110px); font-weight: 900; }
/* as três pulsam juntas, no mesmo ritmo (atrasos múltiplos de 2.4s) */
#splash .w1 { color: #00D4FF; text-shadow: 0 0 18px rgba(0,212,255,.8), 0 0 48px rgba(0,212,255,.45); animation-delay: .3s, 1.2s; }
#splash .w2 { color: #FF6A1A; text-shadow: 0 0 18px rgba(255,106,26,.8), 0 0 48px rgba(255,106,26,.45); animation-delay: 1.5s, 3.6s; }
#splash .w3 { color: #2CFF6E; text-shadow: 0 0 18px rgba(44,255,110,.8), 0 0 48px rgba(44,255,110,.45); animation-delay: 2.7s, 3.6s; }
#splash small {
  position: absolute; bottom: calc(36px + env(safe-area-inset-bottom));
  color: #555; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; animation: surgir .8s ease forwards 4s;
}
@keyframes surgir { to { opacity: 1; transform: none; } }
@keyframes pulsar {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ---------- configurações ---------- */
.hero { position: relative; }
.hero-acoes { position: absolute; right: 16px; top: calc(20px + env(safe-area-inset-top)); display: flex; gap: 8px; }
.hero-acoes .icon-btn { color: var(--muted); }
.ajuste .segmento { display: flex; gap: 6px; margin-top: 14px; padding: 4px; border-radius: 14px; background: var(--bg); }
.ajuste .segmento button { flex: 1; padding: 10px; border-radius: 11px; font-weight: 600; color: var(--muted); }
.ajuste .segmento button.on { background: var(--sun); color: #fff; box-shadow: var(--shadow); }

/* ==========================================================================
   TEMA DARK: fundo escuro e cores neon, na linha da tela Respira / Agradece / Hidrata
   ========================================================================== */
:root[data-theme="escuro"] {
  --bg: #07070B;
  --surface: #13131B;
  --ink: #F4F4F8;
  --muted: #9C9CB2;
  --line: #262633;
  --sun: #FF6A1A;
  --sun-deep: #FF8A3D;
  --sun-soft: rgba(255, 106, 26, .16);
  --sage: #2CFF6E;
  --sage-soft: rgba(44, 255, 110, .14);
  --sky: #00D4FF;
  --sky-soft: rgba(0, 212, 255, .14);
  --lav: #B66BFF;
  --lav-soft: rgba(182, 107, 255, .16);
  --shadow: 0 6px 24px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
[data-theme="escuro"] .hero { background: linear-gradient(180deg, rgba(255,106,26,.28) 0%, rgba(255,45,117,.12) 50%, var(--bg) 100%); }
[data-theme="escuro"] .hero small { color: var(--sun); text-shadow: 0 0 12px rgba(255,106,26,.7); }
[data-theme="escuro"] .card { border: 1px solid rgba(255,255,255,.05); }
[data-theme="escuro"] .card-main {
  background: linear-gradient(135deg, #FF6A1A 0%, #FF2D75 100%); border: 0;
  box-shadow: 0 8px 36px rgba(255,60,80,.45);
}
[data-theme="escuro"] .card-main .cta { background: #07070B; color: #FF8A3D; }
[data-theme="escuro"] .breath-main { background: linear-gradient(135deg, #00D4FF 0%, #2D6BFF 100%); box-shadow: 0 8px 36px rgba(0,160,255,.45); }
[data-theme="escuro"] .breath-main .cta { color: #00D4FF; }
[data-theme="escuro"] .t-sky .dot { color: var(--sky); box-shadow: 0 0 14px rgba(0,212,255,.35); }
[data-theme="escuro"] .t-sage .dot { color: var(--sage); box-shadow: 0 0 14px rgba(44,255,110,.35); }
[data-theme="escuro"] .t-lav .dot { color: var(--lav); box-shadow: 0 0 14px rgba(182,107,255,.35); }
[data-theme="escuro"] .t-sun .dot { color: var(--sun); box-shadow: 0 0 14px rgba(255,106,26,.35); }
[data-theme="escuro"] .pill.sage { color: var(--sage); }
[data-theme="escuro"] .pill.sky { color: var(--sky); }
[data-theme="escuro"] .cta { background: var(--ink); color: #07070B; }
[data-theme="escuro"] .cta.soft { background: var(--sun-soft); color: var(--sun-deep); }
[data-theme="escuro"] .streak span { background: rgba(255,255,255,.1); }
[data-theme="escuro"] .streak span.on { box-shadow: 0 0 8px var(--sage); }
[data-theme="escuro"] .extra-card { background: linear-gradient(135deg, rgba(44,255,110,.16), var(--surface)); }
[data-theme="escuro"] .day.today { outline-color: var(--sun); box-shadow: 0 0 18px rgba(255,106,26,.35); }
[data-theme="escuro"] .clip video, [data-theme="escuro"] .clip img, [data-theme="escuro"] .p-video { background: #1B1B24; }
[data-theme="escuro"] .sticky-cta { background: linear-gradient(180deg, rgba(7,7,11,0), var(--bg) 35%); }
[data-theme="escuro"] .add input { color: var(--ink); }
[data-theme="escuro"] .opcao { color: var(--sky); }
[data-theme="escuro"] .opcao.on { background: var(--sky); color: #00141A; box-shadow: 0 0 16px rgba(0,212,255,.6); }

[data-theme="escuro"] #overlay.rest { background: #04140A; }
[data-theme="escuro"] #overlay.prep { background: #170B04; }
[data-theme="escuro"] #overlay.breath { background: linear-gradient(180deg, #021820, var(--bg)); }
[data-theme="escuro"] .progress span { background: rgba(255,255,255,.1); }
[data-theme="escuro"] .progress span.now { box-shadow: 0 0 8px var(--sun); }
[data-theme="escuro"] .p-label { text-shadow: 0 0 12px currentColor; }
[data-theme="escuro"] .rest .p-label { color: var(--sage); }
[data-theme="escuro"] .p-label[style] { color: var(--sky) !important; }
[data-theme="escuro"] .ring .track { stroke: rgba(255,255,255,.1); }
[data-theme="escuro"] .ring .bar { filter: drop-shadow(0 0 6px currentColor); }
[data-theme="escuro"] .ring .bar { color: var(--sun); }
[data-theme="escuro"] .rest .ring .bar { color: var(--sage); }
[data-theme="escuro"] .breath .ring .bar { color: var(--sky); }
[data-theme="escuro"] .side-flag { color: var(--sky); }
[data-theme="escuro"] .ctrl.main { background: var(--sun); color: #fff; box-shadow: 0 0 22px rgba(255,106,26,.55); }
[data-theme="escuro"] .orb { background: radial-gradient(circle at 40% 35%, #8CF2FF 0%, #00D4FF 55%, #0077FF 100%); box-shadow: 0 0 70px rgba(0,212,255,.6); }
[data-theme="escuro"] .done-screen .sun { background: linear-gradient(180deg, #FF6A1A, #FF2D75); box-shadow: 0 0 90px rgba(255,60,80,.7); }
[data-theme="escuro"] .ajuste .segmento button.on { box-shadow: 0 0 16px rgba(255,106,26,.5); }

/* resumo (modal) */
.summary { position: fixed; inset: 0; z-index: 20; background: rgba(30,25,20,.88); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px; color: #fff; }
.summary video { width: 100%; max-width: 560px; border-radius: 18px; }
.summary h3 { margin-top: 14px; font-size: 20px; text-align: center; }
.summary p { opacity: .7; margin-top: 4px; }
.summary .close { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px; }

/* ---------- Treino da Fera ---------- */
:root { --fera: #E8321E; --fera-soft: #FDE3DF; }
[data-theme="escuro"] { --fera: #FF3B24; --fera-soft: rgba(255, 59, 36, .16); }
.t-fera .dot { background: var(--fera-soft); color: var(--fera); }
[data-theme="escuro"] .t-fera .dot { box-shadow: 0 0 14px rgba(255,59,36,.4); }
.fera-capa { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 14px; background: #0b0b0b; }
.fera-capa img { width: 100%; aspect-ratio: 960/350; object-fit: cover; display: block; }
.fera-capa div { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.85)); color: #fff; }
.fera-capa small { color: var(--fera); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
.fera-capa h2 { font-size: 26px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; line-height: 1.05; }
.fera-semana, .fera-dia { display: flex; align-items: center; gap: 14px; }
.fera-semana.bloqueada { opacity: .5; }
.fera-n { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 18px; background: var(--fera-soft); color: var(--fera); }
.fera-video { width: 100%; aspect-ratio: 16/9; border-radius: var(--r); background: #000; display: block; box-shadow: var(--shadow); margin-bottom: 14px; }
.fera-desc small { color: var(--fera); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.fera-metas { margin: 10px 0 4px; }
.fera-metas div { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line, rgba(0,0,0,.07)); }
.fera-metas div:first-child { border-top: 0; }
.fera-metas b { font-size: 34px; font-weight: 900; color: var(--fera); line-height: 1; min-width: 72px; font-variant-numeric: tabular-nums; }
.fera-metas span { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.fera-var-t { font-size: 12px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-top: 12px !important; }
.fera-var { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fera-var .pill { background: var(--fera-soft); color: var(--fera); }
[data-theme="escuro"] .fera-metas b { text-shadow: 0 0 16px rgba(255,59,36,.6); }

/* ---------- música de fundo ---------- */
.musica-aviso { font-size: 13px; color: var(--muted); margin: -4px 4px 10px; line-height: 1.4; }
.faixa { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.faixa h3 { font-size: 16px; }
.faixa-ic { position: relative; width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--sky-soft); color: #3F8297; }
.faixa-ic i { display: none; }
.faixa-play { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sun-soft); color: var(--sun-deep); }
.faixa.escolhida { outline: 2px solid var(--sky); }
/* tocando: ícone vira um equalizador animado */
.faixa.tocando .faixa-ic svg { display: none; }
.faixa.tocando .faixa-ic { display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 11px; }
.faixa.tocando .faixa-ic i { display: block; width: 4px; height: 18px; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.faixa.tocando .faixa-ic i:nth-child(3) { animation-delay: .25s; }
.faixa.tocando .faixa-ic i:nth-child(4) { animation-delay: .5s; }
@keyframes eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.faixa.tocando .faixa-play { visibility: hidden; }

#trilha {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 9;
  width: calc(100% - 24px); max-width: 536px; display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 14px; border-radius: 18px; background: var(--ink); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
#trilha > div { flex: 1; min-width: 0; }
#trilha b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#trilha small { display: block; font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#trilha .icon-btn { color: #fff; background: rgba(255,255,255,.12); }
.trilha-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.12); }
.trilha-ic.on { color: var(--sky); }
body.com-trilha #app { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
body.com-trilha .sticky-cta { bottom: 74px; }

[data-theme="escuro"] .faixa-ic { color: var(--sky); box-shadow: 0 0 14px rgba(0,212,255,.3); }
[data-theme="escuro"] .faixa.escolhida { outline-color: var(--sky); box-shadow: 0 0 18px rgba(0,212,255,.25); }
[data-theme="escuro"] #trilha { background: #15151c; border: 1px solid rgba(0,212,255,.35); box-shadow: 0 0 24px rgba(0,212,255,.2); }
/* ---------- pomodoro manual (escolha do tempo) ---------- */
.sheet-fundo { position: fixed; inset: 0; z-index: 30; background: rgba(30,25,20,.45); display: flex; align-items: flex-end; justify-content: center; animation: sheet-fundo .2s ease; }
.sheet { width: 100%; max-width: 560px; background: var(--surface); border-radius: 24px 24px 0 0; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); animation: sheet-sobe .25s ease; }
.sheet h3 { font-size: 19px; }
.sheet p { color: var(--muted); font-size: 14px; margin: 4px 0 16px; }
.sheet .opcoes { justify-content: space-between; gap: 6px; margin: 0; }
.sheet .opcao { width: 58px; height: 58px; }
@keyframes sheet-fundo { from { opacity: 0; } }
@keyframes sheet-sobe { from { transform: translateY(100%); } }
[data-theme="escuro"] .sheet-fundo { background: rgba(0,0,0,.65); }
/* ---------- aviso rápido (ex.: som desligado) ---------- */
#aviso {
  position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); z-index: 40;
  transform: translate(-50%, 10px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.25); white-space: nowrap;
}
#aviso.ver { opacity: 1; transform: translate(-50%, 0); }
[data-theme="escuro"] #aviso { background: #15151c; border: 1px solid rgba(255,106,26,.45); }
[data-theme="escuro"] .icon-btn.off { color: #FF5A5A; opacity: .8; }
/* ---------- som de fundo da rotina: botão de mutar em destaque ---------- */
.fundo-btn {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); max-width: 528px; margin: 10px auto 0;
  padding: 10px 16px; border-radius: 16px; text-align: left;
  background: var(--sky-soft); color: #2E7488; border: 2px solid var(--sky);
}
.fundo-btn span { flex: 1; min-width: 0; }
.fundo-btn b { display: block; font-size: 15px; }
.fundo-btn small { display: block; font-size: 12px; opacity: .8; }
.fundo-btn.mudo { background: #FCE3E1; color: #C0392B; border-color: #E8A39B; }
.fundo-btn:active { transform: scale(.98); }
[data-theme="escuro"] .fundo-btn { background: rgba(0,212,255,.1); color: var(--sky); border-color: rgba(0,212,255,.55); box-shadow: 0 0 18px rgba(0,212,255,.2); }
[data-theme="escuro"] .fundo-btn.mudo { background: rgba(255,90,90,.12); color: #FF6B6B; border-color: rgba(255,90,90,.55); box-shadow: none; }
/* ---------- música dentro do pomodoro ---------- */
.musica-sessao:empty { display: none; }
.musica-sessao { width: calc(100% - 32px); max-width: 528px; margin: 10px auto 0; }
.musica-opcoes { display: flex; gap: 8px; }
.musica-opcoes .musica-btn { flex: 1; min-width: 0; }
.musica-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 16px; text-align: left;
  background: var(--surface); color: var(--ink); border: 2px dashed var(--sky); box-shadow: var(--shadow);
}
.musica-btn > svg { flex: none; color: #3F8297; }
.musica-btn span:not(.trilha-ic) { flex: 1; min-width: 0; }
.musica-btn b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.musica-btn small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.musica-btn.tocando { border-style: solid; background: var(--sky-soft); }
.musica-btn.tocando .trilha-ic { background: rgba(63,130,151,.15); color: #3F8297; }
.musica-btn.tocando .icon-btn { flex: none; }
[data-theme="escuro"] .musica-btn { background: #15151c; color: #fff; border-color: rgba(0,212,255,.5); }
[data-theme="escuro"] .musica-btn > svg, [data-theme="escuro"] .musica-btn.tocando .trilha-ic { color: var(--sky); }
[data-theme="escuro"] .musica-btn.tocando { background: rgba(0,212,255,.1); box-shadow: 0 0 18px rgba(0,212,255,.2); }
/* ---------- conta (memória na nuvem) ---------- */
.conta-form { display: flex; flex-direction: column; gap: 12px; }
.conta-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.conta-form input { font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }
.conta-form input:focus { outline: 2px solid var(--sun); border-color: transparent; }
.conta-form button:disabled { opacity: .5; }
.conta-msg { color: var(--sun-deep) !important; font-weight: 600; }
.conta { text-align: center; }
.conta-ok { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sage-soft); color: #4F7F57; font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.conta-link { display: block; }
.link-discreto { display: block; margin: 16px auto 0; color: var(--muted); font-size: 14px; text-decoration: underline; }
[data-theme="escuro"] .conta-form input { background: #0d0d12; border-color: rgba(255,255,255,.12); color: #fff; }
[data-theme="escuro"] .conta-ok { color: var(--sage); box-shadow: 0 0 18px rgba(44,255,110,.3); }
/* ---------- assistente ---------- */
.t-ia .dot { background: var(--lav-soft); color: #6F5BB5; }
[data-theme="escuro"] .t-ia .dot { color: var(--lav); box-shadow: 0 0 14px rgba(182,107,255,.4); }

/* topo fixo: voltar, título da conversa, voz, histórico, nova */
.chat-topo {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
  margin: 0 -16px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.chat-topo .back { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.chat-titulo { flex: 1; min-width: 0; }
.chat-titulo h1 { font-size: 18px; line-height: 1.2; }
.chat-titulo small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-topo .icon-btn { flex: none; width: 38px; height: 38px; box-shadow: none; background: var(--surface); }

/* mensagens */
.chat { display: flex; flex-direction: column; gap: 14px; padding: 18px 0 150px; min-height: 60vh; }
.msg { display: flex; flex-direction: column; max-width: 88%; }
.msg.eu { align-self: flex-end; align-items: flex-end; }
.msg.ia { align-self: flex-start; align-items: flex-start; }
.msg-bolha { padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.5; word-wrap: break-word; }
.msg-bolha p { margin: 0; }
.msg-bolha p + p, .msg-bolha p + ul, .msg-bolha p + ol, .msg-bolha ul + p, .msg-bolha ol + p { margin-top: 8px; }
.msg-bolha ul, .msg-bolha ol { margin: 4px 0; padding-left: 20px; }
.msg-bolha li + li { margin-top: 4px; }
.msg.eu .msg-bolha { background: var(--sun); color: #fff; border-bottom-right-radius: 6px; }
.msg.ia .msg-bolha { background: var(--surface); box-shadow: var(--shadow); border-bottom-left-radius: 6px; }
.msg.erro .msg-bolha { background: #FCE3E1; color: #C0392B; box-shadow: none; }
.msg-meta { display: flex; align-items: center; gap: 4px; margin-top: 4px; padding: 0 6px; font-size: 11px; color: var(--muted); }
.msg-meta button { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); }
.msg-meta button:active { background: var(--line); }
.msg-modelo { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: var(--lav-soft); color: #6F5BB5; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }

/* digitando / carregando: três pontinhos */
.digitando, .chat-carregando { display: flex; gap: 5px; align-items: center; }
.digitando { padding: 14px 16px; }
.chat-carregando { justify-content: center; margin-top: 30vh; }
.digitando span, .chat-carregando span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: pontinho 1.2s ease-in-out infinite; }
.digitando span:nth-child(2), .chat-carregando span:nth-child(2) { animation-delay: .15s; }
.digitando span:nth-child(3), .chat-carregando span:nth-child(3) { animation-delay: .3s; }
@keyframes pontinho { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* tela vazia com sugestões */
.chat-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-top: 8vh; }
.chat-vazio-ic { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 20px; background: var(--lav-soft); color: #6F5BB5; }
.chat-vazio h2 { font-size: 22px; }
.chat-vazio p { color: var(--muted); font-size: 14px; max-width: 300px; line-height: 1.45; }
.chat-sugestoes { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 14px; }
.chat-sugestoes button { padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); text-align: left; font-size: 14px; }
.chat-aviso { color: var(--muted); text-align: center; margin: 24px 8px; }

/* rodapé fixo: parar voz, ouvindo, caixa de envio */
.chat-rodape {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 8;
  width: 100%; max-width: 560px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--bg) 30%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.chat-calar, .chat-ouvindo { display: none; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.chat-calar { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.chat-ouvindo { background: #E74C3C; color: #fff; animation: pulsar 1.4s ease-in-out infinite; }
body.ia-falando .chat-calar { display: inline-flex; }
body.ia-ouvindo .chat-ouvindo { display: inline-flex; }
.chat-envio { width: 100%; display: flex; align-items: flex-end; gap: 8px; padding: 8px; border-radius: 24px; background: var(--surface); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.chat-envio textarea { flex: 1; resize: none; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; padding: 10px 6px; max-height: 140px; outline: none; }
.chat-envio .icon-btn { flex: none; width: 44px; height: 44px; box-shadow: none; background: var(--bg); }
.chat-envio .enviar { background: var(--sun); color: #fff; }
body.ia-ouvindo .chat-envio .mic { background: #E74C3C; color: #fff; }
body.com-trilha .chat-rodape { bottom: 70px; }
body.com-trilha .chat { padding-bottom: 220px; }

/* histórico de conversas */
.historico { max-height: 75vh; display: flex; flex-direction: column; }
.historico .row { margin-bottom: 8px; }
.historico-lista { overflow-y: auto; margin: 0 -4px; }
.historico-item { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 14px; }
.historico-item.atual { background: var(--sun-soft); }
.historico-abrir { flex: 1; min-width: 0; text-align: left; padding: 10px; }
.historico-abrir b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.historico-abrir small { color: var(--muted); font-size: 12px; }
.historico-item .icon-btn { flex: none; box-shadow: none; background: transparent; color: var(--muted); }

[data-theme="escuro"] .chat-topo { background: var(--bg); border-color: rgba(255,255,255,.08); }
[data-theme="escuro"] .chat-topo .icon-btn { background: #15151c; color: #fff; }
[data-theme="escuro"] .chat-topo .icon-btn.off { color: #FF5A5A; }
[data-theme="escuro"] .msg.ia .msg-bolha { background: #15151c; color: #f2f2f5; border: 1px solid rgba(182,107,255,.22); box-shadow: none; }
[data-theme="escuro"] .msg.eu .msg-bolha { box-shadow: 0 0 16px rgba(255,106,26,.3); }
[data-theme="escuro"] .msg.erro .msg-bolha { background: rgba(255,90,90,.12); color: #FF7B7B; border-color: rgba(255,90,90,.4); }
[data-theme="escuro"] .msg-modelo { background: rgba(182,107,255,.18); color: var(--lav); }
[data-theme="escuro"] .chat-vazio-ic { background: rgba(182,107,255,.16); color: var(--lav); box-shadow: 0 0 24px rgba(182,107,255,.3); }
[data-theme="escuro"] .chat-sugestoes button { background: #15151c; color: #fff; border: 1px solid rgba(255,255,255,.08); box-shadow: none; }
[data-theme="escuro"] .chat-calar { background: #15151c; color: #fff; border: 1px solid rgba(255,255,255,.1); }
[data-theme="escuro"] .chat-envio { background: #15151c; border: 1px solid rgba(255,255,255,.08); }
[data-theme="escuro"] .chat-envio textarea { color: #fff; }
[data-theme="escuro"] .chat-envio .icon-btn { background: #0d0d12; color: #fff; }
[data-theme="escuro"] .chat-envio .enviar { background: var(--sun); box-shadow: 0 0 14px rgba(255,106,26,.5); }
[data-theme="escuro"] .historico-item.atual { background: rgba(255,106,26,.12); }

/* ---------- Google (Agenda e Drive) ---------- */
.google-card .cta { margin-top: 12px; }
.msg-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg-acao { display: inline-block; padding: 5px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; background: var(--sky-soft); color: #2E7488; text-decoration: none; }
a.msg-acao::after { content: " ↗"; }
[data-theme="escuro"] .msg-acao { background: rgba(0,212,255,.12); color: var(--sky); border: 1px solid rgba(0,212,255,.3); }
/* ---------- botão "Começar a manhã" (tela inicial) ---------- */
.botao-manha-area { display: grid; place-items: center; padding: 34px 0 30px; }
.botao-manha {
  position: relative; width: clamp(170px, 46vw, 205px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #FFC266 0%, #FF7A1F 45%, #E8421E 100%);
  box-shadow: 0 0 30px rgba(255,106,26,.55), 0 0 70px rgba(255,80,30,.35), inset 0 -8px 18px rgba(150,30,0,.35);
  animation: manha-pulso 2.4s ease-in-out infinite;
}
.botao-manha:active { transform: scale(.96); }
.botao-manha-centro { display: flex; flex-direction: column; align-items: center; line-height: 1.05; text-shadow: 0 1px 6px rgba(120,30,0,.45); }
.botao-manha-centro span { font-size: clamp(22px, 6.4vw, 27px); font-weight: 800; letter-spacing: .01em; }
.botao-manha-centro small { font-size: clamp(15px, 4.4vw, 18px); font-weight: 600; opacity: .9; margin: 2px 0; }
/* arcos laranja girando em volta */
.botao-manha .arcos { position: absolute; inset: -22%; width: 144%; height: 144%; overflow: visible; pointer-events: none; }
.arco { fill: none; stroke-linecap: round; transform-origin: 100px 100px; filter: drop-shadow(0 0 5px rgba(255,120,40,.95)); }
.arco.a1 { stroke: #FF8A3D; stroke-width: 2.4; stroke-dasharray: 140 64 60 340; animation: arco-gira 9s linear infinite; }
.arco.a2 { stroke: #FFB347; stroke-width: 1.8; stroke-dasharray: 90 120 40 300; animation: arco-gira 6.5s linear infinite reverse; opacity: .85; }
.arco.a3 { stroke: #FF6A1A; stroke-width: 3; stroke-dasharray: 60 90 110 250; animation: arco-gira 12s linear infinite; opacity: .7; }
@keyframes arco-gira { to { transform: rotate(360deg); } }
@keyframes manha-pulso {
  0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(255,106,26,.55), 0 0 70px rgba(255,80,30,.35), inset 0 -8px 18px rgba(150,30,0,.35); }
  50% { transform: scale(1.045); box-shadow: 0 0 44px rgba(255,106,26,.75), 0 0 100px rgba(255,80,30,.5), inset 0 -8px 18px rgba(150,30,0,.35); }
}
@media (prefers-reduced-motion: reduce) { .botao-manha, .arco { animation: none; } }

/* lista da rotina (aparece ao tocar no botão) */
.rotina-sheet .row { margin-bottom: 6px; }
.rotina-lista { list-style: none; counter-reset: etapa; padding: 0; margin: 4px 0 18px; }
.rotina-lista li { counter-increment: etapa; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.rotina-lista li:first-child { border-top: 0; }
.rotina-lista li::before { content: counter(etapa); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--sun-soft); color: var(--sun-deep); }
.rotina-lista b { font-size: 16px; }
.rotina-lista small { grid-column: 2; color: var(--muted); font-size: 12px; }
.rotina-sheet .cta { background: linear-gradient(135deg, #FF8A3D, #E8421E); color: #fff; }
[data-theme="escuro"] .rotina-lista li { border-color: rgba(255,255,255,.08); }
[data-theme="escuro"] .rotina-sheet .cta { box-shadow: 0 0 20px rgba(255,106,26,.45); }

/* leitura sem tempo fixo: botão concluir */
.cta.concluir { margin-top: 18px; background: var(--sun); color: #fff; padding: 14px 28px; }
[data-theme="escuro"] .cta.concluir { box-shadow: 0 0 20px rgba(255,106,26,.5); }