:root,


html[data-theme="light"] {


  

#membersTable thead th.sortable,

#accountsTable thead th.sortable {

  cursor: pointer;

  user-select: none;

  white-space: nowrap;

}

#membersTable thead th.sortable:hover,

#accountsTable thead th.sortable:hover {

  color: var(--brand);

}

#membersTable thead th.sortable.active,

#accountsTable thead th.sortable.active {

  color: var(--brand);

}

#membersTable thead .sort-ind,

#accountsTable thead .sort-ind {

  display: inline-block;

  min-width: 12px;

  font-size: 12px;

}

--bg: #f4f1ea;


  --bg-2: #fffdf8;


  --panel: #ffffff;


  --ink: #1d2a24;


  --muted: #6d7a73;


  --line: #e4ddd1;


  --brand: #0f6b5c;


  --brand-2: #1f8a76;


  --income: #0f7a4c;


  --expense: #c44b3c;


  --warn: #b7791f;


  --shadow: 0 10px 30px rgba(29, 42, 36, 0.08);


  --radius: 14px;


  --sidebar: 250px;


  --sidebar-bg: rgba(255,253,248,0.88);


  --sidebar-border: rgba(228,221,209,0.9);


  --body-bg:


    radial-gradient(circle at top left, rgba(15,107,92,0.08), transparent 28%),


    linear-gradient(180deg, #efe8db 0%, var(--bg) 40%, #f7f4ee 100%);


  --chip-bg: #ffffff;


  --table-hover: #faf7f1;


  --rank-track: #f0ebe2;


  --cal-empty: #fcfaf6;


  --drawer-bg: #ffffff;


  --input-bg: #ffffff;


  --toast-bg: #173f38;


  --sidebar-card-bg: #173f38;


  --sidebar-card-ink: #eef7f4;


  --theme-toggle-bg: rgba(255,255,255,0.75);


  --heat-0: var(--cal-empty);


  --heat-1: #d9f0e8;


  --heat-2: #b7e2d3;


  --heat-3: #86cbb4;


  --heat-4: #4fa88f;


  --heat-5: #2f7f6b;


  --heat-ink-strong: #ffffff;


  --heat-ink-mid: #0f2f29;


}








