/* ============================================================
   SPSV Accounts — accounts.nasir.org
   Theme: Dublin taxi at night. Ink navy, roof-sign amber.
   ============================================================ */

:root {
  --bg:      #0D1220;
  --card:    #151C2C;
  --card2:   #1B2438;
  --line:    #26314A;
  --text:    #EAEFF7;
  --muted:   #8B96AB;
  --amber:   #F5B301;
  --amber-d: #C89200;
  --income:  #2FBF71;
  --expense: #F0564A;
  --focus:   #7FB3FF;
  --amber-ui: #F5B301;          /* amber used as text/accent */
  --topbar-bg: rgba(13,18,32,.86);
  --danger-fg:     #FF9B8E;
  --danger-accent: #F0564A;
  --danger-line:   rgba(240,86,74,.42);
  --danger-wash:   rgba(240,86,74,.075);
  --danger-btn-bg: rgba(240,86,74,.14);
  --danger-btn-fg: #FFB1AA;
  --tabbar-bg: rgba(16,22,38,.92);
  --tab-idle:  #8B96AB;
  --tabbar-shadow: rgba(0,0,0,.35);
  --sheet-shadow: rgba(0,0,0,.5);
  --radius:  16px;
  --tabbar-h: calc(72px + env(safe-area-inset-bottom, 0px));
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Bengali', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}
h1,h2,h3 { font-family: var(--font-display); margin: 0 0 .6rem; }
h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; }
a { color: var(--text); text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.ic { vertical-align: -4px; }

.wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 14px 14px calc(var(--tabbar-h) + 84px);
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; }
.brand-text { font-size: 1.05rem; letter-spacing: .02em; }

/* The taxi roof-sign — the app's signature mark */
.roofsign {
  display: inline-block;
  background: linear-gradient(180deg, #FFC81E, var(--amber));
  color: #191100;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .12em;
  padding: 4px 10px;
  border-radius: 7px;
  box-shadow: 0 0 14px rgba(245,179,1,.35), inset 0 -2px 0 rgba(0,0,0,.18);
}
.roofsign-lg { font-size: 1.1rem; padding: 8px 18px; border-radius: 10px; }

.topnav { display: none; gap: 4px; flex: 1; }
.topnav a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 10px;
  color: var(--muted); font-size: .93rem; font-weight: 500;
}
.topnav a:hover { color: var(--text); background: var(--card); }
.topnav a.on { color: var(--amber-ui); background: rgba(245,179,1,.09); }
.topbar-out { color: var(--muted); padding: 8px; }
.topbar .theme-toggle { margin-left: auto; }
.topbar-out:hover { color: var(--text); }

