:root {
  --bg:      #0B1120;
  --bg2:     #111827;
  --bg3:     #1C2537;
  --card:    rgba(255,255,255,0.05);
  --card-h:  rgba(255,255,255,0.08);
  --border:  rgba(255,255,255,0.08);
  --blue:    #4F9EF8;
  --blue2:   #2563EB;
  --blue-g:  rgba(79,158,248,0.15);
  --teal:    #14B8A6;
  --green:   #10B981;
  --green-g: rgba(16,185,129,0.15);
  --amber:   #F59E0B;
  --red:     #EF4444;
  --red-g:   rgba(239,68,68,0.15);
  --purple:  #A78BFA;
  --text:    #F1F5F9;
  --text2:   #94A3B8;
  --text3:   #4A5568;
  --nav-h:   72px;
  --top-h:   60px;
  --r:       16px;
  --r-sm:    10px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
.hidden { display: none !important; }
html { height:100%; overflow:hidden; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg); color:var(--text);
  height:100dvh; overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

#app { display:flex; flex-direction:column; height:100dvh; }

/* ── TOPBAR ── */
.topbar {
  height:var(--top-h); min-height:var(--top-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  background:rgba(11,17,32,0.9);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  position:relative; z-index:100;
}
.topbar-brand { display:flex; align-items:center; gap:12px; }
.brand-icon {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(79,158,248,0.3);
}
.brand-icon svg { width:18px; height:18px; color:#fff; }
.brand-title { font-size:15px; font-weight:700; line-height:1.1; }
.brand-sub { font-size:11px; color:var(--text2); margin-top:1px; }
.topbar-right {}
.saldo-chip {
  padding:6px 14px; border-radius:20px; font-size:14px; font-weight:700;
  background:var(--card); border:1px solid var(--border);
  transition:all 0.4s;
}
.saldo-chip.pos { background:var(--green-g); border-color:rgba(16,185,129,0.3); color:var(--green); }
.saldo-chip.neg { background:var(--red-g); border-color:rgba(239,68,68,0.3); color:var(--red); }

/* ── MAIN ── */
.main-content {
  flex:1; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  padding-bottom:var(--nav-h);
}
.main-content::-webkit-scrollbar { display:none; }

/* ── VIEWS ── */
.view { animation:fadeIn 0.22s ease-out; }
.view.hidden { display:none; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.glass-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

/* ── DASHBOARD HERO ── */
.dash-hero {
  position:relative; overflow:hidden;
  min-height:280px;
  padding:24px 16px 28px;
  background:linear-gradient(180deg, #0D1A30 0%, var(--bg2) 100%);
}
.dash-hero-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hero-orb {
  position:absolute; border-radius:50%;
  filter:blur(60px); opacity:0.15;
  animation:orbFloat 8s ease-in-out infinite;
}
.orb1 { width:300px; height:300px; background:var(--blue); top:-80px; right:-80px; animation-delay:0s; }
.orb2 { width:200px; height:200px; background:var(--teal); bottom:-60px; left:-60px; animation-delay:4s; }
@keyframes orbFloat {
  0%,100% { transform:translate(0,0); }
  50% { transform:translate(15px,-15px); }
}
.grid-lines {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:40px 40px;
}
.dash-hero-content { position:relative; z-index:2; margin-bottom:20px; }
.hero-greeting { font-size:13px; color:var(--text2); }
.hero-name { font-size:24px; font-weight:800; letter-spacing:-0.5px; margin:2px 0; }
.hero-date { font-size:12px; color:var(--text3); }

/* SALDO CARD */
.saldo-card {
  position:relative; z-index:2;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--r);
  padding:20px 20px 16px;
  backdrop-filter:blur(20px);
  transition:all 0.4s;
}
.saldo-card.positive { border-color:rgba(16,185,129,0.3); box-shadow:0 0 40px rgba(16,185,129,0.1); }
.saldo-card.negative { border-color:rgba(239,68,68,0.3); box-shadow:0 0 40px rgba(239,68,68,0.1); }
.saldo-label { font-size:11px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:1px; }
.saldo-value { margin:8px 0 4px; }
.saldo-num {
  font-size:48px; font-weight:900; letter-spacing:-2px; line-height:1;
  transition:color 0.4s;
}
.saldo-num.pos { color:var(--green); text-shadow:0 0 30px rgba(16,185,129,0.4); }
.saldo-num.neg { color:var(--red); text-shadow:0 0 30px rgba(239,68,68,0.3); }
.saldo-sub { font-size:12px; color:var(--text2); margin-bottom:12px; }
.saldo-progress-wrap {
  height:4px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden;
}
.saldo-progress {
  height:100%; border-radius:2px; width:50%;
  background:linear-gradient(90deg, var(--blue), var(--teal));
  transition:width 0.8s cubic-bezier(0.34,1.56,0.64,1);
}

/* DASH STATS ROW */
.dash-stats-row {
  display:flex; gap:10px; padding:12px 16px;
}
.mini-stat {
  flex:1; background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:12px;
  display:flex; align-items:center; gap:10px;
}
.mini-stat-icon { font-size:20px; }
.mini-stat-info { display:flex; flex-direction:column; gap:2px; }
.mini-stat-val { font-size:15px; font-weight:700; line-height:1.1; }
.mini-stat-lbl { font-size:10px; color:var(--text2); }

/* SECTION */
.section { padding:0 16px 16px; }
.section-hdr { display:flex; justify-content:space-between; align-items:center; padding:16px 0 10px; }
.section-hdr h3 { font-size:15px; font-weight:700; }
.text-btn { background:none; border:none; color:var(--blue); font-size:13px; font-weight:600; cursor:pointer; }

/* MONTH SUMMARY */
.month-summary { padding:16px; }
.month-bar { margin-bottom:12px; }
.month-bar-hdr { display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; }
.month-bar-hdr span:last-child { font-weight:700; }
.month-track { height:8px; background:rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; }
.month-fill { height:100%; border-radius:4px; transition:width 0.8s cubic-bezier(0.34,1.56,0.64,1); }
.month-fill.over { background:linear-gradient(90deg,var(--blue),var(--green)); }
.month-fill.under { background:linear-gradient(90deg,var(--amber),var(--red)); }
.month-totals { display:flex; gap:0; border-top:1px solid var(--border); padding-top:12px; margin-top:12px; }
.month-total { flex:1; text-align:center; border-right:1px solid var(--border); }
.month-total:last-child { border-right:none; }
.month-total-val { display:block; font-size:16px; font-weight:700; }
.month-total-lbl { display:block; font-size:10px; color:var(--text2); margin-top:2px; }

/* ENTRY LIST */
.entry-list { display:flex; flex-direction:column; gap:8px; }
.entry-list.padded { padding:12px 16px; }

.entry-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:12px 14px;
  display:flex; align-items:center; gap:12px;
  position:relative; overflow:hidden; transition:all 0.15s;
}
.entry-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; border-radius:3px 0 0 3px;
}
.entry-card.positive::before { background:var(--green); }
.entry-card.negative::before { background:var(--red); }
.entry-card.neutral::before { background:var(--blue); }
.entry-card:active { transform:scale(0.99); }

.entry-shift-badge {
  min-width:40px; height:40px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; flex-shrink:0;
}
.shift-F, .shift-Früh   { background:rgba(16,185,129,0.15); color:var(--green); }
.shift-S, .shift-Spät   { background:rgba(245,158,11,0.15); color:var(--amber); }
.shift-N, .shift-Nacht  { background:rgba(167,139,250,0.15); color:var(--purple); }
.shift-TD, .shift-TDK, .shift-Tag { background:rgba(79,158,248,0.15); color:var(--blue); }
.shift-TF, .shift-TFK   { background:rgba(20,184,166,0.15); color:var(--teal); }
.shift-default          { background:rgba(255,255,255,0.08); color:var(--text2); }

.entry-info { flex:1; min-width:0; }
.entry-date { font-size:12px; color:var(--text2); }
.entry-times { font-size:14px; font-weight:600; }
.entry-note  { font-size:11px; color:var(--text3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entry-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.entry-hours { font-size:15px; font-weight:700; }
.entry-diff { font-size:11px; font-weight:600; }
.entry-diff.pos { color:var(--green); }
.entry-diff.neg { color:var(--red); }
.del-btn {
  width:28px; height:28px; border-radius:50%; border:none;
  background:rgba(239,68,68,0.1); color:var(--red);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:background 0.15s;
}
.del-btn:hover { background:rgba(239,68,68,0.25); }
.del-btn svg { width:14px; height:14px; }

.empty-state {
  text-align:center; padding:48px 20px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.empty-icon { font-size:44px; opacity:0.4; }
.empty-state p { color:var(--text2); font-size:14px; }

/* PAGE HEADERS */
.page-hdr {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px 8px;
  position:sticky; top:0; z-index:50;
  background:rgba(11,17,32,0.9); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.page-hdr h2 { font-size:20px; font-weight:800; }
.page-hdr-flex {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 8px;
  position:sticky; top:0; z-index:50;
  background:rgba(11,17,32,0.9); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.page-hdr-flex h2 { font-size:20px; font-weight:800; }
.back-btn {
  width:36px; height:36px; border-radius:50%;
  background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text); flex-shrink:0;
}
.back-btn svg { width:18px; height:18px; }

/* ENTRY FORM */
.form-body { padding:16px; display:flex; flex-direction:column; gap:12px; }
.form-sec {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:16px;
}
.form-sec-lbl {
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600; color:var(--text2);
  margin-bottom:12px; text-transform:uppercase; letter-spacing:0.5px;
}
.sn {
  width:22px; height:22px; border-radius:50%;
  background:var(--blue); color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.form-input {
  background:rgba(255,255,255,0.06); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:14px 16px;
  color:var(--text); font-size:16px; font-family:inherit;
  outline:none; width:100%; transition:border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance:none;
}
.form-input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(79,158,248,0.12); }
.form-group { margin-bottom:14px; display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:12px; font-weight:500; color:var(--text2); }
.form-group:last-child { margin-bottom:0; }
.form-hint { font-size:11px; color:var(--text3); }

.time-row { display:flex; align-items:center; gap:8px; }
.time-block { flex:1; display:flex; flex-direction:column; gap:6px; }
.time-block label { font-size:11px; color:var(--text2); }
.time-inp { text-align:center; font-weight:700; }
.time-arrow { width:24px; flex-shrink:0; color:var(--text3); display:flex; align-items:center; justify-content:center; }
.time-arrow svg { width:16px; height:16px; }

.duration-display {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:rgba(255,255,255,0.03);
  border-radius:var(--r-sm); border:1px solid var(--border);
  font-size:13px; font-weight:600; margin-top:10px;
}
.duration-diff { font-size:12px; font-weight:700; }
.duration-diff.pos { color:var(--green); }
.duration-diff.neg { color:var(--red); }

.template-grid { display:flex; flex-wrap:wrap; gap:8px; }
.tmpl-chip {
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:20px;
  border:1.5px solid var(--border); background:var(--card);
  cursor:pointer; transition:all 0.15s; font-size:13px; font-weight:600;
  color:var(--text2); white-space:nowrap;
}
.tmpl-chip:hover { border-color:var(--blue); color:var(--text); }
.tmpl-chip.selected { border-color:var(--blue); background:rgba(79,158,248,0.15); color:var(--blue); }
.tmpl-chip .badge { font-size:10px; font-weight:800; opacity:0.7; }

.pause-chips { display:flex; flex-wrap:wrap; gap:8px; }
.pause-chip {
  padding:8px 16px; border-radius:20px; font-size:13px; font-weight:600;
  border:1.5px solid var(--border); background:var(--card); cursor:pointer;
  color:var(--text2); transition:all 0.15s;
}
.pause-chip.selected { border-color:var(--blue); background:rgba(79,158,248,0.15); color:var(--blue); }

/* BUTTONS */
.btn-primary {
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff; font-weight:700; font-size:15px; border:none;
  border-radius:var(--r-sm); padding:14px 24px;
  cursor:pointer; transition:all 0.2s; font-family:inherit;
  box-shadow:0 4px 20px rgba(79,158,248,0.3);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(79,158,248,0.4); }
.btn-primary:active { transform:translateY(0); }
.btn-primary.btn-full { width:100%; }
.btn-primary.btn-lg { padding:16px; font-size:17px; border-radius:var(--r); }
.btn-secondary {
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--card); color:var(--text); font-weight:600; font-size:14px;
  border:1px solid var(--border); border-radius:var(--r-sm); padding:12px 20px;
  cursor:pointer; transition:all 0.15s; font-family:inherit;
}
.btn-secondary:hover { background:var(--card-h); }
.btn-secondary.btn-full { width:100%; }

.error-msg {
  background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3);
  color:#FCA5A5; border-radius:var(--r-sm); padding:12px 16px; font-size:13px;
}

.icon-btn {
  width:36px; height:36px; border-radius:50%;
  background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text2); flex-shrink:0;
}
.icon-btn svg { width:16px; height:16px; }

/* LIST VIEW */
.compact-select {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:8px 10px;
  color:var(--text); font-size:13px; font-family:inherit;
  outline:none; -webkit-appearance:none; cursor:pointer;
}
.compact-select option { background:#1C2537; }

.list-saldo-bar {
  margin:12px 16px 0;
  padding:14px 16px;
  display:flex; gap:0;
}
.lsb-item { flex:1; text-align:center; border-right:1px solid var(--border); padding:4px; }
.lsb-item:last-child { border-right:none; }
.lsb-val { display:block; font-size:15px; font-weight:700; }
.lsb-lbl { display:block; font-size:10px; color:var(--text2); margin-top:2px; }

/* STATS */
.stats-hero {
  margin:12px 16px 0;
  padding:20px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
}
.stats-hero-item { text-align:center; border-right:1px solid var(--border); padding:8px; }
.stats-hero-item:last-child { border-right:none; }
.stats-hero-val { display:block; font-size:20px; font-weight:800; }
.stats-hero-lbl { display:block; font-size:11px; color:var(--text2); margin-top:4px; }

.chart-card { margin:12px 16px; padding:16px; }
.chart-card h3 { font-size:13px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:14px; }
.bar-chart-wrap { display:flex; align-items:flex-end; gap:4px; height:100px; }
.bc-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.bc-bar-wrap { width:100%; display:flex; flex-direction:column; justify-content:flex-end; height:80px; }
.bc-bar {
  width:100%; min-height:2px; border-radius:3px 3px 0 0;
  transition:height 0.6s cubic-bezier(0.34,1.56,0.64,1);
  position:relative;
}
.bc-bar.pos { background:linear-gradient(180deg,var(--green),rgba(16,185,129,0.5)); }
.bc-bar.neg { background:linear-gradient(180deg,var(--red),rgba(239,68,68,0.5)); }
.bc-bar.zero { background:var(--bg3); }
.bc-label { font-size:9px; color:var(--text3); }

.monthly-table { display:flex; flex-direction:column; gap:4px; }
.mt-row {
  display:flex; align-items:center; gap:8px;
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.04);
}
.mt-row:last-child { border-bottom:none; }
.mt-month { font-size:13px; font-weight:600; width:60px; flex-shrink:0; }
.mt-bar-track { flex:1; height:6px; background:rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; }
.mt-bar-fill { height:100%; border-radius:3px; transition:width 0.5s ease; }
.mt-diff { font-size:12px; font-weight:700; width:52px; text-align:right; flex-shrink:0; }
.mt-diff.pos { color:var(--green); }
.mt-diff.neg { color:var(--red); }

/* SETTINGS */
.settings-body { padding:12px 16px; display:flex; flex-direction:column; gap:12px; }
.settings-card { padding:18px; }
.settings-card h3 { font-size:14px; font-weight:700; margin-bottom:16px; }
.danger-card { border-color:rgba(239,68,68,0.2); }

.tmpl-list { display:flex; flex-direction:column; gap:6px; }
.tmpl-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; background:rgba(255,255,255,0.03);
  border-radius:var(--r-sm); border:1px solid var(--border);
}
.tmpl-code { font-size:11px; font-weight:800; color:var(--blue); width:36px; }
.tmpl-name { flex:1; font-size:13px; }
.tmpl-time { font-size:11px; color:var(--text3); }
.tmpl-del { background:none; border:none; color:var(--text3); cursor:pointer; padding:2px; }
.tmpl-del:hover { color:var(--red); }
.tmpl-del svg { width:14px; height:14px; }

/* BOTTOM NAV */
.bottom-nav {
  height:var(--nav-h); min-height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(11,17,32,0.95);
  border-top:1px solid var(--border);
  position:relative; z-index:100;
  padding-bottom:env(safe-area-inset-bottom,0);
  backdrop-filter:blur(20px);
}
.nav-btn {
  flex:1; display:flex; flex-direction:column; align-items:center;
  gap:4px; padding:8px 4px;
  background:none; border:none; color:var(--text3);
  font-size:10px; font-weight:500; cursor:pointer;
  transition:all 0.2s; font-family:inherit;
}
.nav-btn svg { width:22px; height:22px; }
.nav-btn.active { color:var(--blue); }
.nav-btn.active svg { filter:drop-shadow(0 0 8px rgba(79,158,248,0.6)); }
.nav-add { flex:0 0 72px; }
.add-fab {
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(79,158,248,0.4);
  transition:all 0.2s; margin-top:-14px;
}
.add-fab:hover { transform:scale(1.05); }
.add-fab svg { width:24px; height:24px; color:#fff; }

/* TOAST */
.toast {
  position:fixed; bottom:calc(var(--nav-h) + 12px); left:50%; transform:translateX(-50%);
  background:rgba(28,37,55,0.96); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:11px 20px;
  font-size:14px; font-weight:500; z-index:999;
  backdrop-filter:blur(20px); white-space:nowrap;
  animation:slideUp 0.25s ease-out;
}
@keyframes slideUp { from{opacity:0;transform:translateX(-50%) translateY(16px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* SUCCESS OVERLAY */
.success-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(11,17,32,0.94);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(24px);
  animation:fadeIn 0.25s ease;
}
.success-box { text-align:center; padding:32px; }
.success-check {
  width:80px; height:80px; margin:0 auto 20px;
  animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.success-check svg { width:100%; height:100%; }
@keyframes popIn { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
.success-title { font-size:22px; font-weight:800; margin-bottom:8px; }
.success-detail { font-size:14px; color:var(--text2); }
.success-saldo { margin-top:12px; font-size:18px; font-weight:700; color:var(--blue); }

/* AUTOFILL FIX */
@media (prefers-color-scheme: dark) {
  input:-webkit-autofill, input:-webkit-autofill:focus {
    -webkit-box-shadow:0 0 0px 1000px #1C2537 inset;
    -webkit-text-fill-color:#F1F5F9;
  }
}

/* DATE GROUP HEADER */
.date-group-hdr {
  font-size:11px; font-weight:600; color:var(--text3);
  text-transform:uppercase; letter-spacing:0.8px;
  padding:12px 0 6px; margin-top:4px;
}

/* Skeleton */
.skeleton { background:linear-gradient(90deg,var(--bg3) 25%,var(--bg2) 50%,var(--bg3) 75%); background-size:200% 100%; animation:skel 1.4s infinite; border-radius:6px; }
@keyframes skel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Running total bar in list */
.running-bar {
  display:flex; align-items:center; gap:8px;
  padding:6px 0; font-size:12px; color:var(--text3);
  border-top:1px dashed rgba(255,255,255,0.06); margin-top:4px;
}
.running-total { font-weight:700; }
.running-total.pos { color:var(--green); }
.running-total.neg { color:var(--red); }