/* ============================================================ */
/* OTTO · v2.9.14 — Assistente pessoal                            */
/* ============================================================ */

/* --- variáveis específicas do otto --- */
.otto-root{
  --otto-accent:var(--brand);
  --otto-accent-soft:color-mix(in srgb, var(--brand) 12%, transparent);
  --otto-bg:var(--bg);
  --otto-card:var(--panel);
  --otto-card-hover:var(--panel-2);
  --otto-soft:var(--panel-2);
  --otto-input:var(--panel);
  --otto-text:#ffffff;
  --otto-text-soft:var(--tx);
  --otto-text-dim:var(--tx2);
  --otto-text-faint:var(--tx3);
  --otto-border:rgba(255,255,255,0.06);
  --otto-border-strong:rgba(255,255,255,0.10);
  --otto-border-stronger:rgba(255,255,255,0.16);
  --otto-success:var(--good);
  --otto-warning:var(--warn);
  --otto-danger:var(--crit);
  --otto-pat:var(--brand);
  --otto-pam:#ec4899;
}

/* === BACKDROP & MODAL === */
/* v3.0.10: REMOVIDO backdrop-filter:blur(14px) FULL-SCREEN — Otto Diário
   é modal grande e fica aberto por minutos. Blur(14px) fullscreen sobre
   app + vídeos atrás (YouTube) sobrecarregava GPU e travava browser.
   Trocado por bg opaco rgba(0,0,0,0.92) — visualmente similar sem custo. */
.otto-backdrop{
  position:fixed; inset:0;
  z-index:9999;
  background:rgba(0,0,0,0);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  visibility:hidden;
  pointer-events:none;
  transition:background-color var(--d3) ease, visibility 0s linear var(--d3);
}
.otto-backdrop.active{
  visibility:visible;
  pointer-events:auto;
  background:rgba(0,0,0,0.92);
  transition:background-color var(--d3) ease, visibility 0s linear 0s;
}
.otto-backdrop.closing{
  visibility:visible;
  pointer-events:none;
  background:rgba(0,0,0,0);
}

.otto-modal{
  width:90vw; max-width:1100px;
  height:92vh; max-height:960px;
  background:var(--otto-card);
  border:1px solid var(--otto-border-strong);
  border-radius:20px;
  box-shadow:0 24px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.04),0 0 80px color-mix(in srgb, var(--brand) 8%, transparent);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:var(--otto-text);
  transform:scale(.5) translateY(40px);
  opacity:0;
  filter:blur(20px);
  transition:transform .55s var(--ease-out), opacity var(--d3) ease, filter var(--d3) ease;
}
.otto-backdrop.active .otto-modal{
  transform:scale(1) translateY(0);
  opacity:1;
  filter:blur(0px);
}
.otto-backdrop.closing .otto-modal{
  transform:scale(.7) translateY(20px);
  opacity:0;
  filter:blur(14px);
}

/* === HEADER === */
.otto-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 22px;
  border-bottom:1px solid var(--otto-border);
  background:linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
}
.otto-header-avatar{
  width:38px; height:38px;
  flex-shrink:0;
  position:relative;
}
.otto-header-avatar canvas{
  width:100%; height:100%;
}
.otto-header-text{
  flex:1; min-width:0;
}
.otto-header-greeting{
  font-size:14px;
  font-weight:600;
  color:var(--otto-text);
  letter-spacing:-0.01em;
}
.otto-header-greeting b{ font-weight:700; }
.otto-header-date{
  font-size:11px;
  color:var(--otto-text-faint);
  margin-top:1px;
  font-family:'Inter',system-ui,sans-serif;
  text-transform:lowercase;
}
.otto-header-close{
  background:transparent;
  border:1px solid var(--otto-border);
  color:var(--otto-text-dim);
  width:32px; height:32px;
  border-radius:8px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--d1);
  font-size:18px;
  line-height:1;
}
.otto-header-close:hover{
  background:var(--otto-soft);
  color:var(--otto-text);
  border-color:var(--otto-border-stronger);
}
.otto-header-close svg{ width:16px; height:16px; }

/* === STEPPER === */
.otto-stepper{
  display:flex;
  align-items:center;
  /* TSK-039: 'safe center' centraliza quando a linha do tempo cabe, mas cai pra
     início (rolável) quando não cabe — antes o 'center' puro cortava as duas
     pontas e só a etapa do meio aparecia. */
  justify-content:safe center;
  padding:14px 16px 12px;
  gap:0;
  border-bottom:1px solid var(--otto-border);
  overflow-x:auto;
  scrollbar-width:none;
  flex-wrap:nowrap;
  flex-shrink:0;
}
.otto-stepper::-webkit-scrollbar{ display:none; }

