/* ===== OPERAÇÃO CASH — TEMA VIDRO MODERNO ===== */

:root{
  --bg:#eef3fb;
  --bg-2:#dfe8f6;
  --text:#172033;
  --muted:#667085;

  --glass:rgba(255,255,255,.58);
  --glass-strong:rgba(255,255,255,.76);
  --glass-soft:rgba(255,255,255,.38);

  --border:rgba(15,23,42,.10);
  --border-strong:rgba(15,23,42,.16);

  --accent:#4f75b8;
  --accent-2:#7c9ed6;
  --accent-3:#8b5cf6;

  --good:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;
  --info:#2563eb;

  --shadow:0 24px 70px rgba(15,23,42,.14);
  --shadow-soft:0 12px 34px rgba(15,23,42,.10);

  --field-bg:rgba(255,255,255,.72);
  --row-bg:rgba(255,255,255,.56);
  --row-hover:rgba(255,255,255,.76);

  --header-1:#243447;
  --header-2:#3e5f8e;
  --header-3:#5f7fb2;
}

[data-tema="escuro"]{
  --bg:#070b18;
  --bg-2:#111827;
  --text:#f4f7ff;
  --muted:#a7b0c7;

  --glass:rgba(15,23,42,.58);
  --glass-strong:rgba(17,24,39,.76);
  --glass-soft:rgba(30,41,59,.38);

  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.16);

  --accent:#7da2df;
  --accent-2:#9ab9ec;
  --accent-3:#a78bfa;

  --field-bg:rgba(15,23,42,.78);
  --row-bg:rgba(15,23,42,.62);
  --row-hover:rgba(30,41,59,.82);

  --header-1:#1e293b;
  --header-2:#334b73;
  --header-3:#526f9f;

  --shadow:0 24px 70px rgba(0,0,0,.42);
  --shadow-soft:0 12px 34px rgba(0,0,0,.30);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
}

html{
  scroll-behavior:auto;
}

body{
  min-height:100vh;
  color:var(--text);
  padding:18px;
  padding-bottom:110px;
  background:
    radial-gradient(circle at 8% 10%, rgba(79,117,184,.22), transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(139,92,246,.20), transparent 32%),
    radial-gradient(circle at 48% 105%, rgba(45,212,191,.10), transparent 36%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
  transition:background .25s ease,color .25s ease;
}

body::before{
  content:none;
}

.container{
  max-width:1200px;
  margin:0 auto;
}

/* ===== Estrutura vidro ===== */

/* Superfícies principais.
   Os cards de conteúdo NÃO usam backdrop-filter: dezenas de blurs simultâneos
   obrigavam o navegador a repintar grandes áreas durante a rolagem. */
.tabs,
.modal,
#login-card,
#bloqueio-card{
  background:var(--glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}

.card{
  background:var(--glass-strong);
  border:1px solid var(--border);
  box-shadow:0 5px 18px rgba(15,23,42,.075);
  padding:16px;
  border-radius:22px;
  margin-bottom:12px;
  transition:border-color .16s ease, background .16s ease;
}

[data-tema="escuro"] .card{
  box-shadow:0 5px 18px rgba(0,0,0,.20);
}

@media (hover:hover) and (pointer:fine){
  .card:hover{
    border-color:var(--border-strong);
  }
}

header{
  background:
    linear-gradient(135deg,var(--header-1),var(--header-2) 48%,var(--header-3));
  color:#fff;
  padding:24px 18px;
  border-radius:22px;
  text-align:center;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.12);
}

header h1{
  font-size:clamp(1.55rem,2.4vw,2.1rem);
  margin-bottom:8px;
  letter-spacing:.2px;
}

header p{
  color:rgba(255,255,255,.9);
  font-size:.98rem;
}

/* ===== Login ===== */

#login-card{
  max-width:520px;
  margin:34px auto;
  border-radius:26px;
  padding:22px;
}

#login-card h2{
  text-align:center;
  margin-bottom:18px;
}

label{
  font-size:.92rem;
  color:var(--muted);
}

.note,
small{
  font-size:.9rem;
  color:var(--muted);
  margin-top:6px;
  line-height:1.45;
}

a{
  color:var(--accent);
  font-weight:600;
}

[data-tema="escuro"] a{
  color:#93c5fd;
}

/* ===== Formulários ===== */

.form-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:10px;
}

input,
select,
textarea{
  padding:12px 14px;
  border-radius:15px;
  border:1px solid var(--border);
  background:var(--field-bg);
  color:var(--text);
  outline:none;
  font-size:1rem;
  transition:border-color .2s, box-shadow .2s, background .2s, transform .15s;
}

input::placeholder,
textarea::placeholder{
  color:color-mix(in srgb, var(--muted) 78%, transparent);
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  background:var(--glass-strong);
}

input[type="checkbox"]{
  width:auto;
  accent-color:var(--accent);
}

/* ===== Botões ===== */

button{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--glass-strong);
  color:var(--text);
  outline:none;
  cursor:pointer;
  font-size:1rem;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

button:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-soft);
  border-color:var(--border-strong);
  background:var(--row-hover);
}

button:active{
  transform:scale(.98);
}

button:focus-visible{
  outline:3px solid color-mix(in srgb, var(--accent) 28%, transparent);
}

button:disabled,
button.disabled,
.disabled{
  background:rgba(148,163,184,.18) !important;
  color:color-mix(in srgb, var(--muted) 70%, transparent) !important;
  border-color:var(--border) !important;
  opacity:1;
  pointer-events:none;
}

.small{
  font-size:.92rem;
  padding:9px 13px;
  border-radius:12px;
}

.btn-danger{
  background:linear-gradient(135deg,#fb7185,var(--bad)) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.12) !important;
}

.btn-warning{
  background:linear-gradient(135deg,#fbbf24,var(--warn)) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.12) !important;
}

/* botões com estilo inline */
#btn-create{
  background:linear-gradient(135deg,#22c55e,#16a34a) !important;
  color:#fff !important;
}

#btn-reabrir-mes{
  background:linear-gradient(135deg,#fbbf24,#f59e0b) !important;
  color:#fff !important;
}

#btn-whatsapp,
#btn-export-pdf,
#btn-add-cartao,
#btn-add-despesa,
#btn-add-receita,
#btn-add-parcel,
[data-add]{
  background:var(--glass-strong);
  color:var(--text);
  border:1px solid var(--border);
}

/* ===== Tema button ===== */

#tema-btn{
  position:fixed;
  right:16px;
  top:16px;
  padding:10px 13px;
  border-radius:999px;
  background:var(--glass-strong);
  color:var(--text);
  z-index:999;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}

/* ===== Abas ===== */

.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:14px 0;
  padding:9px;
  border-radius:20px;
}

