/* ═══════════════════════════════════════════════════════════
   Monesy — extensões da aplicação Flask
   Tokens e componentes base: Design System/ui_kits/web-app/app.css
   ═══════════════════════════════════════════════════════════ */

/* Tipografia — Literata (sans/UI do app; mono permanece JetBrains) */
:root {
    --font-sans: 'Literata', Georgia, 'Times New Roman', serif;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-sans);
}

/* ── Google Material Icons ─────────────────────────────────── */
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

.mi-inline {
    font-size: 18px;
    margin-right: 4px;
    vertical-align: -4px;
}

.mi-badge {
    font-size: 14px;
    margin-right: 2px;
    vertical-align: -2px;
}

.mi-th {
    font-size: 16px;
    vertical-align: middle;
}

.mi-btn {
    font-size: 18px;
}

.mi-row {
    font-size: 16px;
    vertical-align: -2px;
    margin-right: 2px;
}

.mi-hist {
    font-size: 20px;
}

.mi-tag-remove {
    font-size: 16px;
    line-height: 1;
}

.btn-icon .material-icons {
    font-size: 22px;
}

.btn-icon-mini .material-icons {
    font-size: 20px;
}

.btn-theme-toggle .material-icons {
    font-size: 20px;
}

.btn-sm .material-icons.mi-btn {
    font-size: 17px;
}

.pago-emoji .material-icons,
.invest-emoji .material-icons {
    color: inherit;
}

[data-theme="dark"] .btn-danger .material-icons {
    color: inherit;
}