@media (min-width: 880px) {
  .topnav { display: flex; }
  .tabbar, .fab { display: none !important; }
  .wrap { padding-bottom: 40px; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.link { color: var(--amber-ui); font-size: .9rem; font-weight: 500; }
.empty { color: var(--muted); font-size: .95rem; margin: .4rem 0; }
.empty-state { text-align: center; padding: 34px 16px; color: var(--muted); }

/* ---------- Flash ---------- */
.flash { padding: 11px 14px; border-radius: 12px; margin-bottom: 14px; font-size: .95rem; }
.flash-ok    { background: rgba(47,191,113,.14); border: 1px solid rgba(47,191,113,.4); color: #9BE7C1; }
.flash-error { background: rgba(240,86,74,.14);  border: 1px solid rgba(240,86,74,.4);  color: #FFB1AA; }

/* ---------- Month switcher ---------- */
.monthnav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 2px 0 14px;
  position: sticky; top: var(--topbar-h-real, 62px); z-index: 30;
  background: var(--bg);
  margin: -4px -14px 14px; padding: 6px 14px 8px;
}
.mn-btn {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text);
}
.mn-btn:active { transform: scale(.94); }
.mn-label { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; cursor: pointer; }
.mn-label input[type="month"] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.yearnav { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: 1.2rem; }

/* ---------- Hero ---------- */
.hero { text-align: center; padding: 22px 16px 18px; }
.hero-label { color: var(--muted); font-size: .88rem; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .08em; }
.hero-amount {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 9vw, 3rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin: 0 0 14px;
}
.pos { color: var(--income); }
.neg { color: var(--expense); }
.splitbar {
  display: flex; height: 10px; border-radius: 6px; overflow: hidden;
  background: var(--line); margin-bottom: 12px;
}
.sb-in  { background: var(--income); transition: width .5s ease; }
.sb-out { background: var(--expense); transition: width .5s ease; }
.hero-legend { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; flex: none; }

/* ---------- KPI cards ---------- */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.kpi { margin: 0; padding: 13px 14px; }
.kpi-label { color: var(--muted); font-size: .8rem; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.kpi-value { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 0; font-variant-numeric: tabular-nums; }
.kpi-sub { color: var(--muted); font-size: .76rem; margin: 3px 0 0; }
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi:last-child { grid-column: span 2; }
}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }

/* ---------- Donut ---------- */
.donut-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.donut-wrap { position: relative; width: 168px; height: 168px; flex: none; margin-inline: auto; }
.donut { width: 100%; height: 100%; }
.donut-center {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.donut-center span { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.donut-center small { color: var(--muted); font-size: .72rem; }
.legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 200px; }
.legend li { display: flex; align-items: center; gap: 4px; padding: 5px 0; font-size: .9rem; border-bottom: 1px dashed var(--line); }
.legend li:last-child { border-bottom: 0; }
.lg-name { flex: 1; color: var(--muted); }
.lg-val { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- Horizontal bars ---------- */
.hbars { list-style: none; margin: 0; padding: 0; }
.hbars li { display: grid; grid-template-columns: minmax(96px, 34%) 1fr auto; align-items: center; gap: 10px; padding: 6px 0; }
.hb-name { font-size: .88rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-track { height: 9px; background: var(--line); border-radius: 6px; overflow: hidden; }
.hb-fill { display: block; height: 100%; border-radius: 6px; }
.hb-val { font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Column chart ---------- */
.cols { width: 100%; height: auto; }
.cols .ax { fill: var(--muted); font-size: 11px; font-family: var(--font-body); }

/* ---------- Transaction list ---------- */
.txlist { list-style: none; margin: 0; padding: 0; }
.txlist li { border-bottom: 1px solid var(--line); }
.txlist li:last-child { border-bottom: 0; }
.txlist a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.txlist a:active { background: var(--card2); }
.tx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tx-cat { font-weight: 600; font-size: .95rem; }
.tx-item { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.tx-amt { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .98rem; }
.tx-date { color: var(--muted); font-size: .75rem; }

.daygroup { margin-bottom: 4px; }
.dayhead { color: var(--muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin: 14px 4px 8px; }

.ledger-sums { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; color: var(--muted); flex-wrap: wrap; padding: 12px 16px; }
.ledger-sums strong { font-variant-numeric: tabular-nums; margin-left: 4px; }

/* ---------- Segmented control ---------- */
.seg { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-bottom: 12px; }
.seg a { flex: 1; text-align: center; padding: 9px 6px; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: .92rem; }
.seg a.on { background: var(--card2); color: var(--amber-ui); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; flex: 1; min-width: 0; }
.field span { font-size: .8rem; color: var(--muted); font-weight: 500; }
.field input, .field select {
  background: var(--card2); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); font-size: 1rem; font-family: var(--font-body);
  padding: 12px 13px; width: 100%; min-height: 48px;
}
.field input:focus, .field select:focus { border-color: var(--amber); outline: none; }
.field input[type="color"] { padding: 5px; min-width: 62px; }
.field input[type="date"] {
  -webkit-appearance: none; appearance: none;
  min-width: 0; display: block; text-align: left;
}
.field-color { flex: 0 0 auto; }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row .field { min-width: 140px; }
.amount-wrap { position: relative; display: block; }
.amount-cur { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--muted); pointer-events: none; }
#fAmount { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  text-align: right; padding-left: 34px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
#fAmount::placeholder { font-weight: 500; color: var(--muted); opacity: .5; }

.typeswitch { display: flex; gap: 8px; margin-bottom: 14px; }
.typeswitch label { flex: 1; }
.typeswitch input { position: absolute; opacity: 0; }
.typeswitch span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card2); color: var(--muted); font-weight: 600; cursor: pointer;
}
.ts-in  input:checked + span { border-color: var(--income);  color: var(--income);  background: rgba(47,191,113,.1); }
.ts-out input:checked + span { border-color: var(--expense); color: var(--expense); background: rgba(240,86,74,.1); }
.typeswitch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.netpreview { background: rgba(47,191,113,.1); border: 1px solid rgba(47,191,113,.35);
  border-radius: 12px; padding: 10px 13px; font-size: .9rem; margin: -4px 0 14px; }
.netpreview strong { color: var(--income); font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 13px; padding: 13px 20px;
  font: 600 1rem var(--font-body); cursor: pointer; min-height: 48px;
}
.btn:active { transform: scale(.97); }
.btn-amber { background: linear-gradient(180deg, #FFC81E, var(--amber)); color: #191100; box-shadow: 0 2px 12px rgba(245,179,1,.3); }
.btn-danger { background: var(--danger-btn-bg); color: var(--danger-btn-fg); border: 1px solid var(--danger-line); font-weight: 700; }
.btn-danger:hover { border-color: var(--danger-accent); }
.btn-plain { background: var(--card2); color: var(--text); border: 1px solid var(--line); }
.btn-block { width: 100%; }
.btn-ghost { background: none; border: 0; color: var(--muted); padding: 8px; cursor: pointer; border-radius: 9px; }
.btn-ghost:hover { color: var(--text); background: var(--card2); }
.btn-ghost.danger:hover { color: var(--expense); }

/* ---------- Bottom tab bar (mobile) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: stretch; justify-content: space-around;
  height: var(--tabbar-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--tabbar-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 14px var(--tabbar-shadow);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: var(--tab-idle); font-size: .8rem; font-weight: 600;
  padding: 6px 0;
}
.tabbar a svg { width: 23px; height: 23px; }
.tabbar a.on { color: var(--amber-ui); }
.tabbar a:active { transform: scale(.94); }
.fab {
  flex: 0 0 auto !important;
  align-self: center;
  width: 58px; height: 58px;
  margin-top: -26px;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFC81E, var(--amber));
  color: #191100 !important;
  box-shadow: 0 6px 20px rgba(245,179,1,.45), inset 0 -3px 0 rgba(0,0,0,.15);
  display: grid !important; place-items: center;
}

/* ---------- Bottom sheet ---------- */
.sheet-veil {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(5,8,16,.6); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.sheet-veil.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  max-height: 92dvh; overflow-y: auto;
  background: var(--card);
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--line);
  padding: 8px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(105%);
  transition: transform .3s cubic-bezier(.32,.72,.22,1);
  box-shadow: 0 -12px 40px var(--sheet-shadow);
}
.sheet.open { transform: translateY(0); }
.sheet-grab { width: 42px; height: 4px; border-radius: 3px; background: var(--line); margin: 6px auto 10px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sheet-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.sheet-actions .btn { flex: 1; min-width: 150px; }
@media (min-width: 880px) {
  .sheet { left: 50%; right: auto; width: 560px; transform: translate(-50%,105%); border-radius: 22px; bottom: 30px; border: 1px solid var(--line); }
  .sheet.open { transform: translate(-50%,0); }
}

/* ---------- Category list ---------- */
.catlist { list-style: none; margin: 0; padding: 0; }
.catlist li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.catlist li:last-child { border-bottom: 0; }
.catlist li.inactive { opacity: .45; }
.cat-name { flex: 1; font-size: .95rem; }
.cat-name small { display: block; color: var(--muted); font-size: .74rem; }
.cat-actions { display: flex; align-items: center; gap: 2px; }
.inlineform { display: inline; }

/* ---------- Report matrix ---------- */
.report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pagetitle { font-size: 1.4rem; font-weight: 700; margin: 4px 0 6px; }
.pagesub { color: var(--muted); font-size: .9rem; margin: 0 0 16px; }
.tablewrap { overflow-x: auto; margin: 4px -16px -16px; padding: 0 16px 14px; -webkit-overflow-scrolling: touch; }
.matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .82rem; min-width: 880px; }
.matrix th, .matrix td { padding: 8px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.matrix thead th { color: var(--muted); font-weight: 700; font-size: .7rem; letter-spacing: .04em;
  border-bottom: 2px solid var(--line); padding-top: 4px; }
/* zebra + hover make a 15-column row easier to track across */
.matrix tbody tr:nth-child(even) td, .matrix tbody tr:nth-child(even) th.sticky { background: var(--card2); }
/* Hover tints must never be translucent on the frozen column, or the
   cells scrolling underneath show through it. Layer the tint over an
   opaque base, and only on devices that really hover (a tap leaves the
   hover state stuck on touch screens). */
@media (hover: hover) {
  .matrix tbody tr:hover td { background: rgba(245,179,1,.09); }
  .matrix tbody tr:hover th.sticky {
    background-color: var(--card);
    background-image: linear-gradient(rgba(245,179,1,.09), rgba(245,179,1,.09));
  }
  .matrix tbody tr:nth-child(even):hover th.sticky { background-color: var(--card2); }
}
/* the month you're in, highlighted down the whole column */
.matrix th.now, .matrix td.now { background: rgba(245,179,1,.13); }
.matrix thead th.now { color: var(--amber-ui); }
@media (hover: hover) { .matrix tbody tr:hover td.now { background: rgba(245,179,1,.2); } }
/* separate the year total from the months */
.matrix td.yr, .matrix th.yr { border-left: 2px solid var(--line); }
.matrix td.pct, .matrix th.pct { color: var(--muted); font-size: .76rem; }
.matrix th.sticky {
  position: sticky; left: 0; text-align: left;
  background: var(--card); z-index: 2; max-width: 190px;
  overflow: hidden; text-overflow: ellipsis;
  /* crisp edge + soft shadow in one declaration (two box-shadow lines
     would mean the later one silently wins) */
  box-shadow: 2px 0 0 var(--line), 6px 0 7px -6px rgba(0,0,0,.30);
}
.matrix td.z { color: var(--line); }
.matrix td.yr, .matrix th.yr { font-weight: 700; color: var(--amber-ui); }
.matrix tfoot th, .matrix tfoot td { font-weight: 800; border-top: 2px solid var(--line);
  border-bottom: 0; background: var(--card2); }
.matrix tfoot th.sticky { background: var(--card2); }
.matrix .negcell { color: var(--expense); }

/* ---------- Settings ---------- */
.morelinks { list-style: none; margin: 0; padding: 0; }
.morelinks li { border-bottom: 1px solid var(--line); }
.morelinks li:last-child { border-bottom: 0; }
.morelinks a { display: flex; align-items: center; gap: 12px; padding: 13px 2px; font-weight: 500; }

/* ---------- Login ---------- */
.login-body {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: 100dvh; padding: 20px;
  /* Native-app feel: lock the page so it can't rubber-band behind the card. */
  position: fixed; inset: 0; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
/* When the card is taller than the screen (e.g. Create account), let it scroll
   from the top instead of clipping the centered top edge. */
.login-body > * { flex: 0 0 auto; margin: auto 0; }
html:has(.login-body), body:has(.login-body) {
  overflow: hidden; overscroll-behavior: none;
}
.login-card {
  width: 100%; max-width: 380px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 34px 26px calc(26px + env(safe-area-inset-bottom, 0px));
}
.login-card h1 { font-size: 1.7rem; margin: 14px 0 2px; }
.login-sub { color: var(--muted); font-size: .88rem; margin: 0 0 22px; }
/* Clickable brand → marketing site. Inert in the installed PWA so app
   users aren't bounced out to a browser. */
.brand-home { display: inline-block; text-decoration: none; border-radius: 12px;
  transition: transform .12s ease, opacity .12s ease; -webkit-tap-highlight-color: transparent; }
.brand-home:hover { transform: translateY(-1px); opacity: .9; }
.brand-home:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (display-mode: standalone) {
  /* Running as the installed app: make the logo a plain badge, not a link. */
  .brand-home { pointer-events: none; cursor: default; }
  .brand-home:hover { transform: none; opacity: 1; }
}
.login-card form { text-align: left; }
.hp { position: absolute; left: -9999px; }

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
@media print {
  .topbar, .tabbar, .fab, .monthnav, .export-row { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border-color: #ccc; break-inside: avoid; }
}

/* ---------- Ledger toolbar ---------- */
.ledger-tools { display: flex; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.ledger-tools .seg { flex: 1; margin-bottom: 0; }
.btn-add { padding: 9px 16px; min-height: 0; border-radius: 12px; }
@media (max-width: 879px) { .btn-add { display: none; } }


/* ============================================================
   Daylight theme — Dublin taxi by day. Paper white, same amber.
   Activated via <html data-theme="light">, saved in localStorage.
   ============================================================ */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] body,
html[data-theme="light"] {
  --bg:      #F2F4F8;
  --card:    #FFFFFF;
  --card2:   #EEF1F6;
  --line:    #D8DEE9;
  --text:    #1A2233;
  --muted:   #5B6678;
  --amber:   #F5B301;
  --amber-d: #C89200;
  --amber-ui: #8A6A00;
  --income:  #178A50;
  --expense: #C93F34;
  --focus:   #2563EB;
  --topbar-bg: rgba(255,255,255,.88);
  --danger-fg:     #8B1A10;
  --danger-accent: #B3271A;
  --danger-line:   rgba(179,39,26,.40);
  --danger-wash:   rgba(179,39,26,.05);
  --danger-btn-bg: rgba(179,39,26,.09);
  --danger-btn-fg: #7F1D1D;
  --tabbar-bg: rgba(255,255,255,.94);
  --tab-idle:  #48536A;
  --tabbar-shadow: rgba(20,30,55,.10);
  --sheet-shadow: rgba(20,30,55,.25);
}

/* Theme toggle button */
.theme-toggle { background: none; border: 0; cursor: pointer; font: inherit; }
.theme-toggle .ic-moon { display: none; }
html[data-theme="light"] .theme-toggle .ic-sun  { display: none; }
html[data-theme="light"] .theme-toggle .ic-moon { display: inline; }

/* ---------- Pull-to-refresh indicator ---------- */
html, body { overscroll-behavior-y: contain; }
#ptr {
  position: fixed; top: calc(var(--topbar-h-real, 62px) - 56px); left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 40px; z-index: 35;
  display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 50%;
  color: var(--muted); box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .18s ease;
  pointer-events: none;
}
#ptr svg { width: 20px; height: 20px; }
#ptr.ready { color: var(--amber-ui); border-color: var(--amber); }
#ptr.refreshing svg { animation: ptrspin .7s linear infinite; }
@keyframes ptrspin { to { transform: rotate(360deg); } }

/* ---------- "today" chip on the month switcher ---------- */
.mn-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.mn-today {
  font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber-ui); background: rgba(245,179,1,.12);
  padding: 2px 9px; border-radius: 999px;
}
.mn-today:active { transform: scale(.95); }

/* ---------- Toast (replaces the old top banner) ---------- */
.flash { display: none; }
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 14px); z-index: 70;
  transform: translateX(-50%) translateY(8px);
  display: flex; align-items: center; gap: 10px;
  max-width: min(92vw, 420px);
  padding: 13px 18px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  font-size: .95rem; font-weight: 600; color: var(--text);
  animation: toastin .28s cubic-bezier(.2,.9,.3,1.2) both;
  cursor: pointer;
}
@media (min-width: 880px) { .toast { bottom: 26px; } }
.toast-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; }
.toast-ok .toast-ic    { background: rgba(47,191,113,.18); color: var(--income); }
.toast-error .toast-ic { background: rgba(240,86,74,.18);  color: var(--expense); }
.toast-ok    { border-color: rgba(47,191,113,.45); }
.toast-error { border-color: rgba(240,86,74,.45); }
.toast.out { transition: opacity .3s ease, transform .3s ease; opacity: 0; transform: translateX(-50%) translateY(14px); }
@keyframes toastin { from { opacity: 0; transform: translateX(-50%) translateY(24px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ---------- Backup import form ---------- */
.import-head { margin: 18px 0 4px; font-size: 1rem; }
.import-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.import-form input[type="file"] {
  width: 100%; padding: 10px; background: var(--card2);
  border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: .9rem;
}
.confirm-line { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--muted); cursor: pointer; }
.confirm-line input { width: 18px; height: 18px; accent-color: var(--amber); }

/* ---------- Registration & user management ---------- */
.reg-card { max-width: 520px; }
.reg-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 4px 0 16px; }
.reg-steps li {
  flex: 1; text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  padding: 7px 4px; border-radius: 10px; background: var(--card2);
}
.reg-steps li.on   { color: var(--amber-ui); box-shadow: inset 0 0 0 1px var(--amber); }
.reg-steps li.done { color: var(--income); box-shadow: inset 0 0 0 1px rgba(47,191,113,.5); }
.login-err { padding: 11px 14px; border-radius: 12px; margin-bottom: 14px; font-size: .92rem;
  background: rgba(240,86,74,.14); border: 1px solid rgba(240,86,74,.4); color: var(--expense); }
.login-info { padding: 11px 14px; border-radius: 12px; margin-bottom: 14px; font-size: .92rem;
  background: rgba(47,191,113,.14); border: 1px solid rgba(47,191,113,.4); color: var(--income); }
.reg-alt { margin-top: 10px; text-align: center; }
.link-btn { background: none; border: 0; cursor: pointer; font: inherit; font-size: .9rem;
  color: var(--amber-ui); font-weight: 600; }
.login-alt { margin-top: 16px; text-align: center; color: var(--muted); font-size: .92rem; }
#regCode { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .35em; text-align: center; }
.role-badge { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--amber-ui); background: rgba(245,179,1,.12); padding: 2px 7px; border-radius: 999px; }
.status-active   { color: var(--income); font-weight: 600; }
.status-disabled { color: var(--expense); font-weight: 600; }
.users-table td, .users-table th { text-align: right; }
.users-actions { display: flex; gap: 6px; justify-content: flex-end; }
.inline-form { display: inline; }
.btn-sm { padding: 6px 10px; min-height: 0; font-size: .8rem; border-radius: 9px; }
.btn-sm.danger { color: var(--expense); }
.pw-row { display: none; }
.pw-row.open { display: table-row; }
.pw-form { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.pw-form input { flex: 1; min-width: 170px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card2); color: var(--text); }

/* ---------- Settings page redesign ---------- */
.acct-card { display: flex; align-items: center; gap: 14px; padding: 16px;
  color: var(--text); margin-bottom: 14px; }
.avatar { display: grid; place-items: center; width: 52px; height: 52px; flex: none;
  border-radius: 50%; background: linear-gradient(135deg, var(--amber), var(--amber-d));
  color: #1A1A1A; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.acct-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.acct-meta strong { font-family: var(--font-display); font-size: 1.05rem; }
.acct-sub { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setcard { padding: 14px 16px; }
.setcard-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.setlist { display: flex; flex-direction: column; margin: 0 -16px -14px; }
.setrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  color: var(--text); border-top: 1px solid var(--line); min-height: 56px; }
.setrow:first-child { border-top: 0; }
.setrow:active { background: var(--card2); }
.setrow-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 10px; color: var(--ic, var(--amber)); background: color-mix(in srgb, var(--ic, var(--amber)) 16%, transparent); }
.setrow-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.setrow-txt span { color: var(--muted); font-size: .8rem; }
.setrow-chev { color: var(--muted); flex: none; }
.theme-seg { display: flex; gap: 8px; }
.theme-seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2);
  color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.theme-seg button.on { color: var(--amber-ui); border-color: var(--amber); background: rgba(245,179,1,.10); }
.set-details summary { display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-weight: 600; padding: 6px 0; color: var(--text); list-style: none; }
.set-details summary::-webkit-details-marker { display: none; }
.set-details summary::after { content: '›'; margin-left: auto; color: var(--muted);
  transition: transform .18s ease; font-size: 1.1rem; }
.set-details[open] summary::after { transform: rotate(90deg); }
.set-details > *:not(summary) { margin-top: 10px; }
.signout-row { display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px; margin-top: 14px; color: var(--expense); font-weight: 700; }
.signout-row:active { transform: scale(.99); }
.about-foot { text-align: center; color: var(--muted); font-size: .78rem; margin: 16px 0 4px; }

/* ---------- Date-range export ---------- */
.range-form { display: flex; flex-direction: column; gap: 4px; }
.range-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.chip { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card2); color: var(--muted); font: inherit; font-size: .82rem;
  font-weight: 600; cursor: pointer; }
