/* =========================================================
   COMPOUND EARN — CONSISTENT V28 VISUAL THEME
   Shared visual layer for all pages. Functional styles remain
   in each page; this file keeps the look consistent.
========================================================= */
:root{
  --ce-deep:#022b18;
  --ce-green:#004b25;
  --ce-green-2:#063b22;
  --ce-gold:#ffd72b;
  --ce-lime:#b9ff16;
  --ce-border:rgba(0,218,117,.55);
  --ce-glass:rgba(0,45,23,.72);
  --ce-glass-2:rgba(0,83,40,.48);
  --ce-text:#fff;
}

html{background:var(--ce-deep)}
body{
  color:var(--ce-text) !important;
  background:
    radial-gradient(circle at 50% 4%,rgba(24,126,49,.58),transparent 32%),
    linear-gradient(150deg,#022b18 0%,#004b25 45%,#052d1c 100%) !important;
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(145deg,transparent 11%,rgba(174,255,0,.07) 11.5%,transparent 12%,transparent 72%,rgba(174,255,0,.08) 72.5%,transparent 73%),
    radial-gradient(circle at 90% 85%,rgba(255,216,38,.08),transparent 28%);
  z-index:-1;
}

.top-bar,.topbar{
  position:sticky !important;
  top:0;
  z-index:1000;
  min-height:68px;
  padding:8px 14px !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(180deg,rgba(0,40,19,.97),rgba(0,59,29,.90)) !important;
  border-bottom:1px solid rgba(206,255,55,.24) !important;
  box-shadow:0 5px 20px rgba(0,0,0,.28),0 1px 0 rgba(255,220,55,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.brand{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  min-width:0;
  color:#fff !important;
  font-size:19px;
  font-weight:900;
}
.brand-logo{
  width:48px !important;
  height:48px !important;
  flex:0 0 48px;
  object-fit:cover !important;
  border-radius:50% !important;
  border:2px solid rgba(255,255,255,.82);
  background:#062d1a;
  box-shadow:0 0 7px rgba(255,255,255,.25),0 0 14px rgba(255,210,35,.28);
}
.back,.back-btn{
  color:#fff !important;
  text-decoration:none !important;
  font-weight:800 !important;
  border:1px solid rgba(255,220,55,.55) !important;
  border-radius:11px !important;
  padding:9px 13px !important;
  background:rgba(0,0,0,.24) !important;
}

.page,.container,.payment-page,.page-center{
  position:relative;
}
.page::after,.container::after,.payment-page::after,.page-center::after{
  content:"";
  position:fixed;
  top:0;
  right:-180px;
  width:520px;
  height:520px;
  pointer-events:none;
  background:url("../logo.png") center/contain no-repeat;
  opacity:.035;
  transform:rotate(-12deg);
  z-index:-1;
}

.card,.panel,.gift-card,.payment-card,.register-card,.login-card,.summary,.record-list,.section-card,.profile-card,.balance-card,.referral-card,.join-card{
  background:linear-gradient(145deg,rgba(0,64,30,.82),rgba(0,39,21,.72)) !important;
  border-color:rgba(0,218,117,.42) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.25) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

input,select,textarea,.input,.gift-input{
  background:rgba(255,255,255,.96) !important;
  color:#162016 !important;
  border:1px solid rgba(255,220,55,.38) !important;
  border-radius:11px !important;
}

button,.btn,.login-btn,.receive-btn,.join-btn,.copy-referral,.buy-btn{
  border-radius:11px;
}

button:active,a:active,.btn:active{
  box-shadow:0 0 5px rgba(255,255,255,.9),0 0 12px rgba(255,0,180,.48),0 0 20px rgba(0,220,255,.36),0 0 26px rgba(255,220,55,.28) !important;
}

h1,h2,h3,h4{color:#fff}
.subtitle,.muted,.description,.note{color:rgba(255,255,255,.76) !important}

.bottom-nav{
  background:linear-gradient(180deg,rgba(0,50,29,.94),rgba(0,29,19,.96)) !important;
  border:1px solid rgba(0,218,117,.55) !important;
  box-shadow:0 -5px 25px rgba(0,0,0,.35),0 0 15px rgba(0,218,117,.08) !important;
}
.bottom-nav-item.active,.bottom-nav-item:hover{
  color:#35e95e !important;
  background:rgba(255,255,255,.07) !important;
}

.table-box{
  border-color:rgba(0,218,117,.35) !important;
  background:rgba(0,20,11,.38) !important;
}
thead th{background:#063b22 !important;color:#fff !important}
.summary-item,.mini-summary{
  background:rgba(0,0,0,.24) !important;
  border-color:rgba(255,220,55,.18) !important;
}

@media(max-width:700px){
  .top-bar,.topbar{min-height:62px;padding:7px 11px !important}
  .brand{font-size:17px;gap:8px !important}
  .brand-logo{width:43px !important;height:43px !important;flex-basis:43px}
  .page::after,.container::after,.payment-page::after,.page-center::after{right:-250px;width:450px;height:450px}
}