:root {
  --navy: #071a2e;
  --navy2: #0b2641;
  --gold: #cda964;
  --gold2: #ead19d;
  --paper: #f5f7f8;
  --white: #fff;
  --ink: #152638;
  --muted: #71808e;
  --line: #e2e7ea;
  --green: #1e9270;
  --red: #c7525b;
  --blue: #1f5d85;
}
* {
  box-sizing: border-box;
}
html:not([data-i18n-ready="1"]) .language-select,
html:not([data-i18n-ready="1"]) [data-i18n] {
  visibility: hidden;
}

html:not([data-i18n-ready="1"]) [data-i18n-placeholder]::placeholder {
  color: transparent;
}

body {
  margin: 0;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
.auth-body {
  background: #eef2f4;
}
.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 55% 45%;
  background: white;
}
.auth-visual {
  position: relative;
  overflow: hidden;
  padding: 50px 6vw;
  color: white;
  background:
    radial-gradient(circle at 80% 28%, #15547b 0, transparent 30%),
    linear-gradient(145deg, #06192c, #0a2b48 65%, #071928);
}
.auth-visual:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.09;
  background-image:
    linear-gradient(#fff 1px, transparent 1px),
    linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(120deg, #000, transparent 75%);
}
.auth-logo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  color: white;
  text-decoration: none;
}
.auth-logo > span,
.side-logo > span {
  width: 43px;
  height: 43px;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  color: var(--gold2);
  font: 600 23px Georgia;
  transform: rotate(45deg);
}
.auth-logo b {
  letter-spacing: 4px;
  font-size: 17px;
}
.auth-logo small,
.side-logo small {
  display: block;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 4px;
  margin-top: 4px;
}
.auth-copy {
  position: relative;
  margin-top: 25vh;
  max-width: 590px;
}
.kicker {
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--gold2);
  font-weight: 700;
}
.kicker.dark {
  color: #9b7744;
}
.auth-copy h1 {
  font-size: 50px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 3px;
  margin: 20px 0;
}
.auth-copy h1 em {
  font-style: normal;
  color: var(--gold2);
}
.auth-copy > p:nth-of-type(2) {
  color: #aab9c6;
  line-height: 2;
  font-size: 14px;
}
.auth-points {
  display: flex;
  gap: 25px;
  margin-top: 35px;
  font-size: 11px;
  color: #c5ced7;
}
.auth-points span:first-letter {
  color: var(--gold);
}
.auth-orbit {
  position: absolute;
  width: 440px;
  height: 440px;
  border: 1px solid #ffffff15;
  border-radius: 50%;
  right: -160px;
  bottom: -120px;
}
.auth-orbit:before,
.auth-orbit:after {
  content: "";
  position: absolute;
  border: 1px solid #ffffff10;
  border-radius: 50%;
}
.auth-orbit:before {
  inset: 55px;
}
.auth-orbit:after {
  inset: 115px;
}
.auth-orbit > div {
  position: absolute;
  left: 105px;
  top: 90px;
  width: 90px;
  height: 105px;
  clip-path: polygon(50% 0, 94% 19%, 85% 74%, 50% 100%, 15% 74%, 6% 19%);
  background: linear-gradient(145deg, #cda964, #8e6a36);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 25px;
}
.auth-orbit small {
  font-size: 6px;
  letter-spacing: 2px;
}
.auth-orbit i {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 7px #cda96420;
}
.auth-orbit i:nth-child(1) {
  left: 45px;
  top: 90px;
}
.auth-orbit i:nth-child(2) {
  left: 235px;
  top: 30px;
}
.auth-orbit i:nth-child(3) {
  left: 300px;
  top: 225px;
}
.auth-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 7vw;
  position: relative;
}
.auth-form-wrap {
  width: 100%;
  max-width: 430px;
}
.back {
  position: absolute;
  top: 35px;
  color: #657584;
  text-decoration: none;
  font-size: 11px;
}
.auth-form-wrap h2 {
  font-size: 30px;
  margin: 12px 0 8px;
}
.sub {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 35px;
}
.auth-form-wrap label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  margin: 20px 0 7px;
}
.input {
  height: 49px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 14px;
  transition: 0.2s;
}
.input:focus-within {
  border-color: #9b7744;
  box-shadow: 0 0 0 3px #cda96415;
}
.input > span {
  color: #8694a0;
  margin-right: 10px;
}
.input input {
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 0;
}
.input button {
  border: 0;
  background: none;
  color: #8b754f;
  font-size: 10px;
}
.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  margin: 15px 0 23px;
}
.form-row label {
  margin: 0;
  font-weight: 400;
}
.form-row a,
.signup a {
  color: #936e37;
}
.submit {
  width: 100%;
  height: 51px;
  border: 0;
  color: #092039;
  background: linear-gradient(100deg, #cba65f, #ead09b);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  font-weight: 600;
}
.demo-note {
  display: flex;
  gap: 10px;
  background: #f4f7f8;
  border-left: 3px solid var(--gold);
  padding: 12px;
  margin-top: 18px;
}
.demo-note b {
  font-size: 10px;
  white-space: nowrap;
  color: #8b692f;
}
.demo-note span {
  font-size: 9px;
  line-height: 1.6;
  color: #74818d;
}
.signup {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin-top: 25px;
}
.auth-panel footer {
  position: absolute;
  bottom: 20px;
  color: #9ca6ae;
  font-size: 8px;
}
.login-toast,
.app-toast {
  position: fixed;
  right: 25px;
  bottom: 25px;
  background: #102b43;
  color: white;
  padding: 13px 20px;
  border-radius: 8px;
  transform: translateY(100px);
  opacity: 0;
  transition: 0.25s;
  z-index: 100;
  font-size: 11px;
}
.login-toast.show,
.app-toast.show {
  transform: none;
  opacity: 1;
}
.portal-body {
  background: #f3f6f7;
  min-height: 100vh;
}
.side {
  position: fixed;
  inset: 0 auto 0 0;
  width: 245px;
  background: var(--navy);
  color: #fff;
  padding: 25px 17px 18px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.side-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  padding: 3px 10px 30px;
}
.side-logo > span {
  width: 34px;
  height: 34px;
  font-size: 18px;
}
.side-logo b {
  font-size: 14px;
  letter-spacing: 3px;
}
.side nav p {
  font-size: 8px;
  color: #637486;
  letter-spacing: 2px;
  margin: 22px 13px 9px;
}
.side-link {
  width: 100%;
  height: 43px;
  border: 0;
  background: transparent;
  color: #91a0ae;
  border-radius: 5px;
  text-align: left;
  padding: 0 12px;
  margin: 2px 0;
}
.side-link i {
  display: inline-block;
  width: 25px;
  font-style: normal;
  font-size: 16px;
}
.side-link:hover,
.side-link.active {
  background: #102f4b;
  color: #fff;
}
.side-link.active {
  box-shadow: inset 3px 0 var(--gold);
}
.side-help {
  margin-top: auto;
  background: #0d2b45;
  border: 1px solid #183c59;
  padding: 15px;
  border-radius: 5px;
}
.side-help b {
  font-size: 11px;
}
.side-help p {
  font-size: 9px;
  color: #8292a1;
  line-height: 1.6;
}
.side-help button {
  height: 30px;
  width: 100%;
  border: 1px solid #cda96455;
  background: transparent;
  color: var(--gold2);
  font-size: 9px;
}
.side-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 17px 4px 0;
  margin-top: 12px;
  border-top: 1px solid #ffffff12;
}
.side-user > span,
.top-profile > span {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: linear-gradient(145deg, #cda964, #8b6935);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
}
.side-user div {
  flex: 1;
}
.side-user b {
  font-size: 10px;
  display: block;
}
.side-user small {
  font-size: 8px;
  color: #738595;
}
.side-user button {
  border: 0;
  background: none;
  color: #8294a3;
}
.portal-main {
  margin-left: 245px;
  min-height: 100vh;
}
.topbar {
  height: 82px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0 30px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar h1 {
  font-size: 20px;
  margin: 0;
}
.topbar > div:first-of-type p {
  font-size: 9px;
  color: var(--muted);
  margin: 5px 0 0;
}
.top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-btn,
.bell {
  height: 36px;
  border: 1px solid var(--line);
  background: #fff;
  color: #6e7e8c;
}
.search-btn {
  padding: 0 12px;
}
.bell {
  width: 36px;
  position: relative;
}
.bell i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c85259;
  right: 8px;
  top: 7px;
}
.top-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 1px solid var(--line);
  padding-left: 15px;
  margin-left: 5px;
}
.top-profile b,
.top-profile small {
  display: block;
}
.top-profile b {
  font-size: 10px;
}
.top-profile small {
  font-size: 8px;
  color: var(--muted);
}
.mobile-menu {
  display: none;
}
.app-page {
  display: none;
  padding: 25px 30px 40px;
  max-width: 1500px;
  margin: auto;
}
.app-page.active {
  display: block;
}
.welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0 18px;
}
.welcome p {
  font-size: 10px;
  color: var(--muted);
  margin: 0;
}
.welcome h2 {
  font-size: 21px;
  margin: 6px 0;
}
.welcome > span {
  background: #e9f4f0;
  color: var(--green);
  font-size: 9px;
  padding: 8px 12px;
  border-radius: 20px;
}
.welcome > span i {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  margin-right: 6px;
}
.overview-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
}
.balance-card {
  min-height: 255px;
  background:
    radial-gradient(circle at 90% 0, #1f5374 0, transparent 42%),
    linear-gradient(130deg, #061a2e, #0a2a45);
  color: #fff;
  padding: 23px;
  border-radius: 9px;
  position: relative;
  overflow: hidden;
}
.balance-card:after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border: 1px solid #ffffff12;
  border-radius: 50%;
  right: -110px;
  top: -50px;
}
.bc-top {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  letter-spacing: 2px;
  color: #9aaab8;
}
.bc-top button {
  border: 0;
  background: none;
  color: #fff;
}
.balance-card > p {
  font-size: 9px;
  color: #8fa0af;
  margin: 35px 0 8px;
}
.balance-card > h2 {
  font-size: 31px;
  margin: 0;
  font-weight: 500;
}
.balance-change {
  color: #5bd0aa;
  font-size: 9px;
  margin-top: 8px;
}
.balance-change span {
  color: #8293a1;
}
.bc-bottom {
  position: absolute;
  left: 23px;
  right: 23px;
  bottom: 20px;
  border-top: 1px solid #ffffff17;
  padding-top: 14px;
  display: flex;
  align-items: end;
  gap: 30px;
  z-index: 2;
}
.bc-bottom span,
.bc-bottom b {
  display: block;
}
.bc-bottom span {
  font-size: 8px;
  color: #8294a2;
}
.bc-bottom b {
  font-size: 12px;
  margin-top: 4px;
}
.bc-bottom button {
  margin-left: auto;
  background: #cda964;
  color: #061a2e;
  border: 0;
  height: 32px;
  padding: 0 13px;
  font-size: 9px;
}
.fx-card,
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.card-head h3 {
  font-size: 13px;
  margin: 0;
}
.card-head p {
  font-size: 8px;
  color: var(--muted);
  margin: 5px 0;
}
.card-head button {
  border: 0;
  background: none;
  color: #966f37;
  font-size: 9px;
}
.currency-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(110px, auto);
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #eef1f3;
}
.currency-row:last-child {
  border: 0;
}
.currency-row > span {
  display: inline-flex;
  width: 54px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e3e9ee;
  border-radius: 6px;
  color: var(--blue);
  background: #f8fafb;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
.currency-row b,
.currency-row small {
  display: block;
}
.currency-row b {
  font-size: 10px;
}
.currency-row small {
  font-size: 8px;
  color: var(--muted);
}
.currency-row > div:last-child {
  text-align: right;
  min-width: 0;
}
.currency-row > div:last-child b {
  font-size: 11px;
}
.quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.quick button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 7px;
  padding: 13px;
  display: flex;
  text-align: left;
  align-items: center;
  gap: 10px;
}
.quick button:hover {
  border-color: #b79b69;
}
.quick i {
  width: 35px;
  height: 35px;
  background: #eef3f5;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #8f6a34;
  font-style: normal;
}
.quick b,
.quick small {
  display: block;
}
.quick b {
  font-size: 10px;
}
.quick small {
  font-size: 8px;
  color: var(--muted);
  margin-top: 4px;
}
.content-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr;
  gap: 16px;
}
.tx-item {
  display: grid;
  grid-template-columns: 35px 1fr auto;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #edf0f2;
}
.tx-item:last-child {
  border: 0;
}
.tx-icon {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #edf3f5;
  color: #315f7d;
}
.tx-item b,
.tx-item small {
  display: block;
}
.tx-item b {
  font-size: 9px;
}
.tx-item small {
  font-size: 8px;
  color: var(--muted);
  margin-top: 3px;
}
.tx-amount {
  text-align: right;
}
.tx-amount.income b {
  color: var(--green);
}
.spend-chart {
  width: 145px;
  height: 145px;
  border-radius: 50%;
  margin: 20px auto;
  background: conic-gradient(var(--gold) 0 38%, #275879 38% 69%, #61a7a1 69%);
  display: grid;
  place-items: center;
}
.spend-chart:after {
  content: "";
  position: absolute;
}
.spend-chart > div {
  width: 103px;
  height: 103px;
  background: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
}
.spend-chart b,
.spend-chart span {
  display: block;
  text-align: center;
}
.spend-chart b {
  font-size: 12px;
}
.spend-chart span {
  font-size: 7px;
  color: var(--muted);
}
.spend-legend {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 7px;
  color: var(--muted);
}
.spend-legend i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 3px;
}
.page-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px 0 22px;
}
.page-intro h2 {
  font-size: 21px;
  margin: 0;
}
.page-intro p {
  color: var(--muted);
  font-size: 9px;
}
.primary-action {
  height: 37px;
  border: 0;
  background: #0c2c47;
  color: #fff;
  padding: 0 16px;
  font-size: 9px;
}
.account-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 18px;
}
.account-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.account-option {
  background: #fff;
  border: 1px solid var(--line);
  padding: 17px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(120px, auto);
  align-items: center;
  gap: 12px;
  text-align: left;
  border-radius: 7px;
}
.account-option.active {
  border-color: #a88a55;
  box-shadow: 0 3px 15px #27384610;
}
.account-option > span {
  display: inline-flex;
  width: 54px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e3e9ee;
  border-radius: 6px;
  color: var(--blue);
  background: #f8fafb;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
.account-option b,
.account-option small {
  display: block;
}
.account-option b {
  font-size: 10px;
}
.account-option small {
  font-size: 8px;
  color: var(--muted);
  margin-top: 4px;
}
.account-option > div:last-child {
  text-align: right;
  min-width: 0;
}
.account-option > div:last-child b {
  font-size: 12px;
}
.account-option em {
  font-style: normal;
  color: var(--red);
  font-size: 7px;
}
.account-detail {
  padding: 25px;
}

.password-panel {
  grid-column: 2;
}

.password-panel .card-head i {
  color: #8f6a34;
  width: 22px;
  height: 22px;
}

.password-form {
  display: grid;
  gap: 13px;
  margin-top: 18px;
}

.password-form label {
  display: grid;
  gap: 7px;
  font-size: 9px;
  font-weight: 700;
}

.password-form input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  padding: 0 11px;
}

