@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");
:root {
  --green: #095c4d;
  --lime: #d8f991;
  --ink: #162f2a;
  --muted: #76837f;
  --border: #e5ebe7;
  --bg: #f5f8f6;
  --surface: #ffffff;
  --panel-bg: #ffffff;
  --input-bg: #ffffff;
  --header-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --card-bg: #ffffff;
  --row-border: #f0f3ef;
  --dialog-shadow: #0b302b33;
  --backdrop: rgba(16, 44, 40, 0.45);
  --header-btn-hover: #f0f4f2;
}
[data-theme="dark"] {
  --green: #148b72;
  --lime: #d8f991;
  --ink: #ecf3ef;
  --muted: #8d9e97;
  --border: #1e332c;
  --bg: #0b1412;
  --surface: #12211d;
  --panel-bg: #12211d;
  --input-bg: #0e1a17;
  --header-bg: #101d19;
  --sidebar-bg: #101d19;
  --card-bg: #12211d;
  --row-border: #1a2c26;
  --dialog-shadow: #000000aa;
  --backdrop: rgba(4, 10, 8, 0.75);
  --header-btn-hover: #1c3029;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --green: #148b72;
    --lime: #d8f991;
    --ink: #ecf3ef;
    --muted: #8d9e97;
    --border: #1e332c;
    --bg: #0b1412;
    --surface: #12211d;
    --panel-bg: #12211d;
    --input-bg: #0e1a17;
    --header-bg: #101d19;
    --sidebar-bg: #101d19;
    --card-bg: #12211d;
    --row-border: #1a2c26;
    --dialog-shadow: #000000aa;
    --backdrop: rgba(4, 10, 8, 0.75);
    --header-btn-hover: #1c3029;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    16px "DM Sans",
    Arial,
    sans-serif;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  cursor: pointer;
}
button {
  color: inherit;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #9ec747;
  outline-offset: 4px;
}
button {
  border: 0;
  background: none;
}
a {
  text-decoration: none;
  color: inherit;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 248px;
  background: white;
  border-right: 1px solid var(--border);
  padding: 34px 22px;
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.brand {
  display: flex;
  gap: 11px;
  align-items: center;
  font:
    800 23px Manrope,
    sans-serif;
  letter-spacing: -1px;
  overflow-wrap: anywhere;
}
.brand-icon {
  background: var(--green);
  color: var(--lime);
  width: 39px;
  height: 42px;
  border-radius: 12px;
  font: 800 33px Manrope;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-icon span {
  font-size: 17px;
  margin-left: -2px;
}
.workspace-label {
  font-size: 10px;
  letter-spacing: 1.6px;
  color: #89928f;
  margin: 44px 8px 16px;
  font-weight: 700;
}
nav {
  display: grid;
  gap: 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  text-align: left;
  color: #6b7773;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
}
.nav-item.active {
  background: #eaf3eb;
  color: var(--green);
  font-weight: 700;
}
.nav-item svg {
  width: 20px;
  height: 20px;
}
.shop-card {
  margin-top: auto;
  padding: 19px 15px;
  background: #f5f8f1;
  border: 1px solid #e6ebdf;
  border-radius: 12px;
}
.shop-card strong {
  display: block;
  font-size: 14px;
  margin: 12px 0 7px;
}
.shop-card p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 12px;
}
.little-icon {
  color: var(--green);
  font-size: 23px;
}
.text-btn {
  font-size: 13px;
  color: var(--green);
  padding: 0;
  font-weight: 700;
}
.admin-link {
  display: flex;
  gap: 13px;
  padding: 25px 12px 15px;
  color: var(--muted);
  font-size: 14px;
}
.sidebar-foot {
  font-size: 11px;
  color: #9ca6a1;
  padding: 12px;
}
.app {
  margin-left: 248px;
}
header {
  height: 85px;
  padding: 0 44px;
  background: white;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 23px;
}
.demo-pill {
  background: #f4f6ef;
  border: 1px solid #e4e9da;
  border-radius: 20px;
  padding: 6px 11px;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: #67754f;
}
.avatar {
  background: #e9eee5;
  border: 4px solid #f7f9f5;
  border-radius: 50%;
  height: 43px;
  width: 43px;
  font-weight: 700;
  font-size: 12px;
}
main {
  max-width: 1400px;
  margin: auto;
  padding: 38px 44px;
}
.greeting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 29px;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 10px;
}
h1,
h2,
h3 {
  font-family: Manrope, Arial, sans-serif;
}
h1 {
  font-size: 29px;
  letter-spacing: -1px;
  margin: 0 0 9px;
  font-weight: 800;
}
h2 {
  font-size: 18px;
  letter-spacing: -0.4px;
  margin: 0;
}
h3 {
  font-size: 16px;
  margin: 0 0 8px;
}
p {
  line-height: 1.65;
}
.subtitle {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}
.date-chip {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: center;
}
.top-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 22px;
}
.wallet {
  background: var(--green);
  color: white;
  border-radius: 16px;
  padding: 26px 29px;
  position: relative;
  overflow: hidden;
  min-height: 225px;
}
.wallet:after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  border: 40px solid #ffffff05;
  border-radius: 50%;
  right: -65px;
  top: -75px;
  pointer-events: none;
}
.wallet-label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #c1d8ce;
  font-size: 13px;
}
.balance {
  font: 700 36px Manrope;
  margin: 13px 0 21px;
  letter-spacing: -1px;
}
.balance small {
  font-size: 24px;
  color: #8ebbac;
}
.wallet-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wallet-bottom span {
  font-size: 11px;
  color: #a9cabc;
}
.btn {
  padding: 12px 20px;
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  background: var(--green);
  color: white;
  font-weight: 600;
  font-size: 14px;
}
.btn.lime {
  background: var(--lime);
  color: #21442b;
}
.btn.secondary {
  border: 1px solid var(--border);
  background: white;
  color: var(--ink);
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.intro-card {
  background: #eef2e8;
  border: 1px solid #e2e7d9;
  border-radius: 16px;
  padding: 24px 27px;
  position: relative;
  overflow: hidden;
}
.intro-card .eyebrow {
  color: #6d7c53;
  font-size: 10px;
}
.intro-card h2 {
  font-size: 23px;
  line-height: 1.4;
  max-width: 210px;
  position: relative;
  z-index: 1;
}
.intro-card p {
  max-width: 230px;
  font-size: 13px;
  color: #7a846d;
  margin: 9px 0 18px;
}
.intro-card button {
  position: relative;
  z-index: 1;
}
.orbit {
  position: absolute;
  right: -28px;
  top: 63px;
  width: 170px;
  height: 170px;
  border: 1px solid #d7dfc6;
  border-radius: 50%;
  transform: rotate(-25deg);
}
.orbit:before {
  content: "↗";
  position: absolute;
  inset: 33px;
  border: 1px solid #d0dbbb;
  border-radius: 24px;
  background: #e0ebcd;
  color: #47713c;
  font-size: 50px;
  display: grid;
  place-items: center;
  box-shadow: 0 9px 0 #d1debb;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 32px 0 18px;
}
.section-head span {
  font-size: 12px;
  color: var(--muted);
}
.services {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 13px;
}
.service {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: left;
  padding: 20px 18px;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.service:hover {
  transform: translateY(-3px);
  border-color: #99baaa;
}
.icon {
  width: 43px;
  height: 43px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 17px;
}
.icon svg {
  width: 23px;
  height: 23px;
}
.service strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}
.service small {
  font-size: 11px;
  color: var(--muted);
}
.mint {
  background: #eaf4e9;
  color: #4c8155;
}
.blue {
  background: #eaf0ff;
  color: #5a7dd0;
}
.purple {
  background: #f1eafb;
  color: #9b75bf;
}
.orange {
  background: #fff2df;
  color: #bd914c;
}
.rose {
  background: #fbeeea;
  color: #c78576;
}
.lower-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 23px;
  margin-top: 28px;
}
.panel {
  background: white;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 24px;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 23px;
}
.panel-head h2 {
  font-size: 16px;
}
.panel-head button:not(.btn) {
  font-size: 12px;
  color: var(--green);
  font-weight: 600;
}
.row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f0f3ef;
}
.row:last-child {
  border-bottom: 0;
}
.network {
  height: 37px;
  width: 37px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
  background: #ffcf05;
  color: #292a13;
}
.network.tv {
  background: #e7f1fa;
  color: #236aa3;
}
.row-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}
.row-sub {
  font-size: 11px;
  color: var(--muted);
}
.row-end {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}
.amount {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 5px;
}
.status {
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 5px;
  color: #548364;
  background: #eef6ed;
}
.status.pending {
  background: #fff4db;
  color: #ad841e;
}
.beneficiaries {
  display: flex;
  gap: 22px;
  padding: 2px 0 21px;
  border-bottom: 1px solid var(--border);
}
.beneficiary {
  padding: 0;
  font-size: 11px;
  display: grid;
  gap: 9px;
  justify-items: center;
  color: #76837b;
}
.circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e9efe6;
  color: #68815a;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}
.tip {
  margin-top: 20px;
  padding: 14px;
  border-radius: 9px;
  background: #f8faf7;
}
.tip strong {
  font-size: 12px;
}
.tip p {
  font-size: 11px;
  color: var(--muted);
  margin: 7px 0 0;
}
.preview-note {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  font-size: 11px;
  color: #89958e;
  line-height: 1.6;
}
footer {
  border-top: 1px solid var(--border);
  margin: 0 44px;
  padding: 21px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #8b9690;
  font-size: 11px;
}
footer button {
  font-size: 11px;
  color: var(--green);
}
.mobile-menu {
  display: none;
}
.form-panel {
  max-width: 650px;
}
.form-panel label,
dialog label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin: 20px 0 8px;
}
input,
select,
textarea {
  width: 100%;
  border: 1px solid #dce5de;
  border-radius: 8px;
  padding: 12px;
  background: white;
  color: var(--ink);
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #9bc6a7;
}
textarea {
  min-height: 90px;
}
.form-help {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin: 9px 0 19px;
}
.notice {
  padding: 14px 16px;
  background: #f0f4e9;
  border: 1px solid #e0e7d5;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.6;
  margin: 20px 0;
}
.form-panel .btn {
  margin-top: 22px;
}
.tabs {
  display: flex;
  gap: 8px;
  margin: 20px 0;
  flex-wrap: wrap;
}
.tabs button {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 16px;
  font-size: 13px;
}
.tabs button.active {
  background: var(--green);
  color: white;
}
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.switch-row input {
  width: 19px;
  height: 19px;
  accent-color: var(--green);
}
dialog {
  width: 480px;
  max-width: calc(100% - 32px);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 29px;
  color: var(--ink);
  box-shadow: 0 30px 100px #0b302b33;
}
dialog::backdrop {
  background: #102c2870;
  backdrop-filter: blur(3px);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-head button {
  font-size: 24px;
  padding: 0 5px;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
  margin: 21px 0;
}
.summary-line span:last-child {
  text-align: right;
  overflow-wrap: anywhere;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 25px;
}
.success-icon {
  width: 60px;
  height: 60px;
  background: #eaf4de;
  color: #49783a;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 29px;
  margin: 15px auto;
}
.center {
  text-align: center;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: #163d32;
  color: white;
  padding: 14px 24px;
  border-radius: 10px;
  box-shadow: 0 6px 24px #122c2520;
  z-index: 100;
  display: none;
  font-size: 14px;
  max-width: 90vw;
}
.empty {
  padding: 35px 0;
  color: var(--muted);
  text-align: center;
}
.search {
  max-width: 330px;
}
.service-page-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
}
.checks {
  font-size: 14px;
  color: var(--muted);
  line-height: 2;
}
.hidden {
  display: none !important;
}
@media (min-width: 1500px) {
  main {
    padding-top: 50px;
  }
  .wallet,
  .intro-card {
    min-height: 250px;
  }
  .services {
    gap: 20px;
  }
  .service {
    padding: 26px;
  }
  .lower-grid {
    margin-top: 35px;
  }
}
@media (max-width: 1150px) {
  .sidebar {
    width: 215px;
    padding: 28px 15px;
  }
  .app {
    margin-left: 215px;
  }
  main {
    padding: 28px;
  }
  header {
    padding: 0 28px;
  }
  .services {
    gap: 9px;
  }
  .service {
    padding: 17px 12px;
  }
  .lower-grid {
    grid-template-columns: 1.4fr 1fr;
  }
  .orbit {
    opacity: 0.5;
  }
  footer {
    margin: 0 28px;
  }
}
@media (max-width: 850px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 10px 0 40px #102c2820;
  }
  .app {
    margin-left: 0;
  }
  .mobile-menu {
    display: block;
    font-size: 22px;
    margin-right: 15px;
  }
  header {
    height: 70px;
    justify-content: flex-start;
  }
  .header-right {
    margin-left: auto;
  }
  .lower-grid {
    grid-template-columns: 1.4fr 1fr;
  }
  .date-chip {
    display: none;
  }
  .admin-grid,
  .service-page-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  main {
    padding: 26px 18px;
  }
  header {
    padding: 0 18px;
  }
  .top-grid {
    grid-template-columns: 1fr;
  }
  .intro-card {
    display: none;
  }
  h1 {
    font-size: 25px;
  }
  .services {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .service {
    padding: 17px 12px;
  }
  .service small {
    font-size: 10px;
  }
  .service strong {
    font-size: 13px;
  }
  .icon {
    margin-bottom: 12px;
  }
  .lower-grid {
    grid-template-columns: 1fr;
  }
  .wallet {
    padding: 24px;
  }
  .wallet-bottom span {
    font-size: 10px;
  }
  .balance {
    font-size: 33px;
  }
  .greeting {
    margin-bottom: 22px;
  }
  .panel {
    padding: 20px;
  }
  .section-head span {
    font-size: 10px;
  }
  footer {
    margin: 0 18px;
    flex-wrap: wrap;
  }
  .demo-pill {
    font-size: 10px;
  }
  .header-right {
    gap: 11px;
  }
  .admin-grid {
    gap: 18px;
  }
  .modal-actions .btn {
    padding: 12px;
  }
  .sidebar .brand {
    font-size: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
/* Expanded customer and admin workspace */
.sidebar {
  overflow-y: auto;
  padding-top: 25px;
}
.workspace-label {
  margin-top: 25px;
}
.nav-item {
  padding: 9px 13px;
}
.shop-card {
  margin-top: 25px;
}
.nav-symbol {
  width: 22px;
  font-size: 21px;
  line-height: 22px;
  text-align: center;
}
.services {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.icon {
  font-size: 27px;
}
.wallet-link {
  color: #d8f991;
  font-size: 14px;
}
.setup-banner {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: #ecf2e8;
  border: 1px solid #dce7d5;
  border-radius: 12px;
}
.setup-banner strong {
  font-size: 14px;
}
.setup-banner p {
  font-size: 13px;
  color: #607362;
  margin: 5px 0 0;
}
.action-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  align-items: center;
  margin-top: 20px;
}
.space-top {
  margin-top: 22px;
}
.transaction-row {
  width: 100%;
  text-align: left;
}
.row-body {
  flex: 1;
  min-width: 0;
}
.row-title,
.row-sub,
.amount {
  display: block;
}
.row-title {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.row-sub {
  font-size: 12px;
  line-height: 1.6;
}
.amount {
  font-size: 14px;
}
.row-end {
  min-width: 100px;
}
.tx-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-size: 22px;
  flex-shrink: 0;
}
.form-error {
  color: #a23333;
  font-size: 14px;
  line-height: 1.5;
}
.form-error:empty {
  display: none;
}
.form-panel .form-error {
  margin-top: 18px;
}
.service-page-grid {
  align-items: start;
}
.account-number {
  font:
    700 23px Manrope,
    Arial,
    sans-serif;
  margin: 19px 0;
  overflow-wrap: anywhere;
}
.check-label {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  font-weight: 400 !important;
  line-height: 1.6;
}
.check-label input {
  width: 19px;
  min-width: 19px;
  height: 19px;
  accent-color: var(--green);
  margin-top: 4px;
}
.filter-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.3fr;
  gap: 10px;
}
.filter-grid label {
  grid-row: 1;
  font-size: 13px;
}
.filter-grid input,
.filter-grid select {
  grid-row: 2;
  min-width: 0;
}
.voucher {
  padding: 17px;
  background: #eef4e8;
  border: 1px dashed #afc99b;
  border-radius: 10px;
}
.voucher p {
  font-family: monospace;
  overflow-wrap: anywhere;
}
.status.failed {
  color: #a4473a;
  background: #fbedeb;
}
.status {
  font-size: 12px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.stat {
  font-size: 26px;
  margin-top: 14px;
}
.muted {
  font-size: 14px;
  color: var(--muted);
}
.total {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  font-size: 17px;
}
details {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
details p {
  font-size: 14px;
  color: var(--muted);
}
.auth-wrap {
  max-width: 580px;
  margin: 30px auto;
}
.signed-out .sidebar {
  display: none;
}
.signed-out .app {
  margin-left: 0;
}
.signed-out header .avatar,
.signed-out header [data-page="notifications"],
.signed-out .mobile-menu {
  display: none;
}
.form-panel > .btn.secondary {
  margin-top: 12px;
}
.panel .form-help {
  font-size: 14px;
}
.notice {
  font-size: 14px;
}
.subtitle {
  font-size: 16px;
}
.panel-head button,
.text-btn {
  font-size: 14px;
}
.service small {
  font-size: 12px;
}
.tip strong,
.tip p {
  font-size: 13px;
}
.beneficiaries {
  flex-wrap: wrap;
}
.beneficiary {
  font-size: 13px;
}
.panel {
  min-width: 0;
}
.summary-line {
  overflow-wrap: anywhere;
}
.brand {
  font-size: 22px;
}
.sidebar .brand {
  max-width: 100%;
}
dialog {
  max-height: 90vh;
  overflow-y: auto;
}
.btn {
  min-height: 44px;
}
.service:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#admin-content .row .text-btn {
  flex-shrink: 0;
}
#notify-count {
  font-size: 12px;
  background: #edf3e5;
  padding: 2px 5px;
  border-radius: 5px;
}
.service-page-grid > aside {
  align-self: start;
}
@media (max-width: 1200px) {
  .services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .filter-grid {
    grid-template-columns: 1fr 1fr;
  }
  .filter-grid label {
    grid-row: auto;
  }
  .filter-grid input,
  .filter-grid select {
    grid-row: auto;
  }
  .filter-grid {
    display: flex;
    flex-wrap: wrap;
  }
  .filter-grid label {
    width: 100%;
    margin-top: 8px;
  }
  .filter-grid input,
  .filter-grid select {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .setup-banner {
    align-items: flex-start;
    flex-direction: column;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .row {
    gap: 9px;
  }
  .row-end {
    min-width: 85px;
  }
  .row-sub {
    font-size: 12px;
  }
  .service strong {
    font-size: 14px;
  }
  .icon {
    width: 40px;
    height: 40px;
  }
  .services {
    gap: 8px;
  }
  .service {
    padding: 15px 10px;
  }
  .service small {
    font-size: 12px;
  }
  .demo-pill {
    font-size: 11px;
  }
  .header-right {
    gap: 8px;
  }
  .panel .row {
    flex-wrap: wrap;
  }
  #admin-content .row {
    align-items: flex-start;
  }
  .auth-wrap {
    margin: 10px auto;
  }
  .sidebar {
    width: 248px;
  }
  .subtitle {
    font-size: 15px;
  }
  .beneficiaries {
    gap: 16px;
  }
  .section-head {
    gap: 12px;
    align-items: flex-start;
  }
  .section-head span {
    display: none;
  }
}

/* Refined form typography; reuse existing fonts and native controls. */
.form-panel label,
dialog label {
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #36574b;
}
input,
select,
textarea {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
select {
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  min-height: 50px;
  padding: 12px 44px 12px 16px;
  border-radius: 10px;
  background-color: #fafcf9;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23095c4d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  box-shadow: 0 1px 2px #163d3205;
}
select:hover {
  border-color: #a9c2b3;
}
select:focus-visible {
  outline: 2px solid #699a78;
  outline-offset: 2px;
}
select option {
  background: white;
  color: #162f2a;
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 500;
  letter-spacing: normal;
}
input[inputmode="numeric"],
input[type="number"],
input[type="tel"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.015em;
}
@media (forced-colors: active) {
  select {
    appearance: auto;
    background-image: none;
  }
}

[hidden] {
  display: none !important;
}
.form-help {
  overflow-wrap: break-word;
  word-break: normal;
}
.saved-phone-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -2px 0 14px;
  color: #536a5d;
  font-size: 12px;
  line-height: 1.45;
}
.saved-phone-note > span:first-child {
  display: grid;
  place-items: center;
  flex: 0 0 18px;
  height: 18px;
  border-radius: 50%;
  background: #e4f0df;
  color: #2f6d48;
  font-size: 11px;
  font-weight: 800;
}
.profile-value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  text-align: right;
}
.status.neutral {
  color: #486359;
  background: #edf2ee;
}
.profile-phone-editor {
  margin-top: 18px;
}
.profile-phone-editor .form-panel {
  margin-top: 12px;
  max-width: 520px;
}
.profile-phone-editor .form-error {
  margin-top: 14px;
}
[data-theme="dark"] .saved-phone-note {
  color: #aabbb3;
}
[data-theme="dark"] .saved-phone-note > span:first-child {
  background: #203a2f;
  color: #d8f985;
}
[data-theme="dark"] .status.neutral {
  background: #1d3029;
  color: #b7c9c0;
}
/* Connected Overview: frequent actions and transparent catalog previews. */
.overview-top {
  display: grid;
  grid-template-columns: minmax(270px, 0.85fr) minmax(0, 1.55fr);
  gap: 28px;
  align-items: start;
  margin: 22px 0 28px;
}
.overview-wallet .wallet {
  min-height: 205px;
  padding: 25px;
  border-radius: 18px;
}
.overview-wallet .balance {
  font-size: 36px;
  margin: 18px 0 24px;
}
.overview-wallet .wallet-bottom {
  gap: 14px;
  flex-wrap: wrap;
}
.overview-wallet > .form-help {
  font-size: 12px;
  padding-left: 4px;
}
.overview-top .section-head {
  margin: 0 0 15px;
}
.quick-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.quick-service {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 15px;
  text-align: left;
  min-height: 116px;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.quick-service:hover {
  border-color: #94b19d;
  transform: translateY(-2px);
}
.quick-service .icon {
  width: 34px;
  height: 34px;
  font-size: 22px;
  border-radius: 10px;
  margin: 0;
}
.quick-service strong {
  font-size: 13px;
  display: block;
}
.quick-service small {
  display: block;
  font-size: 11px;
  color: #64756c;
  margin-top: 4px;
  line-height: 1.35;
}
.soon-label {
  font-size: 10px;
  font-weight: 600;
  color: #536a5d;
  background: #edf3ed;
  padding: 4px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.quick-service > .soon-label {
  position: absolute;
  top: 12px;
  right: 10px;
}
.overview-section {
  margin-top: 30px;
}
.overview-section .section-head {
  margin-bottom: 15px;
}
.overview-section .section-head h2 {
  margin: 0;
}
.overview-section .section-head .form-help {
  margin: 7px 0 0;
}
.overview-section h2 {
  font-size: 20px;
}
.frequent-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px dashed #b7cbb9;
  background: #f0f5ed;
  padding: 19px 22px;
  border-radius: 14px;
}
.frequent-empty > div {
  flex: 1;
}
.frequent-empty p {
  margin: 6px 0 0;
  font-size: 13px;
  color: #64756c;
  line-height: 1.5;
}
.frequent-empty strong {
  font-size: 14px;
}
.frequent-empty .text-btn {
  font-size: 12px;
  white-space: nowrap;
}
.frequent-grid,
.data-deals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.frequent-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 1px solid var(--border);
  background: white;
  padding: 16px;
  border-radius: 14px;
  min-width: 0;
}
.frequent-card > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.frequent-card strong {
  font-size: 14px;
}
.frequent-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 5px;
  overflow-wrap: anywhere;
}
.frequent-card:hover {
  border-color: #94b19d;
}
.frequent-card .circle {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.sample-caption {
  font-size: 12px;
  color: #68766a;
  margin: 0 0 12px;
}
.data-deal {
  padding: 21px;
  border: 1px solid #dbe6d7;
  border-radius: 16px;
  background: linear-gradient(130deg, #eef5e7, #fff 80%);
}
.data-deal:nth-child(2) {
  background: linear-gradient(130deg, #edf4fa, #fff 80%);
}
.data-deal:nth-child(3) {
  background: linear-gradient(130deg, #f3eff9, #fff 80%);
}
.deal-top,
.deal-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.deal-top > span:last-child {
  font-size: 28px;
  color: var(--green);
}
.deal-tag {
  font:
    700 10px Manrope,
    Arial,
    sans-serif;
  letter-spacing: 1px;
  color: #49654e;
}
.data-deal h3 {
  font:
    800 21px Manrope,
    Arial,
    sans-serif;
  margin: 17px 0 7px;
}
.data-deal p {
  font-size: 13px;
  color: #64756c;
  margin: 0 0 22px;
}
.deal-bottom > strong {
  font:
    800 24px Manrope,
    Arial,
    sans-serif;
  letter-spacing: -0.6px;
}
.deal-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  padding: 8px 0;
}
.deal-bottom {
  flex-wrap: wrap;
}
.sidebar nav {
  min-height: 0;
  overflow-y: auto;
}
.sidebar .nav-item {
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .overview-top {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .quick-services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .overview-wallet .wallet {
    min-height: 0;
  }
  .overview-wallet .balance {
    margin: 12px 0 18px;
  }
  .data-deal {
    padding: 16px;
  }
  .data-deal h3 {
    font-size: 18px;
  }
  .deal-bottom > strong {
    font-size: 22px;
  }
  .frequent-empty {
    flex-wrap: wrap;
  }
  .frequent-grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   Mobile-First App Experience & Native Styling (Max-Width: 768px)
   ========================================================================== */

/* Base & Safe Area Handling */
html {
  min-height: 100%;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Premium product system — desktop dashboard + Capacitor-ready mobile shell */
:root {
  --premium-bg: #f4f6f2;
  --premium-surface: #fff;
  --premium-soft: #eef2eb;
  --premium-line: #dde4dd;
  --premium-ink: #10231d;
  --premium-muted: #68756f;
  --premium-green: #0b5d4f;
  --premium-green-2: #174f45;
  --premium-lime: #d8f985;
  --premium-shadow: 0 12px 36px rgba(24, 55, 46, 0.07);
  --premium-radius: 18px;
}
html {
  background: var(--premium-bg);
  scroll-behavior: smooth;
}
body {
  background: var(--premium-bg);
  color: var(--premium-ink);
  letter-spacing: -0.01em;
}
.sidebar {
  width: 256px;
  background: rgba(255, 255, 255, 0.96) !important;
  border-right: 1px solid var(--premium-line);
  padding: 24px 18px;
  backdrop-filter: blur(18px);
}
.sidebar-top {
  min-width: 0;
}
.brand {
  min-width: 0;
  flex: 1;
  overflow: visible;
  white-space: nowrap;
  font-size: 21px !important;
  letter-spacing: -0.7px;
}
.brand-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(9, 92, 77, 0.2);
}
.workspace-label {
  margin: 30px 12px 13px;
  font-size: 9px;
  letter-spacing: 1.8px;
  color: #8b9690;
}
.nav-item {
  min-height: 46px;
  padding: 11px 13px !important;
  border-radius: 12px !important;
  color: #67736e;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}
.nav-item:hover {
  background: #f2f5f1;
  color: var(--premium-ink);
  transform: translateX(2px);
}
.nav-item.active {
  background: #e8f0e9 !important;
  color: var(--premium-green) !important;
  box-shadow: inset 3px 0 0 var(--premium-green);
}
.nav-symbol {
  display: grid;
  place-items: center;
  width: 22px !important;
  height: 22px;
  font-size: 0 !important;
}
.nav-symbol svg {
  width: 20px;
  height: 20px;
}
.app {
  margin-left: 256px;
}
header {
  height: 78px;
  padding: 0 36px;
  background: rgba(255, 255, 255, 0.82) !important;
  border-bottom: 1px solid var(--premium-line);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 8;
}
#breadcrumb {
  font-weight: 700;
  color: #31413b;
}
.header-right {
  gap: 10px;
}
.header-icon-btn {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid var(--premium-line) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.8) !important;
  display: grid !important;
  place-items: center !important;
  position: relative;
}
.theme-icon,
.bell-icon {
  display: grid;
  place-items: center;
}
.theme-icon svg,
.bell-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.avatar {
  width: 42px;
  height: 42px;
  border: 1px solid #dbe4dc !important;
  background: #edf2eb !important;
  color: var(--premium-green);
}
.demo-pill {
  border: 0;
  background: #edf1e8;
  color: #5c6b61;
  font-weight: 700;
  padding: 8px 12px;
}
main {
  max-width: 1320px;
  padding: 38px 42px 56px;
}
.greeting {
  margin-bottom: 30px;
}
.greeting h1 {
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -1.5px;
  line-height: 1.12;
}
.subtitle {
  margin-top: 8px;
  color: var(--premium-muted);
  font-size: 15px !important;
}
.wallet,
.overview-wallet .wallet {
  background: linear-gradient(
    145deg,
    #0a5b4d 0%,
    #0a4b41 62%,
    #173e37 100%
  ) !important;
  border-radius: 22px !important;
  min-height: 220px;
  box-shadow: 0 18px 46px rgba(7, 68, 57, 0.2);
  isolation: isolate;
}
.wallet:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(216, 249, 133, 0.16),
      transparent 32%
    ),
    linear-gradient(110deg, transparent 55%, rgba(255, 255, 255, 0.035));
  z-index: -1;
}
.wallet:after {
  border-color: rgba(255, 255, 255, 0.035) !important;
}
.wallet-label {
  font-weight: 600;
  color: #c7ddd5;
}
.balance {
  font-size: 42px !important;
  letter-spacing: -2px !important;
}
.btn {
  min-height: 46px;
  border-radius: 12px !important;
  padding: 12px 19px;
  font-weight: 750 !important;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.btn:active,
.quick-service:active,
.hub-card:active {
  transform: scale(0.98);
}
.panel,
.quick-service,
.hub-card,
.data-deal,
.frequent-card {
  border: 1px solid var(--premium-line) !important;
  background: var(--premium-surface) !important;
  border-radius: var(--premium-radius) !important;
  box-shadow: 0 1px 2px rgba(24, 55, 46, 0.02);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.quick-service:hover,
.hub-card:hover,
.data-deal:hover,
.frequent-card:hover {
  transform: translateY(-2px);
  border-color: #b9cbbf !important;
  box-shadow: var(--premium-shadow);
}
.quick-service {
  min-height: 112px;
  padding: 18px !important;
}
.quick-service .icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  margin: 0 0 15px;
}
.quick-service .icon svg,
.hub-icon svg {
  width: 22px;
  height: 22px;
}
.quick-service strong {
  font-size: 14px;
}
.quick-service small {
  margin-top: 4px;
  color: var(--premium-muted);
}
.section-head h2,
.panel-head h2 {
  font-size: 20px !important;
  letter-spacing: -0.5px;
}
.setup-banner {
  border: 0 !important;
  background: linear-gradient(90deg, #e9f1e4, #f2f5e9) !important;
  border-radius: 16px !important;
}
.form-panel {
  max-width: 720px;
}
.form-panel label,
dialog label {
  color: #314a41 !important;
}
.form-panel input,
.form-panel select,
.form-panel textarea,
input,
select,
textarea {
  min-height: 52px;
  border-radius: 13px !important;
  border-color: var(--premium-line) !important;
  background: var(--premium-surface) !important;
}
.form-panel input:focus,
.form-panel select:focus,
.form-panel textarea:focus {
  border-color: #72a28d !important;
  box-shadow: 0 0 0 4px rgba(9, 92, 77, 0.09);
  outline: 0 !important;
}
dialog {
  border: 0;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 32px 90px rgba(7, 35, 28, 0.28);
}
#toast {
  bottom: calc(26px + env(safe-area-inset-bottom));
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(8, 37, 30, 0.25);
}
footer {
  border-color: var(--premium-line);
}
[data-theme="dark"] {
  --premium-bg: #09120f;
  --premium-surface: #111f1a;
  --premium-soft: #162620;
  --premium-line: #23372f;
  --premium-ink: #edf4f0;
  --premium-muted: #94a49d;
}
.sidebar,
[data-theme="dark"] .sidebar {
  background: rgba(13, 25, 21, 0.97) !important;
}
.app,
[data-theme="dark"] body,
[data-theme="dark"] html {
  background: var(--premium-bg);
}
[data-theme="dark"] header {
  background: rgba(13, 25, 21, 0.85) !important;
}
[data-theme="dark"] .header-icon-btn {
  background: #13231d !important;
  border-color: var(--premium-line) !important;
}
[data-theme="dark"] .avatar {
  background: #1b3028 !important;
  color: #d8f985;
}
[data-theme="dark"] .nav-item:hover {
  background: #15261f;
}
[data-theme="dark"] .nav-item.active {
  background: #193027 !important;
  color: #d8f985 !important;
  box-shadow: inset 3px 0 #d8f985;
}
[data-theme="dark"] .panel,
[data-theme="dark"] .quick-service,
[data-theme="dark"] .hub-card,
[data-theme="dark"] .data-deal,
[data-theme="dark"] .frequent-card {
  background: var(--premium-surface) !important;
  border-color: var(--premium-line) !important;
}
@media (max-width: 850px) {
  body:not(.signed-out) {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }
  .sidebar {
    display: none !important;
  }
  .app {
    margin-left: 0 !important;
  }
  header {
    height: calc(62px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 18px 0;
    position: sticky;
  }
  .mobile-menu {
    display: none !important;
  }
  #breadcrumb {
    font-size: 16px;
  }
  .demo-pill {
    display: none;
  }
  .header-right {
    margin-left: auto;
  }
  .header-icon-btn {
    width: 38px !important;
    height: 38px !important;
  }
  .avatar {
    width: 38px;
    height: 38px;
  }
  main {
    padding: 25px 18px 42px;
  }
  body:not(.signed-out) .mobile-bottom-nav {
    position: fixed !important;
    display: flex !important;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(68px + env(safe-area-inset-bottom));
    padding: 6px 8px env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, 0.94) !important;
    border-top: 1px solid var(--premium-line) !important;
    box-shadow: 0 -10px 30px rgba(16, 45, 36, 0.07);
    backdrop-filter: blur(20px);
    z-index: 40;
  }
  .bottom-nav-item {
    min-height: 56px !important;
    flex: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 12px !important;
    color: #74817b !important;
  }
  .bottom-nav-item.active {
    color: var(--premium-green) !important;
    background: #edf3ec !important;
  }
  .bottom-nav-icon {
    height: 24px;
    display: grid;
    place-items: center;
  }
  .bottom-nav-label {
    font-size: 10px;
    font-weight: 700;
  }
  .bottom-nav-item svg {
    width: 21px;
    height: 21px;
  }
  .overview-top {
    grid-template-columns: 1fr;
  }
  .quick-services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .greeting h1 {
    font-size: 30px;
  }
  .wallet,
  .overview-wallet .wallet {
    min-height: 205px;
  }
  .panel {
    border-radius: 16px !important;
  }
  [data-theme="dark"] .mobile-bottom-nav {
    background: rgba(12, 24, 20, 0.95) !important;
  }
  [data-theme="dark"] .bottom-nav-item.active {
    background: #193027 !important;
    color: #d8f985 !important;
  }
  footer {
    display: none !important;
  }
  #toast {
    bottom: calc(86px + env(safe-area-inset-bottom));
  }
  body.signed-out .mobile-bottom-nav,
  body.signed-out header,
  body.signed-out footer,
  body.signed-out .sidebar {
    display: none !important;
  }
}
@media (max-width: 560px) {
  header {
    padding-left: 16px;
    padding-right: 16px;
  }
  main {
    padding: 22px 16px 34px;
  }
  .greeting {
    margin-bottom: 24px;
  }
  .greeting h1 {
    font-size: 27px;
    letter-spacing: -1px;
  }
  .subtitle {
    font-size: 14px !important;
    line-height: 1.5;
  }
  .overview-top {
    gap: 24px;
    margin-top: 0;
  }
  .wallet,
  .overview-wallet .wallet {
    padding: 22px !important;
    border-radius: 20px !important;
    min-height: 194px;
  }
  .balance {
    font-size: 38px !important;
    margin: 14px 0 22px !important;
  }
  .wallet-bottom {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .wallet-bottom .btn {
    width: 100%;
    padding: 11px 10px !important;
    font-size: 13px;
  }
  .quick-services {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .quick-service {
    min-height: 112px !important;
    padding: 14px 10px !important;
    align-items: flex-start !important;
  }
  .quick-service .icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
  }
  .quick-service strong {
    font-size: 12px !important;
    line-height: 1.25;
  }
  .quick-service small {
    display: none !important;
  }
  .section-head {
    margin: 26px 0 14px;
  }
  .section-head h2,
  .panel-head h2 {
    font-size: 18px !important;
  }
  .panel {
    padding: 18px !important;
  }
  .hub-grid {
    grid-template-columns: 1fr !important;
  }
  .hub-card {
    min-height: 84px !important;
    padding: 16px !important;
  }
  .form-panel {
    padding: 20px !important;
  }
  .form-panel .btn[type="submit"] {
    width: 100%;
    position: relative;
  }
  .row {
    padding: 15px 0;
  }
  .row-end {
    min-width: 80px;
  }
  dialog {
    width: calc(100% - 24px);
    max-width: none;
    padding: 22px;
    border-radius: 22px;
  }
  .modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .modal-actions .btn {
    width: 100%;
  }
  .account-profile-row,
  .profile-row {
    align-items: flex-start;
  }
  .bank-number {
    font-size: 24px !important;
    letter-spacing: 1px !important;
  }
  .data-deals,
  .frequent-grid {
    scroll-snap-type: x mandatory;
  }
  .data-deal,
  .frequent-card {
    scroll-snap-align: start;
  }
}
@media (display-mode: standalone) {
  body {
    -webkit-user-select: none;
    user-select: none;
  }
  input,
  textarea {
    -webkit-user-select: text;
    user-select: text;
  }
  header {
    touch-action: pan-y;
  }
  .bottom-nav-item,
  .btn,
  .quick-service,
  .hub-card {
    -webkit-touch-callout: none;
  }
}
body {
  min-height: 100vh;
  background: var(--bg);
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}

/* Header Notification & Icons */
.header-icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef3ed;
  border: none;
  color: var(--green);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.12s ease;
}
.header-icon-btn:active {
  transform: scale(0.92);
}
.bell-icon {
  font-size: 16px;
  line-height: 1;
}
#notify-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #e23b3b;
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}
[data-theme="dark"] #notify-count,
:root:not([data-theme="light"]) #notify-count {
  border-color: #101d19 !important;
}
#notify-count:empty,
#notify-count[data-count="0"] {
  display: none;
}

