:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #071523;
  --panel: rgba(12, 29, 46, 0.9);
  --line: rgba(255, 255, 255, 0.1);
  --text: #f7fbff;
  --muted: #91a5b8;
  --gold: #f6c65b;
  --gold2: #f09a34;
  --green: #40d9a6;
  --red: #ff7188;
  --cyan: #5edcf3;
}

* { box-sizing: border-box; }
html, body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  background: var(--bg);
  color: var(--text);
}
body {
  position: relative;
  touch-action: pan-x pan-y;
  background:
    radial-gradient(circle at 8% 7%, rgba(27, 161, 132, 0.16), transparent 27%),
    radial-gradient(circle at 96% 24%, rgba(240, 154, 52, 0.12), transparent 29%),
    linear-gradient(145deg, #071523, #081321 52%, #0d1827);
}
body::before {
  position: fixed; inset: 0; content: ""; pointer-events: none; opacity: 0.25;
  background-image: radial-gradient(rgba(255,255,255,.14) .7px, transparent .7px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}
button, input, select { max-width: 100%; font: inherit; }
button { cursor: pointer; }
.finance-shell { position: relative; width: min(1240px, calc(100% - 32px)); max-width: 100%; margin: auto; padding: max(12px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom)); }
.finance-shell > main, .finance-topbar, .wealth-copy, .total-wealth, .wealth-cards, .finance-workspace, .section-title, .section-title > div { min-width: 0; max-width: 100%; }
.finance-topbar { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.finance-brand { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.finance-brand > span:last-child { min-width: 0; display: grid; gap: 2px; }
.finance-brand strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finance-brand small { color: var(--muted); font-size: 11px; }
.brand-coin { width: 45px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(246,198,91,.32); border-radius: 50%; color: #2d2109; background: linear-gradient(145deg, #fff0a5, #f4b73e); box-shadow: 0 8px 25px rgba(240,154,52,.22), inset 0 0 0 4px rgba(92,57,9,.12); font: 900 24px Georgia, serif; }
.top-actions { min-width: 0; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.sync-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.sync-status i { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; }
.sync-status.online i { background: var(--green); box-shadow: 0 0 15px var(--green); }
.sync-status.offline i { background: var(--red); }
.soft-button, .outline-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid var(--line); border-radius: 13px; color: #dce8f3; background: rgba(255,255,255,.055); text-decoration: none; white-space: nowrap; }
.soft-button:hover, .outline-button:hover { border-color: rgba(246,198,91,.45); }
main { padding-top: 10px; }

.wealth-hero { position: relative; min-height: 300px; display: grid; grid-template-columns: minmax(0,1fr) minmax(380px,.82fr); align-items: center; gap: 35px; padding: clamp(30px,5vw,58px); border: 1px solid rgba(246,198,91,.2); border-radius: 35px; background: linear-gradient(120deg, rgba(9,44,46,.96), rgba(13,28,43,.96) 52%, rgba(50,35,28,.9)); box-shadow: 0 30px 85px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.05); overflow: hidden; }
.wealth-hero::before { position: absolute; inset: 0; content: ""; pointer-events: none; background-image: linear-gradient(rgba(246,198,91,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(246,198,91,.06) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg, transparent, black); }
.ornament { position: absolute; border: 1px solid rgba(246,198,91,.14); border-radius: 50%; pointer-events: none; }
.ornament::before, .ornament::after { position: absolute; inset: 12%; content: ""; border: 1px solid rgba(246,198,91,.14); border-radius: inherit; }
.ornament::after { inset: 27%; }
.ornament-one { width: 280px; height: 280px; right: -75px; top: -115px; }
.ornament-two { width: 190px; height: 190px; left: 38%; bottom: -145px; }
.wealth-copy, .total-wealth { position: relative; }
.gold-kicker, .rose-kicker { margin: 0 0 7px; color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.rose-kicker { color: #ff8da0; }
.wealth-copy h1 { max-width: 650px; margin: 0; font-size: clamp(35px,5vw,61px); line-height: 1.03; letter-spacing: -.055em; }
.wealth-copy h1 em { color: #ffe39a; font: italic 500 .92em Georgia, serif; }
.wealth-copy > p:last-child { max-width: 590px; margin: 18px 0 0; color: #a5b8c7; line-height: 1.6; }
.total-wealth { min-height: 178px; display: grid; align-content: center; padding: 27px; border: 1px solid rgba(246,198,91,.22); border-radius: 27px; background: linear-gradient(145deg, rgba(246,198,91,.12), rgba(255,255,255,.035)); backdrop-filter: blur(15px); }
.total-wealth span { color: #d7bf84; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.total-wealth strong { margin: 11px 0 8px; color: #fff0bd; font-size: clamp(31px,4vw,50px); line-height: 1; letter-spacing: -.05em; overflow-wrap: anywhere; }
.total-wealth small { color: #9cafbd; line-height: 1.45; }

.wealth-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin: 16px 0; }
.wealth-card { min-height: 118px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 23px; background: rgba(12,29,46,.82); box-shadow: 0 18px 45px rgba(0,0,0,.13); }
.wealth-card > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: rgba(94,220,243,.11); font-size: 23px; }
.wealth-card.investing > span { background: rgba(246,198,91,.12); }
.wealth-card.month-net > span { background: rgba(167,139,250,.12); }
.wealth-card > div { min-width: 0; display: grid; gap: 5px; }
.wealth-card small { color: #8297aa; font-size: 9px; font-weight: 850; letter-spacing: .09em; }
.wealth-card strong { overflow-wrap: anywhere; font-size: clamp(20px,2.3vw,28px); letter-spacing: -.035em; }
.wealth-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }

.accounts-strip-wrap, .month-section, .portfolio-section { max-width: 100%; margin-top: 18px; padding: 25px; border: 1px solid var(--line); border-radius: 28px; background: rgba(11,27,44,.75); box-shadow: 0 22px 65px rgba(0,0,0,.16); }
.accounts-strip-wrap { overflow: hidden; }
.section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 17px; margin-bottom: 18px; }
.section-title h2 { margin: 0; font-size: clamp(23px,3vw,31px); letter-spacing: -.04em; }
.section-title > div > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.compact-title { align-items: center; margin-bottom: 14px; }
.compact-title h2 { font-size: 21px; }
.accounts-strip { width: 100%; max-width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.account-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(255,255,255,.035); }
.account-card > span { width: 41px; height: 41px; display: grid; place-items: center; border-radius: 13px; background: rgba(246,198,91,.1); font-size: 20px; }
.account-card div { min-width: 0; display: grid; gap: 4px; }
.account-card small { color: var(--muted); }
.account-card strong { overflow-wrap: anywhere; color: #e9f5ff; font-size: 17px; }

.finance-workspace { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(360px,.95fr); gap: 18px; margin-top: 18px; align-items: start; }
.finance-panel { padding: 25px; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: 0 24px 70px rgba(0,0,0,.19); }
.type-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; border-radius: 16px; background: rgba(0,0,0,.22); }
.type-switch button { min-height: 46px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; font-weight: 800; }
.type-switch .expense.active { color: #ffe4e8; background: rgba(255,113,136,.2); box-shadow: inset 0 0 0 1px rgba(255,113,136,.18); }
.type-switch .income.active { color: #d6fff1; background: rgba(64,217,166,.18); box-shadow: inset 0 0 0 1px rgba(64,217,166,.17); }
.amount-field, .description-field, .entry-meta label, .budget-total { min-width: 0; display: grid; gap: 7px; }
.amount-field { margin-top: 17px; }
.amount-field > span, .description-field > span, .entry-meta label > span, .budget-total > span, .category-field legend { color: #849aab; font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.amount-field > div, .budget-total > div { display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid rgba(246,198,91,.23); border-radius: 17px; background: rgba(246,198,91,.06); }
.amount-field input, .budget-total input { min-width: 0; height: 67px; padding: 0 18px; border: 0; outline: 0; color: #fff0bd; background: transparent; font-size: clamp(31px,5vw,43px); font-weight: 850; letter-spacing: -.04em; }
.amount-field b, .budget-total b { padding-right: 18px; color: var(--gold); font-size: 23px; }
.quick-amounts, .budget-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.quick-amounts button, .budget-suggestions button { min-height: 38px; flex: 1 1 68px; padding: 0 10px; border: 1px solid rgba(246,198,91,.15); border-radius: 11px; color: #f7d989; background: rgba(246,198,91,.07); font-weight: 750; }
.quick-amounts .clear-amount { color: #9dafbe; border-color: var(--line); background: rgba(255,255,255,.04); }
.category-field { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
.category-field legend { margin-bottom: 9px; }
.category-buttons { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.category-button { min-width: 0; min-height: 66px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 7px; border: 1px solid rgba(255,255,255,.075); border-radius: 14px; color: #c9d6e1; background: rgba(255,255,255,.035); }
.category-button i { font-size: 20px; font-style: normal; }
.category-button span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.category-button.active { border-color: rgba(246,198,91,.42); color: #fff1bd; background: rgba(246,198,91,.1); box-shadow: 0 8px 24px rgba(246,198,91,.07); }
.description-field { margin-top: 16px; }
.description-field input, .entry-meta input, .entry-meta select, .month-input, .budget-total input, .account-setting input, .new-account input { width: 100%; min-width: 0; max-width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; outline: 0; color: var(--text); background: rgba(255,255,255,.055); }
.description-field input:focus, .entry-meta input:focus, .entry-meta select:focus { border-color: rgba(246,198,91,.48); box-shadow: 0 0 0 3px rgba(246,198,91,.08); }
.entry-meta { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 11px; }
.entry-meta input, .month-input { color-scheme: dark; }
input[type="date"], input[type="month"] { display: block; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; }
.save-transaction, .save-budget { width: 100%; min-height: 51px; margin-top: 14px; border: 0; border-radius: 15px; color: #291b05; background: linear-gradient(135deg,#ffe18c,#f2aa35); box-shadow: 0 13px 28px rgba(240,154,52,.16); font-weight: 900; }
.save-transaction.income { color: #032319; background: linear-gradient(135deg,#7df0c8,#40d9a6); }
.save-transaction:disabled, .save-budget:disabled { opacity: .55; cursor: wait; }

.month-input { width: auto; min-width: 145px; }
.budget-overview { min-height: 115px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 17px; padding: 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 19px; background: rgba(255,255,255,.035); }
.budget-ring { --progress: 0deg; width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--gold) var(--progress), rgba(255,255,255,.075) 0); }
.budget-ring::before { grid-area: 1/1; width: 61px; height: 61px; content: ""; border-radius: 50%; background: #102335; }
.budget-ring span { position: relative; font-size: 13px; font-weight: 850; }
.budget-overview > div:last-child { min-width: 0; display: grid; gap: 5px; }
.budget-overview small { color: #8599aa; font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.budget-overview strong { overflow-wrap: anywhere; font-size: 17px; }
.budget-overview p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.budget-total { margin-top: 16px; }
.budget-total input { height: 52px; padding-left: 13px; font-size: 20px; }
.budget-total b { font-size: 16px; }
.budget-suggestions button { flex-basis: 73px; color: #c9d7e2; border-color: var(--line); background: rgba(255,255,255,.04); }
.category-budget-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 19px 0 9px; }
.category-budget-head small { color: var(--muted); font-size: 9px; }
.category-budgets { display: grid; gap: 7px; }
.category-budget { display: grid; grid-template-columns: auto 1fr minmax(110px,.7fr); align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.025); }
.category-budget > span { font-size: 20px; }
.category-budget div { min-width: 0; display: grid; gap: 4px; }
.category-budget strong { font-size: 11px; }
.category-budget small { color: var(--muted); font-size: 9px; }
.category-budget input { width: 100%; min-width: 0; min-height: 39px; padding: 0 9px; border: 1px solid var(--line); border-radius: 10px; color: #f6d98d; background: rgba(0,0,0,.14); text-align: right; }

.month-heading { align-items: end; }
.month-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 15px; }
.month-summary article { min-height: 92px; display: grid; align-content: center; gap: 8px; padding: 15px; border: 1px solid rgba(255,255,255,.075); border-radius: 17px; background: rgba(255,255,255,.035); }
.month-summary small { color: #8297a9; font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.month-summary strong { overflow-wrap: anywhere; font-size: clamp(19px,2.5vw,27px); }
.positive { color: #6ee7b7 !important; }
.negative { color: #fda4af !important; }
.daily-ledger { display: grid; gap: 10px; }
.day-book { border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(255,255,255,.025); overflow: hidden; }
.day-book[open] { border-color: rgba(246,198,91,.18); }
.day-book summary { min-height: 76px; display: grid; grid-template-columns: minmax(130px,1fr) repeat(2,minmax(120px,.55fr)) auto; align-items: center; gap: 12px; padding: 12px 15px; list-style: none; cursor: pointer; }
.day-book summary::-webkit-details-marker { display: none; }
.day-label { display: grid; gap: 3px; }
.day-label strong { font-size: 14px; }.day-label small { color: var(--muted); }
.day-total { display: grid; gap: 3px; }
.day-total span { color: #8195a8; font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.day-total b { font-size: 14px; overflow-wrap: anywhere; }
.day-chevron { color: var(--gold); font-size: 20px; transition: transform .2s; }
.day-book[open] .day-chevron { transform: rotate(180deg); }
.transaction-list { display: grid; gap: 1px; border-top: 1px solid rgba(255,255,255,.07); }
.transaction-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 11px; min-height: 64px; padding: 9px 14px; background: rgba(0,0,0,.08); }
.transaction-row + .transaction-row { border-top: 1px solid rgba(255,255,255,.045); }
.transaction-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,113,136,.09); font-size: 18px; }
.transaction-row.income .transaction-icon { background: rgba(64,217,166,.09); }
.transaction-copy { min-width: 0; display: grid; gap: 3px; }
.transaction-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.transaction-copy small { color: var(--muted); font-size: 9px; }
.transaction-amount { color: #fda4af; font-size: 13px; white-space: nowrap; }
.transaction-row.income .transaction-amount { color: #6ee7b7; }
.transaction-actions { display: flex; gap: 2px; }
.transaction-actions button { width: 34px; height: 34px; border: 0; border-radius: 10px; color: #91a5b8; background: transparent; font-size: 16px; }
.transaction-actions button:hover { color: #fff; background: rgba(255,255,255,.07); }
.empty-ledger { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted); text-align: center; }
.empty-ledger span { font-size: 40px; }.empty-ledger strong { color: #e4edf6; }.empty-ledger p { margin: 0; font-size: 11px; }

.portfolio-section { position: relative; overflow: hidden; background: linear-gradient(145deg,rgba(36,25,49,.86),rgba(10,24,40,.9)); }
.portfolio-section::before { position: absolute; width: 280px; height: 280px; right: -120px; top: -145px; content: ""; border-radius: 50%; background: rgba(255,113,136,.13); filter: blur(4px); }
.portfolio-heading, .portfolio-kpis, .portfolio-details { position: relative; }
.portfolio-heading-actions { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px; flex-direction: column; }
.report-date { padding: 7px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; color: #b2c0ce; background: rgba(0,0,0,.16); font-size: 10px; white-space: nowrap; }
.portfolio-manage-button { min-height: 40px; padding: 0 13px; border: 1px solid rgba(255,141,160,.28); border-radius: 12px; color: #ffd8df; background: rgba(255,113,136,.1); font-weight: 800; white-space: nowrap; }
.portfolio-manage-button:hover { border-color: rgba(255,141,160,.55); background: rgba(255,113,136,.16); }
.portfolio-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.pnl-main { grid-column: 1/-1; min-height: 112px; display: grid; grid-template-columns: 1fr auto; align-content: center; align-items: end; gap: 6px 15px; padding: 18px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(255,255,255,.04); }
.pnl-main span, .portfolio-tile span { color: #8497aa; font-size: 9px; font-weight: 850; letter-spacing: .09em; }
.pnl-main strong { grid-row: 2; font-size: clamp(31px,4vw,48px); line-height: 1; letter-spacing: -.055em; overflow-wrap: anywhere; }
.pnl-main small { grid-column: 2; grid-row: 2; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.07); font-weight: 850; }
.pnl-main.profit strong, .pnl-main.profit small { color: #6ee7b7; }.pnl-main.loss strong, .pnl-main.loss small { color: #fda4af; }
.portfolio-tile { min-height: 83px; display: grid; align-content: center; gap: 7px; padding: 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: rgba(255,255,255,.035); }
.portfolio-tile strong { overflow-wrap: anywhere; font-size: 15px; }
.portfolio-sync-note { position: relative; margin: 11px 2px 0; color: #91a5b8; font-size: 10px; line-height: 1.5; }
.portfolio-details { margin-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.portfolio-details summary { min-height: 49px; display: flex; align-items: center; justify-content: space-between; list-style: none; color: #ced9e5; cursor: pointer; font-weight: 750; }
.portfolio-details summary::-webkit-details-marker { display: none; }
.portfolio-details b { color: #ff8da0; font-size: 20px; transition: transform .2s; }.portfolio-details[open] b { transform: rotate(180deg); }
.report-content { max-height: 500px; overflow-y: auto; padding: 3px 4px 8px 0; color: #b9c6d5; font-size: 12px; line-height: 1.6; overscroll-behavior: contain; }
.report-content h4 { margin: 16px 0 7px; color: #f4f8fc; }.report-content p { margin: 7px 0; }.report-content ul { padding-left: 20px; }.report-content li { margin: 6px 0; }
.loading-bar { min-height: 90px; border-radius: 17px; background: linear-gradient(100deg,rgba(255,255,255,.035),rgba(255,255,255,.09),rgba(255,255,255,.035)); background-size: 220% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }

.finance-dialog { width: min(720px,calc(100% - 24px)); max-height: min(84vh,760px); padding: 0; border: 1px solid var(--line); border-radius: 25px; color: var(--text); background: #0c1e30; box-shadow: 0 35px 110px rgba(0,0,0,.7); }
.finance-dialog::backdrop { background: rgba(2,8,15,.78); backdrop-filter: blur(8px); }
.finance-login-dialog { width: min(450px,calc(100% - 24px)); }
.finance-login-card { padding: 28px; }
.login-coin { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 17px; border: 1px solid rgba(246,198,91,.32); border-radius: 22px; color: #ffe39a; background: linear-gradient(145deg,rgba(246,198,91,.2),rgba(185,108,26,.12)); box-shadow: 0 18px 40px rgba(0,0,0,.25); font-family: Georgia,serif; font-size: 35px; }
.finance-login-card > .gold-kicker, .finance-login-card h2, .finance-login-card > p, .finance-login-card > a { text-align: center; }
.finance-login-card h2 { margin: 0; font-size: 25px; letter-spacing: -.035em; }
.finance-login-card > p:not(.gold-kicker) { margin: 10px 0 17px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.finance-login-card label { display: grid; gap: 7px; margin-top: 13px; color: #cbd7e2; font-size: 12px; }
.finance-login-card input { width: 100%; min-height: 49px; padding: 0 13px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; outline: 0; color: var(--text); background: rgba(255,255,255,.055); }
.finance-login-card input:focus { border-color: rgba(246,198,91,.48); box-shadow: 0 0 0 3px rgba(246,198,91,.08); }
.password-field { display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; background: rgba(255,255,255,.055); overflow: hidden; }
.password-field input { min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none !important; }
.password-toggle { width: 49px; height: 49px; border: 0; color: #8fa4b5; background: transparent; cursor: pointer; font-size: 18px; filter: grayscale(1); }
.password-toggle:hover, .password-toggle.active { color: var(--gold); background: rgba(246,198,91,.08); filter: none; }
.finance-login-card .remember-option { display: flex; align-items: center; gap: 10px; cursor: pointer; line-height: 1.35; }
.remember-option input { width: 19px; height: 19px; min-height: 19px; margin: 0; padding: 0; accent-color: #e6b54d; flex: 0 0 auto; }
.login-error { min-height: 19px; margin: 9px 0 0 !important; color: #fda4af !important; font-size: 11px !important; text-align: left !important; }
.finance-login-button { width: 100%; min-height: 50px; margin-top: 3px; border: 0; border-radius: 14px; color: #291b05; background: linear-gradient(135deg,#ffe18c,#f2aa35); box-shadow: 0 13px 28px rgba(240,154,52,.16); font-weight: 900; }
.finance-login-button:disabled { opacity: .55; cursor: wait; }
.finance-login-card > a { display: block; margin-top: 15px; color: #8fa3b5; text-decoration: none; font-size: 11px; }
.dialog-card { padding: 23px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.dialog-head h2 { margin: 0; }.dialog-head button { width: 40px; height: 40px; border: 0; border-radius: 12px; color: #d5e1ec; background: rgba(255,255,255,.06); font-size: 24px; }
.dialog-note { color: var(--muted); font-size: 11px; line-height: 1.5; }
.account-settings { display: grid; gap: 8px; margin-top: 15px; }
.account-setting { display: grid; grid-template-columns: 58px 1fr minmax(140px,.75fr) auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 15px; background: rgba(255,255,255,.025); }
.account-setting input { min-width: 0; }.account-setting .account-icon-input { text-align: center; font-size: 20px; }
.account-setting button, .new-account button { min-height: 43px; padding: 0 12px; border: 0; border-radius: 11px; color: #261a04; background: linear-gradient(135deg,#ffe18c,#f2aa35); font-weight: 850; }
.new-account { display: grid; grid-template-columns: 58px 1fr minmax(140px,.75fr) auto; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.new-account #newAccountIcon { text-align: center; font-size: 20px; }
.portfolio-dialog { width: min(760px,calc(100% - 24px)); overflow: hidden; }
.portfolio-manager-card { max-height: min(84vh,780px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.portfolio-warning { margin: 14px 0; padding: 11px 13px; border: 1px solid rgba(246,198,91,.15); border-radius: 13px; color: #aebdca; background: rgba(246,198,91,.055); font-size: 11px; line-height: 1.5; }
.portfolio-warning strong { color: #ffe3a0; }
.portfolio-current { display: grid; grid-template-columns: minmax(175px,.65fr) minmax(0,1.35fr); gap: 9px; }
.portfolio-current > div { min-width: 0; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(255,255,255,.035); }
.portfolio-current > div:first-child { display: grid; align-content: center; gap: 7px; }
.portfolio-current small, .portfolio-trade-fields label > span:first-child, .portfolio-withdraw-field > span:first-child { color: #8298aa; font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.portfolio-current > div:first-child strong { color: #fff0bd; font-size: 21px; overflow-wrap: anywhere; }
.portfolio-holding-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.portfolio-holding-chips button { min-width: 0; display: grid; gap: 3px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; color: #eaf4fc; background: rgba(0,0,0,.14); text-align: left; }
.portfolio-holding-chips button:hover { border-color: rgba(255,141,160,.4); }
.portfolio-holding-chips button strong { color: #ffb1be; font-size: 11px; }.portfolio-holding-chips button span { color: #8fa4b5; font-size: 9px; }
.portfolio-empty-holding { color: var(--muted); font-size: 10px; }
.portfolio-action-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 13px; padding: 5px; border-radius: 15px; background: rgba(0,0,0,.2); }
.portfolio-action-tabs button { min-height: 43px; border: 0; border-radius: 11px; color: #91a5b8; background: transparent; font-weight: 850; }
.portfolio-action-tabs .buy.active { color: #cffff0; background: rgba(64,217,166,.16); }.portfolio-action-tabs .sell.active { color: #ffe0e5; background: rgba(255,113,136,.17); }.portfolio-action-tabs .withdraw.active { color: #fff0bd; background: rgba(246,198,91,.15); }
.portfolio-trade-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }
.portfolio-trade-fields label, .portfolio-withdraw-field { min-width: 0; display: grid; gap: 6px; }
.portfolio-trade-fields input, .portfolio-withdraw-field input { width: 100%; min-width: 0; min-height: 48px; padding: 0 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; outline: 0; color: var(--text); background: rgba(255,255,255,.05); }
.portfolio-trade-fields input:focus, .portfolio-withdraw-field input:focus { border-color: rgba(255,141,160,.45); box-shadow: 0 0 0 3px rgba(255,113,136,.07); }
.portfolio-money-field { display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; background: rgba(255,255,255,.05); }
.portfolio-money-field input { border: 0; background: transparent; box-shadow: none !important; }.portfolio-money-field b { padding-right: 12px; color: #d9b965; }
.portfolio-withdraw-field { margin-top: 13px; }
.portfolio-action-preview { min-height: 52px; display: flex; align-items: center; margin-top: 12px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; color: #a9bac8; background: rgba(255,255,255,.035); font-size: 11px; line-height: 1.5; }
.portfolio-action-preview.ready { border-color: rgba(64,217,166,.2); color: #c9f9e8; background: rgba(64,217,166,.07); }.portfolio-action-preview.invalid { border-color: rgba(255,113,136,.25); color: #ffc3cd; background: rgba(255,113,136,.07); }
.portfolio-submit-button { width: 100%; min-height: 50px; margin-top: 11px; border: 0; border-radius: 14px; color: #281b05; background: linear-gradient(135deg,#ffe18c,#f2aa35); box-shadow: 0 13px 28px rgba(240,154,52,.14); font-weight: 900; }
.portfolio-submit-button:disabled { opacity: .55; cursor: wait; }
.portfolio-cron-note { margin: 9px 2px 0; color: #7f94a6; font-size: 9px; line-height: 1.5; }
.portfolio-history { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.portfolio-history > div:first-child { display: flex; justify-content: space-between; gap: 10px; }.portfolio-history > div:first-child small { color: var(--muted); font-size: 9px; }
#portfolioActionHistory { display: grid; gap: 7px; margin-top: 9px; }
#portfolioActionHistory article { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 9px; align-items: start; padding: 9px; border-radius: 12px; background: rgba(255,255,255,.025); }
#portfolioActionHistory article > span { min-width: 54px; padding: 5px 7px; border-radius: 8px; color: #d9e3eb; background: rgba(255,255,255,.07); font-size: 9px; font-weight: 850; text-align: center; }
#portfolioActionHistory article > span.buy { color: #bff7e2; background: rgba(64,217,166,.11); }#portfolioActionHistory article > span.sell { color: #ffc0cb; background: rgba(255,113,136,.11); }#portfolioActionHistory article > span.withdraw { color: #ffe7a7; background: rgba(246,198,91,.11); }
#portfolioActionHistory article div { min-width: 0; display: grid; gap: 3px; }#portfolioActionHistory article strong { font-size: 11px; }#portfolioActionHistory article small { color: #8297a9; font-size: 9px; line-height: 1.45; }
.portfolio-empty-history { margin: 0; color: var(--muted); font-size: 10px; }
.finance-toast { position: fixed; z-index: 50; left: 50%; bottom: max(23px,env(safe-area-inset-bottom)); max-width: calc(100% - 28px); padding: 12px 16px; border: 1px solid rgba(246,198,91,.2); border-radius: 14px; color: #fff4d0; background: #183044; box-shadow: 0 18px 55px rgba(0,0,0,.45); opacity: 0; translate: -50% 17px; transition: .2s; pointer-events: none; }
.finance-toast.show { opacity: 1; translate: -50% 0; }
footer { padding: 27px 4px 7px; color: #61768a; text-align: center; font-size: 11px; }
[hidden] { display: none !important; }

@media (max-width: 930px) {
  .wealth-hero { grid-template-columns: 1fr; }
  .wealth-cards { grid-template-columns: 1fr 1fr; }
  .wealth-card.month-net { grid-column: 1/-1; }
  .finance-workspace { grid-template-columns: 1fr; }
  .accounts-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 650px) {
  .finance-shell { width: min(100%,578px); padding-right: max(9px,env(safe-area-inset-right)); padding-left: max(9px,env(safe-area-inset-left)); }
  .finance-topbar { min-height: 56px; gap: 8px; }
  .finance-brand { gap: 8px; }
  .brand-coin { width: 41px; height: 41px; font-size: 22px; }
  .top-actions { gap: 5px; }
  .finance-brand small, .sync-status span { display: none; }
  .soft-button { min-height: 38px; padding: 0 10px; font-size: 11px; }
  .wealth-hero { min-height: 0; gap: 24px; padding: 28px 20px 21px; border-radius: 26px; }
  .wealth-copy h1 { font-size: 37px; }
  .wealth-copy > p:last-child { font-size: 12px; }
  .total-wealth { min-height: 140px; padding: 20px; border-radius: 21px; }
  .total-wealth strong { font-size: clamp(30px,10vw,42px); }
  .wealth-cards { grid-template-columns: 1fr; gap: 9px; }
  .wealth-card.month-net { grid-column: auto; }
  .wealth-card { min-height: 97px; padding: 14px; border-radius: 19px; }
  .accounts-strip-wrap, .month-section, .portfolio-section, .finance-panel { padding: 18px 14px; border-radius: 23px; }
  .compact-title { align-items: flex-start; }
  .compact-title .outline-button { max-width: 126px; min-height: 38px; font-size: 10px; }
  .accounts-strip { display: flex; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; padding-bottom: 3px; -webkit-overflow-scrolling: touch; }
  .account-card { min-width: 210px; scroll-snap-align: start; }
  .category-buttons { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .category-button { min-height: 62px; padding: 5px 3px; }
  .entry-meta { grid-template-columns: 1fr; }
  .section-title { align-items: flex-start; }
  .budget-panel .section-title { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) minmax(145px,170px); }
  .budget-panel .month-input { width: 100%; min-width: 0; max-width: 170px; justify-self: end; }
  .month-heading { display: grid; grid-template-columns: 1fr; }
  .month-input { width: 100%; }
  .month-summary { grid-template-columns: 1fr 1fr; }
  .month-summary article:last-child { grid-column: 1/-1; }
  .day-book summary { grid-template-columns: 1fr auto; gap: 8px; }
  .day-total { grid-row: 2; }
  .day-chevron { grid-column: 2; grid-row: 1/3; }
  .transaction-row { grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; padding: 9px; }
  .transaction-actions { grid-column: 2/4; justify-content: flex-end; }
  .portfolio-heading { display: grid; grid-template-columns: 1fr; }
  .portfolio-heading-actions { width: 100%; align-items: stretch; flex-direction: row; justify-content: space-between; }
  .portfolio-manage-button { min-width: 0; font-size: 10px; }
  .report-date { width: fit-content; }
  .portfolio-kpis { grid-template-columns: 1fr 1fr; }
  .pnl-main { grid-template-columns: 1fr; }
  .pnl-main small { grid-column: 1; grid-row: 3; justify-self: start; }
  .account-setting, .new-account { grid-template-columns: 50px 1fr; }
  .account-setting input:nth-child(3), .new-account input:nth-child(3) { grid-column: 1/-1; }
  .account-setting button, .new-account button { grid-column: 1/-1; }
  .portfolio-dialog { width: calc(100% - 14px); max-height: calc(100dvh - 18px); border-radius: 20px; }
  .portfolio-manager-card { max-height: calc(100dvh - 18px); padding: 18px 14px max(18px,env(safe-area-inset-bottom)); }
  .portfolio-current { grid-template-columns: 1fr; }
  .portfolio-trade-fields { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .finance-brand strong { font-size: 14px; }
  #accountsButton { display: none; }
  .wealth-copy h1 { font-size: 33px; }
  .category-buttons { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .budget-panel .section-title { grid-template-columns: minmax(0,1fr); }
  .budget-panel .month-input { width: 100%; max-width: none; justify-self: stretch; }
  .quick-amounts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .quick-amounts button { width: 100%; min-width: 0; min-height: 42px; padding: 0 6px; }
  .quick-amounts .clear-amount { grid-column: 1/-1; }
  .budget-suggestions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .budget-suggestions button { width: 100%; min-width: 0; min-height: 46px; padding: 0 7px; line-height: 1.15; }
  .budget-suggestions button:last-child { grid-column: 1/-1; }
  .portfolio-kpis { grid-template-columns: 1fr; }
  .pnl-main { grid-column: auto; }
  .portfolio-action-tabs button { min-height: 40px; padding: 0 5px; font-size: 10px; }
}

@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

@media (display-mode: standalone) {
  .finance-shell { padding-top: max(12px,env(safe-area-inset-top)); }
}