html[data-theme="dark"] {


  --bg: #101714;


  --bg-2: #15201b;


  --panel: #18241f;


  --ink: #e8f2ec;


  --muted: #9bb0a5;


  --line: #2b3b34;


  --brand: #2f9f89;


  --brand-2: #3fb79d;


  --income: #3fbf7f;


  --expense: #e06b5c;


  --warn: #d0a14a;


  --shadow: 0 12px 34px rgba(0, 0, 0, 0.35);


  --sidebar-bg: rgba(14, 22, 19, 0.92);


  --sidebar-border: rgba(43, 59, 52, 0.95);


  --body-bg:


    radial-gradient(circle at top left, rgba(47,159,137,0.12), transparent 30%),


    linear-gradient(180deg, #0d1411 0%, var(--bg) 42%, #121b17 100%);


  --chip-bg: #1a2621;


  --table-hover: #1d2b25;


  --rank-track: #24322c;


  --cal-empty: #15201b;


  --drawer-bg: #15201b;


  --input-bg: #121c18;


  --toast-bg: #23443c;


  --sidebar-card-bg: #21453d;


  --sidebar-card-ink: #eef7f4;


  --theme-toggle-bg: rgba(18, 28, 24, 0.9);


  --heat-0: #15201b;


  --heat-1: #1a3a31;


  --heat-2: #215347;


  --heat-3: #2d7261;


  --heat-4: #3b9480;


  --heat-5: #54b89f;


  --heat-ink-strong: #071410;


  --heat-ink-mid: #e8f7f1;


}








/* Built-in skins: keep day/night, change palette */


html[data-theme="light"][data-skin="ocean"] { --bg:#edf7fb; --bg-2:#f8fdff; --panel:#fff; --ink:#16313f; --muted:#66808c; --line:#d5e8ef; --brand:#0b6f9c; --brand-2:#168bbd; --income:#087f5b; --expense:#d34d62; --body-bg:radial-gradient(circle at top left, rgba(22,139,189,.12), transparent 30%),linear-gradient(180deg,#e2f3fb 0%,var(--bg) 42%,#f6fbfd 100%); --sidebar-bg:rgba(248,253,255,.9); --sidebar-border:rgba(213,232,239,.95); --rank-track:#e3f0f5; --cal-empty:#f7fcff; --sidebar-card-bg:#0b5678; --toast-bg:#0b5678; --heat-1:#d6eef7; --heat-2:#addded; --heat-3:#74c2df; --heat-4:#349bc1; --heat-5:#0b6f9c; }


html[data-theme="dark"][data-skin="ocean"] { --bg:#0b1720; --bg-2:#102230; --panel:#132938; --ink:#e8f6fb; --muted:#96b7c6; --line:#264151; --brand:#37aee2; --brand-2:#5bc4f0; --income:#42d392; --expense:#f07186; --body-bg:radial-gradient(circle at top left, rgba(55,174,226,.16), transparent 30%),linear-gradient(180deg,#071019 0%,var(--bg) 45%,#0e1d28 100%); --chip-bg:#132938; --rank-track:#1b3546; --cal-empty:#102230; --drawer-bg:#102230; --input-bg:#0d1b26; --sidebar-card-bg:#17465e; --toast-bg:#17465e; --heat-1:#123344; --heat-2:#164d68; --heat-3:#1f7196; --heat-4:#2c9bca; --heat-5:#5bc4f0; }


html[data-theme="light"][data-skin="sunset"] { --bg:#fff4ea; --bg-2:#fffaf5; --panel:#fff; --ink:#36251d; --muted:#806f63; --line:#f0d9c7; --brand:#d96523; --brand-2:#f08a35; --income:#2f8f5b; --expense:#c3423f; --body-bg:radial-gradient(circle at top left, rgba(240,138,53,.14), transparent 30%),linear-gradient(180deg,#ffe7d1 0%,var(--bg) 44%,#fff9f4 100%); --sidebar-bg:rgba(255,250,245,.9); --sidebar-border:rgba(240,217,199,.95); --rank-track:#f7e6d8; --cal-empty:#fffaf5; --sidebar-card-bg:#8e3f1f; --toast-bg:#8e3f1f; --heat-1:#ffe0c2; --heat-2:#ffc58f; --heat-3:#f6a05c; --heat-4:#e5792d; --heat-5:#b94e1f; }


html[data-theme="dark"][data-skin="sunset"] { --bg:#1d1410; --bg-2:#281b15; --panel:#2d1f18; --ink:#fff0e5; --muted:#c1a493; --line:#493125; --brand:#f08a35; --brand-2:#ffad5c; --income:#70c58a; --expense:#ff776d; --body-bg:radial-gradient(circle at top left, rgba(240,138,53,.18), transparent 30%),linear-gradient(180deg,#160f0c 0%,var(--bg) 45%,#241711 100%); --chip-bg:#2d1f18; --rank-track:#3a281e; --cal-empty:#281b15; --drawer-bg:#281b15; --input-bg:#211611; --sidebar-card-bg:#6e351e; --toast-bg:#6e351e; --heat-1:#432416; --heat-2:#67351d; --heat-3:#944d25; --heat-4:#c86d2d; --heat-5:#ffad5c; }


html[data-theme="light"][data-skin="lavender"] { --bg:#f5f0fb; --bg-2:#fdfaff; --panel:#fff; --ink:#2f263c; --muted:#756a83; --line:#e3d8ef; --brand:#7457c8; --brand-2:#8e6ee5; --income:#2f8f78; --expense:#c44f7f; --body-bg:radial-gradient(circle at top left, rgba(142,110,229,.14), transparent 30%),linear-gradient(180deg,#ece0fa 0%,var(--bg) 44%,#fdfaff 100%); --sidebar-bg:rgba(253,250,255,.9); --sidebar-border:rgba(227,216,239,.95); --rank-track:#ebe3f5; --cal-empty:#fcf8ff; --sidebar-card-bg:#4f3a8e; --toast-bg:#4f3a8e; --heat-1:#e6dcfb; --heat-2:#cab8f3; --heat-3:#a58be8; --heat-4:#7f62d6; --heat-5:#5e43ad; }


html[data-theme="dark"][data-skin="lavender"] { --bg:#171322; --bg-2:#211b30; --panel:#261f37; --ink:#f3ecff; --muted:#b2a4c6; --line:#3d3352; --brand:#a990ff; --brand-2:#c1adff; --income:#61d1b7; --expense:#f083b1; --body-bg:radial-gradient(circle at top left, rgba(169,144,255,.17), transparent 30%),linear-gradient(180deg,#110e1b 0%,var(--bg) 45%,#1e172b 100%); --chip-bg:#261f37; --rank-track:#332944; --cal-empty:#211b30; --drawer-bg:#211b30; --input-bg:#1b1627; --sidebar-card-bg:#4d3b83; --toast-bg:#4d3b83; --heat-1:#2d2444; --heat-2:#45366a; --heat-3:#624d99; --heat-4:#8468d0; --heat-5:#b19bff; }


html[data-theme="light"][data-skin="slate"] { --bg:#eef2f5; --bg-2:#fafbfc; --panel:#fff; --ink:#202a33; --muted:#66727d; --line:#d8e0e6; --brand:#40566b; --brand-2:#5f7890; --income:#28745e; --expense:#b84b4b; --body-bg:radial-gradient(circle at top left, rgba(95,120,144,.12), transparent 30%),linear-gradient(180deg,#e4ebf0 0%,var(--bg) 44%,#fafbfc 100%); --sidebar-bg:rgba(250,251,252,.9); --sidebar-border:rgba(216,224,230,.95); --rank-track:#e3e9ee; --cal-empty:#f8fafb; --sidebar-card-bg:#2d3e4e; --toast-bg:#2d3e4e; --heat-1:#dce6ed; --heat-2:#c1d2de; --heat-3:#96acbd; --heat-4:#68849a; --heat-5:#40566b; }


html[data-theme="dark"][data-skin="slate"] { --bg:#111820; --bg-2:#171f29; --panel:#1b2530; --ink:#e9f0f5; --muted:#9caab5; --line:#303d49; --brand:#8aa4ba; --brand-2:#a9bfd1; --income:#63c09d; --expense:#e17575; --body-bg:radial-gradient(circle at top left, rgba(138,164,186,.14), transparent 30%),linear-gradient(180deg,#0c1218 0%,var(--bg) 45%,#141d26 100%); --chip-bg:#1b2530; --rank-track:#273442; --cal-empty:#171f29; --drawer-bg:#171f29; --input-bg:#131b24; --sidebar-card-bg:#33475a; --toast-bg:#33475a; --heat-1:#21303d; --heat-2:#34495c; --heat-3:#4e6880; --heat-4:#708ba3; --heat-5:#a9bfd1; }


html[data-theme="light"][data-skin="rose"] { --bg:#fff1f4; --bg-2:#fffafb; --panel:#fff; --ink:#3a222b; --muted:#816b73; --line:#efd6de; --brand:#c84d75; --brand-2:#e46b92; --income:#2f8b68; --expense:#bd3f55; --body-bg:radial-gradient(circle at top left, rgba(228,107,146,.14), transparent 30%),linear-gradient(180deg,#ffe3eb 0%,var(--bg) 44%,#fffafb 100%); --sidebar-bg:rgba(255,250,251,.9); --sidebar-border:rgba(239,214,222,.95); --rank-track:#f5e1e8; --cal-empty:#fff8fa; --sidebar-card-bg:#8b3152; --toast-bg:#8b3152; --heat-1:#ffdce7; --heat-2:#f7b7cd; --heat-3:#ee8daf; --heat-4:#d9658d; --heat-5:#b33d66; }


html[data-theme="dark"][data-skin="rose"] { --bg:#1d1117; --bg-2:#281923; --panel:#2e1d28; --ink:#fff0f5; --muted:#c4a3b1; --line:#4a3040; --brand:#f084aa; --brand-2:#ffa2c0; --income:#67c69e; --expense:#ff7387; --body-bg:radial-gradient(circle at top left, rgba(240,132,170,.18), transparent 30%),linear-gradient(180deg,#160c12 0%,var(--bg) 45%,#251620 100%); --chip-bg:#2e1d28; --rank-track:#3a2633; --cal-empty:#281923; --drawer-bg:#281923; --input-bg:#21141c; --sidebar-card-bg:#6e2f4b; --toast-bg:#6e2f4b; --heat-1:#432134; --heat-2:#672f4e; --heat-3:#96456c; --heat-4:#c9628e; --heat-5:#ffa2c0; }








* { box-sizing: border-box; }


html, body { margin: 0; padding: 0; }


body {


  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;


  color: var(--ink);


  background: var(--body-bg);


  min-height: 100vh;


  transition: background 0.2s ease, color 0.2s ease;


}


button, input, select { font: inherit; }


button { cursor: pointer; }


.muted { color: var(--muted); }


.small { font-size: 12px; }


.num { text-align: right; font-variant-numeric: tabular-nums; }





.app {


  display: grid;


  grid-template-columns: var(--sidebar) 1fr;


  min-height: 100vh;


}





.sidebar {


  position: sticky;


  top: 0;


  height: 100vh;


  padding: 22px 16px;


  border-right: 1px solid var(--sidebar-border);


  background: var(--sidebar-bg);


  backdrop-filter: blur(10px);


  display: flex;


  flex-direction: column;


  gap: 22px;


}


.brand { display: flex; gap: 12px; align-items: center; padding: 4px 8px; }


.brand-mark {


  width: 42px; height: 42px; border-radius: 12px;


  display: grid; place-items: center;


  background: linear-gradient(145deg, var(--brand), #184f46);


  color: white; font-weight: 700;


}


.brand-title { font-weight: 700; font-size: 18px; }


.brand-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }


.nav { display: flex; flex-direction: column; gap: 6px; }


.nav-item {


  border: 0; background: transparent; text-align: left;


  padding: 12px 14px; border-radius: 12px; color: var(--ink);


}


.nav-item:hover { background: rgba(15,107,92,0.08); }


.nav-item.active { background: var(--brand); color: white; font-weight: 600; }


.sidebar-summary {


  margin-top: 8px;


  display: flex;


  flex-direction: column;


  gap: 10px;


}


.sidebar {


  overflow-y: auto;


  overscroll-behavior: contain;


}


.nav {


  flex: 0 0 auto;


}


.sidebar-card {


  background: var(--sidebar-card-bg);


  color: var(--sidebar-card-ink);


  border-radius: 16px;


  padding: 14px;


}


.sidebar-card.year {


  background: color-mix(in srgb, var(--sidebar-card-bg) 82%, #0b2a24);


}


.sidebar-card .muted { color: rgba(238,247,244,0.72); }


.sidebar-card-head {


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 8px;


}


.sidebar-period-labels {


  display: flex;


  align-items: center;


  justify-content: flex-end;


  gap: 8px;


}


.sidebar-period-caption,
.sidebar-period-subcaption {


  color: rgba(238,247,244,0.72);


  font-size: 11px;


  white-space: nowrap;


}


.sidebar-period-subcaption {


  position: absolute;


  right: 14px;


  top: 40px;


}


.sidebar-card.year {


  position: relative;


}


.sidebar-select {


  max-width: 112px;


  min-height: 28px;


  border-radius: 999px;


  border: 1px solid rgba(238,247,244,0.22);


  background: rgba(255,255,255,0.08);


  color: #eef7f4;


  padding: 4px 8px;


  font-size: 12px;


}


.sidebar-select option {


  color: #12352e;


  background: #fff;


}


.sidebar-balance { font-size: 24px; font-weight: 700; margin: 8px 0 6px; font-variant-numeric: tabular-nums; }





.main { padding: 22px 24px 40px; min-width: 0; }


.topbar {


  display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;


  margin-bottom: 18px;


}


.topbar h1 { margin: 0; font-size: 28px; letter-spacing: 0; }


.topbar-left { display: flex; flex-direction: column; gap: 10px; }


.topbar-right {


  display: flex;


  flex-direction: row;


  flex-wrap: wrap;


  gap: 10px;


  align-items: center;


  justify-content: flex-end;


}





/* Back button */


.btn.ghost.back-btn {


  flex: 0 0 auto;


  height: 40px;


  padding: 0 14px;


  border-radius: 10px;


  display: inline-flex;


  align-items: center;


  justify-content: center;


  gap: 7px;


  font-size: 14px;


  font-weight: 600;


  line-height: 1;


  white-space: nowrap;


  background: var(--input-bg);


  color: var(--ink);


  border: 1px solid var(--line);


  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);


  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;


}


.back-btn .back-icon {


  font-size: 17px;


  line-height: 1;


}


.btn.ghost.back-btn:hover {


  background: color-mix(in srgb, var(--brand) 10%, var(--input-bg));


  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));


  color: var(--brand);


}


.btn.ghost.back-btn:focus-visible {


  outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);


  outline-offset: 2px;


}


.back-btn[hidden] {


  display: none;


}





.filters, .toolbar, .chip-row, .form-actions, .budget-form, .pager {


  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;


}


.filters select, .toolbar select, .search-box input, .form input, .form select, .budget-form input {


  border: 1px solid var(--line);


  background: var(--input-bg);


  color: var(--ink);


  border-radius: 10px;


  padding: 10px 12px;


  min-height: 40px;


}


.theme-toggle {


  display: inline-flex;


  align-items: center;


  gap: 4px;


  padding: 4px;


  border: 1px solid var(--line);


  border-radius: 999px;


  background: var(--theme-toggle-bg);


}


.theme-btn {


  border: 0;


  background: transparent;


  color: var(--muted);


  border-radius: 999px;


  padding: 8px 12px;


  min-height: 34px;


  line-height: 1;


}


.theme-btn:hover { color: var(--ink); }


.theme-btn.active {


  background: var(--brand);


  color: #fff;


  font-weight: 600;


}


.search-box input { width: min(280px, 70vw); }


.btn {


  border: 0; border-radius: 10px; padding: 10px 14px; background: color-mix(in srgb, var(--brand) 12%, var(--panel)); color: var(--ink);


}


.btn.primary { background: var(--brand); color: white; }


.btn.ghost { background: transparent; border: 1px solid var(--line); }


.btn:hover { filter: brightness(0.98); }


.link-btn { border: 0; background: transparent; color: var(--brand); padding: 0; }


.icon-btn {


  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line);


  background: var(--input-bg); color: var(--ink); font-size: 22px; line-height: 1;


}





.view { display: none; }


.view.active { display: block; }





.kpi-grid {


  display: grid;


  grid-template-columns: repeat(4, minmax(0, 1fr));


  gap: 14px;


  margin-bottom: 16px;


}


.kpi {


  background: var(--panel);


  border: 1px solid var(--line);


  border-radius: var(--radius);


  padding: 16px;


  box-shadow: var(--shadow);


}


.kpi .label { color: var(--muted); font-size: 13px; }


.kpi .value { font-size: 28px; font-weight: 700; margin-top: 8px; font-variant-numeric: tabular-nums; }


.kpi .foot { margin-top: 8px; color: var(--muted); font-size: 12px; }


.kpi.income .value { color: var(--income); }


.kpi.expense .value { color: var(--expense); }





.panel-grid {


  display: grid;


  grid-template-columns: 1.2fr 0.8fr;


  gap: 14px;


  margin-bottom: 16px;


}


.panel {


  background: var(--panel);


  border: 1px solid var(--line);


  border-radius: var(--radius);


  padding: 16px;


  box-shadow: var(--shadow);


  margin-bottom: 16px;


}


.panel-head {


  display: flex; justify-content: space-between; align-items: center; gap: 12px;


  margin-bottom: 12px;


}


.panel-head h2 { margin: 0; font-size: 16px; }





.chart.bars {


  min-height: 280px;


  padding-top: 10px;


}

.trend-range-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
}

.trend-range-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 86px;
}

.trend-range-eyebrow {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .04em;
}

.trend-range-label {
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.trend-range-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.trend-presets {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}

.trend-preset {
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.trend-preset:hover,
.trend-preset.active {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, var(--panel));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--brand) 12%, transparent);
}

.trend-range-control input[type="range"] {
  width: 104px;
  height: 24px;
  accent-color: var(--brand);
  cursor: pointer;
}

@media (max-width: 700px) {
  .trend-range-wrap,
  .trend-range-control { align-items: stretch; }
  .trend-range-wrap { flex-direction: column; gap: 10px; }
  .trend-range-control { justify-content: space-between; }
  .trend-presets { flex: 1; justify-content: space-between; }
  .trend-preset { flex: 1; padding-inline: 6px; }
}


.trend-wrap {


  position: relative;


  width: 100%;


}


.trend-bars {


  display: grid;


  grid-template-columns: repeat(12, minmax(0, 1fr));


  gap: 8px;


  align-items: end;


}


.balance-line-svg {


  position: absolute;


  left: 0;


  right: 0;


  top: 10px;


  height: 196px;


  width: 100%;


  pointer-events: none;


  overflow: visible;


  z-index: 3;


}


.balance-line {


  stroke: #2f9f89;


  stroke-width: 2;


  stroke-linecap: round;


  stroke-linejoin: round;


  vector-effect: non-scaling-stroke;


  filter: drop-shadow(0 1px 1px rgba(15, 107, 92, 0.18));


}


.balance-dot {


  stroke: #fff;


  stroke-width: 0.35;


  vector-effect: non-scaling-stroke;


}


.balance-dot.pos { fill: #2f9f89; }


.balance-dot.neg { fill: #5b7388; }


.trend-legend .dot.balance.line {


  width: 14px;


  height: 3px;


  border-radius: 999px;


  background: #2f9f89;


}


.bar-plot {


  grid-template-columns: repeat(2, 1fr) !important;


  max-width: 42px !important;


}


.bar-col {


  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;


}


.bar-plot {


  position: relative;


  width: 100%;


  max-width: 48px;


  height: 196px;


  display: grid;


  grid-template-columns: repeat(3, 1fr);


  gap: 2px;


}


.bar-zero {


  position: absolute;


  left: -2px;


  right: -2px;


  top: 50%;


  border-top: 1px dashed color-mix(in srgb, var(--muted) 55%, transparent);


  pointer-events: none;


  z-index: 1;


}


.bar-slot {


  display: flex;


  flex-direction: column;


  height: 100%;


  min-width: 0;


}


.bar-up,


.bar-down {


  flex: 1 1 50%;


  min-height: 0;


  display: flex;


}


.bar-up {


  align-items: flex-end;


}


.bar-down {


  align-items: flex-start;


}


.bar {


  width: 100%;


  min-height: 0;


}


.bar.income,


.bar.expense,


.bar.balance.pos {


  border-radius: 5px 5px 2px 2px;


}


.bar.balance.neg {


  border-radius: 2px 2px 5px 5px;


}


.bar.expense { background: linear-gradient(180deg, #e07a6d, var(--expense)); }


.bar.income { background: linear-gradient(180deg, #4cae84, var(--income)); }


.bar.balance.pos { background: linear-gradient(180deg, #5ec4b0, #2f9f89); }


.bar.balance.neg { background: linear-gradient(180deg, #8aa4b8, #5b7388); }


.bar-label { font-size: 11px; color: var(--muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }


.bar-balance {


  font-size: 10px;


  font-variant-numeric: tabular-nums;


  white-space: nowrap;


  max-width: 100%;


  overflow: hidden;


  text-overflow: ellipsis;


}


.bar-balance.pos { color: var(--income); }


.bar-balance.neg { color: var(--expense); }


.trend-legend {


  display: flex;


  gap: 10px;


  align-items: center;


  flex-wrap: wrap;


  color: var(--muted);


  font-size: 12px;


}


.trend-legend .dot {


  width: 8px;


  height: 8px;


  border-radius: 999px;


  display: inline-block;


  margin-right: 4px;


}


.trend-legend .dot.income { background: var(--income); }


.trend-legend .dot.expense { background: var(--expense); }


.trend-legend .dot.balance { background: #2f9f89; }





.chart.ranks { display: flex; flex-direction: column; gap: 10px; }


.rank-row {


  display: grid;


  grid-template-columns: 88px 1fr 84px;


  gap: 10px;


  align-items: center;


}


.rank-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }


.rank-track {


  height: 10px; background: var(--rank-track); border-radius: 999px; overflow: hidden;


}


.rank-fill {


  height: 100%; border-radius: 999px;


  background: linear-gradient(90deg, var(--brand), #3f9d8b);


}


.rank-fill.expense { background: linear-gradient(90deg, #d9786b, var(--expense)); }


.rank-fill.income { background: linear-gradient(90deg, #4cae84, var(--income)); }


.rank-val { text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }





.table-wrap { overflow: auto; }


.table-wrap.tall { max-height: calc(100vh - 250px); }


.table {


  width: 100%;


  border-collapse: collapse;


  font-size: 13px;


}


.table th, .table td {


  padding: 10px 8px;


  border-bottom: 1px solid var(--line);


  text-align: left;


  white-space: nowrap;


}


.table th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--panel); }


.table tr:hover td { background: var(--table-hover); }


.amount.income { color: var(--income); font-weight: 600; }


.amount.expense { color: var(--expense); font-weight: 600; }


.tag {


  display: inline-flex; align-items: center; gap: 4px;


  padding: 2px 8px; border-radius: 999px; background: #eef5f2; color: var(--brand);


  font-size: 12px;


}


.tag.expense { background: #fdeceb; color: var(--expense); }


.tag.income { background: #e8f6ef; color: var(--income); }


.row-btn {


  border: 0; background: transparent; color: var(--brand); padding: 4px 6px;


}





.chip {


  border: 1px solid var(--line); background: var(--chip-bg); color: var(--ink); border-radius: 999px; padding: 8px 12px;


}


.chip.active { background: var(--brand); border-color: var(--brand); color: white; }





.calendar {


  display: grid;


  grid-template-columns: repeat(7, minmax(0, 1fr));


  gap: 8px;


}


.cal-cell {


  min-height: 74px;


  border-radius: 12px;


  border: 1px solid var(--line);


  background: var(--cal-empty);


  padding: 8px;


  display: flex;


  flex-direction: column;


  justify-content: space-between;


}


.cal-cell.empty { background: transparent; border-color: transparent; }


.cal-day { font-size: 12px; color: var(--muted); }


.cal-amt { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; opacity: .9; }
.cal-cell.level-0 .cal-amt { color: var(--muted); font-weight: 500; }
@media (max-width: 720px) {
  .cal-cell { min-height: 62px; padding: 6px; }
  .cal-day, .cal-amt { font-size: 10px; }
}


.cal-cell.level-1 { background: var(--heat-1); color: var(--ink); }


.cal-cell.level-2 { background: var(--heat-2); color: var(--ink); }


.cal-cell.level-3 { background: var(--heat-3); color: var(--heat-ink-mid); }


.cal-cell.level-4 { background: var(--heat-4); color: var(--heat-ink-mid); }


.cal-cell.level-5 { background: var(--heat-5); color: var(--heat-ink-strong); }


.cal-cell.level-1 .cal-day,


.cal-cell.level-1 .cal-amt,


.cal-cell.level-2 .cal-day,


.cal-cell.level-2 .cal-amt { color: inherit; }


.cal-cell.level-3 .cal-day,


.cal-cell.level-3 .cal-amt,


.cal-cell.level-4 .cal-day,


.cal-cell.level-4 .cal-amt,


.cal-cell.level-5 .cal-day,


.cal-cell.level-5 .cal-amt { color: inherit; }


.calendar-legend {


  display: flex;


  align-items: center;


  gap: 8px;


  margin-bottom: 12px;


  color: var(--muted);


  font-size: 12px;


  flex-wrap: wrap;


}


.calendar-legend .swatch {


  width: 16px;


  height: 16px;


  border-radius: 4px;


  border: 1px solid var(--line);


  display: inline-block;


}


.calendar-legend .swatch.l0 { background: var(--heat-0); }


.calendar-legend .swatch.l1 { background: var(--heat-1); }


.calendar-legend .swatch.l2 { background: var(--heat-2); }


.calendar-legend .swatch.l3 { background: var(--heat-3); }


.calendar-legend .swatch.l4 { background: var(--heat-4); }


.calendar-legend .swatch.l5 { background: var(--heat-5); }





.budget-summary {


  display: grid;


  grid-template-columns: repeat(3, minmax(0, 1fr));


  gap: 12px;


  margin: 14px 0 18px;


}


.budget-summary .kpi { box-shadow: none; }





.modal-mask {


  position: fixed;


  inset: 0;


  background: rgba(12, 18, 16, 0.48);


  opacity: 0;


  pointer-events: none;


  transition: opacity 0.18s ease;


  z-index: 40;


  backdrop-filter: blur(2px);


}


.modal {


  position: fixed;


  inset: 0;


  display: grid;


  place-items: center;


  padding: 18px;


  opacity: 0;


  pointer-events: none;


  transition: opacity 0.18s ease;


  z-index: 50;


}


.modal-mask.open,


.modal.open {


  opacity: 1;


  pointer-events: auto;


}


.modal-card {


  width: min(520px, 100%);


  background: var(--drawer-bg);


  color: var(--ink);


  border: 1px solid var(--line);


  border-radius: 18px;


  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);


  padding: 24px 24px 20px;


  transform: translateY(10px) scale(0.98);


  transition: transform 0.18s ease;


}


.modal.open .modal-card {


  transform: translateY(0) scale(1);


}


.modal-head {


  display: flex;


  justify-content: space-between;


  align-items: flex-start;


  gap: 12px;


  margin-bottom: 18px;


}


.modal-head h2 {


  margin: 0 0 4px;


  font-size: 20px;


}


.form,


.modal-form {


  display: flex;


  flex-direction: column;


  gap: 14px;


}


.form label,


.modal-form label {


  display: flex;


  flex-direction: column;


  gap: 6px;


  font-size: 13px;


  color: var(--muted);


}


.form-row.two {


  display: grid;


  grid-template-columns: 1fr 1fr;


  gap: 12px;


}


#txLoanFields[hidden] { display: none; }


#txLoanMethodRow[hidden] { display: none; }


#txLinkedLoanRow[hidden] { display: none; }


#txLinkedLoanHint { margin-top: 6px; }


#txLinkedInvestRow[hidden] { display: none; }


#txLinkedInvestHint { margin-top: 6px; }


.inline-inputs {


  display: grid;


  grid-template-columns: 1fr 82px;


  gap: 8px;


}


.modal-form input,


.modal-form select {


  font-size: 15px;


  min-height: 42px;


}


#txAmount {


  font-size: 22px;


  font-weight: 700;


  font-variant-numeric: tabular-nums;


}


.form-actions {


  display: flex;


  justify-content: flex-end;


  align-items: center;


  gap: 10px;


  margin-top: 4px;


}


.form-actions-right {


  display: flex;


  gap: 10px;


  margin-left: auto;


}


.form-hint {


  font-size: 12px;


  color: var(--muted);


  min-height: 18px;


  padding: 6px 0;


  line-height: 1.4;


}


#deleteBtn { color: var(--expense); border-color: #f0c4bf; }


@media (max-width: 640px) {


  .form-row.two { grid-template-columns: 1fr; }


  .modal { padding: 12px; align-items: end; }


  .modal-card { border-radius: 16px 16px 12px 12px; }


}





.toast {


  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);


  background: var(--toast-bg); color: white; padding: 10px 16px; border-radius: 999px;


  opacity: 0; pointer-events: none; transition: 0.2s ease; z-index: 50;


}


.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }





@media (max-width: 1100px) {


  .kpi-grid, .budget-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }


  .panel-grid { grid-template-columns: 1fr; }


}


@media (max-width: 860px) {


  .app { grid-template-columns: 1fr; }


  .sidebar {


    position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--line);


  }


  .nav { flex-direction: row; overflow: auto; }


  .nav-item { white-space: nowrap; }


  .sidebar-summary { display: none; }


  .topbar { flex-direction: column; }


  .topbar-right { align-items: stretch; }


  .search-box input { width: 100%; }


  .sidebar-controls {


    width: 100%;


    justify-content: flex-start;


    margin-top: 0;


    border-top: 0;


    padding-top: 2px;


    flex-wrap: wrap;


  }


}








.delta {


  display: inline-flex;


  align-items: center;


  justify-content: flex-end;


  gap: 4px;


  font-variant-numeric: tabular-nums;


  font-weight: 600;


}


.delta.up { color: var(--expense); }


.delta.down { color: var(--income); }


.delta.flat { color: var(--muted); }


.delta.income-up { color: var(--income); }


.delta.income-down { color: var(--expense); }


.compare-note {


  margin-top: 10px;


  color: var(--muted);


  font-size: 12px;


}








select#periodMode {


  min-width: 88px;


  font-weight: 600;


}


.year-heat {


  display: grid;


  grid-template-columns: repeat(4, minmax(0, 1fr));


  gap: 10px;


}


.year-heat-cell {


  min-height: 88px;


  border-radius: 12px;


  border: 1px solid var(--line);


  background: var(--heat-0);


  padding: 10px;


  display: flex;


  flex-direction: column;


  justify-content: space-between;


}


.year-heat-cell .ym {


  font-size: 13px;


  color: var(--muted);


}


.year-heat-cell .ya {


  font-size: 16px;


  font-weight: 700;


  font-variant-numeric: tabular-nums;


}


.year-heat-cell.level-1 { background: var(--heat-1); }


.year-heat-cell.level-2 { background: var(--heat-2); }


.year-heat-cell.level-3 { background: var(--heat-3); color: var(--heat-ink-mid); }


.year-heat-cell.level-4 { background: var(--heat-4); color: var(--heat-ink-mid); }


.year-heat-cell.level-5 { background: var(--heat-5); color: var(--heat-ink-strong); }








.budget-rank-row {


  align-items: center;


  grid-template-columns: 88px 1fr 96px;


}


.budget-bars {


  display: flex;


  flex-direction: column;


  gap: 5px;


  min-width: 0;


}


.budget-track {


  height: 9px;


}


.budget-track.prev {


  height: 7px;


  background: color-mix(in srgb, var(--rank-track) 80%, transparent);


}


.rank-fill.expense.prev {


  background: color-mix(in srgb, var(--expense) 28%, var(--rank-track));


  opacity: 0.9;


}


html[data-theme="dark"] .rank-fill.expense.prev {


  background: color-mix(in srgb, var(--expense) 34%, var(--rank-track));


  opacity: 0.85;


}


.budget-rank-val {


  display: flex;


  flex-direction: column;


  align-items: flex-end;


  gap: 2px;


  line-height: 1.25;


}


.budget-rank-val .cur-amt {


  color: var(--ink);


  font-weight: 600;


}


.budget-rank-val .prev-amt {


  color: var(--muted);


  font-size: 11px;


  font-weight: 400;


  opacity: 0.85;


}








.sidebar-flow {


  display: grid;


  grid-template-columns: 1fr 1fr;


  gap: 8px;


  margin: 2px 0 8px;


}


.sidebar-flow-item {


  display: flex;


  flex-direction: column;


  gap: 2px;


  min-width: 0;


}


.sidebar-income,


.sidebar-expense {


  font-size: 12px;


  font-weight: 600;


  font-variant-numeric: tabular-nums;


  line-height: 1.2;


  white-space: nowrap;


  overflow: hidden;


  text-overflow: ellipsis;


}


.sidebar-income { color: #8fd6b0; }


.sidebar-expense { color: #f0a59b; }








#recentTable tbody tr.clickable-row {


  cursor: pointer;


}


#recentTable tbody tr.clickable-row:hover td {


  background: color-mix(in srgb, var(--brand) 8%, var(--table-hover));


}








#recordsTable tbody tr.clickable-row {


  cursor: pointer;


}


#recordsTable tbody tr.clickable-row:hover td {


  background: color-mix(in srgb, var(--brand) 8%, var(--table-hover));


}

#recordsTable tbody tr.selected td {

  background: color-mix(in srgb, var(--brand) 10%, var(--table-hover));

}

#recordsTable .select-col {

  width: 42px;

  text-align: center;

  padding-left: 8px;

  padding-right: 8px;

}

#membersTable .select-col {

  width: 42px;

  text-align: center;

  padding-left: 8px;

  padding-right: 8px;

}

#recordsTable .record-select,

#recordsSelectAll,

#membersTable .member-select,

#membersSelectAll {

  width: 16px;

  height: 16px;

  accent-color: var(--brand);

  cursor: pointer;

}

#deleteSelectedBtn:disabled {

  opacity: 0.45;

  cursor: not-allowed;

}










#exportBtn,


#exportRecordsBtn {


  white-space: nowrap;


}








#recordsTable thead th.sortable,


#recentTable thead th.sortable {


  cursor: pointer;


  user-select: none;


  white-space: nowrap;


}


#recordsTable thead th.sortable:hover,


#recentTable thead th.sortable:hover {


  color: var(--brand);


}


#recordsTable thead th.sortable.active,


#recentTable thead th.sortable.active {


  color: var(--brand);


}


#recordsTable thead .sort-ind,


#recentTable thead .sort-ind {


  display: inline-block;


  min-width: 12px;


  font-size: 12px;


}


.sort-chips .sort-chip.active {


  background: var(--brand);


  border-color: var(--brand);


  color: #fff;


}








.rank-fill.income.prev {


  background: color-mix(in srgb, var(--income) 28%, var(--rank-track));


  opacity: 0.9;


}


html[data-theme="dark"] .rank-fill.income.prev {


  background: color-mix(in srgb, var(--income) 34%, var(--rank-track));


  opacity: 0.85;


}


.income-setup {


  margin-top: 0;


}








body.modal-open {


  overflow: hidden;


}








.recent-table-wrap {


  max-height: min(62vh, 720px);


  overflow: auto;


}








#importBtn,


#importRecordsBtn {


  white-space: nowrap;


}





