@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: dark;
  --bg: #050817;
  --panel: #0c1022;
  --panel-strong: #11172d;
  --line: rgba(167, 182, 232, .12);
  --muted: #8d96b4;
  --text: #f5f7ff;
  --blue: #168bff;
  --purple: #823bff;
  --gold: #ffc247;
  --green: #19d9a0;
  --red: #ff4566;
  --radius: 18px;
  font-family: "DM Sans", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); background: var(--bg); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.ambient { position: fixed; z-index: -1; width: 520px; height: 520px; border-radius: 50%; filter: blur(115px); opacity: .15; pointer-events: none; }
.ambient-one { top: -240px; left: 24%; background: #315dff; }
.ambient-two { right: -270px; bottom: -240px; background: #7d27ff; }
.splash { position: fixed; inset: 0; z-index: 20; display: grid; align-content: center; justify-items: center; background: radial-gradient(ellipse at 50% 48%, #111535 0, #080b18 47%, #050817 76%); transition: opacity .55s ease, visibility .55s ease; }
.splash.is-hidden { opacity: 0; visibility: hidden; }
.splash-orbit { position: absolute; width: min(72vw, 440px); aspect-ratio: 1; border: 1px solid rgba(112, 137, 255, .12); border-radius: 50%; box-shadow: 0 0 90px rgba(22, 139, 255, .08), inset 0 0 90px rgba(130, 59, 255, .06); animation: orbit 8s linear infinite; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; flex: none; color: var(--text); border-radius: 12px; background: linear-gradient(140deg, rgba(22,139,255,.24), rgba(130,59,255,.28)); border: 1px solid rgba(115,150,255,.3); box-shadow: 0 0 24px rgba(69,91,255,.23); }
.brand-mark svg { width: 26px; fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark-large { width: 74px; height: 74px; border-radius: 23px; animation: mark-in .8s cubic-bezier(.2,.8,.2,1) both; }
.brand-mark-large svg { width: 49px; }
.brand-name { margin-top: 21px; font: 800 29px "Manrope", sans-serif; letter-spacing: .13em; }
.brand-name span, .brand-word span { color: var(--gold); }
.splash p { margin: 11px 0 34px; color: #b6bedb; font-size: 14px; letter-spacing: .025em; }
.loading-track { width: 120px; height: 3px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.1); }
.loading-track i { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--purple), var(--gold)); animation: loading 1.15s ease-in-out infinite; }
@keyframes loading { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes mark-in { from { opacity: 0; transform: scale(.75) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); max-width: 1180px; margin: auto; padding: 48px; align-items: center; gap: clamp(45px, 8vw, 110px); }
.auth-story { padding: 24px 0; }
.brand-word { display: flex; align-items: center; gap: 12px; font: 800 19px "Manrope", sans-serif; letter-spacing: .1em; }
.auth-story h1 { max-width: 600px; margin: 48px 0 20px; font: 700 clamp(38px, 5vw, 62px)/1.08 "Manrope", sans-serif; letter-spacing: -.05em; }
.auth-story h1 em { font-style: normal; color: transparent; background: linear-gradient(100deg, #72beff, #ac7bff 60%, var(--gold)); background-clip: text; }
.auth-story > p { max-width: 460px; color: #a7b0ce; font-size: 16px; line-height: 1.75; }
.story-points { display: grid; gap: 18px; margin-top: 42px; color: #d7ddf1; font-size: 14px; }
.story-points span { display: flex; align-items: center; gap: 13px; }
.story-points i { width: 30px; height: 30px; display: grid; place-items: center; color: var(--green); border: 1px solid rgba(25,217,160,.2); background: rgba(25,217,160,.08); border-radius: 10px; }
.auth-card { width: 100%; max-width: 430px; justify-self: end; padding: 32px; border: 1px solid rgba(164,179,229,.16); border-radius: 24px; background: linear-gradient(145deg, rgba(19,25,48,.84), rgba(9,12,27,.88)); box-shadow: 0 30px 90px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(22px); }
.auth-card h2 { margin: 0; font: 700 25px "Manrope", sans-serif; }
.auth-card > p { margin: 8px 0 23px; color: var(--muted); font-size: 14px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 22px; border-radius: 12px; background: #080b18; }
.auth-tabs button { padding: 10px; color: #8e97b5; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-size: 13px; }
.auth-tabs button.active { color: #fff; background: #1a2040; box-shadow: inset 0 0 0 1px rgba(156,174,255,.1); }
.form-grid { display: grid; gap: 15px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 7px; color: #c9cfe3; font-size: 12px; font-weight: 600; }
.field input, .field select, .field textarea, .search-input { min-width: 0; width: 100%; padding: 12px 13px; color: #f7f8ff; border: 1px solid rgba(161,176,223,.15); border-radius: 11px; outline: none; background: rgba(5,8,23,.64); transition: border-color .2s, box-shadow .2s; }
.field input::placeholder, .field textarea::placeholder, .search-input::placeholder { color: #68718f; }
.field input:focus, .field select:focus, .field textarea:focus, .search-input:focus { border-color: rgba(22,139,255,.7); box-shadow: 0 0 0 3px rgba(22,139,255,.1); }
.field select { appearance: none; }
.field textarea { resize: vertical; min-height: 76px; }
.field small { color: var(--muted); font-weight: 400; }
.form-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 15px 0 18px; color: #929ab6; font-size: 12px; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { accent-color: var(--blue); }
.text-button { padding: 0; border: 0; background: none; color: #8dc5ff; cursor: pointer; font-size: inherit; }
.primary-button, .secondary-button, .danger-button, .icon-button, .soft-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 11px; cursor: pointer; transition: transform .18s, filter .18s, background .18s; }
.primary-button { min-height: 45px; padding: 0 17px; color: #fff; border: 1px solid rgba(116,155,255,.36); background: linear-gradient(110deg, #167fe8, #7042e8); box-shadow: 0 9px 24px rgba(58,90,255,.19); font-size: 13px; font-weight: 700; }
.primary-button:hover, .secondary-button:hover, .soft-button:hover { filter: brightness(1.13); transform: translateY(-1px); }
.primary-button.wide { width: 100%; }
.secondary-button { min-height: 40px; padding: 0 14px; color: #d9e2ff; border: 1px solid var(--line); background: rgba(255,255,255,.035); font-size: 12px; font-weight: 600; }
.soft-button { min-height: 35px; padding: 0 12px; color: #a9cfff; border: 1px solid rgba(22,139,255,.17); background: rgba(22,139,255,.075); font-size: 12px; font-weight: 600; }
.danger-button { min-height: 40px; padding: 0 14px; color: #ff8a9e; border: 1px solid rgba(255,69,102,.22); background: rgba(255,69,102,.08); font-size: 12px; font-weight: 600; }
.icon-button { width: 38px; height: 38px; color: #aab3d0; border: 1px solid var(--line); background: rgba(255,255,255,.035); }
.icon-button:hover { color: #fff; background: rgba(255,255,255,.08); }
.auth-note { margin: 18px 0 0; color: #75809f; text-align: center; font-size: 11px; line-height: 1.6; }
.error-text { min-height: 17px; margin: 10px 0 0; color: #ff8497; font-size: 12px; }

.app-shell { display: grid; grid-template-columns: 252px minmax(0,1fr); min-height: 100vh; max-width: 1680px; margin: auto; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 28px 17px 18px; border-right: 1px solid rgba(150,166,218,.1); background: rgba(7,10,24,.76); backdrop-filter: blur(18px); }
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 28px; font: 800 17px "Manrope", sans-serif; letter-spacing: .1em; }
.sidebar-brand .brand-mark { width: 34px; height: 34px; border-radius: 11px; }
.nav-caption { padding: 0 12px 11px; color: #626d8b; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.nav-list { display: grid; gap: 5px; }
.nav-link { width: 100%; display: flex; align-items: center; gap: 13px; padding: 11px 12px; text-align: left; color: #9aa4c1; border: 1px solid transparent; border-radius: 11px; background: transparent; cursor: pointer; font-size: 13px; transition: color .18s, background .18s, border-color .18s; }
.nav-link svg { width: 17px; height: 17px; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.035); }
.nav-link.active { color: #edf4ff; border-color: rgba(60,119,255,.18); background: linear-gradient(90deg, rgba(22,139,255,.15), rgba(130,59,255,.08)); box-shadow: inset 2px 0 0 #308fff; }
.nav-link.active svg { color: #67b4ff; }
.sidebar-spacer { flex: 1; }
.sidebar-tip { padding: 15px; border: 1px solid rgba(255,194,71,.12); border-radius: 14px; background: linear-gradient(145deg, rgba(255,194,71,.07), rgba(130,59,255,.06)); }
.sidebar-tip strong { display: block; margin-bottom: 7px; color: #f7d58d; font-size: 12px; }
.sidebar-tip p { margin: 0; color: #929bb5; font-size: 11px; line-height: 1.55; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 16px 7px 0; margin-top: 17px; border-top: 1px solid var(--line); cursor: pointer; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: none; overflow: hidden; border: 1px solid rgba(149,173,255,.24); border-radius: 50%; background: linear-gradient(135deg, #176bd5, #743dda); color: #fff; font-weight: 700; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-mini { min-width: 0; flex: 1; }
.user-mini strong, .user-mini small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-mini strong { font-size: 12px; }
.user-mini small { margin-top: 3px; color: #7e89a8; font-size: 10px; }
.main-area { min-width: 0; padding: 29px clamp(22px, 4vw, 58px) 65px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 29px; }
.page-kicker { margin: 0 0 5px; color: #8490b0; font-size: 11px; letter-spacing: .05em; }
.page-title { margin: 0; font: 700 26px "Manrope", sans-serif; letter-spacing: -.035em; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.date-label { padding: 9px 12px; color: #9ca6c3; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); font-size: 11px; }
.notification-wrap { position: relative; }
.notification-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border: 1px solid var(--bg); border-radius: 50%; background: var(--gold); }
.page-content { animation: page-in .26s ease both; }
@keyframes page-in { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.grid { display: grid; gap: 18px; }
.stats-grid { grid-template-columns: repeat(4, minmax(0,1fr)); margin-bottom: 18px; }
.card { min-width: 0; padding: 20px; border: 1px solid rgba(154,171,224,.13); border-radius: var(--radius); background: linear-gradient(145deg, rgba(18,24,46,.86), rgba(11,15,32,.88)); box-shadow: 0 15px 38px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.025); backdrop-filter: blur(15px); }
.stat-card { min-height: 137px; position: relative; overflow: hidden; }
.stat-card::after { position: absolute; top: -44px; right: -30px; width: 120px; height: 120px; content: ""; border-radius: 50%; background: var(--glow, rgba(22,139,255,.1)); filter: blur(36px); }
.stat-head { display: flex; justify-content: space-between; align-items: center; color: #9da7c3; font-size: 12px; }
.stat-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(22,139,255,.16); border-radius: 10px; color: #68b7ff; background: rgba(22,139,255,.09); }
.stat-icon.green { color: var(--green); border-color: rgba(25,217,160,.16); background: rgba(25,217,160,.08); }
.stat-icon.gold { color: var(--gold); border-color: rgba(255,194,71,.16); background: rgba(255,194,71,.08); }
.stat-icon.red { color: #ff7189; border-color: rgba(255,69,102,.16); background: rgba(255,69,102,.08); }
.stat-value { display: block; margin-top: 17px; font: 700 23px "Manrope", sans-serif; letter-spacing: -.035em; }
.stat-foot { display: block; margin-top: 7px; color: #76819f; font-size: 10px; }
.hero-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; min-height: 228px; padding: 28px; margin-bottom: 18px; border-color: rgba(70,128,255,.22); background: radial-gradient(ellipse at 78% 53%, rgba(116,47,255,.22), transparent 38%), linear-gradient(115deg, rgba(17,35,75,.9), rgba(21,19,55,.85) 65%, rgba(32,18,60,.85)); }
.hero-card::after { position: absolute; right: 14%; bottom: -136px; width: 310px; height: 310px; content: ""; border: 1px solid rgba(141,120,255,.12); border-radius: 50%; box-shadow: 0 0 0 24px rgba(141,120,255,.025), 0 0 0 48px rgba(141,120,255,.02); }
.hero-card h2 { margin: 0 0 9px; font: 700 23px "Manrope", sans-serif; }
.hero-card p { max-width: 420px; margin: 0; color: #abb5d5; font-size: 13px; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.hero-metric { justify-self: end; z-index: 1; width: min(100%, 300px); padding: 18px 20px; border: 1px solid rgba(193,190,255,.17); border-radius: 15px; background: rgba(7,11,30,.4); backdrop-filter: blur(10px); }
.hero-metric small { color: #a1acd0; font-size: 11px; }
.hero-metric strong { display: block; margin: 7px 0; font: 700 26px "Manrope", sans-serif; }
.hero-metric span { color: #75e7c2; font-size: 11px; }
.content-grid { grid-template-columns: minmax(0,1.55fr) minmax(270px,.85fr); }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card-heading h3 { margin: 0; font: 700 15px "Manrope", sans-serif; }
.card-heading p { margin: 5px 0 0; color: #7f8aa9; font-size: 11px; }
.period-select { padding: 8px 10px; color: #aab5d2; border: 1px solid var(--line); border-radius: 9px; background: #0b1021; font-size: 11px; }
.chart-box { position: relative; height: 236px; }
.chart-box canvas { width: 100% !important; height: 100% !important; }
.chart-fallback { width: 100%; height: 100%; }
.transactions-list { display: grid; }
.transaction-row { display: grid; grid-template-columns: 39px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid rgba(153,168,216,.08); }
.transaction-row:last-child { border-bottom: 0; }
.category-icon { width: 38px; height: 38px; display: grid; place-items: center; color: #7fbfff; border: 1px solid rgba(22,139,255,.13); border-radius: 12px; background: rgba(22,139,255,.07); }
.transaction-main { min-width: 0; }
.transaction-main strong, .transaction-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transaction-main strong { font-size: 12px; font-weight: 600; }
.transaction-main small { margin-top: 4px; color: #808ba9; font-size: 10px; }
.transaction-amount { white-space: nowrap; text-align: right; font-size: 12px; font-weight: 700; }
.positive { color: var(--green); }
.negative { color: #ff7187; }
.muted { color: var(--muted); }
.analysis-card { position: relative; overflow: hidden; border-color: rgba(130,59,255,.21); background: radial-gradient(ellipse at 100% 0, rgba(130,59,255,.15), transparent 49%), linear-gradient(145deg, rgba(23,20,51,.88), rgba(11,15,32,.9)); }
.analysis-label { display: flex; align-items: center; gap: 8px; color: #c8a9ff; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.analysis-label svg { width: 16px; height: 16px; }
.analysis-card h3 { margin: 15px 0 8px; font: 700 16px "Manrope", sans-serif; }
.analysis-card p { margin: 0; color: #9ba5c4; font-size: 12px; line-height: 1.65; }
.insight-item { display: flex; gap: 10px; margin-top: 17px; padding-top: 15px; border-top: 1px solid rgba(156,144,211,.1); color: #bac3dc; font-size: 11px; line-height: 1.55; }
.insight-item i { width: 24px; height: 24px; display: grid; place-items: center; flex: none; color: var(--gold); border-radius: 8px; background: rgba(255,194,71,.1); }
.section-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin: 2px 0 18px; }
.section-title-row h2 { margin: 0; font: 700 19px "Manrope", sans-serif; }
.section-title-row p { margin: 6px 0 0; color: #8691af; font-size: 12px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.search-input { width: min(270px, 100%); min-height: 39px; padding: 9px 12px; font-size: 12px; }
.filter-select { min-height: 39px; padding: 0 11px; color: #b4bfdc; border: 1px solid var(--line); border-radius: 10px; background: #0c1123; font-size: 11px; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th { padding: 10px 12px; color: #73809f; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 13px 12px; color: #c9d0e5; border-bottom: 1px solid rgba(153,168,216,.075); font-size: 12px; white-space: nowrap; }
.data-table tr:last-child td { border-bottom: 0; }
.type-pill { display: inline-flex; padding: 4px 8px; border-radius: 20px; font-size: 10px; }
.type-pill.income { color: var(--green); background: rgba(25,217,160,.1); }
.type-pill.expense { color: #ff879b; background: rgba(255,69,102,.1); }
.row-actions { display: flex; justify-content: flex-end; gap: 5px; }
.row-actions .icon-button { width: 30px; height: 30px; }
.empty-state { padding: 42px 18px; color: #8994b2; text-align: center; font-size: 12px; line-height: 1.6; }
.empty-state svg { display: block; width: 27px; height: 27px; margin: 0 auto 13px; color: #637092; }
.wallet-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.wallet-card { min-height: 150px; }
.wallet-card strong { display: block; margin-top: 14px; font: 700 22px "Manrope", sans-serif; }
.wallet-card small { color: #8792af; font-size: 11px; }
.planning-grid { grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr); }
.budget-item { display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(153,168,216,.08); }
.budget-item:last-child { border: 0; }
.budget-name { color: #d3d9eb; font-size: 12px; font-weight: 600; }
.budget-value { color: #f5f7ff; font-size: 12px; font-weight: 700; }
.budget-item input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--blue); }
.budget-percent { color: #8490ae; font-size: 10px; }
.budget-total { display: flex; justify-content: space-between; padding-top: 15px; margin-top: 9px; border-top: 1px solid var(--line); color: #a3adca; font-size: 11px; }
.budget-warning { margin: 13px 0 0; color: #ffc873; font-size: 11px; }
.goal-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.goal-card { position: relative; overflow: hidden; }
.goal-cover { display: grid; place-items: center; height: 110px; margin: -20px -20px 16px; color: #d8ccff; background: radial-gradient(ellipse at 50% 130%, rgba(130,59,255,.5), transparent 58%), linear-gradient(120deg, #111b3b, #1a1740); }
.goal-cover svg { width: 30px; height: 30px; }
.goal-card h3 { margin: 0; font: 700 14px "Manrope", sans-serif; }
.goal-card p { margin: 6px 0 15px; color: #8390ae; font-size: 10px; }
.progress-track { height: 6px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.08); }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--purple), var(--gold)); transition: width .5s ease; }
.goal-meta { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0 15px; color: #8e99b7; font-size: 10px; }
.goal-meta strong { color: #e3e8f7; font-weight: 600; }
.goal-actions { display: flex; gap: 7px; }
.goal-actions button { min-height: 34px; flex: 1; padding: 0 8px; font-size: 10px; }
.ai-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 18px; min-height: 590px; }
.chat-card { display: flex; flex-direction: column; min-height: 570px; padding: 0; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.ai-orb { width: 39px; height: 39px; display: grid; place-items: center; color: #fff; border-radius: 14px; background: linear-gradient(135deg, #168bff, #823bff); box-shadow: 0 0 24px rgba(115,70,255,.3); }
.chat-head strong { display: block; font-size: 13px; }
.chat-head small { display: block; margin-top: 4px; color: #70deb8; font-size: 10px; }
.chat-messages { display: flex; flex: 1; flex-direction: column; gap: 13px; padding: 20px; overflow-y: auto; }
.chat-message { max-width: min(80%, 540px); padding: 12px 14px; color: #cbd3e8; border: 1px solid rgba(159,174,220,.1); border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.035); font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.chat-message.user { align-self: flex-end; color: #f2f5ff; border-color: rgba(72,119,255,.18); border-radius: 14px 14px 4px 14px; background: linear-gradient(120deg, rgba(31,108,211,.24), rgba(111,63,200,.22)); }
.chat-message small { display: block; margin-top: 7px; color: #808ba8; font-size: 9px; }
.summary-charts { display: grid; width: min(100%, 560px); gap: 11px; margin-top: 15px; white-space: normal; }
.summary-chart { min-width: 0; padding: 13px 12px 10px; border: 1px solid rgba(151,168,219,.12); border-radius: 12px; background: rgba(5,8,23,.4); }
.summary-chart h4 { margin: 0 0 7px; color: #e2e8fa; font: 600 11px "Manrope", sans-serif; }
.summary-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.summary-chart svg text { fill: #8f9aba; font: 10px "DM Sans", sans-serif; }
.summary-chart svg .chart-category-label { fill: #adb7d2; font-size: 10px; }
.summary-chart svg .chart-category-value { fill: #d7def0; font-size: 9px; }
.summary-chart svg .chart-axis { stroke: rgba(153,168,216,.2); stroke-width: 1; }
.summary-chart svg .chart-legend text { font-size: 9px; }
.summary-chart svg .chart-empty { fill: #8994b2; font-size: 11px; }
.summary-chart p { margin: 5px 0 0; color: #8792af; font-size: 10px; line-height: 1.5; }
.chat-form { display: flex; gap: 8px; padding: 15px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; min-width: 0; padding: 12px; color: #f5f7ff; border: 1px solid var(--line); border-radius: 12px; background: #080c1a; font-size: 12px; }
.chat-form button { width: 44px; height: 44px; }
.prompt-list { display: grid; gap: 8px; }
.prompt-button { padding: 11px 12px; color: #aab4d1; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); cursor: pointer; font-size: 11px; line-height: 1.45; }
.prompt-button:hover { border-color: rgba(129,89,255,.35); background: rgba(130,59,255,.07); }
.report-grid { grid-template-columns: minmax(0,1.1fr) minmax(260px,.9fr); }
.report-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.report-summary div { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.report-summary small { color: #8994b2; font-size: 10px; }
.report-summary strong { display: block; margin-top: 8px; font: 700 18px "Manrope", sans-serif; }
.category-bar { display: grid; gap: 7px; margin: 17px 0; }
.category-bar-head { display: flex; justify-content: space-between; color: #bbc4dc; font-size: 11px; }
.category-bar .progress-track { height: 5px; }
.settings-layout { grid-template-columns: minmax(0,1.1fr) minmax(260px,.9fr); }
.profile-hero { display: flex; align-items: center; gap: 15px; margin-bottom: 21px; }
.profile-hero .avatar { width: 62px; height: 62px; font-size: 20px; }
.profile-hero strong { display: block; font: 700 17px "Manrope",sans-serif; }
.profile-hero small { display: block; margin-top: 5px; color: #8490ad; font-size: 11px; }
.settings-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid rgba(153,168,216,.08); }
.settings-row:last-child { border: 0; }
.settings-row strong { display: block; color: #dce2f1; font-size: 12px; }
.settings-row small { display: block; margin-top: 4px; color: #8190ac; font-size: 10px; }
.switch { appearance: none; width: 38px; height: 22px; flex: none; border: 1px solid rgba(144,157,196,.22); border-radius: 20px; background: #171d31; cursor: pointer; transition: .2s; }
.switch::before { display: block; width: 14px; height: 14px; margin: 3px; content: ""; border-radius: 50%; background: #77819c; transition: .2s; }
.switch:checked { border-color: rgba(22,139,255,.5); background: rgba(22,139,255,.35); }
.switch:checked::before { transform: translateX(16px); background: #a5d6ff; }
.dialog-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px; background: rgba(2,4,13,.75); backdrop-filter: blur(7px); }
.dialog { width: min(100%, 480px); max-height: min(90vh, 760px); overflow: auto; padding: 23px; border: 1px solid rgba(154,171,224,.19); border-radius: 19px; background: #10152a; box-shadow: 0 28px 90px rgba(0,0,0,.48); animation: page-in .2s ease both; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 19px; }
.dialog-head h2 { margin: 0; font: 700 18px "Manrope",sans-serif; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.toast-region { position: fixed; z-index: 50; right: 20px; bottom: 20px; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.toast { padding: 13px 15px; color: #e8edfb; border: 1px solid rgba(125,155,240,.2); border-radius: 12px; background: #151c34; box-shadow: 0 10px 28px rgba(0,0,0,.32); font-size: 12px; animation: page-in .2s ease both; }
.toast.error { border-color: rgba(255,69,102,.35); }
.notice-list { display: grid; gap: 10px; }
.notice-item { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }
.notice-item strong { display: block; font-size: 12px; }
.notice-item p { margin: 5px 0 0; color: #8e99b7; font-size: 11px; line-height: 1.5; }
.mobile-nav { display: none; }
.privacy-hidden .sensitive { filter: blur(8px); user-select: none; }
.light-theme { --bg: #edf1fa; --panel: #fff; --text: #18203a; --muted: #65708c; color-scheme: light; }
.light-theme body { color: #18203a; background: #edf1fa; }
.light-theme .sidebar { background: rgba(248,250,255,.92); }
.light-theme .card, .light-theme .auth-card { color: #18203a; background: rgba(255,255,255,.91); border-color: rgba(56,76,126,.13); }
.light-theme .main-area, .light-theme .nav-link { color: #18203a; }
.light-theme .stat-value, .light-theme .card-heading h3, .light-theme .page-title, .light-theme .goal-card h3 { color: #18203a; }
.light-theme .field input, .light-theme .field select, .light-theme .field textarea, .light-theme .search-input { color: #18203a; background: #f6f8fd; }
.light-theme .chat-form input, .light-theme .filter-select, .light-theme .period-select { color: #18203a; background: #f6f8fd; }
.light-theme .hero-card { color: #f5f7ff; }
.light-theme .sidebar-tip { color: #18203a; }
.light-theme .dialog { color: #18203a; background: #fff; }

@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 218px minmax(0,1fr); }
  .main-area { padding-right: 26px; padding-left: 26px; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .goal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .auth-shell { min-height: 100svh; grid-template-columns: 1fr; gap: 15px; padding: 26px 20px 32px; }
  .auth-story { padding: 4px 0; }
  .auth-story h1 { margin: 34px 0 12px; font-size: clamp(34px,10vw,48px); }
  .auth-story > p { font-size: 13px; }
  .story-points { display: none; }
  .auth-card { justify-self: center; padding: 25px 21px; }
  .app-shell { display: block; padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .sidebar { display: none; }
  .main-area { padding: 19px 16px 30px; }
  .topbar { margin-bottom: 20px; }
  .page-title { font-size: 22px; }
  .date-label { display: none; }
  .mobile-nav { position: fixed; z-index: 15; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5,1fr); padding: 8px 7px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(151,168,219,.13); background: rgba(8,11,25,.94); backdrop-filter: blur(20px); }
  .mobile-nav button { display: grid; justify-items: center; gap: 4px; padding: 5px 2px; color: #7f8aa8; border: 0; border-radius: 10px; background: transparent; font-size: 9px; }
  .mobile-nav button.active { color: #85c7ff; }
  .mobile-nav svg { width: 19px; height: 19px; }
  .hero-card { grid-template-columns: 1fr; gap: 20px; padding: 23px; }
  .hero-card::after { right: -70px; bottom: 32px; }
  .hero-metric { justify-self: stretch; width: auto; }
  .content-grid, .planning-grid, .report-grid, .settings-layout, .ai-layout { grid-template-columns: 1fr; }
  .ai-layout { min-height: unset; }
  .chat-card { min-height: 510px; }
  .ai-aside { order: -1; }
  .ai-aside .prompt-list { grid-template-columns: repeat(2,1fr); }
  .wallet-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .goal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .goal-card { padding: 15px; }
  .goal-cover { height: 84px; margin: -15px -15px 13px; }
}
@media (max-width: 430px) {
  .stats-grid { gap: 10px; }
  .stat-card { min-height: 125px; padding: 14px; }
  .stat-head { font-size: 10px; }
  .stat-value { font-size: 19px; }
  .card { padding: 16px; }
  .hero-card { padding: 19px; }
  .hero-card h2 { font-size: 20px; }
  .wallet-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .wallet-card { min-height: 127px; padding: 14px; }
  .wallet-card strong { font-size: 17px; }
  .goal-grid { grid-template-columns: 1fr; }
  .goal-cover { height: 92px; }
  .section-title-row { align-items: flex-start; flex-direction: column; }
  .toolbar { width: 100%; }
  .search-input { flex: 1; }
}
@media print {
  :root { color-scheme: light; }
  body { color: #17213a; background: #fff; }
  .sidebar, .mobile-nav, .top-actions, .toolbar, .hero-actions, .icon-button, button { display: none !important; }
  .app-shell { display: block; }
  .main-area { padding: 0; }
  .card { color: #17213a; border: 1px solid #d5dbea; background: #fff; box-shadow: none; break-inside: avoid; }
  .stat-value, .page-title, .card-heading h3, .transaction-main strong { color: #17213a; }
  .muted, .transaction-main small { color: #596781; }
}