:root {
  --bg: #f3f5f4;
  --surface: #ffffff;
  --surface-soft: #f7f8f7;
  --ink: #18201e;
  --muted: #707976;
  --line: #e6eae8;
  --accent: #3659d9;
  --accent-soft: #edf1ff;
  --success: #1f9d6c;
  --success-soft: #eaf8f2;
  --warning: #de7b35;
  --warning-soft: #fff3e9;
  --danger: #d55454;
  --nav: #151b1a;
  --nav-muted: #88918e;
  --radius: 18px;
  --shadow: 0 10px 35px rgba(20, 30, 27, 0.06);
}

* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
body { margin: 0; min-height: 100vh; font-size: 14px; }
button, input, select { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 16px; background: var(--nav); color: #fff; display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 27px; }
.brand-mark { width: 37px; height: 37px; border-radius: 12px; display: grid; place-items: center; color: #111817; background: #b9f36b; font-size: 19px; font-weight: 800; transform: rotate(-4deg); }
.brand strong, .brand span { display: block; }
.brand strong { letter-spacing: -.3px; }
.brand span { margin-top: 2px; color: var(--nav-muted); font-size: 11px; }
.new-operation { width: 100%; border: 0; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 8px; background: #b9f36b; color: #121817; font-weight: 700; cursor: pointer; }
.new-operation > span { font-size: 20px; line-height: 1; }
.new-operation kbd { margin-left: auto; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.1); font-size: 10px; }
.main-nav { margin-top: 22px; display: grid; gap: 4px; }
.nav-item { width: 100%; height: 43px; padding: 0 12px; border: 0; border-radius: 10px; color: #aab1af; background: transparent; display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer; transition: .18s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-item.active { color: #fff; background: rgba(255,255,255,.09); font-weight: 700; }
.nav-item svg { width: 19px; height: 19px; }
.sidebar-footer { margin-top: auto; }
.sync-state { margin: 0 5px 12px; padding: 13px 11px; border-radius: 12px; background: rgba(255,255,255,.045); display: flex; align-items: center; gap: 9px; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: #72d59c; box-shadow: 0 0 0 4px rgba(114,213,156,.11); }
.sync-state strong, .sync-state span { display: block; }
.sync-state strong { font-size: 11px; }
.sync-state span { margin-top: 2px; color: var(--nav-muted); font-size: 9px; }
.workspace { min-width: 0; }
.topbar { height: 72px; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(243,245,244,.92); backdrop-filter: blur(16px); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 15; }
.breadcrumbs { display: flex; align-items: center; gap: 10px; }
.breadcrumbs span, .breadcrumbs b { color: #98a09d; font-weight: 500; }
.period-switch { height: 38px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.period-switch button { width: 34px; height: 100%; border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 19px; }
.period-switch span { min-width: 115px; text-align: center; font-size: 12px; font-weight: 700; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.icon-button, .profile-button, .menu-button { border: 0; cursor: pointer; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 11px; display: grid; place-items: center; background: #fff; position: relative; }
.icon-button svg { width: 18px; }
.icon-button i { position: absolute; top: 8px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: #ea6a52; border: 1px solid white; }
.profile-button { width: 38px; height: 38px; border-radius: 12px; background: #dfe4e1; font-size: 11px; font-weight: 800; }
.menu-button { display: none; background: transparent; font-size: 20px; }
.content { padding: 30px 34px 52px; max-width: 1540px; margin: 0 auto; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-heading h1 { margin: 0 0 5px; font-size: 28px; letter-spacing: -.8px; }
.page-heading p { margin: 0; color: var(--muted); }
.heading-actions { display: flex; gap: 9px; }
.primary-button, .secondary-button { border-radius: 11px; padding: 10px 15px; cursor: pointer; font-weight: 700; }
.primary-button { border: 1px solid var(--ink); background: var(--ink); color: white; }
.secondary-button { border: 1px solid var(--line); background: white; color: var(--ink); }
.status-banner { margin-bottom: 18px; padding: 12px 15px; border: 1px solid #f2d8bd; border-radius: 13px; background: var(--warning-soft); display: flex; align-items: center; gap: 10px; color: #755030; }
.status-banner span:first-child { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #f7dcc3; font-weight: 800; }
.status-banner strong { color: #633d20; }
.status-banner button { margin-left: auto; border: 0; background: transparent; color: #9b5c2d; font-weight: 700; cursor: pointer; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.metric-card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.metric-card { min-height: 144px; padding: 18px; position: relative; overflow: hidden; }
.metric-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.metric-label .mini-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-soft); color: var(--ink); }
.metric-value { margin-top: 15px; font-size: clamp(22px, 2vw, 29px); letter-spacing: -1px; font-weight: 800; white-space: nowrap; }
.metric-foot { margin-top: 8px; color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 5px; }
.trend { padding: 3px 6px; border-radius: 6px; color: var(--success); background: var(--success-soft); font-weight: 800; }
.trend.down { color: var(--danger); background: #fff0f0; }
.metric-spark { position: absolute; right: -6px; bottom: -5px; width: 115px; height: 54px; opacity: .18; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr); gap: 14px; margin-bottom: 14px; }
.dashboard-grid.equal { grid-template-columns: repeat(2, minmax(0,1fr)); }
.panel { padding: 20px; min-width: 0; }
.panel-head { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-head h2 { margin: 0; font-size: 16px; letter-spacing: -.3px; }
.panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.text-button { padding: 0; border: 0; background: none; color: var(--accent); font-size: 11px; font-weight: 700; cursor: pointer; }
.segmented { display: flex; padding: 3px; border-radius: 9px; background: var(--surface-soft); }
.segmented button { padding: 5px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.segmented button.active { background: white; color: var(--ink); box-shadow: 0 2px 7px rgba(0,0,0,.06); font-weight: 700; }
.chart-wrap { height: 220px; position: relative; }
.chart-wrap.large { height: 310px; }
.line-chart { width: 100%; height: 100%; overflow: visible; }
.chart-gridline { stroke: #edf0ee; stroke-width: 1; }
.chart-area { fill: url(#areaGradient); }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { fill: #fff; stroke: var(--accent); stroke-width: 3; }
.chart-label { fill: #919a97; font-size: 10px; font-family: Inter, ui-sans-serif, sans-serif; }
.chart-tooltip { position: absolute; padding: 7px 9px; border-radius: 8px; background: var(--ink); color: white; font-size: 10px; pointer-events: none; transform: translate(-50%, -115%); white-space: nowrap; opacity: 0; transition: opacity .15s; z-index: 2; }
.chart-hit { fill: transparent; cursor: crosshair; }
.donut-layout { display: grid; grid-template-columns: 146px minmax(0, 1fr); align-items: center; gap: 18px; }
.donut { width: 142px; height: 142px; border-radius: 50%; position: relative; }
.donut::after { content: ""; position: absolute; inset: 24px; border-radius: 50%; background: white; }
.donut-center { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; text-align: center; }
.donut-center strong { font-size: 18px; }
.donut-center span { color: var(--muted); font-size: 9px; }
.legend { display: grid; gap: 10px; }
.legend-row { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; font-size: 11px; }
.legend-row i { width: 8px; height: 8px; border-radius: 3px; }
.legend-row span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-row strong { font-size: 10px; }
.budget-periods { display: grid; gap: 13px; }
.budget-period { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.budget-period.current { border-color: #b7c4f4; background: #f4f6ff; }
.budget-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.budget-row strong { font-size: 12px; }
.progress { margin-top: 9px; height: 6px; border-radius: 999px; background: #e7ebe9; overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.progress.over span { background: var(--danger); }
.transaction-list { display: grid; gap: 3px; }
.transaction-row { min-width: 0; min-height: 48px; padding: 7px 8px; border: 1px solid transparent; border-radius: 10px; display: grid; grid-template-columns: 34px minmax(140px,1.5fr) minmax(90px,.65fr) minmax(68px,.5fr) auto 52px; align-items: center; gap: 9px; transition: background .14s,border-color .14s; }
.transaction-row:hover { background: #fafbfa; border-color: #edf0ee; }
.category-icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #eef1ef; color: #53605c; font-weight: 800; text-transform: uppercase; }
.category-icon.has-avatar { background-size: cover; background-position: center; color: transparent; }
.transaction-row.expense .category-icon { background: #fff0f0; color: #c84e55; }
.transaction-row.income .category-icon { background: #eaf8f1; color: #23865e; }
.transaction-row.transfer .category-icon { background: #eef0ef; color: #303836; }
.transaction-row.contribution .category-icon { background: #fff0f0; color: #c84e55; }
.transaction-main { min-width: 0; }
.transaction-main strong, .transaction-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transaction-main strong { font-size: 11px; font-weight: 750; }
.transaction-main span, .transaction-meta { margin-top: 2px; color: var(--muted); font-size: 8px; }
.transaction-meta { margin-top: 0; }
.transaction-meta small { display: block; margin-top: 2px; color: #9da5a2; font-size: 7px; }
.transaction-amount { min-width: 82px; padding: 6px 8px; border-radius: 8px; text-align: right; font-size: 11px; font-weight: 850; white-space: nowrap; }
.transaction-row.expense .transaction-amount { background: #fff1f1; color: #c84b53; }
.transaction-row.income .transaction-amount { background: #ebf9f2; color: #21855d; }
.transaction-row.transfer .transaction-amount { background: #f0f2f1; color: #202725; }
.transaction-row.contribution .transaction-amount { background: #fff1f1; color: #c84b53; }
.transaction-badge { display: inline-flex; margin-left: 6px; padding: 1px 5px; border-radius: 999px; background: #eef0ef; color: #5c6662; font-size: 7px; font-weight: 800; vertical-align: 1px; }
.transaction-badge.contribution { background: #fff0f0; color: #bf424b; }
.transaction-badge.income { background: #eaf8f1; color: #23865e; }
.transaction-actions { display: flex; justify-content: flex-end; gap: 3px; opacity: .2; transition: opacity .14s; }
.transaction-row:hover .transaction-actions,.transaction-actions:focus-within { opacity: 1; }
.transaction-actions button { width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--muted); cursor: pointer; font-size: 11px; }
.transaction-actions button:hover { color: var(--ink); border-color: #cbd2cf; }
.transaction-actions button:last-child:hover { color: var(--danger); border-color: #efc6c6; background: #fff4f4; }
.table-toolbar { margin-bottom: 14px; display: flex; gap: 9px; flex-wrap: wrap; }
.search-field { min-width: 240px; flex: 1; position: relative; }
.search-field input, .filter-select { width: 100%; height: 39px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); outline: none; }
.search-field input { padding: 0 13px 0 37px; }
.search-field svg { position: absolute; top: 10px; left: 12px; width: 17px; color: var(--muted); }
.filter-select { width: auto; min-width: 145px; padding: 0 11px; }
.feed-summary { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }
.feed-summary strong { color: var(--ink); }
.feed-mode-bar { margin-bottom: 12px; padding: 11px 13px; border: 1px solid #dce3fb; border-radius: 13px; background: linear-gradient(135deg,#f8f9ff,#fff); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feed-mode-bar strong,.feed-mode-bar span { display: block; }
.feed-mode-bar strong { font-size: 11px; }
.feed-mode-bar span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.pagination { padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: center; gap: 7px; }
.pagination button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 9px; background: white; cursor: pointer; }
.pagination button.active { border-color: var(--ink); background: var(--ink); color: white; }
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 14px; }
.mini-stat { padding: 16px; border-radius: 14px; background: var(--surface-soft); }
.mini-stat span, .mini-stat strong { display: block; }
.mini-stat span { color: var(--muted); font-size: 10px; }
.mini-stat strong { margin-top: 6px; font-size: 19px; }
.bars { height: 280px; padding-top: 12px; display: flex; align-items: stretch; gap: 10px; }
.bar-item { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.bar { width: min(30px, 72%); min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--accent); transition: .25s; }
.bar.draft { background: repeating-linear-gradient(135deg,#9babeb,#9babeb 4px,#c7cff5 4px,#c7cff5 8px); }
.bar-label { color: var(--muted); font-size: 9px; white-space: nowrap; }
.bar-value { font-size: 8px; font-weight: 700; transform: rotate(-45deg); margin-bottom: 8px; white-space: nowrap; }
.accounts-list { display: grid; gap: 8px; }
.account-row { padding: 13px; border: 1px solid var(--line); border-radius: 13px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 11px; }
.account-logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.account-row strong, .account-row span { display: block; }
.account-row span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.account-value { text-align: right; font-size: 12px; }
.goal-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.goal-card { padding: 17px; border: 1px solid var(--line); border-radius: 15px; }
.goal-head { display: flex; justify-content: space-between; gap: 10px; }
.goal-head span { color: var(--muted); font-size: 10px; }
.goal-card h3 { margin: 10px 0 5px; font-size: 14px; }
.goal-card p { margin: 0; color: var(--muted); font-size: 10px; }
.goal-card .progress { margin-top: 14px; }
.definition-grid { display: grid; gap: 10px; }
.definition-row { padding: 14px; border-radius: 13px; background: var(--surface-soft); display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 11px; }
.definition-row b { width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; background: white; }
.definition-row strong, .definition-row span { display: block; }
.definition-row span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.definition-row em { font-style: normal; font-weight: 800; font-size: 12px; }
.empty-state { padding: 60px 20px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; color: var(--ink); font-size: 18px; margin-bottom: 6px; }
.flow-summary { margin-bottom: 14px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.flow-summary > div { padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.72); }
.flow-summary span, .flow-summary strong { display: block; }
.flow-summary span { color: var(--muted); font-size: 9px; }
.flow-summary strong { margin-top: 5px; font-size: 16px; }
.flow-summary small { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; }
.summary-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.summary-line span { display: block; }
.summary-line button { padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 8px; font-weight: 800; }
.outflow-numbers { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.outflow-numbers em { color: var(--accent); font-size: 12px; font-style: normal; font-weight: 850; }
.outflow-progress { height: 6px; margin-top: 8px; border-radius: 999px; background: #e8ecea; overflow: hidden; }
.outflow-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#24a373,#ef9d3f 70%,#df5d5d); transition: width .25s; }
.actionable-summary { cursor: pointer; transition: border-color .16s, box-shadow .16s, transform .16s; }
.actionable-summary:hover,.actionable-summary:focus-visible { border-color: #aebcf1; box-shadow: 0 8px 24px rgba(54,89,217,.1); transform: translateY(-1px); outline: none; }
.allocation-toolbar { margin-bottom: 14px; padding: 13px 15px; border: 1px solid #dce3fb; border-radius: 14px; background: linear-gradient(135deg,#f8f9ff,#fff); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.allocation-toolbar > div:first-child strong,.allocation-toolbar > div:first-child span { display: block; }
.allocation-toolbar > div:first-child strong { font-size: 12px; }
.allocation-toolbar > div:first-child span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.allocation-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.allocation-mode button { min-width: 64px; padding: 8px 12px; }
.allocation-actions .secondary-button.active { border-color: #8ea2ed; background: var(--accent-soft); color: var(--accent); }
.circle-board { padding: 0; overflow: hidden; }
.circle-section { padding: 22px 22px 20px; border-top: 1px solid var(--line); }
.circle-section:first-child { border-top: 0; }
.circle-section-head { margin-bottom: 17px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.circle-section-head h2 { margin: 0; font-size: 14px; }
.circle-section-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.circle-section-head .section-chip { padding: 5px 8px; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 9px; font-weight: 700; white-space: nowrap; }
.circle-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(118px,1fr)); gap: 20px 12px; }
.circle-grid.compact { grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); }
.money-node { min-width: 0; padding: 0; border: 0; background: none; display: grid; justify-items: center; align-content: start; cursor: grab; touch-action: none; user-select: none; position: relative; }
.money-node:active { cursor: grabbing; }
.money-node.dragging { opacity: .38; }
.money-node.selected .node-circle { box-shadow: 0 0 0 5px rgba(54,89,217,.13), 0 12px 28px rgba(30,45,40,.12); transform: translateY(-3px); }
.money-node.drop-ready .node-circle { box-shadow: 0 0 0 5px rgba(31,157,108,.14); transform: scale(1.04); }
.money-node.drop-hover .node-circle { box-shadow: 0 0 0 7px rgba(31,157,108,.22); transform: scale(1.08); }
.money-node.order-editing { cursor: move; }
.money-node.order-editing .node-circle { animation: order-wiggle 1.5s ease-in-out infinite alternate; }
.money-node.reorder-ready .node-circle { box-shadow: 0 0 0 4px rgba(54,89,217,.11); }
.money-node.reorder-hover .node-circle { box-shadow: 0 0 0 7px rgba(54,89,217,.23); transform: scale(1.07); }
.node-order-handle { position: absolute; z-index: 5; top: 32px; left: calc(50% - 50px); width: 24px; height: 24px; border: 1px solid #cfd8fa; border-radius: 8px; background: rgba(255,255,255,.94); color: var(--accent); display: grid; place-items: center; font-size: 13px; font-weight: 800; box-shadow: 0 4px 12px rgba(54,89,217,.12); }
.money-node.excluded { opacity: .62; }
.money-node.excluded .node-circle.category { background: repeating-linear-gradient(135deg,#fff,#fff 8px,#f2f4f3 8px,#f2f4f3 16px); border-style: dashed; }
@keyframes order-wiggle { from { transform: rotate(-.7deg); } to { transform: rotate(.7deg); } }
.node-percent { height: 22px; margin-bottom: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--muted); font-size: 9px; font-weight: 800; line-height: 12px; }
.node-percent.low { color: #16855b; border-color: #b9e4d3; background: #edfaf5; }
.node-percent.medium { color: #ad681f; border-color: #f0d3a7; background: #fff8e9; }
.node-percent.high { color: #bd4949; border-color: #efb8b8; background: #fff1f1; }
.node-percent.transfer { color: #7653b7; border-color: #d8caef; background: #f7f2ff; }
.node-circle { width: 104px; height: 104px; border-radius: 50%; border: 1px solid rgba(20,30,27,.08); display: grid; place-items: center; color: white; position: relative; transition: transform .18s, box-shadow .18s; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 20px rgba(30,45,40,.07); }
.node-circle::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; }
.node-circle svg { width: 38px; height: 38px; position: relative; z-index: 2; }
.node-circle.category svg { transform: translateY(-9px); }
.node-circle-total { position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 21px; overflow: hidden; color: inherit; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 850; }
.node-circle.income { background: linear-gradient(145deg,#2a79e8,#2557c8); }
.node-circle.account { background: linear-gradient(145deg,#ffd95d,#f2b927); color: #704f00; }
.node-circle.account::after { border-color: rgba(255,255,255,.45); }
.node-circle.category { color: #4d5955; background: linear-gradient(to top,var(--fill-color) 0 var(--fill),#fff var(--fill) 100%); border-color: #dfe5e2; }
.node-circle.category.filled { color: white; }
.node-circle.category::after { border-color: rgba(90,105,99,.11); }
.node-label { width: 100%; margin-top: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 800; }
.node-value { margin-top: 3px; color: var(--muted); font-size: 9px; }
.money-node[data-node-type="account"] .node-value { margin-top: 5px; color: var(--ink); font-size: 13px; font-weight: 850; }
.money-node[data-node-type="category"] .node-value { display: flex; justify-content: center; margin-top: 7px; color: var(--ink); font-size: 12px; }
.category-budget-value { display: inline-flex; align-items: baseline; gap: 4px; min-height: 25px; padding: 5px 9px; border: 1px solid #e1e7e4; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px rgba(28,45,38,.07); white-space: nowrap; letter-spacing: -.01em; }
.category-budget-value b { font-size: 12px; font-weight: 850; }
.category-budget-value small { color: var(--muted); font-size: 10px; font-weight: 650; }
.category-budget-excluded { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: #f1f3f2; color: var(--muted); font-size: 10px; font-weight: 750; }
.category-budget-fields { display: none; }
.current-period-badge { display: inline-flex; margin-left: 8px; padding: 3px 7px; border-radius: 999px; background: #e9f1ff; color: var(--primary); font-size: 8px; font-weight: 800; vertical-align: middle; }
.income-table td:nth-child(n+2), .income-table th:nth-child(n+2) { text-align: right; }
.income-table { min-width: 760px; }
.field-hint { display: block; min-height: 14px; margin-top: 5px; color: var(--primary); font-size: 9px; font-weight: 650; }
.passive-metrics .metric-card:last-child strong { font-size: 18px; }
.fund-income-note { margin-bottom: 14px; padding: 13px 16px; border-color: #dce4ff; background: linear-gradient(135deg,#f4f7ff,#fff); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.fund-income-note div { flex: 0 0 auto; }
.fund-income-note span,.fund-income-note strong { display: block; }
.fund-income-note span { color: var(--muted); font-size: 9px; }
.fund-income-note strong { margin-top: 3px; color: var(--accent); font-size: 16px; }
.fund-income-note p { max-width: 720px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.fund-income-note a { color: var(--accent); font-weight: 800; text-decoration: none; white-space: nowrap; }
.passive-growth-grid { display: grid; gap: 8px; }
.passive-growth-card { display: grid; grid-template-columns: minmax(100px,1fr) auto 58px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.passive-growth-card span { color: var(--muted); font-size: 9px; }
.passive-growth-card strong { font-size: 11px; }
.passive-growth-card em { padding: 4px 6px; border-radius: 7px; background: white; color: var(--muted); text-align: center; font-size: 9px; font-style: normal; font-weight: 800; }
.passive-growth-card em.positive { background: #eaf8f1; color: var(--success); }
.passive-growth-card em.negative { background: #fff0f1; color: var(--danger); }
.passive-assets-table { min-width: 850px; }
.passive-account-list { display: grid; gap: 10px; }
.passive-account-block { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.passive-account-block > summary { position: relative; padding: 13px 15px; background: linear-gradient(180deg,#fafbfb,#f5f7f6); display: grid; grid-template-columns: minmax(170px,.8fr) minmax(430px,1.8fr); align-items: center; gap: 18px; cursor: pointer; list-style: none; }
.passive-account-block > summary::-webkit-details-marker { display: none; }
.passive-account-block > summary::after { content: "⌄"; position: absolute; right: 15px; color: var(--muted); font-size: 13px; transition: transform .16s; }
.passive-account-block[open] > summary::after { transform: rotate(180deg); }
.passive-account-title { display: flex; align-items: center; gap: 10px; }
.passive-account-title > span { width: 35px; height: 35px; border-radius: 11px; background: linear-gradient(145deg,#ffd95d,#f2b927); color: #704f00; display: grid; place-items: center; font-size: 12px; font-weight: 900; }
.passive-account-title strong,.passive-account-title small { display: block; }
.passive-account-title strong { font-size: 12px; }
.passive-account-title small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.passive-account-summary { padding-right: 24px; display: grid; grid-template-columns: repeat(3,minmax(90px,1fr)) minmax(140px,1.15fr); align-items: center; gap: 10px; }
.passive-account-summary span small,.passive-account-summary span strong { display: block; }
.passive-account-summary span small { color: var(--muted); font-size: 8px; }
.passive-account-summary span strong { margin-top: 3px; font-size: 10px; }
.passive-account-summary em { padding: 6px 8px; border-radius: 9px; font-size: 8px; font-style: normal; font-weight: 800; text-align: center; }
.passive-account-summary em.ok { background: #eaf8f1; color: var(--success); }
.passive-account-summary em.warning { background: #fff5e7; color: #a96b12; }
.passive-account-block .capital-table-wrap { border-top: 1px solid var(--line); }
.asset-name-cell { display: flex; align-items: center; gap: 9px; }
.asset-name-cell > span { width: 31px; height: 31px; border-radius: 10px; background: linear-gradient(145deg,#edf2ff,#dde6ff); color: var(--primary); display: grid; place-items: center; font-size: 11px; font-weight: 850; }
.asset-name-cell strong,.asset-name-cell small,.table-subvalue,.asset-period,.asset-status { display: block; }
.asset-name-cell small,.table-subvalue,.asset-period { margin-top: 3px; color: var(--muted); font-size: 8px; }
.asset-status { width: max-content; margin-top: 5px; padding: 3px 6px; border-radius: 999px; background: #eaf8f1; color: var(--success); font-size: 8px; font-weight: 800; }
.asset-status.upcoming { background: #eef2ff; color: var(--primary); }
.asset-status.expired,.asset-status.archived { background: #f1f2f2; color: var(--muted); }
.passive-asset-row.expired,.passive-asset-row.archived { opacity: .62; }
.snowball-note { margin-top: 13px; padding: 13px 15px; border: 1px solid #dce4ff; border-radius: 13px; background: linear-gradient(135deg,#f5f7ff,#fff); }
.snowball-note b,.snowball-note span { display: block; }
.snowball-note b { color: #3152ba; font-size: 10px; }
.snowball-note span { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.snowball-note.connected { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-color: #cfeadd; background: linear-gradient(135deg,#f0fbf6,#fff); }
.snowball-note.connected b { color: var(--success); }
.snowball-note.connected a { flex: 0 0 auto; padding: 8px 11px; border-radius: 9px; background: #fff; color: #3152ba; box-shadow: inset 0 0 0 1px #dce4ff; font-size: 9px; font-weight: 800; text-decoration: none; }
.snowball-note.debank-note { border-color: #dfd5ff; background: linear-gradient(135deg,#f7f3ff,#fff); }
.snowball-note.debank-note b { color: #7150ba; }
.snowball-connections { display: grid; gap: 9px; }
.asset-metrics .metric-card strong { font-size: 22px; }
.asset-method-panel { margin-bottom: 14px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(135deg,#18201e,#28332f); color: #fff; }
.asset-method-panel > div:first-child strong,.asset-method-panel > div:first-child span { display: block; }
.asset-method-panel > div:first-child strong { font-size: 14px; }
.asset-method-panel > div:first-child span { max-width: 720px; margin-top: 5px; color: #b7c0bd; font-size: 12px; line-height: 1.45; }
.rating-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.rating-legend span { padding: 6px 8px; border-radius: 8px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.rating-legend .safe { background: #dff7ea; color: #137550; }
.rating-legend .watch { background: #fff2cf; color: #946012; }
.rating-legend .elevated { background: #ffe4cf; color: #ad5520; }
.rating-legend .danger { background: #ffe0e0; color: #a83232; }
.asset-table-panel { padding: 0; overflow: hidden; }
.asset-toolbar { padding: 16px 18px 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.asset-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.asset-filters button { min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 750; }
.asset-filters button.active { border-color: #aebcf1; background: var(--accent-soft); color: var(--accent); }
.asset-toolbar-right { display: flex; align-items: center; gap: 8px; }
.asset-toolbar-right input { width: 230px; height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); font-size: 12px; outline: none; }
.asset-toolbar-right input:focus { border-color: #9eb0ed; box-shadow: 0 0 0 3px rgba(54,89,217,.08); }
.asset-toolbar-right .secondary-button { min-height: 36px; white-space: nowrap; }
.asset-toolbar-right .secondary-button.loading { opacity: .65; cursor: wait; }
.asset-update-line { margin: 0 18px 12px; padding: 9px 11px; border-radius: 10px; background: #f2f5f4; color: var(--ink); display: flex; align-items: center; gap: 8px; font-size: 12px; }
.asset-update-line .sync-dot { flex: 0 0 auto; }
.asset-update-line small { margin-left: auto; color: var(--muted); font-size: 11px; }
.asset-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.asset-analysis-table { width: 100%; min-width: 980px; border-collapse: collapse; table-layout: fixed; }
.asset-analysis-table .asset-col-name { width: 17%; }
.asset-analysis-table .asset-col-account { width: 9%; }
.asset-analysis-table .asset-col-value { width: 12%; }
.asset-analysis-table .asset-col-weight { width: 7%; }
.asset-analysis-table .asset-col-income { width: 16%; }
.asset-analysis-table .asset-col-maturity { width: 8%; }
.asset-analysis-table .asset-col-fo { width: 6%; }
.asset-analysis-table .asset-col-trend { width: 8%; }
.asset-analysis-table .asset-col-external { width: 10%; }
.asset-analysis-table .asset-col-risk { width: 7%; }
.asset-analysis-table th { position: sticky; top: 0; z-index: 2; padding: 0; background: #f7f9f8; border-bottom: 1px solid var(--line); text-align: left; }
.asset-analysis-table td { height: 58px; padding: 7px 6px; border-bottom: 1px solid #edf0ee; vertical-align: middle; font-size: 11px; overflow-wrap: anywhere; }
.asset-analysis-table tbody tr:hover { background: #fafcff; }
.asset-analysis-table tr.expired { opacity: .58; }
.asset-analysis-table td > strong,.asset-analysis-table td > small { display: block; }
.asset-analysis-table td > strong { font-size: 11px; line-height: 1.25; }
.asset-analysis-table td > small { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.2; }
.asset-analysis-table td > small.live-estimate { color: var(--success); font-weight: 800; }
.asset-sort-button { width: 100%; min-height: 38px; padding: 0 6px; border: 0; background: transparent; color: #5f6966; display: flex; align-items: center; justify-content: space-between; gap: 3px; cursor: pointer; text-align: left; font-size: 9px; font-weight: 850; white-space: nowrap; }
.asset-sort-button:hover,.asset-sort-button.active { color: var(--accent); background: #f0f3ff; }
.asset-sort-button span { color: #98a19e; }
.asset-table-name { min-width: 0; display: flex; align-items: center; gap: 7px; }
.asset-table-name > span { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; background: linear-gradient(145deg,#edf2ff,#dce5ff); color: var(--accent); display: grid; place-items: center; font-size: 11px; font-weight: 900; }
.asset-table-name > div { min-width: 0; }
.asset-table-name strong,.asset-table-name small { display: block; }
.asset-table-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 1.25; }
.asset-table-name small { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 8px; }
.asset-table-name div > div { margin-top: 3px; }
.asset-inline-sources { display: flex; flex-wrap: wrap; gap: 3px; }
.asset-yield-stack { min-width: 0; display: flex; flex-wrap: wrap; gap: 3px; }
.asset-yield-stack span { width: max-content; max-width: 100%; padding: 2px 4px; border-radius: 5px; background: #f2f4f3; color: #55605c; font-size: 8px; font-weight: 750; }
.asset-yield-stack span.positive { background: var(--success-soft); color: var(--success); }
.asset-yield-stack span.negative { background: #fff0f1; color: var(--danger); }
.asset-income-cell { display: grid; gap: 3px; }
.asset-income-cell > strong { font-size: 9px; }
.asset-income-cell > small { color: var(--muted); font-size: 8px; }
.asset-rating { width: 45px; padding: 5px 3px; border-radius: 8px; display: grid; place-items: center; text-align: center; cursor: help; }
.asset-rating b,.asset-rating em { display: block; }
.asset-rating b { font-size: 14px; }
.asset-rating em { margin-top: 1px; font-size: 8px; font-style: normal; font-weight: 800; opacity: .8; }
.asset-rating.safe,.risk-pill.safe { background: #e5f8ee; color: #167c56; }
.asset-rating.watch,.risk-pill.watch { background: #fff3d7; color: #976318; }
.asset-rating.elevated,.risk-pill.elevated { background: #ffead9; color: #ad5b25; }
.asset-rating.danger,.risk-pill.danger { background: #ffe2e2; color: #aa3636; }
.risk-pill { width: max-content; max-width: 100%; padding: 4px 5px; border-radius: 7px; display: inline-block; font-size: 8px; font-weight: 800; text-align: center; cursor: help; }
.risk-pill.neutral { background: #eef1f0; color: #68726f; }
.asset-risk-stack { display: grid; gap: 3px; justify-items: start; }
.asset-risk-stack small { color: var(--muted); font-size: 7px; line-height: 1.15; }
.asset-source { width: max-content; padding: 2px 4px; border-radius: 5px; background: #eef1f0; color: #68726f; display: inline-block; font-size: 7px; font-weight: 800; }
.asset-source.snowball { background: #e8f7ef; color: #1d825d; }
.asset-source.debank { background: #f1eaff; color: #7150ba; }
.asset-source.moex { background: #e9f0ff; color: #315bc3; }
.asset-source.model { background: #fff0dc; color: #a46517; }
.asset-source.agency { background: #fff3d7; color: #8f641d; }
.asset-weight { display: grid; gap: 4px; }
.asset-weight strong { font-size: 10px; white-space: nowrap; }
.asset-weight i { width: 100%; height: 4px; border-radius: 999px; background: linear-gradient(90deg,var(--accent) var(--asset-weight),#e9edeb var(--asset-weight)); }
.asset-weight.negative { color: var(--danger); }
.rating-trend { width: max-content; max-width: 100%; display: grid; grid-template-columns: 14px 1fr; align-items: center; gap: 0 3px; padding: 4px 5px; border-radius: 7px; }
.rating-trend b { grid-row: 1 / 3; font-size: 15px; line-height: 1; }
.rating-trend strong { font-size: 9px; white-space: nowrap; }
.rating-trend small { font-size: 7px; font-weight: 800; }
.rating-trend.up { background: #e5f8ee; color: #167c56; }
.rating-trend.down { background: #ffe2e2; color: #aa3636; }
.rating-trend.flat { background: #eef1f0; color: #68726f; }
.external-rating-stack { display: flex; flex-wrap: wrap; gap: 3px; }
.external-rating,.broker-rating { max-width: 100%; padding: 3px 4px; border-radius: 6px; color: inherit; display: grid; grid-template-columns: 1fr; align-items: center; gap: 1px; text-decoration: none; line-height: 1.05; }
.external-rating b,.broker-rating b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7px; font-weight: 850; }
.external-rating strong,.broker-rating strong { overflow: hidden; text-overflow: ellipsis; font-size: 7px; white-space: nowrap; }
.external-rating small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 6px; opacity: .8; }
.external-rating.safe { background: #e5f8ee; color: #167c56; }
.external-rating.watch { background: #fff3d7; color: #976318; }
.external-rating.elevated { background: #ffead9; color: #ad5b25; }
.external-rating.danger { background: #ffe2e2; color: #aa3636; }
.broker-rating { background: #eef1ff; color: #465eb7; }
.muted-cell { color: var(--muted); font-size: 8px; }
@media (max-width: 900px) {
  .asset-method-panel,.asset-toolbar { align-items: stretch; flex-direction: column; }
  .rating-legend { justify-content: flex-start; }
  .asset-toolbar-right { width: 100%; }
  .asset-toolbar-right input { min-width: 0; width: 100%; }
  .asset-update-line { align-items: flex-start; flex-wrap: wrap; }
  .asset-update-line small { width: 100%; margin-left: 16px; }
}
.suffix-input { position: relative; }
.suffix-input input { padding-right: 34px; }
.suffix-input b { position: absolute; top: 50%; right: 12px; color: var(--muted); transform: translateY(-50%); font-size: 11px; }
.field-caption { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.passive-income-preview { margin-top: 4px; padding: 13px 15px; border: 1px solid #dce4ff; border-radius: 13px; background: #f7f9ff; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.passive-income-preview span { color: var(--muted); font-size: 9px; }
.passive-income-preview strong { color: var(--primary); font-size: 17px; }
@media (max-width: 900px) {
  .fund-income-note { align-items: flex-start; flex-direction: column; gap: 8px; }
  .passive-account-block > summary { grid-template-columns: 1fr; gap: 10px; }
  .passive-account-summary { grid-template-columns: repeat(2,minmax(110px,1fr)); }
}
.drag-ghost { position: fixed; z-index: 100; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: white; pointer-events: none; transform: translate(-50%,-50%); box-shadow: 0 15px 45px rgba(0,0,0,.28); font-size: 11px; font-weight: 800; opacity: .92; }
.flow-hint { margin: 0 22px 18px; padding: 11px 13px; border-radius: 12px; background: #f1f4ff; color: #5b6a9c; font-size: 10px; display: flex; align-items: center; gap: 8px; }
.flow-hint b { color: #2d469c; }
.circle-board.editing .flow-hint { background: #eef1ff; color: #455baf; }
.category-archive { margin-top: 18px; padding-top: 13px; border-top: 1px dashed var(--line); }
.category-archive summary { width: max-content; color: var(--muted); font-size: 10px; font-weight: 700; cursor: pointer; }
.category-archive > div { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 7px; }
.category-archive span { padding: 6px 7px 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 9px; }
.category-archive button { margin-left: 7px; padding: 3px 6px; border: 0; border-radius: 6px; background: white; color: var(--accent); cursor: pointer; font-size: 8px; font-weight: 700; }
.flow-route { margin-bottom: 17px; display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; gap: 8px; }
.flow-route > span { text-align: center; color: var(--muted); font-size: 22px; }
.flow-classification { margin: -7px 0 16px; padding: 10px 12px; border: 1px solid #f1c9cc; border-radius: 11px; background: #fff5f5; color: #a83840; }
.flow-classification[hidden] { display: none; }
.flow-classification b,.flow-classification span { display: block; }
.flow-classification b { font-size: 11px; }
.flow-classification span { margin-top: 3px; font-size: 9px; line-height: 1.4; }
.route-node { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); text-align: center; }
.route-node strong, .route-node span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-node strong { font-size: 11px; }
.route-node span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.date-composer { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; gap: 7px; }
.date-composer button { padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--muted); cursor: pointer; font-size: 9px; font-weight: 700; }
.date-composer button.active { border-color: #8ea2ed; background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 2px rgba(54,89,217,.08); }
.place-combobox { position: relative; }
.place-search-shell { display: grid; grid-template-columns: minmax(0,1fr) 42px; gap: 7px; }
.place-search-shell > button { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--accent); cursor: pointer; font-size: 20px; }
.place-suggestions { position: absolute; z-index: 20; left: 0; right: 49px; top: calc(100% + 6px); max-height: 250px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: 0 16px 38px rgba(20,30,27,.16); }
.place-suggestions[hidden] { display: none; }
.place-suggestion { width: 100%; min-height: 46px; padding: 7px 9px; border: 0; border-radius: 9px; background: transparent; display: grid; grid-template-columns: 31px minmax(0,1fr) auto; align-items: center; gap: 9px; color: var(--ink); text-align: left; cursor: pointer; }
.place-suggestion:hover,.place-suggestion.active { background: var(--surface-soft); }
.place-suggestion-avatar { width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 800; background-position: center; background-size: cover; }
.place-suggestion-avatar.has-avatar { color: transparent; }
.place-suggestion strong,.place-suggestion small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-suggestion strong { font-size: 10px; }
.place-suggestion strong mark { padding: 0; background: #dfe6ff; color: var(--accent); border-radius: 2px; }
.place-suggestion small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.place-suggestion em { color: var(--muted); font-size: 8px; font-style: normal; }
.place-suggestion.create-place { grid-template-columns: 31px minmax(0,1fr); }
.place-suggestion.create-place .place-suggestion-avatar { background: #edf8e2; color: #4a7d20; font-size: 18px; }
.compact-modal { width: min(410px,100%); }
.places-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: 14px; }
.place-bars { display: grid; gap: 13px; }
.place-bar-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; font-size: 11px; }
.place-bar-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-bar-track { margin-top: 6px; height: 7px; border-radius: 999px; background: #edf0ee; overflow: hidden; }
.place-bar-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#3659d9,#6680e5); }
.place-list { display: grid; gap: 7px; max-height: 460px; overflow: auto; padding-right: 3px; }
.place-row { padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; display: grid; grid-template-columns: 31px minmax(0,1fr) auto auto; align-items: center; gap: 9px; }
.place-kind-icon { width: 31px; height: 31px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.place-kind-icon.has-avatar { color: transparent; background-position: center; background-size: cover; }
.place-row strong, .place-row span { display: block; }
.place-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.place-row span { margin-top: 2px; color: var(--muted); font-size: 8px; }
.place-row em { font-style: normal; color: var(--muted); font-size: 9px; }
.place-row-actions { display: flex; gap: 5px; }
.place-row-actions button { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--muted); cursor: pointer; }
.place-row-actions button:last-child { color: var(--danger); }
.place-empty { padding: 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; font-size: 10px; }
.context-menu { position: fixed; z-index: 120; min-width: 176px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 16px 45px rgba(15,24,21,.18); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s,transform .12s; }
.context-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.context-menu button { width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; font-size: 11px; }
.context-menu button:hover { background: var(--surface-soft); }
.context-menu .danger-menu-item { color: var(--danger); }
.danger-button { padding: 9px 12px; border: 1px solid #efc6c6; border-radius: 10px; background: #fff3f3; color: var(--danger); cursor: pointer; font-weight: 700; }
.split-actions { display: grid; grid-template-columns: auto 1fr auto auto; }
.account-row-actions { display: flex; gap: 5px; justify-content: flex-end; }
.account-row-actions button { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--muted); cursor: pointer; }
.scope-badge { display: inline-flex !important; width: max-content; padding: 3px 6px; border-radius: 6px; background: #eef1ff; color: var(--accent) !important; font-size: 8px !important; font-weight: 800; }
.scope-badge.shared { background: #fff4dc; color: #a86716 !important; }
.scope-badge.current { margin-left: 4px; background: #e9f1ff; color: #315abd !important; }
.scope-badge.current.off { background: #f1f2f2; color: #7a8380 !important; }
.scope-badge.capital { margin-left: 4px; background: #eaf8f1; color: #24734f !important; }
.scope-badge.capital.off { background: #f1f2f2; color: #7a8380 !important; }
.scope-concept { margin-bottom: 14px; padding: 19px; border: 1px solid #dce3fb; border-radius: var(--radius); background: linear-gradient(135deg,#f8f9ff,#fff); }
.scope-concept-head { margin-bottom: 15px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.scope-concept-head h2 { margin: 0; font-size: 16px; }
.scope-concept-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.savings-gauge { min-width: 82px; text-align: right; }
.savings-gauge strong { display: block; font-size: 23px; color: var(--success); }
.savings-gauge span { color: var(--muted); font-size: 8px; }
.scope-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.scope-card { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.scope-card span,.scope-card strong,.scope-card small { display: block; }
.scope-card span { color: var(--muted); font-size: 9px; }
.scope-card strong { margin-top: 5px; font-size: 15px; }
.scope-card small { margin-top: 3px; color: #9aa29f; font-size: 8px; line-height: 1.35; }
.scope-rule { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; line-height: 1.5; }
.scope-rule b { color: var(--ink); }
.capital-table-panel { margin-top: 14px; }
.capital-table-wrap { overflow-x: auto; }
.capital-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.capital-table th { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--muted); text-align: left; font-size: 9px; font-weight: 750; }
.capital-table td { padding: 11px 10px; border-bottom: 1px solid #edf0ee; font-size: 10px; white-space: nowrap; }
.capital-table tbody tr:last-child td { border-bottom: 0; }
.capital-table .positive { color: var(--success); font-weight: 750; }
.capital-table .negative { color: var(--danger); font-weight: 750; }
.table-action { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--accent); cursor: pointer; font-size: 8px; font-weight: 800; }
.form-note { margin: 9px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.date-group { overflow: hidden; padding: 8px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 5px 18px rgba(26,39,34,.035); }
.date-group + .date-group { margin-top: 10px; }
.date-divider { min-height: 43px; margin: -8px -8px 4px; padding: 7px 10px; border-bottom: 1px solid #e9eeeb; background: linear-gradient(180deg,#f8faf9,#f4f7f5); display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 9px; color: var(--muted); }
.date-marker { width: 30px; height: 30px; border-radius: 9px; background: white; color: var(--ink); display: grid; place-items: center; box-shadow: 0 2px 7px rgba(19,30,26,.07); font-size: 11px; font-weight: 850; }
.date-divider strong,.date-divider small { display: block; }
.date-divider strong { color: var(--ink); font-size: 10px; font-weight: 800; }
.date-divider small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.date-total { color: #c84b53; font-size: 10px; font-weight: 800; white-space: nowrap; }
.transaction-row.compact-date { grid-template-columns: 34px minmax(140px,1.5fr) minmax(90px,.7fr) auto 52px; }
.node-history-trigger { position: absolute; top: 19px; left: calc(50% - 55px); z-index: 4; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.92); color: var(--accent); display: grid; place-items: center; opacity: .72; transition: opacity .15s,transform .15s; font-size: 13px; font-weight: 800; }
.node-history-trigger:hover { opacity: 1; transform: translateY(-1px); }
.node-menu-trigger { position: absolute; top: 19px; right: calc(50% - 55px); z-index: 4; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.9); color: var(--muted); display: grid; place-items: center; opacity: 0; transition: opacity .15s; font-weight: 800; }
.money-node:hover .node-menu-trigger,.money-node:focus-visible .node-menu-trigger { opacity: 1; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; padding: 18px; background: rgba(13,20,18,.56); backdrop-filter: blur(5px); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: .2s; }
.modal-backdrop.open { opacity: 1; visibility: visible; }
.modal { width: min(540px,100%); max-height: 92vh; overflow: auto; padding: 23px; border-radius: 21px; background: white; box-shadow: 0 30px 90px rgba(0,0,0,.22); transform: translateY(8px); transition: .2s; }
.modal-backdrop.open .modal { transform: translateY(0); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 17px; }
.modal-head h2 { margin: 3px 0 0; font-size: 21px; }
.modal-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.history-modal { width: min(780px,100%); }
.history-modal #node-history-list { max-height: 68vh; overflow: auto; padding-right: 3px; }
.transaction-edit-modal { width: min(620px,100%); }
.transaction-edit-modal .form-grid { align-items: end; }
.exchange-panel { margin-top: 13px; padding: 13px; border: 1px solid #dce3fb; border-radius: 12px; background: #f7f9ff; }
.exchange-panel[hidden] { display: none; }
.exchange-panel > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.exchange-panel > div span { color: var(--muted); font-size: 10px; }
.exchange-panel > div strong { color: var(--accent); font-size: 17px; }
.exchange-panel label { margin-top: 10px; }
.exchange-panel > small { display: block; margin-top: 7px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.account-rub-equivalent { display: block; margin-top: 3px; color: var(--muted); text-align: right; font-size: 8px; }
.eyebrow { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.close-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: white; cursor: pointer; font-size: 21px; }
.type-tabs { padding: 4px; margin-bottom: 18px; border-radius: 11px; background: var(--surface-soft); display: grid; grid-template-columns: repeat(4,1fr); }
.type-tabs button { padding: 9px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; }
.type-tabs button.active { background: white; color: var(--ink); box-shadow: 0 3px 10px rgba(0,0,0,.06); }
form label { display: block; margin-top: 13px; }
form label > span { display: block; margin: 0 0 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
form input, form select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; outline: none; }
form input:focus, form select:focus { border-color: #9eade7; box-shadow: 0 0 0 3px #eff2ff; }
.check-field { padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check-field input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.check-field > span { margin: 0; color: var(--ink); }
.check-field b,.check-field small { display: block; }
.check-field b { font-size: 10px; }
.check-field small,.field-hint { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.category-destination-field { display: none; }
.category-kind-field > small { display: block; }
.amount-field { margin-top: 0; }
.amount-field div { height: 68px; padding: 0 16px; border: 1px solid var(--line); border-radius: 13px; display: flex; align-items: center; }
.amount-field input { height: auto; padding: 0; border: 0; font-size: 32px; font-weight: 800; letter-spacing: -1px; }
.amount-field input:focus { box-shadow: none; }
.amount-field input::-webkit-outer-spin-button,
.amount-field input::-webkit-inner-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.amount-field input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.amount-field b { font-size: 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.modal-actions { margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 9px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 70; padding: 13px 16px; border-radius: 14px; background: var(--ink); color: white; display: flex; align-items: center; gap: 11px; box-shadow: 0 15px 50px rgba(0,0,0,.2); transform: translateY(90px); opacity: 0; transition: .25s; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast > span { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; background: var(--success); }
.toast strong, .toast small { display: block; }
.toast small { margin-top: 2px; color: #aeb7b4; font-size: 9px; }
.mobile-nav { display: none; }

.savings-toolbar { margin: -2px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.savings-toolbar label { margin: 0; min-width: 210px; }
.savings-toolbar label span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 13px; font-weight: 700; }
.savings-toolbar select { height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-weight: 750; }
.savings-rate-value.success,.savings-trend-row strong.success,.savings-table-rate strong.success { color: var(--success); }
.savings-rate-value.warning,.savings-trend-row strong.warning,.savings-table-rate strong.warning { color: #c98219; }
.savings-rate-value.danger,.savings-trend-row strong.danger,.savings-table-rate strong.danger { color: var(--danger); }
.savings-rate-value.neutral,.savings-trend-row strong.neutral,.savings-table-rate strong.neutral { color: var(--muted); }
.savings-rule-card { margin-bottom: 14px; padding: 17px 19px; border-radius: 16px; background: linear-gradient(120deg,#17201e,#26322f); color: #fff; box-shadow: 0 13px 32px rgba(23,32,30,.12); }
.savings-formula { display: grid; grid-template-columns: auto auto 20px auto auto 20px auto auto; align-items: center; gap: 8px; }
.savings-formula span { color: #aebbb7; font-size: 13px; }
.savings-formula b { font-size: 15px; white-space: nowrap; }
.savings-formula i { color: #b9f36b; font-size: 18px; font-style: normal; text-align: center; }
.savings-rule-card p { margin: 9px 0 0; color: #aebbb7; font-size: 13px; line-height: 1.45; }
.savings-dashboard { align-items: stretch; }
.savings-trend { display: grid; gap: 11px; }
.savings-trend-row { display: grid; grid-template-columns: 48px minmax(130px,1fr) 66px; align-items: center; gap: 10px; }
.savings-trend-row > span { color: var(--muted); font-size: 13px; }
.savings-trend-row > strong { text-align: right; font-size: 13px; }
.savings-trend-track { position: relative; height: 9px; border-radius: 999px; background: #edf0ee; overflow: visible; }
.savings-trend-track > b { position: absolute; inset: 0 auto 0 0; min-width: 2px; border-radius: inherit; background: var(--muted); }
.savings-trend-track > b.success { background: linear-gradient(90deg,#3cb47d,#62c997); }
.savings-trend-track > b.warning { background: linear-gradient(90deg,#e6ab43,#f0c063); }
.savings-trend-track > b.danger { background: linear-gradient(90deg,#df6870,#ef8a90); }
.savings-trend-track > i { position: absolute; z-index: 2; top: -3px; bottom: -3px; width: 1px; background: rgba(31,42,39,.28); }
.savings-trend-track > i.minimum { left: 30%; }
.savings-trend-track > i.target { left: 50%; background: rgba(31,42,39,.55); }
.savings-entry-list { display: grid; gap: 8px; }
.savings-entry-row { min-height: 56px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto 62px; align-items: center; gap: 10px; }
.savings-entry-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #e8f7ef; color: var(--success); font-size: 17px; font-weight: 850; }
.savings-entry-row.withdrawal .savings-entry-icon { background: #fff0f1; color: var(--danger); }
.savings-entry-row.transit .savings-entry-icon { background: #f0f2f1; color: var(--muted); }
.savings-entry-row > div:nth-child(2) strong,.savings-entry-row > div:nth-child(2) small { display: block; }
.savings-entry-row > div:nth-child(2) strong { font-size: 14px; }
.savings-entry-row > div:nth-child(2) small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.savings-entry-row > b { color: var(--success); font-size: 14px; white-space: nowrap; }
.savings-entry-row.withdrawal > b { color: var(--danger); }
.savings-entry-row.transit > b { color: var(--muted); }
.savings-entry-actions { display: flex; justify-content: flex-end; gap: 4px; }
.savings-entry-actions button { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); cursor: pointer; }
.savings-entry-actions button:last-child { color: var(--danger); }
.savings-empty { padding: 24px 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.45; }
.savings-table { min-width: 760px; }
.savings-table-rate { min-width: 120px; }
.savings-table-rate strong { display: block; font-size: 13px; }
.savings-table-rate span { display: block; height: 5px; margin-top: 5px; border-radius: 999px; background: #edf0ee; overflow: hidden; }
.savings-table-rate span i { display: block; height: 100%; border-radius: inherit; background: var(--muted); }
.savings-table-rate span i.success { background: var(--success); }
.savings-table-rate span i.warning { background: #e1a335; }
.savings-table-rate span i.danger { background: var(--danger); }

@media (max-width: 1100px) {
  .metrics-grid { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .places-layout { grid-template-columns: 1fr; }
  .flow-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; transform: translateX(-100%); width: 260px; transition: transform .25s; box-shadow: 20px 0 60px rgba(0,0,0,.2); }
  .sidebar.open { transform: translateX(0); }
  .menu-button { display: block; }
  .breadcrumbs span, .breadcrumbs b { display: none; }
  .topbar { height: 62px; padding: 0 18px; }
  .period-switch { display: none; }
  .content { padding: 22px 16px 92px; }
  .page-heading h1 { font-size: 24px; }
  .desktop-heading-add { display: none; }
  .dashboard-grid.equal { grid-template-columns: 1fr; }
  .scope-grid { grid-template-columns: repeat(2,1fr); }
  .allocation-toolbar { align-items: flex-start; }
  .allocation-actions { flex-direction: column; align-items: stretch; }
  .savings-formula { grid-template-columns: minmax(0,1fr) auto; }
  .savings-formula i { grid-column: 1 / -1; height: 7px; line-height: 7px; }
  .mobile-nav { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 30; height: 64px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(21,27,26,.96); backdrop-filter: blur(16px); display: grid; grid-template-columns: repeat(5,1fr); box-shadow: 0 10px 40px rgba(0,0,0,.2); }
  .mobile-nav button { border: 0; background: none; color: #88918e; display: grid; place-items: center; gap: 2px; }
  .mobile-nav svg { width: 19px; height: 19px; }
  .mobile-nav small { font-size: 8px; }
  .mobile-nav button.active { color: #fff; }
  .mobile-nav .mobile-add { width: 44px; height: 44px; align-self: center; justify-self: center; border-radius: 14px; background: #b9f36b; color: #151b1a; font-size: 26px; }
}

@media (max-width: 560px) {
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-card { min-height: 128px; padding: 14px; }
  .metric-label { align-items: flex-start; }
  .metric-label span:first-child { max-width: 90px; }
  .metric-value { margin-top: 12px; font-size: 20px; }
  .metric-foot { font-size: 9px; }
  .panel { padding: 16px; }
  .donut-layout { grid-template-columns: 112px 1fr; gap: 12px; }
  .donut { width: 112px; height: 112px; }
  .donut::after { inset: 19px; }
  .donut-center strong { font-size: 14px; }
  .transaction-row,.transaction-row.compact-date { min-height: 47px; padding: 6px; grid-template-columns: 32px minmax(0,1fr) auto 50px; gap: 7px; }
  .transaction-row .transaction-meta { display: none; }
  .transaction-amount { min-width: 72px; padding: 5px 6px; font-size: 10px; }
  .transaction-actions { opacity: 1; }
  .feed-mode-bar { display: block; }
  .feed-mode-bar .segmented { margin-top: 9px; width: 100%; }
  .feed-mode-bar .segmented button { flex: 1; }
  .date-group { padding: 6px; border-radius: 13px; }
  .date-divider { margin: -6px -6px 3px; }
  .date-total { font-size: 9px; }
  .stat-row { grid-template-columns: 1fr; }
  .goal-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .place-suggestions { right: 0; max-height: 210px; }
  .modal { padding: 19px; }
  .heading-actions .secondary-button { display: none; }
  .bars { gap: 5px; }
  .bar-value { display: none; }
  .account-row { grid-template-columns: 34px 1fr; }
  .account-value { grid-column: 2; text-align: left; }
  .account-row > div:last-child { grid-column: 2; }
  .account-row-actions { justify-content: flex-start; margin-top: 6px; }
  .flow-summary { grid-template-columns: 1fr 1fr; }
  .flow-summary > div:last-child { grid-column: 1 / -1; }
  .allocation-toolbar { display: block; }
  .allocation-actions { margin-top: 11px; display: grid; grid-template-columns: 1fr; }
  .allocation-mode { width: 100%; }
  .allocation-mode button { flex: 1; }
  .circle-section { padding: 18px 13px; }
  .circle-grid, .circle-grid.compact { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 5px; }
  .node-circle { width: 82px; height: 82px; }
  .node-circle svg { width: 30px; height: 30px; }
  .node-label { font-size: 9px; }
  .node-value { font-size: 8px; }
  .money-node[data-node-type="account"] .node-value { font-size: 11px; }
  .money-node[data-node-type="category"] .node-value { font-size: 11px; }
  .category-budget-value { padding: 5px 7px; gap: 3px; }
  .category-budget-value b { font-size: 11px; }
  .category-budget-value small { font-size: 9px; }
  .node-percent { height: 20px; padding: 3px 6px; }
  .flow-hint { margin: 0 13px 16px; }
  .date-composer { grid-template-columns: repeat(3,1fr); }
  .date-composer input { grid-column: 1 / -1; }
  .node-menu-trigger { opacity: 1; }
  .split-actions { grid-template-columns: 1fr 1fr; }
  .split-actions span { display: none; }
  .savings-toolbar { align-items: stretch; flex-direction: column; }
  .savings-toolbar label { min-width: 0; }
  .savings-toolbar .primary-button { width: 100%; }
  .savings-rule-card { padding: 15px; }
  .savings-trend-row { grid-template-columns: 38px minmax(90px,1fr) 58px; gap: 7px; }
  .savings-entry-row { grid-template-columns: 34px minmax(0,1fr) auto; }
  .savings-entry-row > b { font-size: 12px; }
  .savings-entry-actions { grid-column: 2 / -1; justify-content: flex-start; }
}