/* ── Toggle tema · fixo canto inferior direito (acompanha o scroll) ─ */
.theme-fab {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 91;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.theme-fab:hover {
    border-color: var(--gold);
    box-shadow: 0 0 14px var(--accent-glow);
    transform: translateY(-1px);
}

.theme-fab .material-icons {
    font-size: 22px;
}

/* Acima do FAB principal no mobile */
@media (max-width: 899px) {
    body:has(.btn-fab:not(.hidden)) .theme-fab {
        bottom: calc(16px + 56px + 12px + env(safe-area-inset-bottom, 0px));
    }
}

body.auth-locked .theme-fab,
body:has(.app-loading:not(.hidden)) .theme-fab,
body:has(#authOverlay:not(.hidden)) .theme-fab {
    opacity: 0;
    pointer-events: none;
}

.header .btn-theme-toggle {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   Dark mode — hierarquia Nordic Trust (colors_and_type.css)
   bg → surface → surface-2 → surface-3 · sem overrides ad hoc
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* Remapeia tokens de superfície clara para a escala escura oficial */
    --paper: var(--surface);
    --line:  var(--border);

    --row-pago-bg: var(--surface-2);
    --row-pago-op: 0.52;
}

/* Superfície secundária (ex-cream como fundo) */
[data-theme="dark"] :is(
    .month-tabs,
    .panel-header,
    th,
    .highlight,
    .btn-secondary,
    .tag-input,
    .nova-secao-form,
    .feature-item,
    .hist-entry,
    .timeline-node,
    dialog.modal .modal-header,
    dialog.modal .modal-footer,
    .secao-title,
    .modal-body input,
    .modal-body select,
    .auth-form .field input,
    label select,
    label input[type="text"],
    label input[type="number"],
    label input[type="email"],
    label input[type="password"],
    label input[type="date"]
) {
    background: var(--surface-2);
    border-color: var(--border);
}

/* Painéis e cards — grafite + gradientes sutis */
[data-theme="dark"] .panel,
[data-theme="dark"] dialog.modal {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] :is(
    .card-entrada,
    .card-saida,
    .card-caixa,
    .card-pendente,
    .card-orcamento,
    .card-liquido
) {
    background: linear-gradient(160deg, transparent 0%, var(--surface) 55%);
}

[data-theme="dark"] .card-entrada {
    background: linear-gradient(160deg, rgba(34,197,94,0.07) 0%, var(--surface) 55%);
}
[data-theme="dark"] .card-saida {
    background: linear-gradient(160deg, rgba(239,68,68,0.07) 0%, var(--surface) 55%);
}
[data-theme="dark"] .card-caixa {
    background: linear-gradient(160deg, rgba(0,172,193,0.10) 0%, var(--surface) 55%);
}
[data-theme="dark"] .card-pendente {
    background: linear-gradient(160deg, rgba(212,175,55,0.09) 0%, var(--surface) 55%);
}
[data-theme="dark"] .card-orcamento {
    background: linear-gradient(160deg, rgba(0,106,117,0.12) 0%, var(--surface) 55%);
}
[data-theme="dark"] .card-liquido {
    background: linear-gradient(160deg, rgba(212,175,55,0.08) 0%, var(--surface) 55%);
}

[data-theme="dark"] .card {
    border-color: var(--border);
}
[data-theme="dark"] .card:hover {
    border-color: rgba(0,172,193,0.32);
}

/* Navegação */
[data-theme="dark"] .app-tabs {
    background: var(--surface);
    border-bottom-color: var(--border);
}

[data-theme="dark"] .app-tab {
    color: var(--text-muted);
}
[data-theme="dark"] .app-tab:hover {
    color: var(--text-primary);
    background: var(--primary-soft);
}
[data-theme="dark"] .app-tab.active {
    background: var(--surface-2);
    color: var(--text-primary);
    border-bottom-color: var(--petrol);
}

[data-theme="dark"] .month-tab:hover {
    background: var(--surface-3);
    color: var(--text-primary);
}
[data-theme="dark"] .month-tab-cell.revisado .month-tab:not(.active) {
    background: var(--primary-soft);
    color: var(--petrol);
}

/* Tipografia em superfícies escuras */
[data-theme="dark"] :is(
    .panel-header h2,
    dialog.modal .modal-header h3,
    .modal-header h3
) {
    color: var(--text-primary);
}

[data-theme="dark"] .panel-eyebrow,
[data-theme="dark"] .features-timeline-heading {
    color: var(--gold);
}

[data-theme="dark"] .secao-title {
    color: var(--text-secondary);
}

/* Formulários */
[data-theme="dark"] .panel .field-inline select {
    background: var(--surface-2);
    color: var(--text-primary);
    border-color: var(--border);
}

[data-theme="dark"] :is(
    .tag-input:focus-within,
    label select:focus,
    label input:focus,
    .modal-body input:focus,
    .modal-body select:focus,
    .auth-form .field input:focus,
    .btn-secondary:hover
) {
    background: var(--surface-3);
    border-color: var(--petrol);
}

[data-theme="dark"] .btn-secondary {
    color: var(--text-secondary);
}
[data-theme="dark"] .btn-secondary:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .btn-ghost {
    color: var(--petrol);
}
[data-theme="dark"] .btn-ghost:hover {
    background: var(--primary-soft);
    color: var(--text-primary);
}

/* Tabelas */
[data-theme="dark"] tr:hover td {
    background: var(--primary-soft);
}
[data-theme="dark"] .row-investido td {
    background: rgba(0,106,117,0.14);
}

[data-theme="dark"] .timeline-node:hover {
    background: var(--primary-soft);
    border-color: rgba(0,172,193,0.35);
}
[data-theme="dark"] .timeline-node.active {
    border-color: var(--petrol);
}
[data-theme="dark"] .timeline-node-all.active {
    background: var(--surface-3);
    color: var(--text-primary);
}

[data-theme="dark"] .timeline-count {
    background: var(--surface-3);
    color: var(--text-muted);
}

/* Auth */
[data-theme="dark"] .auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .auth-card .logo-mark {
    background: var(--primary-soft);
}
[data-theme="dark"] .auth-card h2 {
    color: var(--text-primary);
}

/* Badges */
[data-theme="dark"] .badge-encerrada {
    background: var(--surface-3);
    color: var(--text-muted);
    border-color: var(--border);
}

.logo-mark img {
    width: 28px;
    height: 28px;
    display: block;
}
.auth-card .logo-mark img {
    width: 32px;
    height: 32px;
}

.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.fade-out { opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }

/* ── Layout ──────────────────────────────────────────────── */
.view-assinaturas.container,
.view-features.container { padding-top: 12px; }

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.mes-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.assinaturas-summary { margin-bottom: 20px; }
.assinaturas-filter select { min-width: 160px; }
.assinaturas-row-inativa { opacity: 0.72; }

/* ── Header (extensões) ──────────────────────────────────── */
.btn-theme-toggle { transition: all 0.2s ease; }
.btn-theme-toggle:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--petrol-deep);
    box-shadow: 0 0 10px var(--accent-glow);
}

