:root {
  --primary: #4f46e5;
  --primary-light: #6366f1;
  --primary-dark: #3730a3;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #0ea5e9;
  --purple: #8b5cf6;
  --bg: #f1f5f9;
  --surface: #ffffff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
}

body.dark-mode {
  --bg: #0f172a;
  --surface: #1e293b;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border-color: #334155;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  background: var(--bg);
  color: var(--text-main);
  margin: 0;
  transition: background-color .3s,color .3s;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

@keyframes slideUpSheet {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }

}

@keyframes slideUpToast {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }

}

.animate-enter {
  animation: slideUpFade .4s cubic-bezier(.16,1,.3,1) forwards;
}

@media (prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

}

#toastContainer {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.toast {
  background: var(--text-main);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
  animation: slideUpToast .3s forwards;
  text-align: center;
  max-width: 92vw;
  display: flex;
  align-items: center;
  gap: 14px;
}

.toast.toast-error {
  background: var(--danger);
  color: #fff;
}

.toast button {
  background: rgba(255,255,255,.2);
  color: inherit;
  border: none;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.app-layout {
  display: block;
}

.app-main {
  padding: 16px;
  padding-bottom: 100px;
}

.charts-row {
  display: block;
}

/* Mobile first: the sidebar does not exist below 800px. It is turned back
         on inside the min-width:800px block further down. */

.desktop-sidebar {
  display: none;
}

.view-section {
  display: none;
}

.view-section.active {
  display: block;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--surface);
  opacity: .98;
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-color);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 4px;
}

.nav-btn {
  min-width: 50px;
  flex: 0 0 auto;
  border: none;
  background: none;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: .3s;
  cursor: pointer;
}

.nav-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: .3s;
}

.nav-btn.active {
  color: var(--primary);
}

.nav-btn.active svg {
  transform: translateY(-2px);
  stroke-width: 2.5;
}

.nav-btn.btn-add {
  background: linear-gradient(135deg,var(--primary),var(--primary-light));
  color: #fff;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-20px);
  border: 4px solid var(--bg);
  box-shadow: 0 8px 20px rgba(79,70,229,.3);
  margin: 0 10px;
}

@media (min-width:800px) {
  .bottom-nav {
    display: none;
  }

  .app-layout {
    display: flex;
  }

  .desktop-sidebar {
    display: flex;
    flex-direction: column;
    width: 264px;
    background: var(--surface);
    height: 100vh;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    border-right: 1px solid var(--border-color);
    z-index: 500;
    transition: width .25s ease;
    overflow: hidden;
  }

  .sb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 72px;
    padding: 16px 16px 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
  }

  .sb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .sb-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: block;
    transition: width .25s,height .25s;
  }

  .sb-name {
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.2px;
    color: var(--primary);
    white-space: nowrap;
  }

  .sb-toggle {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: color .15s,border-color .15s,background .15s;
  }

  .sb-toggle:hover {
    color: var(--primary);
    border-color: var(--primary);
  }

  .sb-toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s;
  }

  .sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 8px 12px 14px;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
  }

  .sidebar-scroll::-webkit-scrollbar {
    width: 6px;
  }

  .sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
  }

  .sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
  }

  .nav-group+.nav-group {
    margin-top: 8px;
  }

  .nav-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 4px 8px 5px 8px;
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 8px;
    font-family: inherit;
  }

  .nav-group-head:hover {
    color: var(--text-main);
  }

  .nav-group-head svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s;
  }

  .nav-group.closed .nav-group-head svg {
    transform: rotate(-90deg);
  }

  .nav-group-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .nav-group.closed .nav-group-items {
    display: none;
  }

  .desktop-sidebar .nav-btn {
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 4px 8px;
    margin: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    text-align: left;
    transition: background .15s,color .15s;
  }

  .desktop-sidebar .nav-btn:hover {
    background: rgba(100,116,139,.08);
  }

  .desktop-sidebar .nav-btn svg {
    width: 18px;
    height: 18px;
    transform: none;
    stroke-width: 2;
  }

  .desktop-sidebar .nav-btn.active svg {
    transform: none;
    stroke-width: 2.2;
  }

  .nav-tile {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s,border-color .15s,box-shadow .15s,background .15s;
  }

  .desktop-sidebar .nav-btn:hover .nav-tile {
    color: var(--text-main);
  }

  .nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .desktop-sidebar .nav-btn.active {
    background: rgba(79,70,229,.08);
    background: color-mix(in srgb,var(--primary) 9%,transparent);
    color: var(--primary);
  }

  .desktop-sidebar .nav-btn.active .nav-tile {
    background: var(--surface);
    color: var(--primary);
    border-color: var(--primary);
    border-color: color-mix(in srgb,var(--primary) 45%,transparent);
    box-shadow: 0 0 0 3px rgba(79,70,229,.14);
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent);
  }

  .sb-foot {
    flex-shrink: 0;
    border-top: 1px solid var(--border-color);
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .sb-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(79,70,229,.25);
    box-shadow: 0 8px 18px color-mix(in srgb,var(--primary) 28%,transparent);
    transition: width .25s,filter .15s;
  }

  .sb-add:hover {
    filter: brightness(1.06);
  }

  .sb-add svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: #fff;
    stroke-width: 2.6;
    stroke-linecap: round;
  }

  .desktop-sidebar.collapsed {
    width: 76px;
  }

  .desktop-sidebar.collapsed .sb-head {
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 16px 0 14px;
  }

  .desktop-sidebar.collapsed .sb-name {
    display: none;
  }

  .desktop-sidebar.collapsed .sb-logo {
    width: 38px;
    height: 38px;
  }

  .desktop-sidebar.collapsed .sb-toggle svg {
    transform: rotate(180deg);
  }

  .desktop-sidebar.collapsed .sidebar-scroll {
    padding: 12px 4px 12px 10px;
  }

  .desktop-sidebar.collapsed .nav-group {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .desktop-sidebar.collapsed .nav-group-head {
    display: none;
  }

  .desktop-sidebar.collapsed .nav-group.closed .nav-group-items {
    display: flex;
  }

  .desktop-sidebar.collapsed .nav-group+.nav-group {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
  }

  .desktop-sidebar.collapsed .nav-group-items {
    align-items: center;
    gap: 6px;
  }

  .desktop-sidebar.collapsed .nav-btn {
    width: auto;
    padding: 3px;
    justify-content: center;
    background: none;
  }

  .desktop-sidebar.collapsed .nav-btn:hover .nav-tile {
    border-color: var(--border-color);
  }

  .desktop-sidebar.collapsed .nav-label {
    display: none;
  }

  .desktop-sidebar.collapsed .sb-foot {
    align-items: center;
    padding: 12px 0 16px;
  }

  .desktop-sidebar.collapsed .sb-add {
    width: 44px;
    height: 44px;
  }

  @media (max-height:840px) {
    .sb-head {
      min-height: 62px;
      padding: 12px 14px 12px 18px;
    }

    .sidebar-scroll {
      padding: 8px 8px 8px 12px;
    }

    .nav-group+.nav-group {
      margin-top: 5px;
    }

    .nav-group-head {
      padding: 3px 8px 3px 8px;
    }

    .desktop-sidebar .nav-btn {
      padding: 2px 8px;
    }

    .nav-tile {
      width: 32px;
      height: 32px;
    }

    .sb-foot {
      padding: 8px 14px 12px;
      gap: 6px;
    }

    .sb-add {
      height: 42px;
    }

  }

  .sb-tip {
    position: fixed;
    z-index: 950;
    display: none;
    pointer-events: none;
    background: var(--text-main);
    color: var(--surface);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
    transform: translateY(-50%);
  }

  .sb-tip::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    width: 8px;
    height: 8px;
    background: inherit;
    transform: translateY(-50%) rotate(45deg);
    border-radius: 1px;
  }

  .app-main {
    --sb-w: 264px;
    margin-left: var(--sb-w);
    width: calc(100% - var(--sb-w));
    flex: none;
    min-width: 0;
    max-width: none;
    padding: 32px max(32px,(100% - 1800px)/2);
    padding-bottom: 40px;
    transition: margin-left .25s ease,width .25s ease;
  }

  .app-main.collapsed {
    --sb-w: 76px;
  }

  .charts-row {
    display: flex;
    gap: 24px;
  }

  .charts-row>div {
    flex: 1;
    min-width: 0;
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  }

  .tx-item {
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px !important;
    gap: 20px;
  }

  .tx-info {
    flex: 1;
  }

  .tx-meta {
    border-top: none !important;
    padding-top: 0 !important;
    gap: 30px;
    justify-content: flex-end;
    min-width: 380px;
  }

}