.chip:active { transform: scale(.96); }
.chip.on { color: var(--amber-ui); border-color: var(--amber); background: rgba(245,179,1,.10); }

/* ---------- Month insights ---------- */
.insights { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; }
.ins { display: flex; align-items: baseline; gap: 10px; font-size: .92rem; color: var(--muted); }
.ins strong { color: var(--text); font-variant-numeric: tabular-nums; }
.ins-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--c, var(--amber)); position: relative; top: -1px; }

/* ---------- Lock (read-only mode) ---------- */
.lockbar { display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; margin-bottom: 14px; border-radius: 12px; font-weight: 600; font-size: .9rem;
  color: var(--amber-ui); background: rgba(245,179,1,.12); border: 1px solid rgba(245,179,1,.4); }
.lockbar span { line-height: 1; }
.txrow-locked { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%;
  color: var(--text); cursor: default; }

/* ---------- In-place save row highlight ---------- */
@keyframes rowFlash {
  0%   { background: rgba(245,179,1,.28); }
  100% { background: transparent; }
}
.row-flash { animation: rowFlash 1.2s ease-out; border-radius: 12px; }

/* ---------- Category translation + Bijoy ---------- */
.trans-list { display: flex; flex-direction: column; gap: 8px; }
.trans-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.trans-en { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--text); min-width: 0; }
.trans-en .dot { flex: none; }
.trans-row input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card2); color: var(--text); font-size: 1rem; }
.trans-row input:focus { outline: none; border-color: var(--amber); }
.trans-save { position: sticky; bottom: 12px; margin-top: 14px; }
.trans-save .btn { width: 100%; }
.bijoy-fab { position: fixed; right: 16px; bottom: 84px; z-index: 60;
  display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  font-weight: 800; font-size: .95rem; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.bijoy-fab.bijoy-on { background: var(--amber); border-color: var(--amber-d); color: #1A1A1A; }

/* ---------- Category English sub-label (bn mode) ---------- */
.cat-en { display: block; font-size: .72rem; color: var(--muted); font-weight: 500; margin-top: 1px; }

/* ---------- Topbar user greeting ---------- */
.topbar-user { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 999px; background: var(--card2); border: 1px solid var(--line);
  color: var(--text); font-weight: 600; font-size: .9rem; text-decoration: none;
  max-width: 160px; white-space: nowrap; }
.topbar-user span { overflow: hidden; text-overflow: ellipsis; }
.topbar-user:hover { border-color: var(--amber); }
.topbar-user svg { flex: none; color: var(--muted); }
@media (max-width: 640px) {
  .topbar-user { max-width: none; padding: 8px; border-radius: 50%; gap: 0; }
  .topbar-user span { display: none; }          /* icon-only avatar on mobile */
  .topbar-user svg { color: var(--text); }
}

/* ---------- Matrix tables on small screens ---------- */
@media (max-width: 520px) {
  .matrix { font-size: .76rem; min-width: 780px; }
  .matrix th, .matrix td { padding: 7px 7px; }
  .matrix th.sticky { max-width: 120px; }
  .matrix thead th { font-size: .64rem; }
}

/* ---------- Two-factor authentication ---------- */
.notice { padding: 11px 14px; border-radius: 12px; margin-bottom: 14px; font-size: .92rem; font-weight: 600; }
.notice.err { color: var(--expense); background: rgba(240,86,74,.12); border: 1px solid rgba(240,86,74,.4); }
.qrbox { display: flex; justify-content: center; padding: 16px; margin: 4px 0 6px;
  background: #FFFFFF; border-radius: 14px; border: 1px solid var(--line); }
.qrbox svg { width: 216px; height: 216px; display: block; }
.tfa-manual { margin-top: 14px; }
.secretkey { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700;
  letter-spacing: .10em; word-break: break-all; background: var(--card2); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; margin: 0 0 10px; }
.btn-sm { padding: 8px 13px; font-size: .85rem; }
.codeinput { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  letter-spacing: .28em; text-align: center; font-variant-numeric: tabular-nums; }
.codegrid { list-style: none; margin: 12px 0 16px; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.codegrid li { font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  letter-spacing: .06em; text-align: center; padding: 10px 6px; border-radius: 10px;
  background: var(--card2); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tfa-codes { border-color: var(--amber); }
.tfa-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tfa-actions .btn { flex: 1 1 150px; }
.warn-inline { color: var(--amber-ui); font-weight: 700; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--muted);
  text-decoration: underline; cursor: pointer; }
.login-cancel { margin-top: 6px; text-align: center; }

/* ---------- Activity log ---------- */
.act-last { display: flex; gap: 12px; align-items: flex-start; }
.act-last-ic { flex: none; color: var(--amber-ui); }
.act-last strong { display: block; font-size: .9rem; }
.act-last span { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }
.act-userpick { margin-bottom: 10px; }
.act-userpick select { width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card2); color: var(--text); font-size: .95rem; }
.act-seg { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; margin-bottom: 14px; }
.act-seg a { flex: 1 1 auto; text-align: center; padding: 9px 10px; font-size: .82rem;
  font-weight: 700; color: var(--muted); text-decoration: none; white-space: nowrap; }
.act-seg a.on { background: var(--amber); color: #1A1A1A; }
.actlist { list-style: none; margin: 0; padding: 0; }
.actlist li { display: grid; grid-template-columns: auto 1fr; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--line); }
.actlist li:last-child { border-bottom: 0; }
.act-ic { color: var(--muted); padding-top: 2px; }
.act-head { margin: 0; font-size: .92rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.act-sum { margin: 2px 0 0; font-size: .86rem; color: var(--text); }
.act-meta { margin: 4px 0 0; font-size: .74rem; color: var(--muted); }
.act-new { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 999px; background: rgba(245,179,1,.16); color: var(--amber-ui); }
.act-done { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 999px; background: rgba(46,160,67,.15); color: var(--income); }
.act-diff { list-style: none; margin: 6px 0 0; padding: 8px 10px; border-radius: 10px;
  background: var(--card2); font-size: .8rem; }
.act-diff li { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; border: 0; }
.act-diff .fld { min-width: 74px; color: var(--muted); }
.act-diff .from { color: var(--muted); text-decoration: line-through; }
.act-diff .arr { color: var(--muted); }
.act-diff .to { font-weight: 700; }
.act-undo { margin-top: 8px; }
.act-pager { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 14px; font-size: .8rem; color: var(--muted); }
.act-entry-delete .act-ic { color: var(--expense); }
.act-auth-login-failed .act-ic { color: var(--expense); }

/* ---------- Danger zone ---------- */
.danger-zone {
  border: 1px solid var(--danger-line);
  background: var(--danger-wash);
  /* inset stripe rather than border-left, so it follows the rounded corner */
  box-shadow: inset 4px 0 0 var(--danger-accent);
}
.danger-zone .setcard-title {
  color: var(--danger-fg);
  letter-spacing: .01em;
}
.danger-zone .setcard-title svg { color: var(--danger-accent); }
.danger-zone .pagesub { color: var(--text); opacity: .78; }
.danger-zone summary { color: var(--danger-fg); font-weight: 700; }
.danger-zone .field span { color: var(--danger-fg); opacity: .85; }

/* ---------- Category icons ---------- */
.cat-chip { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  background: color-mix(in srgb, var(--cc) 16%, transparent);
  color: var(--cc); }
.cat-chip svg { width: 16px; height: 16px; }
/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .cat-chip { background: var(--card2); }
}
.txlist .cat-chip, .txrow-locked .cat-chip { margin-right: 2px; }
.iconpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 8px; margin-top: 6px; }
.iconpick label { display: flex; align-items: center; justify-content: center;
  height: 44px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card2); color: var(--muted); cursor: pointer; }
.iconpick input { position: absolute; opacity: 0; pointer-events: none; }
.iconpick input:checked + label { border-color: var(--amber); color: var(--amber-ui);
  background: rgba(245,179,1,.12); }
.iconpick label:hover { color: var(--text); }

/* ---------- Lettermark category chips ---------- */
.cat-chip-txt { font-weight: 800; font-size: .92rem; letter-spacing: .01em;
  font-family: var(--font-display); line-height: 1; }
.cat-chip-txt2 { font-size: .74rem; letter-spacing: .02em; }

/* ---------- Categories page ---------- */
.cat-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.cat-search { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.cat-search svg { flex: none; color: var(--muted); }
.cat-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none;
  color: var(--text); font-size: .95rem; padding: 11px 0; font-family: inherit; }
.cat-toolbar .btn { flex: none; }
.cat-count { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--card2); border: 1px solid var(--line);
  font-size: .72rem; font-weight: 700; color: var(--muted); vertical-align: middle; }
