/* FinPilot by AnwarH — App Styles */
/* ── FONT SYSTEM (finance-SaaS standard) ──
Inter (400-800, variable) → body copy + headings. Already loaded via Google Fonts in the
shared app.html (weights 400/500/600/700/800/900) — that link is used by both Theme 1
and Theme 4, so it's left alone here.
SINGLE TYPEFACE: Inter everywhere (Anwar's call, 2026-07-26). The old JetBrains Mono pass
was dropped so the app speaks one voice. Digit alignment is preserved by
font-variant-numeric:tabular-nums (below) rather than by a monospace face — gives
Theme 4 that fintech-dashboard feel. Loaded here via @import, scoped to THIS stylesheet only,
so Theme 1 never requests it (no added to the shared app.html). */
/* ── THEME VARIABLES ── */
:root{
--c1:#6c5ce7;--c2:#00cec9;--c3:#fd79a8;--c4:#fdcb6e;--c5:#0984e3;--c6:#e17055;
--bg:#f4f5f9;--surface:#ffffff;--ink:#1a1a2e;--ink2:#555;--border:#e2e4ea;
--glass:rgba(255,255,255,.85);--shadow:rgba(108,92,231,.12);
--sidebar-w:240px;--topbar-h:50px;--help-w:300px;
--radius:14px;--radius-sm:8px;
--font-mono:'Inter',system-ui,sans-serif; /* single-typeface system — see note at top */
/* Brand palette (from the FinPilot marketing landing page): navy primary + cyan/purple gradient accent */
--brand-primary:#0A2540;--brand-accent:#00D4FF;--brand-accent-2:#7C3AED;
--brand-gradient:linear-gradient(135deg,var(--brand-accent) 0%,var(--brand-accent-2) 100%);
/* sidebar/topbar accents (light) — now driven by the brand palette instead of the old generic purple */
--t3-accent:var(--brand-accent-2);--t3-sb-bg:#ffffff;--t3-sb-border:#E6EAF0;
--t3-active-bg:#F1EBFE;--t3-active-ink:var(--brand-accent-2);
--t3-item-ink:#5C5C70;--t3-item-hover-ink:#15131F;--t3-item-hover-bg:#F8F7FF;
--t3-section-ink:#9A9AB0;
}
[data-theme="dark"]{
--bg:#0c0c18;--surface:#181830;--ink:#e0e0f0;--ink2:#9a9ab0;--border:#2a2a45;
--glass:rgba(24,24,48,.9);--shadow:rgba(0,206,201,.1);
/* sidebar/topbar accents (dark) */
--t3-sb-bg:#12121A;--t3-sb-border:#1E1E2A;
--t3-active-bg:#1E1E2E;--t3-active-ink:#ffffff;
--t3-item-ink:#9A9AB0;--t3-item-hover-ink:#ffffff;--t3-item-hover-bg:#1A1A27;
--t3-section-ink:#6B6B84;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter','Segoe UI',system-ui,sans-serif;}
body{background:var(--bg);color:var(--ink);transition:background .35s,color .35s;overflow:hidden;height:100vh;}
a{color:var(--c1);text-decoration:none;}
a:hover{text-decoration:underline;}
/* ── TOPBAR (Theme 3 style) ── */
.topbar{
height:var(--topbar-h);display:flex;justify-content:space-between;align-items:center;
padding:0 16px;background:var(--t3-sb-bg);border-bottom:1px solid var(--t3-sb-border);
position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s;
}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:6px;}
.tb-btn{
width:34px;height:34px;border-radius:9px;border:none;background:transparent;
color:var(--t3-item-ink);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:.2s;
}
.tb-btn:hover{background:var(--t3-item-hover-bg);color:var(--t3-accent);border-color:transparent;}
.topbar-logo{font-weight:700;font-size:18px;margin-left:12px;display:flex;align-items:center;gap:6px;letter-spacing:-.01em;font-family:'Inter',system-ui,sans-serif;}
.tl-grad{font-weight:800;font-size:18px;color:#7C3AED;-webkit-background-clip:initial;background-clip:initial;background:none;}
.topbar-logo small{font-size:13px;font-weight:400;opacity:1;margin-left:2px;color:#1a1a2e;}
/* ── THEME SWITCHER ── */
.theme-select{
height:34px;padding:0 10px;border-radius:8px;border:1px solid var(--t3-sb-border);background:var(--t3-sb-bg);
color:var(--ink);font-size:.8rem;font-weight:700;cursor:pointer;transition:.2s;
}
.theme-select:hover{border-color:var(--t3-accent);}
.theme-select:focus{outline:none;border-color:var(--t3-accent);}
.theme2-frame{
position:fixed;top:var(--topbar-h);left:0;right:0;bottom:0;width:100%;height:calc(100vh - var(--topbar-h));
border:none;z-index:90;background:#fff;
}
.theme2-frame.hidden{display:none;}
/* ── APP LAYOUT ── */
.app-layout{
display:flex;position:fixed;top:var(--topbar-h);left:0;right:0;bottom:0;
}
/* ── LEFT SIDEBAR (Theme 3 style) ── */
.sidebar{
width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--t3-sb-bg);border-right:1px solid var(--t3-sb-border);
display:flex;flex-direction:column;transition:width .25s,min-width .25s,background .35s;overflow:hidden;
}
.sidebar-scroll{flex:1;overflow-y:auto;padding:16px 10px;}
.sb-nav-row{
display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;
border-top:1px solid var(--t3-sb-border);
}
.sb-nav-row .tb-btn{width:30px;height:30px;font-size:.9rem;}
.sb-section{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--t3-section-ink);padding:8px 8px 6px;white-space:nowrap;font-family:var(--font-mono);}
.sb-item{
display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;background:none;
color:var(--t3-item-ink);font-size:13px;font-weight:500;cursor:pointer;border-radius:10px;
transition:.2s;text-align:left;white-space:nowrap;font-family:'Inter',system-ui,sans-serif;
}
.sb-item:hover{background:var(--t3-item-hover-bg);color:var(--t3-item-hover-ink);}
.sb-item.active{background:var(--t3-active-bg);color:var(--t3-active-ink);font-weight:600;}
.sb-ic{width:18px;height:18px;flex:0 0 18px;display:flex;align-items:center;justify-content:center;color:inherit;}
.sb-ic svg{width:16px;height:16px;display:block;}
.sb-label{overflow:hidden;text-overflow:ellipsis;}
/* ── SIDEBAR GROUPS ── */
.sb-group{margin-top:2px;}
.sb-group-head{
display:flex;align-items:center;gap:10px;padding:10px 12px;color:var(--ink);
font-size:13px;font-weight:600;white-space:nowrap;font-family:'Inter',system-ui,sans-serif;
}
.sb-group-items{
display:flex;flex-direction:column;gap:1px;margin-left:19px;padding-left:13px;
border-left:1px solid var(--t3-sb-border);
}
.sb-group-items .sb-item{font-weight:500;font-size:13px;}
/* ── SIDEBAR COLLAPSE TOGGLE (small, next to MENU label) ── */
.sb-top-row{display:flex;align-items:center;justify-content:space-between;padding:8px 4px 4px;}
.sb-top-label{padding:0;}
.sb-toggle-btn{
width:22px;height:22px;flex:0 0 22px;display:flex;align-items:center;justify-content:center;
border:none;background:none;color:var(--t3-item-ink);cursor:pointer;border-radius:6px;transition:.2s;
}
.sb-toggle-btn:hover{background:var(--t3-item-hover-bg);color:var(--t3-accent);}
.sbc-ic{width:14px;height:14px;transition:transform .25s;}
/* native hidden attribute must win over the .dash-header-row{display:flex} rule below it in the cascade */
.dash-header-row[hidden]{display:none !important;}
/* collapsed (icon-rail) state */
.sidebar.collapsed{width:76px;min-width:76px;}
.sidebar.collapsed .sb-section{display:none;}
.sidebar.collapsed .sb-group-head{display:none;}
.sidebar.collapsed .sb-group-items{border-left:none;margin-left:0;padding-left:0;}
.sidebar.collapsed .sb-item{flex-direction:column;gap:4px;padding:10px 2px;text-align:center;}
.sidebar.collapsed .sb-label{display:block;font-size:.6rem;font-weight:600;white-space:normal;line-height:1.15;}
.sidebar.collapsed .sb-ic{width:auto;}
.sidebar.collapsed .sb-ic svg{width:20px;height:20px;}
.sidebar.collapsed .sb-top-row{justify-content:center;}
.sidebar.collapsed .sb-top-label{display:none;}
.sidebar.collapsed .sbc-ic{transform:rotate(180deg);}
/* ── MOBILE HAMBURGER + DRAWER ── */
.tb-hamburger{display:none;}
.sidebar-backdrop{
display:none;position:fixed;top:var(--topbar-h);left:0;right:0;bottom:0;
background:rgba(0,0,0,.4);z-index:140;
}
.sidebar-backdrop.show{display:block;}
/* ── MAIN CONTENT (Theme 2-inspired light purple wash, sidebar/topbar stay white) ── */
.main-content{
flex:1;overflow-y:auto;padding:32px 36px;transition:margin .3s;
background:#F8F7FF;
}
[data-theme="dark"] .main-content{background:#12121E;}
.page{animation:fadeUp .35s ease;}
.page.hidden{display:none;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.page-title{font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px;font-family:'Inter',system-ui,sans-serif;}
.page-sub{color:var(--ink2);font-size:13px;margin-bottom:28px;font-family:'Inter',system-ui,sans-serif;}
.dash-header-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
/* ── CONNECT BANK BANNER (Theme 4 dashboard) ── */
.cb-banner{
display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
background:linear-gradient(120deg,var(--brand-primary),var(--brand-accent-2) 60%,var(--brand-accent));
border-radius:18px;padding:22px 26px;margin-bottom:24px;color:#fff;
box-shadow:0 12px 32px rgba(10,37,64,.3);position:relative;overflow:hidden;
}
.cb-banner::after{
content:"";position:absolute;top:-40px;right:60px;width:180px;height:180px;border-radius:50%;
background:rgba(255,255,255,.08);pointer-events:none;
}
.cb-banner-left{display:flex;align-items:flex-start;gap:16px;position:relative;z-index:1;}
.cb-banner-ic{
width:44px;height:44px;flex:0 0 44px;border-radius:14px;background:rgba(255,255,255,.18);
display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}
.cb-banner-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.cb-banner-text h3{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:0;font-family:'Inter',system-ui,sans-serif;}
.cb-banner-badge{
background:rgba(255,255,255,.22);color:#fff;font-size:10px;font-weight:700;letter-spacing:.03em;
text-transform:uppercase;padding:3px 10px;border-radius:20px;white-space:nowrap;font-family:var(--font-mono);
}
.cb-banner-text p{font-size:13px;font-weight:400;color:rgba(255,255,255,.85);line-height:1.55;margin:0 0 12px;max-width:520px;font-family:'Inter',system-ui,sans-serif;}
.cb-banner-trust{display:flex;align-items:center;gap:6px;}
.cb-avatar{
width:24px;height:24px;border-radius:50%;background:#fff;color:#7C3AED;font-size:11px;font-weight:700;
display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.5);
margin-left:-8px;font-family:'Inter',system-ui,sans-serif;
}
.cb-avatar-1{margin-left:0;}
.cb-trust-text{font-size:11px;font-weight:500;color:rgba(255,255,255,.8);margin-left:8px;font-family:'Inter',system-ui,sans-serif;}
.cb-banner-btn{
background:#fff;color:#7C3AED;border:none;border-radius:50px;padding:12px 22px;font-weight:700;font-size:13px;
cursor:pointer;white-space:nowrap;transition:.2s;position:relative;z-index:1;box-shadow:0 4px 14px rgba(0,0,0,.12);
font-family:'Inter',system-ui,sans-serif;
}
.cb-banner-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.18);}
.btn-connect{
background:var(--surface);border:2px solid var(--border);color:var(--ink);white-space:nowrap;
}
.btn-connect:hover{border-color:var(--c1);color:var(--c1);}
/* ── DASHBOARD CARDS (Theme 2 pastel style) ── */
.dash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:28px;}
.dash-card{
border-radius:16px;padding:20px 20px 18px;
box-shadow:0 2px 10px rgba(20,20,40,.05);transition:.3s;position:relative;overflow:hidden;
border:1px solid rgba(0,0,0,.03);
}
.dash-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(20,20,40,.08);}
.dash-card::after{content:none;} /* Theme 2 cards use a soft gradient fill instead of a top accent bar */
/* soft glossy highlight, lightest at the bottom-right corner */
.dash-card::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 120% at 100% 100%,rgba(255,255,255,.65),rgba(255,255,255,0) 60%);
}
[data-theme="dark"] .dash-card::before{
background:radial-gradient(120% 120% at 100% 100%,rgba(255,255,255,.08),rgba(255,255,255,0) 60%);
}
.dc-purple{background:linear-gradient(135deg,#EDE7FF,#F6F3FF);}
.dc-red{background:linear-gradient(135deg,#FDECEC,#FFF3EC);}
.dc-green{background:linear-gradient(135deg,#E7F8EF,#EFFBF5);}
.dc-blue{background:linear-gradient(135deg,#E8F1FF,#EEF6FF);}
[data-theme="dark"] .dc-purple{background:linear-gradient(135deg,#221A3A,#1B1730);}
[data-theme="dark"] .dc-red{background:linear-gradient(135deg,#331E1E,#2A1C1C);}
[data-theme="dark"] .dc-green{background:linear-gradient(135deg,#173226,#132A21);}
[data-theme="dark"] .dc-blue{background:linear-gradient(135deg,#182A42,#152438);}
.dc-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.dc-body{display:flex;flex-direction:column;}
.dc-icon{
width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.dc-purple .dc-icon{background:rgba(124,58,237,.15);color:var(--brand-accent-2);}
.dc-red .dc-icon{background:rgba(239,68,68,.15);color:#EF4444;}
.dc-green .dc-icon{background:rgba(16,185,129,.15);color:#10B981;}
.dc-blue .dc-icon{background:rgba(0,212,255,.15);color:#00A6CC;}
.dc-label{font-size:11px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.03em;font-family:var(--font-mono);}
.dc-val{font-size:22px;font-weight:800;letter-spacing:-.01em;margin-top:4px;font-family:'Inter',system-ui,sans-serif;
color:var(--ink);background:none;-webkit-background-clip:initial;background-clip:initial;}
.dc-sub{font-size:12px;font-weight:500;color:var(--ink2);margin-top:8px;font-family:'Inter',system-ui,sans-serif;}
.dc-sub-warn{color:#EF4444;font-weight:600;}
/* up/down delta chip (like the landing page's "+12.4% ↑" / "-3.1% ↓") — only shown when there's a real signal to report */
.dc-delta{font-family:var(--font-mono);font-size:11px;font-weight:700;margin-top:6px;display:inline-flex;align-items:center;gap:3px;}
.dc-delta.dc-up{color:#10B981;}
.dc-delta.dc-down{color:#EF4444;}
.dash-chart-area,.dash-recent,.dash-upcoming{background:var(--surface);border-radius:16px;padding:20px 22px;
box-shadow:0 2px 10px rgba(20,20,40,.05);margin-bottom:0;border:1px solid rgba(0,0,0,.03);}
.dash-chart-area h3,.dash-recent h3,.dash-upcoming h3{font-size:15px;font-weight:700;margin-bottom:0;font-family:'Inter',system-ui,sans-serif;}
/* ── DASHBOARD 2-COLUMN LAYOUT (Theme 4 only) ──
#dash-col-left/#dash-col-right are created by js/app.js's layoutDashboardGrid() only when Theme 4
is active, each holding its own real DOM children — so column heights are fully independent
(no CSS Grid row-height coupling pushing Upcoming Charges down to match Recent Subscriptions). */
.dash-grid{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;}
.dash-col{display:flex;flex-direction:column;gap:30px;flex:1;min-width:280px;}
/* mini Add-Subscription card is a full-width row below both columns, not confined to the left column */
.dash-addform-card{flex:1 1 100%;}
.dash-upcoming{margin-top:-5px;} /* nudge up 5px relative to the column's 30px gap */
.dash-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
/* Upcoming panel: the total sits right under the header, so it needs less gap above it
(using a negative margin on the total itself clipped the text). */
.dash-upcoming .dash-panel-head{margin-bottom:8px;}
.live-pill{
background:rgba(124,58,237,.12);color:var(--brand-accent-2);font-size:11px;font-weight:400;padding:4px 12px;
border-radius:20px;white-space:nowrap;font-family:var(--font-mono);
}
/* recent-list filter + view-all controls */
.dash-recent-controls{display:flex;align-items:center;gap:8px;}
.dash-filter-input{
padding:6px 12px;border:1px solid var(--t3-sb-border);border-radius:20px;background:var(--bg);
color:var(--ink);font-size:12px;width:110px;font-family:'Inter',system-ui,sans-serif;
}
.dash-filter-input:focus{outline:none;border-color:var(--t3-accent);}
.btn-view-all{
padding:6px 14px;border:1px solid var(--t3-sb-border);border-radius:20px;background:var(--surface);
color:var(--ink);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.2s;
font-family:'Inter',system-ui,sans-serif;
}
.btn-view-all:hover{border-color:var(--t3-accent);color:var(--t3-accent);}
/* Recent Subscriptions scrollable list — height synced to right column via JS */
.dash-recent .sub-list{overflow-y:auto;scrollbar-width:none;}
.dash-recent .sub-list::-webkit-scrollbar{display:none;}
/* ── Scroll arrow indicators (shared by Recent, Upcoming, Category) ── */
.scroll-wrap{position:relative;}
.scroll-arrow{
position:absolute;left:50%;transform:translateX(-50%);
width:28px;height:28px;border-radius:50%;
background:rgba(124,58,237,.12);color:#7C3AED;
display:none;align-items:center;justify-content:center;
font-size:13px;cursor:pointer;z-index:2;pointer-events:auto;
transition:background .15s;
}
.scroll-arrow:hover{background:rgba(124,58,237,.22);}
.scroll-arrow-up{top:-14px;}
.scroll-arrow-down{bottom:-14px;}
.scroll-arrow.visible{display:flex;}
/* Upcoming Charges: inline arrows next to the toggle buttons */
.uc-scroll-arrows{display:flex;gap:4px;margin-left:6px;}
.uc-scroll-arrows .scroll-arrow{
position:static;transform:none;width:22px;height:22px;font-size:10px;
display:none;
}
.uc-scroll-arrows .scroll-arrow.visible{display:flex;}
/* "Next: date" pill on Recent Subscriptions rows */
.next-pill{
display:inline-flex;align-items:center;gap:3px;margin-top:3px;font-size:10.5px;font-weight:600;
color:var(--brand-accent-2);background:rgba(124,58,237,.1);padding:2px 8px;border-radius:20px;width:fit-content;
font-family:var(--font-mono);
}
/* Spend by Category — dot + label + amount, slim progress bar underneath */
.cat-list{display:flex;flex-direction:column;gap:14px;padding:0 10px;max-height:330px;overflow-y:auto;scrollbar-width:none;}
.cat-list::-webkit-scrollbar{display:none;}
.cat-row-top{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.cat-dot{
width:8px;height:8px;border-radius:50%;flex:0 0 8px;
background:var(--bar,var(--brand-accent-2));
box-shadow:0 0 0 3px color-mix(in srgb, var(--bar,#888) 18%, transparent);
}
.cat-name{font-size:13px;font-weight:400;color:var(--ink);flex:1;font-family:'Inter',system-ui,sans-serif;}
.cat-amount{font-size:13px;font-weight:700;color:var(--ink);font-family:'Inter',system-ui,sans-serif;}
.cat-bar-track{
height:10px;width:100%;border-radius:999px;overflow:hidden;
background:color-mix(in srgb, var(--ink) 7%, transparent);
}
.cat-bar-fill{
height:100%;border-radius:999px;transition:width .6s cubic-bezier(.4,0,.2,1);
/* Vivid left -> lighter right gives the bar depth instead of a flat block.
(The old filter:brightness(.88) was dulling every color — removed.) */
background:linear-gradient(90deg,
var(--bar) 0%,
color-mix(in srgb, var(--bar) 72%, white) 100%);
box-shadow:0 1px 8px color-mix(in srgb, var(--bar) 42%, transparent);
}
/* Upcoming Charges — initial avatar circle, flat row (no colored left accent bar) */
.uc-avatar{
width:32px;height:32px;border-radius:50%;flex:0 0 32px;color:#fff;
display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;margin-right:12px;
font-family:'Inter',system-ui,sans-serif;
/* Diagonal gradient + colored glow, matching the category bars. The old flat
_DARK palette read muted against the light purple row wash. */
background:linear-gradient(135deg,
color-mix(in srgb, var(--av,var(--brand-primary)) 88%, white) 0%,
var(--av,var(--brand-primary)) 100%);
box-shadow:0 2px 8px color-mix(in srgb, var(--av,#888) 45%, transparent),
inset 0 1px 0 rgba(255,255,255,.25);
}
.upcoming-row:has(.uc-avatar){border-left:none;background:#F8F7FF;} /* light purple, matches the main content area's wash */
[data-theme="dark"] .upcoming-row:has(.uc-avatar){background:#1A1A2E;}
.upcoming-row:has(.uc-avatar) .uc-info{flex:1;}
.chart-placeholder{min-height:120px;display:flex;align-items:center;justify-content:center;color:var(--ink2);
border:2px dashed var(--border);border-radius:var(--radius-sm);font-size:.9rem;}
/* ── SKELETON LOADER (brief flash while sql.js/WASM loads) ── */
.chart-skeleton{display:flex;flex-direction:column;gap:12px;padding:8px 0;}
.skel-bar{height:28px;border-radius:6px;background:linear-gradient(90deg,var(--bg) 25%,var(--border) 50%,var(--bg) 75%);
background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
/* ── DASHBOARD MINI "ADD A SUBSCRIPTION MANUALLY" CARD (Theme 4 only) ── */
.dash-addform-card{
background:var(--surface);border-radius:16px;padding:22px;box-shadow:0 2px 10px rgba(20,20,40,.05);
border:1px solid rgba(0,0,0,.03);
}
.dash-mini-title{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--ink);font-family:'Inter',system-ui,sans-serif;}
.dash-mini-plus{
width:22px;height:22px;border-radius:50%;background:var(--brand-gradient);color:#fff;font-weight:700;
display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 22px;
}
.dash-openfull-link{font-size:12px;font-weight:600;color:var(--t3-accent);white-space:nowrap;}
.dash-openfull-link:hover{text-decoration:underline;}
.mini-form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px;}
.mini-form-grid-4col{grid-template-columns:repeat(4,1fr);}
.mini-form-grid-4{grid-template-columns:repeat(3,1fr);}
.mini-form-grid .form-group label,.mini-form-grid-4 .form-group label{
font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink2);margin-bottom:5px;
}
.mini-form-grid .form-group input,.mini-form-grid .form-group select,
.mini-form-grid-4 .form-group input,.mini-form-grid-4 .form-group select{
padding:9px 12px;font-size:13px;border-radius:9px;
}
/* Theme 4 mini-form: white inputs + light purple border, flat dropdowns */
.dash-addform-card input[type="text"],
.dash-addform-card input[type="number"],
.dash-addform-card input[type="date"]{
background:#fff;border:0.75px solid #C4B5FD;border-radius:9px;
}
.dash-addform-card select{
background:#fff;border:1px solid #7C3AED;border-radius:9px;
-webkit-appearance:none;-moz-appearance:none;appearance:none;
background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237C3AED' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;background-size:10px;
padding-right:30px;
}
/* ponytail: Category now inside .mini-form-grid — no standalone .form-group rules needed */
.mini-advanced-link{
display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:14px;
border-top:1px solid var(--t3-sb-border);cursor:pointer;
}
.mini-advanced-label{font-size:13px;font-weight:500;font-family:'Inter',system-ui,sans-serif;
background:var(--brand-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.mini-advanced-arrow{
font-size:12px;font-weight:600;color:var(--t3-accent);white-space:nowrap;
margin-left:auto;font-family:var(--font-mono);
}
.mini-advanced-arrow:hover{text-decoration:underline;}
.mini-form-hint{font-size:11.5px;color:var(--ink2);margin-top:12px;}
.mini-form-actions{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap;}
.mini-form-actions .btn{padding:10px 20px;font-size:13px;}
.mini-form-actions .btn-ghost{background:none;border:1px solid var(--t3-sb-border);color:var(--ink2);border-radius:9px;}
.mini-form-note{font-size:11.5px;color:var(--ink2);}
/* ── UPCOMING CHARGES ── */
.upcoming-toggle{display:flex;gap:2px;background:var(--bg);border-radius:50px;padding:3px;margin-bottom:16px;width:fit-content;}
/* inside the panel head (next to the "Upcoming Charges" title), drop the bottom margin so it
sits vertically centered/parallel with the title instead of sitting lower */
.dash-panel-head .upcoming-toggle{margin-bottom:0;}
.ut-btn{
padding:6px 16px;border:none;background:none;border-radius:50px;font-weight:700;font-size:.8rem;
cursor:pointer;color:var(--ink2);transition:.2s;font-family:var(--font-mono);
}
/* smaller pill when it's up in the panel head */
.dash-panel-head .ut-btn{padding:5px 12px;font-size:.72rem;}
.ut-btn.active{background:var(--surface);color:var(--c1);box-shadow:0 2px 8px var(--shadow);}
.upcoming-total{font-size:.85rem;font-weight:400;line-height:1.5;margin-top:0;margin-bottom:10px;color:var(--ink);
background:none;-webkit-background-clip:initial;background-clip:initial;}
.upcoming-list{display:flex;flex-direction:column;gap:8px;max-height:175px;overflow-y:auto;scrollbar-width:none;}
.upcoming-list::-webkit-scrollbar{display:none;}
.upcoming-row{
display:flex;justify-content:space-between;align-items:center;padding:12px 16px;
background:var(--bg);border-radius:var(--radius-sm);cursor:pointer;transition:.2s;
border-left:4px solid var(--c2);
}
.upcoming-row:hover{transform:translateX(4px);box-shadow:0 2px 12px var(--shadow);}
.upcoming-row.uc-urgent{border-left-color:var(--c3);background:rgba(253,121,168,.06);}
.upcoming-row.uc-soon{border-left-color:var(--c4);}
.uc-info{display:flex;flex-direction:column;gap:2px;}
.uc-name{font-weight:400;font-size:.9rem;}
.uc-date{font-size:.78rem;color:var(--ink2);font-family:var(--font-mono);}
.uc-cost{font-weight:400;color:var(--ink);font-size:1rem;font-family:var(--font-mono);}
.upcoming-empty{text-align:center;padding:24px;color:var(--ink2);font-size:.9rem;
border:2px dashed var(--border);border-radius:var(--radius-sm);}
/* ── FORMS ── */
.fp-form{background:var(--surface);border-radius:var(--radius);padding:28px;box-shadow:0 4px 18px var(--shadow);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;}
.fg-full{grid-column:1/-1;}
.form-group label{display:block;font-weight:700;font-size:.85rem;margin-bottom:6px;color:var(--ink);}
.req{color:var(--c3);}
.form-group input,.form-group select,.form-group textarea{
width:100%;padding:10px 14px;border:2px solid var(--border);border-radius:var(--radius-sm);
background:var(--bg);color:var(--ink);font-size:.92rem;transition:.2s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
border-color:var(--c1);outline:none;box-shadow:0 0 0 3px rgba(108,92,231,.15);
}
.form-group select option:disabled{color:#aaa;}
.fp-advanced{margin-top:20px;border-top:1px solid var(--border);padding-top:16px;}
.fp-advanced summary{
cursor:pointer;font-weight:700;font-size:.88rem;list-style:none;
display:flex;align-items:center;gap:6px;user-select:none;
background:var(--brand-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.fp-advanced summary::-webkit-details-marker{display:none;}
.fp-advanced summary::before{content:'▸';font-size:.75rem;transition:transform .2s;
background:var(--brand-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.fp-advanced[open] summary::before{transform:rotate(90deg);}
.fp-advanced summary:hover{color:var(--ink);}
.cat-select-wrap{display:flex;gap:8px;}
.cat-select-wrap select{flex:1;}
/* Add Subscription page — Theme 4 overrides */
/* All text inputs + textarea: white bg, thin purple border */
#page-add .form-group input[type="text"],
#page-add .form-group input[type="number"],
#page-add .form-group input[type="date"],
#page-add .form-group textarea{
background:#fff;border:0.15px solid #BEA6F6;
}
/* All dropdowns: very light gray bg, thin purple border, flat */
#page-add .form-group select{
background:#F7F7F8;border:0.15px solid #BEA6F6;
-webkit-appearance:none;-moz-appearance:none;appearance:none;
background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237C3AED' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;background-size:10px;
padding-right:30px;
}
/* Category dropdown: same width as other inputs (not full-width) */
#page-add .form-grid > .fg-full:has(.cat-select-wrap){grid-column:1;}
/* Advanced section: light purple container wrapping all fields */
#page-add .fp-advanced .form-grid{
background:#FAF8FF;border-radius:12px;padding:20px;border:0.15px solid #DDD6FE;
}
.add-cat-btn{
padding:8px 14px;border:2px solid var(--c2);border-radius:var(--radius-sm);background:none;
color:var(--c2);font-weight:800;cursor:pointer;font-size:.8rem;white-space:nowrap;transition:.2s;
}
.add-cat-btn:hover{background:var(--c2);color:#fff;}
/* star rating */
.star-rating{display:flex;gap:4px;}
.star{font-size:1.6rem;color:var(--border);cursor:pointer;transition:.15s;}
.star.active{color:var(--c4);}
.star:hover,.star:hover~.star{color:var(--c4);}
.form-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;}
.btn{padding:11px 24px;border-radius:50px;border:none;font-weight:400;font-size:14px;cursor:pointer;transition:.25s;}
/* Brand gradient (cyan -> violet) — matches the logo, the category bars and the
Upcoming Charges avatars, so every accent in the app speaks one color language. */
/* Soft lavender surface + violet ink — matches the dashboard stat cards.
Hairline border deepens slightly on hover instead of a heavy lift/glow. */
.btn-primary{
background:#F5F0FF;
color:var(--brand-accent-2);
border:0.05px solid #DDD6FE;
box-shadow:none;
}
.btn-primary:hover{
background:#EDE7FE;
border-color:#C4B5FD;
}
.btn-primary:active{background:#E5DBFD;}
[data-theme="dark"] .btn-primary{
background:rgba(124,58,237,.16);border-color:rgba(124,58,237,.34);color:#C4B5FD;
}
[data-theme="dark"] .btn-primary:hover{
background:rgba(124,58,237,.24);border-color:rgba(124,58,237,.55);
}
.btn-ghost{background:none;border:2px solid var(--border);color:var(--ink);}
.btn-ghost:hover{border-color:var(--c1);color:var(--c1);}
.btn-danger{background:none;border:2px solid var(--c6);color:var(--c6);}
.btn-danger:hover{background:var(--c6);color:#fff;}
/* ── FILTER BAR ── */
.filter-bar{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.filter-bar select,.filter-bar input{
padding:8px 14px;border:2px solid var(--border);border-radius:var(--radius-sm);
background:var(--surface);color:var(--ink);font-size:.88rem;
}
.filter-bar input{flex:1;min-width:160px;}
/* ── SUBSCRIPTION LIST ── */
.sub-list{display:flex;flex-direction:column;gap:10px;}
.sub-row{
display:grid;grid-template-columns:auto 1fr 100px 100px 110px 40px;align-items:center;gap:12px;
background:var(--surface);border-radius:var(--radius-sm);padding:14px 18px;
box-shadow:0 2px 12px var(--shadow);cursor:pointer;transition:.2s;
overflow:hidden;min-width:0;
}
/* ── MERCHANT LOGO / AVATAR ── */
.merch-logo-wrap{display:flex;flex:0 0 auto;}
.merch-logo{width:36px;height:36px;border-radius:9px;object-fit:contain;background:var(--bg);padding:4px;}
.merch-avatar{
width:36px;height:36px;border-radius:50%;flex:0 0 auto;
background:var(--brand-gradient);
color:#fff;font-weight:800;font-size:.95rem;display:flex;align-items:center;justify-content:center;
}
.sub-row:hover{transform:translateX(4px);box-shadow:0 4px 20px var(--shadow);}
.sub-name{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sub-cat{font-size:.75rem;color:var(--ink2);margin-top:2px;}
.sub-cost{font-weight:600;color:var(--c1);white-space:nowrap;}
.sub-freq{font-size:.8rem;color:var(--ink2);white-space:nowrap;}
/* Theme 4's Recent Subscriptions rows: mono font for the numeric/tag bits, matching the landing page's fintech feel */
.sub-row-t4 .sub-name{font-weight:400;}
.sub-row-t4 .sub-cost{font-family:var(--font-mono);color:var(--ink);font-weight:400;}
.sub-row-t4 .sub-cat{font-family:var(--font-mono);text-transform:uppercase;font-size:10px;letter-spacing:.03em;}
.sub-row-t4 .sub-cat-inline{font-weight:400;color:var(--ink2);font-family:'Inter',system-ui,sans-serif;font-size:.9em;}
.sub-row-t4 .merch-avatar{font-family:var(--font-mono);}
/* bordered chip style for the "Next" pill and verdict badges — 1px border matching the text color */
.sub-row-t4 .next-pill{background:none;border:1px solid var(--brand-accent-2);}
.sub-row-t4 .verdict-badge{font-weight:500;border:1px solid currentColor;background:none;white-space:nowrap;font-size:.68rem;padding:3px 8px;font-family:var(--font-mono);}
.sub-row-t4 .v-keep{color:#00b894;}
.sub-row-t4 .v-cancel{color:#e84393;}
.sub-row-t4 .v-test{color:#e17055;}
.sub-row-t4 .v-pending{color:var(--brand-accent-2);}
/* Theme 4's Recent Subscriptions avatar: category icon on a round, category-colored background */
.cat-avatar{
width:36px;height:36px;border-radius:50%;flex:0 0 36px;display:flex;align-items:center;justify-content:center;
font-size:16px;color:#fff;
}
.verdict-badge{
display:inline-block;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:800;text-align:center;
font-family:var(--font-mono);
}
.v-keep{background:rgba(0,206,201,.15);color:#00b894;}
.v-cancel{background:rgba(253,121,168,.15);color:#e84393;}
.v-test{background:rgba(253,203,110,.2);color:#e17055;}
.v-pending{background:rgba(108,92,231,.1);color:var(--c1);}
.sub-edit{font-size:1.1rem;text-align:center;opacity:.4;transition:.2s;}
.sub-row:hover .sub-edit{opacity:1;}
.empty-state{
text-align:center;padding:40px;color:var(--ink2);border:2px dashed var(--border);
border-radius:var(--radius);font-size:.95rem;
}
/* ── CHARGE HISTORY (edit modal) ── */
.ch-section{margin-top:18px;padding-top:18px;border-top:1px solid var(--border);}
.ch-header{font-weight:800;font-size:.95rem;margin-bottom:12px;}
.ch-empty{font-size:.85rem;color:var(--ink2);line-height:1.6;}
.ch-bars{display:flex;align-items:flex-end;gap:10px;height:80px;padding:0 4px;margin-bottom:14px;overflow-x:auto;}
.ch-bar-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto;}
.ch-bar{width:22px;background:var(--c2);border-radius:4px 4px 0 0;position:relative;transition:height .3s;}
.ch-bar.ch-hike{background:var(--c3);}
.ch-hike-ic{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:.75rem;color:var(--c3);font-weight:900;}
.ch-bar-label{font-size:.62rem;color:var(--ink2);white-space:nowrap;}
.ch-list{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;max-height:140px;overflow-y:auto;}
.ch-row{
display:grid;grid-template-columns:1fr 70px 24px;align-items:center;gap:8px;
padding:6px 10px;background:var(--bg);border-radius:6px;font-size:.82rem;
}
.ch-del{border:none;background:none;color:var(--ink2);cursor:pointer;font-size:.85rem;opacity:.5;transition:.2s;}
.ch-del:hover{opacity:1;color:var(--c3);}
.ch-add-row{display:flex;gap:8px;flex-wrap:wrap;}
.ch-add-row input{
padding:8px 12px;border:2px solid var(--border);border-radius:var(--radius-sm);
background:var(--bg);color:var(--ink);font-size:.85rem;
}
.ch-add-row input[type="date"]{flex:1;min-width:130px;}
.ch-add-row input[type="number"]{width:100px;}
/* ── RICH EMPTY STATE ── */
.empty-state-rich{
text-align:center;padding:50px 30px;border:2px dashed var(--border);border-radius:var(--radius);
}
.empty-state-rich .es-icon{font-size:2.8rem;margin-bottom:12px;}
.empty-state-rich h3{font-size:1.15rem;font-weight:800;margin-bottom:8px;}
.empty-state-rich p{color:var(--ink2);font-size:.9rem;max-width:420px;margin:0 auto 18px;line-height:1.6;}
.export-hint{
background:rgba(108,92,231,.08);border:1px solid rgba(108,92,231,.2);border-radius:var(--radius-sm);
padding:12px 18px;margin-bottom:18px;font-size:.88rem;color:var(--ink2);
}
/* ── ONBOARDING WELCOME ── */
.onboarding{max-width:920px;margin:0 auto;padding:20px 0 10px;}
.onboarding.hidden{display:none;}
.ob-hero{text-align:center;margin-bottom:40px;}
.ob-icon{font-size:3.2rem;margin-bottom:10px;}
.ob-hero h1{font-size:2rem;font-weight:900;margin-bottom:10px;
background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.ob-sub{color:var(--ink2);font-size:1rem;max-width:520px;margin:0 auto;line-height:1.6;}
.ob-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:36px;}
.ob-step{
background:var(--surface);border-radius:var(--radius);padding:26px 20px;text-align:center;
box-shadow:0 4px 18px var(--shadow);position:relative;
}
.ob-step-num{
position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;
background:linear-gradient(90deg,var(--c1),var(--c5));color:#fff;font-weight:900;font-size:.85rem;
display:flex;align-items:center;justify-content:center;
}
.ob-step-ic{font-size:2rem;margin:10px 0;}
.ob-step h3{font-size:1rem;font-weight:800;margin-bottom:8px;}
.ob-step p{font-size:.85rem;color:var(--ink2);line-height:1.6;}
.ob-cta{text-align:center;}
.ob-cta .btn{font-size:1rem;padding:14px 32px;}
.ob-help-link{display:block;margin-top:14px;font-size:.85rem;color:var(--ink2);}
/* ── REPORT ── */
.report-mode-toggle{display:flex;gap:2px;background:var(--bg);border-radius:50px;padding:3px;margin-bottom:22px;width:fit-content;}
.rmt{
padding:8px 20px;border:none;background:none;border-radius:50px;font-weight:700;font-size:.85rem;
cursor:pointer;color:var(--ink2);transition:.2s;font-family:var(--font-mono);
}
.rmt.active{background:var(--surface);color:var(--c1);box-shadow:0 2px 10px var(--shadow);}
.report-content{background:var(--surface);border-radius:var(--radius);padding:28px;box-shadow:0 4px 18px var(--shadow);}
.report-header{text-align:center;padding:20px 0 24px;border-bottom:2px solid var(--border);margin-bottom:22px;}
.report-header h2{font-size:1.5rem;font-weight:900;}
.report-header .report-date{color:var(--ink2);font-size:.85rem;margin-top:4px;}
.report-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;}
.rs-card{text-align:center;padding:18px;background:var(--bg);border-radius:var(--radius-sm);}
.rs-card b{display:block;font-size:1.6rem;font-weight:600;margin-bottom:2px;
background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.rs-card small{color:var(--ink2);font-weight:600;}
.report-table{width:100%;border-collapse:collapse;margin-top:16px;}
.report-table th{text-align:left;padding:10px 12px;border-bottom:2px solid var(--border);font-size:.8rem;
text-transform:uppercase;color:var(--ink2);letter-spacing:.5px;}
.report-table td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:.9rem;}
.report-table tr:hover{background:rgba(108,92,231,.04);}
.report-promise{text-align:center;margin-top:24px;padding:18px;background:linear-gradient(90deg,rgba(108,92,231,.08),rgba(0,206,201,.08));
border-radius:var(--radius-sm);font-weight:700;color:var(--c1);}
/* ── EXPORT CARDS ── */
.export-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.export-card{
background:var(--surface);border-radius:var(--radius);padding:28px 22px;text-align:center;
box-shadow:0 4px 18px var(--shadow);transition:.3s;
}
.export-card:hover{transform:translateY(-6px);}
.exp-ic{font-size:2.4rem;display:block;margin-bottom:10px;}
.export-card h3{font-weight:800;margin-bottom:6px;}
.export-card p{font-size:.85rem;color:var(--ink2);margin-bottom:16px;}
/* ── SETTINGS ── */
.settings-tabs{display:flex;gap:2px;background:var(--bg);border-radius:50px;padding:3px;margin-bottom:24px;width:fit-content;}
.stab{
padding:9px 20px;border:none;background:none;border-radius:50px;font-weight:700;font-size:.85rem;
cursor:pointer;color:var(--ink2);transition:.2s;white-space:nowrap;font-family:var(--font-mono);
}
.stab.active{background:var(--surface);color:var(--c1);box-shadow:0 2px 10px var(--shadow);}
.settings-panel{max-width:640px;display:flex;flex-direction:column;gap:16px;}
.settings-panel.hidden{display:none;}
.settings-card{background:var(--surface);border-radius:var(--radius);padding:20px 22px;box-shadow:0 4px 18px var(--shadow);}
.settings-card h3{font-size:.95rem;font-weight:800;margin-bottom:10px;}
.settings-card p{font-size:.85rem;color:var(--ink2);line-height:1.6;margin-bottom:8px;}
.settings-card input,.settings-card select{
width:100%;padding:10px 14px;border:2px solid var(--border);border-radius:var(--radius-sm);
background:var(--bg);color:var(--ink);font-size:.9rem;transition:.2s;
}
.settings-card input:focus,.settings-card select:focus{border-color:var(--c1);outline:none;box-shadow:0 0 0 3px rgba(108,92,231,.15);}
.settings-card .mono{font-family:'SF Mono',Consolas,monospace;}
.settings-card-highlight{background:linear-gradient(135deg,rgba(108,92,231,.06),rgba(0,206,201,.06));border:1px solid rgba(108,92,231,.15);}
.settings-note{font-size:.78rem;color:var(--ink2);}
.settings-card-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.settings-card-row h3{margin-bottom:0;}
.settings-save-msg{color:#00b894;font-weight:700;font-size:.85rem;}
/* AI provider grid */
.ai-provider-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ai-provider-btn{
display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);
border:2px solid var(--border);background:var(--bg);cursor:pointer;text-align:left;transition:.2s;
}
.ai-provider-btn:hover{border-color:var(--c1);}
.ai-provider-btn.active{background:var(--c1);border-color:var(--c1);}
.ai-provider-btn.active .ai-provider-text b,.ai-provider-btn.active .ai-provider-text small{color:#fff;}
.ai-provider-ic{font-size:1.3rem;}
.ai-provider-text{display:flex;flex-direction:column;}
.ai-provider-text b{font-size:.85rem;color:var(--ink);}
.ai-provider-text small{font-size:.7rem;color:var(--ink2);margin-top:2px;}
.ai-connect-note{
grid-column:1/-1;margin-top:8px;font-size:12px;color:var(--ink2);
display:flex;align-items:center;gap:6px;font-family:var(--font-mono);
}
.ai-connect-note a{color:var(--brand-accent-2);text-decoration:none;font-weight:600;}
.ai-connect-note a:hover{text-decoration:underline;}
.ai-preset-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.ai-preset-btn{
padding:5px 12px;border-radius:20px;font-size:.72rem;font-weight:700;border:none;
background:var(--bg);color:var(--ink2);cursor:pointer;transition:.2s;font-family:var(--font-mono);
}
.ai-preset-btn:hover{background:var(--c1);color:#fff;}
.settings-tip{
background:rgba(9,132,227,.08);border:1px solid rgba(9,132,227,.2);border-radius:var(--radius-sm);
padding:12px 16px;font-size:.8rem;color:var(--ink2);line-height:1.6;
}
.settings-tip code{background:rgba(9,132,227,.12);padding:1px 6px;border-radius:4px;font-family:'SF Mono',Consolas,monospace;}
.settings-status{padding:10px 14px;border-radius:var(--radius-sm);font-size:.85rem;margin-top:10px;}
.settings-status.ok{background:rgba(0,206,201,.1);color:#00b894;}
.settings-status.err{background:rgba(253,121,168,.1);color:#e84393;}
/* Connectors */
.connector-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.connector-info{display:flex;align-items:flex-start;gap:12px;}
.connector-ic{font-size:1.6rem;}
.connector-name{font-weight:700;font-size:.9rem;}
.connector-desc{font-size:.78rem;color:var(--ink2);margin-top:1px;}
.connector-status-line{font-size:.72rem;margin-top:3px;font-family:var(--font-mono);}
.connector-status-line.ok{color:#00b894;}
/* Theme 4 connector overrides */
.connector-desc-t4{font-size:.72rem;color:var(--ink2);line-height:1.4;margin-top:4px;}
.connector-soon-badge{
display:inline-block;margin-top:6px;font-size:10px;font-weight:700;font-family:var(--font-mono);
color:var(--brand-accent-2);background:rgba(124,58,237,.1);padding:2px 10px;border-radius:20px;
letter-spacing:.03em;text-transform:uppercase;
}
.btn-locked{opacity:.7;cursor:default;border:0.5px solid #7C3AED !important;}
.btn-locked:hover{border-color:#7C3AED !important;}
/* Coming soon popup */
.coming-soon-popup{
position:absolute;top:calc(100% + 6px);right:0;
background:rgba(124,58,237,.12);color:#7C3AED;font-size:12px;font-weight:600;
padding:6px 14px;border-radius:10px;white-space:nowrap;font-family:var(--font-mono);
opacity:0;transition:opacity .2s;pointer-events:none;
}
.coming-soon-popup.show{opacity:1;}
.connector-actions{display:flex;gap:8px;}
.btn-sm{padding:7px 16px;font-size:.8rem;}
.btn-connected{background:rgba(0,206,201,.15);color:#00b894;border:none;}
/* Payment */
.payment-row{display:flex;align-items:center;gap:14px;}
.payment-row > div{flex:1;}
/* ── HELP PAGE ── */
.help-content{max-width:700px;}
.help-section{background:var(--surface);border-radius:var(--radius);padding:24px;
box-shadow:0 4px 18px var(--shadow);margin-bottom:16px;}
/* ── HELP & ABOUT ──────────────────────────────────────────────────────────
Type scale: body 14px, bold/headings 16px. Emoji headings replaced with
stroke icons in tinted chips — same visual language as the rest of the app. */
.help-section h3{font-size:16px;font-weight:600;margin:0;letter-spacing:-.01em;color:var(--ink);}
.help-section p,.help-section li{font-size:14px;line-height:1.7;color:var(--ink2);}
.help-section p{margin:0 0 10px;}
.help-section p:last-child{margin-bottom:0;}
.help-section b{font-size:16px;font-weight:600;color:var(--ink);}
.hs-head{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.hs-ic{
flex:0 0 32px;width:32px;height:32px;border-radius:10px;
display:flex;align-items:center;justify-content:center;
}
.hs-ic svg{width:17px;height:17px;}
.hs-violet{background:#F1EBFE;color:#7C3AED;}
.hs-cyan {background:#E4F7FC;color:#0891B2;}
.hs-green {background:#E9F9F1;color:#0E9F6E;}
.hs-amber {background:#FEF3E2;color:#C2740C;}
.hs-pink {background:#FDECF3;color:#DB2777;}
/* numbered steps */
.hs-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;}
.hs-steps li{padding-left:2px;}
/* verdict list with inline pills */
.hs-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:9px;}
.hs-list li{display:flex;align-items:flex-start;gap:9px;}
.hs-pill{
flex:0 0 auto;font-size:.66rem;font-weight:600;
padding:3px 9px;border-radius:20px;border:0.5px solid currentColor;
background:none;margin-top:1px;
}
.hp-keep{color:#00b894;}
.hp-cancel{color:#e84393;}
.hp-test{color:#e17055;}
/* quieter trailing note */
.hs-note{font-size:13px !important;color:var(--ink2);opacity:.8;}
[data-theme="dark"] .hs-violet{background:rgba(124,58,237,.16);color:#C4B5FD;}
[data-theme="dark"] .hs-cyan {background:rgba(8,145,178,.16);color:#67E8F9;}
[data-theme="dark"] .hs-green {background:rgba(16,185,129,.16);color:#6EE7B7;}
[data-theme="dark"] .hs-amber {background:rgba(194,116,12,.18);color:#FCD34D;}
[data-theme="dark"] .hs-pink {background:rgba(219,39,119,.16);color:#F9A8D4;}
/* ── RIGHT HELP SIDEBAR ── */
.help-sidebar{
width:0;min-width:0;overflow:hidden;background:var(--surface);border-left:1px solid var(--border);
transition:width .3s,min-width .3s,padding .3s;display:flex;flex-direction:column;
}
.help-sidebar.open{width:var(--help-w);min-width:var(--help-w);padding:18px;}
.hs-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.hs-header h3{font-size:1rem;font-weight:800;}
.hs-content{flex:1;overflow-y:auto;font-size:.88rem;line-height:1.7;color:var(--ink2);}
.hs-content h4{color:var(--ink);font-weight:700;margin:12px 0 4px;font-size:.9rem;}
.hs-content p{margin-bottom:10px;}
.hs-footer{padding-top:14px;border-top:1px solid var(--border);font-size:.85rem;}
/* ── CANCEL ASSIST ── */
.ca-panel{
margin-top:18px;padding:16px 20px;border-radius:var(--radius-sm);
border-left:4px solid var(--c2);background:rgba(0,206,201,.06);
}
.ca-panel.ca-easy{border-left-color:#00b894;}
.ca-panel.ca-medium{border-left-color:var(--c4);}
.ca-panel.ca-hard{border-left-color:var(--c3);background:rgba(253,121,168,.06);}
.ca-panel.ca-unknown{border-left-color:var(--border);background:var(--bg);}
.ca-header{font-weight:800;font-size:.95rem;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;}
.ca-diff{font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:20px;background:var(--bg);}
.ca-steps{margin:0 0 12px 18px;font-size:.88rem;line-height:1.8;color:var(--ink);}
.ca-steps li{margin-bottom:4px;}
.ca-links{display:flex;gap:14px;flex-wrap:wrap;}
.ca-link{
display:inline-block;padding:6px 14px;border-radius:20px;font-size:.82rem;font-weight:700;
background:var(--surface);border:1px solid var(--border);color:var(--c1);transition:.2s;
}
.ca-link:hover{background:var(--c1);color:#fff;border-color:var(--c1);text-decoration:none;}
.ca-no-data{font-size:.88rem;color:var(--ink2);line-height:1.6;}
.ca-hint{color:var(--c2);font-weight:700;font-size:.72rem;}
.ca-report-link{font-weight:700;font-size:.78rem;color:var(--c2);white-space:nowrap;}
.ca-report-link:hover{color:var(--c1);}
/* ── MODALS ── */
.modal-overlay{
position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:center;justify-content:center;
animation:fadeIn .2s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
background:var(--surface);border-radius:var(--radius);padding:28px 32px;max-width:420px;width:90%;
box-shadow:0 20px 60px rgba(0,0,0,.25);animation:slideUp .3s ease;
}
.modal-wide{max-width:560px;max-height:85vh;overflow-y:auto;}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.modal h3{font-size:1.2rem;font-weight:900;margin-bottom:6px;}
.modal p{color:var(--ink2);font-size:.9rem;}
/* ── SUBSCRIPTION DETAIL MODAL (Theme 4) ── */
.modal-detail{
max-width:680px;position:relative;padding-top:24px;
background:#F5F1FE; /* 25% lighter purple, matching the Edit modal */
}
[data-theme="dark"] .modal-detail{background:#191734;}
/* Edit Subscription modal. Scoped by id because .modal-wide is shared with the
detail and connector modals. */
#modal-edit .modal{background:#F5F1FE;} /* 25% lighter than the detail modal's #EFE9FD */
#modal-edit .modal h3{font-weight:600;} /* 900 -> 600, ~25% thinner */
[data-theme="dark"] #modal-edit .modal{background:#191734;}
.detail-close{
position:absolute;top:16px;right:18px;background:none;border:1px solid var(--border);
width:32px;height:32px;border-radius:50%;font-size:16px;cursor:pointer;color:var(--ink2);
display:flex;align-items:center;justify-content:center;transition:.2s;
}
.detail-close:hover{background:var(--bg);color:var(--ink);}
.detail-edit-btn{
position:absolute;top:18px;right:60px;font-size:12px;font-weight:600;
padding:6px 14px;border-radius:20px;border:0.5px solid var(--brand-accent-2) !important;
color:var(--brand-accent-2);font-family:var(--font-mono);
}
.detail-edit-btn:hover{background:rgba(124,58,237,.08);}
/* Back-to-detail arrow on Edit modal */
.btn-back-detail{
float:right;width:30px;height:30px;border-radius:50%;
background:#F5F0FF;border:0.5px solid #DDD6FE;color:var(--brand-accent-2);
font-size:15px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
transition:.2s;margin-top:-2px;
}
.btn-back-detail:hover{background:#EDE9FE;}
.detail-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.detail-avatar{
width:44px;height:44px;border-radius:50%;flex:0 0 44px;
display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#fff;
}
.detail-title-block{flex:1;min-width:0;}
.detail-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.detail-name{font-size:1.1rem;font-weight:800;color:var(--ink);}
.detail-meta{font-size:.82rem;color:var(--ink2);margin-top:3px;}
/* Detail chart (read-only 6-month bars) */
.detail-chart-section{margin-bottom:18px;}
.detail-section-label{
font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.08em;
color:var(--ink2);margin:0 0 14px;text-transform:uppercase;
}
.dc-bars{display:flex;align-items:flex-end;justify-content:space-around;gap:8px;padding:16px 0 4px;}
.dc-bar-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;}
.dc-bar{width:38px;border-radius:6px;transition:height .3s;}
.dc-bar-label{font-size:.7rem;color:var(--ink2);font-weight:600;}
.dc-summary{
background:#FAF5FF;border-radius:8px;padding:10px 16px;font-size:.8rem;color:var(--ink2);
margin-top:12px;border:0.5px solid #EDE9FE;
}
/* Cancel cards row */
.detail-cancel-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;}
.detail-cancel-card{
background:#FAF5FF;border-radius:12px;padding:18px;border:0.5px solid #EDE9FE;
}
.detail-card-title{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--ink2);margin-bottom:12px;font-family:var(--font-mono);}
/* .detail-cancel-btn is styled with .detail-phone-btn near the end of this file —
both are purple outline pills. The old solid-pink button rule lived here. */
.detail-card-note{font-size:.75rem;color:var(--ink2);margin-top:10px;line-height:1.4;}
.detail-phone{margin-bottom:6px;} /* type styling now lives on .detail-phone-btn */
/* Email template */
.detail-email-section{
margin-top:20px;background:#FAF5FF;border-radius:12px;padding:18px;border:0.5px solid #EDE9FE;
}
.detail-email-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.detail-email-header span{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--ink2);font-family:var(--font-mono);}
.btn-copy{
padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;
background:#F5F0FF;color:var(--brand-accent-2);border:0.1px solid #DDD6FE;font-family:var(--font-mono);transition:.2s;
}
.btn-copy:hover{background:#EDE9FE;}
.detail-email-body{
background:#F5F0FF;border-radius:10px;padding:18px;font-size:.82rem;line-height:1.6;
color:var(--ink);white-space:pre-wrap;font-family:var(--font-mono);border:0.5px solid #DDD6FE;
max-height:220px;overflow-y:auto;
}
/* Footer */
.detail-footer{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:16px;border-top:1px solid var(--border);}
.btn-danger-outline{
background:none;border:1px solid var(--c3);color:var(--c3);padding:8px 18px;border-radius:25px;
font-weight:600;font-size:.85rem;cursor:pointer;transition:.2s;
}
.btn-danger-outline:hover{background:rgba(253,121,168,.08);}
/* ── TOAST ── */
.toast{
position:fixed;bottom:24px;right:24px;background:var(--c1);color:#fff;padding:12px 22px;
border-radius:var(--radius-sm);font-weight:700;font-size:.9rem;z-index:300;
animation:slideUp .3s ease,fadeOut .3s ease 2.5s forwards;box-shadow:0 8px 24px var(--shadow);
}
@keyframes fadeOut{to{opacity:0;transform:translateY(10px)}}
/* Undo variant: no auto-fade (the JS owns a 6s lifetime) and room for the action. */
.toast-undo{
/* Sits just above the send button. Panel bottom is 84px and the input row is ~60px
tall, putting the ▸ button at roughly 96-132px — so 140px clears it by ~8px.
Right edge aligns with the panel (both 24px). Only ever visible while the chat
is open, since Clear lives in its header. */
bottom:140px;right:24px;
display:flex;align-items:center;gap:10px;
padding:8px 10px 8px 14px;font-size:.72rem;
max-width:288px; /* never wider than the panel */
animation:slideUp .3s ease; /* overrides .toast's 2.5s fadeOut */
}
.toast-undo button{
background:rgba(255,255,255,.22);border:none;border-radius:20px;color:#fff;
font:inherit;font-size:.72rem;font-weight:800;padding:4px 12px;cursor:pointer;
transition:background .15s;
}
.toast-undo button:hover{background:rgba(255,255,255,.36);}
.toast.success{background:var(--c2);}
.toast.error{background:var(--c6);}
/* ── AI CHATBOT WIDGET ── */
.chat-fab{
/* 48px = 15% smaller than the original 56px. Gradient matches .cb-banner exactly
(same stops, same 120deg angle) so the launcher reads as part of the dashboard. */
position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:50%;border:none;
background:linear-gradient(120deg,var(--brand-primary),var(--brand-accent-2) 60%,var(--brand-accent));
color:#fff;cursor:pointer;z-index:250;
display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px var(--shadow);
transition:transform .2s;
}
.chat-fab:hover{transform:scale(1.08);}
.chat-fab svg{width:22px;height:22px;} /* scaled with the button */
.chat-fab.hidden{display:none;}
.chat-panel{
position:fixed;bottom:84px;right:24px;width:288px;height:384px;max-width:calc(100vw - 32px);
max-height:calc(100vh - 120px);background:var(--surface);border-radius:16px;
box-shadow:0 20px 60px rgba(0,0,0,.25);z-index:250;display:flex;flex-direction:column;overflow:hidden;
animation:slideUp .25s ease;
}
.chat-panel.hidden{display:none;}
.chat-header{
display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
background:linear-gradient(120deg,var(--brand-primary),var(--brand-accent-2) 60%,var(--brand-accent));
flex:0 0 auto;
}
.chat-header-title{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:.9rem;}
.chat-header-ic{font-size:1.1rem;}
.chat-header-actions{display:flex;align-items:center;gap:8px;}
.chat-ai-select{
background:rgba(255,255,255,.18);color:#fff;border:none;border-radius:20px;
font-size:.7rem;font-weight:700;padding:4px 8px;cursor:pointer;max-width:88px;
}
.chat-ai-select option{color:#1a1a2e;}
.chat-clear-btn{
background:rgba(255,255,255,.18);border:none;border-radius:20px;color:#fff;
font-size:.7rem;font-weight:700;padding:4px 10px;cursor:pointer;line-height:1.6;
font-family:inherit;transition:background .15s;
}
.chat-clear-btn:hover{background:rgba(255,255,255,.3);}
.chat-close-btn{background:none;border:none;color:rgba(255,255,255,.85);font-size:1rem;cursor:pointer;}
.chat-close-btn:hover{color:#fff;}
.chat-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--bg);}
.chat-bubble{max-width:82%;padding:8px 11px;border-radius:14px;font-size:.68rem;line-height:1.55;white-space:pre-line;} /* .85 -> .68 = 20% smaller */
.chat-bubble.ai{align-self:flex-start;background:var(--surface);color:var(--ink);border-bottom-left-radius:4px;box-shadow:0 2px 8px var(--shadow);}
.chat-bubble.user{align-self:flex-end;background:linear-gradient(135deg,var(--c1),var(--c5));color:#fff;border-bottom-right-radius:4px;}
.chat-typing{align-self:flex-start;display:flex;gap:4px;padding:10px 14px;background:var(--surface);border-radius:14px;border-bottom-left-radius:4px;box-shadow:0 2px 8px var(--shadow);}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--ink2);animation:chatBounce 1.2s infinite;}
.chat-typing span:nth-child(2){animation-delay:.15s;}
.chat-typing span:nth-child(3){animation-delay:.3s;}
@keyframes chatBounce{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-4px);opacity:1;}}
.chat-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);flex:0 0 auto;}
.chat-input-row input{
flex:1;padding:9px 14px;border:2px solid var(--border);border-radius:50px;background:var(--bg);
color:var(--ink);font-size:.68rem; /* matches the bubbles */
}
.chat-input-row input:focus{outline:none;border-color:var(--c1);}
.chat-send-btn{
width:36px;height:36px;border-radius:50%;border:none;flex:0 0 36px;
background:linear-gradient(135deg,var(--c1),var(--c5));color:#fff;cursor:pointer;
display:flex;align-items:center;justify-content:center;font-size:1rem;transition:transform .15s;
}
.chat-send-btn:hover{transform:scale(1.08);}
@media(max-width:480px){
.chat-panel{right:16px;bottom:80px;width:calc(100vw - 32px);}
.toast-undo{right:16px;bottom:136px;max-width:calc(100vw - 32px);}
.chat-fab{right:16px;bottom:16px;}
}
/* ── RESPONSIVE ── */
/* Tablet */
@media(max-width:1024px){
.dash-cards{grid-template-columns:repeat(2,1fr);}
.dash-grid{flex-direction:column;}
.ob-steps{grid-template-columns:1fr 1fr;}
.main-content{padding:26px 24px;}
:root{--help-w:260px;}
.sub-row{grid-template-columns:auto 1fr 80px 80px 90px 36px;gap:8px;padding:12px 14px;font-size:.88rem;}
.sub-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;}
.verdict-badge{font-size:.62rem;padding:2px 6px;}
}
/* Mobile */
@media(max-width:768px){
.dash-grid{flex-direction:column;}
.mini-form-grid,.mini-form-grid-4,.mini-form-grid-4col{grid-template-columns:1fr 1fr;}
.tb-hamburger{display:flex;}
.sb-toggle-btn{display:none;}
.sidebar{
position:fixed;top:var(--topbar-h);left:0;bottom:0;z-index:150;
width:min(260px,85vw) !important;min-width:min(260px,85vw) !important;
transform:translateX(-100%);transition:transform .28s ease;
box-shadow:0 0 0 rgba(0,0,0,0);
}
.sidebar.mobile-open{transform:translateX(0);box-shadow:8px 0 30px rgba(0,0,0,.15);}
/* force full labels even if desktop "collapsed" state is set */
.sidebar.collapsed{width:min(260px,85vw) !important;min-width:min(260px,85vw) !important;}
.sidebar.collapsed .sb-section,
.sidebar.collapsed .sb-group-head{display:flex;}
.sidebar.collapsed .sb-top-label{display:block;}
.sidebar .sb-group-items{border-left:1px solid var(--t3-sb-border) !important;margin-left:19px !important;padding-left:13px !important;}
.sidebar .sb-item{flex-direction:row !important;text-align:left !important;padding:9px 12px !important;}
.sidebar .sb-label{display:inline !important;font-size:.88rem !important;font-weight:inherit !important;}
.main-content{padding:20px 16px;}
.form-grid{grid-template-columns:1fr;}
.sub-row{grid-template-columns:auto 1fr 80px 80px;gap:8px;padding:12px 14px;}
.merch-logo,.merch-avatar,.cat-avatar{width:28px;height:28px;}
.sub-freq,.sub-edit{display:none;}
.sub-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.report-summary{grid-template-columns:1fr;}
.ob-steps{grid-template-columns:1fr;}
.dash-cards{grid-template-columns:repeat(2,1fr);}
/* help sidebar becomes an overlay drawer on mobile instead of squeezing content */
.help-sidebar{
position:fixed;top:var(--topbar-h);right:0;bottom:0;left:auto;z-index:160;
width:0;min-width:0;box-shadow:none;transition:width .28s,padding .28s;
}
.help-sidebar.open{width:min(300px,85vw);min-width:min(300px,85vw);box-shadow:-8px 0 30px rgba(0,0,0,.15);}
.export-cards{grid-template-columns:1fr;}
.topbar-logo small{display:none;}
}
/* Small phones */
@media(max-width:480px){
.dash-cards{grid-template-columns:1fr;}
.topbar-logo{font-size:.95rem;}
.modal{padding:20px 18px;}
.rs-card{padding:12px;}
.rs-card b{font-size:1.3rem;}
.ob-hero h1{font-size:1.5rem;}
.page-title{font-size:1.4rem;}
.sub-row{grid-template-columns:1fr 65px 60px;font-size:.85rem;}
.verdict-badge{font-size:.65rem;padding:2px 7px;}
.merch-logo-wrap{display:none;} /* too tight on small phones, drop the logo column */
.ai-provider-grid{grid-template-columns:1fr;}
.connector-row{flex-direction:column;align-items:flex-start;}
.connector-actions{width:100%;}
.connector-actions .btn{flex:1;}
}
/* ── AUTH OVERLAY (login / register) ── */
#auth-overlay{
position:fixed;inset:0;z-index:9999;display:flex;align-items:stretch;justify-content:stretch;
background:linear-gradient(135deg,#0A2540 0%,#1a1a3e 60%,#7C3AED 140%);padding:0;
}
.auth-title{font-size:1.4rem;margin:0 0 4px;color:var(--ink,#1a1a2e);}
.auth-sub{font-size:.9rem;color:var(--ink2,#666);margin:0 0 22px;}
.auth-label{display:block;font-size:.82rem;font-weight:600;color:var(--ink,#1a1a2e);margin-bottom:14px;}
.auth-label input{
display:block;width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--border,#e2e4ea);
border-radius:9px;font-size:.95rem;box-sizing:border-box;transition:border-color .2s;
}
.auth-label input:focus{outline:none;border-color:#7C3AED;}
.auth-error{
background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA;border-radius:8px;
padding:9px 12px;font-size:.85rem;margin-bottom:14px;
}
.auth-btn{
width:100%;padding:12px;background:#7C3AED;color:#fff;border:none;border-radius:9px;
font-size:.98rem;font-weight:700;cursor:pointer;transition:background .2s;
}
.auth-btn:hover:not(:disabled){background:#6D28D9;}
.auth-btn:disabled{opacity:.6;cursor:not-allowed;}
.auth-switch{text-align:center;font-size:.86rem;color:var(--ink2,#666);margin:18px 0 0;}
.auth-switch a{color:#7C3AED;font-weight:600;text-decoration:none;}
.auth-switch a:hover{text-decoration:underline;}
[data-theme="dark"] .auth-title{color:#e0e0f0;}
/* ── DASH RECENT SUBSCRIPTIONS — row style ──────────────────────────────────
Deliberately minimal: ONE full-width flex line that wraps on its own — no grid
columns, no container queries, no breakpoints, no row borders. Reading order:
name + meta ......... price ... verdict pill. */
.sub-row-simple{
display:flex;align-items:center;gap:12px;flex-wrap:nowrap; /* price + verdict never drop to a 2nd line */
width:100%;box-sizing:border-box;
background:var(--surface);border:none;border-radius:var(--radius-sm);
padding:13px 15px;margin-bottom:8px;cursor:pointer;transition:.2s;
box-shadow:0 2px 12px var(--shadow);
}
.sub-row-simple:hover{transform:translateX(4px);box-shadow:0 4px 20px var(--shadow);}
.sub-row-simple .cat-avatar{
width:34px;height:34px;flex:0 0 34px;border-radius:50%;
display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.srs-main{flex:1 1 auto;min-width:0;} /* shrinks/ellipsizes so the row stays one line */
.srs-name{
font-size:.94rem;font-weight:400;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.srs-meta{
font-size:.72rem;color:var(--ink2);margin-top:2px;font-family:var(--font-mono);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.srs-price{flex:0 0 auto;display:flex;align-items:baseline;gap:2px;margin-left:auto;white-space:nowrap;}
.srs-cost{font-size:1.05rem;font-weight:400;color:var(--ink);font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.srs-per{font-size:.68rem;color:var(--ink2);font-family:var(--font-mono);}
/* Verdict pill — sits after the price. Thin border in the verdict's own color. */
.srs-verdict{
flex:0 0 auto;white-space:nowrap;
font-size:.66rem;font-weight:600;font-family:var(--font-mono);
padding:4px 10px;border-radius:20px;
border:0.10px solid currentColor;background:none;
}
.srsv-keep{color:#00b894;}
.srsv-cancel{color:#e84393;}
.srsv-test{color:#e17055;}
.srsv-pending{color:var(--brand-accent-2);}
/* ── SINGLE-TYPEFACE NUMERICS ──────────────────────────────────────────────
Inter now covers labels/badges/prices too. Monospace used to guarantee that
$20.00 and $3.00 lined up; tabular-nums gives the same equal-width digits
inside Inter, so columns stay aligned with one typeface. */
.uc-cost,.uc-date,.cat-amount,.sub-cost,.srs-cost,.dc-value,.dc-delta,
.upcoming-total,.rs-card b,.dc-bar-label,.stat-value{
font-variant-numeric:tabular-nums;
}
/* ── ADD SUBSCRIPTION: uniform control sizing ──────────────────────────────
Every text input, number, date and dropdown shares ONE explicit height, so mixed
font-sizes (dropdowns/dates are smaller by request) can't produce different heights.
Height is set on the box, not derived from padding+line-height — that's what kept
them uneven before. The Notes textarea is deliberately excluded. */
#page-add .form-group input,
#page-add .form-group select{
height:32px; /* the shared control height ("How Often Used") */
padding-top:0;padding-bottom:0;
line-height:normal;
box-sizing:border-box;
}
/* Dropdowns + date fields: text 35% smaller (.92rem -> .60rem) */
#page-add .form-group select,
#page-add .form-group input[type="date"]{
font-size:.60rem;
}
/* Placeholder ("suggestion") text 25% smaller: .92rem -> .69rem */
#page-add .form-group input::placeholder,
#page-add .form-group textarea::placeholder{
font-size:.69rem;
}
/* Notes: text 25% smaller, box height unchanged (pinned so the smaller font can't shrink it) */
#page-add .form-group textarea{
padding-top:10px;padding-bottom:10px;
font-size:.69rem;
line-height:1.5;
min-height:56px;
}
/* "+ New" / "Manage" sit beside the Category dropdown — same height, purple hairline */
#page-add .add-cat-btn{
height:32px;padding:0 12px;
border:0.10px solid #DDD6FE;border-radius:var(--radius-sm);
background:#F5F0FF;color:var(--brand-accent-2);
font-weight:400;font-size:.72rem;
}
#page-add .add-cat-btn:hover{background:#EDE7FE;border-color:#C4B5FD;color:var(--brand-accent-2);}
/* Save / Clear — compact height, light weight */
#page-add .form-actions .btn{
height:29px;padding-top:0;padding-bottom:0; /* 26px +10% */
font-weight:300; /* 25% thinner than the 400 default */
line-height:normal;display:inline-flex;align-items:center;justify-content:center;
}
/* Number spinners (Monthly Cost, Users on This Tool) — narrowed, then nudged back
10% thicker for a bit more grab area. */
#page-add .form-group input[type="number"]::-webkit-inner-spin-button,
#page-add .form-group input[type="number"]::-webkit-outer-spin-button{
-webkit-appearance:inner-spin-button;
transform:scaleX(.825);
transform-origin:right center;
opacity:.85;
}
/* ── MY SUBSCRIPTIONS: flat filters + lighter row type ─────────────────────
Filters: 25% shorter, no 3D (flat surface, no shadow/appearance), thin purple
hairline, custom chevron on the right. Font scales down with the height.
Rows: titles un-bolded, prices thinner. */
#page-subscriptions .filter-bar select,
#page-subscriptions .filter-bar input{
padding-top:6px;padding-bottom:6px; /* 8px -> 6px (-25%) */
font-size:.66rem; /* scales with the reduced height */
border:0.5px solid var(--brand-accent-2);
border-radius:var(--radius-sm);
background:var(--surface);
box-shadow:none;
}
#page-subscriptions .filter-bar select{
/* strip the OS 3D control, draw our own 'v' on the right */
-webkit-appearance:none;appearance:none;
padding-right:26px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:right 10px center;
}
#page-subscriptions .filter-bar select:focus,
#page-subscriptions .filter-bar input:focus{
outline:none;border-color:var(--brand-accent-2);
}
/* Row type: name regular weight, price 25% thinner */
#page-subscriptions .sub-name{font-weight:400;}
#page-subscriptions .sub-cost{font-weight:400;}
/* ── CATEGORY MANAGER (rename / delete) ────────────────────────────────────
One row per category: icon · name · usage count · Edit · Delete.
The count doubles as the delete guard's explanation — "3 items" tells the
user up front why Delete will be refused. */
.cat-manage-list{
display:flex;flex-direction:column;gap:6px;
max-height:340px;overflow-y:auto;margin:14px 0 4px;
}
.cat-manage-row{
display:flex;align-items:center;gap:10px;
padding:9px 12px;border-radius:var(--radius-sm);
background:var(--bg);border:0.5px solid var(--border);
}
.cmr-icon{flex:0 0 auto;font-size:1rem;}
.cmr-name{flex:1;min-width:0;font-size:.88rem;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cmr-count{
flex:0 0 auto;font-size:.66rem;color:var(--ink2);
background:var(--surface);border:0.5px solid var(--border);
padding:2px 8px;border-radius:20px;white-space:nowrap;
}
.cmr-count.is-empty{color:#0E9F6E;border-color:#BBF7D8;background:#F2FCF7;}
.cmr-btn{
flex:0 0 auto;font-size:.7rem;padding:4px 10px;border-radius:6px;cursor:pointer;
background:#F5F0FF;color:var(--brand-accent-2);border:0.5px solid #DDD6FE;transition:.18s;
}
.cmr-btn:hover{background:#EDE7FE;border-color:#C4B5FD;}
.cmr-del{background:#FEF2F2;color:#B91C1C;border-color:#FECACA;}
.cmr-del:hover{background:#FEE2E2;border-color:#FCA5A5;}
.cmr-input{
flex:1;min-width:0;padding:5px 9px;font-size:.85rem;
border:0.5px solid var(--brand-accent-2);border-radius:6px;
background:var(--surface);color:var(--ink);
}
.cmr-input:focus{outline:none;}
[data-theme="dark"] .cmr-btn{background:rgba(124,58,237,.16);border-color:rgba(124,58,237,.34);color:#C4B5FD;}
[data-theme="dark"] .cmr-del{background:rgba(220,38,38,.16);border-color:rgba(220,38,38,.34);color:#FCA5A5;}
[data-theme="dark"] .cmr-count.is-empty{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.3);color:#6EE7B7;}
/* ── AUTH FIELD ICONS ───────────────────────────────────────────────────────
The browser draws its own saved-credentials key icon inside the input at the
far-right edge, and we can't move or restyle it. So we reserve that ~28px
strip and place our controls in their own lane at right:34px — email tick and
password eye line up with each other and never collide with the browser UI. */
.auth-field{position:relative;display:block;margin-top:6px;}
.auth-field input{
width:100%;box-sizing:border-box;padding:11px 52px 11px 13px; /* right padding clears both icons */
border:1px solid var(--border,#e2e4ea);border-radius:9px;
font-size:.95rem;transition:border-color .2s;
}
.auth-field input:focus{outline:none;border-color:#7C3AED;}
/* Remember-my-email tick */
.auth-tick{
position:absolute;right:26px;top:50%;transform:translateY(-50%);
width:18px;height:18px;padding:0;border-radius:4px;
border:1px solid var(--border,#d8dae1);background:transparent;
display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;
}
.auth-tick:hover{border-color:#9aa0aa;}
/* Only the check mark is orange — the box stays a neutral hairline. */
.auth-tick .auth-tick-mark{font-size:12px;line-height:1;color:#F97316;opacity:0;transition:opacity .15s;}
.auth-tick.is-on{border-color:#F97316;background:transparent;}
.auth-tick.is-on .auth-tick-mark{opacity:1;}
/* Show / hide password */
.auth-eye{
position:absolute;right:24px;top:50%;transform:translateY(-50%);
width:22px;height:22px;padding:0;border:none;background:none;cursor:pointer;
display:flex;align-items:center;justify-content:center;
color:#1a1a2e;transition:opacity .15s;opacity:.75; /* black line icon */
}
.auth-eye:hover{opacity:1;}
.auth-eye.is-on{opacity:1;}
[data-theme="dark"] .auth-field input{background:#12122a;border-color:#2a2a45;color:#e0e0f0;}
[data-theme="dark"] .auth-tick{background:#12122a;}
[data-theme="dark"] .auth-eye{color:#e0e0f0;}
/* ── LOGIN SCREEN — split brand panel + form pane ──────────────────────────
The purple area carries positioning and proof instead of sitting empty.
Under 860px the hero is hidden and it becomes the plain centered form. */
.auth-split{display:grid;grid-template-columns:1.05fr .95fr;width:100%;min-height:100vh;}
.auth-hero{
display:flex;flex-direction:column;justify-content:center;
padding:56px 6vw;color:#fff;position:relative;overflow:hidden;
background:linear-gradient(150deg,#0A2540 0%,#241a4d 45%,#7C3AED 120%);
}
/* soft light bloom, keeps the panel from reading flat */
.auth-hero::after{
content:"";position:absolute;width:520px;height:520px;right:-160px;top:-140px;border-radius:50%;
background:radial-gradient(circle,rgba(0,212,255,.20) 0%,transparent 68%);pointer-events:none;
}
.auth-hero-brand{font-size:1.05rem;font-weight:800;margin-bottom:auto;letter-spacing:-.01em;}
.auth-hero-brand small{font-weight:400;opacity:.7;font-size:.78rem;margin-left:4px;}
.auth-hero-title{
font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.18;font-weight:800;
margin:32px 0 14px;letter-spacing:-.02em;
}
.auth-hero-sub{font-size:.94rem;line-height:1.6;opacity:.82;max-width:42ch;margin:0 0 26px;}
.auth-hero-points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;}
.auth-hero-points li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;opacity:.94;}
.auth-hero-points b{font-weight:600;}
.ahp-ic{
flex:0 0 18px;width:18px;height:18px;border-radius:50%;margin-top:1px;
background:rgba(0,212,255,.16);color:#7DE3FF;
display:flex;align-items:center;justify-content:center;font-size:10px;
}
.auth-hero-foot{margin-top:auto;padding-top:34px;font-size:.74rem;opacity:.55;}
.auth-pane{
display:flex;align-items:center;justify-content:center;
/* light purple — clearly tinted, still light enough for dark text to stay readable */
background:#EFE9FD;padding:40px 24px;
}
.auth-pane-inner{width:100%;max-width:360px;}
.auth-title{font-size:1.5rem;margin-bottom:4px;}
.auth-sub{margin-bottom:24px;}
/* Narrow screens: stack instead of hiding. The pitch still lands, just condensed —
a hidden hero meant small windows looked identical to Design 1. */
@media(max-width:860px){
.auth-split{grid-template-columns:1fr;min-height:auto;}
.auth-hero{padding:34px 26px 30px;}
.auth-hero-brand{margin-bottom:18px;}
.auth-hero-title{font-size:1.5rem;margin:0 0 10px;}
.auth-hero-sub{font-size:.85rem;margin-bottom:18px;}
.auth-hero-points{gap:8px;}
.auth-hero-points li{font-size:.82rem;}
.auth-hero-foot{display:none;}
.auth-pane{padding:32px 24px 44px;}
}
[data-theme="dark"] .auth-pane{background:#14122b;}
/* ── CHAT: rows, chips, icon ────────────────────────────────────────────────
Replies can carry action chips ("Show cancel steps", "Open it"), which is what
turns answers into next steps instead of dead text. */
.chat-header-ic{display:inline-flex;align-items:center;justify-content:center;}
.chat-header-ic svg{width:17px;height:17px;}
.chat-row{display:flex;flex-direction:column;margin-bottom:12px;}
.chat-row.user{align-items:flex-end;}
.chat-row.ai{align-items:flex-start;}
.chat-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;max-width:92%;}
.chat-chip{
font-size:.58rem;font-weight:400;line-height:1.2; /* chips scaled with the text */
padding:6px 11px;border-radius:20px;cursor:pointer;
background:#F5F0FF;color:var(--brand-accent-2);border:0.5px solid #DDD6FE;
transition:.16s;text-align:left;
}
.chat-chip:hover{background:#EDE7FE;border-color:#C4B5FD;}
.chat-chip:active{background:#E5DBFD;}
[data-theme="dark"] .chat-chip{
background:rgba(124,58,237,.16);border-color:rgba(124,58,237,.34);color:#C4B5FD;
}
[data-theme="dark"] .chat-chip:hover{background:rgba(124,58,237,.26);}
/* Charge-history chart: legend distinguishing logged vs not-logged months */
.dc-legend{
display:flex;align-items:center;gap:6px;flex-wrap:wrap;
font-size:.66rem;color:var(--ink2);margin:6px 0 2px;
}
.dc-key{width:9px;height:9px;border-radius:2px;display:inline-block;}
.dc-key-est{background:transparent;border:1px dashed currentColor;}
.dc-bar-empty{box-shadow:none;}
/* Detail modal: cancellation-difficulty chip (separate from the verdict badge) */
.detail-dchip{
font-size:.64rem;font-weight:500;padding:3px 9px;border-radius:20px;
border:0.5px solid currentColor;background:none;white-space:nowrap;
}
.dchip-easy{color:#0E9F6E;}
.dchip-medium{color:#C2740C;}
.dchip-hard{color:#DC2626;}
/* Full step list inside the cancel card (previously only step 1 was shown) */
.detail-steps{
margin:10px 0 6px;padding-left:18px;
font-size:.78rem;line-height:1.6;color:var(--ink2);
}
.detail-steps li{margin-bottom:3px;}
.detail-phone a{text-decoration:none;} /* was: border-bottom underline — the pill replaces it */
.detail-phone-none{color:var(--ink2);opacity:.7;font-weight:400;}
/* ── Cost + billing-cycle pair ─────────────────────────────────────────────
The cycle select is what makes a yearly plan report honestly: $599/yr shows
as $49.92/mo everywhere instead of being counted as $599/mo. */
.cost-cycle{display:flex;gap:6px;align-items:stretch;}
.cost-cycle input{flex:1 1 auto;min-width:0;}
.cost-cycle select{
flex:0 0 auto;width:auto;padding:0 26px 0 10px;
border:.5px solid var(--purple,#7C3AED);border-radius:8px;
background:#fff;color:var(--purple,#7C3AED);font-size:13px;font-weight:500;
cursor:pointer;
}
[data-theme="dark"] .cost-cycle select{background:#1b1930;color:#c4b5fd;}
/* "/yr" tag on an upcoming charge — that row bills the FULL annual amount */
.uc-yr{font-size:10px;font-weight:600;opacity:.65;margin-left:2px;}
/* ── My Subscriptions: title row + action buttons ─────────────────────────
Title left, actions hard right, sharing one baseline row. The buttons act on
whichever row is selected, so they're disabled until there is a selection. */
.subs-head{
display:flex;align-items:center;justify-content:space-between;
gap:16px;flex-wrap:wrap;margin-bottom:4px;
}
.subs-head .page-title{margin:0;}
.subs-actions{display:flex;gap:10px;flex-wrap:wrap;}
/* Page sits on --bg (#f4f5f9); these read one step deeper in purple, and deeper
again on hover. Border is hairline purple as requested. */
.subs-act-btn{
background:#EDE7FB;color:#5B21B6;
border:.1px solid var(--brand-accent-2,#7C3AED);
border-radius:9px;padding:8px 16px;
font-family:inherit;font-size:.8rem;font-weight:600;line-height:1.3;
cursor:pointer;white-space:nowrap;
transition:background .15s,color .15s;
}
.subs-act-btn:hover:not(:disabled){background:#DCD0F7;color:#4C1D95;}
.subs-act-btn:active:not(:disabled){background:#CDBCF2;}
.subs-act-btn:disabled{opacity:.42;cursor:not-allowed;}
[data-theme="dark"] .subs-act-btn{background:#241f45;color:#c4b5fd;}
[data-theme="dark"] .subs-act-btn:hover:not(:disabled){background:#302a5c;color:#ddd2ff;}
/* Selected row — same purple family as the buttons that act on it. */
/* Lazy, smooth hover — long ease-out so the row drifts rather than snaps.
Background, lift and shadow all move together on the same curve. */
#sub-list .sub-row{
cursor:pointer;
transition:background .38s cubic-bezier(.22,.61,.36,1),
box-shadow .38s cubic-bezier(.22,.61,.36,1),
transform .38s cubic-bezier(.22,.61,.36,1);
}
#sub-list .sub-row:hover{
background:#FAF8FE;
transform:translateX(3px);
box-shadow:0 4px 16px rgba(124,58,237,.10);
}
#sub-list .sub-row.selected:hover{background:#E6DDFA;}
[data-theme="dark"] #sub-list .sub-row:hover{background:#1d1a38;box-shadow:0 4px 16px rgba(0,0,0,.35);}
#sub-list .sub-row.selected{
background:#EDE7FB;
box-shadow:inset 3px 0 0 var(--brand-accent-2,#7C3AED);
}
#sub-list .sub-row:focus-visible{outline:2px solid var(--brand-accent-2,#7C3AED);outline-offset:-2px;}
[data-theme="dark"] #sub-list .sub-row.selected{background:#241f45;}
/* ── Detail modal: cancel link + phone as matching purple pills ────────────
Both are actions of equal weight, so they share one look: non-bold purple
text, hairline purple border, deepening on hover. */
.detail-cancel-btn,
.detail-phone-btn{
display:inline-flex;align-items:center;gap:8px;
background:#F3EEFD;color:#6D28D9;
border:.7px solid var(--brand-accent-2,#7C3AED);
border-radius:9px;padding:8px 15px;
font-family:inherit;font-size:.86rem;font-weight:400;line-height:1.3;
text-decoration:none;cursor:pointer;
transition:background .2s,color .2s;
}
.detail-cancel-btn:hover,
.detail-phone-btn:hover{background:#E3D7FA;color:#5B21B6;}
.detail-cancel-btn:active,
.detail-phone-btn:active{background:#D5C4F5;}
.dcb-ic,.dpb-ic{width:15px;height:15px;flex:0 0 15px;}
[data-theme="dark"] .detail-cancel-btn,
[data-theme="dark"] .detail-phone-btn{background:#241f45;color:#c4b5fd;}
[data-theme="dark"] .detail-cancel-btn:hover,
[data-theme="dark"] .detail-phone-btn:hover{background:#302a5c;color:#ddd2ff;}