.otto-step{
  display:flex; align-items:center;
  flex-shrink:0;
  gap:0;
}
.otto-step-dot{
  width:18px; height:18px;
  border-radius:50%;
  background:var(--otto-soft);
  border:1px solid var(--otto-border-strong);
  color:var(--otto-text-faint);
  display:flex; align-items:center; justify-content:center;
  font-size:9px;
  font-weight:700;
  cursor:pointer;
  transition:all var(--d2) var(--ease-out);
  font-family:'Inter',system-ui,sans-serif;
  flex-shrink:0;
}
.otto-step-dot:hover{
  border-color:var(--otto-border-stronger);
  color:var(--otto-text-dim);
}
.otto-step.done .otto-step-dot{
  background:var(--otto-success);
  border-color:var(--otto-success);
  color:var(--bg);
}
.otto-step.done .otto-step-dot svg{ width:9px; height:9px; }
/* v2.31.17: step pulado/incompleto = vermelho */
.otto-step.pending .otto-step-dot{
  background:color-mix(in srgb, var(--crit) 15%, transparent);
  border-color:var(--crit);
  color:color-mix(in srgb, var(--crit) 70%, var(--tx));
}
.otto-step.pending .otto-step-dot svg{width:11px;height:11px}
.otto-step.pending + .otto-step-sep{ background:color-mix(in srgb, var(--crit) 40%, transparent); }
.otto-step.pending .otto-step-label{color:color-mix(in srgb, var(--crit) 70%, var(--tx))}
.otto-step.current .otto-step-dot{
  background:var(--otto-accent);
  border-color:var(--otto-accent);
  color:#fff;
  box-shadow:0 0 0 3px var(--otto-accent-soft);
  width:24px; height:24px;
  font-size:10px;
}

/* Label só aparece na etapa atual, próxima do dot */
.otto-step-label{
  display:none;
  font-size:11px;
  color:var(--otto-text);
  white-space:nowrap;
  font-weight:600;
  margin-left:6px;
  letter-spacing:-0.005em;
}
.otto-step.current .otto-step-label{
  display:inline;
}

.otto-step-sep{
  width:8px; height:1px;
  background:var(--otto-border-strong);
  flex-shrink:0;
  margin:0 2px;
  transition:background var(--d2);
}
.otto-step.done + .otto-step-sep{ background:var(--otto-success); }

/* Em telas largas: dá pra mostrar todos os labels */
@media (min-width: 1100px){
  .otto-step-label{ display:inline; font-size:10.5px; color:var(--otto-text-faint); margin-left:5px; }
  .otto-step.current .otto-step-label{ font-size:11.5px; color:var(--otto-text); }
  .otto-step-sep{ width:10px; }
  .otto-stepper{ padding:14px 22px 12px; }
}

/* Em telas pequenas: dots ainda menores, sem hover label */
@media (max-width: 540px){
  .otto-step-dot{ width:16px; height:16px; font-size:8px; }
  .otto-step.current .otto-step-dot{ width:22px; height:22px; font-size:9.5px; }
  .otto-step-sep{ width:5px; margin:0 1px; }
  .otto-stepper{ padding:12px 12px 10px; }
}

/* === BODY === */
.otto-body{
  flex:1;
  overflow-y:auto;
  position:relative;
}
.otto-stage{
  padding:28px 32px;
  min-height:100%;
}

/* === STAGE TITLES === */
.otto-stage-title{
  font-size:24px;
  font-weight:700;
  color:var(--otto-text);
  letter-spacing:-0.02em;
  margin-bottom:6px;
}
.otto-stage-sub{
  font-size:13px;
  color:var(--otto-text-dim);
  margin-bottom:24px;
  line-height:1.5;
}

.otto-section-title{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--otto-text-faint);
  margin:20px 0 10px;
  font-family:'Inter',system-ui,sans-serif;
}
.otto-section-title:first-child{ margin-top:0; }

/* === SUGESTÃO DO OTTO === */
.otto-tip{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  background:var(--otto-accent-soft);
  border:1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius:10px;
  margin:14px 0;
  font-size:13px;
  color:var(--otto-text-soft);
  line-height:1.5;
}
.otto-tip-ic{
  width:18px; height:18px;
  flex-shrink:0;
  color:var(--otto-accent);
  margin-top:1px;
}
.otto-tip b{ color:var(--otto-text); }

