/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ══ LIGHT MODE — high-specificity element overrides ══════════════ */
html[data-theme="light"] body {
background-image:
radial-gradient(ellipse 80% 50% at 5% 0%, rgba(29, 78, 216,.07) 0%, transparent 55%),
radial-gradient(ellipse 60% 40% at 95% 100%, rgba(37, 99, 235,.05) 0%, transparent 50%);
}
/* Sidebar */
html[data-theme="light"] .sidebar { background: linear-gradient(180deg,#f4f5ff 0%,#eceffe 100%); border-right-color: rgba(29, 78, 216,.14); }
html[data-theme="light"] .sidebar-logo { border-bottom-color: rgba(29, 78, 216,.1); }
html[data-theme="light"] .sidebar-footer { background: rgba(29, 78, 216,.05); border-top-color: rgba(29, 78, 216,.1); }
html[data-theme="light"] .logo-text { background: linear-gradient(135deg,#1e1b4b 20%,var(--fv-c2,#1d4ed8) 100%); -webkit-background-clip:text; background-clip:text; }
html[data-theme="light"] .nav-item { color: #475569; }
html[data-theme="light"] .nav-item:hover { background: rgba(29, 78, 216,.08); color: #1e1b4b; }
html[data-theme="light"] .nav-item.active { background: rgba(29, 78, 216,.14); border-color: rgba(29, 78, 216,.28); color: #4338ca; }
html[data-theme="light"] .user-name { color: #0f172a; }
/* Topbar */
html[data-theme="light"] .topbar { background: rgba(248,249,255,.94); border-bottom-color: rgba(29, 78, 216,.1); }
html[data-theme="light"] .conn-status { background: #fff; border-color: rgba(29, 78, 216,.16); box-shadow: 0 1px 8px rgba(29, 78, 216,.1); }
html[data-theme="light"] .theme-btn { background: #fff; border-color: rgba(29, 78, 216,.18); }
/* Demo banner */
html[data-theme="light"] .demo-banner { background: linear-gradient(90deg,rgba(251,191,36,.07),transparent); border-bottom-color: rgba(251,191,36,.22); }
/* KPI stat cards */
html[data-theme="light"] .card--blue { background: linear-gradient(150deg,#eef2ff 0%,#dde5ff 100%); border-color: rgba(29, 78, 216,.32); }
html[data-theme="light"] .card--green { background: linear-gradient(150deg,#ecfdf5 0%,#cffae8 100%); border-color: rgba(16,185,129,.32); }
html[data-theme="light"] .card--red { background: linear-gradient(150deg,#fff1f2 0%,#ffdde2 100%); border-color: rgba(244,63,94,.32); }
html[data-theme="light"] .card--purple { background: linear-gradient(150deg,#faf5ff 0%,#ecdffe 100%); border-color: rgba(37, 99, 235,.32); }
html[data-theme="light"] .card--blue .card-value { color: #3730a3; }
html[data-theme="light"] .card--green .card-value { color: #047857; }
html[data-theme="light"] .card--red .card-value { color: #be123c; }
html[data-theme="light"] .card--purple .card-value { color: #5b21b6; }
html[data-theme="light"] .card--blue .card-label,
html[data-theme="light"] .card--green .card-label,
html[data-theme="light"] .card--red .card-label,
html[data-theme="light"] .card--purple .card-label { color: #475569; }
html[data-theme="light"] .card::before { opacity: .5; }
html[data-theme="light"] .card:hover { box-shadow: 0 12px 40px rgba(29, 78, 216,.15) !important; }
/* Chart cards */
html[data-theme="light"] .chart-card { background: #fff; border-color: rgba(29, 78, 216,.1); box-shadow: 0 2px 16px rgba(29, 78, 216,.08),0 1px 3px rgba(0,0,0,.04); }
html[data-theme="light"] .chart-card:hover { border-color: rgba(29, 78, 216,.22); box-shadow: 0 6px 28px rgba(29, 78, 216,.12),0 2px 4px rgba(0,0,0,.04); }
html[data-theme="light"] .chart-title { color: #1e1b4b; }
/* Transactions */
html[data-theme="light"] .txn-row:hover { background: rgba(29, 78, 216,.05); }
html[data-theme="light"] .txn-cat-icon { background: #eef1fb; border-color: rgba(29, 78, 216,.12); }
html[data-theme="light"] .txn-bank { background: #eef1fb; border-color: rgba(29, 78, 216,.12); color: #4338ca; }
html[data-theme="light"] .table-wrap { border-color: rgba(29, 78, 216,.1); box-shadow: 0 2px 16px rgba(29, 78, 216,.07); }
html[data-theme="light"] .txn-table th { background: #f4f5ff; border-bottom-color: rgba(29, 78, 216,.12); color: #4338ca; }
html[data-theme="light"] .txn-table td { border-bottom-color: rgba(29, 78, 216,.05); }
html[data-theme="light"] .txn-table tbody tr:hover td { background: rgba(29, 78, 216,.03); }
html[data-theme="light"] .sort-col:hover { color: #4338ca; }
html[data-theme="light"] .badge-success { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.25); }
html[data-theme="light"] .badge-pending { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.25); }
html[data-theme="light"] .page-btn { background: #fff; border-color: rgba(29, 78, 216,.14); }
html[data-theme="light"] .page-btn:hover:not(.active) { background: #f4f5ff; }
/* Filters + drill bar */
html[data-theme="light"] .drill-bar { background: #fff; border-color: rgba(29, 78, 216,.1); box-shadow: 0 2px 12px rgba(29, 78, 216,.07); }
html[data-theme="light"] .filter-card { background: #fff; border-color: rgba(29, 78, 216,.1); box-shadow: 0 2px 12px rgba(29, 78, 216,.07); }
html[data-theme="light"] .filter-inline select { background: #fff; border-color: rgba(29, 78, 216,.14); }
/* Analytics */
html[data-theme="light"] .kpi-chip { background: #fff; border-color: rgba(29, 78, 216,.1); box-shadow: 0 2px 12px rgba(29, 78, 216,.07); }
html[data-theme="light"] .kpi-val { color: #4338ca; }
html[data-theme="light"] .merchant-row:hover { background: rgba(29, 78, 216,.05); }
html[data-theme="light"] .cat-bar-track { background: #eef1fb; }
/* Accounts */
html[data-theme="light"] .bank-group-card { background: #fff; border-color: rgba(29, 78, 216,.1); box-shadow: 0 2px 12px rgba(29, 78, 216,.07); }
html[data-theme="light"] .bank-account-row { background: #f4f5ff; border-color: rgba(29, 78, 216,.1); }
html[data-theme="light"] .no-banks-msg { background: linear-gradient(135deg,rgba(29, 78, 216,.05),rgba(37, 99, 235,.03)); border-color: rgba(29, 78, 216,.18); }
html[data-theme="light"] .sandbox-hint { background: rgba(29, 78, 216,.06); border-color: rgba(29, 78, 216,.15); }
/* Scrollbar */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c7d2ef; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #a5b4d8; }
/* Setup modal */
html[data-theme="light"] .setup-modal-box { background: #fff; border-color: rgba(29, 78, 216,.2); }
html[data-theme="light"] .setup-step { background: #f4f5ff; border-color: rgba(29, 78, 216,.12); }
html[data-theme="light"] .setup-step code { color: #4338ca; }
/* ── Design tokens (dark — default) ───────────────────────────── */
:root {
/* Dark-blue palette: deep navy chrome with cobalt accents. No
purple/violet anywhere — every "purple" token is mapped onto a
blue. Status colours (income green / loss red / warning amber)
stay semantic. */
--fv-c1: #1e40af; /* blue-800 — navy primary */
--fv-c2: #1e3a8a; /* blue-900 — deeper navy */
--fv-accent: #3b82f6; /* blue-500 for hover/links */
--fv-accent-lo: #172554; /* blue-950 */
--fv-accent-hi: #60a5fa; /* blue-400 — legible on navy */
--fv-accent-soft: rgba(30,64,175,.14);
--bg: #050a18;
--bg-raised: #081127;
--bg-card: #0c1736;
--bg-hover: #0f1c44;
--bg-input: #060d1f;
--border: rgba(96,165,250,.10);
--border-mid: rgba(96,165,250,.18);
--border-hi: rgba(96,165,250,.28);
--text: #e6efff;
--text-mid: #93c5fd;
--text-dim: #64748b;
--muted: #93c5fd;
--blue: #3b82f6;
--blue-l: #60a5fa;
--blue-d: #1e3a8a;
--green: #10b981;
--green-l: #34d399;
--red: #ef4444;
--red-l: #f87171;
--purple: #2563eb; /* mapped to blue, not violet */
--purple-l: #60a5fa;
--amber: #f59e0b;
--g-blue: linear-gradient(135deg, #1e40af 0%, #0c1e4f 100%);
--g-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
--g-red: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
--g-purple: linear-gradient(135deg, #1e40af 0%, #0c1e4f 100%);
--g-sidebar: linear-gradient(180deg, #081127 0%, #03081a 100%);
--r: 16px;
--r-sm: 10px;
--r-xs: 7px;
--sw: 232px;
--ease: .2s cubic-bezier(.4,0,.2,1);
}
/* ── Light mode CSS variables ─────────────────────────────────── */
[data-theme="light"] {
--bg: #ffffff;
--bg-raised: #f8fafc;
--bg-card: #ffffff;
--bg-hover: #f1f5f9;
--bg-input: #f8fafc;
--border: rgba(15, 23, 42, .08);
--border-mid: rgba(15, 23, 42, .14);
--border-hi: rgba(15, 23, 42, .22);
--text: #0f172a;
--text-mid: #334155;
--text-dim: #64748b;
--muted: #334155;
--g-sidebar: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
/* ── Base ──────────────────────────────────────────────────────── */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
html, body { height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; }
body {
font-family: 'Inter Tight','Inter','SF Pro Text','Segoe UI Variable','Segoe UI',system-ui,-apple-system,sans-serif;
background: var(--bg);
color: var(--text);
display: flex;
height: 100vh;
height: 100dvh;
overflow: hidden;
overscroll-behavior: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Flat dark background — no purple wash */
background-image: none;
}
[data-theme="dark"] body { background: #050a18; }
/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e2a40; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #2a3a56; }
/* ══════════════════════════════════════════════════════════════════
SIDEBAR
══════════════════════════════════════════════════════════════════ */
.sidebar {
width: var(--sw);
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
overflow: hidden;
background: var(--g-sidebar);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
position: fixed;
top: 0; left: 0;
z-index: 100;
transition: transform var(--ease);
padding-top: env(safe-area-inset-top, 0);
padding-bottom: env(safe-area-inset-bottom, 0);
}
/* Logo area */
.sidebar-logo {
display: flex;
align-items: center;
gap: 9px;
padding: 16px 14px 14px;
border-bottom: 1px solid var(--border);
}
.logo-icon {
width: 34px; height: 34px;
border-radius: 10px;
background: var(--g-blue);
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem;
box-shadow: 0 4px 16px rgba(29, 78, 216,.45), inset 0 1px 0 rgba(255,255,255,.15);
flex-shrink: 0;
}
.logo-text {
font-size: 1.35rem;
font-weight: 800;
letter-spacing: -.4px;
background: linear-gradient(135deg, #fff 30%, #818cf8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Nav */
.sidebar-nav {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 1px;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--r-sm);
text-decoration: none;
color: var(--text-mid);
font-size: .9rem;
font-weight: 600;
transition: background var(--ease), color var(--ease);
position: relative;
border: 1px solid transparent;
}
.nav-item:hover {
background: rgba(255,255,255,.04);
color: var(--text);
}
.nav-item.active {
background: linear-gradient(135deg, rgba(29, 78, 216,.18) 0%, rgba(29, 78, 216,.06) 100%);
color: var(--blue-l);
border-color: rgba(29, 78, 216,.22);
}
.nav-item.active::before {
content: '';
position: absolute;
left: -1px; top: 18%; bottom: 18%;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--g-blue);
box-shadow: 0 0 8px var(--blue);
}
.nav-icon {
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
border-radius: 8px;
background: rgba(255,255,255,.04);
transition: all var(--ease);
}
.nav-icon svg {
width: 18px; height: 18px;
stroke-width: 2;
}
.nav-item:hover .nav-icon {
background: rgba(29, 78, 216,.15);
color: var(--blue-l);
}
.nav-item.active .nav-icon {
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), var(--fv-c1,#2563eb));
color: #fff;
box-shadow: 0 4px 12px rgba(29, 78, 216,.45);
}
.nav-label { line-height: 1.2; letter-spacing: -.1px; }
html[data-theme="light"] .nav-icon { background: rgba(29, 78, 216,.06); }
html[data-theme="light"] .nav-item:hover .nav-icon { background: rgba(29, 78, 216,.12); }
/* Sidebar plan card — sits just above the user footer. Clickable → pricing. */
.sidebar-plan {
margin: 10px 14px 8px;
padding: 12px 14px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(37, 99, 235,0.14), rgba(29, 78, 216,0.14));
border: 1px solid rgba(37, 99, 235,0.35);
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sidebar-plan:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(37, 99, 235,0.18); }
.sidebar-plan .sp-row {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin-bottom: 4px;
}
.sidebar-plan .sp-badge {
font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 8px; border-radius: 999px;
color: white;
}
.sidebar-plan .sp-badge-max { background: linear-gradient(135deg, var(--fv-c1,#2563eb), #10b981); }
.sidebar-plan .sp-badge-pro { background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), #3b82f6); }
.sidebar-plan .sp-badge-elite { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.sidebar-plan .sp-badge-trial { background: linear-gradient(135deg, #10b981, #34d399); }
.sidebar-plan .sp-badge-admin { background: linear-gradient(135deg, #f59e0b, #f43f5e); }
.sidebar-plan .sp-days {
font-size: 0.72rem; color: #cbd5e1; font-weight: 600;
}
[data-theme="light"] .sidebar-plan .sp-days { color: #475569; }
.sidebar-plan .sp-meta {
font-size: 0.72rem; color: #94a3b8; margin-bottom: 8px;
}
[data-theme="light"] .sidebar-plan .sp-meta { color: #64748b; }
.sidebar-plan .sp-cta {
width: 100%; padding: 7px 10px;
border: none; border-radius: 8px;
background: linear-gradient(135deg, var(--fv-c1,#2563eb), var(--fv-c2,#1d4ed8));
color: white; font-weight: 600; font-size: 0.76rem;
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease;
}
.sidebar-plan .sp-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37, 99, 235,0.4); }
/* 2FA reminder card in sidebar (shown when MFA not enabled) */
.sidebar-2fa-reminder {
display: flex; align-items: center; gap: 10px;
width: calc(100% - 28px);
margin: 6px 14px 10px;
padding: 10px 12px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(251,191,36,0.14), rgba(245,158,11,0.12));
border: 1px solid rgba(251,191,36,0.45);
color: #fde68a;
cursor: pointer;
text-align: left;
font: inherit;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sidebar-2fa-reminder:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(251,191,36,0.22);
border-color: rgba(251,191,36,0.7);
}
.sidebar-2fa-reminder .s2fa-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.sidebar-2fa-reminder .s2fa-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sidebar-2fa-reminder .s2fa-text b { font-size: 0.8rem; font-weight: 700; color: #fef3c7; }
.sidebar-2fa-reminder .s2fa-text small { font-size: 0.7rem; color: #fcd34d; font-weight: 600; }
[data-theme="light"] .sidebar-2fa-reminder { color: #78350f; background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(245,158,11,0.14)); }
[data-theme="light"] .sidebar-2fa-reminder .s2fa-text b { color: #78350f; }
[data-theme="light"] .sidebar-2fa-reminder .s2fa-text small { color: #b45309; }
.sidebar-plan.sp-urgent {
background: linear-gradient(135deg, rgba(251,146,60,0.18), rgba(239,68,68,0.14));
border-color: rgba(251,146,60,0.55);
}
.sidebar-plan.sp-urgent .sp-days { color: #fdba74; }
.sidebar-plan.sp-expired {
background: rgba(239,68,68,0.14);
border-color: rgba(239,68,68,0.45);
}
.sidebar-plan.sp-expired .sp-days { color: #fca5a5; }
/* Footer */
.sidebar-footer {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0));
border-top: 1px solid var(--border);
background: rgba(0,0,0,.12);
flex-shrink: 0;
margin-top: auto;
}
.user-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--g-blue);
display: flex; align-items: center; justify-content: center;
font-size: .92rem; font-weight: 700;
flex-shrink: 0;
box-shadow: 0 2px 10px rgba(29, 78, 216,.4);
}
.user-info { flex: 1; min-width: 0; overflow: hidden; }
.user-name { font-size: .94rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-acct { font-size: .78rem; color: var(--text-mid); margin-top: 3px; font-weight: 500; }
/* ══════════════════════════════════════════════════════════════════
MAIN SHELL
══════════════════════════════════════════════════════════════════ */
.main {
margin-left: var(--sw);
flex: 1;
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
overflow: hidden;
min-width: 0;
}
/* ── Topbar ────────────────────────────────────────────────────── */
.topbar {
display: flex;
align-items: center;
gap: 12px;
padding: 0 28px;
height: 58px;
/* Opaque background — no backdrop-filter. blur() on sticky is the
#1 cause of scroll-flicker on mobile Safari/Chrome. */
background: #081127;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 50;
}
html[data-theme="light"] .topbar { background: #f8fafc; }
.menu-btn {
display: none;
align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: 10px;
background: var(--bg-card);
border: 1px solid var(--border);
color: var(--text);
cursor: pointer;
flex-shrink: 0;
transition: all var(--ease);
}
.menu-btn svg { width: 20px; height: 20px; }
.menu-btn:hover {
background: var(--bg-hover);
border-color: var(--blue);
color: var(--blue);
transform: scale(1.05);
}
.topbar-title {
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -.3px;
flex: 1;
}
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-date { font-size: .98rem; color: var(--text-mid); white-space: nowrap; font-weight: 500; }
/* Status pill */
.conn-status {
display: flex; align-items: center; gap: 6px;
background: var(--bg-card);
border: 1px solid var(--border);
padding: 5px 12px;
border-radius: 20px;
font-size: .73rem; font-weight: 500; color: var(--text-mid);
white-space: nowrap;
}
.conn-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--amber);
flex-shrink: 0;
}
/* Refresh button (rate-limited) */
.btn-refresh {
display: inline-flex; align-items: center; gap: 6px;
background: var(--bg-card);
color: var(--text);
border: 1px solid var(--border-mid);
padding: 7px 12px;
border-radius: var(--r-sm);
font-size: .78rem; font-weight: 600; font-family: inherit;
cursor: pointer;
transition: all var(--ease);
white-space: nowrap;
flex-shrink: 0;
}
.btn-refresh svg { width: 15px; height: 15px; transition: transform .4s ease; }
.btn-refresh:hover:not(:disabled) {
border-color: var(--blue);
color: var(--blue-l);
background: var(--bg-hover);
}
.btn-refresh:hover:not(:disabled) svg { transform: rotate(-90deg); }
.btn-refresh:disabled {
opacity: .55;
cursor: not-allowed;
}
.btn-refresh.spinning svg {
animation: refreshSpin 1s linear infinite;
}
@keyframes refreshSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.refresh-meta {
font-size: .68rem;
color: var(--text-dim);
margin-left: 4px;
font-weight: 500;
white-space: nowrap;
}
@media (max-width: 720px) {
.btn-refresh .refresh-label { display: none; }
.refresh-meta { display: none; }
}
html[data-theme="light"] .btn-refresh { background: #fff; border-color: rgba(29, 78, 216,.18); }
/* Theme toggle button */
.theme-btn {
width: 34px; height: 34px;
border-radius: 50%;
border: 1px solid var(--border-mid);
background: var(--bg-card);
font-size: 1rem;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all var(--ease);
flex-shrink: 0;
}
.theme-btn:hover { transform: rotate(15deg) scale(1.1); border-color: var(--border-hi); }
/* Theme button when used in the sidebar footer */
.theme-btn-side {
width: 30px; height: 30px;
font-size: .95rem;
margin-right: 2px;
}
/* Subtle vertical divider in topbar (isolates the AI orb from refresh/etc) */
.topbar-divider {
width: 1px;
height: 22px;
background: var(--border-mid, rgba(255,255,255,.12));
margin: 0 6px;
flex-shrink: 0;
display: inline-block;
}
/* ═══════ AI Orb (Siri-style glowing launcher) ═══════ */
.ai-orb-btn {
position: relative;
width: 40px; height: 40px;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
isolation: isolate;
transition: transform .25s cubic-bezier(.34,1.56,.64,1),
filter .25s ease-out;
/* Tight ambient halo — much smaller idle footprint. The richer
glow only shows when the user hovers. */
filter: drop-shadow(0 0 2px rgba(167,139,250,.28))
drop-shadow(0 0 4px rgba(16, 185, 129,.14));
}
.ai-orb-btn:hover {
transform: scale(1.10);
filter: drop-shadow(0 0 5px rgba(167,139,250,.55))
drop-shadow(0 0 10px rgba(16, 185, 129,.32))
drop-shadow(0 0 16px rgba(59,130,246,.18));
}
.ai-orb-btn:active {
transform: scale(.9);
animation: aiOrbPress .45s cubic-bezier(.22,1,.36,1);
}
/* Rotating conic-gradient ring with soft blur glow — tightened to
sit closer to the orb so the glow is contained, not spilling out. */
.ai-orb-ring {
position: absolute;
inset: -2px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
#2563eb, #10b981, #f59e0b, #10b981, #3b82f6, #2563eb
);
filter: blur(4px);
opacity: .55;
/* Idle: static. Spin only fires when the user hovers — see the
:hover rule further down in this file. */
animation: none;
z-index: -2;
}
/* Outer aura — small static glow at idle, breathes on hover only. */
.ai-orb-btn::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
background: radial-gradient(
circle at center,
rgba(167,139,250,.18) 0%,
rgba(16, 185, 129,.10) 40%,
transparent 70%
);
filter: blur(3px);
animation: none;
z-index: -3;
pointer-events: none;
}
/* Sharper second ring — also static at idle, spins on hover. */
.ai-orb-btn::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 50%;
background: conic-gradient(
from 90deg,
#a78bfa, #f472b6, #fbbf24, #34d399, #60a5fa, #a78bfa
);
opacity: .65;
animation: none;
z-index: -1;
}
/* Inner disc */
.ai-orb-core {
position: relative;
width: 100%; height: 100%;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #1f2540 0%, #0b1020 75%);
display: flex; align-items: center; justify-content: center;
color: #fff;
box-shadow:
inset 0 1px 2px rgba(255,255,255,.22),
inset 0 -2px 6px rgba(37, 99, 235,.35),
0 2px 10px rgba(0,0,0,.45);
overflow: hidden;
}
.ai-orb-core svg {
filter: drop-shadow(0 0 3px rgba(167,139,250,.85))
drop-shadow(0 0 6px rgba(16, 185, 129,.45));
animation: none;
}
/* Light theme: lighter inner disc for contrast */
html[data-theme="light"] .ai-orb-core {
background: radial-gradient(circle at 30% 30%, #fafaff 0%, #e9ecff 75%);
color: #4c1d95;
}
html[data-theme="light"] .ai-orb-core svg {
filter: drop-shadow(0 0 4px rgba(37, 99, 235,.75));
}
@keyframes aiOrbSpin {
to { transform: rotate(360deg); }
}
@keyframes aiOrbPulse {
0%, 100% { opacity: .75; filter: blur(10px); }
50% { opacity: 1; filter: blur(14px); }
}
@keyframes aiOrbBreathe {
0%, 100% { transform: scale(1); opacity: .6; }
50% { transform: scale(1.25); opacity: 1; }
}
@keyframes aiOrbSparkle {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.15) rotate(10deg); }
}
/* Press-burst: shockwave ring expanding out of the orb when clicked */
@keyframes aiOrbPress {
0% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(167,139,250,.65); }
50% { transform: scale(1.08);box-shadow: 0 0 0 22px rgba(167,139,250,0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(167,139,250,0); }
}
/* Hover only — spin/breathe animations awaken when the user
actually hovers over the orb. Idle stays static. */
.ai-orb-btn:hover .ai-orb-ring {
animation: aiOrbSpin 1.1s linear infinite, aiOrbPulse 0.85s ease-in-out infinite;
opacity: .85;
}
.ai-orb-btn:hover::before {
animation: aiOrbSpin 1.5s linear infinite reverse;
opacity: 1;
}
.ai-orb-btn:hover::after {
animation: aiOrbBreathe 1.2s ease-in-out infinite;
}
.ai-orb-btn:hover .ai-orb-core svg {
animation: aiOrbSparkle 0.9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.ai-orb-btn:hover .ai-orb-ring,
.ai-orb-btn:hover::before,
.ai-orb-btn:hover::after,
.ai-orb-btn:hover .ai-orb-core svg { animation: none; }
}
/* ─── AI orb cross-device pristine state ──────────────────────────
Guarantees the orb renders at full desktop quality on every
breakpoint. The legacy code had a handful of mobile-only
overrides that individually killed the outer aura, dimmed the
ring, or removed the sparkle filter — no single override was
fatal but the combination made the orb look dramatically weaker
below the 27-inch reference. These rules restore every layer at
full fidelity with `!important`, so future mobile tweaks can't
accidentally degrade it again. Scoped to .topbar so admin/debug
pages that might place a plain .ai-orb-btn somewhere else aren't
force-styled. */
.topbar .ai-orb-btn {
overflow: visible !important;
}
.topbar .ai-orb-btn::after {
display: block !important;
content: "" !important;
inset: -14px !important;
filter: blur(8px) !important;
opacity: 1 !important;
}
.topbar .ai-orb-ring {
inset: -6px !important;
filter: blur(10px) !important;
opacity: .95 !important;
}
.topbar .ai-orb-btn::before {
display: block !important;
inset: -1px !important;
opacity: 1 !important;
}
/* Topbar flex row must not clip the outer halo. A parent with
overflow:hidden would cut the aura flat along the row's edge. */
.topbar, .topbar-right, .topbar-actions {
overflow: visible !important;
}
/* Halo scaling for smaller viewports.
The full -14px outer aura + -6px ring look right at 27-inch
scale, but on tablets and phones the halo is physically the same
size while the topbar is narrower — so the glow bleeds into
neighboring UI (chat widgets, corner pills, page content below).
Scale the aura radii down proportionally so it still reads as a
glowing orb but stays contained in its own column. Everything
else (animation, colors, spin speed, sparkle) stays identical to
desktop. */
@media (max-width: 1200px) {
.topbar .ai-orb-btn::after { inset: -10px !important; filter: blur(6px) !important; }
.topbar .ai-orb-ring { inset: -4px !important; filter: blur(7px) !important; }
}
@media (max-width: 720px) {
.topbar .ai-orb-btn::after { inset: -7px !important; filter: blur(5px) !important; }
.topbar .ai-orb-ring { inset: -3px !important; filter: blur(5px) !important; }
}
@media (max-width: 500px) {
.topbar .ai-orb-btn::after { inset: -5px !important; filter: blur(4px) !important; opacity: .85 !important; }
.topbar .ai-orb-ring { inset: -2px !important; filter: blur(4px) !important; }
}
/* Let the glow visually breathe through neighbors instead of acting
like a solid disc: pseudo-element halos never intercept pointer
events, so clicks on underlying widgets still work where the aura
overlaps them. */
.topbar .ai-orb-btn::after,
.topbar .ai-orb-btn::before,
.topbar .ai-orb-ring {
pointer-events: none !important;
}
/* Logout button in sidebar */
.logout-btn {
margin-left: auto;
background: none;
border: 1px solid transparent;
color: var(--text-dim);
width: 28px; height: 28px;
border-radius: var(--r-xs);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: all var(--ease);
}
.logout-btn svg { width: 15px; height: 15px; }
.logout-btn:hover { color: var(--red-l); border-color: rgba(244,63,94,.25); background: rgba(244,63,94,.08); }
/* Logo gem */
.logo-gem {
width: 36px;
height: 36px;
display: grid;
place-items: center;
filter: drop-shadow(0 2px 10px rgba(29, 78, 216,.35));
animation: gemFloat 5s ease-in-out infinite;
flex-shrink: 0;
}
.logo-gem img { width: 100%; height: 100%; object-fit: contain; display: block; }
@keyframes gemFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* Donut chart wrapper */
.donut-wrap {
position: relative;
width: 100%;
height: 220px;
display: flex; align-items: center; justify-content: center;
}
.donut-wrap canvas { max-height: 300px !important; }
/* Top connect button */
.btn-connect-top {
display: inline-flex; align-items: center; gap: 6px;
background: var(--g-blue);
color: #fff; border: none;
padding: 7px 14px;
border-radius: var(--r-sm);
font-size: .78rem; font-weight: 600; font-family: inherit;
cursor: pointer;
transition: all var(--ease);
box-shadow: 0 3px 12px rgba(29, 78, 216,.35);
white-space: nowrap;
}
.btn-connect-top:hover {
box-shadow: 0 6px 22px rgba(29, 78, 216,.55);
transform: translateY(-1px);
}
/* ── Demo Banner ───────────────────────────────────────────────── */
.demo-banner {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 9px 28px;
background: linear-gradient(90deg, rgba(251,191,36,.08), rgba(251,191,36,.02));
border-bottom: 1px solid rgba(251,191,36,.14);
font-size: .78rem;
}
.demo-banner span:first-child { font-weight: 700; color: var(--amber); }
.demo-banner span:last-of-type { flex: 1; color: var(--text-mid); }
.banner-btn {
background: rgba(251,191,36,.14);
color: var(--amber);
border: 1px solid rgba(251,191,36,.28);
padding: 5px 13px; border-radius: 6px;
font-size: .75rem; font-weight: 600; font-family: inherit;
cursor: pointer; white-space: nowrap;
transition: background var(--ease);
}
.banner-btn:hover { background: rgba(251,191,36,.24); }
.banner-close {
background: none; border: none;
color: var(--text-dim); cursor: pointer; font-size: .85rem;
padding: 2px; transition: color var(--ease);
}
.banner-close:hover { color: var(--text-mid); }
/* ── Loading ───────────────────────────────────────────────────── */
.loading-overlay {
position: fixed; inset: 0; z-index: 9999;
background: rgba(5,8,15,.92);
/* Removed backdrop-filter — caused a repaint-storm on show/hide during
sign-in. Solid dark bg looks the same. */
display: flex; /* Always flex; visibility/opacity gate shows it */
flex-direction: column;
align-items: center; justify-content: center;
gap: 18px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .15s ease-out, visibility 0s linear .15s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.loading-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity .15s ease-out;
}
.spinner {
width: 38px; height: 38px;
border-radius: 50%;
border: 2.5px solid rgba(29, 78, 216,.15);
border-top-color: var(--blue);
animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: .82rem; color: var(--text-mid); font-weight: 500; }
/* ══════════════════════════════════════════════════════════════════
PAGES
══════════════════════════════════════════════════════════════════ */
.page { display: none; padding: 16px 22px; flex: 1; min-height: 0; overflow-y: auto; }
.page.active { display: flex; flex-direction: column; }
/* Dashboard + Analytics prefer to fit viewport (inner cards flex to equal
heights), but scroll gracefully on short screens instead of clipping. */
#page-analytics.active,
#page-dashboard.active { overflow-y: auto; }
/* fadeUp keyframe removed — motion handles page entrance now. */
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
flex-wrap: wrap;
gap: 10px;
}
.page-header h2 {
font-size: 1.85rem;
font-weight: 800;
letter-spacing: -.4px;
}
/* Plaid product status badge (Investments / Crypto headers) */
.product-badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 999px;
vertical-align: middle;
margin-left: 10px;
border: 1px solid transparent;
}
.product-badge.badge-active { background: rgba(16,185,129,.12); color:#10b981; border-color: rgba(16,185,129,.30); }
.product-badge.badge-pending { background: rgba(245,158,11,.12); color:#f59e0b; border-color: rgba(245,158,11,.30); }
.product-badge.badge-error { background: rgba(239, 68, 68,.12); color:#ef4444; border-color: rgba(239, 68, 68,.30); }
/* ── Drill-down bar ────────────────────────────────────────────── */
.drill-bar {
display: flex;
align-items: flex-end;
gap: 12px;
flex-wrap: wrap;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 14px 18px;
margin-bottom: 20px;
}
.drill-group { display: flex; flex-direction: column; gap: 5px; }
.drill-group label {
font-size: .65rem;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: .8px;
font-weight: 700;
}
.drill-group select {
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--text);
padding: 8px 30px 8px 11px;
border-radius: var(--r-sm);
font-size: .8rem; font-family: inherit;
outline: none; cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M1 1l3.5 3L8 1' stroke='%234a5568' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
min-width: 128px;
transition: border-color var(--ease);
}
.drill-group select:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(29, 78, 216,.12); }
/* ══════════════════════════════════════════════════════════════════
STAT CARDS
══════════════════════════════════════════════════════════════════ */
.cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 20px;
}
.card {
position: relative;
padding: 22px 22px 20px;
border-radius: var(--r);
border: 1px solid var(--border);
overflow: hidden;
transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
cursor: default;
}
.card:hover { transform: translateY(-4px); }
/* decorative blob */
.card::before {
content: '';
position: absolute;
width: 130px; height: 130px;
border-radius: 50%;
top: -55px; right: -45px;
filter: blur(50px);
pointer-events: none;
transition: opacity var(--ease);
}
.card:hover::before { opacity: 1.4; }
/* — Balance card — */
.card--blue {
background: linear-gradient(150deg, #0f1630 0%, #0d1423 100%);
border-color: rgba(29, 78, 216,.22);
}
.card--blue::before { background: rgba(29, 78, 216,.5); }
.card--blue:hover { box-shadow: 0 20px 48px rgba(29, 78, 216,.18); border-color: rgba(29, 78, 216,.4); }
.card--blue .card-value { color: var(--blue-l); }
.card--blue .card-icon { color: var(--blue); }
/* — Income card — */
.card--green {
background: linear-gradient(150deg, #0a1e18 0%, #091713 100%);
border-color: rgba(16,185,129,.2);
}
.card--green::before { background: rgba(16,185,129,.5); }
.card--green:hover { box-shadow: 0 20px 48px rgba(16,185,129,.14); border-color: rgba(16,185,129,.38); }
.card--green .card-value { color: var(--green-l); }
.card--green .card-icon { color: var(--green); }
/* — Expenses card — */
.card--red {
background: linear-gradient(150deg, #1e0d14 0%, #160a10 100%);
border-color: rgba(244,63,94,.2);
}
.card--red::before { background: rgba(244,63,94,.5); }
.card--red:hover { box-shadow: 0 20px 48px rgba(244,63,94,.14); border-color: rgba(244,63,94,.38); }
.card--red .card-value { color: var(--red-l); }
.card--red .card-icon { color: var(--red); }
/* — Savings card — */
.card--purple {
background: linear-gradient(150deg, #14102a 0%, #0f0c1e 100%);
border-color: rgba(37, 99, 235,.2);
}
.card--purple::before { background: rgba(37, 99, 235,.5); }
.card--purple:hover { box-shadow: 0 20px 48px rgba(37, 99, 235,.14); border-color: rgba(37, 99, 235,.38); }
.card--purple .card-value { color: var(--purple-l); }
.card--purple .card-icon { color: var(--purple); }
/* Card typography */
.card-label {
font-size: .95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .7px;
color: var(--text-mid);
margin-bottom: 10px;
}
.card-value {
font-size: 2.35rem;
font-weight: 800;
letter-spacing: -.6px;
line-height: 1;
margin-bottom: 10px;
}
.card-sub {
font-size: 1rem;
color: var(--text-mid);
font-weight: 600;
}
.card-icon {
position: absolute;
right: 18px; top: 18px;
font-size: 1.9rem;
opacity: .18;
pointer-events: none;
}
/* ══════════════════════════════════════════════════════════════════
CHART CARDS
══════════════════════════════════════════════════════════════════ */
.charts-row {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
.chart-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 24px 26px;
transition: border-color var(--ease);
}
.chart-card:hover { border-color: var(--border-mid); }
.chart-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.chart-title {
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -.2px;
color: var(--text);
margin-bottom: 14px;
}
.chart-header .chart-title { margin-bottom: 0; }
canvas { max-height: 340px; cursor: pointer; }
/* Chart drill-down hint */
.chart-hint {
font-size: .78rem;
color: var(--text-mid);
font-weight: 500;
letter-spacing: .2px;
margin-left: 8px;
opacity: .9;
}
.chart-hint::before { content: "💡 "; }
/* Live badge */
.live-badge {
display: inline-flex; align-items: center; gap: 5px;
font-size: .76rem; font-weight: 700;
color: var(--green);
background: rgba(16,185,129,.1);
border: 1px solid rgba(16,185,129,.2);
padding: 3px 9px; border-radius: 20px;
letter-spacing: .2px;
}
.live-dot {
width: 6px; height: 6px;
background: var(--green);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
50% { opacity: .6; transform: scale(.7); }
}
/* Legend */
.legend {
display: flex;
flex-wrap: wrap;
gap: 5px 12px;
margin-top: 12px;
}
.legend-item {
display: flex; align-items: center; gap: 5px;
font-size: .7rem; color: var(--text-mid);
font-weight: 500;
}
.legend-dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
/* ══════════════════════════════════════════════════════════════════
TRANSACTION LIST (Dashboard)
══════════════════════════════════════════════════════════════════ */
.txn-list { display: flex; flex-direction: column; }
.txn-row {
display: flex; align-items: center; gap: 11px;
padding: 9px 8px;
border-radius: var(--r-sm);
transition: background var(--ease);
cursor: pointer;
}
.txn-row:hover { background: var(--bg-hover); }
.txn-cat-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: var(--bg-hover);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: .95rem;
flex-shrink: 0;
}
/* Transaction merchant logo — clean, no white box wrapper.
Real brand logos sit on the dark/light app background directly;
only the letter fallback uses a colored circle. */
.txn-logo {
width: 32px; height: 32px;
border-radius: 0;
display: flex; align-items: center; justify-content: center;
overflow: visible;
flex-shrink: 0;
background: transparent;
border: none;
}
.txn-logo img,
.txn-logo .merchant-logo-img { width: 28px; height: 28px; object-fit: contain; display: block; background: transparent; }
.txn-logo .merchant-fallback { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .9rem; }
/* Small logo inside the Transactions table row */
.txn-cell-merchant { display: flex; align-items: center; gap: 10px; font-size: .98rem; font-weight: 600; }
.txn-logo-sm {
width: 26px; height: 26px;
border-radius: 0;
display: inline-flex; align-items: center; justify-content: center;
overflow: visible;
flex-shrink: 0;
background: transparent;
border: none;
}
.txn-logo-sm img,
.txn-logo-sm .merchant-logo-img { width: 22px; height: 22px; object-fit: contain; display: block; background: transparent; }
.txn-logo-sm .merchant-fallback { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .76rem; }
.txn-bank-cell { font-size: .9rem; color: var(--text-mid); font-weight: 500; }
.txn-info { flex: 1; min-width: 0; }
.txn-merchant {
font-size: .94rem; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.txn-date {
font-size: .84rem; color: var(--text-mid);
display: flex; align-items: center; gap: 6px;
margin-top: 4px;
font-weight: 500;
}
.txn-bank {
background: rgba(255,255,255,.05);
border: 1px solid var(--border);
padding: 2px 8px; border-radius: 5px;
font-size: .76rem; color: var(--text);
font-weight: 500;
}
.txn-amount { font-size: .96rem; font-weight: 700; white-space: nowrap; }
.txn-amount.credit { color: var(--green-l); }
.txn-amount.debit { color: var(--red-l); }
.view-all {
font-size: .84rem; color: var(--blue-l);
text-decoration: none; font-weight: 600;
transition: color var(--ease);
}
.view-all:hover { color: #fff; }
/* ══════════════════════════════════════════════════════════════════
TRANSACTIONS PAGE
══════════════════════════════════════════════════════════════════ */
.filter-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 18px 20px;
margin-bottom: 16px;
}
.filter-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.filter-group { display: flex; flex-direction: column; gap: 5px; min-width: 108px; }
.filter-group label {
font-size: .76rem; font-weight: 700;
color: var(--text-mid); text-transform: uppercase; letter-spacing: .8px;
}
.filter-group select,
.filter-group input {
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--text);
padding: 9px 12px;
border-radius: var(--r-sm);
font-size: .92rem; font-family: inherit;
outline: none;
transition: border-color var(--ease), box-shadow var(--ease);
}
.filter-group select {
appearance: none; cursor: pointer; padding-right: 26px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M1 1l3.5 3L8 1' stroke='%234a5568' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 9px center;
}
.filter-group select:focus,
.filter-group input:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(29, 78, 216,.12);
}
.filter-group input::placeholder { color: var(--text-dim); }
.search-input { min-width: 150px; }
.filter-actions { display: flex; align-items: center; gap: 8px; }
.filter-count { font-size: .74rem; color: var(--text-dim); margin-left: 6px; font-weight: 500; }
/* Buttons */
.btn-primary {
background: var(--g-blue); color: #fff; border: none;
padding: 8px 18px; border-radius: var(--r-sm);
font-size: .8rem; font-weight: 600; font-family: inherit;
cursor: pointer; transition: all var(--ease);
box-shadow: 0 2px 10px rgba(29, 78, 216,.3);
}
.btn-primary:hover { box-shadow: 0 5px 18px rgba(29, 78, 216,.5); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
background: transparent; color: var(--text-mid);
border: 1px solid var(--border);
padding: 8px 14px; border-radius: var(--r-sm);
font-size: .8rem; font-family: inherit; cursor: pointer;
transition: all var(--ease);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-mid); }
/* Table */
.table-wrap {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r);
overflow: auto;
}
.txn-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.txn-table thead { position: sticky; top: 0; }
.txn-table th {
text-align: left; padding: 13px 16px;
color: var(--text-dim);
font-weight: 700; font-size: .82rem;
text-transform: uppercase; letter-spacing: .6px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
background: var(--bg-raised);
}
.sort-col { cursor: pointer; user-select: none; }
.sort-col:hover { color: var(--blue-l); }
.txn-table td { padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.03); vertical-align: middle; }
.txn-table tbody tr:last-child td { border-bottom: none; }
.txn-table tbody tr:hover td { background: rgba(255,255,255,.025); }
.badge {
display: inline-flex; align-items: center;
padding: 4px 11px; border-radius: 20px;
font-size: .8rem; font-weight: 700; white-space: nowrap;
}
.badge-success { background: rgba(16,185,129,.1); color: var(--green-l); border: 1px solid rgba(16,185,129,.2); }
.badge-pending { background: rgba(251,191,36,.1); color: var(--amber); border: 1px solid rgba(251,191,36,.2); }
/* Pagination */
.pagination { display: flex; justify-content: center; gap: 5px; padding: 16px 0 4px; }
.page-btn {
width: 30px; height: 30px; border-radius: var(--r-xs);
border: 1px solid var(--border);
background: var(--bg-card); color: var(--text-mid);
font-size: .78rem; font-family: inherit; cursor: pointer;
transition: all var(--ease);
}
.page-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 2px 10px rgba(29, 78, 216,.4); }
.page-btn:hover:not(.active) { background: var(--bg-hover); color: var(--text); border-color: var(--border-mid); }
/* ══════════════════════════════════════════════════════════════════
ANALYTICS PAGE
══════════════════════════════════════════════════════════════════ */
.filter-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-inline select {
background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
padding: 7px 28px 7px 10px; border-radius: var(--r-sm);
font-size: .8rem; font-family: inherit; outline: none; cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M1 1l3.5 3L8 1' stroke='%234a5568' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 9px center;
transition: border-color var(--ease);
}
.filter-inline select:focus { border-color: var(--blue); outline: none; }
/* KPI chips */
.kpi-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.kpi-chip {
flex: 1; min-width: 130px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px 18px;
display: flex; flex-direction: column; gap: 5px;
transition: border-color var(--ease), transform var(--ease);
}
.kpi-chip:hover { border-color: rgba(29, 78, 216,.3); transform: translateY(-2px); }
.kpi-val { font-size: 1.75rem; font-weight: 800; color: var(--blue-l); letter-spacing: -.5px; line-height: 1; }
.kpi-lbl { font-size: .82rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .7px; font-weight: 700; }
/* KPI color variants */
.kpi-chip.kpi-income {
background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(16,185,129,.06));
border-color: rgba(16,185,129,.35);
}
.kpi-chip.kpi-income .kpi-val { color: #34d399; }
.kpi-chip.kpi-income:hover { border-color: rgba(16,185,129,.55); box-shadow: 0 6px 22px rgba(16,185,129,.18); }
.kpi-chip.kpi-expense {
background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(239,68,68,.06));
border-color: rgba(239,68,68,.35);
}
.kpi-chip.kpi-expense .kpi-val { color: #f87171; }
.kpi-chip.kpi-expense:hover { border-color: rgba(239,68,68,.55); box-shadow: 0 6px 22px rgba(239,68,68,.18); }
.kpi-chip.kpi-neutral {
background: linear-gradient(135deg, rgba(29, 78, 216,.18), rgba(29, 78, 216,.06));
border-color: rgba(29, 78, 216,.35);
}
.kpi-chip.kpi-neutral .kpi-val { color: #818cf8; }
.kpi-chip.kpi-neutral:hover { border-color: rgba(29, 78, 216,.55); box-shadow: 0 6px 22px rgba(29, 78, 216,.2); }
/* Light theme tweaks */
html[data-theme="light"] .kpi-chip.kpi-income .kpi-val { color: #047857; }
html[data-theme="light"] .kpi-chip.kpi-expense .kpi-val { color: #be123c; }
html[data-theme="light"] .kpi-chip.kpi-neutral .kpi-val { color: #4338ca; }
.analytics-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
/* Keep charts compact inside analytics so the whole page fits one viewport */
.analytics-grid .chart-card { padding: 16px 18px; }
.analytics-grid .chart-title { font-size: 1.05rem; margin-bottom: 10px; }
/* Charts fill their grid cell; absolute-positioned canvases handle sizing */
.analytics-grid .chart-body,
.analytics-grid .donut-wrap { flex: 1 1 auto; min-height: 0; position: relative; }
.analytics-grid .chart-body > canvas,
.analytics-grid .donut-wrap > canvas {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
#page-analytics .kpi-row { margin-bottom: 14px; gap: 12px; }
#page-analytics .kpi-chip { padding: 12px 14px; }
#page-analytics .page-header { margin-bottom: 12px; }
#page-analytics .merchant-row { padding: 6px 10px; }
#page-analytics .merchant-logo { width: 28px; height: 28px; }
#page-analytics .category-bars { gap: 16px; }
#page-analytics .cat-bar-header { font-size: 1.05rem; margin-bottom: 8px; font-weight: 700; }
#page-analytics .cat-bar-header > span:last-child { font-size: 1rem; font-weight: 700; }
#page-analytics .cat-bar-track { height: 14px; }
.analytics-grid .wide { grid-column: 1 / -1; }
/* Top merchants */
.merchant-list { display: flex; flex-direction: column; gap: 6px; }
.merchant-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px; border-radius: var(--r-sm);
transition: background var(--ease);
}
.merchant-row:hover { background: var(--bg-hover); }
.merchant-rank { display: none; }
.merchant-logo {
width: 28px; height: 28px;
border-radius: 0;
display: flex; align-items: center; justify-content: center;
overflow: visible; flex: 0 0 auto;
background: transparent;
border: none;
}
.merchant-logo img,
.merchant-logo .merchant-logo-img { width: 24px; height: 24px; object-fit: contain; display: block; background: transparent; }
/* Real brand logos in dark theme: give dark logos (Truist, BMW, etc.) a
light surface so they don't disappear. Only applies to ![]()
real
logos — fallback letters and generic SVG icons stay transparent. */
[data-theme="dark"] .merchant-logo-img {
background: #f4f5f8;
padding: 2px;
border-radius: 6px;
box-sizing: border-box;
}
/* Generic bank-action icon (transfers, deposits, fees) — muted stroke SVG */
.merchant-generic {
width: 100%; height: 100%;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-mid);
background: transparent;
}
.merchant-generic svg { width: 70%; height: 70%; stroke-width: 1.8; }
/* Global letter-fallback: initial inside a neutral square box. */
.merchant-fallback {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: var(--text-mid) !important;
font-weight: 600;
font-size: .9rem;
background: var(--bg-hover, rgba(255,255,255,0.05)) !important;
background-image: none !important;
border: 1px solid var(--border) !important;
border-radius: 6px !important;
box-shadow: none !important;
text-transform: uppercase;
}
.txn-logo .merchant-fallback,
.txn-logo-sm .merchant-fallback,
.merchant-logo .merchant-fallback,
.ai-card-logo .merchant-fallback {
background: var(--bg-hover, rgba(255,255,255,0.05)) !important;
background-image: none !important;
color: var(--text-mid) !important;
border: 1px solid var(--border) !important;
border-radius: 6px !important;
box-shadow: none !important;
border: none !important;
}
.merchant-name { flex: 1; font-size: .94rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.merchant-amt { font-size: .94rem; font-weight: 700; color: var(--red-l); white-space: nowrap; }
/* Category progress bars — label • bar • value layout */
.category-bars {
display: flex; flex-direction: column; gap: 14px;
flex: 1 1 auto; min-height: 0;
justify-content: center;
overflow-y: auto;
padding-right: 6px;
scrollbar-width: thin;
scrollbar-color: rgba(29, 78, 216,.6) rgba(255,255,255,.06);
}
.category-bars::-webkit-scrollbar { width: 8px; }
.category-bars::-webkit-scrollbar-thumb { background: rgba(29, 78, 216,.5); border-radius: 4px; }
.category-bars::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
.cat-bar-row {
display: grid;
grid-template-columns: 130px minmax(0, 1fr) 70px;
align-items: center;
gap: 12px;
width: 100%;
flex: 0 0 auto;
min-width: 0;
}
.cat-bar-name {
font-size: .85rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
min-width: 0;
}
.cat-bar-plot {
position: relative;
height: 36px;
min-width: 0;
width: 100%;
overflow: hidden;
}
.cat-bar-fill {
position: absolute; left: 0; top: 0;
height: 100%;
border-radius: 0;
transition: width 1.2s cubic-bezier(.4,0,.2,1);
max-width: 100%;
}
.cat-bar-val {
font-size: .82rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
text-align: right;
font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
.cat-bar-row { grid-template-columns: 90px minmax(0,1fr) 60px; gap: 8px; }
.cat-bar-name { font-size: .76rem; }
.cat-bar-plot { height: 28px; }
.cat-bar-val { font-size: .74rem; }
}
/* ══════════════════════════════════════════════════════════════════
ACCOUNTS PAGE
══════════════════════════════════════════════════════════════════ */
.btn-connect {
display: inline-flex; align-items: center; gap: 8px;
background: var(--g-blue);
color: #fff; border: none;
padding: 10px 20px; border-radius: var(--r-sm);
font-size: .85rem; font-weight: 700; font-family: inherit;
cursor: pointer; transition: all var(--ease);
box-shadow: 0 4px 16px rgba(29, 78, 216,.3);
}
.btn-connect:hover { box-shadow: 0 8px 28px rgba(29, 78, 216,.55); transform: translateY(-2px); }
.btn-connect.large { padding: 13px 26px; font-size: .95rem; margin-top: 20px; }
.section-label {
font-size: .82rem; font-weight: 800;
color: var(--text-mid);
text-transform: uppercase; letter-spacing: .9px;
margin-bottom: 14px;
}
/* Connected banks grid — `min(100%, 300px)` lets the 300px track shrink
to the container width on narrow phones so the row never overflows. */
.connected-banks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.bank-group-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 18px 20px;
transition: border-color var(--ease), transform var(--ease);
}
.bank-group-card:hover { border-color: rgba(29, 78, 216,.28); transform: translateY(-2px); }
.bank-group-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.bank-group-name { font-size: .95rem; font-weight: 800; }
.bank-group-sub { font-size: .7rem; color: var(--text-mid); margin-top: 3px; }
.btn-remove {
background: rgba(244,63,94,.08);
color: var(--red-l);
border: 1px solid rgba(244,63,94,.15);
padding: 4px 12px; border-radius: var(--r-xs);
font-size: .72rem; font-family: inherit; font-weight: 600;
cursor: pointer; transition: all var(--ease);
}
.btn-remove:hover { background: rgba(244,63,94,.18); border-color: rgba(244,63,94,.3); }
.bank-accounts-list { display: flex; flex-direction: column; gap: 8px; }
.bank-account-row {
display: flex; justify-content: space-between; align-items: center;
padding: 11px 13px;
background: var(--bg-hover);
border: 1px solid var(--border);
border-radius: var(--r-sm);
transition: border-color var(--ease);
}
.bank-account-row:hover { border-color: rgba(16,185,129,.25); }
.ba-name { font-size: .83rem; font-weight: 700; }
.ba-type { font-size: .68rem; color: var(--text-mid); text-transform: capitalize; margin-top: 2px; }
.ba-current { font-size: .95rem; font-weight: 800; color: var(--green-l); text-align: right; }
.ba-avail { font-size: .74rem; color: var(--text-mid); text-align: right; margin-top: 3px; font-weight: 500; }
/* Empty state */
.no-banks-msg {
flex-direction: column; align-items: center; text-align: center;
padding: 60px 28px;
background: linear-gradient(135deg, rgba(29, 78, 216,.04) 0%, rgba(37, 99, 235,.03) 100%);
border: 1px dashed rgba(29, 78, 216,.2);
border-radius: var(--r);
}
.no-banks-icon { font-size: 3.8rem; margin-bottom: 16px; filter: drop-shadow(0 4px 12px rgba(29, 78, 216,.4)); }
.no-banks-msg h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 10px; }
.no-banks-msg p { color: var(--text-mid); font-size: .85rem; line-height: 1.7; max-width: 400px; }
.sandbox-hint {
margin-top: 22px; padding: 14px 20px;
background: rgba(29, 78, 216,.08);
border: 1px solid rgba(29, 78, 216,.18);
border-radius: 10px;
font-size: .78rem; color: var(--text-mid); line-height: 1.75;
text-align: left;
}
.sandbox-hint strong { color: var(--text); }
.sandbox-hint code { color: var(--blue-l); font-family: 'Consolas', monospace; font-size: .82rem; }
/* ══════════════════════════════════════════════════════════════════
ANIMATIONS & MICRO-INTERACTIONS
══════════════════════════════════════════════════════════════════ */
@keyframes newTxn {
0% { background: rgba(29, 78, 216,.16); }
100% { background: transparent; }
}
.txn-row.new { animation: newTxn 2.5s ease forwards; }
/* ══════════════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
.cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.charts-row { grid-template-columns: 1fr; }
.analytics-grid { grid-template-columns: 1fr; }
.analytics-grid .wide { grid-column: 1; }
}
@media (max-width: 1100px) {
.cards-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Tablet (iPad) + mobile — sidebar collapses to hamburger. Laptops keep sidebar.
Bumped from 1024→1199 so iPad Pro 11" landscape (1194px) also gets the
hamburger drawer, not just portrait. */
@media (max-width: 1199px) {
.sidebar { transform: translateX(-100%); box-shadow: none; }
.sidebar.open { transform: translateX(0); box-shadow: 8px 0 40px rgba(0,0,0,.6); }
.main { margin-left: 0; }
.menu-btn { display: inline-flex; }
/* Backdrop when sidebar is open — sits between main content and sidebar */
body:has(.sidebar.open)::before,
body.sidebar-open::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 90;
animation: fadeIn .2s ease;
pointer-events: auto;
}
}
@media (max-width: 860px) {
.page { padding: 14px 14px 32px; }
.topbar { padding: 0 14px; gap: 8px; }
.demo-banner { padding: 8px 14px; font-size: .73rem; }
.topbar-date { display: none; }
.charts-row { grid-template-columns: 1fr; }
.analytics-grid { grid-template-columns: 1fr; }
.analytics-grid .wide { grid-column: 1; }
.filter-row { gap: 10px; }
}
@media (max-width: 640px) {
.cards-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.card { padding: 16px 14px 14px; }
.card-value { font-size: 1.45rem; }
.kpi-row { display: grid; grid-template-columns: 1fr 1fr; }
.drill-bar { gap: 8px; padding: 12px 14px; }
.drill-group select { min-width: 110px; }
/* Transaction filters — stack on mobile */
.filter-row { flex-direction: column; gap: 10px; }
.filter-group { width: 100%; }
.filter-group select,
.filter-group input { width: 100%; }
.search-input { width: 100%; }
/* Transaction table — hide lower-priority columns */
.txn-table th:nth-child(4),
.txn-table td:nth-child(4),
.txn-table th:nth-child(5),
.txn-table td:nth-child(5) { display: none; }
.txn-table th, .txn-table td { padding: 9px 10px; }
/* Hide conn status text */
#connLabel { display: none; }
/* Analytics */
.kpi-chip { min-width: 0; }
.chart-card { padding: 14px 12px; }
}
@media (max-width: 420px) {
.cards-grid { grid-template-columns: 1fr; gap: 10px; }
.kpi-row { grid-template-columns: 1fr; }
.topbar-title { font-size: .85rem; }
.page-header h2 { font-size: 1rem; }
.drill-bar { flex-direction: column; align-items: stretch; }
.drill-group select { min-width: unset; width: 100%; }
}
/* Gentle anti-overflow: only prevent canvases from blowing out width. */
@media (max-width: 1024px) {
canvas { max-width: 100% !important; }
}
/* ══ Mobile drawer polish ═══════════════════════════════════════════
Guarantees the sidebar footer (user profile) is always visible,
the nav area scrolls internally, and the drawer width adapts
to very small devices (iPhone SE, Galaxy Fold, etc). Bumped to
1199 to cover iPad Pro 11" landscape (1194px). */
@media (max-width: 1199px) {
/* Drawer width: cap at 88% of viewport so users always see an edge
of the main content — helps orient them and taps to close. */
.sidebar {
width: min(var(--sw), 88vw);
}
/* Bigger, more tappable hamburger */
.menu-btn {
width: 42px;
height: 42px;
}
/* Make the logout icon button fully visible (was sometimes clipped) */
.logout-btn { flex-shrink: 0; }
/* Topbar on phones — ensure date chip etc. don't push menu off-screen */
.topbar { padding: 0 12px; gap: 8px; }
}
@media (max-width: 480px) {
/* Smaller sidebar on phones so footer breathing room is guaranteed */
.sidebar-logo { padding: 16px 14px 14px; }
.sidebar-nav { padding: 10px 8px; }
.sidebar-footer { padding: 12px 14px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)); }
.nav-item { padding: 11px 12px; font-size: .94rem; }
.user-name { font-size: .9rem; }
.user-acct { font-size: .74rem; }
/* Prevent iOS auto-zoom on focus (inputs must be >=16px) */
input, select, textarea { font-size: 16px; }
}
/* iPhone / short-screen defence: when the drawer is open, lock page scroll */
body.sidebar-open { overflow: hidden; }
/* ══ SETUP MODAL ═══════════════════════════════════════════════════ */
.setup-modal {
position: fixed; inset: 0; z-index: 10000;
background: rgba(5,8,15,.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
align-items: center; justify-content: center;
padding: 20px;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .18s ease-out, visibility 0s linear .18s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.setup-modal.open {
opacity: 1; visibility: visible; pointer-events: auto;
transition: opacity .18s ease-out;
}
.setup-modal-box {
background: var(--bg-card);
border: 1px solid var(--border-hi);
border-radius: 20px;
padding: 30px 28px;
max-width: 480px; width: 100%;
box-shadow: 0 32px 80px rgba(0,0,0,.5);
position: relative;
}
.setup-modal-close {
position: absolute; top: 14px; right: 14px;
background: none; border: none;
color: var(--text-dim); font-size: 1.1rem;
cursor: pointer; padding: 4px 8px;
border-radius: 6px; transition: all var(--ease);
}
.setup-modal-close:hover { color: var(--text); background: var(--bg-hover); }
.setup-modal-title {
font-size: 1.05rem; font-weight: 800;
margin-bottom: 6px; letter-spacing: -.3px;
}
.setup-modal-sub {
font-size: .8rem; color: var(--text-mid);
margin-bottom: 20px; line-height: 1.6;
}
.setup-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.setup-step {
display: flex; gap: 12px; align-items: flex-start;
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 10px; padding: 12px 14px;
}
.setup-step-num {
width: 22px; height: 22px; border-radius: 50%;
background: var(--g-blue);
font-size: .7rem; font-weight: 800; color: #fff;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 1px;
}
.setup-step-text { font-size: .8rem; color: var(--text-mid); line-height: 1.6; }
.setup-step-text strong { color: var(--text); }
.setup-step code {
color: var(--blue-l); font-family: 'Consolas', monospace;
font-size: .78rem; background: rgba(29, 78, 216,.1);
padding: 1px 5px; border-radius: 4px;
}
.setup-modal-btns { display: flex; gap: 10px; }
.setup-modal-btns a {
flex: 1; display: inline-flex; align-items: center; justify-content: center;
gap: 6px; padding: 10px 0;
background: var(--g-blue); color: #fff;
border-radius: 10px; text-decoration: none;
font-size: .83rem; font-weight: 700;
box-shadow: 0 4px 16px rgba(29, 78, 216,.35);
transition: all var(--ease);
}
.setup-modal-btns a:hover { box-shadow: 0 8px 24px rgba(29, 78, 216,.55); transform: translateY(-1px); }
.setup-modal-btns a.ghost {
background: transparent; color: var(--text-mid);
border: 1px solid var(--border-mid);
box-shadow: none;
}
.setup-modal-btns a.ghost:hover { background: var(--bg-hover); color: var(--text); transform: none; }
/* ══════════════════════════════════════════════════════════════════
FOOTER
══════════════════════════════════════════════════════════════════ */
.app-footer {
margin-top: 0;
padding: 8px 12px;
border-top: 1px solid var(--border);
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
font-size: .76rem;
color: var(--text-dim);
text-align: center;
flex: 0 0 auto;
}
.app-footer strong { color: var(--text-mid); }
.footer-sep { opacity: .5; }
@media (max-width: 600px) {
.app-footer {
font-size: .7rem;
padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0));
flex-direction: column;
align-items: center;
gap: 4px;
line-height: 1.35;
}
.footer-sep { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════
iOS SAFARI STABILITY — kill the scroll flicker
-----------------------------------------------------------------
Safari on iOS re-rasterizes every `backdrop-filter` region on every
scroll frame, which combined with a sticky topbar inside a
scrolling `.page` produced visible flicker/jank. These rules:
1. Promote the scroll containers to their own compositing layer
(so repaints don't cascade into the topbar/sidebar).
2. Replace the heavy topbar blur with an opaque background on
small screens (where devicePixelRatio is highest — cheapest).
3. Disable page-switch fadeUp on reduced-motion/iOS to avoid
composite storms when nav items swap pages.
═══════════════════════════════════════════════════════════════════ */
/* Promote scrollers + drawer to their own layers — stops ancestor repaint */
.page,
.sidebar,
.sidebar-nav,
.main,
.topbar {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.sidebar { will-change: transform; }
.page { -webkit-overflow-scrolling: touch; }
/* Disable the fade-up swap animation on page-switches — it caused a
whole-viewport recomposite every time nav changed, reading as "blink". */
.page.active { animation: none !important; }
/* NO -webkit-mask-image trick. It creates an implicit GPU layer that
Safari has to re-rasterize on every scroll frame — the exact opposite
of what we want. Removed entirely. */
/* Boot stabilizer — REMOVED. The opacity:0 → 1 fade was itself the
visible "blink" on mobile Safari/Chrome post-signin. The theme tint
and data render fast enough that hiding the shell hurts more than
it helps. No opacity gate here anymore. */
/* Users who prefer reduced motion — kill all entrance animations */
@media (prefers-reduced-motion: reduce) {
.page.active,
.fv-rot-inner,
.fv-rot-inner.exit {
animation: none !important;
}
* { transition-duration: .01ms !important; }
}
/* Phone — keep topbar fully opaque, no blur at all. Any blur on a
sticky element on mobile causes continuous recomposition during
scroll, which reads as flicker. */
@media (max-width: 640px) {
.topbar {
background: #081127;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
html[data-theme="light"] .topbar { background: #f8fafc; }
}
/* ══════════════════════════════════════════════════════════════════
MOBILE FLICKER KILL SWITCH
Nuclear option: disable every backdrop-filter, filter, and expensive
compositing effect on phones/small tablets. These effects force the
GPU to re-rasterize large regions on every scroll frame on
Safari/Chrome mobile, which the user reads as "flickering."
══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* === PERMANENT ANIMATION / TRANSITION KILL SWITCH === */
/* Not a single element animates, transitions, or runs a keyframe.
The drawer slide is the ONE exception (explicitly re-enabled below). */
*, *::before, *::after {
animation: none !important;
animation-duration: 0s !important;
animation-delay: 0s !important;
transition: none !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
filter: none !important;
}
/* Drawer slide — the only allowed motion on mobile */
.sidebar {
transition: transform .22s cubic-bezier(.2,.8,.2,1) !important;
}
/* will-change hints cost mobile memory with no benefit — kill them all */
* { will-change: auto !important; }
/* Transform hacks cost GPU memory — only keep them on scrollers */
.main, .topbar, body, html {
transform: none !important;
-webkit-transform: none !important;
}
/* Modal backdrops need opaque fallback since blur is gone */
.app-modal, .setup-modal, .onboard-modal, .verify-modal, .tp-overlay {
background: rgba(5,8,15,.92) !important;
opacity: 1 !important;
}
.app-modal:not(.open), .setup-modal:not(.open), .onboard-modal:not(.open), .verify-modal:not(.open) {
display: none !important;
}
.app-modal.open, .setup-modal.open, .onboard-modal.open, .verify-modal.open {
display: flex !important;
}
/* Chart canvases — no scale/hover transforms */
canvas { transform: none !important; -webkit-transform: none !important; }
/* Hover lift effects are pointless on touch devices and cause micro-jitter */
.card:hover, .kpi-chip:hover, .btn-primary:hover, .bank-group-card:hover,
.nav-item:hover, .sidebar-plan:hover, .sidebar-plan .sp-cta:hover,
.btn-connect:hover, .setup-modal-btns a:hover {
transform: none !important;
-webkit-transform: none !important;
}
}
/* On ANY device, if the user has system reduced-motion on, kill everything. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
}
/* ══════════════════════════════════════════════════════════════════
WELCOME MODAL (+ generic app-modal)
══════════════════════════════════════════════════════════════════ */
.app-modal {
position: fixed; inset: 0;
background: rgba(0,0,0,.65);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: center; justify-content: center;
z-index: 9999;
padding: 20px;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .18s ease-out, visibility 0s linear .18s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.app-modal.open {
opacity: 1; visibility: visible; pointer-events: auto;
transition: opacity .18s ease-out;
}
html[data-theme="light"] .app-modal { background: rgba(15,23,42,.45); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.app-modal-card {
position: relative;
width: 100%;
max-width: 460px;
background: var(--bg-card);
border: 1px solid var(--border-mid);
border-radius: 22px;
padding: 36px 32px 28px;
text-align: center;
box-shadow: 0 32px 80px rgba(0,0,0,.5);
animation: popIn .3s cubic-bezier(.16,1,.3,1);
}
html[data-theme="light"] .app-modal-card { box-shadow: 0 24px 64px rgba(15,23,42,.18); }
@keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.app-modal-x {
position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px;
border: none; border-radius: 50%;
background: var(--bg-hover);
color: var(--text-mid);
font-size: 1rem; cursor: pointer;
transition: all var(--ease);
}
.app-modal-x:hover { background: var(--bg-input); color: var(--text); transform: rotate(90deg); }
.welcome-gem {
font-size: 3.2rem;
filter: drop-shadow(0 6px 20px rgba(29, 78, 216,.6));
animation: gemFloat 4s ease-in-out infinite;
margin-bottom: 8px;
}
.welcome-title {
font-size: 1.6rem;
font-weight: 800;
margin-bottom: 6px;
letter-spacing: -.4px;
}
.welcome-title span {
background: linear-gradient(135deg, var(--blue), var(--purple));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.welcome-sub {
font-size: .92rem;
color: var(--text-mid);
margin-bottom: 24px;
line-height: 1.5;
}
.welcome-feats {
display: flex; flex-direction: column; gap: 10px;
text-align: left;
margin-bottom: 24px;
}
.welcome-feat {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: var(--bg-hover);
border: 1px solid var(--border);
border-radius: 12px;
}
.welcome-feat > span { font-size: 1.5rem; flex-shrink: 0; }
.welcome-feat b { font-size: .88rem; display: block; color: var(--text); }
.welcome-feat small { font-size: .75rem; color: var(--text-mid); display: block; margin-top: 2px; }
.sandbox-tip {
background: linear-gradient(135deg, rgba(29, 78, 216,.12), rgba(37, 99, 235,.08));
border: 1px dashed rgba(29, 78, 216,.45);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 20px;
font-size: .78rem;
color: var(--text-mid);
text-align: left;
}
.sandbox-tip > b { color: var(--blue-l, #818cf8); display: block; margin-bottom: 8px; font-size: .78rem; }
.sandbox-creds { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: .75rem; }
.sandbox-creds code {
background: var(--bg-input);
padding: 2px 8px;
border-radius: 5px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
color: var(--text);
font-size: .78rem;
font-weight: 600;
}
.welcome-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.welcome-actions button { padding: 10px 20px; font-size: .88rem; }
/* ══════════════════════════════════════════════════════════════════
AI CHAT WIDGET
══════════════════════════════════════════════════════════════════ */
/* HARD GATE: AI-page-only UI (the "Ask Your Money" filter banner) is
never visible outside the AI Insights tab. The general-purpose
support chat bubble + panel used to live inside this rule, but now
we want it visible on every page, so it has been moved out. */
body:not(.on-ai-page) .ai-filter-banner {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
.chat-bubble {
position: fixed;
bottom: 22px; right: 22px;
width: 58px; height: 58px;
border-radius: 50%;
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), var(--fv-c1,#2563eb));
color: #fff;
border: none;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 28px rgba(29, 78, 216,.5), 0 0 0 6px rgba(29, 78, 216,.1);
z-index: 9998;
transition: transform var(--ease), box-shadow var(--ease);
animation: chatPulse 2.5s ease-in-out infinite;
}
.chat-bubble:hover { transform: scale(1.08) rotate(-6deg); }
.chat-bubble svg { width: 26px; height: 26px; }
.chat-bubble-dot {
position: absolute; top: 10px; right: 10px;
width: 10px; height: 10px;
background: #10b981;
border: 2px solid var(--bg-card);
border-radius: 50%;
}
@keyframes chatPulse {
0%, 100% { box-shadow: 0 10px 28px rgba(29, 78, 216,.5), 0 0 0 0 rgba(29, 78, 216,.4); }
50% { box-shadow: 0 10px 28px rgba(29, 78, 216,.5), 0 0 0 14px rgba(29, 78, 216,0); }
}
.chat-panel {
position: fixed;
bottom: 22px; right: 22px;
width: 360px;
max-width: calc(100vw - 32px);
height: 500px;
max-height: calc(100vh - 100px);
background: var(--bg-card);
border: 1px solid var(--border-mid);
border-radius: 18px;
display: none;
flex-direction: column;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,.45);
z-index: 9998;
transform-origin: bottom right;
animation: chatOpen .25s cubic-bezier(.16,1,.3,1);
}
.chat-panel.open { display: flex; }
html[data-theme="light"] .chat-panel { box-shadow: 0 16px 50px rgba(15,23,42,.2); }
@keyframes chatOpen { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: none; } }
.chat-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px;
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), var(--fv-c1,#2563eb));
color: #fff;
}
.chat-head-info { display: flex; align-items: center; gap: 10px; }
.chat-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.2);
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem;
}
.chat-title { font-weight: 700; font-size: .92rem; }
.chat-status { font-size: .7rem; opacity: .88; display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.chat-dot { width: 7px; height: 7px; background: #10b981; border-radius: 50%; animation: chatLive 1.6s ease-in-out infinite; }
@keyframes chatLive { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.chat-close {
width: 30px; height: 30px; border: none;
background: rgba(255,255,255,.15); color: #fff;
border-radius: 50%; cursor: pointer;
font-size: .9rem;
transition: background var(--ease);
}
.chat-close:hover { background: rgba(255,255,255,.3); }
.chat-body {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex; flex-direction: column; gap: 10px;
background: var(--bg);
}
.chat-msg {
max-width: 82%;
padding: 10px 13px;
border-radius: 14px;
font-size: .85rem;
line-height: 1.45;
animation: msgIn .2s ease;
word-wrap: break-word;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.chat-msg--bot {
background: var(--bg-card);
border: 1px solid var(--border);
color: var(--text);
border-top-left-radius: 4px;
align-self: flex-start;
}
.chat-msg--user {
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), var(--fv-c1,#2563eb));
color: #fff;
border-top-right-radius: 4px;
align-self: flex-end;
}
.chat-msg code { background: rgba(29, 78, 216,.15); padding: 1px 6px; border-radius: 4px; font-size: .8rem; }
.chat-msg--user code { background: rgba(255,255,255,.2); color: #fff; }
.chat-msg--system {
background: transparent;
border: 1px dashed var(--border);
color: var(--text-mid);
font-style: italic;
font-size: .8rem;
align-self: center;
max-width: 100%;
text-align: center;
}
.chat-human-btn {
display: inline-block;
margin-top: 8px;
padding: 6px 12px;
border-radius: 8px;
border: 1px solid var(--border);
background: linear-gradient(135deg,#1d4ed8,#2563eb);
color: #fff;
font-size: .8rem;
font-weight: 600;
cursor: pointer;
}
.chat-human-btn:hover { filter: brightness(1.1); }
.chat-input-row {
display: flex; gap: 8px;
padding: 12px;
border-top: 1px solid var(--border);
background: var(--bg-card);
}
.chat-input-row input {
flex: 1;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 10px;
padding: 9px 12px;
color: var(--text);
font-family: inherit;
font-size: .85rem;
outline: none;
transition: border-color var(--ease);
}
.chat-input-row input:focus { border-color: var(--blue); }
.chat-input-row button {
width: 38px; height: 38px;
border-radius: 10px;
border: none;
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), var(--fv-c1,#2563eb));
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: transform var(--ease);
}
.chat-input-row button:hover { transform: translateX(2px); }
.chat-input-row button svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
.chat-bubble { bottom: 16px; right: 16px; width: 52px; height: 52px; }
.chat-panel { bottom: 16px; right: 16px; left: 16px; width: auto; height: calc(100vh - 80px); }
}
/* ── Security page ──────────────────────────────────────────────── */
.sec-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px;
margin-bottom: 20px;
box-shadow: var(--shadow);
}
.sec-card-head {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 18px;
}
.sec-icon-box {
width: 48px; height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), var(--fv-c1,#2563eb));
display: flex; align-items: center; justify-content: center;
font-size: 24px;
flex-shrink: 0;
}
.sec-card-title-wrap { flex: 1; }
.sec-card-title { font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.sec-card-sub { font-size: .88rem; color: var(--text-mid); font-weight: 500; }
.sec-status {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px;
border-radius: 99px;
font-size: .8rem;
font-weight: 700;
background: rgba(148, 163, 184, 0.15);
color: var(--text-mid);
}
.sec-status .sec-status-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #94a3b8;
}
.sec-status.on { background: rgba(16, 185, 129, 0.18); color: #10b981; }
.sec-status.on .sec-status-dot { background: #10b981; box-shadow: 0 0 6px #10b981; }
.sec-status.off { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.sec-status.off .sec-status-dot { background: #ef4444; }
.sec-desc { color: var(--text-mid); font-size: .92rem; line-height: 1.55; margin-bottom: 16px; }
.sec-desc strong { color: var(--text); }
.sec-benefits { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.sec-benefit {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 14px;
background: var(--bg-hover);
border-radius: 10px;
border: 1px solid var(--border);
}
.sec-benefit > span:first-child { font-size: 20px; flex-shrink: 0; }
.sec-benefit b { display: block; color: var(--text); font-size: .92rem; margin-bottom: 2px; }
.sec-benefit small { color: var(--text-mid); font-size: .82rem; line-height: 1.4; }
.sec-enabled-banner {
display: flex; align-items: center; gap: 14px;
padding: 16px 18px;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.04));
border: 1px solid rgba(16, 185, 129, 0.35);
border-radius: 12px;
margin-bottom: 16px;
}
.sec-enabled-banner .sec-check {
width: 36px; height: 36px;
border-radius: 50%;
background: #10b981;
color: white;
display: flex; align-items: center; justify-content: center;
font-weight: 800;
font-size: 18px;
flex-shrink: 0;
}
.sec-enabled-banner b { display: block; color: var(--text); font-size: .95rem; margin-bottom: 2px; }
.sec-enabled-banner small { color: var(--text-mid); font-size: .82rem; }
.sec-row {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 0;
gap: 12px;
border-top: 1px solid var(--border);
}
.sec-row b { display: block; color: var(--text); font-size: .92rem; margin-bottom: 2px; }
.sec-row small { color: var(--text-mid); font-size: .82rem; }
.sec-list {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.sec-list li {
color: var(--text-mid);
font-size: .9rem;
line-height: 1.5;
padding-left: 4px;
}
.sec-list strong { color: var(--text); }
.btn-danger {
padding: 9px 18px;
border-radius: 9px;
border: 1px solid rgba(239, 68, 68, 0.4);
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
font-weight: 600;
font-size: .88rem;
cursor: pointer;
transition: all var(--ease);
}
.btn-danger:hover { background: #ef4444; color: white; }
/* ── MFA Enrollment Modal ───────────────────────────────────────── */
.mfa-modal {
position: fixed; inset: 0;
background: rgba(10, 15, 28, 0.75);
backdrop-filter: blur(6px);
display: none;
align-items: center; justify-content: center;
z-index: 9999;
padding: 20px;
}
.mfa-modal.open { display: flex; }
.mfa-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px;
max-width: 440px;
width: 100%;
padding: 28px;
position: relative;
box-shadow: 0 30px 80px rgba(0,0,0,.45);
max-height: 92vh;
overflow-y: auto;
}
.mfa-close {
position: absolute;
top: 14px; right: 14px;
width: 30px; height: 30px;
border-radius: 50%;
border: none;
background: var(--bg-hover);
color: var(--text-mid);
cursor: pointer;
font-size: 14px;
}
.mfa-close:hover { background: var(--border); color: var(--text); }
.mfa-step h3 { font-size: 1.3rem; margin: 4px 0 8px; color: var(--text); }
.mfa-step-num {
font-size: .72rem;
font-weight: 700;
color: var(--fv-c1,#2563eb);
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 4px;
}
.mfa-sub { color: var(--text-mid); font-size: .9rem; line-height: 1.55; margin-bottom: 18px; }
.mfa-qr-wrap {
background: white;
padding: 16px;
border-radius: 14px;
display: flex; justify-content: center;
margin-bottom: 16px;
}
.mfa-qr-wrap canvas {
display: block !important;
width: 220px !important;
height: 220px !important;
max-width: 220px !important;
max-height: 220px !important;
cursor: default !important;
position: static !important;
}
#mfaQrCanvas {
width: 220px !important;
height: 220px !important;
}
.mfa-secret-box {
background: var(--bg-hover);
border: 1px dashed var(--border);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 20px;
text-align: center;
}
.mfa-secret-label { font-size: .78rem; color: var(--text-mid); margin-bottom: 6px; }
.mfa-secret-text {
font-family: 'SF Mono', Consolas, monospace;
font-size: .95rem;
font-weight: 600;
color: var(--text);
letter-spacing: .05em;
word-break: break-all;
}
.mfa-code-input {
width: 100%;
padding: 14px 16px;
font-size: 1.5rem;
text-align: center;
letter-spacing: .4em;
font-weight: 600;
font-family: 'SF Mono', Consolas, monospace;
background: var(--bg-hover);
border: 2px solid var(--border);
border-radius: 12px;
color: var(--text);
outline: none;
}
.mfa-code-input:focus { border-color: var(--fv-c1,#2563eb); }
.mfa-actions {
display: flex; gap: 10px;
justify-content: flex-end;
margin-top: 12px;
}
.mfa-backup-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 20px;
padding: 16px;
background: var(--bg-hover);
border: 1px solid var(--border);
border-radius: 12px;
}
.mfa-backup-code {
font-family: 'SF Mono', Consolas, monospace;
font-size: .92rem;
font-weight: 600;
color: var(--text);
text-align: center;
padding: 6px 4px;
background: var(--bg-card);
border-radius: 6px;
user-select: all;
}
/* ── Post-signup MFA prompt modal ──────────────────────────────── */
.mfa-prompt-card { text-align: center; max-width: 480px; }
.mfa-prompt-icon {
width: 72px; height: 72px;
margin: 0 auto 16px;
border-radius: 50%;
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), var(--fv-c1,#2563eb));
display: flex; align-items: center; justify-content: center;
font-size: 36px;
box-shadow: 0 10px 30px rgba(29, 78, 216, .4);
animation: mfaIconPulse 2.4s ease-in-out infinite;
}
@keyframes mfaIconPulse {
0%, 100% { transform: scale(1); box-shadow: 0 10px 30px rgba(29, 78, 216, .4); }
50% { transform: scale(1.06); box-shadow: 0 14px 40px rgba(29, 78, 216, .6); }
}
.mfa-prompt-card .welcome-actions {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin-top: 8px;
}
.mfa-prompt-hint {
margin-top: 16px;
font-size: .8rem;
color: var(--text-dim);
}
.mfa-prompt-hint b { color: var(--text-mid); }
/* ── Login page MFA step ────────────────────────────────────────── */
.mfa-login-step { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }
/* ══════════════════════════════════════════════════════════════════
NO-SCROLL VIEWPORT LAYOUT
Every page fits inside the viewport; no scrollbars anywhere.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 961px) {
/* Thin indigo scrollbars on scrollable areas */
.page::-webkit-scrollbar { width: 8px; }
.page::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }
.page::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--fv-c2,#1d4ed8), var(--fv-c1,#2563eb));
border-radius: 8px;
border: 2px solid transparent;
background-clip: padding-box;
}
.page { scrollbar-width: thin; scrollbar-color: rgba(29, 78, 216,.6) rgba(255,255,255,.04); }
/* Compact global spacing for dense layouts */
.page { padding: 14px 20px 14px 20px; gap: 10px; }
.cards-grid { margin-bottom: 0; gap: 12px; }
.charts-row { margin-bottom: 0; gap: 12px; }
.drill-bar { margin-bottom: 0; padding: 10px 14px; }
.demo-banner { padding: 8px 14px; }
.page-header { margin-bottom: 8px; }
/* Smaller card padding to fit 2 chart rows + KPI row on one screen */
.card { padding: 16px 18px 14px; }
.card-value { font-size: 2rem; margin-bottom: 5px; }
.card-label { margin-bottom: 5px; font-size: .95rem; }
.card-sub { font-size: .95rem; }
.card-icon { font-size: 1.6rem; right: 16px; top: 16px; }
.chart-card { padding: 14px 18px; display: flex; flex-direction: column; min-height: 0; }
.chart-title { font-size: 1.1rem; margin-bottom: 8px; }
.chart-header{ margin-bottom: 8px; }
/* Transactions + Recent list fonts */
.txn-merchant { font-size: 1rem; }
.txn-date { font-size: .88rem; }
.txn-amount { font-size: 1.02rem; }
/* KPI chips (analytics) */
.kpi-val { font-size: 1.5rem; }
.kpi-lbl { font-size: .82rem; }
/* ───── Dashboard: scrollable column, charts always full size ──── */
#page-dashboard.active {
gap: 10px;
overflow-y: auto;
/* Anchor children to natural sizes — no flex 1:1:0 collapse so the
chart bodies always render at their intrinsic height even on
short viewports. The page just scrolls when content overflows. */
}
#page-dashboard .drill-bar { flex: 0 0 auto; }
#page-dashboard .cards-grid { flex: 0 0 auto; }
#page-dashboard .charts-row {
flex: 0 0 auto;
min-height: 320px;
margin-bottom: 0;
}
#page-dashboard .charts-row .chart-card {
display: flex;
flex-direction: column;
min-height: 300px;
overflow: hidden;
}
/* Canvas wrapper fills remaining card space; canvas absolute-positioned
inside a relative wrapper gives Chart.js an integer-pixel box
(crisp rendering, no subpixel blur). */
.chart-body,
#page-dashboard .donut-wrap {
position: relative;
flex: 1 1 auto;
min-height: 0;
width: 100%;
}
.chart-body > canvas,
#page-dashboard .donut-wrap > canvas {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
/* Recent Transactions list in row 2 scrolls inside its card */
#page-dashboard .txn-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding-right: 6px;
}
/* Category legend under donut — no scroll, just a single row */
#page-dashboard .legend {
flex: 0 0 auto;
max-height: 48px;
overflow: hidden;
}
/* Analytics: donut and line chart fill their card */
#page-analytics .donut-wrap,
#page-analytics .chart-body {
position: relative;
flex: 1 1 auto;
min-height: 0;
width: 100%;
}
#page-analytics .donut-wrap > canvas,
#page-analytics .chart-body > canvas {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
/* Recent Transactions: internal scroll inside the card */
#page-dashboard .txn-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding-right: 6px;
scrollbar-width: thin;
scrollbar-color: rgba(29, 78, 216,.6) rgba(255,255,255,.04);
}
#page-dashboard .txn-list::-webkit-scrollbar { width: 8px; }
#page-dashboard .txn-list::-webkit-scrollbar-track { background: rgba(255,255,255,.03); border-radius: 8px; }
#page-dashboard .txn-list::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--fv-c2,#1d4ed8), var(--fv-c1,#2563eb));
border-radius: 8px;
border: 2px solid transparent;
background-clip: padding-box;
}
/* Category legend under donut: cap height so the pie still has room */
#page-dashboard .legend { flex: 0 0 auto; max-height: 60px; overflow-y: auto; }
/* ───── Analytics ─────────────────────────────────────────────── */
#page-analytics.active { gap: 10px; }
#page-analytics .kpi-row { flex: 0 0 auto; margin-bottom: 0; }
#page-analytics .analytics-grid {
flex: 1 1 0;
min-height: 0;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr; /* fill viewport evenly */
gap: 10px;
}
#page-analytics .analytics-grid .chart-card {
overflow: hidden; min-height: 0;
display: flex; flex-direction: column;
}
#page-analytics .merchant-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto !important;
padding-right: 10px;
scrollbar-width: thin !important;
scrollbar-color: rgba(29, 78, 216,.6) rgba(255,255,255,.06) !important;
}
#page-analytics .merchant-list::-webkit-scrollbar {
display: block !important;
width: 10px !important;
}
#page-analytics .merchant-list::-webkit-scrollbar-track {
background: rgba(255,255,255,.04) !important;
border-radius: 8px;
}
#page-analytics .merchant-list::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--fv-c2,#1d4ed8), var(--fv-c1,#2563eb)) !important;
border-radius: 8px;
border: 2px solid transparent;
background-clip: padding-box !important;
}
/* Category Spend Breakdown: allow internal scroll, show all categories */
#page-analytics .category-bars {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto !important;
padding-right: 10px;
scrollbar-width: thin !important;
scrollbar-color: rgba(29, 78, 216,.6) rgba(255,255,255,.06) !important;
}
#page-analytics .category-bars::-webkit-scrollbar {
display: block !important;
width: 10px !important;
}
#page-analytics .category-bars::-webkit-scrollbar-track {
background: rgba(255,255,255,.04) !important;
border-radius: 8px;
}
#page-analytics .category-bars::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--fv-c2,#1d4ed8), var(--fv-c1,#2563eb)) !important;
border-radius: 8px;
border: 2px solid transparent;
background-clip: padding-box !important;
}
#page-analytics .category-bars::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #4f46e5, #7c3aed) !important;
}
/* ───── Transactions ──────────────────────────────────────────── */
#page-transactions.active { gap: 10px; }
#page-transactions .filter-card { flex: 0 0 auto; padding: 12px 14px; }
/* Was flex:1 1 0 + overflow:hidden — that clipped the last row off the
bottom of the table on most viewports. Let the table render at its
natural height and let the page scroll if needed. */
#page-transactions .table-wrap { flex: 0 0 auto; overflow-x: auto; overflow-y: visible; }
#page-transactions .txn-table tbody tr { height: auto; }
#page-transactions .pagination { flex: 0 0 auto; }
/* ───── Accounts ──────────────────────────────────────────────── */
#page-accounts.active { gap: 12px; }
#page-accounts #wealthSection .charts-row { min-height: 320px; }
#page-accounts #wealthSection canvas { max-height: 280px !important; }
/* ───── Security ──────────────────────────────────────────────── */
#page-security.active { gap: 10px; }
}
/* ═════════════════════════════════════════════════════════════════
RESPONSIVE — Phone + Tablet layout fixes (≤ 900px / ≤ 640px)
Added so FinVista works on all devices, not just desktop.
═════════════════════════════════════════════════════════════════ */
/* ── Tablet (≤ 960px) ─────────────────────────────────────────── */
@media (max-width: 960px) {
.sidebar {
position: fixed; top: 0; left: 0; bottom: 0;
transform: translateX(-100%);
transition: transform .25s ease;
z-index: 1000;
/* Cap at viewport so the drawer never overflows on narrow phones
(iPhone SE 320px, folded phones). */
width: min(260px, 85vw);
box-shadow: 2px 0 24px rgba(0,0,0,.4);
}
.sidebar.open { transform: translateX(0); }
.main-content { margin-left: 0 !important; width: 100% !important; }
.topbar-burger { display: inline-flex !important; }
#page-dashboard.active,
#page-analytics.active { overflow: auto; }
.charts-row, .analytics-grid {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
}
.chart-body, .donut-wrap { height: 280px !important; min-height: 280px !important; }
.kpi-row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}
/* ── Phone (≤ 640px) ──────────────────────────────────────────── */
@media (max-width: 640px) {
html { font-size: 14px; }
body { overflow-x: hidden; }
.topbar { padding: 10px 12px; height: auto; flex-wrap: wrap; gap: 8px; }
.topbar-title { font-size: 1.1rem; }
.topbar-date, .topbar-search { display: none; }
.topbar-actions { gap: 6px; }
.topbar-actions button { padding: 6px 10px; font-size: .82rem; }
.main-content, .page { padding: 12px !important; }
.page-header h2 { font-size: 1.4rem; }
.kpi-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.kpi-card, .kpi-chip { padding: 10px !important; }
.kpi-val { font-size: 1.2rem !important; }
.kpi-label { font-size: .72rem !important; }
.chart-card { padding: 12px !important; }
.chart-title { font-size: 1rem !important; }
.chart-body, .donut-wrap { height: 240px !important; min-height: 240px !important; }
/* Tables → natural flow on phone (no forced min-width, page scrolls naturally) */
.txn-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.txn-table { min-width: 0; font-size: .82rem; }
.txn-table th, .txn-table td { padding: 8px 10px; }
/* Modals fill screen on phone */
.app-modal .modal-card,
.fp-modal .fp-card,
.mfa-modal .modal-card {
width: 94vw !important; max-width: 94vw !important;
max-height: 92vh !important; overflow-y: auto;
margin: 0 auto;
}
.mfa-qr-wrap canvas,
.mfa-qr-wrap img { width: 180px !important; height: 180px !important; max-width: 180px !important; max-height: 180px !important; }
/* Accounts page cards stack */
.connected-banks { grid-template-columns: 1fr !important; }
.bank-card { padding: 14px !important; }
/* Security page: cards become full-width */
.security-grid, .security-cards { grid-template-columns: 1fr !important; gap: 12px !important; }
.security-card { padding: 14px !important; }
/* Merchant / category rows: tighter */
.merchant-row { padding: 8px 10px !important; font-size: .88rem; }
.merchant-logo { width: 26px !important; height: 26px !important; }
.cat-bar-header { font-size: .95rem !important; }
/* Welcome modal fits narrow */
.welcome-card { padding: 22px 18px !important; }
.welcome-title { font-size: 1.35rem !important; }
.welcome-feats { gap: 8px; }
.welcome-feat { padding: 10px 12px !important; }
/* Chat bubble stays visible but smaller */
.chat-bubble { width: 48px !important; height: 48px !important; bottom: 14px !important; right: 14px !important; }
/* Buttons easier to tap */
.btn-primary, .btn-submit, .btn-connect, .btn-ghost, button { min-height: 42px; }
}
/* ── Very small phones (≤ 380px) ─────────────────────────────── */
@media (max-width: 380px) {
.kpi-row { grid-template-columns: 1fr !important; }
.chart-body, .donut-wrap { height: 200px !important; min-height: 200px !important; }
.mfa-qr-wrap canvas,
.mfa-qr-wrap img { width: 160px !important; height: 160px !important; }
}
/* ============ AI INSIGHTS PAGE ============ */
#page-ai .page-header {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 16px;
}
#page-ai .page-sub { color: #6b7280; font-size: 13px; margin-top: 4px; }
.ai-pill {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white; font-size: 11px; padding: 3px 10px; border-radius: 999px;
font-weight: 600; vertical-align: middle; margin-left: 6px;
}
.nav-badge {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white; font-size: 10px; padding: 2px 7px; border-radius: 999px;
font-weight: 700; margin-left: auto;
}
.ai-refresh-btn { display: inline-flex; align-items: center; gap: 6px; }
.ai-hero {
display: flex; align-items: center; gap: 20px;
padding: 24px;
background: linear-gradient(135deg, #667eea15, #764ba215);
border: 1px solid #667eea30;
border-radius: 16px;
margin-bottom: 24px;
}
.ai-hero-icon { font-size: 42px; }
.ai-hero-body { flex: 1; min-width: 0; }
.ai-hero-title { font-size: 18px; font-weight: 600; color: #111827; }
.ai-hero-sub { font-size: 13px; color: #6b7280; margin-top: 4px; }
.ai-hero-score { text-align: center; }
.ai-score-ring {
width: 72px; height: 72px; border-radius: 50%;
background: conic-gradient(#667eea var(--score, 0%), #e5e7eb 0);
display: grid; place-items: center; position: relative;
margin: 0 auto;
}
.ai-score-ring::before {
content: ""; position: absolute; inset: 6px;
border-radius: 50%; background: white;
}
.ai-score-ring span {
position: relative; font-weight: 700; font-size: 20px; color: #111827;
}
.ai-score-label { font-size: 11px; color: #6b7280; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.ai-section { margin-bottom: 28px; }
.ai-section-head {
display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.ai-section-icon {
width: 36px; height: 36px; border-radius: 10px;
display: grid; place-items: center; font-size: 18px; flex-shrink: 0;
}
.ai-section-title { font-size: 16px; font-weight: 600; color: #111827; }
.ai-section-sub { font-size: 12px; color: #6b7280; margin-top: 2px; }
.ai-section-total {
margin-left: auto; font-weight: 700; color: #ff9500;
font-size: 18px;
}
.ai-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
gap: 14px;
}
.ai-card {
background: white; border: 1px solid #e5e7eb; border-radius: 12px;
padding: 16px; display: flex; flex-direction: column; gap: 10px;
transition: transform 0.15s, box-shadow 0.15s;
}
.ai-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.ai-card-top { display: flex; align-items: center; gap: 10px; }
.ai-card-logo {
width: 36px; height: 36px; border-radius: 8px;
background: #f3f4f6; display: grid; place-items: center;
font-weight: 700; color: #374151; font-size: 14px; flex-shrink: 0;
}
.ai-card-name { font-weight: 600; color: #111827; font-size: 14px; }
.ai-card-meta { font-size: 11px; color: #6b7280; margin-top: 2px; }
.ai-card-amount { margin-left: auto; font-weight: 700; color: #111827; }
.ai-card-body { font-size: 13px; color: #4b5563; line-height: 1.5; }
.ai-card-tag {
display: inline-block; padding: 3px 9px; border-radius: 999px;
font-size: 11px; font-weight: 600; margin-right: 6px;
}
.ai-tag-high { background: #fef2f2; color: #dc2626; }
.ai-tag-med { background: #fff7ed; color: #ea580c; }
.ai-tag-low { background: #eff6ff; color: #2563eb; }
.ai-tag-good { background: #ecfdf5; color: #059669; }
.ai-card-actions { display: flex; gap: 8px; margin-top: 4px; }
.ai-btn-sm {
flex: 1; padding: 8px 12px; border-radius: 8px;
border: 1px solid #e5e7eb; background: white; color: #374151;
font-size: 12px; font-weight: 600; cursor: pointer;
transition: background 0.15s;
}
.ai-btn-sm:hover { background: #f9fafb; }
.ai-btn-sm.primary {
background: #111827; color: white; border-color: #111827;
}
.ai-btn-sm.primary:hover { background: #374151; }
.ai-empty {
padding: 20px; text-align: center; color: #6b7280;
font-size: 13px; background: #f9fafb; border-radius: 12px;
border: 1px dashed #d1d5db;
}
.ai-disclaimer {
margin-top: 24px; padding: 12px 16px;
background: #f9fafb; border: 1px solid #e5e7eb;
border-radius: 10px; font-size: 12px; color: #6b7280;
line-height: 1.5;
}
@media (max-width: 640px) {
.ai-hero { flex-direction: column; text-align: center; }
.ai-section-total { width: 100%; margin-left: 0; margin-top: 4px; }
.ai-cards { grid-template-columns: 1fr; }
}
/* ========== AI INSIGHTS — DARK MODE OVERRIDES ========== */
[data-theme="dark"] #page-ai .page-header h1,
[data-theme="dark"] #page-ai .page-header > div > *:first-child { color: #f3f4f6; }
[data-theme="dark"] #page-ai .page-sub { color: #9ca3af; }
[data-theme="dark"] .ai-hero {
background: linear-gradient(135deg, rgba(102,126,234,0.14), rgba(118,75,162,0.14));
border: 1px solid rgba(37, 99, 235,0.35);
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
[data-theme="dark"] .ai-hero-title { color: #f9fafb; }
[data-theme="dark"] .ai-hero-sub { color: #cbd5e1; }
[data-theme="dark"] .ai-score-ring::before { background: #151a2e; }
[data-theme="dark"] .ai-score-ring { background: conic-gradient(#a78bfa var(--score, 0%), rgba(255,255,255,0.08) 0); }
[data-theme="dark"] .ai-score-ring span { color: #f9fafb; }
[data-theme="dark"] .ai-score-label { color: #94a3b8; }
[data-theme="dark"] .ai-section-title { color: #f3f4f6; }
[data-theme="dark"] .ai-section-sub { color: #94a3b8; }
[data-theme="dark"] .ai-section-icon { background: rgba(37, 99, 235,0.15); }
[data-theme="dark"] .ai-section-total { color: #fbbf24; }
[data-theme="dark"] .ai-card {
background: #1a1f3a;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
[data-theme="dark"] .ai-card:hover {
box-shadow: 0 10px 28px rgba(0,0,0,0.4);
border-color: rgba(37, 99, 235,0.4);
}
[data-theme="dark"] .ai-card-logo {
background: rgba(255,255,255,0.06);
color: #e6e8f0;
}
[data-theme="dark"] .ai-card-name { color: #f3f4f6; }
[data-theme="dark"] .ai-card-meta { color: #94a3b8; }
[data-theme="dark"] .ai-card-amount { color: #f3f4f6; }
[data-theme="dark"] .ai-card-body { color: #cbd5e1; }
[data-theme="dark"] .ai-tag-high { background: rgba(220,38,38,0.15); color: #fca5a5; }
[data-theme="dark"] .ai-tag-med { background: rgba(234,88,12,0.15); color: #fdba74; }
[data-theme="dark"] .ai-tag-low { background: rgba(37,99,235,0.15); color: #93c5fd; }
[data-theme="dark"] .ai-tag-good { background: rgba(5,150,105,0.15); color: #6ee7b7; }
[data-theme="dark"] .ai-btn-sm {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
color: #e6e8f0;
}
[data-theme="dark"] .ai-btn-sm:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .ai-btn-sm.primary {
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), #3b82f6);
color: #fff; border-color: transparent;
box-shadow: 0 4px 12px rgba(29, 78, 216,0.3);
}
[data-theme="dark"] .ai-btn-sm.primary:hover { transform: translateY(-1px); }
[data-theme="dark"] .ai-empty {
background: rgba(255,255,255,0.02);
border: 1px dashed rgba(255,255,255,0.15);
color: #94a3b8;
}
[data-theme="dark"] .ai-disclaimer {
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.08);
color: #94a3b8;
}
/* AI Powered badge + loading state */
.ai-powered-badge {
display: inline-flex; align-items: center; gap: 6px;
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), #10b981);
color: #fff; font-size: 10px; font-weight: 700;
padding: 3px 10px; border-radius: 999px;
text-transform: uppercase; letter-spacing: 0.5px;
vertical-align: middle; margin-left: 8px;
box-shadow: 0 2px 8px rgba(29, 78, 216,0.4);
}
.ai-powered-badge::before {
content: "✨"; font-size: 10px;
}
.ai-loading {
display: flex; align-items: center; gap: 10px;
padding: 20px; background: rgba(29, 78, 216,0.06);
border: 1px solid rgba(29, 78, 216,0.2);
border-radius: 12px; color: #a78bfa; font-size: 13px;
}
.ai-loading::before {
content: ""; width: 16px; height: 16px;
border: 2px solid rgba(167,139,250,0.3);
border-top-color: #a78bfa;
border-radius: 50%;
animation: aiSpin 0.8s linear infinite;
}
@keyframes aiSpin { to { transform: rotate(360deg); } }
/* ========== AI INSIGHTS — PREMIUM REDESIGN ========== */
/* Hero card — simple, bulletproof layout */
.ai-hero {
position: relative !important;
overflow: hidden;
background: linear-gradient(155deg, #1a1f3a, #0f1330) !important;
border: 1px solid rgba(37, 99, 235,0.35) !important;
border-radius: 20px !important;
padding: 0 !important;
margin-bottom: 24px;
box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(37, 99, 235,0.1) inset;
}
[data-theme="light"] .ai-hero {
background: linear-gradient(155deg, #ffffff, #f8fafc) !important;
border: 1px solid rgba(29, 78, 216,0.25) !important;
box-shadow: 0 8px 24px rgba(15,23,42,0.06);
}
/* Rotating rainbow border — rendered behind the inner card */
.ai-hero::before {
content: "";
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: conic-gradient(from 0deg,
transparent 0deg,
var(--fv-c2,#1d4ed8) 30deg, #3b82f6 60deg, #10b981 90deg,
transparent 180deg, transparent 360deg);
animation: aiBorderSpin 5s linear infinite;
opacity: 0.55;
z-index: 0;
pointer-events: none;
}
.ai-hero::after {
content: "";
position: absolute;
inset: 2px;
border-radius: 18px;
background: linear-gradient(155deg, #1a1f3a, #0f1330);
z-index: 1;
pointer-events: none;
}
[data-theme="light"] .ai-hero::after {
background: linear-gradient(155deg, #ffffff, #f8fafc);
}
@keyframes aiBorderSpin { to { transform: rotate(360deg); } }
.ai-hero-inner {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 24px;
padding: 26px 28px;
}
.ai-hero-inner::after {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(37, 99, 235,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(37, 99, 235,0.05) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
pointer-events: none;
z-index: 0;
}
.ai-hero-inner > * { position: relative; z-index: 1; }
.ai-hero-icon {
font-size: 38px !important;
width: 70px; height: 70px;
flex-shrink: 0;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), #3b82f6, #10b981);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(37, 99, 235,0.45), 0 0 0 1px rgba(255,255,255,0.1) inset;
position: relative;
animation: aiIconPulse 3s ease-in-out infinite;
}
.ai-hero-body { flex: 1 !important; min-width: 0 !important; }
.ai-hero-score { flex-shrink: 0; text-align: center; }
@keyframes aiIconPulse {
0%, 100% { box-shadow: 0 10px 30px rgba(37, 99, 235,0.45), 0 0 0 1px rgba(255,255,255,0.1) inset, 0 0 0 0 rgba(37, 99, 235,0.5); }
50% { box-shadow: 0 10px 36px rgba(37, 99, 235,0.65), 0 0 0 1px rgba(255,255,255,0.12) inset, 0 0 0 14px rgba(37, 99, 235,0); }
}
.ai-hero-title {
font-size: 22px !important;
font-weight: 700 !important;
color: #fff;
background: linear-gradient(135deg, #fff, #c7d2fe);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.3px;
line-height: 1.3;
}
[data-theme="light"] .ai-hero-title {
color: #0f172a;
background: linear-gradient(135deg, #0f172a, var(--fv-c2,#1d4ed8));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.ai-hero-sub { font-size: 14px !important; color: #b4bad6 !important; margin-top: 6px !important; }
/* Score ring → gradient stroke + glow */
.ai-score-ring {
width: 90px !important; height: 90px !important;
background: conic-gradient(
from 0deg,
var(--fv-c2,#1d4ed8) 0%, #3b82f6 calc(var(--score, 0%) * 0.5), #10b981 var(--score, 0%),
rgba(255,255,255,0.06) var(--score, 0%)
) !important;
position: relative;
filter: drop-shadow(0 0 12px rgba(37, 99, 235,0.35));
}
.ai-score-ring::before {
inset: 7px !important;
background: linear-gradient(155deg, #1a1f3a, #0f1330) !important;
}
.ai-score-ring span {
font-size: 26px !important;
background: linear-gradient(135deg, #fff, #c7d2fe);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 800 !important;
}
.ai-score-label {
color: #a78bfa !important;
font-weight: 700 !important;
font-size: 10px !important;
}
/* ===== AI Chat-style narrative ===== */
.ai-narrative {
display: flex; gap: 14px; align-items: flex-start;
background: linear-gradient(135deg, rgba(29, 78, 216,0.1), rgba(16, 185, 129,0.08));
border: 1px solid rgba(37, 99, 235,0.3);
border-radius: 18px;
padding: 18px 20px;
margin-bottom: 24px;
position: relative;
backdrop-filter: blur(10px);
animation: aiNarrSlide .45s cubic-bezier(.2,.8,.2,1);
}
@keyframes aiNarrSlide {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
.ai-narrative-avatar {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 12px;
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), #10b981);
display: grid; place-items: center;
font-size: 18px;
box-shadow: 0 6px 18px rgba(29, 78, 216,0.35);
}
.ai-narrative-body { flex: 1; color: #e6e8f0; line-height: 1.6; font-size: 14px; }
.ai-narrative-body .ai-narr-label {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10px; font-weight: 800; letter-spacing: 0.8px;
color: #a78bfa; text-transform: uppercase; margin-bottom: 6px;
}
.ai-narrative-body .ai-narr-label::after {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: #10b981; box-shadow: 0 0 8px #10b981;
animation: aiDot 1.4s ease-in-out infinite;
}
@keyframes aiDot { 0%,100% { opacity:1; } 50% { opacity: 0.35; } }
[data-theme="light"] .ai-narrative { color: #1f2937; }
[data-theme="light"] .ai-narrative-body { color: #1f2937; }
/* ===== Loading state ===== */
.ai-loading {
display: flex; align-items: center; gap: 12px;
padding: 20px 22px;
background: linear-gradient(135deg, rgba(29, 78, 216,0.08), rgba(16, 185, 129,0.06));
border: 1px solid rgba(37, 99, 235,0.3);
border-radius: 18px;
color: #c7d2fe; font-size: 14px;
margin-bottom: 24px;
position: relative; overflow: hidden;
}
.ai-loading::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(37, 99, 235,0.15), transparent);
animation: aiShimmer 1.6s linear infinite;
}
@keyframes aiShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
/* ===== Sections with gradient accent bars ===== */
.ai-section-head {
position: relative;
padding-left: 14px !important;
}
.ai-section-head::before {
content: "";
position: absolute; left: 0; top: 6px; bottom: 6px;
width: 3px;
background: linear-gradient(180deg, var(--fv-c2,#1d4ed8), #10b981);
border-radius: 3px;
}
.ai-section-icon {
width: 42px !important; height: 42px !important;
border-radius: 12px !important;
font-size: 20px !important;
box-shadow: 0 6px 18px rgba(0,0,0,0.2);
position: relative;
}
[data-theme="dark"] .ai-section-icon {
background: linear-gradient(135deg, rgba(29, 78, 216,0.2), rgba(16, 185, 129,0.15)) !important;
border: 1px solid rgba(37, 99, 235,0.3);
}
.ai-section-title {
font-size: 18px !important;
font-weight: 700 !important;
letter-spacing: -0.2px;
}
.ai-section-total {
background: none;
-webkit-text-fill-color: currentColor;
color: var(--text) !important;
font-size: 18px !important;
font-weight: 600 !important;
text-shadow: none;
}
/* ===== Redesigned cards ===== */
.ai-cards { gap: 16px !important; }
.ai-card {
position: relative;
border-radius: 16px !important;
padding: 18px !important;
overflow: hidden;
isolation: isolate;
transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
/* Gradient-on-hover border trick */
.ai-card::before {
content: "";
position: absolute; inset: 0;
border-radius: 16px;
padding: 1px;
background: linear-gradient(135deg, rgba(37, 99, 235,0.0), rgba(16, 185, 129,0.0));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
transition: background .3s;
pointer-events: none;
z-index: 1;
}
.ai-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 16px 40px rgba(29, 78, 216,0.25) !important;
}
.ai-card:hover::before {
background: linear-gradient(135deg, rgba(37, 99, 235,0.7), rgba(16, 185, 129,0.7));
}
.ai-card > * { position: relative; z-index: 2; }
/* Subtle glow blob behind each card */
.ai-card::after {
content: "";
position: absolute;
top: -40px; right: -40px;
width: 140px; height: 140px;
background: radial-gradient(circle, rgba(37, 99, 235,0.25), transparent 70%);
opacity: 0;
transition: opacity .3s;
z-index: 0;
pointer-events: none;
}
.ai-card:hover::after { opacity: 1; }
.ai-card-logo {
width: 32px !important; height: 32px !important;
border-radius: 0 !important;
font-size: 14px !important;
background: transparent !important;
background-image: none !important;
color: var(--text-mid) !important;
border: none !important;
box-shadow: none !important;
}
[data-theme="light"] .ai-card-logo {
background: transparent !important;
background-image: none !important;
color: var(--text-mid) !important;
border-color: transparent;
}
.ai-card-name { font-size: 15px !important; font-weight: 700 !important; }
.ai-card-amount {
font-size: 18px !important;
background: linear-gradient(135deg, #fff, #c7d2fe);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 800 !important;
}
[data-theme="light"] .ai-card-amount {
background: linear-gradient(135deg, #0f172a, var(--fv-c2,#1d4ed8));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Tag pills — upgraded */
.ai-card-tag {
font-size: 10px !important;
padding: 4px 10px !important;
letter-spacing: 0.3px;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
/* Action buttons — clean, flat, minimal */
.ai-btn-sm {
border-radius: 8px !important;
padding: 6px 12px !important;
font-size: 12px !important;
letter-spacing: 0 !important;
background: transparent !important;
border: 1px solid var(--border-mid, rgba(255,255,255,.14)) !important;
color: var(--text) !important;
box-shadow: none !important;
transition: background .15s, border-color .15s !important;
}
.ai-btn-sm:hover {
background: rgba(255,255,255,.04) !important;
border-color: var(--border-hi, rgba(255,255,255,.22)) !important;
}
.ai-btn-sm.primary {
background: var(--fv-accent-soft) !important;
border: 1px solid rgba(20,184,166,.45) !important;
color: var(--fv-accent-hi) !important;
box-shadow: none !important;
font-weight: 600 !important;
}
.ai-btn-sm.primary:hover {
background: rgba(20,184,166,.22) !important;
border-color: rgba(20,184,166,.7) !important;
transform: none !important;
}
/* Simplify category tags (pills) */
.ai-card-tag {
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 600 !important;
padding: 2px 8px !important;
font-size: 10.5px !important;
backdrop-filter: none !important;
background: var(--bg-hover, rgba(255,255,255,.05)) !important;
color: var(--text-mid, #9aa4bf) !important;
border: 1px solid var(--border, rgba(255,255,255,.08)) !important;
}
.ai-tag-high { color: #fca5a5 !important; border-color: rgba(220,38,38,.25) !important; }
.ai-tag-med { color: #fdba74 !important; border-color: rgba(234,88,12,.25) !important; }
.ai-tag-low { color: #93c5fd !important; border-color: rgba(59,130,246,.22) !important; }
/* Subscription card: reduce contrast */
.ai-card {
background: var(--bg-card) !important;
border: 1px solid var(--border) !important;
box-shadow: none !important;
}
.ai-card:hover {
border-color: var(--border-hi, rgba(255,255,255,.18)) !important;
transform: none !important;
}
/* Tips list: kill the coloured left-bar so it doesn't fight the cards */
.ai-tip-bar { display: none !important; }
.ai-tip-row {
background: transparent !important;
border: 1px solid var(--border) !important;
padding: 10px 12px !important;
}
.ai-tip-row:hover { background: var(--bg-hover, rgba(255,255,255,.04)) !important; }
.ai-tip-num {
color: var(--text-mid, #64748b) !important;
font-weight: 600 !important;
opacity: .7;
}
/* Kill the decorative sparkles that clutter the page */
.ai-sparkle { display: none !important; }
/* ═══ Compact single-row subscription cards ═══ */
.ai-card.ai-card-compact {
display: grid !important;
grid-template-columns: 36px minmax(0,1fr) auto auto auto;
align-items: center;
gap: 12px !important;
padding: 10px 14px !important;
min-height: 0 !important;
}
.ai-card.ai-card-compact .ai-card-logo {
width: 32px !important; height: 32px !important;
font-size: 13px !important;
flex-shrink: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
display: flex !important; align-items: center; justify-content: center;
background: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
.ai-card.ai-card-compact .ai-card-logo img,
.ai-card.ai-card-compact .ai-card-logo .merchant-logo-img {
width: 100% !important; height: 100% !important;
object-fit: contain !important;
background: transparent !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
}
.ai-card.ai-card-compact .ai-card-logo .merchant-fallback {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: var(--text-mid);
font-weight: 600;
font-size: 13px;
background: transparent !important;
}
.ai-card.ai-card-compact .ai-card-main {
min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.ai-card.ai-card-compact .ai-card-name {
font-size: 13.5px;
font-weight: 500;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 !important;
}
.ai-card.ai-card-compact .ai-card-meta {
font-size: 11px;
color: var(--text-mid);
white-space: nowrap;
margin: 0 !important;
}
.ai-card.ai-card-compact .ai-card-amount {
font-size: 14px !important;
font-weight: 600 !important;
font-variant-numeric: tabular-nums;
margin: 0 !important;
color: var(--text) !important;
white-space: nowrap;
}
.ai-card.ai-card-compact .ai-card-per {
font-size: 10.5px;
color: var(--text-mid);
font-weight: 500;
margin-left: 2px;
}
.ai-card.ai-card-compact .ai-card-tag {
margin: 0 !important;
white-space: nowrap;
}
.ai-card.ai-card-compact .ai-card-actions {
display: flex !important;
gap: 6px;
margin: 0 !important;
}
/* Mobile: stack the row in 2 lines so nothing overflows */
@media (max-width: 640px) {
.ai-card.ai-card-compact {
grid-template-columns: 32px 1fr auto;
grid-template-areas:
"logo main amt"
"tag tag btn";
gap: 6px 10px !important;
padding: 10px 12px !important;
}
.ai-card.ai-card-compact .ai-card-logo { grid-area: logo; }
.ai-card.ai-card-compact .ai-card-main { grid-area: main; }
.ai-card.ai-card-compact .ai-card-amount { grid-area: amt; text-align: right; }
.ai-card.ai-card-compact .ai-card-tag { grid-area: tag; justify-self: start; }
.ai-card.ai-card-compact .ai-card-actions { grid-area: btn; justify-self: end; }
}
/* ===== Floating sparkles decoration ===== */
.ai-sparkle {
position: absolute;
width: 4px; height: 4px;
border-radius: 50%;
background: #a78bfa;
box-shadow: 0 0 8px #a78bfa;
pointer-events: none;
animation: aiFloat 4s ease-in-out infinite;
}
@keyframes aiFloat {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
50% { transform: translateY(-14px) scale(1.3); opacity: 1; }
}
/* ===== Re-analyze button upgrade ===== */
.ai-refresh-btn {
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), #3b82f6) !important;
border: none !important;
padding: 10px 20px !important;
border-radius: 12px !important;
font-weight: 700 !important;
box-shadow: 0 8px 24px rgba(29, 78, 216,0.4) !important;
transition: transform .15s, box-shadow .15s !important;
position: relative;
overflow: hidden;
}
.ai-refresh-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 30px rgba(29, 78, 216,0.55) !important;
}
.ai-refresh-btn::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transform: translateX(-100%);
animation: aiBtnShine 3s ease-in-out infinite;
}
@keyframes aiBtnShine {
0%, 100% { transform: translateX(-100%); }
50% { transform: translateX(100%); }
}
/* Powered badge — animated glow */
.ai-powered-badge {
animation: aiBadgeGlow 2.5s ease-in-out infinite;
}
@keyframes aiBadgeGlow {
0%, 100% { box-shadow: 0 2px 8px rgba(29, 78, 216,0.4); }
50% { box-shadow: 0 2px 16px rgba(16, 185, 129,0.6), 0 0 20px rgba(29, 78, 216,0.3); }
}
/* Page title in AI page */
#page-ai .page-header h2 {
font-size: 28px !important;
background: linear-gradient(135deg, #fff, #a78bfa 50%, #10b981);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 800 !important;
letter-spacing: -0.5px;
}
[data-theme="light"] #page-ai .page-header h2 {
background: linear-gradient(135deg, #0f172a, var(--fv-c2,#1d4ed8) 50%, #10b981);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Responsive */
@media (max-width: 700px) {
.ai-hero-inner { flex-direction: column; text-align: center; padding: 22px; }
.ai-score-ring { margin: 0 auto; }
}
/* ========== AI BUBBLE CHART (Spending Universe) ========== */
.ai-bubble-wrap {
display: grid;
grid-template-columns: 1fr 260px;
gap: 18px;
align-items: stretch;
}
@media (max-width: 900px) {
.ai-bubble-wrap { grid-template-columns: 1fr; }
}
.ai-bubble-canvas-holder {
position: relative;
background: linear-gradient(155deg, rgba(26,31,58,0.85), rgba(15,19,48,0.85));
border: 1px solid rgba(37, 99, 235,0.25);
border-radius: 18px;
padding: 18px;
height: 420px;
overflow: hidden;
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.ai-bubble-canvas-holder::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(450px circle at 15% 20%, rgba(29, 78, 216,0.18), transparent 55%),
radial-gradient(350px circle at 85% 80%, rgba(16, 185, 129,0.14), transparent 55%);
pointer-events: none;
border-radius: 18px;
}
.ai-bubble-canvas-holder::after {
content: "";
position: absolute; inset: 18px;
background-image:
linear-gradient(rgba(37, 99, 235,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(37, 99, 235,0.05) 1px, transparent 1px);
background-size: 30px 30px;
pointer-events: none;
border-radius: 10px;
}
.ai-bubble-canvas-holder canvas { position: relative; z-index: 2; }
[data-theme="light"] .ai-bubble-canvas-holder {
background: linear-gradient(155deg, #ffffff, #f8fafc);
border: 1px solid rgba(17,24,39,0.08);
box-shadow: 0 8px 24px rgba(15,23,42,0.08);
}
[data-theme="light"] .ai-bubble-canvas-holder::before {
background:
radial-gradient(450px circle at 15% 20%, rgba(29, 78, 216,0.08), transparent 55%),
radial-gradient(350px circle at 85% 80%, rgba(16, 185, 129,0.06), transparent 55%);
}
[data-theme="light"] .ai-bubble-canvas-holder::after {
background-image:
linear-gradient(rgba(29, 78, 216,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(29, 78, 216,0.05) 1px, transparent 1px);
}
.ai-bubble-empty {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px;
color: #94a3b8; text-align: center; padding: 24px;
z-index: 3;
}
.ai-bubble-empty span { font-size: 42px; }
.ai-bubble-empty p { font-size: 13px; margin: 0; }
/* Legend chips */
.ai-bubble-legend {
display: flex; flex-direction: column; gap: 8px;
max-height: 420px; overflow-y: auto;
padding-right: 4px;
}
.ai-bubble-legend::-webkit-scrollbar { width: 6px; }
.ai-bubble-legend::-webkit-scrollbar-thumb { background: rgba(37, 99, 235,0.3); border-radius: 3px; }
.ai-bubble-chip {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
color: #e6e8f0;
cursor: pointer;
text-align: left;
transition: transform .15s, background .15s, border-color .15s;
font: inherit;
position: relative;
}
.ai-bubble-chip:hover {
transform: translateX(4px);
background: rgba(37, 99, 235,0.1);
border-color: var(--chip-col, var(--fv-c2,#1d4ed8));
box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 0 1px var(--chip-col) inset;
}
.ai-bubble-chip-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--chip-col, var(--fv-c2,#1d4ed8));
box-shadow: 0 0 10px var(--chip-col, var(--fv-c2,#1d4ed8));
flex-shrink: 0;
}
.ai-bubble-chip-icon { font-size: 16px; }
.ai-bubble-chip-name { flex: 1; font-size: 13px; font-weight: 600; }
.ai-bubble-chip-amt {
font-size: 13px; font-weight: 700;
color: var(--chip-col, #a78bfa);
}
[data-theme="light"] .ai-bubble-chip {
background: #fff;
border: 1px solid rgba(17,24,39,0.08);
color: #1f2937;
box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}
[data-theme="light"] .ai-bubble-chip:hover {
background: rgba(29, 78, 216,0.06);
}
/* ========== TIPS STRIP (replaces tip cards) ========== */
.ai-tips-strip {
display: flex; flex-direction: column; gap: 8px;
background: linear-gradient(155deg, rgba(26,31,58,0.6), rgba(15,19,48,0.6));
border: 1px solid rgba(37, 99, 235,0.2);
border-radius: 16px;
padding: 8px;
}
[data-theme="light"] .ai-tips-strip {
background: #fff;
border: 1px solid rgba(17,24,39,0.08);
box-shadow: 0 2px 10px rgba(15,23,42,0.04);
}
.ai-tip-row {
display: flex; align-items: stretch; gap: 14px;
padding: 14px 16px;
border-radius: 12px;
transition: background .15s, transform .15s;
position: relative;
}
.ai-tip-row:hover {
background: rgba(37, 99, 235,0.08);
transform: translateX(4px);
}
[data-theme="light"] .ai-tip-row:hover { background: rgba(29, 78, 216,0.05); }
.ai-tip-num {
font-size: 11px; font-weight: 800; letter-spacing: 1px;
color: #a78bfa;
min-width: 26px;
align-self: flex-start;
padding-top: 2px;
}
[data-theme="light"] .ai-tip-num { color: var(--fv-c2,#1d4ed8); }
.ai-tip-bar {
width: 3px; border-radius: 3px;
background: linear-gradient(180deg, var(--fv-c2,#1d4ed8), #10b981);
flex-shrink: 0;
}
.ai-tip-high .ai-tip-bar { background: linear-gradient(180deg, #ef4444, #f59e0b); }
.ai-tip-med .ai-tip-bar { background: linear-gradient(180deg, #f59e0b, #fbbf24); }
.ai-tip-good .ai-tip-bar { background: linear-gradient(180deg, #10b981, #34d399); }
.ai-tip-content { flex: 1; min-width: 0; }
.ai-tip-title {
font-size: 14px; font-weight: 600;
color: var(--text);
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
[data-theme="light"] .ai-tip-title { color: #0f172a; }
.ai-tip-flag {
font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
padding: 2px 7px; border-radius: 999px;
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), #10b981);
color: #fff;
text-transform: uppercase;
}
.ai-tip-body {
font-size: 13px; color: #b4bad6; line-height: 1.5;
margin-top: 4px;
}
[data-theme="light"] .ai-tip-body { color: #475569; }
/* ===================== AI PAGE v2 — ONE-SCREEN LAYOUT ===================== */
/* IMPORTANT: scope to .active so we don't override `.page { display:none }`
and render the AI page on every tab. */
.ai-page-v2 { display: none; }
.ai-page-v2.active {
display: flex;
flex-direction: column;
height: auto;
min-height: 0;
padding: 14px 18px 18px;
gap: 12px;
overflow: visible;
position: relative;
box-sizing: border-box;
}
/* ---------- Topbar (flat, no blue gradient) ---------- */
.ai-topbar {
display: flex; align-items: center; gap: 14px;
padding: 12px 16px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
flex-shrink: 0;
position: relative;
overflow: hidden;
box-shadow: none;
}
[data-theme="light"] .ai-topbar {
background: #ffffff;
border: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.ai-topbar-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.ai-topbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.ai-topbar-text { min-width: 0; }
.ai-hero-icon-sm {
width: 46px !important; height: 46px !important;
font-size: 22px !important;
border-radius: 13px !important;
animation: aiIconPulse 3s ease-in-out infinite;
}
.ai-topbar-title {
margin: 0 !important;
font-size: 18px !important;
font-weight: 600 !important;
color: var(--text) !important;
background: none !important;
-webkit-text-fill-color: currentColor !important;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
line-height: 1.2;
}
[data-theme="light"] .ai-topbar-title { color: #0f172a !important; }
.ai-topbar .ai-hero-sub { font-size: 12px !important; margin-top: 2px !important; }
.ai-score-inline { display: flex; align-items: center; gap: 8px; }
.ai-score-inline .ai-score-ring {
width: 48px !important; height: 48px !important;
filter: drop-shadow(0 0 8px rgba(37, 99, 235,0.4));
}
.ai-score-inline .ai-score-ring::before { inset: 4px !important; }
.ai-score-inline .ai-score-ring span { font-size: 14px !important; }
.ai-score-inline .ai-score-label {
font-size: 10px !important;
color: var(--text-mid) !important;
font-weight: 600 !important;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.ai-topbar .ai-refresh-btn {
padding: 9px 16px !important;
font-size: 13px !important;
}
/* ---------- Narrative bar (flat) ---------- */
.ai-narrative-bar {
padding: 10px 16px;
background: transparent;
border: none;
border-left: 2px solid var(--border);
border-radius: 0;
flex-shrink: 0;
max-height: 70px;
overflow: hidden;
}
[data-theme="light"] .ai-narrative-bar {
background: transparent;
border-left: 2px solid var(--border);
}
.ai-narrative-title {
font-size: 14px; font-weight: 500; color: var(--text);
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
overflow: hidden; text-overflow: ellipsis;
}
[data-theme="light"] .ai-narrative-title { color: #0f172a; }
.ai-narrative-slot { margin-top: 2px; }
.ai-narrative-slot .ai-narrative {
margin: 0 !important; padding: 0 !important;
background: transparent !important; border: none !important;
font-size: 12px;
}
.ai-narrative-slot .ai-narrative-avatar { display: none; }
.ai-narrative-slot .ai-narr-label { font-size: 9px !important; margin-bottom: 2px !important; }
.ai-narrative-slot .ai-narrative-body {
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
overflow: hidden; font-size: 12px;
}
/* ---------- 2-column grid (Subscriptions + Tips); Ask Your Money moved to drawer ---------- */
.ai-grid {
flex: 0 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: min-content;
align-items: start;
gap: 12px;
min-height: 0;
overflow: visible;
}
@media (max-width: 1100px) {
.ai-grid { grid-template-columns: 1fr 1fr; }
.ai-panel-chart { grid-column: 1 / -1; order: -1; max-height: 45vh; }
}
@media (max-width: 720px) {
.ai-page-v2.active { height: auto; overflow: visible; }
.ai-grid { grid-template-columns: 1fr; overflow: visible; }
.ai-panel { max-height: none !important; }
.ai-panel-scroll { max-height: 50vh; }
}
.ai-panel {
display: flex; flex-direction: column;
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
min-height: 0;
box-shadow: none;
}
[data-theme="light"] .ai-panel {
background: linear-gradient(155deg, #ffffff, #f8fafc);
border: 1px solid rgba(17,24,39,0.08);
box-shadow: 0 4px 14px rgba(15,23,42,0.05);
}
.ai-panel-head {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
}
[data-theme="light"] .ai-panel-head {
border-bottom: 1px solid rgba(17,24,39,0.06);
}
.ai-panel-head .ai-section-icon {
width: 30px !important; height: 30px !important;
font-size: 16px !important;
border-radius: 8px !important;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-mid);
background: transparent !important;
box-shadow: none !important;
}
.ai-panel-head .ai-section-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.ai-ic-subs, .ai-ic-chart, .ai-ic-tips, .ai-ic-ask { background: transparent !important; color: var(--text-mid) !important; }
/* Topbar gem icon (flat) */
.ai-topbar-left .ai-icon-gem {
width: 36px; height: 36px;
border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-mid);
background: transparent;
box-shadow: none;
font-size: 0;
flex-shrink: 0;
}
.ai-topbar-left .ai-icon-gem svg { width: 22px; height: 22px; stroke-width: 2; }
/* ══════════════════════════════════════════════════════════════════
AI panel: Ask Your Money (Claude chat over user's transactions)
══════════════════════════════════════════════════════════════════ */
.ai-panel-ask { display: flex; flex-direction: column; min-height: 0; }
.ai-ic-ask { background: linear-gradient(135deg, var(--fv-c1,#2563eb), #10b981); }
.ai-live-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
animation: aiLiveDot 1.6s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes aiLiveDot {
0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.25); }
50% { box-shadow: 0 0 0 7px rgba(16,185,129,0.00); }
}
/* Anomaly strip (AI-detected unusual charges) */
.ai-anoms {
padding: 8px 12px;
border-bottom: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
background: rgba(239,68,68,0.04);
}
[data-theme="light"] .ai-anoms { background: rgba(239,68,68,0.03); border-bottom-color: rgba(15,23,42,0.06); }
.ai-anom-title {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700;
color: #fca5a5;
text-transform: uppercase; letter-spacing: 0.4px;
margin-bottom: 6px;
}
[data-theme="light"] .ai-anom-title { color: #b91c1c; }
.ai-anom-list { display: flex; flex-direction: column; gap: 4px; }
.ai-anom-item {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px;
border-radius: 8px;
background: rgba(255,255,255,0.02);
cursor: pointer;
font-size: 12px;
transition: background .15s ease;
}
.ai-anom-item:hover { background: rgba(37, 99, 235,0.12); }
[data-theme="light"] .ai-anom-item { background: rgba(15,23,42,0.03); }
[data-theme="light"] .ai-anom-item:hover { background: rgba(29, 78, 216,0.08); }
.ai-anom-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ai-anom-dot.out { background: #f59e0b; }
.ai-anom-dot.dup { background: #3b82f6; }
.ai-anom-name {
flex: 1; min-width: 0;
color: #e6e8f0; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="light"] .ai-anom-name { color: #0f172a; }
.ai-anom-amt { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
[data-theme="light"] .ai-anom-amt { color: #0f172a; }
.ai-anom-tag {
font-size: 9.5px; font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
background: rgba(245,158,11,0.15);
color: #fbbf24;
text-transform: uppercase; letter-spacing: 0.4px;
}
.ai-anom-item .ai-anom-dot.dup + .ai-anom-name ~ .ai-anom-tag,
.ai-anom-tag:has(+ *) { }
.ai-anom-item .ai-anom-dot.dup ~ .ai-anom-tag { background: rgba(59,130,246,0.15); color: #60a5fa; }
.ai-anom-ok {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; font-weight: 600;
color: #10b981;
}
/* Chat body */
.ai-chat-body {
flex: 1; min-height: 0;
overflow-y: auto;
padding: 12px;
display: flex; flex-direction: column; gap: 10px;
}
.ai-chat-body::-webkit-scrollbar { width: 6px; }
.ai-chat-body::-webkit-scrollbar-thumb { background: rgba(37, 99, 235,0.35); border-radius: 3px; }
.ai-chat-body::-webkit-scrollbar-track { background: transparent; }
.ai-chat-msg { display: flex; gap: 8px; align-items: flex-start; }
.ai-chat-msg--user { justify-content: flex-end; }
.ai-chat-avatar {
width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--fv-c1,#2563eb), #10b981);
color: #fff;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(37, 99, 235,0.5);
}
.ai-chat-bubble {
max-width: 85%;
padding: 9px 12px;
border-radius: 12px;
font-size: 12.5px; line-height: 1.5;
color: #e6e8f0;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.07);
word-wrap: break-word;
white-space: pre-wrap;
}
[data-theme="light"] .ai-chat-bubble {
background: rgba(15,23,42,0.04);
border-color: rgba(15,23,42,0.07);
color: #0f172a;
}
.ai-chat-msg--user .ai-chat-bubble {
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), var(--fv-c1,#2563eb));
color: #fff;
border-color: transparent;
}
.ai-chat-msg--bot .ai-chat-bubble em {
color: #9aa4c7; font-style: normal; font-size: 11.5px;
}
/* Typing dots */
.ai-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.ai-typing i {
width: 6px; height: 6px; border-radius: 50%;
background: #a78bfa;
animation: aiTyping 1.2s infinite ease-in-out;
}
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aiTyping {
0%, 60%, 100% { opacity: .3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
/* Suggested prompt chips */
.ai-chat-suggest {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 8px 12px;
border-top: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
}
[data-theme="light"] .ai-chat-suggest { border-top-color: rgba(15,23,42,0.06); }
.ai-chip {
appearance: none; border: none; cursor: pointer;
padding: 6px 10px;
border-radius: 999px;
font-size: 11px; font-weight: 600;
color: #c7d2fe;
background: rgba(37, 99, 235,0.12);
border: 1px solid rgba(37, 99, 235,0.3);
transition: background .15s, transform .1s;
}
.ai-chip:hover { background: rgba(37, 99, 235,0.22); transform: translateY(-1px); }
[data-theme="light"] .ai-chip {
background: rgba(29, 78, 216,0.08);
color: #4338ca;
border-color: rgba(29, 78, 216,0.3);
}
/* Input row */
.ai-chat-input-row {
display: flex; gap: 6px;
padding: 10px 12px;
border-top: 1px solid rgba(255,255,255,0.06);
flex-shrink: 0;
}
[data-theme="light"] .ai-chat-input-row { border-top-color: rgba(15,23,42,0.06); }
.ai-chat-input-row input {
flex: 1; min-width: 0;
padding: 9px 12px;
border-radius: 10px;
border: 1px solid rgba(37, 99, 235,0.3);
background: rgba(255,255,255,0.04);
color: #fff;
font-size: 12.5px;
outline: none;
transition: border-color .15s;
}
.ai-chat-input-row input:focus { border-color: #a78bfa; }
[data-theme="light"] .ai-chat-input-row input {
background: #fff; color: #0f172a;
border-color: rgba(29, 78, 216,0.3);
}
.ai-chat-send {
appearance: none; border: none; cursor: pointer;
width: 36px; height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), var(--fv-c1,#2563eb));
color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(29, 78, 216,0.4);
transition: transform .1s;
}
.ai-chat-send:hover { transform: translateY(-1px); }
.ai-chat-send:active { transform: translateY(0); }
/* Treemap SVG tiles (legacy) */
.ai-treemap-svg { display: block; }
.ai-treemap-cell rect { transition: fill-opacity .15s ease, stroke .15s ease; }
/* ── Ranked Bar list ("Spending Breakdown") ─────────────────────── */
.ai-bars-list {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
height: 100%;
overflow-y: auto;
padding: 6px 10px 6px 4px;
box-sizing: border-box;
}
.ai-bars-list::-webkit-scrollbar { width: 6px; }
.ai-bars-list::-webkit-scrollbar-thumb { background: rgba(37, 99, 235,0.35); border-radius: 3px; }
.ai-bars-list::-webkit-scrollbar-track { background: transparent; }
.ai-bar-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: 10px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
cursor: pointer;
transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.ai-bar-row:hover {
background: rgba(37, 99, 235,0.10);
border-color: rgba(37, 99, 235,0.35);
transform: translateX(2px);
}
[data-theme="light"] .ai-bar-row {
background: rgba(15,23,42,0.03);
border: 1px solid rgba(15,23,42,0.06);
}
[data-theme="light"] .ai-bar-row:hover {
background: rgba(29, 78, 216,0.08);
border-color: rgba(29, 78, 216,0.3);
}
.ai-bar-rank {
width: 22px; height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, var(--fv-c1,#2563eb), var(--fv-c2,#1d4ed8));
color: #fff;
font-size: 11px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(29, 78, 216,0.4);
}
.ai-bar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ai-bar-top {
display: flex; align-items: center; gap: 8px;
font-size: 12px;
}
.ai-bar-swatch {
width: 10px; height: 10px; border-radius: 3px;
flex-shrink: 0;
box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}
.ai-bar-name {
flex: 1; min-width: 0;
color: #e6e8f0; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="light"] .ai-bar-name { color: #0f172a; }
.ai-bar-amt {
font-weight: 800; color: #fff; font-size: 13px;
font-variant-numeric: tabular-nums;
}
[data-theme="light"] .ai-bar-amt { color: #0f172a; }
.ai-bar-track {
width: 100%; height: 6px;
background: rgba(255,255,255,0.06);
border-radius: 999px;
overflow: hidden;
}
[data-theme="light"] .ai-bar-track { background: rgba(15,23,42,0.07); }
.ai-bar-fill {
height: 100%;
border-radius: 999px;
transition: width .8s cubic-bezier(.2,.8,.2,1);
box-shadow: 0 0 10px rgba(37, 99, 235,0.35);
}
.ai-bar-meta {
display: flex; justify-content: space-between;
font-size: 10.5px;
color: #9aa4c7;
font-weight: 500;
}
[data-theme="light"] .ai-bar-meta { color: #64748b; }
.ai-panel-text { flex: 1; min-width: 0; }
.ai-panel-title {
font-size: 14px; font-weight: 600; color: var(--text);
white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
[data-theme="light"] .ai-panel-title { color: #0f172a; }
.ai-panel-sub {
font-size: 11px; color: #9aa4c7; margin-top: 1px;
white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
[data-theme="light"] .ai-panel-sub { color: #64748b; }
.ai-panel-head .ai-section-total { font-size: 16px !important; }
/* Internal scroll region for each panel */
.ai-panel-scroll {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 12px;
min-height: 0;
}
.ai-panel-scroll::-webkit-scrollbar { width: 6px; }
.ai-panel-scroll::-webkit-scrollbar-thumb {
background: rgba(37, 99, 235,0.35); border-radius: 3px;
}
.ai-panel-scroll::-webkit-scrollbar-thumb:hover { background: rgba(37, 99, 235,0.55); }
.ai-panel-scroll::-webkit-scrollbar-track { background: transparent; }
/* Stack subscription cards vertically in the narrow column */
.ai-cards-stack {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.ai-cards-stack .ai-card { padding: 12px !important; gap: 8px !important; }
.ai-cards-stack .ai-card-logo {
width: 34px !important; height: 34px !important; font-size: 13px !important;
}
.ai-cards-stack .ai-card-name { font-size: 13px !important; }
.ai-cards-stack .ai-card-body { font-size: 12px; line-height: 1.45; }
.ai-cards-stack .ai-btn-sm {
padding: 6px 10px !important; font-size: 11px !important;
}
/* Bubble chart panel fills its column */
.ai-panel-chart .ai-bubble-wrap-v2 {
flex: 1;
display: flex;
padding: 10px;
min-height: 0;
overflow: hidden;
}
.ai-panel-chart .ai-bubble-canvas-holder {
flex: 1;
height: auto !important;
min-height: 220px;
padding: 8px !important;
border-radius: 12px !important;
box-shadow: none !important;
display: flex; align-items: center; justify-content: center;
}
.ai-panel-chart .ai-bubble-legend { display: none !important; }
/* SVG packed bubbles */
.ai-packed-svg { display: block; max-width: 100%; max-height: 100%; }
.ai-packed-group circle {
transition: filter 0.15s, fill-opacity 0.15s;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
.ai-packed-group:hover circle {
filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4));
}
/* Tips inside panel — tighter spacing */
.ai-panel .ai-tips-strip {
background: transparent;
border: none;
padding: 0;
gap: 4px;
}
.ai-panel .ai-tip-row { padding: 10px 12px; gap: 10px; }
.ai-panel .ai-tip-num { font-size: 10px; min-width: 22px; }
.ai-panel .ai-tip-title { font-size: 13px; }
.ai-panel .ai-tip-body { font-size: 12px; line-height: 1.4; }
/* AI → Transactions filter banner (shown when a merchant review tab is opened) */
.ai-filter-banner {
display: flex; align-items: center; gap: 12px;
background: linear-gradient(135deg, rgba(29, 78, 216,0.12), rgba(16, 185, 129,0.1));
border: 1px solid rgba(37, 99, 235,0.35);
border-radius: 14px;
padding: 12px 16px;
margin: 0 0 16px;
animation: aiFbSlide .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes aiFbSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ai-fb-icon {
font-size: 18px; width: 34px; height: 34px;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), #10b981);
border-radius: 10px; flex-shrink: 0;
box-shadow: 0 4px 12px rgba(29, 78, 216,0.35);
}
.ai-fb-text { flex: 1; color: #e6e8f0; font-size: 14px; line-height: 1.4; }
.ai-fb-text b { color: #fff; }
[data-theme="light"] .ai-fb-text { color: #1f2937; }
[data-theme="light"] .ai-fb-text b { color: #0f172a; }
.ai-fb-clear {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
color: #e6e8f0;
padding: 7px 14px; border-radius: 9px;
font-size: 12px; font-weight: 600; cursor: pointer;
transition: background .15s;
}
.ai-fb-clear:hover { background: rgba(255,255,255,0.15); }
[data-theme="light"] .ai-fb-clear {
background: rgba(17,24,39,0.06); border: 1px solid rgba(17,24,39,0.1); color: #1f2937;
}
[data-theme="light"] .ai-fb-clear:hover { background: rgba(17,24,39,0.1); }
/* ============ ONBOARDING FLOW ============ */
#fxCanvas {
position: fixed; inset: 0;
width: 100vw; height: 100vh;
pointer-events: none; z-index: 99999;
display: none;
}
#fxCanvas.active { display: block; }
.onboard-modal {
position: fixed; inset: 0;
background: rgba(5, 8, 20, 0.72);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
display: flex;
align-items: center; justify-content: center;
z-index: 9998;
padding: 20px;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .22s ease-out, visibility 0s linear .22s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.onboard-modal.open {
opacity: 1; visibility: visible; pointer-events: auto;
transition: opacity .22s ease-out;
}
.onboard-card {
background: linear-gradient(145deg, #1a1f3a, #151930);
border: 1px solid rgba(37, 99, 235, 0.3);
border-radius: 24px;
padding: 56px 54px 46px;
max-width: 760px; width: 100%;
max-height: 92vh; overflow-y: auto;
box-shadow: 0 32px 100px rgba(29, 78, 216, 0.32),
0 0 60px rgba(37, 99, 235, 0.18);
animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
text-align: center;
position: relative;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.onboard-progress {
display: flex; justify-content: center; gap: 8px;
margin-bottom: 22px;
}
.onboard-dot {
width: 30px; height: 5px; border-radius: 3px;
background: rgba(255, 255, 255, 0.15);
transition: all 0.4s;
}
.onboard-dot.active {
background: linear-gradient(90deg, var(--fv-c2,#1d4ed8), #3b82f6);
box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
}
.onboard-dot.done {
background: #34c759;
}
.onboard-step { display: none; animation: fadeIn 0.4s ease; }
.onboard-step.active { display: block; }
.onboard-hero {
width: 72px;
height: 72px;
margin: 0 auto 8px;
display: inline-block;
animation: bounce 1s ease;
}
.onboard-hero img { width: 100%; height: 100%; object-fit: contain; display: block; }
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
.onboard-title {
font-size: 26px; font-weight: 700;
color: #fff; margin: 0 0 10px;
letter-spacing: -0.3px;
}
.onboard-name {
background: linear-gradient(90deg, #3b82f6, #10b981);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.onboard-sub {
color: #a1a7c4;
font-size: 14.5px;
line-height: 1.5;
margin: 0 0 22px;
}
.onboard-feats {
display: flex; flex-direction: column; gap: 10px;
margin: 0 0 24px; text-align: left;
}
.onboard-feat {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: rgba(29, 78, 216, 0.08);
border: 1px solid rgba(29, 78, 216, 0.15);
border-radius: 12px;
transition: transform 0.2s, border-color 0.2s;
}
.onboard-feat:hover {
transform: translateX(3px);
border-color: rgba(37, 99, 235, 0.4);
}
.onboard-feat > span:first-child {
font-size: 24px; flex-shrink: 0;
}
.onboard-feat b {
color: #fff; font-size: 14px; display: block; margin-bottom: 2px;
}
.onboard-feat small {
color: #8a90ad; font-size: 12px;
}
.onboard-actions {
display: flex; gap: 10px; flex-wrap: wrap;
margin-top: 16px;
}
.onboard-actions button {
flex: 1; min-width: 120px;
padding: 12px 20px;
font-size: 14px; font-weight: 600;
border-radius: 10px; cursor: pointer;
border: none;
transition: transform 0.15s, box-shadow 0.15s;
}
.onboard-actions .btn-primary {
background: linear-gradient(135deg, var(--fv-c2,#1d4ed8), #3b82f6);
color: white;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}
.onboard-actions .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}
.onboard-actions .btn-ghost {
background: rgba(255, 255, 255, 0.05);
color: #a1a7c4;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.onboard-actions .btn-ghost:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.onboard-hint {
font-size: 12px;
color: #6b7085;
margin: 14px 0 0;
font-style: italic;
}
@media (max-width: 480px) {
.onboard-card { padding: 24px 20px; }
.onboard-hero { font-size: 52px; }
.onboard-title { font-size: 22px; }
.onboard-actions { flex-direction: column-reverse; }
.onboard-actions button { width: 100%; }
}
/* ══════════════════════════════════════════════════════════════════
RESPONSIVE FIXES — comprehensive breakpoint pass
1440 . 1366 . 1024 (iPad landscape) . 820 (tablet) . 640 . 430 . 360
Appended last so these rules win against earlier overrides.
══════════════════════════════════════════════════════════════════ */
html, body { overflow-x: hidden; max-width: 100vw; }
*, *::before, *::after { box-sizing: border-box; }
/* iPad landscape / small laptop: collapse sidebar.
1199 covers iPad Pro 11" landscape (1194px); 1024 was leaving the
sidebar stuck open on 11" landscape mode. */
@media (max-width: 1199px) {
.sidebar { transform: translateX(-100%); box-shadow: none; }
.sidebar.open { transform: translateX(0); box-shadow: 8px 0 40px rgba(0,0,0,.6); }
.main { margin-left: 0 !important; width: 100% !important; }
.menu-btn { display: inline-flex !important; }
.topbar-date { display: none; }
.ai-grid { grid-template-columns: 1fr 1fr !important; }
.ai-panel-chart { grid-column: 1 / -1; order: -1; max-height: 46vh; }
.ai-page-v2.active { height: auto; min-height: 0; overflow: visible; }
/* Don't stretch #page-ai to fill remaining viewport on tablet —
otherwise the footer gets pushed all the way to the bottom and
the short AI content leaves a huge empty band above it. */
#page-ai.active { flex: 0 0 auto; }
.main { overflow-y: auto; }
}
/* Tablet portrait */
@media (max-width: 820px) {
.page { padding: 14px 16px; }
.page-header h2 { font-size: 1.4rem; }
.cards-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
.charts-row { grid-template-columns: 1fr !important; gap: 10px; }
.analytics-grid { grid-template-columns: 1fr !important; }
.topbar { padding: 0 14px; }
.ai-topbar { padding: 10px 12px; flex-wrap: wrap; gap: 10px; }
.ai-topbar-left { flex: 1 1 60%; min-width: 0; }
.ai-topbar-right { flex: 0 0 auto; gap: 8px; }
.ai-topbar-title { font-size: 16px !important; }
.ai-topbar-left .ai-icon-gem { width: 36px; height: 36px; }
.ai-topbar-left .ai-icon-gem svg { width: 18px; height: 18px; }
.ai-refresh-btn span { display: none; }
.ai-refresh-btn { padding: 8px !important; }
}
/* Mobile: single column, large touch targets */
@media (max-width: 640px) {
.page { padding: 12px; }
.page-header { gap: 8px; margin-bottom: 12px; }
.page-header h2 { font-size: 1.25rem; }
.cards-grid { grid-template-columns: 1fr !important; }
.card-value { font-size: 1.35rem; }
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="date"],
select, textarea {
min-height: 42px;
font-size: 16px !important;
}
.txn-table { font-size: .85rem; }
.txn-table td, .txn-table th { padding: 8px 6px !important; }
.setup-modal-box, .app-modal-card, .onboard-card, .welcome-card,
.mfa-modal .modal-card, .mfa-card, .modal-card, .verify-card {
max-width: calc(100vw - 24px) !important;
width: calc(100vw - 24px) !important;
margin: 12px auto !important;
padding: 20px !important;
max-height: calc(100vh - 24px);
overflow-y: auto;
}
.ai-chat-suggest { padding: 6px 10px; gap: 5px; }
.ai-chip { padding: 6px 10px; font-size: 12px; }
.ai-chat-input-row { padding: 8px 10px; gap: 6px; }
.ai-chat-input-row input { font-size: 16px; min-height: 38px; }
.ai-chat-send { width: 38px; height: 38px; flex-shrink: 0; }
.chat-panel {
bottom: 12px; right: 12px; left: 12px;
width: auto;
height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 80px);
max-height: calc(100vh - 100px);
}
.sidebar { width: min(72vw, 240px); }
.sidebar .nav-item { padding: 10px 12px; font-size: .9rem; gap: 10px; }
.sidebar .nav-icon { width: 22px; height: 22px; }
.sidebar .sp-card { padding: 10px 12px; }
.sidebar .sidebar-header { padding: 14px 14px 10px; }
}
/* Small phones */
@media (max-width: 430px) {
.sidebar { width: min(78vw, 220px); }
.sidebar .nav-item { padding: 9px 10px; font-size: .86rem; gap: 8px; }
.sidebar .nav-icon { width: 20px; height: 20px; }
.sidebar .nav-label { letter-spacing: 0; }
.page { padding: 10px; }
.page-header h2 { font-size: 1.1rem; }
.card-value { font-size: 1.2rem; }
.card-label { font-size: .72rem; }
.topbar { height: 54px; padding: 0 10px; }
.topbar-logo { font-size: 0.95rem; }
.demo-mode-pill { display: none; }
.ai-topbar { padding: 10px; }
.ai-topbar-left { flex: 1 1 100%; }
.ai-topbar-right { flex: 1 1 100%; justify-content: space-between; }
.ai-topbar-title { font-size: 15px !important; }
.ai-hero-sub { font-size: 11px !important; }
.ai-panel-head { padding: 10px; gap: 8px; }
.ai-panel-head .ai-section-icon { width: 30px !important; height: 30px !important; }
.ai-panel-head .ai-section-icon svg { width: 14px; height: 14px; }
.ai-panel-title { font-size: 14.5px; }
.ai-panel-sub { font-size: 11.5px; }
.ai-chat-bubble { max-width: 92%; font-size: 13.5px; padding: 10px 12px; }
.ai-chat-avatar { width: 22px; height: 22px; }
.ai-anom-item { flex-wrap: wrap; padding: 6px 8px; gap: 6px; }
.ai-anom-name { flex: 1 1 50%; font-size: 11.5px; }
.ai-anom-amt { font-size: 12px; }
.ai-anom-tag { font-size: 9px; padding: 2px 5px; }
.ai-cards-stack .ai-card { padding: 10px !important; }
.ai-cards-stack .ai-card-name { font-size: 12px !important; }
.ai-cards-stack .ai-card-body { font-size: 11.5px !important; line-height: 1.4; }
.ai-cards-stack .ai-btn-sm { font-size: 10.5px !important; padding: 5px 8px !important; }
.drill-group { width: 100%; }
.drill-group select,
.filter-group select,
.filter-group input { width: 100%; min-height: 42px; font-size: 15px; }
.txn-table th:nth-child(3),
.txn-table td:nth-child(3),
.txn-table th:nth-child(4),
.txn-table td:nth-child(4),
.txn-table th:nth-child(5),
.txn-table td:nth-child(5) { display: none; }
.txn-table th:nth-child(6),
.txn-table td:nth-child(6) { text-align: right; }
.page-btn { min-width: 32px; height: 32px; padding: 0 8px; font-size: 0.8rem; }
.verify-card, .mfa-card { padding: 18px !important; }
.app-footer { padding: 10px 12px; font-size: 11px; flex-wrap: wrap; gap: 6px; }
}
/* Ultra-small phones */
@media (max-width: 360px) {
.page { padding: 8px; }
.page-header h2 { font-size: 1rem; }
.card-value { font-size: 1.1rem; }
.topbar { padding: 0 8px; }
.topbar-logo { font-size: 0.85rem; }
.ai-topbar { gap: 8px; }
.ai-topbar-title { font-size: 14px !important; }
.ai-score-inline .ai-score-ring { width: 40px !important; height: 40px !important; }
.ai-score-inline .ai-score-ring span { font-size: 12px !important; }
.ai-chip { font-size: 11.5px; padding: 6px 9px; }
.ai-anom-title { font-size: 10px; }
.ai-anom-list { gap: 3px; }
}
/* Landscape phones (short viewport) */
@media (max-height: 480px) and (orientation: landscape) {
.ai-page-v2.active { height: auto; min-height: auto; overflow: visible; }
.ai-narrative-bar { max-height: none; }
.onboard-card, .welcome-card, .verify-card, .mfa-card {
max-height: calc(100vh - 20px);
overflow-y: auto;
}
}
/* ── Large monitors (≥1600px: 27" QHD etc.) — modest scale-up only ── */
@media (min-width: 1600px) {
.page { padding: 18px 26px; }
.ai-grid { gap: 14px; }
.cards-grid, .charts-row, .analytics-grid { gap: 14px; }
}
/* ── 27" QHD (≥1920px): a little more padding, no font bump ── */
@media (min-width: 1920px) {
.page { padding: 22px 36px; }
}
/* ── 4K / 32" and up (≥2400px) ── */
@media (min-width: 2400px) {
.page { padding: 28px 52px; }
.cards-grid, .charts-row, .analytics-grid { gap: 18px; }
.ai-grid { gap: 18px; }
}
/* ══════════════════════════════════════════════════════════════════
GLOBAL FONT-SIZE REDUCTION — pulls down body-level type ~1 step
so the whole app feels tighter without rewriting individual rules.
══════════════════════════════════════════════════════════════════ */
html { font-size: 15px; }
body { font-size: 13.5px; }
.page-header h2 { font-size: 1.5rem; }
.card-value { font-size: 1.4rem; }
.card-label { font-size: .74rem; }
/* ── Plan-based visibility ──────────────────────────────────────
Users on the Pro plan don't get AI features. We hide the sidebar
AI Insights link + the Ask Your Money card on the dashboard.
Users on the Max plan see everything. */
/* Mobile-only "Chat" nav entry — hidden on tablet & desktop. */
.nav-item-mobile-only { display: none !important; }
@media (max-width: 768px) {
.nav-item-mobile-only { display: flex !important; }
}
/* ── Plan-based feature gating ─────────────────────────────────────
Plans: lite < plus < elite. AI features require plus+, investments
+ crypto require elite only. Admin gets everything (data-plan=elite). */
/* AI features — Lite excluded, Plus & Elite included */
body[data-plan="lite"] .nav-item[data-page="chat"],
body[data-plan="lite"] #page-chat,
body[data-plan="lite"] .nav-item[data-page="ai"],
body[data-plan="lite"] #page-ai,
body[data-plan="lite"] .ai-dashboard-card { display: none !important; }
/* AI orb + Ask-Your-Money drawer: Plus & Elite only */
body:not([data-plan="plus"]):not([data-plan="elite"]) #aiOrbBtn,
body:not([data-plan="plus"]):not([data-plan="elite"]) #aiDrawer,
body:not([data-plan="plus"]):not([data-plan="elite"]) #aiDrawerBackdrop { display: none !important; }
/* Investments + Crypto: Elite only */
body:not([data-plan="elite"]) .nav-item[data-page="investments"],
body:not([data-plan="elite"]) .nav-item[data-page="crypto"],
body:not([data-plan="elite"]) #page-investments,
body:not([data-plan="elite"]) #page-crypto { display: none !important; }
/* Credit Cards & Debt: Plus + Elite (Lite excluded) */
body[data-plan="lite"] .nav-item[data-page="debt"],
body[data-plan="lite"] #page-debt { display: none !important; }
/* ═══════ Ask-Your-Money slide-over drawer ═══════ */
.ai-drawer-backdrop {
position: fixed; inset: 0;
background: rgba(5,8,20,.55);
backdrop-filter: blur(3px);
opacity: 0;
transition: opacity .22s ease;
z-index: 1200;
}
.ai-drawer-backdrop.show { opacity: 1; }
.ai-drawer {
position: fixed;
top: 0; right: 0;
height: 100vh;
height: 100dvh;
width: min(460px, 94vw);
background: var(--bg-card, #0e1322);
border-left: 1px solid var(--border, rgba(255,255,255,.08));
box-shadow: -20px 0 60px rgba(0,0,0,.5);
transform: translateX(100%);
transition: transform .28s cubic-bezier(.4,0,.2,1);
z-index: 1210;
display: flex; flex-direction: column;
overflow: hidden;
}
.ai-drawer.open { transform: translateX(0); }
.ai-drawer-head {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
background: linear-gradient(135deg, rgba(37, 99, 235,.18), rgba(16, 185, 129,.10));
}
.ai-drawer-title {
display: inline-flex; align-items: center; gap: 10px;
font-weight: 800; font-size: 1rem; color: var(--text);
}
.ai-drawer-spark {
width: 26px; height: 26px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: conic-gradient(from 0deg, #2563eb, #10b981, #f59e0b, #10b981, #3b82f6, #2563eb);
color: #fff;
animation: aiOrbSpin 6s linear infinite;
box-shadow: 0 0 12px rgba(167,139,250,.6);
}
.ai-drawer-close {
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid var(--border, rgba(255,255,255,.08));
background: transparent;
color: var(--text);
cursor: pointer;
font-size: 1rem;
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s ease;
}
.ai-drawer-close:hover { background: rgba(255,255,255,.06); }
.ai-drawer-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 12px;
display: flex;
}
.ai-drawer-body .ai-panel-ask {
width: 100%;
display: flex;
flex-direction: column;
min-height: 0;
flex: 1 1 auto;
}
/* Phones: full-width drawer */
@media (max-width: 520px) {
.ai-drawer { width: 100vw; border-left: none; }
}
/* Generic hook — anything tagged as Plus+/Elite-only gets hidden on Lite */
body[data-plan="lite"] [data-requires-plan="plus"],
body[data-plan="lite"] [data-requires-plan="elite"],
body:not([data-plan="elite"]) [data-requires-plan="elite"] { display: none !important; }
/* If plan is missing entirely (no trial, no paid), dim exports */
body:not([data-plan="lite"]):not([data-plan="plus"]):not([data-plan="elite"]) #exportCsvBtn,
body:not([data-plan="lite"]):not([data-plan="plus"]):not([data-plan="elite"]) #exportPdfBtn { opacity: .55; }
/* Trial banner shown in topbar while the free trial is active */
.trial-banner {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; border-radius: 999px;
background: linear-gradient(135deg, rgba(37, 99, 235,0.18), rgba(29, 78, 216,0.18));
border: 1px solid rgba(37, 99, 235,0.35);
font-size: 0.78rem; font-weight: 600;
color: #c4b5fd;
cursor: pointer;
white-space: nowrap;
}
.trial-banner:hover { background: linear-gradient(135deg, rgba(37, 99, 235,0.28), rgba(29, 78, 216,0.28)); }
.trial-banner.expired { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); color: #fca5a5; }
.trial-banner.urgent { background: rgba(251,146,60,0.18); border-color: rgba(251,146,60,0.5); color: #fdba74;
animation: trialPulse 2s ease-in-out infinite; }
@keyframes trialPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(251,146,60,0.45); } 50% { box-shadow: 0 0 0 6px rgba(251,146,60,0); } }
/* Login-time trial reminder popup */
.trial-popup-overlay {
position: fixed; inset: 0; z-index: 9000;
background: rgba(2, 6, 23, 0.6);
backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
padding: 20px;
animation: trialPopupFade .2s ease;
}
@keyframes trialPopupFade { from { opacity: 0; } to { opacity: 1; } }
.trial-popup {
background: #0f172a;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 18px;
padding: 28px 28px 24px;
max-width: 400px; width: 100%;
text-align: center;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
animation: trialPopupPop .25s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes trialPopupPop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
[data-theme="light"] .trial-popup { background: #ffffff; border-color: rgba(15,23,42,0.08); }
.trial-popup-icon { font-size: 2.4rem; margin-bottom: 8px; }
.trial-popup-title {
font-size: 1.15rem; font-weight: 700; margin: 0 0 8px;
color: #f1f5f9;
}
[data-theme="light"] .trial-popup-title { color: #0f172a; }
.trial-popup-body {
font-size: 0.92rem; color: #94a3b8; margin: 0 0 20px; line-height: 1.5;
}
[data-theme="light"] .trial-popup-body { color: #475569; }
.trial-popup-actions { display: flex; gap: 10px; }
.trial-popup-actions button {
flex: 1; padding: 11px 14px; border-radius: 10px;
font-size: 0.92rem; font-weight: 600; cursor: pointer;
border: 1px solid transparent; font-family: inherit;
}
.trial-popup-dismiss {
background: rgba(148, 163, 184, 0.12);
color: #e2e8f0;
border-color: rgba(148, 163, 184, 0.22);
}
.trial-popup-dismiss:hover { background: rgba(148, 163, 184, 0.2); }
[data-theme="light"] .trial-popup-dismiss { background: rgba(15,23,42,0.04); color: #0f172a; border-color: rgba(15,23,42,0.1); }
.trial-popup-cta.primary {
background: linear-gradient(135deg, var(--fv-c1,#2563eb), var(--fv-c2,#1d4ed8));
color: white;
box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}
.trial-popup-cta.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37, 99, 235, 0.5); }
[data-theme="light"] .trial-banner { color: #6d28d9; }
.ai-topbar-title { font-size: 18px !important; }
.ai-hero-sub { font-size: 13px !important; }
.ai-panel-title { font-size: 15px; }
.ai-panel-sub { font-size: 12px; }
.ai-narrative-title { font-size: 15px; }
.ai-chat-bubble { font-size: 14px; line-height: 1.5; }
.ai-chip { font-size: 12.5px; padding: 7px 11px; }
.ai-bar-name { font-size: 13px; }
.ai-bar-amt { font-size: 13.5px; }
.ai-chat-input-row input { font-size: 14px; }
.ai-panel .ai-tip-title { font-size: 14px; }
.ai-panel .ai-tip-body { font-size: 13px; }
/* ── Fix blank donut chart & cramped demo banner on mobile ──
Dashboard/Analytics donuts rely on flex parent height — on narrow
screens that collapses to 0. Pin a sensible min-height and let
Chart.js resize. */
@media (max-width: 820px) {
.donut-wrap,
#page-dashboard .donut-wrap,
#page-analytics .donut-wrap,
.chart-body {
min-height: 260px !important;
height: 260px !important;
}
.donut-wrap canvas,
.chart-body canvas {
max-height: 260px !important;
}
.chart-card { min-height: 320px; }
/* Demo banner: stack content cleanly on phones */
.demo-banner {
padding: 8px 12px !important;
gap: 6px !important;
font-size: 12px !important;
}
.demo-banner span:last-of-type {
flex: 1 1 100%;
font-size: 11.5px;
line-height: 1.35;
}
.demo-banner .banner-btn { padding: 6px 10px; font-size: 11px; }
}
/* ── Minimum supported viewport: 375×667 (iPhone SE / iPhone 8) ──
All content must fit comfortably at this size. */
@media (max-width: 375px) {
.page { padding: 10px; }
.page-header h2 { font-size: 1.05rem; }
.card-value { font-size: 1.15rem; }
.ai-topbar-title { font-size: 14px !important; }
.ai-hero-sub { font-size: 10.5px !important; }
.ai-panel-title { font-size: 13.5px; }
.ai-panel-sub { font-size: 11px; }
.ai-chat-bubble { font-size: 13px; }
.ai-chip { font-size: 11.5px; padding: 6px 9px; }
.ai-bar-name, .ai-bar-amt { font-size: 11.5px; }
.topbar { height: 52px; padding: 0 10px; }
.topbar-logo { font-size: 0.88rem; }
}
/* ═══════════════════════════════════════════════════════════════════
MOBILE TARGETED POLISH (v2 — generous spacing, proper buttons)
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
/* --- SIDEBAR: deep tint + real blur (premium glass look) --- */
.sidebar {
background: rgba(11, 17, 32, 0.78) !important;
background-image: none !important;
opacity: 1 !important;
-webkit-backdrop-filter: blur(22px) saturate(160%) !important;
backdrop-filter: blur(22px) saturate(160%) !important;
border-right: 1px solid rgba(37, 99, 235,0.22) !important;
isolation: isolate;
}
.sidebar::before, .sidebar::after { display: none !important; }
.sidebar-logo,
.sidebar-nav,
.sidebar-footer {
background: transparent !important;
}
html[data-theme="light"] .sidebar {
background: rgba(244, 245, 255, 0.82) !important;
border-right: 1px solid rgba(37, 99, 235,0.18) !important;
}
/* Scrim behind the drawer — blurred for depth */
body:has(.sidebar.open)::before,
body.sidebar-open::before {
background: rgba(5, 8, 20, .55) !important;
-webkit-backdrop-filter: blur(4px) !important;
backdrop-filter: blur(4px) !important;
}
/* --- TRIAL BANNER out of topbar --- */
.trial-banner { display: none !important; }
/* --- TOPBAR: generous height, proper spacing --- */
.topbar {
padding: 0 14px !important;
gap: 10px !important;
height: 60px !important;
}
.topbar-right { gap: 8px !important; flex-shrink: 0 !important; align-items: center !important; }
/* Add Bank — proper pill, readable */
.btn-connect-top {
padding: 0 16px !important;
height: 40px !important;
border-radius: 999px !important;
font-size: .82rem !important;
font-weight: 600 !important;
line-height: 1 !important;
white-space: nowrap;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
box-shadow: 0 4px 12px rgba(37, 99, 235,0.28);
}
.btn-connect-top svg { width: 14px !important; height: 14px !important; }
/* Refresh — circular, proper size */
.btn-refresh {
width: 40px !important;
height: 40px !important;
padding: 0 !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(37, 99, 235,0.12) !important;
border: 1px solid rgba(37, 99, 235,0.3) !important;
}
.btn-refresh svg { width: 16px !important; height: 16px !important; }
.btn-refresh .refresh-label { display: none !important; }
/* Theme toggle — circular, centered */
.theme-btn, #themeToggleBtn {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
padding: 0 !important;
border-radius: 50% !important;
line-height: 1 !important;
font-size: 16px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(37, 99, 235,0.12) !important;
border: 1px solid rgba(37, 99, 235,0.3) !important;
flex-shrink: 0 !important;
}
.theme-btn #themeIcon,
#themeToggleBtn #themeIcon,
.theme-btn > span,
#themeToggleBtn > span {
display: inline-block;
line-height: 1 !important;
font-size: 16px !important;
}
/* Menu button — matching height */
.menu-btn {
width: 40px !important;
height: 40px !important;
border-radius: 10px !important;
}
.menu-btn svg { width: 20px !important; height: 20px !important; }
}
/* --- Small phones: slightly smaller, still comfortable --- */
@media (max-width: 520px) {
.topbar { padding: 0 10px !important; gap: 7px !important; height: 56px !important; }
.btn-connect-top { padding: 0 13px !important; height: 36px !important; font-size: .76rem !important; }
.btn-connect-top svg { width: 13px !important; height: 13px !important; }
.theme-btn, #themeToggleBtn { width: 36px !important; height: 36px !important; min-width: 36px !important; font-size: 15px !important; }
.btn-refresh { width: 36px !important; height: 36px !important; }
.menu-btn { width: 36px !important; height: 36px !important; }
.conn-status { display: none !important; }
}
/* =========================================================
AI page — stack vertically with generous breathing room
========================================================= */
@media (max-width: 1024px) {
.ai-page-v2.active {
height: auto !important;
min-height: auto !important;
overflow: visible !important;
padding: 16px !important;
gap: 16px !important;
}
.ai-grid {
grid-template-columns: 1fr !important;
overflow: visible !important;
gap: 16px !important;
}
.ai-panel {
max-height: none !important;
min-height: 0 !important;
padding: 0 !important;
}
.ai-panel-head { padding: 14px 16px !important; gap: 10px !important; }
.ai-panel-title { font-size: 15.5px !important; }
.ai-panel-sub { font-size: 12.5px !important; }
.ai-panel-body,
.ai-panel-scroll {
padding: 14px 16px !important;
max-height: none !important;
overflow: visible !important;
}
.ai-panel-chart {
grid-column: 1 / -1 !important;
order: 0 !important;
max-height: none !important;
min-height: 0 !important; /* collapse when chart isn't rendering */
}
.ai-panel-chart canvas { min-height: 0 !important; max-height: 260px; }
/* Hide entire chart panel if its canvas has no dimensions yet */
.ai-panel-chart:empty { display: none !important; }
/* Chat body bounded so input stays reachable */
.ai-panel-ask .ai-chat-body {
max-height: 360px;
overflow-y: auto;
padding: 12px 14px !important;
}
.ai-chat-suggest { padding: 10px 14px !important; gap: 8px !important; }
.ai-chat-input-row { padding: 10px 14px !important; }
/* AI topbar — title + controls, one row */
.ai-topbar {
flex-wrap: nowrap !important;
padding: 12px 14px !important;
gap: 12px !important;
}
.ai-topbar-left { flex: 1 1 auto !important; min-width: 0 !important; gap: 10px !important; }
.ai-topbar-right { flex: 0 0 auto !important; gap: 10px !important; }
.ai-topbar-title { font-size: 17px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-topbar .ai-hero-sub { font-size: 12px !important; }
.ai-narrative-bar { max-height: none !important; padding: 12px 14px !important; }
}
/* =========================================================
Transactions — readable, no squish, body renders correctly
========================================================= */
/* === TRANSACTIONS mobile — SCOPED STRICTLY to #page-transactions === */
@media (max-width: 1024px) {
/* HARD GUARD: every page that is NOT .active must stay hidden on mobile.
Prevents any stray `display:` override from leaking content between routes. */
.page:not(.active) { display: none !important; }
/* Only apply to the ACTIVE transactions page — otherwise we'd force
display:flex on the hidden page and it would leak into Security etc. */
#page-transactions.active {
overflow-y: auto !important;
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}
#page-transactions .table-wrap {
overflow-x: auto !important;
overflow-y: visible !important;
max-height: none !important;
height: auto !important;
min-height: 200px !important;
flex: 1 1 auto !important;
display: block !important;
width: 100% !important;
-webkit-overflow-scrolling: touch;
}
#page-transactions .txn-table {
display: table !important;
width: 100% !important;
min-width: 0 !important;
table-layout: auto !important;
}
#page-transactions .txn-table thead { display: table-header-group !important; position: static !important; }
#page-transactions .txn-table tbody { display: table-row-group !important; }
#page-transactions .txn-table tr { display: table-row !important; }
#page-transactions .txn-table td,
#page-transactions .txn-table th {
display: table-cell !important;
/* NORMAL word wrap — break on spaces, not between letters */
word-break: normal !important;
overflow-wrap: normal !important;
white-space: normal !important;
hyphens: none !important;
vertical-align: middle !important;
}
}
@media (max-width: 640px) {
#page-transactions .txn-table { font-size: .85rem !important; }
#page-transactions .txn-table th,
#page-transactions .txn-table td {
padding: 10px 8px !important;
}
#page-transactions .txn-table th { font-size: .72rem !important; }
/* --- Compact filter card: 2-column grid, small labels, short inputs --- */
#page-transactions .filter-card {
padding: 10px !important;
margin-bottom: 10px !important;
}
#page-transactions .filter-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
margin-bottom: 8px !important;
flex-direction: unset !important;
}
#page-transactions .filter-group {
width: auto !important;
min-width: 0 !important;
gap: 3px !important;
}
#page-transactions .filter-group label {
font-size: .68rem !important;
letter-spacing: .3px !important;
color: #94a3b8;
margin-bottom: 0 !important;
}
#page-transactions .filter-group select,
#page-transactions .filter-group input {
min-height: 34px !important;
height: 34px !important;
font-size: 13px !important;
padding: 0 8px !important;
width: 100% !important;
}
/* Search field spans full width on its own row */
#page-transactions .filter-group:has(#txnSearch) { grid-column: 1 / -1 !important; }
/* Compact actions row */
#page-transactions .filter-actions {
display: flex !important;
gap: 8px !important;
align-items: center !important;
}
#page-transactions .filter-actions .btn-primary,
#page-transactions .filter-actions .btn-ghost {
padding: 6px 14px !important;
min-height: 34px !important;
font-size: 13px !important;
}
#page-transactions .filter-count { font-size: 11px !important; color: #94a3b8; margin-left: auto; }
#page-transactions { padding: 12px !important; }
}
/* Compact phones: hide Bank + Status → Date | Merchant | Category | Amount */
@media (max-width: 480px) {
#page-transactions .txn-table th:nth-child(4),
#page-transactions .txn-table td:nth-child(4),
#page-transactions .txn-table th:nth-child(5),
#page-transactions .txn-table td:nth-child(5) { display: none !important; }
#page-transactions .txn-table th,
#page-transactions .txn-table td { padding: 10px 6px !important; font-size: .82rem !important; }
}
/* Tight phones: also hide Category → Date | Merchant | Amount */
@media (max-width: 430px) {
#page-transactions .txn-table th:nth-child(3),
#page-transactions .txn-table td:nth-child(3) { display: none !important; }
/* Keep Date column narrow so Merchant gets most of the width */
#page-transactions .txn-table th:nth-child(1),
#page-transactions .txn-table td:nth-child(1) { width: 72px !important; white-space: nowrap !important; font-size: .75rem !important; }
#page-transactions .txn-table th:nth-child(6),
#page-transactions .txn-table td:nth-child(6) { width: 84px !important; white-space: nowrap !important; text-align: right !important; }
/* Merchant cell wraps normally, no letter-by-letter break */
#page-transactions .txn-table th:nth-child(2),
#page-transactions .txn-table td:nth-child(2) {
word-break: normal !important;
overflow-wrap: break-word !important;
white-space: normal !important;
}
}
/* =========================================================
AI — tiny phone guardrails
========================================================= */
@media (max-width: 430px) {
.ai-topbar-left { flex: 1 1 auto !important; }
.ai-topbar-right { flex: 0 0 auto !important; justify-content: flex-end !important; }
.ai-topbar-title { font-size: 16px !important; }
.ai-chat-bubble {
max-width: 90% !important;
word-wrap: break-word;
overflow-wrap: anywhere;
min-width: 0;
font-size: 13.5px !important;
padding: 10px 12px !important;
}
.ai-chip { padding: 9px 13px !important; font-size: 12.5px !important; }
}
/* ═══════════════════════════════════════════════════════════════════
AI PAGE — MOBILE DENSITY FIX
• Subscription cards: compact (not giant blocks)
• Chat panel: tall enough to use
• Tip strip: forced visible with proper spacing
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
/* --- Subscription cards: compact --- */
.ai-cards, .ai-cards-stack {
gap: 8px !important;
display: flex !important;
flex-direction: column !important;
}
.ai-card {
padding: 12px !important;
border-radius: 12px !important;
}
.ai-card::after { display: none !important; } /* kill giant glow blob */
.ai-card-top { gap: 8px !important; }
.ai-card-logo {
width: 34px !important;
height: 34px !important;
font-size: 13px !important;
border-radius: 9px !important;
flex-shrink: 0 !important;
}
.ai-card-name { font-size: 13.5px !important; font-weight: 600 !important; }
.ai-card-meta { font-size: 11px !important; margin-top: 1px !important; }
.ai-card-amount { font-size: 14px !important; font-weight: 700 !important; }
.ai-card-tag { font-size: 10px !important; padding: 2px 7px !important; margin-top: 6px !important; }
.ai-card-body {
font-size: 12px !important;
line-height: 1.4 !important;
margin-top: 6px !important;
color: #cbd5e1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ai-card-actions {
margin-top: 8px !important;
gap: 6px !important;
}
.ai-card-actions .ai-btn-sm,
.ai-card-actions button,
.ai-card-actions a {
padding: 6px 10px !important;
font-size: 11.5px !important;
min-height: 32px !important;
border-radius: 8px !important;
flex: 1 1 0 !important;
white-space: nowrap;
}
/* --- Chat panel: dominant but not absurdly tall when empty --- */
.ai-panel-ask {
min-height: 0 !important;
order: 99 !important; /* push chat to the bottom of the stack */
position: static !important; /* no sticky */
}
.ai-panel-ask .ai-chat-body {
max-height: none !important;
min-height: 220px !important;
height: auto !important;
flex: 0 0 auto !important;
overflow-y: auto !important;
padding: 12px 14px !important;
}
.ai-chat-input-row input { min-height: 46px !important; font-size: 16px !important; }
.ai-chat-send { width: 46px !important; height: 46px !important; }
/* Kill sticky everywhere in AI page — user wants natural infinite scroll */
.ai-page-v2 *,
.ai-page-v2 .ai-topbar,
.ai-page-v2 .ai-narrative-bar,
.ai-page-v2 .ai-panel-head,
.ai-page-v2 .ai-chat-suggest,
.ai-page-v2 .ai-chat-input-row { position: static !important; top: auto !important; }
/* Safety: no letter-by-letter breaking anywhere on AI page */
.ai-page-v2,
.ai-page-v2 * {
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
.ai-topbar-title,
.ai-hero-sub,
.ai-panel-title,
.ai-panel-sub,
.ai-card-name,
.ai-card-meta,
.ai-card-body { white-space: normal !important; }
/* --- Tips strip: always visible, compact but legible --- */
.ai-tips-strip {
display: block !important;
padding: 12px 14px !important;
margin: 0 !important;
}
.ai-tip-row {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 10px 8px !important;
border-bottom: 1px solid rgba(148,163,184,0.1);
}
.ai-tip-row:last-child { border-bottom: none; }
.ai-tip-num {
width: 26px !important;
height: 26px !important;
font-size: 12px !important;
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background: rgba(37, 99, 235,0.18) !important;
}
.ai-tip-text, .ai-tip-body {
font-size: 12.5px !important;
line-height: 1.5 !important;
color: #cbd5e1;
}
/* AI Insights header card: compact */
.ai-insights-hero,
.ai-score-card {
padding: 14px !important;
}
}
/* Narrow phones: stack the 3 AI boxes vertically (3-col is too cramped) */
@media (max-width: 700px) {
.ai-page-v2 .ai-grid {
grid-template-columns: 1fr !important;
}
.ai-page-v2 .ai-panel:not(.ai-panel-ask),
.ai-page-v2 .ai-panel-ask {
max-height: 420px !important;
}
}
/* Tiny phones: further compact */
@media (max-width: 430px) {
.ai-card { padding: 10px !important; }
.ai-card-logo { width: 30px !important; height: 30px !important; font-size: 12px !important; }
.ai-card-name { font-size: 13px !important; }
.ai-card-amount { font-size: 13px !important; }
.ai-card-body { -webkit-line-clamp: 2; font-size: 11.5px !important; }
.ai-card-actions .ai-btn-sm { font-size: 11px !important; padding: 5px 8px !important; }
.ai-panel-ask { min-height: 0 !important; }
.ai-panel-ask .ai-chat-body { min-height: 200px !important; }
}
/* ═══════════════════════════════════════════════════════════════════
AI PAGE mobile — kill all decorative oversized pseudo-elements that
render as giant dark blobs when content is missing/loading.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
/* Nuke EVERY decorative ::before/::after on the AI page except the
score-ring's inner mask (which needs its ::before to hollow the ring).
This stops giant purple/dark oval blobs from rendering in portrait. */
.ai-page-v2 *::before,
.ai-page-v2 *::after {
display: none !important;
content: none !important;
background: none !important;
}
.ai-page-v2 .ai-score-ring::before {
display: block !important;
content: "" !important;
}
/* Also kill any stray sparkles / floating decorations */
.ai-page-v2 .ai-sparkle { display: none !important; }
/* Kill the spinning conic-gradient backgrounds everywhere on AI page */
.ai-page-v2 *:not(.ai-score-ring) {
animation: none !important;
}
/* Collapse empty containers so they don't render as huge dark rectangles */
.ai-page-v2 .ai-panel-scroll:empty,
.ai-page-v2 .ai-cards-stack:empty,
.ai-page-v2 .ai-tips-strip:empty,
.ai-page-v2 #aiAnomsStrip:empty,
.ai-page-v2 .ai-narrative-slot:empty,
.ai-page-v2 #aiChatBody:empty,
.ai-page-v2 .ai-anoms:empty { display: none !important; }
/* If a panel only contains an empty scroll area, collapse it too */
.ai-page-v2 .ai-panel-scroll { min-height: 0 !important; }
.ai-page-v2 .ai-panel { min-height: 0 !important; }
/* Top 2 panels (Subscriptions + Tips) — fixed height with internal scroll
so each box is compact and the user can swipe through items */
/* 3-column layout: Subs | Chat | Tips. Grid stretches to fill remaining
viewport height so there's NO empty space below, and all 3 panels
share the same row height — chips+input pin to the chat panel's
bottom edge naturally via flex-grow on the chat body. */
.ai-page-v2 .ai-grid {
display: grid !important;
grid-template-columns: 1fr 1.4fr 1fr !important;
grid-template-rows: 1fr !important;
gap: 10px !important;
align-items: stretch !important;
flex: 1 1 auto !important;
min-height: 0 !important;
}
.ai-page-v2 .ai-panel:not(.ai-panel-ask),
.ai-page-v2 .ai-panel-ask {
max-height: none !important;
min-height: 0 !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
min-width: 0 !important;
order: 0 !important;
margin-bottom: 0 !important;
}
.ai-page-v2 .ai-panel:not(.ai-panel-ask) .ai-panel-scroll,
.ai-page-v2 .ai-tips-strip {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
flex: 1 1 auto !important;
min-height: 0 !important;
}
.ai-page-v2 .ai-panel-ask {
grid-column: auto !important;
padding-bottom: 0 !important;
}
.ai-page-v2 .ai-panel-ask .ai-chat-body {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
}
.ai-page-v2 .ai-panel-ask .ai-chat-suggest,
.ai-page-v2 .ai-panel-ask .ai-chat-input-row {
flex: 0 0 auto !important;
}
.ai-page-v2 .ai-panel-ask .ai-chat-suggest,
.ai-page-v2 .ai-panel-ask .ai-chat-input-row {
flex-shrink: 0 !important;
position: static !important;
}
/* CRITICAL: AI page must scroll. Body has overflow:hidden so the PAGE
must be the scroller. */
.ai-page-v2.active {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
flex: 1 1 0 !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
iPad + large tablet scroll guarantee — up to 1366px wide.
Covers iPad Pro 12.9" portrait (1024) AND landscape (1366).
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1366px) {
/* The PAGE is always the scroller, no matter what any earlier
rule set .page or .ai-page-v2.active height/overflow to. */
.page.active,
.ai-page-v2.active,
#page-transactions.active,
#page-accounts.active,
#page-analytics.active,
#page-ai.active,
#page-security.active,
#page-settings.active {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
flex: 1 1 0 !important;
touch-action: pan-y !important;
}
/* Main content column must allow its child page to take full height */
.main, .main-content {
overflow: hidden !important; /* no outer scroll */
display: flex !important;
flex-direction: column !important;
height: 100vh !important;
height: 100dvh !important;
min-height: 0 !important;
}
/* Nested panels inside AI page should not trap touch scroll.
NOTE: ai-panel itself keeps overflow:hidden so chips/input stay inside
the rounded border. Only the grid and inner scroll areas go visible. */
.ai-page-v2 .ai-grid {
overflow: visible !important;
max-height: none !important;
touch-action: pan-y !important;
}
.ai-page-v2 .ai-panel-scroll {
touch-action: pan-y !important;
}
}
/* ─────────────────────────────────────────────────────────────────
Dark-mode grey/black repaint.
Everything above either flows through --fv-c1 / --fv-c2 (already
remapped to slate) or hard-codes purple/indigo values. This block
overrides the remaining hard-coded violets so dark mode reads as
a clean grey-on-near-black instead of violet-on-navy. Light mode
is untouched.
───────────────────────────────────────────────────────────────── */
[data-theme="dark"] .card--purple,
:root:not([data-theme="light"]) .card--purple {
background: linear-gradient(150deg, #15181f 0%, #0f1319 100%);
border-color: rgba(148,163,184,.18);
}
[data-theme="dark"] .card--purple::before,
:root:not([data-theme="light"]) .card--purple::before { background: rgba(148,163,184,.45); }
[data-theme="dark"] .card--purple:hover,
:root:not([data-theme="light"]) .card--purple:hover {
box-shadow: 0 20px 48px rgba(0,0,0,.35);
border-color: rgba(203,213,225,.32);
}
/* Catch the remaining hard-coded violet/indigo gradients */
[data-theme="dark"] [style*="linear-gradient(135deg,#1d4ed8,#2563eb)"],
[data-theme="dark"] [style*="linear-gradient(135deg, #1d4ed8, #2563eb)"] {
background: linear-gradient(135deg, #475569, #1e293b) !important;
}
/* Kpi neutral chip — was bright indigo */
[data-theme="dark"] .kpi-chip.kpi-neutral .kpi-val { color: #cbd5e1 !important; }
/* AI glyphs / spinners / pills that hard-code #a78bfa */
[data-theme="dark"] .ai-score-ring { background: conic-gradient(#cbd5e1 var(--score, 0%), rgba(255,255,255,0.08) 0) !important; }
/* Soft purple text badges → slate */
[data-theme="dark"] [style*="color:#a78bfa"],
[data-theme="dark"] [style*="color: #a78bfa"] { color: #cbd5e1 !important; }
/* ══════════════════════════════════════════════════════════════════
Apple.com font stack (SF Pro family)
══════════════════════════════════════════════════════════════════ */
html, body,
input, select, textarea, button,
h1, h2, h3, h4, h5, h6,
.topbar, .sidebar, .main, .card, .page, .hc-body,
.auth-form, .footer, .app-footer,
[class*="card"], [class*="btn"], [class*="nav"] {
font-family:
-apple-system,
BlinkMacSystemFont,
"SF Pro Display",
"SF Pro Text",
"SF Pro Icons",
"Helvetica Neue",
Helvetica,
Arial,
sans-serif !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
text-rendering: optimizeLegibility !important;
letter-spacing: -0.011em;
}
h1, h2, .topbar-title, .card-value {
letter-spacing: -0.025em !important;
font-weight: 600 !important;
}
h3, .card-label, .nav-label {
letter-spacing: -0.015em !important;
}
/* Footer matches topbar/header color */
.app-footer, footer.app-footer {
background: #03081a !important;
border-top: 1px solid var(--border) !important;
}
html[data-theme="light"] .app-footer,
html[data-theme="light"] footer.app-footer { background: #f8fafc !important; }
/* Header (topbar) + Footer match the sidebar gradient */
.topbar {
background: var(--g-sidebar) !important;
}
.app-footer, footer.app-footer {
background: var(--g-sidebar) !important;
border-top: 1px solid var(--border) !important;
}
html[data-theme="light"] .topbar,
html[data-theme="light"] .app-footer,
html[data-theme="light"] footer.app-footer {
background: var(--g-sidebar) !important;
}
/* FinVista wordmark — warm gold gradient to match the diamond logo */
.logo-text,
.hc-brand-name,
.brand-name,
.fv-brand-name {
background: linear-gradient(135deg, #fef3c7 20%, #fbbf24 60%, #d97706 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
font-weight: 800 !important;
letter-spacing: -.3px !important;
}
html[data-theme="light"] .logo-text,
html[data-theme="light"] .hc-brand-name,
html[data-theme="light"] .brand-name {
background: linear-gradient(135deg, #b45309 20%, #d97706 60%, #78350f 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* FORCE topbar + footer to match sidebar — max specificity, both themes */
html body .topbar,
html body.fv-body .topbar,
html[data-theme="dark"] body .topbar,
html body footer.app-footer,
html body .app-footer,
html[data-theme="dark"] body footer.app-footer {
background: linear-gradient(180deg, #081127 0%, #03081a 100%) !important;
background-image: linear-gradient(180deg, #081127 0%, #03081a 100%) !important;
background-color: #03081a !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html[data-theme="light"] body .topbar,
html[data-theme="light"] body .app-footer,
html[data-theme="light"] body footer.app-footer {
background: #ffffff !important;
background-image: none !important;
background-color: #ffffff !important;
border-bottom: 1.5px solid rgba(15, 23, 42, .22) !important;
}
/* FinVista wordmark — revert to white→blue to match blue diamond */
.logo-text, .hc-brand-name, .brand-name, .fv-brand-name {
background: linear-gradient(135deg, #fff 30%, #38bdf8 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
font-weight: 800 !important;
letter-spacing: -.3px !important;
}
html[data-theme="light"] .logo-text,
html[data-theme="light"] .hc-brand-name,
html[data-theme="light"] .brand-name {
background: linear-gradient(135deg, #0c4a6e 20%, #0284c7 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* FinVista wordmark — clean solid color, no gradient */
.logo-text, .hc-brand-name, .brand-name, .fv-brand-name {
background: none !important;
background-image: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: #f1f5f9 !important;
color: #f1f5f9 !important;
font-weight: 700 !important;
letter-spacing: -.3px !important;
}
html[data-theme="light"] .logo-text,
html[data-theme="light"] .hc-brand-name,
html[data-theme="light"] .brand-name {
-webkit-text-fill-color: #0f172a !important;
color: #0f172a !important;
}
/* Header (topbar) — deep navy gradient */
html body .topbar,
html[data-theme="dark"] body .topbar {
background: linear-gradient(180deg, #081127 0%, #03081a 100%) !important;
background-image: linear-gradient(180deg, #081127 0%, #03081a 100%) !important;
background-color: #03081a !important;
border-bottom: 1px solid rgba(96,165,250,.14) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Footer — match header deep navy */
html body .app-footer,
html body footer.app-footer,
html[data-theme="dark"] body .app-footer,
html[data-theme="dark"] body footer.app-footer {
background: linear-gradient(180deg, #081127 0%, #03081a 100%) !important;
background-image: linear-gradient(180deg, #081127 0%, #03081a 100%) !important;
background-color: #03081a !important;
border-top: 1px solid rgba(96,165,250,.14) !important;
}
/* Hide redundant secondary page titles — topbar already shows the name */
.page-header > h2 { display: none !important; }
.page-header:has(> h2:only-child) { display: none !important; }
/* Smaller Merchant search field */
#page-transactions .filter-group--search { max-width: 180px !important; }
#page-transactions .filter-group--search input.search-input {
width: 100% !important;
max-width: 180px !important;
padding: 7px 10px !important;
font-size: .85rem !important;
height: 34px !important;
}
/* Hide browser's search clear X on the type=search input (keep it minimal) */
#page-transactions input[type="search"]::-webkit-search-cancel-button { appearance: none; }
/* ══════════════════════════════════════════════════════════════════
Sleek transaction filter bar — single row, minimal chrome
══════════════════════════════════════════════════════════════════ */
.filter-card--sleek {
padding: 0 !important;
border-radius: 0 !important;
background: transparent !important;
border: none !important;
margin-bottom: 10px !important;
}
.filter-card--sleek .filter-row {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
margin-bottom: 0 !important;
}
.sleek-select {
background: rgba(255,255,255,.04) !important;
color: #e2e8f0 !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 7px !important;
padding: 4px 24px 4px 10px !important;
font-size: .78rem !important;
height: 28px !important;
cursor: pointer !important;
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 9px center !important;
transition: border-color .15s, background-color .15s !important;
}
.sleek-select:hover { border-color: rgba(255,255,255,.18) !important; background-color: rgba(255,255,255,.06) !important; }
.sleek-select:focus { outline: none !important; border-color: rgba(59,130,246,.55) !important; box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important; }
.sleek-select option { background: #0d1628; color: #e2e8f0; }
.sleek-btn {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
padding: 4px 10px !important;
height: 28px !important;
border-radius: 7px !important;
font-size: .78rem !important;
font-weight: 600 !important;
cursor: pointer !important;
border: 1px solid rgba(255,255,255,.10) !important;
background: rgba(255,255,255,.04) !important;
color: #e2e8f0 !important;
transition: all .15s !important;
}
.sleek-btn:hover { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.22) !important; }
.sleek-btn--primary {
margin-left: auto !important;
background: linear-gradient(135deg, #14b8a6, #0ea5e9) !important;
border-color: transparent !important;
color: #fff !important;
}
.sleek-btn--primary:hover { filter: brightness(1.12) !important; }
.filter-card--sleek .filter-count { color: #64748b !important; font-size: .8rem !important; margin-left: 6px !important; }
/* Tighter sidebar nav items */
.sidebar .nav-item,
.sidebar-nav .nav-item {
padding: 8px 12px !important;
gap: 10px !important;
font-size: .9rem !important;
min-height: 0 !important;
margin-bottom: 1px !important;
}
.sidebar .nav-icon,
.sidebar-nav .nav-icon {
width: 18px !important;
height: 18px !important;
}
.sidebar-nav { gap: 1px !important; }
/* Dropdown option list styling */
html[data-theme="dark"] .sleek-select option,
html[data-theme="dark"] #page-transactions select option {
background-color: #0d1628 !important;
color: #e2e8f0 !important;
padding: 8px 12px !important;
font-size: .9rem !important;
}
html[data-theme="light"] .sleek-select option,
html[data-theme="light"] #page-transactions select option {
background-color: #ffffff !important;
color: #0f172a !important;
padding: 8px 12px !important;
font-size: .9rem !important;
}
.sleek-select option:checked,
#page-transactions select option:checked {
background: linear-gradient(#14b8a6, #0ea5e9) !important;
background-color: #0ea5e9 !important;
color: #fff !important;
font-weight: 600 !important;
}
html[data-theme="dark"] .sleek-select option:hover,
html[data-theme="dark"] #page-transactions select option:hover {
background-color: #1a2340 !important;
}
html[data-theme="light"] .sleek-select option:hover,
html[data-theme="light"] #page-transactions select option:hover {
background-color: #eef2ff !important;
color: #0f172a !important;
}
/* Firefox needs this for the select popup itself */
html[data-theme="dark"] .sleek-select {
color-scheme: dark !important;
}
html[data-theme="light"] .sleek-select {
color-scheme: light !important;
}
/* ═══════════════════════════════════════════════════════════════
Bills KPI cards — accent-tinted borders
═══════════════════════════════════════════════════════════════ */
html body .bills-sum-card {
border: 1px solid color-mix(in srgb, var(--fv-c1, #2563eb) 28%, rgba(148,163,184,0.14)) !important;
background:
linear-gradient(135deg,
color-mix(in srgb, var(--fv-c1, #2563eb) 10%, transparent),
color-mix(in srgb, var(--fv-c2, #1d4ed8) 6%, transparent) 60%,
transparent 100%),
rgba(15, 23, 42, 0.55) !important;
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--fv-c1, #2563eb) 20%, transparent),
0 6px 18px rgba(0, 0, 0, 0.18) !important;
}
html body .bills-sum-card:hover {
border-color: color-mix(in srgb, var(--fv-c1, #2563eb) 45%, rgba(148,163,184,0.2)) !important;
}
html body .bills-sum-card.warn {
border-color: color-mix(in srgb, #f59e0b 35%, rgba(148,163,184,0.14)) !important;
}
html body .bills-sum-card.bad {
border-color: color-mix(in srgb, #ef4444 40%, rgba(148,163,184,0.14)) !important;
}
html[data-theme="light"] body .bills-sum-card {
background:
linear-gradient(135deg,
color-mix(in srgb, var(--fv-c1, #2563eb) 8%, transparent),
color-mix(in srgb, var(--fv-c2, #1d4ed8) 5%, transparent) 60%,
transparent 100%),
rgba(255, 255, 255, 0.85) !important;
border-color: color-mix(in srgb, var(--fv-c1, #2563eb) 22%, rgba(15,23,42,0.1)) !important;
}
/* ═══════════════════════════════════════════════════════════════
Scrollbars — tint to match the user's chosen accent palette
═══════════════════════════════════════════════════════════════ */
html {
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--fv-c1, #2563eb) 60%, transparent)
color-mix(in srgb, var(--fv-c1, #2563eb) 8%, transparent);
}
* {
scrollbar-color: color-mix(in srgb, var(--fv-c1, #2563eb) 60%, transparent)
color-mix(in srgb, var(--fv-c1, #2563eb) 8%, transparent);
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: color-mix(in srgb, var(--fv-c1, #2563eb) 6%, transparent) !important;
border-radius: 99px;
}
*::-webkit-scrollbar-thumb {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--fv-c1, #2563eb) 70%, transparent),
color-mix(in srgb, var(--fv-c2, #1d4ed8) 70%, transparent)
) !important;
border-radius: 99px;
border: 2px solid transparent;
background-clip: padding-box !important;
}
*::-webkit-scrollbar-thumb:hover {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--fv-c1, #2563eb) 90%, transparent),
color-mix(in srgb, var(--fv-c2, #1d4ed8) 90%, transparent)
) !important;
background-clip: padding-box !important;
}
*::-webkit-scrollbar-corner {
background: transparent;
}
html[data-theme="light"] {
scrollbar-color: color-mix(in srgb, var(--fv-c1, #2563eb) 55%, transparent)
color-mix(in srgb, var(--fv-c1, #2563eb) 10%, transparent);
}
/* ═══════════════════════════════════════════════════════════════════
FV BUTTER — global smoothness pass
Upgraded page transitions, hover easing, scroll behaviour, and
hardware-accelerated transforms for a consistent 60fps feel.
Respects prefers-reduced-motion.
═════════════════════════════════════════════════════════════════ */
/* Smooth scrolling everywhere (anchor jumps, scrollTo, sidebar hash) */
html { scroll-behavior: smooth; }
.page, .main-content, .sidebar, .drawer, .modal {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain; /* stop scroll chaining into body */
}
/* Page transition — slightly longer, richer easing, GPU-accelerated.
Uses will-change on the active page only so we don't keep layers
around for every hidden page. */
.page.active {
animation: fvPageIn .42s cubic-bezier(.22,1,.36,1) both !important;
will-change: opacity, transform;
}
@keyframes fvPageIn {
0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(.994); filter: blur(2px); }
60% { filter: blur(0); }
100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
/* Legacy fvChildIn / fadeUp page animations removed — motion (Framer
Motion) now owns every page entrance and child stagger via the
MotionPage component. The legacy keyframes kept stranding children
at opacity:0 when their parent's class lifecycle didn't line up
with the animation trigger, especially when React replaced the
element. Motion's React-aware animations don't have that race. */
/* Sidebar nav — smoother highlight + subtle indent on hover */
.nav-item {
transition:
background .22s cubic-bezier(.22,1,.36,1),
color .22s cubic-bezier(.22,1,.36,1),
transform .22s cubic-bezier(.22,1,.36,1),
box-shadow .22s cubic-bezier(.22,1,.36,1);
will-change: transform;
}
.nav-item:hover { transform: translateX(2px); }
.nav-item:active { transform: translateX(1px) scale(.985); }
/* Cards — consistent lift on hover (only where it's not already styled) */
.card, .inv-sum-card, .crypto-sum-card, .debt-row, .mc-card, .ai-dashboard-card {
transition:
transform .28s cubic-bezier(.22,1,.36,1),
box-shadow .28s cubic-bezier(.22,1,.36,1),
border-color .28s cubic-bezier(.22,1,.36,1);
will-change: transform;
}
.card:hover, .inv-sum-card:hover, .crypto-sum-card:hover, .debt-row:hover {
transform: translate3d(0, -2px, 0);
box-shadow: 0 8px 24px rgba(2, 6, 23, .28);
}
/* Buttons — snappy press feedback */
button, .btn, .btn-primary, .btn-secondary, .plan-btn {
transition:
transform .14s cubic-bezier(.22,1,.36,1),
background .2s cubic-bezier(.22,1,.36,1),
border-color .2s cubic-bezier(.22,1,.36,1),
box-shadow .2s cubic-bezier(.22,1,.36,1),
color .2s cubic-bezier(.22,1,.36,1),
opacity .2s cubic-bezier(.22,1,.36,1);
}
button:active, .btn:active, .btn-primary:active, .btn-secondary:active {
transform: scale(.97);
}
/* Inputs / selects — crisp focus ring without layout jumps */
input, select, textarea {
transition:
border-color .2s cubic-bezier(.22,1,.36,1),
box-shadow .2s cubic-bezier(.22,1,.36,1),
background .2s cubic-bezier(.22,1,.36,1);
}
/* Tables: row hover without flicker */
table tr, .txn-row, .sub-row {
transition: background .18s cubic-bezier(.22,1,.36,1);
}
/* Topbar connect label swap — no layout jolt when text changes */
#topConnectBtn {
transition:
background .2s cubic-bezier(.22,1,.36,1),
transform .14s cubic-bezier(.22,1,.36,1),
color .2s cubic-bezier(.22,1,.36,1);
min-width: 132px;
justify-content: center;
}
/* Drawer / modal / overlay — unified easing */
.ai-drawer, .modal, .drawer, .loading-overlay {
transition:
opacity .28s cubic-bezier(.22,1,.36,1),
transform .32s cubic-bezier(.22,1,.36,1),
visibility .28s cubic-bezier(.22,1,.36,1);
}
/* Off-screen pages don't render until needed → fewer paints, smoother switch */
.page:not(.active) {
content-visibility: auto;
contain-intrinsic-size: 800px;
}
/* Image rendering hint for avatars + icons */
img, svg { -webkit-font-smoothing: antialiased; }
/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.page.active,
.page.active > *,
.nav-item,
.card,
.btn,
.btn-primary,
button {
animation: none !important;
transition: none !important;
}
}
/* ══════════════════════════════════════════════════════════════════
MACBOOK 14" / 13" LAPTOP — NO-SCROLL DASHBOARD (1440px – 1600px)
Everything must fit in 100dvh with zero scroll, no overlap.
Targets MacBook Pro 14" (1512×982), MacBook Air 13" (1470×956).
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) and (max-width: 1600px) {
/* Footer stays visible — just make it compact */
.main .app-footer,
.app-footer {
padding: 6px 20px !important;
font-size: .72rem !important;
min-height: 0 !important;
flex: 0 0 auto !important;
}
/* Lock the dashboard to the viewport — no page scroll.
Only applies when dashboard is the active page, so other pages
(Transactions, Analytics, etc.) keep their default display:none. */
#page-dashboard.active {
overflow: hidden !important;
height: calc(100dvh - 90px) !important;
max-height: calc(100dvh - 90px) !important;
padding: 10px 20px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
box-sizing: border-box !important;
}
/* Filters + account chips rows — compact, fixed height */
#page-dashboard .filters-row,
#page-dashboard .acct-chips-row {
flex: 0 0 auto !important;
margin: 0 !important;
}
/* KPI cards row — 4 across */
#page-dashboard .cards-grid {
flex: 0 0 auto !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
}
#page-dashboard .cards-grid .card {
padding: 12px 16px !important;
}
/* Money Coach row — EQUAL-HEIGHT grid, all 3 cards same size.
Height sized to fit the tallest card (Weekly Digest w/ Tip row). */
#page-dashboard .mc-grid,
#page-dashboard .money-coach-row,
#page-dashboard .mc-row {
flex: 0 0 auto !important;
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
grid-auto-rows: 1fr !important;
align-items: stretch !important;
gap: 14px !important;
margin: 0 !important;
height: 240px !important;
max-height: 240px !important;
}
#page-dashboard .mc-grid .mc-card,
#page-dashboard .mc-card {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
padding: 12px 14px !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Card body grows to fill — tip / footer stays pinned at bottom */
#page-dashboard .mc-card .mc-body,
#page-dashboard .mc-card .mc-list {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* Chart rows — FIXED heights, not flex, to prevent overlap.
Each row gets an explicit height so Chart.js canvases have
a resolved parent height to size against. */
/* Chart rows share ALL remaining vertical space 50/50 — no wasted gap */
#page-dashboard .charts-row {
flex: 1 1 0 !important;
min-height: 180px !important;
gap: 14px !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: 1.55fr 1fr !important;
overflow: hidden !important;
}
/* Chart cards — strict clipping, fill their row */
#page-dashboard .chart-card {
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
padding: 10px 14px !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Chart body — absolute canvas inside so it CANNOT overflow parent */
#page-dashboard .chart-card .chart-body {
flex: 1 1 auto !important;
min-height: 0 !important;
position: relative !important;
overflow: hidden !important;
}
#page-dashboard .chart-card .chart-body canvas {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
}
/* Donut wrap + canvas constrained */
#page-dashboard .donut-wrap {
flex: 1 1 auto !important;
min-height: 0 !important;
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
overflow: hidden !important;
}
#page-dashboard .donut-wrap canvas {
max-height: 100% !important;
max-width: 100% !important;
}
#page-dashboard .chart-card .legend {
flex: 0 0 auto !important;
font-size: .72rem !important;
line-height: 1.4 !important;
padding-top: 4px !important;
gap: 3px 10px !important;
max-height: 44px !important;
overflow: hidden !important;
}
/* Recent transactions — scroll internally */
#page-dashboard .txn-list {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
padding-right: 4px !important;
}
/* Chart headers compact */
#page-dashboard .chart-card .chart-header {
margin-bottom: 6px !important;
flex: 0 0 auto !important;
}
#page-dashboard .chart-card .chart-title { font-size: .92rem !important; }
#page-dashboard .chart-hint { font-size: .7rem !important; }
}
/* ══════════════════════════════════════════════════════════════════
IPAD PRO 11" (1025px – 1199px — landscape 1194×834)
Shows hamburger, slide-out sidebar, no-scroll dashboard.
Doesn't touch portrait (≤1024px = existing mobile rules).
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1199px) {
/* Hamburger visible; sidebar slides in/out */
.menu-btn { display: inline-flex !important; }
.sidebar { transform: translateX(-100%); box-shadow: none; }
.sidebar.open { transform: translateX(0); box-shadow: 8px 0 40px rgba(0,0,0,.6); }
.main { margin-left: 0 !important; }
/* Backdrop when sidebar is open */
body:has(.sidebar.open)::before,
body.sidebar-open::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 90;
animation: fadeIn .2s ease;
pointer-events: auto;
}
/* Footer compact */
.main .app-footer,
.app-footer {
padding: 6px 20px !important;
font-size: .72rem !important;
min-height: 0 !important;
flex: 0 0 auto !important;
}
/* Dashboard no-scroll fit (834px - 58px topbar - 32px footer = 744px) */
#page-dashboard.active {
overflow: hidden !important;
height: calc(100dvh - 90px) !important;
max-height: calc(100dvh - 90px) !important;
padding: 10px 18px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
box-sizing: border-box !important;
}
/* Filters + account chips */
#page-dashboard .filters-row,
#page-dashboard .acct-chips-row {
flex: 0 0 auto !important;
margin: 0 !important;
}
/* KPI cards — 4 across, compact on iPad */
#page-dashboard .cards-grid {
flex: 0 0 auto !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 10px !important;
}
#page-dashboard .cards-grid .card {
padding: 8px 12px !important;
}
#page-dashboard .cards-grid .card-value { font-size: 1.35rem !important; line-height: 1.1 !important; }
#page-dashboard .cards-grid .card-label { font-size: .68rem !important; }
#page-dashboard .cards-grid .card-sub { font-size: .72rem !important; }
#page-dashboard .cards-grid .card-icon { width: 28px !important; height: 28px !important; }
/* Money Coach — 3 equal cards, shrunk to give charts more room */
#page-dashboard .mc-grid,
#page-dashboard .money-coach-row,
#page-dashboard .mc-row {
flex: 0 0 auto !important;
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
grid-auto-rows: 1fr !important;
align-items: stretch !important;
gap: 10px !important;
margin: 0 !important;
height: 165px !important;
max-height: 165px !important;
}
#page-dashboard .mc-grid .mc-card,
#page-dashboard .mc-card {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
padding: 10px 12px !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Shrink Money Coach typography on iPad so content fits smaller cards */
#page-dashboard .mc-burn-big { font-size: 1.5rem !important; line-height: 1 !important; }
#page-dashboard .mc-burn-big .unit,
#page-dashboard .mc-burn-sub { font-size: .75rem !important; line-height: 1.3 !important; margin-bottom: 6px !important; }
#page-dashboard .mc-card .mc-head { margin-bottom: 4px !important; }
/* Tighten inner spacing */
#page-dashboard .mc-card .mc-burn-bar { height: 4px !important; margin: 4px 0 !important; }
#page-dashboard .mc-card .mc-cta { font-size: .72rem !important; margin-top: 4px !important; }
/* Hide non-essential extras on iPad to keep Money Coach compact:
– Tip box (it's a nudge, not core data)
– Weekly Digest's tip block (same reason) */
#page-dashboard .mc-card .mc-tip,
#page-dashboard .mc-card [class*="tip-box"],
#page-dashboard .mc-card .mc-weekly-tip { display: none !important; }
#page-dashboard .mc-card .mc-body,
#page-dashboard .mc-card .mc-list {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* Chart rows share remaining vertical space 50/50 */
#page-dashboard .charts-row {
flex: 1 1 0 !important;
min-height: 140px !important;
gap: 12px !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: 1.55fr 1fr !important;
overflow: hidden !important;
}
#page-dashboard .chart-card {
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
padding: 10px 12px !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
#page-dashboard .chart-card .chart-body {
flex: 1 1 auto !important;
min-height: 0 !important;
position: relative !important;
overflow: hidden !important;
}
#page-dashboard .chart-card .chart-body canvas {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
}
#page-dashboard .donut-wrap {
flex: 1 1 auto !important;
min-height: 0 !important;
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
overflow: hidden !important;
}
#page-dashboard .donut-wrap canvas {
max-height: 100% !important;
max-width: 100% !important;
}
#page-dashboard .chart-card .legend {
flex: 0 0 auto !important;
font-size: .7rem !important;
line-height: 1.4 !important;
padding-top: 4px !important;
gap: 3px 8px !important;
max-height: 40px !important;
overflow: hidden !important;
}
#page-dashboard .txn-list {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
padding-right: 4px !important;
}
#page-dashboard .chart-card .chart-header {
margin-bottom: 6px !important;
flex: 0 0 auto !important;
}
#page-dashboard .chart-card .chart-title { font-size: .9rem !important; }
#page-dashboard .chart-hint { font-size: .68rem !important; }
/* Vista AI drawer — flex column so input/suggestions stick to the bottom */
#aiDrawer,
.ai-drawer {
display: flex !important;
flex-direction: column !important;
}
/* The scrollable messages/content area grows to fill */
#aiDrawer .ai-drawer-body,
#aiDrawer .ai-chat-body,
#aiDrawer .ai-panel-scroll,
.ai-drawer .ai-drawer-body,
.ai-drawer .ai-chat-body {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
}
/* Suggestions + input pinned to the bottom */
#aiDrawer .ai-chat-suggestions,
#aiDrawer .ai-chips,
#aiDrawer .ai-suggest-row,
#aiDrawer .ai-chat-input-row,
#aiDrawer .ai-chat-input,
#aiDrawer .ai-input-row,
.ai-drawer .ai-chat-suggestions,
.ai-drawer .ai-chips,
.ai-drawer .ai-chat-input-row,
.ai-drawer .ai-input-row {
flex: 0 0 auto !important;
margin-top: auto !important;
}
}
/* ══════════════════════════════════════════════════════════════════
IPAD PRO 11" PORTRAIT (820px – 900px, orientation: portrait)
834×1194 — tall viewport, sidebar already hidden by 1024px rule.
Goal: comfortable no-scroll dashboard with 4 charts 2×2.
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 820px) and (max-width: 900px) and (orientation: portrait) {
/* Vista AI drawer — flex column so input/suggestions stick to the bottom */
#aiDrawer,
.ai-drawer {
display: flex !important;
flex-direction: column !important;
}
#aiDrawer .ai-drawer-body,
#aiDrawer .ai-chat-body,
#aiDrawer .ai-panel-scroll,
.ai-drawer .ai-drawer-body,
.ai-drawer .ai-chat-body {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
}
#aiDrawer .ai-chat-suggestions,
#aiDrawer .ai-chips,
#aiDrawer .ai-suggest-row,
#aiDrawer .ai-chat-input-row,
#aiDrawer .ai-chat-input,
#aiDrawer .ai-input-row,
.ai-drawer .ai-chat-suggestions,
.ai-drawer .ai-chips,
.ai-drawer .ai-chat-input-row,
.ai-drawer .ai-input-row {
flex: 0 0 auto !important;
margin-top: auto !important;
}
/* Support chat panel (FinVista Assistant) — compact size, input at bottom */
.chat-panel {
bottom: 22px !important;
right: 22px !important;
left: auto !important;
top: auto !important;
width: 380px !important;
max-width: calc(100vw - 44px) !important;
height: 480px !important;
max-height: calc(100dvh - 100px) !important;
}
/* Footer compact */
.main .app-footer,
.app-footer {
padding: 6px 16px !important;
font-size: .72rem !important;
min-height: 0 !important;
flex: 0 0 auto !important;
}
/* Dashboard — fills the space between topbar and footer so footer
sits at the true bottom. Charts row grows to absorb extra height. */
#page-dashboard.active {
overflow-y: auto !important;
overflow-x: hidden !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
flex: 1 1 auto !important;
padding: 12px 16px 16px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
box-sizing: border-box !important;
-webkit-overflow-scrolling: touch !important;
touch-action: pan-y !important;
overscroll-behavior: contain !important;
}
/* Filters + chips */
#page-dashboard .filters-row,
#page-dashboard .acct-chips-row {
flex: 0 0 auto !important;
margin: 0 !important;
}
/* KPI — 4 across at 834 width (each ~195px wide) */
#page-dashboard .cards-grid {
flex: 0 0 auto !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 10px !important;
}
#page-dashboard .cards-grid .card { padding: 10px 12px !important; }
#page-dashboard .cards-grid .card-value { font-size: 1.25rem !important; line-height: 1.1 !important; }
#page-dashboard .cards-grid .card-label { font-size: .66rem !important; }
#page-dashboard .cards-grid .card-sub { font-size: .7rem !important; }
#page-dashboard .cards-grid .card-icon { width: 26px !important; height: 26px !important; }
/* Money Coach — 3 across, tip hidden to stay compact */
#page-dashboard .mc-grid,
#page-dashboard .money-coach-row,
#page-dashboard .mc-row {
flex: 0 0 auto !important;
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
grid-auto-rows: 1fr !important;
align-items: stretch !important;
gap: 10px !important;
margin: 0 !important;
height: 195px !important;
max-height: 195px !important;
}
#page-dashboard .mc-grid .mc-card,
#page-dashboard .mc-card {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
padding: 10px 12px !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
#page-dashboard .mc-burn-big { font-size: 1.55rem !important; line-height: 1 !important; }
#page-dashboard .mc-burn-big .unit,
#page-dashboard .mc-burn-sub { font-size: .74rem !important; line-height: 1.3 !important; margin-bottom: 4px !important; }
#page-dashboard .mc-card .mc-head { margin-bottom: 4px !important; }
#page-dashboard .mc-card .mc-burn-bar { height: 4px !important; margin: 4px 0 !important; }
#page-dashboard .mc-card .mc-cta { font-size: .72rem !important; margin-top: 4px !important; }
#page-dashboard .mc-card .mc-tip,
#page-dashboard .mc-card [class*="tip-box"],
#page-dashboard .mc-card .mc-weekly-tip,
#page-dashboard .mc-card .mc-dig-tip,
#page-dashboard .mc-card #mcDigTip { display: none !important; }
/* Weekly Digest rows — compact so Spent/vs last week/Saved + CTA fit */
#page-dashboard .mc-card .mc-dig-row {
padding: 2px 0 !important;
font-size: .8rem !important;
line-height: 1.25 !important;
display: flex !important;
justify-content: space-between !important;
}
#page-dashboard .mc-card .mc-dig-row span:last-child {
font-weight: 700 !important;
}
#page-dashboard .mc-card .mc-body {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
overflow: hidden !important;
justify-content: flex-start !important;
}
/* CTA pinned to bottom of every mc-card so all three line up */
#page-dashboard .mc-card .mc-cta,
#page-dashboard .mc-card [class*="view-"],
#page-dashboard .mc-card a.view-link {
margin-top: auto !important;
padding-top: 4px !important;
}
/* Enforce consistent card look — same padding, same internal flex */
#page-dashboard .mc-grid .mc-card {
justify-content: flex-start !important;
}
/* Subscription ROI — limit to one row so the card doesn't overflow */
#page-dashboard #mcSubs .sub-item ~ .sub-item,
#page-dashboard .mc-card [class*="sub-item"] ~ [class*="sub-item"] {
display: none !important;
}
/* Each .charts-row is its own 1-row 2-col grid (there are 2 rows in
the markup). Both grow equally via flex: 1 1 0 so together they
fill the remaining vertical space between Money Coach and footer. */
#page-dashboard .charts-row {
flex: 1 1 0 !important;
min-height: 260px !important;
gap: 12px !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
grid-template-rows: 1fr !important;
grid-auto-rows: 1fr !important;
overflow: visible !important;
}
#page-dashboard .chart-card {
min-height: 0 !important;
height: 100% !important;
max-height: none !important;
padding: 10px 12px !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Recent Transactions — compact rows so they fit the narrower column */
#page-dashboard .txn-list {
font-size: .78rem !important;
}
#page-dashboard .txn-list .txn-item,
#page-dashboard .txn-list > * {
padding: 6px 4px !important;
gap: 6px !important;
}
#page-dashboard .txn-list .txn-date {
white-space: nowrap !important;
font-size: .7rem !important;
}
#page-dashboard .txn-list .txn-bank,
#page-dashboard .txn-list [class*="bank-badge"] {
white-space: nowrap !important;
font-size: .66rem !important;
padding: 2px 6px !important;
}
#page-dashboard .txn-list .txn-amount,
#page-dashboard .txn-list [class*="amount"] {
white-space: nowrap !important;
font-size: .85rem !important;
}
#page-dashboard .txn-list .txn-logo,
#page-dashboard .txn-list img,
#page-dashboard .txn-list .txn-avatar {
width: 26px !important;
height: 26px !important;
flex: 0 0 26px !important;
}
#page-dashboard .chart-card .chart-body {
flex: 1 1 auto !important;
min-height: 0 !important;
position: relative !important;
overflow: hidden !important;
}
#page-dashboard .chart-card .chart-body canvas {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
}
#page-dashboard .donut-wrap {
flex: 1 1 auto !important;
min-height: 0 !important;
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
overflow: hidden !important;
}
#page-dashboard .donut-wrap canvas {
max-height: 100% !important;
max-width: 100% !important;
}
#page-dashboard .chart-card .legend {
flex: 0 0 auto !important;
font-size: .7rem !important;
line-height: 1.4 !important;
padding-top: 4px !important;
gap: 3px 8px !important;
max-height: 42px !important;
overflow: hidden !important;
}
#page-dashboard .txn-list {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
padding-right: 4px !important;
}
#page-dashboard .chart-card .chart-header {
margin-bottom: 6px !important;
flex: 0 0 auto !important;
}
#page-dashboard .chart-card .chart-title { font-size: .9rem !important; }
#page-dashboard .chart-hint { font-size: .68rem !important; }
/* ============================================================
AI INSIGHTS PAGE (#page-ai) — iPad Pro 11" portrait (834px)
2-col grid was squeezing panels and truncating text.
Stack panels full-width so each uses the full 834px.
============================================================ */
#page-ai.active {
padding: 12px 16px !important;
overflow-y: auto !important;
}
#page-ai .ai-grid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-auto-rows: min-content !important;
gap: 12px !important;
align-items: start !important;
}
#page-ai .ai-panel {
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 14px 16px !important;
overflow: hidden !important;
}
#page-ai .ai-panel-head {
gap: 10px !important;
align-items: center !important;
}
#page-ai .ai-panel-text {
min-width: 0 !important;
flex: 1 1 auto !important;
}
#page-ai .ai-panel-title {
font-size: 1rem !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.25 !important;
}
#page-ai .ai-panel-sub {
font-size: .78rem !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.3 !important;
}
/* Force single-column grid — beats .ai-page-v2 .ai-grid 3-col rule
at max-width:1024px via higher specificity (#id beats .class). */
#page-ai.ai-page-v2 .ai-grid,
#page-ai .ai-grid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
grid-auto-rows: auto !important;
gap: 12px !important;
align-items: start !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
flex: 0 0 auto !important;
}
/* KILL the Vista Ask panel completely on iPad portrait — collapse to
zero so no grid cell space is reserved. */
#page-ai.ai-page-v2 .ai-panel-ask,
#page-ai .ai-panel-ask {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
/* Subscriptions + Tips panels — natural height, no empty space.
The PAGE is the scroller (outer #page-ai.active has overflow-y: auto),
so panels expand to fit their content. */
#page-ai.ai-page-v2 .ai-panel:not(.ai-panel-ask),
#page-ai .ai-panel:not(.ai-panel-ask) {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 14px 16px !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* Panel head — fixed, does not shrink */
#page-ai .ai-panel-head {
flex: 0 0 auto !important;
gap: 10px !important;
align-items: center !important;
}
#page-ai .ai-panel-title {
font-size: 1rem !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.25 !important;
}
#page-ai .ai-panel-sub {
font-size: .78rem !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.3 !important;
}
/* Scroll areas flow naturally — no nested scroll, page handles it */
#page-ai.ai-page-v2 .ai-panel:not(.ai-panel-ask) .ai-panel-scroll,
#page-ai .ai-panel-scroll {
flex: 0 0 auto !important;
min-height: 0 !important;
max-height: none !important;
height: auto !important;
overflow: visible !important;
padding-right: 0 !important;
}
#page-ai .ai-tips-strip,
#page-ai .ai-cards-stack {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
/* Page itself is THE scroller — natural vertical flow, full page scrolls */
#page-ai.active,
#page-ai.ai-page-v2.active {
padding: 12px 16px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
touch-action: pan-y !important;
overscroll-behavior: contain !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
Money-Coach modal (Subscription ROI, Weekly Digest, Burn Rate)
— darken backdrop and make card fully opaque so the dashboard
doesn't bleed through. Applies on all screens.
═══════════════════════════════════════════════════════════════════ */
.mc-modal {
background: rgba(2, 6, 14, 0.82) !important;
backdrop-filter: blur(16px) saturate(140%) !important;
-webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}
.mc-modal-card {
background: #0b1020 !important;
background-image:
linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(29, 78, 216, 0.06)),
linear-gradient(#0b1020, #0b1020) !important;
border: 1px solid rgba(37, 99, 235, 0.35) !important;
box-shadow:
0 40px 100px rgba(0, 0, 0, 0.75),
0 0 0 1px rgba(37, 99, 235, 0.25) !important;
}
[data-theme="light"] .mc-modal {
background: rgba(15, 23, 42, 0.55) !important;
}
[data-theme="light"] .mc-modal-card {
background: #ffffff !important;
background-image: none !important;
border: 1px solid rgba(15, 23, 42, 0.12) !important;
}
/* ═══════════════════════════════════════════════════════════════════
GLOBAL: on ANY width below iPad portrait, if a .charts-row has only
one visible .chart-card (because the others are .mobile-hide or
display:none), force that card to span the full row width.
This centers Recent Transactions regardless of viewport size.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 819px) {
html body #page-dashboard .charts-row {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
html body #page-dashboard .charts-row > .chart-card {
grid-column: 1 / -1 !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* And make the dashboard page itself full-width */
html body #page-dashboard.active {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
SMALL-TABLET / LANDSCAPE-PHONE BRIDGE — 501px to 819px, all orientations.
Fills the gap between phone rules (≤500) and iPad portrait (820+),
so Recent Transactions and other cards center within the page.
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 501px) and (max-width: 819px) {
/* Recent Transactions — if its charts-row has the chart sibling hidden
via .mobile-hide, span the full row so it centers in the page. */
html body #page-dashboard .charts-row .chart-card:has(.txn-list) {
grid-column: 1 / -1 !important;
width: 100% !important;
}
/* KPI cards: 2×2 grid at this size (too narrow for 4-across) */
html body #page-dashboard .cards-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
/* Analytics: stacked single-column cards at landscape-phone widths too,
otherwise chart-card's flex:1 1 0 collapses them to zero. */
html body #page-analytics.active {
display: flex !important;
flex-direction: column !important;
overflow-y: auto !important;
gap: 12px !important;
padding: 12px 14px !important;
}
html body #page-analytics .analytics-grid {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
grid-auto-rows: auto !important;
flex: 0 0 auto !important;
height: auto !important;
}
html body #page-analytics .analytics-grid .chart-card {
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
grid-column: 1 / -1 !important;
width: 100% !important;
}
html body #page-analytics .chart-body {
height: 280px !important;
min-height: 280px !important;
flex: 0 0 280px !important;
position: relative !important;
}
html body #page-analytics .chart-body > canvas {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
html body #page-analytics .adeep-kpis {
grid-template-columns: 1fr 1fr !important;
}
html body #page-analytics .adeep-scroll { max-height: 300px !important; }
}
/* ═══════════════════════════════════════════════════════════════════
PHONE KPI SAFETY-NET — force 2×2 KPI grid on every phone width,
regardless of reported orientation (some DevTools device profiles
don't set orientation media feature). Overrides the older
@media (max-width:640px) .cards-grid { 1fr !important } rule.
Also force ALL 4 cards to be visible (no hide rules can win).
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 500px) {
html body #page-dashboard.active .cards-grid,
html body #page-dashboard .cards-grid,
html body .cards-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
grid-auto-rows: min-content !important;
gap: 8px !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
/* Every KPI card must render, full display, auto grid placement */
html body #page-dashboard .cards-grid > .card,
html body .cards-grid > .card--blue,
html body .cards-grid > .card--green,
html body .cards-grid > .card--red,
html body .cards-grid > .card--purple {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
min-width: 0 !important;
width: auto !important;
height: auto !important;
min-height: 90px !important;
grid-column: auto !important;
grid-row: auto !important;
position: relative !important; /* keep ::before blob contained */
overflow: hidden !important; /* clip the decorative blob */
transform: none !important;
}
/* Kill the decorative ::before blob on KPI cards at phone widths
so it can't bleed anywhere even if a parent clips poorly. */
html body .cards-grid > .card::before {
display: none !important;
content: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
PHONE PORTRAIT — 320px to 500px, portrait only.
Covers every current smartphone:
• iPhone SE (375), iPhone 13 mini (375)
• iPhone 13/14/15 (390), 15 Pro (393)
• iPhone 14/15 Plus + Pro Max (428–430)
• Google Pixel 7/8 (412), Pixel 8 Pro (448), Pixel 10 XL (~430-460)
• Galaxy S23/S24 (360), S23 Ultra (412), Z Fold folded (344)
• Old iPhone 5/SE1 (320) — safety floor
Strategy: remove the 4 big charts (no room for them to be useful),
keep the "detailed work" cards — KPI summary + Money Coach.
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 320px) and (max-width: 500px) and (orientation: portrait) {
/* ─── Topbar: every control the same height (36px) so they all
sit on one visual line with even breathing room top + bottom. */
.topbar,
.main > .topbar,
header.topbar {
padding: 14px 14px !important;
gap: 10px !important;
min-height: 64px !important;
height: 64px !important;
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
box-sizing: border-box !important;
}
.topbar .menu-btn {
flex: 0 0 auto !important;
width: 36px !important;
height: 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.topbar h1,
.topbar .page-title,
.topbar .topbar-title {
font-size: .72rem !important;
font-weight: 700 !important;
line-height: 36px !important;
height: 36px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
letter-spacing: -0.01em !important;
}
.topbar .demo-pill,
.topbar [class*="demo"] {
display: none !important;
}
/* Hide Add Bank / Investment / Crypto connect buttons from the topbar
on phones — they eat horizontal room and the same actions are
reachable from the sidebar + each respective page. */
.topbar #topConnectBtn,
.topbar .btn-connect-top,
.topbar .add-bank-btn,
.topbar [id*="AddBank"],
.topbar [id*="addBank"],
.topbar button[class*="add-bank"],
.topbar button[class*="connect-top"],
.topbar #invConnectBtn,
.topbar #cryptoConnectExchangeBtn,
.topbar #cryptoConnectWalletBtn,
.topbar [id*="invConnect"],
.topbar [id*="cryptoConnect"],
#topConnectBtn,
.btn-connect-top {
display: none !important;
visibility: hidden !important;
width: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* Refresh: rounded-square (not circle) — intentionally different
shape from the round AI orb so the two don't look like twins. */
.topbar .refresh-btn,
.topbar [id*="efresh"] {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
flex: 0 0 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 8px !important;
padding: 0 !important;
aspect-ratio: auto !important;
box-sizing: border-box !important;
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
color: #cbd5e1 !important;
transition: background .15s ease, border-color .15s ease, transform .12s ease !important;
}
.topbar .refresh-btn:hover,
.topbar [id*="efresh"]:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.18) !important;
}
.topbar .refresh-btn:active,
.topbar [id*="efresh"]:active {
transform: scale(0.96) !important;
}
.topbar .refresh-btn svg,
.topbar .refresh-btn img,
.topbar [id*="efresh"] svg,
.topbar [id*="efresh"] img {
width: 15px !important;
height: 15px !important;
display: block !important;
}
.topbar .refresh-btn svg path,
.topbar .refresh-btn svg circle,
.topbar .refresh-btn svg line,
.topbar [id*="efresh"] svg path {
stroke: #cbd5e1 !important;
}
/* AI orb: larger circle, visually distinct from refresh */
.topbar .ai-orb,
.topbar .ai-orb-btn,
.topbar #aiOrb,
.topbar [class*="ai-orb"] {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
flex: 0 0 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
padding: 0 !important;
aspect-ratio: 1 / 1 !important;
box-sizing: border-box !important;
}
.topbar .ai-orb-btn svg,
.topbar .ai-orb svg,
.topbar #aiOrb svg,
.topbar [class*="ai-orb"] svg {
width: 20px !important;
height: 20px !important;
}
/* AI orb glow: keep the full desktop treatment on phones too so the
logo looks identical across devices (user requested parity with
the 27-inch reference). Previously this block killed the outer
aura (::after) and shrunk the conic ring on mobile — we now let
the base rules in the orb block (lines ~595-639) apply as-is. */
/* ─── Filters: smaller, with breathing room from the topbar.
Markup is .filter-card--sleek > .filter-row > selects + button. */
#page-dashboard .filter-card--sleek,
#page-dashboard .filter-card {
padding: 6px 8px !important;
margin: 14px 0 10px !important;
flex: 0 0 auto !important;
}
#page-dashboard .filter-card--sleek .filter-row,
#page-dashboard .filter-card .filter-row,
#page-dashboard .filter-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 8px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
padding: 2px !important;
margin: 0 !important;
scrollbar-width: none !important;
width: 100% !important;
}
#page-dashboard .filter-row::-webkit-scrollbar { display: none !important; }
#page-dashboard .filter-row > *,
#page-dashboard .filter-row .sleek-select,
#page-dashboard .filter-row .sleek-btn,
#page-dashboard .filter-row select,
#page-dashboard .filter-row button {
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
font-size: .7rem !important;
padding: 4px 6px !important;
height: 30px !important;
line-height: 1.1 !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
}
/* Reset button hidden on phones — the three dropdowns each have
their own "All ..." option which already resets that filter. */
#page-dashboard .filter-row .sleek-btn,
#page-dashboard .filter-row #ddReset {
display: none !important;
}
/* ─── Dashboard page: scrollable, content-height, footer at bottom ─ */
#page-dashboard.active {
overflow-y: auto !important;
overflow-x: hidden !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
flex: 1 1 auto !important;
padding: 10px 12px 16px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
box-sizing: border-box !important;
-webkit-overflow-scrolling: touch !important;
touch-action: pan-y !important;
overscroll-behavior: contain !important;
}
/* ─── KPI cards: 2×2 grid. Max specificity to override the
@media (max-width:640px) .cards-grid { 1fr !important } rule. ─── */
body #page-dashboard.active .cards-grid,
body #page-dashboard .cards-grid,
html body .cards-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
margin: 0 !important;
flex: 0 0 auto !important;
width: 100% !important;
}
#page-dashboard .cards-grid .card {
padding: 10px 12px !important;
min-width: 0 !important;
}
#page-dashboard .cards-grid .card-value {
font-size: 1.05rem !important;
line-height: 1.1 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#page-dashboard .cards-grid .card-label {
font-size: .58rem !important;
letter-spacing: .05em !important;
}
#page-dashboard .cards-grid .card-sub {
font-size: .64rem !important;
}
#page-dashboard .cards-grid .card-icon {
width: 22px !important;
height: 22px !important;
}
/* ─── Money Coach: single-column stack, ALL cards same height ─── */
#page-dashboard .mc-grid,
#page-dashboard .money-coach-row,
#page-dashboard .mc-row {
display: grid !important;
grid-template-columns: 1fr !important;
grid-auto-rows: 230px !important;
gap: 10px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
flex: 0 0 auto !important;
align-items: stretch !important;
}
#page-dashboard .mc-grid .mc-card {
height: 230px !important;
min-height: 230px !important;
max-height: 230px !important;
padding: 12px 14px !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Subscription ROI: cap visible rows to 2 so the card doesn't overflow */
#page-dashboard .mc-grid .mc-sub-list {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden !important;
}
#page-dashboard .mc-grid .mc-sub-list > *:nth-child(n+3) {
display: none !important;
}
#page-dashboard .mc-card .mc-body {
flex: 0 0 auto !important;
gap: 4px !important;
}
#page-dashboard .mc-burn-big {
font-size: 1.7rem !important;
line-height: 1 !important;
}
#page-dashboard .mc-card .mc-tip,
#page-dashboard .mc-card .mc-dig-tip,
#page-dashboard .mc-card #mcDigTip,
#page-dashboard .mc-card [class*="tip-box"],
#page-dashboard .mc-card .mc-weekly-tip { display: none !important; }
/* ─── Charts: hide the chart-cards (Balance Trend, Expense Breakdown,
Monthly Income/Expenses) but KEEP Recent Transactions, which reads
fine as a narrow list. ──────────────────────────────────────── */
#page-dashboard .charts-row {
display: block !important;
flex: 0 0 auto !important;
margin: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
grid-template-columns: 1fr !important;
overflow: visible !important;
}
/* Hide every chart card that contains a