:root {
  --paper: #f7f6f0;
  --paper-deep: #efeee6;
  --surface: #ffffff;
  --surface-muted: #fbfaf6;
  --rail: #181e18;
  --rail-soft: #232b23;
  --ink: #1d231d;
  --ink-soft: #596159;
  --ink-faint: #8c928a;
  --line: #ebe9df;
  --line-strong: #dcdacf;
  --accent: #4e7a32;
  --accent-hover: #436a2b;
  --accent-soft: #eef4e9;
  --safe: #2e7d32;
  --warning: #d97706;
  --danger: #ad473c;
  --danger-soft: #fcf1ef;
  --serif: "PingFang SC", "Noto Serif SC", "Songti SC", "STSong", serif;
  --sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(39, 46, 35, 0.035);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
html { background: var(--paper); }
body {
  min-width: 1040px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 72% 4%, rgba(78, 122, 50, 0.055), transparent 34%),
    var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.28;
  background-image: radial-gradient(rgba(35, 43, 35, 0.18) 0.45px, transparent 0.45px);
  background-size: 5px 5px;
}

button, input, select { font: inherit; }
button, select { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; }
p { text-wrap: pretty; }
input, select { outline: none; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid rgba(78, 122, 50, 0.48);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.overline {
  margin: 0;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.accent-text { color: var(--accent); }
.danger-text { color: var(--danger); }

.app-shell { min-height: 100vh; display: flex; }
.sidebar {
  position: sticky;
  top: 0;
  width: 232px;
  height: 100vh;
  flex: 0 0 232px;
  display: flex;
  flex-direction: column;
  padding: 28px 20px 21px;
  overflow: hidden;
  color: #edf1eb;
  background: var(--rail);
}

.sidebar::after {
  content: "";
  position: absolute;
  inset: auto -55px -65px auto;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(192, 211, 183, 0.09);
  transform: rotate(18deg);
  pointer-events: none;
}

.brand-lockup { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 34px; height: 34px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 3px; padding: 7px; border: 1px solid rgba(239, 245, 235, 0.2); border-radius: 9px; }
.brand-mark span { display: block; background: #8eaf71; }
.brand-mark span:nth-child(1) { height: 8px; }
.brand-mark span:nth-child(2) { height: 14px; }
.brand-mark span:nth-child(3) { height: 20px; }
.sidebar .overline { color: #778477; }
.brand-name { margin: 2px 0 0; font-family: var(--serif); font-size: 21px; font-weight: 700; letter-spacing: -0.04em; }
.brand-name span { margin-left: 2px; color: #7eaa62; }

.privacy-rail-card { display: flex; align-items: flex-start; gap: 11px; margin: 26px 0 29px; padding: 13px; border: 1px solid rgba(237, 242, 232, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.035); }
.privacy-rail-icon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 8px; color: #dbe8d2; background: rgba(126, 170, 98, 0.16); font-family: var(--serif); font-size: 12px; }
.privacy-rail-card strong { font-size: 11px; font-weight: 600; }
.privacy-rail-card p { margin: 4px 0 0; color: #8f9a8d; font-size: 9px; line-height: 1.6; }
.sidebar-label { margin: 0 10px 9px; color: #687568; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.sidebar-nav { display: grid; gap: 4px; }
.nav-item { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 11px; padding: 0 11px; border: 1px solid transparent; border-radius: 10px; color: #9da89b; background: transparent; text-align: left; transition: transform 0.16s ease, color 0.16s ease, background 0.16s ease, border-color 0.16s ease; }
.nav-item:hover { color: #eef3eb; background: rgba(255, 255, 255, 0.045); }
.nav-item:active { transform: translateY(1px) scale(0.99); }
.nav-item.is-active { color: #f5f7f3; border-color: rgba(146, 180, 123, 0.14); background: rgba(108, 150, 81, 0.15); }
.nav-index { width: 21px; color: #596559; font-family: var(--mono); font-size: 9px; }
.nav-item.is-active .nav-index { color: #9ac47f; }
.sidebar-footer { position: relative; z-index: 1; margin-top: auto; }
.rail-status { display: flex; align-items: center; gap: 10px; padding: 13px 4px; border-top: 1px solid rgba(237, 242, 232, 0.1); border-bottom: 1px solid rgba(237, 242, 232, 0.1); }
.rail-status > span { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #71aa50; box-shadow: 0 0 0 4px rgba(113, 170, 80, 0.11); }
.rail-status strong { display: block; font-family: var(--mono); font-size: 9px; font-weight: 600; }
.rail-status p { margin: 3px 0 0; color: #788477; font-size: 9px; }
.sidebar-version { margin: 13px 3px 0; color: #596459; font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em; }

.main-content { min-width: 0; height: 100vh; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 30px 15px 32px; border-bottom: 1px solid var(--line); background: rgba(247, 246, 240, 0.88); backdrop-filter: blur(14px); }
.topbar-left { min-width: 0; display: flex; align-items: center; gap: 24px; }
.local-status { min-height: 31px; display: inline-flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid rgba(46, 125, 50, 0.24); border-radius: 9px; color: var(--safe); background: rgba(241, 248, 239, 0.78); font-size: 10px; font-weight: 600; white-space: nowrap; }
.local-status > span { width: 6px; height: 6px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.11); }
.topbar-title { min-width: 0; padding-left: 22px; border-left: 1px solid var(--line-strong); }
.title-line { display: flex; align-items: baseline; gap: 12px; margin-top: 3px; }
.title-line h1 { margin: 0; font-family: var(--serif); font-size: 23px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.title-line p { margin: 0; overflow: hidden; color: var(--ink-faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.network-pill { min-height: 35px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-soft); background: rgba(255, 255, 255, 0.7); font-family: var(--mono); font-size: 9px; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.network-pill[data-state="connected"] { border-color: rgba(46, 125, 50, 0.27); color: var(--safe); background: rgba(241, 248, 239, 0.78); }
.network-pill[data-state="connected"] .status-dot { background: var(--safe); box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.11); }
.network-pill[data-state="wrong-network"] { border-color: rgba(173, 71, 60, 0.28); color: var(--danger); background: var(--danger-soft); }
.network-pill[data-state="wrong-network"] .status-dot { background: var(--danger); }
.wallet-control { position: relative; }
.wallet-popover { position: absolute; z-index: 8; top: calc(100% + 9px); right: 0; width: 280px; padding: 17px; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--surface); box-shadow: 0 20px 55px rgba(30, 37, 28, 0.16); }
.wallet-popover > strong { display: block; margin-top: 7px; overflow: hidden; font-family: var(--mono); font-size: 12px; text-overflow: ellipsis; }
.wallet-popover dl { display: grid; gap: 9px; margin: 16px 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wallet-popover dl div { display: flex; justify-content: space-between; gap: 12px; }
.wallet-popover dt { color: var(--ink-faint); font-size: 10px; }
.wallet-popover dd { margin: 0; color: var(--ink); font-size: 10px; font-weight: 600; text-align: right; }

.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.01em; transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(1px) scale(0.985); }
.button-primary { color: #ffffff; background: var(--accent); border-color: var(--accent); box-shadow: 0 6px 14px rgba(78, 122, 50, 0.14); }
.button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button-primary:disabled { color: #9ea59a; background: #e8e9e3; border-color: #e1e2db; box-shadow: none; transform: none; }
.button-ghost { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.button-ghost:hover { border-color: #bdc5b7; background: var(--surface-muted); }
.button-small { min-height: 33px; padding: 0 11px; font-size: 10px; }
.button-danger { color: var(--danger); background: var(--surface); border-color: rgba(173, 71, 60, 0.35); }
.button-danger:hover { color: #8d332b; border-color: var(--danger); background: var(--danger-soft); }
.button-danger-solid { color: #ffffff; background: var(--danger); border-color: var(--danger); }
.button-danger-solid:hover { color: #ffffff; background: #92382f; }
.text-button { padding: 3px 0; border: 0; color: var(--accent); background: transparent; font-size: 10px; font-weight: 700; }
.text-button:hover { color: var(--accent-hover); }
.text-button:active { transform: translateY(1px); }

.workspace-scroll { flex: 1; overflow: auto; padding: 22px 30px 40px 32px; }
.app-status { width: min(100%, 1680px); margin: 0 auto 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-soft); background: rgba(255, 255, 255, 0.72); font-size: 10px; }
.app-status:empty { display: none; }
.app-status[data-tone="success"] { color: var(--safe); border-color: rgba(46, 125, 50, 0.2); background: #f3f8f0; }
.app-status[data-tone="error"] { color: var(--danger); border-color: rgba(173, 71, 60, 0.2); background: var(--danger-soft); }
.view { width: min(100%, 1680px); margin: 0 auto; animation: view-in 0.24s ease both; }
.view[hidden] { display: none; }
@keyframes view-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

.hero-strip { min-height: 158px; display: grid; grid-template-columns: minmax(370px, 0.86fr) minmax(540px, 1.14fr); align-items: center; gap: 34px; padding: 18px 21px 21px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.hero-copy h2 { margin: 7px 0 9px; font-family: var(--serif); font-size: clamp(29px, 3vw, 43px); font-weight: 700; letter-spacing: -0.055em; line-height: 1.15; }
.hero-copy > p:last-child { max-width: 570px; margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.65; }
.trust-flow { display: grid; grid-template-columns: 1fr 18px 1fr 18px 1fr; align-items: stretch; gap: 7px; }
.trust-flow > i { display: grid; place-items: center; color: #a9afa5; font-family: var(--mono); font-style: normal; font-size: 13px; }
.trust-step { min-width: 0; min-height: 91px; display: flex; flex-direction: column; justify-content: center; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-muted); }
.trust-step > span { margin-bottom: 8px; color: var(--warning); font-family: var(--mono); font-size: 8px; font-weight: 600; }
.trust-step strong { font-family: var(--serif); font-size: 13px; }
.trust-step small { margin-top: 5px; color: var(--ink-faint); font-size: 8px; line-height: 1.5; }
.trust-step-chain { border-color: rgba(78, 122, 50, 0.25); background: var(--accent-soft); }
.trust-step-chain > span { color: var(--safe); }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.metric-card { min-width: 0; min-height: 112px; padding: 16px 17px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); }
.metric-label { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 10px; font-weight: 600; }
.metric-label span { width: 5px; height: 5px; border-radius: 50%; background: #8a9187; }
.metric-expense .metric-label span { background: var(--warning); }
.metric-income .metric-label span, .metric-balance .metric-label span { background: var(--safe); }
.metric-value { margin: 12px 0 4px; overflow: hidden; color: var(--ink); font-family: var(--mono); font-size: clamp(21px, 2vw, 30px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.metric-value.negative, .metric-expense .metric-value { color: var(--danger); }
.metric-balance .metric-value { color: var(--accent); }
.metric-caption { margin: 0; color: var(--ink-faint); font-size: 9px; }

.dashboard-grid { display: grid; gap: 12px; margin-top: 12px; }
.dashboard-grid-main { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.dashboard-grid-lower { grid-template-columns: minmax(340px, 0.82fr) minmax(560px, 1.18fr); }
.panel { min-width: 0; padding: 18px 19px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-heading h3 { margin: 4px 0 0; font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.panel-heading h3 span { color: var(--ink-faint); font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0; }
.compact-select select { width: auto; min-width: 112px; height: 32px; padding: 0 27px 0 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-soft); background: var(--surface-muted); font-size: 9px; }
.chart-panel, .recent-panel { min-height: 310px; }
.chart-wrap { position: relative; height: 218px; margin-top: 3px; }
.chart-wrap canvas, .analytics-chart-wrap canvas { width: 100% !important; height: 100% !important; }
.chart-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; color: var(--ink-faint); text-align: center; }
.chart-empty strong { margin-top: 8px; color: var(--ink-soft); font-family: var(--serif); font-size: 13px; }
.chart-empty p { margin: 4px 0 0; font-size: 9px; }
.empty-glyph { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--accent); background: var(--surface-muted); font-family: var(--mono); }
.chart-footer { display: flex; align-items: baseline; justify-content: space-between; padding-top: 11px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 9px; }
.chart-footer strong { color: var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 500; }
.recent-panel { display: flex; flex-direction: column; }
.transaction-list { margin-top: 8px; }
.transaction-row { min-height: 47px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); }
.transaction-row:last-child { border-bottom: 0; }
.transaction-main { min-width: 0; display: flex; align-items: center; gap: 10px; }
.transaction-mark { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--accent); background: var(--surface-muted); font-family: var(--serif); font-size: 10px; font-weight: 700; }
.transaction-copy { min-width: 0; }
.transaction-title { overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.transaction-meta { margin-top: 2px; color: var(--ink-faint); font-size: 8px; }
.transaction-amount { font-family: var(--mono); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.transaction-amount.income { color: var(--safe); }
.transaction-amount.expense { color: var(--danger); }
.empty-state { display: grid; justify-items: center; align-content: center; color: var(--ink-faint); text-align: center; }
.empty-state.compact { flex: 1; min-height: 185px; }
.empty-state.large { min-height: 260px; }
.empty-state strong { margin-top: 9px; color: var(--ink-soft); font-family: var(--serif); font-size: 13px; }
.empty-state p { margin: 5px 0 0; font-size: 9px; }

.budget-panel, .chain-panel { min-height: 222px; }
.budget-primary { display: flex; align-items: baseline; gap: 9px; margin: 24px 0 13px; }
.budget-primary strong { color: var(--ink); font-family: var(--mono); font-size: 24px; font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.budget-primary span { color: var(--ink-faint); font-size: 9px; }
.budget-percent { min-width: 42px; padding: 5px 7px; border-radius: 7px; color: var(--accent); background: var(--accent-soft); font-family: var(--mono); font-size: 9px; text-align: center; }
.progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: var(--paper-deep); }
.progress-fill { width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: transform 0.3s ease, background 0.2s ease; transform: scaleX(0); transform-origin: left; }
.progress-fill.is-over { background: var(--danger); }
.budget-meta { display: flex; justify-content: space-between; gap: 15px; margin-top: 9px; color: var(--ink-faint); font-family: var(--mono); font-size: 8px; }
.panel-caption { margin: 13px 0 0; color: var(--ink-faint); font-size: 9px; }
.chain-panel { border-color: rgba(78, 122, 50, 0.24); background: linear-gradient(135deg, var(--surface) 70%, var(--accent-soft)); }
.proof-state { padding: 5px 8px; border: 1px solid rgba(217, 119, 6, 0.24); border-radius: 7px; color: #a05c0b; background: #fff8ed; font-family: var(--mono); font-size: 8px; white-space: nowrap; }
.proof-state[data-state="verified"] { color: var(--safe); border-color: rgba(46, 125, 50, 0.24); background: #f0f7ed; }
.chain-copy { margin: 14px 0 11px; color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.privacy-spec { display: flex; gap: 17px; flex-wrap: wrap; margin-bottom: 14px; color: var(--ink-faint); font-size: 8px; }
.privacy-spec span { display: inline-flex; align-items: center; gap: 6px; }
.privacy-spec i { width: 5px; height: 5px; border-radius: 50%; }
.safe-dot { background: var(--safe); }
.private-dot { background: var(--warning); }
.snapshot-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; border-top: 1px solid rgba(78, 122, 50, 0.15); }
.snapshot-row > span { color: var(--ink-soft); font-family: var(--mono); font-size: 9px; }
.chain-actions { display: flex; gap: 7px; }
.chain-result { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 11px; padding: 9px 10px; border: 1px solid rgba(46, 125, 50, 0.16); border-radius: 9px; color: var(--safe); background: rgba(243, 248, 240, 0.8); font-family: var(--mono); font-size: 8px; line-height: 1.55; overflow-wrap: anywhere; }
.chain-result a { color: var(--safe); }
.chain-result-actions { flex: 0 0 auto; display: flex; gap: 10px; }

.view-heading { min-height: 86px; display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 15px; padding: 5px 2px 17px; border-bottom: 1px solid var(--line-strong); }
.view-heading h2 { margin: 5px 0 5px; font-family: var(--serif); font-size: clamp(31px, 3vw, 43px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.view-heading > div > p:last-child { margin: 0; color: var(--ink-faint); font-size: 10px; }
.view-count, .period-label { margin: 0; color: var(--ink-faint); font-family: var(--mono); font-size: 9px; }
.filter-bar { display: grid; grid-template-columns: 160px 150px minmax(250px, 1fr) auto; gap: 9px; margin-bottom: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, 0.68); }
input, select { width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--ink); background: var(--surface); font-size: 10px; }
input::placeholder { color: var(--ink-faint); }
.search-field { position: relative; }
.search-field > span { position: absolute; left: 12px; top: 8px; z-index: 1; color: var(--ink-faint); font-size: 16px; }
.search-field input { padding-left: 34px; }
.inline-message { min-height: 0; margin: 0 2px 10px; color: var(--ink-soft); font-size: 9px; }
.inline-message:empty { display: none; }
.inline-message[data-tone="error"] { color: var(--danger); }
.inline-message[data-tone="success"] { color: var(--safe); }
.table-panel { padding: 0; overflow: hidden; }
.ledger-table { width: 100%; overflow-x: auto; }
.ledger-head, .ledger-item { min-width: 850px; display: grid; grid-template-columns: 108px 132px minmax(210px, 1.5fr) 90px 130px 72px; align-items: center; gap: 14px; padding: 0 18px; }
.ledger-head { min-height: 43px; color: var(--ink-faint); background: var(--surface-muted); font-family: var(--mono); font-size: 8px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ledger-item { min-height: 59px; border-top: 1px solid var(--line); }
.ledger-cell { min-width: 0; overflow: hidden; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ledger-date, .ledger-amount { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ledger-note { color: var(--ink); font-weight: 600; }
.ledger-category { display: flex; align-items: center; gap: 8px; }
.ledger-category .transaction-mark { width: 25px; height: 25px; flex-basis: 25px; }
.type-badge { display: inline-flex; width: fit-content; padding: 4px 7px; border-radius: 6px; color: var(--danger); background: var(--danger-soft); font-size: 8px; font-weight: 600; }
.type-badge.income { color: var(--safe); background: var(--accent-soft); }
.ledger-amount.income { color: var(--safe); }
.ledger-amount.expense { color: var(--danger); }
.row-action { border: 0; color: var(--ink-faint); background: transparent; font-size: 9px; }
.row-action:hover, .row-action.is-confirming { color: var(--danger); }
.row-action:active { transform: translateY(1px); }

.inline-editor { display: grid; grid-template-columns: auto minmax(200px, 340px) auto auto 1fr; align-items: center; gap: 9px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid rgba(78, 122, 50, 0.2); border-radius: 12px; background: var(--accent-soft); }
.inline-editor label { color: var(--ink-soft); font-size: 10px; font-weight: 600; }
.inline-feedback { color: var(--safe); font-size: 9px; }
.category-summary { margin-bottom: 11px; padding: 10px 12px; border-left: 3px solid var(--warning); color: var(--ink-soft); background: rgba(255, 248, 237, 0.72); font-size: 9px; }
.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.category-card { min-height: 145px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.category-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.category-identity { display: flex; align-items: center; gap: 10px; }
.category-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--accent); background: var(--surface-muted); font-family: var(--serif); font-size: 13px; font-weight: 700; }
.category-name { font-size: 11px; font-weight: 700; }
.category-kind { display: block; margin-top: 3px; color: var(--ink-faint); font-family: var(--mono); font-size: 7px; }
.category-share { color: var(--accent); font-family: var(--mono); font-size: 10px; }
.category-amount { margin: 18px 0 12px; font-family: var(--mono); font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; }
.category-meter { height: 6px; overflow: hidden; border-radius: 99px; background: var(--paper-deep); }
.category-meter span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.category-card.is-empty .category-amount { color: var(--ink-faint); }
.category-card.is-empty .category-meter span { background: var(--line-strong); }

.privacy-label { display: inline-flex; align-items: center; gap: 7px; color: var(--safe); font-size: 9px; font-weight: 600; }
.privacy-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1); }
.analytics-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.insight-card { min-height: 112px; padding: 16px 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.insight-card p { margin: 0; color: var(--ink-soft); font-size: 9px; font-weight: 600; }
.insight-card strong { display: block; margin: 12px 0 5px; font-family: var(--mono); font-size: 23px; font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.insight-card span { color: var(--ink-faint); font-size: 8px; }
.trend-panel { margin-bottom: 12px; }
.analytics-chart-wrap { position: relative; height: 286px; margin-top: 12px; }
.analytics-chart-short { height: 205px; }
.analytics-empty { background: var(--surface); }
.comparison-panel { min-height: 275px; }

.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.settings-section { padding: 20px; }
.settings-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.settings-heading > span { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 27px; border-radius: 8px; color: var(--accent); background: var(--accent-soft); font-family: var(--mono); font-size: 8px; font-weight: 600; }
.settings-heading h3 { margin: 0; font-family: var(--serif); font-size: 17px; }
.settings-heading p { margin: 4px 0 0; color: var(--ink-faint); font-size: 8px; }
.form-row { min-height: 59px; display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); }
.form-row label, .salt-setting > label { color: var(--ink-soft); font-size: 10px; font-weight: 600; }
.input-with-suffix { position: relative; }
.input-with-suffix input { padding-right: 36px; }
.input-with-suffix span { position: absolute; top: 11px; right: 12px; color: var(--ink-faint); font-family: var(--mono); font-size: 10px; }
.form-actions { display: flex; align-items: center; gap: 10px; padding-top: 15px; }
.network-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 59px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.setting-label { display: block; margin-bottom: 4px; color: var(--ink-faint); font-size: 8px; }
.network-setting strong { font-size: 10px; }
.network-state-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); box-shadow: 0 0 0 4px rgba(140, 146, 138, 0.1); }
.network-state-dot[data-state="connected"] { background: var(--safe); box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.1); }
.network-state-dot[data-state="wrong-network"] { background: var(--danger); box-shadow: 0 0 0 4px rgba(173, 71, 60, 0.1); }
.salt-setting { display: grid; grid-template-columns: 1fr auto; gap: 8px 9px; padding-top: 13px; }
.salt-setting > label, .salt-setting > input, .salt-setting > p { grid-column: 1 / -1; }
.salt-setting p { margin: 0; color: var(--ink-faint); font-size: 8px; }
.privacy-callout { margin-top: 14px; padding: 11px 12px; border-left: 3px solid var(--safe); background: var(--accent-soft); }
.privacy-callout strong { font-size: 9px; }
.privacy-callout p { margin: 4px 0 0; color: var(--ink-soft); font-size: 8px; line-height: 1.55; }
.data-settings { grid-column: 1 / -1; }
.data-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.data-actions .button-danger { margin-left: auto; }
.import-confirm { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 12px; padding: 11px 12px; border: 1px solid rgba(217, 119, 6, 0.24); border-radius: 10px; color: #945708; background: #fff8ed; font-size: 9px; }
.import-confirm p { margin: 0; }
.import-confirm > div { display: flex; align-items: center; gap: 11px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 30px; background: rgba(17, 23, 17, 0.58); backdrop-filter: blur(5px); }
.modal { width: min(460px, 100%); padding: 22px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); box-shadow: 0 30px 80px rgba(20, 27, 19, 0.25); }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.modal-heading h2, .confirm-modal h2 { margin: 5px 0 0; font-family: var(--serif); font-size: 26px; font-weight: 700; letter-spacing: -0.045em; }
.close-button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-soft); background: var(--surface-muted); font-size: 18px; }
.close-button:hover { color: var(--ink); border-color: var(--line-strong); }
.close-button:active { transform: translateY(1px) scale(0.97); }
.form-group { display: grid; gap: 7px; margin-bottom: 13px; }
.form-group label { color: var(--ink-soft); font-size: 9px; font-weight: 600; }
.form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.form-error { min-height: 17px; margin: 0 0 5px; color: var(--danger); font-size: 9px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 3px; }
.confirm-modal { width: min(430px, 100%); }
.confirm-modal > p:not(.overline) { margin: 12px 0 18px; color: var(--ink-soft); font-size: 10px; line-height: 1.65; }
.danger-symbol { width: 35px; height: 35px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 10px; color: #fff; background: var(--danger); font-family: var(--mono); font-size: 15px; font-weight: 700; }

body.dark-theme {
  --paper: #151a15;
  --paper-deep: #242b24;
  --surface: #1d241d;
  --surface-muted: #202820;
  --ink: #edf1ea;
  --ink-soft: #b0b9ae;
  --ink-faint: #7f8a7e;
  --line: #303930;
  --line-strong: #455045;
  --accent: #78a65b;
  --accent-hover: #87b969;
  --accent-soft: #273723;
  --danger-soft: #392523;
  --shadow: 0 9px 28px rgba(0, 0, 0, 0.15);
}
body.dark-theme::before { opacity: 0.1; }
body.dark-theme .topbar { background: rgba(21, 26, 21, 0.9); }
body.dark-theme .local-status, body.dark-theme .proof-state, body.dark-theme .category-summary, body.dark-theme .import-confirm { background: #312a1d; }
body.dark-theme .network-pill, body.dark-theme .filter-bar { background: rgba(29, 36, 29, 0.78); }
body.dark-theme .network-pill[data-state="connected"], body.dark-theme .app-status[data-tone="success"], body.dark-theme .chain-result { background: #253322; }
body.dark-theme .chain-panel { background: linear-gradient(135deg, var(--surface) 70%, var(--accent-soft)); }
body.dark-theme .analytics-empty { background: var(--surface); }

@media (max-width: 1320px) {
  .sidebar { width: 210px; flex-basis: 210px; }
  .topbar { padding-left: 24px; padding-right: 24px; }
  .workspace-scroll { padding-left: 24px; padding-right: 24px; }
  .topbar-left { gap: 16px; }
  .topbar-title { padding-left: 16px; }
  .hero-strip { grid-template-columns: minmax(330px, 0.78fr) minmax(510px, 1.22fr); gap: 22px; }
  .title-line p { display: none; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1120px) {
  .local-status { display: none; }
  .topbar-title { padding-left: 0; border-left: 0; }
  .network-pill { display: none; }
  .hero-strip { grid-template-columns: 1fr; }
  .hero-copy h2 br { display: none; }
  .dashboard-grid-main, .dashboard-grid-lower { grid-template-columns: 1fr 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .data-settings { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}