:root {
  --brand: #6366f1;
  --brand-d: #4f46e5;
  --grn: #10b981;
  --grn-d: #059669;
  --brand-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --grn-grad: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

body {
  background: #f5f6fb;
  color: #1e293b;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Brand bits */
.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-brand:hover,
.btn-brand:focus {
  background: var(--brand-d);
  border-color: var(--brand-d);
  color: #fff;
}
.btn-outline-brand {
  color: var(--brand);
  border-color: var(--brand);
  background: #fff;
}
.btn-outline-brand:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.text-brand { color: var(--brand) !important; }

.navbar-brandbar {
  background: var(--brand-grad);
  box-shadow: 0 2px 14px rgba(99, 102, 241, .28);
}
.navbar-brandbar .navbar-brand { letter-spacing: -.2px; }
.balance-chip {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.user-chip {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .82rem;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.nav-pills {
  --bs-nav-pills-border-radius: 11px;
}
.nav-pills .nav-link {
  color: #475569;
  background: #fff;
  border: 1px solid #e6e8f0;
  font-weight: 500;
  font-size: .92rem;
  padding: .5rem 1rem;
  border-radius: 11px;
  transition: .15s;
}
.nav-pills .nav-link:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.nav-pills .nav-link.active {
  background: var(--brand-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(99, 102, 241, .3);
}

/* ===== Page heading (app sections) ===== */
.page-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.25rem;
}
.page-head .ph-ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  color: #fff;
  background: var(--brand-grad);
  box-shadow: 0 6px 16px rgba(99, 102, 241, .3);
  flex: 0 0 auto;
}
.page-head .ph-ic.earn {
  background: var(--grn-grad);
  box-shadow: 0 6px 16px rgba(16, 185, 129, .3);
}

/* ===== Dashboard ===== */
.dash-hero h4 { letter-spacing: -.3px; }

.action-panel {
  background: #fff;
  border: 1px solid #eceef5;
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
  transition: .18s;
}
.action-panel:hover { box-shadow: 0 10px 28px rgba(15, 23, 42, .09); transform: translateY(-2px); }
.action-panel.earn { border-top: 3px solid var(--grn); }
.action-panel.buy { border-top: 3px solid var(--brand); }
.action-panel .ap-head { display: flex; align-items: flex-start; gap: .8rem; }
.action-panel .ap-ic {
  width: 48px; height: 48px; border-radius: 13px;
  display: grid; place-items: center; font-size: 1.5rem; flex: 0 0 auto;
}
.action-panel .ap-ic.earn { background: #e9faf3; }
.action-panel .ap-ic.buy { background: #eef0ff; }
.action-panel .ap-title { font-weight: 700; font-size: 1.1rem; }
.action-panel .ap-sub { color: #64748b; font-size: .88rem; margin-top: .15rem; }

.mini-steps .ms-step {
  display: flex; align-items: flex-start; gap: .7rem;
  background: #f8f9fe; border: 1px solid #eef0f7; border-radius: 12px; padding: .9rem 1rem; height: 100%;
}
.mini-steps .ms-step .n {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  background: var(--brand-grad); color: #fff;
}

/* ===== Downloads cards ===== */
.dl-card {
  background: #fff;
  border: 1px solid #eceef5;
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
  transition: .15s;
}
.dl-card:hover { border-color: var(--brand); box-shadow: 0 8px 22px rgba(99, 102, 241, .12); }

/* live dot reused in app */
.live {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 8px #22c55e; margin-right: 3px;
  animation: appPulse 1.6s infinite;
}
@keyframes appPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5) } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0) } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0) } }

/* Auth */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-grad);
  padding: 1rem;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  border-radius: 18px;
}
.brand-logo {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--brand-grad);
  color: #fff;
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card .nav-pills .nav-link {
  background: #f1f5f9;
  border: none;
}

/* Balance cards */
.balance-card {
  border-radius: 16px;
  padding: 1.5rem 1.6rem;
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .1);
  position: relative;
  overflow: hidden;
}
.balance-card::after {
  content: '';
  position: absolute;
  right: -30px; top: -30px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}
.balance-card .lbl {
  font-size: .9rem;
  opacity: .92;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.balance-card .big {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  margin: .2rem 0;
  letter-spacing: -.5px;
}
.balance-card .sub {
  font-size: .8rem;
  opacity: .9;
}
.card-pts {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.card-usdt {
  background: linear-gradient(135deg, #10b981, #059669);
}
/* Ô thống kê nền sáng, chữ tối — dùng cho card KHÔNG gradient (tránh chữ trắng trên nền trắng → mờ/đè). */
.stat-tile {
  background: #fff;
  border: 1px solid #eceef5;
  border-radius: 16px;
  padding: 1.2rem 1.3rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
}
.stat-tile .stat-lbl { font-size: .85rem; color: #6b7280; }
.stat-tile .stat-val { font-size: 1.7rem; font-weight: 700; color: #1a1f3d; line-height: 1.15; margin: .15rem 0; letter-spacing: -.3px; }
.stat-tile .stat-sub { font-size: .8rem; color: #9aa3b8; }

.card {
  border-radius: 14px;
  border: 1px solid #eceef5;
}
.card.shadow-sm {
  box-shadow: 0 4px 18px rgba(15, 23, 42, .05) !important;
}
.card-body { padding: 1.35rem 1.4rem; }
code {
  color: #6d28d9;
  background: #f3f0ff;
  padding: .1rem .35rem;
  border-radius: 5px;
  font-size: .85em;
}
.table > :not(caption) > * > * { padding: .7rem .6rem; }
.btn { border-radius: 9px; }
.form-control, .form-select { border-radius: 9px; border-color: #e2e5f0; }
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .15);
}
.font-monospace {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Admin sidebar */
.admin-sidebar {
  width: 240px;
  min-height: 100vh;
  background: #1e293b;
  color: #cbd5e1;
  position: fixed;
  top: 0;
  left: 0;
}
.admin-sidebar .brand {
  padding: 1.1rem 1.25rem;
  font-weight: 700;
  color: #fff;
  font-size: 1.05rem;
  border-bottom: 1px solid #334155;
}
.admin-sidebar a {
  display: block;
  padding: .7rem 1.25rem;
  color: #cbd5e1;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.admin-sidebar a:hover {
  background: #334155;
  color: #fff;
}
.admin-sidebar a.active {
  background: #334155;
  color: #fff;
  border-left-color: var(--brand);
}
.admin-main {
  margin-left: 240px;
  padding: 1.5rem 2rem;
}
.stat-card {
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
}
.stat-card .num {
  font-size: 1.8rem;
  font-weight: 700;
}
.stat-card .lbl {
  color: #64748b;
  font-size: .85rem;
}