/* ==========================================================================
   HEXARO — Premium cash-out gaming theme · Bootstrap 5.3 (dark) + brand layer
   ========================================================================== */

/* ---------- Brand tokens ---------- */
:root,
[data-bs-theme="dark"] {
  --c-bg: #0d0e1d;
  --c-bg2: #141529;
  --c-card: #1d1e31;
  --c-card2: #252641;
  --c-line: #17182a;
  --c-line2: #33334c;
  --c-text: #a9a9ca;
  --c-mut: #94a3b8;
  --c-dim: #595b80;
  --c-pri: #ffbe4d;
  --c-pri2: #c9962e;
  --c-soft: rgba(255, 190, 77, 0.14);
  --c-brand1: #ffbe4d;
  --c-brand2: #ffa726;
  --c-ok: #0bf3a8;
  --c-bad: #f05252;
  --c-warn: #ffb547;
  --c-info: #38b2b6;
  --grad-brand: linear-gradient(90deg, var(--c-brand1), var(--c-brand2));
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 10px;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.35);

  /* Map brand over Bootstrap 5 dark variables */
  --bs-body-bg: var(--c-bg);
  --bs-body-color: var(--c-text);
  --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: 15px;
  --bs-body-line-height: 1.55;
  --bs-border-color: var(--c-line);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
  --bs-secondary-color: var(--c-mut);
  --bs-secondary-bg: var(--c-card2);
  --bs-tertiary-bg: var(--c-card2);
  --bs-primary: #ffbe4d;
  --bs-primary-rgb: 255, 190, 77;
  --bs-primary-bg-subtle: rgba(255, 190, 77, 0.14);
  --bs-primary-border-subtle: rgba(255, 190, 77, 0.35);
  --bs-primary-text-emphasis: #ffcf87;
  --bs-link-color: var(--c-pri);
  --bs-link-color-rgb: 255, 190, 77;
  --bs-link-hover-color: #ffcf87;
  --bs-link-hover-color-rgb: 255, 140, 51;
  --bs-border-radius: 1rem;
  --bs-border-radius-sm: 0.7rem;
  --bs-border-radius-lg: 1.35rem;
  --bs-code-color: var(--c-warn);
  --bs-emphasis-color: #fff;
  --bs-heading-color: #ffffff;
  --bs-focus-ring-color: rgba(255, 190, 77, 0.4);
  --bs-dropdown-bg: var(--c-card);
  --bs-dropdown-link-color: var(--c-text);
  --bs-dropdown-link-hover-bg: var(--c-card2);
  --bs-dropdown-link-active-bg: var(--c-pri);
  --bs-dropdown-border-color: var(--c-line);
  --bs-dropdown-divider-bg: var(--c-line);
  --bs-modal-bg: var(--c-card);
  --bs-modal-border-color: var(--c-line);
  --bs-accordion-bg: var(--c-card);
  --bs-accordion-active-bg: rgba(255, 190, 77, 0.12);
  --bs-accordion-btn-bg: var(--c-card);
  --bs-accordion-border-color: var(--c-line);
  --bs-accordion-active-color: var(--c-pri);
  --bs-offcanvas-bg: var(--c-card);
  --bs-offcanvas-color: var(--c-text);
  --bs-list-group-bg: var(--c-card);
  --bs-list-group-border-color: var(--c-line);
  --bs-table-bg: var(--c-card);
  --bs-form-control-bg: var(--c-bg2);
  --bs-form-control-disabled-bg: var(--c-card2);
  --bs-input-bg: var(--c-bg2);
  --bs-input-disabled-bg: var(--c-card2);
  --bs-input-color: var(--c-text);
  --bs-toast-bg: var(--c-card);
  --bs-toast-color: var(--c-text);
  --bs-popover-bg: var(--c-card);
  --bs-tooltip-bg: var(--c-card2);
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(900px 500px at 50% -10%, rgba(255, 190, 77, 0.07), transparent 70%);
  background-attachment: fixed;
}

::selection {
  background: rgba(255, 190, 77, 0.35);
  color: #fff;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--c-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--c-line2);
  border-radius: 999px;
  border: 2px solid var(--c-bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-pri2);
}

/* ---------- Layout ---------- */
.main {
  /* padding: 26px 0 96px; */
}

.container {
  max-width: 1200px;
}

.no-gutters {
  --bs-gutter-x: 0;
}

/* ---------- Legacy helpers kept for parity ---------- */
.u-flex {
  display: flex;
}

.u-aic {
  align-items: center;
}

.u-jcb,
.u-between {
  justify-content: space-between;
}

.u-jcc {
  justify-content: center;
}

.u-col {
  flex-direction: column;
}

.u-gap8 {
  gap: 8px;
}

.u-gap12 {
  gap: 12px;
}

.u-gap16 {
  gap: 16px;
}

.u-gap24 {
  gap: 24px;
}

.u-mt8 {
  margin-top: 8px;
}

.u-mt16 {
  margin-top: 16px;
}

.u-mt24 {
  margin-top: 24px;
}

.u-mt32 {
  margin-top: 32px;
}

.u-mb8 {
  margin-bottom: 8px;
}

.u-mb16 {
  margin-bottom: 16px;
}

.u-mb24 {
  margin-bottom: 24px;
}

.u-w100 {
  width: 100%;
}

.u-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.u-ellip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-center-t {
  text-align: center;
}

.u-pos-rel {
  position: relative;
}

.u-hide {
  display: none !important;
}

.u-clamp1,
.u-clamp2,
.u-clamp3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.u-clamp1 {
  -webkit-line-clamp: 1;
}

.u-clamp2 {
  -webkit-line-clamp: 2;
}

.u-clamp3 {
  -webkit-line-clamp: 3;
}

.u-text-pri {
  color: var(--c-pri);
}

.u-text-ok {
  color: var(--c-ok);
}

.u-text-bad {
  color: var(--c-bad);
}

.u-text-warn {
  color: var(--c-warn);
}

.u-text-info {
  color: var(--c-info);
}

.u-text-mut {
  color: var(--c-mut);
}

.u-text-dim {
  color: var(--c-dim);
}

.u-text-bold {
  font-weight: 700;
}

.u-text-gradient {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.coin-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* ---------- Bootstrap component theming ---------- */
.btn {
  --bs-btn-font-weight: 700;
}

.btn-primary {
  --bs-btn-bg: var(--c-pri);
  --bs-btn-border-color: var(--c-pri);
  --bs-btn-hover-bg: #ffcf87;
  --bs-btn-hover-border-color: #ffcf87;
  --bs-btn-active-bg: var(--c-pri2);
  --bs-btn-active-border-color: var(--c-pri2);
  --bs-btn-disabled-bg: var(--c-pri2);
  --bs-btn-disabled-border-color: var(--c-pri2);
  color: #1f2937;
}

.btn-outline-light {
  --bs-btn-color: var(--c-text);
  --bs-btn-border-color: var(--c-line2);
  --bs-btn-hover-bg: var(--c-card2);
  --bs-btn-hover-border-color: var(--c-line2);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--c-card2);
  --bs-btn-active-border-color: var(--c-line2);
  --bs-btn-active-color: #fff;
}

.btn-grad {
  background: var(--grad-brand);
  color: #1f2937;
  border: none;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(255, 190, 77, 0.28);
  transition: 0.2s;
}

.btn-grad:hover,
.btn-grad:focus {
  color: #1f2937;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.btn-ghost {
  background: var(--c-card2);
  color: var(--c-text);
  border: 1px solid var(--c-line2);
  font-weight: 700;
  transition: 0.2s;
}

.btn-ghost:hover {
  color: #fff;
  border-color: var(--c-pri2);
}

.btn-block {
  display: block;
  width: 100%;
}

.btn {
  border-radius: 14px;
}

.btn {
  position: relative;
  overflow: hidden;
}

.card {
  background: var(--c-card);
  border-color: var(--c-line);
  border-radius: var(--r-lg);
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5 {
  color: var(--bs-heading-color);
}

.badge {
  font-weight: 700;
  border-radius: 999px;
  padding: 0.42em 0.75em;
}

.badge.b-ok {
  background: rgba(11, 243, 168, 0.16);
  color: var(--c-ok);
}

.badge.b-suc {
  background: rgba(11, 243, 168, 0.16);
  color: var(--c-ok);
}

.badge.b-danger {
  background: rgba(240, 82, 82, 0.16);
  color: var(--c-bad);
}

.badge.b-warn {
  background: rgba(255, 181, 71, 0.16);
  color: var(--c-warn);
}

.badge.b-info {
  background: rgba(56, 178, 182, 0.16);
  color: var(--c-info);
}

.badge.b-done {
  background: rgba(11, 243, 168, 0.16);
  color: var(--c-ok);
}

.badge.b-pend {
  background: rgba(255, 181, 71, 0.16);
  color: var(--c-warn);
}

.badge.b-appr {
  background: rgba(56, 178, 182, 0.16);
  color: var(--c-info);
}

.badge.b-canc {
  background: rgba(240, 82, 82, 0.16);
  color: var(--c-bad);
}

.badge.b-ret {
  background: rgba(124, 120, 113, 0.18);
  color: var(--c-mut);
}

.badge-grad {
  background: var(--grad-brand);
  color: #1f2937;
}

.form-control,
.form-select {
  background-color: var(--c-bg2);
  border-color: var(--c-line2);
  color: var(--c-text);
  border-radius: 12px;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.form-control::placeholder {
  color: var(--c-dim);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--c-bg2);
  border-color: var(--c-pri);
  color: var(--c-text);
  box-shadow: 0 0 0 0.2rem rgba(255, 190, 77, 0.18);
}

.form-control:disabled {
  background-color: var(--c-card2);
}

.form-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-mut);
  display: inline-block;
  margin-bottom: 0.4rem;
}