.tab{
  flex:0 0 auto;
  padding:10px 16px;
  margin:0 4px;
  border-radius:999px;
  white-space:nowrap;
  color:var(--text);
  transition:background .2s, transform .15s, color .2s;
}

.tab:hover{
  background:var(--glass-soft);
  transform:translateY(-1px);
}

.tab.active{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  font-weight:800;
  box-shadow:0 10px 22px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ===== Resumo ===== */

.summary .card{
  background:var(--glass-soft);
  box-shadow:none;
}

.summary h3{
  font-size:1.03rem;
  margin-bottom:4px;
}

.saldo{
  padding:20px;
  border-radius:22px;
  color:#fff;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.20), transparent 28%),
    linear-gradient(135deg,#6366f1,#8b5cf6);
  text-align:center;
  box-shadow:0 24px 50px rgba(99,102,241,.28);
}

.saldo .valor{
  font-size:2rem;
  font-weight:900;
  letter-spacing:1px;
}

/* ===== Tabelas ===== */

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 8px;
  margin-top:8px;
}

.table th{
  text-align:left;
  padding:10px;
  font-size:.9rem;
  color:var(--muted);
  font-weight:800;
}

.table td{
  padding:11px 10px;
  background:var(--row-bg);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  color:var(--text);
  vertical-align:middle;
}

.table tr td:first-child{
  border-left:1px solid var(--border);
  border-radius:14px 0 0 14px;
}

.table tr td:last-child{
  border-right:1px solid var(--border);
  border-radius:0 14px 14px 0;
}

.table tbody tr:hover td{
  background:var(--row-hover);
}

.contenteditable{
  border-radius:12px;
}

/* ===== Cartões e listas ===== */

#lista-cartoes .card,
#historico-list .card{
  background:var(--glass-strong);
}

/* Isola o repaint das listas longas sem criar uma camada GPU por item. */
#lista-cartoes .card{
  contain:layout paint;
}

.cash-list-item{
  padding:11px 12px;
  margin:8px 0;
  background:var(--row-bg);
  border:1px solid var(--border);
  border-radius:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:var(--text);
  box-shadow:none;
}

.cash-list-item:hover{
  background:var(--row-hover);
}

.cash-list-item small,
[data-tema="escuro"] small[style*="color:#666"],
[data-tema="escuro"] small[style*="color: #666"]{
  color:var(--muted) !important;
}

.compra-paga{
  opacity:.68;
  text-decoration:line-through;
}

[data-tema="escuro"] .compra-paga{
  color:rgba(226,232,240,.72) !important;
  opacity:1;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 10px;
  border-radius:999px;
  background:var(--glass-soft);
  color:var(--text);
  font-size:.8rem;
  border:1px solid var(--border);
}


.sync-badge #ls-status[data-status="salvando"]{ color:#b45309; font-weight:700; }
.sync-badge #ls-status[data-status="ok"]{ color:var(--good); font-weight:700; }
.sync-badge #ls-status[data-status="erro"]{ color:var(--bad); font-weight:700; }

/* ===== Gráficos ===== */

.graf{
  display:flex;
  align-items:end;
  gap:10px;
  padding:14px 0 6px;
  height:220px;
  border-bottom:1px solid var(--border);
  margin-bottom:8px;
}

.graf-col{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  height:100%;
}

.graf-bar{
  width:72%;
  border-radius:12px 12px 0 0;
  min-height:8px;
  position:relative;
  background:linear-gradient(to top,#fb7185,#ef4444);
  box-shadow:0 12px 24px rgba(239,68,68,.20);
}

.graf-label{
  margin-top:8px;
  font-size:.78rem;
  text-align:center;
  word-break:break-word;
  color:var(--muted);
}

/* ===== Modal e Cash ===== */

.modal-wrap{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.58);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:3000;
  padding:16px;
  backdrop-filter:blur(4px);
}

.modal{
  width:100%;
  max-width:980px;
  border-radius:24px;
  padding:18px;
  max-height:90vh;
  overflow:auto;
  color:var(--text);
}

.modal h3{
  margin-bottom:8px;
}

.modal .row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

#cash-panel{
  z-index:5000;
}

#cash-panel .modal{
  max-width:540px;
  border-radius:22px;
}

#cash-chat{
  background:var(--row-bg);
  border:1px solid var(--border);
  padding:10px;
  border-radius:16px;
}

#cash-chat div{
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}

/* ===== Toast ===== */

#toast-wrap{
  position:fixed;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:4000;
}

.toast{
  padding:12px 14px;
  border-radius:14px;
  color:#fff;
  box-shadow:0 16px 34px rgba(0,0,0,.18);
  min-width:220px;
}

.toast.success{background:var(--good)}
.toast.info{background:var(--info)}
.toast.warn{background:var(--warn)}
.toast.error{background:var(--bad)}

#loading{
  background:rgba(15,23,42,.92) !important;
  backdrop-filter:blur(4px);
}

/* ===== FAB ===== */

.fab{
  position:fixed;
  bottom:20px;
  right:20px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  border-radius:50%;
  width:60px;
  height:60px;
  font-size:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 36px rgba(0,0,0,.24);
  border:none;
  z-index:10000;
}

.fab-container{
  position:fixed;
  bottom:90px;
  right:20px;
  display:none;
  flex-direction:column-reverse;
  align-items:center;
  gap:12px;
  z-index:9999;
}

.fab-options{
  display:none;
  flex-direction:column;
  gap:12px;
  margin-bottom:8px;
}

.fab-options button{
  width:50px;
  height:50px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--glass-strong);
  color:var(--text);
  font-size:1.25rem;
  box-shadow:var(--shadow-soft);
  display:flex;
  align-items:center;
  justify-content:center;
}

.fab-container.active .fab-options{
  display:flex;
}