/* Native Mobile Bottom Navigation Bar (Tab Bar) */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 850px) {
  body:not(.signed-out) .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 20px rgba(16, 44, 40, 0.06);
    z-index: 100;
    align-items: center;
    justify-content: space-around;
  }

  body:not(.signed-out) .app {
    padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px));
  }

  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    height: 100%;
    color: #72827d;
    font-size: 11px;
    font-weight: 500;
    border: none;
    background: transparent;
    padding: 6px 0;
    cursor: pointer;
    transition:
      color 0.15s ease,
      transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .bottom-nav-item:active {
    transform: scale(0.92);
  }

  .bottom-nav-item.active {
    color: var(--green);
    font-weight: 700;
  }

  .bottom-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    transition:
      background 0.15s ease,
      color 0.15s ease;
  }

  .bottom-nav-item.active .bottom-nav-icon {
    background: #eaf3eb;
    color: var(--green);
  }

  .bottom-nav-label {
    font-size: 11px;
    letter-spacing: -0.2px;
  }
}

/* ==========================================================================
   Isolated Guest & Authentication Experience (Full-Height Mobile Auth)
   ========================================================================== */
body.signed-out .mobile-bottom-nav,
body.signed-out header,
body.signed-out footer,
body.signed-out .sidebar {
  display: none !important;
}

body.signed-out .app {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  background: var(--bg) !important;
}

body.signed-out main {
  padding: max(24px, env(safe-area-inset-top, 0px)) 20px
    max(24px, env(safe-area-inset-bottom, 0px)) !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

body.signed-out .auth-wrap {
  margin: auto 0;
  width: 100%;
}

@media (max-width: 850px) {
  #theme-toggle {
    display: none !important;
  }
}

/* ==========================================================================
   Skeleton Screen Buffering & Shimmer Placeholders
   ========================================================================== */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.06) 25%,
    rgba(0, 0, 0, 0.12) 37%,
    rgba(0, 0, 0, 0.06) 63%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}

[data-theme="dark"] .skeleton-shimmer,
:root:not([data-theme="light"]) .skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.12) 37%,
    rgba(255, 255, 255, 0.05) 63%
  );
  background-size: 200% 100%;
}

.skeleton-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding-bottom: 24px;
}

.skeleton-greeting {
  height: 48px;
  width: 65%;
  border-radius: 12px;
}

.skeleton-card {
  height: 140px;
  width: 100%;
  border-radius: 16px;
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.skeleton-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto 6px;
}

.skeleton-row {
  height: 64px;
  width: 100%;
  border-radius: 12px;
}

/* ==========================================================================
   Compact Native Mobile Search & Filter Chips
   ========================================================================== */
.native-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}

.native-search-input {
  width: 100%;
  height: 40px !important;
  padding: 0 36px 0 38px !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  outline: none !important;
  transition: all 0.15s ease !important;
}

[data-theme="dark"] .native-search-input {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.native-search-input:focus {
  border-color: var(--green) !important;
  background: transparent !important;
}

.native-search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}

.native-search-clear {
  position: absolute;
  right: 10px;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-chips-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.filter-chips-row::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface-card, rgba(0, 0, 0, 0.03));
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
}

.filter-chip:active {
  transform: scale(0.95);
}

.filter-chip.active {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(9, 92, 77, 0.25);
}

/* ==========================================================================
   Smooth Native Mobile Bottom Sheet
   ========================================================================== */
.bottom-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.bottom-sheet-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.bottom-sheet-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85vh;
  max-height: 85dvh;
  background: var(--panel, #ffffff);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
  z-index: 999;
  display: flex;
  flex-direction: column;
  transform: translateY(105%);
  transition: transform 0.25s cubic-bezier(0.1, 0.9, 0.2, 1);
  padding: 12px 18px max(24px, env(safe-area-inset-bottom, 0px));
}

.bottom-sheet-container.active {
  transform: translateY(0);
}

.bottom-sheet-handle {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: rgba(120, 120, 120, 0.35);
  margin: 0 auto 12px;
}

.bottom-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.bottom-sheet-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.bottom-sheet-close {
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 16px;
  cursor: pointer;
  color: var(--ink);
}

.bottom-sheet-list {
  overflow-y: auto;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bottom-sheet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.bottom-sheet-item:active,
.bottom-sheet-item.selected {
  background: rgba(9, 92, 77, 0.08);
  border-color: var(--green);
  color: var(--green);
  font-weight: 700;
}

/* ==========================================================================
   Appearance / Theme Selector inside Settings
   ========================================================================== */
.appearance-card {
  margin-top: 18px;
}

.theme-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.theme-option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  gap: 6px;
}

.theme-option-card:active {
  transform: scale(0.96);
}

.theme-option-card.active {
  border-color: var(--green);
  background: rgba(9, 92, 77, 0.08);
  color: var(--green);
  font-weight: 700;
}

.theme-option-icon {
  font-size: 22px;
}

.theme-option-title {
  font-size: 12px;
}

/* ==========================================================================
   Connection Helper / Target Banner
   ========================================================================== */
.connection-alert-banner {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

[data-theme="dark"] .connection-alert-banner {
  background: #332701;
  color: #ffd866;
  border-color: #554101;
}

.connection-alert-banner button {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
}

/* ==========================================================================
   Mobile Screen Refinements (Phones: Max-Width 680px)
   ========================================================================== */
@media (max-width: 680px) {
  /* Header & Navigation */
  header {
    height: 56px;
    padding: 0 16px;
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 50;
  }
  #breadcrumb {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--ink);
  }
  .header-right {
    gap: 10px;
  }
  .avatar {
    width: 36px;
    height: 36px;
    font-size: 11px;
    border-width: 2px;
  }
  .demo-pill {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
  }

  /* Main Container */
  main {
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }

  /* Greeting */
  .greeting {
    margin-bottom: 14px;
  }
  .greeting h1 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin: 0 0 3px;
    line-height: 1.25;
  }
  .greeting .subtitle {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
  }

  /* Overview Top Layout */
  .overview-top {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 12px 0 18px;
  }

  /* Wallet Card */
  .overview-wallet .wallet {
    min-height: auto;
    padding: 18px 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, #095c4d 0%, #06392f 100%);
    box-shadow: 0 8px 24px rgba(9, 92, 77, 0.22);
    position: relative;
    overflow: hidden;
  }
  .overview-wallet .wallet-label {
    font-size: 12px;
    color: #bad8cc;
    font-weight: 600;
    letter-spacing: 0.2px;
  }
  .overview-wallet .balance {
    font-size: 30px;
    font-weight: 800;
    margin: 8px 0 16px;
    letter-spacing: -0.6px;
    font-family: "Manrope", Arial, sans-serif;
  }
  .overview-wallet .wallet-bottom {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .overview-wallet .wallet-bottom .btn.lime {
    flex: 1;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 10px;
    justify-content: center;
    min-height: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  .overview-wallet .wallet-bottom .wallet-link {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    white-space: nowrap;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .overview-wallet > .form-help {
    font-size: 11px;
    margin: 8px 0 0 2px;
    color: #64756c;
  }
  .overview-wallet [data-sandbox-fund] {
    margin-top: 8px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--green);
    background: #edf5ea;
    border-radius: 8px;
    border: 1px dashed #a3cdae;
    display: inline-block;
  }

  /* Quick Services (Mobile 3-Column Grid Launcher) */
  .quick-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 8px;
  }
  .quick-service {
    min-height: 84px;
    padding: 12px 6px 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition:
      transform 0.12s ease,
      background 0.12s ease;
  }
  .quick-service:active {
    transform: scale(0.93);
  }
  :root:not([data-theme="dark"]) .quick-service:active {
    background: #f5f8f5;
  }
  .quick-service .icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 20px;
    margin: 0 auto;
    display: grid;
    place-items: center;
  }
  .quick-service .service-label {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .quick-service strong {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--ink);
  }
  .quick-service small {
    display: none;
  }
  .quick-service > .soon-label {
    top: 6px;
    right: 6px;
    font-size: 8px;
    padding: 2px 4px;
  }

  /* Setup PIN Banner */
  .setup-banner {
    padding: 14px 16px;
    border-radius: 14px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
  }
  .setup-banner strong {
    font-size: 13px;
  }
  .setup-banner p {
    font-size: 11px;
    margin: 2px 0 0;
  }
  .setup-banner .text-btn {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 8px;
  }
  :root:not([data-theme="dark"]) .setup-banner .text-btn {
    background: white;
    border: 1px solid #dce7d5;
  }

  /* "Data for your everyday" - Mobile Swipeable Carousel */
  .data-deals-wrap {
    position: relative;
    margin-top: 10px;
  }
  .data-deals {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 16px 12px !important;
    margin: 0 -16px !important;
    scrollbar-width: none !important;
    grid-template-columns: none !important;
  }
  .data-deals::-webkit-scrollbar {
    display: none;
  }
  .data-deal {
    flex: 0 0 215px !important;
    width: 215px !important;
    min-width: 215px !important;
    scroll-snap-align: start !important;
    padding: 15px 16px !important;
    border-radius: 16px !important;
    border: 1px solid #dce7d9 !important;
    box-shadow: 0 4px 14px rgba(16, 44, 40, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
  }
  .data-deal:active {
    transform: scale(0.96);
  }
  .deal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .deal-tag {
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 3px 7px !important;
    border-radius: 6px !important;
    background: rgba(9, 92, 77, 0.08) !important;
    color: var(--green) !important;
  }
  .deal-icon,
  .deal-top > span:last-child {
    font-size: 18px !important;
    color: var(--green) !important;
  }
  .data-deal h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    margin: 10px 0 3px !important;
    line-height: 1.25 !important;
    font-family: "Manrope", Arial, sans-serif !important;
    color: var(--ink) !important;
  }
  .data-deal p,
  .deal-desc {
    font-size: 11px !important;
    color: #64756c !important;
    margin: 0 0 14px !important;
    line-height: 1.35 !important;
  }
  .deal-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: auto !important;
    padding-top: 10px !important;
    border-top: 1px dashed rgba(0, 0, 0, 0.08) !important;
    flex-wrap: nowrap !important;
  }
  .deal-bottom > strong {
    font-size: 16px !important;
    font-weight: 800 !important;
    font-family: "Manrope", Arial, sans-serif !important;
    letter-spacing: -0.3px !important;
    color: var(--ink) !important;
  }
  .deal-link {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    background: var(--green) !important;
    color: white !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 2px 6px rgba(9, 92, 77, 0.2) !important;
    transition: transform 0.1s ease !important;
  }
  .deal-link:active {
    transform: scale(0.92);
  }
  .carousel-hint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 11px;
    color: #798a82;
    margin-top: 4px;
    font-weight: 500;
  }
  .sample-caption {
    font-size: 11px;
    margin: 0 0 8px;
    color: #798a82;
  }

  /* Frequent Transactions (Mobile Swipeable Horizontal Track) */
  .frequent-scroll-wrap {
    margin-top: 8px;
  }
  .frequent-grid {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 16px 10px !important;
    margin: 0 -16px !important;
    scrollbar-width: none !important;
    grid-template-columns: none !important;
  }
  .frequent-grid::-webkit-scrollbar {
    display: none;
  }
  .frequent-card {
    flex: 0 0 190px !important;
    width: 190px !important;
    min-width: 190px !important;
    scroll-snap-align: start !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.12s ease !important;
  }
  .frequent-card:active {
    transform: scale(0.95);
  }
  .frequent-card strong {
    font-size: 12px;
    line-height: 1.25;
  }
  .frequent-card small {
    font-size: 11px;
    margin-top: 3px;
  }
  .frequent-arrow {
    margin-left: auto;
    font-size: 14px;
    color: var(--green);
  }
  .frequent-empty {
    padding: 14px 16px;
    border-radius: 14px;
    gap: 12px;
  }
  .frequent-empty strong {
    font-size: 13px;
  }
  .frequent-empty p {
    font-size: 12px;
    margin: 4px 0 0;
  }

  /* Section Heads & Panels */
  .overview-section {
    margin-top: 22px;
  }
  .overview-section .section-head {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .overview-section .section-head h2 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.3px;
  }
  .overview-section .section-head .form-help {
    font-size: 11px;
    margin: 2px 0 0;
  }
  .overview-section .section-head > .text-btn {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--green);
  }
  .panel {
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  }
  .panel-head {
    margin-bottom: 14px;
  }
  .panel-head h2 {
    font-size: 15px;
    font-weight: 700;
  }
  .row {
    padding: 12px 0;
    gap: 10px;
    border-bottom: 1px solid #f2f5f1;
  }
  .row-title {
    font-size: 13px;
    font-weight: 600;
  }
  .row-sub,
  .form-help {
    font-size: 11px;
    line-height: 1.45;
  }
  .amount {
    font-size: 14px;
    font-weight: 700;
  }
  .status {
    font-size: 10px;
    padding: 2px 6px;
  }
  footer {
    display: none;
  }

  /* Mobile Bottom Sheet Modals */
  dialog,
  .payment-dialog {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    max-height: 88vh !important;
    padding: 20px 18px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.16) !important;
    border: none !important;
    animation: slideUpSheet 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

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

  dialog::before,
  .payment-dialog::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #d4ded7;
    margin: 0 auto 16px;
  }

  .form-panel label,
  dialog label {
    font-size: 13px;
    margin: 14px 0 6px;
  }
  input,
  select,
  textarea {
    font-size: 16px !important;
    padding: 12px 14px;
    border-radius: 10px;
    min-height: 48px;
  }
  .btn {
    min-height: 46px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
  }
  .modal-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .modal-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media print {
  .sidebar,
  header,
  footer,
  #toast,
  main button,
  .mobile-bottom-nav {
    display: none !important;
  }
  .app {
    margin: 0 !important;
    padding-bottom: 0 !important;
  }
  main {
    padding: 0 !important;
  }
  .panel {
    border: 0;
    box-shadow: none;
  }
  .greeting {
    margin-top: 0;
  }
}

