/* ════════════════════════════════════════════════════════════════
   MINHAS FINANÇAS — DESIGN SYSTEM v3
   4 themes: dark · light · blue · pink
   High contrast, vibrant accents, premium feel
   ════════════════════════════════════════════════════════════════ */

/* ── THEME TOKENS ── */
[data-theme="dark"] {
    --bg-body: #0b0d14;
    --bg-surface: #12141d;
    --bg-card: #181b27;
    --bg-card-alt: #1e2130;
    --bg-input: #1e2130;
    --bg-hover: #262a3a;
    --border: #2b2f42;
    --border-light: #363b52;
    --text-1: #f0f2f8;
    --text-2: #a0a6be;
    --text-3: #636882;
    --shadow-color: 0, 0, 0;
    --glow-opacity: .35;
    --header-bg: rgba(18, 20, 29, .88);
    --accent-logo: #4da6ff;
    --accent-logo-2: #60a5fa;
}
[data-theme="light"] {
    --bg-body: #f0f1f5;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-card-alt: #f5f6fa;
    --bg-input: #ecedf3;
    --bg-hover: #e2e4ee;
    --border: #d0d3de;
    --border-light: #b8bbc9;
    --text-1: #141625;
    --text-2: #474b63;
    --text-3: #6b7089;
    --shadow-color: 100, 110, 140;
    --glow-opacity: .18;
    --header-bg: rgba(255, 255, 255, .94);
    --accent-logo: #1d4ed8;
    --accent-logo-2: #2563eb;

    /* WCAG AA compliant accent overrides for light theme */
    --green: #0a7d58;
    --green-bright: #087a55;
    --green-bg: rgba(10, 125, 88, .1);
    --green-border: rgba(10, 125, 88, .3);

    --amber: #9a5f00;
    --amber-bright: #865300;
    --amber-bg: rgba(154, 95, 0, .1);
    --amber-border: rgba(154, 95, 0, .3);

    --rose: #b1204f;
    --rose-bright: #9e1a44;
    --rose-bg: rgba(177, 32, 79, .1);
    --rose-border: rgba(177, 32, 79, .3);

    --blue: #1d4ed8;
    --blue-bright: #1a3faa;
    --blue-bg: rgba(29, 78, 216, .1);
    --blue-border: rgba(29, 78, 216, .3);

    --purple: #6d28d9;
    --purple-bright: #5b21b6;
    --purple-bg: rgba(109, 40, 217, .1);
    --purple-border: rgba(109, 40, 217, .3);

    --teal: #0a756c;
    --teal-bright: #085e57;
    --teal-bg: rgba(10, 117, 108, .1);
    --teal-border: rgba(10, 117, 108, .3);

    --danger: #c81e1e;
    --danger-hover: #a51b1b;
}
[data-theme="blue"] {
    --bg-body: #060a18;
    --bg-surface: #0a0f22;
    --bg-card: #0e1530;
    --bg-card-alt: #131c3e;
    --bg-input: #131c3e;
    --bg-hover: #1a254e;
    --border: #182050;
    --border-light: #223068;
    --text-1: #dce4ff;
    --text-2: #7a95cc;
    --text-3: #4a5f8a;
    --shadow-color: 2, 5, 20;
    --glow-opacity: .45;
    --header-bg: rgba(10, 15, 34, .92);
    --accent-logo: #3b82f6;
    --accent-logo-2: #60a5fa;
}
[data-theme="pink"] {
    /* ── Clean & Vibrant · Marisa/Sephora aesthetic ── */
    --bg-body: #FAFAFA;
    --bg-surface: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-card-alt: #FDF5F8;
    --bg-input: #F7F0F3;
    --bg-hover: #FCEEF4;
    --border: #F0D4E0;
    --border-light: #E6B8CC;
    --text-1: #3C0A23;
    --text-2: #6B2E4A;
    --text-3: #A0637F;
    --shadow-color: 100, 20, 60;
    --glow-opacity: .22;
    --header-bg: rgba(255, 255, 255, .96);
    --accent-logo: #E6007E;
    --accent-logo-2: #FF3DA1;

    /* Radius overrides — softer, more rounded feel */
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 20px;
    --r-xl: 26px;

    /* ── Sophisticated pastel category accents ── */
    /* Income (Menta) */
    --green: #1AAB7A;
    --green-bright: #15956A;
    --green-bg: rgba(26, 171, 122, .08);
    --green-border: rgba(26, 171, 122, .22);

    /* Fixed expenses (Ochre/Gold) */
    --amber: #C88B2E;
    --amber-bright: #B07A1F;
    --amber-bg: rgba(200, 139, 46, .08);
    --amber-border: rgba(200, 139, 46, .22);

    /* Daily expenses (Coral) */
    --rose: #E05A72;
    --rose-bright: #D14560;
    --rose-bg: rgba(224, 90, 114, .08);
    --rose-border: rgba(224, 90, 114, .22);

    /* Investments (Lavender) */
    --teal: #8B5FBF;
    --teal-bright: #7A4DAE;
    --teal-bg: rgba(139, 95, 191, .08);
    --teal-border: rgba(139, 95, 191, .22);

    /* Charts / Info (Soft Blue) */
    --blue: #5B8DD9;
    --blue-bright: #4A78C4;
    --blue-bg: rgba(91, 141, 217, .08);
    --blue-border: rgba(91, 141, 217, .22);

    /* Active tabs, CTAs (Pink Marisa) */
    --purple: #E6007E;
    --purple-bright: #CC006F;
    --purple-bg: rgba(230, 0, 126, .07);
    --purple-border: rgba(230, 0, 126, .22);

    --danger: #DC2040;
    --danger-hover: #C41A38;
}

/* ── ACCENT PALETTE ── */
:root {
    --green: #22d3a7;
    --green-bright: #34ffc8;
    --green-bg: rgba(34, 211, 167, .1);
    --green-border: rgba(34, 211, 167, .3);

    --amber: #f5a623;
    --amber-bright: #ffc94d;
    --amber-bg: rgba(245, 166, 35, .1);
    --amber-border: rgba(245, 166, 35, .3);

    --rose: #f25c8a;
    --rose-bright: #ff7ea8;
    --rose-bg: rgba(242, 92, 138, .1);
    --rose-border: rgba(242, 92, 138, .3);

    --blue: #4da6ff;
    --blue-bright: #7ec4ff;
    --blue-bg: rgba(77, 166, 255, .1);
    --blue-border: rgba(77, 166, 255, .3);

    --purple: #a78bfa;
    --purple-bright: #c4b5fd;
    --purple-bg: rgba(167, 139, 250, .1);
    --purple-border: rgba(167, 139, 250, .3);

    --teal: #2dd4bf;
    --teal-bright: #5eead4;
    --teal-bg: rgba(45, 212, 191, .1);
    --teal-border: rgba(45, 212, 191, .3);

    --danger: #ef4444;
    --danger-hover: #f87171;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out-back: cubic-bezier(.34, 1.56, .64, 1);
    --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out-smooth: cubic-bezier(.45, 0, .15, 1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    scroll-behavior: smooth; -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100vw;
}
body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg-body);
    color: var(--text-1);
    line-height: 1.5;
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    transition: background .4s var(--ease), color .4s var(--ease);
    -webkit-overflow-scrolling: touch;
}

/* Remove number input spinners globally */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: var(--text-3); border-radius: 4px; min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-2); }

/* ════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════ */
#main-header {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 28px; height: 60px;
    background: var(--header-bg);
    backdrop-filter: blur(20px) saturate(1.5);
    border-bottom: 1px solid var(--border);
    max-width: 100vw;
    overflow: visible;
}

.logo { display: flex; align-items: center; gap: 12px; }
.logo-icon {
    width: 38px; height: 38px; border-radius: var(--r-md);
    background: var(--accent-logo);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1rem;
    box-shadow: 0 0 20px rgba(59,130,246,.3);
    transition: background .4s var(--ease);
}
.logo-title { font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; display: block; }
.logo-sub { font-size: .65rem; font-weight: 500; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; display: block; }