.password-form input:focus {
  border-color: #a88a55;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(205, 169, 100, 0.16);
}

.password-form .primary-action {
  width: fit-content;
}

.password-form .form-note {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.6;
}
.detail-top {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--muted);
}
.status {
  font-size: 8px;
  padding: 5px 8px;
  border-radius: 12px;
}
.status.good {
  background: #e8f4f0;
  color: var(--green);
}
.account-detail h3 {
  font-size: 18px;
  margin: 25px 0 5px;
}
.account-detail > p {
  font-size: 9px;
  color: var(--muted);
}
.detail-balance {
  background: #f5f7f8;
  padding: 18px;
  margin: 20px 0;
}
.detail-balance span,
.detail-balance b,
.detail-balance small {
  display: block;
}
.detail-balance span {
  font-size: 8px;
  color: var(--muted);
}
.detail-balance b {
  font-size: 24px;
  margin: 5px 0;
}
.detail-balance small {
  font-size: 8px;
  color: var(--green);
}
dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}
dl > div {
  padding: 13px 0;
  border-bottom: 1px solid #edf0f2;
}
dt {
  font-size: 8px;
  color: var(--muted);
}
dd {
  font-size: 10px;
  margin: 5px 0 0;
}
.green {
  color: var(--green);
}
.detail-actions {
  display: flex;
  gap: 9px;
  margin-top: 22px;
}
.detail-actions button {
  height: 34px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0 13px;
  font-size: 9px;
}
.detail-actions .danger {
  border-color: #e2b7ba;
  color: var(--red);
}
.tx-filters {
  display: flex;
  gap: 9px;
  margin-bottom: 14px;
  padding: 12px;
}
.searchbox {
  flex: 1;
  border: 1px solid var(--line);
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #7e8a94;
}
.searchbox input {
  border: 0;
  outline: 0;
  flex: 1;
  margin-left: 8px;
  font-size: 9px;
}
.tx-filters select,
.tx-filters > button {
  border: 1px solid var(--line);
  background: #fff;
  padding: 0 13px;
  font-size: 9px;
  color: #697987;
}
.tx-table {
  overflow: auto;
  padding: 5px 18px;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 740px;
}
th,
td {
  text-align: left;
  border-bottom: 1px solid #edf0f2;
  padding: 14px 10px;
  font-size: 9px;
}
th {
  color: var(--muted);
  font-weight: 500;
}
td strong,
td small {
  display: block;
}
td small {
  color: var(--muted);
  margin-top: 3px;
}
.amount-in {
  color: var(--green);
}
.amount-out {
  color: var(--ink);
}
.cards-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
}
.bank-cards {
  min-height: 480px;
  position: relative;
  background: radial-gradient(circle at 50% 50%, #dfe8e9, #f4f6f6 65%);
  border-radius: 9px;
  display: grid;
  place-items: center;
}
.bank-card {
  position: absolute;
  width: 370px;
  height: 220px;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 25px 45px #10263c35;
  transition: 0.3s;
}
.bank-card.emerald {
  background: linear-gradient(140deg, #083f3a, #0d5b50);
  color: #fff;
  transform: rotate(-5deg) translate(-15px, -35px);
  z-index: 2;
}
.bank-card.ivory {
  background: linear-gradient(140deg, #f4ebd8, #d5b67b);
  color: #23313b;
  transform: rotate(6deg) translate(30px, 55px);
}
.bank-card > div {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 2px;
}
.bank-card > i {
  display: block;
  width: 41px;
  height: 31px;
  border-radius: 5px;
  margin-top: 38px;
  background: linear-gradient(135deg, #dfc17d, #9c7b3d);
  position: relative;
}
.bank-card > i:after {
  content: ")))";
  position: absolute;
  left: 47px;
  top: 5px;
  letter-spacing: -3px;
  transform: rotate(90deg);
}
.bank-card > p {
  font-size: 17px;
  letter-spacing: 2px;
}
.bank-card footer {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
}
.bank-card small {
  display: block;
  font-size: 6px;
  opacity: 0.7;
  margin-bottom: 3px;
}
.card-controls {
  padding: 25px;
}
.control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #edf0f2;
  padding: 18px 0;
}
.control-row > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.control-row i {
  font-style: normal;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef3f4;
  display: grid;
  place-items: center;
  color: #7f693f;
}
.control-row b,
.control-row small {
  display: block;
}
.control-row b {
  font-size: 10px;
}
.control-row small {
  font-size: 8px;
  color: var(--muted);
  margin-top: 4px;
}
.switch input {
  display: none;
}
.switch span {
  display: block;
  width: 35px;
  height: 19px;
  background: #cfd7dc;
  border-radius: 12px;
  position: relative;
}
.switch span:after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  left: 2px;
  top: 2px;
  transition: 0.2s;
}
.switch input:checked + span {
  background: var(--green);
}
.switch input:checked + span:after {
  left: 18px;
}
.block-card {
  width: 100%;
  height: 38px;
  background: #fff;
  border: 1px solid #dca8ac;
  color: var(--red);
  margin-top: 25px;
  font-size: 9px;
}
.security-score {
  background: #eaf3f1;
  color: var(--green);
  padding: 10px 14px;
  font-size: 9px;
}
.security-score b {
  font-size: 17px;
}
.security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.security-grid h3 {
  font-size: 13px;
  margin: 0 0 18px;
}
.security-item,
.device {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid #edf0f2;
}
.security-item i,
.device > i {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
}
.security-item i.ok {
  background: #e9f4f0;
  color: var(--green);
}
.security-item i.warn {
  background: #fff3df;
  color: #d5962c;
}
.security-item span,
.device span {
  flex: 1;
}
.security-item b,
.security-item small,
.device b,
.device small {
  display: block;
}
.security-item b,
.device b {
  font-size: 9px;
}
.security-item small,
.device small {
  font-size: 8px;
  color: var(--muted);
  margin-top: 4px;
}
.security-item button,
.device button {
  border: 0;
  background: none;
  color: #956f38;
  font-size: 8px;
}
.device em {
  font-style: normal;
  color: var(--green);
  font-size: 8px;
}
.chat-fab {
  position: fixed;
  right: 24px;
  bottom: 22px;
  width: 51px;
  height: 51px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(145deg, #d7b56d, #a27b3d);
  color: #071a2e;
  font-size: 22px;
  z-index: 31;
  box-shadow: 0 10px 25px #071a2e35;
}
.chat-fab i {
  position: absolute;
  right: 3px;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38b78b;
  border: 2px solid white;
}
.chat-box {
  position: fixed;
  right: 24px;
  bottom: 84px;
  width: 320px;
  height: 430px;
  background: #fff;
  border-radius: 10px;
  z-index: 30;
  box-shadow: 0 20px 60px #071a2e35;
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
  overflow: hidden;
}
.chat-box.open {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.chat-box header {
  background: var(--navy);
  color: white;
  padding: 15px;
  display: flex;
  justify-content: space-between;
}
.chat-box header > div {
  display: flex;
  gap: 9px;
  align-items: center;
}
.chat-box header > div > span {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--gold);
  display: grid;
  place-items: center;
  color: var(--navy);
  font-size: 9px;
}
.chat-box header p {
  margin: 0;
}
.chat-box header b,
.chat-box header small {
  display: block;
  font-size: 9px;
}
.chat-box header small {
  color: #8fa0ad;
  margin-top: 3px;
}
.chat-box header small i {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3ec398;
}
.chat-box header button {
  background: none;
  border: 0;
  color: white;
  font-size: 18px;
}
.messages {
  flex: 1;
  background: #f4f6f7;
  padding: 15px;
  overflow: auto;
}

.support-contact-options {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.support-contact-options[hidden] {
  display: none;
}

.support-contact-link {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #f8fafb;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
}

.support-contact-link:hover {
  border-color: #d7b56d;
  color: #8c6933;
  background: #fffaf0;
}

.support-contact-link small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 600;
}
.agent,
.customer {
  max-width: 83%;
  padding: 10px 12px;
  font-size: 9px;
  line-height: 1.6;
  border-radius: 8px;
  margin: 5px 0;
}
.agent {
  background: #fff;
}
.customer {
  background: #0c2b46;
  color: white;
  margin-left: auto;
}
.messages time {
  display: block;
  color: #9aa5ad;
  font-size: 7px;
  margin-top: 4px;
}
.chat-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}
.chat-options button {
  border: 1px solid #d9c59c;
  background: #fff;
  color: #8c6933;
  border-radius: 13px;
  font-size: 8px;
  padding: 5px 8px;
}
.chat-box form {
  height: 54px;
  display: flex;
  padding: 9px;
  border-top: 1px solid var(--line);
}
.chat-box form input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 9px;
}
.chat-box form button {
  width: 34px;
  border: 0;
  background: var(--gold);
  border-radius: 50%;
}
.modal {
  position: fixed;
  inset: 0;
  background: #06182cab;
  backdrop-filter: blur(4px);
  z-index: 50;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  padding: 15px;
}
.modal.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-card {
  width: 100%;
  max-width: 430px;
  background: #fff;
  border-radius: 10px;
  padding: 28px;
  position: relative;
}
.modal-close {
  position: absolute;
  right: 15px;
  top: 12px;
  border: 0;
  background: none;
  font-size: 18px;
}
.modal-icon {
  width: 48px;
  height: 48px;
  background: #edf3f5;
  color: #245978;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.modal-card h3 {
  font-size: 17px;
  margin: 15px 0 7px;
}
.modal-card > p {
  font-size: 9px;
  color: var(--muted);
  line-height: 1.7;
}
.modal-card label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  margin-top: 15px;
}
.modal-card select,
.money-input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--line);
  margin-top: 6px;
  background: #fff;
  padding: 0 10px;
}
.money-input {
  display: flex;
  align-items: center;
}
.money-input input {
  border: 0;
  outline: 0;
  flex: 1;
  margin-left: 8px;
}
.modal-actions {
  display: flex;
  gap: 9px;
  margin-top: 24px;
}
.modal-actions button {
  flex: 1;
  height: 39px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 9px;
}
@media (max-width: 1000px) {
  .auth-shell {
    grid-template-columns: 48% 52%;
  }
  .auth-copy h1 {
    font-size: 40px;
  }
  .overview-grid,
  .content-grid,
  .cards-layout {
    grid-template-columns: 1fr;
  }
  .quick {
    grid-template-columns: 1fr 1fr;
  }
  .account-layout {
    grid-template-columns: 1fr;
  }
  .password-panel {
    grid-column: auto;
  }
  .bank-cards {
    min-height: 470px;
  }
}
@media (max-width: 760px) {
  .auth-shell {
    display: block;
  }
  .auth-visual {
    min-height: 260px;
    padding: 25px;
  }
  .auth-copy {
    margin-top: 55px;
  }
  .auth-copy h1 {
    font-size: 28px;
  }
  .auth-copy > p:nth-of-type(2),
  .auth-points {
    display: none;
  }
  .auth-panel {
    padding: 55px 25px 80px;
  }
  .back {
    top: 22px;
  }
  .side {
    transform: translateX(-100%);
    transition: 0.25s;
  }
  .side.open {
    transform: none;
  }
  .portal-main {
    margin-left: 0;
  }
  .topbar {
    height: 70px;
    padding: 0 15px;
  }
  .mobile-menu {
    display: block;
    border: 0;
    background: none;
    font-size: 19px;
    margin-right: 10px;
  }
  .top-actions .search-btn,
  .top-actions .top-profile {
    display: none;
  }
  .app-page {
    padding: 18px 15px 35px;
  }
  .welcome h2 {
    font-size: 17px;
  }
  .welcome > span {
    display: none;
  }
  .overview-grid {
    gap: 10px;
  }
  .quick {
    gap: 8px;
  }
  .quick button {
    padding: 10px;
  }
  .bc-bottom {
    gap: 15px;
  }
  .bc-bottom button {
    font-size: 8px;
  }
  .page-intro h2 {
    font-size: 18px;
  }
  .primary-action {
    padding: 0 10px;
  }
  .account-detail {
    padding: 18px;
  }
  .tx-filters {
    overflow: auto;
  }
  .tx-filters > * {
    min-width: 105px;
  }
  .searchbox {
    min-width: 210px;
  }
  .security-grid {
    grid-template-columns: 1fr;
  }
  .bank-cards {
    min-height: 355px;
    overflow: hidden;
  }
  .bank-card {
    width: 290px;
    height: 173px;
    padding: 18px;
  }
  .bank-card > i {
    margin-top: 20px;
  }
  .bank-card > p {
    font-size: 13px;
  }
  .bank-card.emerald {
    transform: rotate(-5deg) translate(-5px, -28px);
  }
  .bank-card.ivory {
    transform: rotate(6deg) translate(15px, 45px);
  }
  .chat-box {
    right: 10px;
    left: 10px;
    width: auto;
  }
  .topbar h1 {
    font-size: 16px;
  }
}

