/**
 * Copyright: 2026 - aduki, Labs
 * Name: Biitrust
 * Author: Fredrick Femar Ochieng
 * Author URL: https://github.com/fescii
*/

/**
 * Fonts
*/

@font-face {
  font-family: "Inter";
  src:
    url("/static/fonts/inter.woff2") format("woff2"),
    url("/static/fonts/inter.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;

}

@font-face {
  font-family: "Comfortaa";
  src:
    url("/static/fonts/comfortaa.woff2") format("woff2"),
    url("/static/fonts/comfortaa.woff") format("woff");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;

}

@font-face {
  font-family: "IBM Plex Sans";
  src:
    url("/static/fonts/ibmplexsans.woff2") format("woff2"),
    url("/static/fonts/ibmplexsans.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;

}

@font-face {
  font-family: "Instrument Sans";
  src:
    url("/static/fonts/instrumentsans.woff2") format("woff2"),
    url("/static/fonts/instrumentsans.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;

}

@font-face {
  font-family: "Jetbrains Mono";
  src:
    url("/static/fonts/jetbrainsmono.woff2") format("woff2"),
    url("/static/fonts/jetbrainsmono.woff") format("woff");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;

}

@font-face {
  font-family: "Work Sans";
  src:
    url("/static/fonts/worksans.woff2") format("woff2"),
    url("/static/fonts/worksans.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;

}

/**

 Variables

 =========

 */

:root {
  color-scheme: light;
  /* Brand palette: Green as Accent, Gold as Alt */
  --brand-green: #155E29;
  --brand-green-deep: #0D3E19;
  --brand-gold: #D97706;
  --brand-gold-deep: #92400E;
  --brand-gold-light: #F59E0B;

  /* ── motion (UI/MOTION.md) — every transition and view transition reads these ──  */
  --motion-fast: 150ms;
  --motion: 280ms;
  --motion-slow: 520ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --vt-x: 50%;
  /* where the theme reveal grows from — the switch that was pressed */
  --vt-y: 50%;
  --vt-shift: 28px;
  /* how far a pushed screen travels */
  --phone-nav-height: 58px;
  /* the fixed nav under 700px — every screen keeps this + 20px clear under it */
  --font-main: "Inter";
  --font-text: "Instrument Sans";
  --font-mono: "Jetbrains Mono";
  --font-read: "Work Sans";
  --font-article: "IBM Plex Sans";
  --font-logo: "Comfortaa";
  --vh-height: 100dvh;
  --vh-width: 100dvw;
  /* Neutral surface scale — clean whitish, not tinted to green  */
  --background: #eef2f6;
  --service-background: #ffffff;
  --stat-background: #ffffff;
  --gray-background: #e2e8f0;
  --tabs-background: #f6f8fb;
  --holding-background: #f6f8fb;
  --today-background: #e8eef5;
  --review-background: #f6f8fb;
  --verified-background: #e2e8f0;
  --attachment-background: #e2e8f0;
  --unselectable-background: #e2e8f0;
  --item-background: #e2e8f0;
  --morph-background: rgba(15, 23, 42, 0.06);

  /* Brand and semantic color roles: Green as Accent, Gold as Alt */
  --accent-color: #155E29;
  --accent-alt: #1E8240;
  --alt-color: #9a4507;
  --action-color: #155E29;
  --success-color: #137535;
  --error-color: #b91c1c;
  --warn-color: #9a4507;
  --rating-color: #9a4507;
  --anchor-color: #155E29;
  --white-color: #ffffff;
  --dark-white: #f1f5f9;
  --gray-color: #4f5d72;
  --icon-color: #56657a;
  --text-color: #283548;
  --unselectable-color: #758398;
  --nav-color: #4f5d72;
  --label-color: #1e293b;
  --read-color: #0f172a;
  --title-color: #0f172a;

  /* Borders stay visible without outlining every element  */
  --border: 1px solid #c5cfdc;
  --input-border: 1px solid #7d8ba1;
  --input-border-focus: 1px solid #155E29;
  --input-border-error: 1px solid #dc2626;
  --anchor-border: 1px solid #b9c4d2;
  --selected-border: 2px solid #155E29;
  --active-border: 2px solid #155E29;
  --icon-border: 1px solid #b9c4d2;
  --icon-border-active: 1px solid #155E29;
  --action-border: 1px solid #b9c4d2;
  --avatar-border: 1px solid #b9c4d2;
  --error-border: 1px solid rgba(185, 28, 28, 0.45);
  --rating-border: 1px solid rgba(154, 69, 7, 0.45);
  --success-border: 1px solid rgba(21, 128, 61, 0.45);
  --warn-border: 1px solid rgba(154, 69, 7, 0.45);
  --specialist-border: 1px solid rgba(217, 119, 6, 0.6);

  /* Quiet tinted states — clean neutral whitish, not green  */
  --action-background: #edf2f7;
  --button-background: #edf2f7;
  --icon-background: #edf2f7;
  --dot-background: #155E29;
  --que-background: #f6f8fb;
  --tab-background: #e3e9f1;
  --nav-background: #e3e9f1;
  --selected-background: #dfe6ef;
  --upvote-background: #edf2f7;
  --success-background: #ecfdf5;
  --error-background: #fef2f2;
  --warn-background: #fffbeb;
  --rating-background: #fffbeb;
  --offer-background: #fffbeb;
  --withdrawable-background: #f8fafc;
  --loan-background: #fef2f2;
  --revenue-background: #ecfdf5;
  --account-stat-background: #f8fafc;
  --deposit-background: #ecfdf5;
  --withdraw-background: #fef2f2;
  --transfer-background: #f8fafc;
  --payment-background: #fffbeb;
  --payout-background: #ecfdf5;
  --fee-background: #f1f5f9;
  --refund-background: #ecfdf5;
  --bonus-background: #fffbeb;
  --cashback-background: #fffbeb;
  --reversal-background: #fef2f2;
  --hold-background: #f1f5f9;
  --adjustment-background: #f8fafc;
  --subscription-background: #f8fafc;
  --unknown-background: #f1f5f9;
  --cancelled-background: #fef2f2;
  --pending-background: #fffbeb;
  --approved-background: #ecfdf5;
  --cancelled-border: 1px solid rgba(220, 38, 38, 0.3);
  --pending-border: 1px solid rgba(180, 83, 9, 0.3);
  --approved-border: 1px solid rgba(22, 163, 74, 0.3);
  --account-stat-border: 1px solid #c5cfdc;
  --box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px -10px rgba(15, 23, 42, 0.14);
  --modal-shadow: 0 20px 56px -20px rgba(15, 23, 42, 0.25);
  --text-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --header-shadow: 0 1px 0 #c5cfdc;
  --footer-shadow: 0 -1px 0 #c5cfdc;
  --scroll-bar-background: #c5cfdc;
  --scroll-bar-linear: linear-gradient(180deg, #155E29, #1E8240);
  --action-linear: linear-gradient(135deg, #155E29, #1E8240);
  --button-linear: linear-gradient(135deg, #155E29, #0D3E19);
  --light-linear: linear-gradient(90deg, #FBBF24, #D97706);
  --second-linear: linear-gradient(135deg, #F59E0B, #B45309);
  --accent-linear: linear-gradient(135deg, #155E29, #1E8240);
  --tab-linear: linear-gradient(135deg, #ffffff, #f1f5f9);
  --rating-linear: linear-gradient(135deg, #F59E0B, #B45309);
  --warn-linear: linear-gradient(135deg, #F59E0B, #B45309);
  --error-linear: linear-gradient(135deg, #D36658, #B94238);
  --chat-background: #f1f5f9;
  --you-background: #e2e8f0;
  --reply-background: #ffffff;
  --chat-hover: #e2e8f0;
  --chat-you-delivered: var(--accent-color);
  --typing-color: #4f5d72;
  --message-background: linear-gradient(135deg, var(--brand-green), var(--brand-green-deep));
  --pin-text-color: #ffffff;
  --pin-gray-color: #94a3b8;
  --pin-background-even: linear-gradient(135deg, #ffffff, #f1f5f9);
  --pin-background-odd: linear-gradient(135deg, #f8fafc, #e2e8f0);
  --modal-background: #ffffff;
  --modal-border: 1px solid #c5cfdc;
  --modal-overlay: rgba(15, 23, 42, 0.65);
  --image-dimming: unset;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Neutral darkish charcoal / slate, NOT green-accented  */
  --background: #0b0f16;
  --service-background: #161e2a;
  --stat-background: #131a25;
  --gray-background: #212b3a;
  --tabs-background: #131a25;
  --holding-background: #131a25;
  --today-background: #16202e;
  --review-background: #161e2a;
  --verified-background: #1e2633;
  --attachment-background: #1e2633;
  --unselectable-background: #1e2633;
  --item-background: #1e2633;
  --morph-background: rgba(0, 0, 0, 0.6);
  --accent-color: #199044;
  --accent-alt: #16A34A;
  --alt-color: #FBBF24;
  --action-color: #199044;
  --success-color: #1a8e44;
  --error-color: #dc2626;
  --warn-color: #b45309;
  --rating-color: #FBBF24;
  --anchor-color: #22C55E;
  /* white stays white in both themes — it is the text on coloured buttons and pills. The
     dark-mode fills above are mid-tones chosen so white reads on them (≈4–5:1) while they
     still read as text on the dark cards (≈3.5–4:1). */
  --white-color: #ffffff;
  --dark-white: #e2e8f0;
  --gray-color: #9aa8bb;
  --icon-color: #9aa8bb;
  --text-color: #d0d8e3;
  --unselectable-color: #6b7a8f;
  --nav-color: #9aa8bb;
  --label-color: #cbd5e1;
  --read-color: #e2e8f0;
  --title-color: #f8fafc;
  --border: 1px solid #323e50;
  --input-border: 1px solid #5c6b81;
  --input-border-focus: 1px solid #22C55E;
  --input-border-error: 1px solid #f87171;
  --anchor-border: 1px solid #3c4859;
  --selected-border: 2px solid #22C55E;
  --active-border: 2px solid #22C55E;
  --icon-border: 1px solid #323e50;
  --icon-border-active: 1px solid #22C55E;
  --action-border: 1px solid #3c4859;
  --avatar-border: 1px solid rgba(34, 197, 94, 0.4);
  --error-border: 1px solid rgba(248, 113, 113, 0.5);
  --rating-border: 1px solid rgba(245, 158, 11, 0.4);
  --success-border: 1px solid rgba(74, 222, 128, 0.5);
  --warn-border: 1px solid rgba(245, 158, 11, 0.4);
  --specialist-border: 1px solid rgba(251, 191, 36, 0.5);
  --action-background: #18212e;
  --button-background: #1e293b;
  --icon-background: #18212e;
  --dot-background: #22C55E;
  --que-background: #161e2a;
  --tab-background: #1d2735;
  --nav-background: #131a25;
  --selected-background: #222d3d;
  --upvote-background: #18212e;
  --success-background: rgba(34, 197, 94, 0.16);
  --error-background: rgba(239, 68, 68, 0.17);
  --warn-background: rgba(245, 158, 11, 0.16);
  --rating-background: rgba(245, 158, 11, 0.15);
  --offer-background: rgba(245, 158, 11, 0.15);
  --withdrawable-background: #161e2a;
  --loan-background: rgba(239, 68, 68, 0.15);
  --revenue-background: rgba(34, 197, 94, 0.15);
  --account-stat-background: #161e2a;
  --deposit-background: rgba(34, 197, 94, 0.15);
  --withdraw-background: rgba(239, 68, 68, 0.15);
  --transfer-background: #131923;
  --payment-background: rgba(245, 158, 11, 0.15);
  --payout-background: rgba(34, 197, 94, 0.15);
  --fee-background: #131923;
  --refund-background: rgba(34, 197, 94, 0.15);
  --bonus-background: rgba(245, 158, 11, 0.15);
  --cashback-background: rgba(245, 158, 11, 0.15);
  --reversal-background: rgba(239, 68, 68, 0.15);
  --hold-background: #131923;
  --adjustment-background: #131923;
  --subscription-background: #131923;
  --unknown-background: #131923;
  --cancelled-background: rgba(239, 68, 68, 0.15);
  --pending-background: rgba(245, 158, 11, 0.15);
  --approved-background: rgba(34, 197, 94, 0.15);
  --cancelled-border: 1px solid rgba(248, 113, 113, 0.3);
  --pending-border: 1px solid rgba(245, 158, 11, 0.3);
  --approved-border: 1px solid rgba(74, 222, 128, 0.3);
  --account-stat-border: 1px solid #323e50;
  --box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -12px rgba(0, 0, 0, 0.6);
  --modal-shadow: 0 24px 64px -20px rgba(0, 0, 0, 0.8);
  --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  --header-shadow: 0 1px 0 #323e50;
  --footer-shadow: 0 -1px 0 #323e50;
  --scroll-bar-background: #212b3a;
  --scroll-bar-linear: linear-gradient(180deg, #16A34A, #22C55E);
  --action-linear: linear-gradient(135deg, #16A34A, #22C55E);
  --button-linear: linear-gradient(135deg, #166534, #15803D);
  --light-linear: linear-gradient(90deg, #FCD34D, #F59E0B);
  --second-linear: linear-gradient(135deg, #FBBF24, #D97706);
  --accent-linear: linear-gradient(135deg, #15803d, #199044);
  --tab-linear: linear-gradient(135deg, #16202e, #131923);
  --rating-linear: linear-gradient(135deg, #FCD34D, #D97706);
  --warn-linear: linear-gradient(135deg, #FBBF24, #D97706);
  --error-linear: linear-gradient(135deg, #F08A7A, #C95A51);
  --chat-background: #10151f;
  --you-background: #16202e;
  --reply-background: #131923;
  --chat-hover: #1e2633;
  --chat-you-delivered: var(--accent-color);
  --typing-color: #9aa8bb;
  --message-background: linear-gradient(135deg, #1D3C1F, #142D17);
  --pin-text-color: #f8fafc;
  --pin-gray-color: #94a3b8;
  --pin-background-even: linear-gradient(135deg, #10151f, #16202e);
  --pin-background-odd: linear-gradient(135deg, #131923, #1e2633);
  --modal-background: #131923;
  --modal-border: 1px solid #323e50;
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --image-dimming: brightness(.94) saturate(.9);
}

/* Keep keyboard navigation visible; the legacy \`outline: inherit\` hides it.  */

:focus-visible {
  outline: 2px solid var(--accent-color) !important;
  outline-offset: 2px;

}

*,

*:after,

*:before {
  box-sizing: border-box;
  font-family: inherit;
  -webkit-box-sizing: border-box;

}

/* the mouse/touch focus stays quiet; keyboard focus keeps the ring above. This used to be a
   bare `*:focus` with !important AFTER the :focus-visible rule — same specificity, later wins —
   so it erased every keyboard focus ring in the app. */
*:focus:not(:focus-visible) {
  outline: none !important;

}

*::-webkit-scrollbar {
  width: 3px;

}

*::-webkit-scrollbar-track {
  background: var(--scroll-bar-background);

}

*::-webkit-scrollbar-thumb {
  width: 3px;
  background: var(--scroll-bar-linear);
  border-radius: 50px;

}

/**

 Motion — view transitions (UI/MOTION.md)

 ========================================

 The router stamps <html data-vt="swap|push|pop"> for the life of a screen change and

 app.setTheme stamps data-vt="theme"; the named group `flow` is div#content-container in

 the shell. Without the View Transitions API none of this runs and the change just happens.

 */

::view-transition-group(*) {
  animation-duration: var(--motion);
  animation-timing-function: var(--ease);

}

/* the theme: the new one grows in a circle from the switch, the old one stays under it  */

:root[data-vt="theme"]::view-transition-old(root) {
  animation: none;
  mix-blend-mode: normal;

}

:root[data-vt="theme"]::view-transition-new(root) {
  animation: vt-theme-reveal var(--motion-slow) var(--ease) both;
  mix-blend-mode: normal;

}

@keyframes vt-theme-reveal {

  from {
    clip-path: circle(0 at var(--vt-x) var(--vt-y));
  }

  to {
    clip-path: circle(160vmax at var(--vt-x) var(--vt-y));
  }

}

/* a screen for another: the old one fades, the new one rises in  */

:root[data-vt="swap"]::view-transition-old(flow) {
  animation: vt-fade-out var(--motion-fast) var(--ease-in) both;
}

:root[data-vt="swap"]::view-transition-new(flow) {
  animation: vt-rise-in var(--motion) var(--ease) both;
}

/* a record over its feed: it slides in from the right; going back, it slides out the same way  */

:root[data-vt="push"]::view-transition-old(flow) {
  animation: vt-fade-out var(--motion-fast) var(--ease-in) both;
}

:root[data-vt="push"]::view-transition-new(flow) {
  animation: vt-slide-in var(--motion) var(--ease) both;
}

:root[data-vt="pop"]::view-transition-old(flow) {
  animation: vt-slide-out var(--motion) var(--ease-in) both;
}

:root[data-vt="pop"]::view-transition-new(flow) {
  animation: vt-fade-in var(--motion) var(--ease) both;
}

/* the screen's own group never crossfades on top of these  */

:root[data-vt="swap"]::view-transition-group(flow),

:root[data-vt="push"]::view-transition-group(flow),

:root[data-vt="pop"]::view-transition-group(flow) {
  animation: none;
}

@keyframes vt-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes vt-rise-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes vt-slide-in {
  from {
    opacity: 0;
    transform: translateX(var(--vt-shift));
  }
}

@keyframes vt-slide-out {
  to {
    opacity: 0;
    transform: translateX(var(--vt-shift));
  }
}

@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {
    animation: none !important;
  }

}