/* Floating add button */


.fab-add {


  position: fixed !important;


  right: 28px !important;


  top: 50% !important;


  bottom: auto !important;


  left: auto !important;


  transform: translateY(-50%) !important;


  width: 72px;


  height: 72px;


  margin: 0;


  border: 0;


  padding: 0;


  border-radius: 999px;


  background: transparent;


  color: #fff;


  cursor: pointer;


  z-index: 1200;


  display: grid;


  place-items: center;


  overflow: visible;


}


.fab-add-core {


  position: relative;


  z-index: 2;


  width: 72px;


  height: 72px;


  border-radius: 999px;


  display: flex;


  flex-direction: column;


  align-items: center;


  justify-content: center;


  gap: 2px;


  background: linear-gradient(160deg, var(--brand-2), var(--brand));


  box-shadow: 0 14px 30px rgba(15, 107, 92, 0.35);


  animation: fab-breathe 1.8s ease-in-out infinite;


  will-change: transform, box-shadow;


}


.fab-add-plus {


  font-size: 28px;


  line-height: 1;


  font-weight: 700;


  margin-top: -1px;


}


.fab-add-text {


  font-size: 12px;


  line-height: 1;


  font-weight: 700;


}


.fab-add-ring {


  position: absolute;


  left: 50%;


  top: 50%;


  width: 72px;


  height: 72px;


  margin: 0;


  border-radius: 999px;


  transform: translate(-50%, -50%);


  background: rgba(15, 107, 92, 0.28);


  z-index: 1;


  animation: fab-pulse 1.8s ease-out infinite;


  will-change: transform, opacity;


  pointer-events: none;


}


.fab-add:hover .fab-add-core {


  filter: brightness(1.05);


  animation-play-state: paused;


  transform: scale(1.06);


}


.fab-add:active .fab-add-core {


  transform: scale(0.96);


}


.fab-add:focus-visible {


  outline: none;


}


.fab-add:focus-visible .fab-add-core {


  box-shadow: 0 0 0 3px rgba(255,255,255,0.7), 0 14px 30px rgba(15, 107, 92, 0.35);


}


body.modal-open .fab-add {


  opacity: 0;


  pointer-events: none;


  visibility: hidden;


  transform: translateY(-50%) scale(0.92) !important;


}


@keyframes fab-breathe {


  0%, 100% {


    transform: scale(1);


    box-shadow: 0 14px 30px rgba(15, 107, 92, 0.30);


  }


  50% {


    transform: scale(1.1);


    box-shadow: 0 18px 40px rgba(15, 107, 92, 0.48);


  }


}


@keyframes fab-pulse {


  0% {


    transform: translate(-50%, -50%) scale(1);


    opacity: 0.55;


  }


  70% {


    transform: translate(-50%, -50%) scale(1.55);


    opacity: 0;


  }


  100% {


    transform: translate(-50%, -50%) scale(1.55);


    opacity: 0;


  }


}


@media (max-width: 860px) {


  .fab-add {


    right: 16px !important;


    bottom: 18px !important;


    width: 64px;


    height: 64px;


  }


  .fab-add-core,


  .fab-add-ring {


    width: 64px;


    height: 64px;


  }


  .fab-add-plus { font-size: 24px; }


  .fab-add-text { font-size: 11px; }


}

















/* Dashboard category compare */


.dash-rank-row {


  align-items: start;


  grid-template-columns: 88px 1fr 118px;


  padding: 2px 0;


}


.dash-bars {


  display: flex;


  flex-direction: column;


  gap: 6px;


  min-width: 0;


  padding-top: 3px;


}


.dash-track {


  height: 10px;


  background: var(--rank-track);


  border-radius: 999px;


  overflow: hidden;


}


.dash-track.prev {


  height: 8px;


  background: color-mix(in srgb, var(--rank-track) 72%, transparent);


}


.rank-fill.expense.prev {


  background: color-mix(in srgb, var(--expense) 34%, var(--rank-track));


  opacity: 0.95;


}


html[data-theme="dark"] .rank-fill.expense.prev {


  background: color-mix(in srgb, var(--expense) 42%, var(--rank-track));


  opacity: 0.95;


}


.dash-rank-val {


  display: flex;


  flex-direction: column;


  align-items: flex-end;


  gap: 3px;


  line-height: 1.2;


  min-height: 34px;


  justify-content: center;


}


.dash-rank-val .cur-amt {


  color: var(--ink);


  font-weight: 700;


  font-size: 12px;


}


.dash-rank-val .prev-amt {


  color: var(--muted);


  font-size: 11px;


  font-weight: 500;


  opacity: 0.95;


  white-space: nowrap;


}


#categoryChartHint {


  white-space: nowrap;


}








.dash-rank-row.multi {


  grid-template-columns: 88px 1fr 126px;


  align-items: start;


}


.dash-rank-val.multi {


  min-height: 48px;


  gap: 2px;


}


.dash-track.prev.yoy {


  height: 7px;


  opacity: 0.92;


}


.rank-fill.expense.prev.yoy {


  background: color-mix(in srgb, var(--expense) 22%, var(--rank-track));


}


.rank-fill.income.prev.yoy {


  background: color-mix(in srgb, var(--income) 22%, var(--rank-track));


}


html[data-theme="dark"] .rank-fill.expense.prev.yoy {


  background: color-mix(in srgb, var(--expense) 30%, var(--rank-track));


}


html[data-theme="dark"] .rank-fill.income.prev.yoy {


  background: color-mix(in srgb, var(--income) 30%, var(--rank-track));


}


.dash-rank-val .prev-amt.yoy {


  opacity: 0.8;


}








/* Note wrap */


.table td.note-cell {


  white-space: normal;


  word-break: break-word;


  overflow-wrap: anywhere;


  line-height: 1.4;


  min-width: 140px;


  max-width: 320px;


  vertical-align: top;


}


#recordsTable td.note-cell {


  max-width: 360px;


}


#recentTable td.note-cell {


  max-width: 280px;


}








.lang-toggle {


  margin-right: 0;


}








.switch-btn {


  min-width: 64px;


  white-space: nowrap;


}


.icon-switch {


  width: 42px;


  min-width: 42px;


  height: 42px;


  padding: 0;


  display: inline-flex;


  align-items: center;


  justify-content: center;


  font-size: 18px;


  line-height: 1;


  border-radius: 999px;


}





.control-icon {
  width: 20px;
  height: 20px;
  display: block;
  position: relative;
  color: var(--text);
}

.control-icon-skin {
  border: 2px solid currentColor;
  border-radius: 50% 50% 46% 50%;
}

.control-icon-skin::before,
.control-icon-skin::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: currentColor;
}

.control-icon-skin::before {
  width: 4px;
  height: 4px;
  left: 4px;
  top: 4px;
  box-shadow: 7px 1px 0 currentColor, 3px 7px 0 currentColor;
}

.control-icon-skin::after {
  width: 5px;
  height: 4px;
  right: -2px;
  bottom: 2px;
  background: var(--panel);
  border: 2px solid currentColor;
}

.control-icon-language::before,
.control-icon-language::after {
  position: absolute;
  color: currentColor;
  line-height: 1;
}

.control-icon-language::before {
  content: "A";
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  left: 0;
  top: 0;
}

.control-icon-language::after {
  content: "文";
  font-size: 12px;
  font-weight: 700;
  right: -1px;
  bottom: 0;
}

.control-icon-theme {
  border: 2px solid currentColor;
  border-radius: 50%;
}

.control-icon-theme::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  right: -3px;
  top: -3px;
  border-radius: 50%;
  background: var(--sidebar);
}

.trend-visual {
  position: relative;
  min-height: 244px;
  padding-top: 8px;
}

.trend-columns {
  min-height: 232px;
  display: grid;
  gap: 8px;
  align-items: end;
}

.trend-month {
  min-width: 0;
  display: grid;
  grid-template-rows: 196px auto auto;
  gap: 6px;
  align-items: start;
  text-align: center;
}

.trend-month-bars {
  position: relative;
  height: 196px;
}

.trend-zero {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed color-mix(in srgb, var(--muted) 55%, transparent);
}

.trend-bar {
  position: absolute;
  width: min(32%, 11px);
  min-height: 2px;
  border-radius: 5px;
}

.trend-bar.income {
  left: 18%;
  bottom: 50%;
  background: var(--income);
}

.trend-bar.expense {
  right: 18%;
  top: 50%;
  background: var(--expense);
}

.sidebar-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: auto; padding: 10px 0 0; border-top: 1px solid var(--sidebar-border); order: 4; flex: 0 0 auto; }

.sidebar-controls .icon-switch { width: 44px; min-width: 44px; height: 44px; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }


.user-login-btn,
.user-account-summary {


  display: inline-flex;


  align-items: center;


  gap: 6px;


  white-space: nowrap;


}











.user-account-summary {
  gap: 8px;
  min-width: 0;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}

.user-account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.user-account-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.user-account-copy small {
  color: var(--muted);
  font-size: 10px;
}

.user-account-copy strong {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.module-grid {


  grid-template-columns: 1.1fr 0.9fr;


}


.bar-plot.simple {


  height: 150px;


  grid-template-columns: repeat(2, 1fr);


  max-width: 40px;


}


.bar-slot.single {


  height: 100%;


}


.bar-slot.single .bar-up {


  height: 100%;


  align-items: flex-end;


}








#txActionRow {


  display: grid;


  gap: 6px;


  margin-bottom: 4px;


}


#txActionRow[hidden] {


  display: none !important;


}


#txActionType {


  width: 100%;


  border: 1px solid var(--line);


  border-radius: 10px;


  background: var(--input-bg);


  color: var(--ink);


  padding: 10px 12px;


  min-height: 42px;


}


#txActionHint {


  line-height: 1.4;


}








/* Invest / Loan trend visuals */


.module-trend {


  min-height: 300px;


}


.module-trend-head {


  display: flex;


  justify-content: flex-end;


  margin-bottom: 8px;


}


.module-trend-wrap {


  position: relative;


  width: 100%;


  padding-top: 4px;


}


.module-bars {


  display: grid;


  grid-template-columns: repeat(12, minmax(0, 1fr));


  gap: 8px;


  align-items: end;


  min-height: 250px;


}


.module-col .bar-plot.module {


  height: 180px;


  max-width: 44px;


  width: 100%;


  display: grid;


  grid-template-columns: repeat(2, 1fr);


  gap: 3px;


  position: relative;


}


.module-col .bar-slot.single {


  height: 100%;


  display: flex;


  flex-direction: column;


}


.module-col .bar-slot.single .bar-up {


  height: 100%;


  display: flex;


  align-items: flex-end;


}


.module-col .bar.income,


.module-col .bar.expense {


  border-radius: 6px 6px 2px 2px;


  min-width: 8px;


}