.form-check-input {
  background-color: var(--c-bg2);
  border-color: var(--c-line2);
}

.form-check-input:checked {
  background-color: var(--c-pri);
  border-color: var(--c-pri);
}

.input-group-text {
  background-color: var(--c-card2);
  border-color: var(--c-line2);
  color: var(--c-mut);
}

.form-text {
  color: var(--c-dim);
}

.dropdown-menu {
  --bs-dropdown-link-active-color: #1f2937;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 0.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.dropdown-item {
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.55rem 0.8rem;
}

.dropdown-item:active {
  color: #1f2937 !important;
}

.dropdown-divider {
  border-top: 1px solid var(--c-line);
}

.modal-content {
  border: 1px solid var(--c-line);
  border-radius: 22px;
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid var(--c-line);
  padding: 1rem 1.25rem;
}

.modal-title {
  color: var(--bs-heading-color);
}

.modal-backdrop.show {
  opacity: 0.75;
}

.btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.7;
}

.offcanvas {
  border-right: 1px solid var(--c-line);
}

.offcanvas-header .btn-close {
  margin: 0;
}

.accordion-button {
  font-weight: 700;
  color: var(--c-text);
}

.accordion-button:not(.collapsed) {
  color: var(--c-pri);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 190, 77, 0.12);
}

.accordion-item {
  border: 1px solid var(--c-line);
  border-radius: 16px !important;
  overflow: hidden;
}

.pagination {
  --bs-pagination-bg: var(--c-card);
  --bs-pagination-border-color: var(--c-line);
  --bs-pagination-color: var(--c-text);
  --bs-pagination-hover-bg: var(--c-card2);
  --bs-pagination-hover-border-color: var(--c-line2);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-active-bg: var(--c-pri);
  --bs-pagination-active-border-color: var(--c-pri);
  --bs-pagination-active-color: #1f2937;
  --bs-pagination-disabled-bg: var(--c-card);
  --bs-pagination-disabled-border-color: var(--c-line);
  --bs-pagination-disabled-color: var(--c-dim);
  --bs-pagination-focus-color: #fff;
}

.page-link {
  border-radius: 10px;
  margin: 0 3px;
}

.alert {
  border-radius: 16px;
  --bs-alert-bg: rgba(255, 190, 77, 0.1);
  --bs-alert-border-color: rgba(255, 190, 77, 0.35);
  --bs-alert-color: var(--c-warn);
}

.alert-warn {
  --bs-alert-bg: rgba(255, 181, 71, 0.1);
  --bs-alert-border-color: rgba(255, 181, 71, 0.35);
  --bs-alert-color: var(--c-warn);
}

.alert-success {
  --bs-alert-bg: rgba(11, 243, 168, 0.1);
  --bs-alert-border-color: rgba(11, 243, 168, 0.35);
  --bs-alert-color: var(--c-ok);
}

.alert-danger {
  --bs-alert-bg: rgba(240, 82, 82, 0.1);
  --bs-alert-border-color: rgba(240, 82, 82, 0.35);
  --bs-alert-color: var(--c-bad);
}

.list-group-item {
  background: transparent;
}

.table {
  --bs-table-color: var(--c-text);
  --bs-table-border-color: var(--c-line);
}

.table-responsive {
  border-radius: var(--r-md);
}

.progress {
  background-color: var(--c-card2);
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.img-round {
  border-radius: 16px;
}

.thumb {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
}

/* ---------- Topbar / navigation ---------- */
.topbar {
  --_topbar-bg: rgba(13, 14, 29, 0.82);
  background: var(--_topbar-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-line);
}

.topbar .navbar-brand {
  padding: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text);
  text-decoration: none;
}

.brand:hover {
  color: var(--c-text);
}

.brand-mark {
  height: 32px;
  width: auto;
}

.brand-name b {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.navbar-nav li {
  margin: 0 2px;
}

.nav-link.hx-nav {
  color: var(--c-mut);
  font-weight: 700;
  font-size: 14.5px;
  border-radius: 12px;
  padding: 0.55rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: 0.18s;
}

.nav-link.hx-nav:hover {
  color: #fff;
  background: var(--c-card2);
}

.nav-link.hx-nav.active {
  color: var(--c-pri);
  background: var(--c-soft);
}

.nav-link.hx-nav.active .ic {
  color: var(--c-pri);
}

.hamb {
  background: var(--c-card2);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  width: 42px;
  height: 42px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}

.hamb span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--c-text);
  border-radius: 99px;
}

.wallet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-card2);
  border: 1px solid var(--c-line2);
  color: var(--c-text);
  border-radius: 14px;
  padding: 0.45rem 0.9rem;
  font-weight: 800;
  transition: 0.18s;
}

.wallet:hover {
  border-color: var(--c-pri2);
  color: #fff;
}

.wallet .ic {
  color: var(--c-pri);
}

.wallet .dropdown-toggle::after {
  display: none;
}

.btn-login,
.btn-sign {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  border-radius: 13px;
  padding: 0.5rem 1.1rem;
  text-decoration: none;
  gap: 8px;
  transition: 0.18s;
}

.btn-login {
  color: var(--c-text);
  background: var(--c-card2);
  border: 1px solid var(--c-line2);
}

.btn-login:hover {
  color: #fff;
  border-color: var(--c-pri2);
}

.btn-sign {
  color: #1f2937;
  background: var(--grad-brand);
  border: 1px solid transparent;
}

.btn-sign:hover {
  filter: brightness(1.08);
  color: #1f2937;
}

.m-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.6rem 0.8rem 0.8rem;
}

.m-user img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.m-name {
  font-weight: 800;
  font-size: 14px;
}

.m-mail {
  color: var(--c-dim);
  font-size: 12px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-ic {
  width: 20px;
  text-align: center;
  color: var(--c-pri);
}

.m-tag {
  margin-left: auto;
  background: var(--c-pri);
  color: #1f2937;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 1px 7px;
}

/* Drawer links */
.drawer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.drawer-nav a,
.drawer-nav button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: none;
  background: transparent;
  color: var(--c-text);
  font-weight: 700;
  font-size: 15px;
  border-radius: 12px;
  text-decoration: none;
  transition: 0.16s;
}

.drawer-nav a:hover,
.drawer-nav button:hover {
  background: var(--c-card2);
  color: #fff;
}

.drawer-nav a.active {
  background: var(--c-soft);
  color: var(--c-pri);
}

.drawer-nav .d-ic {
  width: 20px;
  text-align: center;
  color: var(--c-pri);
}

.drawer-nav form {
  margin: 0;
}

.drawer-nav button.danger {
  color: var(--c-bad);
}

.drawer-nav button.danger .d-ic {
  color: var(--c-bad);
}

.d-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 14px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 10px;
}

.d-user img {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
}

.d-user b {
  font-weight: 800;
  font-size: 15px;
  display: block;
}

.d-user small {
  color: var(--c-dim);
}

/* Mobile bottom navigation */
.mobnav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1020;
  background: rgba(23, 20, 18, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobnav .mn-row {
  display: flex;
}

.mobnav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 8px;
  color: var(--c-dim);
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 700;
}

.mobnav a .ic {
  font-size: 17px;
}

.mobnav a.active,
.mobnav a.active .ic {
  color: var(--c-pri);
}

/* ---------- Hero (guest home) ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 44px;
  align-items: center;
  padding: 26px 0 10px;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -1;
  pointer-events: none;
}

.h-g1 {
  width: 340px;
  height: 340px;
  background: rgba(255, 190, 77, 0.22);
  top: -80px;
  left: -120px;
}

.h-g2 {
  width: 300px;
  height: 300px;
  background: rgba(255, 190, 77, 0.16);
  right: -100px;
  bottom: -80px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-card2);
  border: 1px solid var(--c-line2);
  color: var(--c-text);
  font-weight: 700;
  font-size: 13px;
  border-radius: 999px;
  padding: 6px 14px;
}

.hero-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-ok);
  animation: hexPulse 2s infinite;
}

.hero-title {
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 18px 0 14px;
  color: var(--bs-heading-color);
}

.hero-sub {
  color: var(--c-mut);
  font-size: 16px;
  max-width: 540px;
  line-height: 1.65;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.hero-ctas .btn {
  padding: 0.7rem 1.6rem;
  font-size: 15px;
}

.hero-trust {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 30px;
  color: var(--c-mut);
  font-size: 13.5px;
}

.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-trust .dot {
  color: var(--c-ok);
}

.hero-trust b {
  color: var(--c-text);
}

.hero-card {
  background: linear-gradient(150deg, var(--c-card), var(--c-card2));
  border: 1px solid var(--c-line2);
  border-radius: 26px;
  padding: 26px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(260px 160px at 90% 0%, rgba(255, 167, 38, 0.18), transparent 65%);
  pointer-events: none;
}

.hc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hc-kicker {
  color: var(--c-mut);
  font-size: 12.5px;
  font-weight: 700;
}

.hc-bal {
  margin-top: 16px;
}

.hc-bal .lbl {
  color: var(--c-dim);
  font-size: 12.5px;
}

.hc-bal .val {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--bs-heading-color);
}

.hc-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(13, 14, 29, 0.6);
  margin-top: 16px;
  overflow: hidden;
}

.hc-bar i {
  display: block;
  height: 100%;
  width: 72%;
  border-radius: 999px;
  background: var(--grad-brand);
}

.hc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.hc-mini .k {
  color: var(--c-dim);
  font-size: 12px;
}

.hc-mini .v {
  color: var(--bs-heading-color);
  font-size: 19px;
  font-weight: 900;
  margin-top: 2px;
}

.hc-mini .v .arrow {
  color: var(--c-ok);
  font-size: 14px;
}

/* ---------- Stats strip ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 40px;
}

.stat {
  background: var(--c-bg2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 18px;
  transition: 0.2s;
}

.stat:hover {
  border-color: var(--c-line2);
  transform: translateY(-2px);
}

.stat .c {
  color: var(--c-dim);
  font-size: 12.5px;
  font-weight: 700;
}

.stat .v {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--bs-heading-color);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.stat .d {
  color: var(--c-ok);
  font-size: 12.5px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Sections ---------- */