.payment-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  color: var(--text, #183b33);
  background: #fff;
  box-shadow: 0 24px 80px #102c2840;
}
.payment-dialog::backdrop {
  background: #102c2870;
}
.payment-dialog .form-panel {
  max-width: none;
  padding: 0;
}
.payment-dialog .summary-line {
  margin-bottom: 18px;
}
.payment-dialog h2 {
  font-size: 21px;
  margin: 0;
}
.payment-dialog p {
  line-height: 1.6;
}
.payment-dialog progress {
  width: 100%;
  accent-color: var(--green);
}
.payment-dialog .action-wrap {
  justify-content: flex-end;
}
.payment-dialog .processing-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.payment-dialog .processing-actions .btn {
  min-height: 44px;
}

/* ==========================================================================
   Separated Network Selector, Validity Tabs, & Plan Summary Card
   ========================================================================== */
.network-select-wrap {
  margin-bottom: 16px;
}
.network-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 8px;
  margin-bottom: 6px;
  scrollbar-width: none;
}
.network-chips::-webkit-scrollbar {
  display: none;
}
.network-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 12px;
  border: 1.5px solid #dce5de;
  background: #ffffff;
  color: var(--ink);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.network-chip:hover {
  border-color: #a3c4b0;
  background: #f9fbf9;
}
.network-chip.active {
  border-color: var(--green);
  background: #eaf3eb;
  color: var(--green);
  box-shadow: 0 2px 8px rgba(9, 92, 77, 0.12);
}
.network-chip:active {
  transform: scale(0.96);
}
.network-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background: var(--green);
}
.net-mtn {
  background: #ffcc00;
  box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.28);
}
.net-airtel {
  background: #e60000;
  box-shadow: 0 0 0 2px rgba(230, 0, 0, 0.25);
}
.net-glo {
  background: #008753;
  box-shadow: 0 0 0 2px rgba(0, 135, 83, 0.25);
}
.net-9mobile,
.net-etisalat {
  background: #00552b;
  box-shadow: 0 0 0 2px rgba(0, 85, 43, 0.25);
}
.net-dstv {
  background: #0077b6;
  box-shadow: 0 0 0 2px rgba(0, 119, 182, 0.25);
}
.net-gotv {
  background: #ff5e00;
  box-shadow: 0 0 0 2px rgba(255, 94, 0, 0.25);
}
.net-startimes {
  background: #6a0dad;
  box-shadow: 0 0 0 2px rgba(106, 13, 173, 0.25);
}
.net-waec {
  background: #004b23;
  box-shadow: 0 0 0 2px rgba(0, 75, 35, 0.25);
}
.network-select {
  margin-top: 4px;
}

/* Validity Filter Tabs (Data Bundles) */
.validity-tab-container {
  margin: 16px 0 12px;
}
.validity-label {
  display: block;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #36574b;
  margin-bottom: 8px;
}
.validity-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px;
  scrollbar-width: none;
}
.validity-tabs::-webkit-scrollbar {
  display: none;
}
.validity-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #dce5de;
  background: #ffffff;
  color: var(--muted);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.validity-tab:hover {
  color: var(--ink);
  border-color: #a3c4b0;
  background: #f9fbf9;
}
.validity-tab.active {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(9, 92, 77, 0.22);
}
.validity-tab:active {
  transform: scale(0.96);
}

/* Plan Selection & Live Summary Card */
.plan-select-wrap {
  margin: 14px 0;
}
.plan-summary-card {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f0f7f3 0%, #eaf4ed 100%);
  border: 1px solid #d2e4d7;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(9, 92, 77, 0.04);
}
.plan-summary-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.plan-summary-name {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.plan-summary-price {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--green);
  white-space: nowrap;
}
.plan-summary-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.plan-summary-badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  background: #ffffff;
  border: 1px solid #d2e4d7;
  color: #2d5a49;
}
.plan-summary-badge.daily {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}
.plan-summary-badge.weekly {
  background: #dbeafe;
  color: #1e40af;
  border-color: #bfdbfe;
}
.plan-summary-badge.monthly {
  background: #d1fae5;
  color: #065f46;
  border-color: #a7f3d0;
}
.plan-summary-badge.others {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #ddd6fe;
}
.plan-summary-fee {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

/* ==========================================================================
   Mobile Anti-Overlap & Responsive Flow Safeguards
   ========================================================================== */
.btn-sm {
  min-height: 34px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.panel-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Device Alerts Card (No text collisions) */
.push-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #f7faf7;
  border: 1px solid #dce8dc;
  border-radius: 14px;
  margin-bottom: 18px;
}
.push-card-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.push-card-body {
  flex: 1;
  min-width: 0;
}
.push-card-body strong {
  display: block;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.push-card-body p {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0;
  line-height: 1.4;
}
.push-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* General Layout Anti-Overlap Protections */
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}
.row-body {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}
.row-body strong,
.row-body p,
.row-title,
.row-sub {
  overflow-wrap: break-word;
  word-break: normal;
}
.row-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  text-align: right;
  min-width: 75px;
}

.action-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (max-width: 768px) {
  header {
    gap: 8px;
  }
  #breadcrumb {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }
  .panel-head h2 {
    font-size: 16px;
  }
  .panel-head {
    margin-bottom: 14px;
  }
}

@media (max-width: 600px) {
  .push-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .push-card-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5ede5;
  }
}

@media (max-width: 420px) {
  .demo-pill {
    display: none !important;
  }
}

/* ==========================================================================
   Services Hub Layout
   ========================================================================== */
.services-hub {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 8px;
}
.hub-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hub-group-title {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #36574b;
  margin: 0;
  letter-spacing: -0.2px;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.hub-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.hub-card:hover {
  border-color: #a3c4b0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(9, 92, 77, 0.08);
}
.hub-card:active {
  transform: scale(0.98);
}
.hub-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}
.hub-text {
  flex: 1;
  min-width: 0;
}
.hub-text strong {
  display: block;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.hub-text small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}
.hub-arrow {
  font-size: 15px;
  color: var(--green);
  font-weight: 700;
  margin-left: auto;
  flex-shrink: 0;
}

/* ==========================================================================
   Copyable Bank Card & Wallet Funding
   ========================================================================== */
.bank-accounts-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.bank-account-card {
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #095c4d 0%, #06392f 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(9, 92, 77, 0.18);
  position: relative;
  overflow: hidden;
}
.bank-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.bank-name {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #d8f991;
}
.bank-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.12);
  padding: 3px 8px;
  border-radius: 6px;
  color: #eaf4ed;
}
.bank-card-num-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
}
.bank-number {
  font-family: "Manrope", monospace;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffffff;
}
.copy-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.copy-pill-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}
.copy-pill-btn:active {
  transform: scale(0.95);
}
.panel .copy-pill-btn {
  background: #f0f5f0;
  color: var(--green);
  border: 1px solid #c7dec9;
}
.panel .copy-pill-btn:hover {
  background: #e2ede2;
}
.bank-account-name {
  font-size: 13px;
  color: #c1d8ce;
  margin-top: 4px;
}

/* ==========================================================================
   Enhanced Premium Fintech Transaction Receipt Screen
   ========================================================================== */
.receipt-panel {
  max-width: 540px;
  margin: 0 auto;
  padding: 0;
  border-radius: 28px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.receipt-card-premium {
  max-width: 490px;
  margin: 10px auto 36px;
  padding: 26px 24px 22px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8e4);
  border-radius: 28px;
  box-shadow:
    0 16px 44px rgba(9, 92, 77, 0.08),
    0 3px 10px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

[data-theme="dark"] .receipt-card-premium {
  background: #111f1a;
  border-color: #23372f;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}

/* Brand watermark & serial in header */
.receipt-brand-stamp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px dashed var(--border, #e5ede8);
  font-size: 12px;
  color: var(--muted, #64748b);
}
.receipt-brand-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 800;
  color: var(--green, #0b6655);
}
.receipt-brand-logo .brand-glyph {
  font-size: 14px;
  color: #10b981;
}
[data-theme="dark"] .receipt-brand-logo {
  color: #34d399;
}
.receipt-serial-badge {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: var(--surface-2, #f1f5f3);
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--muted, #64748b);
}
[data-theme="dark"] .receipt-serial-badge {
  background: #1a2c25;
  color: #a0b2aa;
}

/* Rosette Status Medallion Badge */
.receipt-rosette-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0 14px;
  position: relative;
  animation: rosette-bounce-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes rosette-bounce-in {
  0% {
    transform: scale(0.4) rotate(-15deg);
    opacity: 0;
  }
  70% {
    transform: scale(1.08) rotate(3deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.receipt-rosette-svg {
  display: block;
  filter: drop-shadow(0 8px 18px rgba(11, 102, 85, 0.22));
}
.receipt-rosette-wrap.pending .receipt-rosette-svg {
  filter: drop-shadow(0 8px 18px rgba(217, 119, 6, 0.25));
}
.receipt-rosette-wrap.failed .receipt-rosette-svg {
  filter: drop-shadow(0 8px 18px rgba(220, 38, 38, 0.25));
}
.receipt-rosette-wrap.reversed .receipt-rosette-svg {
  filter: drop-shadow(0 8px 18px rgba(124, 58, 237, 0.25));
}

/* Header Section */
.receipt-hero-head {
  text-align: center;
  margin-bottom: 20px;
}
.receipt-subtitle {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted, #64748b);
  margin-bottom: 6px;
}
.receipt-status-title {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin: 0 0 8px;
  line-height: 1.25;
}
.receipt-status-title.success {
  color: #087f5b;
}
[data-theme="dark"] .receipt-status-title.success {
  color: #34d399;
}
.receipt-status-title.pending,
.receipt-status-title.review {
  color: #d97706;
}
.receipt-status-title.failed {
  color: #dc2626;
}
.receipt-status-title.reversed {
  color: #7c3aed;
}

.receipt-amount-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--ink, #0f172a);
  margin-top: 6px;
}
.receipt-currency {
  font-size: 22px;
  font-weight: 700;
  color: var(--green, #0b6655);
}
[data-theme="dark"] .receipt-currency {
  color: #d8f985;
}
.receipt-hero-note {
  font-size: 13px;
  color: var(--muted, #64748b);
  margin: 6px auto 0;
  max-width: 380px;
  line-height: 1.45;
}

/* Perforated ticket divider with circular side cutouts */
.receipt-divider-ticket {
  position: relative;
  margin: 22px -24px;
  display: flex;
  align-items: center;
}
.ticket-notch {
  width: 22px;
  height: 22px;
  background: var(--bg, #f4f7f5);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  box-sizing: border-box;
}
.ticket-notch.notch-left {
  left: -11px;
  box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.05);
}
.ticket-notch.notch-right {
  right: -11px;
  box-shadow: inset 2px 0 3px rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .ticket-notch {
  background: var(--premium-bg, #09120f);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
}
.ticket-dash-line {
  flex: 1;
  border-bottom: 2px dashed var(--border, #d8e2dc);
  margin: 0 16px;
}
[data-theme="dark"] .ticket-dash-line {
  border-bottom-color: #274035;
}

/* Structured Key-Value Table */
.receipt-table {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 22px;
}
.receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  font-size: 14px;
  line-height: 1.5;
}
.receipt-row-label {
  color: var(--muted, #64748b);
  font-weight: 600;
  min-width: 95px;
  flex-shrink: 0;
}
.receipt-row-value {
  color: var(--ink, #0f172a);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.receipt-row-description .receipt-row-value {
  text-align: right;
  line-height: 1.45;
  font-weight: 500;
  color: #1e293b;
  max-width: 290px;
}
[data-theme="dark"] .receipt-row-description .receipt-row-value {
  color: #e2e8f0;
}

.receipt-ref-val code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.3px;
  background: var(--surface-2, #f0f4f2);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border, #e2e8e4);
  color: var(--ink, #1e293b);
}
[data-theme="dark"] .receipt-ref-val code {
  background: #192922;
  border-color: #284438;
  color: #f1f5f9;
}

.receipt-copy-pill {
  border: 1px solid #d2e4d9;
  background: #eef7f2;
  color: #087f5b;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.receipt-copy-pill:hover {
  background: #087f5b;
  color: #ffffff;
  border-color: #087f5b;
}
[data-theme="dark"] .receipt-copy-pill {
  background: #173228;
  border-color: #2c5947;
  color: #8ef7c2;
}

.service-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.service-pill-badge.mtn {
  background: #ffcc00;
  color: #000000;
}
.service-pill-badge.airtel {
  background: #ed1c24;
  color: #ffffff;
}
.service-pill-badge.glo {
  background: #28a745;
  color: #ffffff;
}
.service-pill-badge.nine-mobile,
.service-pill-badge.mobile9 {
  background: #00594c;
  color: #ffffff;
}
.service-pill-badge.electricity {
  background: #f59e0b;
  color: #ffffff;
}
.service-pill-badge.education {
  background: #6366f1;
  color: #ffffff;
}
.service-pill-badge.tv {
  background: #0284c7;
  color: #ffffff;
}
.service-pill-badge.transfer {
  background: #8b5cf6;
  color: #ffffff;
}
.service-pill-badge.general {
  background: #64748b;
  color: #ffffff;
}

.payment-method-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 600;
}

.cashback-reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 1px solid #a7f3d0;
  color: #065f46;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
}
[data-theme="dark"] .cashback-reward-badge {
  background: #14352b;
  border-color: #276751;
  color: #6ee7b7;
}

/* Delivery Highlight Box (Electricity Meter Token & Exam PINs) */
.delivery-highlight-box {
  padding: 16px;
  border-radius: 16px;
  background: #f4f8f4;
  border: 1.5px dashed #a3c9ab;
  margin: 18px 0;
  text-align: center;
}
[data-theme="dark"] .delivery-highlight-box {
  background: #142820;
  border-color: #2a5240;
}
.delivery-label {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #2d5a49;
  margin-bottom: 6px;
}
[data-theme="dark"] .delivery-label {
  color: #a7f3d0;
}
.token-val {
  margin: 10px 0;
}
.token-val code {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--green, #0b6655);
  background: #ffffff;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid #d2e4d7;
  display: inline-block;
  user-select: all;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .token-val code {
  background: #193327;
  border-color: #284f3e;
  color: #d8f985;
}

/* Help Codes Card ("View Help Codes" - Telecom USSD Balances) */
.receipt-help-codes-box {
  background: #f7faf8;
  border: 1.5px solid #d8e5df;
  border-radius: 18px;
  padding: 14px 16px;
  margin: 18px 0 20px;
  transition: all 0.2s ease;
}
[data-theme="dark"] .receipt-help-codes-box {
  background: #13241d;
  border-color: #233e32;
}

.help-codes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.help-codes-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.help-codes-main-title {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #087f5b;
}
[data-theme="dark"] .help-codes-main-title {
  color: #34d399;
}
.help-codes-sub-title {
  font-size: 12px;
  color: var(--muted, #64748b);
  font-weight: 500;
}
.help-codes-icon-info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e6f4ee;
  color: #087f5b;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
[data-theme="dark"] .help-codes-icon-info {
  background: #1c362b;
  color: #34d399;
}

.help-codes-body {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #d5e3dc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-theme="dark"] .help-codes-body {
  border-top-color: #254235;
}

.help-code-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5ede8);
  border-radius: 10px;
  font-size: 13px;
  gap: 8px;
}
[data-theme="dark"] .help-code-item {
  background: #172a22;
  border-color: #274437;
}

.help-code-label {
  font-weight: 600;
  color: var(--ink, #1e293b);
}
.help-code-val-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.help-code-val {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 13.5px;
  font-weight: 800;
  color: #087f5b;
  background: #eef7f2;
  padding: 2px 7px;
  border-radius: 6px;
}
[data-theme="dark"] .help-code-val {
  background: #1d382e;
  color: #6ee7b7;
}
.help-dial-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 8px;
  background: #087f5b;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.help-dial-btn:hover {
  background: #066649;
}

.help-codes-toggle-all {
  margin-top: 6px;
  text-align: center;
}
.help-codes-toggle-all .text-btn {
  font-size: 12px;
  font-weight: 700;
  color: #087f5b;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
[data-theme="dark"] .help-codes-toggle-all .text-btn {
  color: #34d399;
}
.other-networks-codes {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Action Buttons (Report + Download Receipt Pills) */
.receipt-action-group {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.receipt-primary-pills {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 12px;
}

.btn-receipt-report {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 16px;
  border-radius: 50px;
  background: #e03144;
  color: #ffffff;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(224, 49, 68, 0.28);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-receipt-report:hover {
  background: #c92a3a;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(224, 49, 68, 0.38);
}
.btn-receipt-report:active {
  transform: translateY(0);
}

.btn-receipt-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 50px;
  background: #087f5b;
  color: #ffffff;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(8, 127, 91, 0.28);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-receipt-download:hover {
  background: #066649;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(8, 127, 91, 0.38);
}
.btn-receipt-download:active {
  transform: translateY(0);
}

.btn-receipt-image {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 16px;
  border-radius: 50px;
  background: #0b6655;
  color: #ffffff;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  border: 1.5px solid #2da88d;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(11, 102, 85, 0.22);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-receipt-image:hover {
  background: #07473b;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(11, 102, 85, 0.32);
}
.btn-receipt-image:active {
  transform: translateY(0);
}
[data-theme="dark"] .btn-receipt-image {
  background: #14352b;
  border-color: #34d399;
}

.receipt-secondary-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-receipt-share-flat,
.btn-receipt-save-image-flat,
.btn-receipt-repeat-flat,
.btn-receipt-back-flat {
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  background: var(--surface-2, #f1f5f3);
  border: 1px solid var(--border, #e5ede8);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn-receipt-share-flat:hover,
.btn-receipt-save-image-flat:hover,
.btn-receipt-repeat-flat:hover,
.btn-receipt-back-flat:hover {
  background: var(--border, #e2eae5);
  transform: translateY(-1px);
}
[data-theme="dark"] .btn-receipt-share-flat,
[data-theme="dark"] .btn-receipt-save-image-flat,
[data-theme="dark"] .btn-receipt-repeat-flat,
[data-theme="dark"] .btn-receipt-back-flat {
  background: #162820;
  border-color: #264336;
  color: #edf4f0;
}

/* Security & Verification Footer */
.receipt-security-footer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #edf2ef);
  text-align: center;
  font-size: 11px;
  color: var(--muted, #64748b);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.security-lock-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: 600;
}

/* Modal wrapper */
.modal-receipt-container {
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
}
.modal-receipt-container .receipt-card-premium {
  margin: 0;
  border: none;
  box-shadow: none;
  padding: 8px 6px 16px;
}
.modal-receipt-container .ticket-notch {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .receipt-card-premium {
    padding: 22px 16px 18px;
    border-radius: 22px;
  }
  .receipt-divider-ticket {
    margin: 18px -16px;
  }
  .receipt-primary-pills {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .receipt-status-title {
    font-size: 21px;
  }
  .receipt-amount-display {
    font-size: 28px;
  }
  .receipt-row-description .receipt-row-value {
    max-width: 220px;
  }
}

/* Print Optimization */
@media print {
  @page {
    margin: 10mm;
    size: auto;
  }
  body {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
  }
  header,
  .sidebar,
  .mobile-bottom-nav,
  footer,
  .receipt-action-group,
  .help-dial-btn,
  .receipt-copy-pill,
  .help-codes-header .help-codes-icon-info,
  #toast,
  .demo-pill,
  dialog:not([open]) {
    display: none !important;
  }
  .app {
    margin: 0 !important;
    padding: 0 !important;
  }
  main {
    padding: 0 !important;
    max-width: 100% !important;
  }
  .receipt-card-premium {
    box-shadow: none !important;
    border: 1px solid #d0d7d3 !important;
    margin: 0 auto !important;
    max-width: 520px !important;
    padding: 20px !important;
  }
  .ticket-notch {
    display: none !important;
  }
  .ticket-dash-line {
    border-bottom: 1px dashed #999 !important;
  }
  .receipt-rosette-svg {
    filter: none !important;
  }
}

/* ==========================================================================
   Dedicated Service Screens: Airtime, Data, TV, Electricity & Education
   ========================================================================== */

/* Network Chips & Provider Logos */
.network-select-wrap {
  margin-bottom: 20px;
}
.network-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}
.network-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 25px;
  border: 1.5px solid var(--border);
  background: #ffffff;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.network-chip:hover {
  border-color: #a3c4b0;
  transform: translateY(-1px);
}
.network-chip.active {
  border-color: var(--green);
  background: #eaf5ee;
  color: var(--green);
  box-shadow: 0 2px 8px rgba(9, 92, 77, 0.12);
}
.network-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.net-mtn {
  background: #ffcc00;
}
.net-airtel {
  background: #e60000;
}
.net-glo {
  background: #00a859;
}
.net-9mobile,
.net-etisalat {
  background: #00593b;
}
.net-dstv {
  background: #0077b6;
}
.net-gotv {
  background: #e63946;
}
.net-startimes {
  background: #ff7700;
}
.network-select {
  display: none;
}

/* Airtime & Amount Suggestions Grid */
.amount-section {
  margin: 20px 0;
}
.amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0 16px;
}
@media (max-width: 480px) {
  .amount-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}
.amount-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: #ffffff;
  cursor: pointer;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  transition: all 0.15s ease;
  user-select: none;
}
.amount-chip:hover {
  border-color: #a3c4b0;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(9, 92, 77, 0.08);
}
.amount-chip.active {
  border-color: var(--green);
  background: #eaf5ee;
  color: var(--green);
  font-weight: 800;
  box-shadow:
    0 0 0 1.5px var(--green),
    0 3px 10px rgba(9, 92, 77, 0.14);
}

/* Electricity Meter Type Switcher */
.meter-switcher {
  display: flex;
  background: #eef3ed;
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
  margin: 12px 0 18px;
}
.meter-switcher-btn {
  flex: 1;
  padding: 12px 14px;
  border-radius: 9px;
  border: none;
  background: transparent;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.meter-switcher-btn:hover {
  color: var(--ink);
}
.meter-switcher-btn.active {
  background: var(--green);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(9, 92, 77, 0.25);
}

/* Discos Grid */
.disco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin: 10px 0 18px;
}
.disco-card {
  padding: 10px 8px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: #ffffff;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.disco-card:hover {
  border-color: #a3c4b0;
  transform: translateY(-1px);
}
.disco-card.active {
  border-color: var(--green);
  background: #eaf5ee;
  color: var(--green);
  box-shadow: 0 2px 6px rgba(9, 92, 77, 0.1);
}

/* Data Plan Validity Filter Tabs */
.validity-tab-container {
  margin: 16px 0 12px;
}
.validity-label {
  display: block;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #36574b;
  margin-bottom: 8px;
}
.validity-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.validity-tab {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: #ffffff;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.validity-tab:hover {
  border-color: #a3c4b0;
  color: var(--ink);
}
.validity-tab.active {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
  box-shadow: 0 2px 6px rgba(9, 92, 77, 0.15);
}

/* Visual Interactive Data Plan Cards */
.plan-cards-container {
  margin: 16px 0 20px;
}
.plan-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 10px 0;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px 2px;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 480px) {
  .plan-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}
.plan-card {
  position: relative;
  border: 1.5px solid var(--border);
  background: #ffffff;
  border-radius: 14px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 110px;
  user-select: none;
}
.plan-card:hover {
  border-color: #a3c4b0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(9, 92, 77, 0.08);
}
.plan-card.active {
  border-color: var(--green);
  background: #f2f8f4;
  box-shadow:
    0 0 0 2px var(--green),
    0 4px 14px rgba(9, 92, 77, 0.14);
}
.plan-card-val {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.25;
}
.plan-card-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #49654e;
  background: #eaf3eb;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-block;
  width: fit-content;
}
.plan-card-price {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--green);
  margin-top: 10px;
}

/* TV Bouquet List */
.tv-bouquet-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin: 12px 0 20px;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px 2px;
}
.tv-bouquet-card {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 95px;
}
.tv-bouquet-card:hover {
  border-color: #a3c4b0;
  transform: translateY(-2px);
}
.tv-bouquet-card.active {
  border-color: var(--green);
  background: #f2f8f4;
  box-shadow: 0 0 0 2px var(--green);
}
.tv-bouquet-name {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.tv-bouquet-price {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--green);
  margin-top: 8px;
}

/* Education Exam Body Cards */
.exam-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin: 12px 0 20px;
}
.exam-card {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 130px;
}
.exam-card:hover {
  border-color: #a3c4b0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(9, 92, 77, 0.08);
}
.exam-card.active {
  border-color: var(--green);
  background: #f2f8f4;
  box-shadow: 0 0 0 2px var(--green);
}
.exam-card-title {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}
.exam-card-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.exam-card-price {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--green);
  margin-top: 12px;
}

/* Live Service Order Summary */
.service-order-summary {
  background: #f7faf7;
  border: 1px solid #dce8dd;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 20px 0;
}
.service-order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 8px;
}
.service-order-row:last-child {
  margin-bottom: 0;
  padding-top: 8px;
  border-top: 1px dashed #c7dec9;
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--green);
}

/* ==========================================================================
   Paystack Dedicated Virtual Account Card & Funding UI
   ========================================================================== */
/* ==========================================================================
   Interactive Stacked ATM Card Deck (Paystack & Monnify DVA)
   ========================================================================== */
.bank-deck-container {
  margin: 10px 0 16px;
  max-width: 440px;
}

.bank-deck-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  position: relative;
  z-index: 10;
  padding: 0;
}

.deck-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  background: var(--surface-subtle, rgba(0, 0, 0, 0.05));
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
}

.deck-tab-btn:hover {
  color: var(--ink);
  background: var(--surface);
  transform: translateY(-1px);
}

.deck-tab-btn.active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(9, 92, 77, 0.25);
}

.deck-tab-btn .tab-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  transition: background 0.2s ease;
}

.deck-tab-btn.active .tab-indicator-dot {
  background: var(--lime);
  box-shadow: 0 0 0 2px rgba(216, 249, 145, 0.4);
}

.deck-tab-btn .tab-engine-pill {
  display: none;
}

/* Card Stack Container */
.bank-card-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1.68 / 1;
  min-height: 180px;
  max-height: 205px;
  perspective: 1000px;
}

/* ATM Physical Card */
.atm-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  padding: 16px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
    opacity 0.25s ease,
    box-shadow 0.35s ease,
    filter 0.25s ease;
  transform-origin: center bottom;
}