.auth-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}

/* Two columns on a wide screen: what the app is on the left, the form on
   the right. One column below 900px, where the form takes the lot. */

.auth-split {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  width: 100%;
  min-height: 100%;
}

.auth-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 56px;
  color: #e2e8f0;
  background: linear-gradient(160deg,#0b1220 0%,#111c34 55%,#0d1830 100%);
}

.auth-brand::after {
  content: "";
  position: absolute;
  right: -20%;
  bottom: -25%;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,var(--primary) 0%,transparent 68%);
  opacity: .22;
  pointer-events: none;
}

.ab-top {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.ab-logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--primary);
  color: #fff;
}

.ab-name {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
  color: #fff;
}

.ab-mid {
  position: relative;
  z-index: 1;
  max-width: 460px;
}

.ab-eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary-light,#a5b4fc);
}

.ab-headline {
  margin: 0 0 16px;
  font-size: clamp(30px,3.4vw,46px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}

.ab-sub {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.65;
  color: #94a3b8;
}

/* The assistant, called out on its own because it is the difference. */

.ab-assistant {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0 0 26px;
  padding: 15px 17px;
  border-radius: 16px;
  background: rgba(99,102,241,.13);
  border: 1px solid rgba(129,140,248,.28);
}

.ab-ai {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--primary);
  color: #fff;
}

.ab-ai svg {
  width: 19px;
  height: 19px;
}

.ab-assistant strong {
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 3px;
}

.ab-assistant span {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: #94a3b8;
}

/* Three columns of quiet tiles. Nine things listed as sentences would read
   as a wall; as a grid it scans in a second. */

.ab-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 11px 14px;
}

.ab-grid li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #cbd5e1;
}

.ab-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(148,163,184,.13);
  border: 1px solid rgba(148,163,184,.17);
  color: var(--primary-light,#a5b4fc);
}

.ab-ico svg {
  width: 15px;
  height: 15px;
}

@media (max-width:1180px) {
  .ab-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

.ab-foot {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: var(--surface);
  overflow-y: auto;
}

@media (max-width:900px) {
  .auth-split {
    grid-template-columns: 1fr;
  }

  .auth-brand {
    display: none;
  }

  .auth-panel {
    background: var(--bg);
    padding: 20px;
  }

}

.auth-box {
  background: var(--surface);
  padding: 32px;
  border-radius: 32px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  border: 1px solid transparent;
  max-height: 90vh;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* The box can still scroll on very small screens, but never shows a scrollbar
         (it sat outside the rounded corners and looked broken). */

@media (max-width:900px) {
  .auth-box {
    border-color: var(--border-color);
    box-shadow: 0 25px 50px rgba(0,0,0,.18);
  }

}

.auth-box::-webkit-scrollbar {
  display: none;
}

.pin-display {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 24px 0;
}

.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  transition: .2s;
}

.pin-dot.filled {
  background: var(--primary);
  transform: scale(1.1);
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}

/* PIN lockout countdown */

.pin-lockout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 18px 0 22px;
}

.pl-ring {
  position: relative;
  width: 132px;
  height: 132px;
  margin-bottom: 10px;
}

.pl-ring > svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.pl-track {
  fill: none;
  stroke: var(--border-color);
  stroke-width: 7;
}

.pl-fill {
  fill: none;
  stroke: var(--danger);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}

.pl-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-muted);
}

.pl-time {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}

.pl-title {
  font-weight: 800;
  color: var(--text-main);
  font-size: 15px;
}

.pl-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  max-width: 260px;
  text-align: center;
  line-height: 1.45;
}

.pin-pad.is-locked button[data-pin] {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

.pin-display.shake {
  animation: pinShake .38s ease;
}

@keyframes pinShake {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-9px);
  }

  40% {
    transform: translateX(8px);
  }

  60% {
    transform: translateX(-5px);
  }

  80% {
    transform: translateX(3px);
  }

}

.pin-pad button {
  padding: 16px;
  border-radius: 16px;
  border: none;
  background: var(--bg);
  color: var(--text-main);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

.wizard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  text-align: left;
  margin-top: 15px;
}

.wizard-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  padding: 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  cursor: pointer;
  border: 1px solid var(--border-color);
}

.wizard-grid input[type=checkbox] {
  width: auto;
  margin: 0;
}

.global-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  position: relative;
}

.bell-btn {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}

.notif-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 6px;
  flex: 0 0 auto;
}

.user-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
  align-items: center;
  flex-wrap: wrap;
}

