:root{
  --bg:#ffffff; --mist:#EEF6FE; --mist2:#E2F0FD;
  --blue:#3E9BF0; --blue-deep:#2176D6; --blue-soft:#A9D4F5;
  --ink:#0C1C33; --muted:#5B6B82; --line:#DCEAF8;
  --neg:#F0883E; --ok:#2BB673;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{ max-width:100%; overflow-x:hidden }
body{ font-family:'Manrope',system-ui,sans-serif; color:var(--ink); background:#dceaf8;
  display:grid; place-items:center; min-height:100vh; padding:18px; overscroll-behavior:none }
h1,h2,h3,.serif{ font-family:'Fraunces',Georgia,serif; letter-spacing:-.02em }
button{ font-family:inherit; cursor:pointer }

#phone{ width:100%; max-width:430px; height:min(900px,96vh); background:var(--bg); border-radius:40px;
  box-shadow:0 50px 110px -40px #1b3a6655; border:1px solid var(--line); overflow:hidden;
  display:flex; flex-direction:column; position:relative }
@media(max-width:460px){ body{padding:0} #phone{ border-radius:0; height:100vh; max-width:100% } }

#app{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch }
.screen{ padding:26px 22px 30px; min-height:100%; display:flex; flex-direction:column; animation:fade .4s cubic-bezier(.16,1,.3,1) }
@keyframes fade{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

/* header */
.head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px }
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px }
.brand .dot{ width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--blue),var(--blue-soft));
  display:grid;place-items:center;box-shadow:0 5px 14px #3e9bf055 }
.brand .dot svg{ width:16px;height:16px }
.eyebrow{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-deep) }
h2.title{ font-size:30px; line-height:1.05; margin:4px 0 6px }
.sub{ color:var(--muted); font-size:15px; margin-bottom:24px }