/* === LISTA GENÉRICA === */
.otto-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.otto-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:var(--otto-soft);
  border:1px solid var(--otto-border);
  border-radius:10px;
  transition:all var(--d1);
}
.otto-item:hover{ border-color:var(--otto-border-strong); }
.otto-item-bullet{
  width:8px; height:8px; border-radius:50%;
  flex-shrink:0;
  background:var(--otto-text-faint);
}
.otto-item-bullet.pat{ background:var(--otto-pat); }
.otto-item-bullet.pam{ background:var(--otto-pam); }
.otto-item-time{
  font-family:'Inter',system-ui,sans-serif;
  font-size:12px;
  color:var(--otto-text-dim);
  font-weight:600;
  min-width:48px;
}
.otto-item-text{
  flex:1; min-width:0;
  font-size:13.5px;
  color:var(--otto-text-soft);
  line-height:1.4;
}
.otto-item-text small{
  display:block;
  color:var(--otto-text-faint);
  font-size:11.5px;
  margin-top:2px;
}
.otto-item-actions{
  display:flex; gap:6px;
  flex-shrink:0;
}
/* .otto-iconbtn migrado pra .v-btn v-btn-gho v-btn--icon (+ --good/--danger) — v4.0.11 */

.otto-empty{
  text-align:center;
  padding:36px 16px;
  color:var(--otto-text-faint);
  font-size:13px;
  background:var(--otto-soft);
  border:1px dashed var(--otto-border-strong);
  border-radius:10px;
}
.otto-empty b{ color:var(--otto-text-dim); display:block; margin-bottom:4px; font-weight:600; }

/* === GRID DE CARDS DE RESUMO === */
.otto-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
}
.otto-card{
  background:var(--otto-soft);
  border:1px solid var(--otto-border);
  border-radius:12px;
  padding:14px 16px;
}
.otto-card-head{
  display:flex; align-items:center; gap:8px;
  margin-bottom:10px;
}
.otto-card-head svg{ width:14px; height:14px; color:var(--otto-text-dim); }
.otto-card-head h3{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--otto-text-dim);
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
}
.otto-card-list{
  display:flex; flex-direction:column; gap:6px;
}
/* v3.0.18: grid 2 cols (tag fixa + conteúdo) garante alinhamento perfeito. */
.otto-card-line{
  font-size:13px;
  color:var(--otto-text-soft);
  display:grid; grid-template-columns:56px 1fr; gap:10px;
  line-height:1.5;
  align-items:baseline;
}
.otto-card-line .t{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--otto-text-dim);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-align:left;
}
/* v3.0.18: separador de período (manhã/tarde/noite) nos meds */
.otto-card-period{
  font-family:'Inter',system-ui,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--otto-text-faint);
  margin:8px 0 2px;
  padding-top:6px;
  border-top:1px dashed var(--otto-border);
}
.otto-card-period:first-child{
  margin-top:0;padding-top:0;border-top:none;
}