.header-center { display: flex; gap: 4px; background: var(--bg-card); border-radius: var(--r-md); padding: 3px; border: 1px solid var(--border); flex-shrink: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.header-center::-webkit-scrollbar { display: none; }
.tab-btn {
    padding: 8px 18px; border: none; background: transparent; color: var(--text-3); font-size: .82rem;
    font-weight: 600; border-radius: var(--r-sm); cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 6px; transition: color .25s var(--ease-in-out-smooth), background .25s var(--ease-in-out-smooth), box-shadow .3s var(--ease-out-expo), transform .2s var(--ease-out-back);
}
.tab-btn:hover { color: var(--text-2); }
.tab-btn.active { background: var(--purple); color: #fff; box-shadow: 0 0 14px rgba(167,139,250,.3); }

.header-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.theme-switcher {
    display: flex; gap: 6px; padding: 5px 10px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px;
    box-shadow: inset 0 1px 3px rgba(var(--shadow-color),.15);
}
.theme-dot {
    width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
    transition: all .2s var(--ease); position: relative;
}
.theme-dot.active { border-color: var(--accent-logo); transform: scale(1.2); box-shadow: 0 0 8px rgba(59,130,246,.4); }
.theme-dark { background: linear-gradient(135deg, #1a1d2e, #2b2f42); }
.theme-light { background: linear-gradient(135deg, #d0d2da, #f8f8fb); border: 1px solid #b0b3c0; }
.theme-blue { background: linear-gradient(135deg, #0a1030, #1a2860); }
.theme-pink { background: linear-gradient(135deg, #E6007E, #FF3DA1); border: 1px solid rgba(230,0,126,.3); }

.user-area { display: flex; align-items: center; gap: 10px; position: relative; }
.user-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-logo), var(--accent-logo-2));
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 800; color: #fff;
    transition: background .4s var(--ease);
}
.user-name { font-size: .85rem; font-weight: 500; color: var(--text-2); }
.settings-btn {
    background: none; border: 1px solid var(--border); color: var(--text-3);
    width: 32px; height: 32px; border-radius: var(--r-sm); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .25s var(--ease-in-out-smooth), color .2s var(--ease), border-color .25s var(--ease), transform .2s var(--ease-out-back);
}
.settings-btn:hover { background: var(--bg-hover); color: var(--text-1); }

.settings-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 260px; max-width: calc(100vw - 20px);
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
    box-shadow: 0 12px 40px rgba(var(--shadow-color), .5); padding: 5px;
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .2s var(--ease); z-index: 9999;
}
.settings-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.settings-dropdown button {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border: none; background: none; color: var(--text-2); font-size: .83rem;
    border-radius: var(--r-sm); cursor: pointer; font-family: inherit; transition: all .15s var(--ease);
}
.settings-dropdown button:hover { background: var(--bg-hover); color: var(--text-1); }
.settings-dropdown button.danger:hover { background: rgba(239,68,68,.12); color: var(--danger-hover); }
.settings-dropdown button i { width: 18px; text-align: center; }

/* ════════════════════════════════════════════
   MONTH NAV
   ════════════════════════════════════════════ */
#month-nav {
    background: var(--bg-surface); border-bottom: 1px solid var(--border);
    padding: 10px 28px; transition: background .4s var(--ease);
    max-width: 100vw;
    position: sticky; top: 0; z-index: 90;
}
.month-strip-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.month-title-bar { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 10px; }
.month-title-wrap { display: flex; align-items: baseline; gap: 8px; min-width: 170px; justify-content: center; }
.month-title-name { font-size: 1.18rem; font-weight: 800; color: var(--text-1); letter-spacing: -.01em; }
.month-title-year { font-size: .92rem; font-weight: 600; color: var(--text-3); }
.month-nav-arrow {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid var(--border); background: var(--bg-card); color: var(--text-2);
    cursor: pointer; font-size: .8rem; display: flex; align-items: center; justify-content: center;
    transition: all .15s var(--ease);
}
.month-nav-arrow:hover { border-color: var(--purple); color: var(--purple); transform: scale(1.08); }
.month-strip {
    display: flex; gap: 6px; min-width: max-content; justify-content: center;
    transition: gap .5s var(--ease);
}
.month-strip.merging {
    gap: 0;
}
.month-pill {
    padding: 8px 22px; border-radius: 999px; font-size: .8rem; font-weight: 600;
    border: 2px solid var(--border); background: var(--bg-card); color: var(--text-3);
    cursor: pointer; white-space: nowrap; user-select: none;
    transition: all .45s var(--ease);
    transform-origin: center;
}
.month-strip.merging .month-pill {
    opacity: 0;
    transform: scale(.3);
    padding: 8px 0;
    width: 0;
    border-width: 0;
    margin: 0;
    overflow: hidden;
}
.month-strip.merging .month-pill.merge-center {
    opacity: 1;
    transform: scale(1.15);
    padding: 8px 30px;
    width: auto;
    border-width: 2px;
    background: var(--purple);
    border-color: var(--purple);
    color: #fff;
    box-shadow: 0 0 24px rgba(167,139,250,.4);
}
.month-pill:hover { border-color: var(--border-light); color: var(--text-2); transform: translateY(-1px); }
.month-pill.active {
    background: var(--purple); border-color: var(--purple); color: #fff;
    box-shadow: 0 0 18px rgba(167,139,250, var(--glow-opacity)); transform: scale(1.02);
}
.month-pill.filled-positive {
    background: #16a87a; border-color: #16a87a; color: #fff;
    box-shadow: 0 0 12px rgba(34,211,167,.3);
    font-weight: 700;
}
.month-pill.filled-positive:hover {
    background: #1cc08e; border-color: #1cc08e; color: #fff;
}
.month-pill.filled-positive.active {
    background: #0f9468; color: #fff; border-color: #0f9468;
    box-shadow: 0 0 22px rgba(34,211,167, .45);
}
.month-pill.filled-negative {
    background: rgba(239, 68, 68, .22); border-color: var(--danger); color: var(--danger-hover);
    box-shadow: 0 0 8px rgba(239,68,68,.15);
}
.month-pill.filled-negative.active {
    background: var(--danger); color: #fff; border-color: var(--danger);
    box-shadow: 0 0 18px rgba(239,68,68, var(--glow-opacity));
}

/* ════════════════════════════════════════════
   VIEWS
   ════════════════════════════════════════════ */
.view { display: none; max-width: 100%; margin: 0 auto; padding: 24px 28px 60px; overflow-x: hidden; overflow-y: visible; }
.view.active-view { display: block; }
@media (min-width: 1440px) { .view { max-width: 1440px; } }

/* ════════════════════════════════════════════
   COPY BANNER
   ════════════════════════════════════════════ */
.copy-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px; border-radius: var(--r-md); margin-bottom: 20px;
    background: var(--purple-bg); border: 1px solid var(--purple-border); color: var(--purple-bright);
    font-size: .88rem; font-weight: 500; animation: fadeInDown .35s var(--ease);
}
.copy-banner i { font-size: 1.1rem; }
.copy-banner span { flex: 1; }
.copy-btn {
    padding: 6px 16px; border: 1px solid var(--purple-border); background: var(--purple);
    color: #fff; border-radius: var(--r-sm); font-size: .8rem; font-weight: 600;
    cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 6px;
    transition: all .2s var(--ease);
}
.copy-btn:hover { filter: brightness(1.15); }
.copy-dismiss { background: none; border: none; color: var(--purple-bright); cursor: pointer; font-size: 1rem; opacity: .7; transition: opacity .15s; }
.copy-dismiss:hover { opacity: 1; }

/* ════════════════════════════════════════════
   SUMMARY CARDS
   ════════════════════════════════════════════ */
.summary-cards {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 24px;
}
.card {
    padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--border);
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-card); position: relative; overflow: hidden;
    transition: all .25s var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(var(--shadow-color), .35); }
.card-stripe { position: absolute; top: 0; left: 0; width: 100%; height: 3px; }

.card-income .card-stripe { background: linear-gradient(90deg, var(--green), var(--green-bright)); }
.card-income .card-icon { color: var(--green); background: var(--green-bg); }
.card-income .card-value { color: var(--green-bright); }

.card-fixed .card-stripe { background: linear-gradient(90deg, var(--amber), var(--amber-bright)); }
.card-fixed .card-icon { color: var(--amber); background: var(--amber-bg); }
.card-fixed .card-value { color: var(--amber-bright); }

.card-daily .card-stripe { background: linear-gradient(90deg, var(--rose), var(--rose-bright)); }
.card-daily .card-icon { color: var(--rose); background: var(--rose-bg); }
.card-daily .card-value { color: var(--rose-bright); }

.card-invest .card-stripe { background: linear-gradient(90deg, var(--teal), var(--teal-bright)); }
.card-invest .card-icon { color: var(--teal); background: var(--teal-bg); }
.card-invest .card-value { color: var(--teal-bright); }

.card-balance .card-stripe { background: linear-gradient(90deg, var(--blue), var(--blue-bright)); }
.card-balance .card-icon { color: var(--blue); background: var(--blue-bg); }
.card-balance .card-value { color: var(--blue-bright); }

.card-icon {
    width: 42px; height: 42px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0;
}
.card-info { display: flex; flex-direction: column; min-width: 0; }
.card-label { font-size: .7rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.card-value { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; margin-top: 1px; white-space: nowrap; }

/* ════════════════════════════════════════════
   CONTENT GRID
   ════════════════════════════════════════════ */
.content-grid { display: grid; grid-template-columns: 1fr 400px; gap: 22px; align-items: start; }
.data-column { display: flex; flex-direction: column; gap: 22px; }

/* ── SECTION BLOCKS ── */
.section-block {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
    overflow: hidden; transition: all .3s var(--ease); position: relative;
}
.section-block::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
}
.section-income::before { background: linear-gradient(90deg, var(--green), var(--green-bright)); }
.section-fixed::before { background: linear-gradient(90deg, var(--amber), var(--amber-bright)); }
.section-daily::before { background: linear-gradient(90deg, var(--rose), var(--rose-bright)); }
.section-invest::before { background: linear-gradient(90deg, var(--teal), var(--teal-bright)); }
.section-cards::before { background: linear-gradient(90deg, var(--purple), #c4b5fd); }
.section-block:hover { box-shadow: 0 4px 20px rgba(var(--shadow-color), .25); }

.section-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.section-header h2 { font-size: .9rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.section-income .section-header h2 i { color: var(--green); }
.section-fixed .section-header h2 i { color: var(--amber); }
.section-daily .section-header h2 i { color: var(--rose); }
.section-invest .section-header h2 i { color: var(--teal); }
.section-cards .section-header h2 i { color: var(--purple); }

.section-header-right { display: flex; align-items: center; gap: 8px; }

/* Clear section button */
.clear-section-btn {
    background: none; border: 1px solid var(--border); color: var(--text-3);
    width: 30px; height: 30px; border-radius: var(--r-sm); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: .8rem;
    transition: all .2s var(--ease);
}
.clear-section-btn:hover { color: var(--danger); border-color: var(--danger); background: rgba(239,68,68,.08); }

/* Invest % area */
.invest-pct-area { display: flex; align-items: center; gap: 4px; }
.pct-input {
    width: 50px; padding: 5px 6px; border: 1px solid var(--border); background: var(--bg-input);
    color: var(--text-1); border-radius: var(--r-sm); font-size: .78rem; font-family: inherit;
    text-align: center; outline: none; transition: border-color .2s var(--ease);
}
.pct-input:focus { border-color: var(--teal); }
.pct-btn {
    padding: 5px 10px; border: 1px solid var(--teal-border); background: var(--teal-bg);
    color: var(--teal); border-radius: var(--r-sm); font-size: .72rem; font-weight: 600;
    cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 3px;
    transition: all .2s var(--ease);
}
.pct-btn:hover { background: var(--teal); color: #fff; }

/* ── INVEST TOGGLE ── */
.invest-toggle {
    display: flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0;
}
.it-btn {
    width: 34px; height: 36px; border: none; cursor: pointer; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card); color: var(--text-3); transition: all .15s var(--ease);
}
.it-btn:first-child { border-right: 1px solid var(--border); }
.it-btn:hover { background: var(--bg-hover); color: var(--text-1); }
.it-btn.it-active[data-mode="aporte"] { background: var(--teal); color: #fff; }
.it-btn.it-active[data-mode="resgate"] { background: var(--danger); color: #fff; }

/* ── INLINE FORM ── */
.inline-form {
    display: flex; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border);
    background: var(--bg-card-alt); align-items: center;
}
.inline-input {
    padding: 9px 12px; border: 1px solid var(--border); background: var(--bg-input);
    color: var(--text-1); border-radius: var(--r-sm); font-size: .85rem; font-family: inherit;
    outline: none; transition: border-color .3s var(--ease-in-out-smooth), box-shadow .35s var(--ease-out-expo), background .25s var(--ease);
}
.inline-input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(167,139,250,.18); }
.inline-input::placeholder { color: var(--text-3); }
.flex-2 { flex: 2; min-width: 0; }
.flex-1 { flex: 1; min-width: 0; }
.flex-date { width: 136px; flex-shrink: 0; }

.inline-add-btn {
    width: 40px; height: 40px; border: none; border-radius: var(--r-sm); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
    color: #fff; flex-shrink: 0; transition: filter .25s var(--ease-in-out-smooth), transform .25s var(--ease-out-back), box-shadow .3s var(--ease-out-expo);
}
.inline-add-btn:hover { filter: brightness(1.2); transform: scale(1.06); }
.income-btn { background: linear-gradient(135deg, var(--green), #1aad8a); box-shadow: 0 0 12px rgba(34,211,167,.25); }
.fixed-btn { background: linear-gradient(135deg, var(--amber), #d99020); box-shadow: 0 0 12px rgba(245,166,35,.25); }
.daily-btn { background: linear-gradient(135deg, var(--rose), #d04070); box-shadow: 0 0 12px rgba(242,92,138,.25); }
.invest-btn { background: linear-gradient(135deg, var(--teal), #20b0a0); box-shadow: 0 0 12px rgba(45,212,191,.25); }

/* ── ITEMS LIST & CONTAINER ── */
.items-container { position: relative; }
.items-list {
    max-height: 308px; /* ~7 rows × 44px */
    overflow-y: auto;
    transition: max-height .35s var(--ease);
}
.items-list.collapsed {
    max-height: 308px;
    overflow-y: auto;
}
.items-list.expanded {
    max-height: 2000px;
    overflow-y: auto;
}

.expand-btn {
    width: 100%; padding: 8px; border: none; border-top: 1px solid var(--border);
    background: var(--bg-card-alt); color: var(--purple); font-size: .78rem; font-weight: 600;
    cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: all .2s var(--ease);
}
.expand-btn:hover { background: var(--bg-hover); }
.expand-btn.expanded i { transform: rotate(180deg); }

.item-row {
    display: flex; align-items: center; gap: 8px; padding: 10px 18px;
    border-bottom: 1px solid rgba(var(--shadow-color), .08); font-size: .85rem;
    transition: background .15s var(--ease); animation: itemSlideIn .4s var(--ease-out-expo) backwards;
}
.item-row:hover { background: var(--bg-hover); }
.item-row:last-child { border-bottom: none; }
.item-date { color: var(--text-3); font-size: .76rem; min-width: 50px; font-weight: 500; }
.item-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.item-cat {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px;
    border-radius: 999px; font-size: .72rem; font-weight: 600; flex-shrink: 0;
}
.item-val { font-weight: 700; min-width: 70px; text-align: right; flex-shrink: 0; }
.item-val.editing { display: none; }
.item-resgate { color: var(--danger-hover) !important; }

/* Inline edit */
.inline-edit-wrap {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.inline-edit-input {
    width: 90px; padding: 4px 8px; border: 1px solid var(--purple); background: var(--bg-input);
    color: var(--text-1); border-radius: var(--r-sm); font-size: .82rem; font-family: inherit;
    font-weight: 700; text-align: right; outline: none;
    box-shadow: 0 0 0 3px rgba(167,139,250,.15);
}
.inline-edit-save {
    width: 26px; height: 26px; border: none; border-radius: var(--r-sm);
    background: var(--green); color: #fff; cursor: pointer; font-size: .7rem;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s var(--ease);
}
.inline-edit-save:hover { filter: brightness(1.15); }
.inline-edit-cancel {
    width: 26px; height: 26px; border: none; border-radius: var(--r-sm);
    background: var(--bg-hover); color: var(--text-3); cursor: pointer; font-size: .7rem;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s var(--ease);
}
.inline-edit-cancel:hover { color: var(--danger); }

.item-actions { display: flex; gap: 2px; flex-shrink: 0; margin-left: auto; }
.item-action-btn {
    background: none; border: none; color: var(--text-3); cursor: pointer;
    padding: 3px 5px; border-radius: var(--r-sm); font-size: .78rem; transition: color .2s var(--ease-in-out-smooth), background .2s var(--ease), transform .2s var(--ease-out-back);
}
.item-action-btn:hover { background: var(--bg-hover); transform: scale(1.1); }
.item-action-btn.edit-btn:hover { color: var(--purple); }
.item-action-btn.del-btn:hover { color: var(--danger); background: rgba(239,68,68,.08); }

.section-income .item-val { color: var(--green-bright); }
.section-invest .item-val:not(.item-resgate) { color: var(--teal-bright); }

/* Clickable category badge */
.item-cat-clickable {
    cursor: pointer;
    transition: all .15s var(--ease);
}
.item-cat-clickable:hover {
    filter: brightness(1.3);
    transform: scale(1.05);
}

/* Category picker dropdown */
.cat-picker-dropdown {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-md); box-shadow: 0 12px 40px rgba(var(--shadow-color), .5);
    padding: 4px; min-width: 180px; max-height: 320px; overflow-y: auto;
    animation: fadeInUp .15s var(--ease);
}
.cat-picker-option {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 8px 12px; border: none; background: none;
    color: var(--text-2); font-size: .8rem; font-weight: 500;
    border-radius: var(--r-sm); cursor: pointer; font-family: inherit;
    transition: all .12s var(--ease); text-align: left;
}
.cat-picker-option:hover {
    background: var(--bg-hover); color: var(--text-1);
}
.cat-picker-option.active {
    background: rgba(167,139,250,.12); color: var(--purple); font-weight: 700;
}
.cat-picker-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

.empty-state {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 28px 20px; color: var(--text-3);
}
.empty-state i { font-size: 1.5rem; opacity: .4; }
.empty-state p { font-size: .82rem; }

/* ── CHART COLUMN ── */
.chart-column { display: flex; flex-direction: column; gap: 22px; }
.chart-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 20px; position: relative; overflow: hidden;
    contain: layout style;
}
.chart-card h2 { font-size: .9rem; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.chart-card h2 i { color: var(--purple); }
.chart-wrap { position: relative; max-width: 280px; aspect-ratio: 1; margin: 0 auto 12px; }
.chart-wrap canvas { width: 100% !important; height: 100% !important; }
.chart-legend { display: flex; flex-direction: column; gap: 4px; }
.legend-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--r-sm); transition: background .15s var(--ease); min-width: 0; }
.legend-item:hover { background: var(--bg-hover); }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-label { flex: 1; font-size: .78rem; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-value { font-size: .78rem; font-weight: 700; color: var(--text-1); flex-shrink: 0; }
.legend-pct { font-size: .72rem; color: var(--text-3); min-width: 38px; text-align: right; flex-shrink: 0; }
.chart-empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: var(--bg-card); border-radius: var(--r-lg); z-index: 2; flex-direction: column; gap: 6px;
}

/* ════════════════════════════════════════════
   CONSOLIDATED VIEW
   ════════════════════════════════════════════ */
.consolidated-section { max-width: 1200px; margin: 0 auto; }
.consolidated-header h1 {
    font-size: 1.3rem; font-weight: 800; margin-bottom: 20px;
    display: flex; align-items: center; gap: 10px;
}
.consolidated-header h1 i { color: var(--purple); }
.consolidated-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.consolidated-chart-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 24px; margin-bottom: 22px;
}
.consolidated-chart-card h2 { font-size: .95rem; font-weight: 700; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.consolidated-chart-card h2 i { color: var(--purple); }
.consolidated-chart-wrap { position: relative; height: 380px; }
.consolidated-chart-wrap canvas { width: 100% !important; height: 100% !important; }
.consolidated-pie-row { display: flex; gap: 28px; align-items: flex-start; }
.consolidated-pie-wrap { width: 280px; flex-shrink: 0; }
.consolidated-pie-wrap canvas { width: 100% !important; height: auto !important; }
.consolidated-pie-legend { flex: 1; display: flex; flex-direction: column; gap: 4px; }

/* ════════════════════════════════════════════
   EDIT MODAL
   ════════════════════════════════════════════ */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
    z-index: 500; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all .25s var(--ease);
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-dialog {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl);
    width: 400px; max-width: 92vw; box-shadow: 0 16px 50px rgba(var(--shadow-color), .5);
    transform: translateY(12px) scale(.97); transition: transform .25s var(--ease);
}
.modal-overlay.open .modal-dialog { transform: translateY(0) scale(1); }
.modal-header-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.modal-header-bar h3 { font-size: .95rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.modal-header-bar h3 i { color: var(--purple); }
.modal-close-btn { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 1.1rem; padding: 4px; transition: color .15s; }
.modal-close-btn:hover { color: var(--text-1); }
#edit-form { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: .78rem; font-weight: 600; color: var(--text-3); }
.form-group input {
    padding: 10px 14px; border: 1px solid var(--border); background: var(--bg-input);
    color: var(--text-1); border-radius: var(--r-sm); font-size: .88rem; font-family: inherit;
    outline: none; transition: border-color .3s var(--ease-in-out-smooth), box-shadow .35s var(--ease-out-expo), background .25s var(--ease);
}
.form-group input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(167,139,250,.18); }
.submit-btn {
    padding: 11px; background: var(--purple); color: #fff; border: none; border-radius: var(--r-sm);
    font-size: .88rem; font-weight: 700; font-family: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: filter .25s var(--ease-in-out-smooth), box-shadow .35s var(--ease-out-expo), transform .2s var(--ease-out-back);
}
.submit-btn:hover { filter: brightness(1.15); box-shadow: 0 0 18px rgba(167,139,250,.25); transform: translateY(-1px); }

/* ════════════════════════════════════════════
   CONFIRM DIALOG
   ════════════════════════════════════════════ */
.confirm-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
    z-index: 600; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all .25s var(--ease);
}
.confirm-overlay.open { opacity: 1; visibility: visible; }
.confirm-dialog {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl);
    padding: 30px; text-align: center; max-width: 380px; width: 90vw;
    box-shadow: 0 16px 50px rgba(var(--shadow-color), .5);
    transform: scale(.94); transition: transform .25s var(--ease);
}
.confirm-overlay.open .confirm-dialog { transform: scale(1); }
.confirm-icon {
    width: 52px; height: 52px; margin: 0 auto 14px;
    background: rgba(239,68,68,.12); color: var(--danger); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.confirm-dialog h3 { font-size: 1rem; margin-bottom: 6px; }
.confirm-dialog p { font-size: .86rem; color: var(--text-2); margin-bottom: 22px; }
.confirm-actions { display: flex; gap: 10px; }
.btn-cancel, .btn-confirm {
    flex: 1; padding: 10px; border-radius: var(--r-sm); font-size: .86rem; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: background .25s var(--ease-in-out-smooth), color .2s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease-out-expo), transform .2s var(--ease-out-back);
}
.btn-cancel { background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-2); }
.btn-cancel:hover { background: var(--bg-input); color: var(--text-1); transform: translateY(-1px); }
.btn-confirm { background: var(--danger); border: none; color: #fff; }
.btn-confirm:hover { background: var(--danger-hover); transform: translateY(-1px); }

/* ════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════ */
.toast {
    position: fixed; bottom: 28px; right: 28px; padding: 12px 20px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md);
    box-shadow: 0 8px 30px rgba(var(--shadow-color), .4); font-size: .86rem;
    color: var(--text-1); display: flex; align-items: center; gap: 8px; z-index: 800;
    animation: toastIn .3s var(--ease), toastOut .3s var(--ease) 2s forwards;
}
.toast i { font-size: 1rem; }
.toast.success i { color: var(--green); }
.toast.error i { color: var(--danger); }

@keyframes toastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(16px); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } }
@keyframes itemSlideIn {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.section-block { animation: fadeInUp .35s var(--ease) backwards; }
.section-block:nth-child(1) { animation-delay: 0s; }
.section-block:nth-child(2) { animation-delay: .06s; }
.section-block:nth-child(3) { animation-delay: .12s; }
.section-block:nth-child(4) { animation-delay: .18s; }
.card { animation: fadeInUp .3s var(--ease) backwards; }
.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: .04s; }
.card:nth-child(3) { animation-delay: .08s; }
.card:nth-child(4) { animation-delay: .12s; }
.card:nth-child(5) { animation-delay: .16s; }

/* ═ RESPONSIVE ═ */

/* Tablets & small desktops */
@media (max-width: 1200px) {
    .content-grid { grid-template-columns: 1fr; }
    .chart-column { flex-direction: row; flex-wrap: wrap; }
    .chart-card { flex: 1; min-width: 280px; }
}

@media (max-width: 900px) {
    .summary-cards { grid-template-columns: repeat(3, 1fr); }
    .consolidated-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Tablets portrait & large phones */
@media (max-width: 768px) {
    #main-header {
        padding: 0 12px; height: 54px;
    }
    .logo-icon { width: 32px; height: 32px; font-size: .85rem; }
    .logo-title { font-size: .92rem; }
    .logo-sub { font-size: .58rem; }
    .logo { gap: 8px; }

    .header-center { padding: 2px; }
    .tab-btn { padding: 6px 12px; font-size: .75rem; gap: 4px; }
    .tab-btn i { font-size: .7rem; }

    .theme-switcher { gap: 4px; padding: 3px 6px; }
    .theme-dot { width: 17px; height: 17px; }

    .user-name { display: none; }
    .user-avatar { width: 30px; height: 30px; font-size: .6rem; }
    .settings-btn { width: 28px; height: 28px; font-size: .8rem; }

    #month-nav { padding: 8px 10px; }
    .month-strip { justify-content: flex-start; }
    .month-pill { padding: 7px 14px; font-size: .72rem; }

    .view { padding: 14px 10px 40px; }
    .summary-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .card { padding: 12px 14px; gap: 10px; }
    .card-icon { width: 36px; height: 36px; font-size: .9rem; }
    .card-value { font-size: 1rem; }
    .card-label { font-size: .62rem; }

    .content-grid { gap: 14px; }

    .section-header { padding: 10px 12px; }
    .section-header h2 { font-size: .82rem; gap: 6px; }
    .clear-section-btn { width: 28px; height: 28px; font-size: .72rem; }

    .inline-form {
        flex-wrap: wrap; padding: 10px 12px; gap: 6px;
    }
    .flex-2 { flex: 1 1 100%; }
    .flex-1 { flex: 1 1 45%; }
    .flex-date { width: 100%; flex: 1 1 100%; }
    .invest-toggle { order: -1; }
    .inline-add-btn { width: 100%; height: 38px; flex: 1 1 45%; }

    .item-row { padding: 8px 12px; gap: 6px; font-size: .8rem; flex-wrap: nowrap; }
    .item-desc { max-width: 150px; }
    .item-cat { font-size: .65rem; padding: 2px 7px; }
    .item-val { min-width: 60px; font-size: .8rem; }
    .item-date { font-size: .68rem; min-width: 38px; }

    .chart-column { flex-direction: column; }
    .chart-card { min-width: unset; width: 100%; box-sizing: border-box; }
    .chart-wrap { max-width: 220px; aspect-ratio: 1; margin: 0 auto 14px; }
    .chart-wrap canvas { max-height: 220px; }
    .chart-legend { gap: 3px; }
    .legend-item { gap: 6px; padding: 4px 6px; flex-wrap: nowrap; }
    .legend-label { font-size: .74rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .legend-value { font-size: .74rem; flex-shrink: 0; }
    .legend-pct { font-size: .68rem; min-width: 34px; flex-shrink: 0; }

    .consolidated-pie-row { flex-direction: column; }
    .consolidated-pie-wrap { width: 100%; max-width: 240px; margin: 0 auto; }
    .consolidated-chart-card { padding: 16px; }
    .consolidated-chart-wrap { height: 280px; }

    .invest-pct-area { gap: 3px; }
    .pct-input { width: 40px; padding: 4px; font-size: .72rem; }
    .pct-btn { padding: 4px 7px; font-size: .65rem; }
}

/* Phones */
@media (max-width: 480px) {
    #main-header { 
        padding: 0 6px; height: 48px;
        gap: 4px;
        max-width: 100vw;
        overflow: visible;
    }
    .logo { flex-shrink: 0; }
    .logo-text { display: none; }
    .logo-icon { width: 30px; height: 30px; font-size: .8rem; }

    .header-center {
        flex: 1; min-width: 0;
        overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }
    .tab-btn { padding: 5px 10px; font-size: .7rem; gap: 3px; white-space: nowrap; flex-shrink: 0; }
    .tab-btn i { font-size: .62rem; }

    .header-right { gap: 6px; flex-shrink: 0; }
    .theme-switcher { gap: 2px; padding: 2px 4px; }
    .theme-dot { width: 14px; height: 14px; }
    .user-avatar { width: 28px; height: 28px; font-size: .58rem; }
    .settings-btn { width: 26px; height: 26px; font-size: .72rem; }

    /* Settings dropdown: use fixed position on mobile to avoid z-index issues */
    .settings-dropdown {
        position: fixed;
        top: 52px;
        right: 6px;
        left: auto;
        z-index: 9999;
    }

    #month-nav { padding: 6px 6px; max-width: 100vw; }
    .month-pill { padding: 5px 10px; font-size: .66rem; border-width: 1.5px; }

    .view { padding: 10px 8px 30px; max-width: 100vw; }

    .summary-cards { grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 14px; }
    .card { padding: 10px 10px; gap: 8px; border-radius: var(--r-md); }
    .card-icon { width: 32px; height: 32px; font-size: .8rem; border-radius: var(--r-sm); }
    .card-value { font-size: .92rem; }
    .card-label { font-size: .58rem; letter-spacing: .03em; }
    .card-stripe { height: 2px; }

    .section-header { padding: 10px 10px; }
    .section-header h2 { font-size: .78rem; }
    .section-header-right { gap: 4px; }

    .inline-form { padding: 8px 10px; gap: 5px; }
    .inline-input { padding: 8px 10px; font-size: .8rem; border-radius: 6px; }
    .inline-add-btn { height: 36px; border-radius: 6px; }

    .item-row { padding: 7px 10px; gap: 4px; font-size: .76rem; flex-wrap: nowrap; overflow: hidden; }
    .item-desc { font-size: .76rem; max-width: 90px; min-width: 0; }
    .item-cat { font-size: .6rem; padding: 1px 6px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .item-val { min-width: 50px; font-size: .76rem; }
    .item-action-btn { padding: 4px 6px; font-size: .78rem; }
    .item-actions { gap: 0; }

    /* Ensure delete button is always visible on mobile */
    .item-action-btn.del-btn {
        color: var(--danger);
        opacity: .7;
    }
    .item-action-btn.del-btn:active {
        opacity: 1;
        background: rgba(239,68,68,.12);
    }

    /* Fix section blocks overflow */
    .section-block { overflow: hidden; }
    .items-list { overflow-x: hidden; }
    .inline-form { overflow: hidden; }

    .chart-card { padding: 14px; width: 100%; box-sizing: border-box; }
    .chart-card h2 { font-size: .82rem; margin-bottom: 10px; }
    .chart-wrap { max-width: 180px; aspect-ratio: 1; margin: 0 auto 10px; }
    .chart-wrap canvas { max-height: 180px; }
    .chart-legend { gap: 2px; }
    .legend-item { padding: 3px 4px; gap: 5px; flex-wrap: nowrap; }
    .legend-dot { width: 7px; height: 7px; }
    .legend-label { font-size: .7rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .legend-value { font-size: .7rem; flex-shrink: 0; }
    .legend-pct { font-size: .62rem; min-width: 30px; flex-shrink: 0; }

    .copy-banner { padding: 10px 12px; font-size: .78rem; gap: 8px; }
    .copy-btn { padding: 5px 12px; font-size: .72rem; }

    .consolidated-cards { grid-template-columns: 1fr 1fr; gap: 6px; }
    .consolidated-header h1 { font-size: 1rem; }
    .consolidated-chart-card { padding: 12px; margin-bottom: 14px; }
    .consolidated-chart-card h2 { font-size: .82rem; }
    .consolidated-chart-wrap { height: 220px; }

    .toast { bottom: 12px; right: 12px; left: 12px; font-size: .8rem; padding: 10px 14px; }

    .confirm-dialog { padding: 22px; }
    .confirm-dialog h3 { font-size: .92rem; }
    .confirm-dialog p { font-size: .8rem; }

    .inline-edit-input { width: 70px; font-size: .76rem; }
    .inline-edit-save, .inline-edit-cancel { width: 24px; height: 24px; font-size: .65rem; }
}

/* Very small phones */
@media (max-width: 360px) {
    .summary-cards { grid-template-columns: 1fr; gap: 5px; }
    .card { flex-direction: row; }
    .consolidated-cards { grid-template-columns: 1fr; }

    .tab-btn { padding: 5px 10px; font-size: .68rem; flex-shrink: 0; }
    .tab-btn i { display: none; }
}


/* ════════════════════════════════════════════
   ALERTS PANEL
   ════════════════════════════════════════════ */
.alerts-panel {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 18px;
    animation: fadeInUp .35s var(--ease);
}
.alert-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    border-left: 4px solid var(--amber);
    animation: fadeInDown .3s var(--ease);
    position: relative;
}
.alert-item.alert-warning { border-left-color: #f59e0b; }
.alert-item.alert-info { border-left-color: var(--blue); }
.alert-item.alert-danger { border-left-color: var(--danger); }

.alert-icon {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; flex-shrink: 0;
}
.alert-warning .alert-icon { background: rgba(245, 158, 11, .12); color: #f59e0b; }
.alert-info .alert-icon { background: rgba(77, 166, 255, .12); color: var(--blue); }
.alert-danger .alert-icon { background: rgba(239, 68, 68, .12); color: var(--danger); }

.alert-content { flex: 1; min-width: 0; }
.alert-title {
    font-size: .78rem; font-weight: 700; color: var(--text-1);
    margin-bottom: 1px;
}
.alert-body {
    font-size: .72rem; color: var(--text-2); line-height: 1.35;
}
.alert-dismiss {
    background: none; border: none; color: var(--text-3); cursor: pointer;
    font-size: .82rem; padding: 4px; border-radius: var(--r-sm);
    transition: all .15s var(--ease); flex-shrink: 0;
}
.alert-dismiss:hover { color: var(--text-1); background: var(--bg-hover); }

/* Mobile alert compactness */
@media (max-width: 600px) {
    .alerts-panel { gap: 4px; margin-bottom: 12px; }
    .alert-item { padding: 8px 10px; gap: 8px; }
    .alert-icon { width: 26px; height: 26px; font-size: .7rem; }
    .alert-title { font-size: .72rem; }
    .alert-body { font-size: .66rem; }
}

/* Header import button — always visible, prominent */
.area-switch-btn {
    display: inline-flex; align-items: center; gap: 7px;
    margin-left: 14px; padding: 7px 15px;
    border: 1px solid rgba(34,211,238,.35);
    background: rgba(34,211,238,.12); color: #22d3ee;
    border-radius: var(--r-sm);
    cursor: pointer; font-size: .78rem; font-weight: 800; font-family: inherit;
    white-space: nowrap; transition: all .18s var(--ease);
}
.area-switch-btn:hover { background: rgba(34,211,238,.2); transform: translateY(-1px); }
@media (max-width: 640px) { .area-switch-btn span { display: none; } .area-switch-btn { margin-left: 8px; padding: 7px 11px; } }

.header-import-btn {
    display: flex;
    align-items: center; justify-content: center; gap: 6px;
    padding: 6px 14px;
    border: none;
    background: linear-gradient(135deg, var(--purple), #8b5cf6);
    color: #fff;
    border-radius: var(--r-sm);
    cursor: pointer; font-size: .78rem; font-weight: 700;
    font-family: inherit;
    box-shadow: 0 2px 12px rgba(167,139,250,.3);
    transition: all .2s var(--ease);
    white-space: nowrap;
}
.header-import-btn:hover {
    filter: brightness(1.15);
    box-shadow: 0 4px 20px rgba(167,139,250,.45);
    transform: translateY(-1px);
}
.header-import-btn .btn-label {
    display: inline;
}
@media (max-width: 600px) {
    .header-import-btn {
        padding: 8px 16px; font-size: .78rem;
    }
    .header-import-btn .btn-label { display: inline; }
}

/* ════════════════════════════════════════════
   REPORT MODAL
   ════════════════════════════════════════════ */
.report-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6); backdrop-filter: blur(8px);
    z-index: 700; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all .3s var(--ease);
}
.report-overlay.open { opacity: 1; visibility: visible; }

.report-dialog {
    width: 720px; max-width: 96vw; max-height: 90vh;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: 0 24px 80px rgba(var(--shadow-color), .6);
    display: flex; flex-direction: column;
    transform: translateY(16px) scale(.97);
    transition: transform .3s var(--ease);
    overflow: hidden;
}
.report-overlay.open .report-dialog { transform: translateY(0) scale(1); }

.report-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
    background: var(--bg-card-alt);
}
.report-header-left {
    display: flex; align-items: center; gap: 10px;
}
.report-header-left i {
    font-size: 1.2rem;
    background: linear-gradient(135deg, var(--purple), #60a5fa);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.report-header h2 {
    font-size: 1rem; font-weight: 800; color: var(--text-1);
}
.report-header-actions { display: flex; gap: 8px; align-items: center; }

.report-export-btn {
    padding: 8px 18px; border: 1px solid var(--purple-border);
    background: var(--purple-bg); color: var(--purple);
    border-radius: var(--r-sm); font-size: .8rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 6px;
    transition: all .2s var(--ease);
}
.report-export-btn:hover { background: var(--purple); color: #fff; }

.report-close-btn {
    background: none; border: 1px solid var(--border); color: var(--text-3);
    width: 34px; height: 34px; border-radius: var(--r-sm); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; transition: all .15s var(--ease);
}
.report-close-btn:hover { background: var(--bg-hover); color: var(--text-1); }

.report-body {
    overflow-y: auto; padding: 24px;
    display: flex; flex-direction: column; gap: 22px;
}

.report-section {
    background: var(--bg-card-alt); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 20px;
}
.report-section-title {
    font-size: .92rem; font-weight: 700; color: var(--text-1);
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.report-section-title i { color: var(--purple); }
.report-section-desc {
    font-size: .78rem; color: var(--text-3); margin-bottom: 14px; margin-top: -8px;
}

.report-status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 999px; font-size: .8rem; font-weight: 700;
    margin-bottom: 12px;
}
.report-status-badge.superavit {
    background: rgba(34, 211, 167, .12); color: var(--green-bright);
    border: 1px solid var(--green-border);
}
.report-status-badge.deficit {
    background: rgba(239, 68, 68, .12); color: var(--danger-hover);
    border: 1px solid rgba(239, 68, 68, .3);
}

.report-summary-text {
    font-size: .84rem; color: var(--text-2); line-height: 1.6; margin-bottom: 16px;
}

.report-kpi-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.report-kpi {
    padding: 12px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-sm); text-align: center;
}
.report-kpi-label { font-size: .68rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.report-kpi-value { font-size: 1.1rem; font-weight: 800; margin-top: 4px; letter-spacing: -.02em; }
.report-kpi-value.green { color: var(--green-bright); }
.report-kpi-value.rose { color: var(--rose-bright); }
.report-kpi-value.teal { color: var(--teal-bright); }
.report-kpi-value.blue { color: var(--blue-bright); }

.report-trends { display: flex; flex-direction: column; gap: 8px; }
.report-trend-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.report-trend-rank {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800;
    background: var(--purple-bg); color: var(--purple);
}
.report-trend-cat { flex: 1; font-size: .82rem; font-weight: 600; color: var(--text-1); }
.report-trend-values { text-align: right; }
.report-trend-pct { font-size: .88rem; font-weight: 800; }
.report-trend-pct.up { color: var(--danger-hover); }
.report-trend-pct.down { color: var(--green-bright); }
.report-trend-pct.neutral { color: var(--text-3); }
.report-trend-detail { font-size: .68rem; color: var(--text-3); }

.report-tips { display: flex; flex-direction: column; gap: 10px; }
.report-tip {
    display: flex; gap: 12px; padding: 12px 16px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-sm); border-left: 3px solid var(--purple);
}
.report-tip-num {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    background: var(--purple); color: #fff; font-size: .7rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.report-tip-text { font-size: .82rem; color: var(--text-2); line-height: 1.5; }

.report-projection {
    padding: 16px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.report-proj-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid rgba(var(--shadow-color), .08);
}
.report-proj-row:last-child { border-bottom: none; }
.report-proj-label { font-size: .82rem; color: var(--text-2); }
.report-proj-value { font-size: .88rem; font-weight: 700; color: var(--text-1); }

/* Report responsive */
@media (max-width: 600px) {
    .report-dialog { max-width: 100vw; max-height: 100vh; border-radius: 0; }
    .report-header { padding: 14px 16px; flex-wrap: wrap; gap: 10px; }
    .report-header h2 { font-size: .88rem; }
    .report-body { padding: 16px; gap: 16px; }
    .report-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .report-section { padding: 14px; }
    .report-export-btn { padding: 6px 12px; font-size: .75rem; }
}

/* ════════════════════════════════════════════
   BUDGET LIMITS MODAL
   ════════════════════════════════════════════ */
.budget-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
    z-index: 650; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all .25s var(--ease);
}
.budget-overlay.open { opacity: 1; visibility: visible; }

.budget-dialog {
    width: 560px; max-width: 96vw; max-height: 90vh;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-xl); padding: 24px;
    box-shadow: 0 16px 50px rgba(var(--shadow-color), .5);
    display: flex; flex-direction: column; gap: 18px;
    transform: translateY(12px) scale(.97); transition: transform .25s var(--ease);
    overflow: hidden;
}
.budget-overlay.open .budget-dialog { transform: translateY(0) scale(1); }

.budget-header {
    display: flex; align-items: center; justify-content: space-between;
}
.budget-header h2 {
    font-size: 1rem; font-weight: 800;
    display: flex; align-items: center; gap: 8px;
}
.budget-header h2 i { color: var(--purple); }
.budget-close-btn {
    background: none; border: 1px solid var(--border); color: var(--text-3);
    width: 32px; height: 32px; border-radius: var(--r-sm); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s var(--ease);
}
.budget-close-btn:hover { background: var(--bg-hover); color: var(--text-1); }

.budget-desc {
    font-size: .82rem; color: var(--text-2); line-height: 1.5;
}

/* Budget Interactive Chart Area */
.budget-chart-area {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 12px 0;
}
.budget-chart-wrap {
    position: relative; width: 200px; height: 200px; flex-shrink: 0;
    cursor: grab;
}
.budget-chart-wrap:active { cursor: grabbing; }
.budget-chart-wrap canvas { width: 100% !important; height: 100% !important; }
.budget-chart-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    pointer-events: none;
}
.budget-total-pct {
    font-size: 1.4rem; font-weight: 900; letter-spacing: -.03em;
    color: var(--green-bright);
    transition: color .3s var(--ease);
}
.budget-total-pct.warning { color: var(--amber); }
.budget-total-pct.danger { color: var(--danger); }
.budget-total-label {
    font-size: .65rem; font-weight: 600; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .06em;
}
.budget-chart-legend {
    flex: 1; display: flex; flex-direction: column; gap: 3px;
    max-height: 200px; overflow-y: auto;
}
.budget-legend-item {
    display: flex; align-items: center; gap: 8px; padding: 4px 8px;
    border-radius: var(--r-sm); transition: background .15s var(--ease);
    cursor: pointer;
}
.budget-legend-item:hover { background: var(--bg-hover); }
.budget-legend-item.active { background: var(--bg-hover); box-shadow: inset 0 0 0 1px var(--border-light); }
.budget-legend-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    transition: transform .15s var(--ease);
}
.budget-legend-item:hover .budget-legend-dot { transform: scale(1.3); }
.budget-legend-name { flex: 1; font-size: .76rem; font-weight: 500; color: var(--text-2); }
.budget-legend-pct { font-size: .78rem; font-weight: 800; color: var(--text-1); min-width: 36px; text-align: right; }

/* Toggle Manual Section */
.budget-toggle-manual {
    width: 100%; padding: 10px; border: 1px dashed var(--border);
    background: none; color: var(--text-3); border-radius: var(--r-sm);
    font-size: .78rem; font-weight: 600; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all .2s var(--ease);
}
.budget-toggle-manual:hover { background: var(--bg-hover); color: var(--text-2); border-color: var(--border-light); }
.budget-toggle-icon { transition: transform .25s var(--ease); font-size: .65rem; }
.budget-toggle-manual.expanded .budget-toggle-icon { transform: rotate(180deg); }

/* Collapsible List */
.budget-list-collapsed {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .35s var(--ease), opacity .25s var(--ease), padding .25s var(--ease);
    padding: 0;
}
.budget-list-expanded {
    max-height: 600px; overflow-y: auto; opacity: 1;
    padding-top: 8px;
    transition: max-height .35s var(--ease), opacity .25s var(--ease), padding .25s var(--ease);
}

.budget-list {
    display: flex; flex-direction: column; gap: 6px;
}
.budget-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: var(--bg-card-alt); border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.budget-cat-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.budget-cat-name {
    flex: 1; font-size: .82rem; font-weight: 600; color: var(--text-1);
}
.budget-cat-input {
    width: 56px; padding: 5px 6px; border: 1px solid var(--border);
    background: var(--bg-input); color: var(--text-1);
    border-radius: var(--r-sm); font-size: .82rem; font-family: inherit;
    text-align: center; font-weight: 700; outline: none;
    transition: border-color .2s var(--ease);
}
.budget-cat-input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(167,139,250,.15);}
.budget-pct-label { font-size: .78rem; font-weight: 600; color: var(--text-3); }

/* Drag hint */
.budget-drag-hint {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: .7rem; color: var(--text-3); padding: 4px 0;
}
.budget-drag-hint i { font-size: .65rem; }

/* Budget responsive */
@media (max-width: 600px) {
    .budget-dialog { width: 96vw; max-height: 96vh; padding: 16px; gap: 12px; }
    .budget-chart-area { flex-direction: column; align-items: center; }
    .budget-chart-wrap { width: 160px; height: 160px; }
    .budget-total-pct { font-size: 1.1rem; }
    .budget-chart-legend { max-height: 140px; width: 100%; }
    .budget-legend-name { font-size: .72rem; }
    .budget-legend-pct { font-size: .72rem; }
    .budget-row { padding: 7px 10px; gap: 8px; }
    .budget-cat-name { font-size: .78rem; }
    .budget-cat-input { width: 48px; font-size: .78rem; padding: 4px; }
}

.budget-actions {
    display: flex; gap: 10px; justify-content: flex-end;
    padding-top: 4px; border-top: 1px solid var(--border);
}
.budget-reset-btn {
    padding: 9px 16px; border: 1px solid var(--border);
    background: var(--bg-hover); color: var(--text-2);
    border-radius: var(--r-sm); font-size: .82rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 6px;
    transition: all .2s var(--ease);
}
.budget-reset-btn:hover { background: var(--bg-input); color: var(--text-1); }
.budget-save-btn {
    padding: 9px 20px; border: none;
    background: var(--purple); color: #fff;
    border-radius: var(--r-sm); font-size: .82rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 6px;
    transition: all .2s var(--ease);
}
.budget-save-btn:hover { filter: brightness(1.15); box-shadow: 0 0 16px rgba(167,139,250,.25); }

/* ════════════════════════════════════════════
   OBJECTIVES / GOALS VIEW
   ════════════════════════════════════════════ */
.goals-section { max-width: 900px; margin: 0 auto; }
.goals-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px;
}
.goals-header h1 {
    font-size: 1.2rem; font-weight: 800; color: var(--text-1);
    display: flex; align-items: center; gap: 10px;
}
.goals-header h1 i { color: var(--purple); }
.goals-add-btn {
    padding: 10px 20px; border: none;
    background: var(--purple); color: #fff;
    border-radius: var(--r-sm); font-size: .84rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 6px;
    transition: all .2s var(--ease);
}
.goals-add-btn:hover { filter: brightness(1.15); box-shadow: 0 0 16px rgba(167,139,250,.25); transform: translateY(-1px); }

/* AI Planning Panel */
.goals-ai-panel {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-lg); overflow: hidden; margin-bottom: 24px;
}
.goals-ai-header {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px;
    background: linear-gradient(90deg, rgba(167,139,250,.06), rgba(96,165,250,.04));
    border-bottom: 1px solid var(--border);
}
.goals-ai-icon {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--purple), #60a5fa);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #fff;
}
.goals-ai-header h2 { font-size: .95rem; font-weight: 800; color: var(--text-1); margin: 0; }
.goals-ai-header p { font-size: .76rem; color: var(--text-3); margin: 2px 0 0; }
.goals-ai-header > div:nth-child(2) { flex: 1; }
.goals-ai-refresh {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--bg-hover); color: var(--text-2); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s var(--ease); flex-shrink: 0;
}
.goals-ai-refresh:hover { background: var(--purple); color: #fff; border-color: var(--purple); }

.goals-ai-body { padding: 20px; }
.goals-ai-empty {
    text-align: center; padding: 30px; color: var(--text-3);
}
.goals-ai-empty i { font-size: 2rem; margin-bottom: 12px; color: var(--purple); opacity: .4; }
.goals-ai-empty p { font-size: .86rem; max-width: 400px; margin: 0 auto; line-height: 1.5; }

.goals-ai-card {
    background: var(--bg-card-alt); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 16px; margin-bottom: 12px;
}
.goals-ai-card:last-child { margin-bottom: 0; }
.goals-ai-card-title {
    font-size: .88rem; font-weight: 700; color: var(--text-1);
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.goals-ai-card-title i { color: var(--purple); }
.goals-ai-card p { font-size: .82rem; color: var(--text-2); line-height: 1.5; margin: 0; }

.goals-ai-cuts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.goals-ai-cut-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 12px; background: var(--bg-card); border-radius: var(--r-sm);
    font-size: .8rem; color: var(--text-2);
}
.goals-ai-cut-save { color: var(--green-bright); font-weight: 700; }

.goals-ai-goal-row {
    padding: 10px 0; border-bottom: 1px solid rgba(var(--shadow-color), .06);
}
.goals-ai-goal-row:last-child { border-bottom: none; }
.goals-ai-goal-name {
    font-size: .86rem; font-weight: 600; color: var(--text-1);
    display: flex; align-items: center; gap: 8px;
}
.goals-ai-goal-name i { color: var(--purple); font-size: .8rem; }
.goals-ai-feasibility {
    font-size: .68rem; font-weight: 800; text-transform: uppercase;
    padding: 2px 8px; border-radius: 4px;
    background: rgba(var(--shadow-color), .06);
}
.goals-ai-goal-detail {
    font-size: .78rem; color: var(--text-3); margin-top: 4px; padding-left: 24px;
}

.goals-ai-tip { border-left: 3px solid var(--purple); }

/* Goals list */
.goals-list {
    display: flex; flex-direction: column; gap: 14px;
}
.goals-empty {
    text-align: center; padding: 60px 20px; color: var(--text-3);
    background: var(--bg-card); border: 2px dashed var(--border);
    border-radius: var(--r-lg);
}
.goals-empty i { font-size: 2.5rem; margin-bottom: 14px; color: var(--purple); opacity: .3; }
.goals-empty h3 { font-size: 1rem; color: var(--text-2); margin-bottom: 8px; }
.goals-empty p { font-size: .84rem; max-width: 380px; margin: 0 auto 18px; line-height: 1.5; }
.goals-empty-btn {
    padding: 10px 22px; border: none;
    background: var(--purple); color: #fff;
    border-radius: var(--r-sm); font-size: .84rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all .2s var(--ease);
}
.goals-empty-btn:hover { filter: brightness(1.15); }

/* Goal card */
.goal-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 18px 22px;
    transition: all .2s var(--ease); animation: fadeInUp .3s var(--ease);
}
.goal-card:hover { box-shadow: 0 4px 20px rgba(var(--shadow-color), .15); }
.goal-card.goal-complete { border-color: var(--green-border); }
.goal-card.goal-complete::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--green);
}
.goal-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.goal-card-icon {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    background: var(--purple-bg); color: var(--purple);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.goal-complete .goal-card-icon { background: rgba(34,211,167,.12); color: var(--green-bright); }
.goal-card-info { flex: 1; min-width: 0; }
.goal-card-info h3 { font-size: .92rem; font-weight: 700; color: var(--text-1); margin: 0 0 2px; }
.goal-card-deadline { font-size: .72rem; color: var(--text-3); }
.goal-card-actions { display: flex; gap: 4px; }
.goal-card-actions button {
    width: 30px; height: 30px; border-radius: var(--r-sm);
    border: 1px solid var(--border); background: none; color: var(--text-3);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: .75rem; transition: all .15s var(--ease);
}
.goal-card-actions button:hover { background: var(--bg-hover); color: var(--text-1); }
.goal-card-actions button:last-child:hover { color: var(--danger); }

.goal-card-progress { margin-bottom: 8px; }
.goal-prog-bar-wrap {
    height: 8px; background: var(--bg-hover); border-radius: 4px; overflow: hidden; margin-bottom: 6px;
}
.goal-prog-bar {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--purple), #60a5fa);
    transition: width .6s var(--ease);
}
.goal-prog-info { display: flex; justify-content: space-between; align-items: center; }
.goal-prog-pct { font-size: .82rem; font-weight: 800; color: var(--text-1); }
.goal-prog-values { font-size: .74rem; color: var(--text-3); }
.goal-card-remaining {
    font-size: .78rem; color: var(--text-2); padding-top: 4px;
    border-top: 1px solid rgba(var(--shadow-color), .06);
}

