/* natty, camada liquid glass: superfícies translúcidas, fundo vivo que acompanha a fase e movimento.
   Carregada depois de app.css. Selos e ícones de cor continuam sólidos (regra do workspace). */
:root {
  --bg: #fff3f6;
  --glass: rgba(255, 255, 255, 0.5);
  --glass-2: rgba(255, 255, 255, 0.72);
  --glass-3: rgba(255, 255, 255, 0.86);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  --glass-shadow: 0 1px 2px rgba(120, 30, 70, 0.05), 0 14px 34px -10px rgba(150, 40, 90, 0.22);
  --glass-shadow-lg: 0 2px 4px rgba(120, 30, 70, 0.06), 0 26px 60px -14px rgba(150, 40, 90, 0.32);
  --blur: saturate(180%) blur(22px);
  --sheen: linear-gradient(165deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0) 60%);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* luzes do fundo (mudam com a fase) */
  --au-a: #ff9fc0;
  --au-b: #ffc9a6;
  --au-c: #f3a9e0;
  --au-d: #ffd6e4;
}
:root[data-phase='follicular'] { --au-a: #a9c6ff; --au-b: #ffc7dc; --au-c: #b6efe3; --au-d: #e6dcff; }
:root[data-phase='fertile'], :root[data-phase='ovulation'] { --au-a: #8fe2d2; --au-b: #ffc3d9; --au-c: #b3d4ff; --au-d: #d8f6ee; }
:root[data-phase='luteal'] { --au-a: #ccb0ff; --au-b: #ffbfd4; --au-c: #ffd6b0; --au-d: #efe0ff; }
:root[data-phase='preg'] { --au-a: #c6adff; --au-b: #ffcde2; --au-c: #b5e2ff; --au-d: #e9e0ff; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #140b11;
    --glass: rgba(42, 24, 36, 0.52);
    --glass-2: rgba(52, 30, 44, 0.7);
    --glass-3: rgba(60, 36, 52, 0.86);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.55);
    --glass-shadow-lg: 0 26px 60px -14px rgba(0, 0, 0, 0.7);
    --sheen: linear-gradient(165deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 45%);
    --au-a: #6b1f43; --au-b: #4a2340; --au-c: #2c1d4a; --au-d: #3b1730;
  }
}
:root[data-theme='dark'] {
  --bg: #140b11;
  --glass: rgba(42, 24, 36, 0.52);
  --glass-2: rgba(52, 30, 44, 0.7);
  --glass-3: rgba(60, 36, 52, 0.86);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.55);
  --glass-shadow-lg: 0 26px 60px -14px rgba(0, 0, 0, 0.7);
  --sheen: linear-gradient(165deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 45%);
  --au-a: #6b1f43; --au-b: #4a2340; --au-c: #2c1d4a; --au-d: #3b1730;
}

body { background: var(--bg); }

/* ---------- fundo vivo ---------- */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--bg); }
.aurora i { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(80px); opacity: 0.7; transition: background 1.2s ease; will-change: transform; }
.aurora i:nth-child(1) { background: var(--au-a); top: -24vmax; left: -14vmax; animation: drift1 28s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { background: var(--au-b); top: -10vmax; right: -22vmax; animation: drift2 34s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { background: var(--au-c); bottom: -30vmax; left: 10vmax; animation: drift3 30s ease-in-out infinite alternate; }
.aurora i:nth-child(4) { background: var(--au-d); bottom: -18vmax; right: -8vmax; width: 44vmax; height: 44vmax; animation: drift1 38s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(14vmax, 10vmax) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-12vmax, 14vmax) scale(0.92); } }
@keyframes drift3 { to { transform: translate(10vmax, -12vmax) scale(1.08); } }
.phone { background: transparent !important; position: relative; z-index: 1; }
.glow { display: none !important; }
@media (min-width: 520px) and (max-width: 1023px) { .phone { box-shadow: none !important; } }

