/* =====================================================================
   AURORA · folha de estilo
   ===================================================================== */

/* ----------------------------- VARIÁVEIS ----------------------------- */
:root {
  --bg:#0a0710; --bg-2:#0d0a14;
  --surface:rgba(255,255,255,0.045); --surface-2:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.14);
  --text:#f4f3f7; --text-dim:#a7a3b4; --text-faint:#6f6b7e;
  --green:#34e08a; --cyan:#38c8ff; --primary:#c04dff; --danger:#ff6b8a;
  --panel:#16121f;
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --radius:22px; --radius-sm:14px; --shadow:0 24px 60px -28px rgba(0,0,0,0.7);
  --glow-opacity:0.3; --glow-blur:80px;
}

/* ----------------------------- BASE ----------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html,body { height:100%; }
[hidden] { display:none !important; }   /* garante que o atributo hidden funcione */
body {
  margin:0; font-family:var(--font-body); color:var(--text); background:var(--bg);
  background-image:radial-gradient(120% 80% at 50% -10%,var(--bg-2),var(--bg) 60%);
  min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button { font-family:inherit; }
::selection { background:rgba(192,77,255,0.4); }
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

/* ----------------------------- AURORA (glow) ----------------------------- */
.aurora { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.aurora__blob { position:absolute; border-radius:50%; filter:blur(var(--glow-blur)); opacity:var(--glow-opacity); }
.aurora__blob--pink { width:46vw; height:46vw; top:-14vw; left:-8vw; background:radial-gradient(circle,#ff2d78,transparent 68%); }
.aurora__blob--teal { width:50vw; height:50vw; top:18vh; left:38vw; background:radial-gradient(circle,#1fd6b0,transparent 68%); opacity:calc(var(--glow-opacity)*0.8); }
.aurora__blob--blue { width:48vw; height:48vw; bottom:-18vw; right:-10vw; background:radial-gradient(circle,#2f6bff,transparent 68%); }

/* ----------------------------- MARCA ----------------------------- */
.brand { display:flex; align-items:center; gap:12px; }
.brand__dot { width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#8a7bff,#ff5fa2); box-shadow:0 0 18px -2px rgba(138,123,255,0.6); }
.brand__name { font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-0.01em; }

/* ----------------------------- BOTÕES ----------------------------- */
.btn { border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text); padding:11px 18px; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer; transition:transform .12s ease,background .2s ease,border-color .2s ease; }
.btn:hover { background:rgba(255,255,255,0.1); }
.btn:active { transform:scale(.98); }
.btn[disabled] { opacity:.5; cursor:default; }
.btn--primary { background:linear-gradient(135deg,#c04dff,#7b5cff); border-color:transparent; color:#fff; }
.btn--primary:hover { filter:brightness(1.08); background:linear-gradient(135deg,#c04dff,#7b5cff); }
.btn--danger { background:linear-gradient(135deg,#ff5f6d,#ff2d78); border-color:transparent; color:#fff; }
.btn--danger:hover { filter:brightness(1.08); background:linear-gradient(135deg,#ff5f6d,#ff2d78); }
.btn--block { width:100%; padding:14px; font-size:15px; }
.btn--small { padding:8px 14px; font-size:13px; border-radius:10px; }
.link { background:none; border:none; padding:0; color:var(--primary); font-weight:600; font-size:14px; cursor:pointer; }
.link:hover { text-decoration:underline; }

.iconbtn { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text-dim); cursor:pointer; transition:background .2s ease,color .2s ease; }
.iconbtn:hover { background:var(--surface-2); color:var(--text); }

/* botões de linha (editar / remover) nas listas */
.rowbtn { border:none; background:none; color:var(--text-faint); cursor:pointer; padding:7px; border-radius:9px; line-height:0; opacity:.55; transition:opacity .15s ease,color .15s ease,background .15s ease; flex:none; }
.rowbtn:hover { opacity:1; background:var(--surface-2); }
.rowbtn--edit:hover { color:var(--cyan); }
.rowbtn--del:hover { color:var(--danger); }

/* ----------------------------- CARTÕES ----------------------------- */
.card { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); backdrop-filter:blur(8px); }
.card__label { font-size:13px; color:var(--text-dim); letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.card__hint { font-size:13px; color:var(--text-faint); }
.card__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.card__action { margin-top:4px; align-self:flex-start; }

.stat { display:block; font-family:var(--font-display); font-weight:700; font-size:44px; line-height:1.05; letter-spacing:-0.02em; margin:6px 0 4px; }
.stat--green { color:var(--green); }
.stat--cyan { color:var(--cyan); }

/* ----------------------------- CAMPOS ----------------------------- */
.field { display:block; margin-bottom:16px; }
.field__label { display:block; font-size:13px; color:var(--text-dim); margin-bottom:7px; }
.field__hint { font-size:12px; color:var(--text-faint); margin:-8px 0 14px; }
.field__input, .field select, .row-date, .row-amount, .row-kind {
  width:100%; min-width:0; padding:12px 14px; border-radius:12px; border:1px solid var(--border-strong);
  background:rgba(0,0,0,0.25); color:var(--text); font-size:15px; font-family:inherit;
}
/* iOS: o input de data tem largura mínima nativa; isto deixa o navegador encolher */
.row-date { -webkit-appearance:none; appearance:none; color-scheme:dark; }
.field__input:focus, .field select:focus, .row-date:focus, .row-amount:focus, .row-kind:focus {
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(192,77,255,0.22);
}
.field__row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* contraste do dropdown: força fundo escuro e texto claro nas opções */
select { -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a7a3b4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
select option, select optgroup { background-color:var(--panel); color:var(--text); }

/* rótulo com checkbox */
.check { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text); margin-bottom:8px; cursor:pointer; }
.check input { width:18px; height:18px; accent-color:var(--primary); }

/* cabeçalho de seção dentro do modal (Lançamentos / Aportes) */
.rowhead { display:flex; align-items:center; justify-content:space-between; }

/* linha de lançamento / movimentação */
.modal-row { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto; gap:8px; margin-bottom:8px; align-items:center; }
.modal-row .row-kind { grid-column:auto; }
.modal-row:has(.row-kind) { grid-template-columns:minmax(0,auto) minmax(0,1.2fr) minmax(0,1fr) auto; }
.row-del { border:none; background:var(--surface-2); color:var(--text-faint); width:38px; height:42px; border-radius:10px; cursor:pointer; line-height:0; display:grid; place-items:center; }
.row-del:hover { color:var(--danger); }

/* ----------------------------- LOGIN ----------------------------- */
.auth { position:relative; z-index:1; min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth__card { width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); backdrop-filter:blur(10px); }
.auth__card .brand { margin-bottom:28px; }
.auth__title { font-family:var(--font-display); font-size:30px; font-weight:700; margin:0 0 6px; letter-spacing:-0.02em; }
.auth__subtitle { color:var(--text-dim); margin:0 0 26px; font-size:15px; }
.auth__error { color:var(--danger); font-size:14px; min-height:18px; margin:2px 0 12px; }
.auth__switch { margin-top:20px; text-align:center; color:var(--text-dim); font-size:14px; }
.auth__switch .link { margin-left:6px; }
.auth__divider { display:flex; align-items:center; gap:12px; margin:20px 0 16px; color:var(--text-faint); font-size:13px; }
.auth__divider::before, .auth__divider::after { content:""; flex:1; height:1px; background:var(--border-strong); }
.auth__google { display:flex; justify-content:center; width:100%; max-width:100%; min-height:44px; color-scheme:light; overflow:hidden; }
.auth__google > div { max-width:100%; }

/* ----------------------------- APP ----------------------------- */
.app { position:relative; z-index:1; max-width:1320px; margin:0 auto;
  padding:28px max(28px,env(safe-area-inset-right)) 60px max(28px,env(safe-area-inset-left)); }
.topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin-bottom:22px; }
.monthnav { display:flex; align-items:center; justify-content:center; gap:18px; }
.monthnav__label { font-family:var(--font-display); font-weight:600; font-size:19px; min-width:150px; text-align:center; }

.avatar { justify-self:end; position:relative; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff; background:linear-gradient(135deg,#7b5cff,#c04dff); cursor:pointer; user-select:none; }
.menu { position:absolute; top:56px; right:0; width:230px; background:var(--panel); border:1px solid var(--border-strong); border-radius:14px; padding:8px; box-shadow:var(--shadow); z-index:30; }
.menu__name { display:block; padding:8px 12px; font-weight:600; color:var(--text-dim); font-size:13px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.menu__item { display:block; width:100%; text-align:left; background:none; border:none; color:var(--text); padding:10px 12px; border-radius:9px; font-size:14px; cursor:pointer; text-decoration:none; }
.menu__item:hover { background:var(--surface-2); }
.menu__item--danger { color:var(--danger); }
.auth__legal { margin-top:18px; text-align:center; font-size:13px; }
.auth__legal a { color:var(--text-faint); text-decoration:none; }
.auth__legal a:hover { color:var(--text-dim); text-decoration:underline; }

.exportlist { display:flex; flex-direction:column; gap:10px; margin:14px 0 4px; }
.morebtn { display:inline-block; margin-top:8px; font-size:13px; }
.morewrap { display:contents; }
#pending-fixas:not(:empty) { margin-bottom:16px; }
.card--fixas { border-color:rgba(192,77,255,0.35); }

/* ----------------------- status de salvamento ----------------------- */.savestatus {
  position:fixed; left:50%; bottom:max(20px,env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(8px);
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--border-strong); border-radius:999px;
  padding:9px 16px; font-size:14px; color:var(--text); box-shadow:var(--shadow);
  z-index:60; pointer-events:none; opacity:0; transition:opacity .25s ease, transform .25s ease;
}
.savestatus.is-visible { opacity:1; transform:translateX(-50%) translateY(0); }
.savestatus--saved { color:var(--green); }
.savestatus--error { color:var(--danger); border-color:rgba(255,107,138,0.5); }
.savestatus__icon { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; font-weight:700; }
.savestatus__icon.savestatus__spin { border:2px solid var(--border-strong); border-top-color:var(--primary); border-radius:50%; animation:savespin .7s linear infinite; }
@keyframes savespin { to { transform:rotate(360deg); } }
.savestatus__retry {
  pointer-events:auto; cursor:pointer; background:var(--danger); color:#1a0710;
  border:none; border-radius:999px; padding:5px 12px; font-size:13px; font-weight:600; font-family:inherit;
}

.tabs { display:flex; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:5px; margin-bottom:22px; width:fit-content; }
.tab { border:none; background:none; color:var(--text-dim); padding:9px 18px; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s ease,color .2s ease; }
.tab:hover { color:var(--text); }
.tab.is-active { background:var(--surface-2); color:var(--text); }

.view { display:none; animation:fade .25s ease; }
.view.is-active { display:block; }
.view--history.is-active { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
@keyframes fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.overview-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:20px; }
.overview-side { display:flex; flex-direction:column; gap:20px; }
.stat-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.card--spending { display:flex; flex-direction:column; align-items:center; gap:22px; }
.card--activity { display:flex; flex-direction:column; }
.inv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:20px; }
.inv-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:20px; }

/* controles do histórico */
.histnav { display:flex; align-items:center; gap:10px; }
.histnav__input { padding:9px 12px; border-radius:10px; border:1px solid var(--border-strong); background:rgba(0,0,0,0.25); color:var(--text); font-family:inherit; font-size:14px; color-scheme:dark; }
.histnav__input:focus { outline:none; border-color:var(--primary); }
.histnav .iconbtn { width:36px; height:36px; }

/* ----------------------------- GRÁFICOS / LISTAS ----------------------------- */
.donut { position:relative; width:clamp(200px,70vw,280px); height:clamp(200px,70vw,280px); margin-inline:auto; }
.donut svg { width:100%; height:100%; transform:rotate(-90deg); }
.donut__center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.donut__caption { font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.donut__value { font-family:var(--font-display); font-weight:700; font-size:40px; line-height:1; letter-spacing:-0.02em; margin:6px 0 4px; white-space:nowrap; }
.donut__sub { font-size:14px; color:var(--text-faint); }

.legend { width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 28px; }
.legend__item { display:flex; align-items:center; gap:10px; font-size:15px; min-width:0; }
.legend__dot { width:11px; height:11px; border-radius:50%; flex:none; }
.legend__name { color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.legend__value { margin-left:auto; font-weight:700; font-family:var(--font-display); }

.activity { list-style:none; margin:0; padding:0; }
.activity__item { display:flex; align-items:center; gap:14px; padding:15px 0; border-top:1px solid var(--border); }
.activity__item:first-child { border-top:none; }
.activity__dot { width:10px; height:10px; border-radius:50%; flex:none; }
.activity__info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.activity__title { font-weight:700; font-size:16px; }
.activity__meta { font-size:13px; color:var(--text-faint); }
.activity__date { font-size:13px; color:var(--text-faint); }
.activity__amount { margin-left:auto; font-family:var(--font-display); font-weight:700; font-size:17px; white-space:nowrap; }
.activity__amount.is-positive { color:var(--green); }
.activity__amount.is-negative { color:var(--danger); }
.empty { color:var(--text-faint); font-size:14px; padding:24px 0; text-align:center; }

.barchart { display:flex; align-items:flex-end; gap:14px; height:240px; padding-top:14px; }
.bar { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:10px; height:100%; justify-content:flex-end; cursor:pointer; }
.bar__fill { width:100%; max-width:54px; border-radius:8px 8px 4px 4px; background:linear-gradient(180deg,#c04dff,#6a4bff); transition:filter .2s ease; min-height:4px; }
.bar:hover .bar__fill { filter:brightness(1.15); }
.bar.is-active .bar__fill { background:linear-gradient(180deg,#ff2d78,#c04dff); }
.bar__label { font-size:12px; color:var(--text-dim); }
.bar__value { font-size:13px; font-weight:700; font-family:var(--font-display); }

.catlist { list-style:none; margin:0; padding:0; }
.catlist__item { display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--border); }
.catlist__item:first-child { border-top:none; }
.catlist__dot { width:14px; height:14px; border-radius:50%; flex:none; }
.catlist__name { font-weight:600; font-size:16px; }
.catlist__total { margin-left:auto; color:var(--text-dim); font-size:14px; }

/* ----------------------------- MODAL ----------------------------- */
.modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; }
.modal[hidden] { display:none; }
.modal__backdrop { position:absolute; inset:0; background:rgba(5,3,9,0.7); backdrop-filter:blur(4px); }
.modal__sheet { position:relative; width:100%; max-width:440px; max-height:90vh; overflow:auto; background:var(--panel); border:1px solid var(--border-strong); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); animation:pop .2s ease; }
@keyframes pop { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
.modal__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.modal__title { font-family:var(--font-display); font-size:22px; font-weight:700; margin:0; }
.modal__actions { display:flex; gap:12px; margin-top:8px; }
.modal__actions .btn { flex:1; }

.swatches { display:flex; flex-wrap:wrap; gap:10px; }
.swatch { width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; }
.swatch.is-selected { border-color:#fff; transform:scale(1.12); }

/* ----------------------------- CONFIRMAÇÃO ----------------------------- */
.confirm { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; }
.confirm__backdrop { position:absolute; inset:0; background:rgba(5,3,9,0.7); backdrop-filter:blur(4px); }
.confirm__box { position:relative; width:100%; max-width:380px; background:var(--panel); border:1px solid var(--border-strong); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); animation:pop .2s ease; }
.confirm__msg { margin:0 0 20px; font-size:15px; line-height:1.5; color:var(--text); }
.confirm__actions { display:flex; gap:12px; }
.confirm__actions .btn { flex:1; }

/* ----------------------------- RESPONSIVO ----------------------------- */
@media (max-width:920px) {
  .overview-grid { grid-template-columns:minmax(0,1fr); }
  .inv-main { grid-template-columns:minmax(0,1fr); }
  .inv-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
  .app { padding:18px max(16px,env(safe-area-inset-right)) 50px max(16px,env(safe-area-inset-left)); }
  .auth { padding:20px; overflow-x:hidden; }
  .auth__card { padding:26px 22px; }
  .topbar { grid-template-columns:1fr auto; gap:14px; row-gap:16px; }
  .topbar .brand { grid-column:1; }
  .topbar .avatar { grid-column:2; }
  .monthnav { grid-column:1 / -1; grid-row:2; }
  .monthnav__label { font-size:18px; }
  .tabs { width:auto; max-width:100%; margin-inline:auto; flex-wrap:wrap; justify-content:center; }
  .tab { white-space:nowrap; padding:9px 12px; font-size:13px; flex:1 1 calc(50% - 6px); text-align:center; }
  .stat-row { grid-template-columns:minmax(0,1fr); }
  .donut__value { font-size:34px; }
  .stat { font-size:38px; }
  .legend { gap:10px 18px; }
  .card { padding:20px; }
  .field__row { grid-template-columns:1fr; }
  .rowbtn { opacity:.85; }
  .barchart { gap:8px; }
  .bar__value { font-size:11px; }
  .bar__label { font-size:11px; }

  /* --- linhas de aporte/saque: empilha o tipo em cima pra não espremer --- */
  .modal-row:has(.row-kind) { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto; }
  .modal-row:has(.row-kind) .row-kind { grid-column:1 / -1; }
}

/* === Aparelhos de toque (celular/tablet): sem filtros pesados em NENHUMA
   orientação — evita crash/tela-preta no zoom e ao girar pra horizontal === */
@media (hover:none), (pointer:coarse) {
  .aurora__blob { filter:none; }                 /* gradientes radiais já são suaves */
  .card { backdrop-filter:none; background:rgba(22,18,31,0.94); }
  .auth__card { backdrop-filter:none; background:rgba(22,18,31,0.96); }
  .modal__backdrop, .confirm__backdrop { backdrop-filter:none; background:rgba(5,3,9,0.85); }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }