/* Copy Animation */

.copyInput {
	display: inline-block;
	line-height: 50px;
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	text-align: center;
	font-size: 14px;
	cursor: pointer;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
  }
  
  .copied::after {
	position: absolute;
	top: 8px;
	right: 12%;
	width: 100px;
	display: block;
	content: "COPIED";
	font-size: 1em;
	padding: 5px 5px;
	color: #fff;
	background-color: hsl(var(--base));
	border-radius: 3px;
	opacity: 0;
	will-change: opacity, transform;
	animation: showcopied 1.5s ease;
  }
  
  @keyframes showcopied {
	0% {
		opacity: 0;
		transform: translateX(100%);
	}
	50% {
		opacity: 0.7;
		transform: translateX(40%);
	}
	70% {
		opacity: 1;
		transform: translateX(0);
	}
	100% {
		opacity: 0;
	}
  }

.input-group-text.copytext.copyBoard {
    cursor: pointer;
}




.cookies-card {
  width: 520px;
  padding: 30px;
  color: #dddddd;
  position: fixed;
  bottom: 15px;
  left: 15px;
  z-index: 999999;
  transition: all .5s;
  background: #222222;
  border-radius: 5px;
  border: 2px solid hsl(var(--base)/ 0.5);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  background-color: var(--second_color);
  box-shadow: 0 0 15px hsl(var(--base)/ 0.5);
}
  
  .cookies-card.hide{
	bottom: -500px !important;
  }
  .radius--10px {
	border-radius: 10px;
  }
  
  .cookies-card__icon {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background-color: #6e6f70;
    color: #fff;
	font-size: 32px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
  }
  
  .cookies-card__content {
	margin-bottom: 0;
  }
  
  .cookies-btn {
	color: #363636;
	text-decoration: none;
	padding: 10px 35px;
	margin: 3px 5px;
	display: inline-block;
	border-radius:  999px;
  }
  
  .cookies-btn:hover {
	color: #363636;
  }

  
  @media (max-width: 767px) {
	  .cookies-card {
		  width:  100%;
		  left: 0;
		  bottom:  0;
		  font-size:  14px;
		  padding:  15px;
	  }
  }




.hover-input-popup {
        position: relative;
    }
    .input-popup {
        display: none;
    }
    .hover-input-popup .input-popup {
        display: block;
        position: absolute;
        bottom: 70%;
        left: 50%;
        width: 280px;
        background-color: #1a1a1a;
        color: #fff;
        padding: 20px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }
    .input-popup::after {
        position: absolute;
        content: '';
        bottom: -19px;
        left: 50%;
        margin-left: -5px;
        border-width: 10px 10px 10px 10px;
        border-style: solid;
        border-color: transparent transparent #1a1a1a transparent;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .input-popup p {
        padding-left: 20px;
        position: relative;
    }
    .input-popup p::before {
        position: absolute;
        content: '';
        font-family: 'Line Awesome Free';
        font-weight: 900;
        left: 0;
        top: 4px;
        line-height: 1;
        font-size: 18px;
    }
    .input-popup p.error {
        text-decoration: line-through;
    }
    .input-popup p.error::before {
        content: "\f057";
        color: #ea5455;
    }
    .input-popup p.success::before {
        content: "\f058";
        color: #28c76f;
    }



 .show-filter{
  display: none;
}
@media(max-width:767px){
  .responsive-filter-card{
      display: none;
      transition: none;
  }
  .show-filter{
      display: block;
  }
}


/* ////////////////// select 2 css //////////////// */
.select2-dropdown {
  border: 0 !important;
  margin-top: 8px !important;
  border-radius: 5px !important;
  box-shadow: 0 3px 9px rgba(50, 50, 9, 0.05), 6px 4px 19px rgb(115 103 240 / 20%)
}

.select2-search--dropdown {
  padding: 10px 10px !important;
  border-color: #ced4da !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: #ced4da !important;
  padding: 10px 20px;
}

.select2-results__option.select2-results__option--selected,
.select2-results__option--selectable,
.select2-container--default .select2-results__option--disabled {
  padding: 12px 14px !important;
  border-bottom: 1px solid #eee;
}

.select2-results__option.select2-results__message {
  text-align: center !important;
  padding: 12px 14px !important;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
  width: 8px;
  border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
  background: #ddd;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover {
  background: #ddd;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow:after {
  position: absolute;
  right: 10px;
  top: 0;
  content: "\f107";
  font-family: "Line Awesome Free";
  font-weight: 900;
  transition: .3s;
}

.select2-container--default .select2-selection--single {
  border-color: #ced4da !important;
  border-width: 2px !important;
  border-radius: .375rem !important;
  padding: .375rem .75rem !important;
  height: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 8px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:after {
  transform: rotate(-180deg);
}

.select2-results__option:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.select2-results__option:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.select2-results__option.select2-results__option--selected,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #f1f1f1 !important;
  color: #000 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: rgb(var(--main)) !important;
  box-shadow: 0 0 25px rgba(115, 103, 240 0.071) !important;
  outline: 0 !important;
}

.select2-dropdown .country-flag {
  width: 25px;
  height: 25px;
  border-radius: 8px;
}

.select2-dropdown .gateway-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0px !important;
}

.select2-dropdown .gateway-subtitle {
  font-size: 12px;
  margin-bottom: 0px !important;
}
.select2-container--open .select2-selection.select2-selection--single, .select2-container--open .select2-selection.select2-selection--multiple {
  border-color: hsl(var(--base)) !important;
  border-radius: .375rem !important;
}



.payment-card-title {
  padding: 13px 25px;
  text-align: center;
  background-color: rgb(var(--main));
  border-radius: 5px;
  border: 0;
  margin-bottom: 0px;
  color: #fff;
}