/* inputs / buttons */
.field{ margin-bottom:14px }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:7px }
input,select{ width:100%; padding:15px 16px; border:1px solid var(--line); border-radius:14px; font-size:16px;
  font-family:inherit; background:#fff; color:var(--ink); transition:.2s }
input:focus,select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px #3e9bf01f }
.btn{ width:100%; padding:16px; border:none; border-radius:100px; font-weight:700; font-size:16px; transition:.3s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 14px 28px #3e9bf044 }
.btn-primary:hover{ background:var(--blue-deep) } .btn-primary:active{ transform:scale(.98) }
.btn[disabled]{ opacity:.55; cursor:progress }
.btn-ghost{ background:#fff; border:1.5px solid var(--line); color:var(--ink) }
.btn-soft{ background:var(--mist); color:var(--blue-deep) }
.link{ color:var(--blue-deep); font-weight:600; background:none; border:none; font-size:15px }
.err{ background:#fff2ec; color:#c4541f; border:1px solid #ffd9c6; padding:12px 14px; border-radius:12px; font-size:14px; margin-bottom:14px; display:none }
.spacer{ flex:1 }

/* cards */
.card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px; margin-bottom:12px }
.list-item{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:15px; margin-bottom:11px; width:100%; text-align:left; transition:.25s }
.list-item:hover{ border-color:var(--blue); transform:translateY(-1px) }
.li-emoji{ width:46px;height:46px;border-radius:13px;background:var(--mist);display:grid;place-items:center;font-size:24px;flex:none }
.li-main{ flex:1 } .li-main b{ font-size:16px } .li-main span{ display:block; font-size:13px; color:var(--muted) }
.li-meta{ font-size:13px; color:var(--muted); text-align:right }
.day-sep{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
  margin:16px 2px 9px; display:flex; align-items:center; gap:10px }
.day-sep::after{ content:""; flex:1; height:1px; background:var(--line) }
.day-sep:first-child{ margin-top:4px }
.empty{ text-align:center; color:var(--muted); padding:40px 10px } .empty .big{ font-size:46px; margin-bottom:10px }

/* insights / DNA emocional */
.insight{ background:linear-gradient(160deg,#fff,var(--mist)); border:1px solid var(--line); border-radius:22px; padding:20px; margin-bottom:18px }
.insight .lab{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:12px }
.insight .dom{ display:flex; align-items:center; gap:13px; margin-bottom:16px }
.insight .dom .e{ font-size:36px; filter:drop-shadow(0 6px 10px #1b3a6622) }
.insight .dom b{ font-family:'Fraunces',serif; font-size:22px; display:block; line-height:1.1 }
.insight .dom span{ font-size:13px; color:var(--muted) }
.dist .row{ margin-bottom:10px }
.dist .row .top{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px; font-weight:600 }
.dist .row .top span{ color:var(--muted); font-weight:500 }
.dist .bar{ height:7px; border-radius:7px; background:var(--mist2); overflow:hidden }
.dist .bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--blue-soft),var(--blue)); border-radius:7px; width:0; transition:width .8s cubic-bezier(.16,1,.3,1) }
.insight .stats{ display:flex; gap:10px; margin-top:16px }
.insight .stat{ flex:1; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 8px; text-align:center }
.insight .stat b{ font-family:'Fraunces',serif; font-size:21px; display:block; line-height:1 }
.insight .stat span{ font-size:10.5px; color:var(--muted); display:block; margin-top:4px }

/* lista de pets com foto */
.li-photo{ width:46px; height:46px; border-radius:13px; object-fit:cover; flex:none }

/* tela Hoje */
.today-eyebrow{ font-size:13px; font-weight:700; color:var(--blue-deep); margin-bottom:2px }
.today-hero{ display:flex; align-items:center; gap:15px; background:linear-gradient(160deg,#fff,var(--mist));
  border:1px solid var(--line); border-radius:22px; padding:18px; margin:8px 0 14px }
.today-photo{ width:74px; height:74px; border-radius:20px; object-fit:cover; flex:none; background:var(--mist); display:grid; place-items:center; font-size:36px }
.today-mood .lab{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-deep) }
.today-mood .mood-state{ font-family:'Fraunces',serif; font-size:21px; margin-top:3px; line-height:1.12 }
.day-summary{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:15px; font-size:14px; color:var(--muted); margin-bottom:18px; line-height:1.55 }
.day-summary b{ color:var(--ink) }
.status-banner{ border-radius:18px; padding:14px 16px; margin-bottom:16px; display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.5 }
.status-banner.ok{ background:#f1f9f4; border:1px solid #bce8cf; color:#1c7a4a }
.status-banner.note{ background:#fff8f3; border:1px solid #f6c9a8; color:#a8581f }
.status-banner.warn{ background:#fdecea; border:1px solid #f3b4ab; color:#c4361f }
.status-banner.learn{ background:var(--mist); border:1px solid var(--line); color:var(--muted) }
.status-banner .si{ font-size:20px; flex:none } .status-banner b{ display:block; margin-bottom:2px }
.status-banner ul{ margin:3px 0 0; padding-left:16px } .status-banner li{ margin-bottom:2px }

/* perfil do pet + cuidados */
.pet-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:22px }
.pet-photo-wrap{ position:relative; width:118px; height:118px; margin-bottom:13px }
.pet-photo{ width:118px; height:118px; border-radius:50%; object-fit:cover; border:4px solid #fff; box-shadow:0 16px 32px -12px #1b3a6644; background:var(--mist) }
.pet-photo-empty{ display:grid; place-items:center; font-size:52px }
.addpet-photo{ display:flex; flex-direction:column; align-items:center; margin:6px 0 18px }
.addpet-photo .pet-photo{ cursor:pointer }
.addpet-photo-hint{ font-size:13px; color:var(--muted) }
.calm-rec{ width:100% }
.voice-list{ display:flex; flex-direction:column; gap:10px }
.voice-item{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:#fff }
.voice-item .vlabel{ flex:1; font-weight:600; font-size:15px }
.voice-item .vplay{ width:40px; height:40px; border-radius:50%; border:none; background:var(--blue); color:#fff; font-size:15px; cursor:pointer; flex:none; box-shadow:0 6px 14px #3e9bf055 }
.voice-item .vdel{ border:none; background:none; cursor:pointer; font-size:16px; opacity:.6 } .voice-item .vdel:hover{ opacity:1 }
.voice-item .vcollar{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:15px; flex:none; min-width:40px }
.voice-item .vcollar:hover{ border-color:var(--blue) } .voice-item .vcollar:disabled{ opacity:.6; font-size:12px }

/* Acalmar — auto-calm (coleira toca a voz quando estressado) */
.calm-auto{ display:flex; align-items:center; gap:14px; margin-top:14px; padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(120deg,#eef6fe,#fff) }
.calm-auto > div{ flex:1 } .calm-auto b{ font-size:15px; display:block } .calm-auto span{ font-size:12.5px; color:var(--muted); display:block; margin-top:2px }
.switch{ position:relative; width:50px; height:30px; flex:none } .switch input{ opacity:0; width:0; height:0 }
.switch .slider{ position:absolute; inset:0; background:#cfddea; border-radius:30px; transition:.3s; cursor:pointer }
.switch .slider::before{ content:""; position:absolute; width:24px; height:24px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.3s; box-shadow:0 2px 6px #0002 }
.switch input:checked + .slider{ background:var(--blue) } .switch input:checked + .slider::before{ transform:translateX(20px) }

/* Escutar — leitura ÚNICA e evolutiva (não feed) */
.live-read{ margin-top:18px; background:linear-gradient(180deg,#fff,var(--mist)); border:1px solid var(--line); border-radius:24px; padding:24px 20px; text-align:center }
.lr-emoji{ font-size:64px; line-height:1; margin-bottom:6px; display:inline-block }
.lr-emoji.pulse{ animation:lrpulse .5s cubic-bezier(.16,1,.3,1) }
@keyframes lrpulse{ 0%{ transform:scale(.72); opacity:.5 } 100%{ transform:scale(1); opacity:1 } }
.lr-state{ font-family:'Fraunces',serif; font-size:24px; margin-bottom:12px }
.lr-bar{ height:9px; border-radius:9px; background:var(--mist2); overflow:hidden; margin:0 auto 8px; max-width:280px }
.lr-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue-soft),var(--blue)); border-radius:9px; transition:width .9s cubic-bezier(.16,1,.3,1) }
.lr-conf{ font-size:12.5px; color:var(--muted); margin-bottom:14px }
.lr-speech{ font-family:'Fraunces',serif; font-size:21px; line-height:1.32; color:var(--ink); margin:0 auto; max-width:340px }
.lr-ctx{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px }
.lr-ctx span{ font-size:12px; font-weight:700; background:var(--mist); color:var(--blue-deep); border-radius:100px; padding:6px 12px }
.lr-actions{ display:flex; flex-direction:column; gap:10px; margin-top:18px }
/* checklist de ENSINO (banco inteligente por pet) */
.teach-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:8px }
.teach-chip{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 8px; border:1px solid var(--line); border-radius:16px; background:#fff; font-weight:600; font-size:13px; color:var(--ink); cursor:pointer; transition:.2s; text-align:center }
.teach-chip:hover{ border-color:var(--blue); transform:translateY(-2px) }
.teach-chip .te{ font-size:26px }
.teach-chip.saving{ opacity:.5 }
.photo-edit{ position:absolute; bottom:2px; right:2px; width:38px; height:38px; border-radius:50%; background:var(--blue); color:#fff;
  border:3px solid #fff; display:grid; place-items:center; cursor:pointer; font-size:16px; box-shadow:0 6px 14px #3e9bf055 }
.pet-hero h2{ font-size:27px; margin:0 } .pet-hero .breed{ color:var(--muted); font-size:14px; margin-top:3px }
.section-title{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:4px 0 11px }
.care-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px }
.care-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px }
.care-card .ic{ font-size:24px } .care-card .k{ font-size:12px; color:var(--muted); font-weight:600; margin-top:6px }
.care-card .v{ font-family:'Fraunces',serif; font-size:20px; margin-top:2px } .care-card .v.warn{ color:var(--neg) }
.care-card.alert{ border-color:#f6c9a8; background:#fff8f3 }
.log-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px }
.log-btn{ background:var(--mist); border:1px solid var(--line); border-radius:16px; padding:13px 4px; font-weight:700; font-size:12.5px;
  display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--ink); transition:.2s }
.log-btn .e{ font-size:22px } .log-btn:active{ transform:scale(.94) } .log-btn.done{ background:#e9f7ef; border-color:#bce8cf; color:var(--ok) }
.pet-actions{ display:grid; grid-template-columns:1fr 1fr; gap:12px }

/* carteirinha de saúde */
.weight-big{ font-family:'Fraunces',serif; font-size:36px; line-height:1 } .weight-big small{ font-size:16px; color:var(--muted) }
.upcoming-card{ background:#fff8f3; border:1px solid #f6c9a8; border-radius:16px; padding:13px 15px; margin-bottom:10px; display:flex; align-items:center; gap:12px }
.upcoming-card.ok{ background:#f1f9f4; border-color:#bce8cf }
.upcoming-card .he{ font-size:22px } .upcoming-card .hm b{ font-size:15px } .upcoming-card .hm span{ display:block; font-size:12px; color:var(--muted) }
.upcoming-card .d{ margin-left:auto; font-weight:800; font-size:13px; color:var(--neg); white-space:nowrap }
.upcoming-card.ok .d{ color:var(--ok) }
.h-item{ display:flex; align-items:center; gap:12px; padding:13px; border:1px solid var(--line); border-radius:14px; margin-bottom:9px; background:#fff }
.h-item .he{ font-size:22px; flex:none } .h-item .hm b{ font-size:15px } .h-item .hm span{ display:block; font-size:12px; color:var(--muted) }

/* listen screen */
.pet-pill{ display:inline-flex; align-items:center; gap:8px; background:var(--mist); border-radius:100px; padding:7px 14px;
  font-weight:700; font-size:14px; align-self:flex-start; margin-bottom:10px; border:none }
.compass-wrap{ position:relative; aspect-ratio:1; width:100%; max-width:260px; margin:6px auto 18px }
#compass{ width:100%; height:100% }
.clabel{ position:absolute; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#9fb0c4 }
.clabel.t{ top:0;left:50%;transform:translateX(-50%) } .clabel.b{ bottom:0;left:50%;transform:translateX(-50%) }
.clabel.l{ left:-2px;top:50%;transform:translateY(-50%) } .clabel.r{ right:-2px;top:50%;transform:translateY(-50%) }
.petface{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:30px; filter:drop-shadow(0 6px 10px #1b3a6633) }
.readout{ background:linear-gradient(180deg,#fff,var(--mist)); border:1px solid var(--line); border-radius:22px; padding:20px; margin-top:14px }
.readout .lab{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--blue-deep) }
.readout .speech{ font-family:'Fraunces',serif; font-style:italic; font-size:23px; line-height:1.28; margin:7px 0 13px; color:var(--ink) }
.readout .speech::before{ content:"\201C"; } .readout .speech::after{ content:"\201D"; }
.readout .speech.placeholder{ font-style:normal; font-size:15px; color:var(--muted); font-family:'Manrope',sans-serif }
.readout .speech.placeholder::before,.readout .speech.placeholder::after{ content:"" }
.st-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px }
.st-tag{ font-size:12px; font-weight:700; color:var(--blue-deep); background:var(--mist); padding:5px 11px; border-radius:100px }
.st-row .conf{ font-size:12px; color:var(--muted) }
.badge-ai{ display:inline-block; font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; background:var(--blue); padding:3px 7px; border-radius:100px; margin-left:7px; vertical-align:middle }
.meter{ height:9px; border-radius:9px; background:var(--mist2); overflow:hidden; margin-top:12px }
.meter i{ display:block; height:100%; width:0; border-radius:9px; background:linear-gradient(90deg,var(--blue-soft),var(--blue)); transition:width .4s }
.wave-box{ height:58px; border-radius:14px; background:var(--mist); border:1px solid var(--line); overflow:hidden; margin-top:12px }
#wave{ width:100%; height:100% }
.fb{ display:flex; gap:10px; margin-top:14px } .fb button{ flex:1; padding:12px; border-radius:100px; border:1.5px solid var(--line); background:#fff; font-weight:700 }
.fb button.up:hover{ border-color:var(--ok); color:var(--ok) } .fb button.down:hover{ border-color:var(--neg); color:var(--neg) }
.fb.done{ opacity:.5; pointer-events:none }

.mic-row{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:16px }
.mic{ width:72px;height:72px;border-radius:50%;border:none;background:var(--blue);color:#fff;display:grid;place-items:center;
  box-shadow:0 16px 32px #3e9bf055; transition:.3s; position:relative } .mic svg{ width:28px;height:28px } .mic:active{ transform:scale(.94) }
.mic.on{ background:#ff4d4d; box-shadow:0 16px 32px #ff4d4d55 }
.mic.on::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #ff4d4d; animation:mr 1.6s infinite }
@keyframes mr{ from{transform:scale(1);opacity:.6} to{transform:scale(1.7);opacity:0} }
.mic-hint{ font-size:13px; color:var(--muted) }

/* modo coleira (fusão) */
.collar{ margin-top:16px; border-top:1px dashed var(--line); padding-top:14px }
.collar-toggle{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; justify-content:center }
.collar-toggle input{ width:auto; accent-color:var(--blue) }
.collar-body{ display:flex; gap:10px; margin-top:12px }
.bchip{ flex:1; padding:12px; border:1.5px solid var(--line); border-radius:14px; background:#fff; font-weight:700; font-size:14px; transition:.25s }
.bchip:hover{ border-color:var(--blue) } .bchip.on{ background:var(--blue); color:#fff; border-color:var(--blue) }
.fusion-line{ margin-top:10px; font-size:12px; color:var(--blue-deep); background:var(--mist); border-radius:12px; padding:9px 12px; display:none }
.fusion-line.show{ display:block } .fusion-line b{ font-weight:800 }

/* tabbar */
#tabbar{ display:flex; border-top:1px solid var(--line); background:#fff; padding:8px 6px calc(8px + env(safe-area-inset-bottom)) }
.tab{ flex:1; border:none; background:none; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:11px; font-weight:700; color:var(--muted); padding:6px 0; transition:.2s }
.tab .ti{ font-size:20px; filter:grayscale(.4); opacity:.7; transition:.2s }
.tab.active{ color:var(--blue-deep) } .tab.active .ti{ filter:none; opacity:1; transform:translateY(-1px) }

.toast{ position:absolute; left:50%; bottom:84px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:100px; font-size:14px; font-weight:600; opacity:0; transition:.35s cubic-bezier(.16,1,.3,1); pointer-events:none; z-index:50 }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

/* cartão compartilhável */
.share-overlay{ position:absolute; inset:0; background:#0c1c33dd; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; gap:16px; opacity:0; transition:.3s }
.share-overlay.show{ opacity:1 }
.share-overlay img{ max-width:100%; max-height:60vh; border-radius:20px; box-shadow:0 30px 70px -20px #000 }
.share-actions{ display:flex; gap:12px; width:100%; max-width:340px }
.share-actions .btn{ flex:1 }
.share-close{ color:#fff; background:none; border:none; font-size:15px; font-weight:600; opacity:.85; cursor:pointer }

/* ============ acessibilidade: foco visível ============ */
.btn:focus-visible,.tab:focus-visible,.mic:focus-visible,.link:focus-visible,.bchip:focus-visible,.log-btn:focus-visible,.list-item:focus-visible,.pet-pill:focus-visible{
  outline:3px solid var(--blue-deep); outline-offset:2px }

/* ============ modais / bottom-sheets próprios ============ */
.sheet-overlay{ position:absolute; inset:0; background:#0c1c3366; z-index:300; display:flex; align-items:flex-end;
  opacity:0; transition:.28s; backdrop-filter:blur(2px) }
.sheet-overlay.show{ opacity:1 }
.sheet{ width:100%; background:#fff; border-radius:26px 26px 0 0; padding:24px 22px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 50px -20px #1b3a6655; transform:translateY(100%); transition:.32s cubic-bezier(.16,1,.3,1) }
.sheet-overlay.show .sheet{ transform:none }
.sheet-title{ font-family:'Fraunces',serif; font-size:21px; line-height:1.15; margin-bottom:6px }
.sheet-msg{ font-size:14px; color:var(--muted); line-height:1.5; margin-bottom:14px }
.sheet-actions{ display:flex; flex-direction:column; gap:10px }
.btn-danger{ background:#e2452c; color:#fff; box-shadow:0 14px 28px #e2452c33 }
.btn-danger:active{ transform:scale(.98) }

/* ============ tensão na análise: anel + countdown no mic ============ */
.mic-ring{ position:absolute; inset:-7px; border-radius:50%; padding:4px; opacity:0; transition:.25s;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 0); mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 0) }
.mic.capturing .mic-ring{ opacity:1 }
.mic-count{ position:absolute; inset:0; display:grid; place-items:center; font-family:'Fraunces',serif; font-weight:600;
  font-size:30px; color:#fff; opacity:0; pointer-events:none }
.mic.capturing .mic-count{ opacity:1 }
.mic.capturing svg{ opacity:.25 }
.mic.capturing{ animation:micpulse 1s ease-in-out infinite }
@keyframes micpulse{ 0%,100%{ box-shadow:0 16px 32px #3e9bf055 } 50%{ box-shadow:0 16px 44px #3e9bf099 } }

/* shimmer "ouvindo o coração do [nome]…" + estado de erro do balão */
.readout .speech.shimmer{ font-style:normal; font-family:'Manrope',sans-serif; font-size:15px;
  background:linear-gradient(90deg,var(--muted) 25%,var(--blue) 50%,var(--muted) 75%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:shimmer 1.4s linear infinite }
.readout .speech.shimmer::before,.readout .speech.shimmer::after{ content:"" }
@keyframes shimmer{ to{ background-position:-200% 0 } }
.readout .speech.error{ font-style:normal; font-family:'Manrope',sans-serif; font-size:15px; color:#c4541f }
.readout .speech.error::before,.readout .speech.error::after{ content:"" }

/* legenda auto-explicativa da bússola */
.compass-legend{ position:absolute; left:50%; bottom:-26px; transform:translateX(-50%); white-space:nowrap;
  font-size:11px; font-weight:700; color:var(--blue-deep); text-align:center; pointer-events:none }
.compass-legend:not(:empty){ margin-top:6px }

/* empties com mais carinho */
.empty b{ color:var(--ink); font-size:16px }

/* ============ nav lateral (desktop) — escondida por padrão (mobile usa tabbar) ============ */
#sidebar{ display:none }

/* ============ banner de instalação (pílula) — PC + celular + iOS ============ */
.pv-install{ position:fixed; left:50%; transform:translateX(-50%) translateY(24px); z-index:400;
  bottom:calc(90px + env(safe-area-inset-bottom)); width:min(440px,calc(100vw - 28px));
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:14px 16px; display:flex; align-items:center; gap:13px;
  box-shadow:0 26px 60px -18px #1b3a6666; opacity:0; transition:.4s cubic-bezier(.16,1,.3,1) }
.pv-install.show{ transform:translateX(-50%) translateY(0); opacity:1 }
.pv-install-ic{ font-size:26px; flex:none; width:46px; height:46px; border-radius:14px;
  background:linear-gradient(135deg,var(--blue),var(--blue-soft)); display:grid; place-items:center; box-shadow:0 6px 16px #3e9bf055 }
.pv-install-txt{ flex:1; min-width:0; line-height:1.3 }
.pv-install-txt b{ display:block; font-size:14px; font-weight:800; color:var(--ink); margin-bottom:2px }
.pv-install-txt span{ display:block; font-size:12.5px; color:var(--muted); font-weight:500 }
.pv-install-txt .pv-share{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:5px;
  background:var(--mist); color:var(--blue-deep); font-size:12px; vertical-align:-3px }
.pv-install-add{ background:var(--blue); color:#fff; border:none; border-radius:100px; padding:10px 18px; font-weight:700; font-size:14px; flex:none;
  box-shadow:0 10px 22px #3e9bf044; transition:.2s }
.pv-install-add:hover{ background:var(--blue-deep) } .pv-install-add:active{ transform:scale(.96) }
.pv-install-x{ background:none; border:none; color:var(--muted); font-size:15px; flex:none; padding:6px; line-height:1; cursor:pointer }
.pv-install-x:hover{ color:var(--ink) }

/* passo a passo de instalação no iPhone */
.pv-ioshelp{ position:fixed; inset:0; z-index:500; background:#0b1c33aa; backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity .3s; padding:0 12px 12px; }
.pv-ioshelp.show{ opacity:1 }
.pv-ioshelp-card{ width:100%; max-width:440px; background:#fff; border-radius:22px; padding:20px 20px 22px;
  box-shadow:0 -10px 40px #0b1c3355; transform:translateY(20px); transition:transform .35s cubic-bezier(.16,1,.3,1); }
.pv-ioshelp.show .pv-ioshelp-card{ transform:none }
.pv-ioshelp-top{ display:flex; align-items:center; gap:10px; margin-bottom:8px }
.pv-ioshelp-top .ic{ font-size:24px }
.pv-ioshelp-top b{ flex:1; font-size:17px; font-weight:800; color:var(--ink) }
.pv-ioshelp-note{ font-size:13px; color:var(--muted); margin-bottom:14px; line-height:1.5 }
.pv-ioshelp-steps{ list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:12px; margin:0 0 6px }
.pv-ioshelp-steps li{ counter-increment:s; position:relative; padding-left:38px; font-size:14px; color:var(--ink); line-height:1.45 }
.pv-ioshelp-steps li::before{ content:counter(s); position:absolute; left:0; top:-2px; width:26px; height:26px; border-radius:50%;
  background:var(--blue); color:#fff; font-weight:800; font-size:13px; display:grid; place-items:center }
.pv-ioshelp-steps b{ color:var(--blue-deep) }
.pv-ioshelp .pv-install-add{ width:100%; margin-top:14px; padding:13px }

/* =========================================================================
   MOBILE HARDENING — nada pode estourar a largura; toque confortável
   ========================================================================= */
img,svg,canvas,video{ max-width:100% }
input,select,textarea{ max-width:100% }
/* áreas de toque mínimas (44px) */
.tab{ min-height:48px } .link{ min-height:44px; display:inline-flex; align-items:center }
.voice-item .vdel{ min-width:40px; min-height:40px; display:grid; place-items:center }
.pet-pill{ min-height:38px }

/* celulares estreitos (≤ 400px): aperta paddings e evita texto/elemento cortando */
@media(max-width:400px){
  .screen{ padding:22px 16px 26px }
  h2.title{ font-size:26px }
  .insight .stat span{ font-size:10px }
  .log-btn{ font-size:11.5px; padding:12px 2px }
  .compass-wrap{ max-width:230px }
  .compass-legend{ white-space:normal; max-width:90%; line-height:1.3 }
  .care-card .v{ font-size:18px }
  .weight-big{ font-size:32px }
}
/* celulares muito estreitos (≤ 340px): grids de 2 colunas continuam, mas respiram */
@media(max-width:340px){
  .care-grid,.pet-actions{ gap:9px }
  .log-row{ gap:7px }
  .collar-body{ gap:7px }
}

/* =========================================================================
   DESKTOP ≥ 900px — usar a TELA CHEIA: nav lateral + área de conteúdo larga
   ========================================================================= */
@media(min-width:900px){
  body{ padding:0; display:block; background:var(--bg) }
  /* o "telefone" vira o app inteiro: layout de 2 colunas ocupando toda a viewport */
  #phone{ max-width:none; width:100vw; height:100vh; border-radius:0; border:none; box-shadow:none;
    flex-direction:row; background:var(--bg) }

  /* nav lateral fixa */
  #sidebar{ display:flex; flex-direction:column; width:248px; flex:none; height:100%;
    border-right:1px solid var(--line); background:#fff; padding:22px 16px; gap:6px }
  #sidebar[hidden]{ display:none }
  .sb-brand{ display:flex; align-items:center; gap:11px; padding:6px 10px 18px; font-family:'Manrope',sans-serif; font-weight:800; font-size:19px; color:var(--ink) }
  .sb-logo{ width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,var(--blue),var(--blue-soft));
    display:grid; place-items:center; box-shadow:0 7px 18px #3e9bf055; flex:none }
  .sb-logo svg{ width:20px; height:20px }
  .sb-nav{ display:flex; flex-direction:column; gap:4px }
  .sb-item{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; border:none; background:none;
    padding:12px 14px; border-radius:14px; font-family:'Manrope',sans-serif; font-weight:600; font-size:15px; color:var(--muted); transition:.18s }
  .sb-item .sb-ic{ font-size:19px; width:24px; text-align:center; filter:grayscale(.35); opacity:.85; transition:.18s }
  .sb-item:hover{ background:var(--mist); color:var(--ink) }
  .sb-item.active{ background:var(--mist); color:var(--blue-deep); font-weight:800 }
  .sb-item.active .sb-ic{ filter:none; opacity:1 }
  .sb-sep{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
    opacity:.62; padding:14px 14px 5px; margin-top:4px; border-top:1px solid var(--line) }
  .sb-sep:empty{ padding:0; margin-top:8px }

  /* área de conteúdo: ocupa o resto, rola, e centraliza o conteúdo com bom respiro */
  #app{ flex:1; min-width:0; height:100%; background:var(--bg) }
  .screen{ max-width:960px; margin:0 auto; padding:40px 40px 56px; min-height:0 }

  /* esconde a tabbar no desktop (vira a nav lateral) */
  #tabbar{ display:none !important }

  /* títulos respiram um pouco mais */
  h2.title{ font-size:34px }

  /* telas que são essencialmente formulários (auth, add-pet, add-health) não devem
     esticar na largura toda — vira uma coluna central confortável */
  .screen.form-screen{ max-width:520px }

  /* grids em mais colunas quando cabe */
  .care-grid{ grid-template-columns:repeat(4,1fr) }
  #list{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; align-items:start }
  #list .list-item{ margin-bottom:0 }
  #list > .empty, #list > .btn, #list > .day-sep{ grid-column:1 / -1 }
  .log-row{ grid-template-columns:repeat(6,1fr) }

  /* posicionamento dos overlays/toasts ancorados ao "phone" agora full-screen */
  .toast{ bottom:32px }
  .pv-install{ left:auto; right:28px; transform:translateX(0) translateY(24px); bottom:28px }
  .pv-install.show{ transform:translateX(0) translateY(0) }
}

/* desktop largo — conteúdo um pouco mais generoso e pets em 3 colunas */
@media(min-width:1280px){
  .screen{ max-width:1040px; padding:48px 56px 64px }
  #list{ grid-template-columns:repeat(3,1fr) }
}

/* =========================================================================
   FEATURE 1 — TRADUTOR AO VIVO (escutar contínuo: toggle + feed)
   ========================================================================= */
.listen-live .live-head{ margin-bottom:14px }
.listen-live h2.title{ margin:2px 0 6px }
.live-wave{ height:64px; margin:0 0 16px }
.live-toggle{ font-size:17px; padding:18px }
.live-toggle.live-on{ background:#ff4d4d; box-shadow:0 14px 28px #ff4d4d44 }
.live-toggle.live-on:hover{ background:#e53e3e }
.live-state{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:12px;
  font-size:13px; font-weight:700; color:var(--blue-deep) }
.live-dot{ width:10px; height:10px; border-radius:50%; background:#ff4d4d; box-shadow:0 0 0 0 #ff4d4d66; animation:livedot 1.4s infinite }
.live-state.capturing .live-dot{ background:var(--blue); }
@keyframes livedot{ 0%{ box-shadow:0 0 0 0 #ff4d4d66 } 70%{ box-shadow:0 0 0 9px #ff4d4d00 } 100%{ box-shadow:0 0 0 0 #ff4d4d00 } }

/* cartão-resumo "O que o {nome} disse" */
.live-summary{ margin-top:18px; background:linear-gradient(180deg,#fff,var(--mist)); border:1px solid var(--line);
  border-radius:22px; padding:20px; animation:fade .4s cubic-bezier(.16,1,.3,1) }
.live-summary .ls-top{ display:flex; align-items:center; gap:14px }
.live-summary .ls-emoji{ font-size:44px; width:64px; height:64px; border-radius:18px; background:var(--mist2);
  display:grid; place-items:center; flex:none }
.live-summary .ls-lab{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--blue-deep) }
.live-summary .ls-dom{ font-family:'Fraunces',serif; font-size:22px; color:var(--ink); margin-top:2px }
.live-summary .ls-quote{ font-family:'Fraunces',serif; font-style:italic; font-size:21px; line-height:1.3; color:var(--ink); margin:14px 0 4px }
.live-summary .ls-ctx{ display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 2px }
.live-summary .ls-ctx span{ font-size:12px; font-weight:700; color:var(--blue-deep); background:var(--mist2); padding:5px 11px; border-radius:100px }
.live-summary .ls-stats{ display:flex; gap:18px; margin:12px 0 16px; font-size:13px; color:var(--muted) }
.live-summary .ls-stats b{ color:var(--ink); font-weight:800 }
.live-summary .ls-empty{ text-align:center; color:var(--muted); font-size:14px; padding:6px 4px }

/* feed ao vivo das falas detectadas */
.live-feed{ margin-top:18px; display:flex; flex-direction:column; gap:11px }
.lf-item{ display:flex; gap:13px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:14px 15px;
  opacity:0; transform:translateY(-10px); transition:.35s cubic-bezier(.16,1,.3,1) }
.lf-item.in{ opacity:1; transform:none }
.lf-emoji{ font-size:30px; width:50px; height:50px; border-radius:14px; background:var(--mist); display:grid; place-items:center; flex:none }
.lf-body{ flex:1; min-width:0 }
.lf-speech{ font-family:'Fraunces',serif; font-style:italic; font-size:17px; line-height:1.3; color:var(--ink) }
.lf-speech::before{ content:"\201C" } .lf-speech::after{ content:"\201D" }
.lf-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:7px; font-size:11.5px }
.lf-state{ font-weight:800; color:var(--blue-deep) }
.lf-conf{ color:var(--muted) }
.lf-ctx{ font-weight:700; color:var(--blue-deep); background:var(--mist2); padding:3px 9px; border-radius:100px }
.lf-time{ margin-left:auto; color:#9fb0c4; font-weight:600 }

/* =========================================================================
   FEATURE 3 — eventos de hoje (lista com horário + desfazer/cancelar)
   ========================================================================= */
.log-hint{ font-size:13px; color:var(--muted); margin:-4px 0 12px }
.today-events{ margin-bottom:18px }
.ev-title{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:2px 0 10px }
.ev-empty{ font-size:13px; color:var(--muted); padding:2px 0 4px }
.ev-item{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:11px 13px; margin-bottom:8px }
.ev-e{ font-size:20px; flex:none }
.ev-main{ flex:1 } .ev-main b{ font-size:14px } .ev-main span{ display:block; font-size:12px; color:var(--muted) }
.ev-del{ border:none; background:none; font-size:17px; opacity:.55; padding:6px; min-width:40px; min-height:40px; display:grid; place-items:center; cursor:pointer; border-radius:10px }
.ev-del:hover{ opacity:1; background:var(--mist) }

/* toast com botão de ação (Desfazer) */
.toast-action{ display:flex; align-items:center; gap:14px; pointer-events:auto }
.toast-btn{ background:none; border:none; color:var(--blue-soft); font-weight:800; font-size:14px; cursor:pointer; padding:2px 4px; white-space:nowrap }
.toast-btn:hover{ color:#fff }

/* =========================================================================
   FEATURE 4 — foto do pet clara no perfil
   ========================================================================= */
.pet-hero .photo-cta{ width:auto; margin:12px auto 0; padding:10px 18px; font-size:14px }

/* ============================ NOTA DO DIA / EXPLORAR / NOVAS TELAS ============================ */
/* Nota do dia (#1) */
.daily-card{ border:1px solid var(--line); border-radius:22px; padding:18px; background:linear-gradient(170deg,#fff,var(--mist)); margin-bottom:14px;
  box-shadow:0 18px 40px -28px rgba(27,58,102,.28) }
.daily-card .dc-top{ display:flex; align-items:center; gap:12px }
.dc-pic{ width:48px; height:48px; border-radius:14px; object-fit:cover; background:var(--mist2); display:grid; place-items:center; font-size:26px; flex:none }
.dc-id{ flex:1; min-width:0 } .dc-id b{ font-size:17px; display:block } .dc-id span{ font-size:12.5px; color:var(--muted) }
.dc-ring{ position:relative; width:58px; height:58px; flex:none } .dc-ring svg{ width:58px; height:58px } .dc-ring circle{ transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1) }
.dc-num{ position:absolute; inset:0; display:grid; place-items:center } .dc-num b{ font-size:18px; font-weight:800 }
.dc-mood{ display:flex; align-items:center; gap:12px; margin:14px 0 4px } .dc-emoji{ font-size:40px; line-height:1 }
.dc-mood b{ font-size:22px; font-family:'Fraunces',Georgia,serif; font-weight:500 }
.dc-summary{ font-size:14.5px; color:var(--ink); line-height:1.5; margin:8px 0 12px }
.dc-lines{ display:flex; flex-direction:column; gap:7px }
.dc-line{ display:flex; align-items:center; gap:9px; font-size:14px }
.dc-line .dc-ck{ width:20px; height:20px; border-radius:50%; background:#e7f7ef; color:#1a7a4e; display:grid; place-items:center; font-size:12px; flex:none; font-weight:700 }
.dc-line.no .dc-ck{ background:#fff3ee; color:#c2502f } .dc-line .dc-meta{ margin-left:auto; font-size:12.5px; color:var(--muted) }

/* Banner de previsão (#5) */
.predict-banner{ width:100%; text-align:left; display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px; margin-bottom:12px; cursor:pointer;
  border:1px solid #cfe4f7; background:linear-gradient(120deg,#eef6fe,#fff) }
.predict-banner.warn{ border-color:#ffd9c9; background:linear-gradient(120deg,#fff3ee,#fff) }
.predict-banner .pb-ic{ font-size:22px; flex:none } .predict-banner b{ font-size:14.5px; display:block } .predict-banner span{ font-size:12.5px; color:var(--muted) }
.predict-banner .pb-go{ margin-left:auto; font-size:22px; color:var(--muted) }

/* Grid explorar */
.explore-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px }
.explore-cell{ border:1px solid var(--line); border-radius:16px; background:#fff; padding:14px 8px; cursor:pointer; text-align:center; transition:.25s; display:flex; flex-direction:column; align-items:center; gap:2px }
.explore-cell:hover{ border-color:var(--blue); transform:translateY(-2px) }
.explore-cell .ec-ic{ font-size:24px } .explore-cell b{ font-size:13px } .explore-cell span{ font-size:11px; color:var(--muted) }
@media(max-width:360px){ .explore-grid{ grid-template-columns:1fr 1fr } }

/* Memória + previsão */
.mem-pred{ border:1px solid #cfe4f7; background:#f4faff; border-radius:14px; padding:14px 16px; margin-bottom:10px }
.mem-pred.warn{ border-color:#ffd9c9; background:#fff7f3 }
.mem-pred b{ font-size:15px } .mem-pred p{ font-size:13.5px; color:var(--muted); margin-top:5px; line-height:1.5 }
.mem-ins{ display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:14px; padding:13px 15px; margin-bottom:10px; background:#fff }
.mem-ins .mi-ic{ font-size:22px; flex:none } .mem-ins b{ font-size:14.5px } .mem-ins p{ font-size:13px; color:var(--muted); margin-top:3px; line-height:1.45 }
.mem-ins .mi-conf{ font-size:11px; color:var(--blue-deep); font-weight:700 }
.mem-empty{ text-align:center; color:var(--muted); padding:26px 16px; border:1px dashed var(--line); border-radius:14px; font-size:14px }
.mem-empty .big{ font-size:34px; margin-bottom:8px }
.mem-note{ font-size:12.5px; color:var(--muted); margin-top:8px; text-align:center }
.mem-stats{ display:flex; gap:14px; justify-content:center; margin-top:16px; font-size:12.5px; color:var(--muted) }

/* Timeline */
.tl-connection{ display:flex; gap:11px; align-items:flex-start; border:1px solid #cfe4f7; background:#f4faff; border-radius:14px; padding:13px 15px; margin-bottom:14px }
.tl-connection span{ font-size:20px } .tl-connection p{ font-size:13.5px; color:var(--ink); line-height:1.5 }
.timeline{ position:relative; margin-top:16px; padding-left:6px }
.tl-item{ display:flex; gap:14px; align-items:flex-start; position:relative; padding-bottom:18px }
.tl-item::before{ content:""; position:absolute; left:18px; top:36px; bottom:-2px; width:2px; background:var(--line) }
.tl-item:last-child::before{ display:none }
.tl-dot{ width:38px; height:38px; border-radius:50%; background:var(--mist); display:grid; place-items:center; font-size:18px; flex:none; border:1px solid var(--line); z-index:1 }
.tl-body{ flex:1; padding-top:4px } .tl-body b{ font-size:15px; display:block } .tl-date{ font-size:12px; color:var(--muted) }
.tl-body p{ font-size:13px; color:var(--muted); margin-top:4px } .tl-del{ background:none; border:none; color:#c2502f; font-size:12px; cursor:pointer; padding:4px 0; margin-top:2px }

/* Família */
.fam-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:8px }
.fam-item{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:#fff }
.fam-ava{ width:38px; height:38px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:800; flex:none }
.fam-id{ flex:1; min-width:0 } .fam-id b{ font-size:14.5px; display:block } .fam-id span{ font-size:12px; color:var(--muted) }
.fam-role{ font-size:11px; font-weight:700; color:var(--blue-deep); background:var(--mist); padding:4px 10px; border-radius:100px; flex:none }
.fam-del{ background:none; border:none; color:var(--muted); font-size:15px; cursor:pointer; flex:none; padding:4px }

/* Mapa da casa */
.room-fav{ font-size:13.5px; color:var(--ink); background:var(--mist); border-radius:12px; padding:11px 14px; margin-bottom:14px }
.room-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.room-cell{ border:1px solid var(--line); border-radius:16px; padding:16px 12px; text-align:center; background:#fff }
.room-cell .rc-emoji{ font-size:32px; display:block } .room-cell b{ font-size:15px; display:block; margin-top:4px } .room-cell .rc-mood{ font-size:12px; color:var(--muted) }

/* tag de contexto da voz (#4) */
.voice-item .vctx{ display:block; font-size:11px; color:var(--blue-deep); font-weight:600; margin-top:2px }
.lr-actions{ display:flex; flex-direction:column; gap:10px; margin-top:16px }

/* ============================ GUARDIÃO DA SAÚDE (detecção precoce) ============================ */
.guard{ width:100%; text-align:left; display:flex; align-items:center; gap:13px; padding:15px 16px; border-radius:18px; margin-bottom:14px; cursor:pointer;
  border:1px solid var(--line); background:#fff; transition:.25s }
.guard:active{ transform:scale(.99) }
.guard .g-ic{ font-size:26px; flex:none }
.guard .g-txt{ flex:1; min-width:0 } .guard .g-txt b{ display:block; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted) }
.guard .g-txt span{ display:block; font-size:14.5px; color:var(--ink); line-height:1.4; margin-top:2px }
.guard .g-go{ font-size:22px; color:var(--muted); flex:none }
.guard .g-n{ display:grid; place-items:center; min-width:24px; height:24px; border-radius:50%; background:#e2554e; color:#fff; font-size:13px; font-weight:800 }
.guard-ok{ background:linear-gradient(120deg,#f1f9f4,#fff); border-color:#bce8cf } .guard-ok .g-txt span{ color:#1c7a4a }
.guard-leve{ background:linear-gradient(120deg,#eef6fe,#fff); border-color:#cfe4f7 }
.guard-atencao{ background:linear-gradient(120deg,#fff8f3,#fff); border-color:#f6c9a8 } .guard-atencao .g-txt span{ color:#a8581f }
.guard-alerta{ background:linear-gradient(120deg,#fdecea,#fff); border-color:#f3b4ab } .guard-alerta .g-txt span{ color:#c4361f; font-weight:600 }
.guard-aprendendo{ background:var(--mist) } .guard-aprendendo .g-txt span{ color:var(--muted) }
/* o ícone do Guardião pulsa de leve quando há algo a observar */
.guard-atencao .g-ic{ animation:gbeat 2.4s ease-in-out infinite }
.guard-alerta{ animation:gglow 2.2s ease-in-out infinite } .guard-alerta .g-ic{ animation:gbeat 1.5s ease-in-out infinite }
@keyframes gbeat{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.14) } }
@keyframes gglow{ 0%,100%{ box-shadow:0 0 0 0 rgba(196,54,31,0) } 50%{ box-shadow:0 6px 24px rgba(196,54,31,.20) } }

/* ---- skeleton de carregamento (parece mais rápido + premium) ---- */
.sk{ border-radius:14px; background:linear-gradient(90deg,#eef2f7 25%,#f6f9fc 50%,#eef2f7 75%);
  background-size:200% 100%; animation:shimmer 1.3s linear infinite }
.sk-bar{ height:62px; border-radius:18px; margin-bottom:14px }
.sk-card{ height:188px; border-radius:22px; margin-bottom:14px }
.sk-title{ height:13px; width:38%; margin:18px 0 12px; border-radius:7px }
.sk-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.sk-cell{ height:92px; border-radius:18px }
@media(min-width:980px){ .sk-grid{ grid-template-columns:repeat(4,1fr) } }
@media(prefers-reduced-motion:reduce){ .sk{ animation:none } }

/* entrada em cascata dos cards (Cuidados + Explorar) — sensação dinâmica e premium */
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.97) } to{ opacity:1; transform:none } }
.today .care-grid .care-card, .today .explore-grid .explore-cell{ animation:pop .55s cubic-bezier(.16,1,.3,1) backwards }
.today .care-grid .care-card:nth-child(1){ animation-delay:.04s } .today .care-grid .care-card:nth-child(2){ animation-delay:.10s }
.today .care-grid .care-card:nth-child(3){ animation-delay:.16s } .today .care-grid .care-card:nth-child(4){ animation-delay:.22s }
.today .explore-grid .explore-cell:nth-child(1){ animation-delay:.05s } .today .explore-grid .explore-cell:nth-child(2){ animation-delay:.10s }
.today .explore-grid .explore-cell:nth-child(3){ animation-delay:.15s } .today .explore-grid .explore-cell:nth-child(4){ animation-delay:.20s }
.today .explore-grid .explore-cell:nth-child(5){ animation-delay:.25s } .today .explore-grid .explore-cell:nth-child(6){ animation-delay:.30s }
@media(prefers-reduced-motion:reduce){
  .guard-atencao .g-ic,.guard-alerta,.guard-alerta .g-ic,.today .care-card,.today .explore-cell{ animation:none !important }
}

.gs-sheet{ max-height:84vh; overflow:auto }
.gs-head{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; margin-bottom:12px; background:var(--mist) }
.gs-head.gs-ok{ background:#f1f9f4 } .gs-head.gs-atencao{ background:#fff8f3 } .gs-head.gs-alerta{ background:#fdecea }
.gs-head .gs-emoji{ font-size:30px } .gs-head b{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted) }
.gs-head > div span{ display:block; font-size:15.5px; color:var(--ink); margin-top:2px; line-height:1.35 }
.gs-note{ font-size:12.5px; color:var(--muted); line-height:1.5; margin-bottom:14px }
.gs-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px }
.gs-sig{ display:flex; gap:11px; align-items:flex-start; border:1px solid var(--line); border-radius:13px; padding:12px 14px; background:#fff }
.gs-sig.gs-warn{ border-color:#f3b4ab; background:#fff7f5 } .gs-sig span{ font-size:18px; flex:none }
.gs-sig b{ font-size:14.5px } .gs-sig p{ font-size:13px; color:var(--muted); margin-top:3px; line-height:1.45 }
.gs-sig .gs-num{ display:inline-block; font-size:11.5px; color:var(--blue-deep); font-weight:700; margin-top:5px }
.gs-sig > div{ flex:1; min-width:0 }
.gs-spark{ margin-top:9px }
.gs-spark svg{ width:100%; height:46px; display:block }
.gs-spark-x{ display:flex; justify-content:space-between; font-size:9.5px; color:var(--muted); margin-top:3px; letter-spacing:.02em }
.gs-spark-x .gs-base{ color:#9aa7b4; font-weight:700 }
.gs-empty{ text-align:center; color:var(--muted); padding:24px 14px; font-size:14.5px; line-height:1.5 }

/* ============ MODO TREINAR (flywheel de rotulagem) ============ */
.train-prog{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin-bottom:12px }
.train-prog .tp-top{ display:flex; align-items:baseline; gap:9px; margin-bottom:9px }
.train-prog .tp-top b{ font-family:'Fraunces',serif; font-size:22px; color:var(--blue-deep) }
.train-prog .tp-top span{ font-size:12.5px; color:var(--muted) }
.train-prog .tp-bar{ height:9px; border-radius:6px; background:#eef2f7; overflow:hidden }
.train-prog .tp-bar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--blue),#2BCC7A); transition:width .6s cubic-bezier(.16,1,.3,1) }
.train-collar{ font-size:12.5px; color:var(--muted); background:var(--mist); border:1px solid var(--line); border-radius:12px; padding:10px 13px; margin-bottom:14px; line-height:1.4 }
.train-collar.on{ background:#f1f9f4; border-color:#bce8cf; color:#1c7a4a; font-weight:600 }
.behavior-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px }
@media(min-width:560px){ .behavior-grid{ grid-template-columns:1fr 1fr 1fr 1fr } }
.beh{ position:relative; border:1px solid var(--line); border-radius:18px; background:#fff; padding:18px 10px 14px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:5px; transition:.2s }
.beh:hover{ border-color:var(--blue); transform:translateY(-2px); box-shadow:0 14px 30px -22px var(--blue) }
.beh:active{ transform:scale(.97) }
.beh .be{ font-size:30px } .beh b{ font-size:14.5px }
.beh .bc{ position:absolute; top:8px; right:10px; font-size:11px; font-weight:800; color:var(--muted);
  min-width:18px; height:18px; border-radius:9px; background:var(--mist); display:grid; place-items:center; padding:0 5px }
.rec-card{ display:flex; align-items:center; gap:12px; background:linear-gradient(120deg,#eef6fe,#fff); border:1.5px solid var(--blue);
  border-radius:18px; padding:14px 16px; margin-bottom:14px; animation:fade .3s }
.rec-card .rec-emoji{ font-size:30px; animation:recpulse 1.2s ease-in-out infinite }
@keyframes recpulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.15) } }
.rec-mid{ flex:1; min-width:0 } .rec-mid b{ display:block; font-size:15px } .rec-mid .rec-time{ font-family:'Fraunces',serif; font-size:20px; color:var(--blue-deep); font-variant-numeric:tabular-nums }
.rec-card .rec-done{ padding:11px 18px; font-size:14px }
.rec-cancel{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:15px; cursor:pointer; flex:none }
.train-tip{ font-size:12.5px; color:var(--muted); text-align:center; margin-top:16px; line-height:1.5 }

/* ============ ONBOARDING (guiado · cinematográfico) ============ */
.onb{ justify-content:flex-start }
.onb-prog{ height:5px; border-radius:5px; background:#eef2f7; overflow:hidden; margin-bottom:10px }
.onb-prog i{ display:block; height:100%; width:0; border-radius:5px; background:linear-gradient(90deg,var(--blue),#2BCC7A); transition:width .5s cubic-bezier(.16,1,.3,1) }
.onb-body{ flex:1; display:flex; flex-direction:column }
.onb-step{ flex:1; display:flex; flex-direction:column; opacity:0; transform:translateY(14px); padding-top:6px;
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1) }
.onb-step.in{ opacity:1; transform:none }
.onb-center{ justify-content:center; text-align:center; align-items:center }
.onb-eyebrow{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:8px }
.onb-h{ font-family:'Fraunces',serif; font-size:clamp(30px,8.5vw,40px); line-height:1.05; letter-spacing:-.02em }
.onb-h em{ font-style:italic; color:var(--blue-deep) }
.onb-p{ color:var(--muted); font-size:16px; margin:16px 0 26px; line-height:1.55; max-width:31ch }
.onb-step>.btn{ margin-top:auto } .onb-center>.btn{ margin-top:6px; min-width:240px }
.onb-orb{ width:124px;height:124px;border-radius:50%; display:grid;place-items:center; font-size:56px; margin:0 auto 26px;
  background:radial-gradient(circle at 35% 30%,#fff,var(--mist) 58%,var(--mist2)); box-shadow:0 30px 60px -24px #3e9bf077, inset 0 0 0 1px #fff;
  animation:onbFloat 4s ease-in-out infinite } .onb-orb.sm{ width:98px;height:98px; font-size:44px }
@keyframes onbFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
.onb-species{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px }
.sp-card{ border:1.5px solid var(--line); border-radius:24px; background:#fff; padding:32px 14px; display:flex; flex-direction:column; align-items:center; gap:10px; transition:.25s }
.sp-card:hover{ border-color:var(--blue); transform:translateY(-3px); box-shadow:0 24px 50px -34px var(--blue) }
.sp-card:active{ transform:scale(.97) } .sp-card .spe{ font-size:52px } .sp-card b{ font-size:18px }
.onb-input{ width:100%; padding:18px; border:1.5px solid var(--line); border-radius:16px; font-size:20px; font-family:inherit; margin-top:24px; transition:.2s }
.onb-input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px #3e9bf01f }
.onb-input.sm{ font-size:16px; padding:14px 16px; margin-top:12px }
.onb-input.shake{ animation:obshake .4s } @keyframes obshake{ 0%,100%{transform:none} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.onb-photo{ position:relative; width:150px; height:150px; margin:30px auto 0 }
.onb-avatar{ width:150px;height:150px;border-radius:42px; background-size:cover; background-position:center; display:grid; place-items:center; font-size:64px; background-color:var(--mist); border:1px solid var(--line) }
.onb-avatar.empty{ color:var(--blue-soft) }
.onb-pickbtn{ position:absolute; right:-6px; bottom:-6px; width:46px;height:46px;border-radius:50%; background:var(--blue); color:#fff; border:3px solid #fff; font-size:20px; box-shadow:0 10px 22px #3e9bf066 }
.onb-skip{ background:none; border:none; color:var(--muted); font-weight:600; font-size:15px; padding:14px; margin-top:4px }
.onb-power{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px; margin-top:12px }
.onb-power .pwe{ font-size:28px; flex:none } .onb-power b{ font-size:16px } .onb-power span{ display:block; font-size:13.5px; color:var(--muted); margin-top:3px; line-height:1.45 }
.onb-fin .onb-confetti{ font-size:70px; margin-bottom:8px; animation:onbPop .6s cubic-bezier(.2,1.4,.4,1) }
@keyframes onbPop{ from{ transform:scale(0); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* ============ PRIMEIROS PASSOS (checklist na Hoje) ============ */
.ob-card{ background:linear-gradient(160deg,#fff,var(--mist)); border:1px solid var(--line); border-radius:20px; padding:16px; margin-bottom:14px }
.ob-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px }
.ob-head b{ font-size:15px } .ob-head span{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px }
.ob-x{ background:none; border:none; color:var(--muted); font-size:14px; width:28px;height:28px; border-radius:50%; flex:none }
.ob-bar{ height:7px; border-radius:6px; background:#eef2f7; overflow:hidden; margin:11px 0 12px }
.ob-bar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--blue),#2BCC7A); transition:width .6s }
.ob-step{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-radius:13px; padding:11px 13px; margin-top:8px; transition:.2s }
.ob-step:not(.ok):hover{ border-color:var(--blue); transform:translateX(2px) }
.ob-step.ok{ background:var(--mist); opacity:.7 } .ob-step.ok .ob-t{ text-decoration:line-through; color:var(--muted) }
.ob-ck{ width:22px;height:22px;border-radius:50%; flex:none; display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; background:var(--line) }
.ob-step.ok .ob-ck{ background:var(--ok) } .ob-e{ font-size:18px } .ob-t{ flex:1; font-size:14.5px; font-weight:600 } .ob-go{ color:var(--muted); font-size:18px }

/* ============ GUIA "COMO FUNCIONA" (acordeão) ============ */
.guide{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px }
.gd-sec{ border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; transition:.2s }
.gd-sec.open{ border-color:var(--blue-soft); box-shadow:0 16px 36px -28px var(--blue) }
.gd-head{ width:100%; display:flex; align-items:center; gap:12px; padding:15px; background:none; border:none; text-align:left }
.gd-ic{ font-size:23px; flex:none } .gd-t{ flex:1; font-weight:700; font-size:15.5px }
.gd-ch{ color:var(--muted); transition:.3s; font-size:13px } .gd-sec.open .gd-ch{ transform:rotate(180deg); color:var(--blue) }
.gd-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; padding:0 15px }
.gd-sec.open .gd-body{ max-height:440px; padding:0 15px 16px }
.gd-d{ color:var(--muted); font-size:14px; margin-bottom:11px; line-height:1.5 }
.gd-steps{ margin:0 0 12px; padding-left:0; list-style:none; counter-reset:gd }
.gd-steps li{ counter-increment:gd; display:flex; gap:10px; font-size:14px; margin-bottom:9px; align-items:flex-start; line-height:1.45 }
.gd-steps li::before{ content:counter(gd); flex:none; width:22px;height:22px;border-radius:50%; background:var(--mist); color:var(--blue-deep); display:grid; place-items:center; font-size:12px; font-weight:800 }
.gd-open{ width:100% }