.sec {
  margin-top: 44px;
}

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

.sec-head h2 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bs-heading-color);
}

.sec-head h2 .ic {
  color: var(--c-pri);
}

.sec-link {
  color: var(--c-pri);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
}

.sec-link:hover {
  color: #ffcf87;
}

/* ---------- Offer walls ---------- */
.ow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.ow-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--c-text);
  text-decoration: none;
  transition: 0.2s;
}

.ow-card:hover {
  color: var(--c-text);
  border-color: rgba(255, 190, 77, 0.5);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.ow-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ow-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  overflow: hidden;
  background: var(--c-card2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ow-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ow-kicker {
  color: var(--c-dim);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ow-title {
  font-weight: 800;
  font-size: 15px;
  color: var(--bs-heading-color);
  margin-top: 2px;
}

.ow-mid {
  color: var(--c-mut);
  font-size: 13.5px;
  line-height: 1.55;
  flex: 1;
}

.ow-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--c-line);
  padding-top: 12px;
}

.stars {
  color: var(--c-warn);
  font-size: 12.5px;
  display: inline-flex;
  gap: 2px;
}

/* ---------- Tags ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-soft);
  color: var(--c-pri);
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 12px;
  letter-spacing: 0.03em;
}

.tag-game {
  background: rgba(56, 178, 182, 0.14);
  color: var(--c-info);
}

.tag-app {
  background: rgba(11, 243, 168, 0.14);
  color: var(--c-ok);
}

.tag-survey {
  background: rgba(255, 167, 38, 0.14);
  color: var(--c-warn);
}

.tag-plain {
  background: var(--c-card2);
  color: var(--c-mut);
}

/* ---------- Adget API offer cards ---------- */
.api-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.offer-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--c-text);
  text-decoration: none;
  display: block;
  transition: 0.2s;
}

.offer-card:hover {
  color: var(--c-text);
  border-color: rgba(255, 190, 77, 0.5);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.oc-img {
  position: relative;
  height: 132px;
  overflow: hidden;
  background: var(--c-card2);
}

.oc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.offer-card:hover .oc-img img {
  transform: scale(1.05);
}

.oc-cat {
  position: absolute;
  left: 10px;
  top: 10px;
}

.oc-name {
  font-weight: 800;
  font-size: 14.5px;
  padding: 12px 14px 0;
  color: var(--bs-heading-color);
}

.oc-desc {
  color: var(--c-mut);
  font-size: 12.5px;
  padding: 5px 14px 0;
  flex: 1;
  min-height: 34px;
}

.oc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
}

.oc-price {
  font-weight: 900;
  font-size: 15px;
  color: var(--c-ok);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.oc-foot .ic {
  background: var(--c-soft);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-pri);
  font-size: 11px;
}

/* ---------- Ticker ---------- */
.ticker {
  position: relative;
  border: 1px solid var(--c-line);
  background: var(--c-card);
  border-radius: 16px;
  overflow: hidden;
}

.ticker-track {
  display: flex;
  overflow: hidden;
}

.tick-half {
  display: flex;
  animation: hexMarquee 30s linear infinite;
  flex: 1 0 auto;
  min-width: 50%;
}

.ticker:hover .tick-half {
  animation-play-state: paused;
}

.tick-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--c-mut);
}

.tick-item b {
  color: var(--c-ok);
}

.ti-ic {
  color: var(--c-ok);
  font-size: 13px;
}

/* Clickable payout ticker member pills */
.tick-item {
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: color .2s ease;
}

.tick-item:hover {
  color: var(--c-pri);
}

.ti-ava {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 190, 77, .45);
}

.ti-ava-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background: var(--surface-1, #1f2937);
  color: var(--c-dim);
}

/* ---------- GaintPlay-style payout band ---------- */
.payout-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(31, 41, 55, 0.5);
}

.pb-track {
  display: flex;
  align-items: center;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pb-track::-webkit-scrollbar {
  display: none;
}

.pb-badge {
  display: inline-flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
  min-width: 160px;
  max-width: 100%;
  margin: 0 6px;
  padding: 3px 5px;
  border: 2px solid rgba(255, 190, 77, 0.3) !important;
  border-radius: 8px;
  background: none !important;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .2s ease;
}

.pb-badge:hover,
.pb-badge:focus-visible {
  border-color: var(--c-pri) !important;
}

.pb-badge .ti-ic {
  display: grid;
  place-items: center;
  width: 25px;
  min-width: 25px;
  color: var(--c-pri);
  font-size: 15px;
}

.pb-badge .ti-ava {
  width: 24px;
  height: 24px;
  min-width: 24px;
}

.pb-badge .ti-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pb-badge .ti-method {
  display: block;
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-pri);
}

.pb-badge .ti-name {
  display: block;
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-txt);
  margin-top: -2px;
}

.pb-badge .ti-coins {
  display: grid;
  place-items: center;
  min-width: -moz-max-content;
  min-width: max-content;
  margin: 1px 0;
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--c-pri);
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  transition: background .2s ease;
}

.pb-badge:hover .ti-coins {
  background: var(--c-pri-dk, #c9962e);
}

/* Payout band tooltip */
.pb-tip {
  position: fixed;
  z-index: 1500;
  display: none;
  width: 216px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #1c1c1c;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  font-size: 12px;
}

.pb-tip.show {
  display: block;
}

.pb-tip .tip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pb-tip .tip-row + .tip-row {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.pb-tip .tip-k {
  flex-shrink: 0;
  font-weight: 700;
  color: #6b7280;
}

.pb-tip .tip-v {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  color: var(--c-txt);
}

.pb-tip .tip-amount {
  color: var(--c-pri);
}

/* Member activity modal */
.member-modal .modal-body {
  padding: 24px;
}

.mb-loader {
  text-align: center;
  padding: 24px 0;
}

.member-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.member-ava {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 190, 77, .5);
}

.mb-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--c-txt);
  letter-spacing: -0.01em;
}

.mb-joined {
  font-size: 12px;
  color: var(--c-dim);
}

.member-level {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.mb-chip {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--surface-1, #1f2937);
  color: var(--c-pri);
  white-space: nowrap;
}

.mb-bar {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.mb-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, rgb(255, 190, 77), rgba(179, 74, 0, 0));
  transition: width .5s ease;
}

.mb-progress {
  font-size: 11px;
  color: var(--c-dim);
  white-space: nowrap;
}

.member-private {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: var(--c-warn);
  font-size: 13px;
}

.member-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.member-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .05);
}

.member-stat .ic {
  color: var(--c-pri);
  font-size: 14px;
}

.member-stat b {
  font-size: 18px;
  font-weight: 800;
  color: var(--c-txt);
}

.member-stat span {
  font-size: 11px;
  color: var(--c-dim);
}

.mb-sec {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-dim);
  margin-bottom: 10px;
}

.member-table .table-dark {
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(255, 255, 255, .06);
}

.member-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-dim);
}

.member-table td {
  font-size: 13px;
  color: var(--c-txt);
}

.member-empty {
  padding: 18px;
  text-align: center;
  color: var(--c-dim);
  font-size: 13px;
  border: 1px dashed rgba(255, 255, 255, .1);
  border-radius: 12px;
}

/* Welcome bonus modal */
.welcome-modal {
  text-align: center;
  padding: 12px;
}

.welcome-modal .btn-close {
  position: absolute;
  top: 16px;
  right: 16px;
}

.welcome-gift {
  width: 84px;
  height: 84px;
  margin: 8px auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 34px;
  color: var(--c-pri);
  background: radial-gradient(circle at 30% 30%, rgba(255, 190, 77, .25), rgba(255, 190, 77, .15));
  border: 1px solid rgba(255, 190, 77, .35);
  animation: hxGiftPop .6s cubic-bezier(.16, 1, .3, 1);
}

@keyframes hxGiftPop {
  0% {
    transform: scale(.6);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.welcome-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.welcome-sub {
  color: var(--c-dim);
  margin-bottom: 12px;
}

.welcome-coins {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 26px;
  font-weight: 800;
  color: var(--c-pri);
  margin-bottom: 18px;
}

.welcome-coins img {
  width: 26px;
  height: 26px;
}

.welcome-coins span {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-dim);
}

/* ---------- Personal earn dashboard hero ---------- */
.earn-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 28px;
  border: 1px solid rgba(255, 190, 77, 0.28);
  background: linear-gradient(120deg, rgba(255, 190, 77, 0.16), rgba(255, 190, 77, 0.12) 50%, rgba(255, 167, 38, 0.14));
}

.earn-hero::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 77, 0.35), transparent 60%);
}

.eh-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
}

.eh-kicker {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-pri);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}

.eh-title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.eh-sub {
  color: var(--c-dim);
  margin: 0;
}

.eh-wallet {
  min-width: 240px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(11, 15, 21, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.ew-bal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 26px;
  font-weight: 900;
  color: var(--c-txt);
  letter-spacing: -0.02em;
}

.ew-bal img {
  width: 26px;
  height: 26px;
}

.ew-bal .eq {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-dim);
}

