@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Libre+Caslon+Display&display=swap");
:root {
  --paper: #f7f5ed;
  --ink: #22251f;
  --muted: #777b71;
  --line: #dedfd5;
  --purple: #e8dafa;
  --blue: #3e83f5;
  --mint: #c9edda;
  --yellow: #eaf68a;
  --pink: #f2cde4;
  --serif: "Libre Caslon Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
}
button,
input,
textarea {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}
button {
  background: none;
  border: 0;
}
svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
  flex-shrink: 0;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
}
h1 {
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -1.4px;
}
h2 {
  font-size: 34px;
  line-height: 1.1;
}
h3 {
  font-size: 25px;
}
p {
  line-height: 1.6;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 12px;
  color: var(--muted);
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.9px;
  font-weight: 700;
  display: block;
  margin-bottom: 17px;
}
.shell {
  display: flex;
  min-height: 100dvh;
}
.sidebar {
  width: 232px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  padding: 39px 26px 26px;
  position: fixed;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
.brand {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 57px;
  letter-spacing: -3px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.brand-dot {
  width: 10px;
  height: 10px;
  background: var(--blue);
  border-radius: 50%;
  align-self: flex-start;
  margin-top: 9px;
}
.brand-caption {
  font-size: 8px;
  letter-spacing: 1.4px;
  margin-top: 16px;
  color: var(--muted);
}
.side-nav {
  display: grid;
  gap: 9px;
  margin-top: 53px;
}
.side-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 13px;
  border-radius: 7px;
  color: #777b71;
  font-size: 13px;
}
.side-nav a.active {
  background: var(--purple);
  color: var(--ink);
  font-weight: 650;
}
.side-note {
  margin-top: auto;
  padding: 30px 6px;
}
.side-note img {
  margin-bottom: 17px;
}
.side-note h3 {
  font-size: 25px;
  margin-bottom: 10px;
}
.side-note p {
  font-size: 12px;
  color: var(--muted);
}
.privacy-button {
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 20px 0 0;
  font-size: 11px;
  color: var(--muted);
}
.workspace {
  margin-left: 232px;
  min-width: 0;
  flex: 1;
}
.topbar {
  height: 88px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
}
.breadcrumb {
  font-size: 11px;
  color: var(--muted);
}
.breadcrumb b {
  font-weight: 500;
  color: var(--ink);
  margin-left: 6px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.local-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
}
.local-label svg {
  width: 14px;
}
.avatar {
  background: var(--pink);
  border: 1px solid #26291f;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 11px;
}
.mobile-brand {
  display: none;
}
main {
  max-width: 1370px;
  margin: auto;
  padding: 42px 48px 28px;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}
.page-heading p {
  margin-top: 15px;
  color: var(--muted);
}
.date-chip {
  font-size: 11px;
  border: 1px solid var(--line);
  padding: 10px 13px;
  border-radius: 30px;
  white-space: nowrap;
  display: flex;
  gap: 8px;
  align-items: center;
}
.date-chip svg {
  width: 14px;
}
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, 1fr);
  gap: 26px;
}
.checkin-card {
  border: 1px solid var(--ink);
  border-radius: 14px;
  padding: 30px;
  position: relative;
  min-height: 330px;
}
.checkin-card .spark {
  position: absolute;
  right: 22px;
  top: 22px;
  width: 75px;
  height: 75px;
}
.checkin-card h2 {
  font-size: 41px;
  max-width: 300px;
}
.checkin-card > p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
}
.moods {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 28px 0 25px;
}
.mood {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  flex: 1;
  font-size: 10px;
  white-space: nowrap;
}
.mood-face {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--mood);
}
.mood-face svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.4;
}
.mood.selected .mood-face {
  outline: 3px solid #b38cdb;
  outline-offset: 4px;
}
.mood.selected {
  font-weight: 700;
}
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 15px 22px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 12px;
  min-height: 46px;
}
.button svg {
  color: var(--yellow);
}
.button.wide {
  width: 100%;
  justify-content: space-between;
}
.button.outline {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
}
.button.outline svg {
  color: var(--ink);
}
.text-button {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.aside-stack {
  display: flex;
  flex-direction: column;
}
.voice-card {
  padding: 22px 0 26px;
  border-bottom: 1px solid var(--line);
}
.voice-card .eyebrow {
  margin-bottom: 15px;
}
.voice-card h2 {
  font-size: 31px;
  max-width: 250px;
}
.voice-card p {
  font-size: 12px;
  color: var(--muted);
  margin: 11px 0 22px;
}
.voice-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mic-circle {
  background: var(--blue);
  color: white;
  border: 1px solid var(--ink);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}
.insight-mini {
  padding-top: 25px;
}
.insight-mini p {
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0 14px;
}
.section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 32px 0 15px;
}
.section-row h2 {
  font-size: 27px;
}
.section-row .text-button {
  font-size: 10px;
}
.recent-list {
  border-top: 1px solid var(--line);
}
.entry-row {
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid var(--line);
  padding: 17px 0;
  width: 100%;
  text-align: left;
}
.entry-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mint);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.entry-row .entry-copy {
  min-width: 0;
  flex: 1;
}
.entry-row strong {
  display: block;
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.entry-row small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
}
.pill {
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 10px;
  padding: 6px 10px;
}
.entry-row > svg {
  width: 15px;
}
.footer-note {
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 10px;
  margin-top: 23px;
}
.footer-note svg {
  width: 13px;
  height: 13px;
}
.bottom-nav {
  display: none;
}
.empty {
  padding: 23px 0;
  color: var(--muted);
  font-size: 13px;
}
.empty p {
  max-width: 420px;
  margin: 8px 0 18px;
}
.demo-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 22px;
}
.badge {
  font-size: 9px;
  letter-spacing: 1px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 9px;
  color: var(--ink);
}
.filters {
  display: flex;
  gap: 8px;
  margin: 20px 0;
}
.chip {
  border: 1px solid var(--line);
  border-radius: 25px;
  padding: 10px 15px;
  font-size: 12px;
  background: transparent;
}
.chip.selected {
  background: var(--purple);
  border-color: var(--ink);
}
.search {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 14px;
  gap: 10px;
  max-width: 420px;
}
.search input {
  background: none;
  border: 0;
  padding: 14px 0;
  outline: 0;
  width: 100%;
  color: var(--ink);
}
.flow {
  max-width: 570px;
  margin: 0 auto;
}
.flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.back {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.steps {
  display: flex;
  gap: 6px;
}
.steps span {
  height: 3px;
  width: 27px;
  background: var(--line);
  border-radius: 4px;
}
.steps span.on {
  background: var(--ink);
}
.flow h1 {
  font-size: 48px;
  margin: 0 0 14px;
}
.flow .intro {
  color: var(--muted);
  margin-bottom: 28px;
}
.flow .moods {
  margin: 35px 0;
}
.field-label {
  font-size: 12px;
  font-weight: 600;
  display: block;
  margin: 22px 0 12px;
}
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.flow-footer {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}
.flow-footer .button {
  flex: 1;
}
.flow textarea {
  width: 100%;
  resize: vertical;
  min-height: 130px;
  max-height: 230px;
  padding: 17px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: transparent;
  line-height: 1.6;
}
.counter {
  text-align: right;
  font-size: 10px;
  color: var(--muted);
  margin-top: 5px;
}
.recorder {
  text-align: center;
  padding: 25px 0 12px;
}
.record-button {
  width: 96px;
  height: 96px;
  background: var(--blue);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: auto auto 20px;
}
.record-button svg {
  width: 38px;
  height: 38px;
}
.record-button.recording {
  background: #ad4747;
}
.recorder p {
  font-size: 12px;
  color: var(--muted);
}
audio {
  width: 100%;
  height: 42px;
  margin: 14px 0;
}
.summary {
  margin: 25px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.summary p {
  margin-bottom: 12px;
}
.success {
  text-align: center;
  padding: 45px 0;
}
.success img {
  width: 100px;
  height: 100px;
  margin-bottom: 28px;
}
.success p {
  margin: 20px auto 30px;
  max-width: 340px;
}
.patterns-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 35px;
}
.trend {
  border-top: 1px solid var(--line);
  padding-top: 25px;
}
.chart {
  display: flex;
  height: 185px;
  align-items: flex-end;
  gap: 12px;
  padding: 20px 8px 25px;
  border-bottom: 1px solid var(--line);
  margin: 15px 0 25px;
}
.chart-col {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  gap: 10px;
}
.chart-bar {
  background: var(--purple);
  border: 1px solid var(--ink);
  border-radius: 20px;
  width: 25px;
  min-height: 8px;
}
.chart-col.today .chart-bar {
  background: var(--mint);
}
.chart-col small {
  position: absolute;
  bottom: -21px;
  font-size: 10px;
}
.insight-card {
  background: #ede5f4;
  border: 1px solid #c3afd5;
  border-radius: 12px;
  padding: 27px;
  margin-top: 15px;
}
.insight-card h2 {
  font-size: 32px;
}
.insight-card p {
  font-size: 12px;
  margin: 15px 0;
}
.metrics {
  display: flex;
  gap: 35px;
  margin-top: 27px;
}
.metric strong {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  display: block;
}
.metric span {
  font-size: 11px;
  color: var(--muted);
}
.detail-note {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.8;
  margin: 24px 0;
}
.detail-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.toast-visible {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}
#toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  background: var(--ink);
  color: white;
  border-radius: 8px;
  padding: 14px 22px;
  opacity: 0;
  transform: translate(-50%, 15px);
  transition: 0.2s;
  pointer-events: none;
  z-index: 20;
  font-size: 12px;
}
dialog {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 14px;
  padding: 35px;
  max-width: 470px;
  width: calc(100% - 32px);
}
dialog::backdrop {
  background: #20231d60;
}
dialog p {
  margin-top: 17px;
  font-size: 13px;
}
.dialog-close {
  position: absolute;
  right: 13px;
  top: 13px;
}
.error {
  color: #a03232;
  margin: 16px 0;
  font-size: 13px;
}
.loading {
  padding: 60px;
  color: var(--muted);
}
@media (min-width: 1500px) {
  main {
    padding-top: 55px;
  }
  .checkin-card {
    padding: 38px;
  }
  .checkin-card h2 {
    font-size: 46px;
  }
  .moods {
    margin: 40px 0;
  }
  .mood-face {
    width: 55px;
    height: 55px;
  }
  .home-grid {
    gap: 45px;
  }
}
@media (max-width: 1100px) {
  .sidebar {
    width: 195px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .workspace {
    margin-left: 195px;
  }
  main {
    padding: 30px;
  }
  .topbar {
    padding: 0 30px;
  }
  .checkin-card {
    padding: 23px;
  }
  .checkin-card .spark {
    width: 55px;
    height: 55px;
    right: 10px;
    top: 10px;
  }
  .checkin-card h2 {
    font-size: 35px;
    max-width: 230px;
  }
  .home-grid {
    gap: 23px;
    grid-template-columns: 1.25fr 1fr;
  }
  .mood-face {
    width: 38px;
    height: 38px;
  }
  .mood {
    font-size: 9px;
  }
  h1 {
    font-size: 48px;
  }
}
@media (max-width: 760px) {
  body {
    font-size: 14px;
  }
  .sidebar,
  .breadcrumb,
  .local-label {
    display: none;
  }
  .workspace {
    margin-left: 0;
  }
  .shell {
    min-height: 100dvh;
  }
  .topbar {
    height: 77px;
    margin: 0 22px;
    padding: 0;
    border-bottom: 1px solid var(--ink);
  }
  .mobile-brand {
    display: flex;
    font-size: 42px;
  }
  .brand-dot {
    height: 7px;
    width: 7px;
    margin-top: 6px;
  }
  .avatar {
    width: 31px;
    height: 31px;
  }
  main {
    padding: 26px 22px 95px;
  }
  .page-heading {
    margin-bottom: 25px;
  }
  .page-heading h1 {
    font-size: 40px;
    letter-spacing: -0.7px;
  }
  .page-heading p {
    font-size: 12px;
    margin-top: 10px;
  }
  .date-chip {
    display: none;
  }
  .home-grid {
    display: flex;
    flex-direction: column;
    gap: 21px;
  }
  .checkin-card {
    border: 0;
    padding: 0;
    min-height: 0;
  }
  .checkin-card .eyebrow {
    margin-bottom: 16px;
  }
  .checkin-card h2 {
    font-size: 43px;
    max-width: 280px;
  }
  .checkin-card .spark {
    width: 59px;
    height: 59px;
    right: 0;
    top: 17px;
  }
  .checkin-card > p {
    font-size: 12px;
  }
  .moods {
    margin: 26px 0;
  }
  .mood-face {
    width: 43px;
    height: 43px;
  }
  .mood {
    font-size: 10px;
  }
  .home-page > .page-heading {
    display: none;
  }
  .aside-stack {
    display: block;
  }
  .voice-card {
    padding: 0;
    border: 0;
  }
  .voice-card .eyebrow,
  .voice-card h2,
  .voice-card > p {
    display: none;
  }
  .voice-bottom {
    border: 1px solid var(--ink);
    border-radius: 6px;
    padding: 11px 14px;
  }
  .voice-bottom .text-button {
    text-decoration: none;
    font-size: 12px;
  }
  .mic-circle {
    height: 30px;
    width: 30px;
    background: transparent;
    color: var(--ink);
    border: 0;
  }
  .insight-mini {
    display: none;
  }
  .section-row {
    margin: 27px 0 10px;
  }
  .section-row h2 {
    font-size: 25px;
  }
  .entry-row {
    padding: 14px 0;
    gap: 12px;
  }
  .entry-row .pill {
    display: none;
  }
  .entry-row strong {
    font-size: 12px;
  }
  .footer-note {
    display: none;
  }
  .home-page .recent-list .entry-row:nth-child(n + 3) {
    display: none;
  }
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: 9px 20px max(10px, env(safe-area-inset-bottom));
    height: 73px;
    z-index: 10;
    justify-content: space-around;
  }
  .bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 72px;
    font-size: 10px;
    color: var(--muted);
  }
  .bottom-nav a svg {
    width: 22px;
    height: 22px;
  }
  .bottom-nav a.active {
    color: var(--ink);
    font-weight: 700;
  }
  .bottom-nav a.active svg {
    background: var(--purple);
    box-sizing: content-box;
    padding: 3px 22px;
    border-radius: 20px;
    margin-top: -3px;
    margin-bottom: -3px;
  }
  .flow-top {
    margin-bottom: 30px;
  }
  .flow h1 {
    font-size: 41px;
  }
  .flow .intro {
    font-size: 13px;
    margin-bottom: 20px;
  }
  .flow .moods {
    margin: 29px 0;
  }
  .flow-footer {
    margin-top: 28px;
  }
  .flow .chips {
    gap: 8px;
  }
  .flow .chip {
    padding: 9px 13px;
    font-size: 11px;
  }
  .field-label {
    margin-top: 22px;
  }
  .flow textarea {
    min-height: 120px;
  }
  .recorder {
    padding-top: 18px;
  }
  .record-button {
    width: 87px;
    height: 87px;
  }
  .patterns-layout {
    display: block;
  }
  .trend {
    padding-top: 17px;
  }
  .chart {
    height: 135px;
    margin: 8px 0 25px;
  }
  .insight-card {
    padding: 20px;
    margin-top: 20px;
  }
  .insight-card h2 {
    font-size: 29px;
  }
  .insight-card p {
    margin: 12px 0;
  }
  .patterns-page .page-heading h1 {
    font-size: 39px;
  }
  .patterns-page .page-heading {
    margin-bottom: 20px;
  }
  .patterns-page .metrics {
    display: none;
  }
  .patterns-page .eyebrow {
    margin-bottom: 12px;
  }
  .patterns-page .trend h3 {
    font-size: 24px;
  }
  .patterns-page .insight-card .text-button {
    margin-top: 0;
  }
  .demo-notice {
    margin-bottom: 16px;
    font-size: 10px;
  }
  .filters {
    margin: 17px 0;
  }
  .diary-new {
    font-size: 0;
    padding: 12px;
    min-height: 42px;
  }
  .diary-new svg {
    width: 19px;
  }
  .success {
    padding-top: 25px;
  }
  #toast {
    bottom: 90px;
    width: max-content;
    max-width: 90%;
  }
  .summary {
    margin: 17px 0;
  }
  .detail-note {
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
@media (max-width: 760px) {
  .patterns-page .page-heading h1 {
    font-size: 34px;
    line-height: 1.04;
  }
  .patterns-page .page-heading p {
    display: none;
  }
  .patterns-page .page-heading {
    margin-bottom: 17px;
  }
  .patterns-page .chart {
    height: 115px;
    margin-top: 4px;
    margin-bottom: 18px;
  }
  .patterns-page .insight-card {
    margin-top: 15px;
    padding: 18px;
  }
  .patterns-page .insight-card p {
    margin: 10px 0;
    font-size: 11px;
  }
  .patterns-page .insight-card h2 {
    font-size: 27px;
  }
  .patterns-page .demo-notice {
    margin-bottom: 13px;
  }
  .patterns-page .trend {
    padding-top: 14px;
  }
}
/* Account access and printed-paper illustrations */
.auth-active .sidebar,
.auth-active .topbar,
.auth-active .bottom-nav {
  display: none;
}
.auth-active .workspace {
  margin: 0;
}
.auth-active main {
  max-width: none;
  padding: 0;
}
.auth-layout {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-story {
  background: #dce6b4;
  border-right: 1px solid var(--ink);
  padding: 45px 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.auth-story > .eyebrow {
  margin-top: 65px;
}
.auth-embrace {
  width: 250px;
  height: 250px;
  object-fit: contain;
  align-self: center;
  margin: -10px 0 13px;
}
.auth-story h1 {
  font-size: 68px;
  line-height: 1.02;
}
.auth-story > p {
  font-size: 14px;
  margin-top: 23px;
  line-height: 1.7;
}
.auth-story-footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.4px;
  border-top: 1px solid #929b75;
  padding-top: 18px;
  margin-top: auto;
  gap: 30px;
}
.auth-panel {
  max-width: 520px;
  width: 100%;
  padding: 64px 45px 40px;
  margin: auto;
}
.auth-tabs {
  display: flex;
  border: 1px solid var(--ink);
  border-radius: 7px;
  margin-bottom: 39px;
  padding: 4px;
  gap: 4px;
}
.auth-tabs button {
  padding: 11px 18px;
  flex: 1;
  font-size: 12px;
  border-radius: 3px;
}
.auth-tabs button.selected {
  background: var(--ink);
  color: var(--paper);
}
.auth-heading h1 {
  font-size: 48px;
  line-height: 1.06;
}
.auth-heading p {
  font-size: 12px;
  color: var(--muted);
  margin: 16px 0 28px;
}
.auth-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin: 18px 0 9px;
}
#auth-form input {
  display: block;
  width: 100%;
  height: 49px;
  padding: 12px 14px;
  border: 1px solid #93968a;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
}
.password-field {
  position: relative;
}
.password-field input {
  padding-right: 52px !important;
}
.password-field button {
  position: absolute;
  right: 0;
  top: 0;
  height: 49px;
  width: 48px;
  display: grid;
  place-items: center;
}
.password-hint {
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px;
}
.auth-submit {
  margin-top: 21px;
}
.auth-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 10px;
  color: var(--muted);
  margin: 23px 0 17px;
}
.auth-privacy svg {
  width: 13px;
  height: 13px;
}
.auth-about {
  display: block;
  margin: auto;
  font-size: 11px;
}
.auth-mobile-brand {
  display: none;
}
.auth-active .account-logout,
.auth-active .account-details {
  display: none;
}
.account-details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.account-details span {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.account-logout {
  margin-top: 25px;
  width: 100%;
}
.illustrated-empty {
  display: flex;
  align-items: center;
  gap: 20px;
}
.empty-sticker {
  width: 75px;
  height: 85px;
  object-fit: contain;
  flex-shrink: 0;
}
.checkin-card .emotion-sticker {
  width: 105px;
  height: 95px;
  right: 20px;
  top: 20px;
}
.transcript-panel {
  padding: 20px 0;
  border-top: 1px solid var(--line);
  margin-top: 20px;
}
.transcript-panel .detail-note {
  margin-top: 0;
}
@media (min-width: 1450px) {
  .auth-story {
    padding-left: 90px;
    padding-right: 90px;
  }
  .auth-story h1 {
    font-size: 78px;
  }
  .auth-embrace {
    width: 300px;
    height: 300px;
  }
  .auth-panel {
    max-width: 550px;
  }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .auth-story {
    padding: 35px;
  }
  .auth-story h1 {
    font-size: 55px;
  }
  .auth-story > p {
    font-size: 12px;
  }
  .auth-panel {
    padding: 45px 30px;
  }
  .auth-heading h1 {
    font-size: 43px;
  }
  .auth-embrace {
    width: 215px;
    height: 215px;
  }
}
@media (max-width: 760px) {
  .auth-layout {
    display: block;
    min-height: 100dvh;
  }
  .auth-story {
    display: none;
  }
  .auth-panel {
    padding: 24px 25px 30px;
    max-width: 440px;
  }
  .auth-mobile-brand {
    display: flex;
    font-size: 43px;
    margin-bottom: 27px;
  }
  .auth-tabs {
    margin-bottom: 26px;
  }
  .auth-heading .eyebrow {
    font-size: 9px;
    margin-bottom: 12px;
  }
  .auth-heading h1 {
    font-size: 41px;
  }
  .auth-heading p {
    margin-top: 12px;
    margin-bottom: 21px;
    font-size: 12px;
  }
  .auth-label {
    margin-top: 15px;
    font-size: 11px;
  }
  #auth-form input {
    height: 47px;
    font-size: 14px;
  }
  .auth-submit {
    margin-top: 17px;
  }
  .auth-privacy {
    margin-top: 20px;
    font-size: 9px;
  }
  .auth-about {
    font-size: 10px;
  }
  .auth-panel .error:empty {
    margin: 0;
  }
  .checkin-card .emotion-sticker {
    width: 85px;
    height: 80px;
    right: -7px;
    top: 12px;
  }
  .empty-sticker {
    width: 59px;
    height: 70px;
  }
  .illustrated-empty {
    gap: 15px;
  }
  .illustrated-empty p {
    font-size: 11px;
  }
  .illustrated-empty h3 {
    font-size: 23px;
  }
  .auth-active #toast {
    bottom: 25px;
  }
}

.auth-mobile-art {
  width: 83px;
  height: 48px;
  object-fit: contain;
  margin-left: auto;
}
.auth-mobile-art {
  object-fit: cover;
}

.auth-mobile-art {
  object-fit: contain;
}
/* Daily reflections and private records */
.f-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 24px 0;
}
.f-card {
  border: 1px solid #d4d3c8;
  border-radius: 22px;
  background: #fffdf6;
  padding: 26px;
  margin-bottom: 18px;
}
.f-card h3 {
  font-size: 22px;
  margin: 0 0 18px;
}
.f-card p {
  line-height: 1.6;
}
.f-card a {
  color: inherit;
}
.f-form {
  display: grid;
  gap: 14px;
}
.f-field {
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.f-field input,
.f-field select,
.f-field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: 1px solid #c6c6b8;
  border-radius: 10px;
  background: #fffef9;
  color: #22251f;
  font: inherit;
}
.f-field textarea {
  min-height: 84px;
}
.f-check {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  margin: 8px 12px 8px 0;
}
.f-check input {
  width: 18px;
  height: 18px;
  accent-color: #596747;
}
fieldset {
  border: 1px solid #d4d3c8;
  border-radius: 12px;
  padding: 12px;
}
.f-entry {
  margin-top: 28px;
  display: grid;
  gap: 16px;
}
.f-tile {
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.f-tile:nth-child(3n + 1) {
  background: #e0e7bd;
}
.f-tile:nth-child(3n + 2) {
  background: #e3d7f3;
}
.f-tile:nth-child(3n) {
  background: #f1d3c8;
}
.daily-hero {
  min-height: 250px;
  border-radius: 26px;
  background: #f5c953 url("illustrations/morning.png") right center/cover;
  overflow: hidden;
  padding: 30px;
}
.daily-hero > div {
  max-width: 360px;
  background: #f9d467d9;
  padding: 16px;
  border-radius: 18px;
}
.daily-hero h2 {
  font-family: "Libre Caslon Display", serif;
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  margin: 16px 0 24px;
}
.f-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 22px 0;
}
.f-quick button {
  border: 0;
  text-align: left;
  border-radius: 20px;
  padding: 23px;
  background: #ead3ca;
  cursor: pointer;
  font: inherit;
}
.f-quick button:nth-child(2) {
  background: #e0d5f5;
}
.f-quick button:nth-child(3) {
  background: #e1e7bd;
}
.f-quick span {
  font-size: 19px;
  font-weight: 600;
}
.f-quick p {
  font-size: 14px;
}
.emotion-bars {
  display: flex;
  gap: 16px;
  margin: 26px 0;
}
.emotion-bars > div {
  flex: 1;
  text-align: center;
  font-size: 13px;
}
.emotion-track {
  height: 220px;
  position: relative;
  background: #efeee8;
  border-radius: 60px;
  overflow: hidden;
  margin-bottom: 12px;
}
.emotion-track > div {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-radius: 60px;
  min-height: 2px;
}
.emotion-track b {
  position: absolute;
  bottom: 22px;
  left: 0;
  width: 100%;
  font-size: 20px;
}
.f-timeline {
  display: flex;
  gap: 7px;
  height: 205px;
  align-items: end;
}
.f-timeline > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.f-timeline i {
  display: block;
  width: 100%;
  background: #b0bc83;
  border-radius: 10px;
  min-height: 2px;
}
.grounding {
  padding-left: 24px;
  line-height: 2;
}
.side-nav {
  gap: 5px;
}
.side-nav a {
  padding-top: 10px;
  padding-bottom: 10px;
}
.side-note {
  margin-top: 20px;
}
.f-form .error:empty {
  display: none;
}
@media (max-width: 760px) {
  .f-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .f-card {
    padding: 20px;
  }
  .daily-hero {
    min-height: 225px;
    padding: 18px;
  }
  .daily-hero h2 {
    font-size: 38px;
  }
  .daily-hero > div {
    max-width: 245px;
  }
  .f-quick {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .f-quick button {
    min-width: 190px;
    scroll-snap-align: start;
  }
  .emotion-track {
    height: 180px;
  }
  .side-note {
    display: none;
  }
  .bottom-nav a {
    min-width: 0;
  }
  .f-timeline {
    gap: 4px;
  }
}
@media print {
  body {
    background: white;
  }
  .sidebar,
  .topbar,
  .bottom-nav,
  .filters,
  .page-heading,
  #toast,
  dialog {
    display: none !important;
  }
  .shell,
  .workspace,
  #app {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }
  .f-card {
    break-inside: avoid;
  }
  .f-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  a {
    color: black;
  }
  .emotion-track,
  .emotion-track > div,
  .f-timeline i {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}
#grounding-guide {
  padding: 24px;
  background: #e3ddf0;
  border-radius: 22px;
  text-align: center;
  margin: 18px 0;
}
#grounding-guide h2 {
  font-family: "Libre Caslon Display", serif;
  font-size: 32px;
  line-height: 1.2;
}
.ground-number {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf0d4;
  width: 86px;
  height: 86px;
  margin: auto;
  font-size: 38px;
}
.f-card details {
  margin: 18px 0;
}
.f-card summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 12px;
}
.sidebar {
  overflow-y: auto;
}
.side-note img {
  max-height: 70px;
}
.calm-shortcut {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #cecabb;
  padding: 12px 17px;
  border-radius: 15px;
  margin-bottom: 18px;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
}
.calm-shortcut span {
  margin-left: auto;
  font-size: 12px;
}
.calm-shortcut svg {
  width: 19px;
}

