:root {
  --ink: #16231d;
  --muted: #778078;
  --line: #e4e8df;
  --paper: #fbfcf8;
  --canvas: #f1f3ed;
  --green: #1f4e3b;
  --green-soft: #d9edab;
  --lime: #cbe982;
  --orange: #edab68;
  --blue: #8cb8b4;
  --shadow: 0 18px 50px rgba(30, 52, 40, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: "Manrope", sans-serif; min-width: 320px; }
button, input, select { font: inherit; }
button { color: inherit; }
.auth-screen { min-height: 100vh; padding: 30px; display: grid; place-items: center; position: relative; overflow: hidden; background: #eef1e9; }
.auth-screen[hidden] { display: none; }
.auth-decoration { position: absolute; inset: 0; pointer-events: none; }
.auth-decoration i { position: absolute; display: block; border-radius: 50%; filter: blur(1px); opacity: .7; }
.auth-decoration i:nth-child(1) { width: 440px; height: 440px; right: -120px; top: -150px; background: #cfe5ae; }
.auth-decoration i:nth-child(2) { width: 320px; height: 320px; left: -110px; bottom: -120px; background: #9dc8b9; }
.auth-decoration i:nth-child(3) { width: 180px; height: 180px; left: 18%; top: 8%; background: #efbe8b; opacity: .45; }
.login-card { position: relative; z-index: 1; width: min(440px, 100%); padding: 43px; border: 1px solid rgba(22,35,29,.08); border-radius: 27px; background: rgba(251,252,248,.94); box-shadow: 0 30px 90px rgba(30,52,40,.12); backdrop-filter: blur(16px); }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 45px; font-family: "Unbounded", sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -.04em; }
.login-card h1 { font-size: 33px; }
.login-copy { margin: 13px 0 27px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.login-field { display: block; margin-top: 14px; }
.login-field span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 600; }
.login-field input { width: 100%; height: 49px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: white; outline: 0; }
.login-field input:focus { border-color: #8aa584; box-shadow: 0 0 0 4px rgba(110,143,102,.1); }
.login-error { min-height: 18px; margin: 10px 0 0; color: #a9574f; font-size: 10px; }
.login-button { width: 100%; margin-top: 7px; }
.login-card > small { display: block; margin-top: 19px; color: #969e96; text-align: center; font-size: 9px; }
.app-shell { min-height: 100vh; }
.topbar { height: 76px; padding: 0 max(24px, calc((100vw - 1440px) / 2)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(22,35,29,.08); background: rgba(248,249,244,.9); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 20; }
.brand { display: inline-flex; width: max-content; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: "Unbounded", sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -.04em; }
.brand-mark { width: 33px; height: 33px; border-radius: 50% 50% 45% 55%; background: var(--green); color: var(--lime); display: grid; place-items: center; font-family: "Unbounded"; transform: rotate(-8deg); }
.main-nav { display: flex; height: 100%; gap: 31px; }
.nav-item { position: relative; border: 0; background: transparent; padding: 2px 0 0; color: #7f8780; font-size: 14px; cursor: pointer; }
.nav-item:hover { color: var(--ink); }
.nav-item.active { color: var(--ink); font-weight: 600; }
.nav-item.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.logout-button { border: 0; background: transparent; color: var(--muted); padding: 7px; cursor: pointer; font-size: 10px; }
.logout-button:hover { color: var(--ink); }
.icon-button, .profile-button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; }
.icon-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.profile-button { background: #eadcc7; border-color: #eadcc7; font-weight: 700; }
main { max-width: 1440px; margin: 0 auto; padding: 0 24px 64px; }
.view { display: none; animation: reveal .35s ease; }
.view.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } }
.page-heading { min-height: 176px; display: flex; align-items: flex-end; justify-content: space-between; padding: 38px 0 28px; }
.eyebrow { margin: 0 0 10px; color: #7c867d; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: 10px; }
h1 { font-family: "Unbounded", sans-serif; font-size: clamp(28px, 3vw, 42px); line-height: 1.17; letter-spacing: -.05em; margin: 0; font-weight: 500; }
h1 span { color: #879087; }
.heading-actions { display: flex; gap: 10px; }
.button { min-height: 44px; border-radius: 12px; border: 1px solid var(--line); padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 700; transition: .2s ease; }
.button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(22,35,29,.08); }
.button.primary { color: #f7f9f3; background: var(--green); border-color: var(--green); }
.button.secondary { background: var(--paper); }
.summary-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.donut-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.donut-panel { min-height: 250px; }
.donut-content { display: grid; grid-template-columns: 155px minmax(0, 1fr); align-items: center; gap: 27px; margin-top: 20px; }
.donut-chart { width: 155px; height: 155px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#e4e8df 0 100%); position: relative; }
.donut-chart::after { content: ""; position: absolute; inset: 25px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px rgba(22,35,29,.025); }
.donut-center { position: relative; z-index: 1; max-width: 105px; text-align: center; }
.donut-center strong { display: block; font-family: "Unbounded"; font-size: 16px; letter-spacing: -.05em; }
.donut-center span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.donut-legend { display: grid; gap: 10px; min-width: 0; }
.donut-legend-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 10px; }
.donut-legend-row i { width: 8px; height: 8px; border-radius: 50%; }
.donut-legend-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend-row small { color: var(--muted); font-size: 8px; }
.donut-legend-row b { font-size: 10px; }
.donut-empty { color: var(--muted); font-size: 11px; line-height: 1.5; }
.analytics-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.analytics-metric { min-height: 135px; }
.analytics-metric .metric-value { margin-top: 18px; }
.metric-value.negative, .monthly-table .negative { color: #ad5d53; }.monthly-table .positive, .monthly-table .income-cell { color: #4f7b5f; }
.monthly-panel { margin-top: 14px; padding-bottom: 31px; }
.legend-income { background: #6e9c73; }.legend-expense { background: var(--orange); }
.monthly-chart { height: 280px; margin-top: 24px; padding: 12px 6px 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 8px; border-bottom: 1px solid var(--line); position: relative; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(33.333% - 1px), #edf0ea 33.333%); }
.monthly-group { height: 100%; min-width: 0; display: grid; grid-template-rows: 1fr 23px; align-items: end; position: relative; z-index: 1; }
.monthly-bars { height: 100%; display: flex; align-items: end; justify-content: center; gap: 3px; }
.monthly-bars i { width: min(13px, 42%); min-height: 0; border-radius: 5px 5px 0 0; }
.monthly-income { background: #6e9c73; }.monthly-expense { background: var(--orange); }
.monthly-group > span { align-self: end; padding-top: 8px; color: var(--muted); font-size: 9px; text-align: center; white-space: nowrap; }
.monthly-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.monthly-table-panel { margin-top: 14px; }
.monthly-table { width: 100%; border-collapse: collapse; margin-top: 13px; font-size: 11px; }
.monthly-table th, .monthly-table td { padding: 12px 8px; border-top: 1px solid var(--line); text-align: right; }
.monthly-table th { color: var(--muted); font-size: 9px; font-weight: 600; }.monthly-table th:first-child, .monthly-table td:first-child { text-align: left; text-transform: capitalize; }
.balance-card, .metric-card, .panel { background: var(--paper); border: 1px solid rgba(22,35,29,.07); border-radius: 18px; }
.balance-card { position: relative; min-height: 204px; padding: 25px 27px; overflow: hidden; background: #f9faf6; }
.card-label-row { display: flex; gap: 12px; align-items: center; }
.card-label { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.status-dot { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: #4c765e; background: #e3efdf; border-radius: 20px; padding: 4px 8px; }
.balance-value { position: relative; z-index: 2; font-family: "Unbounded", sans-serif; letter-spacing: -.06em; font-size: clamp(30px, 3.3vw, 48px); margin-top: 22px; }
.balance-meta { position: relative; z-index: 2; margin-top: 25px; display: flex; gap: 28px; font-size: 11px; color: var(--muted); }
.balance-meta span { display: flex; align-items: center; gap: 6px; }
.balance-meta b { color: var(--ink); font-weight: 600; }
.balance-meta i { width: 7px; height: 7px; border-radius: 50%; }
.income-dot { background: #88a751; }.expense-dot { background: var(--orange); }
.balance-visual { position: absolute; right: 0; bottom: 0; width: 42%; height: 100%; opacity: .95; }
.orb { position: absolute; border-radius: 50%; filter: blur(.2px); }
.orb-one { width: 170px; height: 170px; right: -10px; bottom: -62px; background: #cfe5ae; }
.orb-two { width: 135px; height: 135px; right: -35px; bottom: 18px; background: #9dc8b9; mix-blend-mode: multiply; }
.orb-three { width: 90px; height: 90px; right: 100px; bottom: -15px; background: #efbe8b; mix-blend-mode: multiply; }
.metric-card { min-height: 204px; padding: 27px 24px; display: flex; flex-direction: column; justify-content: space-between; }
.metric-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; background: #e4efc7; font-size: 18px; }
.metric-icon.calm { background: #dfe8e5; }
.metric-value { display: block; font-family: "Unbounded", sans-serif; font-size: clamp(22px, 2vw, 29px); letter-spacing: -.05em; margin: 9px 0 3px; }
.metric-note { color: #9a9f9a; font-size: 10px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .8fr); gap: 14px; margin-top: 14px; }
.left-column, .right-column { display: flex; flex-direction: column; gap: 14px; }
.panel { padding: 23px 25px; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-header h2 { margin: 0; font-family: "Unbounded"; font-size: 23px; letter-spacing: -.05em; font-weight: 500; }
.panel-header.compact { align-items: center; }
.panel-header.compact h2 { font-family: "Manrope"; font-size: 15px; letter-spacing: -.02em; font-weight: 700; }
.legend { display: flex; gap: 15px; color: var(--muted); font-size: 9px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 7px; height: 7px; border-radius: 50%; }
.legend-current { background: var(--green); }.legend-prev { background: #ccd2cb; }
.chart { height: 155px; margin-top: 20px; display: flex; align-items: end; gap: 10px; border-bottom: 1px solid var(--line); position: relative; padding: 0 5px; }
.chart-empty { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.chart.empty .chart-bar { min-height: 0; }
.chart::before, .chart::after { content: ""; position: absolute; left: 0; right: 0; border-top: 1px dashed #e8ebe5; }
.chart::before { top: 33%; }.chart::after { top: 66%; }
.chart-group { flex: 1; height: 100%; display: flex; justify-content: center; align-items: end; gap: 4px; position: relative; z-index: 1; }
.chart-bar { width: min(11px, 38%); min-height: 2px; border-radius: 5px 5px 0 0; background: var(--green); transition: height .5s ease; }
.chart-bar.prev { background: #dde1da; }
.chart-label { position: absolute; bottom: -19px; font-size: 8px; color: #99a098; }
.spending-panel { padding-bottom: 32px; }
.text-button, .more-button { border: 0; background: none; cursor: pointer; color: var(--green); font-size: 11px; font-weight: 700; }
.transaction-list { margin-top: 13px; }
.transaction { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.transaction:first-child { border-top: 0; }
.transaction-icon { width: 37px; height: 37px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; background: #eef0ea; }
.transaction-main strong { display: block; font-size: 12px; }.transaction-main span { display: block; color: var(--muted); font-size: 9px; margin-top: 2px; }
.transaction-amount { text-align: right; font-size: 12px; font-weight: 700; }.transaction-amount.income { color: #4f7b5f; }
.empty-state { padding: 30px 12px; color: var(--muted); text-align: center; font-size: 12px; }
.advisor-card { min-height: 238px; border-radius: 18px; padding: 25px; background: var(--green); color: #f6f8f2; position: relative; overflow: hidden; }
.advisor-card::after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; right: -61px; top: -58px; background: rgba(203,233,130,.14); }
.advisor-topline { display: flex; align-items: center; gap: 9px; text-transform: uppercase; letter-spacing: .1em; font-size: 9px; color: #cbd8ce; }
.ai-badge { width: 29px; height: 29px; display: grid; place-items: center; color: var(--green); background: var(--lime); border-radius: 9px; font-size: 15px; }
.advisor-card h2 { max-width: 310px; font-family: "Unbounded"; font-size: clamp(19px, 2vw, 25px); line-height: 1.25; letter-spacing: -.05em; margin: 21px 0 12px; font-weight: 500; }
.advisor-card p { color: #bdcac1; max-width: 340px; font-size: 11px; line-height: 1.65; margin: 0; }
.advisor-button { position: absolute; left: 25px; right: 25px; bottom: 20px; border: 0; border-top: 1px solid rgba(255,255,255,.14); padding: 16px 0 0; display: flex; justify-content: space-between; background: none; color: white; font-size: 10px; cursor: pointer; }
.categories-panel { flex: 1; min-height: 290px; }
.more-button { color: #8c948d; letter-spacing: 2px; }
.category-row { padding: 12px 0 10px; border-top: 1px solid var(--line); }
.category-row:first-child { margin-top: 12px; }
.category-meta { display: grid; grid-template-columns: 1fr auto; gap: 10px; font-size: 11px; }
.category-meta span { display: flex; align-items: center; gap: 7px; }
.category-meta i { width: 8px; height: 8px; border-radius: 50%; }
.category-bar { height: 3px; border-radius: 10px; background: #edf0ea; margin-top: 8px; overflow: hidden; }.category-bar span { display: block; height: 100%; border-radius: 10px; }
.inner-heading { min-height: 150px; }
.operations-table-panel { min-height: 520px; }
.operation-toolbar { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.search-box { flex: 1; max-width: 390px; display: flex; align-items: center; gap: 8px; background: #f0f2ed; border-radius: 11px; padding: 0 12px; }
.search-box svg { width: 17px; fill: none; stroke: var(--muted); stroke-width: 1.8; }.search-box input { width: 100%; height: 42px; border: 0; outline: none; background: transparent; font-size: 12px; }
.filter-group { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }.filter-group select { height: 42px; border: 1px solid var(--line); border-radius: 11px; background: white; padding: 0 30px 0 12px; font-size: 11px; color: #5d675f; }
.date-filter { height: 42px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 11px; background: white; padding: 0 10px; color: var(--muted); font-size: 10px; white-space: nowrap; }.date-filter input { width: 112px; border: 0; outline: none; background: transparent; color: #5d675f; font: inherit; }
.category-filter { position: relative; min-width: 150px; font-size: 11px; color: #5d675f; }.category-filter summary { height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 11px; background: white; padding: 0 12px; cursor: pointer; list-style: none; }.category-filter summary::-webkit-details-marker { display: none; }.category-filter summary::after { content: '⌄'; color: var(--muted); }.category-filter[open] summary { border-color: #aebbad; }.category-filter-options { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; width: 230px; max-height: 310px; overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 15px 35px rgba(30,52,40,.14); }.category-filter-options section + section { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }.category-filter-options strong { display: block; padding: 4px 7px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.category-filter-options label { display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: 8px; cursor: pointer; }.category-filter-options label:hover { background: #f2f4ef; }.category-filter-options input { accent-color: var(--green); }.category-filter-empty { display: block; padding: 8px; color: var(--muted); }
.filtered-summary { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: -2px 0 14px; padding: 11px 13px; border-radius: 11px; background: #f7f8f4; color: var(--muted); font-size: 11px; }.filtered-summary span { display: flex; gap: 5px; align-items: baseline; }.filtered-summary b { color: var(--ink); font-size: 12px; }.filtered-summary b.income { color: var(--green); }.filtered-summary b.expense { color: var(--orange); }
.button.danger { border-color: #dfc3bd; color: #9c5148; background: #fff8f6; }
.button.danger:hover:not(:disabled) { border-color: #c98e84; background: #fcece8; }
.button:disabled { opacity: .45; cursor: not-allowed; }
.full-transaction-list .transaction { grid-template-columns: auto 1fr auto auto auto; padding: 14px 2px; }
.transaction-date { width: 100px; color: var(--muted); font-size: 10px; text-align: right; }
.transaction-actions { display: flex; align-items: center; gap: 2px; }
.edit-transaction, .delete-transaction { opacity: 0; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-size: 16px; transition: opacity .2s, background .2s; }
.edit-transaction { color: var(--green); }.delete-transaction { color: #ad6b61; font-size: 18px; }
.transaction:hover .edit-transaction, .transaction:hover .delete-transaction { opacity: 1; }.edit-transaction:hover, .delete-transaction:hover { background: #eef1eb; }
.assistant-layout { min-height: calc(100vh - 140px); display: grid; grid-template-columns: .85fr 1.15fr; gap: 36px; align-items: center; padding: 45px 5vw; }
.assistant-intro { max-width: 480px; }.assistant-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--green); color: var(--lime); margin-bottom: 30px; font-size: 22px; }.assistant-intro h1 { font-size: clamp(34px, 4vw, 55px); }.assistant-intro > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; font-size: 14px; max-width: 440px; }.quick-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }.quick-prompts button { border: 1px solid #d9dfd6; border-radius: 30px; background: transparent; padding: 10px 14px; cursor: pointer; font-size: 10px; }.quick-prompts button:hover { background: white; }
.assistant-usage { margin-top: 24px; padding: 15px 17px; max-width: 360px; display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.56); }.assistant-usage span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }.assistant-usage span b { font-weight: 500; }.assistant-usage strong { font-family: "Unbounded"; font-size: 17px; }.assistant-usage small { color: var(--muted); font-size: 9px; }
.chat-card { height: 620px; max-height: calc(100vh - 130px); min-height: 480px; display: flex; flex-direction: column; background: var(--paper); border: 1px solid rgba(22,35,29,.08); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; }
.chat-header { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }.chat-header > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }.chat-header strong { font-size: 13px; }.chat-header small { grid-column: 2; color: var(--muted); font-size: 9px; }.online-dot { width: 8px; height: 8px; background: #7ea85c; border-radius: 50%; grid-row: span 2; }
.chat-messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 14px; }.message { max-width: 80%; padding: 13px 15px; border-radius: 16px; font-size: 12px; line-height: 1.6; white-space: pre-line; }.message.assistant { align-self: flex-start; background: #eef1e9; border-bottom-left-radius: 5px; }.message.user { align-self: flex-end; background: var(--green); color: white; border-bottom-right-radius: 5px; }.message small { display: block; margin-top: 6px; opacity: .6; font-size: 8px; }
.chat-input { margin: 14px; padding: 7px 7px 7px 15px; border: 1px solid var(--line); border-radius: 15px; background: white; display: flex; gap: 10px; }.chat-input input { flex: 1; border: 0; outline: 0; font-size: 11px; min-width: 0; }.chat-input button { width: 37px; height: 37px; flex: 0 0 auto; border: 0; border-radius: 11px; background: var(--green); color: white; cursor: pointer; }
.chat-input input:disabled { background: transparent; }.chat-input button:disabled, .quick-prompts button:disabled { opacity: .45; cursor: wait; }
.modal { border: 0; padding: 0; border-radius: 22px; width: min(510px, calc(100% - 30px)); background: var(--paper); color: var(--ink); box-shadow: 0 30px 100px rgba(11,27,18,.3); }.modal::backdrop { background: rgba(18,29,23,.44); backdrop-filter: blur(4px); }.modal form { padding: 28px; }.modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }.modal-header h2 { font-family: "Unbounded"; margin: 0; letter-spacing: -.04em; font-size: 22px; }.close-button { width: 33px; height: 33px; border: 1px solid var(--line); background: transparent; border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1; }.type-switch { display: grid; grid-template-columns: 1fr 1fr; background: #ecefe8; border-radius: 12px; padding: 4px; margin-bottom: 20px; }.type-switch input { display: none; }.type-switch span { display: block; text-align: center; padding: 10px; border-radius: 9px; font-size: 11px; cursor: pointer; }.type-switch input:checked + span { background: white; box-shadow: 0 2px 8px rgba(22,35,29,.08); font-weight: 700; }.field { display: block; margin-top: 14px; }.field > span { display: block; font-size: 10px; color: var(--muted); margin-bottom: 6px; }.field input, .field select { width: 100%; height: 45px; border: 1px solid var(--line); border-radius: 11px; background: white; padding: 0 12px; outline: none; font-size: 12px; }.field input:focus, .field select:focus { border-color: #9daf98; box-shadow: 0 0 0 3px rgba(110,143,102,.1); }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.amount-input { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: white; padding-right: 15px; }.amount-input input { border: 0; font-size: 24px; font-family: "Unbounded"; }.submit-button { width: 100%; margin-top: 24px; }
.profile-modal { width: min(720px, calc(100% - 30px)); }.profile-copy { margin: -10px 0 22px; color: var(--muted); font-size: 11px; }.profile-category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }.profile-category-section h3 { margin: 0 0 10px; font-size: 13px; }.profile-category-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }.profile-category-add input { min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 11px; outline: none; }.profile-category-add .button { min-height: 40px; padding: 0 12px; font-size: 10px; }.profile-category-list { margin-top: 12px; max-height: 310px; overflow-y: auto; }.profile-category-row { min-height: 37px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); font-size: 11px; }.profile-category-row small { color: var(--muted); font-size: 8px; }.profile-category-row button { width: 27px; height: 27px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }.profile-category-row button:hover { background: #eef1eb; color: var(--ink); }.profile-category-row.category-hidden > span { color: #a0a6a0; text-decoration: line-through; }.profile-category-row button.category-visibility { width: auto; padding: 0 7px; font-size: 9px; color: var(--green); }
.category-select-row { display: grid; grid-template-columns: minmax(0, 1fr) 45px; gap: 7px; }.category-add-button { height: 45px; border: 1px solid var(--line); border-radius: 11px; background: #eef2ea; color: var(--green); font-size: 20px; cursor: pointer; }.category-add-button:hover { background: #e5ecdf; }.new-category-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-top: 8px; }.new-category-row[hidden] { display: none; }.new-category-row .button { height: 45px; padding: 0 14px; }
.drop-zone { min-height: 245px; border: 1px dashed #bfc8ba; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: .2s; }.drop-zone.dragging { border-color: var(--green); background: #eff5e8; }.upload-icon { width: 45px; height: 45px; border-radius: 14px; background: #e5edd7; display: grid; place-items: center; font-size: 22px; margin-bottom: 13px; }.drop-zone strong { font-size: 13px; }.drop-zone p { color: var(--muted); font-size: 10px; margin: 7px 0 17px; }.import-hint { display: flex; gap: 10px; margin-top: 15px; padding: 13px; background: #edf1eb; border-radius: 12px; }.import-hint > span { width: 21px; height: 21px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 10px; }.import-hint p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }.import-hint b { color: var(--ink); }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 25px; transform: translate(-50%, 30px); background: var(--ink); color: white; padding: 12px 18px; border-radius: 12px; font-size: 11px; opacity: 0; pointer-events: none; transition: .25s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
.privacy .money { filter: blur(8px); user-select: none; }
.concept-picker { position: fixed; z-index: 18; right: 18px; bottom: 17px; display: flex; align-items: center; gap: 5px; padding: 5px; border-radius: 30px; background: rgba(22,35,29,.92); box-shadow: 0 12px 35px rgba(22,35,29,.18); backdrop-filter: blur(10px); }
.concept-picker span { color: #acb8ae; padding: 0 7px; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.concept-picker a { color: white; text-decoration: none; border-radius: 20px; padding: 8px 10px; font-size: 8px; }
.concept-picker a:hover { background: rgba(255,255,255,.12); }

@media (max-width: 900px) {
  .main-nav { gap: 16px; }.nav-item { font-size: 12px; }.summary-grid { grid-template-columns: 1fr 1fr; }.balance-card { grid-column: 1 / -1; }.donut-content { grid-template-columns: 135px minmax(0, 1fr); gap: 18px; }.donut-chart { width: 135px; height: 135px; }.content-grid { grid-template-columns: 1fr; }.right-column { display: grid; grid-template-columns: 1fr 1fr; }.monthly-chart { gap: 5px; }.assistant-layout { grid-template-columns: 1fr; padding: 40px 0; }.assistant-intro { max-width: 650px; }.chat-card { max-height: none; height: 580px; }
}
@media (max-width: 640px) {
  .auth-screen { padding: 16px; }
  .login-card { padding: 32px 24px; border-radius: 22px; }
  .login-brand { margin-bottom: 34px; }
  .login-card h1 { font-size: 28px; }
  .concept-picker { display: none; }
  .topbar { height: 64px; padding: 0 16px; grid-template-columns: 1fr auto; backdrop-filter: none; }.main-nav { position: fixed; z-index: 30; bottom: 0; left: 0; right: 0; height: 61px; background: rgba(250,251,247,.96); border-top: 1px solid var(--line); justify-content: space-around; padding: 0 8px; gap: 5px; }.nav-item { flex: 1; font-size: 11px; }.nav-item.active::after { top: -1px; bottom: auto; }.topbar-actions .icon-button { display: none; } main { padding: 0 14px 85px; }.page-heading { min-height: 150px; display: block; padding-top: 33px; }.page-heading h1 { font-size: 27px; }.heading-actions { margin-top: 22px; flex-wrap: wrap; }.summary-grid, .donut-grid, .analytics-summary { grid-template-columns: 1fr; }.balance-card { grid-column: auto; }.metric-card { min-height: 150px; }.analytics-metric { min-height: 115px; }.donut-content { grid-template-columns: 125px minmax(0, 1fr); gap: 16px; }.donut-chart { width: 125px; height: 125px; }.donut-chart::after { inset: 21px; }.content-grid { margin-top: 10px; }.right-column { display: flex; }.panel { padding: 20px 17px; }.panel-header { display: block; }.legend { margin-top: 12px; }.balance-meta { gap: 14px; flex-wrap: wrap; }.balance-visual { width: 50%; opacity: .65; }.monthly-chart { height: 220px; gap: 2px; padding-left: 0; padding-right: 0; }.monthly-bars { gap: 1px; }.monthly-bars i { width: 45%; }.monthly-table-wrap { overflow-x: auto; }.monthly-table { min-width: 520px; }.operation-toolbar { flex-direction: column; }.search-box { max-width: none; }.filter-group { justify-content: stretch; }.filter-group select, .date-filter, .category-filter { flex: 1 1 calc(50% - 4px); min-width: 0; }.date-filter input { width: 100%; min-width: 0; }.category-filter-options { left: 0; right: auto; width: min(280px, calc(100vw - 62px)); }.filtered-summary { gap: 9px 15px; }.full-transaction-list .transaction { grid-template-columns: auto 1fr auto auto; }.transaction-date { display: none; }.edit-transaction, .delete-transaction { opacity: 1; }.profile-category-grid { grid-template-columns: 1fr; }.assistant-layout { padding: 32px 0; }.assistant-intro h1 { font-size: 34px; }.chat-card { height: 65vh; min-height: 470px; border-radius: 18px; }.message { max-width: 90%; }.field-row { grid-template-columns: 1fr; }
}