/* Visual system shared by every module. Keep financial status colors semantic. */
:root {
    --ink: #18243a;
    --ink-soft: #34445f;
    --ink-weak: #596b83;
    --ink-faint: #667890;
    --field: #f3f6fb;
    --field-2: #eaf0f8;
    --rule: #e2e9f2;
    --accent: #4f46d9;
    --accent-strong: #3e35b7;
    --accent-deep: #292568;
    --accent-soft: #efedff;
    --accent-soft-2: #e4e0ff;
    --accent-line: #c5bff5;
    --r-lg: 1.25rem;
    --e-1: 0 3px 16px rgba(26, 44, 77, .035);
    --e-2: 0 8px 28px rgba(26, 44, 77, .065);
    --e-3: 0 20px 60px rgba(26, 44, 77, .14);
}
body { background: #f4f7fb; }
.app-canvas { background: radial-gradient(ellipse at 95% 0, #eaeefd 0, transparent 42%), #f4f7fb; min-height: 100vh; }
.app-canvas > .container-xxl { max-width: 1600px; }

/* Navigation: a quiet, permanent frame around the financial information. */
.app-sidebar { background: #142239; border-right: 0; padding: 1.65rem 1rem 1rem; gap: 1.5rem; scrollbar-color: #41506a #142239; }
.app-sidebar .app-brand { color: #fff; padding: 0 .55rem; font-size: 1.2rem; }
.app-brand__mark { background: linear-gradient(145deg, #7f76f3, #4f46d9); box-shadow: 0 5px 15px #080d2426; border: 1px solid #ffffff26; }
.app-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.app-brand__text small { margin-top: .3rem; color: #b1bfd3; font-size: .65rem; font-weight: 500; letter-spacing: .035em; }
.app-sidebar .app-sidebar__cta { background: #655ce6; border: 1px solid #8c84f6; border-radius: .85rem; box-shadow: 0 6px 18px #0002; min-height: 2.9rem; }
.app-sidebar .app-sidebar__cta:hover { background: #766ef0; }
.app-sidebar .app-nav__label { color: #9baec8; font-size: .65rem; letter-spacing: .13em; margin-top: 1rem; }
.app-sidebar .app-nav__link { color: #c6d2e4; border-radius: .75rem; min-height: 2.6rem; transition: background .16s, color .16s; }
.app-sidebar .app-nav__link i { color: #9bb0ce; }
.app-sidebar .app-nav__link:hover { background: #223450; color: #fff; }
.app-sidebar .app-nav__link:hover i { color: #fff; }
.app-sidebar .app-nav__link.is-active { background: #30345f; color: #fff; box-shadow: inset 0 0 0 1px #b8aeff26; }
.app-sidebar .app-nav__link.is-active i { color: #c8c2ff; }
.app-sidebar .app-nav__link.is-active::before { background: #a69cff; left: -.5rem; top: .8rem; bottom: .8rem; border-radius: 3px; }
.app-sidebar__foot { border-color: #ffffff1a; }
.app-sidebar .app-user { background: #ffffff08; padding: .75rem .35rem; }
.app-sidebar .app-user__meta strong { color: #e8eff9; }
.app-sidebar .app-user__meta span, .app-sidebar .app-user__link { color: #afbed3; }
.app-sidebar .app-user__avatar { background: #424579; color: #e6e4ff; }
.app-sidebar .app-user__link:hover { background: #30435f; color: #fff; }
.app-topbar { background: #fffffff2; backdrop-filter: blur(16px); }

/* Page hierarchy, cards and data surfaces. */
.smart-dashboard__header, .accounts-topline, .history-hero { padding-top: .75rem; padding-bottom: 1rem; }
.smart-dashboard__header h1, .accounts-topline h1, .history-hero h1, .advisor-hero h1 { font-size: clamp(1.6rem, 2.4vw, 2.15rem); letter-spacing: -.045em; line-height: 1.2; font-weight: 800; }
.smart-dashboard__header p, .accounts-topline p { max-width: 64ch; line-height: 1.7; color: var(--ink-weak); }
.dashboard-section-label { letter-spacing: .09em; font-size: .68rem; font-weight: 800; }
.card, .accounts-premium-card, .accounts-panel, .history-panel, .planner-panel,
.reference-card, .qr-panel, .admin-panel, .inv-card, .goal-card, .category-panel,
.debts-card, .budgets-list-card { border-color: var(--rule); box-shadow: var(--e-1); }
.accounts-premium-stat, .category-summary-card, .debts-kpi, .smart-kpi, .bkpi {
    border-radius: 1.15rem; box-shadow: var(--e-1); border-color: var(--rule);
}
.accounts-premium-stat { background: #fff; padding: 1.35rem; }
.accounts-premium-stat__icon, .category-summary-card__icon { border-radius: 1rem; }
.account-card { border-color: var(--rule); box-shadow: var(--e-1); }
.banner-row { border-radius: 1.25rem; }
.bkpi { padding: 1.3rem; }
.bkpi__value { letter-spacing: -.04em; }
.bkpi--clickable:hover { box-shadow: var(--e-2); }
.category-panel__header, .history-panel__header { border-bottom-color: var(--rule); }
.table { --bs-table-hover-bg: #f5f6ff; }
.table > thead > tr > th { background: #f5f7fc; color: #556680; font-size: .7rem; letter-spacing: .055em; padding-top: 1rem; padding-bottom: 1rem; }
.table > tbody > tr > td { border-bottom-color: #edf1f7; padding-top: .9rem; padding-bottom: .9rem; }

/* Shared controls stay recognisable across modules. */
.btn, .bgt-btn { border-radius: .75rem; font-weight: 650; transition: background .15s, border-color .15s, box-shadow .15s; }
.btn-primary, .bgt-btn.is-primary { background: var(--accent); border-color: var(--accent); box-shadow: 0 4px 10px #4f46d91c; }
.btn-primary:hover, .bgt-btn.is-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: 0 6px 16px #4f46d92b; }
.btn-outline-primary { color: var(--accent); border-color: #c5bff5; }
.btn-outline-primary:hover { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.form-control, .form-select { border-radius: .75rem; border-color: #d6e0ec; background-color: #fbfcfe; }
.form-control:focus, .form-select:focus { background-color: #fff; border-color: #928bea; box-shadow: 0 0 0 .22rem #655ce618; }
.form-label { color: var(--ink-soft); font-weight: 650; }
.modal-content { border: 1px solid #e2e9f2; border-radius: 1.35rem; box-shadow: var(--e-3); }
.modal-header { padding: 1.3rem 1.5rem; background: #f7f8fd; border-radius: 1.35rem 1.35rem 0 0; border-bottom-color: var(--rule); }
.modal-footer { border-top-color: var(--rule); padding: 1rem 1.5rem; }
.dropdown-menu { border-color: var(--rule); border-radius: .85rem; padding: .4rem; box-shadow: var(--e-3); }
.dropdown-item { border-radius: .5rem; padding: .6rem .85rem; }

/* Budgets: the available amount anchors the page; analysis remains light. */
.bgt-hero { background: radial-gradient(ellipse at top right, #38476f, transparent 65%), #1b2b46; border: 1px solid #344566; box-shadow: 0 12px 30px #20345812; padding: 2rem; border-radius: 1.5rem; }
.bgt-hero .dashboard-section-label { color: #c4bfff; }
.bgt-hero__lead { color: #c2cde0; margin-top: 1rem; }
.bgt-hero__figure { color: #9be9d3; margin-top: .35rem; letter-spacing: -.05em; }
.bgt-hero.is-empty-pocket .bgt-hero__figure { color: #ffb3aa; }
.bgt-hero .color-danger { color: #ffb3aa !important; }
.bgt-hero .color-safe { color: #9be9d3 !important; }
.bgt-hero__sub { color: #d9e2f0; font-size: .9rem; line-height: 1.7; }
.bgt-hero__actions .bgt-btn:not(.is-primary) { background: #ffffff0d; border-color: #7c8ba6; color: #fff; }
.bgt-hero__actions .bgt-btn:not(.is-primary):hover { background: #ffffff20; }
.bgt-hero__actions .bgt-btn.is-primary { background: #7669ee; border-color: #9a90ff; }
.budget-studio__metrics > div { background: #fff; border-color: var(--rule); box-shadow: var(--e-1); padding: 1.35rem; border-radius: 1.1rem; }
.budget-studio__metrics strong { color: var(--ink); }
.budget-studio__metrics strong.is-deficit { color: var(--out); }
.budget-studio__chart { border-color: var(--rule); box-shadow: var(--e-1); padding: 1.6rem; }
.budget-studio__chart h3 { font-size: 1.05rem; letter-spacing: -.02em; }
.budget-studio__donut { box-shadow: 0 10px 24px #34445f0b; }
.budget-studio__track { height: 9px; }
.budget-studio__preferences { border-color: var(--rule); }
.budget-studio__preferences summary { padding: 1.15rem 1.35rem; }
.budget-studio__coach { border-color: #cdc9f5; box-shadow: var(--e-1); border-radius: 1.25rem; }
.budget-studio__coach > summary { padding: 1.5rem; background: linear-gradient(115deg, #efedff, #f1faf8); }
.budget-studio__coach-body { padding: 1.5rem; }
.bgt-card { border-radius: 1.2rem; box-shadow: var(--e-1); }
.bgt-row { background: #fff; }

/* The external AI flow: clear stages and a spacious writing surface. */
.advisor-hero { display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.5rem 0 1.8rem; }
.advisor-hero__icon { display: grid; place-items: center; flex: 0 0 3.5rem; height: 3.5rem; border-radius: 1.15rem; color: #fff; background: linear-gradient(145deg, #7669ee, #4b42bb); box-shadow: 0 8px 22px #655ce62b; font-size: 1.5rem; }
.advisor-hero h1 { margin: .35rem 0 .6rem; }
.advisor-hero p { color: var(--ink-weak); line-height: 1.7; margin: 0; max-width: 65ch; font-size: .9rem; }
.advisor-workspace .advisor-step { padding: 1.7rem; border-radius: 1.25rem; border-color: var(--rule); box-shadow: var(--e-1); }
.advisor-workspace .step-badge { width: 2rem; height: 2rem; background: var(--accent-soft); color: var(--accent); border-radius: .65rem; }
.advisor-workspace .step-title { font-weight: 750; letter-spacing: -.02em; }
.advisor-workspace #userRequest { padding: 1.1rem; font-size: .95rem; line-height: 1.8; min-height: 155px; }
.advisor-workspace .chips { gap: .5rem; margin-bottom: 1rem; }
.advisor-workspace .chip-btn { background: #f8f9fd; border-color: var(--rule); color: var(--ink-soft); padding: .5rem .8rem; white-space: normal; text-align: left; }
.advisor-workspace .chip-btn:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-strong); }
.advisor-workspace .prompt-box { background: #f6f8fc; border-color: var(--rule); line-height: 1.7; padding: 1rem; border-radius: .85rem; }
.advisor-workspace .plan-item { padding: .9rem; border-radius: .85rem; }

/* Mobile gets the same hierarchy with comfortable, compact spacing. */
@media (min-width: 1200px) {
    .app-canvas > .container-xxl { padding-left: 2rem !important; padding-right: 2rem !important; }
}
@media (max-width: 767.98px) {
    .bgt-hero { padding: 1.4rem; border-radius: 1.25rem; }
    .bgt-hero__figure { font-size: clamp(2rem, 9vw, 3rem); overflow-wrap: anywhere; }
    .bgt-hero__actions { width: 100%; }
    .bgt-hero__actions .bgt-btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
    .advisor-hero { gap: .85rem; padding-top: .5rem; }
    .advisor-hero__icon { flex-basis: 2.8rem; height: 2.8rem; border-radius: .9rem; font-size: 1.25rem; }
    .advisor-workspace .advisor-step { padding: 1.1rem; }
    .budget-studio__chart, .budget-studio__coach-body { padding: 1.1rem; }
    .budget-studio__coach > summary { padding: 1.2rem; }
    .mobile-bottom-nav { background: #fffffff5; backdrop-filter: blur(16px); border-top-color: var(--rule); box-shadow: 0 -4px 24px #17243c08; }
    .mobile-menu-sheet { border-radius: 1.5rem 1.5rem 0 0; }
    .modal-header { padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .app-sidebar .app-nav__link, .btn, .bgt-btn { transition: none; }
}