:root {
  --bank-bg: #070a0f;
  --bank-sidebar: #090d13;
  --bank-panel: #0d131c;
  --bank-panel-2: #101721;
  --bank-input: #090e15;

  --bank-line: rgba(174,190,211,.12);
  --bank-line-strong: rgba(174,190,211,.19);

  --bank-text: #f4f6f9;
  --bank-soft: #aab4c2;
  --bank-muted: #748095;

  --bank-blue: #3979e8;
  --bank-blue-dark: #2862bf;

  --bank-green: #48d49d;
  --bank-red: #ef666d;

  --bank-gold: #d6b15d;
}

/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {
  background: var(--bank-bg) !important;
}

body.brill-private {
  background:
    radial-gradient(circle at 60% -15%,
      rgba(42,76,128,.13),
      transparent 37%),
    linear-gradient(145deg,#070a0f,#080d14 55%,#06090d)
    !important;

  color: var(--bank-text) !important;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif !important;

  -webkit-font-smoothing: antialiased;
}

body.brill-private * {
  box-sizing: border-box;
}

body.brill-private ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

body.brill-private ::-webkit-scrollbar-thumb {
  background: rgba(154,171,194,.20);
  border-radius: 100px;
}

/* =========================================================
   APP SHELL
   ========================================================= */

body.brill-private .app-sidebar {
  background:
    linear-gradient(180deg,#090d13,#070b10)
    !important;

  border-right:
    1px solid var(--bank-line) !important;

  box-shadow:
    18px 0 55px rgba(0,0,0,.20) !important;
}

body.brill-private .app-logo {
  border-radius: 12px !important;

  background:
    linear-gradient(145deg,#18283e,#0c1420)
    !important;

  border:
    1px solid rgba(88,128,190,.30) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05)
    !important;
}

body.brill-private .app-brand strong {
  letter-spacing: .10em;
}

body.brill-private .app-brand small {
  color: #667287 !important;
  letter-spacing: .20em !important;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

body.brill-private .app-nav-item {
  min-height: 48px;

  border-radius: 10px !important;

  border:
    1px solid transparent !important;

  color: #8793a6 !important;

  background: transparent !important;

  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease !important;
}

body.brill-private .app-nav-item:hover {
  background:
    rgba(255,255,255,.025) !important;

  color: #dce2eb !important;
}

body.brill-private .app-nav-item.active {
  background:
    rgba(51,101,188,.11) !important;

  border-color:
    rgba(73,126,220,.20) !important;

  color: white !important;

  box-shadow:
    inset 2px 0 0 var(--bank-blue)
    !important;
}

/* =========================================================
   MAIN HEADER
   ========================================================= */

body.brill-private .app-header {
  border-bottom:
    1px solid var(--bank-line) !important;
}

body.brill-private #appEyebrow {
  color: #648fdc !important;
}

body.brill-private #appTitle {
  font-size: 28px !important;
  font-weight: 650 !important;
  letter-spacing: -.035em !important;
}

body.brill-private .account-chip {
  padding: 6px 9px !important;

  border:
    1px solid var(--bank-line) !important;

  border-radius: 12px !important;

  background:
    rgba(12,18,27,.72) !important;
}

body.brill-private .avatar {
  background:
    linear-gradient(145deg,#367ae7,#285caf)
    !important;

  box-shadow: none !important;
}

/* =========================================================
   ALL PANELS
   ========================================================= */

body.brill-private .panel {
  border:
    1px solid var(--bank-line) !important;

  border-radius: 15px !important;

  background:
    linear-gradient(145deg,#0e151f,#0a0f16)
    !important;

  box-shadow:
    0 22px 55px rgba(0,0,0,.17),
    inset 0 1px 0 rgba(255,255,255,.018)
    !important;
}

body.brill-private .eyebrow {
  color: #6e91cb !important;

  font-size: 9px !important;
  font-weight: 750 !important;

  letter-spacing: .18em !important;
}

body.brill-private h2,
body.brill-private h3 {
  color: var(--bank-text) !important;
  letter-spacing: -.025em;
}

body.brill-private .muted {
  color: var(--bank-muted) !important;
}

/* =========================================================
   OVERVIEW
   ========================================================= */

body.brill-private .balance-card {
  position: relative !important;

  min-height: 365px !important;

  padding-right: 430px !important;

  overflow: hidden !important;

  border:
    1px solid rgba(152,170,195,.14) !important;

  background:
    radial-gradient(circle at 5% 0%,
      rgba(44,91,171,.13),
      transparent 40%),
    linear-gradient(145deg,
      #111923,
      #0d141d 55%,
      #090e15)
    !important;

  box-shadow:
    0 27px 65px rgba(0,0,0,.22)
    !important;
}

body.brill-private .balance-number strong {
  color: #fafbfc !important;

  font-size: clamp(45px,4vw,64px) !important;
  font-weight: 590 !important;

  letter-spacing: -.055em !important;

  text-shadow: none !important;
}

body.brill-private .balance-number span {
  color: #aab4c2 !important;
}

body.brill-private .balance-card .status {
  color: var(--bank-green) !important;

  background:
    rgba(49,188,134,.07) !important;

  border:
    1px solid rgba(74,211,160,.13) !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */

body.brill-private .btn {
  border-radius: 9px !important;

  font-weight: 650 !important;

  box-shadow: none !important;
}

body.brill-private .btn-primary,
body.brill-private .btn-light {
  color: white !important;

  border:
    1px solid rgba(91,143,230,.38) !important;

  background:
    linear-gradient(180deg,
      #3979e8,
      #2964c1)
    !important;

  box-shadow:
    0 8px 22px rgba(37,93,185,.18)
    !important;
}

body.brill-private .btn-ghost,
body.brill-private .btn-outline-light {
  color: #d4dbe5 !important;

  border:
    1px solid var(--bank-line-strong) !important;

  background:
    #101721 !important;
}

/* =========================================================
   REAL BANK CARD
   ========================================================= */

#privateBankCard {
  position: absolute;

  width: 365px;

  right: 25px;
  top: 50%;

  transform: translateY(-50%);

  z-index: 4;
}

.private-card-label {
  margin: 0 3px 9px;

  display: flex;
  justify-content: space-between;

  color: #778396;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: .13em;
  text-transform: uppercase;
}

.private-tier {
  color: var(--bank-gold);
}

.private-card {
  position: relative;

  aspect-ratio: 1.586/1;

  padding: 22px;

  overflow: hidden;

  border-radius: 17px;

  border:
    1px solid rgba(211,173,90,.35);

  background:
    radial-gradient(circle at 100% 0%,
      rgba(195,153,69,.23),
      transparent 35%),
    linear-gradient(145deg,
      #252117,
      #16140f 47%,
      #0c0d0f);

  box-shadow:
    0 27px 58px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(245,220,163,.11);
}

.private-card::before {
  content: "";

  position: absolute;

  width: 280px;
  height: 280px;

  right: -120px;
  top: -120px;

  border-radius: 50%;

  border:
    1px solid rgba(255,255,255,.06);

  box-shadow:
    0 0 0 40px rgba(255,255,255,.012),
    0 0 0 80px rgba(255,255,255,.008);
}

.private-card-top,
.private-card-bottom {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: space-between;
}

.private-card-bank {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

.private-card-level {
  margin-top: 4px;

  color: var(--bank-gold);

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .20em;
}

.private-card-contactless {
  color: #d0ad62;
  font-size: 23px;
  opacity: .65;
}

.private-chip {
  position: relative;
  z-index: 2;

  width: 43px;
  height: 32px;

  margin-top: 25px;

  border-radius: 7px;

  background:
    linear-gradient(145deg,
      #e9cf78,
      #b28934 58%,
      #e2c66b);
}

.private-card-number {
  position: relative;
  z-index: 2;

  margin-top: 17px;

  font-family:
    Consolas,
    "SFMono-Regular",
    monospace;

  font-size: 15px;
  font-weight: 500;

  letter-spacing: .105em;
}

.private-card-bottom {
  margin-top: 21px;
  align-items: flex-end;
}

.private-card-small {
  color: rgba(225,231,239,.44);

  font-size: 6px;
  font-weight: 700;
  letter-spacing: .14em;
}

.private-card-value {
  margin-top: 4px;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .10em;
}

/* =========================================================
   ACCOUNT SUMMARY
   ========================================================= */

body.brill-private .account-summary {
  background:
    linear-gradient(145deg,
      #0f161f,
      #0a1017)
    !important;
}

body.brill-private .account-summary dl > div,
body.brill-private .profile-list > div {
  min-height: 52px;

  border-bottom:
    1px solid rgba(172,188,209,.09)
    !important;
}

body.brill-private dt {
  color: var(--bank-muted) !important;
}

body.brill-private dd {
  color: #edf0f4 !important;
}

body.brill-private .positive {
  color: var(--bank-green) !important;
}

/* =========================================================
   TOPUP PAGE
   ========================================================= */

body.brill-private #view-topup .two-col {
  align-items: start;
}

body.brill-private #view-topup .panel {
  min-height: 100%;
}

body.brill-private #topupForm {
  margin-top: 26px;
}

body.brill-private .quote-box {
  margin: 8px 0 18px;

  padding: 18px;

  border:
    1px solid rgba(175,191,211,.11) !important;

  border-radius: 11px !important;

  background:
    #090e15 !important;
}

body.brill-private .quote-box span {
  color: var(--bank-muted) !important;
}

body.brill-private .quote-box strong {
  color: #f0f3f7 !important;
  font-size: 19px !important;
}

body.brill-private #paymentProviderNotice {
  border:
    1px solid rgba(184,197,214,.10) !important;

  border-radius: 10px !important;

  background:
    #090e15 !important;

  color: #8591a3 !important;
}

/* =========================================================
   TRANSFER PAGE
   ========================================================= */

body.brill-private #view-transfer .panel {
  max-width: 760px;
}

body.brill-private #recipientPreview {
  min-height: 58px;

  padding: 14px 15px;

  display: flex;
  align-items: center;

  border:
    1px solid rgba(176,192,212,.11) !important;

  border-radius: 10px !important;

  background:
    #090e15 !important;

  color: #8190a4 !important;
}

/* =========================================================
   FORM FIELDS
   ========================================================= */

body.brill-private .form {
  gap: 16px !important;
}

body.brill-private .form label {
  color: #aab4c2 !important;

  font-size: 10px !important;
  font-weight: 650 !important;
}

body.brill-private input,
body.brill-private select,
body.brill-private textarea {
  min-height: 46px;

  margin-top: 7px !important;

  color: #f0f3f7 !important;

  border:
    1px solid rgba(175,191,212,.15) !important;

  border-radius: 8px !important;

  background:
    var(--bank-input) !important;

  outline: none !important;
}

body.brill-private input:focus,
body.brill-private select:focus,
body.brill-private textarea:focus {
  border-color:
    rgba(69,121,216,.55) !important;

  box-shadow:
    0 0 0 3px rgba(56,108,200,.08)
    !important;
}

/* =========================================================
   HISTORY / BANK STATEMENT
   ========================================================= */

body.brill-private #view-history .panel {
  min-height: 560px;
}

body.brill-private .transaction-list {
  margin-top: 12px;
}

body.brill-private .transaction-item {
  min-height: 64px;

  border-top:
    1px solid rgba(173,189,209,.08)
    !important;

  background: transparent !important;
}

body.brill-private .transaction-item:hover {
  background:
    rgba(255,255,255,.012) !important;
}

body.brill-private .empty {
  color: #69768a !important;
}

/* =========================================================
   ACCOUNT PAGE
   ========================================================= */

body.brill-private #view-account .profile-list {
  margin-top: 22px;
}

body.brill-private #view-account .info-panel {
  background:
    linear-gradient(145deg,
      #0e151e,
      #0a0f16)
    !important;
}

/* =========================================================
   AUTH / LOGIN
   ========================================================= */

body.brill-private .modal-backdrop {
  backdrop-filter: blur(10px);
}

body.brill-private .modal {
  border:
    1px solid rgba(174,190,211,.15)
    !important;

  border-radius: 16px !important;

  background:
    linear-gradient(145deg,#0e151f,#090e15)
    !important;

  box-shadow:
    0 40px 100px rgba(0,0,0,.65)
    !important;
}

body.brill-private .auth-tabs {
  padding: 4px;

  border:
    1px solid var(--bank-line) !important;

  border-radius: 9px !important;

  background:
    #090e15 !important;
}

body.brill-private .auth-tabs button.active {
  background:
    #162235 !important;

  color: white !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1250px) {
  body.brill-private .balance-card {
    padding-right: 380px !important;
  }

  #privateBankCard {
    width: 325px;
  }
}

@media (max-width: 1050px) {
  body.brill-private .balance-card {
    min-height: 650px !important;
    padding-right: initial !important;
    padding-bottom: 330px !important;
  }

  #privateBankCard {
    left: 25px;
    right: auto;
    top: auto;
    bottom: 20px;

    transform: none;
  }
}

@media (max-width: 650px) {
  #privateBankCard {
    width: calc(100% - 30px);
    left: 15px;
  }

  body.brill-private .balance-card {
    padding-bottom: 300px !important;
  }
}