/* Vora: presentation only over the verified production bundles. No layout,
   navigation, amount, visibility of functional controls or storage overrides. */
html:root {
  --brand: #087c77;
  --brand-strong: #05635f;
  --brand-tint: rgba(8,124,119,.10);
  --brand-tint-strong: rgba(8,124,119,.18);
  --on-brand: #fff;
  --bg: #eef3f7;
  --surface: #fff;
  --surface-2: #e6edf3;
  --surface-hover: #f2f6f9;
  --border: #d5e0e9;
  --border-strong: #bfceda;
  --text: #102333;
  --text-2: #4e667a;
  --text-3: #647b8e;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --shadow-sm: 0 2px 8px rgba(16,35,51,.04);
  --shadow-md: 0 8px 24px rgba(16,35,51,.07);
  --shadow-lg: 0 20px 64px rgba(16,35,51,.14);
}
html[data-theme="dark"] {
  --brand: #54e2cb;
  --brand-strong: #83eedc;
  --brand-tint: rgba(84,226,203,.10);
  --brand-tint-strong: rgba(84,226,203,.18);
  --on-brand: #081f25;
  --bg: #0a111a;
  --surface: #131d29;
  --surface-2: #1a2836;
  --surface-hover: #1c2c3a;
  --border: #2a394a;
  --border-strong: #3a5063;
  --text: #f0f6fb;
  --text-2: #a4b6c7;
  --text-3: #8b9fb3;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.13);
  --shadow-md: 0 8px 24px rgba(0,0,0,.19);
  --shadow-lg: 0 20px 64px rgba(0,0,0,.3);
}
html body { font-family: var(--font-sans); }
html body :is(.page-title,.login-h) { letter-spacing: -.035em; font-weight: 700; }
html body :is(.kpi-value,.mono,.qz-amount,.qz-sobra,.t-val,.total-n,.dc-value,.snap-val) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
html body :is(.mono,.kpi-value.mono,.tx-amount,.qz-amount) { font-family: var(--font-sans); }
html body :is(.sb-mark,.login-mark) {
  position: relative;
  background: transparent;
  color: var(--brand);
  border-radius: 0;
  box-shadow: none;
}
/* Replace only the decorative spa symbol. The adjacent name is real Angular
   text patched to Vora, rather than a CSS-generated accessible name. */