.eh-lvl {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--c-dim);
}

.eh-lvl .lv-bar {
  flex: 1;
}

.eh-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  position: relative;
}

.eh-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
  position: relative;
}

.e-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(11, 15, 21, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.e-stat .tile {
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border-radius: 12px;
}

.e-stat .v {
  font-size: 20px;
  font-weight: 800;
  color: var(--c-txt);
  line-height: 1.1;
  display: inline-flex;
}

.e-stat .k {
  font-size: 12px;
  color: var(--c-dim);
}

@media (max-width: 640px) {
  .eh-stats {
    grid-template-columns: 1fr 1fr;
  }

  .eh-wallet {
    width: 100%;
  }
}

/* ---------- Daily streak widget (premium) ---------- */
@keyframes hxFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.streak-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line2);
  background: linear-gradient(135deg, var(--c-card2) 0%, var(--c-card) 55%, rgba(255, 190, 77, .06) 100%);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}

.streak-glow {
  position: absolute;
  inset: -40% auto auto -20%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(255, 190, 77, .22), transparent 65%);
  filter: blur(30px);
  pointer-events: none;
}

.streak-ember {
  position: absolute;
  right: 22px;
  top: 20px;
  font-size: 26px;
  color: rgba(255, 190, 77, .55);
  animation: hxFloat 6s ease-in-out infinite;
  pointer-events: none;
}

.streak-main {
  position: relative;
  z-index: 1;
}

.streak-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.streak-trigram {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 8px 22px rgba(255, 190, 77, .45);
}

.streak-title {
  font-weight: 800;
  letter-spacing: .4px;
  font-size: 1.25rem;
  color: var(--c-text);
}

.streak-sub {
  font-size: .82rem;
  color: var(--c-mut);
}

.streak-claimed-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--c-ok);
  background: rgba(11, 243, 168, .14);
  border: 1px solid rgba(11, 243, 168, .35);
}

.streak-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 6px 16px rgba(255, 190, 77, .35);
}

/* 7-day meter */
.streak-meter {
  display: flex;
  align-items: flex-end;
  gap: 0;
  padding: 6px 0 4px;
}

.streak-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 42px;
  transition: transform .25s ease;
}

.streak-day .streak-day-ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--c-dim);
  background: var(--c-card);
  border: 1px solid var(--c-line);
  transition: all .25s ease;
}

.streak-day.is-done .streak-day-ic {
  color: #fff;
  background: var(--grad-brand);
  border-color: transparent;
}

.streak-day.is-today .streak-day-ic {
  color: #fff;
  background: var(--c-pri);
  border-color: transparent;
  box-shadow: 0 0 0 4px var(--c-soft), 0 0 18px rgba(255, 190, 77, .5);
  animation: streakPulse 2s ease-in-out infinite;
}

.streak-day-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--c-mut);
}

.streak-day.is-today .streak-day-label {
  color: var(--c-pri);
  font-weight: 800;
}

.streak-day-hl {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--c-line);
}

.streak-day.is-done .streak-day-hl {
  background: var(--grad-brand);
}

.streak-day.is-today .streak-day-hl {
  background: var(--c-pri);
}

.streak-day:hover {
  transform: translateY(-3px);
}

.streak-link {
  flex: 1;
  height: 3px;
  margin-bottom: 28px;
  background: var(--c-line);
  border-radius: 2px;
}

.streak-link.on {
  background: var(--grad-brand);
}

/* stats */
.streak-stats {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.streak-stat {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: 12px 16px;
}

.streak-stat.is-accent {
  border-color: rgba(255, 190, 77, .35);
  background: linear-gradient(135deg, rgba(255, 190, 77, .10), transparent);
}

.streak-stat-v {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.1;
}

.streak-stat-k {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--c-mut);
  margin-top: 2px;
}

@keyframes streakPulse {

  0%,
  100% {
    box-shadow: 0 0 0 4px var(--c-soft), 0 0 16px rgba(255, 190, 77, .4);
  }

  50% {
    box-shadow: 0 0 0 8px var(--c-soft), 0 0 24px rgba(255, 190, 77, .6);
  }
}

@media (max-width: 575px) {
  .streak-meter {
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .streak-head {
    margin-bottom: 16px;
  }

  .streak-claimed-tag,
  .streak-cta {
    margin-left: 0;
  }
}


/* ---------- Steps (how it works) ---------- */
.steps3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.step3 {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 24px;
}

.step3 .n {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--c-pri);
  background: var(--c-soft);
  border-radius: 999px;
  padding: 4px 12px;
}

.step3 h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--bs-heading-color);
  margin: 14px 0 8px;
}

.step3 p {
  color: var(--c-mut);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ---------- Accordion (plain details) ---------- */
.acc-item {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 10px;
}

.acc-item summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--c-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  user-select: none;
}

.acc-item summary::-webkit-details-marker {
  display: none;
}

.acc-item summary .chev {
  color: var(--c-pri);
  transition: 0.25s;
}

.acc-item[open] summary .chev {
  transform: rotate(180deg);
}

.acc-body {
  color: var(--c-mut);
  font-size: 13.5px;
  line-height: 1.65;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
}

/* ---------- Profile premium ---------- */
.prof-hero {
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: var(--c-card);
  position: relative;
}

.prof-cover {
  height: 138px;
  position: relative;
  background: linear-gradient(120deg, rgba(255, 190, 77, 0.55), rgba(255, 190, 77, 0.55) 45%, rgba(255, 167, 38, 0.55)),
    radial-gradient(560px 220px at 82% -40%, rgba(255, 255, 255, 0.22), transparent 62%);
}

.prof-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.35;
}

.prof-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  padding: 0 24px 22px;
}

.prof-row .prof-ava {
  margin-top: -48px;
  width: 104px;
  height: 104px;
  border-radius: 30px;
  border: 4px solid var(--c-card);
  box-shadow: var(--shadow);
}

.prof-ava {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 28px;
  overflow: hidden;
  border: 2px solid var(--c-pri);
  background: var(--c-bg2);
  flex-shrink: 0;
}

.prof-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prof-cam {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #1f2937;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 3px solid var(--c-card);
  font-size: 13px;
}

.prof-cam:hover {
  filter: brightness(1.08);
}

.prof-info {
  flex: 1;
  min-width: 200px;
}

.prof-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.vf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--c-ok);
}

.vf-badge.no {
  background: var(--c-dim);
}

.prof-meta {
  color: var(--c-mut);
  font-size: 13.5px;
  margin-top: 5px;
}

.member {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--c-dim);
}

.member b {
  color: var(--c-text);
}

.prof-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.prof-privacy {
  flex: 0 0 100%;
  margin-top: 4px;
}

.pp-row {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.pp-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-txt);
}

.pp-title .ic {
  color: var(--c-warn);
}

.pp-sub {
  font-size: 12px;
  color: var(--c-dim);
}

.form-switch .form-check-input {
  width: 2.6em;
  height: 1.4em;
  cursor: pointer;
}

.form-switch .form-check-input:checked {
  background-color: var(--c-pri);
  border-color: var(--c-pri);
}

.bal-hero {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 26px;
  border-radius: 22px;
  border: 1px solid rgba(255, 190, 77, 0.28);
  background: linear-gradient(120deg, rgba(255, 190, 77, 0.14), rgba(255, 190, 77, 0.1) 50%, rgba(255, 167, 38, 0.12));
  position: relative;
  overflow: hidden;
}

.bal-hero::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 167, 38, 0.18), transparent 70%);
}

.bal-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: var(--c-warn);
  text-transform: uppercase;
}

.bal-val {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.bal-val img {
  width: 32px;
  height: 32px;
}

.bal-val b {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.bal-val .eq {
  color: var(--c-mut);
  font-size: 14.5px;
  font-weight: 600;
}

.bal-bar {
  margin-top: 16px;
  max-width: 420px;
}

.lv-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--c-mut);
}

.lv-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--c-soft);
  color: var(--c-pri);
  font-size: 11px;
}

.lv-bar {
  height: 9px;
  border-radius: 999px;
  background: rgba(13, 14, 29, 0.5);
  overflow: hidden;
}

.lv-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  width: 0;
  background: var(--grad-brand);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bal-right {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  min-width: 220px;
}

.p-sec-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  margin: 28px 0 14px;
  color: var(--bs-heading-color);
}

.p-sec-title .ic {
  color: var(--c-pri);
}

.p-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.p-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--c-bg2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 16px;
}

.p-stat .v {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--bs-heading-color);
}

.p-stat .k {
  color: var(--c-dim);
  font-size: 12px;
  margin-top: 3px;
}

.q-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.q-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--c-bg2);
  border: 1px solid var(--c-line);
  text-decoration: none;
  color: var(--c-text);
  transition: 0.18s;
}

.q-link:hover {
  color: var(--c-text);
  border-color: rgba(255, 190, 77, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.q-link .q-ic {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.q-link .q-t {
  font-weight: 800;
  font-size: 14.5px;
}

.q-link .q-s {
  color: var(--c-dim);
  font-size: 12.5px;
  margin-top: 2px;
}

.q-link .arr {
  margin-left: auto;
  color: var(--c-dim);
}

.ref-card {
  display: grid;
  gap: 22px;
  padding: 24px;
}

.ref-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-bg2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 10px 12px 10px 16px;
  flex-wrap: wrap;
}

.ref-copy .link {
  flex: 1 1 240px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ref-meta>* {
  flex: 1;
  min-width: 160px;
}

/* ---------- Referrals / invite ---------- */
.p-ref {
  background: var(--c-bg2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 12px 18px;
}

.p-ref .lbl {
  display: block;
  color: var(--c-dim);
  font-size: 12px;
  margin-bottom: 4px;
}

.p-ref .val {
  font-size: 17px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bs-heading-color);
}

.p-ref .val .coin-img {
  width: 16px;
  height: 16px;
}

.ref_1 {
  margin-bottom: 8px;
}

.ref_span {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-bg2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 12px 16px;
  overflow: hidden;
}

.ref_span input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--c-text);
  font-weight: 700;
  font-size: 14px;
  outline: none;
  min-width: 0;
}

.hint {
  color: var(--c-dim);
  font-size: 12.5px;
  margin-top: 10px;
}

.inv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
}

