/* ============================================================================
   Ledgeryt — design system
   Refined modern light theme (blue accent)
   ========================================================================== */

:root {
  /* surfaces */
  --bg: #f3f6fb;
  --panel: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  /* text */
  --text: #0f172a;
  --text-soft: #334155;
  --muted: #64748b;

  /* accent (blue) scale */
  --accent-50: #eff6ff;
  --accent-100: #dbeafe;
  --accent-500: #3b82f6;
  --accent: #2563eb;
  --accent-600: #2563eb;
  --accent-700: #1d4ed8;
  --accent-dark: #1d4ed8;
  --accent-soft: #eff6ff;

  /* Reusable accent gradients for primary CTAs and highlight bars. */
  --accent-grad: linear-gradient(180deg, #60a5fa 0%, #3b82f6 48%, #2563eb 100%);
  --accent-grad-strong: linear-gradient(135deg, #4f8df7 0%, #2563eb 55%, #1d4ed8 100%);

  /* Checkbox fill. Defaults to the accent, but color themes may soften it
     (e.g. the "Tealed orange" theme uses a muted orange so checked boxes are
     less saturated than the primary accent). */
  --checkbox-accent: var(--accent);

  /* status */
  --success: #16a34a;
  --success-soft: #f0fdf4;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --danger: #dc2626;
  --danger-soft: #fef2f2;

  /* radii */
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius: 12px;
  --radius-lg: 16px;

  /* shadows (layered) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 10px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 12px 28px -6px rgba(15, 23, 42, 0.14), 0 8px 12px -8px rgba(15, 23, 42, 0.08);

  --ring: 0 0 0 3px rgba(59, 130, 246, 0.22);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
  background: linear-gradient(180deg, #f7fafd 0%, #eef3f9 100%) fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--text); }

/* ---------------------------------------------------------------- topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  background: linear-gradient(90deg, #0f172a, #1e293b);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(15, 23, 42, 0.28);
}

.topbar .brand {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.1;
}
.topbar .brand-tld {
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-left: 0.04em;
  color: #7dd3fc;
}
.topbar .brand-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}

/* Brand logo (top-left). Shown for every visitor — signed-in and on the
   signed-out landing — so the wordmark always reads "Ledgeryt.com" next to
   the mark. The server sets data-auth before first paint, so there is no
   flash. */
.topbar .brand-logo {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  object-fit: contain;
  flex: 0 0 auto;
}
.topbar .brand-link:hover { color: #fff; }
.topbar .spacer { flex: 1; }
#topbar-user { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

/* The hamburger only opens the app sidebar, which exists for signed-in users.
   Hide it for guests so the landing page never shows a menu that would open
   an empty drawer. */
html[data-auth="out"] .topbar .menu-toggle { display: none; }

/* "Refer a friend" — account-holder scoped. There are two placements:
   * the topbar pill (desktop browsers only, to the right of the wordmark), and
   * a sidebar item pinned to the bottom (phones/tablets only).
   Exactly one is visible at a time; see the media queries below. */

/* Topbar pill (desktop). Hidden by default and revealed only for signed-in
   users on wide viewports. */
.topbar .topbar-referral {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  margin-left: 0.75rem;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease,
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.topbar .topbar-referral:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.34);
  transform: translateY(-1px) scale(1.04);
}
.topbar .topbar-referral:active { transform: translateY(0) scale(0.95); }
/* Signed-in desktop only: show the topbar pill. The `:not([hidden])` guard
   keeps the JS-driven `hidden` attribute authoritative (it is set from
   `state.user` in renderTopbar()). */
html[data-auth="in"] .topbar .topbar-referral:not([hidden]) { display: inline-flex; }

/* Sidebar item (phones/tablets). It inherits the sidebar's item styling and is
   pushed to the bottom with an auto top margin. */
#sidebar .referral-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: auto;
  margin-bottom: 0.1rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--accent-50);
  color: var(--accent-700);
  font-family: var(--font);
  font-size: 0.93rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#sidebar .referral-button:hover {
  background: var(--accent-100);
  border-color: var(--accent);
  color: var(--accent-700);
}
#sidebar .referral-button:active { transform: none; }
/* The sidebar placement is for phones/tablets only; on desktop the topbar pill
   is used instead, so hide the sidebar copy there. */
@media (min-width: 769px) {
  #sidebar .referral-button { display: none; }
}

/* Inline warning text (e.g. the permanent base-currency notice). */
.warning {
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid rgba(217, 119, 6, 0.35);
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  font-size: 0.85rem;
  line-height: 1.4;
}
html[data-theme="dark"] .warning {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
}

/* Referral form rows: three numbered rows, each pairing a name and an email.
   The form uses the shared .grid (2 columns), so each row must span the full
   width to stack on its own line instead of pairing rows 1 and 2 side by side. */
.referral-row {
  grid-column: 1 / -1;
  display: grid;
  /* The name field is half the width of the email field (0.5fr vs 1fr). */
  grid-template-columns: 2rem 0.5fr 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border, rgba(148, 163, 184, 0.25));
}
.referral-row:last-of-type { border-bottom: none; }
.referral-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent, #2563eb);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}
@media (max-width: 768px) {
  .referral-row { grid-template-columns: 2rem 1fr; }
  .referral-row input[name^="email_"] { grid-column: 2; }
}

/* ---------------------------------------------------------- business menu */

.business-menu { position: relative; }
.business-trigger {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s, border-color 0.15s;
}
.business-trigger:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.32); }
.business-name { font-weight: 600; }
.caret { font-size: 0.7rem; opacity: 0.8; }

.dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 16rem;
  box-shadow: var(--shadow-lg);
  padding: 0.35rem 0;
  z-index: 50;
  animation: pop 0.12s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.menu-label {
  padding: 0.4rem 0.8rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}
.dropdown .menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s;
}
.dropdown .menu-item:hover { background: var(--accent-50); }
.dropdown .menu-item .muted { margin-left: auto; font-size: 0.78rem; }
.dropdown .menu-item.add { color: var(--accent); font-weight: 600; }
.dropdown .check { color: var(--accent); margin-left: auto; }
.dropdown hr { border: 0; border-top: 1px solid var(--border); margin: 0.25rem 0; }

/* ---------------------------------------------------------------- layout */

.layout { display: flex; min-height: calc(100vh - 3.3rem); }

#sidebar {
  width: 13.75rem;
  flex: 0 0 13.75rem;
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 0.85rem 0.6rem;
  /* Flex column so the "Refer a friend" button can be pinned to the bottom
     with `margin-top: auto`. */
  display: flex;
  flex-direction: column;
}
/* The sidebar is rendered hidden for signed-out / no-JS visitors; bootApp
   reveals it only once the visitor is authenticated. */
#sidebar[hidden] { display: none; }
#sidebar button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.9rem;
  margin: 0.1rem 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font);
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
#sidebar button:hover { background: #f1f5f9; color: var(--text); }
#sidebar button.active {
  background: var(--accent-50);
  color: var(--accent-700);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}
#sidebar .nav-group summary {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.9rem;
  margin: 0.1rem 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font);
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  list-style: none;
  transition: background 0.12s, color 0.12s;
}
#sidebar .nav-group-head { display: flex; align-items: stretch; }
#sidebar .nav-group-head > button.nav-link { flex: 1; text-align: left; }
#sidebar .nav-title {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 0.9rem;
  min-height: 44px;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text-soft);
  user-select: none;
  cursor: pointer;
}
#sidebar .nav-group.title-group .nav-group-head:hover .nav-title,
#sidebar .nav-group.title-group .nav-group-head:hover .nav-toggle {
  background: #f1f5f9;
  color: var(--text);
}
#sidebar .nav-toggle {
  flex: 0 0 auto;
  width: 2.4rem;
  min-width: 2.4rem;
  margin: 0;
  padding: 0;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  transition: transform 0.15s;
}
#sidebar .nav-group.open > .nav-group-head > .nav-toggle { transform: rotate(180deg); }
#sidebar .nav-body { display: none; padding-left: 1.4rem; }
#sidebar .nav-group.open > .nav-body { display: block; }
#sidebar .nav-group.active .nav-link { background: var(--accent-50); color: var(--accent-700); font-weight: 600; }

#main { flex: 1; padding: 1.6rem; overflow: auto; }

/* ---------------------------------------------------------------- panels */

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

h2 { margin: 0 0 0.85rem; font-size: 1.18rem; font-weight: 700; letter-spacing: -0.015em; }
h3 { margin: 0 0 0.55rem; font-size: 1rem; font-weight: 650; }

/* ---------------------------------------------------------------- tables */

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}
.table th, .table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.table thead th {
  background: #f8fafc;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.table tbody tr { transition: background 0.12s; }
.table tbody tr:nth-child(even) { background: #fafbfd; }
.table tbody tr:hover { background: var(--accent-50); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot th, .table tfoot td {
  border-top: 1px solid var(--border);
  background: #f8fafc;
  font-weight: 650;
}

/* Card-style tables: rounded, bordered containers (top-level lists & reports). */
.panel > .table,
#report-out .table,
.table-card .table {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-xs);
}
.table-card { border-radius: var(--radius-sm); }

/* Nested tables (inside entries/details) stay borderless. */
.table .table,
details.entries .table,
.table-card .table .table {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.register-scroll {
  max-height: 65vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.register-scroll .table { border: 0; border-radius: 0; box-shadow: none; }
.register-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  box-shadow: inset 0 -1px 0 var(--border);
}
.table th.check, .table td.check { width: 2.2rem; text-align: center; }

/* ------------------------------------------------- admin: users table ----
   The Users page packs identity, plan, features and a set of row actions into
   one table. Keep the identity cell readable, let the action buttons wrap into
   a tidy group on desktop, and stack them full-width on phones. */
.admin-users-table td { vertical-align: top; }
.admin-users-table .user-cell { display: flex; flex-direction: column; gap: 0.1rem; }
.admin-users-table .user-email { font-weight: 600; word-break: break-word; }
.admin-users-table .user-name { font-size: 0.82rem; }
.admin-users-table .plan-features { min-width: 14rem; }
.admin-users-table .plan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; }
.admin-users-table .features { min-width: 12rem; }
.admin-users-table .features .checkbox-row { padding: 0.1rem 0; }

/* Row actions: a wrapping flex group so buttons never overflow the cell. */
.action-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.action-group > button,
.action-group > select { flex: 0 0 auto; }
.action-group > select { max-width: 8rem; }

/* Inline edit / copy draft rows on the single-line Transactions view. */
tr.row-editing { background: var(--accent-50) !important; }
tr.row-editing input {
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
  width: 100%;
  box-sizing: border-box;
}
tr.row-editing sl-select { width: 100%; }
tr.row-editing td.num input { width: 6.5rem; }

/* Inline Account/Category dropdowns on each register row. */
#register td sl-select { width: 100%; }
#register td sl-select::part(combobox) { min-width: 8rem; }

/* ----------------------------------------------------------------- forms */

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 0.8rem; }
.grid .full { grid-column: 1 / -1; }

label { display: block; font-size: 0.82rem; font-weight: 550; color: var(--muted); margin-bottom: 0.25rem; }

.checkbox-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; }
.checkbox-row label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: var(--text);
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.checkbox-row input[type="checkbox"]:checked {
  background: var(--checkbox-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.2 11.6 2.5 7.9l1.4-1.4 2.3 2.3 5.9-6 1.4 1.4z'/%3E%3C/svg%3E") center/72% no-repeat;
  border-color: var(--checkbox-accent);
}
.checkbox-row.accounts-filter { margin: 0.25rem 0 0.5rem; }

.tax-cell { min-width: 9rem; }
.tax-checks { display: flex; flex-direction: column; gap: 0; }
.tax-checks .checkbox-row { padding: 0.15rem 0; }

input, select, textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.9rem;
  background: #fff;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder, textarea::placeholder { color: #9ca3af; }
input:hover, select:hover, textarea:hover { border-color: #b6c2d4; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* --------------------------------------------------------------- buttons */

button { font-family: var(--font); }

button.primary,
button.secondary,
button.danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.05rem;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s,
              box-shadow 0.15s, transform 0.08s, filter 0.15s;
}

button.primary {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
button.primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
  transform: translateY(-1px);
}
button.primary:active { transform: translateY(0); filter: brightness(0.95); box-shadow: var(--shadow-xs); }

button.secondary {
  background: #fff;
  color: var(--text-soft);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
button.secondary:hover {
  background: #f8fafc;
  border-color: #b6c2d4;
  color: var(--accent-700);
  transform: translateY(-1px);
}
button.secondary:active { transform: translateY(0); background: #f1f5f9; }

button.btn-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.05rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px dashed var(--accent);
  cursor: pointer;
  white-space: nowrap;
  background: var(--accent-50);
  color: var(--accent-700);
  transition: background 0.15s, border-color 0.15s, color 0.15s,
              box-shadow 0.15s, transform 0.08s;
}
button.btn-add::before {
  content: "+";
  font-size: 1.2em;
  line-height: 1;
  font-weight: 700;
}
button.btn-add:hover {
  background: var(--accent);
  color: #fff;
  border-style: solid;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}
button.btn-add:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

#new-transaction-toggle::before,
#add-journal-entry::before {
  content: "+";
  font-size: 1.15em;
  line-height: 1;
  font-weight: 700;
}

.import-type {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "radio title"
    "radio desc";
  column-gap: 0.6rem;
  row-gap: 0.1rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--panel);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.import-type:hover {
  border-color: var(--accent);
  background: var(--accent-50);
}
.import-type input {
  grid-area: radio;
  accent-color: var(--accent);
  margin: 0;
}
.import-type .import-type-title {
  grid-area: title;
  font-weight: 700;
  line-height: 1.2;
}
.import-type .import-type-desc {
  grid-area: desc;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}
.import-type:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-50);
  box-shadow: inset 0 0 0 1px var(--accent);
}