.payment-system-list {
  --thumb-width: 100px;
  --thumb-height: 40px;
  --radio-size: 12px;
  --border-color: #cccccf59;
  --hover-border-color: rgb(var(--main));
  background-color: var(--second_color);
  border-radius: 5px;
  height: 100%;

}


.payment-system-list.is-scrollable {
  max-height: min(388px, 70vh);
  overflow-x: auto;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
  width: 5px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
  width: 5px;

}

.payment-system-list.is-scrollable::-webkit-scrollbar-thumb {
  background-color: rgb(var(--main));
  border-radius: 10px;
}
.payment-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 18px;
  transition: all 0.3s;
  border-left: 3px solid transparent;
  margin-bottom: 0;
}
label.payment-item {
  border-bottom: 1px solid #ffffff42;
}
label.payment-item:last-child {
  border-bottom: 0 !important;
}
.gateway-card {
  padding: 0;
  margin-top: 30px;
  border: 1px solid #373742 !important;
  border-radius: 10px;
  overflow: hidden;
}

.payment-item:first-child {
  border-top-color: #fff;
  border-radius: 5px 5px 0 0;
}
.payment-item:last-child {
  border-bottom: 0 !important;
  border-radius: 5px 5px 0 0;
}

.payment-item:has(.payment-item__radio:checked) {
  border-left: 3px solid hsl(var(--base));
  border-radius: 0px;
}

.payment-item__check {
  border: 3px solid transparent;
}

.payment-item:has(.payment-item__radio:checked) .payment-item__check {
  border: 3px solid hsl(var(--base));
}

.payment-item__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: calc(100% - var(--thumb-width))
}

.payment-item__check {
  width: var(--radio-size);
  height: var(--radio-size);
  border: 1px solid hsl(var(--base));
  display: inline-block;
  border-radius: 100%;

}

.payment-item__name {
  padding-left: 10px;
  width: calc(100% - var(--radio-size));
  transition: all 0.3s;
}

.payment-item__thumb {
  width: var(--thumb-width);
  height: var(--thumb-height);
  text-align: right;
  padding-left: 10px;

  &:has(.text) {
      width: fit-content;
  }
}

.payment-item__thumb img {
  max-width: var(--thumb-width);
  max-height: var(--thumb-height);
  object-fit: cover;
}


.deposit-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 8px;
}

.deposit-info__title {
  max-width: 50%;
  margin-bottom: 0px;
  text-align: left;
}

.deposit-info__input {
  max-width: 50%;
  text-align: right;
  width: 100%;
}

.deposit-info__input-select {
  border: 1px solid var(--border-color);
  width: 100%;
  border-radius: 5px;
  padding-block: 6px;
}

.deposit-info__input-group {
  border: 1px solid var(--border-color);
  border-radius: 5px;

  .deposit-info__input-group-text {
      align-self: center;
      padding-left: 5px;
  }

}

.deposit-info__input-group .form--control {
  padding: 5px;
  border: 0;
  height: 35px;
  text-align: right;
}

.deposit-info__input-group .form--control:focus {
  box-shadow: unset;
}

.info-text .text,
.deposit-info__input .text {
  font-size: 14px;

}

.deposit-info__title .text.has-icon {
  display: flex;
  align-items: center;
  gap: 5px
}

.total-amount {
  border-top: 1px solid var(--border-color);
}

.total-amount .deposit-info__title {
  font-weight: 600;
}

.payment-item__btn {
  border: 0;
  border-block: 1px solid var(--border-color);
  border-bottom: 0;
  background: hsl(var(--base));
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  font-weight: 500;
}

.payment-item:hover+.payment-item__btn {
  border-top-color: #fff;
}

button .spinner-border {
  --bs-spinner-width: 1.5rem;
  --bs-spinner-height: 1.5rem;
}

.modal-content{
  background-color: #242431;
  border: 1px solid rgba(0,0,0,.2);
}
.modal-content .close{
  background: transparent;
  color: #fff;
}

.modal-header{
  border-bottom: 1px solid #373742;
}
.modal-footer{
  border-top: 1px solid #373742;
}


.table-search {
	width: 33%;
	margin-left: auto;
}
@media (max-width:991px) {
	.table-search {
		width: 50%;
	}
}
@media (max-width:575px) {
	.table-search {
		width: 100%;
	}
}

.verification-code-wrapper{
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  background-color: #000 !important;
}
.verification-code::after {
  background-color: #000 !important;
}
.verification-code input:focus {
  background-color: inherit !important;
}
.border-bottom {
  border-color: rgba(255, 255, 255, 0.24) !important;
}

label.required:after{
  content: '*';
  color: #DC3545!important;
  margin-left: 2px;
}


/* =========================== Custom Checkbox Design Start =========================== */
.form--check .form-check-input {
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: transparent;
  box-shadow: none !important;
  border: 0;
  position: relative;
  border-radius: 2px;
  width: 16px;
  height: 16px;
  border: 1px solid hsl(var(--base));
  margin-right: 5px;
  }

  .form--check .form-check-input:checked {
  background-color: hsl(var(--base)) !important;
  border-color: hsl(var(--base)) !important;
  -webkit-box-shadow: none;
          box-shadow: none;
  }

  .form--check .form-check-input:checked[type=checkbox] {
  background-image: none;
  }

  .form--check .form-check-input:checked::before {
  position: absolute;
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #fff;
  font-size: 10px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  }
/* =========================== Custom Checkbox Design End =========================== */
.verification-code span {
  background: #22222e;
  border: solid 1px #f1f1f11f;
  color: #ffffff;
}
.verification-code input {
  color: #ffff !important;
}

.disabled{
  opacity: 0.7;
}

.input-group-text{
  background-color: hsl(var(--base)) !important;
}

.file-upload .remove-btn{
  background: #dc3545 !important;
  border-color: #dc3545 !important;
}




/* =====================================================================
   Modern mobile-first user dashboard (bit_gold)
   Added for the app-style UI: top bar, bottom nav, hero, quick actions
   ===================================================================== */