.inv-row:last-child {
  border-bottom: none;
}

.inv-link {
  font-weight: 700;
  color: var(--c-pri);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.rstep {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 20px;
  text-align: center;
}

.rstep .n {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--c-pri);
  background: var(--c-soft);
  border-radius: 999px;
  padding: 4px 12px;
}

.rstep h4 {
  font-size: 16px;
  font-weight: 800;
  margin: 12px 0 6px;
  color: var(--bs-heading-color);
}

.rstep p {
  color: var(--c-mut);
  font-size: 13px;
  line-height: 1.55;
}

/* ---------- Missions ---------- */
.mi-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* mission group sections */
.mi-sec {
  margin-top: 26px;
}

.mi-sec-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.mi-sec-title .tile {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 10px;
}

.mission {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 16px 18px;
}

.mission .m-ic {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--c-bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.mission .m-ic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mission .m-name {
  font-weight: 800;
  font-size: 14.5px;
  color: var(--bs-heading-color);
}

.mission .m-sub {
  color: var(--c-dim);
  font-size: 12.5px;
  margin-top: 2px;
}

.mission .m-sub b {
  color: var(--c-pri);
}

.mission .m-ctl {
  margin-left: auto;
  flex-shrink: 0;
}

.mission .m-progress {
  background: var(--c-bg2);
}

.bar {
  height: 100%;
  border-radius: 999px;
  background: var(--grad-brand);
}

.btn_2 {
  background: var(--c-soft);
  border: 1px solid rgba(255, 190, 77, 0.4);
  color: var(--c-pri);
  font-weight: 800;
  font-size: 13px;
  font-family: inherit;
  border-radius: 12px;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  transition: 0.18s;
}

.btn_2:hover {
  background: var(--c-pri);
  color: #1f2937;
  filter: brightness(1.08);
}

.back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--c-card2);
  border: 1px solid var(--c-line2);
  color: var(--c-text);
  text-decoration: none;
  transition: 0.18s;
}

.back:hover {
  color: var(--c-pri);
  border-color: rgba(255, 190, 77, 0.5);
}

.page-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.page-head h1 {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--bs-heading-color);
  display: flex;
  align-items: center;
}

/* ---------- Transactions ---------- */
.hx-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-line);
}

.hx-row:last-child {
  border-bottom: none;
}

.hx-row .t-ic {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.hx-row .t-main {
  flex: 1;
  min-width: 0;
}

.hx-row .t-title {
  font-weight: 800;
  font-size: 14px;
  color: var(--bs-heading-color);
}

.hx-row .t-sub {
  color: var(--c-dim);
  font-size: 12px;
  margin-top: 2px;
}

.hx-row .t-val {
  font-weight: 800;
  font-size: 15px;
}

.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.tabs button {
  background: var(--c-card2);
  border: 1px solid var(--c-line);
  color: var(--c-mut);
  font-weight: 700;
  font-size: 14px;
  border-radius: 13px;
  padding: 0.55rem 1.1rem;
  white-space: nowrap;
  transition: 0.18s;
}

.tabs button:hover {
  color: #fff;
}

.tabs button.active {
  background: var(--c-soft);
  border-color: rgba(255, 190, 77, 0.4);
  color: var(--c-pri);
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* ---------- Leaderboard ---------- */
.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: end;
  margin-bottom: 24px;
}

.podium .p-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 24px;
  text-align: center;
  position: relative;
}

.podium .p-first {
  border-color: rgba(255, 167, 38, 0.4);
  background: linear-gradient(180deg, rgba(255, 167, 38, 0.1), var(--c-card) 45%);
  padding-bottom: 34px;
}

.p-first .p-ava {
  width: 78px;
  height: 78px;
  border: 3px solid var(--c-brand2);
}

.p-ava {
  width: 66px;
  height: 66px;
  border-radius: 18px;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid var(--c-line2);
  background: var(--c-card2);
}

.p-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-name {
  font-weight: 800;
  margin-top: 12px;
  color: var(--bs-heading-color);
}

.p-pts {
  color: var(--c-pri);
  font-weight: 900;
  font-size: 18px;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.p-rank {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 22px;
  font-weight: 900;
  opacity: 0.18;
}

.l-board {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.l-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--c-line);
}

.l-row:last-child {
  border-bottom: none;
}

.l-rank {
  width: 28px;
  text-align: center;
  font-weight: 900;
  color: var(--c-dim);
  flex-shrink: 0;
}

.l-row .avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.l-name {
  flex: 1;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l-pts {
  font-weight: 900;
  color: var(--c-pri);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Missions ---------- */
.m-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.m-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-card.done {
  border-color: rgba(11, 243, 168, 0.35);
}

.m-ic2 {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}

.m-title {
  font-weight: 800;
  font-size: 15px;
  color: var(--bs-heading-color);
}

.m-desc {
  color: var(--c-mut);
  font-size: 13px;
  line-height: 1.55;
  flex: 1;
}

.m-pts {
  font-weight: 900;
  color: var(--c-ok);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Cashout / rewards ---------- */
.social-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 18px;
  text-decoration: none;
  color: var(--c-text);
  transition: 0.2s;
}

.social-btn:hover {
  color: var(--c-text);
  border-color: rgba(255, 190, 77, 0.5);
  transform: translateY(-2px);
}

.social-btn .s-ic {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}

.social-btn>div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.s-btn-t {
  font-weight: 800;
  font-size: 14.5px;
}

.s-btn-s {
  color: var(--c-dim);
  font-size: 12.5px;
  margin-top: 2px;
}

.rew-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: var(--c-text);
  transition: 0.2s;
}

.rew-card:hover {
  color: var(--c-text);
  border-color: rgba(255, 190, 77, 0.5);
  transform: translateY(-3px);
}

.rew-card .rc-ic {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.rew-card .rc-title {
  font-weight: 800;
  font-size: 15px;
  color: var(--bs-heading-color);
}

.rew-card .rc-desc {
  color: var(--c-mut);
  font-size: 13px;
  flex: 1;
}

.rew-card .rc-pts {
  font-weight: 900;
  font-size: 17px;
  color: var(--c-pri);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Cashout reward grid ---------- */
.rew-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.rew-grid .rew-card {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.rew-card .rc-price {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: var(--grad-brand);
  color: #1f2937;
  font-size: 13px;
  font-weight: 900;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.rew-card .rc-img {
  height: 168px;
  overflow: hidden;
  background: var(--c-bg2);
}

.rew-card .rc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rew-card .rc-body {
  padding: 14px 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rew-card .rc-pts {
  font-weight: 800;
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.rew-card .rc-pts .coin-img {
  width: 13px;
  height: 13px;
}

.u-mb {
  margin-bottom: 16px;
}

.f-item {
  background: var(--c-bg2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 12px 16px;
}

.f-item .lbl {
  color: var(--c-dim);
  font-size: 12px;
  font-weight: 700;
}

.f-item .val {
  color: var(--bs-heading-color);
  font-weight: 800;
  font-size: 15px;
  margin-top: 2px;
}

/* ---------- Auth pages ---------- */
.auth-wrap {
  min-height: calc(100vh - 62px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}

.auth-card {
  width: 100%;
  max-width: 430px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 26px;
  padding: 34px;
  box-shadow: var(--shadow);
}

.auth-head {
  text-align: center;
  margin-bottom: 24px;
}

.auth-head img {
  max-width: 150px;
}

.auth-title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--bs-heading-color);
}

.auth-sub {
  color: var(--c-mut);
  font-size: 13.5px;
  text-align: center;
  margin: 6px 0 22px;
}

.auth-alt {
  text-align: center;
  color: var(--c-dim);
  font-size: 13.5px;
  margin-top: 18px;
}

.auth-alt a {
  color: var(--c-pri);
  font-weight: 800;
  text-decoration: none;
}

.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-dim);
  font-size: 12px;
  margin: 18px 0;
}

.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-line);
}

.g-ic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.i-wrap {
  position: relative;
}

.chk {
  font-size: 13.5px;
  color: var(--c-mut);
}

.chk a {
  color: var(--c-pri);
  text-decoration: none;
}

.f-link {
  color: var(--c-pri);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.f-link:hover {
  color: #ffcf87;
}

/* ---------- API offer modal bits ---------- */
.modal-frame {
  width: 100%;
  height: 62vh;
  border: none;
  display: block;
}

.api-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}

.api-icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-bg2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.api-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.api-coins {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 900;
  color: var(--bs-heading-color);
}

.api-block {
  padding: 14px 20px;
  border-top: 1px solid var(--c-line);
}

.api-block h5 {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-pri);
  margin-bottom: 8px;
}

.api-block p {
  color: var(--c-mut);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
}

.a-step {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--c-mut);
  font-size: 13.5px;
  line-height: 1.6;
}

.a-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-pri);
  flex-shrink: 0;
  transform: translateY(-2px);
}