.fab-container.active .fab{
  transform:rotate(45deg);
  background:linear-gradient(135deg,#fb7185,#ef4444);
}

#btn-cash{
  background:linear-gradient(135deg,#1e293b,#64748b);
  color:#fff;
}

/* ===== Utilidades ===== */

.fade-in{
  animation:fadeIn .35s ease;
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ===== Mobile ===== */

@media(max-width:720px){
  body{
    padding:12px;
    padding-bottom:145px;
  }

  header{
    padding:16px;
    border-radius:20px;
  }

  .form-row{
    flex-direction:column !important;
    width:100%;
  }

  .form-row input,
  .form-row button,
  .form-row select{
    width:100%;
  }

  .card{
    padding:14px;
    border-radius:18px;
  }

  .table{
    display:block;
    overflow-x:auto;
    border-spacing:0 8px;
  }

  .tabs{
    display:flex !important;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    margin:0;
    padding:8px 6px 14px;
    border-radius:18px 18px 0 0;
    background:rgba(15,23,42,.62);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 -8px 24px rgba(0,0,0,.25);
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    flex-wrap:nowrap;
    z-index:99999;
  }

  .tabs::-webkit-scrollbar{
    display:none;
  }

  .tab{
    flex:0 0 auto;
    font-size:.92rem;
    padding:10px 16px;
    margin:0 4px;
    color:#fff;
  }

  .fab{
    bottom:90px;
  }

  .cash-list-item{
    flex-direction:column;
    align-items:flex-start;
  }
}
/* ===== CORREÇÃO DO CHECKBOX DOS TERMOS NO CELULAR ===== */

#aceite-termos{
  width:18px !important;
  min-width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  margin-top:3px !important;
}

#login-card label.note{
  width:100%;
  max-width:100%;
}

#login-card label.note span{
  flex:1;
  min-width:0;
  word-break:normal;
  overflow-wrap:break-word;
}

@media(max-width:720px){
  #login-card{
    margin:24px auto;
    width:100%;
    max-width:calc(100vw - 24px);
  }

  #login-card label.note{
    display:flex !important;
    align-items:flex-start !important;
    gap:10px !important;
    text-align:left;
  }

  #aceite-termos{
    width:20px !important;
    min-width:20px !important;
    height:20px !important;
  }

  #login-card label.note span{
    font-size:.88rem;
    line-height:1.35;
  }
}
/* ===== GRÁFICO PROFISSIONAL DE GASTOS ===== */

.graf{
  height:auto;
  min-height:360px;
  display:block;
  border-bottom:0;
  padding:0;
}

.grafico-gastos-wrap{
  display:grid;
  grid-template-columns:minmax(280px, 420px) 1fr;
  gap:18px;
  align-items:stretch;
}

.grafico-gastos-canvas{
  position:relative;
  height:360px;
  min-height:320px;
  padding:12px;
  border-radius:24px;
  background:var(--glass-soft);
  border:1px solid var(--border);
}

.grafico-gastos-canvas canvas{
  position:relative;
  z-index:2;
}

.grafico-gastos-centro{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:3;
  width:150px;
  height:150px;
  border-radius:999px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--glass-strong);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  pointer-events:none;
}

.grafico-gastos-centro span{
  font-size:.78rem;
  color:var(--muted);
  margin-bottom:4px;
}

.grafico-gastos-centro strong{
  font-size:1.05rem;
  color:var(--text);
}

.grafico-gastos-detalhes{
  min-height:320px;
}

.graf-detalhe-card{
  height:100%;
  padding:16px;
  border-radius:24px;
  background:var(--glass-soft);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}

.graf-detalhe-topo{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.graf-detalhe-topo h3{
  margin-bottom:2px;
}

.graf-detalhe-topo strong{
  font-size:1.15rem;
  color:var(--text);
  white-space:nowrap;
}

.graf-detalhe-lista{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:280px;
  overflow:auto;
  padding-right:4px;
}

.graf-detalhe-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:16px;
  background:var(--row-bg);
  border:1px solid var(--border);
}

.graf-detalhe-item strong{
  display:block;
  color:var(--text);
}

.graf-detalhe-item small{
  display:block;
  color:var(--muted);
  margin-top:3px;
}

.graf-detalhe-item span{
  font-weight:800;
  color:var(--text);
  white-space:nowrap;
}

@media(max-width:820px){
  .grafico-gastos-wrap{
    grid-template-columns:1fr;
  }

  .grafico-gastos-canvas{
    height:330px;
  }

  .grafico-gastos-centro{
    width:130px;
    height:130px;
  }

  .graf-detalhe-lista{
    max-height:none;
  }
}
/* ===== FASE 3 — AUTENTICAÇÃO E PWA ===== */
.auth-card{
  width:min(100%,520px);
  padding:28px !important;
}

.auth-brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
}

.auth-logo{
  width:58px;
  height:58px;
  border-radius:16px;
  box-shadow:0 8px 22px rgba(15,23,42,.16);
}

.auth-brand h1{
  margin:0 0 3px;
  font-size:1.45rem;
}

.auth-brand p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
}

.auth-fields{
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}

.auth-fields label:not(.auth-terms){
  margin-top:5px;
}

.auth-primary,
.auth-secondary{
  width:100%;
  justify-content:center;
  min-height:44px;
  margin-top:6px;
}

.auth-primary{
  background:linear-gradient(135deg,var(--header-2),var(--accent)) !important;
  color:#fff !important;
}

.auth-secondary{
  background:var(--field-bg) !important;
  color:var(--text) !important;
  border:1px solid var(--border-strong) !important;
}

.auth-link-button{
  border:0;
  background:transparent;
  color:var(--accent);
  font-weight:700;
  padding:7px 4px;
  cursor:pointer;
  text-align:center;
}

.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:.82rem;
  margin:15px 0;
}

.auth-divider::before,
.auth-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:var(--border);
}

.auth-terms{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  margin:10px 0 2px;
}

.auth-terms input{
  flex:0 0 auto;
}

.startup-loading{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:20000;
  background:linear-gradient(145deg,#172337,#304a70 58%,#5576a8);
  color:#fff;
}

.startup-loading-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  padding:28px;
}

.startup-logo{
  width:76px;
  height:76px;
  border-radius:22px;
  margin-bottom:6px;
  box-shadow:0 18px 50px rgba(0,0,0,.24);
}

.startup-loading-card strong{
  font-size:1.4rem;
}

.startup-loading-card span{
  color:rgba(255,255,255,.78);
  font-size:.92rem;
}

.startup-spinner{
  width:28px;
  height:28px;
  margin-top:13px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.22);
  border-top-color:#fff;
  animation:cash-spin .8s linear infinite;
}

@keyframes cash-spin{to{transform:rotate(360deg)}}

.config-section{
  margin-top:14px;
  padding:15px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--glass-soft);
}

.config-section h3{
  margin-bottom:10px;
}

.config-account-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.config-account-row > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.config-label{
  color:var(--muted);
  font-size:.82rem;
}

.config-danger-zone{
  border-color:color-mix(in srgb, var(--bad) 30%, var(--border));
}