/* ============ BANCOS (step v3.0.19) ============ */
.otto-bank-header{
  display:flex;align-items:stretch;gap:14px;
  margin:16px 0 18px;
  padding:14px 16px;
  background:var(--otto-soft);
  border:1px solid var(--otto-border);
  border-radius:12px;
}
.otto-bank-header .col{width:4px;border-radius:2px;flex-shrink:0}
.otto-bank-header .info{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.otto-bank-header .info b{font-size:18px;font-weight:700;color:var(--otto-text);letter-spacing:-0.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.otto-bank-chip{
  display:inline-flex;align-items:center;
  font-family:'Inter',system-ui,sans-serif;
  font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  padding:3px 9px;border-radius:6px;
  line-height:1.4;
}
.otto-bank-header .info small{font-family:'Inter',system-ui,sans-serif;font-size:11px;color:var(--otto-text-dim);letter-spacing:.04em}
.otto-bank-item{
  margin-bottom:18px;
  padding:14px 16px;
  background:var(--otto-soft);
  border:1px solid var(--otto-border);
  border-radius:10px;
}
.otto-bank-item-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.otto-bank-item-tag{
  font-family:'Inter',system-ui,sans-serif;
  font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  padding:3px 8px;border-radius:4px;
  flex-shrink:0;
}
.otto-bank-item-tag.card{background:color-mix(in srgb, var(--brand) 18%, transparent);color:color-mix(in srgb, var(--brand) 70%, var(--tx));border:1px solid color-mix(in srgb, var(--brand) 35%, transparent)}
.otto-bank-item-tag.account{background:color-mix(in srgb, var(--info) 16%, transparent);color:color-mix(in srgb, var(--brand) 70%, var(--tx));border:1px solid color-mix(in srgb, var(--info) 32%, transparent)}
.otto-bank-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.otto-bank-item-info b{font-size:14px;font-weight:600;color:var(--otto-text)}
.otto-bank-item-info small{font-family:'Inter',system-ui,sans-serif;font-size:11px;color:var(--otto-text-dim);letter-spacing:.04em}
.otto-form.compact{padding:10px 12px;gap:8px}
.otto-bank-recent{
  margin-top:10px;
  border-top:1px dashed var(--otto-border);
  padding-top:8px;
  display:flex;flex-direction:column;gap:3px;
  max-height:160px;overflow-y:auto;
}
.otto-card-empty{
  font-size:12px;
  color:var(--otto-text-faint);
  font-style: normal;
}

/* === FORMS DENTRO DA MODAL === */
.otto-form{
  display:flex; flex-direction:column; gap:12px;
  background:var(--otto-soft);
  border:1px solid var(--otto-border);
  border-radius:12px;
  padding:16px;
  margin:14px 0;
}
.v-otto-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.v-otto-form-row.three{ grid-template-columns:1fr 1fr 1fr; }
.v-otto-form-group{ display:flex; flex-direction:column; gap:5px; }
.v-otto-form-group.full{ grid-column:1/-1; }
.v-otto-label{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--otto-text-faint);
  font-family:'Inter',system-ui,sans-serif;
}
.v-otto-input, .otto-select, .otto-textarea{
  background:var(--otto-input);
  border:1px solid var(--otto-border-strong);
  border-radius:8px;
  padding:10px 12px;
  color:var(--otto-text);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:13px;
  outline:none;
  transition:border-color var(--d1), background var(--d1);
  width:100%;
}
.v-otto-input:focus, .otto-select:focus, .otto-textarea:focus{
  border-color:var(--otto-accent);
  background:var(--otto-card);
}
.otto-textarea{ resize:vertical; min-height:60px; }
.otto-select{ cursor:pointer; appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a8a8' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; background-size:14px; padding-right:32px; }

/* === CARTÕES DE LANÇAMENTO === */
.otto-account-head{
  display:flex; align-items:center;
  gap:12px;
  padding:14px 16px;
  background:linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 100%);
  border:1px solid var(--otto-border);
  border-radius:12px;
  margin-bottom:14px;
}
.otto-account-head .col{
  width:6px; height:36px;
  border-radius:3px;
  flex-shrink:0;
}
.otto-account-head .info{ flex:1; min-width:0; }
.otto-account-head .info b{
  display:block;
  font-size:15px;
  font-weight:700;
  color:var(--otto-text);
  letter-spacing:-0.01em;
}
.otto-account-head .info small{
  display:block;
  font-size:11.5px;
  color:var(--otto-text-faint);
  margin-top:2px;
  font-family:'Inter',system-ui,sans-serif;
}
.otto-account-balance{
  text-align:right;
  flex-shrink:0;
}
.otto-account-balance .lbl{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--otto-text-faint);
  font-family:'Inter',system-ui,sans-serif;
}
.otto-account-balance .val{
  font-size:15px;
  font-weight:700;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--otto-text);
  margin-top:1px;
}

.otto-recent{
  background:var(--otto-soft);
  border:1px solid var(--otto-border);
  border-radius:10px;
  padding:10px;
  margin-bottom:14px;
  max-height:200px;
  overflow-y:auto;
}
.otto-recent-empty{
  font-size:12px;
  color:var(--otto-text-faint);
  text-align:center;
  padding:14px;
  font-style: normal;
}
.otto-recent-row{
  display:flex; gap:10px; align-items:center;
  padding:7px 10px;
  border-radius:6px;
  font-size:12.5px;
  transition:background var(--d2);
}
.otto-recent-row + .otto-recent-row{ border-top:1px solid var(--otto-border); }
.otto-recent-row .d{ color:var(--otto-text-faint); font-family:'Inter',system-ui,sans-serif; font-size:11px; min-width:42px; }
.otto-recent-row .n{ flex:1; min-width:0; color:var(--otto-text-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.otto-recent-row .v{ font-family:'Inter',system-ui,sans-serif; font-weight:600; color:var(--otto-text); }
.otto-recent-row.in .v{ color:var(--otto-success); }
.otto-recent-row.fresh{
  background:linear-gradient(90deg, color-mix(in srgb, var(--good) 16%, transparent), color-mix(in srgb, var(--good) 4%, transparent));
  border-left:2px solid var(--otto-success);
  padding-left:8px;
  animation:ottoFreshIn .5s ease;
}
.otto-recent-row.fresh + .otto-recent-row{ border-top:none; }
@keyframes ottoFreshIn{
  from{ background:color-mix(in srgb, var(--good) 50%, transparent); transform:translateX(-4px); }
  to{ transform:translateX(0); }
}

/* pill (badge inline em títulos de seção) */
.otto-pill{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  background:var(--otto-success);
  color:var(--bg);
  font-size:9.5px;
  font-weight:700;
  border-radius:100px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-family:'Inter',system-ui,sans-serif;
}

/* sessão (lançamentos feitos durante essa etapa) */
.otto-session{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--otto-border-strong);
}
.otto-session-title{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--otto-success);
  font-family:'Inter',system-ui,sans-serif;
  margin-bottom:8px;
}
.otto-session-row{
  display:flex; gap:10px; align-items:center;
  font-size:12.5px;
  padding:6px 0;
  color:var(--otto-text-soft);
}
.otto-session-row svg{ width:12px; height:12px; color:var(--otto-success); flex-shrink:0; }
.otto-session-row .v{ font-family:'Inter',system-ui,sans-serif; font-weight:600; margin-left:auto; }