.catlist li { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.catlist li:last-child { border-bottom: 0; }
.catlist li[hidden] { display: none; }
.cat-name { min-width: 0; }
.cat-title { display: block; font-weight: 600; font-size: .95rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-meta { display: block; font-size: .74rem; color: var(--muted); margin-top: 2px; }
.cat-meta strong { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cat-meta em { font-style: normal; opacity: .75; }
.catlist li.inactive .cat-title { opacity: .55; }
.cat-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.cat-hidden { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.cat-hidden > summary { cursor: pointer; font-size: .8rem; color: var(--muted);
  font-weight: 600; padding: 4px 0; list-style: none; }
.cat-hidden > summary::-webkit-details-marker { display: none; }
.cat-hidden > summary::before { content: '▸ '; }
.cat-hidden[open] > summary::before { content: '▾ '; }
.cat-nores { text-align: center; color: var(--muted); font-size: .9rem; padding: 18px 0; }
.cat-icons > summary { cursor: pointer; font-size: .82rem; color: var(--muted); font-weight: 600;
  padding: 6px 0; }
.cat-row2 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
@media (max-width: 520px) {
  .cat-toolbar { flex-wrap: wrap; }
  .cat-toolbar .btn { width: 100%; justify-content: center; }
  .cat-row2 { grid-template-columns: 1fr 1fr; }
  .cat-row2 .field-color { grid-column: span 2; }
}

/* ---------- Two-factor page ---------- */
.tfa-intro { margin: -6px 0 14px; }
.tfa-step h2 { display: flex; align-items: center; gap: 10px; }
.stepno { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--amber); color: #1A1A1A; font-size: .85rem; font-weight: 800; }
.tfa-acct { display: flex; align-items: center; gap: 7px; margin: 10px 0 0;
  font-size: .82rem; color: var(--muted); }
.tfa-acct svg { flex: none; }
.tfa-manual-wrap { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.tfa-manual-wrap > summary { cursor: pointer; font-size: .85rem; color: var(--muted);
  font-weight: 600; padding: 4px 0; }
.codefield .codeinput { padding: 14px 12px; }
.codeinput::placeholder { color: var(--muted); opacity: .35; letter-spacing: .28em; }
.tfa-cancel { text-align: center; margin: 12px 0 0; font-size: .85rem; }
.tfa-cancel a { color: var(--muted); }
.codegrid { counter-reset: rc; }
.codegrid li { position: relative; }
.codegrid li::before { counter-increment: rc; content: counter(rc);
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  font-size: .66rem; font-weight: 700; color: var(--muted); opacity: .7; }
/* enabled state */
.tfa-on-head { display: flex; gap: 13px; align-items: flex-start; }
.tfa-shield { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: rgba(46,160,67,.15); color: var(--income); }
.tfa-on-head h2 { margin: 2px 0 0; display: flex; align-items: center; gap: 9px; }
.pill-on { font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  padding: 3px 9px; border-radius: 999px; background: var(--income); color: #06210E; }
.tfa-codesleft { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.tfa-codesleft p { margin: 8px 0 0; font-size: .84rem; color: var(--muted); }
.tfa-codesleft strong { color: var(--text); font-variant-numeric: tabular-nums; }
.tfa-meter { height: 6px; border-radius: 999px; background: var(--card2);
  border: 1px solid var(--line); overflow: hidden; }
.tfa-meter span { display: block; height: 100%; background: var(--income); }
.tfa-codesleft.low .tfa-meter span { background: var(--amber); }
@media (max-width: 520px) {
  .tfa-actions .btn { flex: 1 1 100%; }
  .qrbox svg { width: 190px; height: 190px; }
}

/* ---------- Sign-in: second factor ---------- */
.login-who { display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0 0 14px; padding: 8px 12px; border-radius: 999px;
  background: var(--card2); border: 1px solid var(--line);
  font-size: .82rem; color: var(--muted); }
.login-who svg { flex: none; }
.login-who strong { color: var(--text); font-weight: 700; }
.login-hint { margin: 10px 0 14px; font-size: .8rem; color: var(--muted); text-align: center; line-height: 1.45; }
.login-cancel { margin-top: 16px; text-align: center; }
.login-cancel .linkbtn { color: var(--muted); text-decoration: none;
  font-size: .85rem; font-weight: 600; padding: 8px 14px; border-radius: 10px; }
.login-cancel .linkbtn:hover { color: var(--text); background: var(--card2); text-decoration: none; }

/* ---------- Users admin: cards ---------- */
.userlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.usercard { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--card2); }
.uc-head { display: flex; gap: 12px; align-items: flex-start; }
.uc-avatar { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: var(--amber); color: #1A1A1A; font-weight: 800; font-size: .95rem; }
.uc-id { flex: 1 1 auto; min-width: 0; }
.uc-name { margin: 1px 0 0; font-weight: 700; font-size: 1rem;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uc-you { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.uc-handle { margin: 4px 0 0; font-size: .8rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 4px 12px; }
.uc-signin { display: inline-flex; align-items: center; gap: 5px; }
.uc-signin strong { color: var(--text); font-weight: 700; }
.uc-email { overflow: hidden; text-overflow: ellipsis; }
.uc-status { flex: none; font-size: .78rem; font-weight: 700; }
.uc-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 13px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--line); }
.uc-meta > div { min-width: 0; }
.uc-meta dt { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.uc-meta dd { margin: 2px 0 0; font-size: .88rem; font-weight: 600; }
.uc-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.uc-panel { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.uc-panel.open { display: block; }
.uc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; align-items: end; }
.uc-form label { display: block; min-width: 0; }
.uc-form label span { display: block; font-size: .72rem; color: var(--muted); margin-bottom: 4px; }
.uc-form input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: .92rem; font-family: inherit; }
.uc-form input:focus { outline: none; border-color: var(--amber); }
.uc-form .btn { grid-column: 1 / -1; justify-self: start; }
.uc-note { grid-column: 1 / -1; margin: 0; font-size: .74rem; color: var(--muted); }
@media (max-width: 520px) {
  .uc-meta { gap: 10px 16px; }
  .uc-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Automatic backup status ---------- */
.bk-status { display: flex; gap: 11px; align-items: flex-start; margin-top: 14px;
  padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); }
.bk-status strong { display: block; font-size: .88rem; }
.bk-status span:not(.bk-dot) { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.bk-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; margin-top: 6px; }
.bk-ok    .bk-dot { background: var(--income); }
.bk-stale .bk-dot { background: var(--amber); }
.bk-bad   .bk-dot { background: var(--expense); }
.bk-bad   { border-color: var(--danger-line); background: var(--danger-wash); }

/* --- THEME-AWARE-V2 : back bar + activity log + impersonation --- */

/* settings sub-page back bar */
.subback{display:flex;align-items:center;gap:14px;max-width:1060px;
  margin:0 auto;padding:12px 14px 0;}
.subback-link{display:inline-flex;align-items:center;gap:5px;
  color:var(--focus);text-decoration:none;font-weight:600;font-size:.9rem;
  padding:6px 10px;border-radius:9px;
  background:color-mix(in srgb,var(--focus) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--focus) 26%,transparent);
  transition:background .15s ease;}
.subback-link:hover{background:color-mix(in srgb,var(--focus) 20%,transparent);}
.subback-link svg{flex:0 0 auto;}
.subback-title{color:var(--muted);font-size:.85rem;font-weight:600;}
@media (max-width:560px){ .subback-title{display:none;} }

/* activity log viewer */
.page-head{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;}
.page-head h1{display:flex;align-items:center;gap:9px;margin:0;font-size:1.35rem;color:var(--text);}
.muted{color:var(--muted);font-size:.82rem;}
.act-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px;}
.act-filters select,.act-filters input[type=date]{background:var(--card);
  color:var(--text);border:1px solid var(--line);border-radius:9px;padding:7px 10px;
  font-family:inherit;font-size:.85rem;}
.act-table{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card);}
.act-table table{width:100%;border-collapse:collapse;font-size:.85rem;}
.act-table thead th{text-align:left;padding:11px 14px;background:var(--card2);
  color:var(--muted);font-weight:600;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;border-bottom:1px solid var(--line);white-space:nowrap;}
.act-table tbody td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text);}
.act-table tbody tr:last-child td{border-bottom:0;}
.act-table .nowrap{white-space:nowrap;}
.act-summary{color:var(--text);max-width:420px;}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.7rem;
  font-weight:700;letter-spacing:.02em;white-space:nowrap;}
.pill-ok{background:color-mix(in srgb,var(--income) 16%,transparent);color:var(--income);}
.pill-info{background:color-mix(in srgb,var(--focus) 16%,transparent);color:var(--focus);}
.pill-warn{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber-ui,var(--amber-d));}
.pill-danger{background:var(--danger-btn-bg);color:var(--danger-btn-fg);}
.via{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  font-size:.66rem;font-weight:700;
  background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber-ui,var(--amber-d));}