.sync-badge [data-status="ok"]{
  color:var(--good);
}

@media(max-width:560px){
  .auth-card{padding:20px !important}
  .auth-brand{align-items:flex-start}
  .auth-logo{width:52px;height:52px;border-radius:14px}
  .config-account-row .small{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .startup-spinner{animation-duration:1.4s}
}

/* =========================================================
   FASE 4 — INTERFACE PROFISSIONAL
   Mantém superfícies leves: sem blur em listas e painéis.
   ========================================================= */

:root{
  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --surface-muted:#f1f5f9;
  --navy:#20324a;
  --navy-2:#36577f;
  --blue:#4f75b8;
  --blue-soft:#eaf1fb;
  --green-soft:#ecfdf3;
  --red-soft:#fff1f2;
  --amber-soft:#fff8e7;
  --violet-soft:#f5f3ff;
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
}

[data-tema="escuro"]{
  --surface:#111827;
  --surface-soft:#0f172a;
  --surface-muted:#172033;
  --blue-soft:rgba(79,117,184,.16);
  --green-soft:rgba(34,197,94,.12);
  --red-soft:rgba(239,68,68,.12);
  --amber-soft:rgba(245,158,11,.12);
  --violet-soft:rgba(139,92,246,.12);
}

body{
  padding:24px;
  padding-bottom:112px;
  background:
    radial-gradient(circle at 10% -5%, rgba(79,117,184,.12), transparent 30%),
    radial-gradient(circle at 92% 2%, rgba(139,92,246,.08), transparent 28%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
}

.app-shell{max-width:1180px}

.eyebrow{
  display:block;
  font-size:.69rem;
  letter-spacing:.11em;
  font-weight:900;
  color:var(--accent);
  margin-bottom:5px;
}

/* Cabeçalho */
.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:132px;
  padding:24px 26px;
  text-align:left;
  border-radius:26px;
  box-shadow:0 18px 48px rgba(25,42,70,.18);
}

.brand-lockup{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

.app-logo{
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}

.app-header h1{
  margin:0;
  font-size:clamp(1.55rem,2.6vw,2rem);
  line-height:1.05;
}

.app-header p{
  margin-top:6px;
  font-size:.9rem;
  color:rgba(255,255,255,.76);
}

.header-eyebrow{color:#bfd3f6}

.account-area{
  display:flex;
  align-items:center;
  gap:14px;
  flex:0 0 auto;
}

.account-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  color:#fff;
  font-size:.92rem;
}

.account-meta small{
  color:rgba(255,255,255,.72);
  margin:0;
}

.btn-ghost-light{
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.20) !important;
  box-shadow:none !important;
}

/* Barra de competência */
.month-toolbar{
  display:grid;
  grid-template-columns:minmax(260px,1.3fr) auto auto;
  gap:12px;
  align-items:end;
  margin:16px 0 12px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--surface);
  box-shadow:0 6px 18px rgba(15,23,42,.055);
}

.month-selector-block{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.toolbar-label{
  padding-left:3px;
  color:var(--muted);
  font-size:.74rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.month-toolbar select{width:100%;background:var(--surface-soft)}
.month-primary-actions,.month-secondary-actions{display:flex;gap:8px;align-items:center}
.month-primary-actions button,.month-secondary-actions button{white-space:nowrap;min-height:44px}
.btn-secondary-action{background:var(--surface-soft) !important}

/* Tema */
#tema-btn{
  right:22px;
  top:auto;
  bottom:22px;
  z-index:9998;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 10px 28px rgba(15,23,42,.12);
}

/* Navegação */
.tabs{
  display:grid !important;
  grid-template-columns:repeat(7,1fr);
  gap:5px;
  padding:6px;
  margin:0 0 12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 6px 18px rgba(15,23,42,.055);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.tab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:0;
  padding:10px 8px;
  font-size:.86rem;
  border-radius:12px;
  color:var(--muted);
  font-weight:750;
}

.tab span{
  font-size:1rem;
  font-weight:900;
}

.tab:hover{
  transform:none;
  background:var(--surface-muted);
  color:var(--text);
}

.tab.active{
  background:var(--navy);
  color:#fff;
  box-shadow:0 7px 18px rgba(32,50,74,.18);
}

/* Painéis */
.panel-card{
  padding:22px;
  border-radius:22px;
  background:var(--surface);
  box-shadow:0 6px 18px rgba(15,23,42,.055);
}

.section-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.section-heading h2{
  font-size:1.34rem;
  line-height:1.2;
  margin:0;
}

.section-heading h3{margin:0;font-size:1.08rem}
.section-heading p{margin-top:5px;color:var(--muted);font-size:.9rem}
.section-hint{color:var(--muted);font-size:.78rem;padding-top:16px}
.compact-heading{margin-bottom:12px}

/* Resumo */
.summary-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.metric-card{
  min-height:116px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:17px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface-soft);
}