/* === BOTÕES === */
/* .otto-btn migrado 100% pra .v-btn do DS (v4.0.11):
   .otto-btn ghost   → .v-btn v-btn-gho
   .otto-btn primary → .v-btn v-btn-pri
   .otto-btn primary big → .v-btn v-btn-pri v-btn--lg
   .otto-btn danger  → .v-btn v-btn-gho v-btn--danger
   CSS local apagado — agora consome o componente do showcase. */

/* === ROW DE AÇÕES PRA NOTAS === */
.otto-action-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
  margin-top:14px;
}
.otto-action-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:14px 10px;
  background:var(--otto-soft);
  border:1px solid var(--otto-border);
  border-radius:10px;
  color:var(--otto-text-dim);
  cursor:pointer;
  transition:all var(--d1);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:12px;
  font-weight:600;
}
.otto-action-btn:hover{
  background:var(--otto-card-hover);
  color:var(--otto-text);
  border-color:var(--otto-accent);
}
.otto-action-btn svg{ width:18px; height:18px; }

.otto-note-content{
  background:var(--otto-soft);
  border:1px solid var(--otto-border);
  border-radius:12px;
  padding:18px 20px;
  font-size:15px;
  color:var(--otto-text);
  line-height:1.5;
  margin:14px 0;
  position:relative;
}
.otto-note-content::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--otto-accent);
  border-radius:3px 0 0 3px;
}
.otto-note-meta{
  font-size:11px;
  color:var(--otto-text-faint);
  font-family:'Inter',system-ui,sans-serif;
  margin-top:8px;
}
.otto-note-counter{
  font-size:11px;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--otto-text-faint);
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:0.06em;
}

/* === FOOTER (botões de navegação) === */
.otto-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 22px;
  border-top:1px solid var(--otto-border);
  background:linear-gradient(0deg, rgba(255,255,255,0.02) 0%, transparent 100%);
}
.otto-footer-postpone{
  position:relative;
}
.otto-postpone-menu{
  position:absolute;
  bottom:100%; left:50%;
  transform:translateX(-50%) translateY(8px) scale(.92);
  margin-bottom:6px;
  background:var(--otto-card);
  border:1px solid var(--otto-border-strong);
  border-radius:10px;
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:140px;
  box-shadow:0 12px 32px rgba(0,0,0,0.6);
  z-index:10;
  opacity:0;
  pointer-events:none;
  transition:transform var(--d2) var(--ease-out), opacity var(--d2) ease;
}
.otto-postpone-menu.active{
  transform:translateX(-50%) translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}
.otto-postpone-menu button{
  background:transparent; border:none;
  color:var(--otto-text-soft);
  font-family:inherit;
  font-size:12.5px;
  padding:8px 12px;
  border-radius:6px;
  cursor:pointer;
  text-align:left;
  transition:background var(--d1);
}
.otto-postpone-menu button:hover{
  background:var(--otto-soft);
  color:var(--otto-text);
}

/* === BOAS-VINDAS (animação principal) === */
.otto-welcome{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  text-align:center;
  min-height:520px;
}
.otto-welcome-canvas{
  width:280px; height:280px;
  margin-bottom:24px;
}
.otto-welcome-canvas-big{ width:340px; height:340px; }
.otto-welcome-canvas canvas{
  width:100%; height:100%;
  display:block;
}
.otto-welcome-greeting{
  font-size:34px;
  font-weight:300;
  letter-spacing:-0.02em;
  color:var(--otto-text);
  margin-bottom:12px;
  line-height:1.1;
  min-height:42px;
}
.otto-welcome-greeting b{ font-weight:600; }
.otto-welcome-sub{
  font-size:14px;
  color:var(--otto-text-dim);
  max-width:520px;
  line-height:1.6;
  margin-bottom:32px;
}
.otto-welcome-summary{
  display:flex; gap:18px;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:32px;
}
.otto-welcome-summary-item{
  display:flex; flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:80px;
}
.otto-welcome-summary-item .n{
  font-size:24px;
  font-weight:700;
  color:var(--otto-text);
  font-family:'Inter',system-ui,sans-serif;
  letter-spacing:-0.02em;
}
.otto-welcome-summary-item .l{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--otto-text-faint);
  font-family:'Inter',system-ui,sans-serif;
}