/* Mobile-only shell (contained screens, bottom navigation). */
@media (max-width: 760px) {
  body.m-contained {
    overflow: hidden;
  }
  .m-contained main {
    box-sizing: border-box;
    height: calc(100dvh - 77px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 18px 86px;
    scrollbar-width: none;
  }
  .m-contained main::-webkit-scrollbar {
    display: none;
  }
  .m-contained #app {
    min-height: 100%;
  }
  .bottom-nav {
    height: 76px;
    padding: 8px 8px max(9px, env(safe-area-inset-bottom));
    justify-content: space-between;
  }
  .bottom-nav a {
    min-width: 58px;
    flex: 1;
  }
  .bottom-nav a.active svg {
    padding: 3px 15px;
  }
  .bottom-nav .nav-more {
    position: relative;
    color: var(--ink);
    font-weight: 700;
  }
  .bottom-nav .nav-more.active svg {
    background: none;
    padding: 0;
    margin: 0;
  }
  .more-orb {
    width: 58px;
    height: 58px;
    margin-top: -27px;
    margin-bottom: -2px;
    border-radius: 50%;
    background: #22251f;
    color: #f7f5ed;
    border: 5px solid #f7f5ed;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 1px #22251f;
  }
  .more-orb svg {
    width: 24px !important;
    height: 24px !important;
  }
  .bottom-nav .nav-more.active .more-orb {
    background: #d8c8ee;
    color: #22251f;
  }
}

/* Illustrated app screens — shared by desktop and mobile. */
.m-screen-head {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: start;
  gap: 8px;
  min-height: 116px;
}
.m-screen-head .m-back {
  width: 34px;
  height: 34px;
  border: 1px solid #cbcabc;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.m-screen-head .m-back svg {
  width: 17px;
}
.m-screen-head h1 {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 0.98;
  font-weight: 400;
  margin: 8px 0 6px;
}
.m-screen-head p {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
  max-width: 220px;
}
.m-screen-head > img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  align-self: center;
}
.m-screen-head .eyebrow {
  font-size: 8px;
}
.m-more .m-screen-head {
  grid-template-columns: 34px 1fr;
  min-height: 116px;
}
.m-more .m-screen-head h1 {
  font-size: 37px;
}
.m-more {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.m-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 120px);
  gap: 10px;
}
.m-area {
  position: relative;
  overflow: hidden;
  border: 1px solid #cac9bc;
  border-radius: 20px;
  padding: 14px;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: flex-end;
  min-height: 0;
}
.m-area.wide {
  grid-column: span 2;
}
.m-area img {
  position: absolute;
  right: -5px;
  top: -10px;
  width: 92px;
  height: 92px;
  object-fit: contain;
}
.m-area.wide img {
  width: 108px;
  height: 108px;
  right: 8px;
  top: -12px;
}
.m-area > span {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: 62%;
}
.m-area b {
  font-size: 16px;
}
.m-area small {
  font-size: 10px;
  margin-top: 3px;
  line-height: 1.25;
}
.m-area > svg {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 15px;
}
.m-area.mint {
  background: #dfe8bd;
}
.m-area.coral {
  background: #efd2c7;
}
.m-area.lavender {
  background: #ddd1f0;
}
.m-area.mustard {
  background: #f2c95c;
}
.m-area.green {
  background: #cbd7ae;
}
.m-area.cream {
  background: #fffaf0;
}
.m-stage {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.m-stage > .m-screen-head {
  flex: 0 0 auto;
}
.m-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 12px;
  margin: 4px 0 13px;
}
.m-primary svg {
  width: 17px;
  color: #f1c95c;
}
.m-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
}
.m-list-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #d2d0c4;
  border-radius: 16px;
  background: #fffdf6;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  min-height: 67px;
}
.m-list-card time {
  font-family: var(--serif);
  font-size: 21px;
  min-width: 54px;
}
.m-list-card > span:not(.m-doc):not(.m-day) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.m-list-card b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-list-card small {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
}
.m-list-card > svg {
  width: 17px;
}
.m-doc {
  width: 39px;
  height: 39px;
  border-radius: 12px;
  background: #e1d4ef;
  display: grid;
  place-items: center;
}
.m-doc svg {
  width: 19px;
}
.m-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  margin-top: auto;
  padding-top: 10px;
}
.m-pager a {
  width: 32px;
  height: 32px;
  border: 1px solid #cccabd;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.m-pager a.disabled {
  opacity: 0.25;
  pointer-events: none;
}
.m-pager span {
  font-size: 10px;
}
.m-form-card {
  background: #fffdf6;
  border: 1px solid #d2d0c4;
  border-radius: 20px;
  padding: 17px;
  min-height: 0;
  overflow: auto;
}
.m-form-card .f-form {
  gap: 10px;
}
.m-form-card .f-field {
  font-size: 11px;
  gap: 5px;
}
.m-form-card .f-field input,
.m-form-card .f-field select,
.m-form-card .f-field textarea {
  padding: 10px;
  min-height: 40px;
}
.m-form-card .f-field textarea {
  min-height: 62px;
}
.m-form-card fieldset {
  padding: 8px;
}
.m-form-card .f-check {
  font-size: 10px;
  margin: 4px 7px 4px 0;
}
.m-form-card .f-check input {
  width: 15px;
  height: 15px;
}
.m-form-card .button {
  min-height: 42px;
}
.m-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.m-people article {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #d2d0c4;
  background: #fffdf6;
  border-radius: 17px;
  padding: 12px;
}
.m-people article > span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e6d5ed;
  display: grid;
  place-items: center;
  font-family: var(--serif);
}
.m-people article div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.m-people article b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-people article small {
  font-size: 9px;
  color: var(--muted);
  margin-top: 3px;
}
.m-empty {
  text-align: center;
  padding: 8px 22px;
}
.m-empty img {
  width: 105px;
  height: 85px;
  object-fit: contain;
}
.m-empty h2 {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
}
.m-empty p {
  font-size: 11px;
  color: var(--muted);
  margin: 6px 0 12px;
}
.m-list .entry-row {
  background: #fffdf6;
  border: 1px solid #d2d0c4;
  border-radius: 16px;
  padding: 11px;
}
.m-list .entry-row .entry-icon {
  width: 37px;
  height: 37px;
}
.m-soft-card {
  border: 1px solid #d2d0c4;
  background: #fffdf6;
  border-radius: 20px;
  padding: 18px;
  min-height: 0;
}
.m-soft-card .emotion-bars {
  margin: 4px 0 12px;
}
.m-soft-card .emotion-track {
  height: 170px;
}
.m-insight {
  border: 1px solid #cbbfd6;
  background: #e7def0;
  border-radius: 20px;
  padding: 18px;
  margin-top: 12px;
}
.m-insight h2 {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  margin: 8px 0;
}
.m-insight p {
  font-size: 11px;
  line-height: 1.45;
}
.m-report-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 170px 170px;
  gap: 10px;
}
.m-report-menu a {
  position: relative;
  border-radius: 20px;
  border: 1px solid #cbcabc;
  padding: 15px;
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.m-report-menu a:last-child {
  grid-column: span 2;
}
.m-report-menu img {
  position: absolute;
  right: -4px;
  top: -10px;
  width: 110px;
  height: 110px;
  object-fit: contain;
}
.m-report-menu a:last-child img {
  width: 135px;
  height: 135px;
  right: 8px;
}
.m-report-menu b {
  font-size: 17px;
  position: relative;
}
.m-report-menu span {
  font-size: 10px;
  position: relative;
  margin-top: 3px;
}
.m-report-menu .lavender {
  background: #ddd1f0;
}
.m-report-menu .mint {
  background: #dfe8bd;
}
.m-report-menu .coral {
  background: #efd2c7;
}
.m-print {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 11px;
  padding: 11px;
  border: 1px solid #cbcabc;
  border-radius: 14px;
  font-size: 11px;
}
.m-print svg {
  width: 16px;
}
.m-day {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid !important;
  place-items: center;
  background: #dfe8bd;
  font-family: var(--serif);
  font-size: 16px;
  flex: none !important;
}
.m-ground {
  background: #e7def0;
}
.m-ground #grounding-guide {
  margin: 0;
  padding: 12px;
  background: transparent;
}
.m-ground #grounding-guide h2 {
  font-size: 27px;
}
.m-ground .ground-number {
  width: 68px;
  height: 68px;
  font-size: 30px;
}
.m-options {
  border: 1px solid #d2d0c4;
  border-radius: 15px;
  padding: 12px 15px;
  margin: 10px 0;
  font-size: 11px;
}
.m-options summary {
  font-weight: 600;
}
.m-options p {
  margin-top: 8px;
  line-height: 1.45;
}
.m-safety {
  font-size: 9px;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}
.m-toggle {
  display: flex;
  align-items: center;
  gap: 15px;
}
.m-toggle > span {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.m-toggle b {
  font-size: 15px;
}
.m-toggle small {
  font-size: 10px;
  line-height: 1.4;
  margin-top: 4px;
  color: var(--muted);
}
.m-toggle input {
  appearance: none;
  width: 48px;
  height: 28px;
  border: 1px solid #999b8f;
  border-radius: 20px;
  background: #e3e1d8;
  position: relative;
}
.m-toggle input:after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  border: 1px solid #b5b3aa;
  transition: 0.2s;
}
.m-toggle input:checked {
  background: #b9c78d;
}
.m-toggle input:checked:after {
  left: 22px;
}
.m-privacy-note {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #d2d0c4;
  margin-top: 18px;
  padding: 16px 4px;
  color: var(--muted);
}
.m-privacy-note svg {
  width: 21px;
}
.m-privacy-note p {
  font-size: 10px;
  line-height: 1.45;
}
.m-stage .f-timeline {
  height: 250px;
}
.m-stage .f-timeline i {
  max-height: 115px;
}
.m-stage {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.m-stage > .m-screen-head {
  flex: 0 0 auto;
}
.m-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 12px;
  margin: 4px 0 13px;
}
.m-primary svg {
  width: 17px;
  color: #f1c95c;
}
.m-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
}
.m-list-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #d2d0c4;
  border-radius: 16px;
  background: #fffdf6;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  min-height: 67px;
}
.m-list-card time {
  font-family: var(--serif);
  font-size: 21px;
  min-width: 54px;
}
.m-list-card > span:not(.m-doc):not(.m-day) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.m-list-card b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-list-card small {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
}
.m-list-card > svg {
  width: 17px;
}
.m-doc {
  width: 39px;
  height: 39px;
  border-radius: 12px;
  background: #e1d4ef;
  display: grid;
  place-items: center;
}
.m-doc svg {
  width: 19px;
}
.m-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  margin-top: auto;
  padding-top: 10px;
}
.m-pager a {
  width: 32px;
  height: 32px;
  border: 1px solid #cccabd;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.m-pager a.disabled {
  opacity: 0.25;
  pointer-events: none;
}
.m-pager span {
  font-size: 10px;
}
.m-form-card {
  background: #fffdf6;
  border: 1px solid #d2d0c4;
  border-radius: 20px;
  padding: 17px;
  min-height: 0;
}
.m-form-card .f-form {
  gap: 10px;
}
.m-form-card .f-field {
  font-size: 11px;
  gap: 5px;
}
.m-form-card .f-field input,
.m-form-card .f-field select,
.m-form-card .f-field textarea {
  padding: 10px;
  min-height: 40px;
}
.m-form-card .f-field textarea {
  min-height: 62px;
}
.m-form-card fieldset {
  padding: 8px;
}
.m-form-card .f-check {
  font-size: 10px;
  margin: 4px 7px 4px 0;
}
.m-form-card .f-check input {
  width: 15px;
  height: 15px;
}
.m-form-card .button {
  min-height: 42px;
}
.m-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.m-people article {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #d2d0c4;
  background: #fffdf6;
  border-radius: 17px;
  padding: 12px;
}
.m-people article > span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e6d5ed;
  display: grid;
  place-items: center;
  font-family: var(--serif);
}
.m-people article div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.m-people article b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-people article small {
  font-size: 9px;
  color: var(--muted);
  margin-top: 3px;
}
.m-empty {
  text-align: center;
  padding: 8px 22px;
}
.m-empty img {
  width: 105px;
  height: 85px;
  object-fit: contain;
}
.m-empty h2 {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
}
.m-empty p {
  font-size: 11px;
  color: var(--muted);
  margin: 6px 0 12px;
}
.m-list .entry-row {
  background: #fffdf6;
  border: 1px solid #d2d0c4;
  border-radius: 16px;
  padding: 11px;
}
.m-list .entry-row .entry-icon {
  width: 37px;
  height: 37px;
}
.m-soft-card {
  border: 1px solid #d2d0c4;
  background: #fffdf6;
  border-radius: 20px;
  padding: 18px;
  min-height: 0;
}
.m-soft-card .emotion-bars {
  margin: 4px 0 12px;
}
.m-soft-card .emotion-track {
  height: 170px;
}
.m-insight {
  border: 1px solid #cbbfd6;
  background: #e7def0;
  border-radius: 20px;
  padding: 18px;
  margin-top: 12px;
}
.m-insight h2 {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  margin: 8px 0;
}
.m-insight p {
  font-size: 11px;
  line-height: 1.45;
}
.m-report-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 170px 170px;
  gap: 10px;
}
.m-report-menu a {
  position: relative;
  border-radius: 20px;
  border: 1px solid #cbcabc;
  padding: 15px;
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.m-report-menu a:last-child {
  grid-column: span 2;
}
.m-report-menu img {
  position: absolute;
  right: -4px;
  top: -10px;
  width: 110px;
  height: 110px;
  object-fit: contain;
}
.m-report-menu a:last-child img {
  width: 135px;
  height: 135px;
  right: 8px;
}
.m-report-menu b {
  font-size: 17px;
  position: relative;
}
.m-report-menu span {
  font-size: 10px;
  position: relative;
  margin-top: 3px;
}
.m-report-menu .lavender {
  background: #ddd1f0;
}
.m-report-menu .mint {
  background: #dfe8bd;
}
.m-report-menu .coral {
  background: #efd2c7;
}
.m-print {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 11px;
  padding: 11px;
  border: 1px solid #cbcabc;
  border-radius: 14px;
  font-size: 11px;
}
.m-print svg {
  width: 16px;
}
.m-day {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid !important;
  place-items: center;
  background: #dfe8bd;
  font-family: var(--serif);
  font-size: 16px;
  flex: none !important;
}
.m-ground {
  background: #e7def0;
}
.m-ground #grounding-guide {
  margin: 0;
  padding: 12px;
  background: transparent;
}
.m-ground #grounding-guide h2 {
  font-size: 27px;
}
.m-ground .ground-number {
  width: 68px;
  height: 68px;
  font-size: 30px;
}
.m-options {
  border: 1px solid #d2d0c4;
  border-radius: 15px;
  padding: 12px 15px;
  margin: 10px 0;
  font-size: 11px;
}
.m-options summary {
  font-weight: 600;
}
.m-options p {
  margin-top: 8px;
  line-height: 1.45;
}
.m-safety {
  font-size: 9px;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}
.m-toggle {
  display: flex;
  align-items: center;
  gap: 15px;
}
.m-toggle > span {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.m-toggle b {
  font-size: 15px;
}
.m-toggle small {
  font-size: 10px;
  line-height: 1.4;
  margin-top: 4px;
  color: var(--muted);
}
.m-toggle input {
  appearance: none;
  width: 48px;
  height: 28px;
  border: 1px solid #999b8f;
  border-radius: 20px;
  background: #e3e1d8;
  position: relative;
}
.m-toggle input:after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  border: 1px solid #b5b3aa;
  transition: 0.2s;
}
.m-toggle input:checked {
  background: #b9c78d;
}
.m-toggle input:checked:after {
  left: 22px;
}
.m-privacy-note {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #d2d0c4;
  margin-top: 18px;
  padding: 16px 4px;
  color: var(--muted);
}
.m-privacy-note svg {
  width: 21px;
}
.m-privacy-note p {
  font-size: 10px;
  line-height: 1.45;
}
.m-stage .f-timeline {
  height: 250px;
}
.m-stage .f-timeline i {
  max-height: 115px;
}
.m-capture-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 122px);
  gap: 10px;
}
.m-capture-card {
  position: relative;
  border: 1px solid #cac9bc;
  border-radius: 20px;
  padding: 13px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.m-capture-card .m-capture-icon {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 42px;
  height: 42px;
  border: 1px solid #22251f;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff9;
}
.m-capture-card .m-capture-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
}
.m-capture-card > b {
  font-size: 16px;
}
.m-capture-card > small {
  font-size: 9px;
  margin-top: 3px;
}
.m-capture-card > svg {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 14px;
}
.m-capture-card.mint {
  background: #dfe8bd;
}
.m-capture-card.coral {
  background: #efd2c7;
}
.m-capture-card.lavender {
  background: #ddd1f0;
}
.m-capture-card.mustard {
  background: #f2c95c;
}
.m-capture-card.green {
  background: #cbd7ae;
}
.m-capture-card.cream {
  background: #fffaf0;
}
.daily-journey {
  margin: 24px 0 30px;
  border: 1px solid #c8c8bb;
  border-radius: 24px;
  background: #fffdf6;
  padding: 18px;
}
.journey-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
}
.journey-head .eyebrow {
  margin-bottom: 9px;
}
.journey-head h2 {
  font-size: 27px;
  line-height: 1.02;
}
.journey-head p {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 8px;
  max-width: 245px;
}
.journey-score {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #dfe8bd;
  border: 1px solid #22251f;
  font-family: var(--serif);
  font-size: 17px;
}
.journey-list {
  display: grid;
  gap: 8px;
  margin-top: 17px;
}
.journey-item {
  display: grid;
  grid-template-columns: 24px 38px 1fr 16px;
  align-items: center;
  gap: 9px;
  min-height: 61px;
  padding: 9px 10px;
  border: 1px solid #deddd2;
  border-radius: 16px;
  background: #f7f5ed;
}
.journey-item > svg {
  width: 15px;
  color: #7b7e74;
}
.journey-check {
  width: 22px;
  height: 22px;
  border: 1px solid #93968b;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.journey-check svg {
  width: 13px;
  height: 13px;
}
.journey-symbol {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #e5d9f1;
  display: grid;
  place-items: center;
}
.journey-symbol svg {
  width: 18px;
  height: 18px;
}
.journey-item:nth-child(2n) .journey-symbol {
  background: #efd2c7;
}
.journey-item:nth-child(3n) .journey-symbol {
  background: #f2cf68;
}
.journey-item b {
  display: block;
  font-size: 12px;
}
.journey-item small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  margin-top: 3px;
}
.journey-item.done {
  background: #e3eacb;
  border-color: #aeb991;
}
.journey-item.done .journey-check {
  background: #536246;
  color: #fff;
  border-color: #536246;
}
.journey-item.done b {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.journey-item.partial .journey-check {
  background: #f2c95c;
}

.audio-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 10px 0 18px;
}
.audio-actions .button {
  min-width: 230px;
}
.audio-review {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid #b9adca;
  border-radius: 18px;
  background: #e9def3;
  text-align: left;
}
.audio-review .eyebrow {
  margin-bottom: 8px;
}
.audio-review p {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
.audio-review textarea {
  width: 100%;
  min-height: 120px;
  padding: 13px;
  border: 1px solid #9c91a8;
  border-radius: 12px;
  background: #fffdf8;
  resize: vertical;
  color: var(--ink);
}
@media (max-width: 370px) {
  .m-screen-head h1 {
    font-size: 30px;
  }
  .m-area img {
    width: 86px;
    height: 86px;
  }
  .m-area {
    padding: 11px;
  }
  .m-area b {
    font-size: 14px;
  }
  .bottom-nav a {
    min-width: 50px;
  }
}

/* Mobile safety: the document must always be able to reach the final action. */
@media (max-width: 760px) {
  body.m-contained {
    overflow-x: hidden;
    overflow-y: auto !important;
  }
  .m-contained .workspace {
    min-height: 100dvh;
  }
  .m-contained main {
    height: auto !important;
    min-height: calc(100dvh - 77px);
    overflow: visible !important;
    padding-bottom: 118px !important;
  }
  .flow {
    padding-bottom: 24px;
  }
  .flow-footer {
    position: relative;
    z-index: 2;
  }
}

/* =====================================================================
   v2026-10 — telas ilustradas no desktop, fluxos por tipo, pessoas,
   planta e movimento.
   ===================================================================== */

/* ---------- Desktop: as mesmas telas ilustradas, em escala maior ---------- */
@media (min-width: 761px) {
  .m-stage {
    max-width: 1040px;
    margin: 0 auto;
    height: auto;
  }
  .m-screen-head {
    grid-template-columns: 42px 1fr auto;
    gap: 18px;
    min-height: 0;
    margin-bottom: 26px;
  }
  .m-screen-head .m-back {
    width: 42px;
    height: 42px;
    margin-top: 4px;
  }
  .m-screen-head h1 {
    font-size: 54px;
    line-height: 1;
    margin: 12px 0 10px;
  }
  .m-screen-head p {
    font-size: 15px;
    max-width: 520px;
  }
  .m-screen-head .eyebrow {
    font-size: 10px;
  }
  .m-screen-head > img {
    width: 170px;
    height: 170px;
    align-self: start;
    margin-top: -18px;
  }
  .m-more .m-screen-head h1 {
    font-size: 56px;
  }
  .m-bento {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    grid-auto-rows: 190px;
    gap: 16px;
  }
  .m-area {
    padding: 22px;
    border-radius: 26px;
  }
  .m-area img,
  .m-area.wide img {
    width: 150px;
    height: 150px;
    right: 6px;
    top: -6px;
  }
  .m-area b {
    font-size: 22px;
  }
  .m-area small {
    font-size: 13px;
  }
  .m-primary {
    display: inline-flex;
    font-size: 14px;
    min-height: 48px;
    padding: 12px 22px;
    margin: 0 0 22px;
  }
  .m-list {
    gap: 12px;
  }
  .m-list-card {
    padding: 16px 18px;
  }
  .m-list-card small {
    font-size: 12px;
  }
  .m-form-card {
    max-width: 640px;
    padding: 26px;
  }
  .m-form-card .f-field {
    font-size: 13px;
  }
  .m-form-card .f-check {
    font-size: 12px;
  }
  .m-capture-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
  .m-capture-card {
    min-height: 170px !important;
    padding: 22px !important;
  }
  .m-capture-card > b {
    font-size: 20px !important;
  }
  .m-capture-card > small {
    font-size: 13px !important;
  }
  .m-report-menu {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 240px;
  }
  .m-report-menu a:last-child {
    grid-column: auto;
  }
  .m-report-menu img,
  .m-report-menu a:last-child img {
    width: 150px;
    height: 150px;
  }
  .m-report-menu b {
    font-size: 22px;
  }
  .m-insight p,
  .m-options,
  .m-empty p {
    font-size: 14px;
  }
  .m-insight h2 {
    font-size: 30px;
  }
  .m-empty img {
    width: 150px;
    height: 130px;
  }
  .m-soft-card {
    padding: 24px;
  }
  .m-safety {
    font-size: 12px;
  }
  .m-toggle small,
  .m-privacy-note p {
    font-size: 13px;
  }
  .patterns-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
  }
  .patterns-split .m-insight:first-child {
    margin-top: 0;
  }
  .m-ground #grounding-guide h2 {
    font-size: 34px;
  }
  .m-calm-wrap,
  .m-stage > .m-soft-card.m-ground {
    max-width: 720px;
  }
  .home-duo {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) 1.2fr;
    gap: 18px;
    align-items: stretch;
    margin: 22px 0 30px;
  }
  .home-duo .daily-journey {
    margin: 0;
  }
  .report-screen .filters {
    margin-top: 0;
  }
}