/* Customer cards, withdrawals and immediate document uploads */
.primary-action,
.secondary-action {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 5px;
  cursor: pointer;
}

.primary-action svg,
.secondary-action svg {
  width: 15px;
  height: 15px;
}

.primary-action:disabled,
.secondary-action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.secondary-action {
  padding: 0 16px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
  font-size: 9px;
}

.status.pending {
  color: #9a6816;
  background: #fff3da;
}

.status.bad {
  color: #b34a4a;
  background: #fbeaea;
}

.empty-state {
  min-height: 155px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--muted);
  border: 1px dashed #cbd4d9;
  border-radius: 6px;
  background: #fff;
  text-align: center;
}

.empty-state svg {
  width: 26px;
  height: 26px;
  color: #8ba0aa;
}

.empty-state p {
  max-width: 310px;
  margin: 0;
  font-size: 9px;
  line-height: 1.6;
}

.request-summary {
  margin-top: 16px;
}

.request-list {
  display: flex;
  flex-direction: column;
}

.request-row {
  display: grid;
  grid-template-columns: 34px minmax(120px, 1fr) minmax(115px, auto) auto;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.request-row:last-child {
  border-bottom: 0;
}

.request-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #1b6d65;
  background: #e6f2ef;
  border-radius: 50%;
}