.module-col .bar.income {


  background: linear-gradient(180deg, color-mix(in srgb, var(--income) 70%, #9be7c2), var(--income));


  box-shadow: 0 6px 14px color-mix(in srgb, var(--income) 22%, transparent);


}


.module-col .bar.expense {


  background: linear-gradient(180deg, color-mix(in srgb, var(--expense) 70%, #f0b2aa), var(--expense));


  box-shadow: 0 6px 14px color-mix(in srgb, var(--expense) 20%, transparent);


}


.module-col .bar-balance {


  font-size: 10px;


  font-weight: 600;


  max-width: 100%;


  overflow: hidden;


  text-overflow: ellipsis;


}


.module-net-svg {


  position: absolute;


  left: 0;


  right: 0;


  top: 4px;


  height: 180px;


  width: 100%;


  pointer-events: none;


  overflow: visible;


  z-index: 3;


}


.module-zero-line {


  stroke: color-mix(in srgb, var(--muted) 45%, transparent);


  stroke-width: 1;


  stroke-dasharray: 2 3;


  vector-effect: non-scaling-stroke;


}


.module-net-line {


  stroke: #2f9f89;


  stroke-width: 2.2;


  stroke-linecap: round;


  stroke-linejoin: round;


  vector-effect: non-scaling-stroke;


  filter: drop-shadow(0 1px 1px rgba(15, 107, 92, 0.18));


}


.module-net-dot {


  stroke: #fff;


  stroke-width: 0.35;


  vector-effect: non-scaling-stroke;


}


.module-net-dot.pos { fill: #2f9f89; }


.module-net-dot.neg { fill: #5b7388; }





html[data-theme="dark"] .module-col .bar.income {


  box-shadow: 0 8px 16px rgba(0,0,0,0.25);


}


html[data-theme="dark"] .module-col .bar.expense {


  box-shadow: 0 8px 16px rgba(0,0,0,0.25);


}


html[data-theme="dark"] .module-net-line {


  stroke: #54b89f;


}





.loan-interest-cell {


  min-width: 180px;


  line-height: 1.45;


}


.loan-interest-main {


  font-weight: 700;


  color: var(--ink);


}


.loan-interest-sub {


  margin-top: 2px;


  color: var(--muted);


  font-size: 12px;


}


.loan-interest-remain {


  color: var(--expense);


}


.loan-principal-main {


  font-weight: 700;


  color: var(--ink);


}


.loan-principal-sub {


  margin-top: 2px;


  color: var(--muted);


  font-size: 12px;


}


.loan-principal-remain {


  color: var(--expense);


}


.loan-link-note {


  margin-top: 2px;


  color: var(--muted);


  font-size: 12px;


}








/* ===== Apple Liquid Glass theme overrides ===== */


:root,


html[data-theme="light"] {


  --bg: #eef2f7;


  --bg-2: #f7f9fc;


  --panel: rgba(255, 255, 255, 0.58);


  --ink: #0f1724;


  --muted: #5b6778;


  --line: rgba(255, 255, 255, 0.55);


  --brand: #0071e3;


  --brand-2: #2997ff;


  --income: #0a8f5b;


  --expense: #d70015;


  --warn: #c77d00;


  --shadow: 0 18px 50px rgba(15, 23, 36, 0.08), 0 2px 10px rgba(15, 23, 36, 0.04);


  --radius: 22px;


  --sidebar: 270px;


  --sidebar-bg: rgba(255, 255, 255, 0.42);


  --sidebar-border: rgba(255, 255, 255, 0.45);


  --body-bg:


    radial-gradient(1200px 700px at 8% -10%, rgba(120, 180, 255, 0.42), transparent 55%),


    radial-gradient(900px 600px at 92% 8%, rgba(180, 140, 255, 0.28), transparent 50%),


    radial-gradient(800px 500px at 50% 100%, rgba(120, 230, 200, 0.18), transparent 55%),


    linear-gradient(180deg, #e9eef7 0%, #f4f7fb 42%, #eef3f8 100%);


  --chip-bg: rgba(255, 255, 255, 0.55);


  --table-hover: rgba(255, 255, 255, 0.42);


  --rank-track: rgba(15, 23, 36, 0.06);


  --cal-empty: rgba(255, 255, 255, 0.35);


  --drawer-bg: rgba(255, 255, 255, 0.72);


  --input-bg: rgba(255, 255, 255, 0.62);


  --toast-bg: rgba(20, 28, 40, 0.88);


  --sidebar-card-bg: rgba(15, 23, 36, 0.78);


  --sidebar-card-ink: #f4f8ff;


  --theme-toggle-bg: rgba(255, 255, 255, 0.55);


  --glass-border: rgba(255, 255, 255, 0.62);


  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.72);


  --glass-blur: blur(24px) saturate(160%);


  --heat-0: var(--cal-empty);


  --heat-1: #d9ecff;


  --heat-2: #b7dbff;


  --heat-3: #86c1ff;


  --heat-4: #4f97f2;


  --heat-5: #1f6fd8;


  --heat-ink-strong: #ffffff;


  --heat-ink-mid: #0f2a4a;


}





html[data-theme="dark"] {


  --bg: #070b12;


  --bg-2: #0d1420;


  --panel: rgba(22, 30, 44, 0.52);


  --ink: #eef3fb;


  --muted: #9aa8bd;


  --line: rgba(255, 255, 255, 0.08);


  --brand: #0a84ff;


  --brand-2: #64b5ff;


  --income: #30d158;


  --expense: #ff453a;


  --warn: #ffd60a;


  --shadow: 0 22px 60px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.28);


  --sidebar-bg: rgba(12, 18, 28, 0.55);


  --sidebar-border: rgba(255, 255, 255, 0.08);


  --body-bg:


    radial-gradient(1000px 650px at 10% -12%, rgba(30, 90, 180, 0.35), transparent 55%),


    radial-gradient(900px 600px at 95% 5%, rgba(120, 70, 190, 0.22), transparent 52%),


    radial-gradient(700px 480px at 50% 105%, rgba(20, 140, 120, 0.14), transparent 55%),


    linear-gradient(180deg, #05080f 0%, #0a1019 45%, #0b121c 100%);


  --chip-bg: rgba(255, 255, 255, 0.05);


  --table-hover: rgba(255, 255, 255, 0.04);


  --rank-track: rgba(255, 255, 255, 0.08);


  --cal-empty: rgba(255, 255, 255, 0.03);


  --drawer-bg: rgba(16, 22, 34, 0.72);


  --input-bg: rgba(255, 255, 255, 0.05);


  --toast-bg: rgba(24, 34, 50, 0.92);


  --sidebar-card-bg: rgba(255, 255, 255, 0.08);


  --sidebar-card-ink: #eef4ff;


  --theme-toggle-bg: rgba(255, 255, 255, 0.06);


  --glass-border: rgba(255, 255, 255, 0.12);


  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);


  --glass-blur: blur(28px) saturate(150%);


  --heat-0: #101826;


  --heat-1: #16304d;


  --heat-2: #1b4a78;


  --heat-3: #2267a8;


  --heat-4: #2f88d8;


  --heat-5: #64b5ff;


  --heat-ink-strong: #061018;


  --heat-ink-mid: #e8f4ff;


}





body {


  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif;


  letter-spacing: -0.01em;


  background-attachment: fixed;


}





body::before {


  content: "";


  position: fixed;


  inset: 0;


  pointer-events: none;


  z-index: 0;


  background:


    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.28), transparent 28%),


    radial-gradient(circle at 80% 10%, rgba(255,255,255,0.16), transparent 24%);


  opacity: 0.7;


}





.app, .sidebar, .main {


  position: relative;


  z-index: 1;


}





/* 记一笔弹层必须脱离文档流，不能被玻璃主题改成 relative */


.modal-mask {


  position: fixed !important;


  inset: 0 !important;


  z-index: 4000 !important;


}


.modal {


  position: fixed !important;


  inset: 0 !important;


  z-index: 4010 !important;


  display: grid !important;


  place-items: center !important;


}


.modal-mask.open,


.modal.open {


  opacity: 1 !important;


  pointer-events: auto !important;


  visibility: visible !important;


}


.modal-card {


  position: relative !important;


  z-index: 1 !important;


  max-height: min(86vh, 900px);


  overflow: auto;


}


.toast {


  position: fixed !important;


  z-index: 4100 !important;


}


.fab-add {


  position: fixed !important;


  z-index: 3500 !important;


}





.sidebar {


  background: var(--sidebar-bg);


  border-right: 1px solid var(--sidebar-border);


  backdrop-filter: var(--glass-blur);


  -webkit-backdrop-filter: var(--glass-blur);


  box-shadow: 8px 0 40px rgba(15, 23, 36, 0.04);


}





.brand-mark {


  border-radius: 16px;


  background: linear-gradient(145deg, var(--brand), var(--brand-2));


  box-shadow: 0 10px 24px rgba(0, 113, 227, 0.28), var(--glass-highlight);


}





.nav-item {


  border-radius: 14px;


  transition: background 0.25s cubic-bezier(0.32, 0.72, 0, 1), transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);


}


.nav-item:hover { background: rgba(255, 255, 255, 0.35); }


html[data-theme="dark"] .nav-item:hover { background: rgba(255, 255, 255, 0.06); }


.nav-item.active {


  background: rgba(0, 113, 227, 0.12);


  color: var(--brand);


  box-shadow: var(--glass-highlight);


}


html[data-theme="dark"] .nav-item.active {


  background: rgba(10, 132, 255, 0.18);


  color: #7cc4ff;


}





.panel,


.kpi,


.modal-card,


.chip,


.btn,


.table-wrap,


.budget-setup,


.sidebar-card {


  background: var(--panel);


  border: 1px solid var(--glass-border);


  box-shadow: var(--shadow), var(--glass-highlight);


  backdrop-filter: var(--glass-blur);


  -webkit-backdrop-filter: var(--glass-blur);


}





.panel,


.kpi,


.budget-setup,


.table-wrap {


  border-radius: var(--radius);


}





.panel { padding: 18px; }





.kpi {


  border-radius: 24px;


  padding: 18px 18px 16px;


  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.28s cubic-bezier(0.32, 0.72, 0, 1);


}


.kpi:hover {


  transform: translateY(-2px);


  box-shadow: 0 22px 50px rgba(15, 23, 36, 0.12), var(--glass-highlight);


}


.kpi .value {


  font-weight: 690;


  letter-spacing: -0.03em;


}





.chip,


.btn,


.sort-chip {


  border-radius: 999px;


  backdrop-filter: blur(16px) saturate(140%);


  -webkit-backdrop-filter: blur(16px) saturate(140%);


}





.btn.primary {


  background: linear-gradient(180deg, #2f95ff 0%, var(--brand) 100%);


  border: 1px solid rgba(255, 255, 255, 0.28);


  box-shadow: 0 10px 24px rgba(0, 113, 227, 0.28), inset 0 1px 0 rgba(255,255,255,0.35);


  color: #fff;


}


.btn.primary:hover { filter: brightness(1.04); }


.btn.ghost {


  background: rgba(255, 255, 255, 0.35);


  border: 1px solid var(--glass-border);


}


html[data-theme="dark"] .btn.ghost { background: rgba(255, 255, 255, 0.05); }

.btn.ghost.danger {

  color: var(--expense);

  border-color: color-mix(in srgb, var(--expense) 35%, var(--glass-border));

}

.btn.ghost.danger:hover:not(:disabled) {

  background: color-mix(in srgb, var(--expense) 9%, var(--panel));

}







.table { background: transparent; }


.table th {


  background: rgba(255, 255, 255, 0.28);


  backdrop-filter: blur(10px);


}


html[data-theme="dark"] .table th { background: rgba(255, 255, 255, 0.04); }


.table tr:hover td { background: var(--table-hover); }





.modal-mask {


  background: rgba(12, 18, 28, 0.28);


  backdrop-filter: blur(10px) saturate(140%);


  -webkit-backdrop-filter: blur(10px) saturate(140%);


}


.modal-card {


  border-radius: 28px;


  background: var(--drawer-bg);


  border: 1px solid var(--glass-border);


  box-shadow: 0 30px 80px rgba(15, 23, 36, 0.22), var(--glass-highlight);


}


.modal-form input,


.modal-form select {


  background: var(--input-bg);


  border: 1px solid var(--glass-border);


  border-radius: 14px;


  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);


}


.modal-form input:focus,


.modal-form select:focus {


  outline: none;


  border-color: rgba(0, 113, 227, 0.45);


  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12), inset 0 1px 0 rgba(255,255,255,0.4);


}





.fab-add { border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.28)); border: 1px solid var(--glass-border); box-shadow: 0 18px 40px rgba(0, 113, 227, 0.22), var(--glass-highlight); }


.fab-add-core {


  background: linear-gradient(180deg, #2f95ff 0%, var(--brand) 100%);


  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);


}





.toast {


  border-radius: 16px;


  border: 1px solid rgba(255,255,255,0.12);


  backdrop-filter: blur(18px) saturate(150%);


  -webkit-backdrop-filter: blur(18px) saturate(150%);


}





.rank-fill {


  background: linear-gradient(90deg, rgba(0,113,227,0.75), rgba(41,151,255,0.95));


  box-shadow: 0 0 12px rgba(0,113,227,0.18);


}





.tag {


  border-radius: 999px;


  border: 1px solid var(--glass-border);


  background: rgba(255,255,255,0.35);


}


html[data-theme="dark"] .tag { background: rgba(255,255,255,0.06); }





html[data-theme="light"][data-skin="ocean"],


html[data-theme="light"][data-skin="sunset"],


html[data-theme="light"][data-skin="lavender"],


html[data-theme="light"][data-skin="slate"],


html[data-theme="light"][data-skin="rose"] {


  --panel: rgba(255,255,255,0.58);


  --sidebar-bg: rgba(255,255,255,0.42);


  --drawer-bg: rgba(255,255,255,0.72);


  --input-bg: rgba(255,255,255,0.62);


}


html[data-theme="dark"][data-skin="ocean"],


html[data-theme="dark"][data-skin="sunset"],


html[data-theme="dark"][data-skin="lavender"],


html[data-theme="dark"][data-skin="slate"],


html[data-theme="dark"][data-skin="rose"] {


  --panel: rgba(22, 30, 44, 0.52);


  --sidebar-bg: rgba(12, 18, 28, 0.55);


  --drawer-bg: rgba(16, 22, 34, 0.72);


  --input-bg: rgba(255,255,255,0.05);


}





@media (max-width: 900px) {


  .panel, .kpi { border-radius: 18px; }


}








/* sidebar summary not pinned */


.sidebar-summary {


  margin-top: 8px !important;


}


.sidebar {


  overflow-y: auto;


}








/* ===== layout fix: sidebar cards under brand, never pin bottom ===== */


.sidebar {


  display: flex !important;


  flex-direction: column !important;


  justify-content: flex-start !important;


  align-items: stretch !important;


  height: 100vh;


  overflow-y: auto !important;


  gap: 14px !important;


}


.sidebar .brand,


.sidebar .sidebar-summary,


.sidebar .nav {


  position: relative !important;


  top: auto !important;


  bottom: auto !important;


  margin-top: 0 !important;


  flex: 0 0 auto !important;


}


.sidebar .sidebar-summary {


  order: 2;


  margin: 0 !important;


  gap: 10px;


}


.sidebar .brand { order: 1; }


.sidebar .nav {


  order: 3;


  margin-top: 4px !important;


  padding-bottom: 18px;


}








/* modal always overlay */


#drawer.modal,


#drawerMask.modal-mask {


  position: fixed !important;


  inset: 0 !important;


}


#drawer.modal {


  z-index: 4010 !important;


}


#drawerMask.modal-mask {


  z-index: 4000 !important;


}


#drawer.modal:not(.open),


#drawerMask.modal-mask:not(.open) {


  opacity: 0 !important;


  pointer-events: none !important;


}


#drawer.modal.open,


#drawerMask.modal-mask.open {


  opacity: 1 !important;


  pointer-events: auto !important;


}








/* ===== fixed left sidebar ===== */


html, body {


  height: 100%;


}


body {


  overflow: hidden;


}


.app {


  height: 100vh;


  min-height: 100vh;


  overflow: hidden;


  grid-template-columns: var(--sidebar) minmax(0, 1fr);


}


.sidebar {


  position: sticky !important;


  top: 0 !important;


  left: 0;


  height: 100vh !important;


  max-height: 100vh !important;


  align-self: start;


  overflow-y: auto !important;


  overscroll-behavior: contain;


  z-index: 20;


}


.main {


  height: 100vh;


  overflow-y: auto !important;


  overscroll-behavior: contain;


  min-width: 0;


}





/* 小屏仍恢复纵向布局，避免遮挡内容 */


@media (max-width: 860px) {


  body {


    overflow: auto;


  }


  .app {


    height: auto;


    min-height: 100vh;


    overflow: visible;


    grid-template-columns: 1fr;


  }


  .sidebar {


    position: relative !important;


    height: auto !important;


    max-height: none !important;


    overflow: visible !important;


  }


  .main {


    height: auto;


    overflow: visible !important;


  }


}








/* ===== invest/loan action selects: readable text in light/dark ===== */


.modal-form label {


  color: var(--muted);


}


.modal-form input,


.modal-form select,


#txActionType,


#txLinkedLoan,


#txLinkedInvest,


#txLoanMethod,


#txLoanTermUnit,


#subCategory,


#subCycle,


#subCurrency,


#subStatus,


#subsStatusFilter,


#subsCategoryFilter {


  color: var(--ink) !important;


  background: var(--input-bg) !important;


  border: 1px solid var(--line);


  -webkit-text-fill-color: var(--ink);


  caret-color: var(--ink);


}





/* 下拉展开项：白天深字浅底，晚上浅字深底 */


.modal-form select option,


#txActionType option,


#txLinkedLoan option,


#txLinkedInvest option,


#txLoanMethod option,


#txLoanTermUnit option,


#subCategory option,


#subCycle option,


#subCurrency option,


#subStatus option,


#subsStatusFilter option,


#subsCategoryFilter option {


  color: #0f1724;


  background: #ffffff;


}





html[data-theme="dark"] .modal-form select option,


html[data-theme="dark"] #txActionType option,


html[data-theme="dark"] #txLinkedLoan option,


html[data-theme="dark"] #txLinkedInvest option,


html[data-theme="dark"] #txLoanMethod option,


html[data-theme="dark"] #txLoanTermUnit option,


html[data-theme="dark"] #subCategory option,


html[data-theme="dark"] #subCycle option,


html[data-theme="dark"] #subCurrency option,


html[data-theme="dark"] #subStatus option,


html[data-theme="dark"] #subsStatusFilter option,


html[data-theme="dark"] #subsCategoryFilter option {


  color: #eef3fb;


  background: #1a2332;


}





html[data-theme="light"] .modal-form input,


html[data-theme="light"] .modal-form select,


html[data-theme="light"] #txActionType,


html[data-theme="light"] #txLinkedLoan,


html[data-theme="light"] #txLinkedInvest,


html[data-theme="light"] #txLoanMethod,


html[data-theme="light"] #txLoanTermUnit,


html[data-theme="light"] #subCategory,


html[data-theme="light"] #subCycle,


html[data-theme="light"] #subCurrency,


html[data-theme="light"] #subStatus,


html[data-theme="light"] #subsStatusFilter,


html[data-theme="light"] #subsCategoryFilter {


  color: #0f1724 !important;


  -webkit-text-fill-color: #0f1724;


  background: rgba(255, 255, 255, 0.92) !important;


}





html[data-theme="dark"] .modal-form input,