/* Goal modal */
.goal-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
    z-index: 660; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all .25s var(--ease);
}
.goal-modal-overlay.open { opacity: 1; visibility: visible; }
.goal-modal {
    width: 440px; max-width: 94vw;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-xl); padding: 24px;
    box-shadow: 0 16px 50px rgba(var(--shadow-color), .5);
    transform: translateY(12px) scale(.97); transition: transform .25s var(--ease);
}
.goal-modal-overlay.open .goal-modal { transform: translateY(0) scale(1); }
.goal-modal-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
}
.goal-modal-header h2 {
    font-size: 1rem; font-weight: 800; display: flex; align-items: center; gap: 8px;
}
.goal-modal-header h2 i { color: var(--purple); }
.goal-modal-close {
    background: none; border: 1px solid var(--border); color: var(--text-3);
    width: 32px; height: 32px; border-radius: var(--r-sm); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s var(--ease);
}
.goal-modal-close:hover { background: var(--bg-hover); color: var(--text-1); }

.form-group { margin-bottom: 14px; }
.form-group label {
    display: block; font-size: .78rem; font-weight: 600; color: var(--text-2);
    margin-bottom: 5px; text-transform: uppercase; letter-spacing: .03em;
}
.form-group input, .form-group select {
    width: 100%; padding: 10px 14px; border: 1px solid var(--border);
    background: var(--bg-input); color: var(--text-1);
    border-radius: var(--r-sm); font-size: .86rem; font-family: inherit;
    outline: none; transition: border-color .3s var(--ease-in-out-smooth), box-shadow .35s var(--ease-out-expo), background .25s var(--ease);
    box-sizing: border-box;
}
.form-group input:focus, .form-group select:focus {
    border-color: var(--purple); box-shadow: 0 0 0 3px rgba(167,139,250,.15);
}
.submit-btn {
    width: 100%; padding: 12px; border: none;
    background: var(--purple); color: #fff;
    border-radius: var(--r-sm); font-size: .88rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all .2s var(--ease); margin-top: 6px;
}
.submit-btn:hover { filter: brightness(1.15); }

