/* Personal Finance Hub 8 — one responsive presentation system. No financial rules. */
:root {
  --bg:#f4f3ed; --card:#fffefa; --soft:#edf0e7; --ink:#243b33;
  --muted:#596a60; --line:#dce3d8; --control-line:#8a9c8c;
  --green:#2d5c49; --green-soft:#e4ecdf; --sidebar:#163f34;
  --gold:#96763b; --red:#a34637; --blue:#537b7d;
  --shadow:0 3px 6px #183b2c02,0 14px 38px #183b2c05;
  --radius:20px; --chart-1:#3f7358; --chart-2:#a1803f;
  --chart-3:#568c8a; --chart-4:#b7735a; --chart-5:#637c9d; --chart-6:#81875a;
  --header-height:80px; --nav-height:80px;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
:root[data-theme="dark"] {
  --bg:#192820; --card:#24372c; --soft:#2d4235; --ink:#f0f2e7;
  --muted:#bdcabb; --line:#435b49; --control-line:#8d9f8b;
  --green:#bad3a2; --green-soft:#354e3c; --sidebar:#142e25;
  --gold:#d6ba7b; --red:#f0aa98; --blue:#9bc3be; --shadow:0 8px 30px #0000000d;
  --chart-1:#b2d096; --chart-2:#d2b77b; --chart-3:#8dbdb6;
  --chart-4:#dda38d; --chart-5:#a0b9d5; --chart-6:#c3cc95;
}
html {scroll-padding-top:96px;}
body {font-size:14px;line-height:1.6;}
button,input,select,textarea {min-width:0;}
button,a {touch-action:manipulation;}
.ui-icon {display:inline-block;width:20px;height:20px;flex:0 0 20px;vertical-align:middle;stroke-width:1.8;}
.shell {grid-template-columns:248px minmax(0,1fr);}
.sidebar {width:248px;padding:30px 16px 20px;border-right:1px solid #ffffff0b;}
.brand {gap:12px;padding:0 10px 26px;align-items:center;}
.brand img {width:64px;height:64px;border-radius:22%;box-shadow:0 2px 10px #0002;object-fit:cover;}
.brand b {font:500 21px/1.1 Georgia,serif;letter-spacing:-.025em;}
.brand small {font-size:7.5px;letter-spacing:.1em;line-height:1.5;color:#ccdccb;opacity:.85;}
.nav-group {color:#b9cebf;font-size:10px;padding:20px 15px 8px;}
.nav-item {gap:12px;padding:12px 15px;min-height:48px;border-radius:12px;font-size:13px;line-height:1.5;}
.nav-item svg {width:21px;height:21px;stroke-width:1.8;}
.nav-item.active {background:#e5eddf;box-shadow:inset 3px 0 #a5b88a;}
.sidebar-foot {font-size:11px;line-height:1.7;}
.topbar {height:80px;padding:0 36px;}
.main {padding:32px 36px 52px;max-width:1800px;}
.top-actions {gap:8px;flex-shrink:0;}
.icon-btn,.lang-btn {width:42px;height:42px;border-radius:13px;flex:0 0 42px;}
.icon-btn svg {width:21px;height:21px;}
h1 {font-size:clamp(29px,2.7vw,38px);line-height:1.17;letter-spacing:-.035em;}
h2 {font-size:17px;line-height:1.5;letter-spacing:-.015em;}
h3 {line-height:1.5;}
.page-head {gap:24px;margin-bottom:26px;align-items:flex-start;}
.page-head>.actions {max-width:46%;padding-top:4px;gap:9px;}
.subtitle {font-size:13px;line-height:1.75;}
.eyebrow {letter-spacing:.12em;font-size:10px;}
.btn {min-height:42px;padding:10px 14px;border-radius:11px;gap:8px;font-size:12px;line-height:1.45;max-width:100%;text-align:center;}
.btn-label {min-width:0;overflow-wrap:anywhere;}
.btn .ui-icon {width:17px;height:17px;flex-basis:17px;}
.btn.primary {box-shadow:0 2px 4px #183c2310;}
.btn.primary:hover:not(:disabled) {filter:brightness(1.04);}
.btn.small {min-height:36px;font-size:11px;padding:7px 10px;}
.btn.symbol-button {width:40px;min-width:40px;min-height:40px;padding:8px;}
.actions {gap:9px;}
.actions>.btn {flex-shrink:1;}
.card {padding:24px;border-radius:var(--radius);box-shadow:var(--shadow);container:panel / inline-size;}
.card-head {gap:12px 16px;margin-bottom:20px;align-items:center;}
.card-head>h2 {flex:1 1 190px;}
.card-head>input {flex:1 1 190px;}
.card-head>.actions {flex:0 1 auto;}
.card-head>.badge {flex:0 1 auto;max-width:100%;white-space:normal;}
.card-note,.field-help {line-height:1.75;font-size:12px;overflow-wrap:break-word;}
.grid {gap:20px;}
.metrics {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:14px;margin-bottom:24px;align-items:stretch;}
.metric {padding:20px;border-radius:16px;display:flex;flex-direction:column;box-shadow:0 2px 5px #19352902;}
.metric-label {font-size:12px;line-height:1.5;gap:8px;align-items:flex-start;min-height:36px;}
.metric-label>span {overflow-wrap:break-word;}
.metric-value {margin-top:auto;padding-top:12px;font-size:28px;font-weight:650;line-height:1.35;letter-spacing:-.035em;white-space:nowrap;overflow-wrap:normal;font-variant-numeric:tabular-nums lining-nums;}
.metric-note {font-size:11px;line-height:1.6;margin-top:8px;}
.metric.highlight {background:linear-gradient(130deg,var(--green-soft),var(--card));border-color:var(--control-line);}
.info-dot {margin-left:5px;border:0;background:transparent;color:var(--muted);width:30px;height:30px;min-width:30px;flex-basis:30px;border-radius:10px;font:inherit;}
.info-dot .ui-icon {width:18px;height:18px;flex-basis:18px;stroke-width:1.7;}
.info-dot:hover {background:var(--green-soft);color:var(--green);}
.metric-label .info-dot {margin:-4px -4px 0 0;}
.chart-information .info-dot {width:30px;height:30px;}
.field-label-row {align-items:flex-start;gap:6px;}
.field-label-row .info-dot {margin-top:-4px;}
.tabs {gap:5px;padding:3px 2px 16px;scrollbar-width:thin;scroll-snap-type:x proximity;}
.tab {min-height:44px;padding:10px 14px;border:1px solid transparent;border-radius:11px;font-size:12px;scroll-snap-align:start;}
.tab.active {border-color:var(--line);box-shadow:0 1px 3px #182c2505;}
.filters {padding:18px;gap:13px 16px;border-radius:16px;}
.filters>div,.field-row>div,.dialog-fields>div {min-width:0;}
.filters label {line-height:1.5;min-height:15px;font-weight:600;letter-spacing:.035em;}
input,select,textarea {border-radius:11px;line-height:1.5;min-height:44px;scroll-margin-top:110px;scroll-margin-bottom:150px;}
input[type="checkbox"],input[type="radio"] {width:19px;height:19px;min-width:19px;min-height:19px;flex:none;accent-color:var(--green);}
input[type="date"],input[type="month"] {width:100%;min-width:0;max-width:100%;}
input[type="date"]::-webkit-date-and-time-value,input[type="month"]::-webkit-date-and-time-value {text-align:left;min-height:1.5em;}
.field-row,.field-row.three {gap:16px;}
.badge {font-size:10px;line-height:1.5;padding:5px 9px;border-radius:7px;}
.hero {padding:26px;border-radius:20px;}
.hero h2 {font-size:27px;line-height:1.25;}
.hero-logo {width:72px;height:72px;object-fit:cover;}
.chart-box {min-height:0;min-width:0;margin-top:12px;}
.chart {max-width:100%;overflow:hidden;}
.chart text {font-size:12px;}
.chart .axis-label {font-size:11px;}
.chart .donut-caption {font-size:11px;letter-spacing:.01em;}
.chart-legend {display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px;padding:6px 0;line-height:1.7;font-size:11px;}
.chart-legend span {align-items:center;overflow-wrap:anywhere;gap:7px;}
.chart-legend i {width:9px;height:9px;flex:0 0 9px;border-radius:50%;margin:0;}
.chart-controls {gap:10px;margin:4px 0 18px;}
.chart-controls select {min-height:40px;padding:8px 11px;max-width:100%;}
.chart-tooltip {font-size:12px;line-height:1.7;border:1px solid var(--line);padding:12px 15px;box-shadow:0 8px 32px #0002;}
.table-wrap {border:1px solid var(--line);border-radius:12px;isolation:isolate;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
table {font-size:12px;}
th {font-size:10px;font-weight:650;letter-spacing:.045em;background:var(--soft);}
th,td {padding:14px 13px;line-height:1.6;vertical-align:middle;}
tbody tr:last-child td {border-bottom:0;}
tbody tr:hover {background:color-mix(in srgb,var(--green-soft) 24%,transparent);}
th.numeric-head {text-align:right;}
td.numeric-cell,td.num {font-variant-numeric:tabular-nums lining-nums;}
td small {font-size:11px;line-height:1.5;max-width:270px;}
td .actions {gap:7px;}
.table-scroll-hint {display:flex;align-items:center;gap:8px;padding:0 2px 10px;font-size:11px;line-height:1.6;}
.table-scroll-hint .ui-icon {width:17px;height:17px;flex-basis:17px;color:var(--green);}
.list-row {gap:16px;align-items:flex-start;padding:15px 0;}
.list-row>* {min-width:0;}
.list-row .title {font-size:13px;overflow-wrap:anywhere;}
.list-row small {line-height:1.6;}
.list-row>.amount,.list-row>strong {flex:0 0 auto;white-space:nowrap;}
.details-list li {display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,auto);gap:12px;align-items:start;padding:12px 0;}
.details-list li>strong,.details-list li>b {text-align:right;overflow-wrap:anywhere;}
.split-label {flex-wrap:wrap;gap:8px;}
.security-note {align-items:flex-start;gap:10px;font-size:12px;}
.security-note>svg {width:20px;height:20px;flex:0 0 20px;margin-top:3px;}
.status-item {padding:15px;line-height:1.7;}
.status-item strong {font-size:12px;line-height:1.7;}
.progress {height:6px;margin:14px 0;}
.setup-row {grid-template-columns:minmax(0,1fr) minmax(110px,140px) 44px;gap:12px;align-items:center;}
.setup-row>* {min-width:0;}
.setup-row>.btn {width:44px;min-width:44px;}
.goal-value {font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.collapse {padding:15px 16px;border-radius:13px;}
.collapse summary {min-height:24px;line-height:1.7;}
.check-grid label {min-height:40px;align-items:center;line-height:1.6;gap:10px;}
.footer {font-size:11px;line-height:1.75;gap:14px;}
dialog {width:min(820px,calc(100vw - 32px));border-radius:22px;}
dialog[open] {max-height:calc(var(--visual-height,100dvh) - 32px);}
.dialog-head {padding:22px 26px 18px;align-items:flex-start;gap:16px;}
.dialog-head h2 {font-size:26px;line-height:1.25;overflow-wrap:break-word;}
.dialog-body {padding:12px 26px 24px;-webkit-overflow-scrolling:touch;}
.dialog-head+.dialog-body {padding-top:20px;}
.dialog-foot {padding:16px 26px;background:var(--card);gap:10px;border-top:1px solid var(--line);}
.dialog-foot .btn {min-height:44px;}
.close-btn {width:40px;height:40px;flex:0 0 40px;border-radius:12px;}
.close-btn .ui-icon {width:20px;height:20px;}
.help-copy {font-size:14px;line-height:1.85;}
.form-error:not(:empty) {overflow-wrap:anywhere;}
.toast {padding:13px 16px;gap:12px;font-size:12px;align-items:flex-start;}
.toast>span {min-width:0;overflow-wrap:anywhere;}
.toast button {width:36px;min-height:36px;flex:0 0 36px;display:grid;place-items:center;}
.toast button .ui-icon {width:18px;height:18px;}
button.card[data-page] {display:flex;gap:18px;align-items:center;text-align:left;min-height:108px;}
button.card[data-page]>div {width:48px!important;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--green-soft);margin:0!important;flex:0 0 48px;}
button.card[data-page] .ui-icon {width:24px;height:24px;}
#syncPanel .sync-check {align-items:flex-start;}
#syncPanel .sync-conflict {padding:16px;}
#syncPanel .sync-setup li {margin:12px 0;}
#syncPanel .actions {gap:10px;}
@container panel (max-width:500px) {
  .metrics {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .metric {padding:16px;}
  .metric-label {font-size:11px;}
  .metric-value {font-size:23px;}
  .field-row.three {grid-template-columns:minmax(0,1fr);}
}
@container panel (max-width:310px) {.metrics {grid-template-columns:minmax(0,1fr);}}
@media (min-width:1800px) {.main {padding:40px 48px 60px;}}
@media (min-width:761px) and (max-width:1180px) {
  .shell {grid-template-columns:208px minmax(0,1fr);}
  .sidebar {width:208px;padding:24px 12px 18px;}
  .brand {gap:10px;padding:0 5px 22px;}
  .brand img {width:48px;height:48px;}
  .brand b {font-size:18px;}
  .brand small {font-size:6.5px;}
  .nav-item {font-size:12px;padding:11px 12px;gap:10px;}
  .main {padding:26px 24px 48px;}
  .topbar {padding:0 24px;}
  .page-head {flex-wrap:wrap;gap:16px;}
  .page-head>.actions {max-width:100%;}
  .grid.two {grid-template-columns:minmax(0,1fr);}
  .filters {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px) {
  html {scroll-padding-top:calc(88px + env(safe-area-inset-top,0px));}
  .shell {display:block;}
  .sidebar {display:none;}
  .topbar {height:auto;min-height:calc(72px + env(safe-area-inset-top,0px));padding:calc(10px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px));gap:10px;align-items:center;}
  .mobile-brand {min-width:0;flex:1;gap:9px;}
  .mobile-brand img {width:42px;height:42px;flex:0 0 42px;border-radius:12px;}
  .mobile-brand b {font:500 16px/1.13 Georgia,serif;max-width:130px;letter-spacing:-.025em;}
  .mobile-brand .brand-tm {font-size:7px;}
  .top-actions {gap:5px;}
  .top-actions .icon-btn,.top-actions .lang-btn {width:40px;height:42px;flex-basis:40px;border-radius:12px;}
  .top-actions .ui-icon {width:20px;height:20px;}
  .main {padding:24px max(16px,env(safe-area-inset-right,0px)) calc(110px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));}
  .page-head {flex-direction:column;gap:16px;margin-bottom:24px;}
  .page-head h1 {font-size:30px;line-height:1.17;}
  .page-head>.actions {max-width:100%;width:100%;padding:0;gap:10px;}
  .page-head>.actions .btn {font-size:12px;min-height:46px;padding:11px 14px;}
  .subtitle {font-size:13px;line-height:1.7;}
  .grid,.grid.two,.grid.three,.grid.wide {grid-template-columns:minmax(0,1fr);gap:18px;}
  .card {padding:20px;border-radius:18px;}
  .card-head {gap:12px;margin-bottom:18px;align-items:flex-start;}
  .card-head>h2 {flex-basis:160px;}
  .card h2 {font-size:16px;}
  .card-head>input {max-width:100%!important;flex-basis:100%;}
  .card-head>.actions {width:100%;margin-left:0;}
  .card-head .badge {max-width:100%;white-space:normal;}
  .metrics {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px;}
  .metric {padding:16px 14px;border-radius:15px;}
  .metric-label {font-size:11px;min-height:42px;gap:5px;}
  .metric-value {font-size:23px;padding-top:12px;}
  .metric-note {font-size:11px;line-height:1.6;}
  .info-dot {width:36px;height:36px;min-width:36px;flex-basis:36px;}
  .info-dot .ui-icon {width:19px;height:19px;}
  .metric-label .info-dot {margin:-6px -6px 0 0;}
  .field-label-row .info-dot {margin-top:-6px;}
  .chart-information .info-dot {width:36px;height:36px;}
  .tabs {margin:0 -2px;padding:2px 2px 17px;gap:5px;}
  .tab {min-height:46px;padding:11px 13px;font-size:12px;}
  .btn,.btn.small {min-height:44px;font-size:12px;padding:10px 12px;}
  .btn.symbol-button {width:44px;min-width:44px;min-height:44px;padding:10px;}
  .ledger-scopes {margin-bottom:22px;gap:9px;}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea {font-size:16px!important;min-height:46px;max-width:100%;}
  .filters {padding:16px;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));}
  .filters label {font-size:10px;line-height:1.5;}
  .filters .filter-wide {grid-column:span 2;}
  .field-row,.field-row.three {grid-template-columns:minmax(0,1fr);gap:12px;}
  .chart-controls {gap:10px;}
  .chart-controls select {width:100%;}
  .chart-controls>label,.chart-controls>div {min-width:0;flex:1 1 100%;}
  .chart-legend {gap:8px 14px;font-size:12px;line-height:1.65;}
  .table-wrap {max-height:min(520px,65dvh);border-radius:10px;}
  table {font-size:12px;}
  th {font-size:10px;}
  th,td {padding:13px 12px;}
  .table-scroll-hint {font-size:11px;gap:7px;}
  td .actions .btn {min-height:44px;}
  .security-note {font-size:12px;}
  .hero {padding:22px;}
  .hero h2 {font-size:25px;}
  .hero p {font-size:13px;}
  .list-row {flex-wrap:wrap;gap:8px 16px;}
  .list-row>:first-child {flex:1 1 145px;}
  .list-row>.amount {margin-left:auto;}
  .details-list li {grid-template-columns:minmax(0,1fr) minmax(85px,auto);gap:10px;}
  .setup-row {grid-template-columns:minmax(0,1fr) 44px;gap:10px;padding:14px 0;}
  .setup-row>:first-child {grid-column:1/-1;}
  .setup-row>input {grid-column:1;text-align:left;}
  .setup-row>.btn {grid-column:2;}
  .trade-look {gap:12px;}
  .check-grid {gap:8px;}
  .check-grid label {min-height:44px;}
  dialog {width:calc(100vw - 20px);border-radius:20px;margin:auto;}
  dialog[open] {max-height:calc(var(--visual-height,100dvh) - 20px);}
  .dialog-head {padding:20px 18px 16px;gap:12px;}
  .dialog-head h2 {font-size:23px;line-height:1.3;}
  .close-btn {width:44px;height:44px;flex-basis:44px;border-radius:12px;}
  .dialog-body {padding:10px 18px 20px;}
  .dialog-head+.dialog-body {padding-top:16px;}
  .dialog-foot {padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));gap:10px;}
  .dialog-foot .btn {min-height:46px;flex:1 1 auto;}
  #editorForm>.form-error:not(:empty) {padding:12px 18px;max-height:20dvh;}
  .help-copy {font-size:14px;line-height:1.8;}
  .mobile-nav {padding:9px max(8px,env(safe-area-inset-right,0px)) calc(9px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));box-shadow:0 -6px 30px #1637280a;}
  .mobile-nav button {min-height:52px;padding:6px 2px;font-size:10px;line-height:1.25;gap:5px;border-radius:12px;}
  .mobile-nav .ui-icon {width:22px;height:22px;flex-basis:22px;}
  .mobile-nav button.active {box-shadow:inset 0 2px var(--control-line);}
  #toasts {bottom:calc(94px + env(safe-area-inset-bottom,0px));left:16px;right:16px;max-width:none;}
  .toast {max-width:100%;padding:12px 14px;}
  .toast button {min-width:40px;min-height:40px;}
  .footer {line-height:1.8;margin-top:30px;}
  #syncPanel .actions>.btn {max-width:100%;}
  #syncPanel .sync-setup {padding-left:20px;}
  #syncPanel .sync-conflict {padding:14px 12px;}
  #syncPanel .sync-check {gap:12px;}
}
@media (max-width:374px) {
  .topbar {gap:7px;padding-left:12px;padding-right:12px;}
  .mobile-brand {gap:7px;}
  .mobile-brand img {width:36px;height:36px;flex-basis:36px;}
  .mobile-brand b {font-size:14px;max-width:102px;}
  .top-actions {gap:4px;}
  .top-actions .icon-btn,.top-actions .lang-btn {width:36px;height:42px;flex-basis:36px;}
  .main {padding-left:14px;padding-right:14px;}
  .card {padding:18px;}
  .page-head h1 {font-size:28px;}
  .metrics {grid-template-columns:minmax(0,1fr);}
  .metric-label {min-height:30px;font-size:12px;}
  .metric-value {font-size:28px;}
  .filters {grid-template-columns:minmax(0,1fr);}
  .filters .filter-wide {grid-column:auto;}
  .mobile-nav button {font-size:9px;}
}
@media (max-height:500px) and (max-width:1000px) {
  .topbar {position:static;}
  .main {padding-top:20px;}
  dialog[open] {max-height:calc(var(--visual-height,100dvh) - 12px);}
  .dialog-head {padding:12px 18px;}
  .dialog-head h2 {font-size:21px;}
  .dialog-foot {padding-top:10px;padding-bottom:10px;}
}
@media (prefers-reduced-motion:reduce) {* {scroll-behavior:auto!important;}}
@media print {
  .shell {display:block;}.main {padding:0;}.sidebar,.mobile-nav,.topbar,.info-dot,.chart-information,.table-scroll-hint {display:none!important;}
  .metric-value {white-space:normal;font-size:22px;}.metrics {grid-template-columns:repeat(4,minmax(0,1fr));}.card {container-type:normal;}
  .table-wrap {border:0;max-height:none;overflow:visible;}.income-statement .table-wrap th:first-child,.income-statement .table-wrap td:first-child {position:static;}
}