button.danger {
  background: linear-gradient(180deg, #ef4444, #dc2626);
  color: #fff;
  padding: 0.5rem 0.9rem;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
button.danger:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.28);
  transform: translateY(-1px);
}
button.danger:active { transform: translateY(0); filter: brightness(0.95); box-shadow: var(--shadow-xs); }

button.primary.small,
button.secondary.small { padding: 0.32rem 0.7rem; font-size: 0.8rem; border-radius: var(--radius-xs); }
button.danger.small { padding: 0.28rem 0.55rem; font-size: 0.76rem; border-radius: var(--radius-xs); }

button.link {
  background: none;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.9rem;
  padding: 0;
}
button.link:hover { text-decoration: underline; }

button:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
#sidebar button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.auth-panel { max-width: 26rem; margin: 3rem auto; }
.password-wrap { position: relative; }
.password-wrap input { width: 100%; padding-right: 2.6rem; }
.pwd-toggle {
  position: absolute; top: 50%; right: 0.4rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; border: none;
  background: transparent; color: var(--muted); cursor: pointer;
  border-radius: var(--radius); line-height: 0;
}
.pwd-toggle:hover { color: var(--accent); background: var(--border); }
.pwd-toggle .eye-off { display: none; }
.pwd-toggle.showing .eye { display: none; }
.pwd-toggle.showing .eye-off { display: inline-flex; }
div.entry { margin-bottom: 0.75rem; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 1rem;
  /* Allow the overlay itself to scroll when the dialog is taller than the
     viewport (small phones, landscape, or a long Textract result). */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-box {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem;
  width: 100%; max-width: 30rem;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  /* Never exceed the viewport: the box scrolls internally so the action
     buttons at the bottom stay reachable on any screen size. */
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-box h3 { margin: 0 0 0.9rem; }
/* Wider variant for content-heavy dialogs (the Textract result). Still capped
   to the viewport width on phones via the base max-width: 100%. */
.modal-box-wide { max-width: 44rem; }

/* The Textract dialog can be long (fields + line items + raw text). Keep its
   action row pinned to the bottom of the scroll area so "Create transaction",
   "Create bill", "Save changes" and "Close" are always visible. */
.modal-box .receipt-action-buttons,
.modal-box .modal-actions {
  position: sticky;
  bottom: -1.25rem;
  background: var(--panel);
  padding-top: 0.6rem;
  padding-bottom: 0.25rem;
  margin-bottom: -0.25rem;
  z-index: 1;
}

/* Body copy and action row inside styled confirm / notice / prompt dialogs. */
.modal-message {
  white-space: pre-line;
  color: var(--text-soft);
  margin: 0 0 1rem;
  line-height: 1.6;
}
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.25rem;
}
.receipt-drop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg, transparent);
}
.receipt-drop.dragover {
  border-color: var(--accent, #4f8cff);
  background: color-mix(in srgb, var(--accent, #4f8cff) 8%, transparent);
}
.receipt-drop #receipt-list {
  flex-basis: 100%;
  font-size: 0.85rem;
  word-break: break-word;
}
.transfer-match-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 1rem;
  max-height: 16rem;
  overflow-y: auto;
}
.transfer-match-row {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.transfer-match-row:hover {
  border-color: var(--border-strong);
  background: var(--panel-soft, rgba(15, 23, 42, 0.03));
}
.transfer-match-row label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  cursor: pointer;
}
.transfer-match-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  min-width: 0;
}
.transfer-match-date {
  color: var(--text-soft);
  font-size: 0.82rem;
}
.transfer-match-route {
  font-weight: 600;
}
.transfer-match-amount {
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

.menu-item.accent { color: var(--accent); font-weight: 600; }
.fees-list { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.75rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1rem; }

/* ---------------------------------------------------------------- cards */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.9rem; }
.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, transform 0.12s;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-500), #60a5fa);
  opacity: 0;
  transition: opacity 0.15s;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card:hover::before { opacity: 1; }
.card-label {
  font-size: 0.76rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.card-value {
  font-size: 1.65rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.card-sub { font-size: 0.74rem; color: var(--muted); }

.balanced { color: var(--success); font-weight: 600; }

/* Sign-based money coloring for account tree balances. */
.money-pos { color: var(--success); font-variant-numeric: tabular-nums; }
.money-neg { color: var(--danger); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- bank cards */

.bank-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.bank-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.2rem 1rem 1rem;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, transform 0.12s;
}
.bank-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* A discovered-but-unconfirmed account: dashed border signals it is not yet
   part of the book and must be confirmed before it can be fetched. */
.bank-card-pending {
  border-style: dashed;
  border-color: var(--warning, #d97706);
  background: var(--panel);
}
.bank-card-pending .bank-select { visibility: hidden; }

/* Drag-to-reorder: a grab handle in the top-left corner, and visual feedback
   while a card is being dragged or hovered as a drop target. */
.bank-card { cursor: grab; }
.bank-card:active { cursor: grabbing; }
.bank-drag {
  position: absolute;
  top: 0.45rem;
  left: 2.1rem;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  opacity: 0.55;
  cursor: grab;
  line-height: 0;
}
.bank-card:hover .bank-drag { opacity: 0.9; }
.bank-card-dragging {
  opacity: 0.5;
  cursor: grabbing;
  box-shadow: var(--shadow-lg);
}
.bank-card-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-md);
}
/* Pending cards keep their checkbox hidden, so nudge the handle to the corner. */
.bank-card-pending .bank-drag { left: 0.6rem; }
.bank-icon {
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}
.bank-name { font-weight: 650; font-size: 0.95rem; color: var(--text); word-break: break-word; }
.bank-sub { font-size: 0.74rem; color: var(--muted); }
.bank-gnucash { font-size: 0.72rem; color: var(--muted); }
.bank-fetch { font-size: 0.7rem; color: var(--muted); }
.bank-refresh-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1rem;
}
.bank-select-row {
  margin: 0 0 0.5rem;
}
.bank-select {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}
.bank-close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bank-close:hover {
  background: var(--accent-50);
  color: var(--accent-700);
  border-color: var(--accent-100);
}