/* Goals responsive */
@media (max-width: 600px) {
    .goals-header { flex-direction: column; gap: 12px; align-items: stretch; }
    .goals-header h1 { font-size: 1rem; }
    .goals-add-btn { justify-content: center; }
    .goals-ai-header { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
    .goals-ai-body { padding: 14px; }
    .goal-card { padding: 14px 16px; }
    .goal-card-actions button { width: 26px; height: 26px; }
}

/* ════════════════════════════════════════════
   IMPORT MODAL
   ════════════════════════════════════════════ */
.import-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
    z-index: 670; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all .25s var(--ease);
}
.import-overlay.open { opacity: 1; visibility: visible; }
.import-dialog {
    width: 860px; max-width: 96vw; max-height: 90vh;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-xl); overflow: hidden;
    box-shadow: 0 16px 50px rgba(var(--shadow-color), .5);
    display: flex; flex-direction: column;
    transform: translateY(12px) scale(.97); transition: transform .25s var(--ease);
}
.import-overlay.open .import-dialog { transform: translateY(0) scale(1); }
.import-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, rgba(96,165,250,.06), rgba(167,139,250,.04));
}
.import-header-left { display: flex; align-items: center; gap: 10px; }
.import-header-left i { color: var(--purple); font-size: 1.1rem; }
.import-header h2 { font-size: 1rem; font-weight: 800; }
.import-close-btn {
    background: none; border: 1px solid var(--border); color: var(--text-3);
    width: 32px; height: 32px; border-radius: var(--r-sm); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s var(--ease);
}
.import-close-btn:hover { background: var(--bg-hover); color: var(--text-1); }

.import-step { padding: 20px 24px; overflow-y: auto; flex: 1; }