.app-button {
  display: block;
  width: calc(100% - 40px);
  margin: 4px 20px 20px;
  text-align: center;
  background: var(--grad-brand);
  color: #1f2937;
  font-weight: 900;
  border-radius: 14px;
  padding: 0.8rem;
  text-decoration: none;
  letter-spacing: 0.03em;
}

.app-button:hover {
  color: #1f2937;
  filter: brightness(1.08);
}

.hx-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-card);
  z-index: 5;
}

/* ---------- Toasts (own, avoid Bootstrap .toast) ---------- */
.hex-toasts {
  position: fixed;
  right: 16px;
  bottom: 84px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(92vw, 360px);
}

.hex-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-card);
  border: 1px solid var(--c-line2);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  color: var(--c-text);
  font-size: 13.5px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(14px);
  transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hex-toast.show {
  opacity: 1;
  transform: none;
}

.hex-toast .t-ic {
  font-size: 16px;
}

.hex-toast.success {
  border-color: rgba(11, 243, 168, 0.5);
}

.hex-toast.success .t-ic {
  color: var(--c-ok);
}

.hex-toast.error {
  border-color: rgba(240, 82, 82, 0.5);
}

.hex-toast.error .t-ic {
  color: var(--c-bad);
}

/* ---------- Cookie ---------- */
.cookie {
  position: fixed;
  left: 16px;
  bottom: 84px;
  z-index: 1500;
  max-width: 340px;
  background: var(--c-card);
  border: 1px solid var(--c-line2);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(.97);
  pointer-events: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1), visibility .45s;
}

.cookie.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.cookie h5 {
  font-size: 14px;
  font-weight: 800;
  color: var(--bs-heading-color);
}

.cookie p {
  color: var(--c-mut);
  font-size: 12.5px;
  line-height: 1.6;
  margin: 8px 0;
}

.cookie a {
  color: var(--c-pri);
}

.cookie .ck-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- Go top ---------- */
.go-top,
.btop {
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: 1400;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--grad-brand);
  color: #1f2937;
  font-size: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(255, 190, 77, 0.3);
}

.go-top.show,
.btop.show {
  display: inline-flex;
  animation: hexPop 0.3s ease;
}

/* ---------- Skeleton ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--c-card2);
  border-radius: 12px;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  animation: hexShimmer 1.5s infinite;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}

.sk-card {
  height: 210px;
}

.sk-img {
  height: 132px;
}

.sk-line {
  height: 11px;
  margin-top: 10px;
}

.sk-circle {
  border-radius: 50%;
}

/* ---------- Motion ---------- */
@keyframes hexShimmer {
  100% {
    transform: translateX(100%);
  }
}

@keyframes hexMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes hexPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

@keyframes hexRipple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes hexPop {
  0% {
    transform: scale(0.7);
  }

  100% {
    transform: scale(1);
  }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: hexRipple 0.7s ease-out forwards;
  pointer-events: none;
}

/* ---------- Misc pages ---------- */
.empty {
  text-align: center;
  color: var(--c-dim);
  padding: 40px 20px;
  font-size: 14px;
}

.content-main {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 28px;
  color: var(--c-mut);
  line-height: 1.75;
  font-size: 14.5px;
}

.content-main img {
  border-radius: 14px;
}

.content-main a {
  color: var(--c-pri);
}

.content-main h1,
.content-main h2,
.content-main h3,
.content-main h4 {
  color: var(--bs-heading-color);
  margin: 1.2em 0 0.5em;
}

.content-main h4 {
  font-size: 17px;
}

.safe-html p,
.safe-html ul,
.safe-html ol {
  margin-bottom: 0.9rem;
}

.hx-row-ic {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  padding: 0;
}

.table> :not(caption)>*>* {
  padding: 0.9rem 1rem;
}

.table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-dim);
  border-bottom-width: 1px;
}

.sitemap-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
  font-weight: 600;
  font-size: 14px;
}

.sitemap-links a:hover {
  color: var(--c-pri);
}

.err-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
  text-align: center;
  background: var(--c-bg);
}

.err-box {
  position: relative;
  max-width: 460px;
  width: 100%;
}

.err-media {
  margin-bottom: 8px;
}

.err-media img {
  width: 200px;
  max-width: 60vw;
  filter: drop-shadow(0 18px 40px rgba(255, 190, 77, 0.25));
}

.err-code {
  font-size: 72px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.err-box h2 {
  color: var(--bs-heading-color);
  font-size: 22px;
  font-weight: 900;
  margin: 18px 0 6px;
}

.err-box p {
  color: var(--c-mut);
  font-size: 14px;
  margin-bottom: 24px;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--c-line);
  background: var(--c-bg2);
  margin-top: 56px;
  padding: 44px 0 0px;
}

.footer h4 {
  color: var(--bs-heading-color);
  font-size: 14.5px;
  font-weight: 800;
  margin-bottom: 14px;
}

.f-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text);
  text-decoration: none;
  font-weight: 900;
  font-size: 17px;
}

.f-brand img {
  height: 30px;
}

.f-l {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-mut);
  font-size: 13.5px;
  text-decoration: none;
  padding: 4px 0;
  transition: 0.15s;
}

.f-l:hover {
  color: var(--c-pri);
}

.f-l .fd {
  width: 2px;
  height: 14px;
  background: var(--c-pri);
  opacity: 0;
  transition: 0.15s;
}

.f-l:hover .fd {
  opacity: 1;
}

.f-copy {
  border-top: 1px solid var(--c-line);
  color: var(--c-dim);
  font-size: 12.5px;
  margin-top: 30px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.f-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--c-card2);
  border: 1px solid var(--c-line);
  color: var(--c-mut);
  text-decoration: none;
  margin-right: 8px;
  transition: 0.18s;
}

.f-social a:hover {
  color: #fff;
  border-color: var(--c-pri2);
}

/* ---------- Video (if present) ---------- */
.video iframe,
.video video,
.video-player {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--c-line);
  aspect-ratio: 16 / 9;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .ow-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .api-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991.98px) {
  .hamb {
    display: flex;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 40px;
  }

  .hero-card {
    max-width: 520px;
  }

  .ow-grid,
  .api-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .bal-hero {
    grid-template-columns: 1fr;
  }

  .bal-right {
    grid-template-columns: 1fr 1fr;
  }

  .steps3,
  .ref-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 719.98px) {
  .mobnav {
    display: block;
  }

  .main {
    /* padding-bottom: 92px; */
  }

  .ow-grid,
  .api-container,
  .stats {
    grid-template-columns: 1fr 1fr;
  }

  .podium {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero-ctas .btn {
    flex: 1;
  }

  .auth-card {
    padding: 26px 20px;
  }

  .bal-right {
    grid-template-columns: 1fr;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   HEXARO SUPERCHARGED � Premium UI/UX motion, effects, gradients, skeletons
   CodeCanyon / ThemeForest grade finishing layer
   ========================================================================== */

:root {
  --grad-hero: radial-gradient(120% 120% at 15% 0%, rgba(255, 190, 77, .16), transparent 50%),
    radial-gradient(100% 100% at 100% 10%, rgba(255, 167, 38, .12), transparent 50%),
    radial-gradient(120% 120% at 50% 100%, rgba(255, 190, 77, .14), transparent 55%);
  --grad-card: linear-gradient(160deg, rgba(255, 255, 255, .035), transparent 40%);
  --grad-sheen: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .14) 50%, transparent 70%);
  --c-gold: #ffd166;
  --c-cyan: #4de3ff;
  --c-violet: #a78bfa;
}

/* ================= Backgrounds ================= */
.premium-bg {
  position: relative;
}

.premium-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-hero);
  pointer-events: none;
  z-index: 0;
}

.premium-bg>* {
  position: relative;
  z-index: 1;
}

/* Soft floating orbs at page level */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .18;
  pointer-events: none;
  z-index: 0;
  animation: hxFloat 16s ease-in-out infinite;
}

.orb.o1 {
  width: 340px;
  height: 340px;
  background: var(--c-pri);
  top: -60px;
  right: -80px;
}

.orb.o2 {
  width: 280px;
  height: 280px;
  background: var(--c-brand1);
  bottom: 10%;
  left: -90px;
  animation-delay: -5s;
}

.orb.o3 {
  width: 240px;
  height: 240px;
  background: var(--c-brand2);
  top: 35%;
  left: 55%;
  animation-delay: -9s;
}

/* Animated dotted grid backdrop */
.grid-bg {
  position: relative;
}

.grid-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(60% 60% at 50% 20%, #000, transparent);
  pointer-events: none;
  z-index: 0;
}

/* ================= Animated gradient text ================= */
.grad-animate {
  background: linear-gradient(90deg, var(--c-pri), var(--c-brand2), var(--c-brand1), var(--c-pri));
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hxGradShift 6s ease infinite;
}

@keyframes hxGradShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* ================= Card lift / glow / reframe ================= */
.card-elev,
.lift {
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, border-color .35s ease;
}

.card-elev:hover,
.lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 190, 77, .22);
  border-color: rgba(255, 190, 77, .45);
}

/* Sweep shine on hover */
.shine {
  position: relative;
  overflow: hidden;
}

.shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-sheen);
  transform: translateX(-150%);
  pointer-events: none;
  transition: transform .8s ease;
}

.shine:hover::after {
  transform: translateX(150%);
}

/* Glow-ring on focus/active */
.glow-ring:focus-visible,
.glow-ring:hover {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 190, 77, .18), 0 0 40px rgba(255, 190, 77, .25);
}