.field-inline select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--accent-glow);
}
.field-inline select option { background: var(--ink); color: var(--cream); }

.ano-wrapper { display: flex; gap: 6px; align-items: center; }
.ano-wrapper select { flex: 1; min-width: 80px; }
.field-with-action { display: flex; gap: 8px; align-items: center; }
.field-with-action select { flex: 1; min-width: 0; }

.btn-icon-mini {
    width: 34px; height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--petrol);
    background: var(--petrol);
    color: var(--cream);
    font-size: 1rem; font-weight: 700;
    line-height: 1; cursor: pointer;
    transition: 0.15s ease;
    flex-shrink: 0;
    display: grid; place-items: center;
}
.btn-icon-mini:hover {
    background: var(--petrol-deep);
    border-color: var(--petrol-deep);
    box-shadow: 0 0 12px var(--primary-glow);
}
.btn-icon-mini.btn-icon-danger {
    background: transparent;
    color: var(--red);
    border-color: var(--red-soft);
    border-width: 1.5px;
}
.btn-icon-mini.btn-icon-danger:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.btn-logout {
    font-size: 12px;
    padding: 6px 12px;
    margin-left: 12px;
    align-self: center;
    color: rgba(242,243,245,0.82);
    background: rgba(242,243,245,0.08);
    border: 1px solid rgba(242,243,245,0.16);
    border-radius: var(--radius-sm);
}
.header .btn-logout:hover {
    background: rgba(242,243,245,0.16);
    color: var(--cream);
}

/* ── Month tabs ──────────────────────────────────────────── */
.month-tab-cell.revisado .month-tab { color: var(--green); }
.month-revisado-label {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 0;
    padding: 0 2px 2px;
}