/* Info banner */
.import-info {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; margin-bottom: 18px;
    background: rgba(96,165,250,.06); border: 1px solid rgba(96,165,250,.15);
    border-radius: var(--r-md); font-size: .8rem; color: var(--text-2); line-height: 1.5;
}
.import-info-icon { color: #60a5fa; font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.import-info strong { color: var(--text-1); }

/* Dropzone */
.import-dropzone {
    border: 2px dashed var(--border); border-radius: var(--r-lg);
    padding: 50px 20px; text-align: center; cursor: pointer;
    transition: all .2s var(--ease); margin-bottom: 16px;
}
.import-dropzone:hover, .import-dropzone.drag-over {
    border-color: var(--purple); background: rgba(167,139,250,.04);
}
.import-dropzone-content i {
    font-size: 2.5rem; color: var(--purple); opacity: .4; margin-bottom: 14px;
}
.import-dropzone-content p { font-size: .9rem; color: var(--text-2); margin: 0 0 6px; }
.import-dropzone-content p strong { color: var(--purple); }
.import-dropzone-hint { font-size: .72rem; color: var(--text-3); }

/* File info */
.import-file-info {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; margin-bottom: 16px;
    background: rgba(34,211,167,.06); border: 1px solid rgba(34,211,167,.2);
    border-radius: var(--r-md); font-size: .86rem; color: var(--text-1);
}
.import-file-info > i { color: var(--green-bright); font-size: 1.1rem; }
.import-file-info span:first-of-type { flex: 1; font-weight: 600; }
.import-bank-detected {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    padding: 3px 10px; border-radius: 4px;
    background: var(--purple-bg); color: var(--purple);
}
.import-file-remove {
    background: none; border: none; color: var(--text-3); cursor: pointer;
    font-size: .9rem; padding: 4px; transition: color .15s var(--ease);
}
.import-file-remove:hover { color: var(--danger); }

.import-process-btn {
    width: 100%; padding: 13px; border: none;
    background: var(--purple); color: #fff;
    border-radius: var(--r-sm); font-size: .88rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all .2s var(--ease);
}
.import-process-btn:hover:not(:disabled) { filter: brightness(1.15); }
.import-process-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Summary cards */
.import-summary-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;
    margin-bottom: 18px;
}
.import-summary-card {
    background: var(--bg-card-alt); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 14px 16px; text-align: center;
}
.isc-label { display: block; font-size: .72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.isc-value { font-size: 1.1rem; font-weight: 800; color: var(--text-1); }
.isc-value.green { color: var(--green-bright); }
.isc-value.rose { color: var(--rose-bright); }

/* Transaction table */
.import-table-wrap {
    max-height: 340px; overflow-y: auto; border: 1px solid var(--border);
    border-radius: var(--r-md); margin-bottom: 16px;
}
.import-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.import-table thead { position: sticky; top: 0; z-index: 2; }
.import-table th {
    padding: 10px 8px; text-align: left; font-weight: 700;
    background: var(--bg-card-alt); color: var(--text-2);
    border-bottom: 1px solid var(--border); font-size: .72rem;
    text-transform: uppercase; letter-spacing: .03em;
}
.import-table td {
    padding: 8px 8px; border-bottom: 1px solid rgba(var(--shadow-color), .04);
    color: var(--text-1); vertical-align: middle;
}
.import-table tr:nth-child(even) { background: rgba(var(--shadow-color), .02); }
.import-table tr:hover { background: rgba(var(--shadow-color), .06); }
.import-row-income { background: rgba(34,211,167,.03) !important; }
.import-td-desc {
    max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 500;
}
.import-td-value { font-weight: 700; white-space: nowrap; }
.import-td-value.green { color: var(--green-bright); }
.import-td-value.rose { color: var(--rose-bright); }
.import-td-value.teal { color: var(--teal-bright, #2dd4bf); }
.import-table select {
    padding: 4px 6px; font-size: .74rem; font-family: inherit;
    border: 1px solid var(--border); background: var(--bg-input);
    color: var(--text-1); border-radius: 4px; outline: none;
    cursor: pointer; max-width: 130px;
}
.import-table select:focus { border-color: var(--purple); }
/* Month selector — compact and distinct */
.import-month-select {
    min-width: 90px; max-width: 100px !important;
    font-weight: 600 !important; font-size: .72rem !important;
    padding: 3px 4px !important;
    background: rgba(167,139,250,.06) !important;
    border-color: rgba(167,139,250,.2) !important;
}
.import-month-select:focus { border-color: var(--purple) !important; box-shadow: 0 0 0 2px rgba(167,139,250,.12); }
.import-table input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--purple); }

/* Import actions */
.import-actions {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 6px;
}
.import-back-btn {
    padding: 10px 18px; border: 1px solid var(--border);
    background: none; color: var(--text-2); border-radius: var(--r-sm);
    font-size: .82rem; font-weight: 600; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 6px;
    transition: all .2s var(--ease);
}
.import-back-btn:hover { background: var(--bg-hover); color: var(--text-1); }
.import-actions-right { display: flex; align-items: center; gap: 14px; }
.import-selected-count { font-size: .78rem; color: var(--text-3); font-weight: 600; }
.import-confirm-btn {
    padding: 10px 22px; border: none;
    background: var(--green); color: #fff;
    border-radius: var(--r-sm); font-size: .84rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 6px;
    transition: all .2s var(--ease);
}
.import-confirm-btn:hover:not(:disabled) { filter: brightness(1.15); box-shadow: 0 0 16px rgba(34,211,167,.25); }
.import-confirm-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Import responsive */
@media (max-width: 600px) {
    .import-dialog { max-width: 100vw; max-height: 100vh; border-radius: 0; }
    .import-step { padding: 14px 16px; }
    .import-summary-cards { grid-template-columns: 1fr; }
    .import-table { font-size: .7rem; }
    .import-td-desc { max-width: 120px; }
    .import-actions { flex-direction: column; gap: 10px; }
    .import-actions-right { width: 100%; justify-content: space-between; }
}

/* Inline import button (daily section) */
.section-header-right { display: flex; align-items: center; gap: 6px; }
.import-inline-btn {
    padding: 5px 12px; border: 1px solid var(--border);
    background: rgba(167,139,250,.06); color: var(--purple);
    border-radius: var(--r-sm); font-size: .72rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 5px;
    transition: all .2s var(--ease);
}
.import-inline-btn:hover {
    background: var(--purple); color: #fff; border-color: var(--purple);
    box-shadow: 0 0 12px rgba(167,139,250,.2);
}

/* Sort toggle */
.sort-toggle {
    display: flex; border: 1px solid var(--border);
    border-radius: var(--r-sm); overflow: hidden;
    background: var(--bg-card-alt);
}
.sort-btn {
    padding: 4px 10px; border: none;
    background: transparent; color: var(--text-3);
    font-size: .68rem; font-weight: 600; font-family: inherit;
    cursor: pointer; display: flex; align-items: center; gap: 4px;
    transition: all .2s var(--ease);
    white-space: nowrap;
}
.sort-btn:not(:last-child) { border-right: 1px solid var(--border); }
.sort-btn:hover { color: var(--text-1); background: var(--bg-hover); }
.sort-btn.active {
    background: var(--purple); color: #fff;
    box-shadow: 0 0 8px rgba(167,139,250,.2);
}
.sort-btn.active i { color: #fff; }
.sort-btn i { font-size: .62rem; }
@media (max-width: 600px) {
    .sort-btn span { display: none; }
    .sort-btn { padding: 4px 8px; }
    .sort-toggle { order: -1; }
}

/* Dedup warning in review step */
.import-dedup-warning {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; margin-bottom: 16px;
    background: rgba(251,191,36,.06); border: 1px solid rgba(251,191,36,.2);
    border-radius: var(--r-md); font-size: .78rem; color: var(--text-2); line-height: 1.5;
}
.import-dedup-warning i { color: #fbbf24; font-size: 1rem; margin-top: 1px; flex-shrink: 0; }
.import-dedup-warning strong { color: var(--text-1); }

@media (max-width: 600px) {
    .import-inline-btn span { display: none; }
    .import-dedup-warning { font-size: .72rem; padding: 10px 12px; }
}

/* Duplicate detection info banner */
.import-dedup-info {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; margin-bottom: 10px;
    background: rgba(34, 211, 167, .06); border: 1px solid rgba(34, 211, 167, .2);
    border-radius: var(--r-md); font-size: .78rem; color: var(--text-2); line-height: 1.5;
}
.import-dedup-info i { color: var(--green); font-size: 1rem; margin-top: 1px; flex-shrink: 0; }
.import-dedup-info strong { color: var(--text-1); }

/* Duplicate row styling */
.import-row-duplicate {
    opacity: .45;
    background: rgba(var(--shadow-color), .04) !important;
}
.import-row-duplicate .import-td-desc {
    text-decoration: line-through;
    text-decoration-color: var(--text-3);
}

/* DUP badge */
.import-dup-badge {
    display: inline-block;
    padding: 1px 5px; margin-left: 4px;
    background: rgba(245, 158, 11, .15); color: #f59e0b;
    font-size: .58rem; font-weight: 800;
    border-radius: 3px; letter-spacing: .04em;
    vertical-align: middle;
}

/* ════════════════════════════════════════════
   ONBOARDING GUIDE
   Layering: backdrop(998) → highlights(999) → card(1001)
   ════════════════════════════════════════════ */

/* Backdrop — dark overlay, sits BELOW highlighted elements */
.guide-backdrop {
    position: fixed; inset: 0; z-index: 998;
    background: rgba(0, 0, 0, .65);
    opacity: 0; visibility: hidden;
    transition: all .3s var(--ease);
}
.guide-backdrop.open { opacity: 1; visibility: visible; }

/* Card wrapper — centers the card, sits ABOVE highlighted elements */
.guide-card-wrap {
    position: fixed; inset: 0; z-index: 1001;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: all .3s var(--ease);
}
.guide-card-wrap.open { opacity: 1; visibility: visible; }

/* The actual card */
.guide-card {
    position: relative;
    pointer-events: auto;
    width: 440px; max-width: 92vw;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 36px 32px 28px;
    box-shadow:
        0 20px 60px rgba(var(--shadow-color), .5),
        0 0 80px rgba(167, 139, 250, .08);
    text-align: center;
    animation: guideSlideIn .4s var(--ease);
}

.guide-close {
    position: absolute; top: 14px; right: 14px;
    background: none; border: none; color: var(--text-3); cursor: pointer;
    font-size: 1.1rem; padding: 4px 6px; border-radius: var(--r-sm);
    transition: all .15s var(--ease);
}
.guide-close:hover { color: var(--text-1); background: var(--bg-hover); }

.guide-icon-wrap {
    width: 64px; height: 64px; border-radius: 50%;
    margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    background: rgba(167, 139, 250, .12);
    color: var(--purple);
    transition: all .3s var(--ease);
}

.guide-title {
    font-size: 1.1rem; font-weight: 800; color: var(--text-1);
    margin-bottom: 10px; letter-spacing: -.02em;
}

.guide-text {
    font-size: .88rem; color: var(--text-2); line-height: 1.6;
    margin-bottom: 22px;
}
.guide-text strong { color: var(--text-1); font-weight: 700; }

.guide-progress {
    display: flex; gap: 6px; justify-content: center;
    margin-bottom: 22px;
}
.guide-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border);
    transition: all .3s var(--ease);
}
.guide-dot.active {
    width: 24px; border-radius: 4px;
    background: var(--purple) !important;
    box-shadow: 0 0 10px rgba(167, 139, 250, .4);
}

.guide-actions {
    display: flex; justify-content: center; gap: 10px;
}

.guide-btn {
    padding: 10px 22px; border-radius: var(--r-sm); font-size: .85rem;
    font-weight: 600; font-family: inherit; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: all .2s var(--ease);
}

.guide-btn-next {
    background: var(--purple); color: #fff; border: none;
    box-shadow: 0 0 16px rgba(167, 139, 250, .25);
}
.guide-btn-next:hover { filter: brightness(1.15); transform: translateY(-1px); }

.guide-btn-back {
    background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-2);
}
.guide-btn-back:hover { background: var(--bg-input); color: var(--text-1); }

.guide-btn-skip {
    background: none; border: none; color: var(--text-3);
    padding: 10px 14px; font-size: .8rem;
}
.guide-btn-skip:hover { color: var(--text-2); }

/* Highlighted element during guide — sits BETWEEN backdrop and card */
.guide-highlight {
    position: relative; z-index: 999;
    box-shadow: 0 0 0 4px var(--purple), 0 0 30px rgba(167, 139, 250, .35) !important;
    border-radius: var(--r-lg);
    transition: box-shadow .3s var(--ease);
}

@keyframes guideSlideIn {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Guide responsive */
@media (max-width: 480px) {
    .guide-card { padding: 28px 20px 22px; }
    .guide-icon-wrap { width: 52px; height: 52px; font-size: 1.3rem; margin-bottom: 14px; }
    .guide-title { font-size: .98rem; }
    .guide-text { font-size: .82rem; margin-bottom: 18px; }
    .guide-actions { flex-wrap: wrap; gap: 8px; }
    .guide-btn { padding: 9px 16px; font-size: .8rem; }
    .guide-btn-skip { order: 3; width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════
   PREMIUM BADGE
   ════════════════════════════════════════════ */
.premium-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 20px;
    font-size: .65rem; font-weight: 800; letter-spacing: .04em;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff; margin-left: 8px;
    text-transform: uppercase;
    animation: badgeGlow 2s ease-in-out infinite alternate;
}
.premium-badge.admin-badge {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
}
@keyframes badgeGlow {
    from { box-shadow: 0 0 4px rgba(245, 158, 11, .3); }
    to { box-shadow: 0 0 12px rgba(245, 158, 11, .5); }
}

/* ════════════════════════════════════════════
   LOCKED TABS
   ════════════════════════════════════════════ */
.tab-btn.tab-locked { position: relative; opacity: .7; }
.tab-btn.tab-locked .tab-lock {
    font-size: .55rem; margin-left: 4px; opacity: .6;
}

/* ════════════════════════════════════════════
   UPGRADE PREMIUM MODAL
   ════════════════════════════════════════════ */
.upgrade-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6); backdrop-filter: blur(8px);
    z-index: 700; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all .3s var(--ease);
}
.upgrade-overlay.open { opacity: 1; visibility: visible; }

.upgrade-dialog {
    width: 480px; max-width: 94vw; max-height: 90vh; overflow-y: auto;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-xl); padding: 32px 28px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    text-align: center; position: relative;
    transform: translateY(20px) scale(.95);
    transition: transform .3s var(--ease);
}
.upgrade-overlay.open .upgrade-dialog {
    transform: translateY(0) scale(1);
}

.upgrade-close {
    position: absolute; top: 14px; right: 14px;
    background: none; border: 1px solid var(--border); color: var(--text-3);
    width: 32px; height: 32px; border-radius: var(--r-sm); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s var(--ease);
}
.upgrade-close:hover { background: var(--bg-hover); color: var(--text-1); }

.upgrade-icon {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    font-size: 1.6rem; color: #fff;
    box-shadow: 0 6px 24px rgba(245, 158, 11, .35);
}
.upgrade-title {
    font-size: 1.2rem; font-weight: 800; color: var(--text-1); margin-bottom: 4px;
}
.upgrade-pro {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.upgrade-subtitle {
    font-size: .82rem; color: var(--text-2); margin-bottom: 20px;
}

.upgrade-benefits {
    display: flex; flex-direction: column; gap: 10px;
    text-align: left; margin-bottom: 24px;
}
.upgrade-benefit {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 14px; border-radius: var(--r-sm);
    background: var(--bg-card-alt); border: 1px solid var(--border);
}
.upgrade-benefit > i {
    font-size: 1rem; color: var(--purple); margin-top: 2px;
    width: 24px; text-align: center; flex-shrink: 0;
}
.upgrade-benefit strong {
    display: block; font-size: .82rem; font-weight: 700; color: var(--text-1);
    margin-bottom: 2px;
}
.upgrade-benefit span {
    font-size: .74rem; color: var(--text-3); line-height: 1.3;
}

.upgrade-pricing {
    display: flex; gap: 12px; margin-bottom: 16px;
}
.upgrade-plan {
    flex: 1; padding: 16px 12px; border-radius: var(--r-md);
    border: 2px solid var(--border); background: var(--bg-card-alt);
    cursor: pointer; text-decoration: none;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    transition: all .2s var(--ease); position: relative;
}
.upgrade-plan:hover { border-color: var(--purple); transform: translateY(-2px); }

.upgrade-plan-name {
    font-size: .75rem; font-weight: 600; color: var(--text-2);
    text-transform: uppercase; letter-spacing: .05em;
}
.upgrade-plan-price {
    font-size: 1.3rem; font-weight: 900; color: var(--text-1);
}
.upgrade-plan-price small {
    font-size: .65rem; font-weight: 500; color: var(--text-3);
}
.upgrade-plan-save {
    font-size: .68rem; font-weight: 700; color: #f59e0b;
}
.upgrade-plan-badge {
    position: absolute; top: -10px; right: -6px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff; font-size: .6rem; font-weight: 800;
    padding: 2px 8px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: .04em;
}

.upgrade-plan-annual {
    border-color: rgba(245, 158, 11, .4);
    background: rgba(245, 158, 11, .06);
}
.upgrade-plan-annual:hover {
    border-color: #f59e0b;
    box-shadow: 0 4px 20px rgba(245, 158, 11, .15);
}

.upgrade-learn-more {
    font-size: .78rem; color: var(--text-3); text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    transition: color .2s var(--ease);
}
.upgrade-learn-more:hover { color: var(--purple); }
.upgrade-learn-more i { font-size: .65rem; }

@media (max-width: 480px) {
    .upgrade-dialog { padding: 24px 18px; }
    .upgrade-pricing { flex-direction: column; gap: 10px; }
    .upgrade-plan-price { font-size: 1.1rem; }
    .upgrade-icon { width: 52px; height: 52px; font-size: 1.3rem; }
    .upgrade-title { font-size: 1rem; }
}

/* ════════════════════════════════════════════
   PINK THEME — Clean & Vibrant Overrides
   Marisa / Sephora aesthetic
   ════════════════════════════════════════════ */

/* Subtle, airy card shadows */
[data-theme="pink"] .card {
    box-shadow: 0 1px 4px rgba(100, 20, 60, .05);
}
[data-theme="pink"] .card:hover {
    box-shadow: 0 6px 22px rgba(100, 20, 60, .08);
}
[data-theme="pink"] .section-block {
    box-shadow: 0 1px 4px rgba(100, 20, 60, .04);
}
[data-theme="pink"] .section-block:hover {
    box-shadow: 0 4px 16px rgba(100, 20, 60, .07);
}
[data-theme="pink"] .chart-card {
    box-shadow: 0 1px 4px rgba(100, 20, 60, .04);
}

/* Header: clean white with magenta bottom accent */
[data-theme="pink"] #main-header {
    border-bottom: 2px solid rgba(230, 0, 126, .12);
}

/* Month pills: softer look */
[data-theme="pink"] .month-pill {
    border-width: 1.5px;
    font-weight: 600;
}
[data-theme="pink"] .month-pill.active {
    box-shadow: 0 0 14px rgba(230, 0, 126, .2);
}

/* Scrollbar in pink theme */
[data-theme="pink"] ::-webkit-scrollbar-thumb {
    background: #E6B8CC;
}
[data-theme="pink"] ::-webkit-scrollbar-thumb:hover {
    background: #D9A0B8;
}
[data-theme="pink"] ::-webkit-scrollbar-track {
    background: #FDF5F8;
}