/* Hologram / Gloss Reflection */
.atm-card::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -20%;
  width: 140%;
  height: 120%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.03) 45%,
    transparent 60%
  );
  transform: rotate(-15deg);
  pointer-events: none;
}

/* Card Depth & Positioning */
.atm-card.is-active {
  z-index: 5;
  transform: translateY(0) scale(1);
  opacity: 1;
  filter: brightness(1);
  box-shadow:
    0 14px 32px -8px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.15);
}

.atm-card.is-stacked {
  z-index: 2;
  transform: translateY(12px) scale(0.96);
  opacity: 0.88;
  filter: brightness(0.85);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.25);
}

.atm-card.is-stacked:hover {
  transform: translateY(8px) scale(0.98);
  opacity: 0.98;
  filter: brightness(0.95);
}

/* Color Themes */
.paystack-atm-card {
  background: linear-gradient(135deg, #0a4f41 0%, #073b31 55%, #03201a 100%);
  color: #fff;
  border: 1px solid rgba(216, 249, 145, 0.28);
}

.monnify-atm-card {
  background: linear-gradient(135deg, #0e3d64 0%, #092842 55%, #041424 100%);
  color: #fff;
  border: 1px solid rgba(147, 197, 253, 0.32);
}

/* Card Header */
.atm-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.atm-bank-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.atm-bank-name {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #fff;
}

.atm-engine-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--lime, #d8f991);
  text-transform: uppercase;
}

.atm-engine-badge.monnify {
  color: #93c5fd;
}

.atm-contactless {
  color: rgba(255, 255, 255, 0.65);
}

/* EMV Chip */
.atm-chip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 2px;
}

.atm-emv-chip {
  width: 38px;
  height: 27px;
  background: linear-gradient(135deg, #d4af37 0%, #fae69e 50%, #aa7c11 100%);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.6),
    0 1px 3px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.atm-emv-chip .chip-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.25);
}

.atm-emv-chip .chip-line:first-child {
  top: 35%;
}

.atm-emv-chip .chip-line:last-child {
  top: 65%;
}

.atm-tag-status {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.3px;
}

/* Number Row */
.atm-number-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0;
}

.atm-number-display {
  font-family: "SF Mono", Consolas, Monaco, monospace;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  user-select: all;
}

.atm-copy {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.atm-copy:hover {
  background: #fff !important;
  color: #095c4d !important;
  transform: scale(1.05);
}

.monnify-atm-card .atm-copy:hover {
  color: #0e3d64 !important;
}

/* Card Footer */
.atm-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 4px;
}