.switch {
  position: relative;
  width: 46px;
  height: 26px;
  flex: 0 0 auto;
  display: inline-block;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch span {
  position: absolute;
  inset: 0;
  background: var(--border-color);
  border-radius: 26px;
  cursor: pointer;
  transition: .2s;
}

.switch span::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .2s;
}

.switch input:checked + span {
  background: var(--success);
}

.switch input:checked + span::before {
  transform: translateX(20px);
}

.global-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: var(--surface);
  padding: 6px 16px 6px 6px;
  border-radius: 30px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 15px rgba(0,0,0,.03);
}

.global-profile img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.global-profile-name {
  font-weight: 700;
  font-size: 14px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-profile-menu {
  position: absolute;
  top: 60px;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
  width: 280px;
  z-index: 1000;
  display: none;
  flex-direction: column;
  gap: 15px;
}

.dash-master {
  color: #fff;
  padding: 28px 24px;
  border-radius: 28px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.dash-main {
  background: linear-gradient(135deg,#1e1b4b,var(--primary-dark),var(--primary));
  box-shadow: 0 10px 30px rgba(49,46,129,.2);
}

.dash-loan {
  background: linear-gradient(135deg,#78350f,#d97706,var(--warning));
}

.dash-save {
  background: linear-gradient(135deg,#064e3b,#059669,var(--success));
}

.dash-cc {
  background: linear-gradient(135deg,#4c1d95,#6d28d9,var(--purple));
}

.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 10px;
  flex-wrap: wrap;
}

select.dash-select {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  width: auto;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  margin: 0;
}

select.dash-select option {
  color: #0f172a;
  background: #fff;
}

.bal-label {
  font-size: .85em;
  font-weight: 500;
  color: rgba(255,255,255,.8);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bal-amt {
  font-size: 2.6em;
  font-weight: 800;
  margin: 4px 0 0;
}

.bal-sub {
  font-size: .8em;
  color: rgba(255,255,255,.75);
  font-weight: 600;
  margin-top: 8px;
}

.wallet-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin-top: 18px;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.wallet-strip::-webkit-scrollbar {
  display: none;
}

.wallet-chip {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  padding: 10px 14px;
  min-width: 120px;
  flex: 0 0 auto;
}

.wallet-chip .wc-name {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.8);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.wallet-chip .wc-amt {
  font-size: 1.05em;
  font-weight: 800;
  margin-top: 3px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--surface);
  padding: 18px;
  border-radius: 24px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.5;
  stroke: currentColor;
  fill: none;
}

.ic-inc {
  background: rgba(16,185,129,.15);
  color: var(--success);
}

.ic-exp {
  background: rgba(239,68,68,.15);
  color: var(--danger);
}

.ic-sav {
  background: rgba(14,165,233,.15);
  color: var(--info);
}

.ic-lon {
  background: rgba(245,158,11,.15);
  color: var(--warning);
}

.ic-cc {
  background: rgba(139,92,246,.15);
  color: var(--purple);
}

.ic-nw {
  background: rgba(79,70,229,.15);
  color: var(--primary);
}

.stat-label {
  font-size: .75em;
  font-weight: 600;
  color: var(--text-muted);
}

.stat-val {
  font-size: 1.2em;
  font-weight: 800;
}

.stat-sub {
  font-size: .75em;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}

.delta-up {
  color: var(--danger);
  font-weight: 800;
}

.delta-down {
  color: var(--success);
  font-weight: 800;
}

.delta-flat {
  color: var(--text-muted);
  font-weight: 700;
}

.card {
  background: var(--surface);
  padding: 24px;
  border-radius: 24px;
  border: 1px solid var(--border-color);
  margin-bottom: 20px;
}

.section-title {
  font-weight: 800;
  font-size: 1.2em;
  margin: 0 0 20px;
}

label {
  display: block;
  font-size: .85em;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-muted);
}

input,
select,
textarea {
  width: 100%;
  padding: 16px;
  border: 2px solid var(--border-color);
  border-radius: 16px;
  font-size: 16px;
  background: var(--bg);
  color: var(--text-main);
  margin-bottom: 20px;
  font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  outline: none;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.entry-row {
  background: var(--bg);
  border: 1px solid var(--border-color);
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 20px;
  position: relative;
}

.btn-remove {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--surface);
  color: var(--danger);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

button.primary {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg,var(--primary),var(--primary-light));
  color: #fff;
  border: none;
  border-radius: 16px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: transform .2s;
}

button.primary:active {
  transform: scale(.98);
}

button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

button.secondary {
  width: 100%;
  padding: 16px;
  background: rgba(79,70,229,.1);
  color: var(--primary);
  border: 1px solid rgba(79,70,229,.2);
  border-radius: 16px;
  font-weight: 700;
  margin-bottom: 20px;
  cursor: pointer;
  transition: .2s;
}

button.secondary:hover {
  background: rgba(79,70,229,.15);
}

.ledger-card {
  background: var(--surface);
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--border-color);
}

.loan-card {
  border-top: 6px solid var(--warning);
}

.save-card {
  border-top: 6px solid var(--success);
}

.cc-card {
  border-top: 6px solid var(--purple);
}

.inst-card {
  border-top: 6px solid var(--info);
}

.wal-card {
  border-top: 6px solid var(--primary);
}

.ledger-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.lg-box {
  background: var(--bg);
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lg-label {
  font-size: .75em;
  font-weight: 700;
  color: var(--text-muted);
}

.lg-val {
  font-size: 1.1em;
  font-weight: 800;
}

.ledger-title {
  font-weight: 800;
  font-size: 1.1em;
  margin-bottom: 12px;
}

.card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tx-item {
  background: var(--surface);
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tx-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tx-title {
  font-weight: 700;
  font-size: 15px;
}

.tx-date {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.tx-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed var(--border-color);
  padding-top: 12px;
}

.tx-amt {
  font-weight: 800;
  font-size: 16px;
}

.tx-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-action {
  background: var(--bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: .2s;
}

.btn-action:hover {
  background: var(--surface);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-action.btn-delete {
  color: var(--danger);
  border-color: rgba(239,68,68,.2);
  background: rgba(239,68,68,.05);
}

.btn-action.btn-delete:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.btn-action.btn-go {
  color: var(--success);
  border-color: rgba(16,185,129,.25);
  background: rgba(16,185,129,.06);
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.6);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

/* The confirm dialog can be raised from the lock screen (Forgot PIN), so it must sit above .auth-overlay. */

#confirmModal {
  z-index: 10000;
}

.modal {
  background: var(--surface);
  padding: 28px;
  border-radius: 28px;
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
}

.modal-header {
  font-weight: 800;
  font-size: 1.2em;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-close {
  background: var(--bg);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: bold;
}

/* Row-actions dropdown (History ⋮ menu): a small anchored popover
         positioned via JS against the trigger button, not a full-screen modal. */

@keyframes ddPop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

}

.tx-dropdown {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: fixed;
  width: 200px;
  max-width: calc(100vw - 16px);
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,.2);
  padding: 6px;
  z-index: 3000;
  animation: ddPop .15s ease-out;
}

.tx-dropdown-title {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 8px 10px 7px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 11px;
  padding: 10px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: .15s;
  font-family: inherit;
}

.tx-dropdown-item:hover,
.tx-dropdown-item:active {
  background: var(--bg);
}

.tx-dropdown-item.tx-dropdown-danger {
  color: var(--danger);
}

.tx-dropdown-item.tx-dropdown-danger:hover {
  background: rgba(239,68,68,.08);
}

.tx-dropdown-icon {
  font-size: 15px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* ---------- Boot splash ----------
         The logo animates itself instead of sitting inside a spinner. The mark
         stays fully drawn at all times - a brand that dissolves and reassembles
         looks broken - and a highlight travels down the three bars instead,
         while the tile breathes and a sheen passes over it. A slim indeterminate
         bar carries the "still working" job the spinner used to do. */

/* The highlight bounces between the two ends rather than looping off the
         right edge, which left the track looking empty for a beat each cycle. */

@keyframes bootBar {
  0%,
  100% {
    fill-opacity: .38;
    transform: scaleX(1);
  }

  22% {
    fill-opacity: 1;
    transform: scaleX(1.06);
  }

  55% {
    fill-opacity: .38;
    transform: scaleX(1);
  }

}

@keyframes bootFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-5px) scale(1.04);
  }

}

@keyframes bootGlow {
  0%,
  100% {
    opacity: .5;
    transform: scale(.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }

}

@keyframes bootSheen {
  0%,
  18% {
    transform: translateX(-160%) skewX(-18deg);
  }

  62%,
  100% {
    transform: translateX(320%) skewX(-18deg);
  }

}

@keyframes bootTrack {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(150%);
  }

}

/* Anyone who has asked their device to reduce motion gets a still logo. */

@media (prefers-reduced-motion: reduce) {
  .boot-glow,
  .boot-logo,
  .boot-sheen,
  .boot-mark .bar {
    animation: none;
  }

  .boot-mark .bar {
    fill-opacity: 1;
    transform: none;
  }

  .boot-track-fill {
    width: 100%;
    animation: none;
    opacity: .5;
  }

}

.settings-hub {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 70vh;
}

.settings-sidebar {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-color);
}

.settings-sidebar button {
  white-space: nowrap;
  padding: 12px 20px;
  border-radius: 12px;
  border: none;
  background: var(--bg);
  color: var(--text-muted);
  font-weight: 700;
  cursor: pointer;
}

.settings-sidebar button.active {
  background: var(--primary);
  color: #fff;
}

.settings-pane {
  display: none;
  animation: slideUpFade .3s ease;
}

.settings-pane.active {
  display: block;
}

@media (min-width:800px) {
  .settings-hub {
    flex-direction: row;
  }

  .settings-sidebar {
    flex-direction: column;
    width: 230px;
    border-bottom: none;
    border-right: 2px solid var(--border-color);
    padding-right: 20px;
    overflow-x: visible;
  }

  .settings-content {
    flex: 1;
    padding-left: 20px;
    overflow-y: auto;
  }

}

.prog-bg {
  width: 100%;
  height: 10px;
  background: var(--border-color);
  border-radius: 5px;
  margin: 10px 0;
  overflow: hidden;
}

.prog-fill {
  height: 100%;
  border-radius: 5px;
  transition: width .5s ease;
}

.prog-safe {
  background: linear-gradient(90deg,#10b981,#34d399);
}

.prog-warn {
  background: linear-gradient(90deg,#f59e0b,#fbbf24);
}

.prog-danger {
  background: linear-gradient(90deg,#ef4444,#f87171);
}

.prog-info {
  background: linear-gradient(90deg,var(--info),#38bdf8);
}

.badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 800;
  display: inline-block;
}

.empty-state {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
}

.alert-row {
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.alert-dismiss {
  background: rgba(0,0,0,.06);
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  transition: .15s;
}

.alert-dismiss:hover {
  background: var(--danger);
  color: #fff;
}

.skeleton {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg,var(--border-color) 0px,var(--surface) 200px,var(--border-color) 400px);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  margin-bottom: 10px;
}

#schemaWarn {
  display: none;
  background: rgba(239,68,68,.1);
  border: 1px solid var(--danger);
  color: var(--text-main);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.swatch {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 3px solid transparent;
  cursor: pointer;
  padding: 0;
}

.swatch.active {
  border-color: var(--text-main);
}

img {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

@media (max-width:560px) {
  .app-main {
    padding: 12px;
    padding-bottom: 118px;
    max-width: 100vw;
  }

  .global-topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    margin: -12px -12px 14px;
    padding: 10px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-color);
  }

  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 26px 26px 0 0;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    animation: slideUpSheet .28s cubic-bezier(.16,1,.3,1);
  }

  #receiptViewerModal {
    align-items: stretch;
  }

  .nav-btn {
    min-height: 46px;
    justify-content: center;
  }

  .bottom-nav {
    z-index: 1200;
  }

  .btn-remove {
    top: -8px;
    right: -8px;
  }

  .prog-bg {
    height: 8px;
  }

  canvas {
    max-width: 100%;
  }

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

  .dash-master {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .bal-amt {
    font-size: 1.9em;
    word-break: break-word;
  }

  .dash-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  select.dash-select {
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .stat-card {
    padding: 14px 12px;
  }

  .stat-val {
    font-size: 1.05em;
  }

  .stat-card {
    padding: 14px;
    border-radius: 18px;
  }

  .stat-val {
    font-size: 1em;
    word-break: break-word;
  }

  .stat-label,
  .stat-sub {
    font-size: .7em;
  }

  .card,
  .ledger-card {
    padding: 18px;
    border-radius: 20px;
  }

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

  .modal {
    padding: 20px;
    border-radius: 22px;
    max-height: 88vh;
  }

  .modal-overlay {
    padding: 10px;
  }

  input,
  select,
  textarea {
    padding: 13px;
    margin-bottom: 14px;
    border-radius: 13px;
  }

  .tx-actions {
    width: 100%;
  }

  .btn-action {
    flex: 1 1 auto;
    text-align: center;
    padding: 9px 8px;
  }

  .card-actions .btn-action {
    flex: 1 1 40%;
  }

  .rule-row {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-sidebar {
    padding: 16px !important;
  }

  .settings-content {
    padding: 16px !important;
  }

  .settings-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  h2 {
    font-size: 1.3em;
  }

  .section-title {
    font-size: 1.05em;
  }

  .seg {
    width: 100%;
  }

  .seg button {
    flex: 1 1 auto;
  }

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

  .auth-box {
    padding: 22px;
    border-radius: 24px;
  }

  #toastContainer {
    bottom: 96px;
    width: 92vw;
  }

  .toast {
    width: 100%;
    justify-content: space-between;
  }

  .inv-row {
    flex-wrap: wrap;
  }

  .inv-row .i-desc {
    flex: 1 1 100%;
  }

  .global-profile-name {
    max-width: 110px;
  }

}

/* Two per row even on narrow phones: one per row wasted half the screen. */

@media (max-width:380px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

}

#bootError {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  color: var(--text-main);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  font-weight: 600;
  line-height: 1.6;
}

.seg {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.seg button {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  width: auto;
  margin: 0;
}

.seg button.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.rule-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
}

.kv:last-child {
  border-bottom: none;
}

/* The lock screen scales with the viewport rather than jumping between
         fixed sizes: it fills the space it has on a big phone and still fits a
         short laptop window without a scrollbar. */

.pin-display {
  margin: clamp(14px, 3.2vh, 26px) 0;
}

.pin-dot {
  width: clamp(12px, 1.7vh, 16px);
  height: clamp(12px, 1.7vh, 16px);
}

.pin-pad {
  gap: clamp(8px, 1.4vh, 14px);
}

.pin-pad button {
  padding: clamp(11px, 2.1vh, 20px);
  font-size: clamp(18px, 2.6vh, 24px);
}

.pl-ring {
  width: clamp(88px, 14vh, 132px);
  height: clamp(88px, 14vh, 132px);
  margin-bottom: clamp(4px, 1vh, 10px);
}

.pl-time {
  font-size: clamp(20px, 3.2vh, 28px);
}

.pin-lockout {
  margin: clamp(8px, 1.8vh, 18px) 0 clamp(12px, 2.4vh, 22px);
}

.pl-sub {
  font-size: clamp(11.5px, 1.6vh, 12.5px);
}

@media (min-width:800px) {
  .auth-box {
    max-width: 420px;
  }

}

@media (max-height:700px) {
  .auth-box {
    padding-top: 18px;
    padding-bottom: 16px;
  }

  .pl-lock {
    display: none;
  }

}

/* ---------- Client cards (vertical, like wallets) ---------- */

.cli-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.cli-main {
  flex: 1;
  min-width: 230px;
}

.cli-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.cli-meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.cli-meta div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cli-meta span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cli-meta strong {
  font-size: 15px;
  font-weight: 800;
}

.cli-meta .neg {
  color: var(--danger);
}

.cli-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.ws-pick-btn .hint {
  margin-left: 4px;
  opacity: .8;
}

@media (max-width:640px) {
  .cli-actions {
    width: 100%;
  }

  .cli-actions .btn-action {
    flex: 1;
    justify-content: center;
  }

}

/* Paired fields. The markup has used this class all along but nothing
         ever styled it, so two-field rows were stacking. */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.form-row > div {
  min-width: 0;
}

@media (max-width:520px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

}

/* ---------- Wallet reordering ---------- */

.wal-card {
  position: relative;
}

.wal-card.draggable {
  cursor: grab;
}

.wal-card.dragging {
  opacity: .45;
  cursor: grabbing;
}

.wal-card.drop-above {
  box-shadow: 0 -3px 0 0 var(--primary);
}

.wal-card.drop-below {
  box-shadow: 0 3px 0 0 var(--primary);
}

.wal-reorder {
  position: absolute;
  top: 12px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wal-grip {
  display: none;
  color: var(--text-muted);
  opacity: .55;
}

.wal-grip svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
  display: block;
}

.wal-card:hover .wal-grip {
  opacity: 1;
}

.wal-move {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-color);
  background: var(--bg);
  color: var(--text-muted);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wal-move svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wal-move:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.wal-move:not(:disabled):hover {
  color: var(--primary);
  border-color: var(--primary);
}

@media (min-width:800px) {
  .wal-grip {
    display: block;
  }

  .wal-move {
    display: none;
  }

  .wal-reorder {
    top: 8px;
    right: 8px;
  }

  .wal-card .lg-label {
    padding-right: 20px;
  }

}

@media (max-width:799px) {
  .wal-reorder {
    position: static;
    justify-content: flex-end;
    margin-bottom: 4px;
  }

}

/* ---------- Settings: menu stays put while the pane scrolls ---------- */

.settings-hub {
  position: relative;
}

/* The hub can no longer use overflow:hidden (it would stop the menu sticking),
         so each panel rounds its own outer corners instead. */

.settings-sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-radius: 24px 24px 0 0;
}

@media (min-width:800px) {
  .settings-sidebar {
    top: 16px;
    align-self: flex-start;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
    border-radius: 24px 0 0 24px;
  }

  .settings-sidebar::-webkit-scrollbar {
    width: 6px;
  }

  .settings-sidebar::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
  }

}

/* ---------- Login screen footer ---------- */

.auth-legal {
  margin-top: 22px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---------- Module rows with switches ---------- */

.mod-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  margin: 0;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
}

.mod-row.mod-row-last {
  border-bottom: none;
}

.mod-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mod-name {
  font-weight: 700;
  color: var(--text-main);
  font-size: 14px;
}

.mod-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.wiz-mod-row {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg);
}

