/* Ezzo Budget - v2.7 "Onboarding & Upgrade" (2026-07-01) Change set vs v1.0 "Baseline": - All native browser confirm()/alert() popups replaced with in-app glass dialogs (confirmDialog / alertDialog) - mobile-friendly. - UBP: duplicated init()/applyLayout() collapsed into one; recurring engine restored and init now runs exactly once. */ /* ===================================================================== Ezzo Budget - Design System Built on the Polish Mastery design language: glassmorphism, animated gradient backdrop, Sora + Inter, indigo/purple/pink palette. ===================================================================== */ /* ── Design tokens ───────────────────────────────────────────────────── */ :root { /* Theme-swappable typefaces: --font-display carries headings & big numerals (Sora by default), --font-body everything else (Inter). Vintage Ledger and Terminal override these to match their look. */ --font-body: 'Inter', system-ui, sans-serif; --font-display: 'Sora', 'Inter', system-ui, sans-serif; /* Brand gradient stops */ --grad-indigo: #4f46e5; --grad-indigo-rgb: 79,70,229; --grad-purple: #9333ea; --grad-pink: #ec4899; --grad-orange: #fb923c; /* Glass surfaces */ --surface: rgba(255, 255, 255, 0.68); --surface-strong: rgba(255, 255, 255, 0.88); --surface-solid: #ffffff; --border-soft: rgba(255, 255, 255, 0.55); --border-faint: rgba(30, 27, 46, 0.09); /* Typography */ --text-primary: #1e1b2e; --text-secondary: #6b6478; --text-faint: #9d97ab; --text-on-grad: #ffffff; /* Semantic / financial */ --income: #10b981; --income-bg: rgba(16, 185, 129, 0.10); --expense: #f43f5e; --expense-bg: rgba(244, 63, 94, 0.10); --bill: #fb923c; --bill-bg: rgba(251, 146, 60, 0.10); --debt: #a855f7; --debt-bg: rgba(168, 85, 247, 0.10); --savings: #3b82f6; --savings-bg: rgba(59, 130, 246, 0.10); /* Aliases for legacy compat */ --success: #10b981; --success-bg: rgba(16, 185, 129, 0.10); --error: #f43f5e; --error-bg: rgba(244, 63, 94, 0.10); /* Shape & motion */ --radius-lg: 26px; --radius-md: 18px; --radius-sm: 12px; --radius-pill: 999px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --shadow-card: 0 20px 60px -20px rgba(76, 29, 149, 0.22), 0 2px 8px rgba(76, 29, 149, 0.06); --shadow-pop: 0 12px 32px -8px rgba(76, 29, 149, 0.32); } /* ── Reset ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } /* Ensure [hidden] always wins over any display: value in CSS classes */ [hidden] { display: none !important; } body { font-family: var(--font-body); color: var(--text-primary); -webkit-font-smoothing: antialiased; /* clip (not hidden) prevents horizontal scroll WITHOUT making a scroll container - hidden would force overflow-y:auto and trap the sticky top nav (position:sticky needs the viewport as its scroller). */ overflow-x: clip; } h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; } button { font-family: inherit; cursor: pointer; } p { margin: 0; } :focus-visible { outline: 3px solid #6366f1; outline-offset: 3px; border-radius: 8px; } /* ── Animated backdrop ───────────────────────────────────────────────── */ .backdrop { position: fixed; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 0%, #f7f3ff 0%, #efe9fb 45%, #ebe4f6 100%); overflow: hidden; } /* Soft top sheen so panels emerge from light instead of a flat wash (scoped to the light theme - each dark theme defines its own) */ [data-theme="light"] .backdrop::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 42%; background: linear-gradient(180deg, rgba(255,255,255,.55), transparent); pointer-events: none; } .blob { position: absolute; border-radius: 50%; filter: blur(84px); opacity: 0.82; will-change: transform; } .blob-a { width: 60vmax; height: 60vmax; top: -20vmax; left: -15vmax; background: radial-gradient(circle at 30% 30%, #6157ee, transparent 70%); animation: drift-a 26s var(--ease) infinite alternate; } .blob-b { width: 55vmax; height: 55vmax; top: 10vmax; right: -20vmax; background: radial-gradient(circle at 60% 40%, #f065ab, transparent 70%); animation: drift-b 32s var(--ease) infinite alternate; } .blob-c { width: 50vmax; height: 50vmax; bottom: -22vmax; left: 20vmax; background: radial-gradient(circle at 50% 50%, #fca75c, transparent 70%); opacity: 0.5; animation: drift-c 38s var(--ease) infinite alternate; } @keyframes drift-a { from { transform: translate(0,0) scale(1); } to { transform: translate(6vmax,8vmax) scale(1.08); } } @keyframes drift-b { from { transform: translate(0,0) scale(1); } to { transform: translate(-7vmax,5vmax) scale(1.05); } } @keyframes drift-c { from { transform: translate(0,0) scale(1); } to { transform: translate(4vmax,-6vmax) scale(1.1); } } @media (prefers-reduced-motion: reduce) { .blob { animation: none !important; } } /* ── Layout shell ────────────────────────────────────────────────────── */ .app { max-width: 1122px; margin: 0 auto; padding: 28px 24px 80px; min-height: 100vh; } @keyframes fade-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } /* ── Views (top-level: hub / budget tool) ────────────────────────────── */ .view { display: none; } .view.is-active { display: block; animation: fade-in 0.3s var(--ease); } /* ── Topbar ──────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; } /* Wordmark */ .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 19px; display: flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none; } .wordmark-sm { font-size: 16px; } .wordmark-icon { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-pink)); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); } .wordmark-icon-sm { width: 26px; height: 26px; border-radius: 7px; } .topbar-tagline { font-size: 13px; font-weight: 500; color: var(--text-faint); } /* Tool topbar extras */ .tool-topbar { padding-bottom: 6px; } .tool-topbar-left { display: flex; align-items: center; gap: 8px; } .tool-topbar-right { display: flex; align-items: center; gap: 8px; } .btn-back { appearance: none; border: 1px solid var(--border-faint); background: var(--surface-strong); padding: 8px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; transition: color .15s, background .15s; } .btn-back:hover { color: var(--text-primary); background: rgba(255,255,255,.96); } /* Round icon-only back button */ .btn-back-round { appearance: none; border: 1px solid var(--border-faint); background: var(--surface-strong); width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); flex-shrink: 0; transition: color .15s, background .15s; } .btn-back-round:hover { color: var(--grad-indigo); background: rgba(99,102,241,.08); } a.btn-back-round { text-decoration: none; } .btn-icon { appearance: none; border: 1px solid var(--border-faint); background: var(--surface-strong); width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); cursor: pointer; transition: color .15s, background .15s; } .btn-icon:hover { color: var(--grad-indigo); } /* ── Budget tabs ─────────────────────────────────────────────────────── */ .budget-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 4px 0 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .budget-tabs::-webkit-scrollbar { display: none; } /* ── App shell: empty nav region + separately-scrolling content ───────── The tool view is a fixed, viewport-tall shell split into two stacked regions: the nav (topbar + tabs) on top, and the content below in its own scroll region. Because they are SEPARATE regions - not overlapping layers - the nav paints nothing at all: it has no background, no blur, no fill, so the live animated .backdrop shows straight through it and it is truly invisible. Content lives only in the scroll region, clipped by its own overflow, so it can never render behind the nav. A soft mask at the very top of the scroll region dissolves content as it scrolls up to meet the nav (the "invisible masked shade"). Nothing ever needs to occlude the content because it is simply never in the nav's space. */ .tool-shell { position: fixed; inset: 0; z-index: 5; max-width: 1122px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; } .app.tool-shell { padding: 0; } /* beat responsive .app padding */ .view.tool-shell.is-active { display: flex; } /* SBP: active tool view is the shell */ .view.tool-shell:not(.is-active) { display: none; } .tool-shell .tool-sticky { flex: 0 0 auto; position: static; background: none; margin: 0; padding: 28px 24px 4px; } .tool-shell .app-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 24px 48px; background: none; border: none; /* no fill, no edge - fully transparent */ scrollbar-width: none; /* Firefox: no visible scrollbar */ -ms-overflow-style: none; /* legacy Edge */ } /* .panel/.scard normally use backdrop-filter:blur() for a frosted-glass look, which is fine over the hub page's large, sparsely-spaced .tool-card - but here the cards run near edge-to-edge against a vividly colored animated backdrop, and the blur samples that color from just outside each card, smearing it into a glowing rim right at the border. Dropping the blur keeps the same transparent surface color without that halo, everywhere in the scrollable dashboard content. box-shadow is the same story one layer down - --shadow-card is an explicitly colored shadow (e.g. a vivid pink in Synthwave), not a neutral drop shadow, so it reads as its own glow around every card regardless of the blur fix. */ .tool-shell .app-scroll .panel, .tool-shell .app-scroll .scard, .tool-shell .app-scroll .pro-stat { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } /* WebKit/Blink: no visible scrollbar (still scrolls, still wheel/touch/keys) */ .tool-shell .app-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Fade ONLY while scrolled: content dissolves as it scrolls up under the nav. At rest (.is-scrolled absent) there is no mask at all, so the top content is fully crisp and the region is completely transparent. */ .tool-shell .app-scroll.is-scrolled { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px); mask-image: linear-gradient(to bottom, transparent 0, #000 26px); } @media (max-width: 700px) { .tool-shell .tool-sticky { padding: 16px 16px 4px; } .tool-shell .app-scroll { padding: 0 16px 48px; } } .btab { appearance: none; border: 1px solid var(--border-faint); background: var(--surface-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 9px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; flex: 1 1 auto; font-family: inherit; position: relative; transition: transform .22s var(--ease), box-shadow .22s var(--ease), color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .btab::after { content:''; position:absolute; left:50%; right:50%; bottom:5px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--grad-indigo),var(--grad-purple)); transition:left .28s var(--ease), right .28s var(--ease); } .btab:hover:not(.is-active) { color: var(--text-primary); transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(99,102,241,.42); border-color: rgba(99,102,241,.4); } .btab:hover:not(.is-active)::after { left: 15px; right: 15px; } .btab.is-active::after { display: none; } .btab.is-active { background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple)); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.30); } .bview { display: none; } .bview.is-active { display: block; animation: fade-in 0.25s var(--ease); } /* ── Glass panel / card ──────────────────────────────────────────────── */ .panel { background: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .panel-inner { padding: 28px; } .panel-inner-sm { padding: 20px 24px; } .panel-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; } .panel-title-sm { font-size: 14px; font-weight: 700; color: var(--text-primary); } .panel-titlebar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } /* ── Buttons ─────────────────────────────────────────────────────────── */ .btn { appearance: none; border: none; font-family: inherit; font-weight: 700; font-size: 14px; letter-spacing: .01em; border-radius: var(--radius-pill); padding: 12px 22px; transition: transform .15s var(--ease), box-shadow .15s var(--ease); display: inline-flex; align-items: center; gap: 6px; } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); color: #fff; box-shadow: var(--shadow-pop); } .btn-primary:hover { box-shadow: 0 16px 36px -8px rgba(76,29,149,.48); transform: translateY(-1px); } .btn-ghost { background: var(--surface-strong); border: 1px solid var(--border-faint); color: var(--text-secondary); } .btn-ghost:hover { color: var(--text-primary); } .btn-ghost:disabled { opacity: .5; cursor: not-allowed; } .btn-danger { background: linear-gradient(135deg, #f43f5e, #e11d48); color: #fff; box-shadow: 0 8px 20px rgba(244,63,94,.28); } .btn-danger:hover { box-shadow: 0 12px 28px rgba(244,63,94,.4); transform: translateY(-1px); } .btn-secondary { background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple)); color: #fff; box-shadow: 0 4px 14px rgba(99,102,241,.28); } .btn-secondary:hover { box-shadow: 0 8px 22px rgba(99,102,241,.42); transform: translateY(-1px); } .btn-sm { padding: 8px 16px; font-size: 13px; } .btn-lg { padding: 16px 28px; font-size: 15px; } .btn-block { width: 100%; justify-content: center; } .link-btn { appearance: none; border: none; background: transparent; color: var(--grad-indigo); font-weight: 600; font-size: 13px; padding: 0; font-family: inherit; text-decoration: underline; text-underline-offset: 2px; } .link-btn:hover { color: var(--grad-purple); } /* ── Form controls ───────────────────────────────────────────────────── */ .field { margin-bottom: 16px; } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 7px; } /* "Tiny helper" field-info pattern: a small "?" always to the right of the label, truncating the label text with an ellipsis instead of wrapping to a 2nd line. */ .field-label--tip { display: flex; align-items: center; gap: 5px; } .field-label--tip .cc-label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .field-label--tip .required-star { flex-shrink: 0; } .field-label--tip .cc-info, .module-table th .cc-info { margin: 0 0 0 1px; flex-shrink: 0; background: var(--surface-strong); border: 1px solid var(--border-faint); color: var(--text-secondary); font-family: inherit; font-style: normal; font-weight: 500; font-size: 11px; box-shadow: none; } .field-label--tip .cc-info:hover, .field-label--tip .cc-info:focus-visible, .module-table th .cc-info:hover, .module-table th .cc-info:focus-visible { background: var(--surface-strong); color: var(--grad-indigo); border-color: var(--grad-indigo); transform: scale(1.08); box-shadow: none; } .select, .input { width: 100%; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text-primary); background: var(--surface-strong); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); padding: 11px 14px; appearance: none; transition: border-color .15s, box-shadow .15s; } .input:read-only { opacity: .65; cursor: not-allowed; } .select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .select:focus, .input:focus { outline: none; border-color: var(--grad-purple); box-shadow: 0 0 0 3px rgba(147,51,234,.15); } .select-sm { font-size: 13px; padding: 8px 32px 8px 12px; } .input-sm { font-size: 13px; padding: 8px 12px; } /* ── Badges ──────────────────────────────────────────────────────────── */ .badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pill); } .badge-live { background: var(--income-bg); color: var(--income); } .badge-soon { background: rgba(107,100,120,.1); color: var(--text-faint); } .badge-price { background: rgba(147,51,234,.12); color: #fff; font-size: 15px; padding: 4px 12px; } .tool-card-top .badge { flex-shrink: 0; white-space: nowrap; } /* ── Section header ──────────────────────────────────────────────────── */ .section-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .section-title { font-size: 20px; font-weight: 700; flex: 1; } .section-header-actions { display: flex; align-items: center; gap: 8px; } .section-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 18px; } .btn-help-sm { appearance: none; border: 1px solid var(--border-faint); background: var(--surface-strong); padding: 6px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; color: var(--text-secondary); transition: color .15s; font-family: inherit; } .btn-help-sm:hover { color: var(--grad-indigo); } .period-badge { font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--surface-strong); border: 1px solid var(--border-faint); padding: 5px 12px; border-radius: var(--radius-pill); } /* ═══════════════════════════════════════════════════════════════ HUB ═══════════════════════════════════════════════════════════════ */ .hub-hero { text-align: center; padding: 52px 20px 44px; } .hub-title { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: var(--text-primary); margin-bottom: 16px; } .grad-text { background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 50%, var(--grad-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hub-sub { font-size: 15px; color: var(--text-secondary); max-width: 680px; margin: 0 auto; line-height: 1.75; } /* home.html (Ezzo Hub landing page) intentionally does NOT reuse this hub's layout - it has its own bespoke component CSS inline in its own , so it reads as a distinct page rather than an extension of this one. a.btn stays here since it's a genuinely shared fix (anchors styled as .btn need the underline removed, same as everywhere else this class is used). */ a.btn { text-decoration: none; } .tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 880px; margin: 0 auto; } .tool-card-wrap { position: relative; } .tool-card-popular-pill { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; white-space: nowrap; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-pink)); color: #fff; } .tool-card { border-radius: var(--radius-lg); background: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-card); transition: transform .25s var(--ease), box-shadow .25s var(--ease); position: relative; overflow: hidden; container-type: inline-size; height: 100%; } .tool-card.is-live { cursor: default; } .tool-card.is-live:hover { transform: translateY(-5px); box-shadow: var(--shadow-pop); } /* Gradient top accent stripe */ .tool-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.6px; } .tool-card--indigo::before { background: linear-gradient(90deg, #6366f1, #c026d3); } .tool-card--pink::before { background: linear-gradient(90deg, #ec4899, #f43f5e); background-size: 200% 100%; transition: background-position .6s ease; } .tool-card--pink:hover::before { animation: ubp-shimmer 1.5s ease infinite; } @keyframes ubp-shimmer { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } .tool-card--pink::before { background: linear-gradient(90deg, #ec4899, #a855f7, #6366f1, #ec4899); background-size: 300% 100%; } .tool-card--orange .tool-card-inner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.6px; z-index: 1; background: linear-gradient(90deg, #fb923c, #eab308); box-shadow: 0 0 14px 1px rgba(251,146,60,.65); } [data-theme="dark"] .tool-card--orange { background: linear-gradient(180deg, rgba(33,48,138,.8) 0%, rgba(23,26,68,.8) 35%, rgba(19,15,44,.8) 70%, rgba(14,8,32,.8) 100%); } [data-theme="dark"] .tool-card--orange::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% -15%, rgba(251,146,60,.4), transparent 60%); } [data-theme="dark"] .tool-card--indigo { background: linear-gradient(180deg, rgba(33,48,138,.8) 0%, rgba(23,26,68,.8) 35%, rgba(19,15,44,.8) 70%, rgba(14,8,32,.8) 100%); } [data-theme="dark"] .tool-card--indigo::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% -15%, rgba(99,102,241,.35), transparent 60%); } .tool-card--green::before { background: linear-gradient(90deg, #10b981, #06b6d4); } .tool-card-inner { padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; height: 100%; position: relative; z-index: 1; } .tool-card-top { display: flex; align-items: center; gap: 10px; } .tool-card-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; } .tool-card-name { font-family: var(--font-display); font-size: clamp(10px, 3.1cqw, 15.5px); font-weight: 700; color: var(--text-primary); margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tool-card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.65; flex: 1; margin: 0; } .tool-card-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .tool-card-btns { display: flex; gap: 8px; } .tool-card-btns .btn { flex: 1; justify-content: center; margin-top: 0; } .tool-buy-btn { background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); color: #fff; border: none; box-shadow: var(--shadow-pop); } .tool-buy-btn:hover { box-shadow: 0 16px 36px -8px rgba(76,29,149,.48); transform: translateY(-1px); } .tool-open-btn { background: var(--surface-strong); color: var(--text-secondary); border: 1px solid #60a5fa; box-shadow: none; } .tool-open-btn:hover { color: var(--text-primary); } .tool-try-link { display: block; text-align: center; margin-top: 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--text-secondary); text-decoration: none; cursor: pointer; transition: color .15s; } .tool-try-link:hover { color: var(--accent); text-decoration: underline; } /* ═══════════════════════════════════════════════════════════════ BUDGET ALLOCATION ═══════════════════════════════════════════════════════════════ */ .alloc-panel { margin-bottom: 16px; } .alloc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 6px; } .alloc-income-base { font-size: 11px; color: var(--text-faint); } .alloc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .alloc-card { background: rgba(0,0,0,.045); border: 1px solid var(--border-faint); border-radius: var(--radius-md); padding: 16px 14px; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .alloc-card-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 6px; margin-bottom: 4px; } .alloc-card-name { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); min-width: 0; } .alloc-target-badge { font-size: 10px; font-weight: 600; color: var(--text-faint); background: var(--glass); border-radius: 99px; padding: 2px 7px; white-space: nowrap; } .alloc-pct-big { font-size: 2.2rem; font-weight: 800; font-family: var(--font-display); line-height: 1; letter-spacing: -0.02em; } .alloc-amount { font-size: 12px; color: var(--text-secondary); font-weight: 600; } .alloc-strip-wrap { height: 4px; background: rgba(30,27,46,.18); border-radius: 99px; overflow: hidden; margin: 6px 0 2px; } .alloc-strip { height: 100%; border-radius: 99px; transition: width .5s var(--ease); } .alloc-status { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* progress bar row with fill % on the right (issue 18) */ .alloc-bar-row { display: flex; align-items: center; gap: 8px; } .alloc-bar-row .alloc-strip-wrap { flex: 1; margin: 0; } .alloc-fill-pct { font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0; min-width: 32px; text-align: right; } /* savings auto-tag badge (issue 14) */ .alloc-auto-tag-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--glass); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); padding: 6px 10px; } .alloc-untagged { font-size: 11px; color: var(--text-faint); margin-top: 12px; text-align: center; } [data-theme="dark"] .alloc-strip-wrap { background: rgba(var(--grad-indigo-rgb),.30); } /* allocation badge in transaction table */ .alloc-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; white-space: nowrap; } .alloc-badge--unset { background: rgba(148,163,184,.12); color: var(--text-faint); border: 1px solid rgba(148,163,184,.2); } /* field validation error state */ .select--error { border-color: #f43f5e !important; box-shadow: 0 0 0 3px rgba(244,63,94,.14) !important; } .field-error-msg { display: block; font-size: 11px; font-weight: 600; color: #f43f5e; margin-top: 4px; } .required-star { color: #f43f5e; margin-left: 2px; font-size: 12px; } /* allocation settings */ .alloc-sett-toggle { margin: 10px 0 4px; } .alloc-bucket-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .alloc-bucket-row { display: flex; align-items: center; gap: 10px; } .alloc-color-swatch { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; border: 1px solid var(--border); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); transition: transform .12s; } .alloc-color-swatch:hover { transform: scale(1.08); } .alloc-name-inp { flex: 1; min-width: 0; } .alloc-pct-field { flex: 0 0 84px; display: flex; align-items: center; gap: 5px; } .alloc-pct-inp { flex: 1; min-width: 0; -webkit-appearance: none; -moz-appearance: textfield; appearance: none; border: 1px solid var(--border); background: var(--surface-strong); border-radius: var(--radius-sm); padding: 8px 8px; font-size: 13px; font-weight: 600; font-family: inherit; color: var(--text-primary); text-align: center; } .alloc-pct-inp::-webkit-outer-spin-button, .alloc-pct-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .alloc-pct-inp:focus { outline: none; border-color: var(--grad-purple); box-shadow: 0 0 0 3px rgba(99,102,241,.13); } .alloc-pct-sign { font-size: 13px; font-weight: 600; color: var(--text-faint); flex-shrink: 0; pointer-events: none; } .alloc-remove-btn { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-faint); background: var(--surface-strong); color: var(--text-faint); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: all .15s; } .alloc-remove-btn:hover { color: #f43f5e; border-color: #f43f5e; } .alloc-remove-spacer { width: 30px; flex-shrink: 0; } .alloc-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .alloc-total { font-size: 13px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; } .alloc-total strong { font-family: var(--font-display); } .alloc-total.is-ok strong { color: #10b981; } .alloc-total.is-bad strong { color: #f43f5e; } [data-theme="dark"] .alloc-card { background: rgba(0,0,0,.24); } .summary-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; } .scard { background: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 18px 16px; position: relative; overflow: hidden; } .scard::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; } .scard--income::after { background: linear-gradient(90deg, #10b981, #06b6d4); } .scard--expenses::after{ background: linear-gradient(90deg, #f43f5e, #fb923c); } .scard--debt::after { background: linear-gradient(90deg, #a855f7, #c026d3); } .scard--savings::after { background: linear-gradient(90deg, #3b82f6, #6366f1); } .scard-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; } .scard-value { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; word-break: break-all; } .scard-sub { font-size: 11px; color: var(--text-faint); } /* Leftover strip */ .leftover-panel { margin-bottom: 14px; } .leftover-inner { padding: 20px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .leftover-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 5px; } .leftover-value { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; } .leftover-rollover { font-size: 11px; color: var(--text-faint); margin-top: 4px; } .leftover-formula { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .lf-chip { display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; } .lf-income { background: var(--income-bg); color: var(--income); } .lf-expense { background: var(--expense-bg); color: var(--expense); } .lf-debt { background: var(--debt-bg); color: var(--debt); } .lf-savings { background: var(--savings-bg); color: var(--savings); } .lf-rollover { background: var(--bill-bg); color: var(--bill); } .lf-sep { color: var(--text-faint); font-weight: 600; font-size: 13px; } /* Dashboard grid */ .dashboard-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; } .cash-flow-panel .panel-inner-sm { padding: 20px 22px; } .flow-legend { display: flex; align-items: center; gap: 12px; } .legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-secondary); } .legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .flow-table { display: flex; flex-direction: column; } .flow-row { display: flex; flex-direction: column; gap: 6px; justify-content: center; padding: 9px 0; min-height: 49px; border-bottom: 1px solid var(--border-faint); } .flow-row:last-child { border-bottom: none; } .flow-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .flow-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flow-bars { display: flex; flex-direction: column; justify-content: center; } .flow-bar-wrap { width: 100%; height: 10px; background: rgba(30,27,46,.06); border-radius: var(--radius-pill); overflow: hidden; } .flow-bar { height: 100%; border-radius: var(--radius-pill); transition: width .5s var(--ease); } .flow-bar--exp { background: rgba(30,27,46,.18); } .flow-amounts { text-align: right; font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0; } /* .flow-amt: kept for Ezzo's own flow-row chart markup (penny.js) - the dashboard's own amounts no longer use it, but her chat-bubble charts still render
. */ .flow-amt { font-size: 11px; font-weight: 600; } .flow-amt--exp { color: var(--text-faint); font-weight: 500; } /* Charts */ .charts-col { display: flex; flex-direction: column; gap: 12px; height: 100%; } .charts-col > .panel { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* When a .chart-panel sits directly in the dashboard grid (Layout 2's 2x2 arrangement) instead of inside .charts-col, it still needs to be a flex column itself so its grid-stretched height reaches .panel-inner-sm and .hbar-scroll below. */ .dashboard-grid > .chart-panel { display: flex; flex-direction: column; } .chart-panel .panel-inner-sm { flex: 1; display: flex; flex-direction: column; } .chart-panel .donut-block { flex: 1; } .chart-panel .chart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; } .chart-panel .panel-inner-sm { padding: 18px 20px; } .chart-empty { text-align: center; font-size: 13px; color: var(--text-secondary); padding: 20px 0 10px; line-height: 1.85; } .donut-block { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .donut-legend { flex: 1; min-width: 0; } .dleg-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; cursor: pointer; border-radius: 6px; transition: background .15s; } .dleg-row:hover, .dleg-row.is-active { background: rgba(99,102,241,.08); } [data-theme="dark"] .dleg-row:hover, [data-theme="dark"] .dleg-row.is-active { background: rgba(var(--grad-indigo-rgb),.1); } .dleg-swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .dleg-label { flex: 1; font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dleg-pct { font-size: 11px; font-weight: 700; color: var(--text-primary); } /* Cash Flow ring legend (Layout 2): label on its own line, actual/expected below it - reads more clearly than cramming both onto one line, and matches Classic's Cash Flow row convention (label above its bar). */ .dleg-row--stacked { align-items: flex-start; padding: 5px 0; } .dleg-row--stacked .dleg-swatch { margin-top: 4px; } .dleg-row--stacked .dleg-stack { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .dleg-row--stacked .dleg-label { font-size: 12.5px; font-weight: 700; color: var(--text-primary); white-space: normal; } .dleg-row--stacked .dleg-pct { font-size: 12px; } /* ── Shared chart primitives (Dashboard Layouts 2-5, charts.js) ──────── */ .chart-tooltip { position: fixed; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .12s; background: var(--surface-solid); border: 1px solid var(--border-soft); border-radius: 8px; padding: 7px 10px; font-size: 12px; line-height: 1.5; color: var(--text-primary); box-shadow: var(--shadow-pop); max-width: 240px; } /* The Daily Spend breakdown tooltip needs more room than a short "label: $x" line - full, untruncated category names should be free to push it wider (up to this larger cap) rather than fighting the shared tooltip's normal 240px ceiling. */ .chart-tooltip:has(.spend-tip-breakdown) { max-width: 320px; } /* Daily Spend hover tooltip: date/total header, then a clean per- transaction breakdown (Type / Category / Amount). */ .spend-tip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-weight: 700; } .spend-tip-total { color: var(--grad-pink); } .spend-tip-breakdown { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-faint); } .spend-tip-row { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; } .spend-tip-type { margin-top: 1px; } .spend-tip-type { flex-shrink: 0; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); background: var(--surface-strong); border-radius: 4px; padding: 2px 5px; } /* No truncation - the full category name should always be readable, so the tooltip (and this row) grow to fit it rather than ellipsizing. */ .spend-tip-cat { flex: 1; min-width: 0; color: var(--text-secondary); word-break: break-word; } .spend-tip-amt { flex-shrink: 0; font-weight: 600; } .spend-tip-more { font-size: 10.5px; color: var(--text-faint); text-align: center; margin-top: 2px; } .icon-stat-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface-strong); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); } .ist-icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; } .ist-body { min-width: 0; } .ist-label { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-secondary); } .ist-label .cc-info { width: 14px; height: 14px; font-size: 8.5px; margin-right: 0; text-transform: none; letter-spacing: normal; flex-shrink: 0; } .ist-value { font-size: 19px; font-weight: 800; font-family: var(--font-display); line-height: 1.3; } .ist-sub { font-size: 11px; color: var(--text-faint); } .chart-hero-panel { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 22px 20px; } .chart-hero-label { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-secondary); } .chart-hero-sub { font-size: 12px; color: var(--text-faint); } .chart-hero-status { font-size: 10px; font-weight: 700; margin-top: 2px; letter-spacing: 0.06em; text-transform: uppercase; } /* Over-budget ring: subtle warning glow so a full lap at 125% doesn't read the same as a clean 100% (the legend % also turns red). */ .rbar-seg--over { filter: drop-shadow(0 0 5px rgba(244, 63, 94, .75)); } /* ── Daily spend line chart (both dashboard layouts) ───────────────────── Same visual language as the "spark" chart mockup on the marketing homepage (home.html's .mk-spark*): gradient stroke/fill, dots that pop in per-point. Default state here is the fully-drawn final chart (no stroke-dashoffset/opacity/scale override) - the draw-in is applied only as a transient inline style by animateSpendLineIn() when dashboard animations are enabled, so with them off (or JS-disabled) the chart still renders correctly with zero script involvement. */ .spend-line-panel { margin: 16px 0; } .spend-line-panel .panel-inner-sm { padding: 18px 22px; } .spend-line-wrap { position: relative; width: 100%; } .spend-line-svg { display: block; width: 100%; height: 140px; } .spend-line-path { transition: stroke-dashoffset 1.1s var(--ease); } .spend-line-area { transition: opacity .9s ease; } /* Positioned in real CSS pixels/percent (see svgSpendLine in charts.js), not as SVG marks - the chart stretches non-uniformly to fill the panel's width, which would otherwise squash a native SVG circle into an oval. */ .spend-line-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--grad-pink); cursor: pointer; transition: opacity .3s, transform .3s cubic-bezier(.34, 1.56, .64, 1), width .15s, height .15s, margin .15s; } .spend-line-dot:hover, .spend-line-dot:focus-visible { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; outline: none; } .spend-line-caption { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 10px; } .spend-line-num { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--text-primary); } .spend-line-label { font-size: 11.5px; color: var(--text-faint); } @media (prefers-reduced-motion: reduce) { .spend-line-path, .spend-line-area, .spend-line-dot { transition: none; } } /* ── Layout 2: Radial Pulse ───────────────────────────────────── */ .ist-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; } .leftover-gauge-wrap { display: flex; flex-direction: column; align-items: center; } .leftover-gauge-caption { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin-top: 2px; } .leftover-hero-panel { margin-bottom: 14px; } .leftover-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .leftover-hero-left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .leftover-hero-formula { gap: 10px; } /* Left-aligned (not centered) so the ring starts flush at the panel's own left padding edge - the same "starts right at the border" feel as the Daily Spend chart below it - instead of floating in extra whitespace. The legend flexes to fill the remaining width rather than being capped to a fixed column, so it reads as extending edge-to-edge too. */ .radial-bars-block { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: flex-start; } .radial-bars-block .donut-legend { flex: 1 1 auto; min-width: 200px; max-width: none; } /* The grid row stretches this panel to match its row partner's height (Income Sources beside it) - without this, the ring sits pinned to the top with dead space below instead of centering in the space available. */ .cash-flow-hero-panel { display: flex; flex-direction: column; } /* Same padding as Daily Spend (.spend-line-panel) directly below it, so both full-width-feeling panels start at the same left/right border. */ .cash-flow-hero-panel .panel-inner-sm { flex: 1; display: flex; flex-direction: column; padding: 18px 22px; } .cash-flow-hero-panel .radial-bars-block { flex: 1; } @media (max-width: 900px) { .ist-row { grid-template-columns: repeat(2, 1fr); } .leftover-hero-inner { justify-content: center; text-align: center; } .leftover-hero-left { justify-content: center; } } /* Pie chart (Income Sources / Spending Breakdown, Layout 2): chart on the left, legend always to the RIGHT (no wrap-below), so the panel reads like a labelled key beside the graphic. */ .pie-chart-block { display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; justify-content: center; height: 100%; } .pie-chart-block .pie-svg { /* Matches the donut's fixed 110px so Income Sources/Spending Breakdown end up the same panel height in both dashboard layouts (Layout 1's donut is a fixed 110px SVG with no responsive clamp). */ flex: 0 0 auto; width: clamp(90px, 38%, 110px); height: auto; } .pie-chart-block .donut-legend { flex: 1 1 auto; min-width: 0; max-width: 260px; } /* Very narrow panels (mobile single column): stack chart over legend. */ @media (max-width: 560px) { .pie-chart-block { flex-wrap: wrap; } .pie-chart-block .pie-svg { width: clamp(120px, 55%, 170px); } } /* Deconstructed pie interaction: wedges rest as a clean circle; the hovered or keyboard-focused slice (or its legend row) pulls outward along its own --ex/--ey vector. */ .pie-seg { cursor: pointer; transition: transform .24s cubic-bezier(.34, 1.35, .5, 1), opacity .18s; } .pie-seg.is-exploded { transform: translate(var(--ex, 0), var(--ey, 0)); } .pie-seg:focus-visible { outline: none; transform: translate(var(--ex, 0), var(--ey, 0)); } @media (prefers-reduced-motion: reduce) { .pie-seg { transition: opacity .18s; } } /* Onboarding banner */ .onboard-banner { position: relative; background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(236,72,153,.06)); border: 1px dashed rgba(99,102,241,.3); border-radius: var(--radius-md); padding: 22px 24px; margin-bottom: 18px; } .onboard-close-btn { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; border: none; background: rgba(99,102,241,.1); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; transition: background .15s, color .15s; } .onboard-close-btn:hover { background: rgba(99,102,241,.2); color: var(--text-primary); } .onboard-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; color: var(--text-primary); padding-right: 30px; } .onboard-steps { display: flex; flex-direction: column; gap: 8px; } .onboard-sample-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .onboard-sample-hint { font-size: 12px; color: var(--text-faint); } .onboard-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); } .onboard-num { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple)); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* ═══════════════════════════════════════════════════════════════ BUDGET MODULES (Income / Expenses / Bills / Debt / Savings) ═══════════════════════════════════════════════════════════════ */ .module-table-wrap { overflow-x: auto; } .module-table { width: 100%; border-collapse: collapse; font-size: 14px; } .module-table th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding: 12px 16px; border-bottom: 2px solid var(--border-faint); white-space: nowrap; } .module-table th .cc-label-text { text-transform: uppercase; } .module-table th .cc-info { margin-left: 5px; text-transform: none; vertical-align: middle; } .module-table td { padding: 8px 10px; border-bottom: 1px solid rgba(30,27,46,.05); vertical-align: middle; } .module-row:hover td { background: rgba(30,27,46,.015); } .total-row td { padding: 11px 10px; border-top: 2px solid var(--border-faint) !important; border-bottom: none !important; background: rgba(30,27,46,.018); } .cat-name { font-weight: 600; } .expected-input { width: 110px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-primary); background: rgba(255,255,255,.75); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); padding: 7px 10px; transition: border-color .15s, box-shadow .15s; } /* Reserve clearance for native dropdown arrow */ select.expected-input { padding-right: 30px; min-width: 155px; /* ensures "Personal Loan" etc. fit without clipping */ -webkit-appearance: auto; appearance: auto; } /* Reserve clearance for browser spin buttons on number inputs */ input[type="number"].expected-input { padding-right: 26px; } .expected-input:focus { outline: none; border-color: var(--grad-purple); box-shadow: 0 0 0 3px rgba(147,51,234,.14); } .date-input { font-family: inherit; font-size: 13px; color: var(--text-primary); background: rgba(255,255,255,.75); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); padding: 6px 10px; transition: border-color .15s; } .date-input:focus { outline: none; border-color: var(--grad-purple); } .prog-cell { min-width: 130px; } .prog-bar-wrap { height: 5px; background: rgba(30,27,46,.08); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 4px; } .prog-bar { height: 100%; border-radius: var(--radius-pill); transition: width .5s var(--ease); } .prog-bar--normal { background: linear-gradient(90deg, #6366f1, #c026d3); } .prog-bar--income { background: linear-gradient(90deg, #10b981, #06b6d4); } .prog-bar--over { background: linear-gradient(90deg, #fb923c, #f43f5e); } .prog-label { font-size: 11px; font-weight: 700; color: var(--text-faint); } .prog-label.is-over { color: var(--error); } .actual-val { font-weight: 700; } .actual-val.is-over { color: var(--error); } .actual-val.is-good { color: var(--success); } .paid-cell { text-align: center; } .action-cell { text-align: right; width: 44px; } .del-btn { appearance: none; border: none; background: transparent; color: var(--text-faint); font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 6px; transition: color .15s, background .15s; } .del-btn:hover { color: var(--error); background: var(--error-bg); } /* Custom checkbox */ .check-label { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .check-label input[type="checkbox"] { display: none; } .checkmark { width: 20px; height: 20px; border: 2px solid var(--border-faint); border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--surface-strong); transition: all .2s var(--ease); font-size: 12px; } .check-label input:checked + .checkmark { background: var(--success); border-color: var(--success); color: white; } .check-label input:checked + .checkmark::after { content: '✓'; color: white; font-size: 13px; font-weight: 800; } /* Add category card */ .add-cat-card { margin-top: 12px; } .add-cat-card .panel-inner-sm { padding: 18px 22px; } .add-cat-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; } .add-cat-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .add-cat-row .field { margin-bottom: 0; } .add-cat-btns { display: flex; gap: 8px; padding-bottom: 1px; } /* ═══════════════════════════════════════════════════════════════ TRANSACTIONS ═══════════════════════════════════════════════════════════════ */ .tx-form-panel { margin: 10px 0 6px; } .tx-filter-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 14px; background: rgba(30,27,46,.04); border-radius: var(--radius-md); border: 1px solid var(--border-faint); margin: 10px 0 4px; } .tx-filter-bar--3col { grid-template-columns: repeat(3, 1fr); } [data-theme="dark"] .tx-filter-bar { background: rgba(var(--grad-indigo-rgb),.06); } .tx-filter-bar > * { width: 100%; height: 32px; box-sizing: border-box; font-size: 12px; min-width: 0; } .tx-filter-bar .input-sm { padding: 0 10px; } .tx-filter-bar .select-sm { padding: 0 8px; } .input-sm { height: 32px; font-size: 12px; padding: 0 10px; } .select-sm { height: 32px; font-size: 12px; padding: 0 8px; } .tx-form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .tx-form-row .field { flex: 0 0 auto; min-width: 110px; margin-bottom: 0; } .tx-form-row .field-grow { flex: 1 1 180px; } .tx-form-row .field-btn { flex: 0 0 auto; } .tx-error { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--error); background: var(--error-bg); border-radius: var(--radius-sm); padding: 10px 14px; } .tx-list-header { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); } /* pagination controls (issue 17) */ .tx-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0 4px; } .tx-page-label { font-size: 12px; color: var(--text-faint); font-weight: 600; min-width: 90px; text-align: center; } .tx-table-wrap { overflow-x: auto; } .tx-table { width: 100%; border-collapse: collapse; font-size: 13px; } .tx-table th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding: 11px 15px; border-bottom: 1px solid var(--border-faint); white-space: nowrap; } .tx-table td { padding: 10px 15px; border-bottom: 1px solid rgba(30,27,46,.04); vertical-align: middle; } .tx-table tbody tr:last-child td { border-bottom: none; } .tx-table tbody tr:hover td { background: rgba(30,27,46,.02); } .tx-table tbody tr.is-selected td { background: rgba(99,102,241,.08); } [data-theme="dark"] .tx-table tbody tr.is-selected td { background: rgba(var(--grad-indigo-rgb),.1); } .tx-table th.tx-sel-col, .tx-table td.tx-sel-col { width: 34px; padding: 10px 0 10px 15px; text-align: center; } .checkmark--sm { width: 16px; height: 16px; border-radius: 5px; } .check-label input:checked + .checkmark--sm::after { font-size: 10px; } .tx-bulk-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 4px; padding: 10px 14px; background: rgba(30,27,46,.04); border: 1px solid var(--border-faint); border-radius: var(--radius-md); font-size: 13px; animation: bulkBarIn .18s ease; } @keyframes bulkBarIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } [data-theme="dark"] .tx-bulk-bar { background: rgba(var(--grad-indigo-rgb),.06); } .tx-bulk-count { font-weight: 700; color: var(--grad-indigo); } .tx-bulk-tag-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .tx-bulk-tag-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); } .tx-bulk-tag-btn { font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 4px 12px; border-radius: var(--radius-pill); color: var(--bk); background: color-mix(in srgb, var(--bk) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bk) 38%, transparent); transition: background .15s, transform .1s; } .tx-bulk-tag-btn:hover { background: color-mix(in srgb, var(--bk) 24%, transparent); transform: translateY(-1px); } .tx-pill { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); } .tx-pill--income { background: var(--income-bg); color: var(--income); } .tx-pill--expense { background: var(--expense-bg); color: var(--expense); } .tx-pill--bill { background: var(--bill-bg); color: var(--bill); } .tx-pill--debt { background: var(--debt-bg); color: var(--debt); } .tx-pill--savings { background: var(--savings-bg); color: var(--savings); } .tx-pill--sinking_fund { background: rgba(13,148,136,.12); color: #0d9488; } .tx-pill--subscription { background: rgba(16,185,129,.12); color: #059669; } .tx-amt { font-weight: 700; font-family: var(--font-display); font-size: 13px; } .tx-amt--income { color: var(--income); } .tx-amt--expense,.tx-amt--bill,.tx-amt--debt { color: var(--expense); } .tx-amt--savings,.tx-amt--sinking_fund { color: #0d9488; } .tx-cat { color: var(--text-secondary); } .tx-date { font-size: 12px; color: var(--text-secondary); } .tx-desc { font-size: 12px; color: var(--text-faint); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .csv-label { display: inline-flex; align-items: center; gap: 5px; user-select: none; } /* ═══════════════════════════════════════════════════════════════ SETTINGS ═══════════════════════════════════════════════════════════════ */ .settings-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; } .settings-card-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; color: var(--text-primary); } .settings-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px; } .settings-card--danger { border-color: rgba(244,63,94,.2); background: rgba(244,63,94,.03); } .settings-card--automation { position: relative; overflow: hidden; border-color: rgba(99,102,241,.25); background: linear-gradient(135deg, rgba(99,102,241,.09), rgba(236,72,153,.06)); } .settings-card--automation::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--grad-indigo), var(--grad-purple), var(--grad-pink)); } .settings-save-row { padding-top: 6px; } /* preset active state */ .preset-active { background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple)) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 12px rgba(99,102,241,.28) !important; } .preset-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .preset-row .field-label { margin-bottom: 0; } /* ═══════════════════════════════════════════════════════════════ EMPTY STATE ═══════════════════════════════════════════════════════════════ */ .empty-state { text-align: center; padding: 52px 20px; color: var(--text-secondary); font-size: 14px; } .empty-icon { font-size: 3rem; margin-bottom: 12px; } .empty-sub { font-size: 13px; color: var(--text-faint); margin-top: 6px; } /* ═══════════════════════════════════════════════════════════════ MODAL ═══════════════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: rgba(15,10,30,.58); backdrop-filter: blur(5px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; } .modal { background: var(--surface-solid); border-radius: var(--radius-lg); box-shadow: 0 40px 100px rgba(0,0,0,.28); max-width: 520px; width: 100%; padding: 38px; position: relative; max-height: 80vh; overflow-y: auto; animation: modal-in .28s var(--ease); } @keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-close { position: absolute; top: 16px; right: 16px; appearance: none; border: none; background: rgba(30,27,46,.07); width: 34px; height: 34px; border-radius: 50%; font-size: 20px; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; line-height: 1; transition: background .15s; } .modal-close:hover { background: rgba(30,27,46,.12); } .modal-title { font-size: 19px; font-weight: 700; margin-bottom: 18px; } .modal-body { font-size: 14px; color: var(--text-secondary); line-height: 1.75; } .modal-body p { margin-bottom: 12px; } .modal-body ul { margin: 0 0 12px; padding-left: 18px; } .modal-body li { margin-bottom: 7px; } .modal-body strong { color: var(--text-primary); font-weight: 600; } .modal-body code { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; background: rgba(30,27,46,.07); padding: 2px 6px; border-radius: 5px; color: var(--text-primary); } /* ═══════════════════════════════════════════════════════════════ TOAST ═══════════════════════════════════════════════════════════════ */ #toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(70px); background: var(--text-primary); color: #fff; padding: 11px 22px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; z-index: 2000; transition: transform .3s var(--ease), opacity .3s; opacity: 0; pointer-events: none; white-space: nowrap; } #toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } .charts-col { display: grid; grid-template-columns: 1fr 1fr; } .summary-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { /* Fade the tab bar's edges so a horizontally-scrollable row of tabs visibly hints that more tabs exist off-screen, instead of just cutting a label off mid-word with no other indication. */ .budget-tabs { mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%); } .app { padding: 20px 16px 60px; } .tool-grid { grid-template-columns: 1fr; max-width: 100%; } .summary-cards { grid-template-columns: 1fr 1fr; } .charts-col { grid-template-columns: 1fr; } .settings-grid { grid-template-columns: 1fr; } .tx-form-row { flex-direction: column; } .tx-form-row .field, .tx-form-row .field-grow { width: 100%; } .leftover-inner { flex-direction: column; gap: 14px; } .field-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .summary-cards { grid-template-columns: 1fr; } .hub-title { font-size: 1.9rem; } .wordmark { font-size: 17px; } .budget-tabs { gap: 4px; } .btab { padding: 8px 11px; font-size: 12px; } .tool-topbar .wordmark { display: none; } } /* ═══════════════════════════════════════════════════════════════ HELP ICON BUTTON (replaces .btn-help-sm text pill) ═══════════════════════════════════════════════════════════════ */ .help-icon-btn { appearance: none; border: 1px solid var(--border-faint); background: var(--surface-strong); width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; transition: color .15s, border-color .15s; flex-shrink: 0; } .help-icon-btn:hover { color: var(--grad-indigo); border-color: var(--grad-indigo); } /* ═══════════════════════════════════════════════════════════════ PERIOD BADGE - clickable variant ═══════════════════════════════════════════════════════════════ */ .period-badge--btn { cursor: pointer; background: var(--surface-strong); border: 1px solid var(--border-faint); transition: border-color .15s, color .15s; } .period-badge--btn:hover { border-color: var(--grad-indigo); color: var(--grad-indigo); } /* ═══════════════════════════════════════════════════════════════ THEME PILL TOGGLE ═══════════════════════════════════════════════════════════════ */ .theme-pill { display: flex; align-items: center; background: var(--surface-strong); border: 1px solid var(--border-faint); border-radius: var(--radius-pill); padding: 3px; gap: 2px; } .theme-opt { appearance: none; border: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); background: transparent; transition: background .2s var(--ease), color .2s; flex-shrink: 0; } .theme-opt.is-active { background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple)); color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,.35); } .theme-opt:not(.is-active):hover { background: rgba(30,27,46,.07); color: var(--text-primary); } /* ═══════════════════════════════════════════════════════════════ DRAG CURSOR ON TABS ═══════════════════════════════════════════════════════════════ */ .budget-tabs { cursor: grab; } .budget-tabs.is-dragging { cursor: grabbing; user-select: none; } /* ═══════════════════════════════════════════════════════════════ EDIT TRANSACTION BUTTON & MODAL FORM ═══════════════════════════════════════════════════════════════ */ .edit-btn { appearance: none; border: none; background: transparent; color: var(--text-faint); font-size: 13px; padding: 4px 6px; border-radius: 6px; cursor: pointer; line-height: 1; transition: color .15s, background .15s; } .edit-btn:hover { color: var(--grad-indigo); background: var(--savings-bg); } .tx-actions { display: flex; align-items: center; gap: 2px; white-space: nowrap; } .edit-tx-actions { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; } .edit-tx-actions .btn:first-child { flex: 1; min-width: 120px; } /* ═══════════════════════════════════════════════════════════════ DARK THEME - root variable overrides ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --grad-indigo: #818cf8; --grad-indigo-rgb: 129,140,248; --grad-purple: #c084fc; --grad-pink: #f472b6; --grad-orange: #fb923c; --surface: rgba(18, 10, 42, 0.80); --surface-strong: rgba(26, 16, 58, 0.94); --surface-solid: #0e0820; --border-soft: rgba(129, 140, 248, 0.14); --border-faint: rgba(129, 140, 248, 0.09); --text-primary: #ede8ff; --text-secondary: #a89ccc; --text-faint: #6b5f85; --income-bg: rgba(16, 185, 129, 0.16); --expense-bg: rgba(244, 63, 94, 0.16); --bill-bg: rgba(251, 146, 60, 0.16); --debt-bg: rgba(168, 85, 247, 0.16); --savings-bg: rgba(59, 130, 246, 0.16); --error-bg: rgba(244, 63, 94, 0.16); --success-bg: rgba(16, 185, 129, 0.16); --shadow-card: 0 20px 60px -20px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35); --shadow-pop: 0 12px 32px -8px rgba(0,0,0,.55); } /* Dark backdrop - deep indigo night sky */ [data-theme="dark"] .backdrop { background: radial-gradient(120% 90% at 50% 0%, #0c0722 0%, #060210 55%, #03010b 100%); } [data-theme="dark"] .backdrop::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 42%; background: linear-gradient(180deg, rgba(99,102,241,.10), transparent); pointer-events: none; } [data-theme="dark"] .blob-a { background: radial-gradient(circle at 30% 30%, #2b2775, transparent 70%); opacity: 0.9; } [data-theme="dark"] .blob-b { background: radial-gradient(circle at 60% 40%, #5b21b6, transparent 70%); opacity: 0.75; } [data-theme="dark"] .blob-c { background: radial-gradient(circle at 50% 50%, #831843, transparent 70%); opacity: 0.45; } /* Dark inputs - override hardcoded white backgrounds */ [data-theme="dark"] .expected-input, [data-theme="dark"] .date-input { background: rgba(30, 18, 62, 0.96); color: var(--text-primary); border-color: var(--border-faint); } [data-theme="dark"] .expected-input::placeholder, [data-theme="dark"] .input::placeholder { color: var(--text-faint); } /* Dark table row hovers */ [data-theme="dark"] .module-row:hover td { background: rgba(var(--grad-indigo-rgb),.04); } [data-theme="dark"] .total-row td { background: rgba(var(--grad-indigo-rgb),.05); } [data-theme="dark"] .tx-table tbody tr:hover td { background: rgba(var(--grad-indigo-rgb),.04); } /* Dark progress track */ [data-theme="dark"] .prog-bar-wrap { background: rgba(var(--grad-indigo-rgb),.12); } [data-theme="dark"] .flow-bar-wrap { background: rgba(var(--grad-indigo-rgb),.08); } [data-theme="dark"] .flow-bar--exp { background: rgba(var(--grad-indigo-rgb),.30); } /* Dark settings danger card */ [data-theme="dark"] .settings-card--danger { border-color: rgba(244,63,94,.22); background: rgba(244,63,94,.05); } [data-theme="dark"] .settings-card--automation { border-color: rgba(var(--grad-indigo-rgb),.32); background: linear-gradient(135deg, rgba(var(--grad-indigo-rgb),.14), rgba(244,114,182,.08)); } /* Dark onboarding banner */ [data-theme="dark"] .onboard-banner { background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(236,72,153,.07)); border-color: rgba(var(--grad-indigo-rgb),.22); } /* Dark modal */ [data-theme="dark"] .modal { background: #130a2e; } [data-theme="dark"] .modal-close { background: rgba(var(--grad-indigo-rgb),.10); } [data-theme="dark"] .modal-close:hover { background: rgba(var(--grad-indigo-rgb),.18); } [data-theme="dark"] .modal-body code { background: rgba(var(--grad-indigo-rgb),.12); } /* Dark btn-back / btn-icon hover */ [data-theme="dark"] .btn-back:hover { background: rgba(26,16,58,.98); } [data-theme="dark"] .theme-opt:not(.is-active):hover { background: rgba(var(--grad-indigo-rgb),.10); } /* Dark toast */ [data-theme="dark"] #toast { background: var(--text-primary); color: #0e0820; } /* ── Dark mode btab hover ─────────────────────────────────────────── */ [data-theme="dark"] .btab:hover:not(.is-active) { background: rgba(var(--grad-indigo-rgb),.12); color: var(--text-primary); } /* ═══════════════════════════════════════════════════════════════ SYNTHWAVE THEME - 80s retrowave neon ═══════════════════════════════════════════════════════════════ */ [data-theme="synthwave"] { /* Retro-future display face for headings & big numerals */ --font-display: 'Orbitron', 'Sora', 'Inter', system-ui, sans-serif; --grad-indigo: #ff2e97; --grad-indigo-rgb: 255,46,151; --grad-purple: #b829ea; --grad-pink: #00d9ff; --grad-orange: #fb923c; --surface: rgba(30, 8, 61, 0.80); --surface-strong: rgba(41, 10, 74, 0.94); --surface-solid: #1a0530; --border-soft: rgba(255, 46, 151, 0.18); --border-faint: rgba(0, 217, 255, 0.12); --text-primary: #fdf0ff; --text-secondary: #d9a8e8; --text-faint: #8a5a9e; --income-bg: rgba(16, 185, 129, 0.18); --expense-bg: rgba(244, 63, 94, 0.18); --bill-bg: rgba(251, 146, 60, 0.18); --debt-bg: rgba(168, 85, 247, 0.18); --savings-bg: rgba(59, 130, 246, 0.18); --error-bg: rgba(244, 63, 94, 0.18); --success-bg: rgba(16, 185, 129, 0.18); --shadow-card: 0 20px 60px -20px rgba(255,46,151,.28), 0 2px 8px rgba(0,0,0,.4); --shadow-pop: 0 12px 32px -8px rgba(255,46,151,.35); } [data-theme="synthwave"] .tool-card--orange { background: linear-gradient(180deg, rgba(74,11,102,.8) 0%, rgba(48,8,74,.8) 35%, rgba(30,6,50,.8) 70%, rgba(20,4,36,.8) 100%); } [data-theme="synthwave"] .tool-card--orange::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% -15%, rgba(251,146,60,.4), transparent 60%); } [data-theme="synthwave"] .tool-card--indigo { background: linear-gradient(180deg, rgba(74,11,102,.8) 0%, rgba(48,8,74,.8) 35%, rgba(30,6,50,.8) 70%, rgba(20,4,36,.8) 100%); } [data-theme="synthwave"] .tool-card--indigo::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% -15%, rgba(var(--grad-indigo-rgb),.35), transparent 60%); } [data-theme="synthwave"] .alloc-strip-wrap { background: rgba(var(--grad-indigo-rgb),.30); } [data-theme="synthwave"] .alloc-card { background: rgba(0,0,0,.24); } [data-theme="synthwave"] .dleg-row:hover, [data-theme="synthwave"] .dleg-row.is-active { background: rgba(var(--grad-indigo-rgb),.1); } [data-theme="synthwave"] .tx-filter-bar { background: rgba(var(--grad-indigo-rgb),.06); } [data-theme="synthwave"] .tx-table tbody tr.is-selected td { background: rgba(var(--grad-indigo-rgb),.1); } [data-theme="synthwave"] .tx-bulk-bar { background: rgba(var(--grad-indigo-rgb),.06); } [data-theme="synthwave"] .backdrop { background: radial-gradient(120% 100% at 50% 0%, #16032c 0%, #0a0118 55%, #05000f 100%); } /* Retro horizon grid receding to the bottom edge */ [data-theme="synthwave"] .backdrop::before { content: ''; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(180deg, transparent 0%, rgba(255,46,151,.06) 60%, rgba(255,46,151,.14) 100%), repeating-linear-gradient(90deg, rgba(0,217,255,.10) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, rgba(255,46,151,.12) 0 1px, transparent 1px 44px); transform: perspective(340px) rotateX(52deg); transform-origin: bottom; pointer-events: none; } [data-theme="synthwave"] .blob-a { background: radial-gradient(circle at 30% 30%, #ff2e97, transparent 70%); opacity: 0.9; } [data-theme="synthwave"] .blob-b { background: radial-gradient(circle at 60% 40%, #00d9ff, transparent 70%); opacity: 0.75; } [data-theme="synthwave"] .blob-c { background: radial-gradient(circle at 50% 50%, #7a0e3d, transparent 70%); opacity: 0.55; } [data-theme="synthwave"] .expected-input, [data-theme="synthwave"] .date-input { background: rgba(42, 8, 58, 0.96); color: var(--text-primary); border-color: var(--border-faint); } [data-theme="synthwave"] .expected-input::placeholder, [data-theme="synthwave"] .input::placeholder { color: var(--text-faint); } [data-theme="synthwave"] .module-row:hover td { background: rgba(var(--grad-indigo-rgb),.04); } [data-theme="synthwave"] .total-row td { background: rgba(var(--grad-indigo-rgb),.05); } [data-theme="synthwave"] .tx-table tbody tr:hover td { background: rgba(var(--grad-indigo-rgb),.04); } [data-theme="synthwave"] .prog-bar-wrap { background: rgba(var(--grad-indigo-rgb),.12); } [data-theme="synthwave"] .flow-bar-wrap { background: rgba(var(--grad-indigo-rgb),.08); } [data-theme="synthwave"] .flow-bar--exp { background: rgba(var(--grad-indigo-rgb),.30); } [data-theme="synthwave"] .settings-card--danger { border-color: rgba(244,63,94,.22); background: rgba(244,63,94,.05); } [data-theme="synthwave"] .settings-card--automation { border-color: rgba(var(--grad-indigo-rgb),.32); background: linear-gradient(135deg, rgba(var(--grad-indigo-rgb),.14), rgba(244,114,182,.08)); } [data-theme="synthwave"] .onboard-banner { background: linear-gradient(135deg, rgba(var(--grad-indigo-rgb),.12), rgba(236,72,153,.07)); border-color: rgba(var(--grad-indigo-rgb),.22); } [data-theme="synthwave"] .modal { background: #1a0530; } [data-theme="synthwave"] .modal-close { background: rgba(var(--grad-indigo-rgb),.10); } [data-theme="synthwave"] .modal-close:hover { background: rgba(var(--grad-indigo-rgb),.18); } [data-theme="synthwave"] .modal-body code { background: rgba(var(--grad-indigo-rgb),.12); } [data-theme="synthwave"] .btn-back:hover { background: rgba(36,8,54,.98); } [data-theme="synthwave"] .theme-opt:not(.is-active):hover { background: rgba(var(--grad-indigo-rgb),.10); } [data-theme="synthwave"] #toast { background: var(--text-primary); color: #1a0530; } [data-theme="synthwave"] .btab:hover:not(.is-active) { background: rgba(var(--grad-indigo-rgb),.12); color: var(--text-primary); } [data-theme="synthwave"] .side-nav { background: rgba(20,4,36,.92); border-right-color: rgba(var(--grad-indigo-rgb),.1); } [data-theme="synthwave"] .side-nav-item:hover:not(.is-active) { background: rgba(var(--grad-indigo-rgb),.08); } [data-theme="synthwave"] .side-nav-item.is-active { background: rgba(var(--grad-indigo-rgb),.14); } [data-theme="synthwave"] .command-nav { background: rgba(0,0,0,.32); } [data-theme="synthwave"] .cnav-btn.is-active { color: var(--text-primary); } [data-theme="synthwave"] .recurring-panel { background: rgba(var(--grad-indigo-rgb),.04); } [data-theme="synthwave"] .fk-dialog-icon { background: rgba(var(--grad-indigo-rgb),.18); } [data-theme="synthwave"] .fk-dialog--danger .fk-dialog-icon { background: rgba(244,63,94,.20); } [data-theme="synthwave"] .app-title-editable:hover { background: rgba(255,255,255,.08); } [data-theme="synthwave"] .upgrade-pro-close { background: rgba(var(--grad-indigo-rgb),.12); } [data-theme="synthwave"] .upgrade-pro-close:hover { background: rgba(var(--grad-indigo-rgb),.2); } [data-theme="synthwave"] .upgrade-pro { background: linear-gradient(135deg, rgba(var(--grad-indigo-rgb),.16), rgba(236,72,153,.12), rgba(251,146,60,.08)); border-color: rgba(var(--grad-indigo-rgb),.3); } [data-theme="synthwave"] .fk-up-card { border: 1px solid var(--border-soft); box-shadow: 0 40px 100px rgba(0,0,0,.6); } [data-theme="synthwave"] .fk-up-check { color: #ff8fc7; } [data-theme="synthwave"] .fk-up-upsell:hover { border-color: rgba(255,46,151,.55); } [data-theme="synthwave"] .fk-up-upsell-cta { color: #ff9fd0; } [data-theme="synthwave"] .fk-code-x { background: rgba(var(--grad-indigo-rgb),.12); } [data-theme="synthwave"] .fk-code-x:hover { background: rgba(var(--grad-indigo-rgb),.22); } [data-theme="synthwave"] .penny-drawer-panel { background: linear-gradient(160deg, rgba(42,6,58,.8) 0%, rgba(20,4,36,.8) 55%, rgba(48,10,54,.8) 100%); } [data-theme="synthwave"] .lp-strip-inner { background: rgba(255,255,255,.04); } [data-theme="synthwave"] .cc-info { background: rgba(var(--grad-indigo-rgb),.2); color: #ff9fd0; } [data-theme="synthwave"] .guide-close { background: rgba(var(--grad-indigo-rgb),.10); } [data-theme="synthwave"] .guide-close:hover { background: rgba(var(--grad-indigo-rgb),.18); } [data-theme="synthwave"] .guide-topic-icon-badge { background: linear-gradient(135deg, rgba(var(--grad-indigo-rgb),.2), rgba(0,217,255,.16)); } [data-theme="synthwave"] .guide-tip { background: rgba(var(--grad-indigo-rgb),.1); } [data-theme="synthwave"] .debt-sched-warning { background: rgba(251,146,60,.08); } [data-theme="synthwave"] .debt-sched-colheader { background: linear-gradient(135deg, rgba(var(--grad-indigo-rgb),.12), rgba(0,217,255,.07)), var(--surface-solid); } [data-theme="synthwave"] .debt-sched-row:nth-child(even) { background: rgba(var(--grad-indigo-rgb),.05); } [data-theme="synthwave"] .debt-sched-row:hover { background: rgba(var(--grad-indigo-rgb),.1); } /* ═══════════════════════════════════════════════════════════════ VINTAGE LEDGER THEME - warm old-paper account book ═══════════════════════════════════════════════════════════════ */ [data-theme="vintage-ledger"] { /* Typewriter body + engraved serif display, like a hand-kept ledger */ --font-body: 'Courier Prime', 'Courier New', monospace; --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --grad-indigo: #8b5e34; --grad-indigo-rgb: 139,94,52; --grad-purple: #a67c52; --grad-pink: #c9a15c; --grad-orange: #fb923c; --surface: rgba(250, 240, 222, 0.75); --surface-strong: rgba(247, 235, 214, 0.92); --surface-solid: #faf3e3; --border-soft: rgba(139, 94, 52, 0.20); --border-faint: rgba(90, 62, 38, 0.14); --text-primary: #3b2a1a; --text-secondary: #6b5138; --text-faint: #a08a6f; --shadow-card: 0 20px 60px -20px rgba(107,68,35,.22), 0 2px 8px rgba(107,68,35,.08); --shadow-pop: 0 12px 32px -8px rgba(107,68,35,.30); } /* Belt-and-braces, same technique as the Terminal theme: gives every icon (including emoji, which can't be recoloured via CSS color/currentColor) a warm sepia cast instead of their native platform colours, so the whole UI reads as one aged-paper palette rather than full monochrome. */ [data-theme="vintage-ledger"] { filter: grayscale(0.55) sepia(0.35) contrast(1.02); } /* Muted parchment backdrop - the default vivid indigo/pink/orange blobs clash with the paper aesthetic */ [data-theme="vintage-ledger"] .backdrop { background: radial-gradient(120% 90% at 50% 0%, #f7ecd6 0%, #f3e6cc 55%, #eddcba 100%); } /* Faint ruled ledger lines on the paper */ [data-theme="vintage-ledger"] .backdrop::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(139,94,52,.055) 0 1px, transparent 1px 34px); } [data-theme="vintage-ledger"] .blob-a { background: radial-gradient(circle at 30% 30%, #c9a15c, transparent 70%); opacity: 0.45; } [data-theme="vintage-ledger"] .blob-b { background: radial-gradient(circle at 60% 40%, #a67c52, transparent 70%); opacity: 0.35; } [data-theme="vintage-ledger"] .blob-c { background: radial-gradient(circle at 50% 50%, #8b5e34, transparent 70%); opacity: 0.25; } /* ═══════════════════════════════════════════════════════════════ TERMINAL THEME - 90s phosphor-green computing ═══════════════════════════════════════════════════════════════ */ [data-theme="terminal"] { /* Phosphor-green CRT terminal. The hue-rotate filter below remaps every pixel (emoji, chart segments, swatches included) onto a single green phosphor ramp, so these base values mostly matter for their luminance - they're kept green anyway so the intent is legible in the stylesheet. */ --font-body: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace; --font-display: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace; --grad-indigo: #4ade80; --grad-indigo-rgb: 74,222,128; --grad-purple: #22c55e; --grad-pink: #86efac; --grad-orange: #a3e635; --surface: rgba(4, 16, 8, 0.85); --surface-strong: rgba(7, 24, 12, 0.95); --surface-solid: #050f08; --border-soft: rgba(74, 222, 128, 0.26); --border-faint: rgba(74, 222, 128, 0.13); --text-primary: #d2f8dc; --text-secondary: #7fdc9c; --text-faint: #3d7a52; --income-bg: rgba(74, 222, 128, 0.16); --expense-bg: rgba(74, 222, 128, 0.16); --bill-bg: rgba(74, 222, 128, 0.16); --debt-bg: rgba(74, 222, 128, 0.16); --savings-bg: rgba(74, 222, 128, 0.16); --error-bg: rgba(74, 222, 128, 0.16); --success-bg: rgba(74, 222, 128, 0.16); --shadow-card: 0 20px 60px -20px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4); --shadow-pop: 0 12px 32px -8px rgba(0,0,0,.5); } /* Belt-and-braces: collapses everything that can't be re-themed via variables (emoji icons, chart segment colours, category swatches) onto the same green phosphor ramp - grayscale flattens to luminance, sepia re-tints, hue-rotate lands on green, saturate makes it glow. Different chart segments stay distinguishable by brightness, like a real CRT. */ [data-theme="terminal"] { filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(3) brightness(.98); } /* CRT scanlines + a soft phosphor vignette behind everything */ [data-theme="terminal"] .backdrop::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0 1px, transparent 1px 3px); } [data-theme="terminal"] .section-title, [data-theme="terminal"] .panel-title-sm, [data-theme="terminal"] .ist-value, [data-theme="terminal"] .pro-stat-value, [data-theme="terminal"] .leftover-value, [data-theme="terminal"] .wordmark { text-shadow: 0 0 8px rgba(74,222,128,.45); } [data-theme="terminal"] .tool-card--orange { background: linear-gradient(180deg, rgba(38,38,38,.8) 0%, rgba(26,26,26,.8) 35%, rgba(18,18,18,.8) 70%, rgba(10,10,10,.8) 100%); } [data-theme="terminal"] .tool-card--orange::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% -15%, rgba(251,146,60,.4), transparent 60%); } [data-theme="terminal"] .tool-card--indigo { background: linear-gradient(180deg, rgba(38,38,38,.8) 0%, rgba(26,26,26,.8) 35%, rgba(18,18,18,.8) 70%, rgba(10,10,10,.8) 100%); } [data-theme="terminal"] .tool-card--indigo::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% -15%, rgba(var(--grad-indigo-rgb),.35), transparent 60%); } [data-theme="terminal"] .alloc-strip-wrap { background: rgba(var(--grad-indigo-rgb),.30); } [data-theme="terminal"] .alloc-card { background: rgba(0,0,0,.24); } [data-theme="terminal"] .dleg-row:hover, [data-theme="terminal"] .dleg-row.is-active { background: rgba(var(--grad-indigo-rgb),.1); } [data-theme="terminal"] .tx-filter-bar { background: rgba(var(--grad-indigo-rgb),.06); } [data-theme="terminal"] .tx-table tbody tr.is-selected td { background: rgba(var(--grad-indigo-rgb),.1); } [data-theme="terminal"] .tx-bulk-bar { background: rgba(var(--grad-indigo-rgb),.06); } [data-theme="terminal"] .backdrop { background: radial-gradient(ellipse at 50% 15%, #0a2413 0%, #04100a 55%, #000000 100%); } [data-theme="terminal"] .blob-a { background: radial-gradient(circle at 30% 30%, #14532d, transparent 70%); opacity: 0.8; } [data-theme="terminal"] .blob-b { background: radial-gradient(circle at 60% 40%, #166534, transparent 70%); opacity: 0.55; } [data-theme="terminal"] .blob-c { background: radial-gradient(circle at 50% 50%, #052e16, transparent 70%); opacity: 0.6; } [data-theme="terminal"] .expected-input, [data-theme="terminal"] .date-input { background: rgba(24, 24, 27, 0.96); color: var(--text-primary); border-color: var(--border-faint); } [data-theme="terminal"] .expected-input::placeholder, [data-theme="terminal"] .input::placeholder { color: var(--text-faint); } [data-theme="terminal"] .module-row:hover td { background: rgba(var(--grad-indigo-rgb),.04); } [data-theme="terminal"] .total-row td { background: rgba(var(--grad-indigo-rgb),.05); } [data-theme="terminal"] .tx-table tbody tr:hover td { background: rgba(var(--grad-indigo-rgb),.04); } [data-theme="terminal"] .prog-bar-wrap { background: rgba(var(--grad-indigo-rgb),.12); } [data-theme="terminal"] .flow-bar-wrap { background: rgba(var(--grad-indigo-rgb),.08); } [data-theme="terminal"] .flow-bar--exp { background: rgba(var(--grad-indigo-rgb),.30); } [data-theme="terminal"] .settings-card--danger { border-color: rgba(244,63,94,.22); background: rgba(244,63,94,.05); } [data-theme="terminal"] .settings-card--automation { border-color: rgba(var(--grad-indigo-rgb),.32); background: linear-gradient(135deg, rgba(var(--grad-indigo-rgb),.14), rgba(244,114,182,.08)); } [data-theme="terminal"] .onboard-banner { background: linear-gradient(135deg, rgba(var(--grad-indigo-rgb),.12), rgba(236,72,153,.07)); border-color: rgba(var(--grad-indigo-rgb),.22); } [data-theme="terminal"] .modal { background: #0f0f11; } [data-theme="terminal"] .modal-close { background: rgba(var(--grad-indigo-rgb),.10); } [data-theme="terminal"] .modal-close:hover { background: rgba(var(--grad-indigo-rgb),.18); } [data-theme="terminal"] .modal-body code { background: rgba(var(--grad-indigo-rgb),.12); } [data-theme="terminal"] .btn-back:hover { background: rgba(20,20,20,.98); } [data-theme="terminal"] .theme-opt:not(.is-active):hover { background: rgba(var(--grad-indigo-rgb),.10); } [data-theme="terminal"] #toast { background: var(--text-primary); color: #0a0a0a; } [data-theme="terminal"] .btab:hover:not(.is-active) { background: rgba(var(--grad-indigo-rgb),.12); color: var(--text-primary); } [data-theme="terminal"] .side-nav { background: rgba(10,10,10,.92); border-right-color: rgba(var(--grad-indigo-rgb),.1); } [data-theme="terminal"] .side-nav-item:hover:not(.is-active) { background: rgba(var(--grad-indigo-rgb),.08); } [data-theme="terminal"] .side-nav-item.is-active { background: rgba(var(--grad-indigo-rgb),.14); } [data-theme="terminal"] .command-nav { background: rgba(0,0,0,.32); } [data-theme="terminal"] .cnav-btn.is-active { color: var(--text-primary); } [data-theme="terminal"] .recurring-panel { background: rgba(var(--grad-indigo-rgb),.04); } [data-theme="terminal"] .fk-dialog-icon { background: rgba(var(--grad-indigo-rgb),.18); } [data-theme="terminal"] .fk-dialog--danger .fk-dialog-icon { background: rgba(244,63,94,.20); } [data-theme="terminal"] .app-title-editable:hover { background: rgba(255,255,255,.08); } [data-theme="terminal"] .upgrade-pro-close { background: rgba(var(--grad-indigo-rgb),.12); } [data-theme="terminal"] .upgrade-pro-close:hover { background: rgba(var(--grad-indigo-rgb),.2); } [data-theme="terminal"] .upgrade-pro { background: linear-gradient(135deg, rgba(var(--grad-indigo-rgb),.16), rgba(236,72,153,.12), rgba(251,146,60,.08)); border-color: rgba(var(--grad-indigo-rgb),.3); } [data-theme="terminal"] .fk-up-card { border: 1px solid var(--border-soft); box-shadow: 0 40px 100px rgba(0,0,0,.6); } [data-theme="terminal"] .fk-up-check { color: #d1d5db; } [data-theme="terminal"] .fk-up-upsell:hover { border-color: rgba(209,213,219,.55); } [data-theme="terminal"] .fk-up-upsell-cta { color: #d1d5db; } [data-theme="terminal"] .fk-code-x { background: rgba(var(--grad-indigo-rgb),.12); } [data-theme="terminal"] .fk-code-x:hover { background: rgba(var(--grad-indigo-rgb),.22); } [data-theme="terminal"] .penny-drawer-panel { background: linear-gradient(160deg, rgba(20,20,20,.8) 0%, rgba(10,10,10,.8) 55%, rgba(24,24,24,.8) 100%); } [data-theme="terminal"] .lp-strip-inner { background: rgba(255,255,255,.04); } [data-theme="terminal"] .cc-info { background: rgba(var(--grad-indigo-rgb),.2); color: #d1d5db; } [data-theme="terminal"] .guide-close { background: rgba(var(--grad-indigo-rgb),.10); } [data-theme="terminal"] .guide-close:hover { background: rgba(var(--grad-indigo-rgb),.18); } [data-theme="terminal"] .guide-topic-icon-badge { background: linear-gradient(135deg, rgba(var(--grad-indigo-rgb),.2), rgba(209,213,219,.16)); } [data-theme="terminal"] .guide-tip { background: rgba(var(--grad-indigo-rgb),.1); } [data-theme="terminal"] .debt-sched-warning { background: rgba(251,146,60,.08); } [data-theme="terminal"] .debt-sched-colheader { background: linear-gradient(135deg, rgba(var(--grad-indigo-rgb),.12), rgba(209,213,219,.07)), var(--surface-solid); } [data-theme="terminal"] .debt-sched-row:nth-child(even) { background: rgba(var(--grad-indigo-rgb),.05); } [data-theme="terminal"] .debt-sched-row:hover { background: rgba(var(--grad-indigo-rgb),.1); } /* ── Styled date picker fields in Settings ───────────────────────── */ .date-field-styled { position: relative; border: 1px solid var(--border-faint); border-radius: var(--radius-sm); background: var(--surface-strong); padding: 11px 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: border-color .15s, box-shadow .15s; user-select: none; } .date-field-styled:hover { border-color: var(--grad-purple); } .date-field-styled:focus-within, .date-field-styled:focus { outline: none; border-color: var(--grad-purple); box-shadow: 0 0 0 3px rgba(147,51,234,.15); } .date-cal-icon { color: var(--text-faint); flex-shrink: 0; } .date-field-val { font-size: 14px; font-weight: 500; color: var(--text-primary); flex: 1; white-space: nowrap; } /* Tiny hidden input - triggered via showPicker() only */ .date-field-styled input[type="date"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: none; } /* ── Styled date cells inside Bills / Debt tables ────────────────── */ .date-cell-styled { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-faint); border-radius: var(--radius-sm); background: var(--surface-strong); padding: 5px 10px; cursor: pointer; min-width: 116px; position: relative; transition: border-color .15s; user-select: none; } .date-cell-styled:hover { border-color: var(--grad-purple); } .date-cell-val { font-size: 13px; font-weight: 500; color: var(--text-primary); } .no-date { color: var(--text-faint); font-style: italic; font-weight: 400; } .date-cell-styled input[type="date"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: none; } /* ═══════════════════════════════════════════════════════════════ ULTIMATE BUDGET PLANNER - specific styles ═══════════════════════════════════════════════════════════════ */ /* UBP lightning bolt wordmark icon */ .ubp-icon { background: linear-gradient(135deg, #f59e0b, #f97316) !important; box-shadow: 0 4px 12px rgba(245,158,11,.35) !important; } /* ── Pro Dashboard ─────────────────────────────────────────── */ .pro-stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 14px; } .pro-stat { background: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 18px 16px; position: relative; overflow: hidden; } .pro-stat::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; } .pro-stat:nth-child(1)::after { background: linear-gradient(90deg,#10b981,#06b6d4); } .pro-stat:nth-child(2)::after { background: linear-gradient(90deg,#f43f5e,#fb923c); } .pro-stat:nth-child(3)::after { background: linear-gradient(90deg,#6366f1,#3b82f6); } .pro-stat:nth-child(4)::after { background: linear-gradient(90deg,#a855f7,#c026d3); } .pro-stat-label { font-size: 10px; font-weight: 700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:8px; } .pro-stat-value { font-family:var(--font-display); font-size: 19px; font-weight: 700; margin-bottom:4px; } .pro-stat-sub { font-size: 11px; color: var(--text-faint); } /* Pro bottom row */ .pro-bottom-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } .pro-card .panel-inner-sm { padding: 18px 20px; } /* Debt teaser on dashboard */ .debt-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dt-item { display: flex; flex-direction: column; gap: 3px; } .dt-label { font-size: 10px; font-weight: 700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); } .dt-value { font-family:var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-primary); } /* Upcoming events on dashboard */ .upcoming-list { display: flex; flex-direction: column; gap: 7px; } .upcoming-item { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 8px; align-items: center; font-size: 12px; } .up-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .up-label { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .up-date { color: var(--text-faint); white-space: nowrap; } .up-amt { font-weight: 700; color: var(--text-primary); white-space: nowrap; } /* Sinking funds snapshot on dashboard */ .sf-snap { display: flex; flex-direction: column; gap: 10px; } .sf-snap-item { } .sf-snap-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); } .sf-snap-pct { font-size: 11px; font-weight: 700; color: var(--text-primary); } /* ── Budget Module Sections ────────────────────────────────── */ .budget-module-section { margin-bottom: 4px; } .module-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; margin-top: 22px; } .module-section-header:first-child { margin-top: 0; } .module-section-title { font-family:var(--font-display); font-size: 16px; font-weight: 700; } /* ── Debt Payoff ───────────────────────────────────────────── */ .debt-config-row { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; } .method-toggle { display: flex; gap: 10px; flex-wrap: wrap; } .method-btn { appearance: none; border: 2px solid var(--border-faint); background: var(--surface-strong); border-radius: var(--radius-md); padding: 12px 16px; cursor: pointer; text-align: left; transition: border-color .2s, background .2s; font-family: inherit; min-width: 200px; flex: 1; } .method-btn:hover { border-color: var(--grad-purple); } .method-btn.is-active { border-color: var(--grad-indigo); background: rgba(99,102,241,.08); } .method-btn-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .method-btn-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; } .field-hint { font-size: 11px; color: var(--text-faint); margin-top: 5px; line-height: 1.5; } /* Debt results */ .debt-results { } .debt-results-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 4px; } .dr-card { border-radius: var(--radius-md); padding: 18px; text-align: center; border: 1px solid var(--border-faint); } .dr-card--green { background: var(--income-bg); border-color: rgba(16,185,129,.2); } .dr-card--red { background: var(--expense-bg); border-color: rgba(244,63,94,.2); } .dr-card--blue { background: var(--savings-bg); border-color: rgba(59,130,246,.2); } .dr-label { font-size: 11px; font-weight: 700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:8px; } .dr-value { font-family:var(--font-display); font-size: 22px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; } .dr-sub { font-size: 11px; color: var(--text-faint); } .payoff-order-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-faint); flex-wrap: wrap; } .payoff-order-row:last-child { border-bottom: none; } .po-num { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,var(--grad-indigo),var(--grad-purple)); color:#fff; font-size: 12px; font-weight: 800; display:flex; align-items:center; justify-content:center; flex-shrink: 0; } .po-info { flex: 1; min-width: 0; } .po-name { font-weight: 700; font-size: 14px; } .po-detail { font-size: 12px; color: var(--text-secondary); } .po-date { font-size: 12px; color: var(--text-secondary); white-space: nowrap; } /* ── Sinking Funds ─────────────────────────────────────────── */ .sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; margin-bottom: 14px; } .sf-card .sf-card-inner { padding: 20px; } .sf-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .sf-icon { font-size: 2rem; line-height: 1; } .sf-card-actions { display: flex; gap: 4px; } .btn-icon-tiny { appearance: none; border: 1px solid var(--border-faint); background: var(--surface-strong); width: 28px; height: 28px; border-radius: 8px; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: color .15s, background .15s; } .btn-icon-tiny:hover { color: var(--grad-indigo); } .sf-name { font-weight: 700; font-size: 15px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sf-goal-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: var(--success); background: #10b98122; border-radius: 999px; padding: 2px 8px; } .sf-amounts { font-size: 14px; margin-bottom: 2px; } .sf-saved { font-family:var(--font-display); font-weight: 700; color: var(--text-primary); } .sf-divider { color: var(--text-faint); margin: 0 2px; } /* Block instead of inline - the saved amount + "/" stay together on their own line, and the target amount (a separate concern: the goal, not the progress) drops to a line of its own rather than running on. */ .sf-target { display: block; color: var(--text-secondary); margin-top: 1px; } .sf-pct { font-size: 11px; font-weight: 700; color: var(--text-faint); margin-bottom: 4px; } .sf-date { font-size: 11px; color: var(--text-secondary); margin-bottom: 2px; } .sf-monthly { font-size: 12px; color: var(--text-secondary); margin-top: 6px; font-weight:600; } .sf-months-left { font-size: 11px; color: var(--text-faint); margin-top: 2px; } .sf-total-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); font-size: 14px; color: var(--text-secondary); } .sf-total-row strong { font-family:var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-primary); } .icon-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .icon-pick-btn { appearance: none; border: 2px solid transparent; background: var(--surface-strong); width: 36px; height: 36px; border-radius: 8px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s; } .icon-pick-btn.is-active { border-color: var(--grad-indigo); } .icon-pick-btn:hover { border-color: var(--grad-purple); } /* ── Smart Calendar ────────────────────────────────────────── */ .cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .cal-month-title { font-family:var(--font-display); font-size: 17px; font-weight: 700; } .cal-grid-wrap { padding: 16px; } .cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; } .cal-dow { font-size: 11px; font-weight: 700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); text-align:center; padding: 6px 0 10px; } .cal-cell { min-height: 52px; border-radius: var(--radius-sm); background: rgba(30,27,46,.03); border: 1px solid var(--border-faint); padding: 5px 6px; position: relative; } .cal-empty { background: transparent; border-color: transparent; } .cal-today { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.3); } .cal-day-num { font-size: 12px; font-weight: 700; color: var(--text-secondary); display: block; margin-bottom: 3px; } .cal-today .cal-day-num { color: var(--grad-indigo); } .cal-dots { display: flex; flex-wrap: wrap; gap: 3px; } .cal-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .cal-dot-more { font-size: 9px; color: var(--text-faint); font-weight: 700; } .cal-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 20px; font-size: 12px; color: var(--text-secondary); } .cal-leg-item { display: flex; align-items: center; gap: 5px; } .cal-events-list { display: flex; flex-direction: column; gap: 0; } .cal-ev-day { margin-bottom: 8px; } .cal-ev-date { font-size: 11px; font-weight: 700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); padding: 8px 0 4px; } .cal-ev-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-faint); margin-bottom: 4px; font-size: 13px; } .cal-ev-label { flex: 1; font-weight: 600; } .cal-ev-type { color: var(--text-faint); font-size: 11px; text-transform: capitalize; } .cal-ev-amt { font-weight: 700; color: var(--text-primary); } .cal-ev-status { font-size: 11px; font-weight: 700; } .cal-ev-status.is-paid { color: var(--success); } .cal-ev-status.is-unpaid { color: var(--error); } .cal-mark-paid { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--error); } .cal-mark-paid:hover { color: var(--text-primary); } /* ── Subscriptions ─────────────────────────────────────────── */ .sub-summary-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 16px 20px; } .sub-sum-item { text-align: center; } .sub-sum-label { font-size: 10px; font-weight: 700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom: 6px; } .sub-sum-value { font-family:var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-primary); } .sub-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; } .sub-list-col { display: flex; flex-direction: column; gap: 10px; align-items: stretch; } .sub-chart-col { min-width: 0; } .sub-card { } .sub-card.sub-paused { opacity: .6; } .sub-card-inner { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; } .sub-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .sub-card-left { flex: 1; min-width: 0; } .sub-amount-block { text-align: right; flex-shrink: 0; } .sub-name { font-weight: 700; font-size: 14.5px; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sub-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sub-cat-pill { background: var(--savings-bg); color: var(--savings); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); } .sub-due { font-size: 11px; color: var(--text-faint); } .sub-amount { font-family:var(--font-display); font-weight: 700; font-size: 18px; white-space: nowrap; } .sub-freq { font-size: 12px; color: var(--text-faint); font-weight: 500; } .sub-monthly-eq { font-size: 11px; color: var(--text-secondary); margin-top: 2px; } .sub-price-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; margin-top: 3px; cursor: default; } .sub-price-delta.is-up { color: var(--error); } .sub-price-delta.is-down { color: var(--success); } .sub-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 11px; border-top: 1px solid var(--border-faint); } .sub-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .sub-toggle { appearance: none; border: 1px solid var(--border-faint); background: var(--surface-strong); padding: 4px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; cursor: pointer; color: var(--text-secondary); font-family: inherit; transition: color .15s; } .sub-toggle:hover { color: var(--text-primary); } .btn-ghost-sm { appearance: none; border: 1px solid var(--border-faint); background: var(--surface-strong); padding: 5px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-secondary); font-family: inherit; } /* ── SBP Import Banner ─────────────────────────────────────── */ .import-banner { background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(249,115,22,.08)); border: 1px solid rgba(245,158,11,.3); border-radius: var(--radius-md); margin-bottom: 16px; } .import-banner-inner { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .import-banner-text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; } .import-banner-text strong { color: var(--text-primary); } .import-banner-btns { display: flex; gap: 8px; flex-shrink: 0; } /* ── UBP Responsive ────────────────────────────────────────── */ @media (max-width: 900px) { .pro-stats-row { grid-template-columns: repeat(2,1fr); } .pro-bottom-row { grid-template-columns: 1fr; } .debt-results-cards { grid-template-columns: 1fr 1fr; } .sub-layout { grid-template-columns: 1fr; } } @media (max-width: 700px) { .pro-stats-row { grid-template-columns: 1fr 1fr; } .method-toggle { flex-direction: column; } .debt-results-cards { grid-template-columns: 1fr; } .sub-summary-bar { grid-template-columns: 1fr 1fr; } .sf-grid { grid-template-columns: 1fr 1fr; } .cal-dow, .cal-cell { font-size: 10px; } } @media (max-width: 480px) { .pro-stats-row { grid-template-columns: 1fr; } .sf-grid { grid-template-columns: 1fr; } .sub-summary-bar { grid-template-columns: 1fr 1fr; } } /* ── Mobile collapse fixes (prevent horizontal clipping) ─────── */ @media (max-width: 480px) { /* 4-/3-column filter bars are too tight to be usable on phones */ .tx-filter-bar, .tx-filter-bar--3col { grid-template-columns: 1fr 1fr; } /* 3 allocation cards force a nowrap target badge to overflow its column */ .alloc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Modal padding eats the whole viewport on small screens */ .modal { padding: 26px 20px; } } /* ═══════════════════════════════════════════════════════════════ LAYOUT SYSTEM - Classic / Sidebar / Command ═══════════════════════════════════════════════════════════════ */ /* ── Nav spacing - more room between tab bar and content ─────── */ .budget-tabs { margin-bottom: 22px; } .bview.is-active { padding-top: 4px; } /* ── Theme pill / Dashboard Layout pill with text labels ──────── */ /* .layout-setting-row (Settings → Dashboard Layout) mirrors .theme-setting-row (Settings → Appearance) exactly - same container-query breakpoints so both pickers reflow identically regardless of the settings panel's actual width. */ .theme-setting-row, .layout-setting-row { margin-top: 6px; } .theme-setting-row, .layout-setting-row { container-type: inline-size; } .theme-setting-row .theme-pill, .layout-setting-row .theme-pill { display: flex; flex-wrap: wrap; gap: 10px; background: none; border: none; padding: 0; width: 100%; } .theme-setting-row .theme-opt, .layout-setting-row .layout-opt { flex: 1 1 calc(33.333% - 7px); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 16px; min-height: 52px; min-width: 90px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-faint); background: var(--surface-strong); font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all .2s var(--ease); white-space: nowrap; overflow: hidden; } /* Once the settings panel itself is wide enough, fit all 5 options on one row (a viewport media query isn't reliable here - the panel is often much narrower than the viewport, e.g. inside the two/three-column settings grid) */ @container (min-width: 420px) { .theme-setting-row .theme-opt, .layout-setting-row .layout-opt { flex: 1; min-width: 0; gap: 6px; padding: 13px 6px; font-size: 12.5px; } .theme-setting-row .theme-opt svg, .layout-setting-row .layout-opt svg { width: 15px; height: 15px; flex-shrink: 0; } .theme-setting-row .theme-pill, .layout-setting-row .theme-pill { gap: 8px; } } @container (min-width: 640px) { .theme-setting-row .theme-opt, .layout-setting-row .layout-opt { gap: 8px; padding: 14px 10px; font-size: 13.5px; } .theme-setting-row .theme-opt svg, .layout-setting-row .layout-opt svg { width: 16px; height: 16px; } .theme-setting-row .theme-pill, .layout-setting-row .theme-pill { gap: 10px; } } .theme-setting-row .theme-opt svg, .layout-setting-row .layout-opt svg { width: 18px; height: 18px; flex-shrink: 0; } .theme-setting-row .theme-opt.is-active, .layout-setting-row .layout-opt.is-active { background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple)); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(var(--grad-indigo-rgb),.35); } .theme-setting-row .theme-opt:not(.is-active):hover, .layout-setting-row .layout-opt:not(.is-active):hover { border-color: var(--grad-indigo); color: var(--grad-indigo); } .layout-setting-row .layout-opt:disabled { opacity: .5; cursor: not-allowed; } .layout-setting-row .layout-opt:disabled:hover { border-color: var(--border-faint); color: var(--text-secondary); } /* ── SIDEBAR layout ──────────────────────────────────────────── */ .side-nav { display: none; position: fixed; left: max(8px, calc(50vw - 586px)); /* positioned left of centered 1020px app */ top: 50%; transform: translateY(-50%); z-index: 200; width: 58px; flex-direction: column; gap: 4px; background: var(--surface-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 12px 8px; overflow: hidden; transition: width .25s var(--ease); box-shadow: var(--shadow-pop); max-height: calc(100vh - 120px); } .layout-sidebar .side-nav { display: flex; } .layout-sidebar.sidebar-expanded .side-nav { width: 200px; left: max(8px, calc(50vw - 777px)); } /* Hide classic tab bar in sidebar layout */ .layout-sidebar #ubpTabs { display: none !important; } /* Shift main app content right when sidebar is visible */ /* Sidebar floats - content stays centered */ .layout-sidebar .app { margin-left: 0; } .layout-sidebar.sidebar-expanded .app { margin-left: 0; } /* Toggle arrow at top of sidebar */ .side-nav-toggle { appearance: none; border: 1px solid var(--border-faint); background: var(--surface-strong); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); margin-bottom: 8px; flex-shrink: 0; align-self: flex-end; transition: color .15s, background .15s; } .side-nav-toggle:hover { color: var(--grad-indigo); background: rgba(99,102,241,.08); } #sideNavArrow { transition: transform .25s var(--ease); } /* Sidebar nav items */ .side-nav-item { appearance: none; border: none; background: transparent; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); font-family: inherit; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; transition: background .15s, color .15s; flex-shrink: 0; } .side-nav-item:hover:not(.is-active) { background: rgba(99,102,241,.07); color: var(--text-primary); } .side-nav-item.is-active { background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(192,38,211,.1)); color: var(--grad-indigo); } /* Icon stays fixed-width so layout doesn't jump on expand */ .sni { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; line-height: 1; } .snl { opacity: 0; transition: opacity .2s var(--ease); pointer-events: none; } .layout-sidebar.sidebar-expanded .snl { opacity: 1; pointer-events: auto; } /* ── COMMAND layout ──────────────────────────────────────────── */ .hero-header { display: none; /* hidden unless layout-command */ flex-direction: column; gap: 0; background: linear-gradient(135deg, var(--grad-indigo) 0%, var(--grad-purple) 55%, var(--grad-pink) 100%); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow-pop); } .layout-command .hero-header { display: flex; } /* Hide classic tabs in command layout */ .layout-command #ubpTabs, .layout-command .side-nav { display: none !important; } /* Hero stats bar across top */ .hero-stats { display: flex; align-items: center; gap: 0; padding: 18px 28px; flex-wrap: wrap; } .hero-stat-item { display: flex; flex-direction: column; gap: 3px; padding: 0 20px 0 0; } .hero-stat-value { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: rgba(255,255,255,.97); } .hero-stat-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); } .hero-stat-sep { width: 1px; height: 36px; background: rgba(255,255,255,.2); margin-right: 20px; flex-shrink: 0; } /* Command nav pills */ .command-nav { display: flex; gap: 4px; padding: 10px 16px; background: rgba(0,0,0,.18); overflow-x: auto; scrollbar-width: none; } .command-nav::-webkit-scrollbar { display: none; } .cnav-btn { appearance: none; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.1); border-radius: var(--radius-pill); padding: 8px 16px; font-family: inherit; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; flex-shrink: 0; } .cnav-btn:hover:not(.is-active) { background: rgba(255,255,255,.2); color: #fff; } .cnav-btn.is-active { background: rgba(255,255,255,.95); color: var(--grad-indigo); border-color: transparent; } /* ── Upgrade banner (SBP Dashboard) ─────────────────────────── */ .upgrade-banner { border-radius: var(--radius-md); margin-top: 20px; background: linear-gradient(135deg, rgba(79,70,229,.10), rgba(236,72,153,.08)); border: 1px solid rgba(99,102,241,.25); overflow: hidden; } .upgrade-banner-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 0; gap: 8px; } .upgrade-banner-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text-primary); } .upgrade-rocket { font-size: 1.4rem; line-height: 1; } .upgrade-close { appearance: none; border: 1px solid var(--border-faint); background: var(--surface-strong); color: var(--text-faint); font-size: 16px; cursor: pointer; line-height: 1; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color .15s; } .upgrade-close:hover { color: var(--text-primary); } .upgrade-inner { display: flex; align-items: center; gap: 16px; padding: 10px 18px 16px; flex-wrap: wrap; } .upgrade-content { flex: 1; min-width: 0; } .upgrade-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .upgrade-cta { flex-shrink: 0; } /* ── Subscription legend - stacked ──────────────────────────── */ .dleg-stack { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; } .dleg-sub-amt { font-size: 11px; color: var(--text-faint); font-weight: 500; } /* Fix dleg-label width when stacked */ .dleg-stack .dleg-label { flex: none; } /* ── SBP dashboard nav → content spacing ────────────────────── */ .budget-tabs { padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--border-faint); } /* ── Dark mode sidebar ───────────────────────────────────────── */ [data-theme="dark"] .side-nav { background: rgba(14,8,32,.92); border-right-color: rgba(var(--grad-indigo-rgb),.1); } [data-theme="dark"] .side-nav-item:hover:not(.is-active) { background: rgba(var(--grad-indigo-rgb),.08); } [data-theme="dark"] .side-nav-item.is-active { background: rgba(var(--grad-indigo-rgb),.14); } [data-theme="dark"] .command-nav { background: rgba(0,0,0,.32); } [data-theme="dark"] .cnav-btn.is-active { color: var(--text-primary); } /* ── Responsive adjustments ──────────────────────────────────── */ @media (max-width: 700px) { .hero-stats { padding: 14px 16px; } .hero-stat-item { padding-right: 12px; } .hero-stat-value { font-size: 14px; } .layout-sidebar .app { margin-left: 62px; } .layout-sidebar.sidebar-expanded .app { margin-left: 210px; } .upgrade-inner { flex-direction: column; align-items: flex-start; gap: 10px; } } /* ── Donut chart interactivity ────────────────────────────────── */ .donut-svg { overflow: visible; } .dseg { transition: stroke-width .18s var(--ease), opacity .18s; cursor: pointer; } .donut-hover-pct { transition: opacity .15s; } .donut-hover-lbl { transition: opacity .15s; } /* ── Dashboard entrance animation (SBP + UBP, both layouts) ────── .dash-anim-in IS the "before" state (JS adds it on mount); adding .is-visible a frame later is what triggers the transition, staggered per element via --dash-anim-i (set inline by animateCardsIn). Arc/bar/ pie draw-in for donuts, gauges, radial rings and pie wedges is handled entirely through transient inline styles in charts.js's animateDashboardEntrance() - no CSS needed for those, since they reuse transitions those elements already have (or the animator appends one inline). This block only covers the card/row fade+rise. */ .dash-anim-in { opacity: 0; transform: translateY(10px); } .dash-anim-in.is-visible { opacity: 1; transform: translateY(0); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--dash-anim-i, 0) * 45ms); } @media (prefers-reduced-motion: reduce) { .dash-anim-in { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── Calendar day selection ───────────────────────────────────── */ .cal-cell { cursor: pointer; transition: background .15s; } .cal-cell:hover:not(.cal-empty) { background: rgba(99,102,241,.08); } .cal-cell.cal-selected { background: rgba(99,102,241,.12) !important; border-color: rgba(99,102,241,.4) !important; box-shadow: 0 0 0 2px rgba(99,102,241,.2); } .cal-cell.cal-selected .cal-day-num { color: var(--grad-indigo); font-weight: 800; } .cal-selected-events { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 16px 20px; margin: 12px 0; box-shadow: var(--shadow-card); } .cal-selected-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--text-primary); } .cal-no-events { font-size: 13px; color: var(--text-faint); padding: 4px 0; } /* ── Navigation label in settings ───────────────────────────────────── */ /* (handled in JS; no special CSS needed) */ /* ── Upgrade comparison modal ─────────────────────────────────── */ .modal.compare-modal { max-width: 820px; width: min(820px, 92vw); } .compare-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; } .compare-table thead tr { border-bottom: 2px solid var(--border-faint); } .compare-table th { padding: 10px 14px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); } .compare-table th.col-simple { text-align: center; color: var(--grad-indigo); } .compare-table th.col-ultimate { text-align: center; color: var(--grad-purple); } .compare-table td { padding: 9px 14px; border-bottom: 1px solid var(--border-faint); vertical-align: middle; color: var(--text-secondary); } .compare-table td.col-simple, .compare-table td.col-ultimate { text-align: center; font-size: 17px; } .compare-table tr:last-child td { border-bottom: none; } .compare-table tr:hover td { background: rgba(99,102,241,.03); } .compare-table .feat-cell { display: flex; align-items: center; gap: 9px; } .compare-table .feat-icon { font-size: 16px; flex-shrink: 0; width: 22px; text-align: center; } .compare-table .feat-text { color: var(--text-primary); font-weight: 500; } .compare-section-row td { background: var(--surface-strong); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding: 6px 14px; } .compare-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; } /* ── UBP Welcome / getting started card ──────────────────────── */ .welcome-card { background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(236,72,153,.06)); border: 1px solid rgba(99,102,241,.2); border-radius: var(--radius-md); padding: 22px 24px; margin-bottom: 18px; position: relative; } .welcome-card-close { position: absolute; top: 12px; right: 14px; appearance: none; border: 1px solid var(--border-faint); background: var(--surface-strong); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text-faint); cursor: pointer; line-height: 1; transition: color .15s; } .welcome-card-close:hover { color: var(--text-primary); } .welcome-card-title { font-family: var(--font-display); font-size: 17px; font-weight: 800; margin-bottom: 6px; } .welcome-card-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; } .welcome-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 10px; } .welcome-step { background: var(--surface-strong); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); padding: 12px 14px; } .welcome-step-num { font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing:.1em; text-transform:uppercase; color: var(--grad-indigo); margin-bottom: 4px; } .welcome-step-title { font-weight: 700; font-size: 13px; margin-bottom: 3px; } .welcome-step-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.5; } /* ── Video tutorial button in help modals ────────────────────── */ .help-video-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 20px; border-radius: var(--radius-pill); background: #ff0000; color: #fff; font-weight: 700; font-size: 13px; border: none; cursor: pointer; text-decoration: none; font-family: inherit; transition: opacity .15s; } .help-video-btn:hover { opacity: .85; } /* Subscriptions empty state centered */ .sub-empty-centered { text-align: center; padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .sub-empty-centered .empty-icon { font-size: 2.5rem; margin-bottom: 4px; } .sub-empty-centered p { margin: 0; } /* Subscriptions full-width empty state */ .sub-empty-centered { grid-column: 1 / -1; text-align: center; padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; } .row-pro-only td { background: rgba(99,102,241,.03); } .col-feat { width: 70%; } .col-simple, .col-ultimate { width: 15%; } /* ── Keyboard navigation & focus ─────────────────────────────────── */ :focus-visible { outline: 2px solid var(--grad-indigo); outline-offset: 2px; } /* Calendar key-navigable indicator */ .cal-cell:focus { outline: 2px solid var(--grad-indigo); outline-offset: -2px; border-radius: var(--radius-sm); } .cal-cell:focus .cal-day-num { color: var(--grad-indigo); } .panel.settings-card--danger { grid-column: auto; } /* ═══════════════════════════════════════════════════════════════ PERIOD COMPARISON PANEL (Issue 19) ═══════════════════════════════════════════════════════════════ */ .compare-panel { padding: 12px 16px; margin: 10px 0 14px; } .compare-inner { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .compare-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-right: 6px; white-space: nowrap; } .compare-item { display: flex; align-items: center; gap: 6px; background: var(--glass); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); padding: 6px 10px; } .compare-key { font-size: 11px; color: var(--text-faint); font-weight: 600; white-space: nowrap; } .compare-vals { font-size: 12px; font-weight: 700; font-family: var(--font-display); color: var(--text-primary); display: flex; align-items: center; gap: 5px; } .compare-delta { font-size: 10px; font-weight: 800; letter-spacing: .02em; } .compare-no-data { font-size: 11px; color: var(--text-faint); font-style: italic; } /* ═══════════════════════════════════════════════════════════════ RECURRING RULES PANEL (Issue 20) ═══════════════════════════════════════════════════════════════ */ .recurring-panel { margin: 10px 0 4px; border-radius: var(--radius-md); border: 1px solid var(--border-faint); background: rgba(30,27,46,.04); } [data-theme="dark"] .recurring-panel { background: rgba(var(--grad-indigo-rgb),.04); } .recurring-summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; user-select: none; font-size: 12px; font-weight: 700; color: var(--text-secondary); letter-spacing: .04em; list-style: none; /* remove default marker */ } .recurring-summary::-webkit-details-marker { display: none; } .recurring-summary-title { display: inline-flex; align-items: center; gap: 7px; } .recurring-summary-icon { flex-shrink: 0; font-size: 15px; line-height: 1; } .recurring-summary::before { content: '▶'; font-size: 9px; margin-right: 8px; color: var(--text-faint); transition: transform .15s; } details[open] > .recurring-summary::before { transform: rotate(90deg); } .recurring-count { font-size: 10px; font-weight: 700; background: rgba(99,102,241,.14); color: var(--grad-indigo); border-radius: 99px; padding: 1px 7px; min-width: 18px; text-align: center; } .recurring-body { padding: 4px 14px 14px; } .guide-usecase { margin-top: 4px; } .guide-usecase .recurring-body p { margin: 0 0 12px; font-size: 13px; line-height: 1.65; color: var(--text-secondary); } .guide-usecase .recurring-body p:last-child { margin-bottom: 0; } .guide-usecase .recurring-body strong { color: var(--text-primary); } .recurring-desc { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); margin: 2px auto 14px; max-width: 60ch; text-align: center; } .recurring-empty { font-size: 12px; color: var(--text-faint); font-style: italic; margin: 6px 0 10px; } .recurring-body.is-empty .recurring-empty { text-align: center; } .recurring-body.is-empty #addRecurringBtn { display: block; margin: 0 auto; } .recurring-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .recurring-row { display: grid; grid-template-columns: auto 1fr auto auto auto auto auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--border-faint); font-size: 12px; } .recurring-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .recurring-row-label { font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recurring-row-cat { color: var(--text-secondary); font-size: 11px; } .recurring-row-amt { font-weight: 700; font-family: var(--font-display); color: var(--text-primary); white-space: nowrap; } .recurring-row-freq { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing:.05em; white-space: nowrap; } .recurring-row-due { font-size: 11px; color: var(--text-secondary); white-space: nowrap; } @media (max-width: 480px) { /* 7-column recurring rule rows overflow/clip on phones - wrap them */ .recurring-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; } .recurring-row-label { flex: 1 1 55%; min-width: 0; white-space: normal; } .recurring-actions { margin-left: auto; } } /* Toggle switch */ .recurring-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; } .recurring-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .rec-toggle-track { display: inline-block; width: 38px; height: 22px; background: rgba(120,124,145,.32); border: 1px solid rgba(120,124,145,.5); border-radius: 99px; transition: background .2s, border-color .2s; } .rec-toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .2s; } .recurring-toggle input:checked + .rec-toggle-track { background: #10b981; border-color: #10b981; } .recurring-toggle input:checked + .rec-toggle-track::after { transform: translateX(16px); } .recurring-toggle input:disabled + .rec-toggle-track { opacity: .5; } .recurring-toggle:has(input:disabled) { cursor: not-allowed; } /* ═══════════════════════════════════════════════════════════════ ALLOC STATUS ICON (Issue 21) ═══════════════════════════════════════════════════════════════ */ .alloc-status-icon { display: inline-block; width: 14px; text-align: center; font-size: 9px; font-weight: 900; } /* ═══════════════════════════════════════════════════════════════ SINKING FUND COUNTDOWN (Issue 24) ═══════════════════════════════════════════════════════════════ */ .sf-overdue { color: #f43f5e !important; font-weight: 700; } .sf-complete { color: #10b981 !important; font-weight: 700; } .sf-today { color: #fb923c !important; font-weight: 700; } .sf-days-left { font-size: 11px; font-weight: 700; color: var(--text-secondary); } /* ═══════════════════════════════════════════════════════════════ IN-APP CONFIRM / ALERT DIALOG (replaces native confirm/alert) Matches the glass modal system; sits above help/edit modals. ═══════════════════════════════════════════════════════════════ */ .fk-dialog-overlay { position: fixed; inset: 0; background: rgba(15,10,30,.58); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .18s var(--ease); } .fk-dialog-overlay.is-open { opacity: 1; } .fk-dialog { background: var(--surface-solid); border-radius: var(--radius-lg); box-shadow: 0 40px 100px rgba(0,0,0,.30); max-width: 400px; width: 100%; padding: 30px 28px 24px; text-align: center; position: relative; transform: translateY(14px) scale(.97); opacity: 0; transition: transform .22s var(--ease), opacity .22s var(--ease); } .fk-dialog-overlay.is-open .fk-dialog { transform: translateY(0) scale(1); opacity: 1; } .fk-dialog-icon { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; background: rgba(99,102,241,.12); } .fk-dialog--danger .fk-dialog-icon { background: rgba(244,63,94,.13); } .fk-dialog-msg { font-size: 15px; line-height: 1.6; color: var(--text-primary); font-weight: 500; margin: 0 0 22px; white-space: pre-line; } .fk-dialog-actions { display: flex; gap: 10px; justify-content: center; } .fk-dialog-actions .btn { min-width: 118px; justify-content: center; } [data-theme="dark"] .fk-dialog-icon { background: rgba(var(--grad-indigo-rgb),.18); } [data-theme="dark"] .fk-dialog--danger .fk-dialog-icon { background: rgba(244,63,94,.20); } @media (max-width: 480px) { .fk-dialog-overlay { padding: 16px; align-items: flex-end; } .fk-dialog { padding: 26px 20px 20px; border-radius: var(--radius-lg); transform: translateY(30px); max-width: 100%; } .fk-dialog-overlay.is-open .fk-dialog { transform: translateY(0); } .fk-dialog-actions { flex-direction: column-reverse; } .fk-dialog-actions .btn { width: 100%; padding: 13px; } } /* ═══════════════════════════════════════════════════════════════ UI CONSISTENCY PASS (v1.5): themed scrollbars, number steppers, custom calendar popup - replaces mismatched native controls. ═══════════════════════════════════════════════════════════════ */ /* ── Themed scrollbars ─────────────────────────────────────────── */ :root { --sb-thumb: rgba(99,102,241,.35); --sb-thumb-hover: rgba(99,102,241,.6); } [data-theme="dark"] { --sb-thumb: rgba(var(--grad-indigo-rgb),.42); --sb-thumb-hover: rgba(var(--grad-indigo-rgb),.72); } * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ── Number inputs: hide native spinners, add themed steppers ───── */ input[type="number"] { -moz-appearance: textfield; appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .num-field { position: relative; display: block; width: 100%; } .num-field > input.input { width: 100%; padding-right: 34px; } .num-steppers { position: absolute; top: 5px; right: 6px; bottom: 5px; width: 22px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; } .num-step { flex: 1 1 0; min-height: 0; border: 1px solid var(--border-faint); background: var(--surface-strong); border-radius: 6px; color: var(--text-secondary); font-size: 7px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: all .12s; pointer-events: auto; } .num-step:hover { color: #fff; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple)); border-color: transparent; } .num-step:active { transform: scale(.88); } /* ── Native date icon hidden (custom calendar is used) ─────────── */ input[type="date"]::-webkit-calendar-picker-indicator { display: none; opacity: 0; } input[type="date"] { -webkit-appearance: none; appearance: none; } /* ── Custom calendar popup ─────────────────────────────────────── */ .fk-datepop { position: absolute; z-index: 3500; width: 300px; background: var(--surface-solid); border: 1px solid var(--border-faint); border-radius: var(--radius-md); box-shadow: 0 24px 60px rgba(0,0,0,.22); padding: 14px; font-family: inherit; animation: fk-dp-in .14s var(--ease, ease); } @keyframes fk-dp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .fk-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .fk-dp-title { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text-primary); text-transform: capitalize; } .fk-dp-nav { width: 30px; height: 30px; border: 1px solid var(--border-faint); background: var(--surface-strong); border-radius: 8px; cursor: pointer; color: var(--text-secondary); font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all .12s; } .fk-dp-nav:hover { color: #fff; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple)); border-color: transparent; } .fk-dp-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 4px; } .fk-dp-dow span { text-align: center; font-size: 10px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; padding: 4px 0; } .fk-dp-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; } .fk-dp-day { aspect-ratio: 1 / 1; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-primary); display: flex; align-items: center; justify-content: center; transition: background .1s, color .1s; font-family: inherit; } .fk-dp-day:hover:not(.fk-dp-empty) { background: rgba(99,102,241,.12); } .fk-dp-empty { cursor: default; } .fk-dp-day.is-today { box-shadow: inset 0 0 0 1.5px var(--grad-purple); color: var(--grad-purple); font-weight: 700; } .fk-dp-day.is-sel { background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple)); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(99,102,241,.4); } .fk-dp-foot { display: flex; gap: 8px; margin-top: 10px; } .fk-dp-today, .fk-dp-clear { flex: 1; padding: 7px; border: 1px solid var(--border-faint); background: var(--surface-strong); border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-secondary); font-family: inherit; transition: all .12s; } .fk-dp-today:hover, .fk-dp-clear:hover { color: var(--text-primary); border-color: var(--grad-purple); } @media (max-width: 480px) { .fk-datepop { position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: calc(100% - 40px); max-width: 340px; animation: none; } } /* ── Automation: "Automate this" rows + linked-template badge ──────────── */ .automate-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--border-faint); border-radius: var(--radius-sm); background: var(--surface-strong); cursor: pointer; } .automate-row.is-off { opacity: .6; cursor: not-allowed; } .automate-row-text { display: flex; flex-direction: column; gap: 2px; } .automate-row-title { font-size: 13px; font-weight: 600; color: var(--text-primary); } .automate-row-hint { font-size: 11px; color: var(--text-faint); line-height: 1.4; } .rec-source-badge { margin-left: 6px; font-size: 11px; opacity: .85; } /* ── Card quick-toggles (subscriptions two-toggle, fund auto-contribute) ── */ .sub-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .sub-toggle-rows { display: flex; flex-direction: row; gap: 18px; align-items: center; flex-wrap: wrap; } .mini-toggle { display: inline-flex; align-items: center; gap: 7px; } .mini-toggle-label { font-size: 10.5px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; } .mini-toggle.is-off { opacity: .55; } .sub-btn-row { display: flex; align-items: center; gap: 4px; } .sf-auto-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-faint); } .sf-auto-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); } .sf-auto-row.is-off { opacity: .55; } /* Larger, prominent Automate toggle inside entity creation/edit modals */ .automate-row { padding: 15px 16px; } .automate-row .automate-row-title { font-size: 14px; } .automate-row .automate-row-hint { font-size: 11.5px; } .automate-row .rec-toggle-track { width: 50px; height: 28px; flex-shrink: 0; } .automate-row .rec-toggle-track::after { width: 20px; height: 20px; top: 4px; left: 4px; } .automate-row input:checked + .rec-toggle-track::after { transform: translateX(22px); } /* Required-field validation highlight (fund modal etc.) */ .input.fk-invalid, .select.fk-invalid, .date-field-styled.fk-invalid { border-color: #f43f5e !important; box-shadow: 0 0 0 3px rgba(244,63,94,.14); } /* Read-only table row actions (debt) */ .row-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } /* ── Editable planner title ────────────────────────────────────────────── */ .app-title-editable { cursor: pointer; border-radius: 6px; padding: 1px 5px; margin: -1px -5px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s, background .15s; } .app-title-editable:hover, .app-title-editable:focus-visible { text-decoration-color: currentColor; background: rgba(255,255,255,.14); outline: none; } [data-theme="dark"] .app-title-editable:hover { background: rgba(255,255,255,.08); } .fk-rename-input { margin: 2px 0 20px; text-align: center; } /* ── Custom color picker popup (styled like the date picker) ───────────── */ .fk-colorpop { position: absolute; z-index: 3500; background: var(--surface-solid); border: 1px solid var(--border-faint); border-radius: var(--radius-md); box-shadow: 0 24px 60px rgba(0,0,0,.22); padding: 14px; animation: fk-dp-in .14s var(--ease, ease); } .fk-colorpop-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; } .fk-color-swatch { width: 30px; height: 30px; border-radius: 9px; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform .12s; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); } .fk-color-swatch:hover { transform: scale(1.14); } .fk-color-swatch.is-sel { border-color: var(--surface-solid); box-shadow: 0 0 0 2px var(--grad-purple); } .fk-colorpop-custom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-faint); font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; } .fk-colorpop-input { width: 34px; height: 28px; border: 1px solid var(--border); border-radius: 7px; padding: 2px; cursor: pointer; background: none; } @media (max-width: 480px) { .fk-colorpop { position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); animation: none; } } /* ── Upgrade to Ultimate section (SBP dashboard) ─────────────────────── */ .upgrade-pro { position: relative; margin-top: 22px; padding: 18px 20px; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(236,72,153,.12), rgba(251,146,60,.08)); border: 1px solid rgba(99,102,241,.28); box-shadow: 0 20px 50px -22px rgba(99,102,241,.45); } .upgrade-pro::before { content:''; position:absolute; top:-40%; right:-8%; width:280px; height:280px; background:radial-gradient(circle, rgba(236,72,153,.22), transparent 70%); pointer-events:none; } .upgrade-pro-close { position: absolute; top: 10px; right: 10px; z-index: 2; appearance: none; border: none; cursor: pointer; background: rgba(30,27,46,.07); width: 26px; height: 26px; border-radius: 50%; font-size: 16px; line-height: 1; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; transition: background .15s; } .upgrade-pro-close:hover { background: rgba(30,27,46,.14); } [data-theme="dark"] .upgrade-pro-close { background: rgba(var(--grad-indigo-rgb),.12); } [data-theme="dark"] .upgrade-pro-close:hover { background: rgba(var(--grad-indigo-rgb),.2); } .upgrade-pro-head { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; margin-bottom: 5px; padding-right: 26px; position: relative; } .upgrade-pro-title { font-family:var(--font-display); font-size:16px; font-weight:800; color:var(--text-primary); margin:0; position:relative; } .upgrade-pro-badge { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.08em; color:#fff; background:linear-gradient(135deg,var(--grad-indigo),var(--grad-purple)); padding:3px 9px; border-radius:var(--radius-pill); position:relative; flex-shrink:0; } .upgrade-pro-sub { font-size:12.5px; line-height:1.55; color:var(--text-secondary); margin:0 auto 13px; max-width:62ch; text-align:center; position:relative; } @media (min-width: 640px){ .upgrade-pro-sub { max-width:none; white-space:nowrap; } } .upgrade-pro-feats { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-bottom:15px; position:relative; } .upgrade-feat { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--text-primary); background:var(--surface-strong); border:1px solid var(--border-faint); border-radius:var(--radius-pill); padding:5px 10px 5px 8px; white-space:nowrap; } .upgrade-pro-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; position:relative; } .upgrade-get { font-weight:800; letter-spacing:.03em; } .upgrade-compare { font-weight:700; letter-spacing:.03em; } @media (max-width: 430px){ .upgrade-pro-actions .btn { width:100%; } } [data-theme="dark"] .upgrade-pro { background: linear-gradient(135deg, rgba(var(--grad-indigo-rgb),.16), rgba(236,72,153,.12), rgba(251,146,60,.08)); border-color: rgba(var(--grad-indigo-rgb),.3); } /* ── Bold empty-state titles + CTA ───────────────────────────────────── */ .empty-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; } .empty-cta { margin-top: 16px; } /* ── Upgrade prompt (free-trial gating) ──────────────────────────────── */ .fk-up-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,10,30,.62); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; } .fk-up-overlay.is-in { opacity: 1; } .fk-up-overlay.is-leaving { opacity: 0; } .fk-up-card { position: relative; width: 100%; max-width: 420px; background: var(--surface-solid); border-radius: 24px; overflow: hidden; box-shadow: 0 40px 100px rgba(20,8,50,.45); transform: translateY(14px) scale(.97); opacity: 0; transition: transform .28s var(--ease), opacity .28s var(--ease); max-height: calc(100vh - 40px); overflow-y: auto; } .fk-up-overlay.is-in .fk-up-card { transform: translateY(0) scale(1); opacity: 1; } .fk-up-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 19px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .fk-up-x:hover { background: rgba(255,255,255,.32); } .fk-up-hero { position: relative; overflow: hidden; padding: 30px 30px 26px; text-align: center; color: #fff; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 52%, var(--grad-pink)); } .fk-up-glow { position: absolute; top: -60%; left: 50%; width: 320px; height: 320px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 62%); } .fk-up-badge { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); font-size: 11px; font-weight: 600; letter-spacing: .02em; } .fk-up-title { position: relative; font-family: var(--font-display); font-weight: 800; font-size: 25px; line-height: 1.15; margin: 0 0 10px; } .fk-up-sub { position: relative; font-size: 13.5px; line-height: 1.55; margin: 0 auto; max-width: 34ch; color: rgba(255,255,255,.9); } .fk-up-body { padding: 22px 26px 24px; } .fk-up-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 11px; } .fk-up-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-primary); } .fk-up-list strong { font-weight: 700; } .fk-up-check { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; color: var(--grad-purple); } .fk-up-price-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 16px; } .fk-up-price { display: flex; align-items: baseline; gap: 6px; } .fk-up-price-num { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--text-primary); } .fk-up-price-tag { font-size: 12px; color: var(--text-secondary); font-weight: 600; } .fk-up-price-note { font-size: 11px; font-weight: 600; color: var(--income); background: var(--income-bg); padding: 3px 9px; border-radius: 999px; } .fk-up-cta { width: 100%; border: none; cursor: pointer; border-radius: 14px; padding: 14px 18px; font-size: 15px; font-weight: 700; color: #fff; font-family: var(--font-display); background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); box-shadow: 0 14px 30px -10px rgba(76,29,149,.55); transition: transform .15s, box-shadow .15s; } .fk-up-cta:hover { transform: translateY(-1px); box-shadow: 0 18px 38px -10px rgba(76,29,149,.6); } .fk-up-cta:active { transform: translateY(0); } .fk-up-upsell { width: 100%; margin-top: 10px; cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-strong); border: 1px solid var(--border-faint); transition: border-color .15s, background .15s; } .fk-up-upsell:hover { border-color: rgba(147,51,234,.4); } .fk-up-upsell-lead { font-size: 12.5px; color: var(--text-secondary); } .fk-up-upsell-cta { font-size: 12.5px; font-weight: 700; color: var(--grad-purple); white-space: nowrap; } .fk-up-foot { margin-top: 16px; display: flex; align-items: center; justify-content: center; } .fk-up-later { background: none; border: none; cursor: pointer; padding: 6px 10px; font-size: 13px; color: var(--text-faint); font-weight: 600; } .fk-up-later:hover { color: var(--text-secondary); text-decoration: underline; } /* Dark mode */ [data-theme="dark"] .fk-up-card { border: 1px solid var(--border-soft); box-shadow: 0 40px 100px rgba(0,0,0,.6); } [data-theme="dark"] .fk-up-check { color: #b9a5f5; } [data-theme="dark"] .fk-up-upsell:hover { border-color: rgba(147,51,234,.55); } [data-theme="dark"] .fk-up-upsell-cta { color: #c4a7f5; } @media (max-width: 440px) { .fk-up-title { font-size: 22px; } .fk-up-upsell { flex-direction: column; align-items: flex-start; gap: 4px; } } /* ── Access-code prompt ──────────────────────────────────────────────── */ .fk-code-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,10,30,.62); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; } .fk-code-overlay.is-in { opacity: 1; } .fk-code-overlay.is-leaving { opacity: 0; } .fk-code-card { position: relative; width: 100%; max-width: 380px; text-align: center; background: var(--surface-solid); border-radius: 24px; padding: 34px 30px 26px; box-shadow: 0 40px 100px rgba(20,8,50,.45); transform: translateY(14px) scale(.97); opacity: 0; transition: transform .28s var(--ease), opacity .28s var(--ease); } .fk-code-overlay.is-in .fk-code-card { transform: translateY(0) scale(1); opacity: 1; } .fk-code-card.shake { animation: fk-code-shake .4s ease; } @keyframes fk-code-shake { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); } 30%,50%,70% { transform: translateX(-5px); } 40%,60% { transform: translateX(5px); } } .fk-code-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(30,27,46,.07); color: var(--text-secondary); font-size: 19px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .fk-code-x:hover { background: rgba(30,27,46,.14); } [data-theme="dark"] .fk-code-x { background: rgba(var(--grad-indigo-rgb),.12); } [data-theme="dark"] .fk-code-x:hover { background: rgba(var(--grad-indigo-rgb),.22); } .fk-code-key { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); box-shadow: 0 12px 26px -8px rgba(76,29,149,.5); } .fk-code-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin: 0 0 6px; color: var(--text-primary); } .fk-code-sub { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0 auto 20px; max-width: 30ch; } .fk-code-input { width: 100%; box-sizing: border-box; text-align: center; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: .12em; padding: 13px 16px; border-radius: 13px; color: var(--text-primary); background: var(--surface-strong); border: 1.5px solid var(--border-faint); transition: border-color .15s, box-shadow .15s; outline: none; } .fk-code-input::placeholder { letter-spacing: normal; font-weight: 500; color: var(--text-faint); } .fk-code-input:focus { border-color: var(--grad-purple); box-shadow: 0 0 0 3px rgba(147,51,234,.16); } .fk-code-error { font-size: 12px; color: var(--expense, #ef4444); margin: 10px 2px 0; line-height: 1.45; } /* Order ID stays centered like the access code above it, just without the heavy letter-spacing/uppercase-style weight (it's often a longer, mixed-case order number, not a short code). */ .fk-code-input--orderid { letter-spacing: normal; font-weight: 500; font-size: 15px; margin-top: 10px; } .fk-code-submit { width: 100%; margin-top: 16px; border: none; cursor: pointer; border-radius: 14px; padding: 13px 18px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); box-shadow: 0 14px 30px -10px rgba(76,29,149,.55); transition: transform .15s, box-shadow .15s; } .fk-code-submit:hover { transform: translateY(-1px); box-shadow: 0 18px 38px -10px rgba(76,29,149,.6); } .fk-code-submit:active { transform: translateY(0); } .fk-code-foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; } .fk-code-link { background: none; border: none; cursor: pointer; padding: 4px 6px; font-size: 12.5px; font-weight: 600; color: var(--text-faint); } .fk-code-link:hover { color: var(--grad-purple); text-decoration: underline; } /* ── Local vs Google sync choice / settings ─────────────────────────── */ .fk-sync-card { max-width: 420px; } .fk-sync-option { position: relative; z-index: 0; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; margin-top: 12px; padding: 15px 18px; border-radius: 16px; border: 1.5px solid var(--border-faint); background: var(--surface-strong); cursor: pointer; transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); } .fk-sync-option:first-of-type { margin-top: 22px; } .fk-sync-option:hover { transform: translateY(-2px); border-color: var(--grad-purple); box-shadow: 0 16px 32px -18px rgba(76,29,149,.4); } .fk-sync-option:active { transform: translateY(0); } .fk-sync-option:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; } .fk-sync-option--google { border-color: rgba(147,51,234,.35); background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(236,72,153,.08)); box-shadow: 0 14px 30px -20px rgba(76,29,149,.5); } .fk-sync-option--google:hover { box-shadow: 0 20px 40px -18px rgba(76,29,149,.5); } .fk-sync-option--google::before { content: ''; position: absolute; top: -18px; right: -18px; width: 110px; height: 110px; z-index: -1; background: radial-gradient(circle, rgba(236,72,153,.22), transparent 72%); pointer-events: none; } .fk-sync-option-badge { position: absolute; top: -7px; right: 16px; font-size: 8px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #fff; padding: 2px 7px; border-radius: 99px; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); box-shadow: 0 3px 8px -2px rgba(76,29,149,.45); } .fk-sync-option-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); box-shadow: 0 8px 18px -8px rgba(76,29,149,.55); } .fk-sync-option-icon svg { color: #fff; } .fk-sync-option-icon--google { background: #fff; box-shadow: 0 2px 8px rgba(30,27,46,.14), inset 0 0 0 1px rgba(30,27,46,.06); } [data-theme="dark"] .fk-sync-option-icon--google { background: #f4f4f6; } .fk-sync-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .fk-sync-option-title { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--text-primary); } .fk-sync-option-desc { font-size: 12px; line-height: 1.45; color: var(--text-secondary); } .fk-sync-option-chevron { flex-shrink: 0; color: var(--text-faint); transition: transform .18s var(--ease), color .18s var(--ease); } .fk-sync-option:hover .fk-sync-option-chevron { transform: translateX(3px); color: var(--grad-purple); } .fk-sync-status { font-size: 12.5px; color: var(--text-faint); margin-top: 14px; } .fk-sync-footer { font-size: 11.5px; color: var(--text-faint); margin: 16px 0 0; text-align: center; } .sync-mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; } .sync-mode-opt { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 14px 14px 13px; border-radius: 14px; border: 1.5px solid var(--border-faint); background: var(--surface-strong); cursor: pointer; transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); } .sync-mode-opt:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(76,29,149,.4); } .sync-mode-opt:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; } .sync-mode-opt.is-active { border-color: var(--grad-purple); background: rgba(147,51,234,.08); } .sync-mode-opt--google { background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(236,72,153,.06)); } .sync-mode-opt--google::before { content: ''; position: absolute; top: -12px; right: -12px; width: 65px; height: 65px; z-index: -1; background: radial-gradient(circle, rgba(236,72,153,.20), transparent 72%); pointer-events: none; } .sync-mode-check { position: absolute; top: 8px; left: 8px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 800; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); box-shadow: 0 3px 8px -2px rgba(76,29,149,.5); } .sync-mode-icon { width: 30px; height: 30px; border-radius: 50%; margin-bottom: 2px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); box-shadow: 0 6px 14px -6px rgba(76,29,149,.5); } .sync-mode-icon svg { color: #fff; width: 15px; height: 15px; } .sync-mode-icon--google { background: #fff; box-shadow: 0 2px 6px rgba(30,27,46,.14), inset 0 0 0 1px rgba(30,27,46,.06); } [data-theme="dark"] .sync-mode-icon--google { background: #f4f4f6; } .sync-mode-icon--google svg { width: 16px; height: 16px; } .sync-mode-badge { position: absolute; top: 8px; right: 8px; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; padding: 2px 7px; border-radius: 99px; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); box-shadow: 0 4px 10px -3px rgba(76,29,149,.5); } .sync-mode-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text-primary); } .sync-mode-desc { font-size: 11.5px; line-height: 1.4; color: var(--text-secondary); } .sync-status-line { font-size: 12px; color: var(--text-faint); margin: 10px 0 0; display: flex; align-items: center; gap: 6px; } .sync-error { font-size: 12px; color: var(--expense, #ef4444); margin: 10px 2px 0; line-height: 1.45; } @media (max-width: 480px) { .sync-mode-row { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════════ PENNY - AI budget assistant (nav icon, settings card, chat drawer) ═══════════════════════════════════════════════════════════════════════ */ /* The button itself is a fixed 36x36 flex item that never resizes, so it can never push sibling elements (like the app title) in the header's flex row. The actual growing pill is `.penny-nav-btn-inner`, absolutely positioned and anchored to the button's top-right corner, so it expands as an overlay on hover instead of participating in layout at all - this holds at every viewport width, not just above some breakpoint. */ .penny-nav-btn { position: relative; display: inline-flex; width: 36px; height: 36px; min-width: 36px; padding: 0; border: none; background: transparent; cursor: pointer; color: var(--text-faint); } .penny-nav-btn-inner { position: absolute; top: 0; right: 0; z-index: 5; display: inline-flex; align-items: center; justify-content: center; gap: 0; width: 36px; height: 36px; padding: 0; border-radius: 999px; border: 1px solid var(--border-faint); background: var(--surface-strong); overflow: hidden; color: inherit; transition: width .32s var(--ease), padding .32s var(--ease), gap 0s .32s, justify-content 0s .32s, background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease); } .penny-nav-icon { display: inline-flex; flex-shrink: 0; } .penny-nav-pill-text { max-width: 0; opacity: 0; white-space: nowrap; overflow: hidden; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; transition: max-width .28s var(--ease), opacity .18s var(--ease) .05s; } /* gap only kicks in once expanded (icon + revealed text need breathing room) - at rest, gap:0 above keeps the icon in the true geometric center of the circle instead of being centered as part of an "icon + 8px gap + invisible text" group, which pushed it left of center even though the icon itself was correctly drawn. */ .penny-nav-btn:hover .penny-nav-btn-inner, .penny-nav-btn:focus-visible .penny-nav-btn-inner { width: auto; padding: 0 14px 0 10px; justify-content: flex-start; gap: 8px; transition-delay: 0s; } .penny-nav-btn:hover .penny-nav-pill-text, .penny-nav-btn:focus-visible .penny-nav-pill-text { max-width: 140px; opacity: 1; } .penny-nav-btn.penny-off .penny-nav-icon { animation: penny-breathe 3.2s ease-in-out infinite; } .penny-nav-btn.penny-off:hover .penny-nav-btn-inner, .penny-nav-btn.penny-off:focus-visible .penny-nav-btn-inner { border-color: var(--grad-purple); background: rgba(147,51,234,.08); color: var(--text-secondary); } .penny-nav-btn.penny-off:hover .penny-nav-icon, .penny-nav-btn.penny-off:focus-visible .penny-nav-icon { animation-play-state: paused; opacity: 1; transform: scale(1); } @keyframes penny-breathe { 0%, 100% { opacity: .4; transform: scale(1); } 50% { opacity: .85; transform: scale(1.1); } } .penny-nav-btn.penny-on .penny-nav-btn-inner { border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); box-shadow: 0 6px 16px -6px rgba(147,51,234,.55); animation: penny-glow-pulse 2.6s ease-in-out infinite; } .penny-nav-btn.penny-on .penny-nav-btn-inner::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); background-size: 220% 100%; animation: penny-shimmer 3.6s linear infinite; } .penny-nav-btn.penny-on:hover .penny-nav-btn-inner::before, .penny-nav-btn.penny-on:focus-visible .penny-nav-btn-inner::before { animation-play-state: paused; opacity: .35; } @keyframes penny-glow-pulse { 0%, 100% { box-shadow: 0 6px 16px -6px rgba(147,51,234,.55); } 50% { box-shadow: 0 8px 22px -3px rgba(236,72,153,.65); } } @keyframes penny-shimmer { 0% { background-position: 220% 0; } 100% { background-position: -40% 0; } } @media (prefers-reduced-motion: reduce) { .penny-nav-btn, .penny-nav-btn .penny-nav-icon, .penny-nav-btn-inner::before { animation: none !important; } } /* Settings card */ .penny-key-setup, .penny-key-active { margin-top: 12px; } .penny-key-setup .field-label { display: block; margin-bottom: 6px; } .penny-key-setup input { margin-bottom: 8px; } .penny-key-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .penny-key-error { font-size: 12px; color: var(--expense, #ef4444); margin: 8px 0 0; } .penny-key-row { display: flex; align-items: center; gap: 8px; } .penny-key-icon { font-size: 14px; flex-shrink: 0; } .penny-key-masked { font-size: 12.5px; color: var(--text-secondary); flex: 1; } .penny-key-remove { font-size: 12px; color: var(--expense, #ef4444) !important; } .penny-usage-line { font-size: 11.5px; color: var(--text-faint); margin: 8px 0 0; } .penny-active-subtitle { font-size: 12px; color: #10b981; font-weight: 600; margin: 6px 0 0; } /* Chat panel - a centered, floating premium modal rather than a docked side drawer (class names kept as "drawer" throughout for continuity with the JS, but it no longer docks to an edge). */ .penny-drawer { position: fixed; inset: 0; z-index: 300; pointer-events: none; } .penny-drawer-scrim { position: absolute; inset: 0; background: rgba(15,12,25,.4); backdrop-filter: blur(3px); opacity: 0; transition: opacity .26s var(--ease); } .penny-drawer-panel { position: absolute; top: 50%; left: 50%; width: min(1040px, 90vw); max-height: min(952px, 92vh); background: linear-gradient(160deg, rgba(255,255,255,.8) 0%, rgba(248,247,255,.8) 45%, rgba(253,246,250,.8) 100%); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--border-faint); border-radius: 24px; box-shadow: 0 32px 80px -20px rgba(15,12,25,.5), 0 12px 32px -12px rgba(15,12,25,.3); display: flex; flex-direction: column; overflow: hidden; /* Sleek entrance: a soft upward drift + scale + blur-in on an ease-out-expo-style curve, rather than a plain fade. */ transform: translate(-50%, -50%) translateY(16px) scale(.92); opacity: 0; filter: blur(6px); transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .28s var(--ease), filter .32s var(--ease); } [data-theme="dark"] .penny-drawer-panel { background: linear-gradient(160deg, rgba(23,18,42,.8) 0%, rgba(14,8,32,.8) 55%, rgba(28,16,36,.8) 100%); } .penny-drawer.is-open { pointer-events: auto; } .penny-drawer.is-open .penny-drawer-scrim { opacity: 1; } .penny-drawer.is-open .penny-drawer-panel { transform: translate(-50%, -50%) translateY(0) scale(1); opacity: 1; filter: blur(0); } @media (prefers-reduced-motion: reduce) { .penny-drawer-panel { transition: opacity .2s ease; filter: none; transform: translate(-50%, -50%); } } .penny-drawer-header { display: flex; align-items: center; gap: 12px; padding: 18px 18px 10px; flex-shrink: 0; } .penny-avatar { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 9px; border-radius: 999px; color: #fff; flex-shrink: 0; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); } .penny-avatar svg { display: block; width: 100%; height: 100%; } .penny-drawer-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text-primary); flex: 1; } .penny-drawer-header-actions { display: flex; align-items: center; gap: 4px; } .penny-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 14px; transition: background .2s var(--ease), color .2s var(--ease); } .penny-icon-btn:hover { background: var(--surface-strong); color: var(--grad-indigo); } .penny-icon-btn.is-muted { color: var(--text-faint); } .penny-disclaimer { font-size: 11px; color: var(--text-faint); line-height: 1.4; margin: 0 16px 10px; flex-shrink: 0; } .penny-messages { flex: 1; overflow-y: auto; padding: 4px 16px; display: flex; flex-direction: column; gap: 12px; } .penny-msg { display: flex; gap: 8px; align-items: flex-start; } .penny-msg--user { flex-direction: row-reverse; } .penny-msg-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 5px; border-radius: 999px; color: #fff; flex-shrink: 0; margin-top: 2px; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); } .penny-msg-avatar svg { display: block; width: 100%; height: 100%; } .penny-msg-bubble { /* Capped in absolute terms too (not just 78%) - now that the panel can be over 1000px wide, an uncapped percentage would stretch a reply into an uncomfortably long line length. */ max-width: min(78%, 620px); padding: 9px 13px; border-radius: 16px; font-size: 13px; line-height: 1.5; background: var(--surface-strong); color: var(--text-primary); } .penny-msg--user .penny-msg-bubble { background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); color: #fff; border-bottom-right-radius: 4px; } .penny-msg--penny .penny-msg-bubble { border-bottom-left-radius: 4px; } .penny-msg-text { white-space: pre-wrap; word-break: break-word; } /* Lightweight markdown Ezzo's own replies are formatted into (pennyFormatMarkdown in penny.js) - never used for the user's own messages, which stay as plain text. */ .penny-msg-text p { margin: 0 0 8px; } .penny-msg-text p:last-child { margin-bottom: 0; } .penny-msg-text strong { font-weight: 700; color: var(--text-primary); } .penny-msg-text h4 { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--text-primary); margin: 10px 0 4px; letter-spacing: -.005em; } .penny-msg-text h4:first-child { margin-top: 0; } .penny-msg-text ul, .penny-msg-text ol { margin: 4px 0 8px; padding-left: 18px; } .penny-msg-text ul:last-child, .penny-msg-text ol:last-child { margin-bottom: 0; } .penny-msg-text li { margin-bottom: 3px; } .penny-msg-text li:last-child { margin-bottom: 0; } .penny-msg--error .penny-msg-bubble--error { border: 1px solid rgba(239,68,68,.3); } .penny-err-action { margin-top: 8px; } .penny-typing { display: inline-flex; align-items: center; gap: 4px; padding: 11px 14px; } .penny-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: penny-typing-bounce 1.1s ease-in-out infinite; } .penny-typing span:nth-child(2) { animation-delay: .15s; } .penny-typing span:nth-child(3) { animation-delay: .3s; } @keyframes penny-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } .penny-chart-block { margin-top: 8px; } .penny-chart-block .donut-block { display: flex; align-items: flex-start; gap: 10px; } .penny-chart-block .donut-block-chart { flex-shrink: 0; } /* Legend has no row cap anymore (every category shows), so it can grow tall - let it scroll internally rather than blow out the chat bubble. */ .penny-chart-block .penny-donut-legend { max-height: 140px; overflow-y: auto; flex: 1; min-width: 0; } .penny-chart-block .flow-table { display: flex; flex-direction: column; gap: 6px; } .penny-chart-block .flow-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; } .penny-chart-block .flow-bar-wrap { height: 6px; border-radius: 4px; background: rgba(30,27,46,.08); overflow: hidden; } .penny-chart-block .flow-bar { height: 100%; border-radius: 4px; } .penny-quick-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; flex-shrink: 0; } /* Compact pills, not full-size buttons - on the wider panel a row of default .btn-sm chips would otherwise read as a second, oversized menu rather than a few quick suggestions. */ .penny-qp-btn { font-size: 11.5px; padding: 6px 11px; } .penny-input-row { display: flex; padding: 14px 18px; border-top: 1px solid var(--border-faint); flex-shrink: 0; } /* Ask button lives inside the pill, anchored to its right edge, rather than sitting beside it as a separate element. */ .penny-input-wrap { position: relative; flex: 1; display: flex; align-items: center; } .penny-input { width: 100%; border-radius: 999px; padding-left: 18px; padding-right: 78px; } .penny-send-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); flex-shrink: 0; border-radius: 999px; transition: transform .18s var(--ease), box-shadow .18s var(--ease); } /* .btn-primary:hover's own transform (translateY(-1px)) would otherwise completely replace this button's centering translateY(-50%), since CSS transforms don't combine across separate rules - that's what was pushing it out of the pill on hover. Override with the full combined transform (still centered, just scaled) plus a glow instead of moving. */ .penny-send-btn:hover { transform: translateY(-50%) scale(1.05); box-shadow: 0 6px 20px -4px rgba(147,51,234,.6), 0 0 0 4px rgba(147,51,234,.14); } body.penny-drawer-open { overflow: hidden; } @media (max-width: 640px) { .penny-drawer-panel { top: auto; left: 0; right: 0; bottom: 0; width: 100vw; max-height: 82vh; border-left: none; border-right: none; border-bottom: none; border-radius: 20px 20px 0 0; transform: translateY(100%); } .penny-drawer.is-open .penny-drawer-panel { transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════════════ LANDING PAGE SECTIONS ═══════════════════════════════════════════════════════════════════════ */ /* ── USP strip (below cards, inline) ─────────────────────────────────── */ .lp-strip { max-width: 880px; margin: 24px auto 0; padding: 0; } .lp-strip-inner { display: flex; align-items: center; justify-content: center; gap: 0; padding: 16px 24px; border-radius: var(--radius-md); background: rgba(255,255,255,.35); border: 1px solid var(--border-faint); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } [data-theme="dark"] .lp-strip-inner { background: rgba(255,255,255,.04); } .lp-strip-item { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; } .lp-strip-icon { font-size: 15px; } .lp-strip-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); margin: 0 22px; flex-shrink: 0; } /* ── Shared section spacing (match tool-grid 880px) ──────────────────── */ .lp-section { max-width: 880px; margin: 56px auto 0; padding: 0; } .lp-heading { font-family: var(--font-display); font-weight: 800; font-size: 28px; text-align: center; color: var(--text-primary); margin: 0 0 8px; } .lp-sub { text-align: center; font-size: 14px; color: var(--text-secondary); max-width: 680px; margin: 0 auto 28px; line-height: 1.6; } /* ── Comparison table (flat 3-col grid) ───────────────────────────────── */ .compare-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-faint); } .cc { padding: 12px 16px; font-size: 13px; color: var(--text-primary); border-bottom: 1px solid var(--border-faint); display: flex; align-items: center; min-height: 44px; background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .cc-sbp, .cc-ubp { justify-content: center; text-align: center; } /* Headers */ .cc-head { font-family: var(--font-display); font-weight: 700; font-size: 15px; padding: 18px 16px; gap: 8px; justify-content: center; } .cc-head-icon { font-size: 16px; margin-right: 2px; } .cc-label.cc-head { background: var(--surface); justify-content: flex-start; } .cc-sbp.cc-head { background: var(--surface); } .cc-ubp.cc-head { background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(236,72,153,.08)); } /* Ultimate column tint + animated left border */ .cc-ubp { background: rgba(147,51,234,.025); border-left: 2px solid transparent; animation: compare-glow 4s ease-in-out infinite; } .cc-ubp.cc-head { animation: none; border-left: 2px solid var(--grad-purple); } @keyframes compare-glow { 0%,100% { border-left-color: rgba(147,51,234,.3); } 50% { border-left-color: rgba(236,72,153,.5); } } /* Price row */ .cc-price { font-family: var(--font-display); font-size: 16px; border-bottom: none; gap: 6px; } .cc-label.cc-price { font-weight: 600; color: var(--text-secondary); } /* Shared cell elements */ .compare-tool-icon { font-size: 18px; } .compare-yes { color: var(--income, #10b981); font-weight: 700; font-size: 15px; } .compare-no { color: var(--text-faint); font-size: 14px; } .compare-once { font-size: 11px; font-weight: 600; color: var(--text-faint); margin-left: 2px; } .compare-popular { font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; margin-left: 8px; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-pink)); color: #fff; flex-shrink: 0; } /* ── Review carousel ─────────────────────────────────────────────────── */ .rc-wrap { position: relative; display: flex; align-items: center; gap: 10px; } .rc-viewport { flex: 1; min-width: 0; overflow: hidden; } .rc-track { display: flex; gap: 16px; transition: transform .4s cubic-bezier(.4,0,.2,1); padding: 4px 0; } .rc-card { flex: 0 0 calc((100% - 32px) / 3); min-width: 0; padding: 22px 22px 20px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border-faint); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; flex-direction: column; gap: 10px; } .rc-card-top { display: flex; align-items: center; gap: 12px; } .rc-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover; border: 2px solid var(--border-faint); } .rc-avatar-fallback { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; letter-spacing: .02em; } .rc-meta { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .rc-name { font-size: 13.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rc-title { font-size: 11.5px; color: var(--text-faint); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 31px; } .rc-pill { font-size: 9px; font-weight: 800; letter-spacing: .06em; padding: 3px 7px; border-radius: var(--radius-pill); flex-shrink: 0; align-self: flex-start; } .rc-pill--sbp { background: rgba(99,102,241,.1); color: var(--grad-indigo); } .rc-pill--ubp { background: rgba(236,72,153,.1); color: var(--grad-pink); } .rc-stars { color: #eab308; font-size: 13px; letter-spacing: 2px; } .rc-text { font-size: 13px; line-height: 1.65; color: var(--text-secondary); margin: 0; flex: 1; } .rc-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--surface-solid); color: var(--text-secondary); box-shadow: 0 2px 8px rgba(30,27,46,.08); transition: box-shadow .15s, color .15s, border-color .15s; } .rc-arrow:hover { box-shadow: 0 4px 16px rgba(30,27,46,.14); color: var(--text-primary); border-color: rgba(99,102,241,.3); } .rc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; } .rc-dot { width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer; background: var(--border-faint); padding: 0; transition: background .2s, transform .2s; } .rc-dot.is-active { background: linear-gradient(135deg, var(--grad-indigo), var(--grad-pink)); transform: scale(1.25); } /* ── FAQ ─────────────────────────────────────────────────────────────── */ .faq-list { display: grid; gap: 10px; } .faq-item { border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); border: 1px solid var(--border-faint); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: border-color .15s; } .faq-item[open] { border-color: rgba(99,102,241,.25); } .faq-q { cursor: pointer; padding: 16px 20px; font-size: 14px; font-weight: 600; color: var(--text-primary); list-style: none; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .faq-q::-webkit-details-marker { display: none; } .faq-q::after { content: '+'; font-size: 18px; font-weight: 400; color: var(--text-faint); flex-shrink: 0; width: 22px; text-align: center; transition: transform .2s; } .faq-item[open] .faq-q::after { content: '\2212'; } .faq-a { padding: 0 20px 18px; font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); } .faq-a p { margin: 0 0 10px; } .faq-a p:last-child { margin-bottom: 0; } /* ── Footer ──────────────────────────────────────────────────────────── */ .lp-footer { margin-top: 64px; padding: 32px 24px; text-align: center; border-top: 1px solid var(--border-faint); } .lp-footer-inner { max-width: 880px; margin: 0 auto; } .lp-footer-brand { margin-bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .lp-footer-tagline { font-size: 12.5px; color: var(--text-faint); line-height: 1.5; margin: 0; } .lp-footer-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; } .lp-footer-link { background: none; border: none; cursor: pointer; padding: 2px 0; font-size: 12.5px; font-weight: 600; color: var(--text-faint); } .lp-footer-link:hover { color: var(--grad-purple); text-decoration: underline; } .lp-footer-copy { font-size: 11px; color: var(--text-faint); margin: 0; } /* ── Legal modal ─────────────────────────────────────────────────────── */ .modal--legal { max-width: 580px; max-height: 80vh; overflow-y: auto; } .modal--legal .modal-body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); } .modal--legal .modal-body p strong { color: var(--text-primary); } .modal--legal .modal-body p:last-child { margin-bottom: 0; } /* ── Responsive (landing page) ───────────────────────────────────────── */ @media (max-width: 900px) { .rc-card { flex: 0 0 calc((100% - 16px) / 2); } } @media (max-width: 680px) { .lp-heading { font-size: 24px; } .compare-grid { grid-template-columns: 1.2fr 1fr 1fr; } .cc { padding: 9px 10px; font-size: 12px; min-height: 38px; } .cc-head { padding: 12px 10px; font-size: 13px; } .compare-popular { display: none; } .rc-card { flex: 0 0 100%; } .rc-arrow { width: 32px; height: 32px; } .lp-strip-sep { margin: 0 10px; } .lp-strip-item { font-size: 12px; } .lp-strip-inner { flex-wrap: wrap; gap: 8px; justify-content: center; } .lp-strip-sep { display: none; } } @media (max-width: 480px) { .compare-grid { grid-template-columns: 1fr 1fr; } .cc-label { display: none; } .cc-sbp, .cc-ubp { border-left: none; } .rc-arrow { display: none; } } /* ── Comparison buy buttons ──────────────────────────────────────────── */ .cc-buy-btn { display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer; border-radius: 10px; padding: 10px 18px; font-family: var(--font-display); font-size: 14px; color: var(--text-primary); background: var(--surface-strong); border: 1px solid var(--border-faint); transition: transform .15s, box-shadow .15s, border-color .15s; } .cc-buy-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(30,27,46,.1); } .cc-buy-btn--ubp { color: #fff; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); border-color: transparent; box-shadow: 0 6px 18px -6px rgba(76,29,149,.4); } .cc-buy-btn--ubp:hover { box-shadow: 0 10px 26px -6px rgba(76,29,149,.55); } .cc-buy-btn--ubp .compare-once { color: rgba(255,255,255,.7); } /* ── Scenario story rows ─────────────────────────────────────────────── */ .lp-section--wide { max-width: 940px; } .scen-list { display: flex; flex-direction: column; gap: 18px; } .scen-row { display: flex; align-items: center; gap: 26px; padding: 26px 30px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border-faint); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: relative; overflow: hidden; } .scen-row--flip { flex-direction: row-reverse; } /* soft accent wash bleeding from the visual side */ .scen-row::after { content: ''; position: absolute; top: 0; bottom: 0; width: 45%; z-index: 0; pointer-events: none; opacity: .5; } .scen-row::after { left: 0; } .scen-row--flip::after { left: auto; right: 0; } .scen-row--debt::after { background: radial-gradient(circle at 20% 50%, rgba(244,63,94,.14), transparent 70%); } .scen-row--holiday::after { background: radial-gradient(circle at 80% 50%, rgba(6,182,212,.16), transparent 70%); } .scen-row--paycheck::after { background: radial-gradient(circle at 20% 50%, rgba(99,102,241,.14), transparent 70%); } .scen-row--bills::after { background: radial-gradient(circle at 80% 50%, rgba(236,72,153,.14), transparent 70%); } .scen-visual { flex-shrink: 0; width: 92px; height: 92px; border-radius: 24px; z-index: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -8px rgba(30,27,46,.28); } .scen-row--debt .scen-visual { background: linear-gradient(135deg, #fb7185, #f43f5e); } .scen-row--holiday .scen-visual { background: linear-gradient(135deg, #22d3ee, #0891b2); } .scen-row--paycheck .scen-visual { background: linear-gradient(135deg, #818cf8, #6366f1); } .scen-row--bills .scen-visual { background: linear-gradient(135deg, #f472b6, #db2777); } .scen-emoji { font-size: 42px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); } .scen-body { flex: 1; z-index: 1; } .scen-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: 10px; } .scen-tag--debt { background: rgba(244,63,94,.12); color: #e11d48; } .scen-tag--holiday { background: rgba(6,182,212,.14); color: #0891b2; } .scen-tag--paycheck { background: rgba(99,102,241,.12); color: var(--grad-indigo); } .scen-tag--bills { background: rgba(236,72,153,.12); color: #db2777; } .scen-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-primary); margin: 0 0 8px; line-height: 1.35; } .scen-desc { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 16px; } .scen-cta { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; padding: 10px 18px; border-radius: var(--radius-pill); border: 1px solid transparent; transition: transform .15s, box-shadow .15s, gap .15s, border-color .15s, background .15s; } .scen-cta--grad { color: #fff; border: none; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); box-shadow: 0 8px 20px -8px rgba(76,29,149,.5); } .scen-cta--grad:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(76,29,149,.6); gap: 12px; } .scen-cta--ghost { color: var(--text-primary); background: var(--surface-strong); border-color: var(--border-faint); } .scen-cta--ghost:hover { border-color: rgba(99,102,241,.4); gap: 12px; } .scen-arrow { transition: transform .15s; } @media (max-width: 680px) { .scen-row, .scen-row--flip { flex-direction: column; text-align: center; gap: 16px; padding: 24px 22px; } .scen-row::after { width: 100%; height: 40%; top: 0; bottom: auto; left: 0; right: 0; opacity: .6; } .scen-visual { width: 76px; height: 76px; border-radius: 20px; } .scen-emoji { font-size: 36px; } .scen-title { font-size: 16px; } .scen-cta { width: 100%; justify-content: center; } } /* ── Why Ezzo Budget grid ─────────────────────────────────────────────── */ .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .why-card { padding: 24px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border-faint); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: relative; overflow: hidden; } .why-num { font-family: var(--font-display); font-weight: 800; font-size: 42px; position: absolute; top: 14px; right: 18px; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: .1; line-height: 1; pointer-events: none; } .why-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text-primary); margin: 0 0 8px; } .why-desc { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); margin: 0; } @media (max-width: 680px) { .why-grid { grid-template-columns: 1fr; } } /* ── CTA banner (upsell) ─────────────────────────────────────────────── */ .cta-banner { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 36px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple) 55%, var(--grad-pink)); box-shadow: 0 20px 50px -16px rgba(76,29,149,.5); } .cta-banner-glow { position: absolute; top: -80%; right: -10%; width: 360px; height: 360px; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 62%); pointer-events: none; } .cta-banner-text { position: relative; z-index: 1; } .cta-banner-title { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: #fff; margin: 0 0 4px; } .cta-banner-sub { font-size: 13.5px; color: rgba(255,255,255,.9); margin: 0; } .cta-banner-btns { position: relative; z-index: 1; display: flex; gap: 10px; flex-shrink: 0; } .cta-banner-btn { cursor: pointer; font-family: var(--font-display); font-size: 13.5px; font-weight: 700; padding: 12px 20px; border-radius: var(--radius-pill); white-space: nowrap; transition: transform .15s, box-shadow .15s, background .15s; } .cta-banner-btn--solid { border: none; background: #fff; color: var(--grad-purple); box-shadow: 0 8px 20px -6px rgba(0,0,0,.25); } .cta-banner-btn--solid:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -6px rgba(0,0,0,.32); } .cta-banner-btn--ghost { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); color: #fff; } .cta-banner-btn--ghost:hover { background: rgba(255,255,255,.24); } @media (max-width: 680px) { .cta-banner { flex-direction: column; text-align: center; padding: 26px 22px; } .cta-banner-btns { width: 100%; flex-direction: column; } .cta-banner-btn { width: 100%; } } /* ── Feature info tooltips (comparison) ──────────────────────────────── */ .cc-info { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; padding: 0; margin-right: 9px; border: none; cursor: pointer; background: rgba(99,102,241,.14); color: var(--grad-indigo); font-family: var(--font-display); font-size: 11px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .15s, box-shadow .15s; } [data-theme="dark"] .cc-info { background: rgba(var(--grad-indigo-rgb),.2); color: #a5b4fc; } .cc-info:hover, .cc-info:focus-visible { color: #fff; outline: none; transform: scale(1.12); background: linear-gradient(135deg, var(--grad-indigo), var(--grad-pink)); box-shadow: 0 4px 12px -3px rgba(76,29,149,.5); } .cc-label-text { min-width: 0; } .cc-tip-pop { position: absolute; z-index: 2000; width: 270px; max-width: calc(100vw - 20px); border-radius: 14px; background: var(--surface-solid); border: 1px solid var(--border-faint); box-shadow: 0 18px 44px -12px rgba(30,10,60,.4); opacity: 0; transform: translateY(4px); transition: opacity .16s, transform .16s; pointer-events: none; } .cc-tip-pop.is-in { opacity: 1; transform: translateY(0); } .cc-tip-head { display: flex; align-items: center; gap: 8px; padding: 12px 15px 10px; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--text-primary); border-bottom: 1px solid var(--border-faint); letter-spacing: normal; text-transform: none; text-align: left; } .cc-tip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-pink)); } .cc-tip-body { padding: 11px 15px 14px; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500; line-height: 1.6; color: var(--text-secondary); text-align: left; letter-spacing: normal; text-transform: none; } .cc-tip-arrow { position: absolute; width: 12px; height: 12px; transform: rotate(45deg); background: var(--surface-solid); border: 1px solid var(--border-faint); } .cc-tip-above .cc-tip-arrow { bottom: -7px; border-top: none; border-left: none; } .cc-tip-below .cc-tip-arrow { top: -7px; border-bottom: none; border-right: none; } /* ═══════════════════════════════════════════════════════════════ GUIDE (full walkthrough modal) ═══════════════════════════════════════════════════════════════ */ .guide-overlay { position: fixed; inset: 0; background: rgba(15,10,30,.58); backdrop-filter: blur(5px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; } .guide-modal { background: var(--surface-solid); border-radius: var(--radius-lg); box-shadow: 0 40px 100px rgba(0,0,0,.28); width: 100%; max-width: 1040px; height: min(82vh, 760px); position: relative; display: flex; flex-direction: column; overflow: hidden; animation: modal-in .28s var(--ease); } .guide-close { position: absolute; top: 16px; right: 16px; z-index: 5; appearance: none; border: none; cursor: pointer; background: rgba(30,27,46,.07); width: 34px; height: 34px; border-radius: 50%; font-size: 20px; color: var(--text-secondary); line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .15s; } .guide-close:hover { background: rgba(30,27,46,.12); } [data-theme="dark"] .guide-close { background: rgba(var(--grad-indigo-rgb),.10); } [data-theme="dark"] .guide-close:hover { background: rgba(var(--grad-indigo-rgb),.18); } .guide-modal-inner { display: flex; flex: 1; min-height: 0; position: relative; } .guide-sidebar { width: 264px; flex-shrink: 0; overflow-y: auto; padding: 30px 14px 20px; border-right: 1px solid var(--border-faint); background: var(--surface-strong); } .guide-group-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); padding: 16px 10px 6px; } .guide-group-label:first-child { padding-top: 4px; } .guide-topic-btn { appearance: none; border: none; background: transparent; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); font-family: inherit; font-weight: 600; font-size: 13.5px; text-align: left; transition: background .15s, color .15s; } .guide-topic-btn:hover { background: rgba(99,102,241,.07); color: var(--text-primary); } .guide-topic-btn.is-active { background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(192,38,211,.1)); color: var(--grad-indigo); } .guide-topic-icon { font-size: 17px; flex-shrink: 0; width: 22px; text-align: center; line-height: 1; } .guide-content { flex: 1; min-width: 0; overflow-y: auto; padding: 44px 52px; } .guide-content:focus { outline: none; } .guide-topic-header { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; } .guide-topic-icon-badge { width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0; font-size: 26px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(236,72,153,.12)); } [data-theme="dark"] .guide-topic-icon-badge { background: linear-gradient(135deg, rgba(var(--grad-indigo-rgb),.2), rgba(244,114,182,.16)); } .guide-topic-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--text-primary); letter-spacing: -.01em; margin: 0; } .guide-section { margin-bottom: 32px; max-width: 680px; } .guide-section:last-child { margin-bottom: 0; } .guide-section-label { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--grad-indigo); margin-bottom: 12px; } .guide-big-picture { font-size: 15.5px; line-height: 1.75; color: var(--text-secondary); } .guide-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .guide-steps li { display: flex; align-items: flex-start; gap: 14px; font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); } .guide-step-num { width: 26px; height: 26px; border-radius: 50%; margin-top: 1px; background: linear-gradient(135deg, var(--grad-indigo), var(--grad-purple)); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .guide-connects { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .guide-connects li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); } .guide-connect-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; background: linear-gradient(135deg, var(--grad-orange), var(--grad-pink)); } .guide-tip { display: flex; gap: 12px; align-items: flex-start; background: rgba(99,102,241,.08); border-left: 3px solid var(--grad-indigo); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 15px 18px; font-size: 14px; line-height: 1.65; color: var(--text-secondary); } [data-theme="dark"] .guide-tip { background: rgba(var(--grad-indigo-rgb),.1); } .guide-tip-icon { font-size: 18px; flex-shrink: 0; } /* Topic position badge in the header + prev/next pager footer */ .guide-topic-count { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--text-faint); background: var(--surface-strong); border: 1px solid var(--border-faint); border-radius: var(--radius-pill); padding: 4px 10px; white-space: nowrap; } .guide-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--border-faint); } .guide-pager-btn { appearance: none; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 8px; max-width: 46%; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-faint); background: var(--surface-strong); color: var(--text-secondary); font-size: 13px; font-weight: 600; text-align: left; transition: border-color .15s, color .15s, transform .12s; } .guide-pager-btn:hover { border-color: var(--grad-indigo); color: var(--text-primary); transform: translateY(-1px); } .guide-pager-btn--next { text-align: right; } .guide-pager-dir { font-weight: 800; color: var(--grad-indigo); flex-shrink: 0; } .guide-pager-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Active topic gets a left accent bar for stronger orientation */ .guide-topic-btn { position: relative; } .guide-topic-btn.is-active::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; border-radius: 999px; background: linear-gradient(180deg, var(--grad-indigo), var(--grad-purple)); } .guide-content strong { color: var(--text-primary); font-weight: 700; } .guide-modal *:focus-visible { outline: 2px solid var(--grad-indigo); outline-offset: 2px; border-radius: 4px; } .guide-back-btn { display: none; align-items: center; gap: 6px; appearance: none; border: none; background: transparent; padding: 0 0 18px; color: var(--grad-indigo); font-weight: 700; font-size: 13.5px; cursor: pointer; } @media (max-width: 700px) { .guide-overlay { padding: 0; } .guide-modal { max-width: 100%; height: 100%; border-radius: 0; } .guide-sidebar { width: 100%; border-right: none; position: absolute; inset: 0; z-index: 2; transition: transform .25s var(--ease); background: var(--surface-solid); } .guide-content { padding: 24px 20px 40px; } .guide-modal.is-topic-open .guide-sidebar { transform: translateX(-100%); pointer-events: none; } .guide-back-btn { display: inline-flex; } } /* ── Debt amortization schedule modal ────────────────────────────────── */ .debt-sched-overlay { position: fixed; inset: 0; background: rgba(15,10,30,.58); backdrop-filter: blur(5px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; } .debt-sched-modal { background: var(--surface-solid); border-radius: var(--radius-lg); box-shadow: 0 40px 100px rgba(0,0,0,.28); width: 100%; max-width: 900px; height: min(82vh, 760px); position: relative; display: flex; flex-direction: column; overflow: hidden; animation: modal-in .28s var(--ease); } .debt-sched-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; } .debt-sched-head { padding: 30px 40px 0; } .debt-sched-title { font-family:var(--font-display); font-size: 19px; font-weight: 800; color: var(--text-primary); margin: 0 0 6px; } .debt-sched-summary { font-size: 13px; color: var(--text-secondary); padding-bottom: 16px; } .debt-sched-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 40px 36px; } .debt-sched-body:focus { outline: none; } .debt-sched-warning { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); background: rgba(251,146,60,.1); border: 1px solid rgba(251,146,60,.28); font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; } [data-theme="dark"] .debt-sched-warning { background: rgba(251,146,60,.08); } .debt-sched-modal *:focus-visible { outline: 2px solid var(--grad-indigo); outline-offset: 2px; border-radius: 4px; } /* ── Month-by-month schedule: a real (non-scrolling) header row above a scrollable list of grid rows, instead of a with position:sticky - browsers reliably glitch-paint sticky table headers (a row can render "through" the header while scrolling). A plain grid header that simply lives outside the scroll container has no such bug and needs no sticky positioning at all. ── */ .debt-sched-colheader { display: grid; background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(192,38,211,.06)), var(--surface-solid); border-radius: var(--radius-md) var(--radius-md) 0 0; border-bottom: 2px solid var(--border-faint); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); } [data-theme="dark"] .debt-sched-colheader { background: linear-gradient(135deg, rgba(var(--grad-indigo-rgb),.12), rgba(192,38,211,.07)), var(--surface-solid); } .debt-sched-colheader > div { padding: 10px 4px; } .debt-sched-colheader > div:not(:first-child) { text-align: right; } .debt-sched-row { display: grid; font-size: 13.5px; } .debt-sched-row > div { padding: 9px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .debt-sched-row > div:not(:first-child) { text-align: right; } .debt-sched-row:nth-child(even) { background: rgba(99,102,241,.035); } [data-theme="dark"] .debt-sched-row:nth-child(even) { background: rgba(var(--grad-indigo-rgb),.05); } .debt-sched-row:hover { background: rgba(99,102,241,.08); } [data-theme="dark"] .debt-sched-row:hover { background: rgba(var(--grad-indigo-rgb),.1); } .debt-sched-row .col-principal { color: #10b981; font-weight: 600; } .debt-sched-row .col-interest { color: #f43f5e; } .debt-sched-row .col-balance { font-weight: 700; color: var(--text-primary); } /* Skip layout/paint work for off-screen rows - the standard fix for long-list scroll jank */ .debt-sched-row { content-visibility: auto; contain-intrinsic-size: auto 39px; } .debt-sched-row--5col, .debt-sched-colheader.debt-sched-row--5col { grid-template-columns: 1.3fr repeat(4, 1fr); } .debt-sched-row--6col, .debt-sched-colheader.debt-sched-row--6col { grid-template-columns: 1.2fr repeat(5, 1fr); } @media (max-width: 640px) { .debt-sched-overlay { padding: 0; } .debt-sched-modal { max-width: 100%; height: 100%; border-radius: 0; } .debt-sched-head { padding: 24px 20px 0; } .debt-sched-body { padding: 16px 20px 30px; } /* Only the most relevant columns on small screens: date, payment, balance */ .sched-col-secondary { display: none; } .debt-sched-row--5col, .debt-sched-row--6col, .debt-sched-colheader.debt-sched-row--5col, .debt-sched-colheader.debt-sched-row--6col { grid-template-columns: 1.3fr 1fr 1fr; } } /* ── Debt list table: content-sized columns, headers never wrap ── */ .debt-table th { white-space: nowrap; } .debt-table td { overflow-wrap: break-word; } .debt-table .expected-input { width: 90px; } .total-row td { overflow-wrap: break-word; }