@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=Manrope:wght@400;500;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,700&family=DM+Sans:wght@400;500;700&family=Inter:wght@400;500;600&display=swap");
/* Design variants: html[data-design=...]. Classic = no attribute. */
.dz-list { display: grid; gap: 8px; }
.dz { display: grid; grid-template-columns: 74px 1fr; grid-template-rows: auto auto; gap: 0 12px; text-align: left; padding: 10px 12px; align-items: center; }
.dz.on { outline: 2px solid var(--accent); outline-offset: -1px; }
.dz-sw { grid-row: 1 / 3; display: flex; height: 34px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.dz-sw i { flex: 1; } .dz small { color: var(--muted); }

/* ---------- Compact ---------- */
html[data-design=compact] { --bg:#f1f3f6; --panel:#fff; --ink:#18202c; --muted:#5f6b7a; --line:#d9dee6; --accent:#0b6bcb; --hover:#e6eefb; --side-w-d:220px; --c-inc:#2a78c4; --c-exp:#d9822b; color-scheme: light; }
html[data-design=compact] body { font-size: 12.5px; line-height: 1.35; }
html[data-design=compact] #side { width: var(--side-w, 220px); padding: 10px 8px; }
html[data-design=compact] #main { padding: 12px 14px; }
html[data-design=compact] h1 { font-size: 17px; }
html[data-design=compact] th, html[data-design=compact] td { padding: 3px 8px; }
html[data-design=compact] tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg) 70%, var(--panel)); }
html[data-design=compact] #nav a, html[data-design=compact] .acc { padding: 3px 6px; border-radius: 3px; }
html[data-design=compact] button, html[data-design=compact] .btn, html[data-design=compact] input, html[data-design=compact] select, html[data-design=compact] textarea { padding: 3px 7px; border-radius: 3px; }
html[data-design=compact] table, html[data-design=compact] .card, html[data-design=compact] .repchart, html[data-design=compact] .repwrap { border-radius: 3px; }
html[data-design=compact] .card { padding: 8px 10px; margin-bottom: 8px; }
html[data-design=compact] .brand { font-size: 15px; }

/* ---------- Midnight ---------- */
html[data-design=midnight] { --bg:#0d1117; --panel:#161b22; --ink:#d7dde5; --muted:#8b95a3; --line:#262d37; --accent:#2fbf8a; --accent-ink:#04130d; --neg:#ff7b72; --pos:#3fcf8e; --warn:#e3a54a; --hover:#1d242e; --c-inc:#3d85d6; --c-exp:#c47428; --pc0:#3987e5; --pc1:#d95926; --pc2:#199e70; --pc3:#c98500; --pc4:#d55181; --pc5:#008300; --pc-o:#6b7280; color-scheme: dark; }
html[data-design=midnight] #side { width: var(--side-w, 236px); background: var(--bg); }
html[data-design=midnight] .brand { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-size: 15px; }
html[data-design=midnight] td.num, html[data-design=midnight] th.num, html[data-design=midnight] .acc .bal, html[data-design=midnight] #networth b, html[data-design=midnight] .grp .gtot { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .94em; }
html[data-design=midnight] table, html[data-design=midnight] .card, html[data-design=midnight] .repchart, html[data-design=midnight] .repwrap { border-radius: 0; border-left: 0; border-right: 0; background: transparent; }
html[data-design=midnight] th { background: var(--bg); text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em; }
html[data-design=midnight] td { border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent); }
html[data-design=midnight] .active { box-shadow: inset 2px 0 var(--accent); border-radius: 0; background: var(--hover); }
html[data-design=midnight] button, html[data-design=midnight] input, html[data-design=midnight] select, html[data-design=midnight] textarea { border-radius: 3px; background: var(--panel); }
html[data-design=midnight] .repwrap td.repname, html[data-design=midnight] .reptable th:first-child, html[data-design=midnight] .reptot td { background: var(--bg); }
html[data-design=midnight] #modal-box, html[data-design=midnight] #modal2-box { border: 1px solid var(--line); border-radius: 4px; }