/* ================= Buttons ================= */
.btn-anim {
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.btn-anim:hover {
  transform: translateY(-3px);
}

.btn-anim:active {
  transform: translateY(0) scale(.97);
}

.btn-grad.btn-anim,
.btn-sign.btn-anim,
.btn-primary.btn-anim {
  box-shadow: 0 12px 30px rgba(255, 190, 77, .35);
}

.btn-grad.btn-anim:hover {
  box-shadow: 0 18px 44px rgba(255, 190, 77, .42);
}

/* ================= Page header ================= */
.page-hero {
  text-align: center;
  padding: 18px 0 8px;
}

.page-hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-pri);
  background: var(--c-soft);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.page-hero h1 {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--bs-heading-color);
  margin: 0;
}

.page-hero p {
  color: var(--c-mut);
  max-width: 560px;
  margin: 10px auto 0;
  font-size: 15px;
  line-height: 1.6;
}

.page-hero .underline-hair {
  width: 70px;
  height: 4px;
  border-radius: 99px;
  margin: 16px auto 0;
  background: var(--grad-brand);
}

/* ================= Stagger child reveal ================= */
.stagger>* {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}

.stagger.revealed>* {
  opacity: 1;
  transform: none;
}

.stagger.revealed>*:nth-child(1) {
  transition-delay: .05s;
}

.stagger.revealed>*:nth-child(2) {
  transition-delay: .12s;
}

.stagger.revealed>*:nth-child(3) {
  transition-delay: .19s;
}

.stagger.revealed>*:nth-child(4) {
  transition-delay: .26s;
}

.stagger.revealed>*:nth-child(5) {
  transition-delay: .33s;
}

.stagger.revealed>*:nth-child(6) {
  transition-delay: .40s;
}

.stagger.revealed>*:nth-child(7) {
  transition-delay: .47s;
}

.stagger.revealed>*:nth-child(8) {
  transition-delay: .54s;
}

.stagger.revealed>*:nth-child(9) {
  transition-delay: .61s;
}

.stagger.revealed>*:nth-child(10) {
  transition-delay: .68s;
}

.stagger.revealed>*:nth-child(11) {
  transition-delay: .75s;
}

.stagger.revealed>*:nth-child(12) {
  transition-delay: .82s;
}

/* ================= Floating particles (coins/sparkles) ================= */
.float-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.particle {
  position: absolute;
  bottom: -40px;
  color: var(--c-pri);
  opacity: .35;
  animation: hxRise linear infinite;
}

.particle .ic {
  display: block;
  font-size: 18px;
}

@keyframes hxRise {
  0% {
    transform: translateY(0) translateX(0) rotate(0);
    opacity: 0;
  }

  12% {
    opacity: .4;
  }

  88% {
    opacity: .25;
  }

  100% {
    transform: translateY(-110vh) translateX(30px) rotate(220deg);
    opacity: 0;
  }
}

/* ================= Skeleton loaders (premium) ================= */
.sk-card-premium {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-card);
  overflow: hidden;
}

.sk-img-lg {
  height: 168px;
}

.sk-img-md {
  height: 110px;
}

.sk-b {
  height: 14px;
}

.sk-bs {
  height: 11px;
}

.sk-bw40 {
  width: 40%;
}

.sk-bw55 {
  width: 55%;
}

.sk-bw70 {
  width: 70%;
}

.sk-bw85 {
  width: 85%;
}

.sk-bw100 {
  width: 100%;
}

.sk-ic {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.sk-p {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ================= Table premium ================= */
.hx-table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.hx-table thead th {
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
  color: var(--c-mut);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--c-line);
}

.hx-table tbody tr {
  transition: background .2s ease, transform .2s ease;
}

.hx-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(255, 190, 77, .06), rgba(255, 190, 77, .015));
}

.hx-table tbody tr {
  animation: hxRowIn .5s ease backwards;
}

.hx-table tbody tr:nth-child(1) {
  animation-delay: .05s;
}

.hx-table tbody tr:nth-child(2) {
  animation-delay: .11s;
}

.hx-table tbody tr:nth-child(3) {
  animation-delay: .17s;
}

.hx-table tbody tr:nth-child(4) {
  animation-delay: .23s;
}

.hx-table tbody tr:nth-child(5) {
  animation-delay: .29s;
}

.hx-table tbody tr:nth-child(6) {
  animation-delay: .35s;
}

.hx-table tbody tr:nth-child(7) {
  animation-delay: .41s;
}

.hx-table tbody tr:nth-child(8) {
  animation-delay: .47s;
}

.hx-table tbody tr:nth-child(9) {
  animation-delay: .53s;
}

.hx-table tbody tr:nth-child(10) {
  animation-delay: .59s;
}

@keyframes hxRowIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ================= Badge pop / ping ================= */
.ping-dot {
  position: relative;
}

.ping-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--c-ok);
  animation: hxPing 1.6s infinite;
}

@keyframes hxPing {
  0% {
    transform: scale(1);
    opacity: .8;
  }

  80%,
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* ================= Stat / number card ================= */
.counter-card {
  background: linear-gradient(150deg, var(--c-card), var(--c-card2));
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.counter-card::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 77, .2), transparent 70%);
}

.counter-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 190, 77, .4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

/* ================= Progress bars ================= */
.prog-wrap {
  background: rgba(13, 14, 29, .55);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.prog-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--grad-brand);
  background-size: 200% 100%;
  animation: hxGradShift 4s ease infinite;
  width: 0;
  transition: width 1s cubic-bezier(.16, 1, .3, 1);
}

/* ================= Hero card coins float ================= */
.coin-float {
  display: inline-block;
  animation: hxBob 3.4s ease-in-out infinite;
}

@keyframes hxBob {

  0%,
  100% {
    transform: translateY(0) rotate(-6deg);
  }

  50% {
    transform: translateY(-10px) rotate(8deg);
  }
}

/* ================= Tilt card (JS applied) ================= */
.tilt {
  transform-style: preserve-3d;
  transition: transform .3s ease;
  will-change: transform;
}

.tilt .tilt-inner {
  transform: translateZ(30px);
}

/* ================= Scroll progress bar ================= */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--grad-brand);
  z-index: 2001;
  box-shadow: 0 0 12px rgba(255, 190, 77, .6);
}

/* ================= Confetti burst ================= */
.confetti-piece {
  position: fixed;
  z-index: 3000;
  pointer-events: none;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  animation: hxConfetti 1.6s ease-out forwards;
}

@keyframes hxConfetti {
  0% {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }

  100% {
    transform: translate(var(--dx), var(--dy)) rotate(360deg);
    opacity: 0;
  }
}

/* ================= Feature icon tile ================= */
.tile {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  background: linear-gradient(160deg, rgba(255, 190, 77, .2), rgba(255, 190, 77, .05));
  color: var(--c-pri);
  box-shadow: inset 0 0 0 1px rgba(255, 190, 77, .25);
}

.tile.green {
  background: linear-gradient(160deg, rgba(11, 243, 168, .2), rgba(11, 243, 168, .05));
  color: var(--c-ok);
  box-shadow: inset 0 0 0 1px rgba(11, 243, 168, .3);
}

.tile.blue {
  background: linear-gradient(160deg, rgba(56, 178, 182, .2), rgba(56, 178, 182, .05));
  color: var(--c-info);
  box-shadow: inset 0 0 0 1px rgba(56, 178, 182, .3);
}

.tile.gold {
  background: linear-gradient(160deg, rgba(255, 167, 38, .2), rgba(255, 167, 38, .05));
  color: var(--c-warn);
  box-shadow: inset 0 0 0 1px rgba(255, 167, 38, .3);
}

.tile.red {
  background: linear-gradient(160deg, rgba(255, 190, 77, .2), rgba(255, 190, 77, .05));
  color: var(--c-brand1);
  box-shadow: inset 0 0 0 1px rgba(255, 190, 77, .3);
}

.tile.purple {
  background: linear-gradient(160deg, rgba(167, 139, 250, .2), rgba(167, 139, 250, .05));
  color: var(--c-violet);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .3);
}

.tile.cyan {
  background: linear-gradient(160deg, rgba(77, 227, 255, .2), rgba(77, 227, 255, .05));
  color: var(--c-cyan);
  box-shadow: inset 0 0 0 1px rgba(77, 227, 255, .3);
}

/* Icon bounce on hover */
.ic-bounce:hover .tile {
  animation: hxIconBounce .5s ease;
}

@keyframes hxIconBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-6px) scale(1.08);
  }

  70% {
    transform: translateY(-2px);
  }
}

/* ================= Copy link ================= */
.copy-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-bg2);
  border: 1px solid var(--c-line2);
  border-radius: 16px;
  padding: 8px 8px 8px 16px;
}

.copy-pill input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--c-text);
  font-weight: 600;
  outline: none;
}

.copy-pill .btn {
  white-space: nowrap;
}

/* ================= Divider with icon ================= */
.sec-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--c-dim);
  font-size: 12.5px;
  margin: 24px 0;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.sec-divider::before,
.sec-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-line);
}

.sec-divider .ic {
  color: var(--c-pri);
}

/* ================= Nav active underline ================= */
.hx-nav {
  position: relative;
}

.nav-link.hx-nav.active::after {
  content: "";
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: 2px;
  height: 2px;
  border-radius: 99px;
  background: var(--grad-brand);
  animation: hxNavIn .35s ease;
}

@keyframes hxNavIn {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* ================= Mission progress list ================= */
.mission-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  padding: 16px 18px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.mission-card:hover {
  transform: translateX(4px);
  border-color: rgba(255, 190, 77, .4);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .3);
}

/* ================= Modal premium ================= */
.modal-content {
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}

.modal-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), transparent 40%);
}