/* === FAB (botão flutuante de reabertura) === */
.otto-fab{
  position:fixed;
  bottom:24px; right:24px;
  width:68px; height:68px;
  background:var(--otto-card);
  border:1px solid var(--otto-border-stronger);
  border-radius:50%;
  cursor:pointer;
  display:none;
  align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.55), 0 0 28px color-mix(in srgb, var(--brand) 20%, transparent);
  transition:all var(--d2);
  z-index:9000;
  padding:0;
  overflow:hidden;
}
.otto-fab.active{ display:flex; }
.otto-fab:hover{
  border-color:var(--otto-accent);
  transform:scale(1.06);
  box-shadow:0 14px 36px color-mix(in srgb, var(--brand) 40%, transparent), 0 0 40px color-mix(in srgb, var(--brand) 30%, transparent);
}
.otto-fab canvas{ width:54px; height:54px; }
.otto-fab-badge{
  position:absolute;
  top:8px; right:8px;
  width:12px; height:12px;
  background:var(--otto-warning);
  border:2px solid var(--otto-card);
  border-radius:50%;
  display:none;
  box-shadow:0 0 10px color-mix(in srgb, var(--warn) 60%, transparent);
}
.otto-fab.has-pending .otto-fab-badge{ display:block; }

/* === FORM HEADER (título dentro de forms inline) === */
.v-otto-form-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  margin:-4px -4px 4px;
  padding-bottom:10px;
  border-bottom:1px solid var(--otto-border);
}
.v-otto-form-header-title{
  font-size:13px;
  font-weight:700;
  color:var(--otto-text);
  letter-spacing:-0.01em;
}
.v-otto-form-header-close{
  background:transparent;
  border:1px solid var(--otto-border);
  color:var(--otto-text-dim);
  width:26px; height:26px;
  border-radius:6px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--d1);
}
.v-otto-form-header-close svg{ width:13px; height:13px; }
.v-otto-form-header-close:hover{
  background:var(--otto-card-hover);
  color:var(--otto-text);
  border-color:var(--otto-border-stronger);
}

/* === TOGGLE GROUP (saída/entrada) === */
.otto-toggle-group{
  display:flex;
  background:var(--otto-input);
  border:1px solid var(--otto-border-strong);
  border-radius:9px;
  padding:3px;
  gap:2px;
}
.otto-toggle{
  flex:1;
  background:transparent;
  border:none;
  color:var(--otto-text-dim);
  padding:9px 12px;
  border-radius:6px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition:all var(--d1);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.otto-toggle svg{ width:14px; height:14px; }
.otto-toggle:hover{ color:var(--otto-text); }
.otto-toggle.active{
  background:var(--otto-card);
  color:var(--otto-text);
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
/* v2.31.17: pills com fundo destacado (não só cor de texto) */
.otto-toggle.active[data-type="entrada"]{
  background:color-mix(in srgb, var(--good) 18%, transparent);
  color:color-mix(in srgb, var(--good) 75%, var(--tx));
  box-shadow:0 1px 3px rgba(0,0,0,0.3), inset 0 0 0 1px color-mix(in srgb, var(--good) 40%, transparent);
}
.otto-toggle.active[data-type="saida"]{
  background:color-mix(in srgb, var(--crit) 18%, transparent);
  color:color-mix(in srgb, var(--crit) 70%, var(--tx));
  box-shadow:0 1px 3px rgba(0,0,0,0.3), inset 0 0 0 1px color-mix(in srgb, var(--crit) 40%, transparent);
}

/* === DAY PICKER (recorrência customizada de tarefa) === */
.otto-day-picker{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.otto-day-btn{
  width:36px; height:36px;
  background:var(--otto-input);
  border:1px solid var(--otto-border-strong);
  border-radius:8px;
  color:var(--otto-text-dim);
  font-family:'Inter',system-ui,sans-serif;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:all var(--d1);
  display:flex; align-items:center; justify-content:center;
}
.otto-day-btn:hover{ color:var(--otto-text); border-color:var(--otto-border-stronger); }
.otto-day-btn.active{
  background:var(--otto-accent);
  color:#fff;
  border-color:var(--otto-accent);
}

/* === CONTEXT BOX (saldo/fatura + histórico recente em forms de gasto) === */
.otto-context-box{
  background:var(--otto-input);
  border:1px solid var(--otto-border);
  border-radius:9px;
  padding:10px 12px;
  margin-top:-4px;
}
.otto-context-box:empty{ display:none; }
.otto-context-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
  padding-bottom:8px;
  border-bottom:1px solid var(--otto-border);
}
.otto-context-head .lbl{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--otto-text-faint);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:600;
}
.otto-context-head .val{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--otto-text);
}
.otto-context-list{
  display:flex; flex-direction:column;
  max-height:160px;
  overflow-y:auto;
}

/* action-btn ativo (em notas) */
.otto-action-btn.active{
  background:var(--otto-accent-soft);
  color:var(--otto-text);
  border-color:var(--otto-accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent);
}
.otto-action-btn.active svg{ color:var(--otto-accent); }