.act-pager{display:flex;align-items:center;justify-content:center;gap:16px;
  margin:16px 0;font-size:.85rem;color:var(--muted);}
.act-pager a{color:var(--focus);text-decoration:none;font-weight:600;}
.act-purge{margin:20px 0 8px;}

/* admin impersonation banner */
.imp-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:0 0 18px;padding:12px 16px;border-radius:14px;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--amber);
  box-shadow:0 6px 20px var(--sheet-shadow,rgba(0,0,0,.28));}
.imp-left{display:flex;align-items:center;gap:12px;min-width:0;}
.imp-avatar{flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--amber),var(--amber-d));
  color:#1a1200;font-weight:800;font-size:16px;}
.imp-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.imp-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--amber-ui,var(--amber-d));display:flex;align-items:center;gap:7px;}
.imp-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);}
.imp-name{font-size:14.5px;font-weight:700;color:var(--text);min-width:0;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.imp-email{font-size:12px;font-weight:500;color:var(--muted);}
.imp-form{margin:0;flex:0 0 auto;}
.imp-exit{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--amber);color:#1a1200;border:0;border-radius:10px;
  padding:9px 15px;font-family:inherit;font-weight:700;font-size:13.5px;
  transition:background .15s ease,transform .05s ease;}
.imp-exit:hover{background:var(--amber-d);}
.imp-exit:active{transform:translateY(1px);}
@media (max-width:560px){
  .imp-bar{padding:11px 13px;gap:11px;}
  .imp-exit{width:100%;justify-content:center;}
  .imp-form{width:100%;}
}/* ---------- Contact messages (admin) ---------- */
.msg-filters { display: flex; gap: 8px; margin: 4px 0 20px; flex-wrap: wrap; }
.msg-filters .mf { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border-radius: 10px; background: var(--card); border: 1px solid var(--line);
  color: var(--muted); font-size: .92rem; font-weight: 600; text-decoration: none; transition: .15s; }