:root{
  --app-bg: #0e0f11;
  --app-card: #17181c;
  --app-card-2: #1d1f24;
  --app-line: rgba(255,255,255,.07);
  --app-muted: #9a9ca1;
}

/* keep the dashboard content clear of the fixed bottom navigation */
.page-wrapper.app-shell{ padding-bottom: 96px; }
.app-shell .footer{ display:none; }

/* slim in-app page title (replaces the heavy marketing breadcrumb) */
.app-page-title{ display:flex; align-items:center; gap:12px; padding:18px 0 4px; }
.app-page-title .back-btn{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--app-card-2); color:#fff; font-size:18px; border:1px solid var(--app-line);
}
.app-page-title h4{ margin:0; font-size:19px; font-weight:700; }

/* ---------------- App top bar ---------------- */
.app-topbar{
  position: sticky; top: 0; z-index: 1020;
  background: rgba(14,15,17,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--app-line);
}
.app-topbar__inner{
  display:flex; align-items:center; gap:14px;
  padding: 12px 0;
}
.app-topbar .avatar{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px; color:#111;
  background: hsl(var(--base));
  text-transform: uppercase;
}
.app-topbar .greet{ line-height:1.2; min-width:0; }
.app-topbar .greet small{ color:var(--app-muted); font-size:12px; display:block; }
.app-topbar .greet b{ font-size:16px; color:#fff; }
.app-topbar .topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.app-icon-btn{
  width:42px; height:42px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--app-card-2); color:#fff; font-size:20px;
  border:1px solid var(--app-line); transition:.2s;
}
.app-icon-btn:hover{ background:hsl(var(--base)); color:#111; }

/* desktop top nav */
.app-desktop-nav{ display:none; margin-left:24px; }
.app-desktop-nav a{
  color:var(--app-muted); padding:8px 14px; border-radius:10px; font-weight:600;
  transition:.2s;
}
.app-desktop-nav a:hover, .app-desktop-nav a.active{ color:#fff; background:var(--app-card-2); }

/* ---------------- Balance hero ---------------- */
.balance-hero{
  position:relative; overflow:hidden;
  border-radius:22px; padding:24px;
  background: linear-gradient(135deg, hsl(var(--base)) 0%, hsl(var(--base-hover)) 100%);
  color:#16130a;
  box-shadow: 0 18px 40px -18px hsl(var(--base)/.7);
}
.balance-hero::after{
  content:""; position:absolute; right:-40px; top:-40px;
  width:160px; height:160px; border-radius:50%;
  background:rgba(255,255,255,.18);
}
.balance-hero .label{ font-weight:600; opacity:.8; font-size:13px; }
.balance-hero .total{ font-size:34px; font-weight:800; line-height:1.1; margin:4px 0 2px; }
.balance-hero .sub{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:14px;
  position:relative; z-index:1;
}
.balance-hero .sub .item{ font-size:13px; }
.balance-hero .sub .item span{ display:block; opacity:.75; }
.balance-hero .sub .item b{ font-size:16px; }
.balance-hero .hero-btns{ display:flex; gap:10px; margin-top:18px; position:relative; z-index:1; }
.balance-hero .hero-btns a{
  flex:1; text-align:center; padding:11px; border-radius:12px; font-weight:700;
  background:#16130a; color:#fff; transition:.2s;
}
.balance-hero .hero-btns a.alt{ background:rgba(0,0,0,.15); color:#16130a; }
.balance-hero .hero-btns a:hover{ transform:translateY(-2px); }

/* ---------------- Quick actions ---------------- */
.quick-actions{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.quick-action{
  background:var(--app-card); border:1px solid var(--app-line);
  border-radius:16px; padding:14px 6px; text-align:center; transition:.2s;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.quick-action:hover{ border-color:hsl(var(--base)); transform:translateY(-3px); }
.quick-action i{
  width:46px; height:46px; border-radius:14px; font-size:22px;
  display:flex; align-items:center; justify-content:center;
  background:hsl(var(--base)/.14); color:hsl(var(--base));
}
.quick-action span{ font-size:12px; color:#e9e9ea; font-weight:600; line-height:1.2; }

/* ---------------- Stat cards ---------------- */
.app-section-title{
  display:flex; align-items:center; justify-content:space-between;
  margin: 26px 0 14px;
}
.app-section-title h5{ margin:0; font-size:17px; font-weight:700; }
.app-section-title a{ color:hsl(var(--base)); font-size:13px; font-weight:600; }

.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.stat-card{
  background:var(--app-card); border:1px solid var(--app-line);
  border-radius:16px; padding:16px; display:flex; align-items:center; gap:12px;
}
.stat-card .ic{
  width:42px; height:42px; border-radius:12px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  background:var(--app-card-2); color:hsl(var(--base));
}
.stat-card small{ color:var(--app-muted); font-size:12px; display:block; }
.stat-card b{ font-size:17px; color:#fff; }

/* ---------------- Transaction list ---------------- */
.tx-card{ background:var(--app-card); border:1px solid var(--app-line); border-radius:18px; overflow:hidden; }
.tx-item{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-bottom:1px solid var(--app-line);
}
.tx-item:last-child{ border-bottom:0; }
.tx-item .tx-ic{
  width:42px; height:42px; border-radius:12px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.tx-item .tx-ic.plus{ background:rgba(40,199,111,.15); color:#28c76f; }
.tx-item .tx-ic.minus{ background:rgba(234,84,85,.15); color:#ea5455; }
.tx-item .tx-main{ min-width:0; flex:1; }
.tx-item .tx-main b{ display:block; font-size:14px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tx-item .tx-main small{ color:var(--app-muted); font-size:12px; }
.tx-item .tx-amt{ text-align:right; font-weight:700; font-size:14px; white-space:nowrap; }
.tx-item .tx-amt.plus{ color:#28c76f; }
.tx-item .tx-amt.minus{ color:#ea5455; }
.tx-item .tx-amt small{ display:block; color:var(--app-muted); font-weight:500; font-size:11px; }
.tx-empty{ text-align:center; padding:34px 16px; color:var(--app-muted); }

/* ---------------- Bottom navigation ---------------- */
.app-bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  display:flex; justify-content:space-around; align-items:flex-end;
  background:rgba(20,21,24,.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top:1px solid var(--app-line);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.app-bottom-nav a{
  flex:1; text-align:center; color:var(--app-muted);
  font-size:11px; font-weight:600; display:flex; flex-direction:column;
  align-items:center; gap:3px; padding:4px 0; transition:.2s;
}
.app-bottom-nav a i{ font-size:22px; }
.app-bottom-nav a.active{ color:hsl(var(--base)); }
.app-bottom-nav a.fab{
  flex:0 0 auto; margin-top:-30px;
}
.app-bottom-nav a.fab i{
  width:58px; height:58px; border-radius:50%; font-size:28px;
  display:flex; align-items:center; justify-content:center;
  background:hsl(var(--base)); color:#111;
  box-shadow:0 10px 22px -8px hsl(var(--base)/.9);
  margin-bottom:3px;
}
.app-bottom-nav a.fab.active{ color:#111; }

/* ---------------- Offcanvas menu ---------------- */
.app-offcanvas{ background:var(--app-card); color:#fff; }
.app-offcanvas .offcanvas-header{ border-bottom:1px solid var(--app-line); }
.app-offcanvas .menu-user{ display:flex; align-items:center; gap:12px; }
.app-offcanvas .menu-user .avatar{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:hsl(var(--base)); color:#111; font-weight:700; text-transform:uppercase;
}
.app-menu-list{ padding:10px 0; }
.app-menu-list a{
  display:flex; align-items:center; gap:14px; padding:13px 6px;
  color:#e9e9ea; border-bottom:1px solid var(--app-line); font-weight:500;
}
.app-menu-list a:last-child{ border-bottom:0; }
.app-menu-list a i{ font-size:20px; color:hsl(var(--base)); width:24px; text-align:center; }
.app-menu-list a.danger i, .app-menu-list a.danger{ color:#ea5455; }

/* ---------------- Responsive ---------------- */
@media (min-width: 992px){
  .app-bottom-nav{ display:none; }
  .page-wrapper.app-shell{ padding-bottom: 40px; }
  .app-desktop-nav{ display:flex; align-items:center; gap:4px; }
  .balance-hero .total{ font-size:40px; }
  .quick-actions{ grid-template-columns:repeat(6,1fr); }
  .stat-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width: 575px){
  .quick-actions{ grid-template-columns:repeat(4,1fr); gap:10px; }
  .balance-hero .total{ font-size:30px; }
}

/* =====================================================================
   Sidebar dashboard shell + clean auth pages (bit_gold)
   ===================================================================== */

/* ---------------- Sidebar layout ---------------- */
.app-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:264px; z-index:1045;
  background:var(--app-card); border-right:1px solid var(--app-line);
  display:flex; flex-direction:column; overflow-y:auto;
  transform:translateX(-100%); transition:transform .25s ease;
}
.app-sidebar.open{ transform:none; }
.app-sidebar__brand{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px; border-bottom:1px solid var(--app-line);
}
.app-sidebar__brand img{ max-height:38px; }
.app-sidebar__user{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--app-line);
}
.app-sidebar__user .avatar{
  width:46px; height:46px; border-radius:50%; flex:0 0 auto;
  background:hsl(var(--base)); color:#111; font-weight:700; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center;
}
.app-sidebar__user .meta{ min-width:0; }
.app-sidebar__user .meta b{ display:block; color:#fff; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-sidebar__user .meta small{ color:var(--app-muted); }

.app-nav{ padding:8px 12px 28px; }
.app-nav__label{
  display:block; color:var(--app-muted); font-size:11px;
  text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  margin:16px 10px 6px;
}
.app-nav a{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:11px; margin-bottom:2px;
  color:#cfd0d4; font-weight:600; font-size:14px; transition:.15s;
}
.app-nav a i{ font-size:20px; width:22px; text-align:center; }
.app-nav a:hover{ background:var(--app-card-2); color:#fff; }
.app-nav a.active{ background:hsl(var(--base)); color:#16130a; }
.app-nav a.active i{ color:#16130a; }
.app-nav a.danger{ color:#ea5455; }
.app-nav a.danger:hover{ background:rgba(234,84,85,.12); }

.app-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1040;
  opacity:0; visibility:hidden; transition:.25s;
}
.app-backdrop.show{ opacity:1; visibility:visible; }

.app-main{ min-height:100vh; transition:margin .25s; }

.app-topbar2{
  position:sticky; top:0; z-index:1020;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; background:rgba(14,15,17,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--app-line);
}
.app-topbar2__title{ margin:0; font-size:17px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-topbar2__right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.avatar-sm{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  background:hsl(var(--base)); color:#111; font-weight:700; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center;
}

@media (min-width:1200px){
  .app-sidebar{ transform:none; }
  .app-main{ margin-left:264px; }
  .app-backdrop{ display:none; }
  #appSidebarToggle{ display:none; }
}

/* ---------------- Clean auth pages ---------------- */
.auth-wrapper{
  min-height:100vh; position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 16px;
}
.auth-brand{ margin-bottom:22px; }
.auth-brand img{ max-height:48px; }
.auth-content{ width:100%; }
.auth-foot{ margin-top:22px; color:var(--app-muted); font-size:13px; }

/* neutralise heavy marketing section spacing/backgrounds inside auth shell */
.auth-wrapper section,
.auth-wrapper .cmn-section,
.auth-wrapper .account-section{ padding-top:0 !important; padding-bottom:0 !important; background:none !important; }

.auth-wrapper .account-card{
  background:rgba(23,24,28,.9); backdrop-filter:blur(10px);
  border:1px solid var(--app-line); border-radius:20px; overflow:hidden;
  box-shadow:0 28px 60px -30px rgba(0,0,0,.85);
}
.auth-wrapper .account-card__header{ background:none !important; padding:28px 28px 20px; }
.auth-wrapper .account-card__header::before{ display:none !important; }
.auth-wrapper .account-card__body{ padding:8px 28px 30px; }
.auth-wrapper .card.custom--card{
  border:1px solid var(--app-line); border-radius:20px;
  box-shadow:0 28px 60px -30px rgba(0,0,0,.85);
}

/* =====================================================================
   Modern UI layer — restyles shared components across ALL user pages
   (scoped to the dashboard shell .app-main and the auth shell)
   ===================================================================== */

/* ----- bottom nav: visible below desktop, hidden when sidebar is fixed ----- */
@media (min-width: 992px){ .app-bottom-nav{ display:flex; } }
@media (min-width: 1200px){ .app-bottom-nav{ display:none; } }
.app-main{ padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
@media (min-width: 1200px){ .app-main{ padding-bottom: 0; } }

/* ----- generic section spacing inside the shell ----- */
.app-main .cmn-section{ padding: 18px 0 8px; }
.app-main .pt-60, .app-main .pt-120{ padding-top: 18px !important; }
.app-main .pb-60, .app-main .pb-120{ padding-bottom: 8px !important; }

/* ----- cards ----- */
.app-main .card,
.app-main .custom--card{
  background: var(--app-card);
  border: 1px solid var(--app-line);
  border-radius: 18px;
  box-shadow: 0 12px 30px -20px rgba(0,0,0,.7);
}
.app-main .card .card-header,
.app-main .card-header{
  background: transparent;
  border-bottom: 1px solid var(--app-line);
  padding: 16px 20px;
  font-weight: 700;
}
.app-main .card-body{ padding: 20px; }

/* ----- tables ----- */
.app-main .table{
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.app-main .table thead{ background: transparent; }
.app-main .table thead tr th{
  color: var(--app-muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  border-bottom: 1px solid var(--app-line);
  padding: 12px 18px;
}
.app-main .table tbody tr td{
  color: #e9e9ea; background: transparent;
  border-color: var(--app-line);
  padding: 14px 18px; font-size: 14px;
}
.app-main .table tbody tr:hover td{ background: rgba(255,255,255,.03); }

/* ----- responsive stacked tables on mobile (uses data-label from app.js) ----- */
@media (max-width: 767px){
  .app-main .table thead{ display: none; }
  .app-main .table tbody tr{
    display: block; margin-bottom: 12px;
    background: var(--app-card-2); border: 1px solid var(--app-line);
    border-radius: 14px; padding: 6px 14px;
  }
  .app-main .table tbody tr td{
    display: flex; align-items: center; justify-content: space-between;
    text-align: right !important; border: 0;
    border-bottom: 1px solid var(--app-line) !important;
    padding: 11px 0; font-size: 13px;
  }
  .app-main .table tbody tr td:last-child{ border-bottom: 0 !important; }
  .app-main .table tbody tr td::before{
    content: attr(data-label);
    color: var(--app-muted); font-weight: 600; text-align: left;
    margin-right: 14px; font-size: 12px;
  }
}

/* ----- forms ----- */
.app-main .form-control,
.app-main .form--control,
.app-main .form-select,
.app-main textarea,
.auth-wrapper .form-control,
.auth-wrapper .form--control,
.auth-wrapper .form-select,
.auth-wrapper textarea{
  background: var(--app-card-2);
  border: 1px solid var(--app-line);
  color: #fff;
  border-radius: 12px;
  padding: 12px 15px;
  min-height: 48px;
  transition: .15s;
}
.app-main .form-control:focus,
.app-main .form--control:focus,
.app-main .form-select:focus,
.auth-wrapper .form-control:focus,
.auth-wrapper .form--control:focus,
.auth-wrapper .form-select:focus{
  background: var(--app-card-2);
  border-color: hsl(var(--base));
  box-shadow: 0 0 0 3px hsl(var(--base)/.18);
  color: #fff;
}
.app-main .form-control::placeholder,
.auth-wrapper .form-control::placeholder{ color: #6f7177; }
.app-main label, .auth-wrapper label{ color:#cfd0d4; font-weight:600; margin-bottom:7px; }
.app-main .form-select option, .auth-wrapper .form-select option{ background:#1d1f24; }

/* ----- buttons ----- */
.app-main .btn--base,
.auth-wrapper .btn--base{
  border-radius: 12px;
  font-weight: 700;
  padding: 12px 22px;
  transition: .18s;
}
.app-main .btn--base:hover,
.auth-wrapper .btn--base:hover{ transform: translateY(-2px); }
.app-main .btn-sm{ padding: 7px 14px; border-radius: 10px; }
.app-main .btn--base.btn-md{ padding: 11px 20px; }

/* ----- badges / pills ----- */
.app-main .badge{ border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: 12px; }

/* ----- list groups ----- */
.app-main .list-group{ border: 1px solid var(--app-line); border-radius: 14px; overflow: hidden; }
.app-main .list-group-item{ background: transparent; border-color: var(--app-line); color: #d3d3d3; padding: 14px 16px; }

/* ----- tabs ----- */
.app-main .nav-tabs{ background: transparent; border: 0; padding: 0; gap: 8px; flex-wrap: wrap; }
.app-main .nav-tabs .nav-item .nav-link,
.app-main .nav-tabs .nav-link{
  background: var(--app-card); border: 1px solid var(--app-line);
  border-radius: 12px; color: #cfd0d4; padding: 10px 18px; font-weight: 600;
}
.app-main .nav-tabs .nav-link.active{ background: hsl(var(--base)); color: #16130a; border-color: transparent; }

/* ----- alerts ----- */
.app-main .alert{ border-radius: 14px; background: var(--app-card); }

/* ----- pagination ----- */
.app-main .pagination{ gap: 6px; flex-wrap: wrap; }
.app-main .page-link{
  background: var(--app-card); border: 1px solid var(--app-line);
  color: #cfd0d4; border-radius: 10px !important; padding: 8px 14px;
}
.app-main .page-item.active .page-link{ background: hsl(var(--base)); color: #16130a; border-color: transparent; }

/* ----- section headings on inner pages ----- */
.app-main h3, .app-main h4, .app-main h5, .app-main h6{ color: #fff; }

/* =====================================================================
   Modern UI layer — modals, plan cards, progress (all user pages)
   ===================================================================== */

/* ----- modals ----- */
.app-main .modal-content,
.modal-content-bg .modal-content{
  background: var(--app-card);
  border: 1px solid var(--app-line);
  border-radius: 18px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.85);
}
.app-main .modal-header{ border-bottom: 1px solid var(--app-line); padding: 18px 22px; }
.app-main .modal-title{ color: #fff; font-weight: 700; }
.app-main .modal-body{ padding: 22px; }
.app-main .modal-footer{ border-top: 1px solid var(--app-line); padding: 16px 22px; }
.app-main .modal .close{
  width: 38px; height: 38px; border-radius: 11px; opacity: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--app-card-2); color: #fff; border: 1px solid var(--app-line);
  font-size: 18px; transition: .15s;
}
.app-main .modal .close:hover{ background: #ea5455; color: #fff; border-color: transparent; }

/* ----- plan / package cards ----- */
.app-main .package-card{
  background: var(--app-card) !important;
  border: 1px solid var(--app-line);
  border-radius: 18px;
  box-shadow: 0 14px 34px -22px rgba(0,0,0,.75);
}
.app-main .package-card:hover{
  border-color: hsl(var(--base));
  box-shadow: 0 18px 40px -20px hsl(var(--base)/.45);
}
.app-main .package-card__features li{ border-bottom-color: var(--app-line); }

/* ----- progress bars ----- */
.app-main .progress{ background: var(--app-card-2); border-radius: 999px; height: 8px; }
.app-main .progress-bar{ background: hsl(var(--base)); }

/* ----- round avatars/thumbs already used in tables ----- */
.app-main .table .user .thumb{ border-color: var(--app-line); }

/* =====================================================================
   Modern UI layer — final gaps: select2, referral tree, checkboxes, tickets
   ===================================================================== */

/* ----- select2 (country picker etc.) closed control ----- */
.app-main .select2-container--default .select2-selection--single,
.auth-wrapper .select2-container--default .select2-selection--single{
  background: var(--app-card-2) !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 12px !important;
  height: 48px !important;
  padding: 9px 14px !important;
}
.app-main .select2-container--default .select2-selection--single .select2-selection__rendered,
.auth-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: #fff !important; line-height: 28px !important;
}
/* select2 dropdown (rendered at body level on template pages) */
.select2-dropdown{ background: var(--app-card) !important; border: 1px solid var(--app-line) !important; }
.select2-container--default .select2-results__option{
  background: var(--app-card) !important; color: #e9e9ea !important;
  border-bottom: 1px solid var(--app-line) !important;
}
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--selected{
  background: hsl(var(--base)) !important; color: #16130a !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field{
  background: var(--app-card-2) !important; border: 1px solid var(--app-line) !important;
  color: #fff !important; border-radius: 8px;
}

/* ----- referral tree ----- */
.app-main .treeview-container{
  background: var(--app-card); border: 1px solid var(--app-line);
  border-radius: 16px; padding: 18px; overflow-x: auto;
}
.app-main .treeview, .app-main .treeview ul{ list-style: none; margin: 0; padding-left: 22px; }
.app-main .treeview li{ position: relative; padding: 7px 0 7px 22px; color: #e9e9ea; font-size: 14px; }
.app-main .treeview li::before{
  content: ""; position: absolute; left: 2px; top: 15px;
  width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--base));
}
.app-main .treeview > li.items-expanded > .firstList,
.app-main .treeview li > ul{ border-left: 1px solid var(--app-line); margin-left: 4px; }

/* ----- checkboxes / radios ----- */
.app-main .form-check-input,
.auth-wrapper .form-check-input{ background-color: var(--app-card-2); border: 1px solid var(--app-line); }
.app-main .form-check-input:checked,
.auth-wrapper .form-check-input:checked{ background-color: hsl(var(--base)); border-color: hsl(var(--base)); }
.app-main .form-check-label,
.auth-wrapper .form-check-label{ color: #cfd0d4; }

/* ----- support ticket message blocks ----- */
.app-main .row.border-primary,
.app-main .row.border-warning{ border-radius: 14px !important; background: var(--app-card-2); }

/* =====================================================================
   Compact alerts + smaller preloader
   ===================================================================== */

/* ----- compact in-app notifications ----- */
.app-main .alert{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 12px;
  border-radius: 12px; background: var(--app-card);
}
.app-main .alert__icon{ font-size: 16px; line-height: 1.4; }
.app-main .alert__message{ margin: 0; font-size: 13px; line-height: 1.45; }
.app-main .alert__message .fw-bold{ font-size: 13.5px; }
.app-main .alert__message small{ font-size: 12px; }

/* ----- preloader: smaller, subtle ----- */
.preloader__imges{ width: 70px !important; height: 70px !important; }
.preloader__img{ width: 56px !important; height: 56px !important; }
.preloader__img.one,
.preloader__img.two{ max-width: 56px !important; max-height: 56px !important; }

/* ----- dashboard referral link card ----- */
.referral-card{
  background: var(--app-card); border: 1px solid var(--app-line);
  border-radius: 18px; padding: 18px;
}
.referral-card__head{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.referral-card__head .ic{
  width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: hsl(var(--base)/.14); color: hsl(var(--base));
}
.referral-card__head b{ display: block; color: #fff; font-size: 15px; }
.referral-card__head small{ color: var(--app-muted); font-size: 12px; }
.referral-card .input-group .referralURL{ border-right: 0; }
.referral-card .input-group .copyBoard{ cursor: pointer; border-radius: 0 12px 12px 0 !important; }

/* =====================================================================
   Auth pages — split layout (image left / form right) + mobile curve
   ===================================================================== */
.auth-split{ display:flex; min-height:100vh; position:relative; z-index:2; }

/* left visual panel (desktop only) */
.auth-split__visual{ display:none; }
@media (min-width:992px){
  .auth-split__visual{
    flex:1 1 48%; position:relative; background-size:cover; background-position:center;
    background-color:#16130a;
  }
  .auth-split__visual::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(150deg, hsl(var(--base)/.92) 0%, rgba(14,15,17,.94) 100%);
  }
}
.auth-split__visual-inner{
  position:relative; z-index:1; height:100%;
  display:flex; flex-direction:column; justify-content:space-between; padding:48px;
}
.auth-split__brand img{ max-height:48px; }
.auth-split__copy{ max-width:460px; }
.auth-split__copy h2{ font-size:38px; line-height:1.2; font-weight:800; color:#fff; margin-bottom:14px; }
.auth-split__copy h2 span{ color:#16130a; }
.auth-split__copy > p{ color:rgba(255,255,255,.85); font-size:16px; }
.auth-points{ list-style:none; padding:0; margin:24px 0 0; }
.auth-points li{ display:flex; align-items:center; gap:12px; color:#fff; font-weight:500; margin-bottom:14px; }
.auth-points li i{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:19px;
  background:rgba(0,0,0,.25); color:#fff;
}
.auth-split__foot{ color:rgba(255,255,255,.7); font-size:13px; margin:0; }

/* right form panel */
.auth-split__panel{ flex:1 1 52%; display:flex; flex-direction:column; background:var(--app-bg); }
.auth-mobile-curve{
  background:hsl(var(--base)); text-align:center;
  padding:36px 20px 30px; border-radius:0 0 38px 38px;
}
.auth-mobile-curve img{ max-height:48px; }
@media (min-width:992px){ .auth-mobile-curve{ display:none; } }
.auth-split__form{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  width:100%; max-width:520px; margin:0 auto; padding:34px 22px 54px;
}

/* neutralise marketing section spacing/background inside the form panel */
.auth-split section, .auth-split .cmn-section, .auth-split .account-section{
  padding-top:0 !important; padding-bottom:0 !important; background:none !important;
}
.auth-split .row{ margin:0; }
.auth-split [class*="col-"]{ width:100%; max-width:100%; flex:0 0 100%; padding:0; }

/* cards become clean form areas (no heavy card chrome) */
.auth-split .account-card,
.auth-split .card.custom--card,
.auth-split .verification-code-wrapper{
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
.auth-split .account-card__header{ background:none !important; padding:0 0 18px !important; text-align:left; }
.auth-split .account-card__header::before{ display:none !important; }
.auth-split .account-card__header .section-title{ font-size:26px; font-weight:800; }
.auth-split .account-card__body,
.auth-split .card.custom--card .card-body{ padding:0 !important; }

/* inputs / selects / buttons / checks inside the split */
.auth-split .form-control,
.auth-split .form--control,
.auth-split .form-select,
.auth-split textarea{
  background:var(--app-card-2); border:1px solid var(--app-line); color:#fff;
  border-radius:12px; padding:12px 15px; min-height:50px;
}
.auth-split .form-control:focus,
.auth-split .form--control:focus,
.auth-split .form-select:focus{
  background:var(--app-card-2); border-color:hsl(var(--base));
  box-shadow:0 0 0 3px hsl(var(--base)/.18); color:#fff;
}
.auth-split label{ color:#cfd0d4; font-weight:600; margin-bottom:7px; }
.auth-split .btn--base{ border-radius:12px; font-weight:700; padding:13px 22px; }
.auth-split .form-check-input{ background-color:var(--app-card-2); border:1px solid var(--app-line); }
.auth-split .form-check-input:checked{ background-color:hsl(var(--base)); border-color:hsl(var(--base)); }
.auth-split .form-check-label{ color:#cfd0d4; }
.auth-split .select2-container--default .select2-selection--single{
  background:var(--app-card-2) !important; border:1px solid var(--app-line) !important;
  border-radius:12px !important; height:50px !important; padding:10px 14px !important;
}
.auth-split .select2-container--default .select2-selection--single .select2-selection__rendered{ color:#fff !important; }

/* =====================================================================
   Public landing — modern polish + responsiveness (frontend only)
   ===================================================================== */
.page-wrapper .header{
  position:sticky; top:0; z-index:1020;
  background:rgba(14,15,17,.72);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header.menu-fixed{ background:rgba(14,15,17,.94) !important; backdrop-filter:blur(14px); }

/* header CTA buttons */
.header-auth-btns{ display:flex; align-items:center; gap:10px; }
.header-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:11px; font-weight:600; font-size:14px;
  white-space:nowrap; transition:.18s;
}
.header-btn--ghost{ color:#fff; border:1px solid rgba(255,255,255,.2); }
.header-btn--ghost:hover{ background:rgba(255,255,255,.08); color:#fff; }
.header-btn--solid{ background:hsl(var(--base)); color:#16130a; }
.header-btn--solid:hover{ transform:translateY(-2px); color:#16130a; }

/* hero */
.page-wrapper .hero{ position:relative; background-size:cover; background-position:center; padding:130px 0 110px; }
.page-wrapper .hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(14,15,17,.94) 0%, rgba(14,15,17,.6) 55%, rgba(14,15,17,.15) 100%);
}
.page-wrapper .hero .container{ position:relative; z-index:1; }
.page-wrapper .hero__title{ font-size:52px; font-weight:800; line-height:1.12; }
.page-wrapper .hero__content > p{ font-size:18px; color:rgba(255,255,255,.85); }
.page-wrapper .hero .btn--base{ border-radius:12px; padding:14px 30px; }
.page-wrapper .hero .btn--base:hover{ transform:translateY(-2px); }

/* generic landing polish */
.page-wrapper .btn--base{ border-radius:12px; }
.page-wrapper .card{ border-radius:18px; }
.page-wrapper .package-card{ border-radius:18px; border:1px solid rgba(255,255,255,.08); }
.page-wrapper .section-title{ font-weight:800; }

/* fade-in on scroll (used with .reveal-up) */
.page-wrapper .reveal-up{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; }
.page-wrapper .reveal-up.in{ opacity:1; transform:none; }

/* responsiveness */
@media (max-width:991px){
  .page-wrapper .hero{ padding:90px 0 66px; text-align:center; }
  .page-wrapper .hero__title{ font-size:34px; }
  .header-auth-btns{ margin-top:12px; }
  .page-wrapper .hero__content{ margin:0 auto; }
}
@media (max-width:575px){
  .page-wrapper .hero{ padding:72px 0 52px; }
  .page-wrapper .hero__title{ font-size:27px; }
  .page-wrapper .hero__content > p{ font-size:15px; }
  .page-wrapper .hero .btn--base{ width:100%; }
}

/* ----- landing: ways to earn ----- */
.earn-section{ padding:80px 0; }
.earn-head{ max-width:620px; margin:0 auto 44px; }
.earn-head .section-title{ font-size:36px; font-weight:800; }
.earn-head p{ color:rgba(255,255,255,.7); margin-top:10px; }
.earn-card{
  background:var(--app-card); border:1px solid var(--app-line);
  border-radius:20px; padding:30px 26px; text-align:center; transition:.25s;
}
.earn-card:hover{ transform:translateY(-6px); border-color:hsl(var(--base)); box-shadow:0 22px 44px -24px hsl(var(--base)/.5); }
.earn-card__ic{
  width:72px; height:72px; border-radius:20px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center; font-size:34px;
  background:hsl(var(--base)/.14); color:hsl(var(--base));
}
.earn-card h5{ font-size:19px; font-weight:700; margin-bottom:10px; color:#fff; }
.earn-card p{ color:rgba(255,255,255,.7); font-size:14.5px; margin:0; }
@media (max-width:575px){ .earn-section{ padding:54px 0; } .earn-head .section-title{ font-size:27px; } }

/* =====================================================================
   Landing — bespoke modern sections: about / why-choose / how-it-works / plans
   ===================================================================== */
.why2, .how2, .plan2{ padding:80px 0; }
.about2{ padding:80px 0; }
.why2 .section-header, .how2 .section-header, .plan2 .section-header{ margin-bottom:46px; }
.why2 .section-header p, .how2 .section-header p, .plan2 .section-header p{ color:rgba(255,255,255,.7); margin-top:10px; }

/* about */
.about2__media{ position:relative; }
.about2__media img{ width:100%; border-radius:22px; object-fit:cover; border:1px solid var(--app-line); }
.about2__badge{
  position:absolute; left:-6px; bottom:-6px; display:flex; align-items:center; gap:12px;
  background:var(--app-card); border:1px solid var(--app-line); border-radius:16px; padding:14px 18px;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.8);
}
.about2__badge i{ font-size:28px; color:hsl(var(--base)); }
.about2__badge b{ display:block; color:#fff; line-height:1.1; }
.about2__badge span{ color:var(--app-muted); font-size:13px; }
.about2__content .section-title{ font-size:34px; font-weight:800; }
.about2__content > p{ color:rgba(255,255,255,.75); }
.about2__points{ list-style:none; padding:0; margin:20px 0 24px; }
.about2__points li{ display:flex; align-items:center; gap:10px; color:#e9e9ea; margin-bottom:12px; }
.about2__points li i{ color:hsl(var(--base)); font-size:20px; }

/* why choose — feature cards */
.feature-card{
  background:var(--app-card); border:1px solid var(--app-line); border-radius:20px;
  padding:30px 26px; transition:.25s;
}
.feature-card:hover{ transform:translateY(-6px); border-color:hsl(var(--base)); box-shadow:0 22px 44px -24px hsl(var(--base)/.5); }
.feature-card__icon{
  width:64px; height:64px; border-radius:18px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center; font-size:30px;
  background:hsl(var(--base)/.14); color:hsl(var(--base));
}
.feature-card__icon i{ color:hsl(var(--base)); }
.feature-card__title{ font-size:19px; font-weight:700; color:#fff; margin-bottom:10px; }
.feature-card p{ color:rgba(255,255,255,.7); margin:0; font-size:14.5px; }

/* how it works — step cards */
.how2__grid{ position:relative; }
.step-card{
  position:relative; text-align:center;
  background:var(--app-card); border:1px solid var(--app-line); border-radius:20px;
  padding:38px 24px 28px; transition:.25s;
}
.step-card:hover{ transform:translateY(-6px); border-color:hsl(var(--base)); }
.step-card__num{
  position:absolute; top:16px; right:20px;
  font-size:30px; font-weight:800; color:hsl(var(--base)/.25);
}
.step-card__icon{
  width:72px; height:72px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center; font-size:32px;
  background:hsl(var(--base)/.14); color:hsl(var(--base));
}
.step-card__icon i{ color:hsl(var(--base)); }
.step-card__title{ font-size:18px; font-weight:700; color:#fff; margin:0; }

@media (max-width:575px){
  .why2, .how2, .plan2, .about2{ padding:54px 0; }
  .about2__content .section-title{ font-size:27px; }
  .about2__badge{ left:10px; }
}