/* ---------- superfícies de vidro ---------- */
.card, .trk, .tool-tile, .metric:not(.solid), .journey, .lg, .seg, .chip:not(.on), .round-btn:not(.brand), .btn.white,
.choice, .composer, .msg.bot, .cups button:not(.on), .input, .pager, .note-box, .wheel-wrap::before, .keypad button, .icon-btn {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--glass-hi), var(--glass-shadow);
}
.input, .icon-btn, .pager, .note-box { box-shadow: var(--glass-hi); }
.input { border-color: transparent; background: var(--glass-2); }
.input:focus { box-shadow: var(--glass-hi), 0 0 0 3px rgba(214, 56, 108, 0.22); }
.card, .trk, .tool-tile, .metric, .journey, .lg, .choice, .feature { position: relative; isolation: isolate; }
.tabbar, .sidebar, .sheet { isolation: isolate; }
.card::after, .trk::after, .tool-tile::after, .metric::after, .journey::after, .lg::after, .choice::after, .feature::after, .tabbar::after, .sidebar::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--sheen); pointer-events: none; z-index: -1;
}
.note-box { background: var(--glass); }
.card.tint { background: var(--glass-2); }

/* botões */
.btn { transition: transform 0.18s var(--spring), box-shadow 0.2s, filter 0.2s, background 0.2s; }
.btn.primary { background: linear-gradient(135deg, var(--brand-2), var(--brand)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 24px -6px rgba(214, 56, 108, 0.55); }
.btn.dark { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 22px -8px rgba(43, 26, 36, 0.5); }
.btn.glass { background: var(--glass-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-hi), var(--glass-shadow); color: var(--ink); }
.round-btn.brand { background: linear-gradient(135deg, var(--brand-2), var(--brand)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 18px -6px rgba(214, 56, 108, 0.55); }
.seg button.on { background: linear-gradient(135deg, var(--brand-2), var(--brand)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px -6px rgba(214, 56, 108, 0.6); }
.seg button { transition: background 0.25s var(--ease), color 0.2s; }
.chip.on { box-shadow: 0 6px 16px -8px rgba(43, 26, 36, 0.6); }
.tile, .badge, .avatar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
  button.card, .trk, .tool-tile, .art, .metric, .choice, .feature, .tip-card { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
  button.card:hover, .trk:hover, .tool-tile:hover, button.metric:hover, .choice:hover, .feature:hover { transform: translateY(-3px); box-shadow: var(--glass-hi), var(--glass-shadow-lg); }
  .art:hover h3 { color: var(--brand); }
}
.tile-btn .o { transition: transform 0.25s var(--spring), background 0.2s, color 0.2s, box-shadow 0.2s; }
.tile-btn:active .o, .qk:active { transform: scale(0.9); }
.tile-btn.on .o { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 18px -8px rgba(43, 26, 36, 0.45); animation: pop 0.35s var(--spring); }
.tile-btn .o, .qk .o { background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(43, 26, 36, 0.07), var(--glass-hi); }
@keyframes pop { 0% { transform: scale(0.8); } 100% { transform: scale(1); } }

/* ---------- barra de abas do celular ---------- */
.tabbar { background: var(--glass-2); -webkit-backdrop-filter: saturate(180%) blur(26px); backdrop-filter: saturate(180%) blur(26px); box-shadow: var(--glass-hi), var(--glass-shadow-lg); border-radius: 28px; }
.tab { position: relative; z-index: 1; transition: color 0.25s; }
.tab-ind { position: absolute; top: 7px; height: 52px; border-radius: 20px; background: var(--glass-3); box-shadow: var(--glass-hi), 0 6px 14px -6px rgba(150, 40, 90, 0.35); transition: left 0.45s var(--spring), width 0.45s var(--spring); z-index: 0; }
.tab-plus { position: relative; z-index: 2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 26px -6px rgba(214, 56, 108, 0.6), 0 0 0 6px rgba(255, 255, 255, 0.55); }

/* ---------- folhas ---------- */
.scrim { background: rgba(40, 12, 28, 0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet { background: var(--glass-3); -webkit-backdrop-filter: saturate(180%) blur(34px); backdrop-filter: saturate(180%) blur(34px); box-shadow: var(--glass-hi), var(--glass-shadow-lg); transition: transform 0.45s var(--ease), opacity 0.25s; }
.sheet .lg { background: var(--glass-2); }
.toast { background: rgba(43, 26, 36, 0.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.45); }

/* ---------- cartão principal do ciclo ---------- */
.hero { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.phase-pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 6px; border-radius: 999px; color: #fff; font-weight: 800; font-size: 13px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.phase-pill .ic { width: 20px; height: 20px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); }
.hero .ring-box { margin: 0 auto; }
.hero .ring-cta { margin: 0; flex-wrap: nowrap; }
.ring-prog { stroke-dasharray: 1 1; }
.enter .ring-prog { animation: draw 1.2s var(--ease) both; }
.enter .ring-knob { animation: knob 0.6s 0.9s var(--spring) both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes knob { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
.ring-knob { transform-box: fill-box; transform-origin: center; }
.ring-glow { filter: blur(10px); opacity: 0.55; }

/* linha das fases do ciclo atual */
.ptl { display: flex; flex-direction: column; gap: 8px; }
.ptl-bar { position: relative; display: flex; gap: 3px; height: 12px; }
.ptl-bar i { height: 100%; border-radius: 999px; }
.ptl-now { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 3px var(--ink), 0 4px 10px rgba(0, 0, 0, 0.2); transition: left 0.8s var(--ease); }
.ptl-lbl { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--ink-3); }

/* registro rápido */
.quick-h { display: flex; align-items: center; gap: 10px; }
.quick-h h3 { font-size: 16px; font-weight: 800; flex: 1; }
.qrow + .qrow { margin-top: 14px; }
.qrow .ql { font-size: 12px; font-weight: 800; color: var(--ink-2); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.qgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.qgrid.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.qk { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--ink-2); text-align: center; line-height: 1.15; transition: transform 0.25s var(--spring); }
.qk .o { width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center; color: var(--ink-2); transition: background 0.2s, color 0.2s, box-shadow 0.25s, transform 0.3s var(--spring); }
.qk .o .ic { width: 22px; height: 22px; }
.qk.on { color: var(--ink); }
.qk.on .o { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 18px -8px rgba(43, 26, 36, 0.45); animation: pop 0.35s var(--spring); }
.qk.on.c-period .o { background: var(--period); } .qk.on.c-symptom .o { background: var(--symptom); }
.qk.on.c-mood .o { background: var(--mood); } .qk.on.c-fertile .o { background: var(--fertile); } .qk.on.c-sex .o { background: var(--sex); }

/* ciclo em números */
.nums4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.num { display: flex; flex-direction: column; gap: 8px; padding: 15px; }
.num .top { display: flex; align-items: center; justify-content: space-between; }
.num b { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.num b small { font-size: 12.5px; font-weight: 700; color: var(--ink-2); letter-spacing: 0; }
.num > span { font-size: 12px; color: var(--ink-2); font-weight: 650; line-height: 1.3; }
.num .tile { color: #fff; }

/* ---------- entrada das telas ---------- */
.enter > *, .enter .col > *, .enter .dgrid > *, .enter .masonry > * { animation: rise 0.6s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(0.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- menu lateral (computador) ---------- */
@media (min-width: 1024px) {
  .phone.app { grid-template-columns: 304px minmax(0, 1fr); }
  .sidebar {
    position: sticky; top: 16px; height: calc(100dvh - 32px); margin: 16px 0 16px 16px; padding: 18px 16px 16px; border-radius: 30px; gap: 14px;
    background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px);
    box-shadow: var(--glass-hi), var(--glass-shadow-lg); overflow: hidden auto; scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sb-brand { padding: 2px 6px 0; font-size: 22px; }
  .sb-cycle { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 22px; background: var(--glass-2); box-shadow: var(--glass-hi); text-align: left; transition: transform 0.25s var(--ease); }
  .sb-cycle:hover { transform: translateY(-2px); }
  .sb-cycle svg { flex: none; }
  .sb-cycle .t { font-weight: 800; font-size: 14px; line-height: 1.25; }
  .sb-cycle .s { font-size: 12px; color: var(--ink-2); font-weight: 650; margin-top: 2px; }
  .sb-cycle .dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; }
  .sidebar > .btn { margin: 0; height: 50px; font-size: 15px; }
  .sb-nav { position: relative; gap: 2px; }
  .sb-group { font-size: 0; height: 1px; margin: 8px 12px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
  .sb-item { position: relative; z-index: 1; height: 50px; padding: 0 10px; gap: 12px; border-radius: 18px; color: var(--ink-2); transition: color 0.25s; }
  .sb-item:hover { background: transparent; color: var(--ink); }
  .sb-item.active { background: transparent; color: var(--ink); font-weight: 800; }
  .sb-item .ico { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
  .sb-item.active .ico { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 14px -6px rgba(214, 56, 108, 0.6); }
  .sb-item .ico .ic { width: 19px; height: 19px; }
  .sb-item .chev { margin-left: auto; opacity: 0; transform: translateX(-4px); transition: 0.25s var(--ease); }
  .sb-item.active .chev, .sb-item:hover .chev { opacity: 1; transform: none; }
  .sb-ind { position: absolute; left: 0; right: 0; height: 50px; border-radius: 18px; background: var(--glass-3); box-shadow: var(--glass-hi), 0 8px 18px -8px rgba(150, 40, 90, 0.35); transition: top 0.5s var(--spring); z-index: 0; }
  .sb-foot { gap: 8px; }
  .sb-me { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 20px; background: var(--glass-2); box-shadow: var(--glass-hi); text-align: left; width: 100%; }
  .sb-me .avatar { width: 38px; height: 38px; font-size: 15px; }
  .sb-me .n { font-weight: 800; font-size: 14px; line-height: 1.2; }
  .sb-me .m { font-size: 11.5px; color: var(--ink-2); font-weight: 650; }
  .sb-privacy { background: transparent; padding: 4px 8px; font-size: 11.5px; }
  .app .screen { padding-top: 28px; }
  .m-only { display: none !important; }
  .hero { padding: 22px 24px 24px; }
  .qk .o { width: 50px; height: 50px; }
}
@media (max-width: 1023px) { .d-only { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .aurora i, .enter > *, .enter .col > *, .enter .dgrid > *, .enter .masonry > *, .enter .ring-prog, .enter .ring-knob { animation: none !important; }
  .tab-ind, .sb-ind, .ptl-now { transition: none !important; }
}

/* grupos de opções: colunas equilibradas e última fileira centralizada */
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 6px; }
.tiles > .tile-btn { width: calc((100% - (var(--cols, 4) - 1) * 6px) / var(--cols, 4)); }
.seg.wrap { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
@media (min-width: 1024px) { .seg.wrap { grid-template-columns: repeat(var(--dcols, 6), minmax(0, 1fr)); } }

/* avisos do motor de análise */
.ins { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.ins-h { display: flex; align-items: center; gap: 10px; }
.ins-k { flex: 1; font-size: 11.5px; font-weight: 800; color: var(--ink-2); letter-spacing: 0.02em; }
.ins-x { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; color: var(--ink-3); }
.ins-x:hover { background: var(--glass-2); color: var(--ink); }
.ins-t { font-weight: 800; font-size: 15px; line-height: 1.3; margin-top: 4px; }
.ins-b { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.ins-a { align-self: flex-start; margin-top: 6px; }
.ins-list { display: flex; flex-direction: column; gap: var(--gap); }
.ai-card { display: flex; flex-direction: column; gap: 10px; }
.ai-out { font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.ai-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 11px; font-weight: 800; }
.install { display: flex; gap: 12px; align-items: center; }
.install .ic { flex: none; }
.spin { width: 16px; height: 16px; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.stepper { display: flex; align-items: center; gap: 6px; flex: none; flex-wrap: nowrap; }
.stepper b { text-align: center; }
.stepper .icon-btn { width: 34px; height: 34px; }
.stepper b { min-width: 30px; font-size: 16px; }

/* ---------- logotipo natty ---------- */
.wordmark { display: block; overflow: visible; }
.wm-l { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.4s var(--spring); }
.sb-brand:hover .wm-l, .onb-top:hover .wm-l { animation: wm-wave 0.75s var(--ease) both; animation-delay: calc(var(--k) * 60ms); }
@keyframes wm-wave { 0% { transform: none; } 35% { transform: translateY(-14%) rotate(-5deg); } 70% { transform: translateY(3%); } 100% { transform: none; } }
.sb-brand { align-items: center; gap: 12px; cursor: default; padding: 4px 8px 2px; }
/* abertura: traço se desenha e depois preenche */
.wm-draw .wm-l { fill-opacity: 0; stroke-width: 14; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: wm-stroke 0.9s var(--ease) forwards, wm-fill 0.5s var(--ease) forwards; animation-delay: calc(0.35s + var(--k) * 110ms), calc(0.95s + var(--k) * 110ms); }
@keyframes wm-stroke { to { stroke-dashoffset: 0; } }
@keyframes wm-fill { to { fill-opacity: 1; stroke-width: 0; } }

/* ---------- abertura ---------- */
.splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg); transition: opacity 0.55s var(--ease), filter 0.55s; }
.splash::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 42%, var(--au-a) 0%, transparent 70%), radial-gradient(50% 40% at 70% 70%, var(--au-c) 0%, transparent 70%); opacity: 0.55; filter: blur(30px); }
.splash.out { opacity: 0; filter: blur(8px); pointer-events: none; }
.splash-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.splash .am { filter: drop-shadow(0 24px 30px rgba(214, 56, 108, 0.45)); animation: am-in 0.7s var(--spring) both; }

.splash-sub { font-size: 14px; font-weight: 650; color: var(--ink-2); animation: fade-up 0.6s var(--ease) 1.5s both; }
@keyframes wm-rise { from { opacity: 0; transform: translateY(18px) scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes am-in { from { opacity: 0; transform: scale(0.6) rotate(-20deg); } to { opacity: 1; transform: none; } }

/* logo que se desenha (abertura e tela de código) */
.am .am-ring { stroke-dasharray: 1 1; animation: am-draw 1.1s var(--ease) 0.25s both; }
.am .am-track { animation: fade 0.4s ease 0.15s both; }
.am .am-knob { transform-box: fill-box; transform-origin: center; animation: knob 0.5s var(--spring) 1.15s both; }
.am .am-drop { transform-box: fill-box; transform-origin: 50% 0%; animation: am-drip 0.7s var(--spring) 0.55s both; }
@keyframes am-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes am-drip { 0% { opacity: 0; transform: translateY(-60px) scale(0.6, 0.9); } 60% { opacity: 1; transform: translateY(6px) scale(1.06, 0.94); } 100% { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.am .am-gloss { animation: fade 0.4s ease 1.1s both; }
.brand-mark { flex: none; filter: drop-shadow(0 8px 14px rgba(214, 56, 108, 0.35)); }
.lock .am { filter: drop-shadow(0 18px 26px rgba(214, 56, 108, 0.4)); }
.lock .wordmark { margin-top: -6px; }

/* ---------- movimento no app ---------- */
.float { animation: float 5s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.onb-hero .illus { filter: drop-shadow(0 20px 30px rgba(214, 56, 108, 0.25)); }

/* toque nos registros: anel que se expande */
.qk.on .o, .tile-btn.on .o { position: relative; }
.qk.on .o::after, .tile-btn.on .o::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid currentColor; opacity: 0; animation: ripple 0.6s var(--ease); pointer-events: none; }
.qk.on .o::after { border-color: rgba(255, 255, 255, 0.9); }
@keyframes ripple { from { opacity: 0.8; transform: scale(0.9); } to { opacity: 0; transform: scale(1.5); } }

/* + pulsando quando o dia ainda não foi registrado */
.tab-plus.nudge::before, .sidebar .btn.primary.nudge::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(214, 56, 108, 0.55); animation: nudge 2.4s ease-out infinite; pointer-events: none; }
.sidebar .btn.primary { position: relative; }
@keyframes nudge { 0% { box-shadow: 0 0 0 0 rgba(214, 56, 108, 0.5); } 70%, 100% { box-shadow: 0 0 0 14px rgba(214, 56, 108, 0); } }

/* marcador de hoje no anel respira */
.ring-knob circle:first-child { animation: breathe 3.2s ease-in-out 1.6s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* mini anel do menu se desenha */
.sb-cycle circle:nth-of-type(2) { animation: mini-draw 1s var(--ease) both; }
@keyframes mini-draw { from { stroke-dasharray: 0 160; } }

/* aviso salvo: visto que se desenha */
.toast .ic path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: check-draw 0.45s var(--ease) 0.1s forwards; }
@keyframes check-draw { to { stroke-dashoffset: 0; } }

/* troca de aba do segmento */
.seg button.on { animation: seg-pop 0.35s var(--spring); }
@keyframes seg-pop { from { transform: scale(0.94); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .wm-l, .splash *, .am *, .float, .ring-knob circle, .sb-cycle circle, .tab-plus.nudge::before, .sidebar .btn.primary.nudge::before, .qk .o::after, .tile-btn .o::after, .toast .ic path, .seg button.on { animation: none !important; }
  .toast .ic path { stroke-dashoffset: 0; }
}

/* registro: busca, grupos que abrem e fecham */
.log-tools { display: flex; gap: 8px; align-items: center; }
.log-search { position: relative; flex: 1; }
.log-search .ic { position: absolute; left: 14px; top: 14px; color: var(--ink-3); z-index: 2; pointer-events: none; }
.log-search .input { padding-left: 42px; height: 46px; }
.gh-btn { width: 100%; text-align: left; }
.gh-btn .cnt { margin-left: auto; }
.gh-btn .chev { color: var(--ink-3); }
.lg.shut { padding-top: 12px; padding-bottom: 12px; }
.lg.shut .gh { margin-bottom: 0; }
.qgrid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* mapa de sintomas por fase */
.heat { display: grid; grid-template-columns: minmax(84px, 1.3fr) repeat(5, minmax(0, 1fr)); gap: 5px; align-items: center; }
.heat .hh { font-size: 11px; font-weight: 800; color: var(--ink-2); text-align: center; }
.heat .hn { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat .hc { height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #fff; background: color-mix(in srgb, var(--brand) calc(var(--a) * 100%), var(--surface-3)); }

/* transição entre telas */
.sidebar { view-transition-name: natty-side; }
.tabbar { view-transition-name: natty-tabs; }
::view-transition-old(root) { animation: vt-out 0.22s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.38s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px) scale(0.995); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px) scale(0.995); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
.ai-mini { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; }

/* natty IA */
.ai-input { position: relative; }
.ai-input textarea { padding-right: 58px; min-height: 104px; }
.ai-input .round-btn { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; }
.round-btn.rec { background: var(--period); color: #fff; animation: nudge 1.4s ease-out infinite; }
.photo-pick { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--glass-2); box-shadow: var(--glass-hi); cursor: pointer; }
.photo-pick img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; }
.photo-pick .ic { color: var(--brand); }
.ai-result .ai-body { font-size: 14.5px; line-height: 1.6; }
.ai-result h4 { margin: 12px 0 4px; font-size: 13.5px; font-weight: 800; color: var(--brand); }
.ai-result ul { margin: 4px 0; padding-left: 18px; }
.ai-daily { display: flex; gap: 14px; align-items: flex-start; }
.ai-daily .t { font-weight: 800; font-size: 15.5px; line-height: 1.3; }
.ai-daily .d { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.clamp4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 1024px) { .cols.rev > .col:first-child { order: 2; } }

/* calendário em quadradinhos */
.cal-cc { row-gap: 5px; column-gap: 5px; }
.cc { position: relative; aspect-ratio: 1 / 1.12; border-radius: 13px; background: var(--glass-2); box-shadow: var(--glass-hi); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 4px 4px 3px 6px; transition: transform .2s var(--spring), background .2s; min-width: 0; }
.cc:active { transform: scale(0.94); }
.cc .n { font-size: 14px; font-weight: 800; line-height: 1.15; }
.cc .cdn { position: absolute; top: 5px; right: 5px; font-size: 8.5px; font-weight: 750; color: var(--ink-3); line-height: 1; }
.cc .mks { margin-top: auto; align-self: stretch; display: flex; gap: 1px; align-items: center; justify-content: center; min-height: 13px; }
.cc .mks i { display: grid; place-items: center; }
.cc .mks b { font-size: 9px; color: var(--ink-3); }
.cc.out { opacity: 0.3; }
.cc.p { background: var(--period); color: #fff; box-shadow: 0 6px 14px -8px rgba(214, 56, 108, .7); }
.cc.p .cdn, .cc.ov .cdn, .cc.sel .cdn { color: rgba(255, 255, 255, .8); }
.cc.p .mks i, .cc.ov .mks i, .cc.sel .mks i { color: #fff !important; }
.cc.p-pred { box-shadow: inset 0 0 0 2px var(--period); color: var(--period); }
.cc.fe { background: var(--fertile-soft); }
.cc.ov { background: var(--fertile); color: #fff; }
.cc.today { box-shadow: inset 0 0 0 2px var(--ink); }
.cc.p.today, .cc.ov.today { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.cc.sel:not(.p):not(.ov) { background: var(--ink); color: var(--bg); }
.cc.edit:not(.future) { box-shadow: inset 0 0 0 2px var(--line); }
.cc.edit.p { box-shadow: none; }
.cc.future.edit { opacity: 0.35; pointer-events: none; }
.c-sex { color: var(--sex); } .c-fertile { color: var(--fertile); } .c-ovulation { color: var(--ovulation); } .c-preg { color: var(--preg); }
.c-symptom { color: var(--symptom); } .c-mood { color: var(--mood); } .c-ink { color: var(--ink-2); } .c-luteal { color: var(--luteal); }
.legend-ic span { gap: 4px; font-weight: 650; }
.legend-ic .ic { flex: none; }
.seg.mini { box-shadow: none; background: var(--glass-2); padding: 3px; }
.seg.mini button { height: 30px; padding: 0 12px; font-size: 12.5px; flex: none; }
/* ano */
.year-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ym { padding: 10px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.ym b { font-size: 12.5px; font-weight: 800; text-transform: capitalize; }
.yg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.yd { aspect-ratio: 1; border-radius: 999px; background: var(--surface-3); }
.yd.p { background: var(--period); } .yd.pp { box-shadow: inset 0 0 0 1.5px var(--period); background: transparent; }
.yd.f { background: var(--fertile-soft); } .yd.o { background: var(--fertile); }
.yd.t { box-shadow: 0 0 0 1.5px var(--ink); }
.yd.s:not(.p) { background: var(--sex); opacity: .55; }
@media (min-width: 1024px) { .year-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cc .n { font-size: 16px; } .cc .cdn { font-size: 10px; } .cc { padding: 7px 8px 6px 9px; } }

/* Meu corpo */
.sum { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 15px; }
.sum-h { display: flex; align-items: center; gap: 8px; font-weight: 750; font-size: 13px; }
.sum-h .ic:last-child { margin-left: auto; color: var(--ink-3); }
.sum b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-top: 4px; }
.sum b small { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.sum > span { font-size: 12px; color: var(--ink-2); font-weight: 650; }
.topics { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 16px 8px; }
.topic { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.25; transition: transform .25s var(--spring); }
.topic .tile { width: 56px; height: 56px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 20px -12px rgba(43,26,36,.5); }
.topic .tile .ic { width: 24px; height: 24px; }
.topic:active { transform: scale(0.94); }
@media (max-width: 420px) { .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* cronologia */
.tl-list { display: flex; flex-direction: column; padding: 6px 16px; }
.tl { display: flex; gap: 14px; padding: 12px 0; text-align: left; width: 100%; }
.tl + .tl { border-top: 1px solid var(--line); }
.tl-d { width: 46px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 52px; border-radius: 14px; background: var(--glass-2); box-shadow: var(--glass-hi); }
.tl-d b { font-size: 18px; font-weight: 800; line-height: 1; }
.tl-d span { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.tl-b { flex: 1; min-width: 0; }

/* paletas */
:root[data-palette='lavanda'] { --brand: #7451d6; --brand-2: #a78bfa; --bg: #f6f3ff; --bg-2: #e8e0ff; --sex: #7451d6; }
:root[data-palette='pessego'] { --brand: #d2502c; --brand-2: #ff9b7a; --bg: #fff6f1; --bg-2: #ffe4d6; }
:root[data-palette='menta'] { --brand: #13836c; --brand-2: #4fc9a8; --bg: #f1fbf7; --bg-2: #d6f3e9; }
:root[data-palette='ceu'] { --brand: #2d68cf; --brand-2: #6aa3ff; --bg: #f3f7ff; --bg-2: #dde8ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light'])[data-palette] { --bg: #140b11; --bg-2: #2a1520; } }
:root[data-theme='dark'][data-palette] { --bg: #140b11; --bg-2: #2a1520; }

/* Início fofinho */
.hero-cute .cute-mid { display: flex; align-items: center; gap: 6px; min-height: 160px; }
.cute-txt { flex: 1; min-width: 0; }
.cute-txt .k { font-size: 15px; font-weight: 750; color: var(--ink-2); }
.cute-txt .big { font-size: 40px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin-top: 2px; text-wrap: balance; }
.cute-txt .s { font-size: 14px; color: var(--ink-2); font-weight: 650; margin-top: 6px; }
.cute-cta { margin-top: 16px; }
.pill-big { height: 50px; padding: 0 22px; font-size: 15px; }
.cute-m { flex: none; margin-right: -6px; }
.mascot .m-eye { animation: blink 5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.mascot .m-float { animation: float 3s ease-in-out infinite; }
.hero-min .min-mid { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hero-min .k { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.hero-min .big { font-size: 34px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.hero-min .big small { font-size: 16px; }
.hero-min .s { font-size: 13px; color: var(--ink-2); font-weight: 600; margin-top: 4px; }
@media (max-width: 380px) { .cute-txt .big { font-size: 33px; } .cute-m svg { width: 104px; height: auto; } }

/* Personalizar */
.looks3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.looks5 { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 8px; }
.look { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; border-radius: 18px; background: var(--glass-2); box-shadow: var(--glass-hi); text-align: center; transition: transform .25s var(--spring), box-shadow .2s; }
.look.on { box-shadow: 0 0 0 2px var(--brand), var(--glass-hi); }
.look b { font-size: 12.5px; font-weight: 800; }
.look span { font-size: 11px; color: var(--ink-2); line-height: 1.3; }
.look.sm { padding: 10px 4px; }
.look:active { transform: scale(0.95); }
.swatch { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.none-m { width: 56px; height: 52px; display: grid; place-items: center; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .mascot .m-eye, .mascot .m-float { animation: none; } }
.chips.even { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } .chips.even .chip { justify-content: center; padding: 0 6px; }