.request-icon svg {
  width: 15px;
  height: 15px;
}

.request-main b,
.request-main small,
.request-amount b,
.request-amount small {
  display: block;
}

.request-main b,
.request-amount b {
  font-size: 9px;
}

.request-main small,
.request-amount small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
}

.request-amount {
  text-align: right;
}

.request-note {
  grid-column: 2 / -1;
  margin: -2px 0 3px;
  color: #7d5c23;
  font-size: 8px;
}

.bank-card-grid {
  display: grid;
  gap: 16px;
}

.bank-card-entry {
  display: grid;
  grid-template-columns: minmax(250px, 340px) 1fr;
  align-items: stretch;
  gap: 22px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.bank-card-visual {
  aspect-ratio: 1.62;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 20px;
  color: #fff;
  background: #153c54;
  border-radius: 7px;
  box-shadow: 0 10px 28px #153c5426;
}

.bank-card-top,
.bank-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bank-card-top {
  font-size: 10px;
  font-weight: 700;
}

.card-edit-button {
  width: 34px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214, 181, 103, 0.45);
  border-radius: 4px;
  color: #d6b567;
  background: rgba(255, 255, 255, 0.08);
}

.card-edit-button:hover {
  color: #fff;
  border-color: #d6b567;
}

.bank-card-top svg {
  width: 19px;
  height: 19px;
  color: #d6b567;
}