/* ================= Toast premium ================= */
.hex-toast {
  border-left: 3px solid var(--c-pri);
}

.hex-toast.success {
  border-left-color: var(--c-ok);
}

.hex-toast.error {
  border-left-color: var(--c-bad);
}

/* ================= Leaderboard podium ================= */
.podium .p-card {
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease, border-color .4s ease;
}

.podium .p-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .5);
}

.podium .p-first::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(160px 120px at 50% 0%, rgba(255, 167, 38, .22), transparent 70%);
  pointer-events: none;
}

.p-crown {
  font-size: 30px;
  color: var(--c-gold);
  filter: drop-shadow(0 6px 16px rgba(255, 209, 102, .5));
  animation: hxBob 2.8s ease-in-out infinite;
}

/* ================= Offline / reward card premium ================= */
.rew-card,
.social-btn,
.ow-card,
.offer-card,
.q-link {
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, border-color .3s ease;
}

.rew-card:hover,
.social-btn:hover,
.ow-card:hover,
.offer-card:hover,
.q-link:hover {
  box-shadow: 0 22px 55px rgba(0, 0, 0, .5);
}

/* ================= Responsive tweaks ================= */
@media (max-width:767.98px) {
  .page-hero h1 {
    font-size: 28px;
  }
}

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

  .particle,
  .coin-float,
  .ping-dot::after {
    animation: none !important;
  }

  .grad-animate {
    animation: none;
  }

  .hx-table tbody tr {
    animation: none;
  }
}

/* ============ Cashout reward card extras ============ */
.rew-card .rc-img {
  position: relative;
}

.rew-card .rc-img-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(13, 14, 29, .75));
  pointer-events: none;
}

.rew-card .rc-lock {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(13, 14, 29, .7);
  border: 1px solid var(--c-line2);
  color: var(--c-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  backdrop-filter: blur(4px);
}

.rew-card .rc-sub {
  font-size: 12px;
  margin-top: 2px;
  display: block;
}

.rew-card .rc-body {
  flex-direction: row;
}

.rew-card .rc-body>div:first-child {
  flex: 1;
  min-width: 0;
}

.rew-card .rc-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: .55rem 1rem;
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  background: var(--c-card2);
  color: var(--c-mut);
  transition: all .25s ease;
}

.rew-card:hover .rc-cta {
  background: var(--grad-brand);
  color: #1f2937;
}

.fw-black {
  font-weight: 900;
}

/* ============ Premium nav pills ============ */
.nav-pills .nav-link {
  background: var(--c-card2);
  border: 1px solid var(--c-line);
  color: var(--c-mut);
  font-weight: 800;
  font-size: 14px;
  border-radius: 14px;
  padding: .6rem 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .25s ease;
}

.nav-pills .nav-link:hover {
  color: #fff;
  border-color: rgba(255, 190, 77, .4);
  transform: translateY(-2px);
}

.nav-pills .nav-link.active {
  background: linear-gradient(135deg, var(--c-brand1), var(--c-brand2)) !important;
  border-color: transparent !important;
  color: #1f2937 !important;
  box-shadow: 0 12px 30px rgba(255, 190, 77, .3);
}

/* ============ Stat premium (Earn page) ============ */
.stat-premium {
  display: flex;
  flex-direction: column;
}

.stat-premium .v {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--bs-heading-color);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
}

.stat-premium .c {
  color: var(--c-dim);
  font-size: 12.5px;
  font-weight: 700;
  margin-top: 6px;
}

.stat-premium .d {
  color: var(--c-ok);
  font-size: 12.5px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Orange pulsing hero dot */
.hero-badge .dot.orange {
  background: var(--c-pri);
}

/* ============ Image loading skeleton (shimmer while loading) ============ */
.img-is-loading {
  position: relative;
  overflow: hidden;
  background: var(--c-card2);
}

.img-is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--c-card2);
}

.img-is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  transform: translateX(-100%);
  animation: hexShimmer 1.5s infinite;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
}

/* Page hero relative (positions absolute back button) */
.page-hero {
  position: relative;
}

.page-hero .back {
  position: absolute;
  left: 0;
  top: 6px;
}

/* ==========================================================================
   MOBILE NAV RESPONSIVE FINESSE
   ========================================================================== */

/* Topbar: never wrap, respect notched-device safe area */
.topbar {
  padding-top: env(safe-area-inset-top);
}

.topbar .container {
  flex-wrap: nowrap;
  gap: 8px;
}

.topbar .navbar-brand {
  min-width: 0;
  margin-right: 0;
}

.top-actions {
  gap: 8px !important;
}

.brand-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* Wallet: compact on small phones */
@media (max-width: 575.98px) {
  .wallet {
    padding: 0.4rem 0.7rem;
    gap: 6px;
    font-size: 13px;
  }

  .wallet .coin-img {
    height: 16px !important;
    width: 16px !important;
  }

  .wallet.dropdown-toggle {
    white-space: nowrap;
  }

  /* Drop brand text on very narrow screens so wallet + hamburger always fit */
  .brand-name {
    display: none;
  }

  .brand-mark {
    height: 30px;
  }
}

@media (max-width: 400px) {

  .topbar .btn-sign,
  .topbar .btn-login {
    padding: 0.45rem 0.8rem;
    font-size: 13px;
  }

  .hamb {
    width: 40px;
    height: 40px;
  }
}

/* Drawer (offcanvas): premium, capped, scrollable on phones */
#drawer {
  width: min(86vw, 400px);
}

#drawer .offcanvas-body {
  overflow-y: auto;
}

#drawer .offcanvas-header {
  border-bottom: 1px solid var(--c-line);
}

@media (max-width: 575.98px) {
  #drawer {
    width: min(84vw, 340px);
  }

  #drawer .offcanvas-header {
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  }

  #drawer .offcanvas-body {
    padding: 10px 14px calc(18px + env(safe-area-inset-bottom));
  }

  .drawer-nav a,
  .drawer-nav button {
    padding: 11px 12px;
    font-size: 14.5px;
  }

  .d-user {
    padding-top: 6px;
  }
}

/* Mobile bottom nav: pill indicator + safe-area */
@media (max-width: 719.98px) {
  .mobnav .mn-row {
    padding: 6px 6px 2px;
    gap: 2px;
  }

  .mobnav a {
    position: relative;
    padding: 8px 4px 9px;
    gap: 5px;
    font-size: 10px;
    border-radius: 12px;
    transition: color 0.18s, background 0.18s;
  }

  .mobnav a .ic {
    width: 30px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 15px;
    transition: 0.18s;
  }

  .mobnav a.active {
    color: #1f2937;
    background: linear-gradient(180deg, rgba(255, 190, 77, 0.18), rgba(255, 190, 77, 0.05));
  }

  .mobnav a.active .ic {
    background: var(--grad-brand);
    color: #1f2937;
    box-shadow: 0 6px 14px rgba(255, 190, 77, 0.35);
  }

  .main {
    /* padding-bottom: calc(92px + env(safe-area-inset-bottom)); */
  }

  .cookie {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

/* Html/body warnings: prevent right-side horizontal scroll from decorative
   glows & orbs. `overflow-x:clip` avoids creating a scroll container (so
   sticky topbar keeps working); `hidden` fallback for older browsers. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

.hero,
.premium-bg,
.auth-wrap {
  overflow-x: clip;
}

/* Desktop topbar: brand left, nav links centered, wallet/actions right.
   Small screens keep the original order (brand left + actions right). */
@media (min-width: 992px) {
  .topbar .navbar-brand {
    flex-shrink: 0;
  }

  .topbar .nav-center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .topbar .nav-center .navbar-nav {
    align-items: center;
    justify-content: center;
  }

  .topbar .top-actions {
    flex-shrink: 0;
    margin-left: 0 !important;
  }
}

/* ================= Referral tier ladder ================= */
.auth-bonus {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 18px;
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--c-text);
  background: linear-gradient(90deg, rgba(11, 243, 168, .12), rgba(11, 243, 168, .04));
  border: 1px solid rgba(11, 243, 168, .35);
  line-height: 1.5;
}

.auth-bonus .ic {
  margin-top: 2px;
}

.tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #0d0e1d;
  background: linear-gradient(135deg, var(--c-pri), var(--c-brand1));
  box-shadow: 0 8px 20px rgba(255, 190, 77, .3);
}

.tier-ladder {
  display: grid;
  gap: 10px;
}

.tier-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--c-card);
  border: 1px solid var(--c-line2);
  opacity: .55;
  transition: all .3s cubic-bezier(.16, 1, .3, 1);
}

.tier-step.on {
  opacity: 1;
}

.tier-step.current {
  border-color: rgba(255, 190, 77, .45);
  background: linear-gradient(90deg, rgba(255, 190, 77, .08), rgba(255, 190, 77, .04));
}

.tier-ic {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--c-mut);
  background: rgba(255, 255, 255, .04);
}

.tier-step.on .tier-ic {
  color: var(--c-gold);
  background: rgba(255, 167, 38, .12);
}

.tier-step.current .tier-ic {
  color: #0d0e1d;
  background: linear-gradient(135deg, var(--c-pri), var(--c-brand1));
}

.tier-meta {
  flex: 1;
  min-width: 0;
}

.tier-name {
  font-weight: 800;
  color: var(--c-text);
  font-size: 15px;
}

.tier-req {
  font-size: 12.5px;
  color: var(--c-mut);
}

.tier-reward {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.tier-pct {
  font-weight: 800;
  color: var(--c-ok);
  white-space: nowrap;
}

.tier-cur {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c-text);
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .05);
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .tier-step {
    flex-wrap: wrap;
  }

  .tier-reward {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: flex-start;
  }
}