.msg-filters .mf:hover { color: var(--text); border-color: var(--muted); }
.msg-filters .mf.on { background: var(--card2); color: var(--text); border-color: var(--amber); }
.msg-filters .mf span { font-size: .8rem; background: var(--bg); padding: 1px 8px; border-radius: 20px; color: var(--muted); }
.msg-filters .mf.on span { background: var(--amber); color: #191100; }
.msg-list { display: flex; flex-direction: column; gap: 14px; }
.msg-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; transition: .15s; }
.msg-card.is-new { border-left: 3px solid var(--focus); }
.msg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.msg-who { display: flex; align-items: center; gap: 10px; }
.msg-name { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.msg-date { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.msg-meta { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 12px; }
.msg-meta a, .msg-meta span { display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted); font-size: .9rem; text-decoration: none; }
.msg-meta a:hover { color: var(--amber-ui); }
.msg-body { color: var(--text); line-height: 1.6; font-size: .98rem; white-space: pre-wrap;
  background: var(--bg); border-radius: 10px; padding: 13px 15px; }
.msg-reply-shown { margin-top: 12px; padding: 13px 15px; border-radius: 10px;
  background: rgba(47,191,113,.08); border: 1px solid rgba(47,191,113,.3); color: var(--text);
  font-size: .95rem; line-height: 1.6; }
.msg-reply-lbl { display: flex; align-items: center; gap: 6px; font-size: .82rem;
  font-weight: 600; color: var(--income); margin-bottom: 6px; }
/* reply form (Piece 5) */
.msg-reply-form { margin-top: 14px; display: none; }
.msg-reply-form.open { display: block; }
.msg-reply-form textarea { width: 100%; padding: 12px 14px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  font-family: inherit; font-size: .96rem; resize: vertical; min-height: 90px; }
.msg-reply-form textarea:focus { outline: none; border-color: var(--amber); }
.msg-reply-form .btn { margin-top: 10px; }
.msg-reply-toggle { margin-top: 12px; }
/* new-message count badge in the nav */
.navbadge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 3px;
  background: #F0564A; color: #ffffff !important; font-size: .72rem; font-weight: 800;
  border-radius: 20px; vertical-align: middle; line-height: 1; }