.bank-card-chip {
  width: 34px;
  height: 25px;
  border: 1px solid #c5a550;
  border-radius: 4px;
  background: #d6b567;
}

.bank-card-number-row {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bank-card-number-row strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  letter-spacing: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-number-toggle {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(214, 181, 103, 0.45);
  border-radius: 4px;
  color: #d6b567;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.card-number-toggle:hover {
  color: #fff;
  border-color: #d6b567;
}

.card-number-toggle svg {
  width: 17px;
  height: 17px;
}

.bank-card-bottom {
  color: #dbe6ea;
  font-size: 8px;
  text-transform: uppercase;
}

.bank-card-meta {
  min-width: 0;
}

.bank-card-meta > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bank-card-meta h3 {
  margin: 0;
  font-size: 14px;
}

.bank-card-meta > p {
  margin: 9px 0 16px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.6;
}

.card-document-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.card-document {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px dashed #bfcbd1;
  border-radius: 5px;
  cursor: pointer;
}

.card-document.uploaded {
  border-style: solid;
  border-color: #9fc9bb;
  background: #f3faf7;
}

.card-document input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.card-document svg {
  width: 20px;
  height: 20px;
  color: #297968;
}

.card-document b,
.card-document small {
  display: block;
}

.card-document b {
  font-size: 9px;
}

.card-document small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
}

