:root {
  color-scheme: dark;
  --bg: #090b10;
  --sidebar: #0c0f15;
  --panel: #11151d;
  --panel-2: #151a23;
  --panel-3: #1b202b;
  --stroke: #252b36;
  --stroke-soft: rgba(255, 255, 255, .07);
  --text: #f4f6f0;
  --muted: #8d96a3;
  --muted-2: #626c79;
  --lime: #a8f261;
  --lime-2: #7fc83c;
  --lime-soft: rgba(168, 242, 97, .12);
  --coral: #ff8b72;
  --coral-soft: rgba(255, 139, 114, .12);
  --blue: #7fa9ff;
  --purple: #aa91ff;
  --gold: #e3bd62;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 25px 80px rgba(0, 0, 0, .32);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); overflow-x: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }
button, select { cursor: pointer; }
svg { display: block; }
.hidden { display: none !important; }
.privacy-mode .eye-toggle { color: var(--lime); }
.privacy-mode .row-actions { display: none !important; }
.positive-text { color: var(--lime) !important; }
.negative-text { color: var(--coral) !important; }

.ambient { position: fixed; width: 500px; height: 500px; border-radius: 50%; filter: blur(130px); pointer-events: none; opacity: .07; z-index: 0; }
.ambient-one { background: var(--lime); top: -300px; left: 24%; }
.ambient-two { background: #5375ff; bottom: -360px; right: 5%; }

.logo-mark { width: 29px; height: 25px; position: relative; flex: none; }
.logo-mark span { position: absolute; height: 5px; border-radius: 6px; background: var(--lime); transform: rotate(-35deg); transform-origin: left center; }
.logo-mark span:nth-child(1) { width: 22px; top: 17px; left: 1px; }
.logo-mark span:nth-child(2) { width: 17px; top: 10px; left: 7px; }
.logo-mark span:nth-child(3) { width: 11px; top: 4px; left: 14px; }

/* Auth */
.auth-screen { position: relative; z-index: 2; min-height: 100vh; padding: 32px clamp(24px, 6vw, 96px) 48px; background: radial-gradient(circle at 28% 40%, rgba(168,242,97,.075), transparent 27%), linear-gradient(120deg, #090b0f 0%, #0b0e14 100%); }
.auth-brand, .brand { display: flex; align-items: center; gap: 11px; font-size: 23px; font-weight: 720; letter-spacing: -.8px; }
.auth-shell { min-height: calc(100vh - 105px); max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(50px, 9vw, 140px); align-items: center; }
.auth-copy { max-width: 630px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #c0c8b9; letter-spacing: .1em; font-size: 11px; font-weight: 750; text-transform: uppercase; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 16px rgba(168,242,97,.8); }
.auth-copy h1 { margin: 24px 0 18px; font-size: clamp(52px, 6vw, 86px); line-height: .98; letter-spacing: -.065em; font-weight: 650; }
.auth-copy h1 em { color: var(--lime); font-style: normal; }
.auth-copy > p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; max-width: 540px; }
.auth-preview { margin-top: 48px; width: 430px; background: linear-gradient(145deg, rgba(24,29,37,.94), rgba(13,16,23,.94)); border: 1px solid rgba(255,255,255,.09); padding: 22px 24px 18px; border-radius: 22px; box-shadow: 0 35px 90px rgba(0,0,0,.35); }
.preview-top, .preview-foot { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.live-pill { font-size: 9px; color: var(--lime); background: var(--lime-soft); border-radius: 30px; padding: 5px 8px; letter-spacing: .08em; }
.auth-preview > strong { display: block; margin: 8px 0 2px; font-size: 34px; letter-spacing: -.04em; }
.preview-chart { height: 100px; margin: 4px -5px 10px; }
.preview-chart svg { width: 100%; height: 100%; }
.preview-chart .area { fill: url(#previewFill); }
.preview-chart .line { fill: none; stroke: var(--lime); stroke-width: 2; vector-effect: non-scaling-stroke; }
.preview-foot b { color: var(--lime); }

.glass-card { background: linear-gradient(145deg, rgba(22,27,35,.93), rgba(13,16,22,.94)); border: 1px solid rgba(255,255,255,.09); box-shadow: var(--shadow); backdrop-filter: blur(20px); }
.auth-card { width: 100%; max-width: 460px; justify-self: end; border-radius: 26px; padding: clamp(30px, 4vw, 48px); }
.auth-card h2 { margin: 9px 0 10px; font-size: 29px; letter-spacing: -.035em; }
.mini-label { margin: 0; color: var(--lime); font-weight: 800; font-size: 10px; letter-spacing: .13em; }
.auth-subtitle { color: var(--muted); margin: 0 0 26px; font-size: 14px; line-height: 1.55; }
.auth-buttons { display: grid; gap: 11px; }
.provider-btn { height: 51px; border: 1px solid var(--stroke); border-radius: 13px; background: #f4f5f2; color: #11151b; font-size: 14px; font-weight: 660; display: flex; align-items: center; justify-content: center; gap: 11px; transition: .2s ease; }
.provider-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.provider-btn svg { width: 19px; height: 19px; }
.provider-btn.apple { background: #050608; color: white; border-color: #323640; }
.provider-btn.muted { background: #1b2029; color: var(--text); }
.provider-btn.telegram-login { min-height: 58px; height: auto; padding: 10px 18px; background: linear-gradient(135deg, #2aabee, #168acb); color: white; border-color: rgba(255,255,255,.18); }
.provider-btn.telegram-login svg { width: 24px; height: 24px; flex: none; }
.provider-btn.telegram-login > span { display: grid; gap: 2px; text-align: left; }
.provider-btn.telegram-login b { font-size: 14px; }
.provider-btn.telegram-login small { font-size: 10px; opacity: .78; font-weight: 550; }
.auth-status { min-height: 18px; margin: 1px 3px 0; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: center; }
.auth-status.error { color: var(--coral); }
.auth-status.success { color: var(--lime); }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted-2); font-size: 11px; margin: 3px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--stroke); }
.security-note { display: flex; justify-content: center; align-items: center; gap: 8px; color: var(--muted-2); font-size: 11px; margin-top: 24px; }
.security-note svg { width: 15px; height: 15px; }
.auth-mobile-logo { display: none; }

/* Shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 235px minmax(0, 1fr); position: relative; z-index: 1; }
.sidebar { height: 100vh; position: sticky; top: 0; padding: 29px 19px 22px; border-right: 1px solid var(--stroke-soft); background: rgba(11,14,20,.88); backdrop-filter: blur(20px); display: flex; flex-direction: column; z-index: 30; }
.sidebar .brand { padding: 0 13px 29px; }
.main-nav { display: grid; gap: 5px; }
.nav-item { border: 0; background: transparent; color: var(--muted); min-height: 46px; border-radius: 12px; padding: 0 14px; display: flex; align-items: center; gap: 13px; text-align: left; font-size: 13px; font-weight: 600; transition: .18s ease; }
.nav-item svg { width: 19px; height: 19px; fill: currentColor; }
.nav-item:hover { background: rgba(255,255,255,.035); color: var(--text); }
.nav-item.active { background: var(--lime-soft); color: var(--lime); }
.sidebar-bottom { margin-top: auto; display: grid; gap: 16px; }
.profile-mini { border-top: 1px solid var(--stroke-soft); padding: 18px 6px 0; display: grid; grid-template-columns: 35px 1fr 30px; gap: 10px; align-items: center; }
.avatar { width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #9ced54, #4d842b); color: #102006; font-weight: 850; font-size: 13px; }
.profile-mini strong, .profile-mini span { display: block; }
.profile-mini strong { font-size: 12px; }
.profile-mini span { font-size: 10px; color: var(--muted); margin-top: 3px; }
.icon-btn { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid transparent; background: transparent; border-radius: 10px; color: var(--muted); }
.icon-btn:hover { border-color: var(--stroke); color: var(--text); }
.icon-btn svg { width: 19px; height: 19px; }

.main-content { padding: 0 clamp(22px, 3vw, 46px) 60px; min-width: 0; }
.topbar { height: 107px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar h1 { margin: 0 0 5px; font-size: 23px; letter-spacing: -.035em; }
.topbar p { margin: 0; color: var(--muted); font-size: 12px; }
.mobile-brand { display: none; }
.mobile-settings-btn { display: none; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.quote-status { height: 38px; padding: 0 12px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--stroke); border-radius: 11px; background: rgba(18,22,30,.7); color: var(--muted); }
.quote-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(168,242,97,.5); }
.quote-status b, .quote-status small { font-size: 10px; font-weight: 600; }
.quote-status small { color: var(--muted-2); }
.gold-market-status { height: 38px; padding: 0 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--stroke); border-radius: 11px; background: rgba(18,22,30,.7); color: var(--muted); cursor: help; }
.gold-market-status > i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--muted-2); box-shadow: 0 0 0 3px rgba(255,255,255,.035); }
.gold-market-status > span { display: grid; gap: 1px; }
.gold-market-status b, .gold-market-status small { font-size: 9px; line-height: 1.1; white-space: nowrap; }
.gold-market-status b { color: var(--text); }
.gold-market-status small { color: var(--muted-2); }
.gold-market-status.status-open > i { background: var(--lime); box-shadow: 0 0 10px rgba(168,242,97,.72); animation: market-pulse 1.8s ease-in-out infinite; }
.gold-market-status.status-open small { color: var(--lime); }
.gold-market-status.status-break > i { background: var(--gold); box-shadow: 0 0 9px rgba(227,189,98,.6); }
.gold-market-status.status-break small { color: var(--gold); }
.gold-market-status.status-closed > i { background: var(--coral); box-shadow: 0 0 8px rgba(255,107,107,.45); }
.gold-market-status.status-closed small { color: var(--coral); }
@keyframes market-pulse { 50% { opacity: .58; box-shadow: 0 0 5px rgba(168,242,97,.35); } }
.notification-btn { position: relative; border-color: var(--stroke); background: rgba(18,22,30,.7); }
.notification-btn i { position: absolute; top: 6px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
.primary-btn, .secondary-btn, .danger-btn { min-height: 40px; border-radius: 11px; border: 1px solid transparent; padding: 0 16px; font-size: 12px; font-weight: 720; transition: .18s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.primary-btn { background: var(--lime); color: #11170c; }
.primary-btn:hover { background: #b7ff74; transform: translateY(-1px); }
.secondary-btn { background: var(--panel-3); border-color: var(--stroke); color: var(--text); }
.secondary-btn:hover { border-color: #3b4452; background: #202632; }
.danger-btn { color: var(--coral); border-color: rgba(255,139,114,.22); background: var(--coral-soft); }

.admin-user-list { display: grid; gap: 8px; padding: 0 21px 21px; }
.admin-user-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 12px; border: 1px solid var(--stroke-soft); border-radius: 14px; background: rgba(255,255,255,.018); }
.admin-user-row .avatar { width: 38px; height: 38px; }
.admin-user-copy { min-width: 0; display: grid; gap: 3px; }
.admin-user-copy b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-copy small { color: var(--muted); font-size: 9px; }
.admin-user-actions { display: flex; gap: 6px; }
.admin-user-actions button { min-height: 32px; padding-inline: 10px; font-size: 10px; }
.access-pill { width: max-content; padding: 3px 7px; border-radius: 20px; font-style: normal; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.access-pill.pending { background: rgba(227,189,98,.12); color: var(--gold); }
.access-pill.active { background: var(--lime-soft); color: var(--lime); }
.access-pill.blocked { background: var(--coral-soft); color: var(--coral); }
.provider-switch:disabled { opacity: .42; cursor: not-allowed; }

.page { display: none; animation: page-in .24s ease; }
.page.active { display: block; }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.summary-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 13px; }
.quick-entry-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 13px; }
.quick-entry { min-height: 68px; padding: 11px 14px; border-radius: 15px; border: 1px solid var(--stroke-soft); color: var(--text); background: linear-gradient(145deg, rgba(22,27,35,.94), rgba(15,19,26,.98)); display: flex; align-items: center; gap: 11px; text-align: left; transition: .18s ease; }
.quick-entry:hover { transform: translateY(-1px); border-color: rgba(168,242,97,.25); }
.quick-entry > i { width: 35px; height: 35px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 18px; font-style: normal; background: var(--lime-soft); color: var(--lime); }
.quick-entry.expense > i { color: var(--coral); background: var(--coral-soft); }
.quick-entry.transfer > i { color: #63b8ff; background: rgba(74,155,255,.11); }
.quick-entry.asset > i { color: var(--gold); background: rgba(227,189,98,.1); }
.quick-entry span { display: grid; gap: 3px; min-width: 0; }
.quick-entry b { font-size: 12px; }
.quick-entry small { color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-card { min-height: 145px; padding: 21px; border: 1px solid var(--stroke-soft); background: linear-gradient(150deg, var(--panel), #10141b); border-radius: var(--radius); overflow: hidden; position: relative; }
.summary-card::after { content: ""; position: absolute; inset: auto -70px -100px auto; width: 180px; height: 180px; border-radius: 50%; background: var(--lime); opacity: .025; }
.hero-balance { background: linear-gradient(135deg, rgba(168,242,97,.105), rgba(18,23,29,.98) 48%, #10141b); }
.card-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 9px; letter-spacing: .1em; font-weight: 800; }
.eye-toggle { width: 28px; height: 26px; border: 0; background: transparent; color: var(--muted); padding: 4px; }
.eye-toggle svg { width: 19px; }
.balance-row { display: flex; align-items: center; gap: 11px; margin-top: 12px; }
.balance-row strong, .metric { font-size: clamp(25px, 2.1vw, 33px); letter-spacing: -.045em; }
.trend-badge { border-radius: 30px; padding: 5px 7px; font-size: 9px; font-weight: 800; }
.trend-badge.positive { color: var(--lime); background: var(--lime-soft); }
.trend-badge.negative { color: var(--coral); background: var(--coral-soft); }
.submetric, .metric-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; margin-top: 17px; }
.submetric b, .metric-foot b { color: #bdc5cf; font-size: 10px; }
.metric { display: block; margin-top: 13px; }
.round-icon { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; }
.round-icon svg { width: 16px; height: 16px; }
.round-icon.coral { color: var(--coral); background: var(--coral-soft); }
.round-icon.lime { color: var(--lime); background: var(--lime-soft); }
.progress-line { height: 4px; background: #282d36; border-radius: 8px; overflow: hidden; margin-top: 17px; }
.progress-line i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--coral); transition: width .4s ease; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, .8fr); gap: 13px; margin-top: 13px; }
.lower-grid { grid-template-columns: minmax(0, 1.6fr) minmax(300px, .72fr); }
.panel { background: linear-gradient(150deg, rgba(18,22,30,.98), rgba(15,19,26,.98)); border: 1px solid var(--stroke-soft); border-radius: var(--radius); min-width: 0; }
.panel-heading { min-height: 76px; padding: 19px 21px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.panel-heading h2 { margin: 0 0 5px; font-size: 15px; letter-spacing: -.02em; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.chart-controls { display: flex; align-items: flex-end; flex-direction: column; gap: 7px; }
.chart-view-controls { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.chart-asset-picker { display: flex; align-items: center; gap: 7px; color: var(--muted-2); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.chart-asset-picker select { width: 184px; height: 29px; padding: 0 28px 0 9px; color: var(--text); font-size: 9px; font-weight: 700; text-transform: none; letter-spacing: 0; text-overflow: ellipsis; }
.chart-mode-toggle { min-height: 25px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 700; cursor: pointer; user-select: none; }
.chart-mode-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--lime); }
.chart-mode-toggle:has(input:checked) { color: var(--lime); }
.chart-mode-toggle.is-hidden { display: none; }
.chart-marker-toggle { height: 29px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--stroke); border-radius: 8px; background: #0f1319; color: var(--muted); font-size: 9px; font-weight: 700; white-space: nowrap; }
.chart-marker-toggle i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
.chart-marker-toggle.active { color: var(--lime); border-color: rgba(168,242,97,.22); background: var(--lime-soft); }
.chart-marker-toggle.active i { background: var(--lime); box-shadow: 0 0 8px rgba(168,242,97,.48); }
.period-tabs, .filter-pills { display: flex; align-items: center; border: 1px solid var(--stroke); background: #0f1319; border-radius: 9px; padding: 3px; }
.period-tabs button, .filter-pills button { min-width: 36px; height: 27px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 700; }
.period-tabs button.active, .filter-pills button.active { color: var(--text); background: var(--panel-3); box-shadow: 0 1px 5px rgba(0,0,0,.2); }
.chart-wrap { height: 275px; position: relative; padding: 0 17px; }
.chart-wrap canvas { width: 100%; height: 100%; }
.chart-tooltip { position: absolute; pointer-events: none; z-index: 5; opacity: 0; width: 218px; padding: 11px 12px; background: rgba(30,37,48,.97); border: 1px solid #3a4554; border-radius: 11px; font-size: 9px; box-shadow: 0 10px 30px rgba(0,0,0,.42); transform: translate(-50%, calc(-100% - 10px)); transition: opacity .1s; }
.chart-tooltip.below { transform: translate(-50%, 10px); }
.chart-tooltip > strong { display: block; color: var(--text); font-size: 12px; margin-bottom: 7px; }
.chart-tooltip-grid { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; color: var(--muted); }
.chart-tooltip-grid b { color: var(--text); text-align: right; }
.chart-tooltip-grid .positive-text, .chart-tooltip-grid .negative-text { font-weight: 800; }
.chart-tooltip-events { display: grid; gap: 4px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--stroke); }
.chart-tooltip-events span, .chart-tooltip-events small { color: var(--muted-2); }
.chart-tooltip-events b { color: var(--text); line-height: 1.35; }
.chart-expense-breakdown { height: 42px; padding: 0 17px; display: flex; align-items: center; gap: 13px; border-top: 1px solid var(--stroke-soft); overflow: hidden; }
.chart-expense-breakdown > b { flex: none; color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.chart-expense-breakdown > div { min-width: 0; display: flex; align-items: center; gap: 12px; overflow-x: auto; scrollbar-width: thin; }
.expense-breakdown-item { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; white-space: nowrap; }
.expense-breakdown-item i { width: 7px; height: 7px; border-radius: 2px; background: var(--category-color); box-shadow: 0 0 7px color-mix(in srgb, var(--category-color), transparent 55%); }
.expense-breakdown-item strong { color: var(--text); font-size: 8px; }
.chart-day-summary { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--stroke-soft); }
.chart-day-summary > div { min-height: 55px; padding: 10px 17px; border-right: 1px solid var(--stroke-soft); }
.chart-day-summary > div:last-child { border-right: 0; }
.chart-day-summary span { display: block; color: var(--muted-2); font-size: 8px; margin-bottom: 5px; }
.chart-day-summary b { display: block; font-size: 10px; }
.chart-day-events { height: 112px; min-height: 112px; max-height: 112px; box-sizing: border-box; padding: 9px 17px 11px; display: flex; flex-direction: column; overflow: hidden; border-top: 1px solid var(--stroke-soft); }
.chart-events-title { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.chart-events-title > span { color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.chart-event-key { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px 10px; color: var(--muted-2); font-size: 7px; }
.chart-event-key span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.chart-event-key i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.035); }
.chart-event-key i.income { background: var(--lime); }
.chart-event-key i.expense { width: 7px; height: 10px; border-radius: 2px 2px 0 0; background: #ff6b6b; }
.chart-event-key i.transfer { background: var(--blue); }
.chart-event-key i.asset { background: var(--gold); }
.chart-day-events > p { flex: 1; margin: 0; display: flex; align-items: flex-start; color: var(--muted); font-size: 9px; }
.chart-event-list { flex: 1; min-height: 0; display: flex; align-content: flex-start; flex-wrap: wrap; gap: 6px; overflow-y: auto; }
.chart-event { min-height: 25px; max-width: 100%; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--stroke); border-radius: 8px; background: #0f141b; font-size: 8px; }
.chart-event i { width: 16px; height: 16px; flex: none; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 900; }
.chart-event b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-event.income i { color: var(--lime); background: var(--lime-soft); }
.chart-event.expense i { color: var(--coral); background: var(--coral-soft); }
.chart-event.transfer i { color: var(--blue); background: rgba(127,169,255,.13); }
.chart-event.asset i { color: var(--gold); background: rgba(227,189,98,.13); }
.chart-legend { height: 38px; border-top: 1px solid var(--stroke-soft); padding: 0 21px; display: flex; align-items: center; justify-content: space-between; color: var(--muted-2); font-size: 9px; }
.chart-legend i:not(.lime-dot) { font-style: normal; }
.lime-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); margin-right: 5px; }
.link-btn, .full-link { border: 0; background: transparent; color: var(--lime); font-size: 10px; }
.donut-wrap { min-height: 278px; display: grid; grid-template-columns: 145px 1fr; gap: 18px; align-items: center; padding: 4px 24px 23px; }
.donut { width: 138px; height: 138px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--lime) 0 40%, var(--gold) 40% 60%, var(--purple) 60% 80%, var(--blue) 80% 100%); position: relative; }
.donut::after { content: ""; width: 98px; height: 98px; border-radius: 50%; background: var(--panel); position: absolute; }
.donut > div { position: relative; z-index: 1; text-align: center; max-width: 85px; }
.donut small { display: block; color: var(--muted); font-size: 8px; letter-spacing: .09em; }
.donut strong { display: block; margin-top: 4px; font-size: 13px; white-space: nowrap; }
.allocation-list { display: grid; gap: 14px; }
.allocation-item { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; }
.allocation-item > i { width: 7px; height: 7px; border-radius: 50%; }
.allocation-item span { color: var(--muted); font-size: 10px; }
.allocation-item b { font-size: 10px; }
.allocation-item small { grid-column: 2 / 4; color: var(--muted-2); font-size: 8px; margin-top: -6px; }

.holdings-table { padding: 0 21px 2px; }
.holding-row { min-height: 62px; display: grid; grid-template-columns: minmax(150px,1.5fr) .8fr .72fr; gap: 10px; align-items: center; border-top: 1px solid var(--stroke-soft); }
.holding-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.asset-icon, .category-icon { width: 33px; height: 33px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.asset-icon.cash { color: var(--lime); background: var(--lime-soft); }
.asset-icon.metal { color: var(--gold); background: rgba(227,189,98,.12); }
.asset-icon.crypto { color: var(--purple); background: rgba(170,145,255,.12); }
.asset-icon.stock { color: var(--blue); background: rgba(127,169,255,.12); }
.asset-icon.other { color: #9cb1bd; background: rgba(156,177,189,.1); }
.holding-name strong, .holding-name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.holding-name strong { font-size: 11px; }
.holding-name span { color: var(--muted); font-size: 9px; margin-top: 4px; }
.holding-value, .holding-pnl { text-align: right; }
.holding-value strong, .holding-value span, .holding-pnl b, .holding-pnl span { display: block; }
.holding-value strong { font-size: 11px; }
.holding-value span, .holding-pnl span { color: var(--muted-2); font-size: 8px; margin-top: 4px; }
.holding-pnl b { font-size: 10px; }
.full-link { width: 100%; height: 42px; border-top: 1px solid var(--stroke-soft); margin-top: 1px; }
.full-link span { margin-left: 4px; }
.quick-panel { overflow: hidden; }
.spark { color: var(--lime); }
.insight-list { padding: 0 20px 17px; display: grid; gap: 10px; }
.insight { padding: 13px; border: 1px solid var(--stroke-soft); border-radius: 13px; background: rgba(255,255,255,.02); display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.insight i { width: 28px; height: 28px; border-radius: 9px; background: var(--lime-soft); color: var(--lime); display: grid; place-items: center; font-style: normal; font-size: 12px; }
.insight b { display: block; font-size: 10px; margin-bottom: 4px; }
.insight p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }

/* Assets */
.section-toolbar { min-height: 61px; margin-bottom: 13px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.toolbar-actions, .list-controls { display: flex; align-items: center; gap: 8px; }
.toolbar-actions .secondary-btn { position: relative; }
.toolbar-actions .secondary-btn i { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 20px; background: var(--panel-3); color: var(--muted); display: inline-grid; place-items: center; font-style: normal; font-size: 8px; }
.filter-pills { overflow-x: auto; max-width: 100%; }
.filter-pills button { min-width: max-content; }
.asset-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 13px; }
.asset-stat { padding: 17px 18px; border: 1px solid var(--stroke-soft); background: var(--panel); border-radius: 16px; }
.asset-stat span, .asset-stat strong, .asset-stat small { display: block; }
.asset-stat span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.asset-stat strong { font-size: 20px; margin: 8px 0 4px; letter-spacing: -.035em; }
.asset-stat small { color: var(--muted-2); font-size: 8px; }
.search-box { display: flex; align-items: center; width: 190px; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--stroke); background: #0e1218; }
.list-controls > select { height: 34px; min-width: 145px; padding: 0 9px; font-size: 9px; }
.search-box svg { width: 15px; color: var(--muted); }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 10px; padding-left: 8px; }
.full-assets-list { padding: 0 21px 16px; }
.asset-list-head, .asset-list-row { display: grid; grid-template-columns: minmax(180px,1.5fr) .65fr .8fr .72fr 66px; gap: 12px; align-items: center; }
.asset-list-head { min-height: 31px; border-top: 1px solid var(--stroke-soft); border-bottom: 1px solid var(--stroke-soft); color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }
.asset-list-head > :not(:first-child), .asset-list-row > :not(:first-child) { text-align: right; }
.asset-list-row { min-height: 68px; border-bottom: 1px solid var(--stroke-soft); }
.asset-list-row .qty { font-size: 10px; color: var(--muted); }
.asset-more { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.asset-more:hover { background: var(--panel-3); color: var(--coral); }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.edit-row { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.edit-row:hover { background: var(--lime-soft); color: var(--lime); }
.edit-row svg { width: 14px; height: 14px; }
.empty-state { text-align: center; padding: 45px 20px; color: var(--muted); }
.empty-state b { display: block; color: var(--text); margin-bottom: 6px; }

/* Expenses */
.expense-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 13px; }
.expense-list { padding: 0 21px 20px; }
.expense-row { min-height: 65px; border-top: 1px solid var(--stroke-soft); display: grid; grid-template-columns: minmax(170px,1fr) minmax(100px,.55fr) auto 62px; gap: 14px; align-items: center; }
.expense-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.category-icon { font-size: 15px; }
.expense-main strong, .expense-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expense-main strong { font-size: 11px; }
.expense-main span, .expense-account { font-size: 9px; color: var(--muted); margin-top: 4px; }
.expense-amount { text-align: right; }
.expense-amount b, .expense-amount span { display: block; }
.expense-amount b { color: var(--coral); font-size: 11px; }
.expense-amount span { color: var(--muted-2); font-size: 8px; margin-top: 3px; }
.delete-row { border: 0; background: transparent; color: var(--muted-2); font-size: 17px; }
.delete-row:hover { color: var(--coral); }
.archive-action:hover { color: var(--gold); background: rgba(227,189,98,.1); }
.category-panel { align-self: start; }
.category-panel #categoryBars { padding: 5px 21px 24px; }
.category-panel #incomeCategoryBars { padding: 5px 21px 24px; }
.category-bar { margin-bottom: 18px; }
.category-bar > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 10px; }
.category-bar span { color: var(--muted); }
.bar-track { height: 5px; background: #272d36; border-radius: 5px; overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: inherit; }
.income-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-bottom: 13px; }
.income-stat { min-height: 112px; padding: 19px; border-radius: 16px; border: 1px solid var(--stroke-soft); background: linear-gradient(145deg, rgba(168,242,97,.08), var(--panel) 55%); }
.income-stat span, .income-stat strong, .income-stat small { display: block; }
.income-stat span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.income-stat strong { margin: 11px 0 5px; font-size: 23px; color: var(--lime); letter-spacing: -.035em; }
.income-stat small { color: var(--muted-2); font-size: 9px; }
.income-amount { border-color: rgba(168,242,97,.2); }
.income-amount span { color: var(--lime); }
.transfer-history-panel { margin-top: 13px; }
.transfer-amount { border-color: rgba(127,169,255,.24); }
.transfer-amount span { color: var(--blue); }
.transfer-note { min-height: 36px; margin-top: 15px; padding: 10px 12px; border-radius: 10px; background: rgba(127,169,255,.07); color: var(--muted); font-size: 9px; line-height: 1.5; }
.transfer-direction { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 9px; }
.transfer-direction b { color: var(--text); font-size: 10px; }
.transfer-arrow { color: var(--blue); }

/* Settings */
.settings-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 13px; }
.settings-card { padding-bottom: 10px; }
.api-settings-card, .telegram-settings-card { grid-column: 1 / -1; }
.api-settings-card .panel-heading { align-items: center; }
.api-refresh-btn { min-height: 34px; padding-inline: 13px; }
.provider-list { border-top: 1px solid var(--stroke-soft); margin: 0 21px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 18px 0; }
.provider-row { min-height: 68px; border: 1px solid var(--stroke-soft); border-radius: 12px; background: rgba(255,255,255,.018); padding: 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.provider-row.is-disabled { opacity: .62; background: rgba(255,255,255,.008); }
.provider-row b, .provider-row small { display: block; }
.provider-row b { font-size: 11px; }
.provider-row small { color: var(--muted); font-size: 8px; line-height: 1.45; margin-top: 5px; }
.provider-badge { flex: none; border-radius: 20px; padding: 4px 7px; color: var(--muted); background: var(--panel-3); font-size: 7px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.provider-badge.live { color: var(--lime); background: rgba(168,242,97,.1); }
.provider-badge.fallback { color: var(--gold); background: rgba(227,189,98,.1); }
.provider-badge.offline { color: var(--coral); background: rgba(255,139,114,.1); }
.provider-badge.disabled { color: var(--muted); background: rgba(156,177,189,.1); }
.provider-controls { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.provider-switch { flex: none; cursor: pointer; }
.api-privacy-note { margin: 0 21px 12px; padding: 13px 15px; border: 1px solid rgba(127,169,255,.15); border-radius: 12px; background: rgba(127,169,255,.04); }
.api-privacy-note b { font-size: 10px; }
.api-privacy-note p { margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.telegram-settings-card .panel-heading { align-items: center; }
.telegram-connect { margin: 0 21px; padding: 18px 0; border-top: 1px solid var(--stroke-soft); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.telegram-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg,#40b9ef,#248dcc); font-size: 20px; transform: rotate(-18deg); }
.telegram-copy b, .telegram-copy p { display: block; }
.telegram-copy b { font-size: 12px; }
.telegram-copy p { max-width: 560px; margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.telegram-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.telegram-actions button { white-space: nowrap; }
.telegram-actions button:disabled { opacity: .65; cursor: wait; }
.telegram-pair { margin: 0 21px 14px; padding: 14px 15px; border: 1px solid rgba(64,185,239,.24); border-radius: 12px; background: rgba(64,185,239,.055); }
.telegram-pair > span { display: block; color: var(--muted); font-size: 8px; }
.telegram-pair code { display: block; margin: 9px 0 12px; color: var(--text); font-size: 18px; font-weight: 800; letter-spacing: .03em; user-select: all; }
.telegram-pair > div { display: flex; gap: 8px; }
.telegram-pair .primary-btn, .telegram-pair .secondary-btn { min-height: 34px; font-size: 10px; text-decoration: none; }
.telegram-note { margin-bottom: 12px; }
.source-footer { padding: 18px 4px 4px; color: var(--muted-2); font-size: 8px; text-align: center; }
.source-footer a { color: var(--muted); }
.setting-row { min-height: 75px; border-top: 1px solid var(--stroke-soft); margin: 0 21px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.setting-row b, .setting-row small { display: block; }
.setting-row b { font-size: 11px; }
.setting-row small { color: var(--muted); font-size: 9px; margin-top: 5px; }
select, input { border: 1px solid var(--stroke); background: #0e1218; color: var(--text); border-radius: 9px; outline: 0; }
select:focus, input:focus { border-color: rgba(168,242,97,.55); box-shadow: 0 0 0 3px rgba(168,242,97,.07); }
.setting-row select { height: 37px; min-width: 100px; padding: 0 10px; }
.input-suffix { position: relative; }
.input-suffix input { width: 130px; height: 37px; padding: 0 42px 0 10px; }
.input-suffix i { position: absolute; right: 11px; top: 11px; font-style: normal; font-size: 9px; color: var(--muted); }
.switch { appearance: none; width: 42px; height: 24px; border-radius: 30px; background: #2b313b; padding: 2px; transition: .2s; }
.switch::after { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; background: #7b8490; transition: .2s; }
.switch:checked { background: var(--lime); }
.switch:checked::after { transform: translateX(17px); background: #17220f; }
.backup-callout { margin: 0 21px 18px; border-top: 1px solid var(--stroke-soft); padding: 21px 0 2px; display: flex; gap: 12px; }
.backup-callout b { font-size: 11px; }
.backup-callout p { color: var(--muted); font-size: 9px; line-height: 1.5; margin: 5px 0 0; }
.backup-actions { display: flex; gap: 8px; padding: 0 21px 12px; }
.file-btn { position: relative; cursor: pointer; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.danger-card { grid-column: 2; }
.profile-setting { margin: 0 21px 18px; padding-top: 18px; border-top: 1px solid var(--stroke-soft); display: flex; align-items: center; gap: 13px; }
.avatar.big { width: 43px; height: 43px; }
.profile-setting b, .profile-setting small { display: block; }
.profile-setting b { font-size: 12px; }
.profile-setting small { color: var(--muted); font-size: 9px; margin-top: 4px; }
.danger-card .danger-btn { margin: 0 21px 12px; }

/* Modals */
.modal-backdrop { position: fixed; inset: 0; background: rgba(2,4,8,.72); backdrop-filter: blur(8px); z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal { width: min(610px, 100%); max-height: min(760px, calc(100vh - 30px)); overflow-y: auto; background: #121720; border: 1px solid #2c3440; box-shadow: 0 30px 100px rgba(0,0,0,.55); border-radius: 23px; padding: 25px; animation: modal-in .2s ease; }
.modal.compact { width: min(535px, 100%); }
.modal.archive-modal { width: min(680px, 100%); }
.modal-description { margin: 8px 0 0; max-width: 520px; color: var(--muted); font-size: 10px; line-height: 1.5; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.modal-head h2 { font-size: 22px; margin: 7px 0 0; letter-spacing: -.035em; }
.modal-close { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--stroke); background: var(--panel-3); color: var(--muted); font-size: 22px; line-height: 1; }
.type-selector { display: grid; grid-template-columns: repeat(5,1fr); padding: 4px; border: 1px solid var(--stroke); border-radius: 11px; background: #0c1016; margin-bottom: 20px; }
.type-selector button { border: 0; background: transparent; color: var(--muted); border-radius: 8px; height: 34px; font-size: 10px; }
.type-selector button.active { background: var(--panel-3); color: var(--lime); }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; }
.field { display: grid; gap: 7px; }
.field > span { font-size: 9px; color: var(--muted); font-weight: 650; }
.catalog-status { min-height: 12px; margin-top: -2px; color: var(--muted-2); font-size: 8px; font-weight: 500; line-height: 1.35; }
.field input, .field select { width: 100%; height: 43px; padding: 0 12px; font-size: 11px; }
.span-2 { grid-column: span 2; }
.check-field { display: flex; align-items: center; gap: 10px; padding-top: 18px; }
.check-field input { width: 17px; height: 17px; accent-color: var(--lime); }
.check-field b, .check-field small { display: block; }
.check-field b { font-size: 10px; }
.check-field small { color: var(--muted); font-size: 8px; margin-top: 3px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--stroke-soft); margin-top: 24px; padding-top: 19px; }
.archive-list { display: grid; gap: 8px; }
.archive-row { min-height: 62px; padding: 9px 11px; display: grid; grid-template-columns: minmax(160px,1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--stroke-soft); border-radius: 13px; background: rgba(255,255,255,.018); }
.archive-row .row-actions button { width: auto; padding: 0 10px; font-size: 9px; }
.archive-row .restore-btn { color: var(--lime); }
.archive-row .permanent-delete { color: var(--coral); }
.amount-input { height: 85px; border: 1px solid var(--stroke); background: #0d1117; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.amount-input span { color: var(--muted); font-size: 27px; }
.amount-input input { width: 220px; background: transparent; border: 0; box-shadow: none; font-size: 40px; font-weight: 650; letter-spacing: -.045em; padding: 0 8px; }
.category-picker { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.category-chip { border: 1px solid var(--stroke); border-radius: 10px; min-height: 53px; background: #0e1218; color: var(--muted); display: grid; place-items: center; align-content: center; gap: 4px; font-size: 8px; }
.category-chip i { font-size: 15px; font-style: normal; }
.category-chip.active { color: var(--lime); border-color: rgba(168,242,97,.35); background: var(--lime-soft); }

.toast-stack { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: grid; gap: 8px; }
.toast { min-width: 260px; max-width: 360px; background: #1a2029; border: 1px solid #303946; border-radius: 12px; padding: 13px 15px; box-shadow: 0 16px 55px rgba(0,0,0,.35); font-size: 11px; animation: toast-in .25s ease; }
.toast.success { border-left: 3px solid var(--lime); }
.toast.error { border-left: 3px solid var(--coral); }
@keyframes toast-in { from { opacity: 0; transform: translateX(10px); } }
.mobile-nav { display: none; }

body.telegram-miniapp .ambient { opacity: .45; }
body.telegram-miniapp .sidebar { display: none; }
body.telegram-miniapp .app-shell { grid-template-columns: 1fr; }
body.telegram-miniapp .main-content { padding-top: env(safe-area-inset-top); }
body.telegram-miniapp .topbar { height: 78px; }
body.telegram-miniapp .mobile-brand { display: inline; }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 205px minmax(0,1fr); }
  .sidebar { padding-inline: 13px; }
  .main-content { padding-inline: 25px; }
  .summary-grid { grid-template-columns: 1.1fr 1fr; }
  .summary-card:last-child { grid-column: span 2; min-height: 120px; }
  .dashboard-grid, .lower-grid { grid-template-columns: 1fr; }
  .donut-wrap { min-height: 220px; grid-template-columns: 155px 1fr; }
  .quick-panel { min-height: 200px; }
  .insight-list { grid-template-columns: repeat(3,1fr); }
  .settings-grid { grid-template-columns: 1fr; }
  .danger-card { grid-column: auto; }
}

@media (max-width: 820px) {
  .auth-screen { padding: 24px 20px 40px; }
  .auth-screen > .auth-brand { display: none; }
  .auth-shell { display: block; min-height: auto; }
  .auth-copy { display: none; }
  .auth-card { max-width: 440px; margin: 6vh auto 0; padding: 30px 24px; }
  .auth-mobile-logo { display: flex; margin-bottom: 38px; }
  .app-shell { display: block; }
  .sidebar { display: none; }
  .main-content { padding: 0 16px calc(100px + env(safe-area-inset-bottom)); }
  .topbar { height: auto; padding: calc(18px + env(safe-area-inset-top)) 1px 20px; }
  .topbar h1 { font-size: 20px; }
  .topbar p { display: none; }
  .mobile-brand { display: block; color: var(--lime); font-size: 10px; font-weight: 800; letter-spacing: .11em; margin-bottom: 6px; text-transform: uppercase; }
  .quote-status, .notification-btn, .top-actions .primary-btn { display: none; }
  .gold-market-status { height: 34px; padding: 0 9px; }
  .gold-market-status small { font-size: 8px; }
  .top-actions .mobile-settings-btn { display: grid; border-color: var(--stroke); background: rgba(18,22,30,.7); }
  .top-actions .add-income-trigger { display: none; }
  .mobile-nav { position: fixed; display: grid; grid-template-columns: repeat(5,1fr); align-items: end; inset: auto 0 0; min-height: calc(70px + env(safe-area-inset-bottom)); padding: 8px 4px env(safe-area-inset-bottom); background: rgba(13,17,23,.94); border-top: 1px solid var(--stroke); backdrop-filter: blur(20px); z-index: 50; }
  .mobile-nav .nav-item { min-height: 50px; padding: 4px; display: grid; place-items: center; align-content: center; gap: 4px; font-size: 8px; border-radius: 10px; }
  .mobile-nav .nav-item svg { width: 18px; height: 18px; }
  .mobile-add { width: 48px; height: 48px; border-radius: 50%; border: 4px solid #10141b; background: var(--lime); color: #17200f; font-size: 25px; justify-self: center; margin-bottom: 14px; box-shadow: 0 5px 22px rgba(168,242,97,.22); }
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .quick-entry-panel { grid-template-columns: 1fr 1fr; margin-top: 9px; }
  .quick-entry { min-height: 62px; padding: 10px 12px; }
  .summary-card { min-height: 135px; padding: 17px; border-radius: 17px; }
  .hero-balance { grid-column: span 2; min-height: 145px; }
  .summary-card:last-child { grid-column: auto; min-height: 135px; }
  .balance-row strong { font-size: 32px; }
  .metric { font-size: 22px; }
  .dashboard-grid { margin-top: 9px; gap: 9px; }
  .panel { border-radius: 17px; }
  .chart-wrap { height: 250px; padding: 0 8px; }
  .chart-day-summary { grid-template-columns: 1fr 1fr; }
  .chart-day-summary > div:nth-child(2) { border-right: 0; }
  .chart-day-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--stroke-soft); }
  .chart-tooltip { width: 205px; }
  .chart-panel .panel-heading { flex-wrap: wrap; }
  .chart-controls { width: 100%; align-items: stretch; flex-direction: row; justify-content: space-between; gap: 8px; }
  .chart-view-controls { flex: 1; min-width: 0; justify-content: space-between; }
  .chart-asset-picker { flex: 1; min-width: 0; }
  .chart-asset-picker select { width: min(210px, 100%); min-width: 0; }
  .chart-mode-toggle { flex: none; }
  .chart-day-events { height: 148px; min-height: 148px; max-height: 148px; }
  .chart-events-title { align-items: flex-start; flex-direction: column; }
  .chart-event-key { justify-content: flex-start; }
  .chart-event-list { flex-direction: column; flex-wrap: nowrap; }
  .chart-event { width: 100%; }
  .chart-legend { padding-inline: 15px; gap: 8px; }
  .chart-legend > span:last-child { text-align: right; }
  .panel-heading { padding-inline: 16px; }
  .allocation-panel { display: block; }
  .lower-grid { display: block; }
  .quick-panel { display: none; }
  .holding-row { grid-template-columns: minmax(130px,1.4fr) .8fr .7fr; }
  .section-toolbar { align-items: center; }
  .section-toolbar .primary-btn { width: 42px; font-size: 0; padding: 0; flex: none; }
  .section-toolbar .primary-btn::first-letter { font-size: 18px; }
  .toolbar-actions { flex: none; }
  .toolbar-actions .secondary-btn { width: 42px; padding: 0; font-size: 0; }
  .toolbar-actions .secondary-btn span { font-size: 14px; }
  .toolbar-actions .secondary-btn i { position: absolute; transform: translate(13px,-13px); font-size: 7px; }
  .asset-stats { grid-template-columns: 1fr 1fr; gap: 9px; }
  .asset-stat:nth-child(n+3) { display: none; }
  .asset-list-head { display: none; }
  .asset-list-row { grid-template-columns: minmax(130px,1.35fr) .75fr .65fr 58px; gap: 8px; }
  .asset-list-row .qty { display: none; }
  .full-assets-list, .expense-list { padding-inline: 16px; }
  .panel-heading:has(.list-controls) { flex-wrap: wrap; }
  .list-controls { width: 100%; }
  .list-controls .search-box { width: auto; flex: 1; }
  .list-controls > select { flex: 1; min-width: 135px; font-size: 9px; }
  .search-box { width: 120px; }
  .income-summary { grid-template-columns: 1fr 1fr; gap: 9px; }
  .income-stat:last-child { grid-column: span 2; }
  .expense-layout { grid-template-columns: 1fr; gap: 9px; }
  .expense-row { grid-template-columns: minmax(130px,1fr) auto 58px; gap: 8px; }
  .expense-account { display: none; }
  .settings-grid { gap: 9px; }
  .provider-list { grid-template-columns: 1fr; margin-inline: 16px; }
  .api-privacy-note { margin-inline: 16px; }
  .telegram-connect { margin-inline: 16px; grid-template-columns: auto 1fr; }
  .telegram-actions { grid-column: 1 / -1; }
  .telegram-actions button { flex: 1; }
  .telegram-pair { margin-inline: 16px; }
  .admin-user-list { padding-inline: 16px; }
  .source-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .toast-stack { bottom: calc(88px + env(safe-area-inset-bottom)); left: 15px; right: 15px; }
  .toast { min-width: 0; max-width: none; }
}

@media (max-width: 520px) {
  .quick-entry small { display: none; }
  .quick-entry { min-height: 56px; }
  .quick-entry > i { width: 32px; height: 32px; }
  .admin-user-row { grid-template-columns: 36px minmax(0,1fr); }
  .admin-user-actions { grid-column: 1 / -1; }
  .admin-user-actions button { flex: 1; }
  .chart-controls { flex-wrap: wrap; }
  .chart-view-controls { width: 100%; flex-wrap: wrap; }
  .chart-asset-picker { width: 100%; }
  .chart-asset-picker select { flex: 1; width: auto; }
  .chart-mode-toggle { width: auto; }
  .chart-expense-breakdown { height: 48px; padding-inline: 15px; }
  .chart-expense-breakdown > b { display: none; }
  .chart-controls .period-tabs { width: 100%; }
  .chart-controls .period-tabs button { flex: 1; }
  .period-tabs button { min-width: 32px; padding: 0 7px; }
  .panel-heading p { max-width: 170px; }
  .holdings-table { padding-inline: 15px; }
  .holding-row { grid-template-columns: minmax(115px,1.3fr) .7fr; }
  .holding-pnl { display: none; }
  .donut-wrap { grid-template-columns: 1fr; }
  .insight-list { grid-template-columns: 1fr; }
  .setting-row { margin-inline: 16px; }
  .setting-row small { max-width: 190px; }
  .backup-callout, .profile-setting { margin-inline: 16px; }
  .backup-actions { padding-inline: 16px; flex-direction: column; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal { max-height: calc(94vh - env(safe-area-inset-top)); border-radius: 24px 24px 0 0; padding: 22px 17px calc(20px + env(safe-area-inset-bottom)); }
  .type-selector { grid-template-columns: repeat(5, minmax(58px,1fr)); overflow-x: auto; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 13px 9px; }
  .category-picker { grid-template-columns: repeat(5, minmax(55px,1fr)); overflow-x: auto; }
  .category-chip { padding: 4px; }
  .amount-input input { width: 185px; font-size: 37px; }
  .modal-actions { position: sticky; bottom: -22px; background: #121720; padding-bottom: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}