/* ---------- Fluxo de registro ---------- */
.flow-body {
  min-height: 0;
}
.flow .intro {
  color: var(--muted);
}
.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #cfcdc0;
  border-radius: 999px;
  background: #fffdf6;
  margin: 6px 0 16px;
}
.segmented button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.segmented button svg {
  width: 16px;
  height: 16px;
}
.segmented button.selected {
  background: var(--ink);
  color: var(--paper);
}
.segmented.three {
  display: flex;
  flex-wrap: wrap;
  border-radius: 18px;
}
.segmented.three button {
  flex: 1 1 auto;
  border-radius: 14px;
}
#note {
  width: 100%;
  min-height: 120px;
  border: 1px solid #cfcdc0;
  border-radius: 16px;
  background: #fffdf6;
  padding: 16px;
  resize: vertical;
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#note.note-big {
  min-height: 230px;
  font-size: 16px;
}
#note:focus,
.big-input:focus,
#person-notes:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px #e8dafa;
}
.ai-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 4px;
  flex-wrap: wrap;
}
.ai-row .button {
  border-radius: 999px;
}
.ai-row p {
  flex: 1 1 220px;
  margin: 0;
}
.ai-note {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #efe7fa;
  border: 1px solid #cdb9ea;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px;
}
.ai-note svg {
  width: 16px;
  flex: none;
}
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin: 8px 0 20px;
}
.choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border: 1px solid #cfcdc0;
  border-radius: 18px;
  background: #fffdf6;
  font-size: 13px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.choice svg {
  width: 26px;
  height: 26px;
}
.choice.selected {
  background: #f2c95c;
  border-color: var(--ink);
}
.sleep-dial {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin: 16px 0 10px;
}
.dial-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: #fffdf6;
  display: grid;
  place-items: center;
}
.dial-value {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #ddd1f0;
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dial-value b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
}
.dial-value span {
  font-size: 12px;
  color: var(--muted);
}
#sleep-range,
.range-row input {
  width: 100%;
  accent-color: var(--ink);
}
.range-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.range-row output {
  min-width: 28px;
  text-align: center;
  font-family: var(--serif);
  font-size: 22px;
}
.pick-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  margin: 8px 0 20px;
}
.pick-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px;
  border: 1px solid #d2d0c4;
  border-radius: 18px;
  background: #fffdf6;
  font-size: 12px;
  color: inherit;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.pick-person span:last-child {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-person.selected {
  background: #e8dafa;
  border-color: var(--ink);
}
.pick-person.selected .avatar-pic {
  box-shadow: 0 0 0 3px #fffdf6, 0 0 0 5px #8e6cc4;
}
.pick-person.add {
  justify-content: center;
  border-style: dashed;
}
.pick-person.add svg {
  width: 28px;
  height: 28px;
}
.pick-people.compact {
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  margin: 0;
}
.pick-people.compact .pick-person {
  padding: 9px 4px;
  font-size: 11px;
}
.summary {
  border: 1px solid #d2d0c4;
  border-radius: 20px;
  background: #fffdf6;
  padding: 18px 20px;
}
.summary-kind {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.summary-mood {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.summary-mood .mood-face {
  width: 36px;
  height: 36px;
}
.summary p svg {
  width: 15px;
  vertical-align: -2px;
}
.summary-people {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  font-size: 13px;
}
.summary-people .avatar-pic + .avatar-pic {
  margin-left: -12px;
}

/* ---------- Avatares e pessoas ---------- */
.avatar-pic {
  --s: 44px;
  width: var(--s);
  height: var(--s);
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  background: #ddd1f0;
  font-family: var(--serif);
  font-size: calc(var(--s) * 0.38);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.avatar-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-pic.sm {
  --s: 30px;
}
.avatar-pic.md {
  --s: 54px;
}
.avatar-pic.lg {
  --s: 72px;
}
.avatar-pic.xl {
  --s: 120px;
}
.avatar-pic.lavender {
  background: #ddd1f0;
}
.avatar-pic.mint {
  background: #dfe8bd;
}
.avatar-pic.coral {
  background: #efd2c7;
}
.avatar-pic.mustard {
  background: #f2c95c;
}
.avatar-pic.blue {
  background: #cfe0f7;
}
.avatar-pic.cream {
  background: #fffaf0;
}
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.person-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d2d0c4;
  border-radius: 20px;
  background: #fffdf6;
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.person-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.person-copy b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-copy small {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}
.person-feel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 5px 9px 5px 5px;
  border-radius: 999px;
  background: var(--mood);
  border: 1px solid #22251f33;
  white-space: nowrap;
}
.person-feel svg {
  width: 15px;
  height: 15px;
}
.person-feel.big {
  font-size: 15px;
  padding: 8px 14px 8px 8px;
}
.person-feel.big svg {
  width: 22px;
  height: 22px;
}
.person-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}
.person-notes,
.person-moments {
  margin: 12px 0;
}
.person-moments {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.person-moments b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
}
.person-moments .text-button {
  margin-left: auto;
}
.person-name-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.big-input {
  flex: 1;
  min-width: 0;
  font-family: var(--serif);
  font-size: 30px;
  padding: 12px 4px;
  border: 0;
  border-bottom: 2px solid var(--ink);
  background: transparent;
  border-radius: 0;
}
.big-input:focus {
  box-shadow: none;
  border-bottom-color: #8e6cc4;
}
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 12px;
  margin: 10px 0 18px;
}
.avatar-option {
  border: 0;
  background: transparent;
  padding: 4px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.avatar-option .avatar-pic {
  --s: 70px;
}
.avatar-option.selected .avatar-pic {
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px #8e6cc4;
  transform: scale(1.04);
}
.initials-grid .avatar-option .avatar-pic {
  --s: 56px;
}
.relation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  margin: 10px 0 18px;
}
.relation-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px;
  border: 1px solid #cfcdc0;
  border-radius: 16px;
  background: #fffdf6;
  font-size: 13px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.relation-option svg {
  width: 19px;
  height: 19px;
}
.relation-option.selected {
  background: #dfe8bd;
  border-color: var(--ink);
}
#person-notes {
  width: 100%;
  min-height: 130px;
  border: 1px solid #cfcdc0;
  border-radius: 16px;
  background: #fffdf6;
  padding: 14px;
  line-height: 1.5;
  resize: vertical;
}
.person-preview {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  padding: 16px;
  border-radius: 20px;
  background: #efe7fa;
  border: 1px solid #cdb9ea;
}
.person-preview > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.person-preview small {
  color: var(--muted);
}
.person-preview .detail-tags {
  margin-top: 6px;
}

/* ---------- Início ---------- */
.home-duo {
  display: grid;
  gap: 14px;
  margin: 20px 0 26px;
}
.home-duo .daily-journey {
  margin: 0;
}
.f-quick .quick-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: grid !important;
  place-items: center;
  background: #fffdf6;
  margin-bottom: 10px;
}
.f-quick .quick-icon svg {
  width: 18px;
  height: 18px;
  position: static !important;
}

/* ---------- Minha planta ---------- */
.plant-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.plant-svg .plant-sun {
  fill: #f6e7b4;
}
.plant-svg .pot {
  fill: #e98a6c;
  stroke: #22251f;
  stroke-width: 3;
  stroke-linejoin: round;
}
.plant-svg .pot-rim {
  fill: #ef9d80;
  stroke: #22251f;
  stroke-width: 3;
}
.plant-svg .soil {
  fill: none;
  stroke: #5b4636;
  stroke-width: 5;
  stroke-linecap: round;
}
.plant-svg .ink-thin {
  fill: none;
  stroke: #22251f;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.plant-svg .pot-mark {
  stroke: #22251f88;
}
.plant-svg .seed-fill {
  fill: #a87a4f;
  stroke: #22251f;
  stroke-width: 2.4;
}
.plant-svg .sprout-hint {
  fill: none;
  stroke: #7da35a;
  stroke-width: 3;
  stroke-linecap: round;
}
.plant-svg .stem-ink {
  fill: none;
  stroke: #22251f;
  stroke-width: 8;
  stroke-linecap: round;
}
.plant-svg .stem {
  fill: none;
  stroke: #7da35a;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke 0.6s ease;
}
.plant-svg .leaf-fill {
  fill: #a9cc72;
  stroke: #22251f;
  stroke-width: 2.6;
  stroke-linejoin: round;
  transition: fill 0.6s ease;
}
.plant-svg .leaf-vein {
  stroke: #22251f;
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.55;
}
.plant-svg .leaf:nth-of-type(even) .leaf-fill {
  fill: #c9e39a;
}
.plant-svg .bud-fill {
  fill: #ef9a7f;
  stroke: #22251f;
  stroke-width: 2.4;
}
.plant-svg .petal {
  fill: #ef9a7f;
  stroke: #22251f;
  stroke-width: 2.2;
}
.plant-svg .petal:nth-child(even) {
  fill: #f3b6cf;
}
.plant-svg .flower-core {
  fill: #f9bd32;
  stroke: #22251f;
  stroke-width: 2.2;
}
.plant-svg .core-dot {
  fill: #22251f;
}
.plant-svg .drops path {
  fill: #9fc6e8;
  stroke: #22251f;
  stroke-width: 1.6;
}
.plant-top {
  transform-box: view-box;
  transform-origin: 100px 172px;
  transform: rotate(var(--lean, 0deg));
  transition: transform 0.8s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.plant-svg:not(.is-wilted) .plant-top {
  animation: plant-sway 5.5s ease-in-out infinite;
}
.plant-svg.is-wilted .leaf-fill {
  fill: #cdbb83 !important;
}
.plant-svg.is-wilted .stem {
  stroke: #a6955f;
}
.plant-svg.is-wilted .petal {
  fill: #d9b3a3;
}
.plant-svg .leaf {
  transform-box: fill-box;
}
.plant-svg .drops path {
  animation: drop-fall 1.8s ease-in 0.2s 2 both;
}
.plant-svg .drops path:nth-child(2) {
  animation-delay: 0.6s;
}
.plant-svg .drops path:nth-child(3) {
  animation-delay: 1s;
}
.plant-svg .flower {
  animation: flower-breathe 4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes plant-sway {
  0%,
  100% {
    transform: rotate(-1.6deg);
  }
  50% {
    transform: rotate(1.6deg);
  }
}
@keyframes drop-fall {
  0% {
    opacity: 0;
    transform: translateY(-14px);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(70px);
  }
}
@keyframes flower-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
.plant-pips {
  display: flex;
  gap: 6px;
  margin: 12px 0;
}
.plant-pips span {
  flex: 1;
  max-width: 40px;
  height: 7px;
  border-radius: 9px;
  background: #e2e0d3;
  border: 1px solid #c9c7b9;
}
.plant-pips span.done {
  background: #a9cc72;
  border-color: #22251f;
}
.plant-pips span.now {
  background: linear-gradient(90deg, #a9cc72 50%, #e2e0d3 50%);
  border-color: #22251f;
}
.plant-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #c8c8bb;
  border-radius: 24px;
  background: #dfe8bd;
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.4s ease;
}
.plant-card.wilted {
  background: #ece3cc;
}
.plant-card-art {
  width: 104px;
  height: 124px;
  flex: none;
}
.plant-card-copy {
  min-width: 0;
}
.plant-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  margin: 6px 0 4px;
}
.plant-card p {
  font-size: 12px;
  color: #4d5047;
  margin: 0;
  line-height: 1.4;
}
.plant-card > svg {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 16px;
}
.garden-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: center;
  padding: 18px;
  border: 1px solid #c8c8bb;
  border-radius: 28px;
  background: #dfe8bd;
  transition: background 0.5s ease;
}
.garden-hero.wilted {
  background: #ece3cc;
}
.garden-art {
  width: min(250px, 72vw);
  aspect-ratio: 200 / 240;
  margin: 0 auto;
}
.garden-status h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  margin: 8px 0 6px;
  line-height: 1.05;
}
.garden-status p {
  color: #4d5047;
  margin: 0 0 6px;
}
.garden-status .button {
  border-radius: 999px;
  margin-top: 8px;
}
.garden-watered {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
.garden-watered svg {
  width: 18px;
  color: #3e83f5;
}
.garden-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.drop-strip {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 4px;
  margin: 12px 0 8px;
}
.drop-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.drop-day svg {
  width: 100%;
  max-width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 50%;
  border: 1px solid #c9c7b9;
  background: #f1efe5;
}
.drop-day.good svg {
  background: #cfe0f7;
  border-color: #22251f;
}
.drop-day.sad svg {
  background: #e9dfe6;
  border-color: #22251f;
}
.drop-day small {
  font-size: 9px;
  color: var(--muted);
}
.m-soft-card .small svg {
  width: 13px;
  vertical-align: -2px;
}
.garden-collection h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  margin: 8px 0;
}
.flower-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-end;
  min-height: 44px;
}
.mini-flower {
  width: 28px;
  height: 46px;
}
.garden-how {
  margin-top: 12px;
}
@media (min-width: 761px) {
  .garden-hero {
    grid-template-columns: 300px 1fr;
    gap: 34px;
    padding: 28px 36px;
  }
  .garden-art {
    width: 300px;
  }
  .garden-status h2 {
    font-size: 44px;
  }
  .garden-status p {
    font-size: 15px;
  }
  .garden-grid {
    grid-template-columns: 1.3fr 1fr;
    gap: 16px;
    margin-top: 16px;
  }
  .drop-day small {
    font-size: 11px;
  }
  .drop-day svg {
    max-width: 30px;
    height: 30px;
    padding: 6px;
  }
}

