/* Organizei: semantic colors shared by all screens, including installation. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f3f0e8;
  --muted: #aaa69d;
  --canvas: #101010;
  --surface: #1a1a19;
  --soft: #222220;
  --hover: #2a2925;
  --line: #34322c;
  --gold: #e9cf8b;
  --gold-deep: #c5a35b;
  --on-gold: #221b0d;
  --subtle: #a6a094;
  --green: #8ad6ab;
  --red: #efa39a;
  --success-bg: #1c3025;
  --danger-bg: #362320;
  --warning-bg: #332c1e;
  --shadow: 0 3px 18px #00000014;
  --gold-wash: #30291d;
  --link: #e9cf8b;
}
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #27231b;
  --muted: #716b5f;
  --canvas: #f7f5f0;
  --surface: #ffffff;
  --soft: #f4f1e9;
  --hover: #f0ebdf;
  --line: #e4dfd2;
  --gold: #e9cf8b;
  --gold-deep: #b08d42;
  --on-gold: #221b0d;
  --subtle: #787062;
  --green: #27764b;
  --red: #a7463b;
  --success-bg: #edf6ef;
  --danger-bg: #fcefeb;
  --warning-bg: #fcf4e3;
  --shadow: 0 3px 18px #27231b05;
  --gold-wash: #faf3e2;
  --link: #765915;
}
html,body { background: var(--canvas); color: var(--ink); }
p { color: var(--muted); }
a:focus-visible,button:focus-visible,summary:focus-visible { outline-color: var(--gold-deep); }
input:focus,select:focus,textarea:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 3px #d4b66b25; }
.sidebar,.panel,.stat { background: var(--surface); border-color: var(--line); }
.brand { letter-spacing: -.5px; font-size:28px; font-weight: 650; color: var(--ink); }
.brand-word { line-height: 1.2; }
.brand small { color: var(--muted); font-size:13px; letter-spacing: .35px; }
.brand-icon { background: #101010; color: var(--gold); border: 1px solid #e9cf8b80; }
.brand-icon .icon { width: 31px; height: 31px; }
.nav-caption,.topbar-label,.cell-sub,.entry-title small,.list-summary,.helper,
.breakdown small,.link-box small,footer,.private-note,.user-chip small { color: var(--muted); }
.nav-item { color: var(--muted); }
.nav-item:hover { color: var(--ink); background: var(--hover); }
.nav-item.active { background: var(--gold); color: var(--on-gold); }
.private-note,footer,.account-actions,.category-line,.transfer-line,.report-line,
.account-line,details,td { border-color: var(--line); }
.topbar { background: var(--surface); border-color: var(--line); }
.topbar-actions { display: flex; gap: 20px; align-items: center; margin-left: auto; min-width: 0; }
.avatar { background: var(--gold-wash); color: var(--link); border-color: var(--line); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); color: var(--ink); font-size:15px; font-weight: 550; white-space: nowrap; }
.theme-toggle:hover { border-color: var(--gold-deep); background: var(--hover); }
.theme-toggle .icon { width: 17px; height: 17px; }
.theme-toggle>span { display: inline-flex; }
[data-theme="dark"] .theme-moon,[data-theme="light"] .theme-sun { display: none; }
.appearance-controls { position: absolute; top: 23px; right: 26px; z-index: 10; }
.button,.button.primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.button.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.button.danger { color: var(--red); background: var(--danger-bg); border-color: var(--line); }
.text-link,.forgot-link,.auth-link a,summary { color: var(--link); }
.eyebrow { color: var(--link); }
.stat>span,.stat>small { color: var(--muted); }
.stat.featured { background: linear-gradient(125deg,#edd79d,#d2b16c); border-color: #d2b16c; color: var(--on-gold); }
.stat.featured>strong { color: #221b0d; }
.stat.featured>span,.stat.featured>small { color: #504024; }
.stat.income>strong,.positive { color: var(--green); }
.stat.expense>strong { color: var(--red); }
.overdue-callout { background: var(--warning-bg); color: var(--link); border-color: var(--line); }
.overdue-callout small { color: var(--muted); }
th { background: var(--soft); color: var(--muted); border-color: var(--line); }
.amount { color: var(--ink); }
.amount.positive { color: var(--green); }
.badge.green { background: var(--success-bg); color: var(--green); }
.badge.red { background: var(--danger-bg); color: var(--red); }
.badge.neutral { background: var(--gold-wash); color: var(--link); }
.list-summary b { color: var(--ink); }
.breakdown meter { background: var(--soft); }
.breakdown meter::-webkit-meter-bar { background: var(--soft); }
.breakdown meter::-webkit-meter-optimum-value { background: var(--gold-deep); }
.breakdown meter::-moz-meter-bar { background: var(--gold-deep); }
.account-icon { background: var(--gold-wash); color: var(--link); }
label { color: var(--ink); }
input,select,textarea { background: var(--surface); border-color: var(--line); color: var(--ink); }
input:disabled { background: var(--soft); color: var(--muted); }
input::placeholder { color: var(--subtle); }
.checkbox input { accent-color: var(--gold-deep); }
.notice { background: var(--success-bg); border-color: var(--line); color: var(--green); }
.notice.error { background: var(--danger-bg); border-color: var(--line); color: var(--red); }
.empty>.icon { color: var(--gold-deep); }
.settle-summary { background: var(--soft); }
.category-line small,.settle-summary small,.back-link,.preserve-lines,.pagination span { color: var(--muted); }
.tutorial-card iframe { background: var(--soft); }
.sidebar-shade { background: #00000099; }
.icon-button { color: var(--ink); }
.auth { background: var(--canvas); }
.auth-story { background: #0c0c0c; color: #f3f0e8; border-right: 1px solid #34322c; }
.auth-story .brand { color: #f3f0e8; }
.auth-story .brand-icon { background: #171511; color: #e9cf8b; }
.auth-story .brand small { color: #aaa69d; }
.auth-story h1 em { color: #e9cf8b; }
.auth-story p,.auth-story .eyebrow,.auth-story>small { color: #aaa69d; }
.story-features { color: #d3cbb9; }
.story-features .icon { color: #e9cf8b; }
.auth-story:after { border-color: #e9cf8b12; box-shadow: 0 0 0 70px #e9cf8b05,0 0 0 140px #e9cf8b03; }
@media(max-width:1180px) { .topbar-actions { gap: 12px; } .topbar-label { max-width: 220px; } }
@media(max-width:740px) {
 .topbar-actions { gap: 12px; }
 .topbar .user-chip>span:last-child { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .theme-toggle { min-height: 44px; padding: 10px; font-size:15px; }
 .appearance-controls { top: 20px; right: 20px; }
 .auth-main { padding-top: 92px; }
 .install { padding-top: 55px; }
 .entries-table tr { border-color: var(--line); }
 .brand { font-size:29px; }
}
@media(max-width:360px) { .topbar .user-chip>span:last-child { display: none; } }
@media print {
 .theme-toggle,.appearance-controls { display: none!important; }
 html,body { background: white!important; color: black!important; }
 .panel,.stat { background: white!important; color: black!important; border-color: #ccc!important; }
 .stat>strong,.stat>span,.stat>small,p,label,.helper { color: black!important; }
}

/* Extra room for the larger type, especially the persistent top bar. */
.sidebar { overflow-y: auto; }
.stat>span { min-height: 44px; }
@media(max-width:1180px) { .topbar-label { display:none; } }
@media(max-width:740px) {
 .topbar .user-chip>span:last-child { display:none; }
 .topbar-actions { gap:10px; }
 .topbar { min-height:76px; height:auto; padding-top:12px; padding-bottom:12px; }
 .stat>span { min-height:44px; }
 .pagination { flex-wrap:wrap; gap:12px; }
}