/* === LOADING (estado inicial enquanto carrega dados) === */
.otto-loading{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:50vh;
  gap:24px;
}
.otto-loading-canvas{
  width:200px; height:200px;
}
.otto-loading-canvas canvas{
  width:100%; height:100%;
  display:block;
}
.otto-loading-text{
  font-size:13px;
  color:var(--otto-text-faint);
  letter-spacing:0.04em;
  font-family:'Inter',system-ui,sans-serif;
  animation:ottoLoadingPulse 1.6s ease-in-out infinite;
}
@keyframes ottoLoadingPulse{
  0%,100%{ opacity:0.5; }
  50%{ opacity:1; }
}

/* === CLOSE CONFIRM DIALOG (mudanças não salvas) === */
/* v3.0.10: blur removido (overlay full-screen DENTRO do Otto já pesado) */
.otto-close-confirm{
  position:absolute;
  inset:0;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  display:flex;align-items:center;justify-content:center;
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--d2) ease;
}
.otto-close-confirm.active{
  opacity:1;
  pointer-events:auto;
}
.otto-close-confirm-card{
  background:var(--otto-card);
  border:1px solid var(--otto-border-stronger);
  border-radius:14px;
  padding:24px 24px 20px;
  width:90%;max-width:380px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  transform:scale(.9);
  transition:transform .3s var(--ease-out);
}
.otto-close-confirm.active .otto-close-confirm-card{ transform:scale(1); }
.otto-close-confirm-icon{
  width:48px;height:48px;
  margin:0 auto 14px;
  border-radius:50%;
  background:color-mix(in srgb, var(--warn) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  display:flex;align-items:center;justify-content:center;
  color:var(--warn);
}
.otto-close-confirm-icon svg{width:22px;height:22px}
.otto-close-confirm-title{
  font-size:15px;font-weight:700;
  color:var(--otto-text);
  margin-bottom:6px;
  letter-spacing:-0.01em;
}
.otto-close-confirm-msg{
  font-size:13px;
  color:var(--otto-text-dim);
  line-height:1.5;
  margin-bottom:18px;
}
.otto-close-confirm-actions{
  display:flex;gap:8px;justify-content:center;
}
.otto-close-confirm-actions .v-btn{
  flex:1;
}


@media (max-width: 720px){
  .otto-backdrop{ padding:0; }
  .otto-modal{
    width:100vw; height:100vh; max-width:none; max-height:none;
    border-radius:0;
    border:none;
  }
  .otto-stage{ padding:20px; }
  .otto-stage-title{ font-size:20px; }
  .v-otto-form-row{ grid-template-columns:1fr; }
  .v-otto-form-row.three{ grid-template-columns:1fr; }
  .otto-grid{ grid-template-columns:1fr; }
  .otto-welcome-canvas{ width:220px; height:220px; }
  .otto-welcome-greeting{ font-size:28px; }
  .otto-fab{ bottom:14px; right:14px; width:58px; height:58px; }
  .otto-fab canvas{ width:46px; height:46px; }
  .otto-footer{ padding:10px 14px; gap:6px; }
  .otto-header{ padding:12px 16px; }
  .otto-header-greeting{ font-size:13px; }
  .otto-stepper{ padding:10px 14px 8px; }
}

/* === TYPEWRITER (saudação) === */
.otto-typewriter{
  display:inline-block;
  position:relative;
}
.otto-typewriter::after{
  content:'';
  display:inline-block;
  width:2px;
  height:0.9em;
  background:var(--otto-accent);
  margin-left:3px;
  vertical-align:middle;
  animation:ottoCaret .8s step-end infinite;
}
.otto-typewriter.done::after{ display:none; }
@keyframes ottoCaret{ 50%{ opacity:0; } }

/* ========================================================
 * v2.31.17: confirm modal + feedback card pra notas rápidas
 * ======================================================== */
.otto-confirm-backdrop{
  /* v2.31.17: usa o padrão modal-backdrop do app (já adicionado via classe).
     Esse seletor mantém z-index acima do otto-backdrop. */
  z-index:100000;
}
.otto-confirm-msg{
  font-size:13px;line-height:1.55;color:var(--tx);
}
.otto-confirm-msg b{color:var(--tx)}

/* v2.31.17: feedback card depois de aplicar ação na nota — padrão app */
.otto-feedback-card{
  margin-top:14px;
  padding:20px 22px;
  background:color-mix(in srgb, var(--good) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--good) 24%, transparent);
  border-radius:14px;
}
.otto-feedback-card.removed{
  background:color-mix(in srgb, var(--info) 6%, transparent);
  border-color:color-mix(in srgb, var(--info) 24%, transparent);
}
.otto-feedback-head{
  display:flex;gap:14px;align-items:flex-start;
}
.otto-feedback-icon{
  width:42px;height:42px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--good) 18%, transparent);
  color:color-mix(in srgb, var(--good) 75%, var(--tx));flex-shrink:0;
}
.otto-feedback-card.removed .otto-feedback-icon{
  background:color-mix(in srgb, var(--info) 18%, transparent);color:color-mix(in srgb, var(--brand) 70%, var(--tx));
}
.otto-feedback-icon svg{width:20px;height:20px}
.otto-feedback-text{flex:1;min-width:0}
.otto-feedback-title{
  font-size:15px;font-weight:700;color:#fff;
  margin-bottom:4px;
}
.otto-feedback-detail{
  font-size:13px;color:var(--tx2);line-height:1.5;
}
.otto-feedback-quote{
  margin-top:14px;padding-top:12px;
  border-top:1px dashed rgba(255,255,255,.08);
}
.otto-feedback-quote-lbl{
  font-size:10px;font-family:'Inter',system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.12em;color:var(--tx3);
  margin-bottom:5px;
}
.otto-feedback-quote-content{
  font-size:13px;color:var(--tx2);
  white-space:pre-wrap;word-break:break-word;line-height:1.5;
}
.otto-feedback-actions{
  display:flex;justify-content:flex-end;gap:10px;
  margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
}