.metric-card > div:last-child{min-width:0}
.metric-card span{display:block;color:var(--muted);font-size:.82rem;margin-bottom:7px}
.metric-card strong{display:block;font-size:1.18rem;color:var(--text);white-space:nowrap}
.metric-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  font-size:1.15rem;
  font-weight:900;
}
.metric-income{background:var(--green-soft)}
.metric-income .metric-icon{background:rgba(34,197,94,.16);color:#16964a}
.metric-expense{background:var(--red-soft)}
.metric-expense .metric-icon{background:rgba(239,68,68,.13);color:#dc3545}
.metric-card-spend{background:var(--blue-soft)}
.metric-card-spend .metric-icon{background:rgba(79,117,184,.15);color:var(--accent)}
.metric-installments{background:var(--violet-soft)}
.metric-installments .metric-icon{background:rgba(139,92,246,.14);color:#7c3aed}

.balance-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin:14px 0;
  padding:20px 22px;
  text-align:left;
  background:linear-gradient(120deg,#243447,#3f638f 62%,#5d7eb1);
  box-shadow:0 12px 30px rgba(36,52,71,.18);
}

.balance-copy span{display:block;font-weight:800;font-size:1rem}
.balance-copy small{display:block;color:rgba(255,255,255,.72);margin-top:5px}
.balance-card .valor{font-size:clamp(1.6rem,3vw,2.2rem);color:#fff !important;white-space:nowrap}

.insight-card{
  padding:18px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface-soft);
}

/* Formulários */
.entry-form{
  display:grid;
  grid-template-columns:minmax(260px,1.5fr) minmax(150px,.7fr) auto;
  gap:10px;
  margin-bottom:16px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--surface-soft);
}

.entry-form-expense{grid-template-columns:minmax(240px,1.3fr) minmax(120px,.55fr) minmax(180px,.75fr) auto}
.entry-form-card{grid-template-columns:minmax(220px,1fr) minmax(170px,220px) minmax(120px,150px) auto}
.installment-form{grid-template-columns:1.2fr .7fr .55fr .7fr 1.2fr auto}
.entry-form input,.entry-form select{width:100%;background:var(--surface)}
.btn-primary-action{
  background:linear-gradient(135deg,var(--navy-2),var(--blue)) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
.btn-primary-action:hover{background:linear-gradient(135deg,#2d4b70,#426ca5) !important}

/* Tabelas */
.table-wrap{width:100%;overflow-x:auto;border-radius:16px}
.table{margin-top:0;border-spacing:0 7px}
.table th{padding:9px 11px;text-transform:uppercase;letter-spacing:.045em;font-size:.72rem}
.table td{padding:11px;background:var(--surface-soft)}
.table tbody tr:hover td{background:var(--surface-muted)}

/* Cartões de crédito dinâmicos */
.cards-list{display:flex;flex-direction:column;gap:12px}
#lista-cartoes > .card{
  margin:0 !important;
  padding:18px;
  border-radius:18px;
  background:var(--surface-soft);
  box-shadow:none;
}
#lista-cartoes > .card > h3{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
  font-size:1rem;
}
#lista-cartoes .form-row{
  display:grid;
  grid-template-columns:1.2fr .65fr auto;
  padding:10px;
  margin-bottom:12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:15px;
}
#lista-cartoes .form-row input{width:100%}
.cash-list-item{background:var(--surface);border-radius:14px}

/* Config */
.policy-link{margin:-7px 0 14px}
.config-section{
  padding:17px;
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:17px;
  background:var(--surface-soft);
}
.config-section-title{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.config-section-title h3{font-size:1rem;margin:0}
.config-icon{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:var(--blue-soft);color:var(--accent);font-weight:900;
}
.config-account-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.config-account-row > div{display:flex;flex-direction:column;gap:5px}
.config-label{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.config-actions,.danger-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sync-area{margin-left:auto}
.config-danger-zone{border-color:rgba(239,68,68,.25);background:var(--red-soft)}

/* Login */
.auth-card{
  margin:48px auto !important;
  max-width:540px !important;
  background:var(--surface) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 24px 60px rgba(15,23,42,.14) !important;
}
.auth-brand{padding-bottom:18px;border-bottom:1px solid var(--border)}
.auth-heading{margin-bottom:15px}
.auth-heading h2{margin:0 0 5px;text-align:left !important}
.auth-heading p{color:var(--muted);font-size:.9rem}
.auth-logo{border-radius:18px}

.access-card{
  max-width:600px !important;
  margin:60px auto !important;
  padding:32px !important;
  text-align:center;
  background:var(--surface) !important;
  backdrop-filter:none !important;
}
.access-card h2{margin:4px 0 10px}
.access-card > p{max-width:490px;margin:0 auto 12px;line-height:1.55;color:var(--muted)}
.access-icon{font-size:2rem;margin-bottom:8px}
.whatsapp-activation{
  display:inline-flex;align-items:center;justify-content:center;margin:10px 0 16px;padding:12px 16px;
  background:#25D366;color:#fff;border-radius:13px;text-decoration:none;font-weight:800;
}

/* Cash */
.cash-modal{max-width:560px !important;padding:0 !important;overflow:hidden !important;background:var(--surface) !important}
.cash-header{display:flex;gap:12px;align-items:center;padding:18px;border-bottom:1px solid var(--border)}
.cash-header h3{margin:0;font-size:1.25rem}
.cash-header p{margin-top:3px;color:var(--muted);font-size:.84rem}
.cash-avatar{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--navy);color:#fff;font-size:1.2rem}
#cash-chat{margin:0 !important;padding:16px !important;min-height:250px;max-height:430px !important;border:0 !important;border-radius:0 !important;background:var(--surface-soft) !important}
.cash-composer{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px;border-top:1px solid var(--border);background:var(--surface)}
.cash-composer input{width:100%}
.cash-footer{display:flex;justify-content:flex-end;padding:0 12px 12px;background:var(--surface)}

/* Modais */
.modal{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

/* FAB */
.fab-container{display:flex}
.fab{width:56px;height:56px;font-size:24px;background:var(--navy);box-shadow:0 14px 30px rgba(32,50,74,.24)}
.fab-options button{background:var(--surface);box-shadow:0 8px 20px rgba(15,23,42,.10)}
#btn-cash{background:linear-gradient(135deg,#243447,#4f75b8)}

/* Responsividade */
@media(max-width:1020px){
  .summary-grid{grid-template-columns:repeat(2,1fr)}
  .month-toolbar{grid-template-columns:1fr auto}
  .month-secondary-actions{grid-column:1 / -1}
  .month-secondary-actions button{flex:1}
  .installment-form{grid-template-columns:repeat(3,1fr)}
  .installment-form button{grid-column:span 3}
  .tabs{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:720px){
  body{padding:10px;padding-bottom:112px}
  #tema-btn{right:12px;bottom:82px;padding:9px 11px}
  .app-header{min-height:auto;padding:17px;border-radius:20px;align-items:flex-start}
  .app-logo{width:48px;height:48px;flex-basis:48px;border-radius:15px}
  .app-header p,.header-eyebrow{display:none}
  .account-area{flex-direction:column;align-items:flex-end;gap:8px}
  .account-meta{font-size:.8rem;gap:2px}
  .account-meta small{font-size:.72rem}
  .btn-ghost-light{padding:7px 10px}
  .month-toolbar{grid-template-columns:1fr;padding:10px;gap:9px}
  .month-primary-actions,.month-secondary-actions{width:100%;grid-column:auto}
  .month-primary-actions button,.month-secondary-actions button{flex:1;min-width:0;font-size:.82rem;padding:10px 8px}
  .panel-card{padding:14px;border-radius:18px}
  .section-heading{margin-bottom:14px}
  .section-hint{display:none}
  .summary-grid{grid-template-columns:1fr 1fr;gap:8px}
  .metric-card{min-height:96px;padding:12px;gap:9px;align-items:flex-start;flex-direction:column}
  .metric-icon{width:32px;height:32px;flex-basis:32px;border-radius:10px;font-size:.9rem}
  .metric-card strong{font-size:1rem}
  .metric-card span{font-size:.72rem;margin-bottom:4px}
  .balance-card{padding:16px;align-items:flex-end}
  .balance-copy small{display:none}
  .balance-card .valor{font-size:1.4rem}
  .entry-form,.entry-form-card,.installment-form,#lista-cartoes .form-row{display:flex;flex-direction:column;grid-template-columns:none;padding:10px}
  .entry-form button,.installment-form button{width:100%;grid-column:auto}
  .config-account-row{align-items:flex-start;flex-direction:column}
  .config-account-row button{width:100%}
  .danger-actions .sync-area{width:100%;margin-left:0;margin-top:4px}
  .cash-composer{grid-template-columns:1fr}
  .cash-composer button{width:100%}

  .tabs{
    grid-template-columns:none !important;
    display:flex !important;
    gap:4px;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    margin:0;
    padding:7px 7px 10px;
    border-radius:16px 16px 0 0;
    background:rgba(32,50,74,.97);
    border-color:rgba(255,255,255,.08);
    box-shadow:0 -8px 24px rgba(0,0,0,.20);
    overflow-x:auto;
    white-space:nowrap;
    flex-wrap:nowrap;
    z-index:9999;
  }
  .tab{flex:0 0 auto;color:rgba(255,255,255,.78);font-size:.75rem;padding:9px 11px;border-radius:10px}
  .tab.active{background:#fff;color:var(--navy);box-shadow:none}
  .tab:hover{background:rgba(255,255,255,.10);color:#fff}
  .tab.active:hover{background:#fff;color:var(--navy)}
  .fab{bottom:78px;right:14px}
  .fab-container{bottom:142px;right:14px}
}

@media(max-width:430px){
  .brand-lockup{gap:10px}
  .app-header h1{font-size:1.28rem}
  .app-logo{width:42px;height:42px;flex-basis:42px}
  .account-meta span{max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .summary-grid{grid-template-columns:1fr 1fr}
  .metric-card{min-height:100px}
  .balance-card{flex-direction:column;align-items:flex-start;gap:8px}
  .balance-card .valor{align-self:flex-end}
}
/* Ajuste de posição: tema fica fora da área do FAB. */
#tema-btn{top:18px;right:18px;bottom:auto;left:auto}
@media(max-width:720px){#tema-btn{top:auto;right:auto;bottom:78px;left:12px}}


/* ===== FASE 5 — LOGO + CASH FLUTUANTE ===== */
.auth-logo,
.app-logo{
  object-fit:cover;
  background:#fff;
}

.cash-fab-container{
  position:fixed;
  z-index:3600;
  left:auto;
  top:auto;
  display:none;
}

.cash-fab-button{
  min-width:74px;
  height:74px;
  border:none;
  border-radius:999px;
  padding:0 18px 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg,#1f3550 0%, #32558a 55%, #4f7ad1 100%);
  color:#fff;
  box-shadow:0 20px 45px rgba(31,53,80,.32), 0 8px 18px rgba(31,53,80,.18);
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.cash-fab-button:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 22px 48px rgba(31,53,80,.35), 0 10px 20px rgba(31,53,80,.2);
}

.cash-fab-button:active{
  cursor:grabbing;
  transform:scale(.985);
}

.cash-fab-container.dragging .cash-fab-button{
  cursor:grabbing;
  box-shadow:0 26px 52px rgba(31,53,80,.32), 0 10px 20px rgba(31,53,80,.18);
}

.cash-fab-badge{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  font-size:1.25rem;
  font-weight:700;
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}

.cash-fab-text{
  font-size:1rem;
  font-weight:800;
  letter-spacing:.02em;
}

body.cash-dragging,
body.cash-dragging *{
  cursor:grabbing !important;
  user-select:none !important;
}

@media (max-width: 720px){
  .cash-fab-button{
    min-width:64px;
    height:64px;
    padding:0 14px 0 10px;
    gap:8px;
  }
  .cash-fab-badge{
    width:38px;
    height:38px;
    flex-basis:38px;
    font-size:1.08rem;
  }
  .cash-fab-text{
    font-size:.94rem;
  }
}


/* ===== FASE 6 — PAINEL ADMINISTRATIVO ===== */
.admin-tab{border-color:rgba(79,117,184,.18)}
.admin-tab.active{background:linear-gradient(135deg,#243447,#4f75b8);color:#fff}
.admin-heading{align-items:flex-start}
.admin-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}
.admin-stat-card{border:1px solid var(--border);background:var(--surface-soft);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px}
.admin-stat-card span{color:var(--muted);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.admin-stat-card strong{font-size:1.7rem;line-height:1;color:var(--text)}
.admin-stat-active{border-color:rgba(25,135,84,.2)}
.admin-stat-expired{border-color:rgba(245,158,11,.26)}
.admin-stat-blocked{border-color:rgba(220,53,69,.22)}
.admin-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:12px;align-items:end;margin:18px 0}
.admin-search-wrap,.admin-filter-wrap{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:700;color:var(--muted)}
.admin-search-wrap input,.admin-filter-wrap select{width:100%}
.admin-users-list{display:flex;flex-direction:column;gap:12px}
.admin-user-card{border:1px solid var(--border);background:var(--surface);border-radius:18px;padding:16px;display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(150px,.7fr) minmax(160px,.7fr) auto;gap:14px;align-items:center}
.admin-user-main{min-width:0}
.admin-user-name{font-weight:800;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-user-email{color:var(--muted);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.admin-user-meta{color:var(--muted);font-size:.78rem;margin-top:5px}
.admin-status{display:inline-flex;align-items:center;gap:6px;width:max-content;border-radius:999px;padding:7px 10px;font-size:.78rem;font-weight:800}
.admin-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.admin-status.active{background:rgba(25,135,84,.10);color:#198754}
.admin-status.expired{background:rgba(245,158,11,.12);color:#a86600}
.admin-status.blocked{background:rgba(220,53,69,.10);color:#c23647}
.admin-status.admin{background:rgba(79,117,184,.12);color:#315d9d}
.admin-expiry{display:flex;flex-direction:column;gap:5px}
.admin-expiry label{font-size:.75rem;font-weight:700;color:var(--muted)}
.admin-expiry input{min-width:145px}
.admin-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
.admin-actions button{white-space:nowrap}
.admin-empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:16px;background:var(--surface-soft)}
.admin-last-login{font-size:.76rem;color:var(--muted);margin-top:6px}
.admin-owner-tag{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;background:rgba(79,117,184,.12);color:#315d9d;font-size:.68rem;font-weight:800;vertical-align:middle}

@media (max-width: 940px){
  .admin-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-user-card{grid-template-columns:1fr 1fr}
  .admin-actions{justify-content:flex-start;grid-column:1/-1}
}

@media (max-width: 620px){
  .admin-summary-grid{grid-template-columns:1fr 1fr}
  .admin-toolbar{grid-template-columns:1fr}
  .admin-user-card{grid-template-columns:1fr;gap:10px}
  .admin-actions{grid-column:auto}
  .admin-actions button{flex:1 1 auto}
}

/* ===== FASE 7 — PERFIL E NAVEGAÇÃO LIMPA ===== */
.month-toolbar{
  grid-template-columns:minmax(260px,1fr) auto;
}

.tabs{
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
}

.header-avatar{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);
  color:#fff;
  font-weight:900;
  letter-spacing:.03em;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
}

.header-avatar img,
.profile-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

#header-avatar-fallback,
#profile-avatar-fallback{
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
}

.profile-panel{
  display:block;
}

.profile-hero{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:24px;
  align-items:center;
  padding:20px;
  margin-bottom:14px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--surface-soft);
}

.profile-avatar-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
}

.profile-avatar{
  width:112px;
  height:112px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--navy),#557fc6);
  color:#fff;
  font-size:2rem;
  font-weight:900;
  border:4px solid var(--surface);
  box-shadow:0 12px 28px rgba(32,50,74,.20);
}

.profile-main-fields{
  min-width:0;
}

.profile-main-fields label,
.profile-main-fields .config-label{
  display:block;
  margin-bottom:6px;
}

.profile-main-fields strong{
  display:block;
  overflow-wrap:anywhere;
}

.profile-name-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  margin-bottom:14px;
}

.profile-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.profile-history-section{
  margin-top:14px;
}

.profile-theme-button#tema-btn{
  position:static !important;
  inset:auto !important;
  z-index:auto !important;
  display:inline-flex;
  width:auto;
  box-shadow:none;
  background:var(--surface-soft);
}

.profile-panel #btn-whatsapp,
.profile-panel #btn-export-pdf{
  background:var(--surface-soft);
}

@media(max-width:760px){
  .month-toolbar{
    grid-template-columns:1fr;
  }
  .month-primary-actions{
    width:100%;
  }
  .month-primary-actions button{
    flex:1;
  }
  .profile-hero{
    grid-template-columns:1fr;
    text-align:center;
  }
  .profile-main-fields{
    text-align:left;
    width:100%;
  }
  .profile-grid{
    grid-template-columns:1fr;
  }
  .profile-name-row{
    grid-template-columns:1fr;
  }
  .header-avatar{
    width:38px;
    height:38px;
    flex-basis:38px;
  }
}

@media(max-width:560px){
  .account-area{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    width:100%;
  }
  .account-meta{
    align-items:flex-start;
  }
}


/* ===== FASE 8 — COMPLIANCE / TERMOS ===== */
.terms-update-card{max-width:620px !important;padding:28px !important}
.terms-update-card h3{margin:6px 0 10px;font-size:1.45rem}
.terms-update-card p{color:var(--muted);line-height:1.55}
.terms-update-summary{margin:18px 0;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--surface-soft)}
.terms-update-summary ul{margin:8px 0 0;padding-left:20px}
.terms-open-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 14px;border-radius:12px;border:1px solid var(--border);font-weight:700;text-decoration:none;margin-bottom:14px}
.terms-accept-check{display:flex;gap:10px;align-items:flex-start;padding:14px 0;font-weight:600;line-height:1.4}
.terms-accept-check input{width:18px;height:18px;margin-top:2px;flex:0 0 18px}
.terms-update-card #btn-accept-updated-terms{width:100%;min-height:44px}
.legal-card{padding:clamp(20px,4vw,38px) !important}
.legal-card h1{font-size:clamp(1.7rem,4vw,2.35rem);line-height:1.12;margin:8px 0 12px}
.legal-card h2{margin-top:28px;font-size:1.18rem}
.legal-card p,.legal-card li{line-height:1.65}
.legal-card ul{padding-left:22px}
.legal-highlight{padding:16px 18px;margin:20px 0;border:1px solid var(--border);border-radius:16px;background:var(--surface-soft)}
.legal-warning{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.08)}

.admin-terms-status{margin-top:4px;font-size:.78rem;color:var(--muted)}


/* ===== FASE 8.1 — ROLAGEM DO CASH ===== */
body.cash-modal-open{
  overflow:hidden !important;
}

#cash-panel{
  overscroll-behavior:contain;
}

#cash-panel .cash-modal{
  width:min(560px, 100%) !important;
  height:min(760px, calc(100dvh - 32px));
  max-height:calc(100dvh - 32px) !important;
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) auto auto;
  overflow:hidden !important;
}

#cash-chat{
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  display:flex;
  flex-direction:column;
  gap:8px;
  scrollbar-gutter:stable;
}

#cash-chat::-webkit-scrollbar{
  width:10px;
}

#cash-chat::-webkit-scrollbar-thumb{
  background:rgba(71,85,105,.30);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}

#cash-chat::-webkit-scrollbar-track{
  background:transparent;
}