.atm-holder-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.atm-lbl {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

.atm-val {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atm-brand-badge {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: var(--lime, #d8f991);
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.atm-brand-badge.monnify {
  color: #93c5fd;
}

.atm-switch-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bank-accounts-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin: 20px 0;
}
.bank-account-card {
  background: linear-gradient(135deg, #095c4d 0%, #0d4137 60%, #062b24 100%);
  color: #fff;
  border-radius: 18px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(9, 92, 77, 0.25);
  border: 1px solid rgba(216, 249, 145, 0.2);
}
.bank-account-card.monnify-card {
  background: linear-gradient(135deg, #0b3c5d 0%, #0d2b45 60%, #081c2e 100%);
  border: 1px solid rgba(147, 197, 253, 0.25);
  box-shadow: 0 12px 30px rgba(11, 60, 93, 0.25);
}
.bank-account-card.monnify-card .bank-tag {
  background: rgba(147, 197, 253, 0.15);
  color: #93c5fd;
  border-color: rgba(147, 197, 253, 0.35);
}
.bank-account-card::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(
    circle,
    rgba(216, 249, 145, 0.12) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
}
.bank-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.bank-name {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #eaf8f4;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bank-tag {
  background: rgba(216, 249, 145, 0.15);
  color: var(--lime, #d8f991);
  border: 1px solid rgba(216, 249, 145, 0.3);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.bank-card-num-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.bank-number {
  font-family: "SF Mono", Consolas, Monaco, monospace;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  user-select: all;
}
.bank-card-num-row .copy-pill-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bank-card-num-row .copy-pill-btn:hover {
  background: var(--lime, #d8f991);
  color: #095c4d;
  border-color: var(--lime, #d8f991);
}
.bank-account-name {
  font-size: 13px;
  color: #a4cfc2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Funding Steps */
.funding-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 22px 0 16px;
}
.funding-step {
  background: #f7faf7;
  border: 1px solid #e1ebe2;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.step-badge {
  background: var(--green);
  color: var(--lime);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.step-body strong {
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
  color: var(--ink);
}
.step-body p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

/* Manual Verify Accordion */
.verify-accordion {
  margin-top: 18px;
  border: 1px dashed #cddcd0;
  border-radius: 12px;
  padding: 14px 18px;
  background: #fafcfa;
}
.verify-accordion summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--green);
}
.verify-accordion-body {
  margin-top: 14px;
}

/* Notification Inbox, Cards & Actions */
.panel-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-clear-all {
  color: #b91c1c !important;
  border-color: #fecaca !important;
  background: #fff8f8 !important;
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-clear-all:hover {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fca5a5 !important;
}

.notification-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.notification-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: default;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
  position: relative;
  text-align: left;
}
.notification-card.is-transaction {
  cursor: pointer;
}
.notification-card.is-transaction:hover {
  border-color: #99baaa;
  background: #fafcfa;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(9, 92, 77, 0.06);
}
.notification-card:focus-visible {
  outline: 3px solid #9ec747;
  outline-offset: 2px;
}
.notification-card.unread {
  background: #f4faf6;
  border-color: #c7ded2;
}
.notification-card.unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--green);
}

.notif-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
  flex-shrink: 0;
}
.notif-icon-box.green {
  background: #eaf4e9;
  color: #2d6b38;
}
.notif-icon-box.blue {
  background: #eaf0ff;
  color: #3763b5;
}
.notif-icon-box.purple {
  background: #f1eafb;
  color: #7f4eb0;
}
.notif-icon-box.orange {
  background: #fff4e0;
  color: #ad7725;
}
.notif-icon-box.red {
  background: #fbedeb;
  color: #b93829;
}
.notif-icon-box.gray {
  background: #f0f3f1;
  color: #5a6662;
}

.notif-body {
  flex: 1;
  min-width: 0;
}
.notif-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.notif-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.notif-badge-new {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--lime);
  color: #1e3f28;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.notif-desc {
  font-size: 13px;
  color: #4b5854;
  margin: 0 0 5px 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.notif-meta {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.notif-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}
.notif-open-hint {
  font-size: 13px;
  color: var(--green);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #edf5ef;
  transition: all 0.15s ease;
}
.notification-card:hover .notif-open-hint {
  background: var(--green);
  color: white;
}
.notif-dismiss-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b9994;
  font-size: 14px;
  border: 1px solid transparent;
  background: transparent;
  transition: all 0.15s ease;
  cursor: pointer;
}
.notif-dismiss-btn:hover {
  background: #fceded;
  color: #b91c1c;
  border-color: #fca5a5;
}

@media (max-width: 600px) {
  .notification-card {
    padding: 12px 14px;
    gap: 10px;
  }
  .notif-open-hint {
    display: none;
  }
}

/* ==========================================================================
   Dark Theme Component Styling & Theme Switcher
   ========================================================================== */
.theme-icon {
  font-size: 16px;
  line-height: 1;
}

html[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark !important;
  background: var(--bg) !important;
  scrollbar-color: #1e382f #0b1412;
}

[data-theme="dark"] html,
[data-theme="dark"] body,
[data-theme="dark"] .app,
[data-theme="dark"] main {
  background: var(--bg) !important;
  color: var(--ink) !important;
}

/* Custom Deep Dark Scrollbars */
[data-theme="dark"] *::-webkit-scrollbar,
[data-theme="dark"]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
[data-theme="dark"] *::-webkit-scrollbar-track,
[data-theme="dark"]::-webkit-scrollbar-track {
  background: #0b1412 !important;
}
[data-theme="dark"] *::-webkit-scrollbar-thumb,
[data-theme="dark"]::-webkit-scrollbar-thumb {
  background: #1e382f !important;
  border-radius: 4px;
}
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover,
[data-theme="dark"]::-webkit-scrollbar-thumb:hover {
  background: #2a4e41 !important;
}

[data-theme="dark"] .sidebar {
  background: var(--sidebar-bg) !important;
  border-right-color: var(--border) !important;
}

[data-theme="dark"] header {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

@media (max-width: 680px) {
  [data-theme="dark"] header {
    background: rgba(16, 29, 25, 0.95) !important;
    border-bottom: 1px solid var(--border) !important;
  }
}

/* Mobile Bottom Navigation - Override high specificity mobile rule */
[data-theme="dark"] .mobile-bottom-nav,
body[data-theme="dark"]:not(.signed-out) .mobile-bottom-nav,
html[data-theme="dark"] body:not(.signed-out) .mobile-bottom-nav {
  background: rgba(16, 29, 25, 0.96) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .nav-item {
  color: #9cb1a8 !important;
}
[data-theme="dark"] .nav-item:hover {
  background: #172d26 !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .nav-item.active {
  background: #18352b !important;
  color: var(--lime) !important;
}

/* All Panels, Dialogs & Modals */
[data-theme="dark"] .panel,
[data-theme="dark"]
  .form-panel:not(.payment-dialog .form-panel):not(
    .verify-accordion .form-panel
  ),
[data-theme="dark"] .receipt-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] dialog,
[data-theme="dark"] .payment-dialog {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8) !important;
}
[data-theme="dark"] dialog::before,
[data-theme="dark"] .payment-dialog::before {
  background: #284439 !important;
}
[data-theme="dark"] dialog::backdrop,
[data-theme="dark"] .payment-dialog::backdrop {
  background: rgba(0, 0, 0, 0.8) !important;
}
[data-theme="dark"] .summary-line {
  color: var(--ink) !important;
}

/* Progress bar inside dialog */
[data-theme="dark"] progress,
[data-theme="dark"] .payment-dialog progress {
  accent-color: var(--lime) !important;
  background: #0e1a17 !important;
}
[data-theme="dark"] progress::-webkit-progress-bar {
  background: #0e1a17 !important;
  border-radius: 6px;
}
[data-theme="dark"] progress::-webkit-progress-value {
  background: var(--lime) !important;
  border-radius: 6px;
}

/* Notice & Info Banners (Deep Colors, Never White or Bright) */
[data-theme="dark"] .notice {
  background: #142821 !important;
  border: 1px solid #234537 !important;
  color: #d6e8de !important;
}
[data-theme="dark"] .tip {
  background: #13241f !important;
  border: 1px solid #203b30 !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .tip strong {
  color: var(--ink) !important;
}
[data-theme="dark"] .tip p {
  color: var(--muted) !important;
}

[data-theme="dark"] .voucher {
  background: #13241f !important;
  border: 1px dashed #254b3c !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .intro-card {
  background: #13241f !important;
  border: 1px solid #203b30 !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .intro-card h2 {
  color: var(--ink) !important;
}
[data-theme="dark"] .intro-card p {
  color: var(--muted) !important;
}
[data-theme="dark"] .orbit {
  border-color: #244437 !important;
}
[data-theme="dark"] .orbit:before {
  background: #183328 !important;
  border-color: #264a3b !important;
  color: var(--lime) !important;
  box-shadow: 0 9px 0 #11251d !important;
}

[data-theme="dark"] .setup-banner {
  background: #13241f !important;
  border: 1px solid #203b30 !important;
}
[data-theme="dark"] .setup-banner strong {
  color: var(--ink) !important;
}
[data-theme="dark"] .setup-banner p {
  color: var(--muted) !important;
}
[data-theme="dark"] .setup-banner .text-btn {
  background: #183328 !important;
  border: 1px solid #274c3b !important;
  color: var(--lime) !important;
}

[data-theme="dark"] .shop-card {
  background: #13241f !important;
  border: 1px solid #203b30 !important;
}
[data-theme="dark"] .shop-card strong {
  color: var(--ink) !important;
}
[data-theme="dark"] .shop-card p {
  color: var(--muted) !important;
}

/* Service Order Live Summaries */
[data-theme="dark"] .service-order-summary {
  background: #13241f !important;
  border: 1px solid #203b30 !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .service-order-row {
  color: var(--ink) !important;
}
[data-theme="dark"] .service-order-row:last-child {
  border-top: 1px dashed #244438 !important;
  color: var(--lime) !important;
}

/* Wallet Funding Steps & Accordion */
[data-theme="dark"] .funding-steps {
  gap: 14px;
}
[data-theme="dark"] .funding-step {
  background: #13241f !important;
  border: 1px solid #203b30 !important;
}
[data-theme="dark"] .step-body strong {
  color: var(--ink) !important;
}
[data-theme="dark"] .step-body p {
  color: var(--muted) !important;
}

[data-theme="dark"] .verify-accordion {
  background: #13241f !important;
  border: 1px dashed #28473a !important;
}
[data-theme="dark"] .verify-accordion summary {
  color: var(--lime) !important;
}

/* Device Alerts Push Card */
[data-theme="dark"] .push-card {
  background: #13241f !important;
  border: 1px solid #203b30 !important;
}
[data-theme="dark"] .push-card-body strong {
  color: var(--ink) !important;
}
[data-theme="dark"] .push-card-body p {
  color: var(--muted) !important;
}
[data-theme="dark"] .push-card-actions {
  border-top-color: #203b30 !important;
}

/* Delivery Highlight Box & Token/PINs */
[data-theme="dark"] .delivery-highlight-box {
  background: #13251f !important;
  border: 1.5px dashed #264b3c !important;
}
[data-theme="dark"] .delivery-label {
  color: var(--lime) !important;
}
[data-theme="dark"] .token-val code {
  background: #0c1814 !important;
  border: 1px solid #234336 !important;
  color: var(--lime) !important;
}
[data-theme="dark"] code {
  background: #0c1814 !important;
  color: #a3e635 !important;
  border-color: #234336 !important;
}

/* Services Hub Cards & Launcher */
[data-theme="dark"] .services-hub {
  background: transparent !important;
}
[data-theme="dark"] .hub-group-title {
  color: #a3c4b5 !important;
}
[data-theme="dark"] .hub-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .hub-card:hover {
  border-color: #2e5c4a !important;
  background: #162c23 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] .hub-card:active {
  background: #1a382e !important;
}
[data-theme="dark"] .hub-text strong {
  color: var(--ink) !important;
}
[data-theme="dark"] .hub-text small {
  color: var(--muted) !important;
}
[data-theme="dark"] .hub-arrow {
  color: var(--lime) !important;
}

/* Service Grid Cards & Launcher */
[data-theme="dark"] .service,
[data-theme="dark"] .quick-service {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .quick-service strong {
  color: var(--ink) !important;
}
[data-theme="dark"] .quick-service small {
  color: var(--muted) !important;
}
[data-theme="dark"] .quick-service:hover {
  border-color: #2e5c4a !important;
}
[data-theme="dark"] .quick-service:active {
  background: #162c23 !important;
}

/* Service Category Icons (Deep Tints in Dark Mode) */
[data-theme="dark"] .icon.mint,
[data-theme="dark"] .hub-icon.mint {
  background: #132b20 !important;
  color: #4ade80 !important;
}
[data-theme="dark"] .icon.blue,
[data-theme="dark"] .hub-icon.blue {
  background: #122438 !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .icon.purple,
[data-theme="dark"] .hub-icon.purple {
  background: #231733 !important;
  color: #c084fc !important;
}
[data-theme="dark"] .icon.orange,
[data-theme="dark"] .hub-icon.orange {
  background: #2f200c !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .icon.rose,
[data-theme="dark"] .hub-icon.rose {
  background: #331515 !important;
  color: #f87171 !important;
}

/* Data Plan Cards & Validity Badges */
[data-theme="dark"] .plan-cards-container label,
[data-theme="dark"] .validity-label {
  color: #a3c4b5 !important;
}
[data-theme="dark"] .validity-tab {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
[data-theme="dark"] .validity-tab:hover {
  border-color: var(--lime) !important;
  background: #183328 !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .validity-tab.active {
  background: #1a3c30 !important;
  border-color: var(--lime) !important;
  color: var(--lime) !important;
  font-weight: 800 !important;
}
[data-theme="dark"] .plan-card {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}
[data-theme="dark"] .plan-card:hover {
  border-color: #2e5c4a !important;
  background: #152922 !important;
}
[data-theme="dark"] .plan-card.active {
  background: #18382d !important;
  border-color: var(--lime) !important;
  box-shadow:
    0 0 0 2px var(--lime),
    0 4px 14px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .plan-card-val {
  color: var(--ink) !important;
}
[data-theme="dark"] .plan-card-price {
  color: var(--lime) !important;
}
[data-theme="dark"] .plan-card-badge {
  background: #18352b !important;
  color: #86efac !important;
  border: 1px solid #254739 !important;
}

/* Electricity Meter Switcher & Disco Cards */
[data-theme="dark"] .meter-switcher {
  background: #0f1c18 !important;
  border: 1px solid #1e332c !important;
}
[data-theme="dark"] .meter-switcher-btn {
  color: var(--muted) !important;
}
[data-theme="dark"] .meter-switcher-btn:hover {
  color: var(--ink) !important;
}
[data-theme="dark"] .meter-switcher-btn.active {
  background: #183a2f !important;
  color: var(--lime) !important;
  border: 1px solid #2d5e4b !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] .disco-section label {
  color: #a3c4b5 !important;
}
[data-theme="dark"] .disco-card {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .disco-card:hover {
  border-color: #2e5c4a !important;
  background: #152922 !important;
}
[data-theme="dark"] .disco-card.active {
  background: #183a2f !important;
  border-color: var(--lime) !important;
  color: var(--lime) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* TV Bouquets Cards */
[data-theme="dark"] .tv-bouquet-card {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .tv-bouquet-card:hover {
  border-color: #2e5c4a !important;
  background: #152922 !important;
}
[data-theme="dark"] .tv-bouquet-card.active {
  background: #183a2f !important;
  border-color: var(--lime) !important;
  box-shadow: 0 0 0 2px var(--lime) !important;
}
[data-theme="dark"] .tv-bouquet-name {
  color: var(--ink) !important;
}
[data-theme="dark"] .tv-bouquet-price {
  color: var(--lime) !important;
}

/* Education Exam Body Cards */
[data-theme="dark"] .exam-section label {
  color: #a3c4b5 !important;
}
[data-theme="dark"] .exam-card {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .exam-card:hover {
  border-color: #2e5c4a !important;
  background: #152922 !important;
}
[data-theme="dark"] .exam-card.active {
  background: #183a2f !important;
  border-color: var(--lime) !important;
  box-shadow: 0 0 0 2px var(--lime) !important;
}
[data-theme="dark"] .exam-card-title {
  color: var(--ink) !important;
}
[data-theme="dark"] .exam-card-desc {
  color: var(--muted) !important;
}
[data-theme="dark"] .exam-card-price {
  color: var(--lime) !important;
}

/* Network Chips & Amount Chips */
[data-theme="dark"] .network-chip {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .network-chip:hover {
  border-color: #2e5c4a !important;
  background: #152922 !important;
}
[data-theme="dark"] .network-chip.active {
  background: #183a2f !important;
  border-color: var(--lime) !important;
  color: var(--lime) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .amount-chip {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .amount-chip:hover {
  border-color: var(--lime) !important;
  background: #183328 !important;
  color: var(--lime) !important;
}
[data-theme="dark"] .amount-chip.active {
  background: #1a3c30 !important;
  border-color: var(--lime) !important;
  color: var(--lime) !important;
  font-weight: 800 !important;
}

/* Frequent Transactions Cards */
[data-theme="dark"] .frequent-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}
[data-theme="dark"] .frequent-card:hover {
  border-color: #2e5c4a !important;
}
[data-theme="dark"] .frequent-card:active {
  background: #162c23 !important;
}
[data-theme="dark"] .frequent-card strong {
  color: var(--ink) !important;
}
[data-theme="dark"] .frequent-card small {
  color: var(--muted) !important;
}
[data-theme="dark"] .frequent-arrow {
  color: var(--lime) !important;
}
[data-theme="dark"] .frequent-empty {
  background: #13241f !important;
  border: 1px solid #203b30 !important;
}
[data-theme="dark"] .frequent-empty strong {
  color: var(--ink) !important;
}
[data-theme="dark"] .frequent-empty p {
  color: var(--muted) !important;
}

/* Data Deals Cards */
[data-theme="dark"] .data-deal,
[data-theme="dark"] .data-deal:nth-child(n) {
  background: #13241f !important;
  border: 1px solid #203b30 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
[data-theme="dark"] .data-deal h3 {
  color: var(--ink) !important;
}
[data-theme="dark"] .deal-desc {
  color: var(--muted) !important;
}
[data-theme="dark"] .deal-bottom > strong {
  color: var(--ink) !important;
}
[data-theme="dark"] .deal-bottom {
  border-top: 1px dashed #203b30 !important;
}
[data-theme="dark"] .deal-tag {
  background: rgba(20, 139, 114, 0.22) !important;
  color: var(--lime) !important;
}

/* Data Plan Summary Card & Filter Badges */
[data-theme="dark"] .plan-summary-card {
  background: #13241f !important;
  border: 1px solid #203b30 !important;
}
[data-theme="dark"] .plan-summary-name {
  color: var(--ink) !important;
}
[data-theme="dark"] .plan-summary-price {
  color: var(--lime) !important;
}
[data-theme="dark"] .plan-summary-badge {
  background: #183328 !important;
  border-color: #254739 !important;
  color: #86efac !important;
}
[data-theme="dark"] .plan-summary-badge.daily {
  background: #2f2208 !important;
  color: #fde047 !important;
  border-color: #523b0d !important;
}
[data-theme="dark"] .plan-summary-badge.weekly {
  background: #0f233a !important;
  color: #93c5fd !important;
  border-color: #1e3d64 !important;
}
[data-theme="dark"] .plan-summary-badge.monthly {
  background: #0d2c1f !important;
  color: #6ee7b7 !important;
  border-color: #185239 !important;
}
[data-theme="dark"] .plan-summary-badge.others {
  background: #231636 !important;
  color: #d8b4fe !important;
  border-color: #422467 !important;
}

/* Form Inputs, Selects & Textareas */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #0e1a17 !important;
  border: 1.5px solid #1e332c !important;
  color: #ecf3ef !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--green) !important;
  outline: 2px solid rgba(20, 139, 114, 0.35) !important;
}
[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23d8f991' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
}
[data-theme="dark"] select option {
  background-color: #12211d !important;
  color: #ecf3ef !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #637b71 !important;
}

/* Notification Cards & Clear Action */
[data-theme="dark"] .notification-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .notification-card.unread {
  background: #152721 !important;
  border-color: #214436 !important;
}
[data-theme="dark"] .notification-card.is-transaction:hover {
  background: #162c24 !important;
  border-color: #2b5543 !important;
}
[data-theme="dark"] .notif-title {
  color: var(--ink) !important;
}
[data-theme="dark"] .notif-desc {
  color: #b7c7c0 !important;
}
[data-theme="dark"] .notif-open-hint {
  background: #183328 !important;
  color: var(--lime) !important;
}
[data-theme="dark"] .notif-dismiss-btn:hover {
  background: #3b1818 !important;
  color: #fca5a5 !important;
  border-color: #7f1d1d !important;
}
[data-theme="dark"] .btn-clear-all {
  background: #2d1414 !important;
  color: #fca5a5 !important;
  border-color: #5c1d1d !important;
}
[data-theme="dark"] .btn-clear-all:hover {
  background: #3d1b1b !important;
  color: #fecaca !important;
  border-color: #7f1d1d !important;
}

/* Notification Category Boxes */
[data-theme="dark"] .notif-icon-box.green {
  background: #132e22 !important;
  color: #4ade80 !important;
}
[data-theme="dark"] .notif-icon-box.blue {
  background: #132438 !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .notif-icon-box.purple {
  background: #241935 !important;
  color: #c084fc !important;
}
[data-theme="dark"] .notif-icon-box.orange {
  background: #302010 !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .notif-icon-box.red {
  background: #351515 !important;
  color: #f87171 !important;
}
[data-theme="dark"] .notif-icon-box.gray {
  background: #1a2924 !important;
  color: #9cb1a8 !important;
}

/* Status Badges, Circles & Indicators */
[data-theme="dark"] .circle {
  background: #162c23 !important;
  color: #4ade80 !important;
}
[data-theme="dark"] .status {
  background: #143024 !important;
  color: #4ade80 !important;
}
[data-theme="dark"] .status.pending {
  background: #33230c !important;
  color: #fcd34d !important;
}
[data-theme="dark"] .status.failed {
  background: #361515 !important;
  color: #fca5a5 !important;
}
[data-theme="dark"] .status.success {
  background: #143024 !important;
  color: #4ade80 !important;
}
[data-theme="dark"] .success-icon {
  background: #143024 !important;
  color: var(--lime) !important;
}
[data-theme="dark"] .network.tv {
  background: #14283b !important;
  color: #93c5fd !important;
}
[data-theme="dark"] .soon-label {
  background: #172d25 !important;
  color: #9cb1a8 !important;
}
[data-theme="dark"] .demo-pill {
  background: #172b24 !important;
  border-color: #264237 !important;
  color: #a4ce84 !important;
}
[data-theme="dark"] .avatar {
  background: #172a24 !important;
  border-color: #243d34 !important;
  color: var(--lime) !important;
}

/* Rows, Lists & Separators */
[data-theme="dark"] .row {
  border-bottom-color: var(--row-border) !important;
}
[data-theme="dark"] .receipt-header-badge {
  border-bottom-color: var(--row-border) !important;
}
[data-theme="dark"] .receipt-line {
  border-bottom-color: var(--row-border) !important;
}
[data-theme="dark"] .beneficiaries {
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] details {
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] summary {
  color: var(--ink) !important;
}
[data-theme="dark"] .switch-row {
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .overview-wallet [data-sandbox-fund] {
  background: #142820 !important;
  border: 1px dashed #295340 !important;
  color: var(--lime) !important;
}
[data-theme="dark"] label,
[data-theme="dark"] .validity-label,
[data-theme="dark"] .form-panel label,
[data-theme="dark"] dialog label {
  color: #9cb3a9 !important;
}

[data-theme="dark"] .panel .copy-pill-btn {
  background: #162c23 !important;
  color: var(--lime) !important;
  border: 1px solid #234737 !important;
}
[data-theme="dark"] .panel .copy-pill-btn:hover {
  background: #1b382d !important;
}

[data-theme="dark"] .wallet,
[data-theme="dark"] .overview-wallet .wallet {
  background: linear-gradient(135deg, #0e3b31 0%, #07261e 100%) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .bank-account-card {
  background: linear-gradient(135deg, #0d3128 0%, #071e19 100%) !important;
  border-color: rgba(216, 249, 145, 0.15) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .workspace-label {
  color: #728a80 !important;
}

[data-theme="dark"] footer {
  border-top-color: var(--border) !important;
  color: var(--muted) !important;
}

/* Secondary Button dark styling */
[data-theme="dark"] .btn.secondary:not(.lime) {
  background: #142821 !important;
  border-color: #234537 !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .btn.secondary:not(.lime):hover {
  background: #19342b !important;
  border-color: var(--lime) !important;
  color: var(--lime) !important;
}

/* ==========================================================================
   System Dark Preference Mirror
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark !important;
    scrollbar-color: #1e382f #0b1412;
  }
  :root:not([data-theme="light"]) body,
  :root:not([data-theme="light"]) .app,
  :root:not([data-theme="light"]) main {
    background: var(--bg) !important;
    color: var(--ink) !important;
  }
  :root:not([data-theme="light"]) *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  :root:not([data-theme="light"]) *::-webkit-scrollbar-track {
    background: #0b1412 !important;
  }
  :root:not([data-theme="light"]) *::-webkit-scrollbar-thumb {
    background: #1e382f !important;
    border-radius: 4px;
  }
  :root:not([data-theme="light"]) *::-webkit-scrollbar-thumb:hover {
    background: #2a4e41 !important;
  }
  :root:not([data-theme="light"]) .sidebar {
    background: var(--sidebar-bg) !important;
    border-right-color: var(--border) !important;
  }
  :root:not([data-theme="light"]) header {
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  :root:not([data-theme="light"]) .mobile-bottom-nav,
  body:not([data-theme="light"]):not(.signed-out) .mobile-bottom-nav {
    background: rgba(16, 29, 25, 0.96) !important;
    border-top: 1px solid var(--border) !important;
  }
  :root:not([data-theme="light"]) .panel,
  :root:not([data-theme="light"]) .form-panel,
  :root:not([data-theme="light"]) dialog,
  :root:not([data-theme="light"]) .payment-dialog,
  :root:not([data-theme="light"]) .receipt-panel {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--ink) !important;
  }
  :root:not([data-theme="light"]) .notice {
    background: #142821 !important;
    border-color: #234537 !important;
    color: #d6e8de !important;
  }
  :root:not([data-theme="light"]) .tip,
  :root:not([data-theme="light"]) .voucher,
  :root:not([data-theme="light"]) .intro-card {
    background: #13241f !important;
    border-color: #203b30 !important;
  }
  :root:not([data-theme="light"]) .setup-banner,
  :root:not([data-theme="light"]) .shop-card,
  :root:not([data-theme="light"]) .frequent-empty {
    background: #13241f !important;
    border-color: #203b30 !important;
  }
  :root:not([data-theme="light"]) .setup-banner .text-btn {
    background: #183328 !important;
    border-color: #274c3b !important;
    color: var(--lime) !important;
  }
  :root:not([data-theme="light"]) .service-order-summary {
    background: #13241f !important;
    border-color: #203b30 !important;
  }
  :root:not([data-theme="light"]) .funding-step,
  :root:not([data-theme="light"]) .verify-accordion,
  :root:not([data-theme="light"]) .push-card {
    background: #13241f !important;
    border-color: #203b30 !important;
  }
  :root:not([data-theme="light"]) .delivery-highlight-box {
    background: #13251f !important;
    border-color: #264b3c !important;
  }
  :root:not([data-theme="light"]) .token-val code {
    background: #0c1814 !important;
    border-color: #234336 !important;
    color: var(--lime) !important;
  }
  :root:not([data-theme="light"]) .data-deal,
  :root:not([data-theme="light"]) .data-deal:nth-child(n) {
    background: #13241f !important;
    border-color: #203b30 !important;
  }
  :root:not([data-theme="light"]) .plan-summary-card {
    background: #13241f !important;
    border-color: #203b30 !important;
  }
  :root:not([data-theme="light"]) .plan-summary-badge {
    background: #183328 !important;
    border-color: #254739 !important;
    color: #86efac !important;
  }
  :root:not([data-theme="light"]) .plan-summary-badge.daily {
    background: #2f2208 !important;
    color: #fde047 !important;
    border-color: #523b0d !important;
  }
  :root:not([data-theme="light"]) .plan-summary-badge.weekly {
    background: #0f233a !important;
    color: #93c5fd !important;
    border-color: #1e3d64 !important;
  }
  :root:not([data-theme="light"]) .plan-summary-badge.monthly {
    background: #0d2c1f !important;
    color: #6ee7b7 !important;
    border-color: #185239 !important;
  }
  :root:not([data-theme="light"]) .plan-summary-badge.others {
    background: #231636 !important;
    color: #d8b4fe !important;
    border-color: #422467 !important;
  }
  :root:not([data-theme="light"]) .hub-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
  }
  :root:not([data-theme="light"]) .hub-card:hover {
    border-color: #2e5c4a !important;
    background: #162c23 !important;
  }
  :root:not([data-theme="light"]) .hub-group-title {
    color: #a3c4b5 !important;
  }
  :root:not([data-theme="light"]) .hub-arrow {
    color: var(--lime) !important;
  }
  :root:not([data-theme="light"]) .plan-card {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
  }
  :root:not([data-theme="light"]) .plan-card:hover {
    border-color: #2e5c4a !important;
    background: #152922 !important;
  }
  :root:not([data-theme="light"]) .plan-card.active {
    background: #18382d !important;
    border-color: var(--lime) !important;
  }
  :root:not([data-theme="light"]) .plan-card-badge {
    background: #18352b !important;
    color: #86efac !important;
    border: 1px solid #254739 !important;
  }
  :root:not([data-theme="light"]) .validity-tab {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
  }
  :root:not([data-theme="light"]) .validity-tab:hover {
    background: #183328 !important;
    border-color: var(--lime) !important;
  }
  :root:not([data-theme="light"]) .validity-tab.active {
    background: #1a3c30 !important;
    border-color: var(--lime) !important;
    color: var(--lime) !important;
  }
  :root:not([data-theme="light"]) .meter-switcher {
    background: #0f1c18 !important;
    border: 1px solid #1e332c !important;
  }
  :root:not([data-theme="light"]) .meter-switcher-btn.active {
    background: #183a2f !important;
    color: var(--lime) !important;
  }
  :root:not([data-theme="light"]) .disco-card {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
  }
  :root:not([data-theme="light"]) .disco-card:hover {
    background: #152922 !important;
    border-color: #2e5c4a !important;
  }
  :root:not([data-theme="light"]) .disco-card.active {
    background: #183a2f !important;
    border-color: var(--lime) !important;
    color: var(--lime) !important;
  }
  :root:not([data-theme="light"]) .tv-bouquet-card {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
  }
  :root:not([data-theme="light"]) .tv-bouquet-card:hover {
    background: #152922 !important;
    border-color: #2e5c4a !important;
  }
  :root:not([data-theme="light"]) .tv-bouquet-card.active {
    background: #183a2f !important;
    border-color: var(--lime) !important;
  }
  :root:not([data-theme="light"]) .exam-card {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
  }
  :root:not([data-theme="light"]) .exam-card:hover {
    background: #152922 !important;
    border-color: #2e5c4a !important;
  }
  :root:not([data-theme="light"]) .exam-card.active {
    background: #183a2f !important;
    border-color: var(--lime) !important;
  }
  :root:not([data-theme="light"]) .network-chip {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
  }
  :root:not([data-theme="light"]) .network-chip:hover {
    background: #152922 !important;
    border-color: #2e5c4a !important;
  }
  :root:not([data-theme="light"]) .network-chip.active {
    background: #183a2f !important;
    border-color: var(--lime) !important;
  }
  :root:not([data-theme="light"]) .amount-chip {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
  }
  :root:not([data-theme="light"]) .amount-chip:hover {
    background: #183328 !important;
    border-color: var(--lime) !important;
  }
  :root:not([data-theme="light"]) .amount-chip.active {
    background: #1a3c30 !important;
    border-color: var(--lime) !important;
  }
  :root:not([data-theme="light"]) .btn-clear-all {
    background: #2d1414 !important;
    color: #fca5a5 !important;
    border-color: #5c1d1d !important;
  }
  :root:not([data-theme="light"]) .btn-clear-all:hover {
    background: #3d1b1b !important;
    color: #fecaca !important;
    border-color: #7f1d1d !important;
  }
  :root:not([data-theme="light"]) .success-icon {
    background: #143024 !important;
    color: var(--lime) !important;
  }
  :root:not([data-theme="light"]) .frequent-arrow {
    color: var(--lime) !important;
  }
  :root:not([data-theme="light"]) .quick-service,
  :root:not([data-theme="light"]) .frequent-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
  }
  :root:not([data-theme="light"]) input,
  :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) textarea {
    background-color: #0e1a17 !important;
    border-color: var(--border) !important;
    color: var(--ink) !important;
  }
  :root:not([data-theme="light"]) select option {
    background-color: #12211d !important;
    color: var(--ink) !important;
  }
  :root:not([data-theme="light"]) .notification-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
  }
  :root:not([data-theme="light"]) .notification-card.unread {
    background: #152721 !important;
  }
  :root:not([data-theme="light"]) .notification-card.is-transaction:hover {
    background: #162c24 !important;
    border-color: #2b5543 !important;
  }
  :root:not([data-theme="light"]) label,
  :root:not([data-theme="light"]) .validity-label,
  :root:not([data-theme="light"]) .form-panel label,
  :root:not([data-theme="light"]) dialog label {
    color: #9cb3a9 !important;
  }
  :root:not([data-theme="light"]) .panel .copy-pill-btn {
    background: #162c23 !important;
    color: var(--lime) !important;
    border: 1px solid #234737 !important;
  }
  :root:not([data-theme="light"]) .wallet,
  :root:not([data-theme="light"]) .overview-wallet .wallet {
    background: linear-gradient(135deg, #0e3b31 0%, #07261e 100%) !important;
  }
  :root:not([data-theme="light"]) .bank-account-card {
    background: linear-gradient(135deg, #0d3128 0%, #071e19 100%) !important;
  }
  :root:not([data-theme="light"]) .btn.secondary:not(.lime) {
    background: #142821 !important;
    border-color: #234537 !important;
    color: var(--ink) !important;
  }
  :root:not([data-theme="light"]) .btn.secondary:not(.lime):hover {
    background: #19342b !important;
    border-color: var(--lime) !important;
    color: var(--lime) !important;
  }
}

/* Appearance & Theme Selector */
.theme-selector {
  display: flex;
  gap: 10px;
  margin: 12px 0 20px;
}
.theme-option-btn {
  flex: 1;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.theme-option-btn:hover {
  background: rgba(9, 92, 77, 0.08);
  border-color: var(--green);
}
.theme-option-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: white;
}
[data-theme="dark"] .theme-option-btn:hover {
  background: rgba(20, 139, 114, 0.18);
  border-color: var(--green);
}
[data-theme="dark"] .theme-option-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: white;
}

/* ==========================================================================
   High-Contrast Button, Chip, Tab & Interactive Element Clarity Safeguards
   Eliminates all disappearing or low-opacity text on bright colors / themes
   ========================================================================== */

/* Universal Button Base & Opacity Reset */
button,
.btn,
.amount-chip,
.network-chip,
.validity-tab,
.meter-switcher-btn,
.disco-card,
.plan-card,
.tv-bouquet-card,
.exam-card,
.hub-card,
.quick-service,
.theme-option-btn,
.deal-link {
  -webkit-font-smoothing: antialiased;
}

button:not(:disabled),
.btn:not(:disabled) {
  opacity: 1 !important;
}

/* 1. Bright Lime Button (Fund Wallet & Primary Highlights) */
.btn.lime,
button.btn.lime,
a.btn.lime,
.overview-wallet .wallet-bottom .btn.lime {
  background: var(--lime) !important;
  color: #0c2018 !important;
  font-weight: 800 !important;
  letter-spacing: -0.1px !important;
  opacity: 1 !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
.btn.lime:hover,
button.btn.lime:hover,
.overview-wallet .wallet-bottom .btn.lime:hover {
  background: #cbf07e !important;
  color: #040e0b !important;
}
.btn.lime:active,
button.btn.lime:active {
  background: #bce46e !important;
  color: #000000 !important;
}

/* 2. Wallet Card Secondary Button (Send Money in Wallet Header) */
:root:not([data-theme="dark"]) .wallet .btn.secondary,
:root:not([data-theme="dark"]) .overview-wallet .wallet-bottom .btn.secondary,
:root:not([data-theme="dark"]) .overview-wallet .wallet-bottom .wallet-link {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
:root:not([data-theme="dark"]) .wallet .btn.secondary:hover,
:root:not([data-theme="dark"])
  .overview-wallet
  .wallet-bottom
  .btn.secondary:hover,
:root:not([data-theme="dark"])
  .overview-wallet
  .wallet-bottom
  .wallet-link:hover {
  background: rgba(255, 255, 255, 0.34) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  color: #ffffff !important;
}
[data-theme="dark"] .wallet .btn.secondary,
[data-theme="dark"] .overview-wallet .wallet-bottom .btn.secondary,
[data-theme="dark"] .overview-wallet .wallet-bottom .wallet-link,
:root:not([data-theme="light"]) .wallet .btn.secondary,
:root:not([data-theme="light"]) .overview-wallet .wallet-bottom .btn.secondary,
:root:not([data-theme="light"]) .overview-wallet .wallet-bottom .wallet-link {
  background: rgba(10, 32, 26, 0.75) !important;
  border: 1.5px solid #285444 !important;
  color: #ecf3ef !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
[data-theme="dark"] .wallet .btn.secondary:hover,
[data-theme="dark"] .overview-wallet .wallet-bottom .btn.secondary:hover,
[data-theme="dark"] .overview-wallet .wallet-bottom .wallet-link:hover,
:root:not([data-theme="light"]) .wallet .btn.secondary:hover,
:root:not([data-theme="light"])
  .overview-wallet
  .wallet-bottom
  .btn.secondary:hover,
:root:not([data-theme="light"])
  .overview-wallet
  .wallet-bottom
  .wallet-link:hover {
  background: #17382d !important;
  border-color: var(--lime) !important;
  color: var(--lime) !important;
}

/* 3. General Secondary Buttons (Form Panels & Dialogs) */
.btn.secondary:not(.lime) {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.btn.secondary:not(.lime):hover {
  border-color: var(--green) !important;
  color: var(--green) !important;
}
[data-theme="dark"] .btn.secondary:not(.lime):hover {
  border-color: var(--lime) !important;
  color: var(--lime) !important;
}

/* 4. Primary Solid Buttons */
.btn:not(.secondary):not(.lime) {
  background: var(--green) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.btn:not(.secondary):not(.lime):hover {
  filter: brightness(1.08);
}

/* 5. Amount Chips (Airtime, Electricity, etc.) */
.amount-chip {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.amount-chip:hover {
  border-color: var(--green) !important;
  color: var(--green) !important;
}
.amount-chip.active {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(9, 92, 77, 0.25) !important;
}
[data-theme="dark"] .amount-chip:hover {
  border-color: var(--lime) !important;
  color: var(--lime) !important;
}
[data-theme="dark"] .amount-chip.active {
  background: #18382d !important;
  border-color: var(--lime) !important;
  color: #ffffff !important;
}

/* 6. Network Chips (MTN, Airtel, Glo, 9mobile) */
.network-chip {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.network-chip:hover {
  border-color: var(--green) !important;
}
.network-chip.active {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(9, 92, 77, 0.2) !important;
}
[data-theme="dark"] .network-chip.active {
  background: #18382d !important;
  border-color: var(--lime) !important;
  color: #ffffff !important;
}

/* 7. Validity Filter Tabs (Data Bundles: Daily, Weekly, Monthly) */
.validity-tab {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.validity-tab:hover {
  border-color: var(--green) !important;
  color: var(--green) !important;
}
.validity-tab.active {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(9, 92, 77, 0.22) !important;
}
[data-theme="dark"] .validity-tab.active {
  background: #18382d !important;
  border-color: var(--lime) !important;
  color: #ffffff !important;
}

/* 8. Electricity Meter Switcher (Prepaid vs Postpaid) */
.meter-switcher {
  background: #e4ebe5 !important;
}
[data-theme="dark"] .meter-switcher {
  background: #152721 !important;
}
.meter-switcher-btn {
  color: var(--ink) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.meter-switcher-btn.active {
  background: var(--green) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}
[data-theme="dark"] .meter-switcher-btn.active {
  background: #18382d !important;
  border: 1px solid var(--lime) !important;
  color: var(--lime) !important;
}

/* 9. Electricity Disco Cards */
.disco-card {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.disco-card:hover {
  border-color: var(--green) !important;
}
.disco-card.active {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}
[data-theme="dark"] .disco-card.active {
  background: #18382d !important;
  border-color: var(--lime) !important;
  color: #ffffff !important;
}

/* 10. Data Plan Cards, TV Bouquets & Exam Cards */
.plan-card,
.tv-bouquet-card,
.exam-card {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  opacity: 1 !important;
}
.plan-card-val,
.tv-bouquet-name,
.exam-card-title {
  color: var(--ink) !important;
  font-weight: 800 !important;
}
.plan-card-price,
.tv-bouquet-price,
.exam-card-price {
  color: var(--green) !important;
  font-weight: 800 !important;
}
[data-theme="dark"] .plan-card-price,
[data-theme="dark"] .tv-bouquet-price,
[data-theme="dark"] .exam-card-price {
  color: var(--lime) !important;
}
:root:not([data-theme="dark"]) .plan-card.active,
:root:not([data-theme="dark"]) .tv-bouquet-card.active,
:root:not([data-theme="dark"]) .exam-card.active {
  background: #eaf4ed !important;
  border-color: var(--green) !important;
}
[data-theme="dark"] .plan-card.active,
[data-theme="dark"] .tv-bouquet-card.active,
[data-theme="dark"] .exam-card.active,
:root:not([data-theme="light"]) .plan-card.active,
:root:not([data-theme="light"]) .tv-bouquet-card.active,
:root:not([data-theme="light"]) .exam-card.active {
  background: #162e25 !important;
  border-color: var(--lime) !important;
}

/* 11. Quick Services & Hub Cards */
.quick-service,
.hub-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  opacity: 1 !important;
}
.quick-service strong,
.hub-text strong {
  color: var(--ink) !important;
  font-weight: 700 !important;
}
:root:not([data-theme="dark"]) .quick-service small,
:root:not([data-theme="dark"]) .hub-text small {
  color: #45574f !important;
  font-weight: 500 !important;
}

/* 12. Desktop & Mobile Navigation Links */
:root:not([data-theme="dark"]) .nav-item {
  color: #273832 !important;
  font-weight: 600 !important;
}
:root:not([data-theme="dark"]) .nav-item:hover {
  background: #eaf1eb !important;
  color: var(--green) !important;
}
:root:not([data-theme="dark"]) .nav-item.active {
  background: #e0ece3 !important;
  color: var(--green) !important;
  font-weight: 800 !important;
}
[data-theme="dark"] .nav-item,
:root:not([data-theme="light"]) .nav-item {
  color: #9cb1a8 !important;
}
[data-theme="dark"] .nav-item:hover,
:root:not([data-theme="light"]) .nav-item:hover {
  background: #172d26 !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .nav-item.active,
:root:not([data-theme="light"]) .nav-item.active {
  background: #18352b !important;
  color: var(--lime) !important;
  font-weight: 800 !important;
}

/* 13. Mobile Bottom Nav */
:root:not([data-theme="dark"]) .bottom-nav-item {
  color: #4b5f56 !important;
  font-weight: 600 !important;
}
:root:not([data-theme="dark"]) .bottom-nav-item.active {
  color: var(--green) !important;
  font-weight: 800 !important;
}
:root:not([data-theme="dark"]) .bottom-nav-item.active .bottom-nav-icon {
  background: #e0ece3 !important;
  color: var(--green) !important;
}
[data-theme="dark"] .bottom-nav-item,
:root:not([data-theme="light"]) .bottom-nav-item {
  color: #8da098 !important;
}
[data-theme="dark"] .bottom-nav-item.active,
:root:not([data-theme="light"]) .bottom-nav-item.active {
  color: var(--lime) !important;
  font-weight: 800 !important;
}
[data-theme="dark"] .bottom-nav-item.active .bottom-nav-icon,
:root:not([data-theme="light"]) .bottom-nav-item.active .bottom-nav-icon {
  background: #1a382e !important;
  color: var(--lime) !important;
}

/* 14. Text Buttons & Standalone Action Links */
.text-btn {
  color: var(--green) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
[data-theme="dark"] .text-btn {
  color: #4ade80 !important;
}
.deal-link {
  background: var(--green) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* 15. Header Icon Buttons (Theme Switcher, Bell, Avatar) */
:root:not([data-theme="dark"]) .header-icon-btn {
  background: #e8efe9 !important;
  color: #095c4d !important;
  border: 1px solid #d4dfd6 !important;
}
[data-theme="dark"] .header-icon-btn,
:root:not([data-theme="light"]) .header-icon-btn {
  background: #14241f !important;
  color: #ecf3ef !important;
  border: 1px solid #203830 !important;
}

/* 16. Avatar, Mobile Menu & Admin Navigation */
:root:not([data-theme="dark"]) .avatar {
  background: #e6ede5 !important;
  color: #095c4d !important;
  border: 2.5px solid #d4dfd6 !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}
[data-theme="dark"] .avatar,
:root:not([data-theme="light"]) .avatar {
  background: #172a24 !important;
  border-color: #243d34 !important;
  color: var(--lime) !important;
}

.mobile-menu {
  color: var(--ink) !important;
  font-size: 24px !important;
  opacity: 1 !important;
}

:root:not([data-theme="dark"]) .admin-link {
  color: #384d46 !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
:root:not([data-theme="dark"]) .admin-link:hover {
  color: var(--green) !important;
}
[data-theme="dark"] .admin-link,
:root:not([data-theme="light"]) .admin-link {
  color: #9cb1a8 !important;
}
[data-theme="dark"] .admin-link:hover,
:root:not([data-theme="light"]) .admin-link:hover {
  color: var(--lime) !important;
}

/* ==========================================================================
   Complete Dark Mode Deep Tone Guarantee & Elimination of White/Bright Boxes
   Ensures all card boxes, surfaces, spaces, chips, dialogs & containers
   use deep dark canvas tones (#0b1412, #12211d, #13241f, #18382d) while
   typography remains bright & crisp (#ecf3ef, #d8f991, #4ade80).
   ========================================================================== */

/* 1. Global Viewport & Base Canvas Surfaces */
html[data-theme="dark"],
body[data-theme="dark"],
:root:not([data-theme="light"]) {
  background-color: #0b1412 !important;
  color: #ecf3ef !important;
}
[data-theme="dark"] .app,
[data-theme="dark"] main,
[data-theme="dark"] header,
[data-theme="dark"] .sidebar,
[data-theme="dark"] footer,
:root:not([data-theme="light"]) .app,
:root:not([data-theme="light"]) main,
:root:not([data-theme="light"]) header,
:root:not([data-theme="light"]) .sidebar,
:root:not([data-theme="light"]) footer {
  background-color: var(--bg) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] header,
:root:not([data-theme="light"]) header {
  background-color: var(--header-bg) !important;
}
[data-theme="dark"] .sidebar,
:root:not([data-theme="light"]) .sidebar {
  background-color: var(--sidebar-bg) !important;
}

/* 2. Deep Dark Card & Container Surfaces */
[data-theme="dark"] .panel,
[data-theme="dark"]
  .form-panel:not(.payment-dialog .form-panel):not(
    .verify-accordion .form-panel
  ),
[data-theme="dark"] .receipt-panel,
[data-theme="dark"] .hub-card,
[data-theme="dark"] .quick-service,
[data-theme="dark"] .service,
[data-theme="dark"] .frequent-card,
[data-theme="dark"] .frequent-empty,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .tv-bouquet-card,
[data-theme="dark"] .exam-card,
[data-theme="dark"] .disco-card,
[data-theme="dark"] .notification-card,
[data-theme="dark"] .setup-banner,
[data-theme="dark"] .shop-card,
[data-theme="dark"] .intro-card,
[data-theme="dark"] .voucher,
[data-theme="dark"] .tip,
[data-theme="dark"] .notice,
[data-theme="dark"] .funding-step,
[data-theme="dark"] .verify-accordion,
[data-theme="dark"] .push-card,
[data-theme="dark"] .service-order-summary,
[data-theme="dark"] .plan-summary-card,
:root:not([data-theme="light"]) .panel,
:root:not([data-theme="light"])
  .form-panel:not(.payment-dialog .form-panel):not(
    .verify-accordion .form-panel
  ),
:root:not([data-theme="light"]) .receipt-panel,
:root:not([data-theme="light"]) .hub-card,
:root:not([data-theme="light"]) .quick-service,
:root:not([data-theme="light"]) .service,
:root:not([data-theme="light"]) .frequent-card,
:root:not([data-theme="light"]) .frequent-empty,
:root:not([data-theme="light"]) .plan-card,
:root:not([data-theme="light"]) .tv-bouquet-card,
:root:not([data-theme="light"]) .exam-card,
:root:not([data-theme="light"]) .disco-card,
:root:not([data-theme="light"]) .notification-card,
:root:not([data-theme="light"]) .setup-banner,
:root:not([data-theme="light"]) .shop-card,
:root:not([data-theme="light"]) .intro-card,
:root:not([data-theme="light"]) .voucher,
:root:not([data-theme="light"]) .tip,
:root:not([data-theme="light"]) .notice,
:root:not([data-theme="light"]) .funding-step,
:root:not([data-theme="light"]) .verify-accordion,
:root:not([data-theme="light"]) .push-card,
:root:not([data-theme="light"]) .service-order-summary,
:root:not([data-theme="light"]) .plan-summary-card {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

/* 3. Data Deals (No White Gradients in Dark Mode) */
[data-theme="dark"] .data-deal,
[data-theme="dark"] .data-deal:nth-child(n),
:root:not([data-theme="light"]) .data-deal,
:root:not([data-theme="light"]) .data-deal:nth-child(n) {
  background: #13241f !important;
  border-color: #203b30 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* 4. Dialogs, Modals & Clean Nested Forms */
[data-theme="dark"] dialog,
[data-theme="dark"] .payment-dialog,
:root:not([data-theme="light"]) dialog,
:root:not([data-theme="light"]) .payment-dialog {
  background-color: #12211d !important;
  border: 1px solid #1e332c !important;
  color: #ecf3ef !important;
}
.payment-dialog .form-panel,
.verify-accordion .form-panel,
[data-theme="dark"] .payment-dialog .form-panel,
[data-theme="dark"] .verify-accordion .form-panel,
:root:not([data-theme="light"]) .payment-dialog .form-panel,
:root:not([data-theme="light"]) .verify-accordion .form-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 5. Inputs, Selects, Options & Textareas */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
:root:not([data-theme="light"]) input,
:root:not([data-theme="light"]) select,
:root:not([data-theme="light"]) textarea {
  background-color: #0e1a17 !important;
  border: 1.5px solid #1e332c !important;
  color: #ecf3ef !important;
}
[data-theme="dark"] select option,
:root:not([data-theme="light"]) select option {
  background-color: #12211d !important;
  color: #ecf3ef !important;
}

/* 6. Form Autofill Glare Reset */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] textarea:-webkit-autofill:hover,
[data-theme="dark"] textarea:-webkit-autofill:focus,
[data-theme="dark"] select:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill:hover,
[data-theme="dark"] select:-webkit-autofill:focus,
:root:not([data-theme="light"]) input:-webkit-autofill,
:root:not([data-theme="light"]) input:-webkit-autofill:hover,
:root:not([data-theme="light"]) input:-webkit-autofill:focus,
:root:not([data-theme="light"]) textarea:-webkit-autofill,
:root:not([data-theme="light"]) textarea:-webkit-autofill:hover,
:root:not([data-theme="light"]) textarea:-webkit-autofill:focus,
:root:not([data-theme="light"]) select:-webkit-autofill,
:root:not([data-theme="light"]) select:-webkit-autofill:hover,
:root:not([data-theme="light"]) select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #0e1a17 inset !important;
  -webkit-text-fill-color: #ecf3ef !important;
  caret-color: #ecf3ef !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* 7. Code, Reference & Serial Badges */
[data-theme="dark"] code,
[data-theme="dark"] .token-val code,
[data-theme="dark"] .copyable-val code,
[data-theme="dark"] .receipt-line code,
:root:not([data-theme="light"]) code,
:root:not([data-theme="light"]) .token-val code,
:root:not([data-theme="light"]) .copyable-val code,
:root:not([data-theme="light"]) .receipt-line code {
  background: #0c1814 !important;
  border: 1px solid #234336 !important;
  color: var(--lime) !important;
}

/* 8. Bank Account Copy Button */
[data-theme="dark"] .bank-card-num-row .copy-pill-btn,
:root:not([data-theme="light"]) .bank-card-num-row .copy-pill-btn {
  background: rgba(14, 43, 35, 0.8) !important;
  border: 1px solid #285444 !important;
  color: #ecf3ef !important;
}
[data-theme="dark"] .bank-card-num-row .copy-pill-btn:hover,
:root:not([data-theme="light"]) .bank-card-num-row .copy-pill-btn:hover {
  background: var(--lime) !important;
  color: #0c2018 !important;
  border-color: var(--lime) !important;
}

/* 9. Category & Notification Icons */
[data-theme="dark"] .icon.mint,
[data-theme="dark"] .hub-icon.mint,
:root:not([data-theme="light"]) .icon.mint,
:root:not([data-theme="light"]) .hub-icon.mint {
  background: #132b20 !important;
  color: #4ade80 !important;
}
[data-theme="dark"] .icon.blue,
[data-theme="dark"] .hub-icon.blue,
:root:not([data-theme="light"]) .icon.blue,
:root:not([data-theme="light"]) .hub-icon.blue {
  background: #122438 !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .icon.purple,
[data-theme="dark"] .hub-icon.purple,
:root:not([data-theme="light"]) .icon.purple,
:root:not([data-theme="light"]) .hub-icon.purple {
  background: #231733 !important;
  color: #c084fc !important;
}
[data-theme="dark"] .icon.orange,
[data-theme="dark"] .hub-icon.orange,
:root:not([data-theme="light"]) .icon.orange,
:root:not([data-theme="light"]) .hub-icon.orange {
  background: #2f200c !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .icon.rose,
[data-theme="dark"] .hub-icon.rose,
:root:not([data-theme="light"]) .icon.rose,
:root:not([data-theme="light"]) .hub-icon.rose {
  background: #331515 !important;
  color: #f87171 !important;
}

[data-theme="dark"] .notif-icon-box.green,
:root:not([data-theme="light"]) .notif-icon-box.green {
  background: #132e22 !important;
  color: #4ade80 !important;
}
[data-theme="dark"] .notif-icon-box.blue,
:root:not([data-theme="light"]) .notif-icon-box.blue {
  background: #132438 !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .notif-icon-box.purple,
:root:not([data-theme="light"]) .notif-icon-box.purple {
  background: #241935 !important;
  color: #c084fc !important;
}
[data-theme="dark"] .notif-icon-box.orange,
:root:not([data-theme="light"]) .notif-icon-box.orange {
  background: #302010 !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .notif-icon-box.red,
:root:not([data-theme="light"]) .notif-icon-box.red {
  background: #351515 !important;
  color: #f87171 !important;
}
[data-theme="dark"] .notif-icon-box.gray,
:root:not([data-theme="light"]) .notif-icon-box.gray {
  background: #1a2924 !important;
  color: #9cb1a8 !important;
}

/* 10. Status, Indicators & High-Contrast Typography */
[data-theme="dark"] .status,
:root:not([data-theme="light"]) .status {
  background: #143024 !important;
  color: #4ade80 !important;
}
[data-theme="dark"] .status.pending,
:root:not([data-theme="light"]) .status.pending {
  background: #33230c !important;
  color: #fcd34d !important;
}
[data-theme="dark"] .status.failed,
:root:not([data-theme="light"]) .status.failed {
  background: #361515 !important;
  color: #fca5a5 !important;
}
[data-theme="dark"] .status.success,
:root:not([data-theme="light"]) .status.success {
  background: #143024 !important;
  color: #4ade80 !important;
}
[data-theme="dark"] .circle,
:root:not([data-theme="light"]) .circle {
  background: #162c23 !important;
  color: #4ade80 !important;
}
[data-theme="dark"] .form-error,
:root:not([data-theme="light"]) .form-error {
  color: #f87171 !important;
}

/* Crisp & Bright Typography on Deep Dark Surfaces */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] strong,
[data-theme="dark"] .amount,
[data-theme="dark"] .balance,
[data-theme="dark"] .row strong,
:root:not([data-theme="light"]) h1,
:root:not([data-theme="light"]) h2,
:root:not([data-theme="light"]) h3,
:root:not([data-theme="light"]) strong,
:root:not([data-theme="light"]) .amount,
:root:not([data-theme="light"]) .balance,
:root:not([data-theme="light"]) .row strong {
  color: var(--ink) !important;
}

.pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

/* ==========================================================================
   Saved Beneficiaries Hub (Native App Experience & Mobile Design)
   ========================================================================== */

.beneficiary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.beneficiary-header h1 {
  font-family: "Manrope", sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.6px;
  margin: 0 0 6px;
  color: var(--ink);
}
.beneficiary-header .subtitle {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.add-beneficiary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(216, 249, 145, 0.35);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  white-space: nowrap;
}
.add-beneficiary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(216, 249, 145, 0.45);
}
.add-beneficiary-btn .btn-icon {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

/* Toolbar & Filter Bar */
.beneficiary-toolbar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.beneficiary-search-wrap {
  position: relative;
  width: 100%;
}
.beneficiary-search-wrap .search-lens-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  opacity: 0.6;
  pointer-events: none;
}
#beneficiary-search-input {
  width: 100%;
  padding: 13px 44px 13px 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
#beneficiary-search-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(9, 92, 77, 0.12);
}
.clear-search-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--border);
  color: var(--ink);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  cursor: pointer;
  border: none;
  transition: background 0.12s ease;
}
.clear-search-btn:hover {
  background: #cbd5e1;
}

.beneficiary-filter-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.beneficiary-filter-chips::-webkit-scrollbar {
  display: none;
}
.beneficiary-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.beneficiary-chip:hover {
  border-color: #a4c4b2;
  background: var(--row-border);
}
.beneficiary-chip.active {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
  box-shadow: 0 4px 12px rgba(9, 92, 77, 0.22);
}
.beneficiary-chip .chip-icon {
  font-size: 14px;
}
.beneficiary-chip .chip-badge {
  font-size: 11px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 7px;
  border-radius: 10px;
  min-width: 19px;
  text-align: center;
}
.beneficiary-chip.active .chip-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Beneficiaries Grid & Modern Cards */
.beneficiary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}
@media (max-width: 650px) {
  .beneficiary-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.beneficiary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
.beneficiary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  border-color: #a0c4b1;
}

/* Card Top Bar */
.beneficiary-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.beneficiary-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.badge-mint {
  background: #eaf4e9;
  color: #1e643c;
}
.badge-blue {
  background: #eaf0ff;
  color: #1e40af;
}
.badge-orange {
  background: #fff3e0;
  color: #b45309;
}
.badge-purple {
  background: #f3e8ff;
  color: #7e22ce;
}
.badge-rose {
  background: #ffe4e6;
  color: #be123c;
}

.btn-delete-beneficiary {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: transparent;
  font-size: 14px;
  opacity: 0.6;
  border: none;
  cursor: pointer;
  transition:
    opacity 0.15s ease,
    background 0.15s ease,
    transform 0.12s ease;
}
.btn-delete-beneficiary:hover {
  opacity: 1;
  background: #fee2e2;
  transform: scale(1.05);
}

/* Card Body & Avatar */
.beneficiary-card-body {
  display: flex;
  align-items: center;
  gap: 13px;
}
.beneficiary-avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.avatar-mint {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #166534;
}
.avatar-blue {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1e40af;
}
.avatar-orange {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
}
.avatar-purple {
  background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
  color: #6b21a8;
}
.avatar-rose {
  background: linear-gradient(135deg, #ffe4e6, #fecdd3);
  color: #9f1239;
}

.beneficiary-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.beneficiary-name {
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.beneficiary-type-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  font-weight: 500;
}

/* Recipient Row */
.beneficiary-recipient-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.beneficiary-recipient-num {
  font-family: "DM Sans", monospace, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}
.beneficiary-recipient-row .copy-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  cursor: pointer;
  transition: all 0.12s ease;
  flex-shrink: 0;
}
.beneficiary-recipient-row .copy-pill-btn:hover {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
}

/* Card Bottom CTA */
.beneficiary-card-bottom {
  margin-top: 2px;
}
.btn-pay-beneficiary {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--green);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.12s ease,
    box-shadow 0.15s ease;
}
.btn-pay-beneficiary:hover {
  background: #0c7562;
  box-shadow: 0 4px 14px rgba(9, 92, 77, 0.28);
}
.btn-pay-beneficiary:active {
  transform: scale(0.98);
}
.btn-pay-beneficiary .pay-arrow {
  font-size: 16px;
  transition: transform 0.15s ease;
}
.btn-pay-beneficiary:hover .pay-arrow {
  transform: translate(2px, -2px);
}

/* Empty States */
.beneficiary-empty-state {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 20px;
  padding: 48px 24px;
  text-align: center;
  max-width: 500px;
  margin: 30px auto;
}
.beneficiary-empty-state .empty-icon-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #eaf4e9;
  color: var(--green);
  font-size: 30px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}
.beneficiary-empty-state h3 {
  font-family: "Manrope", sans-serif;
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--ink);
}
.beneficiary-empty-state p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 22px;
  line-height: 1.55;
}

/* Add Beneficiary Dialog */
.beneficiary-modal {
  width: 480px;
  max-width: calc(100% - 32px);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}
.beneficiary-modal::backdrop {
  background: rgba(16, 44, 40, 0.5);
  backdrop-filter: blur(4px);
}
.beneficiary-modal .modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.beneficiary-modal .modal-head h2 {
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}
.beneficiary-modal .close-modal-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.12s ease;
}
.beneficiary-modal .close-modal-btn:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}
.beneficiary-modal .modal-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 20px;
}
.beneficiary-form label {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin: 16px 0 8px;
  color: var(--ink);
}
.service-chip-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.service-pick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.12s ease;
}
.service-pick-chip:hover {
  border-color: #a4c4b2;
}
.service-pick-chip.active {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
  box-shadow: 0 3px 10px rgba(9, 92, 77, 0.25);
}
.beneficiary-modal input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--ink);
  font-size: 15px;
}
.beneficiary-modal input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(9, 92, 77, 0.12);
}
.beneficiary-modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* ==========================================================================
   Dark Mode Overrides for Beneficiaries Hub
   ========================================================================== */
[data-theme="dark"] .beneficiary-card,
:root:not([data-theme="light"]) .beneficiary-card {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .beneficiary-card:hover,
:root:not([data-theme="light"]) .beneficiary-card:hover {
  border-color: #2b5545 !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] .beneficiary-chip,
:root:not([data-theme="light"]) .beneficiary-chip {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .beneficiary-chip.active,
:root:not([data-theme="light"]) .beneficiary-chip.active {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #ffffff !important;
}
[data-theme="dark"] .beneficiary-recipient-row,
:root:not([data-theme="light"]) .beneficiary-recipient-row {
  background: #0e1a17 !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .beneficiary-recipient-row .copy-pill-btn,
:root:not([data-theme="light"]) .beneficiary-recipient-row .copy-pill-btn {
  background: #142822 !important;
  border-color: #1e382f !important;
  color: var(--lime) !important;
}
[data-theme="dark"] .beneficiary-recipient-row .copy-pill-btn:hover,
:root:not([data-theme="light"])
  .beneficiary-recipient-row
  .copy-pill-btn:hover {
  background: var(--lime) !important;
  color: #0c2018 !important;
}
[data-theme="dark"] .badge-mint,
:root:not([data-theme="light"]) .badge-mint {
  background: #132e22 !important;
  color: #4ade80 !important;
}
[data-theme="dark"] .badge-blue,
:root:not([data-theme="light"]) .badge-blue {
  background: #132438 !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .badge-orange,
:root:not([data-theme="light"]) .badge-orange {
  background: #302010 !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .badge-purple,
:root:not([data-theme="light"]) .badge-purple {
  background: #241935 !important;
  color: #c084fc !important;
}
[data-theme="dark"] .badge-rose,
:root:not([data-theme="light"]) .badge-rose {
  background: #351515 !important;
  color: #f87171 !important;
}

[data-theme="dark"] .avatar-mint,
:root:not([data-theme="light"]) .avatar-mint {
  background: linear-gradient(135deg, #132e22, #1b4533) !important;
  color: #4ade80 !important;
}
[data-theme="dark"] .avatar-blue,
:root:not([data-theme="light"]) .avatar-blue {
  background: linear-gradient(135deg, #132438, #1c3656) !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .avatar-orange,
:root:not([data-theme="light"]) .avatar-orange {
  background: linear-gradient(135deg, #302010, #4d3319) !important;
  color: #fbbf24 !important;
}
[data-theme="dark"] .avatar-purple,
:root:not([data-theme="light"]) .avatar-purple {
  background: linear-gradient(135deg, #241935, #3b2854) !important;
  color: #c084fc !important;
}
[data-theme="dark"] .avatar-rose,
:root:not([data-theme="light"]) .avatar-rose {
  background: linear-gradient(135deg, #351515, #542222) !important;
  color: #f87171 !important;
}

[data-theme="dark"] .btn-delete-beneficiary:hover,
:root:not([data-theme="light"]) .btn-delete-beneficiary:hover {
  background: #351515 !important;
  color: #f87171 !important;
}
[data-theme="dark"] .beneficiary-modal,
:root:not([data-theme="light"]) .beneficiary-modal {
  background: var(--panel-bg) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .service-pick-chip,
:root:not([data-theme="light"]) .service-pick-chip {
  background: #0e1a17 !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .service-pick-chip.active,
:root:not([data-theme="light"]) .service-pick-chip.active {
  background: var(--green) !important;
  color: #ffffff !important;
  border-color: var(--green) !important;
}
[data-theme="dark"] .beneficiary-empty-state,
:root:not([data-theme="light"]) .beneficiary-empty-state {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .beneficiary-empty-state .empty-icon-circle,
:root:not([data-theme="light"]) .beneficiary-empty-state .empty-icon-circle {
  background: #132e22 !important;
  color: #4ade80 !important;
}

/* ==========================================================================
   Collapsible Desktop Sidebar & Wide Table Workspace (Customer)
   ========================================================================== */

.sidebar {
  transition:
    width 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.22s ease,
    transform 0.2s ease !important;
}
.app {
  transition: margin-left 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hide scrollbar on sidebars while keeping smooth scroll */
.sidebar,
.sidebar nav {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.sidebar::-webkit-scrollbar,
.sidebar nav::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.sidebar-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  padding: 0;
}
.sidebar-toggle-btn:hover {
  background: #eaf3eb;
  border-color: var(--green);
  color: var(--green);
  transform: scale(1.05);
}
[data-theme="dark"] .sidebar-toggle-btn:hover,
:root:not([data-theme="light"]) .sidebar-toggle-btn:hover {
  background: #19312a;
  border-color: var(--green);
  color: var(--lime);
}
.sidebar-toggle-btn svg {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
body.sidebar-collapsed .sidebar-toggle-btn svg {
  transform: rotate(180deg);
}

@media (max-width: 850px) {
  .sidebar-toggle-btn {
    display: none !important;
  }
}

/* Collapsed Sidebar on Desktop Screens */
@media (min-width: 851px) {
  body.sidebar-collapsed .sidebar {
    width: 72px !important;
    padding: 24px 8px !important;
    align-items: center !important;
  }
  body.sidebar-collapsed .sidebar-top {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }
  body.sidebar-collapsed .sidebar-toggle-btn {
    width: 38px !important;
    height: 32px !important;
    position: relative !important;
    margin: 0 !important;
  }
  body.sidebar-collapsed .sidebar-toggle-btn:hover::after {
    content: "Expand sidebar";
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: #11201c;
    color: #ffffff;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 7px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  [data-theme="dark"] body.sidebar-collapsed .sidebar-toggle-btn:hover::after,
  :root:not([data-theme="light"])
    body.sidebar-collapsed
    .sidebar-toggle-btn:hover::after {
    background: #162c25;
    color: #ecf3ef;
  }
  body.sidebar-collapsed .app {
    margin-left: 72px !important;
  }
  body.sidebar-collapsed .brand {
    justify-content: center !important;
    width: 100% !important;
    gap: 0 !important;
    position: relative !important;
  }
  body.sidebar-collapsed .brand [data-brand],
  body.sidebar-collapsed .brand-text {
    display: none !important;
  }
  body.sidebar-collapsed .brand-icon {
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease !important;
  }
  body.sidebar-collapsed .brand:hover .brand-icon {
    transform: scale(1.08) !important;
    box-shadow: 0 4px 14px rgba(9, 92, 77, 0.4) !important;
  }
  /* Floating hover title tooltip on logo */
  body.sidebar-collapsed .brand:hover::after {
    content: "Amanasubs · Go to Overview";
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: #095c4d;
    color: #ffffff;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(9, 92, 77, 0.35);
    z-index: 1000;
    pointer-events: none;
  }
  [data-theme="dark"] body.sidebar-collapsed .brand:hover::after,
  :root:not([data-theme="light"]) body.sidebar-collapsed .brand:hover::after {
    background: #148b72;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  }
  body.sidebar-collapsed .workspace-label,
  body.sidebar-collapsed .shop-card,
  body.sidebar-collapsed .sidebar-foot {
    display: none !important;
  }
  body.sidebar-collapsed nav {
    width: 100% !important;
    justify-items: center !important;
  }
  body.sidebar-collapsed .nav-item {
    justify-content: center !important;
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    gap: 0 !important;
    position: relative !important;
  }
  body.sidebar-collapsed .nav-item .nav-label {
    display: none !important;
  }
  body.sidebar-collapsed .nav-item .nav-symbol {
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
  }
  /* Hover tooltip on collapsed nav items */
  body.sidebar-collapsed .nav-item:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #11201c;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  [data-theme="dark"] body.sidebar-collapsed .nav-item:hover::after,
  :root:not([data-theme="light"])
    body.sidebar-collapsed
    .nav-item:hover::after {
    background: #162c25;
    color: #ecf3ef;
  }
}

/* Final premium cascade: intentionally last so legacy layers cannot override it. */
:root {
  --premium-bg: #f4f6f2;
  --premium-surface: #fff;
  --premium-line: #dde4dd;
  --premium-ink: #10231d;
  --premium-muted: #68756f;
  --premium-green: #0b5d4f;
  --premium-shadow: 0 12px 36px rgba(24, 55, 46, 0.07);
  --premium-radius: 18px;
}
html,
body {
  background: var(--premium-bg);
  color: var(--premium-ink);
}
.sidebar {
  width: 256px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: var(--premium-line) !important;
  padding: 24px 18px !important;
}
.app {
  margin-left: 256px !important;
}
.brand {
  white-space: nowrap !important;
  overflow: visible !important;
  font-size: 21px !important;
}
.brand-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-item {
  min-height: 46px !important;
  padding: 11px 13px !important;
  border-radius: 12px !important;
}
.nav-item.active {
  background: #e8f0e9 !important;
  color: var(--premium-green) !important;
  box-shadow: inset 3px 0 var(--premium-green);
}
.nav-symbol {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 0 !important;
}
.nav-symbol svg {
  width: 20px !important;
  height: 20px !important;
}
header {
  height: 78px !important;
  padding: 0 36px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: var(--premium-line) !important;
  backdrop-filter: blur(18px);
  position: sticky !important;
  top: 0;
  z-index: 8;
}
.header-right {
  gap: 10px !important;
}
.header-icon-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  border: 1px solid var(--premium-line) !important;
  background: #fff !important;
}
.theme-icon svg,
.bell-icon svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
main {
  max-width: 1320px !important;
  padding: 38px 42px 56px !important;
}
.greeting h1 {
  font-size: clamp(28px, 3vw, 38px) !important;
  letter-spacing: -1.5px !important;
}
.wallet,
.overview-wallet .wallet {
  background: linear-gradient(145deg, #0a5b4d, #0a4b41 62%, #173e37) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 46px rgba(7, 68, 57, 0.2) !important;
}
.balance {
  font-size: 42px !important;
}
.panel,
.quick-service,
.hub-card,
.data-deal,
.frequent-card {
  background: var(--premium-surface) !important;
  border: 1px solid var(--premium-line) !important;
  border-radius: var(--premium-radius) !important;
}
.quick-service:hover,
.hub-card:hover,
.data-deal:hover,
.frequent-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--premium-shadow) !important;
}
.quick-service .icon svg {
  width: 22px;
  height: 22px;
}
.btn {
  min-height: 46px !important;
  border-radius: 12px !important;
}
.form-panel input,
.form-panel select,
.form-panel textarea {
  min-height: 52px;
  border-radius: 13px !important;
}
[data-theme="dark"] {
  --premium-bg: #09120f;
  --premium-surface: #111f1a;
  --premium-line: #23372f;
  --premium-ink: #edf4f0;
  --premium-muted: #94a49d;
}
[data-theme="dark"] .sidebar {
  background: rgba(13, 25, 21, 0.97) !important;
}
[data-theme="dark"] header {
  background: rgba(13, 25, 21, 0.9) !important;
}
[data-theme="dark"] .header-icon-btn {
  background: #13231d !important;
}
[data-theme="dark"] .nav-item.active {
  background: #193027 !important;
  color: #d8f985 !important;
  box-shadow: inset 3px 0 #d8f985;
}
@media (max-width: 850px) {
  body:not(.signed-out) {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
  .sidebar {
    display: none !important;
  }
  .app {
    margin-left: 0 !important;
  }
  header {
    height: calc(62px + env(safe-area-inset-top)) !important;
    padding: env(safe-area-inset-top) 16px 0 !important;
  }
  .mobile-menu,
  .demo-pill,
  #theme-toggle {
    display: none !important;
  }
  main {
    padding: 24px 16px 38px !important;
  }
  body:not(.signed-out) .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    inset: auto 0 0 !important;
    height: calc(68px + env(safe-area-inset-bottom)) !important;
    padding: 6px 8px env(safe-area-inset-bottom) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-top: 1px solid var(--premium-line) !important;
    box-shadow: 0 -10px 30px rgba(16, 45, 36, 0.07) !important;
    backdrop-filter: blur(20px);
    z-index: 40 !important;
  }
  .bottom-nav-item {
    min-height: 56px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    border-radius: 12px !important;
    color: #74817b !important;
  }
  .bottom-nav-item.active {
    background: #edf3ec !important;
    color: var(--premium-green) !important;
  }
  .bottom-nav-label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
  }
  .bottom-nav-icon svg {
    width: 21px !important;
    height: 21px !important;
  }
  .overview-top {
    grid-template-columns: 1fr !important;
  }
  .quick-services {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .wallet,
  .overview-wallet .wallet {
    min-height: 200px !important;
  }
  footer {
    display: none !important;
  }
  #toast {
    bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }
  [data-theme="dark"] .mobile-bottom-nav {
    background: rgba(12, 24, 20, 0.96) !important;
  }
  [data-theme="dark"] .bottom-nav-item.active {
    background: #193027 !important;
    color: #d8f985 !important;
  }
  body.signed-out .mobile-bottom-nav,
  body.signed-out header,
  body.signed-out footer,
  body.signed-out .sidebar {
    display: none !important;
  }
}
@media (max-width: 560px) {
  .greeting h1 {
    font-size: 27px !important;
  }
  .wallet,
  .overview-wallet .wallet {
    padding: 22px !important;
    border-radius: 20px !important;
  }
  .wallet-bottom {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .quick-services {
    gap: 10px !important;
  }
  .quick-service {
    min-height: 110px !important;
    padding: 14px 10px !important;
  }
  .quick-service small {
    display: none !important;
  }
  .quick-service .icon {
    width: 40px !important;
    height: 40px !important;
  }
  .panel,
  .form-panel {
    padding: 18px !important;
  }
  .hub-grid {
    grid-template-columns: 1fr !important;
  }
  dialog {
    width: calc(100% - 24px) !important;
    border-radius: 22px !important;
  }
}
@media (display-mode: standalone) {
  body {
    -webkit-user-select: none;
    user-select: none;
  }
  input,
  textarea {
    -webkit-user-select: text;
    user-select: text;
  }
  .bottom-nav-item,
  .btn,
  .quick-service,
  .hub-card {
    -webkit-touch-callout: none;
  }
}

/* Premium payment processing: rotational motion, no horizontal sweeping bar. */
.payment-processing {
  text-align: center;
  padding: 8px 2px 0;
}
.processing-visual {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 4px auto 22px;
  display: grid;
  place-items: center;
}
.processing-halo {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(9, 92, 77, 0.14),
    rgba(9, 92, 77, 0) 68%
  );
  animation: processing-breathe 2.2s ease-in-out infinite;
}
.processing-ring {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 3px solid rgba(9, 92, 77, 0.13);
  border-top-color: var(--green);
  border-right-color: var(--green);
  animation: processing-spin 1.25s cubic-bezier(0.55, 0.1, 0.45, 0.9) infinite;
}
.processing-ring::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  right: 5px;
  top: 4px;
  background: var(--lime);
  box-shadow:
    0 0 0 4px rgba(216, 249, 145, 0.17),
    0 0 18px rgba(216, 249, 145, 0.55);
}
.processing-core {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #0b6655, #08493f);
  color: #e7ffa9;
  box-shadow: 0 12px 28px rgba(9, 92, 77, 0.24);
}
.processing-core svg {
  width: 29px;
  height: 29px;
}
.processing-title {
  margin: 0;
  font:
    800 19px/1.35 Manrope,
    Arial,
    sans-serif;
  color: var(--ink);
  letter-spacing: -0.35px;
}
.processing-copy {
  max-width: 390px;
  margin: 9px auto 22px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.processing-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 360px;
  margin: 0 auto 24px;
  position: relative;
}
.processing-stages::before {
  content: "";
  position: absolute;
  left: 16.67%;
  right: 16.67%;
  top: 6px;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.processing-stages span {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.processing-stages i {
  display: block;
  width: 13px;
  height: 13px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: #ccd5d0;
  box-shadow: 0 0 0 1px var(--border);
}
.processing-stages span.active {
  color: var(--green);
}
.processing-stages span.active i {
  background: var(--lime);
  box-shadow:
    0 0 0 2px var(--green),
    0 0 0 6px rgba(9, 92, 77, 0.08);
}
.processing-stages span.complete i {
  background: var(--green);
  box-shadow: 0 0 0 1px var(--green);
}
.payment-dialog .processing-actions {
  display: grid !important;
  grid-template-columns: minmax(110px, 0.8fr) minmax(180px, 1.35fr);
  gap: 12px !important;
  margin-top: 0 !important;
}
.payment-dialog .processing-actions .btn {
  width: 100%;
  padding: 12px !important;
}
.payment-dialog .processing-actions .btn:not(.secondary) {
  background: var(--green) !important;
  color: #fff !important;
}
[data-theme="dark"] .processing-halo {
  background: radial-gradient(
    circle,
    rgba(216, 249, 145, 0.13),
    rgba(216, 249, 145, 0) 68%
  );
}
[data-theme="dark"] .processing-ring {
  border-color: rgba(216, 249, 145, 0.13);
  border-top-color: var(--lime);
  border-right-color: var(--lime);
}
[data-theme="dark"] .processing-core {
  background: linear-gradient(145deg, #1a715f, #0d463b);
  color: var(--lime);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(216, 249, 145, 0.13);
}
[data-theme="dark"] .processing-title {
  color: #f4f8f6 !important;
}
[data-theme="dark"] .processing-copy {
  color: #aab8b2 !important;
}
[data-theme="dark"] .processing-stages i {
  border-color: #12211d;
  background: #40564d;
  box-shadow: 0 0 0 1px #4c665b;
}
[data-theme="dark"] .processing-stages span.active {
  color: var(--lime);
}
[data-theme="dark"] .processing-stages span.active i {
  background: var(--lime);
  box-shadow:
    0 0 0 2px #8fbd4e,
    0 0 0 6px rgba(216, 249, 145, 0.1);
}
[data-theme="dark"] .processing-stages span.complete i {
  background: #35a284;
  box-shadow: 0 0 0 1px #35a284;
}
@keyframes processing-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes processing-breathe {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
.status.review {
  background: #fff4d8;
  color: #8b6500;
}
.status.reversed {
  background: #efe8ff;
  color: #6941a5;
}
.receipt-state {
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.55;
  background: var(--surface);
}
.receipt-state.pending,
.receipt-state.review {
  border-color: #e5c467;
  background: #fff9e8;
  color: #6e5200;
}
.receipt-state.failed {
  border-color: #e5aaa3;
  background: #fff2f0;
  color: #8f3027;
}
.receipt-state.reversed {
  border-color: #b9a0df;
  background: #f7f2ff;
  color: #59358f;
}
.receipt-state.success {
  border-color: #9bc9aa;
  background: #edf8f0;
  color: #25613a;
}
.receipt-state-detail {
  margin: 6px 0 0;
  font-weight: 400;
}
[data-theme="dark"] .status.review,
[data-theme="dark"] .receipt-state.review,
[data-theme="dark"] .receipt-state.pending {
  background: #302811;
  color: #f4d980;
  border-color: #625322;
}
[data-theme="dark"] .status.reversed,
[data-theme="dark"] .receipt-state.reversed {
  background: #261d39;
  color: #d7c1ff;
  border-color: #513b75;
}
[data-theme="dark"] .receipt-state.failed {
  background: #351d1c;
  color: #ffb8af;
  border-color: #69322e;
}
[data-theme="dark"] .receipt-state.success {
  background: #163125;
  color: #9de2b1;
  border-color: #2c6240;
}
@media (prefers-reduced-motion: reduce) {
  .processing-halo,
  .processing-ring {
    animation: none !important;
  }
  .processing-ring {
    border-color: var(--green) !important;
  }
  .processing-halo {
    opacity: 0.8 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Modern Responsive Transaction List & History Items
   ========================================================================== */
.tx-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.tx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 15px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5ebe7);
  border-radius: 14px;
  text-align: left;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
}

.tx-item:hover {
  background: var(--row-hover, #f5f8f5);
  border-color: #c5dbcc;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(9, 92, 77, 0.05);
}

.tx-item:active {
  transform: scale(0.995);
}

.tx-item:focus-visible {
  outline: 3px solid #9ec747;
  outline-offset: 2px;
}

.tx-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.tx-icon-circle {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.tx-item:hover .tx-icon-circle {
  transform: scale(1.05);
}

.tx-icon-circle.mint {
  background: #eaf4e9;
  color: #296839;
}
.tx-icon-circle.blue {
  background: #eaf0ff;
  color: #3b66c4;
}
.tx-icon-circle.orange {
  background: #fff2df;
  color: #b47822;
}
.tx-icon-circle.purple {
  background: #f1eafb;
  color: #7b4fb0;
}
.tx-icon-circle.rose {
  background: #fbeeea;
  color: #b5493b;
}

.tx-details {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tx-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tx-title {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #162f2a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.tx-subline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted, #76837f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tx-recipient {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.tx-dot {
  opacity: 0.5;
  flex-shrink: 0;
}

.tx-date {
  flex-shrink: 0;
  white-space: nowrap;
}

.tx-ref {
  font-size: 11px;
  color: var(--muted, #76837f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.tx-ref code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 4px;
  border-radius: 4px;
}

.tx-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  text-align: right;
  min-width: 80px;
}

.tx-amount {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tx-amount.incoming {
  color: var(--green, #095c4d);
}

.tx-amount.outgoing {
  color: var(--ink, #162f2a);
}

.tx-badge-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tx-receipt-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--green, #095c4d);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.tx-item:hover .tx-receipt-hint {
  opacity: 1;
  transform: translateX(0);
}

/* Transactions Filter Toolbar & Counter */
.tx-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tx-toolbar input[type="search"] {
  flex: 1;
  min-width: 180px;
  min-height: 46px;
}
.tx-toolbar select {
  width: auto;
  min-width: 150px;
  min-height: 46px;
}
.tx-count-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--muted, #76837f);
}
.tx-page-badge {
  font-weight: 700;
}

/* Support Tickets Modern Card Styling */
.support-ticket-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}
.support-ticket-card {
  padding: 16px 18px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5ebe7);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.support-ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.support-ticket-subject {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #162f2a);
}
.support-ticket-msg {
  font-size: 13px;
  color: #4b5854;
  line-height: 1.5;
  margin: 0 0 10px 0;
}
.support-ticket-reply {
  padding: 12px 14px;
  background: #f4faf6;
  border-left: 3px solid var(--green, #095c4d);
  border-radius: 0 10px 10px 0;
  margin-top: 8px;
}
.support-reply-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--green, #095c4d);
  display: block;
  margin-bottom: 4px;
}
.support-ticket-reply p {
  font-size: 13px;
  color: var(--ink, #162f2a);
  margin: 0;
  line-height: 1.5;
}
.support-ticket-waiting {
  font-size: 12px;
  color: var(--muted, #76837f);
  font-style: italic;
  margin: 0;
}

/* Empty State */
.empty-tx-state {
  text-align: center;
  padding: 36px 16px;
  color: var(--muted, #76837f);
}
.empty-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 8px;
}
.empty-title {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #162f2a);
  margin: 0 0 4px;
}
.empty-desc {
  font-size: 13px;
  margin: 0;
}

/* Mobile Responsiveness for Transactions */
@media (max-width: 600px) {
  .tx-item {
    padding: 11px 12px;
    gap: 10px;
    border-radius: 12px;
  }
  .tx-icon-circle {
    width: 38px;
    height: 38px;
    min-width: 38px;
    font-size: 18px;
    border-radius: 10px;
  }
  .tx-title {
    font-size: 13.5px;
  }
  .tx-subline {
    font-size: 11.5px;
  }
  .tx-recipient {
    max-width: 130px;
  }
  .tx-amount {
    font-size: 14px;
  }
  .tx-receipt-hint {
    display: none;
  }
  .tx-toolbar {
    flex-direction: column;
    gap: 8px;
  }
  .tx-toolbar input[type="search"],
  .tx-toolbar select {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 380px) {
  .tx-recipient {
    max-width: 90px;
  }
  .tx-ref {
    display: none;
  }
}

/* Dark Theme Overrides for Transactions & Tickets */
[data-theme="dark"] .tx-item {
  background: var(--premium-surface, #111f1a) !important;
  border-color: var(--premium-line, #23372f) !important;
}
[data-theme="dark"] .tx-item:hover {
  background: #152620 !important;
  border-color: #2e5c4a !important;
}
[data-theme="dark"] .tx-title {
  color: var(--premium-ink, #edf4f0) !important;
}
[data-theme="dark"] .tx-amount.incoming {
  color: #34d399 !important;
}
[data-theme="dark"] .tx-amount.outgoing {
  color: var(--premium-ink, #edf4f0) !important;
}
[data-theme="dark"] .tx-ref code {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #94a49d !important;
}
[data-theme="dark"] .tx-receipt-hint {
  color: #34d399 !important;
}
[data-theme="dark"] .empty-title {
  color: var(--premium-ink, #edf4f0) !important;
}
[data-theme="dark"] .support-ticket-card {
  background: var(--premium-surface, #111f1a) !important;
  border-color: var(--premium-line, #23372f) !important;
}
[data-theme="dark"] .support-ticket-subject {
  color: var(--premium-ink, #edf4f0) !important;
}
[data-theme="dark"] .support-ticket-msg {
  color: #94a49d !important;
}
[data-theme="dark"] .support-ticket-reply {
  background: #142820 !important;
  border-left-color: #34d399 !important;
}
[data-theme="dark"] .support-reply-tag {
  color: #34d399 !important;
}
[data-theme="dark"] .support-ticket-reply p {
  color: var(--premium-ink, #edf4f0) !important;
}

/* CSP-Compliant Utilities & Components (Zero inline style dependencies) */
.dva-simulated-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 14px;
}
.sandbox-sim-box {
  margin-top: 18px;
  padding: 16px;
  background: var(--card-bg, #f4f7f6);
  border: 1px dashed var(--border, #cbd5e1);
  border-radius: 12px;
}
.sandbox-sim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.sandbox-sim-title {
  font-size: 14px;
  font-weight: 700;
}
.sandbox-sim-badge {
  font-size: 11px;
}
.sandbox-sim-help {
  margin: 0 0 12px 0;
}
.sandbox-sim-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.verify-transfer-form {
  max-width: 480px;
  margin-top: 10px;
}
.btn-top-spacing {
  margin-top: 10px;
}
.dva-status-card {
  padding: 20px;
  border-radius: 14px;
  background: var(--card-bg, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  margin-top: 14px;
}
.dva-status-card.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.dva-status-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.dva-status-icon {
  font-size: 26px;
  line-height: 1;
}
.dva-status-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
}
.dva-status-card.error .dva-status-title {
  color: #991b1b;
}
.dva-status-sub {
  font-size: 13px;
  color: var(--muted, #64748b);
  display: block;
  margin-top: 4px;
  line-height: 1.4;
}
.dva-status-card.error .dva-status-sub {
  color: #7f1d1d;
}
.dva-status-meta {
  background: var(--bg, #fff);
  border-radius: 10px;
  padding: 14px;
  font-size: 13px;
  display: grid;
  gap: 8px;
  border: 1px solid var(--border, #e2e8f0);
}
.dva-meta-label {
  color: var(--muted, #64748b);
}
.dva-status-footer {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.dva-state-flow {
  font-size: 12px;
  color: var(--muted, #64748b);
}
.dva-error-desc {
  font-size: 13px;
  margin: 10px 0 16px 0;
  color: #7f1d1d;
  line-height: 1.5;
}
.dva-test-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  background: #f0fdf4;
  border: 1px dashed #86efac;
  border-radius: 10px;
  margin-bottom: 16px;
}
.dva-test-title {
  font-size: 13px;
  color: #166534;
  display: block;
  font-weight: 700;
}
.dva-test-sub {
  font-size: 12px;
  color: #15803d;
}
.dva-test-btn {
  font-size: 12px;
  padding: 6px 14px;
  white-space: nowrap;
}
.dva-compliance-notice {
  padding: 14px;
  background: var(--bg, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.5;
}
.dva-compliance-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--ink, #162f2a);
}
.dva-name-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .dva-name-grid {
    grid-template-columns: 1fr;
  }
}
.dva-bvn-hint {
  margin-top: -4px;
  margin-bottom: 16px;
}
.dva-consent-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface, #ffffff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 14px;
  margin: 14px 0 20px;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.dva-consent-card:hover {
  border-color: #99baaa;
  box-shadow: 0 4px 16px rgba(9, 92, 77, 0.06);
}
.dva-consent-card:has(.dva-consent-checkbox:checked) {
  border-color: var(--green, #095c4d);
  background: rgba(9, 92, 77, 0.035);
  box-shadow: 0 4px 18px rgba(9, 92, 77, 0.08);
}
[data-theme="dark"] .dva-consent-card:has(.dva-consent-checkbox:checked) {
  background: rgba(20, 139, 114, 0.08);
  border-color: var(--green, #148b72);
}
.dva-consent-check-wrap {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex-shrink: 0;
}
.dva-consent-checkbox {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  margin: 0;
}
.dva-consent-custom-box {
  position: absolute;
  inset: 0;
  width: 22px;
  height: 22px;
  border: 2px solid #94a3b8;
  border-radius: 7px;
  background: var(--surface, #ffffff);
  display: grid;
  place-items: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}
.dva-consent-card:hover .dva-consent-custom-box {
  border-color: var(--green, #095c4d);
}
.dva-consent-checkbox:checked + .dva-consent-custom-box {
  background: var(--green, #095c4d);
  border-color: var(--green, #095c4d);
  box-shadow: 0 0 0 3px rgba(9, 92, 77, 0.18);
}
.dva-consent-checkbox:focus-visible + .dva-consent-custom-box {
  outline: 2px solid var(--lime, #d8f991);
  outline-offset: 2px;
}
.dva-consent-svg {
  width: 14px;
  height: 14px;
  color: #ffffff;
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  transition: stroke-dashoffset 0.22s ease-in-out;
}
.dva-consent-checkbox:checked + .dva-consent-custom-box .dva-consent-svg {
  stroke-dashoffset: 0;
}
.dva-consent-content {
  flex: 1;
  min-width: 0;
}
.dva-consent-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.dva-consent-shield {
  font-size: 15px;
  line-height: 1;
}
.dva-consent-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, #162f2a);
  letter-spacing: -0.01em;
}
.dva-consent-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted, #76837f);
  margin: 0 0 10px 0;
  font-weight: 450;
}
.dva-consent-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dva-consent-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(9, 92, 77, 0.08);
  color: var(--green, #095c4d);
  border: 1px solid rgba(9, 92, 77, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
[data-theme="dark"] .dva-consent-badge {
  background: rgba(20, 139, 114, 0.15);
  color: #8ee2cf;
  border-color: rgba(20, 139, 114, 0.3);
}
.pin-recover-form {
  margin-top: 10px;
}
.pin-recover-btn {
  margin-top: 12px;
}
.security-pw-link-wrap {
  margin-bottom: 14px;
}
.session-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.session-item-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--card-bg, #f4f7f6);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
}
.session-device-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.session-device-label {
  font-weight: 600;
  font-size: 14px;
}
.session-current-badge {
  font-size: 10px;
  padding: 2px 6px;
}
.session-created-at {
  margin: 2px 0 0 0;
  font-size: 12px;
}
.session-live-status {
  font-size: 11px;
  color: var(--muted, #64748b);
}
.btn-revoke-others-action {
  margin-top: 14px;
}
.account-copy-btn {
  margin-left: 8px;
}
.account-help-note {
  margin-top: 8px;
}
.account-hub-grid {
  margin-top: 14px;
}
.account-signout-btn {
  margin-top: 8px;
}
.tx-export-btn {
  min-height: 46px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tx-pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 10px;
}
.tx-pagination-btns {
  display: flex;
  gap: 6px;
}
.tx-pagination-info {
  font-size: 12px;
  color: var(--ink-muted);
}
.beneficiary-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  margin: 10px 0 16px;
  background: var(--surface, #ffffff);
  border: 1.5px solid var(--border, #e5ebe7);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.beneficiary-toggle-card:hover {
  border-color: #99baaa;
  box-shadow: 0 3px 12px rgba(9, 92, 77, 0.05);
}
.beneficiary-toggle-card:has(.beneficiary-switch-input:checked) {
  border-color: rgba(9, 92, 77, 0.35);
  background: rgba(9, 92, 77, 0.03);
}
[data-theme="dark"]
  .beneficiary-toggle-card:has(.beneficiary-switch-input:checked) {
  border-color: rgba(20, 139, 114, 0.5);
  background: rgba(20, 139, 114, 0.08);
}
.beneficiary-toggle-body {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.beneficiary-toggle-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(216, 249, 145, 0.28);
  color: #244b2d;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
[data-theme="dark"] .beneficiary-toggle-icon {
  background: rgba(216, 249, 145, 0.12);
  color: #d8f991;
}
.beneficiary-toggle-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.beneficiary-toggle-title {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink, #162f2a);
}
.beneficiary-toggle-hint {
  font-size: 11.5px;
  color: var(--muted, #76837f);
}
.beneficiary-switch {
  position: relative;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}
.beneficiary-switch-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  margin: 0;
}
.beneficiary-switch-track {
  display: block;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  transition: background 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}
[data-theme="dark"] .beneficiary-switch-track {
  background: #334155;
}
.beneficiary-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.beneficiary-switch-input:checked + .beneficiary-switch-track {
  background: var(--green, #095c4d);
}
.beneficiary-switch-input:checked
  + .beneficiary-switch-track
  .beneficiary-switch-thumb {
  transform: translateX(18px);
}
.beneficiary-switch-input:focus-visible + .beneficiary-switch-track {
  outline: 2px solid var(--lime, #d8f991);
  outline-offset: 2px;
}
.beneficiary-toggle-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin: 6px 0 12px;
  cursor: pointer;
}
.payment-security-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.payment-dialog-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.payment-dialog-submit {
  flex: 1;
}
.payment-processing-title {
  margin: 0;
  font-size: 18px;
}
.payment-close-btn {
  padding: 6px 14px;
  font-size: 13px;
  min-height: 34px;
  border-radius: 8px;
}
.maintenance-active-banner {
  background: #dc2626;
  color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
}
.maintenance-banner-icon {
  font-size: 22px;
}
.maintenance-banner-title {
  display: block;
  font-size: 14px;
}
.maintenance-banner-msg {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.95;
}
.receipt-email-notice {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   Customer Portal: Beneficiaries & Directory (Spacious Layout & Filters)
   ========================================================================== */
.beneficiary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.beneficiary-header h1 {
  margin: 0 0 6px 0;
  font-size: 28px;
}
.beneficiary-header .subtitle {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}
.add-beneficiary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-weight: 700;
  border-radius: 10px;
}
.add-beneficiary-btn .btn-icon {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.beneficiary-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.beneficiary-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 280px;
  min-width: 240px;
}
.beneficiary-toolbar .filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.beneficiary-toolbar .filter-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.beneficiary-toolbar .filter-select {
  height: 48px;
  min-width: 180px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.beneficiary-toolbar .filter-select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(9, 92, 77, 0.1);
  outline: none;
}
.beneficiary-search-wrap .search-lens-icon {
  position: absolute;
  left: 16px;
  pointer-events: none;
  font-size: 15px;
  opacity: 0.6;
}
.beneficiary-search-wrap input[type="search"] {
  width: 100%;
  height: 48px;
  padding: 12px 42px 12px 46px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.beneficiary-search-wrap input[type="search"]:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(9, 92, 77, 0.1);
  outline: none;
}
.beneficiary-search-wrap .clear-search-btn {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.beneficiary-search-wrap .clear-search-btn:hover {
  color: var(--ink);
}

.beneficiary-filter-chips {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.beneficiary-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.beneficiary-chip:hover {
  border-color: #99baaa;
  color: var(--ink);
}
.beneficiary-chip.active {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
}
.beneficiary-chip .chip-icon {
  font-size: 14px;
}
.beneficiary-chip .chip-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--border);
  color: var(--muted);
  font-weight: 700;
}
.beneficiary-chip.active .chip-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.beneficiary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.beneficiary-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 20px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.beneficiary-card:hover {
  transform: translateY(-2px);
  border-color: #99baaa;
  box-shadow: 0 6px 20px rgba(9, 92, 77, 0.06);
}
.beneficiary-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.beneficiary-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 9px;
  border-radius: 6px;
}
.beneficiary-badge.badge-mint {
  background: #eaf4e9;
  color: #2d6b38;
}
.beneficiary-badge.badge-blue {
  background: #eaf0ff;
  color: #2b54a8;
}
.beneficiary-badge.badge-orange {
  background: #fff2df;
  color: #8e5c14;
}
.beneficiary-badge.badge-purple {
  background: #f1eafb;
  color: #643194;
}
.beneficiary-badge.badge-rose {
  background: #fbeeea;
  color: #9c3327;
}

.btn-delete-beneficiary {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  opacity: 0.5;
  font-size: 14px;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.btn-delete-beneficiary:hover {
  opacity: 1;
  transform: scale(1.1);
}

.beneficiary-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.beneficiary-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
}
.beneficiary-avatar.avatar-mint {
  background: #d8f991;
  color: #164024;
}
.beneficiary-avatar.avatar-blue {
  background: #d5e4ff;
  color: #163674;
}
.beneficiary-avatar.avatar-orange {
  background: #fedcb2;
  color: #693e06;
}
.beneficiary-avatar.avatar-purple {
  background: #e7d3fb;
  color: #4e1980;
}
.beneficiary-avatar.avatar-rose {
  background: #fcd5cf;
  color: #7a1f14;
}

.beneficiary-info {
  min-width: 0;
}
.beneficiary-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.beneficiary-type-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.beneficiary-recipient-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.beneficiary-recipient-num {
  font-family: monospace;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.copy-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
}
.copy-pill-btn:hover {
  color: var(--ink);
  border-color: var(--green);
}

.beneficiary-card-bottom .btn-pay-beneficiary {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--green);
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.beneficiary-card-bottom .btn-pay-beneficiary:hover {
  opacity: 0.92;
}

.beneficiary-empty-state {
  text-align: center;
  padding: 56px 24px;
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: 16px;
  margin: 16px 0;
}
.beneficiary-empty-state .empty-icon-circle {
  font-size: 36px;
  margin-bottom: 14px;
}
.beneficiary-empty-state h3 {
  font-size: 18px;
  margin: 0 0 8px 0;
}
.beneficiary-empty-state p {
  color: var(--muted);
  max-width: 440px;
  margin: 0 auto 20px;
  font-size: 13.5px;
  line-height: 1.55;
}

/* ==========================================================================
   Customer Portal: Transactions View & Toolbar Spacing
   ========================================================================== */
.tx-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.tx-toolbar input[type="search"] {
  flex: 1 1 240px;
  min-width: 200px;
  height: 46px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
}
.tx-toolbar select {
  flex: 0 1 200px;
  min-width: 170px;
  height: 46px;
}
.tx-export-btn {
  flex-shrink: 0;
  height: 46px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.tx-count-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 22px;
  font-size: 13px;
  color: var(--muted);
}
.tx-count-bar strong {
  color: var(--ink);
}
.tx-page-badge {
  font-size: 11.5px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--ink);
}

/* ==========================================================================
   Auth Flow Improvements: Check-Email, Intentional Verification, Celebration & Account Switcher
   ========================================================================== */
.auth-status-panel {
  text-align: center;
  padding: 36px 28px;
}
.auth-status-icon-wrap {
  margin-bottom: 20px;
}
.auth-status-bubble {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #e8f4ec;
  border: 1px solid #c8e6d2;
  font-size: 32px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  box-shadow: 0 4px 16px rgba(9, 92, 77, 0.08);
}
.auth-status-bubble.success {
  background: #eaf8ee;
  border-color: #a3e3b5;
  color: var(--green);
}
.auth-status-bubble.alert {
  background: #fef7ee;
  border-color: #fcd9a5;
  color: #c07a16;
}
.auth-status-lead {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 10px;
  font-weight: 500;
}
.auth-email-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  padding: 10px 18px;
  border-radius: 12px;
  margin: 0 0 18px;
  max-width: 100%;
}
.auth-email-badge-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
  color: var(--lime);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.auth-email-badge-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.auth-guidance-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto 16px;
}
.auth-hint-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  text-align: left;
  margin: 16px auto 22px;
  max-width: 480px;
}
.auth-hint-icon {
  font-size: 17px;
  flex-shrink: 0;
  line-height: 1.2;
}
.auth-webmail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 12px;
  text-decoration: none;
  font-weight: 700;
}
.auth-actions-stacked {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  margin: 8px auto 0;
}
.auth-actions-stacked .btn {
  width: 100%;
}
.auth-switch-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 8px;
}
.auth-current-user-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 12px auto 18px;
  max-width: 420px;
  text-align: left;
}
.auth-current-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green);
  color: var(--lime);
  font-weight: 800;
  font-size: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.auth-current-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.auth-current-details strong {
  font-size: 15px;
  color: var(--ink);
}
.auth-current-details span {
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.banner-celebration {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, #ecfaef 0%, #f4fbf6 100%);
  border: 1.5px solid #a4e4b6;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 22px;
  box-shadow: 0 4px 14px rgba(18, 92, 77, 0.06);
}
.celebration-icon {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1;
}
.celebration-body {
  flex: 1;
  text-align: left;
}
.celebration-title {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #125732;
  margin-bottom: 4px;
}
.celebration-msg {
  font-size: 13.5px;
  color: #275239;
  margin: 0;
  line-height: 1.5;
}

[data-theme="dark"] .auth-status-bubble {
  background: #152922;
  border-color: #244438;
}
[data-theme="dark"] .auth-status-bubble.success {
  background: #143527;
  border-color: #225a40;
  color: #7ef5b2;
}
[data-theme="dark"] .auth-status-bubble.alert {
  background: #2b2214;
  border-color: #4a361c;
  color: #fab95f;
}
[data-theme="dark"] .banner-celebration {
  background: linear-gradient(135deg, #11281e 0%, #153226 100%);
  border-color: #286047;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .celebration-title {
  color: #9cf5bd;
}
[data-theme="dark"] .celebration-msg {
  color: #b3dfcb;
}
[data-theme="dark"] .auth-hint-box {
  background: rgba(255, 255, 255, 0.03);
}

/* ==========================================================================
   Biometric Authentication Styles (Mobile & Capacitor)
   ========================================================================== */
.biometric-security-card {
  margin-top: 22px;
}
.biometric-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
}
.biometric-badge.active {
  background: #e9f5ed;
  border-color: #bfe5cd;
  color: var(--green);
}
.biometric-toggles-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}
.biometric-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.biometric-toggle-card:hover {
  border-color: #9ec747;
}
.biometric-toggle-card.is-disabled {
  opacity: 0.65;
  background: var(--bg);
}
.biometric-toggle-info {
  flex: 1;
  min-width: 0;
}
.biometric-toggle-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.biometric-toggle-title-row strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.biometric-toggle-desc {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* Status Pill (ON / OFF Indicator) */
.switch-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}
.switch-status-pill .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.switch-status-pill.is-on {
  background: #e9f7ee;
  color: #126e4e;
  border: 1px solid #b7e8c9;
}
.switch-status-pill.is-on .status-dot {
  background: #17a36a;
  box-shadow: 0 0 6px #17a36a;
}
.switch-status-pill.is-off {
  background: #f1f5f3;
  color: #6a7c74;
  border: 1px solid #d8e2dc;
}
.switch-status-pill.is-off .status-dot {
  background: #94a39d;
}
.switch-status-pill.is-warn {
  background: #fff8eb;
  color: #b45309;
  border: 1px solid #fde68a;
}
.switch-status-pill.is-warn .status-dot {
  background: #f59e0b;
}

/* Modern Accessible Toggle Switch */
.switch-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.switch-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.switch-track {
  position: relative;
  display: block;
  width: 52px;
  height: 30px;
  background-color: #cbd5e1;
  border-radius: 30px;
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}
.switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.switch-checkbox:checked + .switch-track {
  background-color: var(--green);
}
.switch-checkbox:checked + .switch-track .switch-thumb {
  transform: translateX(22px);
}
.switch-checkbox:focus-visible + .switch-track {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}
.switch-checkbox:disabled + .switch-track {
  opacity: 0.45;
  cursor: not-allowed;
  background-color: #e2e8f0;
}
.switch-toggle input:disabled {
  cursor: not-allowed;
}

.biometric-login-box {
  margin-bottom: 20px;
}
.biometric-login-btn,
.biometric-pay-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 700;
  padding: 13px 20px;
  border-radius: 10px;
}
.biometric-icon {
  font-size: 18px;
}
.biometric-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 18px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.biometric-divider::before,
.biometric-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border);
}
.biometric-divider span {
  padding: 0 12px;
}
[data-theme="dark"] .biometric-badge.active {
  background: #143527;
  border-color: #225a40;
  color: #7ef5b2;
}
[data-theme="dark"] .biometric-toggle-card {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .switch-status-pill.is-on {
  background: #123326;
  color: #7ef5b2;
  border-color: #1e5941;
}
[data-theme="dark"] .switch-status-pill.is-on .status-dot {
  background: #34d399;
  box-shadow: 0 0 6px #34d399;
}
[data-theme="dark"] .switch-status-pill.is-off {
  background: #182621;
  color: #8da499;
  border-color: #263c33;
}
[data-theme="dark"] .switch-status-pill.is-off .status-dot {
  background: #647b71;
}
[data-theme="dark"] .switch-track {
  background-color: #33443d;
}
[data-theme="dark"] .switch-checkbox:checked + .switch-track {
  background-color: var(--green);
}
[data-theme="dark"] .switch-thumb {
  background-color: #e8f3ee;
}

/* ==========================================================================
   Saved Beneficiary Action Button & Modal Picker
   ========================================================================== */
.choose-beneficiary-wrap {
  margin: -10px 0 16px 0;
  display: flex;
  justify-content: flex-start;
}

.choose-saved-number-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 2px;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
  user-select: none;
}

.choose-saved-number-btn:hover {
  text-decoration: underline;
  opacity: 0.85;
}

.choose-saved-number-btn:active {
  transform: scale(0.98);
}

[data-theme="dark"] .choose-saved-number-btn {
  color: #7ef5b2;
}

.pick-beneficiary-dialog {
  width: 440px;
  max-width: calc(100% - 24px);
  border-radius: 18px;
  padding: 24px;
}

.pick-beneficiary-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  margin-top: 14px;
  padding-right: 4px;
}

.pick-beneficiary-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-subtle, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
  color: inherit;
  box-sizing: border-box;
}

.pick-beneficiary-item:hover {
  background: var(--surface);
  border-color: var(--green);
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(9, 92, 77, 0.08);
}

.pick-beneficiary-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eaf4e9;
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

[data-theme="dark"] .pick-beneficiary-avatar {
  background: #153228;
  color: #7ef5b2;
}

.pick-beneficiary-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pick-beneficiary-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.3px;
}

.pick-beneficiary-name {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pick-beneficiary-arrow {
  color: var(--muted);
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.pick-beneficiary-item:hover .pick-beneficiary-arrow {
  color: var(--green);
  transform: translate(2px, -2px);
}

/* ATM Card Header - Clean Bank Name Only */
.atm-engine-badge {
  display: none !important;
}

/* Dedicated Telecom USSD Shortcodes & Support Grid */
.support-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 920px) {
  .support-grid {
    grid-template-columns: 1fr;
  }
}
.telecom-shortcodes-panel {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 18px);
  padding: 24px;
}
.telecom-shortcodes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.telecom-network-card {
  padding: 14px 16px;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
}
[data-theme="dark"] .telecom-network-card {
  background: #15251f;
  border-color: #243c32;
}
.telecom-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.telecom-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--border, #e2e8f0);
}
.telecom-code-row:last-child {
  border-bottom: none;
}
.telecom-code-row code {
  font-family: monospace;
  font-weight: 700;
  color: var(--green, #087f5b);
}
[data-theme="dark"] .telecom-code-row code {
  color: #34d399;
}
.telecom-code-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   Official Service Brand Logos & Badges
   ========================================================================== */
.tx-brand-circle {
  background: transparent !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tx-brand-circle svg,
.tx-brand-circle img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border-radius: 12px;
}
.chip-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.chip-brand-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.network-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.disco-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 10px;
  min-height: 86px;
}
.disco-card-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.disco-card-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.disco-card-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.exam-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.exam-card-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.exam-card-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hub-brand-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.hub-brand-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hub-mini-logos {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.mini-brand-dot {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}
.mini-brand-dot svg {
  width: 100%;
  height: 100%;
  display: block;
}
.receipt-service-val {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}
.receipt-brand-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.receipt-brand-logo-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}
.frequent-brand-circle {
  overflow: hidden;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}
.frequent-brand-circle svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
}
.deal-brand-logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.deal-brand-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.brand-logo-icon {
  background: transparent !important;
  overflow: hidden;
}
.brand-logo-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 10px;
}
.telecom-card-logo {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-right: 8px;
  flex-shrink: 0;
}
.telecom-card-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.plan-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.plan-brand-logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.plan-brand-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tv-bouquet-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tv-brand-logo {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.tv-brand-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.badge-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 4px;
  flex-shrink: 0;
}
.badge-brand-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.service-chip-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  overflow: hidden;
  margin-right: 6px;
  flex-shrink: 0;
}
.service-chip-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.beneficiary-chips-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.beneficiary-chips-row::-webkit-scrollbar {
  display: none;
}
.beneficiary-chips-row .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--border, #e2eae5);
  background: var(--surface, #ffffff);
  color: var(--ink, #1e293b);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.beneficiary-chips-row .filter-chip:hover {
  border-color: var(--emerald, #059669);
}
.beneficiary-chips-row .filter-chip.active {
  background: var(--emerald, #059669);
  color: #ffffff;
  border-color: var(--emerald, #059669);
}
.beneficiary-chips-row .filter-chip.active .chip-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
.beneficiary-chips-row .chip-count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bg-subtle, #f1f5f3);
  color: var(--ink-muted, #64748b);
  font-weight: 700;
}
.beneficiary-chips-row .chip-brand-logo {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.beneficiary-chips-row .chip-brand-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}