/* ---------- Movimento ---------- */
#app {
  view-transition-name: main-view;
}
.sidebar {
  view-transition-name: sidebar;
}
.topbar {
  view-transition-name: topbar;
}
.bottom-nav {
  view-transition-name: bottom-nav;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
::view-transition-group(main-view) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
::view-transition-old(main-view) {
  animation: vt-out-forward 0.26s cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(main-view) {
  animation: vt-in-forward 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html[data-dir="back"]::view-transition-old(main-view) {
  animation-name: vt-out-back;
}
html[data-dir="back"]::view-transition-new(main-view) {
  animation-name: vt-in-back;
}
html[data-dir="fade"]::view-transition-old(main-view) {
  animation: vt-fade-out 0.2s ease both;
}
html[data-dir="fade"]::view-transition-new(main-view) {
  animation: vt-fade-in 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes vt-out-forward {
  to {
    opacity: 0;
    transform: translateX(-36px);
  }
}
@keyframes vt-in-forward {
  from {
    opacity: 0;
    transform: translateX(56px);
  }
}
@keyframes vt-out-back {
  to {
    opacity: 0;
    transform: translateX(36px);
  }
}
@keyframes vt-in-back {
  from {
    opacity: 0;
    transform: translateX(-56px);
  }
}
@keyframes vt-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes vt-fade-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
}
/* Sem View Transitions: anima só a entrada. */
html[data-dir="forward"] .is-entering {
  animation: vt-in-forward 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html[data-dir="back"] .is-entering {
  animation: vt-in-back 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html[data-dir="fade"] .is-entering {
  animation: vt-fade-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@supports (view-transition-name: none) {
  html[data-dir] .is-entering {
    animation: none;
  }
}
/* Entrada escalonada dos blocos da tela. */
.is-entering :is(.m-bento, .m-capture-grid, .m-list, .people-grid, .m-report-menu, .journey-list, .f-quick, .avatar-grid, .relation-grid, .choice-grid, .moods, .pick-people, .garden-grid) > *,
.is-entering :is(.m-screen-head, .garden-hero, .plant-card, .daily-hero, .flow-body > *) {
  animation: rise-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.is-entering :is(.m-bento, .m-capture-grid, .m-list, .people-grid, .m-report-menu, .journey-list, .f-quick, .avatar-grid, .relation-grid, .choice-grid, .moods, .pick-people, .garden-grid) > :nth-child(2),
.is-entering .flow-body > :nth-child(2) {
  animation-delay: 0.04s;
}
.is-entering :is(.m-bento, .m-capture-grid, .m-list, .people-grid, .m-report-menu, .journey-list, .f-quick, .avatar-grid, .relation-grid, .choice-grid, .moods, .pick-people, .garden-grid) > :nth-child(3),
.is-entering .flow-body > :nth-child(3) {
  animation-delay: 0.08s;
}
.is-entering :is(.m-bento, .m-capture-grid, .m-list, .people-grid, .m-report-menu, .journey-list, .f-quick, .avatar-grid, .relation-grid, .choice-grid, .moods, .pick-people, .garden-grid) > :nth-child(4),
.is-entering .flow-body > :nth-child(4) {
  animation-delay: 0.12s;
}
.is-entering :is(.m-bento, .m-capture-grid, .m-list, .people-grid, .m-report-menu, .journey-list, .f-quick, .avatar-grid, .relation-grid, .choice-grid, .moods, .pick-people, .garden-grid) > :nth-child(5),
.is-entering .flow-body > :nth-child(5) {
  animation-delay: 0.16s;
}
.is-entering :is(.m-bento, .m-capture-grid, .m-list, .people-grid, .m-report-menu, .journey-list, .f-quick, .avatar-grid, .relation-grid, .choice-grid, .moods, .pick-people, .garden-grid) > :nth-child(n + 6),
.is-entering .flow-body > :nth-child(n + 6) {
  animation-delay: 0.2s;
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
.is-entering .plant-svg .leaf {
  animation: leaf-grow 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both;
  transform-origin: 0 50%;
}
.is-entering .plant-svg .leaf.l1 {
  animation-delay: 0.08s;
}
.is-entering .plant-svg .leaf.l2 {
  animation-delay: 0.16s;
}
.is-entering .plant-svg .leaf.l3 {
  animation-delay: 0.24s;
}
.is-entering .plant-svg .leaf.l4 {
  animation-delay: 0.32s;
}
.is-entering .plant-svg .leaf.l5 {
  animation-delay: 0.4s;
}
@keyframes leaf-grow {
  from {
    opacity: 0;
    scale: 0.2;
  }
}
/* Seleção: "pop" e transições suaves */
.pop {
  animation: pop 0.42s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.mood.pop .mood-face,
.avatar-option.pop .avatar-pic {
  animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.mood.pop {
  animation: none;
}
@keyframes pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}
.chip {
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
.mood-face {
  transition: outline-color 0.25s ease, outline-offset 0.25s ease, transform 0.2s ease;
}
.mood:not(.selected) .mood-face {
  outline: 3px solid transparent;
  outline-offset: 10px;
}
/* Toque */
.button,
.m-primary,
.chip,
.choice,
.relation-option,
.pick-person,
.avatar-option,
.dial-btn,
.segmented button,
.m-area,
.m-capture-card,
.journey-item,
.f-quick button,
.person-card,
.plant-card,
.m-list-card,
.entry-row,
.m-back {
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
:is(.button, .m-primary, .chip, .choice, .relation-option, .pick-person, .avatar-option, .dial-btn, .segmented button, .m-area, .m-capture-card, .journey-item, .f-quick button, .person-card, .plant-card, .m-list-card, .entry-row, .m-back):active {
  transform: scale(0.97);
}
@media (hover: hover) {
  :is(.m-area, .m-capture-card, .person-card, .plant-card, .m-report-menu a, .f-quick button):hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -14px #22251f66;
  }
  :is(.m-list-card, .journey-item, .entry-row):hover {
    transform: translateX(3px);
  }
  .m-area:hover img,
  .m-report-menu a:hover img {
    transform: rotate(-4deg) scale(1.04);
  }
}
.m-area img,
.m-report-menu img {
  transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}
:is(.button, .m-primary, .m-area, .m-capture-card, .journey-item, .f-quick button, .person-card, .relation-option, .avatar-option, .plant-card) {
  position: relative;
  overflow: hidden;
}
.avatar-option.avatar-option.avatar-option {
  overflow: visible;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.14;
  pointer-events: none;
  transform: scale(0);
  animation: ripple 0.6s ease-out forwards;
}
@keyframes ripple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}
.bottom-nav a svg,
.side-nav a {
  transition: background 0.3s ease, color 0.3s ease, padding 0.3s ease, transform 0.2s ease;
}
.bottom-nav a:active svg {
  transform: scale(0.88);
}
.steps span {
  transition: background 0.4s ease, width 0.4s ease;
}
.record-button.recording {
  animation: rec-pulse 1.4s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 #e98a6c88;
  }
  50% {
    box-shadow: 0 0 0 16px #e98a6c00;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (min-width: 761px) {
  .home-duo .plant-card {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 22px 24px;
  }
  .home-duo .plant-card-art {
    width: 150px;
    height: 180px;
    align-self: center;
  }
}
@media (max-width: 760px) {
  .garden-art {
    width: 190px;
  }
  .garden-hero {
    padding: 14px 18px 18px;
  }
}
.segmented.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}
.segmented.three button {
  justify-content: center;
  text-align: center;
  padding: 10px 6px;
  font-size: 12px;
  line-height: 1.2;
}
@media (min-width: 761px) {
  .m-stage > .m-primary {
    align-self: flex-start;
  }
  .m-capture-grid {
    grid-template-rows: none !important;
    grid-auto-rows: 170px;
  }
  .m-bento {
    grid-auto-flow: dense;
  }
  .diary-screen .search {
    max-width: 520px;
  }
}
.m-area-plant {
  position: absolute !important;
  right: 14px;
  top: 8px;
  width: 78px;
  height: 94px;
  max-width: none !important;
}
@media (min-width: 761px) {
  .m-area-plant {
    width: 120px;
    height: 150px;
    right: 40px;
    top: 14px;
  }
}
@media (max-width: 760px) {
  .m-bento {
    grid-template-rows: none;
    grid-auto-rows: 116px;
  }
}
@media (max-width: 760px) {
  .m-area.wide-m {
    grid-column: span 2;
  }
}

/* ---------- Correções de largura no celular ---------- */
@media (max-width: 760px) {
  .f-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .f-grid > *,
  .f-card,
  .home-duo > * {
    min-width: 0;
  }
  .f-card .entry-row {
    gap: 11px;
  }
  .f-card .entry-row .pill {
    display: none;
  }
}

/* ---------- Percurso do dia em linha do tempo ---------- */
.journey-list.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.journey-list.timeline::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: repeating-linear-gradient(#c9c7b9 0 6px, transparent 6px 11px);
}
.journey-list.timeline li {
  position: relative;
}
.journey-list.timeline .journey-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.journey-item time {
  position: relative;
  z-index: 1;
  flex: none;
  width: 44px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  background: var(--paper);
  border: 1px solid #d2d0c4;
  border-radius: 999px;
  padding: 3px 0;
  color: var(--muted);
}
.journey-item.done time {
  color: var(--ink);
  background: #dfe8bd;
}
.journey-item.current {
  border-color: var(--ink) !important;
  background: #fffaf0 !important;
  box-shadow: 0 8px 22px -16px #22251f88;
}
.journey-item.current time {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.journey-item.current small {
  color: var(--ink);
  font-weight: 600;
}
.journey-item.current .journey-check {
  animation: now-pulse 2s ease-in-out infinite;
  border-radius: 50%;
}
@keyframes now-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 #8e6cc455;
  }
  50% {
    box-shadow: 0 0 0 6px #8e6cc400;
  }
}
@media (max-width: 760px) {
  .journey-item time {
    width: 40px;
    font-size: 10px;
  }
  .journey-list.timeline .journey-check {
    display: none;
  }
}

/* ---------- Avatar no topo e menu do perfil ---------- */
.avatar {
  overflow: hidden;
  padding: 0;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar[aria-expanded="true"] {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px #8e6cc4;
}
.avatar:active {
  transform: scale(0.92);
}
a.local-label {
  color: inherit;
  text-decoration: none;
}
.profile-menu {
  position: fixed;
  z-index: 60;
  width: 264px;
  padding: 8px;
  background: #fffdf6;
  border: 1px solid #cfcdc0;
  border-radius: 20px;
  box-shadow: 0 22px 50px -20px #22251f66, 0 2px 6px -2px #22251f22;
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-6px) scale(0.94);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.profile-menu.open {
  opacity: 1;
  transform: none;
}
.pm-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.pm-head div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pm-head b {
  font-size: 14px;
}
.pm-head small {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-menu [role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  transition: background 0.18s ease;
}
.profile-menu [role="menuitem"] svg {
  width: 17px;
  height: 17px;
}
.profile-menu [role="menuitem"]:hover,
.profile-menu [role="menuitem"]:focus-visible {
  background: #efe7fa;
  outline: none;
}
.profile-menu hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 6px 4px;
}
.pm-danger {
  color: #a3412a !important;
}
.profile-menu .pm-danger:hover {
  background: #f6e1d9 !important;
}

/* ---------- Conta ---------- */
.account-hero {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px;
  border: 1px solid #cdb9ea;
  border-radius: 26px;
  background: #efe7fa;
  margin-bottom: 14px;
}
.account-photo {
  position: relative;
  flex: none;
}
.account-photo .avatar-pic.uploading {
  opacity: 0.45;
  animation: rec-pulse 1.2s ease-in-out infinite;
}
.photo-btn {
  position: absolute;
  right: -2px;
  bottom: 2px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 3px solid #efe7fa;
  transition: transform 0.2s ease;
}
.photo-btn:active {
  transform: scale(0.9);
}
.photo-btn svg {
  width: 17px;
}
.account-id {
  min-width: 0;
}
.account-id h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  margin: 0 0 2px;
}
.account-id > p {
  margin: 0 0 10px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.account-photo-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.account-photo-actions .button {
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 999px;
  cursor: pointer;
}
.account-grid {
  display: grid;
  gap: 12px;
}
.account-grid .m-form-card {
  max-width: none;
}
.account-links {
  margin: 14px 0 4px;
}
input[readonly] {
  opacity: 0.7;
}
@media (min-width: 761px) {
  .account-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .account-hero {
    padding: 26px 30px;
  }
  .account-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .account-hero {
    flex-direction: column;
    text-align: center;
  }
  .account-photo-actions {
    justify-content: center;
  }
}

/* ---------- Interruptor ---------- */
.switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 46px;
  height: 27px;
  border-radius: 999px;
  background: #d9d7cc;
  border: 1px solid #a9a89c;
  position: relative;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
  margin: 0;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #22251f44;
  transition: transform 0.28s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.switch:checked {
  background: #7da35a;
  border-color: #22251f;
}
.switch:checked::after {
  transform: translateX(19px);
}
.switch.big {
  width: 54px;
  height: 31px;
}
.switch.big::after {
  width: 25px;
  height: 25px;
}
.switch.big:checked::after {
  transform: translateX(23px);
}
.switch:disabled {
  opacity: 0.5;
}

/* ---------- Notificações ---------- */
.n-device {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid #c8c8bb;
  background: #f1efe5;
  transition: background 0.4s ease;
}
.n-device.on {
  background: #dfe8bd;
}
.n-device > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.n-device small {
  color: #4d5047;
  line-height: 1.4;
}
.n-bell {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: #fffdf6;
  display: grid;
  place-items: center;
}
.n-device.on .n-bell svg {
  animation: bell-ring 1.6s ease 0.3s 1;
  transform-origin: 50% 10%;
}
@keyframes bell-ring {
  0%,
  100% {
    transform: rotate(0);
  }
  15% {
    transform: rotate(14deg);
  }
  30% {
    transform: rotate(-12deg);
  }
  45% {
    transform: rotate(8deg);
  }
  60% {
    transform: rotate(-4deg);
  }
}
.n-group {
  margin-top: 18px;
  border: 1px solid #d2d0c4;
  border-radius: 22px;
  background: #fffdf6;
  padding: 14px 14px 6px;
}
.n-group > .eyebrow {
  display: block;
  margin: 2px 4px 8px;
}
.n-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-top: 1px solid var(--line);
  transition: opacity 0.25s ease;
}
.n-group > .eyebrow + .n-row {
  border-top: 0;
}
.n-row.off .n-copy,
.n-row.off .n-ic {
  opacity: 0.5;
}
.n-ic {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 12px;
  background: #efe7fa;
  display: grid;
  place-items: center;
}
.n-ic svg {
  width: 18px;
}
.n-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.n-copy b {
  font-size: 14px;
}
.n-copy small {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
.n-time {
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #cfcdc0;
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
}
.n-time:disabled {
  opacity: 0.45;
}
.n-range {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.n-saved {
  text-align: center;
  margin: 14px 0 0;
}
.n-admin {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.n-admin svg {
  width: 14px;
}
.notif-page .m-print {
  margin-top: 10px;
}
.skeleton {
  background: linear-gradient(90deg, #f1efe5 0%, #fffdf6 50%, #f1efe5 100%) 0 0 / 200% 100%;
  animation: skeleton 1.2s linear infinite;
}
@keyframes skeleton {
  to {
    background-position: -200% 0;
  }
}
@media (max-width: 520px) {
  .n-row {
    flex-wrap: wrap;
  }
  .n-copy {
    flex: 1 1 calc(100% - 110px);
  }
  .n-time {
    margin-left: 48px;
  }
  .n-range {
    margin-left: 48px;
  }
  .n-range .n-time {
    margin-left: 0;
  }
  .n-row .switch {
    margin-left: auto;
  }
}
@media (min-width: 761px) {
  .notif-page .n-group,
  .notif-page .n-device,
  .notif-page .m-print {
    max-width: 760px;
  }
}
.section-row .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.section-row .chip svg {
  width: 16px;
  height: 16px;
}

/* =====================================================================
   Núcleo, botão flutuante, player de áudio, introdução da planta e
   "Estou mal agora".
   ===================================================================== */

/* ---------- Botão flutuante ---------- */
.fab {
  position: fixed;
  z-index: 40;
  right: 28px;
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 56px;
  padding: 0 20px 0 17px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 14px 30px -12px #22251fa0;
  transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.25s ease, box-shadow 0.25s ease;
  view-transition-name: fab;
  overflow: hidden;
  isolation: isolate;
}
.fab svg {
  width: 21px;
  height: 21px;
  color: #f2c95c;
  animation: fab-twinkle 3.2s ease-in-out infinite;
}
.fab-glow {
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: conic-gradient(from 0deg, #8e6cc4, #f2c95c, #ef9a7f, #a9cc72, #8e6cc4);
  opacity: 0.35;
  animation: fab-spin 6s linear infinite;
  filter: blur(14px);
}
.fab:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 18px 34px -12px #22251fb0;
}
.fab:active {
  transform: scale(0.94);
}
@keyframes fab-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fab-twinkle {
  0%,
  100% {
    transform: rotate(0) scale(1);
  }
  50% {
    transform: rotate(14deg) scale(1.12);
  }
}
body.auth-active .fab,
body[data-route="checkin"] .fab,
body[data-route="nucleo"] .fab,
body[data-route="calm"] .fab,
body[data-route="admin-activate"] .fab {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6) translateY(20px);
}
@media (max-width: 760px) {
  .fab {
    right: 16px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
  }
  .fab-label {
    display: none;
  }
}

/* ---------- Núcleo ---------- */
.core-hero {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 24px;
  border-radius: 30px;
  background: radial-gradient(120% 140% at 0% 0%, #efe7fa 0%, #fffaf0 55%, #f6e7b4 100%);
  border: 1px solid #d8cdea;
}
.core-copy h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  margin: 0 0 6px;
}
.core-copy p {
  color: #4d5047;
  margin: 0 0 14px;
}
.core-generate {
  border-radius: 999px;
}
.core-generate svg {
  color: #f2c95c;
}
.core-orb {
  position: relative;
  flex: none;
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
}
.core-orb span {
  position: absolute;
  inset: 0;
  border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
  background: radial-gradient(circle at 30% 30%, #f2c95c, #ef9a7f 45%, #8e6cc4 100%);
  opacity: 0.55;
  animation: orb-morph 9s ease-in-out infinite;
}
.core-orb span:nth-child(2) {
  inset: 10px;
  background: radial-gradient(circle at 70% 60%, #a9cc72, #c9b4ec 60%, transparent 100%);
  animation-duration: 7s;
  animation-direction: reverse;
}
.core-orb span:nth-child(3) {
  inset: 26px;
  background: #fffaf0;
  opacity: 0.85;
  border: 1.5px solid var(--ink);
  animation-duration: 11s;
}
.core-orb i {
  position: relative;
  z-index: 1;
  display: grid;
}
.core-orb svg {
  width: 30px;
  height: 30px;
}
.core-orb.thinking span {
  animation-duration: 2.2s;
}
.core-orb.thinking i {
  animation: fab-spin 2.4s linear infinite;
}
@keyframes orb-morph {
  0%,
  100% {
    border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
    transform: rotate(0deg) scale(1);
  }
  33% {
    border-radius: 58% 42% 40% 60% / 44% 58% 42% 56%;
    transform: rotate(120deg) scale(1.04);
  }
  66% {
    border-radius: 40% 60% 56% 44% / 60% 40% 60% 40%;
    transform: rotate(240deg) scale(0.97);
  }
}
.nucleus-page > .core-hero:first-child {
  flex-direction: column;
  justify-content: center;
  min-height: 300px;
}
.activity-grid {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.activity-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid #c8c8bb;
  color: inherit;
  text-decoration: none;
  animation: rise-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.activity-card.lavender {
  background: #ddd1f0;
}
.activity-card.mint {
  background: #dfe8bd;
}
.activity-card.coral {
  background: #efd2c7;
}
.activity-card.mustard {
  background: #f2d98c;
}
.activity-card.green {
  background: #cbd7ae;
}
.activity-card.blue {
  background: #cfe0f7;
}
.activity-card.done,
.activity-card.skipped {
  opacity: 0.72;
}
.activity-card b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.08;
}
.activity-card small {
  font-size: 13px;
  line-height: 1.45;
  color: #3d4038;
}
.activity-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.activity-type,
.activity-min {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.activity-type svg,
.activity-min svg {
  width: 15px;
  height: 15px;
}
.activity-type.big {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  margin-bottom: 12px;
}
.activity-type.big.lavender {
  background: #ddd1f0;
}
.activity-type.big.mint {
  background: #dfe8bd;
}
.activity-type.big.coral {
  background: #efd2c7;
}
.activity-type.big.mustard {
  background: #f2d98c;
}
.activity-type.big.green {
  background: #cbd7ae;
}
.activity-type.big.blue {
  background: #cfe0f7;
}
.activity-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  font-weight: 600;
  font-size: 13px;
}
.activity-go svg {
  width: 16px;
  transition: transform 0.25s ease;
}
.activity-card:hover .activity-go svg {
  transform: translateX(4px);
}
.core-source {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 12px;
}
.core-source svg {
  width: 14px;
}
.activity-history .n-row {
  color: inherit;
  text-decoration: none;
}
.activity-steps {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: grid;
  gap: 10px;
}
.activity-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid #d2d0c4;
  border-radius: 18px;
  background: #fffdf6;
  animation: rise-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 80ms + 120ms);
}
.activity-steps li span {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: #f2c95c;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 17px;
}
.activity-steps li p {
  margin: 4px 0 0;
  line-height: 1.45;
}
#activity-reflection {
  width: 100%;
  border: 1px solid #cfcdc0;
  border-radius: 16px;
  background: #fffdf6;
  padding: 16px;
  min-height: 150px;
  line-height: 1.5;
  resize: vertical;
}
.activity-actions {
  flex-direction: column;
  align-items: center;
}
@media (min-width: 761px) {
  .core-hero {
    padding: 30px 36px;
  }
  .core-orb {
    width: 160px;
    height: 160px;
  }
  .core-copy h2 {
    font-size: 38px;
  }
  .activity-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .activity-card {
    min-height: 270px;
    padding: 22px;
  }
}
@media (max-width: 760px) {
  .core-hero {
    flex-direction: column;
    text-align: center;
  }
  .core-generate {
    margin: 0 auto;
  }
}

/* ---------- Player de áudio ---------- */
.sp-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  border: 1px solid #cdb9ea;
  border-radius: 999px;
  background: #efe7fa;
  margin: 12px 0;
  max-width: 560px;
}
.sp-player audio {
  display: none;
}
.sp-play {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, background 0.25s ease;
}
.sp-play svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}
.sp-player.playing .sp-play {
  background: #8e6cc4;
  border-color: #8e6cc4;
}
.sp-play:active {
  transform: scale(0.9);
}
.sp-wave {
  flex: 1;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  touch-action: none;
  border-radius: 8px;
}
.sp-wave:focus-visible {
  outline: 2px solid #8e6cc4;
  outline-offset: 4px;
}
.sp-wave i {
  flex: 1;
  min-width: 2px;
  height: var(--h, 50%);
  border-radius: 3px;
  background: #b9a8d6;
  transition: background 0.15s ease, height 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.sp-wave i.on {
  background: var(--ink);
}
.sp-player.playing .sp-wave i.on:last-of-type,
.sp-player.playing .sp-wave i.on:has(+ i:not(.on)) {
  animation: bar-bounce 0.6s ease-in-out infinite alternate;
}
@keyframes bar-bounce {
  to {
    transform: scaleY(1.25);
  }
}
.sp-time {
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  display: flex;
  gap: 3px;
}
.sp-time b {
  color: var(--ink);
  font-weight: 600;
}
.sp-time span::before {
  content: "/ ";
}
.sp-speed {
  flex: none;
  min-width: 40px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid #b9a8d6;
  background: #fffdf6;
  font-size: 12px;
  font-weight: 600;
}
@media (max-width: 420px) {
  .sp-player {
    gap: 9px;
  }
  .sp-time span {
    display: none;
  }
}

/* ---------- Introdução da planta ---------- */
.garden-intro {
  max-width: 560px;
  margin: 0 auto;
  min-height: calc(100dvh - 200px);
  display: flex;
  flex-direction: column;
  user-select: none;
}
.gi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gi-slide {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
}
.gi-slide h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.02;
  margin: 10px 0 12px;
}
.gi-slide p {
  color: #4d5047;
  line-height: 1.55;
  max-width: 420px;
  margin: 0 auto;
}
.gi-art {
  width: 190px;
  height: 228px;
  margin: 10px auto 18px;
  border-radius: 50%;
}
.gi-stages {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin: 46px 0 40px;
}
.gi-stages span {
  aspect-ratio: 200 / 240;
  animation: rise-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.gi-stages span:nth-child(2) { animation-delay: 0.08s; }
.gi-stages span:nth-child(3) { animation-delay: 0.16s; }
.gi-stages span:nth-child(4) { animation-delay: 0.24s; }
.gi-stages span:nth-child(5) { animation-delay: 0.32s; }
.gi-stages span:nth-child(6) { animation-delay: 0.4s; }
.gi-stages .plant-sun {
  display: none;
}
.gi-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 20px;
}
.gi-pair span {
  width: 150px;
  height: 180px;
}
.gi-pair > svg {
  width: 26px;
}
.gi-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 18px 0;
}
.gi-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 99px;
  border: 0;
  background: #cfcdc0;
  transition: width 0.3s ease, background 0.3s ease;
}
.gi-dots button.on {
  width: 26px;
  background: var(--ink);
}
.gi-actions {
  display: flex;
  gap: 10px;
}
.gi-actions .button.outline {
  flex: none;
  width: 56px;
  padding: 0;
}
.garden-how .text-button {
  margin: 0 0 8px;
}

/* ---------- Estou mal agora ---------- */
.calm-grid {
  display: grid;
  gap: 10px;
}
.calm-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid #c8c8bb;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.calm-option > svg:first-child {
  width: 28px;
  height: 28px;
  flex: none;
}
.calm-option > svg:last-child {
  width: 18px;
  margin-left: auto;
  flex: none;
}
.calm-option span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.calm-option b {
  font-size: 17px;
}
.calm-option small {
  color: #4d5047;
  font-size: 12px;
  margin-top: 2px;
}
.calm-option.lavender { background: #ddd1f0; }
.calm-option.blue { background: #cfe0f7; }
.calm-option.coral { background: #efd2c7; }
.calm-option.mustard { background: #f2d98c; }
.calm-option.mint { background: #dfe8bd; }
.calm-option.cream { background: #fffaf0; }
@media (hover: hover) {
  .calm-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -14px #22251f66;
  }
}
@media (min-width: 761px) {
  .calm-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .calm-option {
    flex-direction: column;
    align-items: flex-start;
    min-height: 160px;
    padding: 22px;
  }
  .calm-option > svg:last-child {
    margin-left: 0;
    margin-top: auto;
  }
}
.calm-last {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 14px;
}
.calm-last svg {
  width: 14px;
}
.calm-help {
  margin-top: 18px;
  border: 1px solid #e0b4a4;
  background: #fbefe9;
  border-radius: 18px;
  padding: 12px 16px;
}
.calm-help summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.calm-help summary::-webkit-details-marker {
  display: none;
}
.calm-help summary svg {
  width: 18px;
  color: #a3412a;
}
.calm-help p {
  font-size: 13px;
  line-height: 1.5;
}
.help-lines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.help-lines a {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fffdf6;
  border: 1px solid #e0b4a4;
  color: inherit;
  text-decoration: none;
}
.help-lines b {
  font-size: 18px;
}
.help-lines small {
  font-size: 11px;
  color: var(--muted);
}
.calm-flow .calm-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.calm-flow .calm-tag svg {
  width: 15px;
}
.calm-lead {
  font-size: 17px;
  line-height: 1.55;
  margin: 4px 0 18px;
}
.calm-quote {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.2;
  margin: 26px 0;
  padding: 24px;
  border-radius: 24px;
  background: #efe7fa;
  border: 1px solid #cdb9ea;
}
.calm-scale {
  margin: 14px 0 6px;
  text-align: center;
}
.calm-scale-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}
.calm-scale-row input {
  flex: 1;
  accent-color: var(--ink);
}
.calm-scale-value {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  margin-top: 8px;
}
.calm-guide {
  text-align: center;
  margin: 10px 0;
}
.guide-circle {
  --secs: 4s;
  width: 220px;
  height: 220px;
  margin: 14px auto 10px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: radial-gradient(circle at 35% 35%, #fffaf0, #ddd1f0 70%);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 22px;
  transform: scale(0.72);
  transition: transform var(--secs) ease-in-out, background 0.8s ease;
}
.guide-circle span {
  max-width: 150px;
}
.guide-circle.grow {
  transform: scale(1);
}
.guide-circle.shrink {
  transform: scale(0.62);
}
.guide-circle.hold {
  transform: scale(0.9);
  background: radial-gradient(circle at 35% 35%, #fffaf0, #f3b6cf 75%);
  animation: hold-pulse 3s ease-in-out infinite;
}
.guide-circle.tense {
  transform: scale(0.78);
  background: radial-gradient(circle at 35% 35%, #fffaf0, #ef9a7f 70%);
  transition-duration: 0.6s;
  animation: tense-shake 0.18s linear infinite;
}
.guide-circle.relax {
  transform: scale(1);
  background: radial-gradient(circle at 35% 35%, #fffaf0, #c9e39a 75%);
  transition-duration: 2.5s;
}
.guide-circle.done {
  transform: scale(0.85);
  background: #dfe8bd;
}
@keyframes hold-pulse {
  50% {
    box-shadow: 0 0 0 14px #f3b6cf33;
  }
}
@keyframes tense-shake {
  25% {
    translate: 1px 0;
  }
  75% {
    translate: -1px 0;
  }
}
.calm-flow.blue .guide-circle.grow {
  background: radial-gradient(circle at 35% 35%, #fffaf0, #cfe0f7 70%);
}
.guide-count {
  color: var(--muted);
  font-size: 13px;
}
.calm-text {
  width: 100%;
  border: 1px solid #cfcdc0;
  border-radius: 16px;
  background: #fffdf6;
  padding: 16px;
  min-height: 180px;
  line-height: 1.5;
  resize: vertical;
}
.sense-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 26px 0 14px;
}
.sense-dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px dashed #8b8a7e;
  background: #fffdf6;
  display: grid;
  place-items: center;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.sense-dot.on {
  background: #a9cc72;
  border: 1.5px solid var(--ink);
}
.sense-dot svg {
  width: 22px;
}
.dump-list {
  display: grid;
  gap: 8px;
}
.dump-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #d2d0c4;
  background: #fffdf6;
  text-align: left;
  transition: opacity 0.3s ease, background 0.3s ease;
}
.dump-item svg {
  width: 17px;
  flex: none;
}
.dump-item.later {
  opacity: 0.55;
  background: #f1efe5;
}
.dump-item.later span {
  text-decoration: line-through;
}
.calm-skip {
  display: block;
  margin: 14px auto 0;
}
.calm-keep {
  margin-top: 16px;
}
.calm-done img {
  width: 140px;
}
body:has(.flow) .fab,
body:has(.garden-intro) .fab,
body:has(.profile-menu.open) .fab {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6) translateY(20px);
}
/* Sem sobreposição: a tela antiga sai rápido antes de a nova entrar (evita títulos misturados). */
::view-transition-old(main-view) {
  animation-duration: 0.12s !important;
}
::view-transition-new(main-view) {
  animation-delay: 0.13s !important;
  animation-fill-mode: both !important;
}

/* ---------- Núcleo: porquê, segundo plano e início ---------- */
.activity-why {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: #3d4038;
}
.activity-why em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.why-box {
  margin: 16px 0 6px;
  padding: 16px 18px;
  border-radius: 20px;
  background: #efe7fa;
  border: 1px solid #cdb9ea;
}
.why-box .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.why-box .eyebrow svg {
  width: 14px;
}
.why-box p {
  margin: 6px 0 12px;
  line-height: 1.5;
}
.why-box p:last-child {
  margin-bottom: 0;
}
.core-leave {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.core-leave .button {
  border-radius: 999px;
}
.core-leave .text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.core-leave svg {
  width: 16px;
}
@media (min-width: 761px) {
  .core-leave {
    align-items: flex-start;
  }
}
.nucleus-home {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 26px;
  padding: 16px 20px;
  border-radius: 26px;
  border: 1px solid #d8cdea;
  background: radial-gradient(120% 160% at 0% 0%, #efe7fa 0%, #fffaf0 60%, #f6e7b4 100%);
  color: inherit;
  text-decoration: none;
  position: relative;
}
.nucleus-home .core-orb {
  width: 74px;
  height: 74px;
}
.nucleus-home .core-orb span:nth-child(3) {
  inset: 15px;
}
.nucleus-home .core-orb svg {
  width: 20px;
  height: 20px;
}
.nucleus-home > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.nucleus-home b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
}
.nucleus-home small {
  color: #4d5047;
}
.nucleus-home > svg {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 16px;
}
.nucleus-home-list {
  margin-bottom: 26px;
}
.activity-grid.compact {
  margin-top: 0;
}
.activity-grid.compact .activity-card {
  min-height: 0;
}
.activity-grid.compact .activity-card b {
  font-size: 21px;
}
@media (max-width: 760px) {
  .activity-grid.compact {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .activity-grid.compact .activity-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
}

/* ---------- Áudios em "Estou mal agora" ---------- */
.calm-voice {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px dashed #b9a8d6;
  background: #fbf8ff;
}
.calm-voice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: #4d5047;
}
.calm-voice-head > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.calm-voice-head svg {
  width: 16px;
}
.calm-rec {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
}
.calm-rec.recording {
  background: #c4553a;
  border-color: #c4553a;
  animation: rec-pulse 1.4s ease-in-out infinite;
}
.calm-audio {
  display: flex;
  align-items: center;
  gap: 6px;
}
.calm-audio .sp-player {
  flex: 1;
  margin: 10px 0 0;
}
.calm-audio .text-button svg {
  width: 18px;
}
.calm-audio-count {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.calm-audio-count svg {
  width: 14px;
}
.audio-label {
  margin: 14px 0 0;
}
@media (max-width: 420px) {
  .calm-voice-head {
    flex-direction: column;
    align-items: stretch;
  }
  .calm-rec {
    justify-content: center;
  }
}
.calm-audio .sp-player{min-width:0}

/* ---------- Convites e administração ---------- */
.invite-input {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 18px !important;
}
.password-hint svg {
  width: 14px;
  vertical-align: -2px;
}
.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.admin-stats div {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid #d2d0c4;
  background: #fffdf6;
}
.admin-stats b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
}
.admin-stats span {
  font-size: 12px;
  color: var(--muted);
}
.admin-grid {
  display: grid;
  gap: 14px;
  align-items: start;
}
.admin-grid .m-form-card {
  max-width: none;
}
.admin-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  margin: 6px 0 12px;
}
.admin-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.invite-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.invite-buttons .button {
  flex: 1 1 180px;
  border-radius: 999px;
}
.invite-result {
  margin-top: 16px;
  padding: 18px;
  border-radius: 20px;
  background: #efe7fa;
  border: 1px solid #cdb9ea;
  animation: rise-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.invite-code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 34px;
  letter-spacing: 0.14em;
  margin: 8px 0 4px;
}
.invite-warn {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #a3412a;
  font-size: 13px;
}
.invite-warn svg {
  width: 16px;
}
.invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.invite-actions .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fffdf6;
  color: inherit;
  text-decoration: none;
}
.invite-actions svg {
  width: 15px;
}
.mono {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.08em;
}
.invite-row .text-button svg {
  width: 17px;
}
.status-chip {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid #22251f33;
}
.status-chip.mint { background: #dfe8bd; }
.status-chip.lavender { background: #ddd1f0; }
.status-chip.cream { background: #f1efe5; }
.status-chip.coral { background: #efd2c7; }
@media (min-width: 900px) {
  .admin-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .admin-grid .n-group {
    margin-top: 0;
  }
}
@media (max-width: 520px) {
  .invite-row {
    flex-wrap: wrap;
  }
}
@media (max-width: 520px) {
  .admin-stats b {
    font-size: 22px;
  }
  .admin-stats div {
    padding: 12px;
  }
}

/* ---------- Abertura do app ---------- */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
  cursor: pointer;
  view-transition-name: intro;
  transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1), border-radius 0.85s ease;
}
.intro-overlay.leaving {
  transform: translateY(-104%);
  border-bottom-left-radius: 50% 12%;
  border-bottom-right-radius: 50% 12%;
  pointer-events: none;
}
.intro-overlay.leaving .intro-stage {
  transition: opacity 0.35s ease, transform 0.6s ease;
  opacity: 0;
  transform: translateY(-30px);
}
.intro-sun {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  border-radius: 50%;
  background: radial-gradient(circle, #f6e7b4 0%, #f2d98c 18%, #efe7fa 42%, var(--paper) 62%);
  transform: scale(0.05);
  animation: intro-sun 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s forwards;
}
.intro-grain {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image: radial-gradient(#22251f 0.6px, transparent 0.7px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.intro-stage {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.intro-plant {
  width: 150px;
  height: 180px;
  margin-bottom: 4px;
  animation: intro-rise 0.9s cubic-bezier(0.3, 1.4, 0.5, 1) 0.25s both;
}
.intro-plant .stem,
.intro-plant .stem-ink {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: intro-draw 0.9s ease-out 0.55s forwards;
}
.intro-plant.is-entering .plant-svg .leaf {
  animation-duration: 0.6s;
  animation-delay: calc(0.9s + var(--d, 0s));
}
.intro-plant .leaf.l1 { --d: 0.08s; }
.intro-plant .leaf.l2 { --d: 0.16s; }
.intro-plant .leaf.l3 { --d: 0.24s; }
.intro-plant .leaf.l4 { --d: 0.32s; }
.intro-plant .leaf.l5 { --d: 0.4s; }
.intro-plant .flower,
.intro-plant .bud {
  animation: intro-bloom 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 1.35s both !important;
}
.intro-brand {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(64px, 16vw, 112px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.intro-brand span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em) rotate(-4deg);
  filter: blur(6px);
  animation: intro-letter 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(0.75s + var(--i) * 0.08s);
}
.intro-dot {
  position: absolute;
  right: -0.18em;
  top: 0.12em;
  width: 0.16em;
  height: 0.16em;
  border-radius: 50%;
  background: var(--blue);
  transform: scale(0);
  animation: intro-dot 0.55s cubic-bezier(0.3, 1.8, 0.5, 1) 1.3s forwards;
}
.intro-greet {
  font-family: var(--serif);
  font-size: clamp(24px, 6vw, 34px);
  margin: 18px 0 6px;
  opacity: 0;
  animation: intro-fade 0.7s ease 1.45s forwards;
}
.intro-line {
  margin: 0;
  color: #4d5047;
  font-size: 15px;
  opacity: 0;
  animation: intro-fade 0.7s ease 1.75s forwards;
}
.intro-skip {
  position: absolute;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  animation: intro-fade 0.6s ease 1.9s forwards;
}
/* Versão curta (ao abrir já logado): tudo mais rápido. */
.intro-overlay.short .intro-sun { animation-duration: 1s; }
.intro-overlay.short .intro-plant { animation-delay: 0.05s; }
.intro-overlay.short .intro-plant .stem,
.intro-overlay.short .intro-plant .stem-ink { animation-delay: 0.2s; animation-duration: 0.6s; }
.intro-overlay.short .intro-plant.is-entering .plant-svg .leaf { animation-delay: calc(0.5s + var(--d, 0s)); }
.intro-overlay.short .intro-plant .flower,
.intro-overlay.short .intro-plant .bud { animation-delay: 0.8s !important; }
.intro-overlay.short .intro-brand span { animation-delay: calc(0.3s + var(--i) * 0.05s); }
.intro-overlay.short .intro-dot { animation-delay: 0.65s; }
.intro-overlay.short .intro-greet { animation-delay: 0.7s; }
.intro-overlay.short .intro-line { animation-delay: 0.9s; }
.intro-overlay.short .intro-skip { display: none; }
body.intro-playing .fab,
body.intro-playing .bottom-nav {
  opacity: 0;
}
.bottom-nav {
  transition: opacity 0.6s ease 0.3s;
}
@keyframes intro-sun {
  to {
    transform: scale(1);
  }
}
@keyframes intro-rise {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
  }
}
@keyframes intro-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes intro-bloom {
  from {
    opacity: 0;
    scale: 0.2;
  }
}
@keyframes intro-letter {
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes intro-dot {
  to {
    transform: scale(1);
  }
}
@keyframes intro-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Agenda (Minha rotina) ---------- */
.week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}
.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 2px 8px;
  border-radius: 16px;
  border: 1px solid #d2d0c4;
  background: #fffdf6;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.week-day small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.week-day b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
}
.week-day i {
  display: flex;
  gap: 2px;
  height: 5px;
}
.week-day i span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8e6cc4;
}
.week-day.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.week-day.selected small {
  color: #cfcdc0;
}
.week-day.selected i span {
  background: #f2c95c;
}
.agenda-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agenda-list.swap > * {
  animation: rise-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.agenda-list.swap > :nth-child(2) { animation-delay: 0.04s; }
.agenda-list.swap > :nth-child(3) { animation-delay: 0.08s; }
.agenda-list.swap > :nth-child(n + 4) { animation-delay: 0.12s; }
.agenda-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 0;
  border-radius: 18px;
  border: 1px solid #d2d0c4;
  background: #fffdf6;
  position: relative;
  overflow: hidden;
}
.agenda-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--cat, #ddd1f0);
}
.agenda-item.mustard { --cat: #f2c95c; }
.agenda-item.lavender { --cat: #c9b4ec; }
.agenda-item.blue { --cat: #9fc6e8; }
.agenda-item.mint { --cat: #a9cc72; }
.agenda-item.coral { --cat: #ef9a7f; }
.agenda-item.green { --cat: #7da35a; }
.agenda-item.cream { --cat: #d2d0c4; }
.agenda-item time {
  flex: none;
  width: 70px;
  padding-left: 16px;
  font-family: var(--serif);
  font-size: 22px;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.agenda-item time small {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--muted);
}
.agenda-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.agenda-body > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.agenda-body b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda-body small {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.agenda-ic {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--cat) 35%, #fffdf6);
}
.agenda-ic svg {
  width: 19px;
}
.agenda-check {
  display: flex;
  gap: 6px;
  flex: none;
}
.agenda-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: #fffdf6;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: background 0.2s ease, transform 0.2s ease;
}
.agenda-btn.ghost {
  border-color: #cfcdc0;
}
.agenda-btn svg,
.agenda-done svg {
  width: 18px;
}
.agenda-btn:hover {
  background: #dfe8bd;
}
.agenda-done {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #7da35a;
  color: #fff;
  display: grid;
  place-items: center;
  animation: pop 0.4s ease;
}
.agenda-item.done {
  background: #f3f6e6;
}
.agenda-item.done b {
  text-decoration: line-through;
  text-decoration-color: #7da35a88;
}
.agenda-item.skipped,
.agenda-item.partial {
  opacity: 0.75;
}
.agenda-item.due .agenda-btn:not(.ghost) {
  animation: now-pulse 2s ease-in-out infinite;
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px;
  min-height: 118px;
  border-radius: 20px;
  border: 1px solid #c8c8bb;
  text-align: left;
}
.cat-card svg {
  width: 24px;
  height: 24px;
}
.cat-card b {
  font-size: 15px;
  margin-top: auto;
}
.cat-card small {
  font-size: 11px;
  color: #4d5047;
  line-height: 1.3;
}
.cat-card.mustard { background: #f2d98c; }
.cat-card.lavender { background: #ddd1f0; }
.cat-card.blue { background: #cfe0f7; }
.cat-card.mint { background: #dfe8bd; }
.cat-card.coral { background: #efd2c7; }
.cat-card.green { background: #cbd7ae; }
.cat-card.cream { background: #fffaf0; }
.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.preset {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px;
  border-radius: 16px;
  border: 1px solid #cfcdc0;
  background: #fffdf6;
  text-align: left;
  font-size: 13px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.preset svg {
  width: 19px;
  flex: none;
}
.preset span {
  flex: 1;
}
.preset small {
  color: var(--muted);
  font-size: 11px;
}
.preset.selected {
  background: #f2c95c;
  border-color: var(--ink);
}
.time-pick {
  display: flex;
  justify-content: center;
  margin: 10px 0 18px;
}
.time-pick label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: #fffdf6;
}
.time-pick input {
  border: 0;
  background: transparent;
  font-family: var(--serif);
  font-size: 44px;
  color: var(--ink);
  width: 160px;
  text-align: center;
}
.time-pick svg {
  width: 22px;
}
.weekday-pick {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 10px 0 18px;
}
.wd {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #cfcdc0;
  background: #fffdf6;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.wd.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.danger-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a3412a !important;
  margin-top: 8px;
}
.danger-link svg {
  width: 16px;
}
.reason-chips {
  margin-top: 12px;
}
@media (min-width: 761px) {
  .cat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .agenda-list,
  .week-strip {
    max-width: 760px;
  }
  .week-day b {
    font-size: 26px;
  }
}

/* ---------- Anexos (áudio e foto) ---------- */
.cap-tray {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px dashed #b9a8d6;
  background: #fbf8ff;
}
.cap-hint {
  display: block;
  font-size: 13px;
  color: #4d5047;
  margin-bottom: 10px;
}
.cap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cap-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: #fffdf6;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.cap-btn svg {
  width: 16px;
}
.cap-btn.recording {
  background: #c4553a;
  border-color: #c4553a;
  color: #fff;
  animation: rec-pulse 1.4s ease-in-out infinite;
}
.cap-btn:active {
  transform: scale(0.95);
}
.cap-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.cap-photos figure {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #d2d0c4;
  animation: pop 0.35s ease;
}
.cap-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cap-photos button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: #22251fcc;
  color: #fff;
  display: grid;
  place-items: center;
}
.cap-photos button svg {
  width: 14px;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.photo-grid a {
  display: block;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #d2d0c4;
}
.photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.photo-grid a:hover img {
  transform: scale(1.04);
}
.time-pick input{width:210px}

/* =====================================================================
   Jardim: várias espécies, coleção, presentes e acompanhamento
   ===================================================================== */
.plant-svg .stem-ink { fill: none; stroke: #22251f; stroke-width: 8; stroke-linecap: round; }
.plant-svg .stem { fill: none; stroke: #7da35a; stroke-width: 4; stroke-linecap: round; }
.plant-svg.vigor-3 .plant-top { filter: saturate(0.85); }
.plant-svg.vigor-2 .plant-top { filter: saturate(0.6) sepia(0.15); }
.plant-svg.vigor-1 .plant-top { filter: saturate(0.35) sepia(0.35); }
.plant-svg.is-died .plant-top { filter: grayscale(0.85) sepia(0.4) brightness(0.95); }
.plant-progress {
  height: 8px;
  border-radius: 99px;
  background: #e2e0d3;
  border: 1px solid #c9c7b9;
  overflow: hidden;
  margin: 10px 0 6px;
}
.plant-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #a9cc72, #7da35a);
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.plant-card-gifts {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 11px;
  color: #4d5047;
}
.plant-card-gifts svg { width: 13px; }
.plant-card-gifts.new { color: #8e6cc4; font-weight: 700; }
.vigor { display: inline-flex; gap: 2px; }
.vigor i { display: grid; opacity: 0.25; transition: opacity 0.3s ease; }
.vigor i.on { opacity: 1; color: #5f8a3d; }
.vigor svg { width: 15px; height: 15px; }
.gift-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: 20px;
  background: #efe7fa;
  border: 1px solid #cdb9ea;
  color: inherit;
  text-decoration: none;
  animation: rise-in 0.5s ease both;
}
.gift-banner > svg:first-child { width: 26px; height: 26px; color: #8e6cc4; animation: fab-twinkle 2.4s ease-in-out infinite; }
.gift-banner > svg:last-child { width: 18px; margin-left: auto; }
.gift-banner span { display: flex; flex-direction: column; min-width: 0; }
.gift-banner small { color: #4d5047; }
.pot-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid #c8c8bb;
  background: #dfe8bd;
  transition: background 0.4s ease;
}
.pot-card.gift { background: #efe7fa; border-color: #cdb9ea; }
.pot-card.wilted { background: #ece3cc; }
.pot-card.hero { grid-template-columns: 1fr; text-align: left; padding: 18px; }
.pot-card.hero .pot-art { width: min(240px, 66vw); aspect-ratio: 200 / 240; margin: 0 auto; }
.pot-art { width: 110px; aspect-ratio: 200 / 240; }
.pot-copy h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 4px 0; line-height: 1.05; }
.pot-card:not(.hero) .pot-copy h2 { font-size: 22px; }
.pot-status { margin: 6px 0 0; color: #3d4038; font-size: 13px; line-height: 1.45; }
.pot-status b { color: var(--ink); }
.pot-gift { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: #5b4a7a; margin: 2px 0; }
.pot-gift svg { width: 14px; flex: none; margin-top: 2px; }
.pot-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.pot-days { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.pot-row { display: grid; gap: 10px; margin-top: 10px; }
.garden-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; }
.garden-actions .m-primary, .garden-actions .m-print { margin: 0; flex: 1 1 200px; text-decoration: none; color: inherit; }
.garden-actions .m-primary { color: var(--paper); }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.col-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 12px 10px 14px;
  border-radius: 20px;
  border: 1px solid #d2d0c4;
  background: #fffdf6;
  animation: rise-in 0.5s ease both;
}
.col-card.incomum { background: #f3f6e6; }
.col-card.rara { background: linear-gradient(160deg, #fff6d8, #fffdf6 60%); border-color: #e7cf7a; }
.col-art { width: 96px; aspect-ratio: 200 / 240; }
.col-card b { font-size: 14px; margin-top: 4px; }
.col-card small { font-size: 10.5px; color: var(--muted); }
.col-card .rarity {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 99px;
  background: #f2c95c;
  border: 1px solid #22251f33;
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.col-card .rarity.gift { left: auto; right: 8px; background: #ddd1f0; }
.col-card .rarity svg { width: 10px; }
.col-empty p { margin: 0; color: #4d5047; }
.garden-restarts { display: flex; gap: 6px; align-items: center; margin-top: 12px; }
.garden-restarts svg { width: 14px; }
.weights { display: grid; gap: 6px; margin: 10px 0; }
.weights span { display: grid; grid-template-columns: 150px 1fr 34px; align-items: center; gap: 8px; font-size: 12px; }
.weights b { font-weight: 600; }
.weights i { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #a9cc72, #7da35a); }
.weights em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.species-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.species-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px 12px;
  border-radius: 18px;
  border: 1px solid #d2d0c4;
  background: #fffdf6;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.species-card.selected { background: #efe7fa; border-color: var(--ink); box-shadow: 0 0 0 2px #8e6cc4 inset; }
.species-art { width: 80px; aspect-ratio: 200 / 240; }
.species-card b { font-size: 13px; }
.species-card small { font-size: 10.5px; color: var(--muted); }
.species-card i { position: absolute; top: 6px; right: 6px; font-style: normal; font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 99px; background: #f2c95c; }
.seed-packet { width: 150px; aspect-ratio: 200 / 240; margin: 0 auto 10px; animation: intro-rise 0.8s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
.seed-packet.big { width: 180px; }
.invite-actions.center { justify-content: center; margin: 14px 0 6px; }
.sent-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid #d2d0c4;
  background: #fffdf6;
}
.sent-art { width: 58px; aspect-ratio: 200 / 240; flex: none; }
.sent-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sent-copy small { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.sent-copy small svg { width: 14px; flex: none; }
.sent-copy small.muted { color: var(--muted); font-size: 11px; }
.sent-card .text-button svg { width: 18px; }
.share-toggle {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;
  background: #fffdf6;
  border: 1px solid #d2d0c4;
  cursor: pointer;
}
.share-toggle span { display: flex; flex-direction: column; gap: 4px; }
.share-toggle small { color: #4d5047; line-height: 1.45; }
.gift-actions { flex-direction: column; align-items: center; }
.gift-receive .flow-body { text-align: center; }
.gift-receive .share-toggle { text-align: left; }
.seed-track {
  max-width: 520px;
  margin: 6vh auto;
  padding: 24px;
  text-align: center;
}
.seed-track .brand { display: inline-block; margin-bottom: 28px; font-size: 44px; }
.seed-track h1 { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.05; margin: 8px 0 12px; }
.track-status {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 99px;
  background: #dfe8bd;
  border: 1px solid #c8c8bb;
  font-weight: 600;
  margin: 4px 0 18px;
}
.weight-row { display: grid; grid-template-columns: 1fr 90px; gap: 4px 10px; align-items: center; }
.weight-row span { display: flex; flex-direction: column; font-size: 13px; }
.weight-row span small { color: var(--muted); font-size: 11px; }
.weight-row input { width: 90px; padding: 8px; border: 1px solid #cfcdc0; border-radius: 10px; background: var(--paper); font: inherit; }
.weight-row .def { grid-column: 2; font-size: 10px; color: var(--muted); text-align: right; }
#care-form hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
@media (min-width: 761px) {
  .pot-card.hero { grid-template-columns: 280px 1fr; gap: 30px; padding: 26px 32px; }
  .pot-card.hero .pot-art { width: 280px; }
  .pot-card.hero .pot-copy h2 { font-size: 46px; }
  .pot-row { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .col-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .species-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ---------- Correção: sugestões abaixo de campos de texto ---------- */
textarea + .chips,
.counter + .chips,
.seed-msgs {
  margin-top: 16px;
}
.seed-meaning {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  background: #efe7fa;
  border: 1px solid #cdb9ea;
  font-size: 14px;
  line-height: 1.45;
  margin: 10px 0 16px;
  text-align: left;
}
.seed-meaning svg { width: 16px; flex: none; margin-top: 2px; color: #8e6cc4; }
.seed-meaning.big { font-family: var(--serif); font-size: 20px; line-height: 1.3; }
.seed-meaning.big svg { width: 20px; margin-top: 4px; }

/* ---------- Folha (bottom sheet) ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: #22251f; opacity: 0; transition: opacity 0.3s ease; }
.sheet-wrap.open .sheet-backdrop { opacity: 0.38; }
.sheet {
  position: relative;
  width: min(620px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border-radius: 28px 28px 0 0;
  padding: 10px 20px max(22px, env(safe-area-inset-bottom));
  transform: translateY(105%);
  transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.2, 1);
  box-shadow: 0 -20px 50px -20px #22251f66;
}
.sheet-wrap.open .sheet { transform: none; }
.sheet-grip { display: block; width: 44px; height: 5px; border-radius: 9px; background: #cfcdc0; margin: 2px auto 8px; }
.sheet-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #cfcdc0; background: #fffdf6; display: grid; place-items: center; z-index: 2; }
.sheet-x svg { width: 17px; }
.sheet-actions { position: sticky; bottom: -22px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0 4px; background: linear-gradient(transparent, var(--paper) 30%); }
.sheet-actions .button { text-decoration: none; }
@media (min-width: 761px) {
  .sheet-wrap { align-items: center; }
  .sheet { border-radius: 28px; transform: translateY(30px) scale(0.97); opacity: 0; transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.25s ease; }
  .sheet-wrap.open .sheet { opacity: 1; }
}
.species-sheet { display: flex; flex-direction: column; gap: 12px; }
.ss-art { width: 150px; aspect-ratio: 200 / 240; margin: 0 auto -6px; position: relative; }
.ss-art::before { content: ""; position: absolute; inset: 14% 4% 22%; border-radius: 50%; background: #f6e7b4; z-index: -1; }
.ss-art.rara::before { background: radial-gradient(circle, #ffe9a6, #f6e7b4); box-shadow: 0 0 40px #f9bd3266; }
.ss-head { text-align: center; }
.ss-head h2 { font-family: var(--serif); font-weight: 400; font-size: 36px; margin: 0; line-height: 1.05; }
.ss-sci { font-style: italic; color: var(--muted); margin: 4px 0 10px; }
.ss-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ss-tags span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 99px; background: #fffdf6; border: 1px solid #d2d0c4; font-size: 12px; }
.ss-tags svg { width: 13px; }
.ss-block { padding: 14px 16px; border-radius: 18px; background: #fffdf6; border: 1px solid #d2d0c4; text-align: left; }
.ss-block .eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.ss-block .eyebrow svg { width: 14px; }
.ss-block p { margin: 8px 0 0; line-height: 1.5; }
.ss-block ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.45; }
.ss-block.meaning { background: #efe7fa; border-color: #cdb9ea; }
.ss-block.meaning p { font-family: var(--serif); font-size: 20px; line-height: 1.3; }
.ss-block.care { background: #dfe8bd; border-color: #c8c8bb; }
.ss-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ss-stats span { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 6px; border-radius: 14px; background: #fffdf6; border: 1px solid #d2d0c4; }
.ss-stats b { font-size: 13px; }
.ss-stats small { font-size: 11px; color: var(--muted); }
.gift-know { margin-top: 22px; text-align: left; }
.gift-know .ss-art { display: none; }
.gift-know .ss-head h2 { font-size: 28px; }
[data-plant-info] { cursor: pointer; }
/* aviso de presente */
.gift-pop { text-align: center; padding-top: 6px; }
.gift-pop h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; margin: 8px 0; }
.gift-pop blockquote { font-family: var(--serif); font-size: 22px; margin: 10px auto; padding: 12px 16px; border-radius: 18px; background: #efe7fa; max-width: 440px; }
.gift-pop p { color: #4d5047; line-height: 1.5; }
.gift-pop-art { position: relative; width: 140px; aspect-ratio: 200 / 240; margin: 4px auto 0; animation: gift-bob 2.8s ease-in-out infinite; }
.gift-pop-art .petal { position: absolute; width: 12px; height: 18px; border-radius: 60% 0 60% 0; background: #c9b4ec; border: 1.5px solid #22251f; animation: petal-fall 3.2s ease-in infinite; opacity: 0; }
.gift-pop-art .p1 { left: 10%; animation-delay: 0.2s; }
.gift-pop-art .p2 { left: 70%; animation-delay: 0.9s; background: #f3b6cf; }
.gift-pop-art .p3 { left: 40%; animation-delay: 1.6s; background: #f9bd32; }
.gift-pop-art .p4 { left: 85%; animation-delay: 2.3s; background: #a9cc72; }
@keyframes gift-bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
@keyframes petal-fall {
  0% { opacity: 0; transform: translateY(-30px) rotate(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(120px) rotate(220deg); }
}

/* =====================================================================
   Plantas vivas: folhas balançam, flores respiram, árvores "respiram"
   (CSS puro — usa rotate/scale individuais para não brigar com o transform do SVG)
   ===================================================================== */
.plant-svg .leaf {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: leaf-rustle 4.6s ease-in-out infinite;
}
.plant-svg ellipse.leaf,
.plant-svg circle.leaf,
.plant-svg rect.leaf { transform-origin: 50% 100%; }
.plant-svg circle.leaf { animation-name: canopy-breathe; animation-duration: 5.5s; }
.plant-svg .leaf.l1 { animation-delay: -0.7s; }
.plant-svg .leaf.l2 { animation-delay: -1.4s; animation-duration: 5.2s; }
.plant-svg .leaf.l3 { animation-delay: -2.1s; }
.plant-svg .leaf.l4 { animation-delay: -2.8s; animation-duration: 5.6s; }
.plant-svg .leaf.l5 { animation-delay: -3.5s; }
.plant-svg .flower { animation: flower-sway 6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.plant-svg .bud { transform-box: fill-box; transform-origin: 50% 100%; animation: bud-pulse 3.4s ease-in-out infinite; }
.plant-svg .bloom { transform-box: fill-box; transform-origin: center; animation: bloom-twinkle 2.8s ease-in-out infinite; }
.plant-svg .bloom:nth-of-type(2n) { animation-delay: -1s; }
.plant-svg .bloom:nth-of-type(3n) { animation-delay: -1.8s; }
.plant-svg.is-wilted .leaf,
.plant-svg.is-died .leaf,
.plant-svg.is-died .flower { animation-duration: 9s; }
@keyframes leaf-rustle {
  0%, 100% { rotate: 0deg; }
  35% { rotate: -7deg; }
  70% { rotate: 4deg; }
}
@keyframes canopy-breathe {
  0%, 100% { scale: 1; }
  50% { scale: 1.045; }
}
@keyframes flower-sway {
  0%, 100% { rotate: -4deg; scale: 1; }
  50% { rotate: 5deg; scale: 1.05; }
}
@keyframes bud-pulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.08 1.12; }
}
@keyframes bloom-twinkle {
  0%, 100% { scale: 1; opacity: 1; }
  50% { scale: 1.25; opacity: 0.8; }
}
/* Grade de sementes: cada vaso com seu ritmo, e um "pulinho" ao passar o dedo */
.species-grid .species-card {
  animation: rise-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.species-grid .species-card:nth-child(2) { animation-delay: 0.04s; }
.species-grid .species-card:nth-child(3) { animation-delay: 0.08s; }
.species-grid .species-card:nth-child(4) { animation-delay: 0.12s; }
.species-grid .species-card:nth-child(5) { animation-delay: 0.16s; }
.species-grid .species-card:nth-child(n + 6) { animation-delay: 0.2s; }
.species-art { transform-origin: 50% 100%; animation: pot-bob 4.8s ease-in-out infinite; }
.species-card:nth-child(3n + 2) .species-art { animation-delay: -1.6s; animation-duration: 5.4s; }
.species-card:nth-child(3n) .species-art { animation-delay: -3.1s; animation-duration: 4.2s; }
.species-card:nth-child(3n + 2) .plant-top { animation-delay: -2s; }
.species-card:nth-child(3n) .plant-top { animation-delay: -3.7s; }
@media (hover: hover) {
  .species-card:hover .species-art { animation: pot-happy 0.9s ease-in-out infinite; }
  .species-card:hover .plant-svg .leaf { animation-duration: 1.4s; }
  .col-card:hover .col-art,
  .pot-card:hover .pot-art { animation: pot-happy 1s ease-in-out 2; }
}
.species-card:active .species-art { animation: pot-happy 0.5s ease-in-out; }
.species-card.rara::after,
.species-card:has(i)::after {
  content: "";
  position: absolute;
  top: 34%;
  right: 22%;
  width: 7px;
  height: 7px;
  background: #f9bd32;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: sparkle 2.6s ease-in-out infinite;
}
@keyframes pot-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}
@keyframes pot-happy {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  25% { rotate: -5deg; translate: 0 -5px; }
  75% { rotate: 5deg; translate: 0 -3px; }
}
@keyframes sparkle {
  0%, 100% { opacity: 0; scale: 0.4; rotate: 0deg; }
  50% { opacity: 1; scale: 1.3; rotate: 45deg; }
}
.col-art, .pot-art, .ss-art { transform-origin: 50% 100%; }
.ss-art { animation: pot-bob 5s ease-in-out infinite; }
/* Pólen flutuando no vaso principal */
.pot-card.hero { position: relative; overflow: hidden; }
.pot-card.hero::before,
.pot-card.hero::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f2c95c;
  box-shadow: 40px 30px 0 -1px #fffaf0, 90px -20px 0 0 #f2c95c, 150px 40px 0 -1px #fffaf0, 60px 90px 0 0 #c9b4ec;
  left: 12%;
  bottom: 18%;
  opacity: 0.8;
  animation: pollen 9s linear infinite;
  pointer-events: none;
}
.pot-card.hero::after { left: 30%; animation-delay: -4.5s; animation-duration: 11s; }
@keyframes pollen {
  0% { translate: 0 0; opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.6; }
  100% { translate: 30px -160px; opacity: 0; }
}

/* ---------- Idioma ---------- */
.lang-picker { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ink, #1d2b22) 6%, transparent); flex-wrap: wrap; }
.lang-opt { border: 0; background: transparent; font: inherit; font-size: 0.86rem; padding: 7px 14px; border-radius: 999px; cursor: pointer; color: inherit; transition: background 0.2s, color 0.2s, transform 0.2s; }
.lang-opt:hover { transform: translateY(-1px); }
.lang-opt.is-on { background: var(--ink, #1d2b22); color: #fff; }
.lang-picker.compact .lang-opt { padding: 5px 10px; font-size: 0.8rem; }
.pm-lang { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.pm-lang > svg { width: 18px; height: 18px; opacity: 0.7; flex: none; }
.auth-lang { margin: 18px auto 0; display: flex; width: max-content; }
.account-lang .lang-picker { margin-top: 10px; }

/* ---------- Marca TheLifeSeed ---------- */
.brand { font-size: 34px; letter-spacing: -1.2px; gap: 5px; white-space: nowrap; }
.bm { display: inline-flex; align-items: baseline; }
.bm i { font-style: italic; font-weight: 400; font-size: 0.56em; letter-spacing: 0; margin-right: 1px; opacity: 0.75; }
.bm b { font-weight: 700; color: #3f7a4a; }
.brand-dot { width: 9px; height: 13px; margin-top: 2px; background: #6aa86f; border-radius: 0 100% 0 100%; transform: rotate(-12deg); }
.mobile-brand { font-size: 26px; }
@media (max-width: 760px) {
  .mobile-brand { font-size: 26px; }
  .brand-dot { width: 7px; height: 10px; margin-top: 1px; }
}
.auth-mobile-brand.brand, .seed-track .brand { font-size: 30px; }
.intro-brand { font-size: clamp(38px, 11vw, 92px); letter-spacing: -0.03em; }
.intro-brand span:nth-child(-n + 3) { font-style: italic; font-size: 0.6em; }
.intro-brand span:nth-child(n + 8) { color: #3f7a4a; }

/* =========================================================
   TheLifeSeed — landing, acompanhar amigo, semente pública
   ========================================================= */
.lp { --lp-green: #3f7a4a; --lp-leaf: #6aa86f; --lp-sun: #f6d77a; --lp-cream: #fbf8ee; background: var(--paper); color: var(--ink); min-height: 100dvh; overflow-x: clip; }
.lp-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 14px clamp(16px, 4vw, 48px); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.lp-top .brand { font-size: 26px; }
.lp-nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
.lp-nav a { color: inherit; text-decoration: none; opacity: 0.75; }
.lp-nav a:hover { opacity: 1; }
.lp-top-actions { display: flex; align-items: center; gap: 12px; }
.lp-link { color: inherit; font-size: 14px; text-decoration: none; }
.lp-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 11px 18px; font: 600 14px var(--sans); text-decoration: none; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; white-space: nowrap; }
.lp-btn svg { width: 16px; height: 16px; }
.lp-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(34, 37, 31, 0.6); }
.lp-btn.big { padding: 15px 24px; font-size: 16px; }
.lp-ghost { display: inline-flex; align-items: center; gap: 6px; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.lp-ghost svg { width: 16px; }
.lp-eyebrow { display: inline-block; font-size: 11px; letter-spacing: 1.6px; font-weight: 650; color: var(--lp-green); }

.lp-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(20px, 4vw, 60px); align-items: center; padding: clamp(36px, 6vw, 90px) clamp(16px, 5vw, 72px) 40px; max-width: 1240px; margin: 0 auto; }
.lp-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 7.4vw, 96px); line-height: 0.98; letter-spacing: -0.02em; margin: 14px 0 18px; }
.lp-hero h1 em { font-style: italic; color: var(--lp-green); }
.lp-lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; max-width: 34em; color: #3b3f37; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: 26px; }
.lp-cta.center { justify-content: center; }
.lp-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 18px; }
.lp-note svg { width: 16px; }
.lp-hero-art { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; display: grid; place-items: end center; }
.lp-sun { position: absolute; inset: 8% 8% 14%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #fbe7a0, var(--lp-sun) 60%, #f1c45c); animation: lp-sun 9s ease-in-out infinite; }
.lp-sun.small { inset: 6% 10% 18%; }
@keyframes lp-sun { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }
.lp-hero-plant { position: relative; width: 78%; }
.lp-hero-plant .plant-svg { width: 100%; height: auto; display: block; }
.lp-hero-plant.pop .plant-svg, .lp-mini-plant.pop .plant-svg { animation: lp-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4); transform-origin: 50% 90%; }
@keyframes lp-pop { 0% { scale: 0.94; } 60% { scale: 1.03; } 100% { scale: 1; } }
.lp-float { position: absolute; display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; box-shadow: 3px 3px 0 var(--ink); animation: lp-float 5s ease-in-out infinite; }
.lp-float svg { width: 15px; height: 15px; }
.lp-float.f1 { top: 14%; left: -2%; background: var(--purple); }
.lp-float.f2 { top: 38%; right: -4%; background: var(--mint); animation-delay: -1.6s; }
.lp-float.f3 { bottom: 16%; left: 2%; background: #fff4c8; animation-delay: -3s; }
@keyframes lp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.lp-lexicon { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 1240px; margin: 10px auto 0; padding: 0 clamp(16px, 5vw, 72px); }
.lp-lexicon article { background: var(--lp-cream); border: 1px solid var(--line); border-radius: 22px; padding: 18px; }
.lp-lexicon b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; margin: 10px 0 6px; }
.lp-lexicon p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #4b4f46; }
.lp-lex-ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--mint); }
.lp-lexicon article:nth-child(2) .lp-lex-ic { background: var(--pink); }
.lp-lexicon article:nth-child(3) .lp-lex-ic { background: #e5f3b8; }
.lp-lexicon article:nth-child(4) .lp-lex-ic { background: var(--purple); }
.lp-lexicon article:nth-child(5) .lp-lex-ic { background: #fff0bf; }
.lp-lex-ic svg { width: 19px; }

.lp-section { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 8vw, 110px) clamp(16px, 5vw, 72px) 0; }
.lp-section > h2, .lp-daily h2, .lp-shared h2, .lp-final h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02; letter-spacing: -0.015em; margin: 12px 0 14px; max-width: 18em; }
.lp-sub { color: #4b4f46; max-width: 46em; line-height: 1.55; }
.lp-small { font-size: 13px; color: #5a5e55; line-height: 1.5; }
.lp-steps { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: s; }
.lp-steps li { position: relative; background: #fff; border: 1.5px solid var(--ink); border-radius: 26px; padding: 22px 20px 20px; box-shadow: 4px 4px 0 var(--ink); }
.lp-steps li > svg { width: 26px; height: 26px; color: var(--lp-green); }
.lp-steps h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 12px 0 8px; }
.lp-steps p { margin: 0; font-size: 14px; line-height: 1.5; color: #45493f; }
.lp-n { position: absolute; top: 16px; right: 18px; font-family: var(--serif); font-size: 34px; color: var(--line); }

.lp-daily { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.lp-daily-copy { position: sticky; top: 90px; }
.lp-mini-plant { display: inline-flex; flex-direction: column; align-items: center; background: #e9f3d9; border-radius: 26px; padding: 14px 26px 10px; margin: 14px 0 6px; }
.lp-mini-plant .plant-svg { width: 130px; height: auto; }
.lp-mini-plant span { font-size: 12px; font-weight: 650; letter-spacing: 1px; text-transform: uppercase; color: var(--lp-green); }
.lp-checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; }
.lp-checklist ul::before { content: ""; position: absolute; left: 44px; top: 20px; bottom: 20px; border-left: 2px dashed var(--line); }
.lp-check { position: relative; width: 100%; display: grid; grid-template-columns: 46px 40px 1fr auto 30px; gap: 10px; align-items: center; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 12px 14px; font: inherit; color: inherit; cursor: pointer; transition: border-color 0.2s, background 0.25s, transform 0.2s; }
.lp-check:hover { transform: translateX(3px); border-color: var(--ink); }
.lp-check time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lp-check-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--paper); }
.lp-check-ic svg { width: 18px; }
.lp-check-copy b { display: block; font-size: 15px; }
.lp-check-copy small, .lp-bonus small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.lp-pts { font-size: 12px; font-weight: 650; color: var(--lp-green); background: #e9f3d9; border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.lp-tick { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); color: transparent; transition: all 0.25s; }
.lp-tick svg { width: 15px; }
.lp-check.on { background: #f1f8e6; border-color: var(--lp-leaf); }
.lp-check.on .lp-tick { background: var(--lp-green); border-color: var(--lp-green); color: #fff; animation: lp-tick 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.5); }
@keyframes lp-tick { 0% { scale: 0.5; } 100% { scale: 1; } }
.lp-bonus-h { font-weight: 650; margin: 22px 0 10px; }
.lp-bonus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lp-bonus > div { background: var(--lp-cream); border: 1px dashed #c9cbbd; border-radius: 18px; padding: 14px; display: grid; gap: 6px; justify-items: start; }

.lp-species { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 30px; }
.lp-sp { position: relative; display: grid; justify-items: center; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 12px 8px 14px; font: inherit; color: inherit; cursor: pointer; transition: transform 0.25s, border-color 0.2s; animation: lp-rise 0.7s both; animation-delay: calc(var(--i) * 0.05s); }
.lp-sp:hover { transform: translateY(-4px) rotate(-1deg); border-color: var(--ink); }
.lp-sp-art .plant-svg { width: 92px; height: auto; }
.lp-sp b { font-size: 14px; }
.lp-sp small { font-size: 12px; color: var(--muted); }
.lp-sp em { position: absolute; top: 8px; right: 8px; font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; background: #fff0bf; border-radius: 999px; padding: 3px 7px; }
.lp-sp.rara { background: linear-gradient(160deg, #fffbe9, #fff); }
.lp-sp.rara em { background: var(--lp-sun); }
@keyframes lp-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.lp-life { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 18px; }
.lp-stages { display: flex; align-items: flex-end; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 18px; }
.lp-stages > div { display: grid; justify-items: center; }
.lp-stages .plant-svg { width: 74px; height: auto; }
.lp-stages small { font-size: 12px; color: var(--muted); }
.lp-arrow { align-self: center; color: var(--line); }
.lp-arrow svg { width: 16px; }
.lp-vigor { display: flex; gap: 18px; align-items: center; background: #f6eedb; border-radius: 26px; padding: 22px; }
.lp-vigor h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0 0 6px; }
.lp-vigor p { margin: 0; font-size: 14px; line-height: 1.5; color: #4b4f46; }
.lp-leaves { display: grid; grid-template-columns: repeat(2, 30px); gap: 6px; color: var(--lp-green); flex: none; }
.lp-leaves svg { width: 28px; height: 28px; fill: #b9dfa3; }
.lp-leaves .lost svg { fill: transparent; color: #c9b58f; animation: lp-fall 3.4s ease-in-out infinite; }
@keyframes lp-fall { 0%, 40% { translate: 0 0; rotate: 0deg; opacity: 1; } 80% { translate: 6px 16px; rotate: 40deg; opacity: 0; } 100% { opacity: 0; } }

.lp-shared { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.lp-bullets { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.lp-bullets li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.lp-bullets svg { width: 18px; color: var(--lp-green); flex: none; }
.lp-follow { background: var(--purple); border: 1.5px solid var(--ink); border-radius: 28px; padding: 24px; box-shadow: 5px 5px 0 var(--ink); }
.lp-follow h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 6px 0; }
.lp-follow p { margin: 0 0 14px; font-size: 14px; }
.lp-follow-art { float: right; width: 92px; margin: -8px -4px 0 8px; }
.lp-follow-art .plant-svg { width: 100%; height: auto; }
.lp-follow-row { display: flex; gap: 8px; background: #fff; border-radius: 999px; padding: 5px; border: 1px solid var(--ink); clear: both; }
.lp-follow-row input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 12px; font: inherit; outline: none; }
.lp-follow-err { color: #b23b2e; font-size: 13px; margin: 8px 0 0 !important; min-height: 1em; }

.lp-core-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0 18px; }
.lp-act { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 20px; }
.lp-act small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.lp-act small svg { width: 14px; }
.lp-act h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 10px 0; }
.lp-why { margin: 0; font-size: 14px; line-height: 1.5; background: #fff8dc; border-radius: 14px; padding: 10px 12px; }

.lp-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-trust > div { border-top: 1.5px solid var(--ink); padding-top: 18px; }
.lp-trust svg { width: 24px; color: var(--lp-green); }
.lp-trust h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 8px 0 6px; }
.lp-trust p { margin: 0; color: #4b4f46; line-height: 1.5; font-size: 15px; }

.lp-final { text-align: center; padding: clamp(70px, 9vw, 130px) 16px clamp(60px, 7vw, 90px); }
.lp-final h2 { margin: 16px auto 8px; }
.lp-final p { color: #4b4f46; }
.lp-final-art { display: flex; justify-content: center; align-items: flex-end; gap: 4px; }
.lp-final-art span { width: clamp(70px, 10vw, 120px); animation: lp-rise 0.8s both; animation-delay: calc(var(--i) * 0.12s); }
.lp-final-art .plant-svg { width: 100%; height: auto; }
.lp-final-art span:nth-child(3) { width: clamp(90px, 13vw, 150px); }
.lp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 26px clamp(16px, 5vw, 72px); border-top: 1px solid var(--line); font-size: 14px; color: #4b4f46; }
.lp-foot .brand { font-size: 22px; }
.lp-foot small { margin-left: auto; color: var(--muted); }

/* Acompanhar amigo */
.lp-follow-page { max-width: 760px; margin: 0 auto; padding: clamp(40px, 8vw, 100px) 16px 60px; }
.lp-follow-page h1, .lp-track-copy h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 7vw, 76px); line-height: 1; margin: 12px 0 16px; }
.lp-follow.big { margin: 26px 0; padding: 14px; }
.lp-follow-see { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.lp-follow-see > div { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px; display: grid; gap: 4px; }
.lp-follow-see svg { width: 20px; color: var(--lp-green); }
.lp-follow-see small { color: var(--muted); }

/* Semente pública */
.lp-track { max-width: 1040px; margin: 0 auto; padding: clamp(28px, 6vw, 70px) 16px 60px; }
.lp-track-card { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(20px, 4vw, 50px); align-items: center; background: var(--lp-cream); border: 1.5px solid var(--ink); border-radius: 34px; padding: clamp(18px, 4vw, 40px); box-shadow: 6px 6px 0 var(--ink); }
.lp-track-card:has(> p:only-child), .lp-track-card:has(> h1) { display: block; text-align: center; }
.lp-track-art { position: relative; aspect-ratio: 1; display: grid; place-items: end center; }
.lp-track-art .plant-svg { position: relative; width: 82%; height: auto; }
.lp-track-copy h1 span { font-style: italic; color: var(--lp-green); font-size: 0.6em; }
.lp-track-status { display: inline-flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 600; }
.lp-track-status svg { width: 17px; color: var(--lp-green); }
.lp-track-stages { display: grid; grid-template-columns: repeat(6, 1fr); margin: 22px 0 10px; position: relative; }
.lp-track-stages::before { content: ""; position: absolute; top: 7px; left: 8%; right: 8%; border-top: 2px solid var(--line); }
.lp-track-stages span { position: relative; display: grid; justify-items: center; gap: 6px; }
.lp-track-stages i { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--line); }
.lp-track-stages .on i { background: var(--lp-leaf); border-color: var(--lp-green); }
.lp-track-stages .now i { box-shadow: 0 0 0 5px #d7ecc8; animation: lp-now 2.4s ease-in-out infinite; }
@keyframes lp-now { 50% { box-shadow: 0 0 0 9px #d7ecc800; } }
.lp-track-stages small { font-size: 11px; color: var(--muted); }
.lp-track-bar { height: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lp-track-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--lp-leaf), var(--lp-green)); border-radius: 999px; animation: lp-bar 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes lp-bar { from { width: 0; } }
.lp-track-copy blockquote { font-family: var(--serif); font-size: 21px; line-height: 1.3; margin: 18px 0 12px; padding: 14px 18px; background: var(--purple); border-radius: 18px; }
.lp-track-cta { text-align: center; margin-top: 30px; }
.lp-track-cta p { font-family: var(--serif); font-size: 26px; margin: 0 0 12px; }

/* Entrada: voltar à apresentação */
.auth-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: inherit; text-decoration: none; opacity: 0.75; margin-bottom: 10px; }
.auth-back svg { width: 15px; }

@media (max-width: 1100px) {
  .lp-nav { display: none; }
  .lp-top-actions { margin-left: auto; }
  .lp-lexicon { grid-template-columns: repeat(3, 1fr); }
  .lp-steps { grid-template-columns: repeat(2, 1fr); }
  .lp-species { grid-template-columns: repeat(5, 1fr); }
  .lp-life { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .lp-top { gap: 10px; padding: 10px 16px; }
  .lp-top .brand { font-size: 21px; }
  .lp-top .lp-btn { display: none; }
  .lp-hero { grid-template-columns: 1fr; padding-top: 26px; }
  .lp-hero-art { order: -1; max-width: 330px; }
  .lp-float { font-size: 12px; padding: 5px 10px; }
  .lp-lexicon { grid-template-columns: 1fr 1fr; }
  .lp-lexicon article:last-child { grid-column: 1 / -1; }
  .lp-steps, .lp-core-grid, .lp-trust, .lp-follow-see, .lp-bonus { grid-template-columns: 1fr; }
  .lp-daily, .lp-shared, .lp-track-card { grid-template-columns: 1fr; }
  .lp-daily-copy { position: static; }
  .lp-check { grid-template-columns: 40px 34px 1fr auto; padding: 10px; }
  .lp-check .lp-tick { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; background: #fff; }
  .lp-checklist ul::before { left: 38px; }
  .lp-species { grid-template-columns: repeat(2, 1fr); }
  .lp-stages { overflow-x: auto; }
  .lp-stages .plant-svg { width: 52px; }
  .lp-vigor { flex-direction: column; align-items: flex-start; }
  .lp-foot small { margin-left: 0; }
  .lp-track-art { max-width: 280px; margin: 0 auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before { animation: none !important; }
}
.auth-story h1 { max-width: 7.6em; }

/* Logo: ícone + palavra */
.brand { gap: 8px; align-items: center; }
.bm-ic { height: 1.25em; width: auto; flex: none; display: block; }
.bm { font-family: Georgia, serif; }
.bm i { font-style: normal; font-weight: 400; font-size: 0.62em; opacity: 1; margin-right: 2px; }
.bm b { color: #3e7d4f; }
.sidebar .brand { font-size: 30px; }
.sidebar .brand-caption { margin-top: 8px; padding-left: 46px; letter-spacing: 2.4px; font-size: 8.5px; }
.lp-top .bm-ic { height: 1.35em; }
.intro-brand span:nth-child(-n + 3) { font-style: normal; }
.m-stage > .m-screen-head { margin-bottom: 18px; }

/* ---------- Documentos em etapas ---------- */
.doc-ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #f1ede1; flex: none; }
.doc-ic svg { width: 20px; height: 20px; }
.doc-ic.big { width: 54px; height: 54px; border-radius: 18px; }
.doc-ic.huge { width: 76px; height: 76px; border-radius: 24px; margin-bottom: 8px; animation: doc-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.doc-ic.huge svg { width: 34px; height: 34px; }
.doc-ic.lavender, .doc-type.lavender .doc-ic { background: #e8dafa; }
.doc-ic.mint, .doc-type.mint .doc-ic { background: #c9edda; }
.doc-ic.yellow, .doc-type.yellow .doc-ic { background: #f6e7a6; }
.doc-ic.coral, .doc-type.coral .doc-ic { background: #f4cfc2; }
.doc-ic.green, .doc-type.green .doc-ic { background: #dcebc4; }
.doc-ic.cream, .doc-type.cream .doc-ic { background: #efe9da; }
@keyframes doc-pop { from { scale: 0.6; opacity: 0; } }
.doc-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.doc-type { display: grid; gap: 4px; justify-items: start; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 14px; font: inherit; color: inherit; cursor: pointer; transition: transform 0.2s, border-color 0.2s; animation: lp-rise 0.5s both; animation-delay: calc(var(--i) * 0.05s); }
.doc-type:hover { transform: translateY(-2px); border-color: var(--ink); }
.doc-type b { font-size: 15px; margin-top: 6px; line-height: 1.2; }
.doc-type small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.doc-why { display: grid; justify-items: start; }
.doc-info-cards { display: grid; gap: 10px; margin-top: 14px; width: 100%; }
.doc-info-cards article { display: flex; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 14px; animation: lp-rise 0.5s both; }
.doc-info-cards article:nth-child(2) { animation-delay: 0.12s; }
.doc-info-cards article:nth-child(3) { animation-delay: 0.24s; background: #fffbe9; }
.doc-info-cards article > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); flex: none; }
.doc-info-cards svg { width: 17px; }
.doc-info-cards b { font-size: 15px; }
.doc-info-cards p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: #45493f; }
.doc-drop { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.doc-pick { display: grid; justify-items: center; gap: 10px; padding: 26px 12px; border: 1.5px dashed #bdbfae; border-radius: 22px; background: #fff; cursor: pointer; text-align: center; transition: border-color 0.2s, background 0.2s; }
.doc-pick:hover { border-color: var(--ink); background: #fbfaf4; }
.doc-pick svg { width: 28px; height: 28px; }
.doc-file { display: flex; align-items: center; gap: 12px; margin-top: 18px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 12px 14px; animation: lp-rise 0.4s both; }
.doc-file div, .doc-card div { flex: 1; min-width: 0; display: grid; }
.doc-file b, .doc-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-file small, .doc-card small { color: var(--muted); }
.doc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.doc-done { display: grid; justify-items: center; text-align: center; gap: 8px; padding-top: 10vh; }
.doc-done .doc-ic.huge { background: #dcebc4; }
.doc-list { display: grid; gap: 8px; margin-top: 14px; }
.doc-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 12px 14px; color: inherit; text-decoration: none; transition: transform 0.2s; }
.doc-row:hover { transform: translateX(3px); }
.doc-copy { flex: 1; min-width: 0; display: grid; }
.doc-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-copy small { color: var(--muted); font-size: 12px; }
.doc-row > svg { width: 18px; color: var(--muted); }
.doc-empty { text-align: center; padding: 30px 10px; }
.doc-empty-types { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.doc-empty h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 6px; }
.doc-empty p { color: var(--muted); }
.doc-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 14px; margin-bottom: 12px; }
.doc-note { background: #fffbe9; border-radius: 20px; padding: 14px; margin-bottom: 14px; }
.doc-note p { margin: 6px 0 0; white-space: pre-wrap; }
.doc-private { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 12px; }
.doc-private svg { width: 14px; }
.doc-steps { display: flex; gap: 5px; }
.doc-steps i { width: 22px; height: 4px; border-radius: 4px; background: var(--line); }
.doc-steps i.on { background: var(--ink); }
@media (min-width: 761px) {
  .doc-types { grid-template-columns: repeat(3, 1fr); }
  .doc-flow { max-width: 680px; margin: 0 auto; }
}

/* Landing: psicologia leve */
.lp-badge { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 6px 13px 6px 9px; font-size: 13px; font-weight: 650; box-shadow: 2px 2px 0 var(--ink); margin-bottom: 14px; }
.lp-badge svg { width: 17px; height: 17px; color: #fff; fill: #3e7d4f; }
.lp-hero-copy .lp-badge { display: flex; width: max-content; }
.lp-mind-head .lp-badge { display: flex; width: max-content; }
.lp-mind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.lp-mind-grid article { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 20px; animation: lp-rise 0.6s both; animation-delay: calc(var(--i) * 0.06s); }
.lp-mind-grid h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 12px 0 6px; }
.lp-mind-grid p { margin: 0; font-size: 14px; line-height: 1.5; color: #45493f; }
.lp-mind-ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; }
.lp-mind-ic svg { width: 20px; }
.lp-mind-ic.coral { background: #f4cfc2; } .lp-mind-ic.mint { background: #c9edda; } .lp-mind-ic.lavender { background: #e8dafa; }
.lp-mind-ic.yellow { background: #f6e7a6; } .lp-mind-ic.green { background: #dcebc4; } .lp-mind-ic.cream { background: #efe9da; }
.lp-mind-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #5a5e55; margin-top: 16px; }
.lp-mind-note svg { width: 16px; flex: none; margin-top: 1px; }
@media (max-width: 1100px) { .lp-mind-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .lp-mind-grid { grid-template-columns: 1fr; } }
.lp-mind-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02; letter-spacing: -0.015em; margin: 12px 0 14px; max-width: 18em; }

/* Marca: "Seed" em laranja, como na logo */
.bm b { color: #e0583a; }
.intro-brand span:nth-child(n + 8) { color: #e0583a; }
/* Botão principal da landing em roxo */
.lp-btn { background: #6a45d6; box-shadow: 0 8px 20px -12px rgba(106, 69, 214, 0.9); }
.lp-btn:hover { background: #5a37c4; box-shadow: 0 12px 26px -12px rgba(90, 55, 196, 0.9); }
.lp-track-cta .lp-btn, .lp-follow .lp-btn { background: #6a45d6; }

/* ---------- Jardim em seções ---------- */
.g-sec { margin-top: 22px; }
.g-sec:first-of-type { margin-top: 4px; }
.g-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.g-sec-head h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0; line-height: 1.1; }
.g-sec-head small { color: var(--muted); font-size: 12px; }
.g-sec-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; flex: none; }
.g-sec-ic svg { width: 19px; height: 19px; }
.g-sec-ic.now { background: #dcebc4; } .g-sec-ic.gift { background: #e8dafa; } .g-sec-ic.share { background: #f4cfc2; } .g-sec-ic.col { background: #f6e7a6; }
.g-count { margin-left: auto; font-weight: 700; font-size: 13px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.g-group { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 14px; margin-bottom: 10px; }
.g-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.g-group-head > svg { width: 17px; color: #3f7a4a; }
.g-group-head b { font-size: 15px; }
.g-group-head small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.g-progress { flex: 1; height: 6px; background: #efece2; border-radius: 99px; overflow: hidden; margin: 0 4px 0 6px; }
.g-progress i { display: block; height: 100%; background: linear-gradient(90deg, #8cc58a, #3f7a4a); border-radius: 99px; }
.g-group .col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.col-card.locked { background: #f7f5ee; border: 1px dashed #cfccbd; font: inherit; color: inherit; cursor: pointer; }
.col-card.locked .col-art { filter: grayscale(1) brightness(1.15) opacity(0.45); }
.col-card.locked b { color: #6b6e66; }
.ss-locked { display: flex; gap: 8px; align-items: center; background: #f6f2e6; border-radius: 14px; padding: 10px 12px; font-size: 13px; margin: 0 0 10px; }
.ss-locked svg { width: 15px; flex: none; }

/* ---------- Sino de notificações ---------- */
.bell { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; margin-right: 8px; transition: transform 0.2s; }
.bell[hidden] { display: none; }
.bell svg { width: 19px; height: 19px; }
.bell:hover { transform: translateY(-1px); }
.bell.has-new svg { animation: bell-ring 2.6s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes bell-ring { 0%, 70%, 100% { rotate: 0deg; } 74% { rotate: 14deg; } 80% { rotate: -12deg; } 86% { rotate: 8deg; } 92% { rotate: -4deg; } }
.bell-count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #e0583a; color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--paper); }
.bell-count[hidden] { display: none; }
.header-right { display: flex; align-items: center; }
.inbox-sheet-body { padding-bottom: 8px; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.inbox-head h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 0; }
.inbox-head .text-button svg { width: 15px; }
.inbox-group { margin-top: 14px; }
.inbox-group h3 { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; font-weight: 650; }
.inbox-group h3 svg { width: 14px; }
.inbox-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 18px; background: #fff; border: 1px solid var(--line); margin-bottom: 6px; color: inherit; text-decoration: none; transition: transform 0.2s; animation: lp-rise 0.4s both; }
.inbox-item:hover { transform: translateX(3px); }
.inbox-item.new::after { content: ""; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #e0583a; }
.inbox-item > svg { width: 16px; color: var(--muted); flex: none; }
.inbox-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.inbox-copy b { font-size: 14px; }
.inbox-copy small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.inbox-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; flex: none; background: #f1ede1; }
.inbox-ic svg { width: 17px; }
.inbox-ic.yellow { background: #f6e7a6; } .inbox-ic.green { background: #dcebc4; } .inbox-ic.coral { background: #f4cfc2; }
.inbox-ic.lavender { background: #e8dafa; } .inbox-ic.blue { background: #d6e6fb; } .inbox-ic.cream { background: #efe9da; }
@media (max-width: 760px) { .bell { width: 36px; height: 36px; margin-right: 6px; } }
.inbox-head { padding-right: 52px; }

/* Logo do menu lateral: cabe inteira, sem encostar na linha */
.sidebar .brand { font-size: 24px; letter-spacing: -0.8px; gap: 7px; max-width: 100%; }
.sidebar .bm-ic { height: 1.45em; }
.sidebar .brand-caption { padding-left: 42px; margin-top: 6px; }
.intro-dot { display: none; }

/* ---------- Plantar uma semente: catálogo ---------- */
.cat-now { display: flex; align-items: center; gap: 12px; background: #e9f3d9; border-radius: 22px; padding: 10px 14px 10px 10px; color: inherit; text-decoration: none; margin-bottom: 12px; }
.cat-now-art { width: 64px; flex: none; }
.cat-now-art .plant-svg { width: 100%; height: auto; display: block; }
.cat-now > span:nth-child(2) { flex: 1; display: grid; gap: 3px; }
.cat-now small { font-size: 11px; color: #4f6b46; letter-spacing: 0.6px; }
.cat-now b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1; }
.cat-now > svg { width: 18px; }
.cat-bar { height: 6px; background: #fff; border-radius: 99px; overflow: hidden; }
.cat-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8cc58a, #3f7a4a); }
.cat-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.cat-stats span { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px; text-align: center; display: grid; }
.cat-stats b { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1; }
.cat-stats small { color: var(--muted); font-size: 11px; }
.cat-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; scrollbar-width: none; }
.cat-filters .chip { white-space: nowrap; flex: none; }
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.seed-cat.filter-herb .seed-packet-card:not([data-group="herb"]),
.seed-cat.filter-flower .seed-packet-card:not([data-group="flower"]),
.seed-cat.filter-succ .seed-packet-card:not([data-group="succ"]),
.seed-cat.filter-tree .seed-packet-card:not([data-group="tree"]) { display: none; }
.seed-packet-card { position: relative; display: grid; justify-items: center; gap: 2px; padding: 26px 10px 12px; border-radius: 6px 6px 18px 18px; border: 1.5px solid var(--ink); background: #fbf3df; box-shadow: 3px 3px 0 var(--ink); font: inherit; color: inherit; cursor: pointer; transition: transform 0.2s; animation: lp-rise 0.5s both; animation-delay: calc(var(--i) * 0.04s); overflow: hidden; }
.seed-packet-card:hover { transform: translateY(-3px) rotate(-1deg); }
.seed-packet-card .sp-flap { position: absolute; top: 0; left: 0; right: 0; height: 16px; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(34, 37, 31, 0.08) 8px 9px), #f1e3bd; border-bottom: 1.5px dashed rgba(34, 37, 31, 0.35); }
.seed-packet-card.incomum { background: #efe6fb; }
.seed-packet-card.incomum .sp-flap { background-color: #e1d2f6; }
.seed-packet-card.rara { background: #fff1c9; }
.seed-packet-card.rara .sp-flap { background-color: #f6d77a; }
.seed-packet-card .sp-art { width: 86px; }
.seed-packet-card .sp-art .plant-svg { width: 100%; height: auto; display: block; }
.seed-packet-card b { font-size: 15px; }
.seed-packet-card small { color: #5b5f55; font-size: 12px; }
.sp-status { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11.5px; font-weight: 650; border-radius: 99px; padding: 3px 9px; background: #fff; border: 1px solid var(--line); }
.sp-status svg { width: 12px; height: 12px; }
.st-now .sp-status { background: #dcebc4; border-color: #b6d49d; }
.st-have .sp-status { background: #fff; }
.st-new .sp-art { filter: grayscale(0.9) opacity(0.55); }
.sp-rarity { position: absolute; top: 20px; right: 6px; font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: #fff; border-radius: 99px; padding: 2px 6px; }
.cat-how { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; margin: 14px 0 12px; }
.cat-how svg { width: 18px; flex: none; margin-top: 2px; color: #3f7a4a; }
.cat-how p { margin: 0; font-size: 13.5px; line-height: 1.45; }
@media (min-width: 761px) { .cat-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .seed-cat .cat-stats { max-width: 520px; } }

/* Catálogo: o cartão é neutro, o desenho é o pacotinho */
.seed-packet-card { background: #fff !important; border: 1px solid var(--line); box-shadow: none; border-radius: 22px; padding: 12px 10px 12px; }
.seed-packet-card:hover { border-color: var(--ink); }
.seed-packet-card .sp-art { width: 104px; transition: transform 0.3s; }
.seed-packet-card:hover .sp-art { transform: rotate(-4deg) translateY(-3px); }
.seed-packet-card .packet-svg { width: 100%; height: auto; display: block; filter: drop-shadow(2px 3px 0 rgba(34, 37, 31, 0.18)); }
.seed-packet-card .packet-emblem { transform-origin: 60px 70px; }
.seed-packet-card:hover .packet-emblem { animation: packet-wiggle 0.6s ease; }
@keyframes packet-wiggle { 30% { rotate: -6deg; } 60% { rotate: 5deg; } }
.st-new .sp-art { filter: none; opacity: 1; }
.st-new .packet-svg { filter: saturate(0.55) drop-shadow(2px 3px 0 rgba(34, 37, 31, 0.12)); }
.sp-rarity { top: 10px; right: 10px; background: #fff0bf; }
.seed-packet-card.rara .sp-rarity { background: #f6d77a; }
.seed-packet-card.incomum .sp-rarity { background: #e8dafa; }

/* Ficha: por que ela floresceu */
.ss-block.story { background: #f1f8e6; }
.ss-block.story p { margin: 6px 0; line-height: 1.5; }
.story-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.story-kinds span { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 5px 10px; font-size: 12.5px; }
.story-kinds svg { width: 14px; }
.story-kinds small { color: #3f7a4a; font-weight: 700; }
.story-days { display: flex; gap: 3px; align-items: flex-end; height: 46px; margin: 12px 0 6px; }
.story-days a { flex: 1; min-width: 6px; max-width: 22px; height: 100%; display: flex; align-items: flex-end; border-radius: 5px; background: rgba(255, 255, 255, 0.7); overflow: hidden; }
.story-days a i { display: block; width: 100%; height: max(4px, var(--h)); border-radius: 5px; }
.story-days .care i { background: #6aa86f; }
.story-days .sad i { background: #c9a5e8; }
.story-days .dry i { background: #ddd8c8; height: 4px; }
.story-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 11.5px; color: var(--muted); }
.story-legend span { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: -6px; }
.story-legend .care { background: #6aa86f; } .story-legend .sad { background: #c9a5e8; } .story-legend .dry { background: #ddd8c8; }
.ss-block.story .small { display: flex; gap: 6px; align-items: flex-start; }
.ss-block.story .small svg, .ss-block.story .text-button svg { width: 15px; flex: none; }

/* ---------- Histórico por dia ---------- */
.day-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.day-arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; flex: none; color: inherit; }
.day-arrow svg { width: 17px; }
.day-arrow.off { visibility: hidden; }
.day-strip { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.day-strip a { min-width: 0; display: grid; justify-items: center; gap: 1px; padding: 6px 0 5px; border-radius: 14px; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--line); }
.day-strip small { font-size: 10px; color: var(--muted); text-transform: uppercase; }
.day-strip b { font-size: 15px; }
.day-strip i { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.day-strip a.has i { background: #6aa86f; }
.day-strip a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.day-strip a.on small { color: #d9d9cf; }
.day-summary { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 12px; margin-bottom: 12px; }
.day-checks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.day-checks span { display: grid; justify-items: center; gap: 3px; color: var(--muted); }
.day-checks svg { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: #f1ede1; }
.day-checks span.ok { color: var(--ink); }
.day-checks span.ok svg { background: #dcebc4; color: #2f6b3a; }
.day-checks small { font-size: 10.5px; }
.day-summary > p { margin: 10px 0 0; text-align: center; }
.day-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; position: relative; }
.day-timeline li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; }
.day-timeline time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.day-entry { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px; font: inherit; color: inherit; cursor: pointer; text-decoration: none; transition: transform 0.2s, border-color 0.2s; }
.day-entry:hover { transform: translateX(3px); border-color: var(--ink); }
.day-entry > svg { width: 16px; color: var(--muted); flex: none; }
.day-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; background: #f1ede1; }
.day-ic svg { width: 18px; }
.day-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.day-copy small { font-size: 11.5px; color: var(--muted); }
.day-copy b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.day-tags i { font-style: normal; font-size: 11px; background: #f3f0e6; border-radius: 99px; padding: 2px 8px; }
.day-media { display: flex; gap: 6px; color: var(--muted); }
.day-media svg { width: 13px; }
.day-entry .pill { flex: none; }
.day-empty { text-align: center; }
.day-all { display: inline-flex; margin-top: 14px; }
.history-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }
.history-link svg, .day-all svg { width: 15px; }
.diary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.diary-actions > * { margin: 0 !important; }
.entry-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px; }
.entry-actions .text-button { display: inline-flex; align-items: center; gap: 6px; }
.entry-actions svg { width: 15px; }
.text-button.danger, .button.danger { color: #b23b2e; }
.button.danger { background: #b23b2e; color: #fff; border-color: #b23b2e; }
.confirm-sheet { text-align: center; display: grid; justify-items: center; gap: 6px; padding: 6px 4px 10px; }
.confirm-sheet h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 4px 0; }
.confirm-sheet p { color: #4b4f46; max-width: 34em; margin: 0; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 420px; margin-top: 12px; }
.confirm-actions .button { justify-content: center; }
@media (max-width: 400px) { .day-strip a { flex-basis: 36px; } }

/* ---------- Envelope da semente ---------- */
.env { --w: min(340px, 86vw); width: var(--w); margin: 26px auto 8px; perspective: 900px; }
.env-body { position: relative; width: var(--w); aspect-ratio: 3 / 2; cursor: pointer; margin-top: calc(var(--w) * 0.62); transition: margin 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.env:not(.open) .env-body { margin-top: 0; animation: env-float 3.2s ease-in-out infinite; }
@keyframes env-float { 50% { translate: 0 -6px; rotate: -1deg; } }
.env-body::before { content: ""; position: absolute; inset: 0; background: #ecd9b6; border: 2px solid var(--ink); border-radius: 10px; }
.env-letter { position: absolute; left: 6%; right: 6%; top: 6%; height: 88%; background: #fffaf0; border: 1.5px solid var(--ink); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; overflow: hidden; z-index: 1; transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s, height 0.6s 0.35s; }
.env.open .env-letter { transform: translateY(-62%); height: 150%; overflow: visible; box-shadow: 0 18px 30px -18px rgba(34, 37, 31, 0.45); }
.env-packet { width: 64px; flex: none; }
.env-packet svg { width: 100%; height: auto; display: block; }
.env-from { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 4px 0 0; }
.env-msg { font-family: var(--serif); font-size: clamp(18px, 4.8vw, 22px); line-height: 1.3; margin: 4px 0; white-space: pre-wrap; word-break: break-word; }
.env-msg.soft { color: #5a5e55; }
.env-species { font-size: 13px; margin: auto 0 0; }
.env-pocket { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top right, #e6cfa6 50%, transparent 50.5%) left bottom / 51% 100% no-repeat, linear-gradient(to top left, #e6cfa6 50%, transparent 50.5%) right bottom / 51% 100% no-repeat, linear-gradient(to top, #ead4ad 0, #ead4ad 46%, transparent 46%); border: 2px solid var(--ink); border-radius: 10px; }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 58%; z-index: 3; transform-origin: top center; background: #e2c99b; clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 10px 10px 0 0; transition: transform 0.6s ease, z-index 0s 0.3s; filter: drop-shadow(0 2px 0 var(--ink)); }
.env.open .env-flap { transform: rotateX(180deg); z-index: 0; }
.env-seal { position: absolute; left: 50%; top: 58%; translate: -50% -50%; z-index: 4; width: 54px; height: 54px; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, #f07a5e, #c8432a 70%); color: #fff3e6; font: 700 22px var(--serif); box-shadow: 0 0 0 4px rgba(200, 67, 42, 0.25), 0 4px 0 rgba(34, 37, 31, 0.3); cursor: pointer; transition: transform 0.3s, opacity 0.3s; animation: seal-pulse 2s ease-in-out infinite; }
@keyframes seal-pulse { 50% { box-shadow: 0 0 0 10px rgba(200, 67, 42, 0.12), 0 4px 0 rgba(34, 37, 31, 0.3); } }
.env.open .env-seal { opacity: 0; transform: scale(0.4) rotate(-30deg); pointer-events: none; }
.env-hint { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.env.open .env-hint { display: none; }
.gift-public { max-width: 640px; margin: 0 auto; padding: clamp(28px, 6vw, 60px) 16px 60px; text-align: center; }
.gift-public h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 7vw, 58px); line-height: 1; margin: 10px 0 0; }
.gift-after { opacity: 0; translate: 0 12px; transition: opacity 0.6s, translate 0.6s; pointer-events: none; display: grid; justify-items: center; gap: 8px; margin-top: 12px; }
.gift-page.opened .gift-after { opacity: 1; translate: 0 0; pointer-events: auto; }
.gift-meaning { display: flex; gap: 8px; align-items: flex-start; text-align: left; background: var(--purple); border-radius: 18px; padding: 12px 14px; max-width: 460px; }
.gift-meaning svg { width: 16px; flex: none; margin-top: 3px; }

/* Emojis no recado */
.emoji-bar { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 10px; }
.emoji-bar button { width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 19px; cursor: pointer; transition: transform 0.15s; }
.emoji-bar button:hover { transform: translateY(-2px); }
.emoji-bar button.pop { animation: emoji-pop 0.35s ease; }
@keyframes emoji-pop { 50% { transform: scale(1.3); } }

/* Jardim: código de semente */
.gift-code { margin-top: 12px; background: #fff; border: 1px dashed #cfccbd; border-radius: 18px; padding: 12px; }
.gift-code label { display: flex; gap: 6px; align-items: center; font-size: 13.5px; font-weight: 600; }
.gift-code label svg { width: 15px; }
.gift-code div { display: flex; gap: 8px; margin-top: 8px; }
.gift-code input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: 600 15px var(--sans); letter-spacing: 2px; text-transform: uppercase; background: var(--paper); }

/* Landing: dar uma semente sem conta */
.lp-give { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.lp-give-copy { position: sticky; top: 90px; }
.lp-give-form { background: #fff; border: 1.5px solid var(--ink); border-radius: 28px; padding: clamp(16px, 3vw, 26px); box-shadow: 5px 5px 0 var(--ink); display: grid; gap: 10px; }
.lp-give-step { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; color: #3f7a4a; margin-top: 6px; }
.give-packets { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 10px; scrollbar-width: thin; }
.give-packet { flex: 0 0 78px; display: grid; justify-items: center; gap: 4px; border: 1.5px solid transparent; border-radius: 16px; padding: 6px 4px; background: transparent; cursor: pointer; font: inherit; color: inherit; transition: transform 0.2s, border-color 0.2s, background 0.2s; }
.give-packet svg { width: 60px; height: auto; }
.give-packet small { font-size: 11px; }
.give-packet:hover { transform: translateY(-3px); }
.give-packet.on { border-color: var(--ink); background: #f6f1e4; }
.give-meaning { margin: 0; font-size: 13.5px; color: #4b4f46; font-style: italic; }
.give-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.give-row label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.give-row input, .lp-give-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: 15px var(--sans); background: var(--paper); }
.lp-give-form textarea { resize: vertical; font-size: 16px; }
.give-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.give-error { color: #b23b2e; margin: 0; min-height: 1em; font-size: 13.5px; }
.lp-give-form .lp-btn { justify-self: start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lp-give-done { background: #fff; border: 1.5px solid var(--ink); border-radius: 28px; padding: 30px 22px; box-shadow: 5px 5px 0 var(--ink); text-align: center; display: grid; justify-items: center; gap: 8px; }
.lp-give-done h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 0; }
.give-fly { font-size: 64px; animation: give-fly 1.6s cubic-bezier(0.3, 0.8, 0.3, 1) both; }
@keyframes give-fly { 0% { translate: -120px 60px; rotate: -20deg; opacity: 0; } 60% { translate: 10px -10px; rotate: 8deg; opacity: 1; } 100% { translate: 0 0; rotate: 0deg; } }
@media (max-width: 760px) { .lp-give { grid-template-columns: 1fr; } .lp-give-copy { position: static; } .give-row { grid-template-columns: 1fr; } }

/* ---- Recuperar senha ---- */
.auth-forgot { display: inline-block; margin: 8px 0 2px; font-size: 13px; font-weight: 550; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pw-layout .auth-embrace { width: min(260px, 70%); height: auto; border-radius: 28px; }
.pw-layout .auth-mobile-art { width: 92px; height: auto; border-radius: 18px; }
.pw-done { display: grid; gap: 10px; justify-items: start; padding: 18px 0 6px; }
.pw-done-ic { font-size: 44px; line-height: 1; }
.pw-done h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 0; }
.pw-done p { margin: 0; color: var(--muted); }
.n-mail-note { margin: 2px 4px 8px; color: var(--muted); }
.pw-layout [hidden] { display: none !important; }
#pw-forgot input:not([type="hidden"]), #pw-reset input:not([type="hidden"]) { display: block; width: 100%; height: 49px; padding: 12px 14px; border: 1px solid #93968a; border-radius: 6px; background: transparent; color: var(--ink); font-size: 14px; }
#pw-forgot input:focus, #pw-reset input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
#pw-forgot .auth-submit, #pw-reset .auth-submit { margin-top: 22px; }

/* ---------- Painel admin em abas ---------- */
.adm .m-form-card { max-width: none; margin-top: 14px; }
.adm-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px 6px; scrollbar-width: thin; }
.adm-tabs a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid #d2d0c4; background: #fffdf6; color: inherit; text-decoration: none; font-size: 13px; font-weight: 600; }
.adm-tabs a svg { width: 16px; height: 16px; }
.adm-tabs a.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.adm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.adm-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 18px; border: 1px solid #d2d0c4; background: #fffdf6; }
.adm-tile b { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; }
.adm-tile span { font-size: 12px; color: var(--muted); }
.adm-tile small { font-size: 11px; color: var(--muted); }
.adm-chart svg { display: block; width: 100%; height: 140px; margin-top: 10px; }
.adm-bar { fill: #7c6ab0; transition: fill 0.15s; }
.adm-hit { fill: transparent; }
.adm-chart g:hover .adm-bar { fill: var(--ink); }
.adm-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 6px; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.adm .status-chip { display: inline-flex; align-items: center; gap: 5px; }
.adm .status-chip svg { width: 13px; height: 13px; }
.adm-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 12px; }
.adm-filter input[type="search"] { flex: 1 1 220px; padding: 11px 14px; border-radius: 999px; border: 1px solid #d2d0c4; background: #fffdf6; }
.adm-select { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.adm-select select, .adm-species select, .adm-species input[type="number"], .adm-rarity input { padding: 8px 10px; border-radius: 10px; border: 1px solid #d2d0c4; background: #fffdf6; color: var(--ink); font: inherit; }
.adm-list { display: grid; gap: 10px; }
.adm-user { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 18px; border: 1px solid #d2d0c4; background: #fffdf6; }
.adm-user.blocked { background: #f6ebe6; }
.adm-user-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 280px; }
.adm-user-main small { color: var(--muted); overflow-wrap: anywhere; }
.adm-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--muted); margin-top: 4px; }
.adm-meta .warn, .warn { color: #a3412a; }
.adm-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.adm-actions .text-button, .adm-table .text-button { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.adm-actions svg, .adm-table svg { width: 15px; height: 15px; }
.text-button.danger { color: #a3412a; }
.adm-table-wrap { overflow-x: auto; border: 1px solid #d2d0c4; border-radius: 16px; background: #fffdf6; margin-top: 10px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adm-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table td small { display: block; color: var(--muted); font-size: 11px; }
.adm-table td svg { vertical-align: -3px; }
.adm-species td { vertical-align: middle; }
.adm-species input[type="number"] { width: 72px; }
.adm-species tr.off td { opacity: 0.5; }
.adm-species tr.off td:nth-child(5) { opacity: 1; }
.adm-rarity { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 4px; font-size: 13px; }
.adm-rarity label { display: inline-flex; align-items: center; gap: 8px; }
.adm-rarity input { width: 80px; }
.adm-explain { line-height: 1.6; }
.adm-prompt { width: 100%; min-height: 320px; padding: 14px; border-radius: 14px; border: 1px solid #d2d0c4; background: #fffdf6; color: var(--ink); font: 13px/1.55 ui-monospace, "SFMono-Regular", Menlo, monospace; resize: vertical; margin: 10px 0; }
.adm code { font-size: 12px; background: #efede3; padding: 1px 5px; border-radius: 6px; }
.adm-test { margin-top: 14px; display: grid; gap: 10px; }
.adm-act { padding: 14px 16px; border-radius: 16px; background: #efe7fa; border: 1px solid #cdb9ea; }
.adm-act small { display: block; color: var(--muted); }
.adm-act p { margin: 6px 0; }
.adm-act ol { margin: 6px 0 0; padding-left: 20px; }
.adm-details { margin-top: 14px; }
.adm-details summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.adm-details pre { white-space: pre-wrap; font-size: 12px; line-height: 1.5; max-height: 420px; overflow: auto; background: #fffdf6; border: 1px solid #d2d0c4; border-radius: 12px; padding: 12px; }
.adm-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.adm-field > span { display: flex; flex-direction: column; font-size: 13px; }
.adm-field > span small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.adm-field input:not([type="checkbox"]) { padding: 10px 12px; border-radius: 12px; border: 1px solid #d2d0c4; background: #fffdf6; font: inherit; color: var(--ink); }
.adm-clear { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
@media (min-width: 760px) {
  .adm-field { grid-template-columns: 240px 1fr auto; align-items: center; }
}
@media (min-width: 1100px) { .adm-tabs { flex-wrap: wrap; overflow: visible; } }
.adm-filter .button { border-radius: 999px; }

/* ---------- Privacidade, termos e exclusão de conta ---------- */
.legal-page { max-width: 780px; margin: 0 auto; padding: 22px 16px 70px; }
.legal-top { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.legal-page h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 7vw, 52px); line-height: 1.08; margin: 14px 0 8px; }
.legal-upd { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.legal-intro { font-size: 17px; line-height: 1.6; }
.legal-sec { background: #fffdf6; border: 1px solid #d2d0c4; border-radius: 20px; padding: 4px 22px 10px; margin-top: 14px; line-height: 1.65; font-size: 15px; }
.legal-sec h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 16px 0 4px; }
.legal-sec ul { padding-left: 20px; }
.legal-sec li { margin: 6px 0; }
.legal-sec a, .legal-foot a, .auth-terms a, .give-legal a, .legal-del a:not(.button) { color: #a3412a; }
.legal-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 30px; font-size: 13px; color: var(--muted); }
.legal-del { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.legal-del h1 { margin-top: 0; }
.legal-del form { display: flex; flex-direction: column; gap: 10px; }
.legal-del input[type="email"] { padding: 14px 16px; border-radius: 14px; border: 1px solid #d2d0c4; background: #fffdf6; font: inherit; color: var(--ink); }
.legal-art { width: 140px; height: auto; align-self: flex-start; }
.legal-done { font-size: 54px; }
.legal-note { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 12px 14px; border-radius: 14px; background: #efe7fa; }
.legal-note svg { width: 17px; flex: none; margin-top: 2px; }
.legal-check, .auth-terms { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.legal-check input, .auth-terms input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--ink); }
.auth-terms { margin: 14px 0 4px; font-size: 13px; color: var(--muted); }
.give-legal { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.lp-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.lp-legal a { color: inherit; opacity: 0.75; }
.account-privacy .m-list { margin-top: 10px; }
.account-delete { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; }
.account-delete svg { width: 16px; }
#auth-form .auth-terms input[type="checkbox"] { display: inline-block; width: 18px; height: 18px; min-height: 0; padding: 0; margin: 2px 0 0; border-radius: 4px; flex: none; box-shadow: none; }
#auth-form .auth-terms { display: flex; width: 100%; }
.legal-page [hidden] { display: none !important; }
.legal-del .button { justify-content: center; gap: 8px; }

/* ---------- Avatares prontos ---------- */
.av-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #ebe8dc; margin: 4px 0 14px; }
.av-tabs button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.av-tabs button svg { width: 15px; height: 15px; }
.av-tabs button.on { background: var(--ink); color: var(--paper); }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
.av-opt { aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; overflow: hidden; transition: transform 0.15s, border-color 0.15s; }
.av-opt img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.av-opt:hover { transform: scale(1.06); }
.av-opt.selected { border-color: var(--ink); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.av-opt:focus-visible { outline: 3px solid #3e83f5; outline-offset: 2px; }
.av-sheet h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 4px 0 6px; }
.av-sheet .av-grid { max-height: min(60vh, 520px); overflow-y: auto; padding: 6px; }
.auth-avatar { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.auth-avatar span { display: flex; flex-direction: column; font-size: 13px; }
.auth-avatar small { color: var(--muted); font-size: 12px; }
.auth-av-btn { width: 58px; height: 58px; flex: none; border-radius: 50%; border: 1.5px dashed #93968a; background: #fffdf6; display: grid; place-items: center; padding: 0; overflow: hidden; cursor: pointer; }
.auth-av-btn.has { border-style: solid; border-color: var(--ink); }
.auth-av-btn img { width: 100%; height: 100%; object-fit: cover; }
.auth-av-btn svg { width: 24px; height: 24px; }
.account-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.avatar.has-photo img { object-fit: cover; }

/* ---------- Seletor de aparência ---------- */
.theme-picker .lang-opt { display: inline-flex; align-items: center; gap: 6px; }
.theme-picker .lang-opt svg { width: 15px; height: 15px; }
.theme-picker.compact .lang-opt { padding: 5px 8px; }
.account-theme-h { display: block; margin-top: 20px; }
.account-lang .theme-picker { margin-top: 10px; }
.auth-theme { margin: 10px auto 0; display: flex; width: max-content; }
.legal-pickers { display: inline-flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .lp-theme { display: none; } }
.lp-top-actions .lang-picker { flex-wrap: nowrap; }

/* ---------- 100 espécies: filtros por grupo ---------- */
.grp-chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; margin: 14px 0 4px; scrollbar-width: none; }
.grp-chips .chip { flex: none; }
[data-grp-filter="herb"] > [data-group]:not([data-group="herb"]),
[data-grp-filter="flower"] > [data-group]:not([data-group="flower"]),
[data-grp-filter="succ"] > [data-group]:not([data-group="succ"]),
[data-grp-filter="tree"] > [data-group]:not([data-group="tree"]),
[data-grp-filter="foliage"] > [data-group]:not([data-group="foliage"]),
[data-grp-filter="veg"] > [data-group]:not([data-group="veg"]) { display: none; }
.seed-cat.filter-foliage .seed-packet-card:not([data-group="foliage"]),
.seed-cat.filter-veg .seed-packet-card:not([data-group="veg"]) { display: none; }
.lp-section .grp-chips { justify-content: center; flex-wrap: wrap; overflow: visible; }
.lp-species:not(.all) > [data-more-d] { display: none; }
.lp-more { display: flex; justify-content: center; margin-top: 18px; }
.lp-btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: none; }
@media (max-width: 700px) { .lp-species:not(.all) > [data-more-m] { display: none; } }
.lp-more button::after { content: attr(data-count); font-size: 12px; opacity: 0.7; margin-left: 2px; }

/* ---------- Ajustes de layout (out/2026) ---------- */
/* Cartões rolantes da tela inicial: espaço para o "levantar" do hover e a sombra não serem cortados. */
@media (max-width: 760px) {
  .f-quick { padding: 10px 6px 26px; margin: -10px -6px -18px; scroll-padding-inline: 6px; }
}
/* Diário: a lista não encosta nos botões de cima. */
.diary-actions + .m-list, .diary-actions + .m-list:empty { margin-top: 14px; }
/* Sino perto da foto. */
.header-right { gap: 14px; }
.bell { margin-right: 0; }
@media (max-width: 760px) { .header-right { gap: 8px; } }
.retro-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 16px; border-radius: 14px; background: #efe7fa; border: 1px solid #cdb9ea; font-size: 14px; }
.retro-banner svg { width: 18px; flex: none; }
.retro-banner span { flex: 1; }
.retro-banner b { text-transform: capitalize; }
.day-empty .small { margin: 4px 0 12px; }
.day-add { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px; }
.day-add svg { width: 16px; }
.seed-packet-card.cat-hide { display: none !important; }
.cat-more { display: flex; justify-content: center; margin: 16px 0 6px; }
.cat-more[hidden] { display: none; }
.cat-more .button { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; }

/* ---------- Minha evolução (#evolucao) ---------- */
.evo .evo-range { display: flex; gap: 8px; margin: 4px 0 16px; }
.evo .evo-range .chip { text-decoration: none; }
.evo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.evo-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 18px; border: 1px solid #d2d0c4; background: #fffdf6; }
.evo-tile b { font: 600 30px/1.1 var(--sans); color: var(--ink); }
.evo-tile b i { font-style: normal; font-size: 16px; color: var(--muted); font-weight: 500; }
.evo-tile span { font-size: 13px; color: var(--ink); }
.evo-tile small { font-size: 12px; color: var(--muted); }
.evo-card { padding: 18px; border-radius: 20px; border: 1px solid #d2d0c4; background: #fffdf6; margin-bottom: 14px; }
.evo-card h3 { font: 400 20px/1.3 var(--serif); margin: 6px 0 12px; }
.evo-card .small { color: var(--muted); }
.evo-two { display: grid; gap: 14px; }
@media (min-width: 900px) { .evo-two { grid-template-columns: 1fr 1fr; } .evo-two .evo-card { margin-bottom: 0; } .evo-two { margin-bottom: 14px; } }
.evo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.evo-grid { stroke: #e2e0d3; stroke-width: 1; }
.evo-grid.mid { stroke: #c9c7b9; }
.evo-axis { fill: #777b71; font: 11px var(--sans); }
.evo-line { fill: none; stroke: #7c6ab0; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.evo-svg.mini .evo-line { stroke-width: 2; }
.evo-dot { fill: #7c6ab0; stroke: #fffdf6; stroke-width: 2; }
.evo-swing { stroke: #c9b4ec; stroke-linecap: round; }
.evo-hit { fill: transparent; cursor: pointer; }
.evo-hit:hover { fill: #22251f0a; }
.evo-cal { max-width: 420px; }
.evo-cal-wd, .evo-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.evo-cal-grid > * { min-width: 0; }
.evo-cal-wd span { font-size: 11px; color: var(--muted); text-align: center; text-transform: uppercase; }
.evo-cal-grid { margin-top: 4px; }
.evo-cal-grid a { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; text-decoration: none; color: #fff; font-size: 11px; font-weight: 600; }
.evo-cal-grid a small { font-size: 11px; }
.evo-cal-grid a.nodata { background: #f1efe5; color: #777b71; }
.evo-cal-grid a.today { outline: 2px solid #22251f; outline-offset: 1px; }
.evo-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.evo-legend > i { width: 90px; height: 8px; border-radius: 4px; }
.evo-legend-empty { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; }
.evo-legend-empty i { width: 12px; height: 12px; border-radius: 3px; background: #f1efe5; border: 1px solid #d2d0c4; }
.evo-div { display: grid; gap: 10px; }
.evo-div-row { display: grid; grid-template-columns: auto minmax(84px, 1.1fr) 2fr auto; align-items: center; gap: 10px; font-size: 14px; }
.evo-div-row:not(:has(.evo-av)) { grid-template-columns: minmax(84px, 1.1fr) 2fr auto; }
.evo-div-label { display: flex; flex-direction: column; min-width: 0; }
.evo-div-label small { color: var(--muted); font-size: 11px; }
.evo-div-row > b { font-size: 12px; font-weight: 600; color: var(--muted); min-width: 64px; text-align: right; }
.evo-div-track { position: relative; height: 12px; border-radius: 6px; background: #f1efe5; }
.evo-div-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: #c9c7b9; }
.evo-div-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 4px; min-width: 3px; }
.evo-div-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); padding-left: 40%; }
.evo-av { display: inline-flex; text-decoration: none; }
.evo-bars { display: grid; gap: 8px; }
.evo-bar-row { display: grid; grid-template-columns: minmax(80px, 1fr) 2fr 28px; align-items: center; gap: 10px; font-size: 14px; }
.evo-bar-row b { font-size: 13px; text-align: right; color: var(--muted); }
.evo-bar-track { height: 12px; border-radius: 6px; background: #f1efe5; overflow: hidden; }
.evo-bar-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: #7c6ab0; }
.evo-quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 6px; }
.evo-quiet small { color: var(--muted); margin-right: 4px; }
.evo-quiet a { text-decoration: none; opacity: 0.7; }
.evo-links { display: grid; gap: 9px; margin-top: 4px; }
.evo-tip { position: fixed; z-index: 60; max-width: 280px; padding: 8px 10px; border-radius: 10px; background: #22251f; color: #fffdf6; font-size: 12px; line-height: 1.4; pointer-events: none; box-shadow: 0 8px 20px -10px #0008; }
.evo-tip[hidden] { display: none; }
/* Cartão da tela inicial */
.evo-home { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 20px; border: 1px solid #d2d0c4; background: #fffdf6; color: var(--ink); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.evo-home b { font: 400 26px/1.15 var(--serif); }
.evo-home small { color: var(--muted); font-size: 13px; }
.evo-home .evo-svg { margin: 10px 0 6px; }
.evo-home-empty { display: block; height: 40px; margin: 10px 0 6px; border-radius: 10px; background: repeating-linear-gradient(90deg, #f1efe5 0 12px, transparent 12px 18px); }
.evo-home-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.evo-home-cta svg { width: 16px; }
@media (hover: hover) { .evo-home:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -14px #22251f66; } }
.row-people { display: inline-flex; vertical-align: middle; margin-left: 8px; }
.row-people .avatar-pic { width: 22px; height: 22px; font-size: 9px; border: 2px solid #fffdf6; margin-left: -6px; }
.row-people .avatar-pic:first-child { margin-left: 0; }

/* ---------- Evolução: calendário por mês, páginas no celular, impressão (08/10 p) ---------- */
.evo-cal { max-width: none; display: flex; flex-wrap: wrap; gap: 18px 28px; }
.evo-month { width: 232px; flex: 0 0 auto; }
.evo-month > b { display: block; font-size: 14px; text-transform: capitalize; }
.evo-month > small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.evo-cal-wd, .evo-cal-grid { grid-template-columns: repeat(7, 30px); gap: 3px; }
.evo-cal-grid a { width: 30px; height: 30px; aspect-ratio: auto; border-radius: 6px; font-size: 11px; }
.evo-cal-grid a:hover, .evo-cal-grid a:focus-visible { outline: 2px solid #7c6ab0; outline-offset: 1px; }
.evo-pager { display: none; }
@media (max-width: 760px) {
  .evo-cal { justify-content: center; }
  .evo-cal-wd, .evo-cal-grid { grid-template-columns: repeat(7, 36px); gap: 4px; }
  .evo-cal-grid a { width: 36px; height: 36px; }
  .evo-month { width: auto; }
  .evo-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: 8px; z-index: 5; background: #fffdf6; border: 1px solid #e7e3d4; border-radius: 16px; padding: 6px; margin: 4px 0 12px; box-shadow: 0 6px 16px rgba(40, 40, 30, 0.08); }
  .evo-pg { width: 44px; height: 44px; border-radius: 12px; border: 0; background: #efeadb; color: #22251f; display: grid; place-items: center; cursor: pointer; }
  .evo-pg:disabled { opacity: 0.35; cursor: default; }
  .evo-pg-label { text-align: center; display: grid; line-height: 1.2; }
  .evo-pg-label b { font-size: 15px; }
  .evo-pg-label small { font-size: 12px; color: var(--muted); }
  .evo-pages .evo-page:not(.on) { display: none; }
  .evo-pages .evo-two { display: block; }
  .evo-page.on { animation: evoIn 0.25s ease; }
}
@keyframes evoIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.evo-print { gap: 6px; }
.evo-print svg { width: 16px; height: 16px; }
#print-root { display: none; }
@media print {
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing #print-root { display: block !important; color: #22251f; background: #fff; font-size: 12px; }
  #print-root .print-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1.5px solid #22251f; padding-bottom: 6px; margin-bottom: 14px; }
  #print-root .print-head b { font-size: 16px; }
  #print-root .print-head span { color: #555; }
  #print-root .m-head, #print-root .m-stage > header { display: none !important; }
  #print-root .evo, #print-root .m-stage { padding: 0 !important; margin: 0 !important; background: none !important; }
  #print-root .evo-page { display: block !important; }
  #print-root .evo-two { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
  #print-root .evo-card, #print-root .f-card, #print-root .panel { break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd8c6 !important; background: #fff !important; margin-bottom: 12px; }
  #print-root .evo-svg { width: 100%; height: auto; }
  #print-root .evo-cal-grid a { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-root * { -webkit-print-color-adjust: exact; print-color-adjust: exact; animation: none !important; transition: none !important; }
  #print-root .evo-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  #print-root .print-report .f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media print {
  #print-root .evo-cal { gap: 10px 18px; }
  #print-root .evo-month { width: auto; }
  #print-root .evo-cal-wd, #print-root .evo-cal-grid { grid-template-columns: repeat(7, 22px); gap: 2px; }
  #print-root .evo-cal-grid a { width: 22px; height: 22px; font-size: 9px; }
}

/* ---------- Envelope: guia de cuidado e avisos de privacidade (08/10 p) ---------- */
.gift-privacy { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: #eef4ea; border: 1px solid #d3e3cb; border-radius: 14px; padding: 12px 14px; margin: 14px auto 0; max-width: 460px; }
.gift-privacy svg { flex: 0 0 auto; width: 20px; height: 20px; color: #3f7a3a; margin-top: 2px; }
.gift-privacy p { margin: 0; font-size: 14px; line-height: 1.45; color: #34392f; }
.gift-guide { display: grid; gap: 10px; padding: 4px 2px 6px; }
.gift-guide h2 { margin: 0; font-family: var(--serif, Georgia, serif); font-size: 26px; line-height: 1.15; }
.gift-guide ol { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 12px; }
.gift-guide li { display: flex; gap: 12px; align-items: flex-start; }
.gift-guide .gg-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: #efe8fb; color: #6a55a8; display: grid; place-items: center; }
.gift-guide .gg-ic svg { width: 20px; height: 20px; }
.gift-guide li b { display: block; font-size: 15px; }
.gift-guide li p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: #555a50; }
.gg-privacy { display: flex; gap: 10px; background: #eef4ea; border: 1px solid #d3e3cb; border-radius: 14px; padding: 12px; margin-top: 4px; }
.gg-privacy svg { flex: 0 0 auto; width: 20px; height: 20px; color: #3f7a3a; margin-top: 2px; }
.gg-privacy b { font-size: 15px; }
.gg-privacy p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: #34392f; }
.gift-guide .lp-btn.wide { width: 100%; justify-content: center; margin-top: 6px; }
.gift-guide .text-button { justify-self: center; }
.gift-guide-sheet .sheet { max-height: 92vh; overflow-y: auto; }
.auth-gift-note { display: flex; gap: 10px; align-items: flex-start; background: #f3eefc; border: 1px solid #ddd2f3; border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; }
.auth-gift-note svg { flex: 0 0 auto; width: 20px; height: 20px; color: #6a55a8; margin-top: 2px; }
.auth-gift-note p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: #45403f; }
.pot-privacy { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #5d6a57; margin: 4px 0 0; }
.pot-privacy svg { width: 13px; height: 13px; flex: 0 0 auto; }
button.m-list-card { width: 100%; font: inherit; text-align: left; cursor: pointer; color: inherit; }

/* ---------- Pedidos das plantas, "o que quem enviou vê" e comemorações (08/10 r) ---------- */
.g-one-care { display: flex; gap: 10px; align-items: flex-start; background: #eaf3f8; border: 1px solid #cfe1ec; border-radius: 16px; padding: 12px 14px; margin: 4px 0 14px; font-size: 14px; line-height: 1.45; color: #2f3a40; }
.g-one-care svg { flex: 0 0 auto; width: 20px; height: 20px; color: #2f7fc0; margin-top: 1px; }
.wish-chip { display: flex; gap: 10px; align-items: center; text-decoration: none; color: #3b3352; background: #f3eefc; border: 1px dashed #c9b8ee; border-radius: 14px; padding: 10px 12px; margin: 8px 0; font-size: 13.5px; line-height: 1.4; }
.wish-chip > svg:first-child { flex: 0 0 auto; width: 20px; height: 20px; color: #6a55a8; }
.wish-chip > svg:last-child { flex: 0 0 auto; width: 16px; height: 16px; color: #6a55a8; margin-left: auto; }
.wish-chip b { color: #2c2541; }
a.wish-chip:hover { background: #ece4fb; border-style: solid; }
.wish-chip.done { background: #fff6dc; border: 1px solid #f0dc9c; color: #4d4224; }
.wish-chip.done > svg:first-child { color: #c9932b; }
.wish-like { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 14px; line-height: 1.45; }
.wish-like svg { flex: 0 0 auto; width: 18px; height: 18px; color: #6a55a8; margin-top: 2px; }
.plant-card-gifts.wish { color: #6a55a8; }
.pot-privacy { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 12.5px; line-height: 1.4; color: #4f5a4a; background: #f1f6ee; border-radius: 12px; padding: 8px 10px; margin: 6px 0 4px; }
.pot-privacy > svg { width: 14px; height: 14px; flex: 0 0 auto; color: #3f7a3a; }
.pot-privacy > span { flex: 1 1 160px; }
.pot-privacy .text-button { font-size: 12px; padding: 2px 0; }
.saved-water { max-width: 420px; margin: 18px auto 6px; text-align: center; display: grid; gap: 8px; }
.saved-pots { display: flex; justify-content: center; gap: 6px; }
.saved-pots span { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 18px; background: #eef4ea; }
.saved-pots span.treat { background: #fff6dc; box-shadow: 0 0 0 2px #f0dc9c inset; }
.saved-pots svg { width: 70px; height: 70px; }
.saved-water p { margin: 0; }
.saved-water .wish-chip { text-align: left; }
.celebrate { display: grid; gap: 10px; text-align: center; justify-items: center; padding: 6px 4px 4px; }
.celebrate-art { width: 168px; height: 168px; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #fff6dc 0, #f3eefc 70%); display: grid; place-items: center; animation: celebrateIn 0.6s cubic-bezier(.2, .9, .3, 1.3); }
.celebrate-art svg { width: 150px; height: 150px; }
.celebrate h2 { margin: 2px 0 0; font-family: var(--serif, Georgia, serif); font-size: 26px; line-height: 1.15; }
.celebrate p { margin: 0; font-size: 15px; line-height: 1.5; color: #4b4f46; max-width: 420px; }
.celebrate .lp-btn.wide { width: 100%; justify-content: center; margin-top: 6px; text-decoration: none; }
@keyframes celebrateIn { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .celebrate-art { animation: none; } }

/* ---------- Confirmação de e-mail (auditoria 08/10) ---------- */
.verify-banner { display: flex; gap: 12px; align-items: flex-start; background: #fff6dc; border: 1px solid #f0dc9c; border-radius: 16px; padding: 14px 16px; margin: 0 0 16px; }
.verify-banner > svg { flex: 0 0 auto; width: 22px; height: 22px; color: #a9741c; margin-top: 2px; }
.verify-banner b { display: block; font-size: 15px; }
.verify-banner p { margin: 2px 0 6px; font-size: 14px; line-height: 1.45; color: #4d4224; }
.verify-banner .text-button { font-size: 14px; padding: 0; margin-right: 10px; }
.verify-banner [data-verify-msg] { color: #4d4224; }

/* ---------- Pessoa: momentos registrados com ela ---------- */
.person-history { display: grid; gap: 10px; }
.person-stats { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.person-stats > span:first-child { display: grid; line-height: 1.2; }
.person-stats b { font-size: 18px; }
.person-stats small { color: var(--muted); font-size: 12px; }
.person-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.person-entries .day-entry { width: 100%; text-align: left; display: flex; gap: 10px; align-items: center; background: #fffdf6; border: 1px solid #e7e3d4; border-radius: 14px; padding: 10px 12px; font: inherit; color: inherit; cursor: pointer; }
.person-entries .day-entry:hover { background: #f6f2e6; }
.person-entries .day-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.person-entries .day-copy b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-entries .day-copy small { color: var(--muted); font-size: 12px; }
.person-entries .day-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; }
.person-entries .day-ic svg { width: 17px; height: 17px; }
.person-entries .pill { font-size: 11px; }
.person-history > .text-button { justify-self: start; }

/* ---------- Emoções: "Outra…" ---------- */
.chip-other { border-style: dashed; display: inline-flex; align-items: center; gap: 4px; }
.chip-other svg { width: 14px; height: 14px; }
.chip-other-box { flex-basis: 100%; display: flex; gap: 8px; margin-top: 6px; }
.chip-other-box input { flex: 1; min-width: 0; font: inherit; padding: 9px 12px; border-radius: 12px; border: 1px solid #d9d4c3; background: #fffdf6; color: inherit; }
.button.small { padding: 8px 14px; font-size: 14px; }
.chips { flex-wrap: wrap; }
.n-hist-day { display: grid; gap: 4px; margin-top: 8px; }
.n-hist-day > small { color: var(--muted); font-size: 12px; text-transform: capitalize; }
.n-row.done .n-copy b { color: var(--muted); }

/* ---------- Histórico do Núcleo: selo de status ---------- */
.n-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }
.n-status svg { width: 14px; height: 14px; }
.n-status.done { background: #e2f0d9; color: #2f6b2a; }
.n-status.suggested { background: #fbefd2; color: #7a5a14; }
.n-status.skipped { background: #ecebe4; color: #6b6e64; }