.app-legal {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ---------- Business dashboard: tinted cards ----------
         Colour carries meaning here rather than decoration: green is money in,
         red money out, indigo the headline figure. The tint plus the left edge
         is what makes Business feel different from Personal's plain cards. */

.biz-stat {
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--border-color);
}

.biz-stat::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -28px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  opacity: .10;
  background: currentColor;
}

.biz-stat.ic-sav {
  border-left-color: var(--info);
  background: color-mix(in srgb,var(--info) 7%,var(--surface));
  color: var(--info);
}

.biz-stat.ic-exp {
  border-left-color: var(--danger);
  background: color-mix(in srgb,var(--danger) 7%,var(--surface));
  color: var(--danger);
}

.biz-stat.ic-net {
  border-left-color: var(--primary);
  background: color-mix(in srgb,var(--primary) 7%,var(--surface));
  color: var(--primary);
}

.biz-stat.ic-inc {
  border-left-color: var(--success);
  background: color-mix(in srgb,var(--success) 7%,var(--surface));
  color: var(--success);
}

.biz-stat.ic-lon {
  border-left-color: var(--warning);
  background: color-mix(in srgb,var(--warning) 7%,var(--surface));
  color: var(--warning);
}

.biz-stat .stat-label {
  color: var(--text-muted);
}