html[data-theme="dark"] .modal-form select,


html[data-theme="dark"] #txActionType,


html[data-theme="dark"] #txLinkedLoan,


html[data-theme="dark"] #txLinkedInvest,


html[data-theme="dark"] #txLoanMethod,


html[data-theme="dark"] #txLoanTermUnit,


html[data-theme="dark"] #subCategory,


html[data-theme="dark"] #subCycle,


html[data-theme="dark"] #subCurrency,


html[data-theme="dark"] #subStatus,


html[data-theme="dark"] #subsStatusFilter,


html[data-theme="dark"] #subsCategoryFilter {


  color: #eef3fb !important;


  -webkit-text-fill-color: #eef3fb;


  background: rgba(16, 24, 38, 0.96) !important;


}








/* ===== light mode top-left labels readability ===== */


html[data-theme="light"] .brand-title {


  color: #0f1724 !important;


}


html[data-theme="light"] .brand-sub,


html[data-theme="light"] #dataRange {


  color: #5b6778 !important;


}


html[data-theme="light"] .nav-item {


  color: #0f1724 !important;


  background: rgba(255, 255, 255, 0.45);


  border: 1px solid rgba(15, 23, 36, 0.06);


}


html[data-theme="light"] .nav-item:hover {


  background: rgba(0, 113, 227, 0.10);


  color: #0b4f9c !important;


}


html[data-theme="light"] .nav-item.active {


  background: rgba(0, 113, 227, 0.16) !important;


  color: #0058b0 !important;


  font-weight: 700;


  border-color: rgba(0, 113, 227, 0.22);


}





/* 左上结余卡片在白天也保持深底浅字，避免洗白 */


html[data-theme="light"] .sidebar-card {


  background: rgba(20, 32, 48, 0.88) !important;


  color: #f4f8ff !important;


  border: 1px solid rgba(255, 255, 255, 0.18);


}


html[data-theme="light"] .sidebar-card.year {


  background: rgba(15, 26, 42, 0.92) !important;


}


html[data-theme="light"] .sidebar-card .muted,


html[data-theme="light"] .sidebar-card .small {


  color: rgba(244, 248, 255, 0.78) !important;


}


html[data-theme="light"] .sidebar-balance {


  color: #ffffff !important;


}


html[data-theme="light"] .sidebar-income {


  color: #7dffa8 !important;


}


html[data-theme="light"] .sidebar-expense {


  color: #ffb3b0 !important;


}


html[data-theme="light"] .sidebar-select {


  color: #f4f8ff !important;


  background: rgba(255, 255, 255, 0.12) !important;


  border: 1px solid rgba(255, 255, 255, 0.22) !important;


}


html[data-theme="light"] .sidebar-select option {


  color: #0f1724;


  background: #ffffff;


}





/* ---- Subscription module ---- */


.subs-list {


  display: grid;


  gap: 10px;


}


.subs-item {


  display: grid;


  grid-template-columns: 1fr auto;


  gap: 8px 12px;


  padding: 12px 14px;


  border-radius: 14px;


  background: color-mix(in srgb, var(--panel) 82%, transparent);


  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);


  backdrop-filter: blur(14px) saturate(140%);


  -webkit-backdrop-filter: blur(14px) saturate(140%);


}


.subs-item-main {


  display: grid;


  gap: 4px;


}


.subs-item-title {


  font-weight: 650;


  color: var(--ink);


}


.subs-item-meta {


  color: var(--muted);


  font-size: 12px;


}


.subs-item-amount {


  text-align: right;


  font-weight: 700;


  color: var(--expense);


  white-space: nowrap;


}


.subs-item-days {


  text-align: right;


  font-size: 12px;


  color: var(--muted);


}


.subs-templates {


  display: grid;


  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));


  gap: 10px;


}


.subs-template-card {


  display: grid;


  gap: 6px;


  padding: 12px;


  border-radius: 14px;


  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);


  background: color-mix(in srgb, var(--panel) 84%, transparent);


  cursor: pointer;


  text-align: left;


  transition: transform .15s ease, border-color .15s ease, background .15s ease;


}


.subs-template-card:hover {


  transform: translateY(-1px);


  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));


  background: color-mix(in srgb, var(--brand) 8%, var(--panel));


}


.subs-template-name {


  font-weight: 650;


  color: var(--ink);


}


.subs-template-meta {


  font-size: 12px;


  color: var(--muted);


}


.subs-badge {


  display: inline-flex;


  align-items: center;


  gap: 4px;


  padding: 2px 8px;


  border-radius: 999px;


  font-size: 12px;


  font-weight: 600;


  border: 1px solid transparent;


}


.subs-badge.active {


  color: var(--income);


  background: color-mix(in srgb, var(--income) 14%, transparent);


  border-color: color-mix(in srgb, var(--income) 24%, transparent);


}


.subs-badge.paused {


  color: var(--muted);


  background: color-mix(in srgb, var(--muted) 14%, transparent);


  border-color: color-mix(in srgb, var(--muted) 22%, transparent);


}


.subs-actions {


  display: flex;


  flex-wrap: wrap;


  gap: 6px;


}


.subs-actions .btn {


  padding: 4px 10px;


  font-size: 12px;


}


#subsTable td,


#subsTable th {


  vertical-align: middle;


}


#subsEmptyHint {


  padding: 8px 2px 0;


}


#subDrawer.modal,


#subDrawerMask.modal-mask {


  z-index: 1200;


}


#subDrawer.modal {


  z-index: 1201;


}


#subDrawerMask.modal-mask {


  z-index: 1200;


}


#subDrawer.modal:not(.open),


#subDrawerMask.modal-mask:not(.open) {


  opacity: 0;


  pointer-events: none;


  visibility: hidden;


}


#subDrawer.modal.open,


#subDrawerMask.modal-mask.open {


  opacity: 1;


  pointer-events: auto;


  visibility: visible;


}


html[data-theme="light"] .subs-item,


html[data-theme="light"] .subs-template-card {


  background: rgba(255, 255, 255, 0.62);


}


html[data-theme="dark"] .subs-item,


html[data-theme="dark"] .subs-template-card {


  background: rgba(20, 28, 36, 0.55);


}








/* Subscription search tone */


#subsSearch {


  width: min(240px, 100%);


  min-height: 40px;


  padding: 10px 12px;


  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));


  border-radius: 10px;


  background: color-mix(in srgb, var(--brand) 6%, var(--input-bg));


  color: var(--ink);


  caret-color: var(--ink);


  -webkit-text-fill-color: var(--ink);


  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;


}


#subsSearch::placeholder {


  color: var(--muted);


  opacity: 0.82;


}


#subsSearch:focus {


  outline: none;


  border-color: color-mix(in srgb, var(--brand) 60%, var(--line));


  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);


  background: color-mix(in srgb, var(--brand) 8%, var(--input-bg));


}





/* ===== subscription selects: light/dark readable text ===== */


#view-subs .filters select,


#subsStatusFilter,


#subsCategoryFilter,


#subDrawer .modal-form select,


#subCategory,


#subCycle,


#subCurrency,


#subStatus {


  color: var(--ink) !important;


  background: var(--input-bg) !important;


  border: 1px solid var(--line);


  -webkit-text-fill-color: var(--ink);


  caret-color: var(--ink);


}





#view-subs .filters select option,


#subsStatusFilter option,


#subsCategoryFilter option,


#subDrawer .modal-form select option,


#subCategory option,


#subCycle option,


#subCurrency option,


#subStatus option {


  color: #0f1724;


  background: #ffffff;


}





html[data-theme="light"] #view-subs .filters select,


html[data-theme="light"] #subsStatusFilter,


html[data-theme="light"] #subsCategoryFilter,


html[data-theme="light"] #subDrawer .modal-form select,


html[data-theme="light"] #subCategory,


html[data-theme="light"] #subCycle,


html[data-theme="light"] #subCurrency,


html[data-theme="light"] #subStatus {


  color: #0f1724 !important;


  -webkit-text-fill-color: #0f1724;


  background: rgba(255, 255, 255, 0.92) !important;


}





html[data-theme="dark"] #view-subs .filters select,


html[data-theme="dark"] #subsStatusFilter,


html[data-theme="dark"] #subsCategoryFilter,


html[data-theme="dark"] #subDrawer .modal-form select,


html[data-theme="dark"] #subCategory,


html[data-theme="dark"] #subCycle,


html[data-theme="dark"] #subCurrency,


html[data-theme="dark"] #subStatus {


  color: #eef3fb !important;


  -webkit-text-fill-color: #eef3fb;


  background: rgba(16, 24, 38, 0.96) !important;


}





html[data-theme="dark"] #view-subs .filters select option,


html[data-theme="dark"] #subsStatusFilter option,


html[data-theme="dark"] #subsCategoryFilter option,


html[data-theme="dark"] #subDrawer .modal-form select option,


html[data-theme="dark"] #subCategory option,


html[data-theme="dark"] #subCycle option,


html[data-theme="dark"] #subCurrency option,


html[data-theme="dark"] #subStatus option {


  color: #eef3fb;


  background: #1a2332;


}








/* ===== global selects: readable text in light/dark ===== */


select,


.filters select,


.toolbar select,


.form select,


.modal-form select,


.budget-form select,


.sidebar-select {


  color: var(--ink) !important;


  background: var(--input-bg) !important;


  border: 1px solid var(--line);


  -webkit-text-fill-color: var(--ink);


  caret-color: var(--ink);


}





select option,


.filters select option,


.toolbar select option,


.form select option,


.modal-form select option,


.budget-form select option,


.sidebar-select option {


  color: #0f1724;


  background: #ffffff;


}





html[data-theme="light"] select,


html[data-theme="light"] .filters select,


html[data-theme="light"] .toolbar select,


html[data-theme="light"] .form select,


html[data-theme="light"] .modal-form select,


html[data-theme="light"] .budget-form select {


  color: #0f1724 !important;


  -webkit-text-fill-color: #0f1724;


  background: rgba(255, 255, 255, 0.96) !important;


}





html[data-theme="dark"] select,


html[data-theme="dark"] .filters select,


html[data-theme="dark"] .toolbar select,


html[data-theme="dark"] .form select,


html[data-theme="dark"] .modal-form select,


html[data-theme="dark"] .budget-form select {


  color: #eef3fb !important;


  -webkit-text-fill-color: #eef3fb;


  background: rgba(16, 24, 38, 0.96) !important;


}





html[data-theme="dark"] select option,


html[data-theme="dark"] .filters select option,


html[data-theme="dark"] .toolbar select option,


html[data-theme="dark"] .form select option,


html[data-theme="dark"] .modal-form select option,


html[data-theme="dark"] .budget-form select option,


html[data-theme="dark"] .sidebar-select option {


  color: #eef3fb;


  background: #1a2332;


}





/* sidebar cards stay light-on-dark even in day mode */


html[data-theme="light"] .sidebar-select {


  color: #f4f8ff !important;


  -webkit-text-fill-color: #f4f8ff;


  background: rgba(255, 255, 255, 0.12) !important;


  border: 1px solid rgba(255, 255, 255, 0.22) !important;


}


html[data-theme="light"] .sidebar-select option {


  color: #0f1724;


  background: #ffffff;


}


html[data-theme="dark"] .sidebar-select {


  color: #eef3fb !important;


  -webkit-text-fill-color: #eef3fb;


  background: rgba(255, 255, 255, 0.08) !important;


  border: 1px solid rgba(255, 255, 255, 0.16) !important;


}








/* brand data range split into two lines */


.brand-sub#dataRange {


  display: grid;


  gap: 2px;


  line-height: 1.35;


}


.brand-sub#dataRange .data-range-dates,


.brand-sub#dataRange .data-range-count {


  display: block;


  white-space: nowrap;


}


.brand-sub#dataRange .data-range-count {


  font-weight: 650;


  opacity: 0.9;


}





/* Account drawer, people drawer, people manager */


#accountDrawer .form-row,


#peopleDrawer .form-row {


  margin-bottom: 12px;


}


.people-toolbar {


  display: flex;


  justify-content: flex-end;


  margin: 0 0 12px;


}


.people-list {


  display: flex;


  flex-direction: column;


  gap: 8px;


  max-height: 360px;


  overflow: auto;


  margin-bottom: 12px;


}


.people-item {


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 12px;


  padding: 10px 12px;


  border: 1px solid var(--border, #e5e7eb);


  border-radius: 8px;


  background: var(--panel, #fff);


}


.people-item-main {


  display: flex;


  flex-direction: column;


  gap: 2px;


  min-width: 0;


}


.people-item-actions {


  display: flex;


  gap: 6px;


  flex-shrink: 0;


}


.btn.danger {


  color: #b91c1c;


}


#accountsTable tbody tr,


#membersTable tbody tr {


  cursor: pointer;


}


#managePeopleBtn {


  white-space: nowrap;


  margin-left: 6px;


}





/* Sidebar member management */


.member-management {


  margin-top: 8px;


  padding: 10px 12px;


  border-top: 1px solid var(--border, #e5e7eb);


}


.sidebar-section-head {


  display: flex;


  align-items: center;


  justify-content: space-between;


  margin-bottom: 8px;


}


.sidebar-section-title {


  font-weight: 600;


  font-size: 13px;


  color: var(--text-muted, #6b7280);


}


.icon-btn-sm {


  width: 24px;


  height: 24px;


  padding: 0;


  font-size: 14px;


  border-radius: 6px;


}


.member-list {


  display: flex;


  flex-direction: column;


  gap: 4px;


  max-height: 200px;


  overflow-y: auto;


}


.member-list:empty::after {


  content: "";


  font-size: 12px;


  color: var(--text-muted, #9ca3af);


  font-style: italic;


}


.member-chip {


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 6px;


  padding: 5px 8px;


  border-radius: 6px;


  background: var(--panel, #fff);


  border: 1px solid var(--border, #e5e7eb);


  cursor: pointer;


  transition: all 0.15s;


}


.member-chip:hover {


  border-color: var(--accent, #3b82f6);


  box-shadow: 0 1px 3px rgba(0,0,0,0.06);


}


.member-chip-name {


  font-size: 13px;


  white-space: nowrap;


  overflow: hidden;


  text-overflow: ellipsis;


  flex: 1;


}


.member-chip-actions {


  display: flex;


  gap: 2px;


  opacity: 0;


  transition: opacity 0.15s;


}


.member-chip:hover .member-chip-actions {


  opacity: 1;


}


.member-chip-btn {


  width: 20px;


  height: 20px;


  padding: 0;


  font-size: 11px;


  border: none;


  background: transparent;


  cursor: pointer;


  border-radius: 4px;


  color: var(--text-muted, #9ca3af);


  display: flex;


  align-items: center;


  justify-content: center;


}


.member-chip-btn:hover {


  background: var(--bg-hover, #f3f4f6);


  color: var(--text, #374151);


}


.member-chip-btn.delete:hover {


  color: #dc2626;


}


.member-add-row {


  display: flex;


  gap: 4px;


  margin-top: 6px;


}


.member-add-row input {


  flex: 1;


  padding: 4px 8px;


  border: 1px solid var(--accent, #3b82f6);


  border-radius: 6px;


  font-size: 13px;


  background: var(--input-bg, #fff);


  color: var(--text, #374151);


}


.member-add-row input:focus {


  outline: none;


  box-shadow: 0 0 0 2px var(--accent-alpha, rgba(59,130,246,0.15));


}





.row-btn.danger { color: #b91c1c; }


.row-btn.danger:hover { background: #fee2e2; }


.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }


.panel-head .btn { margin-left: auto; }





/* Merge dialog */


#mergeDialog .form-row { margin-bottom: 12px; }








/* People drawer enhancements */


#peopleDrawer .modal-card {


  width: min(460px, 100%);


}


#peopleDrawer .modal-head h2 {


  font-size: 18px;


}


#peopleNameInput {


  font-size: 16px;


  min-height: 46px;


  padding: 10px 14px;


  border-radius: 10px;


  border: 1px solid var(--line);


  background: var(--input-bg);


  color: var(--ink);


  width: 100%;


}


#peopleNameInput:focus {


  outline: none;


  border-color: var(--brand);


  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);


}


#peopleForm .form-actions {


  margin-top: 8px;


  padding-top: 14px;


  border-top: 1px solid var(--line);


}





/* Sort chips in panel head */


.panel-head .sort-chips {


  flex: 1 1 auto;


  justify-content: center;



/* Voice input button */
.voice-btn {
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-right: 8px;
  animation: voice-pulse 2s ease-in-out infinite;
}
.voice-btn:hover {
  transform: scale(1.1);
  background: var(--brand-2);
}
.voice-btn.listening {
  background: #e74c3c;
  animation: voice-recording 0.8s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 107, 92, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(15, 107, 92, 0); }
}
@keyframes voice-recording {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
/* Voice hints */
.voice-hint {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 6px;
  opacity: 0.7;
}
.voice-status {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding: 6px 0;
  display: none;
}
.voice-status.active {
  display: block;
}
.voice-status.error {
  color: #e74c3c;
}
/* Voice format hint in modal head */
.voice-format-hint {
  font-size: 11px;
  color: var(--muted);
  padding: 4px 0;
  line-height: 1.4;
  opacity: 0.85;
}

/* Adjust voice button in modal head */
.modal-head .voice-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  font-size: 18px;
  margin-left: auto;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.modal-head > div:first-child {
  flex: 1;
  min-width: 0;
}


}


/* Redesigned quick-entry drawer */
#drawer.modal {
  padding: 22px !important;
  place-items: center !important;
  background: radial-gradient(circle at 20% 18%, rgba(255,255,255,.42), transparent 28%), rgba(35, 25, 15, .28);
  backdrop-filter: blur(14px);
}
#drawer .modal-card {
  width: min(820px, calc(100vw - 34px)) !important;
  max-height: calc(100vh - 44px);
  overflow: auto;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,.56) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.92), transparent 32%),
    linear-gradient(180deg, rgba(255,252,247,.98), rgba(244,235,223,.98)) !important;
  box-shadow: 0 34px 110px rgba(41, 27, 13, .32) !important;
  padding: 0 !important;
}
#drawer .modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 22px 24px !important;
  background: rgba(255,255,255,.68);
  border-bottom: 1px solid rgba(91, 70, 44, .1);
  backdrop-filter: blur(16px);
}
#drawer .modal-head h2 {
  margin: 0 0 6px !important;
  font-size: 26px !important;
  letter-spacing: -.03em;
}
#drawer #txAmountHint {
  color: rgba(31, 26, 20, .62) !important;
}
#drawer .voice-wrap {
  display: grid;
  justify-items: end;
  gap: 7px;
  margin-left: auto;
}
#drawer .voice-btn {
  width: auto !important;
  min-width: 132px;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 17px;
  gap: 8px;
  border-radius: 999px !important;
  border: 1px solid rgba(91, 70, 44, .16) !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  box-shadow: 0 15px 34px rgba(15,107,92,.22);
  font-weight: 700;
  animation: voice-pulse 2s ease-in-out infinite;
}
#drawer .voice-btn.listening {
  background: linear-gradient(135deg, #b94b36, #df7a4f) !important;
  box-shadow: 0 18px 42px rgba(185,75,54,.28);
}
#drawer .voice-text {
  font-size: 14px;
  white-space: nowrap;
}
#drawer .voice-status {
  display: block !important;
  max-width: 290px;
  min-height: 18px;
  padding: 0 !important;
  text-align: right !important;
  color: rgba(31, 26, 20, .58) !important;
  font-size: 12px !important;
  line-height: 1.45;
}
#drawer .voice-status.success { color: var(--brand) !important; }
#drawer .voice-status.error { color: var(--expense) !important; }
#drawer .modal-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px !important;
  padding: 24px !important;
}
#drawer .form-row,
#drawer .modal-form > label,
#drawer .form-actions {
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(91,70,44,.1);
  box-shadow: 0 12px 30px rgba(82,60,34,.07);
  padding: 16px;
}
#drawer .modal-form > label {
  min-height: 94px;
  justify-content: center;
}
#drawer .form-row.two,
#drawer #txActionRow,
#drawer #txLoanFields,
#drawer #txLinkedLoanRow,
#drawer #txLinkedInvestRow,
#drawer .form-actions,
#drawer #txNoteLabel {
  grid-column: 1 / -1;
}
#drawer .modal-form input,
#drawer .modal-form select {
  min-height: 46px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(91,70,44,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
#drawer .modal-form input:focus,
#drawer .modal-form select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(15,107,92,.12) !important;
  outline: none;
}
#drawer .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: rgba(255,255,255,.5);
}
#drawer .btn.primary {
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(15,107,92,.18);
}
#drawer .btn.ghost {
  border-radius: 999px;
  background: rgba(255,255,255,.68);
}
@media (max-width: 760px) {
  #drawer.modal { padding: 10px !important; }
  #drawer .modal-card { width: calc(100vw - 20px) !important; border-radius: 24px !important; }
  #drawer .modal-head { align-items: flex-start !important; flex-wrap: wrap; padding: 18px !important; }
  #drawer .voice-wrap { width: 100%; justify-items: stretch; }
  #drawer .voice-status { text-align: left !important; max-width: none; }
  #drawer .modal-form { grid-template-columns: 1fr; padding: 16px !important; }
}