html[data-theme="light"] .navbadge { color: #ffffff !important; }

/* ---------- User search + filters ---------- */
.user-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.user-tools .user-search { flex: 1 1 260px; }
.user-tools select { padding: 10px 12px; border-radius: 11px; background: var(--card);
  border: 1px solid var(--line); color: var(--text); font-size: .92rem; cursor: pointer; }
.user-tools select:focus { outline: none; border-color: var(--amber); }
.user-count { margin-left: auto; font-size: .86rem; white-space: nowrap; }
@media (max-width: 560px) {
  .user-tools { gap: 8px; }
  .user-tools .user-search { flex: 1 1 100%; }
  .user-tools select { flex: 1 1 auto; }
  .user-count { margin-left: 0; width: 100%; text-align: right; }
}

/* ---------- Subscription status badges (user cards) ---------- */
.sub-badge { display: inline-block; padding: 1px 9px; border-radius: 20px;
  font-size: .78rem; font-weight: 600; }
.sub-badge.sub-active   { background: rgba(47,191,113,.15); color: #4ad991; }
.sub-badge.sub-expiring { background: rgba(245,179,1,.15);  color: #f5b301; }
.sub-badge.sub-expired  { background: rgba(240,86,74,.15);  color: #ff8a7e; }
.sub-badge.sub-none     { background: var(--card2); color: var(--muted); }
.sub-date { color: var(--muted); font-size: .82rem; }

/* ---------- Subscription controls panel ---------- */
.sub-panel { display: none; margin-top: 12px; padding: 14px 16px; border-radius: 12px;
  background: var(--card2); border: 1px solid var(--line); }
.sub-panel.open { display: block; }
.sub-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.sub-field { display: flex; flex-direction: column; gap: 6px; }
.sub-field span { font-size: .82rem; font-weight: 600; color: var(--muted); }
.sub-field input[type="date"] { padding: 9px 12px; border-radius: 10px; background: var(--bg);
  border: 1px solid var(--line); color: var(--text); font-family: inherit; font-size: .92rem; }
.sub-field input[type="date"]:focus { outline: none; border-color: var(--amber); }
.sub-quick { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- User-facing subscription nudge (dashboard) ---------- */
.sub-nudge { padding: 13px 16px; border-radius: 12px; margin-bottom: 16px;
  font-size: .95rem; line-height: 1.5; }
.sub-nudge strong { font-weight: 700; }
.sub-nudge-soon { background: rgba(245,179,1,.12); border: 1px solid rgba(245,179,1,.4); color: var(--text); }
.sub-nudge-exp  { background: rgba(240,86,74,.1);  border: 1px solid rgba(240,86,74,.45); color: var(--text); }
/* ---------- Subscription line in Settings ---------- */
.sub-setrow { display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  font-size: .92rem; color: var(--muted); }
.sub-setrow .sub-badge { margin-left: 2px; }


/* ---------- Top-bar lock button + unlock popup ---------- */
.lock-form { margin: 0; }
.lock-btn { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 6px; border-radius: 9px; display: inline-grid; place-items: center; }
.lock-btn:hover { color: var(--text); }
.lock-btn.is-locked { color: #191100; background: linear-gradient(180deg, #FFC81E, var(--amber)); box-shadow: 0 0 12px rgba(245,179,1,.4); }

.lockpop-backdrop {
  position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.lockpop-backdrop[hidden] { display: none; }
.lockpop {
  width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.lockpop-title { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; margin: 0 0 4px; }
.lockpop-sub { color: var(--muted); font-size: .9rem; margin: 0 0 16px; }
.lockpop-input {
  width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--card2);
  border: 1px solid var(--line); color: var(--text); font-size: 1rem; margin-bottom: 14px;
}
.lockpop-input:focus { outline: none; border-color: var(--amber); }
.lockpop-actions { display: flex; gap: 10px; justify-content: flex-end; }
.lockpop-actions .btn-ghost, .lockpop-actions .btn-amber {
  padding: 10px 18px; border-radius: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--line);
}
.lockpop-actions .btn-ghost { background: none; color: var(--muted); }
.lockpop-actions .btn-amber { background: linear-gradient(180deg, #FFC81E, var(--amber)); color: #191100; border: 0; }

/* ---------- Like-for-like (year-on-year) card ---------- */
.lfl { padding: 14px 16px; }
.lfl-title { font-size: .9rem; color: var(--muted); font-weight: 600; margin: 0 0 12px; }
.lfl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lfl-cell { display: flex; flex-direction: column; gap: 3px; }
.lfl-k { font-size: .78rem; color: var(--muted); }
.lfl-prev { font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lfl-delta { font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lfl-delta.pos { color: var(--income); }
.lfl-delta.neg { color: var(--expense); }
.lfl-delta.flat { color: var(--muted); }


/* ---------- Settings: expandable calculation explainer ---------- */
.explain { margin-top: 12px; }
.explain summary {
  cursor: pointer; color: var(--amber-ui); font-weight: 600; font-size: .88rem;
  list-style: none; padding: 4px 0;
}
.explain summary::-webkit-details-marker { display: none; }

.explain summary::before { content: '\002B\00A0'; font-weight: 700; }
.explain[open] summary::before { content: '\2212\00A0'; }

.explain-body { margin-top: 8px; padding: 14px; background: var(--card2); border: 1px solid var(--line); border-radius: 12px; }
.explain-body p { margin: 0 0 8px; font-size: .88rem; color: var(--muted); line-height: 1.5; }
.explain-h { font-weight: 700; color: var(--text) !important; margin-top: 12px !important; margin-bottom: 6px !important; }
.explain-list { margin: 0 0 4px; padding-left: 20px; }
.explain-list li { font-size: .86rem; color: var(--muted); line-height: 1.7; font-variant-numeric: tabular-nums; }


/* ---------- Responsive user icon (left on mobile, right on desktop) ---------- */
/* Mobile-first (matches .topnav which is hidden until 880px): */
/* Below 880px = mobile → show LEFT icon, hide RIGHT icon */
.topbar-user-left.only-mobile  { display: inline-flex; }
.topbar-user-right.only-desktop { display: none; }

/* 880px and up = desktop → hide LEFT icon, show RIGHT icon (original position) */
@media (min-width: 880px) {
  .topbar-user-left.only-mobile  { display: none; }
  .topbar-user-right.only-desktop { display: inline-flex; }
}


/* ==================== Account page (account.php) ==================== */
.acct-card-main { padding: 0; overflow: hidden; }

/* Hero */
.acct-head {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 22px 20px;
  background: linear-gradient(180deg, rgba(245,179,1,.06), transparent);
  border-bottom: 1px solid var(--line);
}
.acct-avatar {
  width: 60px; height: 60px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 1.35rem; font-weight: 700; letter-spacing: .02em;
  font-family: var(--font-display, inherit);
  background: linear-gradient(145deg, #FFD23F, #D99900);
  color: #1a1200; box-shadow: 0 4px 14px rgba(245,179,1,.30);
}
.acct-headmeta { display: flex; flex-direction: column; min-width: 0; }
.acct-headmeta strong {
  font-size: 1.3rem; line-height: 1.2; font-family: var(--font-display, inherit);
}
.acct-headmeta .acct-sub { color: var(--muted); font-size: .92rem; margin-top: 2px; word-break: break-word; }
.acct-headmeta .acct-role {
  align-self: flex-start; margin-top: 7px;
  font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(245,179,1,.16); color: var(--amber-ui);
}

/* Details list */
.acct-details { margin: 0; padding: 6px 22px 4px; }
.acct-field {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.acct-field:last-child { border-bottom: none; }
.acct-details dt {
  font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 5px;
}
.acct-details dd {
  margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--text);
  line-height: 1.4; word-break: break-word;
}
.acct-details dd.is-empty { color: var(--muted); font-weight: 400; font-style: italic; }

/* Edit button */
.acct-editbtn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 44px); margin: 8px 22px 22px;
}


/* ==================== Account page (account.php) ==================== */
.acct-card-main { padding: 0; overflow: hidden; }

/* Hero */
.acct-head {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 22px 20px;
  background: linear-gradient(180deg, rgba(245,179,1,.06), transparent);
  border-bottom: 1px solid var(--line);
}
.acct-avatar {
  width: 60px; height: 60px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 1.35rem; font-weight: 700; letter-spacing: .02em;
  font-family: var(--font-display, inherit);
  background: linear-gradient(145deg, #FFD23F, #D99900);
  color: #1a1200; box-shadow: 0 4px 14px rgba(245,179,1,.30);
}
.acct-headmeta { display: flex; flex-direction: column; min-width: 0; }
.acct-headmeta strong {
  font-size: 1.3rem; line-height: 1.2; font-family: var(--font-display, inherit);
}
.acct-headmeta .acct-sub { color: var(--muted); font-size: .92rem; margin-top: 2px; word-break: break-word; }
.acct-headmeta .acct-role {
  align-self: flex-start; margin-top: 7px;
  font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(245,179,1,.16); color: var(--amber-ui);
}

/* Details list */
.acct-details { margin: 0; padding: 6px 22px 4px; }
.acct-field {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.acct-field:last-child { border-bottom: none; }
.acct-details dt {
  font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 5px;
}
.acct-details dd {
  margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--text);
  line-height: 1.4; word-break: break-word;
}
.acct-details dd.is-empty { color: var(--muted); font-weight: 400; font-style: italic; }

/* Edit button */
.acct-editbtn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 44px); margin: 8px 22px 22px;
}

/* --- Inline edit form --- */
.acct-editform { padding: 4px 22px 22px; }
.acct-editform .field { margin-bottom: 12px; }
.acct-eerr {
  background: var(--danger-btn-bg); color: var(--danger-btn-fg);
  border: 1px solid var(--danger-line); border-radius: 10px;
  padding: 10px 14px; font-size: .9rem; margin-bottom: 14px;
}
.acct-eactions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }


/* ---- Mobile-view section name next to the SPSV.IO logo (matches the mobile app) ---- */
.topbar-section {
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem;
  color: var(--muted); letter-spacing: .01em; white-space: nowrap;
  margin-left: 2px;
}
/* show on mobile widths, hide on desktop (where the nav links appear instead) */
.topbar-section.only-mobile { display: inline-block; }
@media (min-width: 880px) {
  .topbar-section.only-mobile { display: none; }
}


/* ============================================================
   Mobile view (<880px): match the mobile app.
   The topbar already shows the section name, so hide the in-page
   H1 heading, and turn the Reports year switcher into a full-width
   centered bar like the mobile app's month/year nav.
   Desktop (>=880px) is unchanged.
   ============================================================ */
@media (max-width: 879.98px) {
  /* header section name replaces the page H1 → hide the duplicate */
  .pagetitle { display: none; }

  /* Reports: full-width year switcher bar, like the mobile app */
  .report-head { margin-bottom: 8px; }
  .report-head .yearnav {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 10px;
  }
}


/* Mobile view: group ALL action icons neatly on the right (like the mobile app).
   On desktop the nav (flex:1) handles spacing; on mobile the nav is hidden, so
   push the whole icon cluster right starting at the first action icon. */
@media (max-width: 879.98px) {
  /* the left-side user icon is the first action on mobile → start the push here */
  .topbar .topbar-user-left.only-mobile { margin-left: auto; }
  /* theme-toggle no longer needs its own auto-margin on mobile (would double-push) */
  .topbar .theme-toggle { margin-left: 0; }
}

/* Mobile view: tighten the header gap so the icons sit closer together and
   the section name ("Annual Reports") has room to stay on one line. */
@media (max-width: 879.98px) {
  .topbar { gap: 10px; }
  .topbar .topbar-out { padding: 6px; }   /* slightly tighter icon padding on mobile */
}


/* Error box inside popups (change password, 2FA off) */
.lockpop-err {
  background: rgba(240,86,74,.12); color: var(--expense);
  border: 1px solid rgba(240,86,74,.4); border-radius: 10px;
  padding: 9px 12px; font-size: .88rem; margin: 0 0 12px;
}
.lockpop-err[hidden] { display: none; }

/* Align header contents (logo left, icons right) with the content column below.
   The bar stays full-width for the background/blur; only its inner padding grows
   so the logo and icons line up with .wrap (max-width:1060px, 14px side padding). */
@media (min-width: 1088px) {   /* 1060 + 2*14 = 1088: only pad once the column is capped */
  .topbar {
    padding-left:  calc((100% - 1060px) / 2 + 14px);
    padding-right: calc((100% - 1060px) / 2 + 14px);
  }
}


/* Solid danger button inside popups (e.g. "Turn off two-factor") — matches the
   shape of the other lockpop buttons (10px 18px, radius 12px, weight 600). */
.lockpop-actions .btn-danger {
  padding: 10px 18px; border-radius: 12px; font-weight: 600; cursor: pointer; border: 0;
  background: var(--expense); color: #fff;
  box-shadow: 0 2px 12px rgba(240,86,74,.3);
}
.lockpop-actions .btn-danger:hover { filter: brightness(1.05); }
.lockpop-actions .btn-danger:active { transform: translateY(1px); }

/* Data & backup section — two action buttons */
.backup-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.backup-actions .btn { flex: 0 0 auto; }
@media (max-width: 560px) {
  .backup-actions { flex-direction: column; }
  .backup-actions .btn { width: 100%; justify-content: center; }
}

/* Activity columns picker */
.actcol-list { display:flex; flex-direction:column; }
.actcol-row { display:flex; align-items:center; justify-content:space-between; padding:11px 2px; border-bottom:1px solid var(--line); font-size:.95rem; cursor:pointer; }
.actcol-row:last-child { border-bottom:none; }
.actcol-row input[type="checkbox"] { width:20px; height:20px; accent-color:var(--amber); cursor:pointer; }
.actcol-row input[type="checkbox"]:disabled { opacity:.5; cursor:default; }

/* Activity — user clear log */
.act-clearmine { margin:18px 0 6px; padding-top:16px; border-top:1px solid var(--line); }
.clearmine-label { display:block; font-size:.82rem; color:var(--muted); font-weight:600; margin-bottom:8px; }
.clearmine-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.clearmine-sel { padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--text); font-size:.9rem; }

/* ===== Field validation shake + hint (ledger) ===== */
#fCategory.field-invalid,
#fAmount.field-invalid {
  border-color: var(--danger-accent) !important;
  box-shadow: 0 0 0 3px var(--danger-line) !important;
  animation: shakeX .35s ease;
}
.field-hint {
  margin-top: 6px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--danger-fg);
  display: flex;
  align-items: center;
  gap: 6px;
}
.field-hint::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--danger-accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
}
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Ensure [hidden] wins over .field-hint display:flex */
.field-hint[hidden] { display: none !important; }

/* ===== Custom confirmation dialog (replaces native confirm) ===== */
.confirm-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 3000; padding: 24px;
  animation: cdFade .15s ease;
}
.confirm-box {
  background: var(--card, #131A2B); width: 100%; max-width: 400px;
  border-radius: 16px; padding: 24px 22px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  animation: cdPop .18s ease;
}
.confirm-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 8px; color: var(--text, #EAEFF7); }
.confirm-msg { font-size: .95rem; color: var(--muted, #9AA6BB); line-height: 1.5; margin-bottom: 22px; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-btn { flex: 1; padding: 12px 16px; border-radius: 11px; font-size: .96rem; font-weight: 700; cursor: pointer; border: 1px solid transparent; font-family: inherit; }
.confirm-cancel { background: var(--bg, #0D1220); color: var(--text, #EAEFF7); border-color: var(--line, rgba(255,255,255,.12)); }
.confirm-cancel:hover { border-color: var(--muted, #9AA6BB); }
.confirm-ok { background: var(--amber, #F5B301); color: #0D1220; }
.confirm-ok:hover { filter: brightness(1.05); }
.confirm-danger { background: var(--danger-btn-bg); color: var(--danger-btn-fg); border: 1px solid var(--danger-line); }
.confirm-danger:hover { border-color: var(--danger-accent); }
@keyframes cdFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cdPop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Locked: dim the Edit profile button (click blocked in JS) */
.acct-editbtn.is-locked-btn {
  opacity: .45;
  cursor: not-allowed;
}

/* ===== Collapsible profile details (matches mobile) ===== */
.acct-details-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: transparent; border: none; cursor: pointer;
  padding: 15px 22px; margin: 0;
  font-family: inherit; font-size: 1rem; font-weight: 600;
  color: var(--text);
  border-top: 1px solid var(--line);
}
.acct-details-toggle .chev,
.acct-details-toggle .acct-details-chev {
  color: var(--muted); font-size: 1.3rem; line-height: 1;
  transition: transform .18s ease;
}
.acct-details-toggle.open .acct-details-chev { transform: rotate(90deg); }
.acct-details-toggle:hover { color: var(--amber); }

/* ===== Admin users: clean compact rows (Joomla-style) ===== */
.userlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.userlist .urow {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.userlist .urow:hover { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 6%, transparent); }
.userlist .urow:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Left: identity */
.userlist .urow .uc-head { display: flex; align-items: center; gap: 13px; flex: 1 1 auto; min-width: 0; margin: 0; }
.userlist .urow .uc-avatar {
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber); color: #0D1220; font-weight: 800; font-size: 1.02rem;
}
.userlist .urow .uc-id { min-width: 0; }
.userlist .urow .uc-name { margin: 0; font-weight: 700; font-size: 1.04rem; color: var(--text); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; line-height: 1.2; }
.userlist .urow .uc-handle { margin: 3px 0 0; display: flex; align-items: center; gap: 12px; font-size: .85rem; color: var(--muted); flex-wrap: wrap; }
.userlist .urow .uc-handle .uc-signin strong { color: var(--text); font-weight: 600; }
.userlist .urow .role-badge {
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber);
}
.userlist .urow .uc-you {
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
}

/* Right: just the status badge */
.userlist .urow .uc-status {
  flex: none; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}
.userlist .urow .uc-status.status-active { background: color-mix(in srgb, #16a34a 20%, transparent); color: #4ade80; }
.userlist .urow .uc-status.status-disabled { background: color-mix(in srgb, #dc2626 18%, transparent); color: #f87171; }

/* Hide the meta strip AND the relocated action block from the row (they live in the modal) */
.userlist .urow .uc-meta { display: none !important; }
.userlist .urow .urow-actions { display: none; }

/* A subtle chevron hint on the right that the row opens */
.userlist .urow::after {
  content: "›"; color: var(--muted); font-size: 1.5rem; line-height: 1; flex: none; margin-left: 2px; opacity: .5;
}

@media (max-width: 620px) {
  .userlist .urow .uc-handle .uc-email { display: none; }  /* keep rows tidy on mobile */
}

/* ===== Centered tabbed user modal ===== */
.umodal-backdrop {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: umFade .15s ease;
}
.umodal-backdrop[hidden] { display: none; }
.umodal {
  background: var(--card); width: 100%; max-width: 560px; max-height: 86vh;
  border-radius: 16px; border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  display: flex; flex-direction: column; overflow: hidden;
  animation: umPop .18s ease;
}
.umodal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; }
.umodal-titlewrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.umodal-avatar {
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber); color: #0D1220; font-weight: 800; font-size: 1.15rem;
}
.umodal-name { font-weight: 700; font-size: 1.08rem; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.umodal-sub { font-size: .86rem; color: var(--muted); }
.umodal-x { background: transparent; border: none; color: var(--muted); font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.umodal-x:hover { color: var(--text); }
.umodal-tabs { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.umodal-tab {
  background: transparent; border: none; cursor: pointer; white-space: nowrap;
  padding: 11px 13px; font-size: .9rem; font-weight: 600;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit;
}
.umodal-tab:hover { color: var(--text); }
.umodal-tab.on { color: var(--amber); border-bottom-color: var(--amber); }
.umodal-tab.danger.on { color: #f87171; border-bottom-color: #f87171; }
.umodal-body { padding: 18px 20px 22px; overflow-y: auto; }
.umodal-pane { display: none; }
.umodal-pane.on { display: block; }

/* Details tab: the meta shown as a tidy labeled grid inside the modal */
.umodal-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 0 0 6px; }
.umodal-meta > div { display: flex; flex-direction: column; gap: 3px; }
.umodal-meta dt { font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0; }
.umodal-meta dd { margin: 0; font-size: .95rem; color: var(--text); font-weight: 600; }

.umodal-pane .uc-panel { display: block !important; max-height: none !important; overflow: visible !important; padding: 0; }
.umodal-pane form { margin: 0 0 14px; }
.umodal-pane .uc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.umodal-pane .muted { color: var(--muted); }
.umodal-sectlabel { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 4px 0 10px; }
@keyframes umFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes umPop { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }


/* ===== User modal: footer + meta grid ===== */
.umodal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.umodal-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 0 0 6px; }
.umodal-meta > div { display: flex; flex-direction: column; gap: 3px; }
.umodal-meta dt { font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0; }
.umodal-meta dd { margin: 0; font-size: .95rem; color: var(--text); font-weight: 600; }
.umodal-sectlabel { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 8px 0 10px; }

/* ===== Weekly dashboard additions ===== */
.hero-net { color: var(--amber); font-weight: 800; letter-spacing: .08em; }
.mn-label { font-weight: 800 !important; text-transform: uppercase; letter-spacing: .02em; }
.mn-label-btn { text-decoration: none; cursor: pointer; }
.dash-period-toggle {
  font-weight: 800; font-size: .95rem; letter-spacing: .02em;
  color: var(--amber); min-width: 2.2em; text-align: center;
  text-decoration: none;
}
.dash-period-toggle:hover { opacity: .8; }

/* ===== Bigger € symbol in the amount field (mobile) ===== */
@media (max-width: 820px) {
  .sheet .amount-cur { font-size: 1.35rem; font-weight: 500; left: 14px; }
  .sheet input#fAmount { padding-left: 34px; }
}

/* ===== Bigger € symbol in the amount field — all screen sizes (desktop + mobile) ===== */
.sheet .amount-wrap .amount-cur { font-size: 1.5rem !important; font-weight: 600 !important; left: 14px; }
.sheet input#fAmount { padding-left: 34px; }

/* ===== Left-align the amount number (like the mobile app) — all screen sizes ===== */
.sheet input#fAmount { text-align: left !important; }

/* ===== Hero restructure: date range / NET / amount ===== */
.hero-range { color: var(--text); font-size: 1rem; font-weight: 600; margin: 0 0 12px; }
.hero-net-label { color: var(--amber); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 2px; }