.biz-stat .stat-val {
  color: var(--text-main);
  position: relative;
  z-index: 1;
}

.biz-stat .stat-sub {
  color: var(--text-muted);
}

.biz-stat .stat-icon {
  position: relative;
  z-index: 1;
}

/* ---------- Invoice builder extras ---------- */

.inv-adjust {
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.inv-tax-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
}

.inv-tax-row:last-child {
  border-bottom: none;
}

.bizp-logo {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  border: 1px dashed var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  background: var(--bg);
  flex-shrink: 0;
}

.bizp-logo.has-img {
  border-style: solid;
}

.bizp-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.bizp-logo.sm {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

/* ---------- Statement ---------- */

.stmt-table td,
.stmt-table th {
  padding: 9px 12px;
  font-size: 13px;
}

.stmt-table th:nth-child(n/**/+3),
.stmt-table td:nth-child(n/**/+3) {
  text-align: right;
}

.stmt-open td {
  background: var(--bg);
  color: var(--text-muted);
}

.stmt-total td {
  background: color-mix(in srgb,var(--primary) 8%,transparent);
  border-top: 2px solid var(--border-color);
}

.stmt-total td strong {
  font-size: 15px;
}

/* ---------- Receivables ageing ---------- */

.age-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
}

.age-row.empty {
  opacity: .45;
}