/* ===== Global readable warm palette reset ===== */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --bg: #f3ede4;
  --bg-2: #fffaf2;
  --panel: #fffdf8;
  --ink: #21180f;
  --muted: #725f49;
  --line: #d8c9b8;
  --brand: #7a4f24;
  --brand-2: #a76d32;
  --income: #24785a;
  --expense: #a6422f;
  --warn: #9a6a16;
  --shadow: 0 18px 46px rgba(82, 58, 31, 0.12);
  --drawer-bg: #fff8ef;
  --input-bg: #fffdf8;
  --toast-bg: #3a2a1b;
  --sidebar-bg: rgba(255, 250, 242, 0.92);
  --sidebar-border: rgba(216, 201, 184, 0.9);
  --sidebar-card-bg: #3f2b18;
  --sidebar-card-ink: #fff8ef;
  --body-bg:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.78), transparent 30%),
    radial-gradient(circle at 84% 8%, rgba(230,200,158,0.42), transparent 26%),
    linear-gradient(180deg, #f7f0e6 0%, #eee4d5 48%, #e7dccb 100%);
  color-scheme: light;
}

html,
body {
  background: var(--body-bg) !important;
  color: var(--ink) !important;
}

.app,
.main,
.card,
.panel,
.stat-card,
.modal-card,
.drawer-card,
.table-wrap,
.section-card {
  color: var(--ink) !important;
}

.muted,
.small,
label,
.modal-form label,
.form label,
.card .muted,
.panel .muted,
.table th,
.voice-status,
.voice-hint {
  color: var(--muted) !important;
}

h1,
h2,
h3,
h4,
strong,
.table td,
.metric-value,
.value,
.amount,
.kpi,
#drawerTitle,
#txAmountHint,
#viewTitle {
  color: var(--ink) !important;
}

button,
.btn,
.icon-btn,
.nav-item,
.fab-add {
  color: inherit;
}

.btn.primary,
.fab-add-core,
#drawer .voice-btn {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  color: #fffaf2 !important;
  border-color: rgba(122, 79, 36, 0.28) !important;
}

.btn.ghost,
.icon-btn,
.theme-toggle,
.lang-toggle,
.skin-toggle {
  background: rgba(255, 253, 248, 0.78) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

input,
select,
textarea,
.modal-form input,
.modal-form select,
.modal-form textarea,
#txAmount,
#txDate,
#txCategory,
#txAccount,
#txPeople,
#txNote {
  background: var(--input-bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--brand) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(114, 95, 73, 0.68) !important;
  -webkit-text-fill-color: rgba(114, 95, 73, 0.68) !important;
}

select option {
  color: #21180f !important;
  background: #fffdf8 !important;
}

#drawer .modal-card,
#drawer .form-row,
#drawer .modal-form > label,
#drawer .form-actions {
  color: var(--ink) !important;
}

#drawer .voice-status.success,
.text-income,
.income {
  color: var(--income) !important;
}

#drawer .voice-status.error,
.text-expense,
.expense {
  color: var(--expense) !important;
}

.table tbody tr:hover,
.list-row:hover {
  background: rgba(122, 79, 36, 0.07) !important;
}


/* ===== Readable night palette reset ===== */
html[data-theme="dark"] {
  --bg: #16110c;
  --bg-2: #211810;
  --panel: #2a1f15;
  --ink: #fff3e4;
  --muted: #d5bea3;
  --line: #5b4733;
  --brand: #d9984d;
  --brand-2: #f0b568;
  --income: #7ed7ad;
  --expense: #ff9a83;
  --warn: #f0c66d;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  --drawer-bg: #241a12;
  --input-bg: #18120d;
  --toast-bg: #fff3e4;
  --sidebar-bg: rgba(24, 18, 13, 0.94);
  --sidebar-border: rgba(91, 71, 51, 0.88);
  --sidebar-card-bg: #3a2818;
  --sidebar-card-ink: #fff3e4;
  --body-bg:
    radial-gradient(circle at 18% 12%, rgba(217, 152, 77, 0.16), transparent 30%),
    radial-gradient(circle at 84% 8%, rgba(255, 213, 151, 0.09), transparent 28%),
    linear-gradient(180deg, #100c09 0%, #18110c 48%, #21170f 100%);
  color-scheme: dark;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--body-bg) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .app,
html[data-theme="dark"] .main,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .drawer-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .content,
html[data-theme="dark"] .view,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .chart-card {
  background-color: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .main,
html[data-theme="dark"] .view,
html[data-theme="dark"] .content {
  background: transparent !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .metric-value,
html[data-theme="dark"] .value,
html[data-theme="dark"] .amount,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] #drawerTitle,
html[data-theme="dark"] #txAmountHint,
html[data-theme="dark"] #viewTitle,
html[data-theme="dark"] .brand,
html[data-theme="dark"] .nav-item,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .icon-btn {
  color: var(--ink) !important;
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] .small,
html[data-theme="dark"] label,
html[data-theme="dark"] .modal-form label,
html[data-theme="dark"] .form label,
html[data-theme="dark"] .card .muted,
html[data-theme="dark"] .panel .muted,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .voice-status,
html[data-theme="dark"] .voice-hint,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .subtle {
  color: var(--muted) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .modal-form input,
html[data-theme="dark"] .modal-form select,
html[data-theme="dark"] .modal-form textarea,
html[data-theme="dark"] #txAmount,
html[data-theme="dark"] #txDate,
html[data-theme="dark"] #txCategory,
html[data-theme="dark"] #txAccount,
html[data-theme="dark"] #txPeople,
html[data-theme="dark"] #txNote {
  background: var(--input-bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--brand) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: rgba(213, 190, 163, 0.78) !important;
  -webkit-text-fill-color: rgba(213, 190, 163, 0.78) !important;
}

html[data-theme="dark"] select option {
  color: #fff3e4 !important;
  background: #18120d !important;
}

html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .fab-add-core,
html[data-theme="dark"] #drawer .voice-btn {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  color: #17100a !important;
  border-color: rgba(240, 181, 104, 0.5) !important;
  box-shadow: 0 16px 36px rgba(217, 152, 77, 0.24) !important;
}

html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .lang-toggle,
html[data-theme="dark"] .skin-toggle,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .tag {
  background: rgba(255, 243, 228, 0.08) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] table {
  color: var(--ink) !important;
}

html[data-theme="dark"] .table tbody tr,
html[data-theme="dark"] .list-row {
  background: rgba(255, 243, 228, 0.035) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .table tbody tr:hover,
html[data-theme="dark"] .list-row:hover {
  background: rgba(217, 152, 77, 0.13) !important;
}

html[data-theme="dark"] #drawer.modal {
  background: radial-gradient(circle at 20% 18%, rgba(217,152,77,.16), transparent 28%), rgba(8, 6, 5, .72) !important;
}

html[data-theme="dark"] #drawer .modal-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(217,152,77,.14), transparent 34%),
    linear-gradient(180deg, rgba(42,31,21,.98), rgba(25,18,12,.98)) !important;
  color: var(--ink) !important;
  border-color: rgba(240, 181, 104, .18) !important;
}

html[data-theme="dark"] #drawer .modal-head,
html[data-theme="dark"] #drawer .form-row,
html[data-theme="dark"] #drawer .modal-form > label,
html[data-theme="dark"] #drawer .form-actions {
  background: rgba(255, 243, 228, 0.07) !important;
  color: var(--ink) !important;
  border-color: rgba(240, 181, 104, 0.16) !important;
}

html[data-theme="dark"] #drawer .voice-status.success,
html[data-theme="dark"] .text-income,
html[data-theme="dark"] .income {
  color: var(--income) !important;
}

html[data-theme="dark"] #drawer .voice-status.error,
html[data-theme="dark"] .text-expense,
html[data-theme="dark"] .expense {
  color: var(--expense) !important;
}


/* Subscription template library */
.subs-templates {
  display: grid;
  gap: 16px;
}
.subs-template-group {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px;
  background: rgba(255,255,255,.54);
  box-shadow: 0 12px 28px rgba(82, 58, 31, .07);
}
.subs-template-title {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}
.subs-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}
.subs-template-chip {
  display: flex;
  min-height: 66px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(122, 79, 36, .14);
  border-radius: 16px;
  background: rgba(255,253,248,.84);
  color: var(--ink);
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(82, 58, 31, .06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.subs-template-chip:hover {
  transform: translateY(-1px);
  border-color: var(--brand);
  box-shadow: 0 14px 28px rgba(82, 58, 31, .12);
}
.subs-template-chip span {
  font-weight: 750;
  color: var(--ink);
}
.subs-template-chip small {
  color: var(--muted);
}
html[data-theme="dark"] .subs-template-group {
  background: rgba(255, 243, 228, .06) !important;
  border-color: rgba(240, 181, 104, .16) !important;
}
html[data-theme="dark"] .subs-template-chip {
  background: rgba(255, 243, 228, .08) !important;
  color: var(--ink) !important;
  border-color: rgba(240, 181, 104, .16) !important;
}
html[data-theme="dark"] .subs-template-chip:hover {
  border-color: var(--brand) !important;
}
html[data-theme="dark"] .subs-template-chip span { color: var(--ink) !important; }
html[data-theme="dark"] .subs-template-chip small { color: var(--muted) !important; }


/* Subscription list filter layout fix */
#view-subs .panel-head {
  align-items: flex-start !important;
  gap: 16px !important;
}

#view-subs .panel-head h2 {
  flex: 0 0 auto;
  line-height: 42px;
}

#view-subs .panel-head .filters {
  margin-left: auto;
  display: grid !important;
  grid-template-columns: minmax(220px, 1.5fr) minmax(120px, 0.7fr) minmax(140px, 0.8fr);
  gap: 10px !important;
  align-items: stretch !important;
  width: min(620px, 100%);
  flex: 1 1 520px;
}

#view-subs #subsSearch,
#view-subs #subsStatusFilter,
#view-subs #subsCategoryFilter {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  box-sizing: border-box;
  border-radius: 14px !important;
  padding: 0 13px !important;
  font-size: 14px;
}

#view-subs #subsSearch {
  grid-column: auto;
}

@media (max-width: 980px) {
  #view-subs .panel-head {
    flex-direction: column;
    align-items: stretch !important;
  }
  #view-subs .panel-head h2 {
    line-height: 1.25;
  }
  #view-subs .panel-head .filters {
    margin-left: 0;
    width: 100%;
    flex-basis: auto;
  }
}

@media (max-width: 640px) {
  #view-subs .panel-head .filters {
    grid-template-columns: 1fr;
  }
  #view-subs #subsSearch,
  #view-subs #subsStatusFilter,
  #view-subs #subsCategoryFilter {
    height: 44px !important;
    min-height: 44px !important;
  }
}


/* Budget section layout polish */
#view-budgets {
  display: grid;
  gap: 22px;
}

#view-budgets .budget-setup {
  position: relative;
  overflow: hidden;
  border-radius: 28px !important;
  padding: 24px !important;
  border: 1px solid rgba(122, 79, 36, 0.14) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.72), transparent 32%),
    linear-gradient(180deg, rgba(255,253,248,.9), rgba(246,237,225,.78)) !important;
  box-shadow: 0 22px 58px rgba(82, 58, 31, .12) !important;
}

#view-budgets .budget-setup::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -80px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: rgba(217, 152, 77, .12);
  filter: blur(10px);
  pointer-events: none;
}

#view-budgets .panel-head {
  position: relative;
  z-index: 1;
  margin-bottom: 18px !important;
  align-items: flex-start !important;
}

#view-budgets .panel-head h2 {
  font-size: 24px !important;
  line-height: 1.2;
  letter-spacing: -.03em;
}

#view-budgets .income-setup > .muted {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: -6px 0 18px;
  line-height: 1.7;
}

#view-budgets .budget-form {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 14px !important;
  align-items: end !important;
  max-width: 720px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid rgba(122, 79, 36, .12);
  border-radius: 22px;
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

#view-budgets .budget-form label {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: var(--muted) !important;
  font-size: 13px;
  font-weight: 650;
}

#view-budgets .budget-form input {
  width: 100%;
  min-height: 48px !important;
  border-radius: 16px !important;
  padding: 0 16px !important;
  font-size: 18px;
  font-weight: 750;
  background: rgba(255,253,248,.92) !important;
  border: 1px solid rgba(122, 79, 36, .18) !important;
  color: var(--ink) !important;
}

#view-budgets .budget-form input:focus {
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(122, 79, 36, .12);
}

#view-budgets .budget-form .btn {
  min-height: 48px;
  white-space: nowrap;
  border-radius: 999px !important;
  padding: 0 22px;
}

#view-budgets .budget-summary {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
  gap: 14px !important;
  margin: 18px 0 !important;
}

#view-budgets .budget-summary .kpi {
  border-radius: 22px !important;
  padding: 18px !important;
  background: rgba(255,255,255,.66) !important;
  border: 1px solid rgba(122, 79, 36, .1) !important;
  box-shadow: 0 12px 28px rgba(82, 58, 31, .08) !important;
}