/* Import button: rose-to-violet signature gradient */
[data-theme="pink"] .header-import-btn {
    background: linear-gradient(135deg, #E6007E, #9B30FF);
    box-shadow: 0 2px 14px rgba(230, 0, 126, .25);
}
[data-theme="pink"] .header-import-btn:hover {
    box-shadow: 0 4px 24px rgba(230, 0, 126, .35);
    filter: brightness(1.1);
}

/* Inline add buttons: softer gradients */
[data-theme="pink"] .income-btn {
    background: linear-gradient(135deg, #1AAB7A, #15C68A);
    box-shadow: 0 0 10px rgba(26, 171, 122, .18);
}
[data-theme="pink"] .fixed-btn {
    background: linear-gradient(135deg, #C88B2E, #D9A040);
    box-shadow: 0 0 10px rgba(200, 139, 46, .18);
}
[data-theme="pink"] .daily-btn {
    background: linear-gradient(135deg, #E05A72, #F06A82);
    box-shadow: 0 0 10px rgba(224, 90, 114, .18);
}
[data-theme="pink"] .invest-btn {
    background: linear-gradient(135deg, #8B5FBF, #A070D0);
    box-shadow: 0 0 10px rgba(139, 95, 191, .18);
}

/* Tab active state: Pink Marisa glow */
[data-theme="pink"] .tab-btn.active {
    box-shadow: 0 0 12px rgba(230, 0, 126, .22);
}

/* Input focus: magenta ring */
[data-theme="pink"] .inline-input:focus,
[data-theme="pink"] .form-group input:focus,
[data-theme="pink"] .form-group select:focus {
    border-color: #E6007E;
    box-shadow: 0 0 0 3px rgba(230, 0, 126, .1);
}

/* Submit / action buttons: full magenta */
[data-theme="pink"] .submit-btn {
    background: #E6007E;
}
[data-theme="pink"] .submit-btn:hover {
    box-shadow: 0 0 18px rgba(230, 0, 126, .22);
}

/* Goals add button */
[data-theme="pink"] .goals-add-btn {
    background: #E6007E;
}
[data-theme="pink"] .goals-add-btn:hover {
    box-shadow: 0 0 16px rgba(230, 0, 126, .2);
}

/* Gamification panel: refined gradient stripe */
[data-theme="pink"] .gamification-panel::before {
    background: linear-gradient(90deg, #E6007E, #FF3DA1, #9B30FF, #1AAB7A);
}

/* Modal overlays: slightly warmer backdrop */
[data-theme="pink"] .modal-overlay,
[data-theme="pink"] .confirm-overlay,
[data-theme="pink"] .report-overlay,
[data-theme="pink"] .budget-overlay,
[data-theme="pink"] .goal-modal-overlay,
[data-theme="pink"] .import-overlay,
[data-theme="pink"] .upgrade-overlay {
    background: rgba(60, 10, 35, .45);
}

/* Copy banner accent */
[data-theme="pink"] .copy-btn {
    background: #E6007E;
    border-color: rgba(230, 0, 126, .3);
}

/* Toast success color */
[data-theme="pink"] .toast.success i {
    color: #1AAB7A;
}

/* Premium badge: warm gold on clean white */
[data-theme="pink"] .premium-badge {
    background: linear-gradient(135deg, #C88B2E, #D9A040);
}

/* Guide highlight ring: magenta */
[data-theme="pink"] .guide-highlight {
    box-shadow: 0 0 0 4px #E6007E, 0 0 30px rgba(230, 0, 126, .25) !important;
}

/* ════════════════════════════════════════════
   WHATSAPP SUPPORT FAB
   ════════════════════════════════════════════ */
.whatsapp-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0;
    width: 56px;
    height: 56px;
    background: #25D366;
    color: #fff;
    border-radius: 28px;
    box-shadow: 0 4px 16px rgba(37, 211, 102, .35), 0 2px 6px rgba(0,0,0,.15);
    text-decoration: none;
    font-family: inherit;
    font-size: 1.55rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    transition: all .35s var(--ease-out-back);
}
.whatsapp-fab i {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    font-size: 1.55rem;
    transition: transform .3s var(--ease);
}
.whatsapp-fab-label {
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    opacity: 0;
    max-width: 0;
    transition: opacity .25s ease, max-width .35s var(--ease-out-back);
    pointer-events: none;
}
.whatsapp-fab:hover {
    width: auto;
    padding-right: 18px;
    background: #20BA5C;
    box-shadow: 0 6px 24px rgba(37, 211, 102, .45), 0 3px 10px rgba(0,0,0,.18);
    transform: translateY(-2px);
}
.whatsapp-fab:hover i {
    transform: scale(1.08);
}
.whatsapp-fab:hover .whatsapp-fab-label {
    opacity: 1;
    max-width: 120px;
}
.whatsapp-fab:active {
    transform: translateY(0) scale(.97);
}

/* Subtle pulse ring */
.whatsapp-fab::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 28px;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
    animation: whatsapp-pulse 2.5s ease-out infinite;
}
@keyframes whatsapp-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); }
    70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Mobile: smaller, no label expand */
@media (max-width: 600px) {
    .whatsapp-fab {
        bottom: 16px;
        right: 16px;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        font-size: 1.35rem;
    }
    .whatsapp-fab i {
        min-width: 50px;
        height: 50px;
        font-size: 1.35rem;
    }
    .whatsapp-fab:hover {
        width: 50px;
        padding-right: 0;
    }
    .whatsapp-fab:hover .whatsapp-fab-label {
        opacity: 0;
        max-width: 0;
    }
    .whatsapp-fab::before { border-radius: 25px; }
}

/* ── Cartões de crédito ── */
.cards-month-total { font-size:.8rem; font-weight:700; color:var(--purple); margin-right:8px; }
.parcela-badge { font-size:.62rem; font-weight:700; color:var(--text-3); background:var(--bg-card-alt); border:1px solid var(--border); border-radius:var(--r-sm); padding:1px 6px; margin-left:4px; }
.cards-modal-box { max-width:860px; width:94%; }
.cards-modal-body { display:flex; gap:20px; padding:18px; flex-wrap:wrap; }
.cards-col { flex:1; min-width:280px; }
.cards-col h4 { font-size:.82rem; font-weight:700; margin-bottom:10px; color:var(--text-1); }
.cards-form { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.cards-form .inline-input { flex:1; min-width:70px; }
.cards-form select.inline-input { flex-basis:100%; }
.cm-color { width:38px; padding:2px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg-card-alt); cursor:pointer; }
.cm-list { display:flex; flex-direction:column; gap:6px; max-height:320px; overflow-y:auto; }
.cm-row { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--bg-card-alt); border:1px solid var(--border); border-radius:var(--r-sm); font-size:.78rem; }
.cm-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.cm-row-name { font-weight:600; color:var(--text-1); }
.cm-row-info { color:var(--text-3); font-size:.7rem; margin-left:auto; }
.cm-row-val { font-weight:700; color:var(--text-1); }
.cm-empty { color:var(--text-3); font-size:.76rem; font-style:italic; padding:8px 2px; }

/* ── Cartões — visual elegante v2 ── */
.cards-modal-box { max-width:920px; width:96%; }
.cards-tabs { display:flex; gap:6px; padding:12px 18px 0; }
.cards-tab { flex:1; padding:10px; border:1px solid var(--border); background:var(--bg-card-alt); color:var(--text-3);
    border-radius:var(--r-sm) var(--r-sm) 0 0; font-family:inherit; font-weight:700; font-size:.8rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:7px; transition:all .2s var(--ease); }
.cards-tab:hover { color:var(--text-1); }
.cards-tab.active { background:var(--purple); color:#fff; border-color:var(--purple); }
.cards-pane { padding:18px; }
.cf-label { display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--text-3); margin:14px 0 8px; }
.cf-label:first-child { margin-top:0; }
.cadastro-grid { display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; }
.cadastro-grid > div { flex:1; min-width:260px; }
.preview-col { display:flex; flex-direction:column; align-items:center; }

/* Grid de bancos */
.bank-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:7px; margin-bottom:6px; }
.bank-swatch { height:46px; border:2px solid transparent; border-radius:var(--r-sm); cursor:pointer; position:relative;
    font-family:inherit; font-weight:700; font-size:.62rem; overflow:hidden; padding:4px 6px;
    display:flex; align-items:flex-end; text-align:left; box-shadow:0 2px 6px rgba(0,0,0,.18); transition:transform .15s var(--ease); }
.bank-swatch span { position:relative; z-index:1; line-height:1.05; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.bank-swatch:hover { transform:translateY(-2px); }
.bank-swatch.active { border-color:#fff; box-shadow:0 0 0 2px var(--purple),0 4px 10px rgba(0,0,0,.3); }

/* Cartão visual */
.card-face { position:relative; border-radius:14px; padding:16px 18px; aspect-ratio:1.586/1; width:100%; max-width:320px;
    box-shadow:0 8px 22px rgba(0,0,0,.32); overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
    font-family:'Segoe UI',system-ui,sans-serif; }
.card-face.cf-lg { max-width:320px; }
.card-face.cf-sm { max-width:210px; padding:12px 13px; border-radius:11px; }
.cf-shine { position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 42%); pointer-events:none; }
.cf-top { display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:1; }
.cf-bank { font-weight:800; font-size:1rem; letter-spacing:.01em; }
.card-face.cf-sm .cf-bank { font-size:.8rem; }
.cf-contactless { opacity:.85; transform:rotate(90deg); font-size:.85rem; }
.cf-chip { width:38px; height:28px; border-radius:6px; position:relative; z-index:1;
    background:linear-gradient(135deg,#f4e2a1,#c9a227); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.card-face.cf-sm .cf-chip { width:30px; height:22px; }
.cf-number { font-size:1.02rem; letter-spacing:.12em; position:relative; z-index:1; opacity:.92; font-weight:600; }
.card-face.cf-sm .cf-number { font-size:.78rem; }
.cf-bottom { display:flex; justify-content:space-between; align-items:flex-end; position:relative; z-index:1; gap:8px; }
.cf-name { font-weight:700; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; }
.card-face.cf-sm .cf-name { font-size:.6rem; }
.cf-dates { font-size:.6rem; opacity:.85; text-align:right; white-space:nowrap; }
.card-face.cf-sm .cf-dates { font-size:.52rem; }

.cards-cta { width:100%; margin-top:12px; padding:12px; border:none; border-radius:var(--r-sm); cursor:pointer;
    background:var(--purple); color:#fff; font-family:inherit; font-weight:700; font-size:.82rem;
    display:flex; align-items:center; justify-content:center; gap:8px; transition:filter .15s; }
.cards-cta:hover { filter:brightness(1.12); }

/* Meus cartões (grid) */
.my-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.card-face-wrap { position:relative; }
.cf-del { position:absolute; top:6px; right:6px; z-index:3; background:rgba(0,0,0,.45); color:#fff; border:none;
    width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:.72rem; opacity:0; transition:opacity .15s; }
.card-face-wrap:hover .cf-del { opacity:1; }

/* Picker de lançamento */
.cp-card-picker { display:flex; gap:12px; overflow-x:auto; padding:4px 2px 10px; }
.cp-pick { flex:0 0 auto; cursor:pointer; border-radius:12px; padding:3px; border:2px solid transparent; transition:all .18s var(--ease); opacity:.6; }
.cp-pick:hover { opacity:.9; }
.cp-pick.selected { opacity:1; border-color:var(--card-accent,var(--purple)); box-shadow:0 0 0 3px rgba(255,255,255,.06); transform:translateY(-2px); }
.lancar-form { display:flex; flex-wrap:wrap; gap:8px; --card-accent:var(--purple); }
.lancar-form .inline-input { flex:1; min-width:120px; border-color:var(--card-accent); }
.lancar-form .inline-input:focus { box-shadow:0 0 0 2px color-mix(in srgb,var(--card-accent) 30%,transparent); }
.lancar-form .cards-cta { background:var(--card-accent); }

/* ── Cartões — form de lançamento e tabela de compras ── */
.lf-desc { flex:2 1 160px; }
.lf-parcelas { display:flex; align-items:center; gap:5px; flex:1 1 130px; }
.lf-parcelas .inline-input { width:100%; min-width:52px; }
.lf-sep { font-size:.72rem; color:var(--text-3); font-weight:600; }
.lf-hint { font-size:.72rem; color:var(--text-3); margin:8px 2px 0; display:flex; align-items:center; gap:6px; }
.lf-hint i { color:var(--purple); }

.pt-wrap { overflow-x:auto; }
.purchases-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.purchases-table thead th { text-align:left; font-size:.66rem; text-transform:uppercase; letter-spacing:.04em;
    color:var(--text-3); font-weight:700; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
.purchases-table tbody td { padding:9px 10px; border-bottom:1px solid var(--border); color:var(--text-1); white-space:nowrap; }
.purchases-table tbody tr:hover { background:var(--bg-hover); }
.purchases-table .pt-num { text-align:right; }
.purchases-table th:nth-child(3),.purchases-table th:nth-child(4),.purchases-table th:nth-child(5),
.purchases-table th:nth-child(6),.purchases-table th:nth-child(7) { text-align:right; }
.purchases-table .pt-desc { font-weight:600; }
.purchases-table .pt-desc .cm-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:middle; }

/* ── Cartões — edição e agrupamento ── */
.cf-actions { position:absolute; top:6px; right:6px; z-index:3; display:flex; gap:5px; opacity:0; transition:opacity .15s; }
.card-face-wrap:hover .cf-actions, .card-face-wrap.editing .cf-actions { opacity:1; }
.card-face-wrap.editing { outline:2px solid var(--purple); outline-offset:2px; border-radius:12px; }
.cf-act { background:rgba(0,0,0,.5); color:#fff; border:none; width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:.68rem; }
.cf-act:hover { background:rgba(0,0,0,.75); }
.cf-act.cf-del2:hover { background:var(--danger,#dc2626); }
.cta-cancel { font-size:.68rem; font-weight:600; opacity:.85; text-decoration:underline; margin-left:8px; }
.cta-cancel:hover { opacity:1; }
.pt-actions { white-space:nowrap; text-align:right; }
.pt-actions .item-action-btn { margin-left:2px; }
/* Grupo por cartão na seção principal */
.card-group-head { display:flex; justify-content:space-between; align-items:center; padding:9px 4px 5px; margin-top:4px; border-bottom:1px dashed var(--border); }
.card-group-head:first-child { margin-top:0; }
.cg-name { font-weight:700; font-size:.78rem; display:flex; align-items:center; gap:6px; }
.cg-name .cm-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.cg-sub { font-weight:700; font-size:.78rem; color:var(--text-2); }

/* ── Cartões — campos com rótulo, filtros, chips ── */
.lancar-form { align-items:flex-end; }
.field { display:flex; flex-direction:column; gap:4px; flex:1 1 130px; min-width:110px; }
.field.lf-grow { flex:2 1 180px; }
.field.field-btn { flex:1 1 150px; }
.field > label { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-3); padding-left:2px; }
.field .inline-input { width:100%; }
.field .cards-cta { margin-top:0; }
.cat-chip { display:inline-block; font-size:.66rem; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap; }

.cards-filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:4px 2px 12px; }
.cf-flabel { font-size:.72rem; font-weight:700; color:var(--text-3); display:flex; align-items:center; gap:5px; }
.cf-flabel i { color:var(--purple); }
.cards-filter-sel { font-family:inherit; font-size:.74rem; font-weight:600; color:var(--text-1);
    background:var(--bg-card-alt); border:1px solid var(--border); border-radius:var(--r-sm); padding:5px 9px; cursor:pointer; }

/* ── Cartões — filtro por chips (clicou, filtra) ── */
.cards-filters { flex-direction:column; align-items:stretch; gap:8px; padding:2px 2px 14px; }
.fchip-row { display:flex; flex-wrap:wrap; gap:7px; }
.fchip { display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:.74rem; font-weight:700;
    padding:6px 12px; border-radius:20px; cursor:pointer; white-space:nowrap; transition:all .15s var(--ease);
    color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent); border:1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.fchip i, .fchip .fchip-dot { font-size:.62rem; }
.fchip .fchip-dot { width:7px; height:7px; border-radius:50%; background:var(--c); }
.fchip:hover { background:color-mix(in srgb, var(--c) 22%, transparent); }
.fchip.on { background:var(--c); color:#fff; border-color:var(--c); box-shadow:0 2px 8px color-mix(in srgb, var(--c) 45%, transparent); }
.fchip.on .fchip-dot { background:#fff; }
.fchip-cats .fchip { font-weight:600; }

/* ── Cartões — importar fatura ── */
.imp-file-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.imp-file-input { font-family:inherit; font-size:.78rem; color:var(--text-2); }
.imp-file-input::file-selector-button { font-family:inherit; font-weight:700; font-size:.76rem; cursor:pointer;
    background:var(--purple); color:#fff; border:none; border-radius:var(--r-sm); padding:8px 14px; margin-right:10px; }
.imp-file-hint { font-size:.72rem; color:var(--text-3); display:flex; align-items:center; gap:6px; }
.imp-file-hint i { color:var(--purple); }
.inv-summary { font-size:.78rem; color:var(--text-2); margin:14px 0 8px; }
.inv-table .inv-in { width:100%; background:var(--bg-card-alt); border:1px solid var(--border); border-radius:var(--r-sm);
    color:var(--text-1); font-family:inherit; font-size:.76rem; padding:5px 7px; }
.inv-table .inv-num { text-align:right; }
.inv-table .inv-sm { max-width:64px; }
.inv-table select.inv-in { cursor:pointer; }
.inv-table tr.inv-off { opacity:.4; }
.inv-table td { vertical-align:middle; }

/* ── Cartões — modal com altura limitada e rolagem interna ── */
.cards-modal-box { display:flex; flex-direction:column; max-height:90vh; }
.cards-modal-box .modal-header-bar,
.cards-modal-box .cards-tabs { flex:0 0 auto; }
.cards-modal-box .cards-pane { flex:1 1 auto; overflow-y:auto; min-height:0; }

/* ── Cartões — dedup e categoria editável ── */
.inv-dup-note { color:var(--amber,#f59e0b); font-weight:600; margin-left:8px; }
.inv-dup-tag { display:inline-block; font-size:.6rem; font-weight:700; color:var(--amber,#f59e0b);
    background:color-mix(in srgb, var(--amber,#f59e0b) 15%, transparent); border-radius:10px; padding:1px 7px; margin-left:6px; }
.inv-table tr.inv-dup td { background:color-mix(in srgb, var(--amber,#f59e0b) 7%, transparent); }
.cat-select { background:var(--bg-card-alt); border:1px solid var(--border); border-radius:16px;
    font-family:inherit; font-size:.68rem; font-weight:700; padding:3px 8px; cursor:pointer; max-width:170px; }
.cat-select:hover { filter:brightness(1.15); }

/* ── Cartões — seleção múltipla e exclusão em lote ── */
.pt-bulkbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 2px 10px; flex-wrap:wrap; }
.pt-selall { display:flex; align-items:center; gap:7px; font-size:.76rem; font-weight:600; color:var(--text-2); cursor:pointer; }
.pt-selall input { cursor:pointer; }
.pt-delsel { display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:.76rem; font-weight:700; cursor:pointer;
    color:var(--danger,#dc2626); background:color-mix(in srgb, var(--danger,#dc2626) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--danger,#dc2626) 40%, transparent); border-radius:var(--r-sm); padding:7px 13px; transition:all .15s; }
.pt-delsel:hover:not(:disabled) { background:var(--danger,#dc2626); color:#fff; }
.pt-delsel:disabled { opacity:.4; cursor:not-allowed; }
.pt-check { cursor:pointer; }
.purchases-table tr.pt-sel td { background:color-mix(in srgb, var(--purple) 10%, transparent); }

/* ── Cartões — opção último dia do mês ── */
.cm-lastday { display:flex; align-items:center; gap:7px; font-size:.74rem; color:var(--text-2); margin-top:8px; cursor:pointer; }
.cm-lastday input { cursor:pointer; }
.cm-lastday strong { color:var(--text-1); }

/* ── Filtro por tipo de despesa (gráficos) ── */
.type-filter { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 12px; }
.tf-btn { display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:.72rem; font-weight:700;
    padding:5px 11px; border-radius:20px; cursor:pointer; white-space:nowrap; transition:all .15s var(--ease);
    color:var(--text-3); background:var(--bg-card-alt); border:1px solid var(--border); }
.tf-btn i { font-size:.62rem; }
.tf-btn:hover { color:var(--text-1); }
.tf-btn.active { background:var(--purple); color:#fff; border-color:var(--purple); box-shadow:0 2px 8px rgba(167,139,250,.25); }

/* ── Gráfico de categorias em SVG puro ── */
.pie-svg { width: 100%; height: 100%; display: block; }
.pie-svg circle { transition: stroke-width .15s ease; cursor: default; }
.pie-svg circle:hover { stroke-width: 17; }

/* ── Filtro por tipo em lista suspensa ── */
.type-filter { align-items: center; gap: 8px; }
.tf-label { font-size: .72rem; font-weight: 700; color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; }
.tf-label i { color: var(--purple); font-size: .66rem; }
.tf-select { font-family: inherit; font-size: .78rem; font-weight: 600; color: var(--text-1);
    background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 7px 12px; cursor: pointer; min-width: 160px; transition: border-color .15s; }
.tf-select:hover { border-color: var(--purple); }
.tf-select:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple) 25%, transparent); }

/* ── Mensagem de "sem dados" dentro da área do gráfico (mantém o filtro visível) ── */
.chart-empty-inline { width: 100%; height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; text-align: center;
    color: var(--text-3); font-size: .78rem; padding: 10px; }
.chart-empty-inline i { font-size: 1.6rem; opacity: .5; }

/* ── Impacto na Renda — barra empilhada + legenda ── */
.impact-box { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.impact-bar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: var(--bg-card-alt); border: 1px solid var(--border); }
.impact-seg { height: 100%; transition: width .45s var(--ease); }
.impact-seg:not(:last-child) { box-shadow: 1px 0 0 rgba(0,0,0,.15); }
.impact-legend { display: flex; flex-direction: column; gap: 9px; }
.impact-row { display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.impact-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.impact-name { color: var(--text-2); font-weight: 600; }
.impact-pct { margin-left: auto; font-weight: 800; color: var(--text-1); min-width: 46px; text-align: right; }
.impact-val { color: var(--text-3); min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.impact-free-note { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: var(--teal-bright, #2dd4bf); margin-top: 2px; }
.impact-free-note.over { color: var(--danger, #ef4444); }

/* ── Barra inferior estilo app (mobile) ── */
.mobile-bottom-bar { display: none; }
@media (max-width: 768px) {
    #main-header .header-center { display: none; }
    #main-header .theme-switcher { display: none; }
    .mobile-bottom-bar {
        display: flex; align-items: center; gap: 6px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
        background: var(--bg-card); border-top: 1px solid var(--border);
        box-shadow: 0 -4px 18px rgba(0,0,0,.22);
    }
    .mobile-bottom-bar .tab-btn {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
        background: none; border: none; color: var(--text-3); font-family: inherit;
        font-size: .66rem; font-weight: 700; padding: 6px 4px; border-radius: 10px; cursor: pointer;
    }
    .mobile-bottom-bar .tab-btn i { font-size: 1.05rem; }
    .mobile-bottom-bar .tab-btn.active { color: var(--purple); background: color-mix(in srgb, var(--purple) 12%, transparent); }
    .mbb-themes { display: flex; align-items: center; gap: 8px; padding-left: 10px; margin-left: 4px; border-left: 1px solid var(--border); }
    .mbb-themes .theme-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
    .mbb-themes .theme-dot.active { border-color: var(--text-1); transform: scale(1.1); }
    .mbb-themes .theme-dark { background: #171923; }
    .mbb-themes .theme-light { background: #f1f5f9; }
    .mbb-themes .theme-blue { background: #1e3a8a; }
    .mbb-themes .theme-pink { background: #ec4899; }
    #view-monthly, #view-total { padding-bottom: 84px; }
}

/* ── WhatsApp dentro da barra inferior (mobile) ── */
@media (max-width: 768px) {
    .whatsapp-fab { display: none !important; } /* remove o botão flutuante que sobrepunha a barra */
    .mobile-bottom-bar .mbb-wa { text-decoration: none; color: #25D366; }
    .mobile-bottom-bar .mbb-wa i { color: #25D366; }
    .mobile-bottom-bar .mbb-wa.active,
    .mobile-bottom-bar .mbb-wa:active { background: color-mix(in srgb, #25D366 14%, transparent); }
    /* header no mobile: sobra espaço → botão de importar mais claro e centralizado */
    #main-header { gap: 8px; }
    #main-header .header-right { flex: 1; justify-content: flex-end; gap: 10px; }
}

/* ── Consolidado: centralização no mobile ── */
@media (max-width: 768px) {
    .consolidated-header h1 { justify-content: center; text-align: center; font-size: 1.05rem; }
    .consolidated-chart-card h2 { justify-content: center; text-align: center; }
    .consolidated-pie-row { align-items: center; }
    .consolidated-pie-wrap { margin: 0 auto; }
    .consolidated-pie-legend { align-items: center; width: 100%; max-width: 340px; margin: 0 auto; }
    .consolidated-pie-legend .legend-item { width: 100%; }
    .type-filter { justify-content: center; }
}

/* ── Seletor de importação (extrato x fatura) ── */
.import-choose-box { max-width: 480px; }
.import-choose-body { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.import-choice { display: flex; align-items: center; gap: 14px; text-align: left;
    background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 16px; cursor: pointer; font-family: inherit; transition: all .15s var(--ease); }
.import-choice:hover { border-color: var(--purple); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.ic-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.ic-text { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.ic-text strong { font-size: .9rem; color: var(--text-1); display: flex; align-items: center; gap: 7px; }
.ic-text > span { font-size: .74rem; color: var(--text-3); }
.ic-pro { font-size: .58rem; font-weight: 800; background: linear-gradient(135deg,#a78bfa,#8b5cf6); color: #fff; padding: 1px 6px; border-radius: 10px; letter-spacing: .04em; }
.ic-badge { align-self: flex-start; margin-top: 3px; font-size: .64rem; font-weight: 700;
    color: var(--purple); background: color-mix(in srgb, var(--purple) 12%, transparent); padding: 2px 8px; border-radius: 10px; }
.ic-badge.ok { color: var(--teal-bright,#2dd4bf); background: color-mix(in srgb, #2dd4bf 14%, transparent); }
.ic-badge.out { color: var(--danger,#ef4444); background: color-mix(in srgb, #ef4444 12%, transparent); }
.ic-arrow { color: var(--text-3); font-size: .8rem; }

/* ── Cartões: banner modo visualização (não-PRO) ── */
.cards-readonly-banner { display: flex; align-items: center; gap: 8px; cursor: pointer;
    margin: 12px 18px 0; padding: 10px 14px; border-radius: var(--r-sm); font-size: .76rem; font-weight: 600;
    color: #b45309; background: color-mix(in srgb, #f59e0b 14%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent); }
.cards-readonly-banner i { color: #f59e0b; }
.modal-dialog.cards-readonly .cards-cta,
.modal-dialog.cards-readonly .cards-form,
.modal-dialog.cards-readonly .lancar-form,
.modal-dialog.cards-readonly .imp-file-row { opacity: .55; }

/* ── Mobile: linhas se ajustam à tela — descrição flexível, valor junto aos botões ── */
@media (max-width: 768px) {
    .item-row { gap: 8px; overflow: hidden; flex-wrap: nowrap; }
    .item-desc { flex: 1 1 0; max-width: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .item-val { margin-left: 8px; }
    .item-actions { margin-left: 4px; flex-shrink: 0; }
}
@media (max-width: 480px) {
    .item-row { padding: 8px 10px; gap: 6px; overflow: hidden; }
    .item-desc { flex: 1 1 0; max-width: none; min-width: 0; }
    .item-cat { max-width: 84px; }
    .item-val { min-width: 54px; margin-left: 6px; }
    .item-action-btn { padding: 4px 5px; }
}

/* ── Correção de overflow: filhos do grid encolhem para caber na tela ── */
.data-column, .chart-column { min-width: 0; }
.section-block { min-width: 0; }
.items-container, .items-list { min-width: 0; }

/* ── Menu de opções na barra inferior (mobile) ── */
@media (max-width: 768px) {
    #main-header .user-area .settings-btn { display: none; } /* usa o da barra inferior */
    .mobile-bottom-bar .mbb-settings { color: var(--text-3); }
    /* dropdown abre acima da barra inferior, à esquerda */
    #settings-dropdown.open {
        position: fixed; left: 10px; right: auto; bottom: 78px; top: auto;
        transform: translateY(0); min-width: 240px; max-width: calc(100vw - 20px);
        max-height: 62vh; overflow-y: auto;
    }
}

/* ── Tutorial: card embaixo quando destaca um elemento (evita cobrir o alvo) ── */
.guide-card-wrap.has-target { align-items: flex-end; justify-content: center; padding: 0 16px 24px; }
@media (max-width: 768px) {
    .guide-card-wrap.has-target { padding-bottom: 88px; } /* acima da barra inferior */
}
.guide-pro-list { display: flex; flex-direction: column; gap: 9px; text-align: left; margin: 2px auto 6px; max-width: 320px; }
.guide-pro-list > span { display: flex; align-items: flex-start; gap: 9px; font-size: .82rem; color: var(--text-2); }
.guide-pro-list i { color: var(--purple); margin-top: 2px; width: 16px; text-align: center; }
.guide-pro-cta {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    background: linear-gradient(135deg, #f59e0b, #f7b955); color: #3a2a00;
    border: none; border-radius: var(--r-sm); padding: 11px 20px; cursor: pointer;
    font-family: inherit; font-weight: 800; font-size: .84rem; box-shadow: 0 4px 16px rgba(245,158,11,.3);
    transition: transform .15s var(--ease), filter .15s;
}
.guide-pro-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ── Banner "Instalar PWA" ── */
.pwa-install-banner {
    position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%);
    z-index: 9998; width: min(440px, calc(100vw - 24px));
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: 0 16px 50px rgba(0,0,0,.4); opacity: 0; visibility: hidden;
    transition: transform .4s var(--ease-out-back), opacity .3s var(--ease), visibility .3s;
}
.pwa-install-banner.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
@media (max-width: 768px) { .pwa-install-banner.show { bottom: 82px; } } /* acima da barra inferior */
.pwa-ico { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; box-shadow: 0 3px 10px rgba(138,5,190,.3); }
.pwa-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pwa-txt strong { font-size: .88rem; color: var(--text-1); }
.pwa-txt > span { font-size: .76rem; color: var(--text-3); }
.pwa-ios { color: var(--text-2) !important; }
.pwa-ios i { color: var(--purple); }
.pwa-chk { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--text-3); margin-top: 5px; cursor: pointer; }
.pwa-chk input { cursor: pointer; }
.pwa-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-self: center; }
.pwa-install-btn {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    background: linear-gradient(135deg, var(--purple), #8b5cf6); color: #fff; border: none;
    border-radius: var(--r-sm); padding: 9px 16px; font-family: inherit; font-weight: 700; font-size: .8rem; cursor: pointer;
    box-shadow: 0 3px 12px rgba(167,139,250,.3); transition: filter .15s, transform .15s;
}
.pwa-install-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.pwa-close { background: none; border: none; color: var(--text-3); font-family: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; padding: 4px; }
.pwa-close:hover { color: var(--text-1); }

/* ── Carteira de Investimentos (admin) ── */
.wallet-box { max-width: 920px; width: 96%; display: flex; flex-direction: column; max-height: 90vh; }
.wallet-beta { font-size: .58rem; font-weight: 800; background: #22d3ee22; color: #22d3ee; padding: 2px 7px; border-radius: 10px; margin-left: 8px; letter-spacing: .04em; }
.wallet-body { padding: 18px; overflow-y: auto; }
.wallet-search-wrap { position: relative; }
.wallet-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: 0 12px 30px rgba(0,0,0,.35); overflow: hidden; display: none; }
.wallet-results.show { display: block; }
.wl-res { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px;
    background: none; border: none; border-bottom: 1px solid var(--border); cursor: pointer; font-family: inherit; }
.wl-res:hover { background: var(--bg-hover); }
.wl-res-sym { font-weight: 800; color: var(--text-1); font-size: .82rem; min-width: 78px; }
.wl-res-name { flex: 1; color: var(--text-3); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-res-type { color: var(--purple); font-size: .64rem; font-weight: 700; }
.wl-res-empty { padding: 10px 12px; color: var(--text-3); font-size: .78rem; }
.wallet-form { margin-top: 12px; }
.wl-picked { font-size: .82rem; color: var(--text-1); margin-bottom: 10px; }
.wl-picked i { color: var(--teal-bright, #2dd4bf); }
.wl-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.wl-fields .field { flex: 1; min-width: 120px; }
.wl-manual-link { background: none; border: none; color: var(--purple); font-family: inherit; font-size: .74rem; cursor: pointer; margin-top: 8px; text-decoration: underline; padding: 0; }
.wallet-summary { margin: 18px 0 6px; }
.wl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wl-card { background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.wl-card-l { font-size: .7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.wl-card-v { font-size: 1.05rem; font-weight: 800; color: var(--text-1); }
.wl-up { color: var(--teal-bright, #2dd4bf); }
.wl-down { color: var(--danger, #ef4444); }
.wl-fx { font-size: .7rem; color: var(--text-3); margin-top: 8px; }
.wl-catpills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wl-catpill { font-size: .68rem; font-weight: 600; color: var(--text-2); background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; }
.wallet-list-head { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.wl-refresh { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card-alt); border: 1px solid var(--border);
    color: var(--text-2); font-family: inherit; font-size: .74rem; font-weight: 700; border-radius: var(--r-sm); padding: 6px 12px; cursor: pointer; }
.wl-refresh:hover { border-color: var(--purple); color: var(--purple); }
.wl-table .wl-name { display: block; font-size: .68rem; color: var(--text-3); font-weight: 500; }
.wl-table tbody td small { font-size: .64rem; opacity: .85; }
@media (max-width: 600px) { .wl-cards { grid-template-columns: 1fr; } }

/* Escolha de area */
.mode-chooser { position: fixed; inset: 0; z-index: 1500; display: none; align-items: center; justify-content: center;
    background: radial-gradient(1200px 600px at 50% -10%, #2a1a4a 0%, var(--bg-body) 60%); padding: 20px; }
.mc-inner { width: 100%; max-width: 760px; text-align: center; }
.mc-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 1.8rem; font-weight: 800; color: var(--text-1); letter-spacing: -.02em; }
.mc-brand-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--purple), #8b5cf6); color: #fff; font-size: 1.1rem; }
.mc-sub { color: var(--text-3); font-size: .95rem; margin: 10px 0 28px; }
.mc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mc-card { position: relative; text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl);
    padding: 26px 24px; cursor: pointer; font-family: inherit; transition: transform .18s var(--ease), border-color .18s, box-shadow .18s; }
.mc-card:hover { transform: translateY(-4px); border-color: var(--purple); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.mc-ico { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; margin-bottom: 16px; }
.mc-ico.mc-plan { background: linear-gradient(135deg, #22d3a7, #12a880); }
.mc-ico.mc-invest { background: linear-gradient(135deg, #4da6ff, #6366f1); }
.mc-card h3 { font-size: 1.15rem; font-weight: 800; color: var(--text-1); margin-bottom: 6px; }
.mc-card p { font-size: .84rem; color: var(--text-3); line-height: 1.5; }
.mc-badge { display: inline-block; margin-top: 12px; font-size: .6rem; font-weight: 800; letter-spacing: .05em;
    background: #22d3ee22; color: #22d3ee; padding: 2px 8px; border-radius: 10px; }
.mc-go { display: flex; align-items: center; gap: 7px; margin-top: 16px; color: var(--purple); font-weight: 700; font-size: .82rem; }
@media (max-width: 640px) { .mc-cards { grid-template-columns: 1fr; } .mc-brand { font-size: 1.5rem; } }

/* Area de investimentos */
#invest-view { min-height: 100vh; background: var(--bg-body); }
.inv-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
    padding: 12px 24px; background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.inv-brand { display: flex; align-items: center; gap: 11px; }
.inv-logo { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #4da6ff, #6366f1); color: #fff; font-size: 1rem; }
.inv-brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.inv-title { font-weight: 800; font-size: 1rem; color: var(--text-1); }
.inv-title2 { font-size: .68rem; font-weight: 700; color: #4da6ff; letter-spacing: .04em; text-transform: uppercase; }
.inv-actions { display: flex; align-items: center; gap: 8px; }
.inv-add-btn { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, var(--purple), #8b5cf6); color: #fff;
    border: none; border-radius: var(--r-sm); padding: 9px 16px; font-family: inherit; font-weight: 700; font-size: .8rem; cursor: pointer; }
.inv-add-btn:hover { filter: brightness(1.1); }
.inv-add-btn.small { padding: 6px 12px; font-size: .74rem; }
.inv-icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-2); cursor: pointer; }
.inv-icon-btn:hover { border-color: var(--purple); color: var(--purple); }
.inv-switch { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-2);
    border-radius: var(--r-sm); padding: 9px 14px; font-family: inherit; font-weight: 700; font-size: .78rem; cursor: pointer; }
.inv-switch:hover { border-color: var(--purple); color: var(--text-1); }
.inv-main { max-width: 1200px; margin: 0 auto; padding: 22px 24px 60px; display: flex; flex-direction: column; gap: 18px; }
.inv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.inv-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.inv-kpi-l { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); }
.inv-kpi-v { font-size: 1.25rem; font-weight: 800; color: var(--text-1); }
.inv-kpi-v small { font-size: .72rem; font-weight: 700; }
.inv-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.inv-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; }
.inv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.inv-card-head h3 { font-size: .92rem; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 8px; }
.inv-card-head h3 i { color: #4da6ff; }
.inv-ret { font-size: .74rem; font-weight: 800; margin-left: 6px; }
.inv-periods { display: flex; gap: 4px; flex-wrap: wrap; }
.inv-per { border: 1px solid var(--border); background: var(--bg-card-alt); color: var(--text-3); font-family: inherit; font-size: .72rem; font-weight: 700;
    border-radius: 8px; padding: 4px 11px; cursor: pointer; }
.inv-per.on { background: var(--purple); color: #fff; border-color: var(--purple); }
.inv-catfilter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.inv-catchip { display: inline-flex; align-items: center; font-family: inherit; font-size: .7rem; font-weight: 700; padding: 4px 11px; border-radius: 20px; cursor: pointer;
    color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.inv-catchip.on { background: var(--c); color: #fff; }
.inv-chart-wrap { position: relative; height: 340px; width: 100%; }
@media (max-width: 640px) { .inv-chart-wrap { height: 260px; } }
.inv-chart-note { color: var(--text-3); font-size: .74rem; line-height: 1.5; margin-top: 12px; }
.inv-empty2 { color: var(--text-3); font-size: .82rem; text-align: center; padding: 40px 10px; }
.inv-alloc-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.inv-alloc-chart { width: 180px; height: 180px; flex-shrink: 0; margin: 0 auto; }
.inv-alloc-legend { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 8px; }
.inv-leg { display: flex; align-items: center; gap: 8px; font-size: .78rem; }
.inv-leg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.inv-leg-name { color: var(--text-2); font-weight: 600; }
.inv-leg-pct { margin-left: auto; font-weight: 800; color: var(--text-1); }
.inv-leg-val { color: var(--text-3); min-width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.inv-table .wl-name { display: block; font-size: .68rem; color: var(--text-3); font-weight: 500; }
.inv-table tbody td small { font-size: .64rem; opacity: .85; }
.inv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.inv-cat-chip { display: inline-block; font-size: .66rem; font-weight: 700; padding: 2px 9px; border-radius: 20px; border: 1px solid; background: transparent; white-space: nowrap; }
.invadd-box { max-width: 520px; }
.invadd-body { padding: 18px; }
@media (max-width: 900px) { .inv-grid { grid-template-columns: 1fr; } .inv-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
    .inv-header { padding: 10px 14px; } .inv-main { padding: 16px 14px 60px; }
    .inv-switch span, .inv-add-btn span { display: none; }
    .inv-add-btn, .inv-switch { padding: 9px 12px; }
}

/* Movimentacoes (aportes/resgates) */
.wl-hint { font-size: .74rem; color: var(--text-3); margin: 2px 0 10px; }
.invtx-box { max-width: 560px; }
.invtx-body { padding: 18px; }
.tx-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.tx-sum-item { background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.tx-sum-item span { font-size: .66rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.tx-sum-item strong { font-size: .95rem; color: var(--text-1); }
.tx-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tx-tab { flex: 1; padding: 8px; border: 1px solid var(--border); background: var(--bg-card-alt); color: var(--text-3);
    border-radius: var(--r-sm); font-family: inherit; font-weight: 700; font-size: .78rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.tx-tab.on#tx-tab-buy { background: #12a880; border-color: #12a880; color: #fff; }
.tx-tab.on#tx-tab-sell { background: #dc2626; border-color: #dc2626; color: #fff; }
.tx-badge { font-size: .64rem; font-weight: 800; padding: 2px 8px; border-radius: 10px; }
.tx-badge.buy { background: #12a88022; color: #12a880; }
.tx-badge.sell { background: #dc262622; color: #dc2626; }
@media (max-width: 600px) { .tx-summary { grid-template-columns: 1fr; } }

/* Abas da area de investimentos */
.inv-tabs { display: flex; gap: 8px; }
.inv-tab { flex: 0 0 auto; padding: 9px 18px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-3);
    border-radius: var(--r-sm); font-family: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.inv-tab:hover { color: var(--text-1); }
.inv-tab.on { background: var(--purple); color: #fff; border-color: var(--purple); }
#inv-pane-ativos { display: flex; flex-direction: column; gap: 18px; }
.inv-addcard .wallet-form { margin-top: 12px; }

/* Painéis de lançamento (aporte verde / resgate vermelho) */
.inv-launch-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .inv-launch-row { grid-template-columns: 1fr; } }
.launch-buy { border-top: 3px solid #22c55e; }
.launch-sell { border-top: 3px solid #ef4444; }
.launch-buy .inv-card-head h3 { color: #22c55e; }
.launch-sell .inv-card-head h3 { color: #ef4444; }
.cta-buy { background: linear-gradient(135deg, #16a34a, #22c55e) !important; }
.cta-sell { background: linear-gradient(135deg, #dc2626, #ef4444) !important; }
.wl-change-btn { background: none; border: none; color: var(--text-3); font-family: inherit; font-size: .72rem;
    font-weight: 700; cursor: pointer; padding: 2px 0; margin-bottom: 6px; display: inline-flex; align-items: center; gap: 5px; }
.wl-change-btn:hover { color: var(--text-1); }
.field-wide { grid-column: 1 / -1; }

/* ══════ Investimentos — refinamento visual ══════ */
/* Cores de rendimento no escopo de investimentos: verde / laranja-avermelhado */
#invest-view .wl-up, .res-up-t { color: #16c784 !important; }
#invest-view .wl-down, .res-down-t { color: #fb6340 !important; }

/* Alocação lateral, ao lado da tabela de investimentos */
.inv-holdings-row { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .inv-holdings-row { grid-template-columns: 1fr; } }
.inv-list-card { min-width: 0; }
.inv-alloc-col { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.inv-alloc .inv-alloc-chart { width: 210px; height: 210px; margin: 0 auto; }
.inv-alloc-legend { width: 100%; display: flex; flex-direction: column; gap: 9px; }

/* KPI de resultado em destaque */
.inv-kpi-result { align-items: center; text-align: center; justify-content: center; border-width: 1.5px; }
.inv-kpi-result .inv-kpi-v { font-size: 1.5rem; font-weight: 900; margin-top: 2px; }
.inv-kpi-result .inv-kpi-pct { font-size: .82rem; font-weight: 800; margin-top: 3px; padding: 2px 10px; border-radius: 20px; }
.inv-kpi-result.res-up { background: linear-gradient(135deg, rgba(22,199,132,.18), rgba(22,199,132,.05)); border-color: rgba(22,199,132,.45); }
.inv-kpi-result.res-up .inv-kpi-v, .inv-kpi-result.res-up .inv-kpi-pct { color: #16c784; }
.inv-kpi-result.res-up .inv-kpi-pct { background: rgba(22,199,132,.16); }
.inv-kpi-result.res-down { background: linear-gradient(135deg, rgba(251,99,64,.18), rgba(251,99,64,.05)); border-color: rgba(251,99,64,.45); }
.inv-kpi-result.res-down .inv-kpi-v, .inv-kpi-result.res-down .inv-kpi-pct { color: #fb6340; }
.inv-kpi-result.res-down .inv-kpi-pct { background: rgba(251,99,64,.16); }

/* Banner de rentabilidade em destaque (centralizado) */
.inv-rent-banner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    text-align: center; padding: 16px; border-radius: var(--r-md); margin: 4px 0 16px; border: 1.5px solid transparent; }
.inv-rent-banner .rb-label { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.inv-rent-banner .rb-value { font-size: 2.3rem; font-weight: 900; line-height: 1.1; }
.inv-rent-banner .rb-cmp { font-size: .78rem; font-weight: 800; padding: 3px 12px; border-radius: 20px; }
.inv-rent-banner.res-up { background: linear-gradient(135deg, rgba(22,199,132,.16), rgba(22,199,132,.04)); border-color: rgba(22,199,132,.4); }
.inv-rent-banner.res-up .rb-value { color: #16c784; }
.inv-rent-banner.res-down { background: linear-gradient(135deg, rgba(251,99,64,.16), rgba(251,99,64,.04)); border-color: rgba(251,99,64,.4); }
.inv-rent-banner.res-down .rb-value { color: #fb6340; }
.rb-cmp.up { background: rgba(22,199,132,.16); color: #16c784; }
.rb-cmp.down { background: rgba(251,99,64,.16); color: #fb6340; }

/* Acordeão de rendimento por categoria (expansível) */
.cat-acc-head-labels, .cat-acc-head, .cat-sub { display: grid; grid-template-columns: minmax(120px,1.6fr) 1fr 1fr 1.3fr; gap: 10px; align-items: center; }
.cat-acc-head-labels { padding: 4px 14px 8px; font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3); }
.cat-acc-head-labels span:not(:first-child), .cat-acc-num, .cat-sub-num { text-align: right; }
.cat-acc { display: flex; flex-direction: column; gap: 8px; }
.cat-acc-item { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--bg-card-alt); }
.cat-acc-head { width: 100%; background: none; border: none; font-family: inherit; cursor: pointer; padding: 13px 14px; color: var(--text-1); font-size: .84rem; }
.cat-acc-head:hover { background: color-mix(in srgb, var(--purple) 6%, transparent); }
.cat-acc-name { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; text-align: left; }
.cat-chev { font-size: .7rem; color: var(--text-3); transition: transform .18s var(--ease); }
.cat-acc-item.open .cat-chev { transform: rotate(90deg); }
.cat-acc-num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .82rem; }
.cat-acc-num small { font-weight: 700; opacity: .85; }
.cat-acc-body { display: none; padding: 4px 14px 12px; border-top: 1px solid var(--border); }
.cat-acc-item.open .cat-acc-body { display: block; }
.cat-sub { padding: 9px 0; border-bottom: 1px dashed var(--border); }
.cat-sub:last-child { border-bottom: none; }
.cat-sub-name { font-weight: 600; color: var(--text-2); font-size: .8rem; }
.cat-sub-num { font-variant-numeric: tabular-nums; font-size: .8rem; }
@media (max-width: 560px) {
    .cat-acc-head-labels { display: none; }
    .cat-acc-head, .cat-sub { grid-template-columns: 1fr 1fr; row-gap: 4px; }
    .cat-acc-name { grid-column: 1 / -1; }
}

/* Histórico de lançamentos expansível na tabela de investimentos */
.hold-row { cursor: pointer; transition: background .15s var(--ease); }
.hold-row:hover { background: color-mix(in srgb, var(--purple) 6%, transparent); }
.hold-chev { font-size: .68rem; color: var(--text-3); margin-right: 8px; transition: transform .18s var(--ease); }
.hold-chev.open { transform: rotate(90deg); }
.hold-chev-sp { display: inline-block; width: 0; margin-right: 8px; }
.hold-detail > td { padding: 0 !important; background: var(--bg-card-alt); }
.hold-hist { padding: 6px 14px 14px; }
.hold-hist-title { font-size: .74rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--text-3);
    display: flex; align-items: center; gap: 7px; margin: 10px 0 6px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVIDADE MÓVEL — botão de investimentos + tabelas/gráficos
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Botão de investimentos do topo fica só no desktop; no mobile usa a barra inferior */
    .area-switch-btn { display: none !important; }
    /* Barra inferior comporta mais itens */
    .mobile-bottom-bar { gap: 2px; padding-left: 8px; padding-right: 8px; }
    .mobile-bottom-bar .tab-btn { font-size: .6rem; padding: 6px 2px; gap: 2px; }
    .mobile-bottom-bar .tab-btn i { font-size: .98rem; }
    #mbb-invest, #mbb-invest span, #mbb-invest i { color: #22d3ee; }
    #mbb-invest:active { background: color-mix(in srgb, #22d3ee 16%, transparent); }
    .mbb-themes { padding-left: 6px; margin-left: 2px; gap: 6px; }
    .mbb-themes .theme-dot { width: 17px; height: 17px; }
}

/* ── Área de investimentos no celular ── */
@media (max-width: 640px) {
    #invest-view .inv-main { padding: 14px 12px 84px; gap: 14px; }
    #invest-view .inv-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
    #invest-view .inv-kpi { padding: 12px 13px; }
    #invest-view .inv-kpi-v { font-size: 1rem; }
    #invest-view .inv-kpi-result .inv-kpi-v { font-size: 1.2rem; }
    /* Painéis de aporte/resgate empilham e campos encaixam 2 por linha */
    #invest-view .inv-launch-row { grid-template-columns: 1fr; gap: 12px; }
    #invest-view .wl-fields { gap: 8px; }
    #invest-view .wl-fields .field { flex: 1 1 calc(50% - 4px); min-width: calc(50% - 4px); }
    #invest-view .wl-fields .field-wide, #invest-view .wl-fields .field-btn { flex: 1 1 100%; min-width: 100%; }
    #invest-view .inv-card { padding: 16px 14px; border-radius: 16px; }
    #invest-view .inv-card-head h3 { font-size: .92rem; }
    /* Alocação volta a empilhar */
    #invest-view .inv-holdings-row { grid-template-columns: 1fr; }
    #invest-view .inv-alloc .inv-alloc-chart { width: 170px; height: 170px; }
    /* Tabelas: rolagem horizontal suave + células compactas */
    #invest-view .pt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 0 14px; }
    #invest-view .purchases-table { font-size: .78rem; min-width: 540px; }
    #invest-view .purchases-table th, #invest-view .purchases-table td { padding: 8px 10px; }
    #invest-view .inv-cat-chip { font-size: .62rem; padding: 2px 7px; }
    /* Gráfico de rentabilidade */
    #invest-view .inv-chart-wrap { height: 240px; }
    #invest-view .inv-rent-banner .rb-value { font-size: 1.9rem; }
    #invest-view .inv-periods { justify-content: center; }
    /* Barra de topo da área compacta */
    #invest-view .inv-header { padding: 10px 12px; }
    #invest-view .inv-switch span { display: none; }
}

/* Campos de lançamento (planejamento) mais encaixados no celular */
@media (max-width: 560px) {
    .wl-fields .field { min-width: calc(50% - 5px); }
    .wl-fields .field-btn, .wl-fields .field-wide { min-width: 100%; }
    .pt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .purchases-table { min-width: 480px; }
}

/* ══════════════ CONECTAR BANCO (modal admin) ══════════════ */
.bank-box { max-width: 460px; }
.bank-beta { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    background: var(--purple-bg); color: var(--purple-bright); padding: 2px 7px; border-radius: 8px; margin-left: 6px; }
.bank-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.bank-lead { font-size: .86rem; color: var(--text-2); line-height: 1.55; }
.bank-note { font-size: .76rem; color: var(--text-3); line-height: 1.5; }
.bank-err { font-size: .84rem; color: var(--danger); display: flex; align-items: center; gap: 8px; }
.bank-loading { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: .86rem; padding: 16px 0; }
.bank-spin { width: 18px; height: 18px; border: 2px solid var(--border-light); border-top-color: var(--purple); border-radius: 50%; animation: spin .7s linear infinite; }
.bank-acc-list { display: flex; flex-direction: column; gap: 10px; }
.bank-acc { text-align: left; background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: 14px;
    padding: 14px 16px; cursor: pointer; font-family: inherit; color: var(--text-1); transition: all .2s var(--ease); display: flex; flex-direction: column; gap: 5px; }
.bank-acc:hover { border-color: var(--purple-border); transform: translateY(-1px); }
.bank-acc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bank-acc-bal { font-weight: 800; font-variant-numeric: tabular-nums; }
.bank-acc-sub { font-size: .74rem; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.bank-tx-head { display: flex; flex-direction: column; gap: 2px; }
.bank-tx-head strong { font-size: .95rem; }
.bank-tx-head span { font-size: .74rem; color: var(--text-3); }
.bank-tx-list { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; }
.bank-tx { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.bank-tx-desc { display: flex; flex-direction: column; gap: 2px; font-size: .84rem; color: var(--text-1); }
.bank-tx-desc small { color: var(--text-3); font-size: .7rem; }
.bank-tx-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bank-back { align-self: flex-start; background: none; border: none; color: var(--text-2); font-family: inherit; font-weight: 700; font-size: .78rem; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.bank-back:hover { color: var(--text-1); }
.bank-foot { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.bank-linklike { background: none; border: none; color: var(--purple-bright); font-family: inherit; font-weight: 700; font-size: .78rem; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.bank-linklike.danger { color: var(--danger); }

/* Cabeçalhos ordenáveis (tabela de compras do cartão) */
.purchases-table th.pt-sort { cursor: pointer; user-select: none; white-space: nowrap; transition: color .15s var(--ease); }
.purchases-table th.pt-sort:hover { color: var(--purple-bright); }
.pt-sort-i { font-size: .7rem; margin-left: 4px; opacity: .35; }
.pt-sort-i.on { opacity: 1; color: var(--purple-bright); }

/* Escopo da lista de compras do cartão (fatura do mês × todas) */
.cm-scope { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cm-scope-title { font-size: .92rem; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 8px; }
.cm-scope-title i { color: var(--purple-bright); }
.cm-scope-title strong { color: var(--purple-bright); }
.cm-scope-btn { background: var(--purple-bg); border: 1px solid var(--purple-border); color: var(--purple-bright);
    font-family: inherit; font-weight: 700; font-size: .74rem; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: all .18s var(--ease); }
.cm-scope-btn:hover { background: var(--purple); color: #fff; border-color: var(--purple); }
.cm-invoice-total { font-size: .82rem; color: var(--text-2); margin-bottom: 10px; }
.cm-invoice-total strong { color: var(--text-1); }
.cm-parcela { display: inline-block; font-variant-numeric: tabular-nums; font-size: .74rem; font-weight: 700; color: var(--text-3); }
.cm-parcela.on { color: var(--purple-bright); background: var(--purple-bg); border: 1px solid var(--purple-border); padding: 2px 9px; border-radius: 999px; }

/* ══════════ MARCA FENANZA (logo em SVG) ══════════ */
/* Marca oficial (JPEG) num "chip" com o mesmo fundo da arte → sem retângulo aparente */
.brand-mark-box { background: #090b1f !important; box-shadow: none !important; width: auto !important; height: auto !important;
    padding: 5px 10px !important; border-radius: 10px; display: inline-flex; align-items: center; overflow: hidden; }
.brand-mark { width: auto; height: 24px; object-fit: contain; display: block; filter: none; }
/* Esconde o texto "Fenanza" repetido (a arte já traz o nome); mantém os subtítulos */
.logo .logo-title { display: none; }
.auth-logo .auth-logo-title { display: none; }
#invest-view .inv-brand .inv-title { display: none; }
.auth-logo-icon.brand-mark-box { padding: 8px 15px !important; border-radius: 14px; }
.auth-logo-icon.brand-mark-box .brand-mark { height: 34px; }
.inv-logo.brand-mark-box .brand-mark { height: 22px; }