html body :is(.sb-mark,.login-mark) > .ms { display: none; }
html body :is(.sb-mark,.login-mark)::before {
  content: "";
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: url("assets/brand/vora-symbol.svg") center / contain no-repeat;
  mask: url("assets/brand/vora-symbol.svg") center / contain no-repeat;
}
html body .sb-brand .bt .n { font-size: 24px; font-weight: 800; letter-spacing: -.055em; line-height: 1; }
html body .sb-brand .bt .s { margin-top: 5px; font-size: 11px; letter-spacing: .015em; }
html body .login-brand .name { font-size: 32px; font-weight: 800; letter-spacing: -.055em; line-height: 1; }
html body .login-brand { gap: 14px; margin-bottom: 44px; }
html body .login-mark { width: 42px; height: 42px; }
html body .sb-brand { padding-bottom: 22px; }
html body .sidebar { background: var(--surface); }
html body .nav-item { transition: background-color .18s ease, color .18s ease; }
html body .nav-item.active { background: var(--brand-tint); }
html body .nav-item.active::before { width: 3px; height: 24px; }
html body .avatar { background: var(--brand-tint); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-tint-strong); }
html body .topbar { background: color-mix(in srgb,var(--bg) 92%,transparent); }
html body :is(.card,.kpi,.debt-card) { box-shadow: var(--shadow-sm); }
html body :is(.tab.active,.theme-switch button.active) { box-shadow: 0 2px 5px rgba(16,35,51,.08); }
html body :is(.btn-primary,.pill.active) { box-shadow: none; }
html body .btn-primary:hover { box-shadow: 0 5px 18px var(--brand-tint-strong); }
html body .btn-primary:disabled { cursor: default; box-shadow: none; }
html body :is(button,a,input,select,textarea):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
html body :is(.input,.input-plain):focus-visible { outline-offset: 1px; }
/* The login's sample wealth graphic and bubbles are decorative only. */
html body .login-visual { background: #102333 !important; padding: clamp(36px,4.5vw,72px); isolation: isolate; }
html body .login-visual :is(.blob,.preview-card,.login-visual-grid) { display: none; }
html body .login-visual::before {
  content: "";
  position: absolute;
  top: 9%;
  right: -8%;
  width: 85%;
  height: 75%;
  background: #54e2cb;
  opacity: .10;
  -webkit-mask: url("assets/brand/vora-symbol.svg") center / contain no-repeat;
  mask: url("assets/brand/vora-symbol.svg") center / contain no-repeat;
  pointer-events: none;
}
html body .login-visual::after {
  content: "VORA";
  position: absolute;
  top: 48px;
  left: clamp(36px,4.5vw,72px);
  color: #83eedc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .25em;
}
html body .login-visual .vtext h2 { font-size: clamp(30px,3vw,44px); line-height: 1.1; letter-spacing: -.045em; }
html body .login-visual .vtext p { color: #adc4d5; line-height: 1.65; }
html body .register-container { background: var(--bg); }
html body .register-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
html body .signup-header h1 { color: var(--text); letter-spacing: -.035em; }
html body .register-card :is(label,.form-group label) { color: var(--text-2); }
html body .register-card input { color: var(--text); background: var(--surface); border-color: var(--border); }
html body .register-card .btn-register { background: var(--brand); color: var(--on-brand); }
/* Shared tokens automatically cover agenda, trips, debts, fortnight planning,
   ceilings, net worth, the couple's area and their existing dialogs/charts. */
html body .briefing-card { background: var(--surface-2); }
html body .fc {
  --fc-page-bg-color: var(--surface);
  --fc-neutral-bg-color: var(--surface-2);
  --fc-neutral-text-color: var(--text-2);
  --fc-border-color: var(--border);
  --fc-today-bg-color: var(--brand-tint);
  --fc-highlight-color: var(--brand-tint-strong);
  --fc-list-event-hover-bg-color: var(--surface-hover);
}
html body .mat-mdc-button.mat-primary { --mdc-text-button-label-text-color: var(--brand); }
html body .mat-mdc-outlined-button.mat-primary { --mdc-outlined-button-label-text-color: var(--brand); --mdc-outlined-button-outline-color: var(--border-strong); }
html body .mat-mdc-unelevated-button.mat-primary { --mdc-filled-button-container-color: var(--brand); --mdc-filled-button-label-text-color: var(--on-brand); }
html body .mat-mdc-raised-button.mat-primary { --mdc-protected-button-container-color: var(--brand); --mdc-protected-button-label-text-color: var(--on-brand); }
html body .mat-mdc-form-field { --mdc-outlined-text-field-focus-outline-color: var(--brand); --mdc-outlined-text-field-focus-label-text-color: var(--brand); --mdc-outlined-text-field-input-text-color: var(--text); --mdc-outlined-text-field-label-text-color: var(--text-2); --mdc-outlined-text-field-outline-color: var(--border-strong); }
@media (prefers-reduced-motion: no-preference) {
  html body :is(.content,.login-box) { animation: vora-arrive .24s cubic-bezier(.22,1,.36,1) both; }
  html body :is(.btn,.icon-btn,.kpi.clickable,.debt-card) { transition-duration: .18s; }
  @keyframes vora-arrive { from { opacity: .6; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  html body :is(.content,.login-box,.btn,.icon-btn,.kpi,.debt-card,.nav-item) { animation: none; transition: none; }
}
@media (max-width: 720px) {
  html body .login-form-side { padding: 28px 24px; }
  html body .login-box { max-width: 390px; }
}