.age-label {
  flex: 0 0 120px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.age-bar {
  flex: 1;
  height: 10px;
  border-radius: 8px;
  background: var(--bg);
  overflow: hidden;
}

.age-bar span {
  display: block;
  height: 100%;
  border-radius: 8px;
}

.age-current {
  background: var(--success);
}

.age-d30 {
  background: var(--info);
}

.age-d60 {
  background: var(--warning);
}

.age-d90 {
  background: #f97316;
}

.age-older {
  background: var(--danger);
}

.age-amt {
  flex: 0 0 auto;
  min-width: 92px;
  text-align: right;
  font-weight: 800;
  font-size: 13.5px;
}

.bc-table tr.recv-first td {
  border-top: 2px solid var(--border-color);
}

.bc-table tbody tr:first-child td {
  border-top: none;
}

@media (max-width:560px) {
  .age-label {
    flex-basis: 88px;
    font-size: 11.5px;
  }

  .age-amt {
    min-width: 76px;
    font-size: 12.5px;
  }

}

/* ---------- Workspaces in Settings ---------- */

.ws-block {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.ws-block-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.ws-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ws-pick-btn {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  width: auto;
  margin: 0;
}

.ws-pick-btn:hover {
  color: var(--text-main);
}

.ws-pick-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.mod-desc em {
  font-style: normal;
  color: var(--primary);
  font-weight: 600;
}

.switch.is-locked {
  opacity: .55;
}

/* ---------- Workspace switcher ---------- */

.sb-ws {
  position: relative;
  padding: 12px 14px 0;
  flex-shrink: 0;
}

.sb-ws-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.sb-ws-btn:hover {
  border-color: var(--primary);
}

.sb-ws-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.sb-ws-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sb-ws-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sb-ws-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sb-ws-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-ws-caret {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s;
}

.sb-ws.open .sb-ws-caret {
  transform: rotate(180deg);
}

.sb-ws-menu {
  display: none;
  position: absolute;
  left: 14px;
  right: 14px;
  top: calc(100% + 4px);
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 16px 36px rgba(15,23,42,.18);
}

.sb-ws.open .sb-ws-menu {
  display: block;
  animation: ddPop .14s ease;
}

.sb-ws-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  text-align: left;
}

.sb-ws-item:hover {
  background: var(--bg);
}

.sb-ws-item.active {
  background: color-mix(in srgb,var(--primary) 10%,transparent);
  color: var(--primary);
}

.desktop-sidebar.collapsed .sb-ws {
  padding: 12px 0 0;
  display: flex;
  justify-content: center;
}

.desktop-sidebar.collapsed .sb-ws-btn {
  width: 44px;
  justify-content: center;
  padding: 6px;
}

.desktop-sidebar.collapsed .sb-ws-text,
.desktop-sidebar.collapsed .sb-ws-caret {
  display: none;
}

.desktop-sidebar.collapsed .sb-ws-menu {
  left: 6px;
  width: 210px;
  right: auto;
}

/* ---------- Committee / BC ---------- */

/* The detail tabs have their own style: reusing the settings menu made
         them stack into a column on desktop. */

.bc-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.bc-tabs button {
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text-muted);
  font-weight: 700;
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  width: auto;
  margin: 0;
}

.bc-tabs button:hover {
  color: var(--text-main);
}

.bc-tabs button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.bc-pane {
  display: none;
}

.bc-pane.active {
  display: block;
}

.bc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.bc-card {
  margin: 0;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.bc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
}

.bc-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.bc-card-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.bc-card-amt {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.5px;
  margin-bottom: 10px;
}

.bc-card-amt span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0;
}

.bc-card-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.bc-card-meta div {
  display: flex;
  flex-direction: column;
}

.bc-card-meta span {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.bc-card-meta strong {
  font-size: 14px;
}

.bc-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.bc-card-cta {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary);
}

.bc-card .btn-action {
  pointer-events: none;
}

.bc-bar {
  height: 6px;
  border-radius: 6px;
  background: var(--border-color);
  overflow: hidden;
}

.bc-bar span {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg,var(--primary),var(--primary-light));
}

/* "This month" panel on the committee dashboard */

.bc-now-card {
  margin-bottom: 20px;
}

.bc-now-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.bc-now-head h3 {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 800;
}

.bc-now-head .hint {
  margin: 0;
}

.bc-now-body {
  display: grid;
  grid-template-columns: minmax(200px,1fr) 1.4fr;
  gap: 22px;
  padding-top: 16px;
}

.bc-now-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bc-now-turn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--bg);
}

.bc-now-name {
  font-size: 17px;
  font-weight: 800;
}

.bc-now-name.muted {
  color: var(--text-muted);
  font-weight: 700;
}

.bc-now-amt {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--primary);
}

.bc-now-collect {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.bc-now-collect-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.bc-now-collect-top strong {
  font-size: 19px;
  font-weight: 800;
}

.bc-now-collect-top strong span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.bc-now-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bc-now-warn {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--danger);
}