/* deprecated v2.31.17 — manter por compat se algo fora do otto referencia */
.otto-note-feedback{
  display:flex;gap:18px;
  padding:20px 22px;
  background:color-mix(in srgb, var(--good) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--good) 24%, transparent);
  border-radius:14px;
  margin-top:14px;
}
.otto-note-feedback.removed{
  background:color-mix(in srgb, var(--info) 6%, transparent);
  border-color:color-mix(in srgb, var(--info) 24%, transparent);
}
.otto-note-feedback-icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--good) 18%, transparent);
  color:color-mix(in srgb, var(--good) 75%, var(--tx));flex-shrink:0;
}
.otto-note-feedback.removed .otto-note-feedback-icon{
  background:color-mix(in srgb, var(--info) 18%, transparent);color:color-mix(in srgb, var(--brand) 70%, var(--tx));
}
.otto-note-feedback-icon svg{width:22px;height:22px}
.otto-note-feedback-body{flex:1;min-width:0}
.otto-note-feedback-title{
  font-size:15px;font-weight:700;color:#fff;
  margin-bottom:6px;
}
.otto-note-feedback-detail{
  font-size:13px;color:var(--tx2);line-height:1.5;
  margin-bottom:14px;
}
.otto-note-feedback-note{
  padding-top:12px;border-top:1px dashed rgba(255,255,255,.08);
}
.otto-note-feedback-label{
  font-size:10px;font-family:'Inter',system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.1em;color:var(--tx3);
  display:block;margin-bottom:5px;
}
.otto-note-feedback-content{
  font-size:13px;color:var(--tx2);
  white-space:pre-wrap;word-break:break-word;
}

/* ========================================================
 * v2.31.17: atalhos cross-step "mesmo banco"
 * ======================================================== */
.otto-bank-shortcuts{
  margin:14px 0 18px;
  padding:14px 16px;
  background:color-mix(in srgb, var(--info) 6%, transparent);
  border:1px solid color-mix(in srgb, var(--info) 20%, transparent);
  border-radius:12px;
}
.otto-bank-shortcuts-lbl{
  font-size:12px;
  color:color-mix(in srgb, var(--brand) 70%, var(--tx));
  margin-bottom:10px;
  font-weight:600;
  letter-spacing:-.005em;
}
.otto-bank-shortcuts-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.otto-bank-shortcut{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;
  background:color-mix(in srgb, var(--bg) 50%, transparent);
  border:1px solid color-mix(in srgb, var(--info) 30%, transparent);
  border-radius:99px;
  color:#dbeafe;
  font-size:12px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:all var(--d1);
}
.otto-bank-shortcut:hover{
  background:color-mix(in srgb, var(--info) 15%, transparent);
  border-color:var(--brand);
  color:#fff;
  transform:translateY(-1px);
}
.otto-bank-shortcut svg{width:14px;height:14px;flex-shrink:0;opacity:.85}
.otto-bank-shortcut svg:last-child{opacity:.6;margin-left:2px}

/* ========================================================
 * v2.31.17: quando Otto está aberto, qualquer modal-backdrop
 * (askConfirm, etc) precisa ficar ACIMA do Otto (z-index: 99999)
 * Otto tem z-index:9999. Modal-backdrop default é 150.
 * Selector :has() detecta otto-backdrop ativo no body.
 * ======================================================== */
body:has(.otto-backdrop.active) .v-modal-backdrop,
body:has(.otto-backdrop.active) .otto-confirm-backdrop{
  z-index:100000 !important;
}