.withdrawal-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  align-items: start;
  gap: 16px;
}

.withdrawal-form h3 {
  margin: 0 0 18px;
  font-size: 13px;
}

.withdrawal-form label {
  display: block;
  margin-top: 12px;
}

.withdrawal-form label > span,
.dialog-fields label > span {
  display: block;
  margin-bottom: 6px;
  color: #3f5059;
  font-size: 9px;
  font-weight: 600;
}

.withdrawal-form input,
.withdrawal-form select,
.withdrawal-form textarea,
.dialog-fields input,
.dialog-fields select {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: none;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 9px;
}

.withdrawal-form textarea {
  min-height: 76px;
  resize: vertical;
}

.withdrawal-form input:focus,
.withdrawal-form select:focus,
.withdrawal-form textarea:focus,
.dialog-fields input:focus,
.dialog-fields select:focus {
  border-color: #698e9b;
  box-shadow: 0 0 0 3px #2f768012;
}

.withdrawal-form .primary-action {
  width: 100%;
  margin-top: 16px;
}

.form-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.6;
}

.withdrawal-history {
  min-width: 0;
}

.card-dialog {
  width: min(530px, calc(100vw - 30px));
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 25px 80px #06192342;
}

.card-dialog::backdrop {
  background: #06192380;
}

.card-dialog header,
.card-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
}

.card-dialog header {
  border-bottom: 1px solid var(--line);
}

.card-dialog header h2 {
  margin: 0;
  font-size: 16px;
}

.card-dialog header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 8px;
}

.dialog-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.dialog-close svg {
  width: 17px;
  height: 17px;
}

.dialog-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}

.wide-field {
  grid-column: 1 / -1;
}

.dialog-fields [hidden] {
  display: none;
}

.card-security-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 11px 12px;
  border-left: 3px solid #5f8993;
  color: #53676f;
  background: #f2f7f8;
  font-size: 8px;
  line-height: 1.6;
}

.card-security-note svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #2f7680;
}

.card-dialog footer {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
}

.kyc-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1.6;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  overflow: hidden;
  color: #66818d;
  background: #edf3f6;
  border-radius: 5px;
}

.kyc-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #e7ecee;
}

.kyc-preview img[hidden] {
  display: none;
}

.kyc-preview svg {
  width: 30px;
  height: 30px;
}

.kyc-upload.has-preview .kyc-preview > svg {
  display: none;
}

.kyc-upload.uploading {
  opacity: 0.72;
}

@media (max-width: 900px) {
  .bank-card-entry,
  .withdrawal-layout {
    grid-template-columns: 1fr;
  }

  .bank-card-visual {
    width: min(100%, 360px);
  }
}