#view-budgets .chart.ranks {
  position: relative;
  z-index: 1;
  min-height: 220px;
  border-radius: 24px;
  padding: 16px;
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(122, 79, 36, .1);
}

#view-budgets .budget-rank-row,
#view-budgets .rank-row {
  grid-template-columns: minmax(92px, 150px) minmax(160px, 1fr) minmax(88px, 118px) !important;
  gap: 14px;
  padding: 10px 0;
}

#view-budgets .budget-track,
#view-budgets .rank-track {
  border-radius: 999px;
  overflow: hidden;
}

html[data-theme="dark"] #view-budgets .budget-setup {
  background:
    radial-gradient(circle at 14% 0%, rgba(217,152,77,.14), transparent 34%),
    linear-gradient(180deg, rgba(42,31,21,.94), rgba(25,18,12,.92)) !important;
  border-color: rgba(240,181,104,.16) !important;
  box-shadow: 0 22px 58px rgba(0,0,0,.34) !important;
}

html[data-theme="dark"] #view-budgets .budget-form,
html[data-theme="dark"] #view-budgets .budget-summary .kpi,
html[data-theme="dark"] #view-budgets .chart.ranks {
  background: rgba(255, 243, 228, .07) !important;
  border-color: rgba(240,181,104,.16) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] #view-budgets .budget-form input {
  background: var(--input-bg) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

@media (max-width: 760px) {
  #view-budgets .budget-setup {
    border-radius: 22px !important;
    padding: 18px !important;
  }
  #view-budgets .budget-form {
    grid-template-columns: 1fr;
  }
  #view-budgets .budget-form .btn {
    width: 100%;
  }
  #view-budgets .budget-summary {
    grid-template-columns: 1fr !important;
  }
  #view-budgets .budget-rank-row,
  #view-budgets .rank-row {
    grid-template-columns: 1fr !important;
  }
  #view-budgets .budget-rank-val {
    align-items: flex-start;
  }
}


/* Ensure subscription drawer opens above the app */
#subDrawer.modal,
#subDrawerMask.modal-mask {
  position: fixed !important;
  inset: 0 !important;
}
#subDrawer.modal { z-index: 4020 !important; }
#subDrawerMask.modal-mask { z-index: 4010 !important; }
#subDrawer.modal.open,
#subDrawerMask.modal-mask.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}
#subDrawer.modal:not(.open),
#subDrawerMask.modal-mask:not(.open) {
  opacity: 0 !important;
  pointer-events: none !important;
}
#subDrawer .modal-card {
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow: auto;
}


/* Records table strict column alignment */
#recordsTable {
  table-layout: fixed;
  min-width: 1080px;
  width: 100%;
}

#recordsTable th,
#recordsTable td {
  box-sizing: border-box;
  vertical-align: middle;
  height: 46px;
  padding: 10px 12px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#recordsTable thead th {
  text-align: left;
  font-weight: 750;
}

#recordsTable .select-col {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  text-align: center !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

#recordsTable th:nth-child(2),
#recordsTable td.date-cell { width: 108px; }
#recordsTable th:nth-child(3),
#recordsTable td.type-cell { width: 72px; }
#recordsTable th:nth-child(4),
#recordsTable td.category-cell { width: 112px; }
#recordsTable th:nth-child(5),
#recordsTable td.note-cell { width: 220px; }
#recordsTable th:nth-child(6),
#recordsTable td.account-cell { width: 110px; }
#recordsTable th:nth-child(7),
#recordsTable td.people-cell { width: 110px; }
#recordsTable th:nth-child(8),
#recordsTable td.book-cell { width: 110px; }
#recordsTable th:nth-child(9),
#recordsTable td.amount-cell {
  width: 124px;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}
#recordsTable th:nth-child(10),
#recordsTable td.actions-cell { width: 52px; }

#recordsTable thead .sort-ind {
  float: none !important;
  display: inline-block;
  min-width: 12px;
  margin-left: 4px;
}

@media (max-width: 760px) {
  #recordsTable { min-width: 980px; }
  #recordsTable th,
  #recordsTable td { padding: 9px 10px !important; }
}


/* Quick ledger form field alignment */
#drawer .modal-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: stretch !important;
}

#drawer .modal-form > .form-row.two {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#drawer .modal-form > .form-row.two > label,
#drawer #txNoteLabel,
#drawer .modal-form > label {
  display: grid !important;
  grid-template-rows: auto 48px;
  gap: 9px !important;
  min-height: 104px !important;
  align-content: start;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(91,70,44,.1);
  box-shadow: 0 12px 30px rgba(82,60,34,.07);
  padding: 16px !important;
  box-sizing: border-box;
}

#drawer .modal-form > .form-row.two > label > input,
#drawer #txNoteLabel > input,
#drawer .modal-form > label > input,
#drawer .modal-form > .form-row.two > label > select,
#drawer .modal-form > label > select {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  box-sizing: border-box;
  align-self: end;
}

#drawer #txAmountLabel,
#drawer #txCategoryLabel,
#drawer #txAccountLabel,
#drawer #txNoteLabel {
  justify-content: stretch !important;
}

#drawer #txNoteLabel,
#drawer .form-actions,
#drawer #txActionRow,
#drawer #txLoanFields,
#drawer #txLinkedLoanRow,
#drawer #txLinkedInvestRow {
  grid-column: 1 / -1 !important;
}

#drawer .voice-hint {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  line-height: 1.3;
  vertical-align: baseline;
}

html[data-theme="dark"] #drawer .modal-form > .form-row.two > label,
html[data-theme="dark"] #drawer #txNoteLabel,
html[data-theme="dark"] #drawer .modal-form > label {
  background: rgba(255, 243, 228, 0.07) !important;
  border-color: rgba(240, 181, 104, 0.16) !important;
  color: var(--ink) !important;
}

@media (max-width: 720px) {
  #drawer .modal-form,
  #drawer .modal-form > .form-row.two {
    grid-template-columns: 1fr !important;
  }
}


/* Sidebar monthly goal tags */
.nav-item[data-view="budgets"],
#view-budgets {
  display: none !important;
}
.sidebar-goal-tags {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.goal-tag {
  border: 1px solid rgba(122, 79, 36, .16);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,253,248,.78);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(82, 58, 31, .08);
}
.goal-tag span,
.goal-tag small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.goal-tag strong {
  display: block;
  margin: 4px 0 2px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.goal-tag.income {
  border-color: color-mix(in srgb, var(--income) 26%, var(--line));
}
.goal-tag.income strong {
  color: var(--income);
}
html[data-theme="dark"] .goal-tag {
  background: rgba(255, 243, 228, .08) !important;
  border-color: rgba(240,181,104,.18) !important;
}
html[data-theme="dark"] .goal-tag strong { color: var(--ink) !important; }
html[data-theme="dark"] .goal-tag.income strong { color: var(--income) !important; }


/* Hide old sidebar income / expense / balance text */
.sidebar-card.year,
.sidebar-card.month {
  display: none !important;
}
.sidebar-flow,
#sidebarBalance,
#sidebarYearBalance,
#sidebarIncome,
#sidebarExpense,
#sidebarYearIncome,
#sidebarYearExpense,
#sidebarHint,
#sidebarYearHint,
#sidebarBalanceLabel,
#sidebarYearLabel {
  display: none !important;
}


/* Records page sticky toolbar and table header */
#view-records {
  position: relative;
}

#view-records .topbar .filters {
  align-items: stretch;
  gap: 8px;
}

#view-records .topbar .filters select,
#view-records .records-top-filters select {
  min-width: 118px;
}

.records-top-filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 820px) {
  #view-records .topbar .filters {
    width: 100%;
  }

  #view-records .topbar .filters select,
  #view-records .records-top-filters,
  #view-records .records-top-filters select {
    flex: 1;
    min-width: 0;
  }
}

#view-records > .panel:first-child,
#view-records .toolbar,
#view-records .filters {
  position: sticky;
  top: 0;
  z-index: 120;
}

#view-records > .panel:first-child {
  top: 0;
  background: var(--panel) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 30px rgba(82, 58, 31, 0.10);
}

#view-records .table-wrap {
  max-height: calc(100vh - 260px);
  overflow: auto !important;
  border-radius: 20px;
}

#recordsTable thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 130 !important;
  background: color-mix(in srgb, var(--panel) 92%, var(--bg)) !important;
  box-shadow: 0 1px 0 var(--line), 0 8px 18px rgba(82, 58, 31, 0.08);
}

#recordsTable thead th.select-col {
  left: 0;
  z-index: 135 !important;
}

html[data-theme="dark"] #view-records > .panel:first-child {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26);
}

html[data-theme="dark"] #recordsTable thead th {
  background: color-mix(in srgb, var(--panel) 92%, #000) !important;
  box-shadow: 0 1px 0 var(--line), 0 8px 18px rgba(0, 0, 0, 0.24);
}


/* Editable sidebar goal cards */
.goal-tag[data-goal] {
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.goal-tag[data-goal]:hover {
  transform: translateY(-1px);
  border-color: var(--brand);
  box-shadow: 0 14px 30px rgba(82, 58, 31, .13);
}
.goal-tag[data-goal]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent);
  outline-offset: 3px;
}
.goal-tag[data-goal]::after {
  content: "点击修改";
  display: inline-flex;
  margin-top: 8px;
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(122,79,36,.09);
  color: var(--muted);
  font-size: 11px;
}
html[data-theme="dark"] .goal-tag[data-goal]::after {
  background: rgba(255,243,228,.1);
}


/* Records row editing affordance */
#recordsTable tbody tr {
  cursor: pointer;
}
#recordsTable tbody tr:hover td {
  background: color-mix(in srgb, var(--brand) 9%, var(--table-hover)) !important;
}
#recordsTable tbody tr:active td {
  background: color-mix(in srgb, var(--brand) 14%, var(--table-hover)) !important;
}


/* Restore sidebar cumulative cards and refine editable goal numbers */
.sidebar-card.year,
.sidebar-card.month {
  display: block !important;
}
.sidebar-flow,
#sidebarBalance,
#sidebarYearBalance,
#sidebarIncome,
#sidebarExpense,
#sidebarYearIncome,
#sidebarYearExpense,
#sidebarHint,
#sidebarYearHint,
#sidebarBalanceLabel,
#sidebarYearLabel {
  display: initial !important;
}

/* 结余卡片跟随白天 / 黑夜主题同步切换 */
html[data-theme="light"] .sidebar-card.year,
html[data-theme="light"] .sidebar-card.month {
  background: color-mix(in srgb, var(--panel) 92%, var(--brand) 8%) !important;
  color: var(--ink) !important;
  border-color: color-mix(in srgb, var(--brand) 18%, var(--line)) !important;
  box-shadow: 0 10px 26px rgba(35, 48, 58, .08) !important;
}

html[data-theme="light"] .sidebar-card.year .muted,
html[data-theme="light"] .sidebar-card.month .muted,
html[data-theme="light"] .sidebar-card.year .small,
html[data-theme="light"] .sidebar-card.month .small,
html[data-theme="light"] .sidebar-period-caption,
html[data-theme="light"] .sidebar-period-subcaption {
  color: var(--muted) !important;
}

html[data-theme="light"] .sidebar-card.year .sidebar-select,
html[data-theme="light"] .sidebar-card.month .sidebar-select {
  color: var(--ink) !important;
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .sidebar-card.year,
html[data-theme="dark"] .sidebar-card.month {
  background: color-mix(in srgb, var(--sidebar-card-bg) 88%, #06110e) !important;
  color: var(--sidebar-card-ink) !important;
  border-color: color-mix(in srgb, var(--sidebar-card-ink) 18%, transparent) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] .sidebar-card.year .muted,
html[data-theme="dark"] .sidebar-card.month .muted,
html[data-theme="dark"] .sidebar-card.year .small,
html[data-theme="dark"] .sidebar-card.month .small,
html[data-theme="dark"] .sidebar-period-caption,
html[data-theme="dark"] .sidebar-period-subcaption {
  color: color-mix(in srgb, var(--sidebar-card-ink) 72%, transparent) !important;
}

html[data-theme="dark"] .sidebar-card.year .sidebar-select,
html[data-theme="dark"] .sidebar-card.month .sidebar-select {
  color: var(--sidebar-card-ink) !important;
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .2) !important;
}
.sidebar-flow { display: grid !important; }
.sidebar-flow-item { display: flex !important; }
#sidebarBalance,
#sidebarYearBalance { display: block !important; }
#sidebarHint,
#sidebarYearHint,
#sidebarBalanceLabel,
#sidebarYearLabel { display: block !important; }
.goal-tag[data-goal] {
  cursor: default !important;
}
.goal-tag[data-goal]::after {
  content: none !important;
  display: none !important;
}
.editable-goal-number {
  cursor: pointer;
  border-radius: 10px;
  padding: 2px 4px;
  margin-left: -4px;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.editable-goal-number:hover {
  background: rgba(122, 79, 36, .10);
  transform: translateY(-1px);
}
.editable-goal-number:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent);
  outline-offset: 2px;
}
.goal-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(122, 79, 36, .12);
  margin: 8px 0 6px;
}
.goal-progress i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--warn), var(--expense));
  transition: width .28s ease;
}
.goal-progress.income i {
  background: linear-gradient(90deg, var(--brand), var(--income));
}
html[data-theme="dark"] .editable-goal-number:hover {
  background: rgba(255, 243, 228, .10);
}
html[data-theme="dark"] .goal-progress {
  background: rgba(255, 243, 228, .12);
}


/* Redesigned quick ledger modal v2 */
#drawer.modal {
  padding: 24px !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 248, 235, .32), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(217, 152, 77, .22), transparent 24%),
    rgba(28, 20, 12, .46) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

#drawer .modal-card {
  width: min(980px, calc(100vw - 36px)) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: auto !important;
  padding: 0 !important;
  border-radius: 34px !important;
  border: 1px solid rgba(255, 255, 255, .58) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 18% 0%, rgba(255, 245, 226, .95), transparent 34%),
    linear-gradient(180deg, rgba(255, 251, 245, .98), rgba(242, 231, 216, .98)) !important;
  box-shadow: 0 38px 120px rgba(33, 20, 8, .34) !important;
}

#drawer .modal-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 24px 26px !important;
  background: rgba(255,255,255,.62) !important;
  border-bottom: 1px solid rgba(122,79,36,.12) !important;
  backdrop-filter: blur(18px);
}

#drawer .modal-head h2 {
  margin: 0 0 6px !important;
  font-size: 28px !important;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: var(--ink) !important;
}

#drawer #txAmountHint {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(122,79,36,.08);
  color: var(--muted) !important;
  font-weight: 650;
}

#drawer .voice-wrap {
  justify-items: stretch !important;
  min-width: 240px;
  padding: 10px;
  border: 1px solid rgba(122,79,36,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

#drawer .voice-btn {
  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  justify-content: center;
  border-radius: 18px !important;
  font-size: 16px !important;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  color: #fffaf2 !important;
  box-shadow: 0 18px 36px rgba(122,79,36,.22) !important;
}

#drawer .voice-btn.listening {
  background: linear-gradient(135deg, #b64b32, #ed8a52) !important;
}

#drawer .voice-status {
  max-width: none !important;
  min-height: 18px;
  margin-top: 8px;
  text-align: center !important;
  color: var(--muted) !important;
}

#drawer .modal-form {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 26px !important;
  background:
    radial-gradient(circle at 12% 30%, rgba(255,255,255,.54), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
}

#drawer .modal-form > .form-row.two {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  grid-column: 1 / -1 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#drawer .modal-form > .form-row,
#drawer .modal-form > label,
#drawer .modal-form > .form-row.two > label,
#drawer #txNoteLabel {
  position: relative;
  min-height: 112px !important;
  border-radius: 26px !important;
  padding: 17px !important;
  border: 1px solid rgba(122,79,36,.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62)) !important;
  box-shadow: 0 16px 34px rgba(82,58,31,.08), inset 0 1px 0 rgba(255,255,255,.75) !important;
  color: var(--muted) !important;
}

#drawer .modal-form > .form-row:not(.two) {
  grid-column: 1 / -1 !important;
}

#drawer .modal-form > .form-row:not(.two) > label {
  display: grid !important;
  gap: 9px;
}

#drawer .modal-form label {
  font-size: 13px !important;
  font-weight: 760 !important;
  letter-spacing: .01em;
}

#drawer .voice-hint {
  display: block !important;
  margin: 5px 0 0 !important;
  color: var(--muted) !important;
  opacity: .72;
  font-weight: 500;
}

#drawer .modal-form input,
#drawer .modal-form select {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  margin-top: 8px;
  border-radius: 18px !important;
  border: 1px solid rgba(122,79,36,.16) !important;
  background: rgba(255,253,248,.94) !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: 680;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

#drawer .modal-form input:focus,
#drawer .modal-form select:focus {
  outline: none !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(122,79,36,.12), inset 0 1px 0 rgba(255,255,255,.82) !important;
}

#drawer #txAmount {
  font-size: 22px !important;
  font-variant-numeric: tabular-nums;
}