/* --------------------------------------------------------------- badges */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-gray { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.badge-blue { background: var(--accent-50); color: var(--accent-700); border-color: var(--accent-100); }
.badge-green { background: var(--success-soft); color: #15803d; border-color: #bbf7d0; }
.badge-amber { background: var(--warning-soft); color: #b45309; border-color: #fde68a; }
.badge-red { background: var(--danger-soft); color: #b91c1c; border-color: #fecaca; }

/* Stripe Connect onboarding panel (Business Settings) */
#connect-panel {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  background: var(--surface-2, #f8fafc);
}
.connect-status-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.connect-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
#connect-panel details { margin-top: 0.6rem; }
#connect-panel summary { cursor: pointer; font-weight: 600; }
[data-theme="dark"] #connect-panel { background: #111827; border-color: #374151; }

/* -------------------------------------------------------- invoice editor */

.table-wrap { overflow-x: auto; margin-bottom: 0.5rem; }
#invoice-lines input, #invoice-lines select { padding: 0.35rem 0.45rem; font-size: 0.85rem; }
.invoice-totals { text-align: right; margin: 0.75rem 0; line-height: 1.8; }
.invoice-totals div:last-child { font-size: 1.1rem; }

.invoice-preview { background: #fff; }
.inv-doc {
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-xs);
}
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.inv-logo { max-height: 72px; max-width: 160px; object-fit: contain; }
.inv-logo-wrap { position: relative; display: inline-block; }
.logo-remove,
.inv-logo-remove {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.inv-logo-remove { position: absolute; top: -8px; left: -8px; }
.inv-title { margin: 1.25rem 0 0.5rem; color: #0f172a; letter-spacing: 0.08em; font-weight: 800; }
.inv-meta { display: grid; gap: 0.25rem; margin-bottom: 0.75rem; }
.inv-billto { margin-bottom: 1rem; }
.inv-totals { text-align: right; margin-top: 0.75rem; line-height: 1.8; }
.inv-totals div:last-child { font-size: 1.15rem; font-weight: 700; }
.inv-notes { margin-top: 1rem; color: var(--muted); }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

/* Sign-convention warning + info tooltip (Accounts page "Add transaction"). */
.sign-warning {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  color: inherit;
  font-size: 0.85rem;
}
.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.74rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}
.info-tip-box {
  /* Positioned against .sign-warning so the box spans the form width and
     never overflows the viewport; colours follow the active theme. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.35rem;
  padding: 0.6rem 0.75rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-family: inherit;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  z-index: 60;
}
.info-tip:hover .info-tip-box,
.info-tip:focus .info-tip-box,
.info-tip:focus-within .info-tip-box {
  opacity: 1;
  visibility: visible;
}

.error {
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  margin: 0.5rem 0;
}
.error:empty { display: none; }

/* Calm, informational notice (e.g. a bank connection that needs
   re-authentication). Deliberately not red: this is a routine "please sign in
   again" prompt, not a failure. A soft amber tint with a left accent bar reads
   as a gentle heads-up rather than an alarm. */
.bank-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--text-soft);
  background: var(--warning-soft);
  border: 1px solid #fde68a;
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  margin: 0.5rem 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.bank-notice .bank-notice-icon {
  flex: 0 0 auto;
  color: var(--warning);
  line-height: 0;
  margin-top: 0.1rem;
}
.bank-notice .bank-notice-bank { font-weight: 650; color: var(--text); }
[data-theme="dark"] .bank-notice {
  border-color: rgba(217, 119, 6, 0.4);
  border-left-color: var(--warning);
}

/* ----------------------------------------------------------------- tree */

.tree, .tree ul { list-style: none; padding-left: 1.1rem; margin: 0; }
.tree ul { border-left: 1px solid var(--border); margin-left: 0.45rem; padding-left: 0.65rem; }
.tree li { margin: 0.05rem 0; }
.tree a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.32rem 0.55rem;
  border-radius: var(--radius-xs);
  color: var(--text);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.tree a .muted { font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.tree a .tree-cat { font-weight: 700; }
.tree a .tree-underline { text-decoration: underline; }
.tree a:hover { background: var(--accent-50); color: var(--accent-700); }
.tree a.tree-line { border-bottom: 1px solid var(--border); border-radius: 0; }

details.entries { margin-top: 0.5rem; }
details.entries summary { cursor: pointer; color: var(--accent); font-size: 0.85rem; font-weight: 550; }
details.entries summary:hover { color: var(--accent-700); }

details > summary { cursor: pointer; }

/* --------------------------------------------------------------- charts */

.charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  align-items: stretch;
  margin-bottom: 1.25rem;
}
.charts .panel { margin-bottom: 0; height: 100%; }
@media (min-width: 1200px) {
  .charts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .charts { grid-template-columns: 1fr; }
}
.chart-panel h2 { margin-bottom: 0.5rem; }
.chart { width: 100%; height: auto; display: block; }
.chart-axis { stroke: var(--border); stroke-width: 1; }
.chart-label { fill: var(--muted); font-size: 11px; }
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-soft);
}
.chart-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.chart-legend i, .legend-item i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  display: inline-block;
  flex: 0 0 auto;
}
.donut-wrap { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.donut { width: 200px; max-width: 46%; flex: 0 0 auto; }
.donut-total { fill: var(--text); font-size: 20px; font-weight: 700; }
.donut-caption { fill: var(--muted); font-size: 11px; }
.donut-legend { flex: 1; min-width: 180px; flex-direction: column; gap: 0.1rem; }
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.18rem 0;
  font-size: 0.82rem;
}
.legend-item span {
  flex: 1;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.legend-item b { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- footer */

.site-footer {
  text-align: center;
  padding: 1rem 1.5rem 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: #fff;
}
.site-footer a {
  color: var(--muted);
  text-decoration: none;
  margin: 0 0.5rem;
}
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer .footer-sep { color: var(--border-strong); }

/* ---------------------------------------------------------- theme toggle */

.theme-toggle {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.34); }

.lang-select {
  flex: 0 0 auto;
  width: auto;
  max-width: 6.5rem;
  height: 34px;
  padding: 0 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lang-select:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.34); }
.lang-select option { color: #0f172a; background: #fff; }

/* The language dropdown lives in the topbar for signed-out visitors and in the
   footer for signed-in users. The empty slot collapses so it never adds space. */
#topbar-lang-slot { display: inline-flex; align-items: center; }
#topbar-lang-slot:empty { display: none; }
.footer-lang-slot { display: inline-flex; align-items: center; margin-left: 0.5rem; }
.footer-lang-slot:empty { display: none; }
/* In the footer the select must follow the active theme (the footer is light in
   light theme and dark in dark theme), so use theme variables rather than
   hardcoded light colors. */
.site-footer .lang-select {
  color: var(--text);
  background: var(--panel);
  border-color: var(--border-strong);
}
.site-footer .lang-select:hover { background: var(--bg); border-color: var(--accent); }
.site-footer .lang-select option { color: var(--text); background: var(--panel); }

.topbar-signin,
.topbar-signup {
  flex: 0 0 auto;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.15s, border-color 0.15s;
}
.topbar-signin:hover,
.topbar-signup:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}
.topbar-signup {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.topbar-signup:hover {
  background: linear-gradient(180deg, #4b8df7, #2f6fe8);
  border-color: transparent;
}

/* ------------------------------------------------- topbar auth dropdown
   On phones the two auth links ("Sign up" / "Sign in") are collapsed into a
   single compact icon button with a dropdown, so the "Ledgeryt.com" wordmark
   keeps its full size instead of being squeezed. On desktop the plain links
   are shown and this wrapper is hidden. Visibility is driven entirely by CSS
   (data-auth + viewport) so no inline styles are needed. */
.topbar-auth { display: none; position: relative; flex: 0 0 auto; }
/* Guests only: the auth links/dropdown never show once signed in. */
html[data-auth="in"] .topbar > .topbar-signin,
html[data-auth="in"] .topbar > .topbar-signup,
html[data-auth="in"] .topbar-auth { display: none; }
.topbar-auth-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.topbar-auth-toggle:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.34); }
.topbar-auth-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 10rem;
  padding: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  animation: pop 0.12s ease-out;
}
.topbar-auth-menu[hidden] { display: none; }
.topbar-auth-menu .topbar-signin,
.topbar-auth-menu .topbar-signup {
  width: 100%;
  text-align: center;
  color: var(--text);
  background: var(--bg);
  border-color: var(--border-strong);
}
.topbar-auth-menu .topbar-signin:hover {
  background: var(--accent-50);
  color: var(--accent-700);
  border-color: var(--accent);
}
.topbar-auth-menu .topbar-signup {
  color: #fff;
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  border-color: transparent;
}
.topbar-auth-menu .topbar-signup:hover {
  background: linear-gradient(180deg, #4b8df7, #2f6fe8);
  color: #fff;
}

/* ------------------------------------------------- guest (logged-out) topbar */
/* A light, friendly Wave-style nav for visitors (light theme only). In dark
   theme the guest keeps the standard dark navy chrome. */
html[data-auth="out"]:not([data-theme="dark"]) body { background: #f8fafc; }
html[data-auth="out"]:not([data-theme="dark"]) .topbar {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  color: var(--text);
  box-shadow: 0 1px 0 var(--border), 0 2px 12px rgba(15, 23, 42, 0.05);
}
html[data-auth="out"]:not([data-theme="dark"]) .topbar .brand { color: #0f172a; }
html[data-auth="out"]:not([data-theme="dark"]) .topbar .brand-tld { color: var(--accent); }
html[data-auth="out"]:not([data-theme="dark"]) .topbar .brand-link,
html[data-auth="out"]:not([data-theme="dark"]) .topbar .brand-link:hover { color: #0f172a; }
html[data-auth="out"]:not([data-theme="dark"]) .theme-toggle,
html[data-auth="out"]:not([data-theme="dark"]) .menu-toggle {
  color: var(--text-soft);
  background: #f1f5f9;
  border-color: var(--border);
}
html[data-auth="out"]:not([data-theme="dark"]) .theme-toggle:hover,
html[data-auth="out"]:not([data-theme="dark"]) .menu-toggle:hover {
  background: #e2e8f0;
  border-color: var(--border-strong);
}
html[data-auth="out"]:not([data-theme="dark"]) .lang-select {
  color: var(--text);
  background: #f1f5f9;
  border-color: var(--border);
}
html[data-auth="out"]:not([data-theme="dark"]) .lang-select:hover {
  background: #e2e8f0;
  border-color: var(--border-strong);
}
html[data-auth="out"]:not([data-theme="dark"]) .topbar-signin {
  color: var(--text-soft);
  background: transparent;
  border-color: var(--border-strong);
}
html[data-auth="out"]:not([data-theme="dark"]) .topbar-signin:hover {
  background: #f1f5f9;
  color: var(--text);
  border-color: var(--border-strong);
}
html[data-auth="out"]:not([data-theme="dark"]) .topbar-signup {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  border-color: transparent;
  color: #fff;
}
html[data-auth="out"]:not([data-theme="dark"]) .topbar-signup:hover {
  background: linear-gradient(180deg, #4b8df7, #2f6fe8);
  border-color: transparent;
}
/* The mobile auth dropdown toggle follows the light guest chrome. */
html[data-auth="out"]:not([data-theme="dark"]) .topbar-auth-toggle {
  color: var(--text-soft);
  background: #f1f5f9;
  border-color: var(--border);
}
html[data-auth="out"]:not([data-theme="dark"]) .topbar-auth-toggle:hover {
  background: #e2e8f0;
  border-color: var(--border-strong);
}

/* ------------------------------------------------------------ dark theme */

[data-theme="dark"] {
  --bg: #0b1220;
  --panel: #111827;
  --border: #1f2937;
  --border-strong: #374151;
  --text: #e5e7eb;
  --text-soft: #cbd5e1;
  --muted: #94a3b8;
  --accent: #3b82f6;
  --accent-600: #3b82f6;
  --accent-700: #60a5fa;
  --accent-dark: #60a5fa;
  --accent-50: rgba(59, 130, 246, 0.16);
  --accent-100: #1e3a5f;
  --accent-soft: rgba(59, 130, 246, 0.16);
  --success-soft: rgba(22, 163, 74, 0.16);
  --warning-soft: rgba(217, 119, 6, 0.16);
  --danger-soft: rgba(220, 38, 38, 0.16);
}

/* ------------------------------------------------------- color themes
   A color theme is a system-wide palette chosen in the Administration
   panel (system_settings.color_theme). It is applied as
   html[data-color-theme="<name>"] and only overrides the accent scale, so
   it composes with the light/dark mode above. The default theme ("default")
   is the blue palette declared in :root and needs no override block. */

/* "favicon" — the Ledgeryt favicon palette: orange + teal on deep navy.
   Orange (#ec7316) drives the accent scale; teal (#45acab) is exposed as
   --accent-2 for secondary highlights. */
[data-color-theme="favicon"] {
  --accent-50: #fff4ec;
  --accent-100: #ffe4d1;
  --accent-500: #f08a3c;
  --accent: #ec7316;
  --accent-600: #ec7316;
  --accent-700: #c85c0c;
  --accent-dark: #c85c0c;
  --accent-soft: #fff4ec;
  --accent-2: #45acab;
  --ring: 0 0 0 3px rgba(236, 115, 22, 0.22);
  /* Softer, less-saturated orange for checked checkboxes so they read as a
     calm accent rather than a vivid orange block. */
  --checkbox-accent: #d98a4e;
}

/* The favicon theme's dark mode keeps the favicon's deep navy chrome and
   lifts the orange/teal so they stay legible on dark surfaces. */
[data-color-theme="favicon"][data-theme="dark"] {
  --accent: #f08a3c;
  --accent-600: #f08a3c;
  --accent-700: #f6a866;
  --accent-dark: #f6a866;
  --accent-50: rgba(236, 115, 22, 0.16);
  --accent-100: #4a2a12;
  --accent-soft: rgba(236, 115, 22, 0.16);
  --accent-2: #45acab;
  --ring: 0 0 0 3px rgba(240, 138, 60, 0.28);
  /* Muted orange for checked checkboxes on dark surfaces. */
  --checkbox-accent: #c47a45;
}

/* The favicon theme's chrome mirrors the favicon artwork: the deep navy
   background with the teal used for the secondary brand accent. */
[data-color-theme="favicon"] .topbar {
  background: linear-gradient(90deg, #1e1f3d, #2a2b55);
}
[data-color-theme="favicon"] .topbar .brand-tld { color: #45acab; }
[data-color-theme="favicon"] .topbar-signup {
  background: linear-gradient(180deg, #f08a3c, #ec7316);
}
[data-color-theme="favicon"] .topbar-signup:hover {
  background: linear-gradient(180deg, #f59a52, #f07f28);
}

[data-theme="dark"] body {
  background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%) fixed;
}

/* The favicon theme uses the favicon's own navy for the dark background. */
[data-color-theme="favicon"][data-theme="dark"] body {
  background: linear-gradient(180deg, #1e1f3d 0%, #2a2b55 100%) fixed;
}

[data-theme="dark"] #sidebar,
[data-theme="dark"] .dropdown,
[data-theme="dark"] .site-footer {
  background: #111827;
}

[data-theme="dark"] #sidebar button:hover {
  background: #1f2937;
  color: var(--text);
}

[data-theme="dark"] #sidebar .nav-group.title-group .nav-group-head:hover .nav-title,
[data-theme="dark"] #sidebar .nav-group.title-group .nav-group-head:hover .nav-toggle {
  background: #1f2937;
  color: var(--text);
}

[data-theme="dark"] #sidebar button.active {
  background: var(--accent-soft);
  color: var(--accent-700);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35);
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .table tfoot th,
[data-theme="dark"] .table tfoot td,
[data-theme="dark"] .register-scroll thead th {
  background: #1f2937;
  color: var(--muted);
}

[data-theme="dark"] .table tbody tr:nth-child(even) { background: rgba(148, 163, 184, 0.06); }
[data-theme="dark"] .table tbody tr:hover { background: var(--accent-soft); }

[data-theme="dark"] .panel > .table,
[data-theme="dark"] #report-out .table,
[data-theme="dark"] .table-card .table { background: #111827; }

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #1f2937;
  color: var(--text);
  border-color: var(--border-strong);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #64748b; }

[data-theme="dark"] .checkbox-row input[type="checkbox"]:not(:checked) {
  background: #0f172a;
  border-color: #64748b;
}

[data-theme="dark"] button.secondary {
  background: #1f2937;
  color: var(--text-soft);
  border-color: var(--border-strong);
}
[data-theme="dark"] button.secondary:hover { background: #273449; color: var(--accent-700); }
[data-theme="dark"] button.secondary:active { background: #273449; }

[data-theme="dark"] button.btn-add {
  background: var(--accent-50);
  color: var(--accent-700);
  border-color: rgba(96, 165, 250, 0.6);
}
[data-theme="dark"] button.btn-add:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

[data-theme="dark"] .card { background: linear-gradient(180deg, #1f2937, #111827); }

[data-theme="dark"] .badge-gray { background: #1f2937; color: #cbd5e1; border-color: #374151; }
[data-theme="dark"] .badge-green { color: #4ade80; border-color: rgba(22, 163, 74, 0.4); }
[data-theme="dark"] .badge-amber { color: #fbbf24; border-color: rgba(217, 119, 6, 0.4); }
[data-theme="dark"] .badge-red { color: #f87171; border-color: rgba(220, 38, 38, 0.4); }
[data-theme="dark"] .badge-blue { color: #93c5fd; border-color: rgba(59, 130, 246, 0.4); }

[data-theme="dark"] .balanced { color: #4ade80; }
[data-theme="dark"] .money-pos { color: #4ade80; }
[data-theme="dark"] .money-neg { color: #f87171; }

[data-theme="dark"] .inv-doc { background: #111827; }
[data-theme="dark"] .inv-title { color: var(--text); }
[data-theme="dark"] .invoice-preview { background: transparent; }

[data-theme="dark"] .error { border-color: rgba(248, 113, 113, 0.4); }
[data-theme="dark"] .donut-total { fill: var(--text); }

/* ---------------------------------------------------------- responsive */

.menu-toggle { display: none; }

@media (max-width: 768px) {
  /* Contain any horizontal overflow so the sticky topbar (which is sized to
     the viewport) always stays aligned with the page content. Without this a
     single wide child (e.g. a min-width table) makes the whole document wider
     than the screen and the topbar band appears to end short of the content. */
  html, body { overflow-x: hidden; max-width: 100%; }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.6rem;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
  }

  /* Compact, balanced topbar. On phones the bar carries a lot of controls
     (menu, brand, referral, business menu, theme, language, auth links), so we
     shrink the vertical rhythm and the control sizes to keep it a single tidy
     row instead of an oversized band that dwarfs the page below it. */
  .topbar {
    padding: 0.4rem 0.7rem;
    gap: 0.4rem;
    min-height: 0;
    flex-wrap: nowrap;
    /* Keep the bar within the viewport. Do NOT use `overflow: hidden` here:
       the business dropdown is absolutely positioned below the bar and would
       be clipped (invisible and unclickable) on phones. The children are made
       shrinkable below, and `html, body { overflow-x: hidden }` contains any
       residual overflow, so the dark band still spans the full width. */
    max-width: 100%;
  }
  .topbar .brand { font-size: 1.15rem; }
  .topbar .brand-logo { width: 26px; height: 26px; border-radius: 6px; }
  .topbar .brand-link { gap: 0.4rem; min-width: 0; flex-shrink: 1; }
  /* On phones/tablets the referral action lives in the sidebar, not the topbar,
     so the top row stays uncluttered. */
  .topbar .topbar-referral { display: none !important; }
  .topbar .brand {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The global 44px touch-target rule inflates the round/pill controls and
     makes the bar tall. Keep a comfortable 38px target here so the bar stays
     compact while remaining easy to tap. */
  .topbar .theme-toggle,
  .topbar .menu-toggle {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }
  .topbar .menu-toggle { padding: 0; font-size: 1.1rem; }

  /* Keep the user/business menu compact so it never overflows the topbar.
     The trigger is the only flexible item on the right, so it absorbs the
     remaining space and ellipsizes a long business name instead of pushing
     the theme/language controls off-screen. */
  #topbar-user { gap: 0.3rem; min-width: 0; flex-shrink: 1; margin-left: 0; }
  .business-menu { min-width: 0; flex-shrink: 1; }
  .business-trigger {
    max-width: 6.5rem;
    min-width: 0;
    min-height: 38px;
    padding: 0.3rem 0.5rem;
    font-size: 0.82rem;
  }
  .business-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  /* The theme toggle and language select must never be overlapped by the
     business trigger, so keep them at their natural size. */
  .topbar .theme-toggle { flex: 0 0 auto; }
  .lang-select {
    max-width: 4.25rem;
    height: 38px;
    padding: 0 0.2rem;
    font-size: 0.75rem;
    flex: 0 0 auto;
  }
  /* Collapse the two auth links into a single icon dropdown so the wordmark
     keeps its full size. The plain links are hidden; the dropdown wrapper is
     shown for guests only (the `data-auth="in"` rule above hides it when
     signed in). */
  .topbar > .topbar-signin,
  .topbar > .topbar-signup { display: none; }
  html[data-auth="out"] .topbar-auth { display: block; }

  .layout { display: block; min-height: 0; }

  #sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -15rem;
    z-index: 80;
    width: 15rem;
    max-width: 85vw;
    flex: none;
    overflow-y: auto;
    background: var(--panel);
    box-shadow: var(--shadow-lg);
    transition: left 0.2s ease;
  }
  #sidebar.open { left: 0; }

  /* Defensive: guests have no app sidebar, so never let it slide in on the
     landing page even if the drawer class is toggled. */
  html[data-auth="out"] #sidebar,
  html[data-auth="out"] #sidebar.open { display: none; }

  /* Trim the outer gutter so the page content reads at full width and no
     longer looks shrunken next to the topbar. The landing sections manage
     their own inner padding. */
  #main { padding: 0.6rem 0.7rem 1rem; overflow: visible; }

  /* Full-bleed the landing hero on phones/tablets: cancel the #main gutter so
     the hero band spans the viewport instead of sitting in a narrow column. */
  .landing-hero { margin: 0 -0.7rem 0; }

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

  /* Toolbars: let buttons wrap and stretch to full width for easy tapping.
     `min-width: 0` lets a long label shrink instead of forcing the row wider
     than the viewport (which would push the whole page into horizontal
     scroll and misalign the sticky topbar). */
  .toolbar { gap: 0.5rem; }
  .toolbar > button { flex: 1 1 auto; min-width: 0; }
  .toolbar > button.small { flex: 0 0 auto; }

  /* Panels: reduce padding so content fits the narrow viewport. */
  .panel { padding: 1rem 0.9rem; overflow-x: hidden; }

  /* ------------------------------------------------- responsive tables ----
     On phones, wide data tables are reflowed into stacked "cards": each row
     becomes a block and every cell is prefixed with its column header label
     (injected as a `data-label` attribute by app.js). This removes the need
     to scroll horizontally to read a row. */
  .table { min-width: 0; }
  .table thead { display: none; }
  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }
  .table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.7rem;
    padding: 0.35rem 0.6rem;
    background: var(--panel);
    box-shadow: var(--shadow-xs);
  }
  .table tbody tr:nth-child(even) { background: var(--panel); }
  .table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.15rem;
    border-bottom: 1px dashed var(--border);
    text-align: right;
  }
  .table td:last-child { border-bottom: 0; }
  .table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-align: left;
  }
  /* Cells without a label (e.g. checkbox/action columns) stay left-aligned. */
  .table td:not([data-label]) { justify-content: flex-start; text-align: left; }
  .table td.num { justify-content: space-between; }

  /* Admin Users cards: the identity cell reads as a header, and the action
     buttons stack full-width for comfortable tapping. */
  .admin-users-table td { text-align: left; }
  .admin-users-table td[data-label="User"] { display: block; }
  .admin-users-table td[data-label="User"]::before { content: none; }
  .admin-users-table .user-email { font-size: 1rem; }
  .admin-users-table .plan-features { min-width: 0; }
  .admin-users-table .features { min-width: 0; }
  .admin-users-table .action-group { flex-direction: column; align-items: stretch; }
  .admin-users-table .action-group > button,
  .admin-users-table .action-group > select { width: 100%; max-width: none; }

  /* The Transactions register becomes a card stack too. Each transaction is a
     card with a prominent header (date + amount) and labeled detail rows for
     description, account, and category. Inline editing controls (sl-select,
     inputs) are full-width form fields and work naturally in this layout. */
  .register-scroll {
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .register-scroll .table { min-width: 0; }
  .register-scroll .table thead { display: none; }
  .register-scroll .table,
  .register-scroll .table tbody,
  .register-scroll .table tr,
  .register-scroll .table td {
    display: block;
    width: 100%;
  }
  .register-scroll .table tr {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.7rem;
    padding: 0.6rem 0.7rem;
    background: var(--panel);
    box-shadow: var(--shadow-xs);
  }
  .register-scroll .table tbody tr:nth-child(even) { background: var(--panel); }
  .register-scroll .table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.15rem;
    border-bottom: 1px dashed var(--border);
    text-align: right;
  }
  .register-scroll .table td:last-child { border-bottom: 0; }
  .register-scroll .table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-align: left;
  }
  .register-scroll .table td:not([data-label]) { justify-content: flex-start; text-align: left; }
  .register-scroll .table td.num { justify-content: space-between; }

  /* Checkbox cell: compact, top-left of the card. */
  .register-scroll .table td.check {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    width: auto;
    padding: 0;
    border: 0;
  }
  .register-scroll .table td.check input { margin: 0; }

  /* Actions cell: keep it in normal flow at the bottom of the card so it can
     never overlap the Date or any other field. Hide its "ACTIONS" label since
     the button is self-explanatory. */
  .register-scroll .table td:last-child {
    position: static;
    width: 100%;
    justify-content: flex-end;
    padding-top: 0.5rem;
    border: 0;
  }
  .register-scroll .table td:last-child::before { content: none; }

  /* Date cell: clear the checkbox on the left and keep the label + value
     grouped on the left. */
  .register-scroll .table td[data-label="Date"] {
    padding-left: 2.2rem;
    justify-content: flex-start;
    gap: 0.5rem;
    font-weight: 600;
  }

  /* Amount cell: emphasize the value. */
  .register-scroll .table td[data-label="Amount"] {
    font-weight: 700;
    font-size: 1.05rem;
  }

  /* Inline editing rows: stack the form fields full-width. */
  .register-scroll .table tr.row-editing td {
    display: block;
    text-align: left;
    padding: 0.35rem 0;
  }
  .register-scroll .table tr.row-editing td::before {
    display: block;
    margin-bottom: 0.2rem;
  }
  .register-scroll .table tr.row-editing td.num input { width: 100%; }
  .register-scroll .table tr.row-editing td:last-child {
    position: static;
    width: 100%;
    display: flex;
    gap: 0.5rem;
  }
  .register-scroll .table tr.row-editing td:last-child button { flex: 1; }

  /* Invoice line-item editor and other `.table-wrap` tables keep horizontal
     scroll (they contain form inputs that must stay side-by-side). */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap .table { min-width: 40rem; }
  .table-wrap .table thead { display: table-header-group; }
  .table-wrap .table,
  .table-wrap .table tbody,
  .table-wrap .table tr,
  .table-wrap .table td {
    display: revert;
    width: auto;
  }
  .table-wrap .table tr {
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
  .table-wrap .table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }
  .table-wrap .table td::before { content: none; }
}

/* ------------------------------------------------- button accessibility */

/* Minimum 44x44px touch target for all interactive controls. */
button { min-height: 44px; min-width: 44px; }
#sidebar .nav-group summary { min-height: 44px; }

/* Disabled controls: clear affordance, no hover lift or brightness. */
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------- micro-elastic pills */

button.primary,
button.secondary,
button.danger,
button.btn-add,
button.primary.small,
button.secondary.small,
button.danger.small,
button.btn-add.small,
.theme-toggle,
.menu-toggle,
.business-trigger {
  border-radius: 999px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease,
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

button.primary:hover,
button.secondary:hover,
button.danger:hover,
button.btn-add:hover,
.theme-toggle:hover,
.menu-toggle:hover,
.business-trigger:hover {
  transform: translateY(-1px) scale(1.04);
}

button.primary:active,
button.secondary:active,
button.danger:active,
button.btn-add:active,
.theme-toggle:active,
.menu-toggle:active,
.business-trigger:active {
  transform: translateY(0) scale(0.95);
}

/* ------------------------------------------------------ solid CTA buttons */

button.btn-add {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
button.btn-add:hover {
  background: linear-gradient(180deg, #60a5fa, #3b82f6);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}

[data-theme="dark"] button.btn-add {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff;
  border-color: transparent;
}
[data-theme="dark"] button.btn-add:hover {
  background: linear-gradient(180deg, #60a5fa, #3b82f6);
  color: #fff;
}

/* ============================================================================
   Marketing landing page
   ========================================================================== */

.landing { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }

/* --- hero --- */
.landing-hero {
  text-align: center;
  padding: 4.5rem 1.75rem 3.5rem;
  margin: 0 -1.25rem 0;
  background:
    radial-gradient(rgba(37, 99, 235, 0.07) 1px, transparent 1px),
    radial-gradient(1100px 480px at 18% -10%, rgba(96, 165, 250, 0.16), transparent 58%),
    radial-gradient(900px 460px at 82% -12%, rgba(129, 140, 248, 0.14), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  background-size: 26px 26px, auto, auto, auto;
  border-bottom: 1px solid var(--border);
}
.landing-hero h1 {
  font-size: clamp(2.05rem, 4.6vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 1rem auto 1rem;
  font-weight: 800;
  max-width: 20ch;
}
.landing-sub {
  max-width: 42rem;
  margin: 0 auto 1.7rem;
  font-size: 1.13rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.landing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.landing-badge-premium {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: #fde68a;
}
/* Larger badge for the Cam2Ledger panel heading. */
.landing-badge-xl {
  padding: 0.5rem 1.3rem;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.landing-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.8rem; }
.landing-note { margin-top: 1rem; font-size: 0.84rem; color: var(--muted); }

/* --- trust strip --- */
.landing-trust {
  text-align: center;
  padding: 2rem 1rem 0.4rem;
}
.landing-trust-title {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--muted);
}
.landing-trust-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--text-soft);
}
.landing-trust-items span::before {
  content: "✓";
  color: var(--success);
  font-weight: 800;
  margin-right: 0.4rem;
}

/* --- freemium value band (Wave-style) --- */
.landing-valueband {
  margin: 1.6rem auto 0;
  max-width: 1120px;
  padding: 0 1.25rem;
}
.landing-valueband-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: var(--shadow-sm);
}
.landing-valueband-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
}
.landing-valueband-num {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.landing-valueband-label {
  font-size: 0.9rem;
  color: var(--text-soft);
}
@media (max-width: 720px) {
  .landing-valueband-inner { grid-template-columns: 1fr; gap: 1.1rem; }
}
[data-theme="dark"] .landing-valueband-inner {
  background: linear-gradient(180deg, #111827, #0b1220);
  border-color: #1f2937;
}
[data-theme="dark"] .landing-valueband-label { color: #94a3b8; }

/* --- product mockups (hand-built CSS screens, no stock/AI imagery) --- */
.landing-hero-visual {
  max-width: 880px;
  margin: 2.6rem auto 0;
  position: relative;
}
.landing-hero-visual::after {
  content: "";
  position: absolute;
  inset: 10% 8% -8%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(59, 130, 246, 0.22), transparent 70%);
  filter: blur(26px);
  z-index: 0;
}
.mock-window {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-align: left;
}
.mock-window-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}
.mock-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.mock-dot.r { background: #fda4af; }
.mock-dot.y { background: #fcd34d; }
.mock-dot.g { background: #86efac; }
.mock-url {
  margin-left: 0.6rem;
  flex: 1;
  max-width: 260px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.18rem 0.7rem;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
.mock-body { display: flex; min-height: 250px; }
.mock-sidebar {
  width: 150px;
  flex: 0 0 auto;
  background: #f8fafc;
  border-right: 1px solid var(--border);
  padding: 0.8rem 0.6rem;
}
.mock-sidebar .mock-nav {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.55rem;
  border-radius: 7px;
  font-size: 0.72rem;
  color: var(--text-soft);
}
.mock-sidebar .mock-nav.on { background: #e0eaff; color: #1d4ed8; font-weight: 650; }
.mock-nav .mock-ico { width: 12px; height: 12px; border-radius: 3px; background: currentColor; opacity: 0.55; flex: 0 0 auto; }
.mock-main { flex: 1; padding: 1rem 1.1rem; min-width: 0; }
.mock-kicker { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.mock-h { font-size: 0.95rem; font-weight: 750; margin: 0.15rem 0 0.8rem; }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.9rem; }
.mock-kpi { border: 1px solid var(--border); border-radius: 9px; padding: 0.5rem 0.6rem; }
.mock-kpi-label { font-size: 0.6rem; color: var(--muted); }
.mock-kpi-value { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em; }
.mock-kpi-value.up { color: #16a34a; }
.mock-kpi-value.down { color: #dc2626; }
.mock-panel { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.mock-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
  background: #fbfdff;
}
.mock-chart { display: flex; align-items: flex-end; gap: 0.4rem; height: 84px; padding: 0.7rem 0.7rem 0.5rem; }
.mock-bar { flex: 1; border-radius: 4px 4px 0 0; background: #dbeafe; min-height: 8px; }
.mock-bar.hi { background: #2563eb; }
.mock-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
}
.mock-row:first-child { border-top: 0; }
.mock-row .mock-name { flex: 1; color: var(--text-soft); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-row .mock-amt { font-weight: 700; flex: 0 0 auto; }
.mock-row .mock-amt.pos { color: #16a34a; }
.mock-row .mock-amt.neg { color: #334155; }
.mock-chip {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  flex: 0 0 auto;
  white-space: nowrap;
}
.mock-chip.green { background: #f0fdf4; color: #16a34a; }
.mock-chip.amber { background: #fffbeb; color: #b45309; }
.mock-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 800;
  color: #fff;
  background: #2563eb;
  flex: 0 0 auto;
}
.mock-avatar.green { background: #16a34a; }
.mock-avatar.violet { background: #7c3aed; }
.mock-avatar.amber { background: #d97706; }
.mock-line { height: 8px; border-radius: 4px; background: #eef2f7; }
.mock-line.dark { background: #e2e8f0; }

/* document-style mock (invoice / report) */
.mock-doc {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 1.3rem 1.4rem;
  text-align: left;
}
.mock-doc-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.1rem; }
.mock-doc-logo { font-weight: 800; letter-spacing: -0.02em; color: var(--accent); font-size: 0.95rem; }
.mock-doc-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 0.2rem; }
.mock-doc-sub { font-size: 0.68rem; color: var(--muted); line-height: 1.5; }
.mock-doc-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.1rem; font-size: 0.72rem; }
.mock-doc-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.mock-doc-table td { padding: 0.45rem 0; border-bottom: 1px solid var(--border); color: var(--text-soft); }
.mock-doc-table .right { text-align: right; }
.mock-doc-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 0.8rem; }
.mock-doc-total .lbl { font-size: 0.72rem; color: var(--muted); }
.mock-doc-total .val { font-size: 1.25rem; font-weight: 800; }
.mock-pay {
  display: inline-flex;
  margin-top: 1rem;
  background: #2563eb;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.55rem 1.2rem;
  border-radius: 8px;
}
@media (max-width: 600px) {
  .mock-sidebar { display: none; }
  .mock-body { min-height: 210px; }
}

/* --- anchor-based CTA buttons (server-rendered landing) --- */
.landing a.primary,
.landing a.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 999px;
  padding: 0.62rem 1.25rem;
  font-size: 0.94rem;
  font-weight: 650;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s,
              border-color 0.15s, color 0.15s;
}
.landing a.primary {
  background: var(--accent-grad-strong);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.landing a.primary:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -6px rgba(37, 99, 235, 0.6);
  color: #fff;
}
.landing a.secondary {
  background: #fff;
  color: var(--text-soft);
  border-color: var(--border-strong);
}
.landing a.secondary:hover {
  background: #f8fafc;
  border-color: #b6c2d4;
  color: var(--accent-700);
  transform: translateY(-1px);
}
.landing a.btn-lg { padding: 0.85rem 1.9rem; font-size: 1.02rem; border-radius: 999px; font-weight: 700; }
.landing a.btn-block { width: 100%; }

/* --- CTA button sizing --- */
button.btn-lg { padding: 0.8rem 1.7rem; font-size: 1rem; border-radius: var(--radius); font-weight: 650; }
button.btn-block { width: 100%; }

/* --- sections --- */
.landing-section { text-align: center; padding: 3.6rem 0.5rem; }
.landing-section h2 {
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  letter-spacing: -0.022em;
  margin: 0 auto 0.6rem;
  font-weight: 800;
  max-width: 22ch;
}
.landing-lead { max-width: 40rem; margin: 0 auto; color: var(--muted); font-size: 1.03rem; line-height: 1.6; }

/* --- Cam2Ledger panel: subtle tinted band to set it apart --- */
.landing-cam2ledger {
  background: var(--accent-50, #eff6ff);
  border-radius: var(--radius, 14px);
  margin: 1.5rem auto;
  max-width: 1100px;
}
.landing-cam2ledger > .landing-badge { margin-bottom: 0.9rem; }
[data-theme="dark"] .landing-cam2ledger { background: rgba(59, 130, 246, 0.08); }

/* Two-column header: photo on the left, heading + lead on the right. */
.landing-cam2ledger-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 2rem;
  text-align: left;
  margin-bottom: 1.5rem;
}
.landing-cam2ledger-photo {
  width: 100%;
  height: auto;
  max-width: 520px;
  justify-self: center;
  border-radius: var(--radius, 14px);
}
.landing-cam2ledger-copy { text-align: left; }
.landing-cam2ledger-copy h2 { margin: 0 0 0.6rem; max-width: none; }
.landing-cam2ledger-copy .landing-lead { margin: 0; max-width: none; }
.landing-cam2ledger-copy .landing-cta { margin-top: 1.5rem; }
@media (max-width: 800px) {
  .landing-cam2ledger-head { grid-template-columns: 1fr; gap: 1.2rem; text-align: center; }
  .landing-cam2ledger-copy { text-align: center; }
  .landing-cam2ledger-photo { max-width: 380px; }
}

/* --- Public Cam2Ledger page (guest workspace) -----------------------------
   The guest page reuses the receipts card grid and the OCR panel, so only the
   page-level layout and the retention note need their own rules. */
body[data-page="cam2ledger"] #main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.2rem 1rem 3rem;
}
body[data-page="cam2ledger"] .landing-section { padding: 1.6rem 0; }
body[data-page="cam2ledger"] .landing-cam2ledger-copy h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.15;
}
body[data-page="cam2ledger"] .landing-cam2ledger-copy .landing-lead { margin: 0 0 1rem; }
body[data-page="cam2ledger"] .landing-cta { justify-content: flex-start; }
body[data-page="cam2ledger"] .landing-note { margin-top: 0.8rem; }
/* The retention note under the scan grid: quiet, but always visible so the
   24-hour window is never a surprise. */
.guest-retention-note {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  border-top: 1px solid var(--border, #e5e7eb);
  padding-top: 0.8rem;
}
/* The single, unmissable call to action: pressing it opens the camera. No
   sign-up is asked for before scanning. The scanner renders into the
   #guest-scanner slot inside the styled landing page, so this block only styles
   the button, the hint and the scan grid — the surrounding layout comes from
   the .landing-section rules above. */
.guest-scan-panel { text-align: center; }
.guest-scan-cta {
  display: block;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.15rem 1.5rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 0.9rem;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28);
}
.guest-scan-cta:disabled { box-shadow: none; opacity: 0.7; }
.guest-scan-hint { margin: 0.7rem auto 1.6rem; font-size: 0.9rem; }
/* The scan grid inside the slot: keep it centred and bounded like the rest of
   the landing content. */
#guest-scanner .receipt-grid { margin-top: 1.4rem; }
#guest-scanner .receipt-empty { margin-top: 1.4rem; }
@media (max-width: 800px) {
  .guest-scan-cta { font-size: 1.2rem; padding: 1rem 1.1rem; }
}
@media (max-width: 800px) {
  body[data-page="cam2ledger"] .landing-cta { justify-content: center; }
}

/* --- feature grid --- */
.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 2.2rem;
  text-align: left;
}
.landing-feature {
  position: relative;
  padding: 1.6rem 1.4rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.landing-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(59, 130, 246, 0.45);
}
.landing-feature > .landing-badge { position: absolute; top: 1rem; right: 1rem; }
.landing-feature-icon-wrap {
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-50);
  color: var(--accent);
  margin-bottom: 0.95rem;
}
.landing-feature-icon { width: 1.5rem; height: 1.5rem; }
.landing-feature h3 { margin: 0 0 0.4rem; font-size: 1.08rem; font-weight: 750; letter-spacing: -0.01em; }
.landing-feature p { margin: 0; color: var(--muted); font-size: 0.93rem; line-height: 1.55; }

/* --- pricing --- */
.landing-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: 2.2rem;
  align-items: stretch;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.landing-price-card {
  position: relative;
  text-align: left;
  padding: 2rem 1.7rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.landing-price-card.featured {
  border-color: var(--accent);
  box-shadow: 0 12px 34px -14px rgba(37, 99, 235, 0.45), 0 0 0 1px var(--accent);
}
.landing-price-card > .landing-badge { display: inline-block; margin-bottom: 0.7rem; }
.landing-price-card h3 { margin: 0 0 0.5rem; font-size: 1.22rem; font-weight: 800; letter-spacing: -0.01em; }
.landing-price {
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0.2rem 0;
}
.landing-price-period { font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-left: 0.3rem; }
.landing-price-desc { color: var(--muted); margin: 0 0 1rem; }
.landing-price-card ul { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.landing-price-card li {
  padding: 0.48rem 0 0.48rem 1.7rem;
  position: relative;
  font-size: 0.94rem;
}
.landing-price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}

/* --- sign-up plan chooser --- */
.plan-chooser .landing-pricing { margin-top: 1rem; }
.plan-option {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.plan-option:hover { border-color: var(--accent); }
.plan-option.selected {
  border-color: var(--accent);
  box-shadow: var(--shadow-md), 0 0 0 2px var(--accent);
}

/* --- how it works --- */
.landing-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 2.2rem;
  text-align: left;
}
.landing-step {
  position: relative;
  padding: 1.6rem 1.4rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.landing-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 999px;
  background: var(--accent-50);
  color: var(--accent-700);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 0.8rem;
}
.landing-step h3 { margin: 0 0 0.4rem; font-size: 1.08rem; font-weight: 750; }
.landing-step p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }

/* --- benefit rows (alternating copy / product mockup) --- */
.landing-benefits { margin-top: 2.4rem; display: flex; flex-direction: column; gap: 3rem; }
.landing-benefit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  text-align: left;
}
.landing-benefit.reverse { direction: rtl; }
.landing-benefit.reverse > * { direction: ltr; }
.landing-benefit-copy h3 { font-size: 1.55rem; font-weight: 800; margin: 0 0 0.6rem; letter-spacing: -0.02em; }
.landing-benefit-copy p { color: var(--muted); font-size: 1.02rem; line-height: 1.6; margin: 0 0 1rem; }
.landing-benefit-copy ul { list-style: none; padding: 0; margin: 0; }
.landing-benefit-copy li {
  padding: 0.4rem 0 0.4rem 1.7rem;
  position: relative;
  font-size: 0.95rem;
  color: var(--text-soft);
}
.landing-benefit-copy li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 800;
}
.landing-benefit-visual { position: relative; }
.landing-benefit-visual .mock-window,
.landing-benefit-visual .mock-doc { width: 100%; }
@media (max-width: 800px) {
  .landing-benefit { grid-template-columns: 1fr; gap: 1.4rem; }
  .landing-benefit.reverse { direction: ltr; }
}

/* --- testimonials --- */
.landing-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem;
  margin-top: 2.2rem;
  text-align: left;
}
.landing-testimonial {
  padding: 1.6rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.landing-testimonial-stars {
  color: #f59e0b;
  letter-spacing: 0.12em;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}
.landing-testimonial blockquote {
  margin: 0 0 1.1rem;
  font-size: 0.98rem;
  color: var(--text-soft);
  line-height: 1.6;
}
.landing-testimonial-person { display: flex; align-items: center; gap: 0.7rem; }
.landing-testimonial-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  flex: 0 0 auto;
}
.landing-testimonial .landing-testimonial-author { font-weight: 750; font-size: 0.92rem; }
.landing-testimonial .landing-testimonial-role { color: var(--muted); font-size: 0.82rem; }

/* --- FAQ --- */
.landing-faq { max-width: 760px; margin: 2.2rem auto 0; text-align: left; }
.landing-faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  margin-bottom: 0.7rem;
  padding: 0;
  overflow: hidden;
}
.landing-faq summary {
  cursor: pointer;
  padding: 1.05rem 1.25rem;
  font-weight: 650;
  font-size: 0.98rem;
  list-style: none;
}
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary::after { content: "+"; float: right; font-weight: 700; color: var(--accent); }
.landing-faq details[open] summary::after { content: "−"; }
.landing-faq details p {
  margin: 0;
  padding: 0 1.25rem 1.15rem;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* --- dark theme for new sections --- */
[data-theme="dark"] .landing-step,
[data-theme="dark"] .landing-testimonial,
[data-theme="dark"] .landing-faq details,
[data-theme="dark"] .mock-window,
[data-theme="dark"] .mock-doc { background: #1f2937; border-color: #374151; }
[data-theme="dark"] .mock-window-bar,
[data-theme="dark"] .mock-sidebar,
[data-theme="dark"] .mock-panel-head { background: #111827; border-color: #374151; }
[data-theme="dark"] .mock-url { background: #111827; border-color: #374151; color: #94a3b8; }
[data-theme="dark"] .mock-sidebar .mock-nav.on { background: rgba(59, 130, 246, 0.25); color: #93c5fd; }
[data-theme="dark"] .mock-line { background: #1f2937; }
[data-theme="dark"] .mock-line.dark { background: #374151; }
[data-theme="dark"] .mock-bar { background: #1e3a5f; }
[data-theme="dark"] .mock-bar.hi { background: #3b82f6; }
[data-theme="dark"] .mock-kpi,
[data-theme="dark"] .mock-panel,
[data-theme="dark"] .mock-row { border-color: #374151; }
[data-theme="dark"] .mock-row .mock-name,
[data-theme="dark"] .mock-doc-table td,
[data-theme="dark"] .mock-doc-table th { color: #94a3b8; }
[data-theme="dark"] .landing-step p,
[data-theme="dark"] .landing-testimonial blockquote,
[data-theme="dark"] .landing-faq details p,
[data-theme="dark"] .landing-benefit-copy p { color: #94a3b8; }

/* --- final CTA --- */
/* Light theme: a soft accent-tinted panel that matches the rest of the page.
   Dark theme: the original dark navy band. */
.landing-final {
  padding: 3.6rem 1.5rem;
  border-radius: 24px;
  background:
    radial-gradient(700px 320px at 50% -20%, rgba(59, 130, 246, 0.16), transparent 65%),
    radial-gradient(500px 260px at 85% 110%, rgba(129, 140, 248, 0.14), transparent 60%),
    linear-gradient(180deg, #eff6ff, #dbeafe);
  color: var(--text);
  border: 1px solid #dbeafe;
  box-shadow: 0 20px 50px -30px rgba(37, 99, 235, 0.4);
}
.landing-final h2 { color: var(--text); }
.landing-final .landing-lead { color: var(--text-soft); }
.landing-final .btn-lg { margin-top: 1.2rem; border-radius: 999px; }
[data-theme="dark"] .landing-final {
  background:
    radial-gradient(700px 320px at 50% -20%, rgba(59, 130, 246, 0.3), transparent 65%),
    radial-gradient(500px 260px at 85% 110%, rgba(129, 140, 248, 0.16), transparent 60%),
    linear-gradient(180deg, #0f172a, #1e293b);
  color: #fff;
  border-color: #1e293b;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7);
}
[data-theme="dark"] .landing-final h2 { color: #fff; }
[data-theme="dark"] .landing-final .landing-lead { color: #cbd5e1; }

/* --- auth back link --- */
#auth-back { margin-top: 0.8rem; }

/* --- responsive --- */
@media (max-width: 640px) {
  /* The landing sits inside #main, which now has a 0.7rem gutter. Pull the
     hero out to the full viewport width so it reads as a proper full-bleed
     band instead of a narrow, shrunken column. */
  .landing { padding: 0 0.9rem; }
  .landing-hero {
    margin: 0 -0.7rem 0;
    padding: 2.2rem 1.1rem 2.5rem;
  }
  .landing-cta .btn-lg { width: 100%; }
  .landing-pricing { grid-template-columns: 1fr; }
  .mock-kpis { grid-template-columns: 1fr; }
}

/* --- dark theme --- */
[data-theme="dark"] .landing-hero {
  background:
    radial-gradient(rgba(59, 130, 246, 0.10) 1px, transparent 1px),
    radial-gradient(1100px 480px at 18% -10%, rgba(59, 130, 246, 0.22), transparent 58%),
    radial-gradient(900px 460px at 82% -12%, rgba(129, 140, 248, 0.16), transparent 58%),
    linear-gradient(180deg, #111827, #0b1220);
  background-size: 26px 26px, auto, auto, auto;
  border-color: #1f2937;
}
[data-theme="dark"] .landing-sub { color: #cbd5e1; }
[data-theme="dark"] .landing-feature,
[data-theme="dark"] .landing-price-card { background: #1f2937; border-color: #374151; }
[data-theme="dark"] .landing-feature p,
[data-theme="dark"] .landing-price-desc,
[data-theme="dark"] .landing-lead { color: #94a3b8; }
[data-theme="dark"] .landing-price { color: #fff; }
[data-theme="dark"] .landing-feature-icon-wrap { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
[data-theme="dark"] .landing-step-num { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
[data-theme="dark"] .landing-badge { background: rgba(59, 130, 246, 0.18); color: #93c5fd; border-color: rgba(59, 130, 246, 0.35); }
[data-theme="dark"] .landing-badge-premium { background: rgba(217, 119, 6, 0.16); color: #fbbf24; border-color: rgba(217, 119, 6, 0.4); }
[data-theme="dark"] .landing-trust-items { color: #cbd5e1; }
[data-theme="dark"] .landing a.secondary {
  background: #1f2937;
  color: #cbd5e1;
  border-color: #374151;
}
[data-theme="dark"] .landing a.secondary:hover {
  background: #263246;
  border-color: #475569;
  color: #fff;
}
[data-theme="dark"] .mock-chip { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
[data-theme="dark"] .mock-chip.green { background: rgba(22, 163, 74, 0.18); color: #86efac; }
[data-theme="dark"] .mock-chip.amber { background: rgba(217, 119, 6, 0.18); color: #fbbf24; }
[data-theme="dark"] .mock-row .mock-amt.neg { color: #cbd5e1; }
[data-theme="dark"] .landing-hero-visual::after {
  background: radial-gradient(50% 50% at 50% 50%, rgba(59, 130, 246, 0.14), transparent 70%);
}

/* --- landing footer --- */
.landing-footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.1rem;
  padding: 1rem 0 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.landing-footer a { color: var(--muted); text-decoration: none; }
.landing-footer a:hover { color: var(--accent); }
.landing-footer .link { font-size: 0.85rem; padding: 0; }

/* --- polish: balanced headings --- */
.landing-hero h1,
.landing-section h2,
.landing-cam2ledger-copy h2,
.landing-cam2ledger-copy h1 {
  text-wrap: balance;
}

/* --- polish: CSS-only entrance animation (plays once on load) --- */
@keyframes landing-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.landing-hero > * {
  animation: landing-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.landing-hero .landing-badge { animation-delay: 0.05s; }
.landing-hero h1            { animation-delay: 0.12s; }
.landing-hero .landing-sub  { animation-delay: 0.2s; }
.landing-hero .landing-cta  { animation-delay: 0.28s; }
.landing-hero .landing-note { animation-delay: 0.34s; }
.landing-hero-visual        { animation-delay: 0.42s; }

/* Gentle float for the hero product mockup. */
@keyframes landing-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.landing-hero-visual .mock-window {
  animation: landing-float 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero > *,
  .landing-hero-visual .mock-window {
    animation: none;
  }
}

/* --- polish: feature-card hover accent bar --- */
.landing-feature::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.4rem;
  right: 1.4rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent-grad);
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.landing-feature:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

/* --- polish: featured pricing card gradient overlay --- */
.landing-price-card.featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.07), transparent 42%);
  pointer-events: none;
}

/* --- polish: Cam2Ledger page --- */
body[data-page="cam2ledger"] .landing-cam2ledger-copy h1 {
  letter-spacing: -0.025em;
}
button.guest-scan-cta {
  background: var(--accent-grad-strong);
  box-shadow: 0 8px 22px -8px rgba(37, 99, 235, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
button.guest-scan-cta:hover {
  box-shadow: 0 12px 28px -8px rgba(37, 99, 235, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ---------------------------------------------------- dashboard greeting */
.dashboard-greeting {
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0.2rem 0 1.1rem;
  color: var(--text);
}

/* --- auth legal --- */
.auth-legal { margin-top: 0.9rem; font-size: 0.78rem; color: var(--muted); text-align: center; }
.auth-legal a { color: var(--accent); }

/* --- consent banner --- */
.consent-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 0.88rem;
}
.consent-banner p { margin: 0; max-width: 44rem; }
.consent-banner a { color: var(--accent); }
.consent-actions { display: flex; gap: 0.5rem; }
@media (max-width: 640px) {
  .consent-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .consent-actions { justify-content: center; }
}
[data-theme="dark"] .consent-banner { background: #1f2937; border-color: #374151; }
.badge-ccy {
  display: inline-block;
  padding: 0.02rem 0.35rem;
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
  border-radius: 999px;
}
.tree-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

/* ============================================================================
   AI assistant chat widget
   ========================================================================== */

#chat-widget {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

/* The `hidden` attribute is overridden by the `display: flex` rules above, so
   re-assert `display: none` whenever the attribute is present. This is what
   makes the panel start minimized and allows it to be collapsed again. */
#chat-widget[hidden],
.chat-panel[hidden],
.chat-toggle[hidden] {
  display: none;
}

.chat-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: transform 0.15s ease, background 0.15s ease;
}
.chat-toggle:hover { background: var(--accent-700); transform: translateY(-2px); }
.chat-toggle:active { transform: translateY(0); }

.chat-panel {
  display: flex;
  flex-direction: column;
  width: min(26rem, calc(100vw - 2rem));
  height: min(34rem, calc(100vh - 6rem));
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  user-select: none;
}
.chat-title { font-weight: 600; font-size: 1.1rem; pointer-events: none; }
.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.chat-minimize,
.chat-maximize {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius-xs);
}
.chat-minimize:hover,
.chat-maximize:hover { background: rgba(255, 255, 255, 0.2); }

/* Maximized state: fill most of the viewport. */
.chat-panel.maximized {
  width: min(72rem, calc(100vw - 2rem));
  height: min(56rem, calc(100vh - 3rem));
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.chat-msg {
  max-width: 85%;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  font-size: 1rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
/* Assistant messages render Markdown, so use normal whitespace + <br>. */
.chat-msg.assistant {
  white-space: normal;
}
.chat-msg.assistant p { margin: 0 0 0.4rem; }
.chat-msg.assistant ul,
.chat-msg.assistant ol { margin: 0.2rem 0 0.4rem; padding-left: 1.25rem; }
.chat-msg.assistant li { margin: 0.15rem 0; }
.chat-msg.assistant code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.06);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}
.chat-msg.assistant pre {
  background: rgba(0, 0, 0, 0.06);
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0.3rem 0;
}
.chat-msg.assistant pre code { background: transparent; padding: 0; }
.chat-msg.assistant strong { font-weight: 600; }
.chat-msg.assistant em { font-style: italic; }
.chat-msg.user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg.assistant {
  align-self: flex-start;
  background: var(--accent-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-msg.error {
  align-self: flex-start;
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger);
}
.chat-msg.typing { color: var(--muted); font-style: italic; }

.chat-mode-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem 0;
}
.chat-mode-label {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}
.chat-mode-btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chat-mode-btn:hover { border-color: var(--accent); color: var(--text); }
.chat-mode-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.chat-mode-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
}
.chat-form input {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
}
.chat-send {
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  padding: 0 1rem;
  font-weight: 600;
  cursor: pointer;
}
.chat-send:hover { background: var(--accent-700); }
.chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

[data-theme="dark"] .chat-panel { background: #111827; border-color: #374151; }
[data-theme="dark"] .chat-msg.assistant { background: #1f2937; color: #e5e7eb; border-color: #374151; }
[data-theme="dark"] .chat-form { border-color: #374151; }

/* Admin impersonation banner */
.impersonation-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  background: #fef3c7;
  border-bottom: 1px solid #f59e0b;
  color: #78350f;
  font-size: 0.9rem;
}
.impersonation-banner .muted { color: #92400e; }
.impersonation-banner .checkbox-row { display: inline-flex; margin: 0; }
[data-theme="dark"] .impersonation-banner { background: #78350f; border-color: #f59e0b; color: #fef3c7; }
[data-theme="dark"] .impersonation-banner .muted { color: #fde68a; }

/* Read-only impersonation dims write-oriented buttons inside the view */
.readonly-mode #main button.primary,
.readonly-mode #main button.danger,
.readonly-mode #main input[type="submit"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Admin website-traffic breakdown cards (countries, devices, browsers, ...).
   Each card is a button: it shows the top 5 items and expands to the full
   panel width (revealing every item) when clicked. */
.traffic-breakdowns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1.25rem;
}
.traffic-breakdown {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  background: #f8fafc;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.traffic-breakdown:hover { border-color: var(--accent, #2563eb); }
.traffic-breakdown:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}
/* Expanded: span the whole grid row and grow to fit every item. */
.traffic-breakdown.expanded {
  grid-column: 1 / -1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.traffic-breakdown h3 {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.traffic-breakdown ul { list-style: none; margin: 0; padding: 0; }
.traffic-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.15rem 0;
  font-size: 0.85rem;
}
.traffic-breakdown .traffic-more { font-style: italic; }
[data-theme="dark"] .traffic-breakdown { background: #111827; }

/* Scrollable visits box: about 8 rows visible, the rest scrolls. Mirrors the
   register/transactions scroll pattern so a busy section never pushes the
   following panels off the page. */
.traffic-scroll {
  max-height: 18rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.traffic-scroll .table { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.traffic-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
}
[data-theme="dark"] .traffic-scroll thead th { background: #1f2937; }
.traffic-caption { margin: 0 0 0.5rem; font-size: 0.85rem; }

/* ------------------------------------------------- support tickets */
.ticket-counts { margin: 0.25rem 0 0.75rem; font-size: 0.9rem; }
/* Messaging & Support tabs */
#messaging-tabs { margin-bottom: 1rem; }
#messaging-tabs .tab {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-soft);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
#messaging-tabs .tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
#messaging-body textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 0.92rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  resize: vertical;
}
/* Individual-user picker (Compose tab). */
.user-picker {
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
  margin-top: 0.35rem;
  background: var(--panel);
}
.user-pick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.25rem;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 0.9rem;
}
.user-pick:hover { background: var(--accent-50); }
/* The global `input { width: 100% }` rule would stretch the checkbox into a
   full-width bar; keep it at its natural size. */
.user-pick input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
}
.user-pick span { min-width: 0; }
#user-picker-search {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.9rem;
}
/* The picker wrapper is a grid child; keep its contents stacked. */
#user-picker-wrap { display: block; }
#user-picker-wrap > label { display: block; margin-bottom: 0.25rem; }
/* Signature manager (Compose tab). */
.signature-manager { margin-top: 1rem; }
.signature-manager summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.signature-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: start;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.signature-row .sig-name { grid-column: 1; }
.signature-row .sig-html { grid-column: 1 / -1; }
.signature-row button { grid-column: 2; grid-row: 1; }
.signature-row .sig-name,
.signature-row .sig-html {
  width: 100%;
  font-family: var(--font);
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.signature-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.ticket-pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.ticket-status-open { background: var(--accent-50); color: var(--accent-700); }
.ticket-status-pending { background: var(--warning-soft); color: var(--warning); }
.ticket-status-resolved { background: var(--success-soft); color: var(--success); }
.ticket-status-closed { background: var(--bg); color: var(--muted); }
.ticket-priority-low { background: var(--bg); color: var(--muted); }
.ticket-priority-normal { background: var(--accent-50); color: var(--accent-700); }
.ticket-priority-high { background: var(--warning-soft); color: var(--warning); }
.ticket-priority-urgent { background: var(--danger-soft); color: var(--danger); }

.ticket-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}
.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.ticket-msg {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  background: var(--panel);
}
.ticket-msg-admin { background: var(--accent-50); border-color: var(--accent-100); }
.ticket-msg-head { font-size: 0.82rem; margin-bottom: 0.25rem; }
.ticket-msg-body { font-size: 0.92rem; line-height: 1.5; word-break: break-word; }
.ticket-reply textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 0.92rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  resize: vertical;
}
.ticket-reply-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
[data-theme="dark"] .ticket-msg { background: #111827; }
[data-theme="dark"] .ticket-msg-admin { background: rgba(59, 130, 246, 0.12); }

/* Engagement + new-vs-returning summary line. */
.traffic-engagement { margin: 0.25rem 0 0.75rem; font-size: 0.9rem; }

/* Daily trend chart (hand-built inline SVG, theme-aware). */
.trend-chart { margin: 0.5rem 0 1rem; }
.trend-chart svg {
  width: 100%;
  height: 160px;
  display: block;
  overflow: visible;
}
.trend-bar { fill: var(--accent, #2563eb); opacity: 0.55; }
.trend-bar:hover { opacity: 0.85; }
.trend-line {
  fill: none;
  stroke: #16a34a;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.trend-axis { stroke: var(--border-strong, #cbd5e1); stroke-width: 1; }
.trend-label { fill: var(--muted, #64748b); font-size: 10px; }
.trend-legend { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--muted); }
.trend-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 0.25rem;
}
.trend-key-bar { background: var(--accent, #2563eb); opacity: 0.55; }
.trend-key-line { background: #16a34a; }

/* Conversion funnel: visitors -> sign-ups -> subscriptions. */
.traffic-funnel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}
.funnel-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 6rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #f8fafc;
}
[data-theme="dark"] .funnel-step { background: #111827; }
.funnel-value { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
.funnel-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.funnel-arrow { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.traffic-retention { margin-top: 0.5rem; }

/* Website-traffic filter bar */
.traffic-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
}
.traffic-filter label { display: flex; align-items: center; gap: 0.4rem; }
.traffic-filter select,
.traffic-filter input {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--panel);
  color: var(--text);
}
.traffic-filter input { min-width: 16rem; flex: 1 1 16rem; }

/* ------------------------------------------------------------- receipts */

.receipt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.receipt-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--panel);
}
.receipt-thumb {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-sm, 6px);
  background: var(--bg, #f3f4f6);
}
.receipt-thumb-doc {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--muted, #6b7280);
}
.receipt-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.receipt-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.receipt-status { font-size: 0.85rem; color: var(--muted, #6b7280); }
.receipt-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* ------------------------------------------------------------- receipts */

.receipt-card { position: relative; }
.receipt-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--accent, #2563eb);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.receipt-empty {
  padding: 2rem 1rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm, 8px);
}
.receipt-empty p { margin: 0.25rem 0; }
.receipt-card.busy { opacity: 0.55; pointer-events: none; }
.receipt-status.attached { color: var(--accent, #2563eb); font-weight: 600; }
/* Cam2Ledger: the receipt linked to a transaction, shown inside the
   transaction editor's Attachments panel. */
.receipt-linked-title { margin: 0 0 0.5rem; font-size: 1rem; }
#journal-receipts-panel { margin-bottom: 1rem; }
#journal-receipts .receipt-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.receipt-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#receipt-search { min-width: 12rem; flex: 1 1 12rem; }
.spinner {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -0.1em;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------- receipt OCR */

/* Post-scan choice: preview + OCR status + the three actions. */
.receipt-action { max-width: 520px; }
.receipt-action-preview {
  display: flex;
  justify-content: center;
  max-height: 40vh;
  overflow: hidden;
  background: #000;
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 0.6rem;
}
.receipt-action-preview img { max-width: 100%; max-height: 40vh; object-fit: contain; }
.receipt-action-ocr { min-height: 1.4em; margin-bottom: 0.9rem; font-size: 0.9rem; }
/* "Use Ledgy AI to read receipts" toggle under the Cam2Ledger toolbar. */
.receipt-llm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.2rem 0 0.9rem;
  font-size: 0.9rem;
  color: var(--text-soft, #6b7280);
  cursor: pointer;
  user-select: none;
}
.receipt-llm-toggle input { width: 1.05rem; height: 1.05rem; cursor: pointer; }
.receipt-action-buttons { display: grid; gap: 0.5rem; margin-bottom: 0.6rem; }
.receipt-action-buttons button { width: 100%; }

.receipt-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.25rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
}
.receipt-chip.reading { background: rgba(148, 163, 184, 0.2); color: #94a3b8; }
.receipt-chip.review { background: rgba(250, 204, 21, 0.18); color: #eab308; }
.receipt-chip.matched { background: rgba(74, 222, 128, 0.18); color: #22c55e; }
.receipt-chip.failed { background: rgba(248, 113, 113, 0.18); color: #ef4444; }
.receipt-ocr { font-size: 0.8rem; margin-top: 0.15rem; }

.receipt-parsed {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 0.9rem;
  padding: 0.6rem 0.75rem;
  background: rgba(148, 163, 184, 0.1);
  border-radius: var(--radius-sm, 8px);
  font-size: 0.9rem;
}

/* Read-only OCR output panel (create dialog + OCR dialog). */
.ocr-panel {
  margin-bottom: 0.9rem;
  padding: 0.6rem 0.75rem;
  background: rgba(148, 163, 184, 0.1);
  border-radius: var(--radius-sm, 8px);
  font-size: 0.9rem;
}
.ocr-fields { display: grid; gap: 0.2rem; }
.ocr-row { display: flex; justify-content: space-between; gap: 0.75rem; }
.ocr-label { color: var(--muted, #6b7280); }
.ocr-value { font-weight: 600; text-align: right; }
.ocr-items { margin-top: 0.5rem; border-top: 1px solid rgba(148, 163, 184, 0.25); padding-top: 0.4rem; }
.ocr-items-title { font-weight: 600; margin-bottom: 0.25rem; }
.ocr-item { display: flex; justify-content: space-between; gap: 0.75rem; }
.ocr-item-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocr-item-amount { font-variant-numeric: tabular-nums; }
.ocr-raw { margin-top: 0.5rem; border-top: 1px solid rgba(148, 163, 184, 0.25); padding-top: 0.4rem; }
.ocr-raw summary { cursor: pointer; color: var(--muted, #6b7280); }
.ocr-raw pre {
  margin: 0.4rem 0 0;
  max-height: 30vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.8rem;
}
/* Per-field confidence badge shown next to each editable OCR field label. */
.ocr-conf {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.ocr-conf-high { background: rgba(34, 197, 94, 0.18); color: #16a34a; }
.ocr-conf-mid { background: rgba(245, 158, 11, 0.18); color: #d97706; }
.ocr-conf-low { background: rgba(239, 68, 68, 0.18); color: #dc2626; }

.receipt-ocr-name { margin-bottom: 0.5rem; }
.receipt-ocr-nomatch { margin-bottom: 0.6rem; font-size: 0.9rem; }
.receipt-match-list { display: grid; gap: 0.4rem; margin-bottom: 0.9rem; }
.receipt-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  text-align: left;
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
}
.receipt-match:hover { border-color: var(--accent, #4ade80); }
.receipt-match-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.receipt-match-text { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-match-score { font-weight: 700; color: var(--accent, #4ade80); }

/* ------------------------------------------------------- receipt review */

/* Live viewfinder: video with an overlay canvas on top, plus a hint line. */
.receipt-live { max-width: 720px; }
.receipt-live-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 70vh;
  overflow: hidden;
  background: #000;
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 0.9rem;
}
.receipt-live-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.receipt-live-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.receipt-live-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.75rem;
  text-align: center;
  color: #fff;
  font-size: 0.9rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  transition: color 0.2s ease;
}
.receipt-live-hint.found { color: #4ade80; font-weight: 600; }

.receipt-review { max-width: 640px; }
.receipt-review-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 60vh;
  overflow: hidden;
  background: #000;
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 0.9rem;
}
.receipt-review-canvas {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}