@media (max-width: 600px) {
  .page-intro {
    align-items: flex-start;
    gap: 12px;
  }

  .request-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .request-amount {
    grid-column: 2;
    text-align: left;
  }

  .request-row > .status {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .request-note {
    grid-column: 2 / -1;
  }

  .bank-card-entry {
    padding: 12px;
  }

  .bank-card-visual {
    padding: 16px;
  }

  .bank-card-visual strong {
    font-size: 12px;
  }

  .card-document-grid,
  .dialog-fields {
    grid-template-columns: 1fr;
  }

  .wide-field {
    grid-column: auto;
  }

  .card-dialog footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .card-dialog footer button {
    width: 100%;
  }
}
@media (max-width: 420px) {
  .auth-visual {
    min-height: 225px;
  }
  .auth-copy {
    margin-top: 40px;
  }
  .auth-copy h1 {
    font-size: 24px;
  }
  .quick {
    grid-template-columns: 1fr 1fr;
  }
  .quick small {
    display: none;
  }
  .balance-card {
    min-height: 270px;
  }
  .bc-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .bc-bottom button {
    grid-column: 1/-1;
    margin-left: 0;
  }
  .cards-layout {
    gap: 10px;
  }
}
.quick {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 760px) {
  .quick {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .quick small {
    display: none;
  }
}

/* Phase 3 database, internationalization, and KYC additions. */
.language-select {
  min-width: 96px;
  height: 36px;
  padding: 0 28px 0 10px;
  border: 1px solid rgba(154, 174, 198, 0.32);
  border-radius: 4px;
  color: #e7eef7;
  background: #07111d;
}

.language-select option {
  color: #e7eef7;
  background: #07111d;
}

.auth-language {
  position: absolute;
  top: 26px;
  right: 28px;
}

.secure-note {
  align-items: flex-start;
}

.admin-auth-visual {
  background:
    radial-gradient(circle at 80% 28%, #273f68 0, transparent 31%),
    linear-gradient(145deg, #07111e, #0b1f35 65%, #07111e);
}

.login-toast.error,
.app-toast.error {
  background: #812f38;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.side-link svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.side-user button svg,
.mobile-menu svg,
.bc-top svg {
  width: 17px;
  height: 17px;
}

.top-language {
  flex: 0 0 auto;
}

.balance-change {
  max-width: 62%;
  line-height: 1.5;
}

.quick button svg {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  padding: 9px;
  border-radius: 50%;
  color: #8f6a34;
  background: #eef3f5;
}

.quick button > span {
  min-width: 0;
}

.quick button b,
.quick button small {
  overflow-wrap: anywhere;
}

.loading-block {
  min-height: 150px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 10px;
}

.feature-placeholder {
  min-height: 300px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: var(--muted);
  text-align: center;
}

.feature-placeholder svg {
  width: 48px;
  height: 48px;
  color: var(--gold);
}

.kyc-status-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.kyc-status-panel > span {
  color: var(--muted);
  font-size: 10px;
}

.kyc-status-panel > b {
  padding: 7px 11px;
  border-radius: 4px;
  color: var(--blue);
  background: #e9f1f6;
  font-size: 10px;
}

.kyc-status-panel > b[data-status="APPROVED"] {
  color: var(--green);
  background: #e8f4f0;
}

.kyc-status-panel > b[data-status="REJECTED"] {
  color: var(--red);
  background: #f9e9ea;
}

.kyc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.kyc-upload {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.kyc-upload h3 {
  margin: 13px 0 4px;
  font-size: 14px;
}

.kyc-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  color: var(--blue);
  background: #edf3f6;
}

.kyc-icon svg {
  width: 25px;
  height: 25px;
}

.kyc-file-status {
  min-height: 18px;
  max-width: 100%;
  margin: 4px 0 16px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-picker {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 9px;
  padding: 0 14px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
  font-size: 9px;
  cursor: pointer;
}

.file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.kyc-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.kyc-submit-row p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.6;
}

.security-feature {
  min-height: 118px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.security-feature > svg {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 50%;
  color: var(--green);
  background: #e8f4f0;
}

.security-feature b,
.security-feature small {
  display: block;
}

.security-feature b {
  font-size: 11px;
}

.security-feature small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.5;
}

.chat-fab > svg {
  width: 22px;
  height: 22px;
}

.chat-fab > span {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #38b78b;
}

.user-message {
  max-width: 83%;
  margin: 5px 0 5px auto;
  padding: 10px 12px;
  border-radius: 8px;
  color: #fff;
  background: #0c2b46;
  font-size: 9px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .auth-language {
    top: 14px;
    right: 15px;
  }

  .top-language {
    width: 88px;
    min-width: 88px;
  }

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

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

.quick {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-toast {
  bottom: 86px;
}

.kyc-upload {
  justify-content: flex-start;
}

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

@media (max-width: 460px) {
  .quick {
    grid-template-columns: 1fr;
  }

  .quick small {
    display: block;
  }
}

.admin-auth {
  color: #e7eef7;
  background:
    radial-gradient(
      circle at 12% 14%,
      rgba(57, 191, 133, 0.17),
      transparent 30%
    ),
    radial-gradient(
      circle at 82% 22%,
      rgba(233, 168, 59, 0.16),
      transparent 28%
    ),
    #050b14;
}

.admin-auth .admin-login-shell {
  grid-template-columns: minmax(0, 1fr) 470px;
  min-height: 100vh;
  background: transparent;
}

.admin-auth .auth-visual {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 44px clamp(32px, 5vw, 72px);
  background: transparent;
}

.admin-auth .auth-visual:before {
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(120deg, #000 10%, transparent 80%);
}

.admin-auth .auth-logo {
  z-index: 1;
}

.admin-auth-grid {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
  align-items: end;
  gap: 34px;
  margin-top: 70px;
}

.admin-auth .auth-copy {
  margin: 0;
  max-width: 620px;
}

.admin-auth .auth-copy h1 {
  max-width: 560px;
  margin: 18px 0 18px;
  color: #fff;
  font-size: 50px;
}

.admin-auth .auth-copy > p:not(.kicker) {
  max-width: 520px;
  color: #9fb2c8;
  font-size: 14px;
  line-height: 1.8;
}

.admin-auth .kicker {
  color: #e9a83b;
}

.admin-auth .auth-points {
  margin-top: 30px;
}

.admin-auth .auth-points span {
  border-color: rgba(255, 255, 255, 0.18);
  color: #d7e3f2;
  background: rgba(13, 26, 41, 0.72);
}

.admin-console-card {
  min-height: 300px;
  padding: 22px;
  border: 1px solid rgba(108, 130, 157, 0.32);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(18, 34, 53, 0.94), rgba(7, 17, 29, 0.96)),
    #0d1a29;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
}

.console-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}

.console-card-head span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #39bf85;
  box-shadow: 0 0 0 6px rgba(57, 191, 133, 0.13);
}

.console-card-head b {
  flex: 1;
  color: #fff;
}

.console-card-head small {
  padding: 4px 8px;
  border-radius: 4px;
  color: #39bf85;
  background: rgba(57, 191, 133, 0.12);
  font-size: 10px;
  font-weight: 700;
}

.console-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid rgba(61, 127, 242, 0.2);
  border-radius: 7px;
  background: rgba(61, 127, 242, 0.1);
}

.console-row span {
  color: #9fb2c8;
  font-size: 10px;
  font-weight: 700;
}

.console-row b {
  color: #fff;
  font-size: 21px;
}

.console-row.amber {
  border-color: rgba(233, 168, 59, 0.24);
  background: rgba(233, 168, 59, 0.1);
}

.console-row.green {
  border-color: rgba(57, 191, 133, 0.24);
  background: rgba(57, 191, 133, 0.1);
}

.console-lines {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.console-lines i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3d7ff2, rgba(61, 127, 242, 0.06));
}

.console-lines i:nth-child(2) {
  width: 72%;
  background: linear-gradient(90deg, #39bf85, rgba(57, 191, 133, 0.05));
}

.console-lines i:nth-child(3) {
  width: 54%;
  background: linear-gradient(90deg, #e9a83b, rgba(233, 168, 59, 0.05));
}

.admin-auth-status-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.admin-auth-status-grid span {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(13, 26, 41, 0.58);
}

.admin-auth-status-grid b,
.admin-auth-status-grid small {
  display: block;
}

.admin-auth-status-grid b {
  color: #fff;
  font-size: 15px;
}

.admin-auth-status-grid small {
  margin-top: 6px;
  color: #9fb2c8;
  font-size: 10px;
}

.admin-auth .auth-panel {
  margin: 24px 24px 24px 0;
  border: 1px solid rgba(108, 130, 157, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
    rgba(9, 21, 34, 0.94);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
}

.admin-auth .auth-form-wrap {
  max-width: 380px;
}

.admin-auth .back {
  color: #8ca0b7;
}

.admin-auth .auth-language {
  top: 26px;
  right: 28px;
}

.admin-auth .language-select {
  border-color: rgba(108, 130, 157, 0.38);
  color: #e7eef7;
  background: #07111d;
}

.admin-auth .language-select option {
  color: #e7eef7;
  background: #07111d;
}

.admin-auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 8px 10px;
  border: 1px solid rgba(57, 191, 133, 0.24);
  border-radius: 999px;
  color: #bcebd8;
  background: rgba(57, 191, 133, 0.1);
  font-size: 10px;
  font-weight: 700;
}

.admin-auth-badge span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #39bf85;
}

.admin-auth .auth-form-wrap h2 {
  color: #fff;
}

.admin-auth .sub {
  color: #9fb2c8;
}

.admin-auth .auth-form-wrap label {
  color: #d7e3f2;
}

.admin-auth .input {
  border-color: rgba(108, 130, 157, 0.34);
  border-radius: 7px;
  background: #07111d;
}

.admin-auth .input:focus-within {
  border-color: #3d7ff2;
  box-shadow: 0 0 0 3px rgba(61, 127, 242, 0.16);
}

.admin-auth .input input {
  color: #fff;
  background: transparent;
}

.admin-auth .input button {
  color: #e9a83b;
}

.admin-auth .check {
  color: #9fb2c8;
}

.admin-auth .submit {
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, #2a69d8, #39bf85);
  box-shadow: 0 14px 28px rgba(42, 105, 216, 0.24);
}

.admin-auth .auth-panel footer {
  color: #6c829d;
}

@media (max-width: 1100px) {
  .admin-auth .admin-login-shell {
    grid-template-columns: 1fr;
  }

  .admin-auth .auth-panel {
    margin: 0 24px 24px;
  }
}

@media (max-width: 760px) {
  .admin-auth .auth-visual {
    min-height: auto;
    padding: 24px;
  }

  .admin-auth-grid,
  .admin-auth-status-grid {
    grid-template-columns: 1fr;
    margin-top: 34px;
  }

  .admin-console-card,
  .admin-auth-status-grid {
    display: none;
  }

  .admin-auth .auth-copy > p:not(.kicker) {
    display: block;
  }

  .admin-auth .auth-points {
    display: flex;
    flex-wrap: wrap;
  }

  .admin-auth .auth-copy h1 {
    font-size: 30px;
  }

  .admin-auth .auth-panel {
    margin: 0;
    border-radius: 0;
    padding: 72px 24px 56px;
  }

  .admin-auth .auth-language {
    top: 18px;
    right: 18px;
  }
}


/* 2026-08-01 page-matched language picker themes */
.auth-body:not(.admin-auth) .language-picker,
.portal-body .topbar .language-picker {
  --language-picker-bg: #ffffff;
  --language-picker-border: #dfe5ea;
  --language-picker-hover: #f2f5f7;
  --language-picker-active: #ead39d;
  --language-picker-text: #102338;
}

.auth-body:not(.admin-auth) .language-picker-menu,
.portal-body .topbar .language-picker-menu {
  box-shadow: 0 18px 36px rgba(16, 35, 56, 0.16);
}

.auth-body:not(.admin-auth) .language-picker-option:hover,
.portal-body .topbar .language-picker-option:hover {
  color: #102338;
}

.auth-body:not(.admin-auth) .language-picker-option.active,
.portal-body .topbar .language-picker-option.active {
  color: #102338;
}

.auth-body:not(.admin-auth) .language-flag,
.portal-body .topbar .language-flag {
  border-color: rgba(16, 35, 56, 0.16);
  box-shadow: 0 1px 2px rgba(16, 35, 56, 0.12);
}

.auth-body:not(.admin-auth) .language-select,
.portal-body .topbar .language-select {
  border-color: #dfe5ea;
  color: #102338;
  background: #ffffff;
}

.auth-body:not(.admin-auth) .language-select option,
.portal-body .topbar .language-select option {
  color: #102338;
  background: #ffffff;
}

@media (max-width: 760px) {
  .auth-body:not(.admin-auth) .auth-language {
    top: 18px;
    right: 20px;
  }

  .auth-body:not(.admin-auth) .language-picker {
    min-width: 122px;
  }
}