#drawer #txNoteLabel {
  grid-column: 1 / -1 !important;
  min-height: 108px !important;
}

#drawer .form-actions {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-top: 2px;
  padding: 16px !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.48) !important;
  border: 1px solid rgba(122,79,36,.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65) !important;
}

#drawer .form-actions .btn {
  min-height: 46px;
  border-radius: 999px !important;
  padding: 0 22px;
}

#drawer .form-actions .btn.primary {
  min-width: 132px;
  box-shadow: 0 16px 32px rgba(122,79,36,.2) !important;
}

html[data-theme="dark"] #drawer .modal-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(217,152,77,.14), transparent 34%),
    linear-gradient(180deg, rgba(42,31,21,.98), rgba(25,18,12,.98)) !important;
}

html[data-theme="dark"] #drawer .modal-head,
html[data-theme="dark"] #drawer .voice-wrap,
html[data-theme="dark"] #drawer .modal-form > .form-row,
html[data-theme="dark"] #drawer .modal-form > label,
html[data-theme="dark"] #drawer .modal-form > .form-row.two > label,
html[data-theme="dark"] #drawer #txNoteLabel,
html[data-theme="dark"] #drawer .form-actions {
  background: rgba(255,243,228,.07) !important;
  border-color: rgba(240,181,104,.16) !important;
  color: var(--muted) !important;
}

html[data-theme="dark"] #drawer .modal-form input,
html[data-theme="dark"] #drawer .modal-form select {
  background: rgba(24,18,13,.92) !important;
  border-color: rgba(240,181,104,.18) !important;
  color: var(--ink) !important;
}

@media (max-width: 820px) {
  #drawer.modal { padding: 10px !important; }
  #drawer .modal-card { width: calc(100vw - 20px) !important; border-radius: 26px !important; }
  #drawer .modal-head { grid-template-columns: 1fr auto; align-items: start !important; }
  #drawer .voice-wrap { grid-column: 1 / -1; order: 3; }
  #drawer .modal-form { padding: 16px !important; gap: 12px !important; }
  #drawer .modal-form > .form-row.two { grid-template-columns: 1fr !important; }
  #drawer .form-actions { flex-direction: column-reverse; }
  #drawer .form-actions .btn { width: 100%; }
}


/* Hide sidebar income expense balance labels only */
.sidebar-flow-item .muted.small,
#sidebarBalanceLabel,
#sidebarYearLabel,
#sidebarHint,
#sidebarYearHint {
  display: none !important;
}
.sidebar-flow {
  gap: 8px !important;
}
.sidebar-flow-item {
  justify-content: flex-start !important;
}


/* RunningHub login popover */
.user-login-btn.active,
.user-login-btn:hover {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}
.login-popover[hidden] { display: none !important; }
.login-popover {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: start end;
  padding: 86px 28px 28px;
  background: rgba(28, 20, 12, .18);
  backdrop-filter: blur(8px);
}
.login-popover-card {
  position: relative;
  width: min(340px, calc(100vw - 36px));
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.58);
  background: linear-gradient(180deg, rgba(255,253,248,.98), rgba(244,235,223,.98));
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(33,20,8,.28);
  padding: 24px;
}
.login-popover-close {
  position: absolute;
  right: 14px;
  top: 14px;
}
.login-popover-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(122,79,36,.1);
  margin-bottom: 14px;
  font-size: 22px;
}
.login-popover-card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--ink);
}
.login-popover-card p {
  margin: 0 0 18px;
  line-height: 1.7;
  color: var(--muted);
}
.login-popover-card .btn {
  width: 100%;
  justify-content: center;
  min-height: 44px;
}
html[data-theme="dark"] .login-popover-card {
  background: linear-gradient(180deg, rgba(42,31,21,.98), rgba(25,18,12,.98));
  border-color: rgba(240,181,104,.18);
}

/* Quick record: quiet, compact, task-first layout */
#drawer.modal {
  padding: 16px !important;
  background: rgba(28, 20, 12, .34);
}

#drawer .modal-card {
  width: min(760px, calc(100vw - 32px)) !important;
  max-height: min(720px, calc(100vh - 32px));
  border-radius: 22px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 24px 72px rgba(33, 24, 14, .22) !important;
}

#drawer .modal-head {
  position: relative;
  padding: 18px 20px !important;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

#drawer .modal-head h2 {
  font-size: 22px !important;
  letter-spacing: -.02em;
}

#drawer .voice-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

#drawer .voice-btn {
  min-width: 112px;
  height: 40px !important;
  padding: 0 14px;
  box-shadow: none;
  animation: none;
}

#drawer .voice-status {
  max-width: 220px;
  min-height: 0;
  text-align: left !important;
  font-size: 11px !important;
}

#drawer .modal-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
  padding: 18px !important;
}

#drawer .form-row,
#drawer .modal-form > label,
#drawer .form-actions {
  padding: 12px;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: none;
}

#drawer .modal-form > label {
  min-height: 78px;
}

#drawer .modal-form input,
#drawer .modal-form select {
  min-height: 42px !important;
  border-radius: 10px !important;
  background: var(--input-bg) !important;
  box-shadow: none;
}

#drawer .form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px;
}

#drawer .form-actions .btn {
  min-height: 40px;
  padding-inline: 18px;
}

@media (max-width: 680px) {
  #drawer.modal { padding: 8px !important; }
  #drawer .modal-card { width: calc(100vw - 16px) !important; max-height: calc(100vh - 16px); }
  #drawer .modal-head { padding: 16px !important; }
  #drawer .voice-wrap { width: 100%; align-items: flex-start; flex-direction: column; }
  #drawer .voice-btn { width: 100%; }
  #drawer .voice-status { max-width: none; }
  #drawer .modal-form { grid-template-columns: 1fr; padding: 14px !important; }
}

html[data-theme="dark"] #drawer .modal-card,
html[data-theme="dark"] #drawer .modal-head,
html[data-theme="dark"] #drawer .form-row,
html[data-theme="dark"] #drawer .modal-form > label,
html[data-theme="dark"] #drawer .form-actions {
  background: var(--panel) !important;
}

/* Account overview cards */
#accountKpis.account-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.account-summary-card {
  min-width: 0;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.account-summary-head,
.account-summary-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-summary-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.account-summary-head strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-summary-head span,
.account-summary-values small {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.account-summary-values {
  padding-top: 13px;
}

.account-summary-values span {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.account-summary-values b {
  color: var(--ink);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.account-summary-values b.income { color: var(--income); }
.account-summary-values b.expense { color: var(--expense); }

.account-summary-empty {
  grid-column: 1 / -1;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 640px) {
  #accountKpis.account-summary-grid { grid-template-columns: 1fr; }
  .account-summary-card { padding: 14px; }
}

.account-records-link {
  width: 100%;
  margin-top: 14px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--brand);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.account-records-link:hover {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 9%, var(--panel));
  transform: translateY(-1px);
}

.account-month-stats {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
}

.account-month-title,
.account-month-values,
.account-expense-share {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-month-title {
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}

.account-month-title b {
  color: var(--ink);
  font-weight: 600;
}

.account-month-values {
  justify-content: space-between;
  margin-top: 10px;
}

.account-month-values span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.account-month-values small,
.account-expense-share span {
  color: var(--muted);
  font-size: 11px;
}

.account-month-values b,
.account-expense-share b {
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.account-month-values b.income { color: var(--income); }
.account-month-values b.expense { color: var(--expense); }

.account-expense-share {
  margin-top: 12px;
}

.account-expense-share div {
  height: 6px;
  flex: 1;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.account-expense-share i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--expense);
}

.account-sort-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.account-sort-control select {
  min-height: 32px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-2);
  color: var(--ink);
  font: inherit;
}

@media (max-width: 640px) {
  .account-sort-control span { display: none; }
}

/* Quick-entry form: aligned fields with clearer surface hierarchy */
#drawer .modal-card {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

#drawer .modal-head {
  background: var(--bg-2) !important;
  border-bottom-color: var(--line) !important;
}

#drawer .modal-form {
  align-items: stretch;
  gap: 14px !important;
  background: var(--bg-2);
}

#drawer .form-row,
#drawer .modal-form > label {
  min-width: 0;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#drawer .form-row.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#drawer .modal-form label,
#drawer .form-row.two > label {
  display: flex;
  min-width: 0;
  min-height: 108px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 15px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--panel) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

#drawer .modal-form label:focus-within {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent) !important;
}

#drawer .modal-form input,
#drawer .modal-form select,
#drawer .modal-form textarea {
  width: 100%;
  min-height: 44px !important;
  margin-top: auto;
  padding: 0 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: var(--bg-2) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 500;
}

#drawer .modal-form input:focus,
#drawer .modal-form select:focus,
#drawer .modal-form textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: inset 0 0 0 1px var(--brand) !important;
}

#drawer .modal-form .voice-hint {
  display: block;
  min-height: 16px;
  margin-top: -4px;
  color: var(--muted) !important;
  font-size: 11px;
  font-weight: 400;
}

#drawer #txNoteLabel {
  min-height: 104px;
}

#drawer .form-actions {
  min-height: 74px;
  padding: 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--panel) !important;
  box-shadow: none !important;
}

#drawer .form-actions .btn {
  min-height: 42px;
  padding-inline: 18px;
}

html[data-theme="dark"] #drawer .modal-card,
html[data-theme="dark"] #drawer .modal-form label,
html[data-theme="dark"] #drawer .form-actions {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] #drawer .modal-head,
html[data-theme="dark"] #drawer .modal-form,
html[data-theme="dark"] #drawer .modal-form input,
html[data-theme="dark"] #drawer .modal-form select,
html[data-theme="dark"] #drawer .modal-form textarea {
  background: var(--bg-2) !important;
}

@media (max-width: 760px) {
  #drawer .modal-form { gap: 12px !important; }
  #drawer .form-row.two { grid-template-columns: 1fr; gap: 12px; }
  #drawer .modal-form label,
  #drawer .form-row.two > label { min-height: 100px; }
  #drawer .form-actions { flex-wrap: wrap; }
  #drawer .form-actions .btn { flex: 1 1 120px; }
}

/* Keep paired entry fields on one baseline and keep examples beside labels */
#drawer .modal-form label,
#drawer .form-row.two > label {
  position: relative;
  min-height: 94px;
  gap: 6px;
}

#drawer .form-row.two > label > input,
#drawer .form-row.two > label > select {
  margin-top: auto;
}

#drawer .modal-form .voice-hint {
  display: inline !important;
  min-height: 0 !important;
  margin: 0 0 0 6px !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: inherit;
  white-space: nowrap;
}

#drawer .form-row.two > label > input,
#drawer .form-row.two > label > select,
#drawer #txNoteLabel > input {
  align-self: stretch;
}

@media (max-width: 760px) {
  #drawer .modal-form label,
  #drawer .form-row.two > label { min-height: 94px; }
}

#drawer .voice-preview {
  width: min(290px, 100%);
  max-height: 42px;
  overflow: auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-2);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}

#drawer .voice-wrap:has(.voice-preview:not([hidden])) {
  gap: 8px;
}

@media (max-width: 760px) {
  #drawer .voice-preview { width: 100%; }
}

/* Reframe quick entry with the subscription form's restrained dialog language */
#drawer.modal {
  padding: 18px !important;
  background: rgba(21, 16, 11, .42) !important;
  backdrop-filter: blur(8px);
}

#drawer .modal-card {
  width: min(760px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 36px) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: var(--panel) !important;
  box-shadow: 0 24px 64px rgba(25, 17, 9, .22) !important;
}

#drawer .modal-head {
  position: static;
  min-height: 76px;
  padding: 20px 22px !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--panel) !important;
  backdrop-filter: none;
}

#drawer .modal-head h2 {
  margin: 0 0 4px !important;
  color: var(--ink) !important;
  font-size: 20px !important;
  letter-spacing: 0;
}

#drawer #txAmountHint { color: var(--muted) !important; }

#drawer .voice-wrap {
  gap: 5px;
}

#drawer .voice-btn {
  min-width: 116px;
  height: 38px !important;
  padding: 0 14px;
  border-radius: 9px !important;
  box-shadow: none !important;
  animation: none;
  font-size: 13px;
}

#drawer .voice-status,
#drawer .voice-preview {
  max-width: 250px;
  color: var(--muted) !important;
  font-size: 11px !important;
}

#drawer .voice-preview {
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--bg-2);
}

#drawer .modal-form {
  gap: 14px !important;
  padding: 20px 22px 22px !important;
  background: var(--panel) !important;
}

#drawer .modal-form > .form-row.two > label,
#drawer #txNoteLabel,
#drawer .modal-form > label {
  min-height: 92px !important;
  padding: 12px 13px !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: var(--bg-2) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-size: 13px;
}

#drawer .modal-form > .form-row.two > label > input,
#drawer #txNoteLabel > input,
#drawer .modal-form > label > input,
#drawer .modal-form > .form-row.two > label > select,
#drawer .modal-form > label > select {
  height: 44px !important;
  min-height: 44px !important;
  border-color: var(--line) !important;
  border-radius: 8px !important;
  background: var(--panel) !important;
  box-shadow: none !important;
}

#drawer .modal-form > .form-row.two > label:focus-within,
#drawer #txNoteLabel:focus-within,
#drawer .modal-form > label:focus-within {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent) !important;
}

#drawer .form-actions {
  min-height: auto;
  margin-top: 2px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#drawer .form-actions .btn {
  min-height: 40px;
  border-radius: 8px;
}

html[data-theme="dark"] #drawer .modal-head,
html[data-theme="dark"] #drawer .modal-form,
html[data-theme="dark"] #drawer .modal-card,
html[data-theme="dark"] #drawer .modal-form > .form-row.two > label,
html[data-theme="dark"] #drawer #txNoteLabel,
html[data-theme="dark"] #drawer .modal-form > label {
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] #drawer .modal-form > .form-row.two > label > input,
html[data-theme="dark"] #drawer #txNoteLabel > input,
html[data-theme="dark"] #drawer .modal-form > label > input,
html[data-theme="dark"] #drawer .modal-form > .form-row.two > label > select,
html[data-theme="dark"] #drawer .modal-form > label > select,
html[data-theme="dark"] #drawer .voice-preview {
  background: var(--bg-2) !important;
}

@media (max-width: 720px) {
  #drawer.modal { padding: 10px !important; }
  #drawer .modal-card { width: calc(100vw - 20px) !important; }
  #drawer .modal-head { padding: 16px !important; }
  #drawer .modal-form { padding: 16px !important; }
}

/* Keep every paired quick-entry field on one shared baseline. */
#drawer .modal-form > .form-row.two {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 14px !important;
}

#drawer .modal-form > .form-row.two > label {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: 18px 44px !important;
  align-content: start !important;
  gap: 7px !important;
  height: 92px !important;
  min-height: 92px !important;
}

#drawer .modal-form > .form-row.two > label > input,
#drawer .modal-form > .form-row.two > label > select {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  align-self: stretch !important;
}

@media (max-width: 720px) {
  #drawer .modal-form > .form-row.two {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Ensure annual and monthly balance cards retain readable contrast in daylight mode. */
html[data-theme="light"] .sidebar-card.year .sidebar-balance,
html[data-theme="light"] .sidebar-card.month .sidebar-balance {
  color: var(--ink) !important;
}

html[data-theme="light"] .sidebar-card.year .sidebar-income,
html[data-theme="light"] .sidebar-card.month .sidebar-income {
  color: var(--income) !important;
}

html[data-theme="light"] .sidebar-card.year .sidebar-expense,
html[data-theme="light"] .sidebar-card.month .sidebar-expense {
  color: var(--expense) !important;
}

html[data-theme="light"] .sidebar-card.year .sidebar-period-caption,
html[data-theme="light"] .sidebar-card.month .sidebar-period-caption,
html[data-theme="light"] .sidebar-card.year .sidebar-period-subcaption,
html[data-theme="light"] .sidebar-card.month .sidebar-period-subcaption,
html[data-theme="light"] .sidebar-card.year .sidebar-flow-item .muted,
html[data-theme="light"] .sidebar-card.month .sidebar-flow-item .muted {
  color: var(--muted) !important;
}

/* Put each field example directly after its title, while keeping inputs aligned. */
#drawer .modal-form > .form-row.two > label,
#drawer #txNoteLabel,
#drawer .modal-form > label {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  height: 92px !important;
  min-height: 92px !important;
  line-height: 18px !important;
  white-space: nowrap;
}

#drawer .modal-form .voice-hint {
  display: inline !important;
  min-height: 0 !important;
  margin: 0 0 0 6px !important;
  vertical-align: baseline !important;
  line-height: inherit !important;
  white-space: nowrap !important;
}

#drawer .modal-form > .form-row.two > label > input,
#drawer .modal-form > .form-row.two > label > select,
#drawer #txNoteLabel > input,
#drawer .modal-form > label > input,
#drawer .modal-form > label > select {
  position: absolute !important;
  right: 13px !important;
  bottom: 12px !important;
  left: 13px !important;
  width: calc(100% - 26px) !important;
  margin: 0 !important;
}