.bc-now-ok {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--success);
}

.bc-now-next {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 12.5px;
  color: var(--text-muted);
}

@media (max-width:799px) {
  .bc-now-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }

}

.bc-summary {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.bc-summary div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bc-summary span {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.bc-summary strong {
  font-size: 17px;
  font-weight: 800;
}

.bc-summary .pos,
.bc-table .pos {
  color: var(--success);
}

.bc-summary .neg,
.bc-table .neg {
  color: var(--danger);
}

.bc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: left;
}

.bc-table th {
  padding: 14px 16px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.bc-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.bc-table tr:last-child td {
  border-bottom: none;
}

.bc-table tr.bc-now {
  background: color-mix(in srgb,var(--primary) 6%,transparent);
}

.bc-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.bc-ok {
  background: color-mix(in srgb,var(--success) 16%,transparent);
  color: var(--success);
}

.bc-info {
  background: color-mix(in srgb,var(--primary) 14%,transparent);
  color: var(--primary);
}

.bc-warn {
  background: color-mix(in srgb,var(--danger) 14%,transparent);
  color: var(--danger);
}

.bc-muted {
  background: var(--bg);
  color: var(--text-muted);
}

.bc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.bc-row:last-child {
  border-bottom: none;
}

.bc-row-main {
  min-width: 0;
}

.bc-row-title {
  font-weight: 700;
  font-size: 14px;
}

.bc-row-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.bc-row-end {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 120px;
}

.bc-row-end .bc-bar {
  width: 120px;
}

.btn-wa {
  color: var(--success);
  border-color: color-mix(in srgb,var(--success) 40%,transparent);
  text-decoration: none;
}

.bc-cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
}

.bc-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg);
  cursor: pointer;
  font-family: inherit;
  color: var(--text-muted);
}

.bc-cell-n {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
}

.bc-cell-d {
  font-size: 10.5px;
}

.bc-cell.paid {
  background: color-mix(in srgb,var(--success) 14%,transparent);
  border-color: color-mix(in srgb,var(--success) 45%,transparent);
}

.bc-cell.paid .bc-cell-n {
  color: var(--success);
}

.bc-cell.late {
  border-color: color-mix(in srgb,var(--danger) 45%,transparent);
}

.bc-cell.late .bc-cell-n {
  color: var(--danger);
}

@media (max-width:799px) {
  .bc-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .bc-row-end {
    align-items: flex-start;
    text-align: left;
  }

}

/* ---- chat assistant --------------------------------------------------- */

/* Docked to the right on a wide screen. The navigation sidebar owns the
   left edge, so putting it there would sit on top of the menu the panel is
   meant to leave reachable. Everything to its left stays clickable. */

.chat-panel {
  position: fixed;
  top: 0;
  right: 0;
  /* Above the bottom navigation. Note it is 1000 in the base rule but
     raised to 1200 inside the mobile media query, which is what defeated
     an earlier attempt at 1010. The nav is also hidden outright while the
     panel is open (below), so this is the second line of defence. */
  z-index: 1300;
  width: 390px;
  max-width: 100vw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border-color);
  box-shadow: -18px 0 45px rgba(15,23,42,.14);
  transform: translateX(100%);
  transition: transform .22s ease;
  visibility: hidden;
}

.chat-panel.open {
  transform: none;
  visibility: visible;
}

@media (prefers-reduced-motion:reduce) {
  .chat-panel {
    transition: none;
  }
}

/* The app keeps its own scrollbar and stays usable; only the room for the
   panel is taken. */

@media (min-width:1100px) {
  body.chat-docked .app-layout {
    padding-right: 390px;
  }
}

.chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--border-color);
}

.chat-close {
  background: none;
  border: none;
  font-size: 17px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
}

.chat-close:hover {
  background: var(--bg);
  color: var(--text-main);
}

.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overscroll-behavior: contain;
}

.chat-row {
  display: flex;
}

.chat-row.chat-me {
  justify-content: flex-end;
}

.chat-bubble {
  max-width: 86%;
  padding: 11px 15px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.55;
  background: var(--bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  word-break: break-word;
}

.chat-me .chat-bubble {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.chat-bubble.chat-plain {
  background: transparent;
  border: none;
  padding: 0;
  max-width: 100%;
}

.chat-receipt {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--surface);
}

.cr-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.cr-type {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cr-amt {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
}

.cr-line {
  font-size: 13px;
  color: var(--text-muted);
}

.cr-note {
  margin-top: 6px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
}

.cr-undo {
  margin-top: 12px;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--danger);
  cursor: pointer;
}

.cr-undo:hover {
  border-color: var(--danger);
}

.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 22px 12px;
  /* Every option is offered now, and a long category list must not push the
     input off the bottom of the panel. */
  max-height: 34vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex-shrink: 0;
}

.chat-chip {
  background: var(--bg);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
}

.chat-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.chat-input-row {
  display: flex;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border-color);
}

.chat-input-row input {
  flex: 1;
}

@media (max-width:640px) {
  .chat-panel {
    width: 100vw;
    border-left: none;
  }
}

/* On a phone the panel is the whole screen, so it covers the navigation
   rather than sharing space with it. The input keeps clear of the home
   indicator on its own. */

@media (max-width:900px) {
  .chat-panel {
    height: 100dvh;
  }

  /* The assistant takes the whole phone screen, so the navigation steps
     aside rather than competing for the bottom of it. body.chat-docked is
     set while the panel is open and cleared when it closes. */
  body.chat-docked .bottom-nav,
  body.chat-docked .chat-fab {
    display: none !important;
  }
  .chat-input-row {
    padding-bottom: calc(14px + env(safe-area-inset-bottom,0px));
  }
}

/* ---- assistant bubble, phones only ------------------------------------ */

.chat-fab {
  display: none;
}

@media (max-width:900px) {
  .chat-fab {
    position: fixed;
    right: 18px;
    bottom: calc(84px + env(safe-area-inset-bottom,0px));
    z-index: 900;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(79,70,229,.42);
    cursor: pointer;
  }
  .chat-fab:active {
    transform: scale(.94);
  }
  /* Out of the way while any sheet or modal is open. The overlays are
     shown with inline display:flex, so this needs no extra bookkeeping. */
  body:has(.modal-overlay[style*="flex"]) .chat-fab,
  .chat-fab[data-hidden="1"] {
    display: none;
  }
}

/* The keyboard shrinks the visual viewport rather than the layout viewport,
   so a full-height sheet would put the input underneath it. */