@media (max-width: 640px){
  #cash-panel{
    padding:8px;
    align-items:stretch;
  }
  #cash-panel .cash-modal{
    height:calc(100dvh - 16px);
    max-height:calc(100dvh - 16px) !important;
    border-radius:18px;
  }
}


/* ===== FASE 9 — AUDITORIA ADMIN ===== */
.admin-audit-section{
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid var(--border);
}
.admin-audit-list{display:grid;gap:8px}
.admin-audit-item{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface-soft);
}
.admin-audit-item>div{display:grid;gap:3px}
.admin-audit-item strong{font-size:.92rem}
.admin-audit-item span,.admin-audit-item small{color:var(--muted);font-size:.8rem}
@media(max-width:720px){
  .admin-audit-item{align-items:flex-start;flex-direction:column;gap:6px}
}


/* Fase 9.9 — faturas de cartão */
.invoice-box{margin:12px 0;padding:14px 16px;border:1px solid #dbe4f0;border-radius:14px;background:#f8fbff}
.invoice-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.invoice-sub{margin-top:4px;color:#64748b;font-size:13px}
.invoice-note{margin-top:10px;padding:9px 11px;border-radius:10px;background:#fff;border:1px solid #e5e7eb;color:#475569;font-size:13px}
.invoice-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.invoice-open{border-style:dashed}
.invoice-future{background:#f8fafc;border-color:#cbd5e1;border-style:dashed}
.invoice-awaiting-close{background:#fff7ed;border-color:#fdba74;border-style:solid}
.invoice-reopened{background:#fefce8;border-color:#fde047;border-style:solid}
.invoice-routing-hint{margin:-2px 0 12px;padding:8px 10px;border-radius:9px;background:#f8fafc;border:1px solid #e2e8f0;color:#475569;font-size:12px}
.invoice-paid{background:#f0fdf4;border-color:#bbf7d0}
.invoice-closed{background:#eff6ff;border-color:#bfdbfe}
.invoice-financed{background:#fff7ed;border-color:#fed7aa}
.invoice-reminder{margin:10px 0;padding:12px 14px;border-radius:12px;background:#fff7ed;border:1px solid #fdba74;color:#9a3412;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.invoice-detail{display:block;margin-top:4px;color:#64748b}

.invoice-card-settings{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 4px;color:#64748b;font-size:13px}
.invoice-card-settings strong{color:#334155}

/* ===== FASE 9.30 — ACABAMENTO MOBILE ===== */
/*
   1) Cabeçalho reorganizado para telas estreitas.
   2) FAB Cash preserva o gradiente durante toque/arraste no iOS.
   3) Listas de Despesas, Receitas e Parcelamentos viram cards no celular,
      eliminando rolagem horizontal para consultar os dados.
*/

.cash-fab-button,
.cash-fab-button:hover,
.cash-fab-button:active,
.cash-fab-button:focus{
  background:linear-gradient(135deg,#1f3550 0%, #32558a 55%, #4f7ad1 100%) !important;
  -webkit-tap-highlight-color:transparent;
  -webkit-appearance:none;
  appearance:none;
}

.cash-fab-container.dragging .cash-fab-button{
  background:linear-gradient(135deg,#1f3550 0%, #32558a 55%, #4f7ad1 100%) !important;
  transition:none !important;
  transform:none !important;
  opacity:1 !important;
}

@media (hover:none), (pointer:coarse){
  .cash-fab-button:hover{
    background:linear-gradient(135deg,#1f3550 0%, #32558a 55%, #4f7ad1 100%) !important;
    transform:none;
    box-shadow:0 20px 45px rgba(31,53,80,.32), 0 8px 18px rgba(31,53,80,.18);
  }
  .cash-fab-button:active{
    background:linear-gradient(135deg,#1f3550 0%, #32558a 55%, #4f7ad1 100%) !important;
    transform:scale(.985);
  }
}

@media(max-width:560px){
  .app-header{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    padding:15px 16px;
    align-items:stretch;
  }

  .brand-lockup{
    width:100%;
    min-width:0;
    gap:12px;
  }

  .brand-lockup > div{
    min-width:0;
  }

  .app-logo{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:14px;
  }

  .app-header h1{
    font-size:1.45rem;
    line-height:1.08;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .account-area{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    width:100%;
    gap:10px;
    align-items:center;
    padding-top:11px;
    border-top:1px solid rgba(255,255,255,.14);
  }

  .header-avatar{
    display:none !important;
  }

  .account-meta{
    min-width:0;
    align-items:flex-start;
    gap:2px;
    font-size:.78rem;
  }

  .account-meta span,
  .account-meta small{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .account-meta small{font-size:.69rem}
  .btn-ghost-light{min-height:38px;padding:7px 11px;font-size:.82rem}
}

@media(max-width:720px){
  /* As três tabelas operacionais deixam de ser tabelas largas no celular. */
  #despesas .table-wrap,
  #receitas .table-wrap,
  #parcelamentos .table-wrap{
    overflow:visible;
    border-radius:0;
  }

  #tabela-despesas,
  #tabela-receitas,
  #tabela-parcelamentos{
    display:block;
    width:100%;
    overflow:visible;
    border-collapse:separate;
    border-spacing:0;
  }

  #tabela-despesas thead,
  #tabela-receitas thead,
  #tabela-parcelamentos thead{
    display:none;
  }

  #tabela-despesas tbody,
  #tabela-receitas tbody,
  #tabela-parcelamentos tbody{
    display:grid;
    gap:10px;
    width:100%;
  }

  #tabela-despesas tr,
  #tabela-receitas tr,
  #tabela-parcelamentos tr{
    display:block;
    width:100%;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--surface-soft);
    box-shadow:0 4px 12px rgba(15,23,42,.045);
  }

  #tabela-despesas td,
  #tabela-receitas td,
  #tabela-parcelamentos td{
    display:flex;
    width:100%;
    min-width:0 !important;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:10px 12px;
    border:0;
    border-bottom:1px solid var(--border);
    background:transparent !important;
    text-align:right;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  #tabela-despesas td:last-child,
  #tabela-receitas td:last-child,
  #tabela-parcelamentos td:last-child{
    border-bottom:0;
  }

  #tabela-despesas td::before,
  #tabela-receitas td::before,
  #tabela-parcelamentos td::before{
    content:attr(data-label);
    flex:0 0 86px;
    text-align:left;
    color:var(--muted);
    font-size:.69rem;
    line-height:1.35;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.045em;
  }

  #tabela-despesas td[data-label="Descrição"],
  #tabela-receitas td[data-label="Descrição"],
  #tabela-parcelamentos td[data-label="Descrição"]{
    display:block;
    text-align:left;
    font-size:1rem;
    font-weight:750;
    padding-top:12px;
    padding-bottom:12px;
  }

  #tabela-despesas td[data-label="Descrição"]::before,
  #tabela-receitas td[data-label="Descrição"]::before,
  #tabela-parcelamentos td[data-label="Descrição"]::before{
    display:block;
    margin-bottom:5px;
  }

  #tabela-despesas td[data-label="Ações"],
  #tabela-receitas td[data-label="Ações"],
  #tabela-parcelamentos td[data-label="Ações"]{
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:7px;
  }

  #tabela-despesas td[data-label="Ações"]::before,
  #tabela-receitas td[data-label="Ações"]::before,
  #tabela-parcelamentos td[data-label="Ações"]::before{
    margin-right:auto;
  }

  #tabela-despesas td[data-label="Ações"] button,
  #tabela-receitas td[data-label="Ações"] button,
  #tabela-parcelamentos td[data-label="Ações"] button{
    margin:0;
    max-width:100%;
  }

  #tabela-parcelamentos td[data-label="Ações"] .badge{
    max-width:calc(100% - 96px);
    white-space:normal;
    text-align:right;
  }

  .contenteditable{
    overflow-wrap:anywhere;
  }
}