/* ---------- Paper ---------- */
html[data-design=paper] { --bg:#f3ede1; --panel:#fffdf8; --ink:#2b2620; --muted:#7a6f61; --line:#e4dac8; --accent:#a4502b; --accent-ink:#fff; --neg:#b3261e; --pos:#2f6b3a; --warn:#a8650a; --hover:#f6ecd9; --c-inc:#2a78c4; --c-exp:#d9822b; --pc-o:#9a9082; color-scheme: light; }
html[data-design=paper] body { font-size: 15px; line-height: 1.55; }
html[data-design=paper] h1, html[data-design=paper] h2, html[data-design=paper] h3, html[data-design=paper] .brand { font-family: Georgia, "Times New Roman", serif; font-weight: 600; }
html[data-design=paper] h1 { font-size: 26px; } html[data-design=paper] .brand { font-size: 24px; }
html[data-design=paper] #main { padding: 28px 36px; }
html[data-design=paper] table, html[data-design=paper] .card, html[data-design=paper] .repchart, html[data-design=paper] .repwrap { border-radius: 14px; box-shadow: 0 1px 3px rgba(80,60,30,.08); }
html[data-design=paper] .card { padding: 18px 22px; }
html[data-design=paper] th, html[data-design=paper] td { padding: 10px 14px; }
html[data-design=paper] th { background: var(--hover); }
html[data-design=paper] button, html[data-design=paper] .btn, html[data-design=paper] input, html[data-design=paper] select, html[data-design=paper] textarea { border-radius: 10px; padding: 7px 14px; }
html[data-design=paper] #nav a, html[data-design=paper] .acc { border-radius: 10px; padding: 8px 12px; }
html[data-design=paper] #modal-box, html[data-design=paper] #modal2-box { border-radius: 18px; }

@media (min-width: 801px) {
  html[data-design=paper] #side { margin: 12px 0 12px 12px; height: calc(100vh - 24px); top: 12px; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 6px 24px rgba(80,60,30,.10); padding: 20px 14px; }
  html[data-design=paper] #main.fixed { height: 100vh; }

  /* ---------- Top bar ---------- */
  html[data-design=topnav] { --bg:#f4f5f7; --panel:#fff; --ink:#1d2330; --muted:#667085; --line:#e1e4ea; --accent:#5b45d6; --accent-ink:#fff; --hover:#efecfc; --c-inc:#2a78c4; --c-exp:#d9822b; color-scheme: light; }
  html[data-design=topnav] #app { flex-direction: column; }
  html[data-design=topnav] #resizer { display: none; }
  html[data-design=topnav] #side { width: 100%; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; z-index: 6; }
  html[data-design=topnav] .sidehead { display: contents; }
  html[data-design=topnav] .brand { margin: 0; color: var(--accent); }
  html[data-design=topnav] #undobar { margin: 0; } html[data-design=topnav] #undobar button { flex: none; }
  html[data-design=topnav] #networth { margin: 0 0 0 auto; text-align: right; order: 3; } html[data-design=topnav] #networth b { font-size: 16px; display: inline; margin-left: 6px; }
  html[data-design=topnav] #nav { display: flex; gap: 2px; order: 1; }
  html[data-design=topnav] #nav a { border-radius: 0; padding: 8px 12px; border-bottom: 2px solid transparent; }
  html[data-design=topnav] #nav a.active { background: none; border-bottom-color: var(--accent); color: var(--accent); }
  html[data-design=topnav] .side-actions { margin: 0; gap: 14px; order: 4; }
  html[data-design=topnav] #accounts { order: 10; flex: 1 1 100%; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow-x: auto; padding: 4px 0 2px; border-top: 1px solid var(--line); }
  html[data-design=topnav] #accounts > * { flex: none; }
  html[data-design=topnav] #accounts .ent, html[data-design=topnav] #accounts .grp { margin: 0 2px 0 10px; }
  html[data-design=topnav] #accounts .acc { border: 1px solid var(--line); border-radius: 16px; padding: 3px 12px !important; gap: 10px; background: var(--panel); }
  html[data-design=topnav] #accounts .acc.active { border-color: var(--accent); background: var(--hover); }
  html[data-design=topnav] #accounts .side-actions { margin: 0 0 0 10px; order: 0; }
  html[data-design=topnav] #accounts > div { display: contents; }
  html[data-design=topnav] #main { padding: 18px 24px; }
  html[data-design=topnav] #main.fixed { height: calc(100vh - var(--top-h, 100px)); }
}
@media (max-width: 800px) {
  html[data-design=paper] #side { border-radius: 0; }
}

/* shared fixes */
.side-actions { flex-wrap: wrap; gap: 4px 12px; justify-content: flex-start; }
html[data-design] button.link { padding: 0; background: none; border: 0; border-radius: 0; }
html[data-design=midnight] th.num { font-family: inherit; font-size: 10.5px; }
html[data-design=paper] #side .side-actions { margin-left: 12px; }


/* ======== Designs 6-10: own fonts, icons, spacing ======== */
#nav a[data-view=transactions] { --ic-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); --ic-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); }
#nav a[data-view=inbox] { --ic-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); --ic-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); }
#nav a[data-view=imports] { --ic-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); --ic-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }
#nav a[data-view=statements] { --ic-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2M9 2h6v4H9zM9 14l2 2 4-4'/%3E%3C/svg%3E"); --ic-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2M9 2h6v4H9zM9 14l2 2 4-4'/%3E%3C/svg%3E"); }
#nav a[data-view=documents] { --ic-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E"); --ic-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E"); }
#nav a[data-view=rules] { --ic-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E"); --ic-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E"); }
#nav a[data-view=reports] { --ic-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10M12 20V4M6 20v-6'/%3E%3C/svg%3E"); --ic-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10M12 20V4M6 20v-6'/%3E%3C/svg%3E"); }

html:is([data-design=ocean],[data-design=slate],[data-design=sunrise],[data-design=forest],[data-design=graphite]) #nav a { justify-content: flex-start; align-items: center; gap: 10px; }
html:is([data-design=ocean],[data-design=slate],[data-design=sunrise],[data-design=forest],[data-design=graphite]) #nav a::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
html:is([data-design=ocean],[data-design=slate],[data-design=sunrise],[data-design=forest],[data-design=graphite]) #nav :is(#inbox-count, #stmt-count, #doc-count) { margin-left: auto; }
html:is([data-design=ocean],[data-design=slate],[data-design=sunrise],[data-design=forest],[data-design=graphite]) .side-actions { margin-top: 18px; }
html:is([data-design=ocean],[data-design=slate],[data-design=sunrise],[data-design=forest],[data-design=graphite]) #side { overflow-x: hidden; }

/* ---- Ocean: rounded, teal, Nunito, icons in circles ---- */
html[data-design=ocean] { --bg:#eef6f8; --panel:#fff; --ink:#16323a; --muted:#5f7d86; --line:#d5e6ea; --accent:#0e8a9a; --accent-ink:#fff; --hover:#e0f2f5; --c-inc:#2a78c4; --c-exp:#d9822b; color-scheme: light; }
html[data-design=ocean] body { font-family: Nunito, ui-rounded, "SF Pro Rounded", system-ui, sans-serif; font-size: 15px; }
html[data-design=ocean] #side { width: var(--side-w, 264px); background: linear-gradient(180deg,#0d4f5c,#0a3a45); border-right: 0; --ink:#e8f6f8; --muted:#9cc7cf; --line:rgba(255,255,255,.18); --hover:rgba(255,255,255,.11); --panel:rgba(255,255,255,.07); --accent:#7fe0ea; --accent-ink:#06222a; color: var(--ink); }
html[data-design=ocean] .brand { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
html[data-design=ocean] #nav a { border-radius: 999px; padding: 8px 14px; --ic: var(--ic-thin); }
html[data-design=ocean] #nav a::before { box-sizing: content-box; padding: 6px; border-radius: 50%; background: rgba(255,255,255,.12); width: 16px; height: 16px; background-clip: padding-box; -webkit-mask: none; mask: none; background-image: none; }
html[data-design=ocean] #nav a { position: relative; }
html[data-design=ocean] #nav a::after { content: ""; position: absolute; left: 14px; width: 16px; height: 16px; margin-left: 6px; background: currentColor; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
html[data-design=ocean] #nav a.active { background: rgba(255,255,255,.16); }
html[data-design=ocean] #main { padding: 26px 32px; }
html[data-design=ocean] h1 { font-size: 26px; font-weight: 800; }
html[data-design=ocean] table, html[data-design=ocean] .card, html[data-design=ocean] .repchart, html[data-design=ocean] .repwrap { border-radius: 16px; border-color: transparent; box-shadow: 0 2px 10px rgba(14,90,110,.09); }
html[data-design=ocean] th { background: #f3fafb; color: #3d6a74; } html[data-design=ocean] th, html[data-design=ocean] td { padding: 10px 14px; }
html[data-design=ocean] button, html[data-design=ocean] .btn, html[data-design=ocean] input, html[data-design=ocean] select, html[data-design=ocean] textarea { border-radius: 999px; padding: 7px 16px; }
html[data-design=ocean] textarea { border-radius: 12px; }
html[data-design=ocean] #modal-box, html[data-design=ocean] #modal2-box { border-radius: 20px; }

/* ---- Slate: banker's navy sidebar, IBM Plex Sans, bold icons, square ---- */
html[data-design=slate] { --bg:#edf0f4; --panel:#fff; --ink:#1b2433; --muted:#5d6878; --line:#d3d9e2; --accent:#1d3f8f; --accent-ink:#fff; --hover:#e5ebf6; --c-inc:#2a78c4; --c-exp:#d9822b; color-scheme: light; }
html[data-design=slate] body { font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; font-size: 13.5px; }
html[data-design=slate] #side { width: var(--side-w, 244px); background: #17212f; border-right: 0; --ink:#e6ebf3; --muted:#8f9bb0; --line:#2c3a50; --hover:#23314a; --panel:#1d2a3c; --accent:#7fb0ff; --accent-ink:#0a1424; color: var(--ink); }
html[data-design=slate] .sidehead { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; }
html[data-design=slate] .brand { font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
html[data-design=slate] #nav a { border-radius: 2px; padding: 7px 10px; --ic: var(--ic-bold); border-left: 3px solid transparent; }
html[data-design=slate] #nav a::before { width: 15px; height: 15px; }
html[data-design=slate] #nav a.active { border-left-color: var(--accent); background: var(--hover); }
html[data-design=slate] .acc, html[data-design=slate] .grp, html[data-design=slate] .ent { border-radius: 2px; }
html[data-design=slate] #main { padding: 20px 26px; }
html[data-design=slate] h1 { font-size: 20px; font-weight: 600; }
html[data-design=slate] table, html[data-design=slate] .card, html[data-design=slate] .repchart, html[data-design=slate] .repwrap { border-radius: 2px; }
html[data-design=slate] th { text-transform: uppercase; font-size: 11px; letter-spacing: .06em; background: #e3e8ef; border-bottom: 2px solid #b9c3d3; color: #3b475a; }
html[data-design=slate] button, html[data-design=slate] .btn, html[data-design=slate] input, html[data-design=slate] select, html[data-design=slate] textarea { border-radius: 2px; }
html[data-design=slate] #modal-box, html[data-design=slate] #modal2-box { border-radius: 3px; }

/* ---- Sunrise: warm, friendly, Manrope, coloured icon tiles ---- */
html[data-design=sunrise] { --bg:#fff8f3; --panel:#fff; --ink:#2a2320; --muted:#85766d; --line:#f0e1d6; --accent:#e8590c; --accent-ink:#fff; --hover:#fff0e6; --pos:#2b8a3e; --c-inc:#2a78c4; --c-exp:#d9822b; color-scheme: light; }
html[data-design=sunrise] body { font-family: Manrope, "Avenir Next", "Trebuchet MS", sans-serif; font-size: 14.5px; }
html[data-design=sunrise] #side { width: var(--side-w, 268px); border-right: 0; box-shadow: 2px 0 18px rgba(120,60,20,.07); padding: 20px 14px; }
html[data-design=sunrise] .brand { font-size: 21px; font-weight: 800; color: var(--accent); }
html[data-design=sunrise] #nav a { border-radius: 12px; padding: 7px 10px; --ic: var(--ic-thin); font-weight: 600; }
html[data-design=sunrise] #nav a::before { box-sizing: content-box; width: 17px; height: 17px; padding: 6px; border-radius: 10px; background: var(--hover); color: var(--accent); background-clip: padding-box; -webkit-mask: none; mask: none; }
html[data-design=sunrise] #nav a { position: relative; }
html[data-design=sunrise] #nav a::after { content: ""; position: absolute; left: 16px; width: 17px; height: 17px; background: var(--accent); -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
html[data-design=sunrise] #nav a.active { background: var(--hover); color: var(--accent); }
html[data-design=sunrise] #nav a.active::before { background: var(--accent); } html[data-design=sunrise] #nav a.active::after { background: #fff; }
html[data-design=sunrise] #main { padding: 26px 34px; }
html[data-design=sunrise] h1 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
html[data-design=sunrise] table, html[data-design=sunrise] .card, html[data-design=sunrise] .repchart, html[data-design=sunrise] .repwrap { border-radius: 16px; border-color: #f3e6db; box-shadow: 0 4px 16px rgba(160,90,40,.07); }
html[data-design=sunrise] th { background: #fff6ee; color: #9a6b4b; } html[data-design=sunrise] th, html[data-design=sunrise] td { padding: 11px 14px; }
html[data-design=sunrise] button, html[data-design=sunrise] .btn, html[data-design=sunrise] input, html[data-design=sunrise] select, html[data-design=sunrise] textarea { border-radius: 11px; padding: 7px 14px; }
html[data-design=sunrise] button.primary { box-shadow: 0 3px 8px rgba(232,89,12,.3); }
html[data-design=sunrise] #modal-box, html[data-design=sunrise] #modal2-box { border-radius: 22px; }

/* ---- Forest: sage sidebar, Fraunces headings + DM Sans, thin icons ---- */
html[data-design=forest] { --bg:#f1f3ec; --panel:#fcfdfa; --ink:#1f2a22; --muted:#667366; --line:#d9e0d3; --accent:#2f6f4e; --accent-ink:#fff; --hover:#e6ede0; --c-inc:#2a78c4; --c-exp:#d9822b; color-scheme: light; }
html[data-design=forest] body { font-family: "DM Sans", Optima, Candara, sans-serif; font-size: 14.5px; }
html[data-design=forest] h1, html[data-design=forest] h2, html[data-design=forest] h3, html[data-design=forest] .brand, html[data-design=forest] #networth b { font-family: Fraunces, Georgia, serif; font-weight: 600; }
html[data-design=forest] #side { width: var(--side-w, 258px); background: #e3e9dc; border-right: 1px solid #cfd8c6; --panel:#f3f6ef; --hover:#d4ddc9; --line:#c3cdb8; }
html[data-design=forest] .brand { font-size: 24px; color: var(--accent); }
html[data-design=forest] #nav a { border-radius: 4px; padding: 7px 10px; --ic: var(--ic-thin); border-left: 3px solid transparent; }
html[data-design=forest] #nav a.active { border-left-color: var(--accent); color: var(--accent); }
html[data-design=forest] #main { padding: 24px 32px; }
html[data-design=forest] h1 { font-size: 28px; }
html[data-design=forest] table, html[data-design=forest] .card, html[data-design=forest] .repchart, html[data-design=forest] .repwrap { border-radius: 6px; }
html[data-design=forest] th { background: #e9efe3; font-variant: small-caps; letter-spacing: .05em; font-size: 13px; color: #4a5c4d; }
html[data-design=forest] th, html[data-design=forest] td { padding: 9px 12px; }
html[data-design=forest] button, html[data-design=forest] .btn, html[data-design=forest] input, html[data-design=forest] select, html[data-design=forest] textarea { border-radius: 6px; }
html[data-design=forest] #modal-box, html[data-design=forest] #modal2-box { border-radius: 8px; }

/* ---- Graphite: warm dark, amber accent, Inter, thin icons ---- */
html[data-design=graphite] { --bg:#1a1b1e; --panel:#232427; --ink:#ececec; --muted:#9a9ba1; --line:#34353a; --accent:#f5a623; --accent-ink:#1a1200; --neg:#ff8a80; --pos:#6fd39a; --warn:#f0b35a; --hover:#2d2e33; --c-inc:#3d85d6; --c-exp:#c47428; --pc0:#3987e5; --pc1:#d95926; --pc2:#199e70; --pc3:#c98500; --pc4:#d55181; --pc5:#008300; --pc-o:#6b7280; color-scheme: dark; }
html[data-design=graphite] body { font-family: Inter, -apple-system, "Segoe UI", sans-serif; font-size: 14px; }
html[data-design=graphite] #side { width: var(--side-w, 256px); background: #1f2023; }
html[data-design=graphite] .brand { font-weight: 600; font-size: 17px; letter-spacing: -.01em; } html[data-design=graphite] .brand::first-letter { color: var(--accent); }
html[data-design=graphite] #nav a { border-radius: 10px; padding: 8px 12px; --ic: var(--ic-thin); }
html[data-design=graphite] #nav a.active { background: var(--hover); color: var(--accent); }
html[data-design=graphite] #main { padding: 24px 30px; }
html[data-design=graphite] h1 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
html[data-design=graphite] table, html[data-design=graphite] .card, html[data-design=graphite] .repchart, html[data-design=graphite] .repwrap { border-radius: 12px; }
html[data-design=graphite] th { background: #2a2b2f; font-weight: 500; } html[data-design=graphite] th, html[data-design=graphite] td { padding: 9px 12px; }
html[data-design=graphite] button, html[data-design=graphite] .btn, html[data-design=graphite] input, html[data-design=graphite] select, html[data-design=graphite] textarea { border-radius: 9px; }
html[data-design=graphite] #modal-box, html[data-design=graphite] #modal2-box { border-radius: 14px; border: 1px solid var(--line); }
html[data-design=graphite] .repwrap td.repname, html[data-design=graphite] .reptable th:first-child { background: #2a2b2f; }

/* The tag box is a field like any other: it takes each design's field radius and padding, so it lines up with Memo, Payee and the rest */
html[data-design=compact] .tagbox { border-radius: 3px; padding: 3px 7px; }
html[data-design=midnight] .tagbox { border-radius: 3px; }
html[data-design=paper] .tagbox { border-radius: 10px; padding: 7px 14px; }
html[data-design=ocean] .tagbox { border-radius: 999px; padding: 7px 16px; }
html[data-design=slate] .tagbox { border-radius: 2px; }
html[data-design=sunrise] .tagbox { border-radius: 11px; padding: 7px 14px; }
html[data-design=forest] .tagbox { border-radius: 6px; }
html[data-design=graphite] .tagbox { border-radius: 9px; }

/* ---- Display settings: icons beside the account types and beside the sidebar's screens (this browser; see design.js) ---- */
html[data-accicons=off] .acc .acc-ic { display: none; }
html[data-navicons=on]:not(:is([data-design=ocean],[data-design=slate],[data-design=sunrise],[data-design=forest],[data-design=graphite])) #nav a { justify-content: flex-start; align-items: center; gap: 10px; --ic: var(--ic-thin); }
html[data-navicons=on]:not(:is([data-design=ocean],[data-design=slate],[data-design=sunrise],[data-design=forest],[data-design=graphite])) #nav a::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
html[data-navicons=on]:not(:is([data-design=ocean],[data-design=slate],[data-design=sunrise],[data-design=forest],[data-design=graphite])) #nav :is(#inbox-count, #stmt-count, #doc-count) { margin-left: auto; }
html[data-navicons=off] #nav a::before, html[data-navicons=off] #nav a::after { display: none !important; }