/* ── Summary cards ───────────────────────────────────────── */
.card {
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
    border-color: rgba(0,172,193,0.35);
    box-shadow: var(--shadow-xs);
}
.card-liquido::before { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.card-liquido { background: linear-gradient(160deg, rgba(212,175,55,0.10) 0%, var(--paper) 55%); }

.valor-pos { color: var(--green) !important; }
.valor-neg { color: var(--red) !important; }

/* ── Panel ───────────────────────────────────────────────── */
.panel { animation: fadeUp 0.3s ease both; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chart-panel > .panel-header { border-left: 3px solid var(--gold); }
.chart-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chart-wrap { height: 220px; }

.chart-subtitle.negative strong { color: var(--red); }
.chart-subtitle .sep { color: var(--border); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot-green   { background: var(--petrol); }
.dot-red     { background: var(--red); }
.dot-mustard { background: var(--gold); }
.dot-petrol  { background: var(--petrol); }

.panel .field-inline {
    color: var(--gray);
    font-size: 10.5px;
}
.panel .field-inline select {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}
.panel .field-inline select:focus {
    border-color: var(--petrol);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.despesas-pago-total,
.receitas-invest-total { font-size: 10.5px; }

.features-panel .panel-header { align-items: flex-start; }

/* ── Tables ──────────────────────────────────────────────── */
.secao-block { border-bottom: 1px solid var(--border-soft); }
.secao-block:last-child { border-bottom: none; }

.secao-title {
    background: var(--paper);
}
.secao-title-right { display: flex; align-items: center; gap: 10px; }

.col-acoes { width: 120px; }
.col-acoes .btn-sm { min-width: 34px; padding: 6px 8px; }

.row-lancamento { transition: background 0.15s ease; }
.row-pago {
    background: var(--row-pago-bg, var(--cream)) !important;
    opacity: var(--row-pago-op, 0.6);
    transition: opacity 0.25s, background 0.25s;
}
.pago-emoji,
.invest-emoji { font-size: 0.82rem; user-select: none; }

.lanc-ultima-alteracao {
    display: inline-block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
.row-pago .lanc-ultima-alteracao { color: var(--text-faint); }

.empty-state {
    padding: 40px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
}

.check-investido {
    width: 16px; height: 16px;
    cursor: pointer;
    accent-color: var(--petrol-deep);
}

/* ── Buttons (extensões) ─────────────────────────────────── */
.btn-primary:hover { filter: brightness(1.07); box-shadow: 0 4px 16px var(--primary-glow); }
.btn-secondary:hover {
    background: var(--paper);
    color: var(--petrol-deep);
    border-color: var(--petrol);
}
.btn-danger { background: transparent; color: var(--red); padding: 4px 8px; font-size: 12px; }
.btn-danger:hover { background: var(--red-soft); }
.btn-danger-solid:hover { filter: brightness(0.92); }

/* ── Native <dialog> modals ────────────────────────────────── */
dialog.modal {
    position: fixed;
    inset: 0;
    margin: auto;
    border: none;
    padding: 0;
    width: min(460px, calc(100vw - 32px));
    max-height: min(90vh, 100%);
    height: fit-content;
    background: var(--paper);
    color: var(--text-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modalIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
dialog.modal:not([open]) { display: none; }
dialog.modal::backdrop {
    background: var(--modal-backdrop);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

.modal-sm { width: min(360px, calc(100vw - 32px)); }
.modal-lg {
    width: min(820px, calc(100vw - 32px));
    max-height: min(88vh, 100%);
}
.modal-lg .modal-body { overflow-y: auto; }

.modal-subtitle {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

dialog.modal .modal-header { background: var(--cream); }
dialog.modal .modal-footer { background: var(--cream); }

label select,
label input[type="text"],
label input[type="number"],
label input[type="email"],
label input[type="password"],
label input[type="date"] {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
    background: var(--cream);
    outline: none;
    letter-spacing: normal;
    text-transform: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
label select:focus,
label input:focus {
    border-color: var(--petrol);
    background: var(--paper);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.field-hint {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.nova-secao-form {
    display: grid; gap: 8px;
    margin-top: 4px; padding: 12px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.nova-secao-actions { display: flex; gap: 8px; justify-content: flex-end; }

.confirm-text { font-size: 14px; color: var(--text-primary); line-height: 1.6; }
.confirm-warning {
    font-size: 13px; color: var(--red);
    background: var(--red-soft);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--red);
    font-weight: 500;
}
.confirm-warning:empty { display: none; }

/* ── Tags ────────────────────────────────────────────────── */
.tag-input {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    background: var(--cream);
    min-height: 44px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.tag-input:focus-within {
    border-color: var(--petrol);
    background: var(--paper);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.tag-input input {
    border: none; outline: none;
    flex: 1; min-width: 120px;
    padding: 4px 2px;
    background: transparent;
    font: inherit; font-size: 13px;
    color: var(--text-primary);
}
.tag-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-chip-removable { padding-right: 4px; }
.tag-remove {
    border: none; background: transparent;
    color: var(--text-faint);
    cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 1px;
    transition: color 0.12s;
}
.tag-remove:hover { color: var(--red); }

/* ── Histórico ───────────────────────────────────────────── */
.hist-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.hist-entry {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.hist-entry-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px; flex-wrap: wrap;
}
.hist-acao-icon { font-size: 1.1rem; }
.hist-acao-label { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.hist-ts {
    margin-left: auto; font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text-muted); white-space: nowrap;
}
.hist-campos { display: flex; flex-direction: column; gap: 5px; }
.hist-campo {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    font-size: 13px;
}
.hist-campo-nome {
    font-weight: 600; color: var(--text-secondary);
    min-width: 80px; flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.hist-valor-antes {
    color: var(--red); text-decoration: line-through;
    word-break: break-all; opacity: 0.8;
    font-family: var(--font-mono);
}
.hist-arrow { color: var(--text-faint); flex-shrink: 0; }
.hist-valor-depois {
    color: var(--petrol-deep);
    font-weight: 500;
    word-break: break-all;
    font-family: var(--font-mono);
}

.badge-receita {
    background: var(--primary-soft); color: var(--petrol-deep);
    font-size: 10.5px; font-weight: 600; font-family: var(--font-mono);
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 99px; white-space: nowrap;
    border: 1px solid rgba(0,172,193,0.22);
}
.badge-despesa {
    background: var(--red-soft); color: var(--red);
    font-size: 10.5px; font-weight: 600; font-family: var(--font-mono);
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 99px; white-space: nowrap;
}

/* ── Features timeline ───────────────────────────────────── */
.features-timeline-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.features-timeline-heading {
    margin: 0 0 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--petrol);
}
.features-timeline-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
    margin: 0 -4px;
}
.features-timeline {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: min-content;
    padding: 4px;
}
.timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    min-width: 108px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    font: inherit;
    color: inherit;
}
.timeline-node:hover {
    border-color: var(--petrol);
    background: var(--primary-soft);
}
.timeline-node.active {
    border-color: var(--petrol);
    background: var(--tab-active-bg);
    color: var(--tab-active-color);
    box-shadow: var(--tab-active-shadow);
}
.timeline-node.active .timeline-date,
.timeline-node.active .timeline-count { color: inherit; }
.timeline-node-all.active {
    background: var(--surface-2);
    color: var(--text-primary);
    border-color: var(--petrol);
    box-shadow: var(--shadow-xs);
}
.timeline-date {
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-primary);
    white-space: nowrap;
}
.timeline-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-3);
}
.timeline-node.active .timeline-count { background: rgba(255, 255, 255, 0.22); }
.timeline-connector {
    flex-shrink: 0;
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, var(--border), var(--primary-soft));
    margin: 0 2px;
}
.features-filter-caption {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.feature-item:hover {
    border-color: var(--petrol);
    box-shadow: var(--shadow-xs);
}
.feature-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

/* ── Auth (extensões) ────────────────────────────────────── */
body.auth-locked { overflow: hidden; }
body.auth-locked > :is(.header, main, nav, .container) {
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
}

.auth-overlay.hidden { display: none !important; }

.auth-form .field {
    display: grid;
    gap: 6px;
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font-mono);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--petrol-deep);
}
.auth-form .field input {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--cream);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-primary);
}
.auth-form .field input:focus {
    outline: none;
    border-color: var(--petrol);
    background: var(--paper);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.auth-actions { display: flex; justify-content: stretch; margin-top: 4px; }
.auth-actions .btn { width: 100%; padding: 12px 16px; font-size: 15px; }

.auth-error {
    margin: 0;
    color: var(--red);
    font-size: 13px;
    text-align: center;
}

.link-btn {
    background: none;
    border: none;
    color: var(--petrol);
    font-weight: 600;
    cursor: pointer;
    padding: 0 0 0 4px;
}

/* ── Loading overlay ─────────────────────────────────────── */
/* ── Skeleton loading ──────────────────────────────────────── */
@keyframes sk-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.sk {
    background: linear-gradient(90deg,
        var(--surface-3, #E8EAED) 25%,
        var(--cream, #F2F3F5)     50%,
        var(--surface-3, #E8EAED) 75%
    );
    background-size: 400% 100%;
    animation: sk-shimmer 1.8s ease-in-out infinite;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

[data-theme="dark"] .sk {
    background: linear-gradient(90deg,
        var(--surface-3, #252A32) 25%,
        var(--surface-2, #1E2329) 50%,
        var(--surface-3, #252A32) 75%
    );
    background-size: 400% 100%;
}

.sk-header .sk {
    background: linear-gradient(90deg,
        rgba(242,243,245,0.12) 25%,
        rgba(242,243,245,0.24) 50%,
        rgba(242,243,245,0.12) 75%
    );
    background-size: 400% 100%;
    animation: sk-shimmer 1.8s ease-in-out infinite;
}

.app-loading {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.app-loading.hidden { display: none; }

/* Skeleton: header bar */
.sk-header {
    height: 68px;
    background: linear-gradient(135deg, var(--petrol) 0%, var(--petrol-deep) 100%);
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 16px;
}
.sk-header-brand { display: flex; align-items: center; gap: 14px; }
.sk-logo-mark    { width: 40px; height: 40px; border-radius: 12px; }
.sk-brand-text   { display: flex; flex-direction: column; gap: 7px; }
.sk-text-lg      { width: 72px;  height: 13px; }
.sk-text-sm      { width: 130px; height: 10px; opacity: 0.8; }
.sk-header-actions { display: flex; gap: 8px; align-items: center; }
.sk-btn-hd         { width: 78px;  height: 34px; border-radius: var(--radius-sm); }
.sk-btn-hd-primary { width: 136px; height: 34px; border-radius: var(--radius-sm); }

/* Skeleton: nav tabs */
.sk-nav {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.sk-nav-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 48px;
}
.sk-nav-tab  { height: 30px; width: 120px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.sk-short    { width: 100px; }
.sk-shorter  { width: 72px; }

/* Skeleton: page */
.sk-page { padding-top: 24px; flex: 1; }

/* Month tabs row */
.sk-month-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    margin-bottom: 20px;
}
.sk-month-tab { height: 52px; }

/* Summary cards */
.sk-cards-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.sk-card-sk {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sk-card-lbl  { height: 10px; width: 55%; }
.sk-card-hint { height: 9px;  width: 80%; opacity: 0.7; }
.sk-card-val  { height: 26px; width: 75%; border-radius: 4px; }
.sk-card-val-lg { height: 30px; }

/* Chart panel */
.sk-chart-panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 24px;
}
.sk-chart-hd {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.sk-chart-hd-left { display: flex; flex-direction: column; gap: 7px; }
.sk-chart-highlights { display: flex; gap: 10px; }
.sk-highlight-pill { height: 32px; width: 90px; border-radius: var(--radius); }
.sk-chart-body { height: 220px; border-radius: 0; }

/* Panels grid */
.sk-panels-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.sk-panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.sk-panel-hd {
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sk-panel-hd-left { display: flex; flex-direction: column; gap: 7px; }
.sk-eyebrow       { height: 9px;  width: 54px; }
.sk-panel-title   { height: 15px; width: 80px; }
.sk-add-btn       { height: 30px; width: 74px; border-radius: var(--radius-sm); }

/* Section title bar inside panel */
.sk-secao-title-sk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--cream);
    gap: 8px;
}
.sk-mt-sm { margin-top: 0; }
.sk-secao-lbl { height: 9px; width: 80px; }
.sk-secao-val { height: 9px; width: 60px; }

/* Panel rows */
.sk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.sk-check     { width: 16px; height: 16px; border-radius: 4px; }
.sk-row-desc  { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sk-row-name  { height: 13px; width: 65%; }
.sk-row-date  { height: 10px; width: 50%; opacity: 0.75; }
.sk-row-tags  { height: 18px; width: 45%; border-radius: var(--radius-pill); }
.sk-row-valor { height: 14px; width: 72px; border-radius: 4px; }
.sk-row-acoes { height: 28px; width: 50px; border-radius: var(--radius-sm); }

/* Width variants for natural look */
.sk-w70 { width: 70% !important; }
.sk-w65 { width: 65% !important; }
.sk-w60 { width: 60% !important; }
.sk-w55 { width: 55% !important; }
.sk-w50 { width: 50% !important; }
.sk-w45 { width: 45% !important; }
.sk-w40 { width: 40% !important; }
.sk-w35 { width: 35% !important; }
.sk-w30 { width: 30% !important; }
.sk-w25 { width: 25% !important; }

/* Desktop: expand skeleton to match real layout */
@media (min-width: 900px) {
    .sk-month-row   { grid-template-columns: repeat(12, 1fr); }
    .sk-cards-row   { grid-template-columns: repeat(5, 1fr); }
    .sk-panels-grid { grid-template-columns: 1fr 1fr; }
    .sk-chart-body  { height: 280px; }
    .sk-month-tab   { height: 44px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE FIRST — base = celular · min-width = tablet/desktop
   ═══════════════════════════════════════════════════════════ */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

button,
.btn,
.app-tab,
.month-tab,
.timeline-node {
    touch-action: manipulation;
}

.container {
    max-width: 100%;
    padding: 16px 14px calc(88px + env(safe-area-inset-bottom, 0px));
}

.app-tabs.container,
nav.app-tabs {
    padding: 0 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
}

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

.app-tab {
    flex: 0 0 auto;
    padding: 10px 14px 12px;
    font-size: 13px;
    white-space: nowrap;
}

/* Header compacto + menu expansível */
.header {
    height: auto;
    min-height: 56px;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.header-left {
    flex: 1;
    min-width: 0;
}

.header-title-wrap {
    min-width: 0;
}

.header h1 {
    font-size: 15px;
    line-height: 1.2;
}

.subtitle {
    display: none;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header-menu-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(242,243,245,0.22);
    border-radius: var(--radius-sm);
    background: rgba(242,243,245,0.10);
    color: var(--cream);
    cursor: pointer;
    padding: 0;
}

.header-menu-toggle .material-icons {
    font-size: 22px;
}

.header-actions {
    display: none;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid rgba(242,243,245,0.12);
}

.header.header-open .header-actions {
    display: flex;
}

.header-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.header-buttons .btn {
    justify-content: center;
    min-height: 44px;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

.header-buttons .btn-text { display: none; }
.header-buttons .mi-inline { margin-right: 0; }

.header-buttons .btn-fab,
.header-buttons #btnNovaAssinatura {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    width: auto;
    min-width: 56px;
    min-height: 56px;
    padding: 0 18px;
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
    grid-column: auto;
}

.header-buttons #btnNovaAssinatura.hidden,
.header-buttons .btn-fab.hidden {
    display: none !important;
}

.btn-icon-mini {
    width: 44px;
    height: 44px;
}

/* Cards resumo */
.summary-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.card {
    padding: 14px 16px;
}

.card-value {
    font-size: 20px;
}

.card-caixa .card-value {
    font-size: 22px;
}

.card-hint {
    display: none;
}

.card-label {
    font-size: 10px;
    margin-bottom: 8px;
}

/* Grid principal */
.grid-main {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Abas mensais */
.month-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    padding: 3px;
    margin-bottom: 16px;
}

.month-tab {
    font-size: 10px;
    padding: 8px 2px;
}

.month-revisado-cb {
    width: 14px;
    height: 14px;
}

/* Gráfico */
.chart-panel > .panel-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
    gap: 12px;
}

.chart-wrap {
    height: 220px;
    padding: 0 8px;
}

.chart-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
}

.highlight {
    min-width: 0;
    padding: 8px 10px;
}

.highlight-value {
    font-size: 12px;
}

/* Painéis */
.panel-header {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
    gap: 10px;
}

.panel-header .btn {
    width: 100%;
    justify-content: center;
}

.panel-header-title {
    width: 100%;
}

.secao-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.secao-title-right {
    flex-wrap: wrap;
    width: 100%;
}

/* Tabelas → cards no mobile */
.responsive-table thead {
    display: none;
}

.responsive-table tbody tr {
    display: block;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
}

.responsive-table tbody tr.row-pago,
.responsive-table tbody tr.row-investido,
.responsive-table tbody tr.assinaturas-row-inativa {
    display: block;
}

.responsive-table td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: none;
    text-align: left !important;
    white-space: normal;
}

.responsive-table td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 72px;
    padding-top: 2px;
}

.responsive-table td.col-check::before {
    content: "";
    display: none;
}

.responsive-table td.col-check {
    justify-content: flex-start;
    padding-bottom: 8px;
}

.responsive-table td.col-acoes {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--border-soft);
}

.responsive-table td.col-acoes::before {
    content: "Ações";
}

.responsive-table td.col-valor {
    font-size: 15px;
    font-weight: 600;
}

.responsive-table .col-acoes .btn-sm {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
}

/* Modais fullscreen */
dialog.modal {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

dialog.modal .modal-body {
    flex: 1;
    max-height: none;
    overflow-y: auto;
}

.modal-lg {
    width: 100%;
    max-height: 100%;
}

/* Auth */
.auth-overlay {
    padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
}

.auth-card {
    padding: 24px 20px;
}

/* Toast acima do dock flutuante */
.toast {
    left: 14px;
    right: 14px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    transform: none;
    max-width: none;
    text-align: center;
    z-index: 92;
}

body:has(.btn-fab:not(.hidden)) .toast {
    bottom: calc(16px + 56px + 12px + 48px + 12px + env(safe-area-inset-bottom, 0px));
}

/* Features timeline */
.features-timeline-scroll {
    margin: 0;
}

.timeline-node {
    min-width: 96px;
    padding: 8px 12px;
}

.feature-item-header {
    flex-direction: column;
    gap: 8px;
}

.feature-ts {
    white-space: normal;
}

.assinaturas-filter {
    width: 100%;
}

.assinaturas-filter select {
    width: 100%;
    min-width: 0;
}

.panel .field-inline select {
    width: 100%;
}

.mes-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
}

/* ── Tablet (≥ 600px) ─────────────────────────────────────── */
@media (min-width: 600px) {
    .container {
        padding: 20px 20px calc(72px + env(safe-area-inset-bottom, 0px));
    }

    .subtitle { display: block; }

    .card-hint { display: block; }

    .summary-cards {
        gap: 12px;
    }

    .month-tabs {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .month-tab {
        font-size: 11px;
    }

    .header-buttons .btn-text { display: inline; }

    .header-buttons .mi-inline { margin-right: 4px; }

    .form-row-2 {
        grid-template-columns: 1fr 1fr;
    }

    .mes-actions .btn {
        width: auto;
    }

    dialog.modal {
        width: min(460px, calc(100vw - 32px));
        height: fit-content;
        max-height: min(90vh, 100%);
        margin: auto;
        border-radius: var(--radius-lg);
        display: block;
    }

    .modal-lg {
        width: min(820px, calc(100vw - 32px));
        max-height: min(88vh, 100%);
    }

    .toast {
        left: 50%;
        right: auto;
        bottom: 20px;
        transform: translateX(-50%);
        max-width: 340px;
    }
}

/* ── Desktop (≥ 900px) ─────────────────────────────────────── */
@media (min-width: 900px) {
    .container {
        max-width: 1240px;
        margin: 0 auto;
        padding: 24px 24px 60px;
    }

    .app-tabs.container,
    nav.app-tabs {
        padding: 0 24px;
        max-width: 1240px;
        margin: 0 auto;
    }

    .header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 68px;
        min-height: 68px;
        padding: 0 32px;
        padding-top: 0;
        gap: 16px;
    }

    .header-top {
        width: auto;
        flex: 1;
    }

    .header-menu-toggle {
        display: none;
    }

    .header-actions {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        width: auto;
        padding-top: 0;
        margin-top: 0;
        border-top: none;
    }

    .header-buttons {
        display: flex;
        flex-wrap: wrap;
        width: auto;
        gap: 6px;
    }

    .header-buttons .btn {
        width: auto;
        min-height: unset;
    }

    .header-buttons .btn-fab,
    .header-buttons #btnNovaAssinatura {
        position: static;
        min-width: unset;
        min-height: unset;
        padding: 9px 16px;
        border-radius: var(--radius-sm);
        box-shadow: none;
    }

    .summary-cards {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: 24px;
    }

    .card {
        padding: 20px 22px;
    }

    .card-value {
        font-size: 26px;
    }

    .card-caixa .card-value {
        font-size: 28px;
    }

    .grid-main {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 24px;
    }

    .month-tabs {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 3px;
        padding: 4px;
        margin-bottom: 24px;
    }

    .month-tab {
        font-size: 12px;
        padding: 9px 4px;
    }

    .chart-wrap {
        height: 320px;
        padding: 4px 20px 0;
    }

    .chart-panel > .panel-header {
        flex-direction: row;
        align-items: flex-start;
        padding: 18px 20px;
    }

    .chart-highlights {
        display: flex;
        flex-wrap: wrap;
        width: auto;
    }

    .highlight {
        min-width: 110px;
        padding: 10px 14px;
    }

    .panel-header {
        flex-direction: row;
        align-items: center;
        padding: 16px 20px;
    }

    .panel-header .btn {
        width: auto;
    }

    .secao-title {
        flex-direction: row;
        align-items: center;
    }

    .responsive-table thead {
        display: table-header-group;
    }

    .responsive-table tbody tr {
        display: table-row;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
    }

    .responsive-table tbody tr.row-pago,
    .responsive-table tbody tr.row-investido,
    .responsive-table tbody tr.assinaturas-row-inativa {
        display: table-row;
    }

    .responsive-table td {
        display: table-cell;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border-soft);
        text-align: inherit;
        white-space: normal;
    }

    .responsive-table td::before {
        display: none;
        content: none;
    }

    .responsive-table td.col-acoes {
        border-top: none;
        margin-top: 0;
        padding-top: 10px;
    }

    .responsive-table .col-acoes .btn-sm {
        min-width: 34px;
        min-height: unset;
        padding: 6px 8px;
    }

    .toast {
        bottom: 28px;
    }
}

/* ── Desktop largo (≥ 1100px) — cards intermediários se necessário */
@media (min-width: 1100px) and (max-width: 1199px) {
    .summary-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}