@media (max-width:640px) {
  /* 16px stops iOS zooming the page when the field takes focus. */
  #chatInput,
  #quickEntry {
    font-size: 16px;
  }
  .chat-chip {
    padding: 10px 18px;
    font-size: 14px;
  }
}

/* Suggestion chips wrap to full lines: they are questions, not one-word
   answers, so a row of them would be unreadable. */

.chat-chip {
  text-align: left;
  max-width: 100%;
}

/* ---- history pagination ------------------------------------------------ */

.hist-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 10px;
  border-top: 1px solid var(--border-color);
}

.hist-count {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.hist-pg-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.hist-pg {
  min-width: 34px;
  padding: 7px 10px;
  font-variant-numeric: tabular-nums;
}

.hist-pg[disabled] {
  opacity: .35;
  cursor: default;
}

.hist-pg-on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.hist-gap {
  padding: 0 2px;
  color: var(--text-muted);
}

.hist-size {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.hist-size select {
  width: auto;
  margin: 0;
  padding: 6px 26px 6px 10px;
  font-size: 13px;
}

@media (max-width:640px) {
  .hist-pager {
    justify-content: center;
  }
  .hist-count {
    order: -1;
    width: 100%;
    text-align: center;
  }
}

/* ===================================================================
   3.29.0 Customisable dashboard. One declaration per line, as the rest
   of this file, so a diff stays readable.
   =================================================================== */

.dash-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.dash-edit-btn {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash-edit-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}

.dash-grid>.dw {
  min-width: 0;
  position: relative;
}

.dash-grid>.dw>.card,
.dash-grid>.dw>.stats-grid,
.dash-grid>.dw>.dash-master {
  margin-bottom: 0;
}

.dash-grid>.dash-gallery {
  margin-bottom: 0;
}

.dw.dw-off {
  display: none;
}

@media (min-width:1100px) {
  .dash-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .dash-grid>.dw[data-size="full"],
  .dash-grid>.dash-gallery {
    grid-column: 1 / -1;
  }
}

.dash-grid.editing>.dw {
  outline: 2px dashed var(--border-color);
  outline-offset: 6px;
  border-radius: 24px;
  cursor: grab;
}

.dash-grid.editing>.dw.dw-dragging {
  opacity: .45;
}

.dw-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
}

.dw-tools-title {
  font-weight: 800;
  font-size: 13px;
  color: var(--text-muted);
}

.dw-tools-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dw-tools-btns .btn-action[disabled] {
  opacity: .35;
  cursor: default;
}

@media (max-width:1099px) {
  .dw-size-btn {
    display: none;
  }
}

.dash-gallery-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dash-gallery-actions {
  display: flex;
  gap: 8px;
}

.dash-gallery-tip {
  font-size: 13px;
  color: var(--text-muted);
  margin: 10px 0 16px;
}

.dash-gallery-list {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
  gap: 10px;
}

.dw-gal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg);
}

.dw-gal-title {
  font-weight: 800;
  font-size: 14px;
}

.dw-gal-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.dw-body {
  font-size: 14px;
}

.dw-body .hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

.dw-empty {
  padding: 16px 0;
}

.dw-big {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.dw-unit {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
}

.dw-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 14px;
}

.dw-pos {
  color: var(--success);
}

.dw-neg {
  color: var(--danger);
}

.dw-pos-bg {
  background: var(--success);
}

.dw-neg-bg {
  background: var(--danger);
}

.dw-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  font-variant-numeric: tabular-nums;
}

.dw-row-sm {
  font-size: 13px;
  color: var(--text-muted);
  padding: 3px 0;
}

.dw-total {
  border-top: 1px solid var(--border-color);
  margin-top: 8px;
  padding-top: 10px;
}

.dw-h {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin: 12px 0 2px;
}

.dw-meter {
  height: 8px;
  background: var(--bg);
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0 4px;
}

.dw-meter-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
}

/* A colour class on a meter must beat the meter's own default. */
.dw-meter-fill.dw-pos-bg {
  background: var(--success);
}

.dw-meter-fill.dw-neg-bg {
  background: var(--danger);
}

.dw-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.dw-side {
  margin-bottom: 14px;
}

.dw-item {
  margin-top: 10px;
}

.dw-split {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 6px 24px;
}

.dw-cols {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 90px;
}

.dw-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.dw-col-track {
  flex: 1;
  width: 100%;
  max-width: 34px;
  display: flex;
  align-items: flex-end;
  background: var(--bg);
  border-radius: 6px;
  overflow: hidden;
}

.dw-col-fill {
  width: 100%;
  border-radius: 6px;
}

.dw-col-lbl {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.dw-cal {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  gap: 4px;
  margin-bottom: 10px;
}

.dw-cal-h {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-align: center;
}

.dw-cal-c {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-muted);
}

.dw-cal-blank {
  background: transparent;
}

.dw-l1 {
  background: rgba(239,68,68,.18);
  color: var(--text-main);
}

.dw-l2 {
  background: rgba(239,68,68,.38);
  color: var(--text-main);
}

.dw-l3 {
  background: rgba(239,68,68,.62);
  color: #fff;
}

.dw-l4 {
  background: rgba(239,68,68,.9);
  color: #fff;
}

.dw-cal-today {
  box-shadow: inset 0 0 0 2px var(--primary);
}

.dw-table-wrap {
  overflow-x: auto;
}

.dw-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.dw-table th,
.dw-table td {
  padding: 8px 6px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-color);
}

.dw-table th {
  font-size: 12px;
  color: var(--text-muted);
}

.dw-table td:first-child,
.dw-table th:first-child {
  text-align: left;
  font-weight: 700;
}

/* ===================================================================
   3.30.0 Install banner
   =================================================================== */

.install-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(15,23,42,.18);
}

.install-banner img {
  border-radius: 10px;
  flex-shrink: 0;
}

.install-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.install-banner-text span {
  color: var(--text-muted);
  font-size: 12px;
}

.install-banner-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

@media (min-width:800px) {
  .install-banner {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: 420px;
  }
}

.install-card {
  background: var(--bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

.install-p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.install-steps {
  padding-left: 20px;
  line-height: 1.7;
  font-size: 14px;
}












/* ===================================================================
   3.31.1 Lasting banners: data could not load, incomplete release
   =================================================================== */

.fp-banner {
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--text-main);
}

.fp-banner-error {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(239,68,68,.1);
  border: 1px solid var(--danger);
}

.fp-banner-warn {
  position: relative;
  z-index: 100000;
  margin: 0;
  border-radius: 0;
  background: #fef3c7;
  border-bottom: 1px solid var(--warning);
  color: #111827;
}