/* =========================================================
   RANJIT ONLINE — BLACK CRYSTAL / ORANGE + EMERALD
   Full visual layer for login + dashboard + inner pages.
   No application logic is changed.
   ========================================================= */
:root{
  --cr-black:#030504;
  --cr-black-2:#07100c;
  --cr-black-3:#0b1510;
  --cr-glass:rgba(10,15,12,.72);
  --cr-glass-2:rgba(15,20,16,.86);
  --cr-glass-light:rgba(255,255,255,.055);
  --cr-border:rgba(255,255,255,.105);
  --cr-white:#f7faf8;
  --cr-muted:#a9b5ae;
  --cr-orange:#ff7a18;
  --cr-orange-2:#ffb15c;
  --cr-green:#16d98c;
  --cr-green-2:#7af7be;
  --cr-shadow:0 28px 90px rgba(0,0,0,.46);
  --cr-shadow-sm:0 16px 45px rgba(0,0,0,.32);
  --cr-radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--cr-white);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 8% 8%,rgba(255,122,24,.13),transparent 24%),
    radial-gradient(circle at 92% 14%,rgba(22,217,140,.12),transparent 24%),
    radial-gradient(circle at 48% 110%,rgba(255,122,24,.08),transparent 31%),
    linear-gradient(135deg,#020302 0%,#050907 42%,#020302 100%);
  overflow-x:hidden;
}

body:before{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-3;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,122,24,.13),transparent 18%),
    radial-gradient(circle at 82% 72%,rgba(22,217,140,.11),transparent 20%),
    linear-gradient(110deg,transparent 0 46%,rgba(255,255,255,.018) 46.4%,transparent 47.2% 63%,rgba(255,255,255,.014) 63.4%,transparent 64%);
  filter:blur(2px);
  animation:crystalDrift 15s ease-in-out infinite alternate;
}
body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  opacity:.34;
  background-image:
    linear-gradient(90deg,transparent 49.5%,rgba(255,255,255,.028) 49.8%,transparent 50.2%),
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:100% 100%,42px 42px,42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 90%);
}

::selection{background:rgba(255,122,24,.24);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#040605}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--cr-orange),var(--cr-green));border-radius:999px}
a{transition:color .2s ease,opacity .2s ease,transform .2s ease,filter .2s ease}

/* --- Crystal surfaces --- */
.card,.cardx,.section-card,.login-box,.auth,.service-card,.stat-card,.balance,.modal-content,.dropdown-menu{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(18,24,20,.80),rgba(7,10,8,.74))!important;
  border:1px solid var(--cr-border)!important;
  border-radius:var(--cr-radius)!important;
  box-shadow:var(--cr-shadow-sm)!important;
  color:var(--cr-white)!important;
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
}
.card:before,.cardx:before,.section-card:before,.login-box:before,.auth:before,.service-card:before,.stat-card:before,.balance:before,.modal-content:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(130deg,
    rgba(255,122,24,.42),
    transparent 18%,
    rgba(255,255,255,.09) 42%,
    transparent 61%,
    rgba(22,217,140,.38));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.84;
}
.card:after,.cardx:after,.section-card:after,.service-card:after,.stat-card:after,.balance:after{
  content:"";
  position:absolute;
  width:180px;
  height:55px;
  right:-84px;
  top:15px;
  transform:rotate(-24deg);
  pointer-events:none;
  border-top:1px solid rgba(255,255,255,.13);
  border-bottom:1px solid rgba(255,255,255,.045);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  filter:blur(.2px);
  animation:crystalSheen 7s ease-in-out infinite;
}
.card:hover,.cardx:hover,.section-card:hover,.service-card:hover,.stat-card:hover,.balance:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.17)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.50),0 0 36px rgba(22,217,140,.08)!important;
}

/* --- Zig-zag energy accent --- */
.page-head:after,.hero:after,.login-box:after,.auth .form:after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:0;
  height:12px;
  opacity:.65;
  background:
    linear-gradient(135deg,transparent 0 7%,rgba(255,122,24,.85) 7.5% 8.2%,transparent 8.7% 20%,rgba(22,217,140,.85) 20.5% 21.2%,transparent 21.7% 33%,rgba(255,122,24,.85) 33.5% 34.2%,transparent 34.7% 46%,rgba(22,217,140,.85) 46.5% 47.2%,transparent 47.7% 59%,rgba(255,122,24,.85) 59.5% 60.2%,transparent 60.7% 72%,rgba(22,217,140,.85) 72.5% 73.2%,transparent 73.7% 85%,rgba(255,122,24,.85) 85.5% 86.2%,transparent 86.7%);
  background-size:220px 12px;
  filter:drop-shadow(0 0 7px rgba(255,122,24,.45)) drop-shadow(0 0 8px rgba(22,217,140,.35));
  animation:zigzagMove 8s linear infinite;
  pointer-events:none;
}

/* --- Typography / Bootstrap polish --- */
h1,h2,h3,h4,h5,h6{letter-spacing:-.035em;color:var(--cr-white)!important}
.text-muted,.muted,.stat-label,.service-card p,.small.text-muted,.text-secondary{color:var(--cr-muted)!important}
.text-primary{color:var(--cr-orange-2)!important}
.text-success{color:var(--cr-green-2)!important}
.text-info{color:#78e5ff!important}
.bg-light,.text-bg-light{background:rgba(255,255,255,.07)!important;color:#e9eeeb!important}

.btn{
  border-radius:13px!important;
  font-weight:800!important;
  letter-spacing:.01em;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease!important;
  position:relative;
  overflow:hidden;
}
.btn:before{
  content:"";
  position:absolute;
  top:-40%;bottom:-40%;left:-80px;width:42px;
  transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  animation:btnSweep 4.6s ease-in-out infinite;
}
.btn:hover{transform:translateY(-2px);filter:saturate(1.13)}
.btn-primary,.btn-main,.btn-success{
  color:#06110b!important;
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--cr-orange),#ff9d3e 52%,var(--cr-green))!important;
  box-shadow:0 12px 30px rgba(255,122,24,.18),0 8px 26px rgba(22,217,140,.13)!important;
}
.btn-primary:hover,.btn-main:hover,.btn-success:hover{color:#fff!important}
.btn-danger{background:linear-gradient(135deg,#7f1d1d,#ef4444)!important;color:#fff!important;border:0!important}
.btn-warning{background:linear-gradient(135deg,#a84f08,#ffb24b)!important;color:#fff!important;border:0!important}
.btn-light,.btn-outline-secondary{
  background:rgba(255,255,255,.055)!important;
  color:#edf2ef!important;
  border-color:rgba(255,255,255,.13)!important;
}
.btn-outline-primary{color:var(--cr-orange-2)!important;border-color:rgba(255,122,24,.42)!important;background:rgba(255,122,24,.05)!important}
.btn-outline-success{color:var(--cr-green-2)!important;border-color:rgba(22,217,140,.42)!important;background:rgba(22,217,140,.05)!important}

.form-control,.form-select,.filter,input,select,textarea{
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.045)!important;
  color:var(--cr-white)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 20px rgba(0,0,0,.14)!important;
  transition:border-color .2s,box-shadow .2s,transform .2s,background .2s!important;
}
.form-control::placeholder,input::placeholder,textarea::placeholder{color:#7f8a84!important}
.form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus{
  border-color:rgba(255,154,64,.75)!important;
  background:rgba(255,255,255,.06)!important;
  box-shadow:0 0 0 4px rgba(255,122,24,.10),0 0 30px rgba(22,217,140,.08)!important;
  transform:translateY(-1px);
}
.form-label,label{font-weight:750!important;color:#dde6e0!important}
.form-check-input{background-color:#07100c!important;border-color:rgba(255,255,255,.2)!important}
.form-check-input:checked{background-color:var(--cr-green)!important;border-color:var(--cr-green)!important}

.alert{border:1px solid rgba(255,255,255,.10)!important;border-radius:15px!important;box-shadow:var(--cr-shadow-sm)}
.alert-success{background:rgba(22,217,140,.09)!important;color:#89f3c2!important;border-color:rgba(22,217,140,.18)!important}
.alert-warning{background:rgba(255,122,24,.09)!important;color:#ffc576!important;border-color:rgba(255,122,24,.18)!important}
.alert-danger{background:rgba(239,68,56,.09)!important;color:#ffaaa2!important;border-color:rgba(239,68,56,.18)!important}
.badge{border-radius:999px!important;padding:.48em .78em!important}

/* --- Sidebar --- */
.sidebar{
  background:
    radial-gradient(circle at 10% 12%,rgba(255,122,24,.14),transparent 23%),
    radial-gradient(circle at 84% 78%,rgba(22,217,140,.11),transparent 28%),
    linear-gradient(180deg,#040605 0%,#07100c 48%,#030504 100%)!important;
  color:#dfe8e3!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  box-shadow:18px 0 60px rgba(0,0,0,.34)!important;
}
.sidebar:after{
  content:"";
  position:absolute;
  width:260px;height:260px;
  left:-150px;bottom:35px;
  background:radial-gradient(circle,rgba(255,122,24,.16),transparent 68%);
  pointer-events:none;
  animation:orbPulse 8s ease-in-out infinite;
}
.brand{position:relative;z-index:2;font-weight:950;color:#fff!important}
.brand span,.brand-name{color:#fff!important}
.brand-mark{
  background:linear-gradient(135deg,var(--cr-orange),var(--cr-green))!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 0 28px rgba(255,122,24,.34),0 0 26px rgba(22,217,140,.18),inset 0 1px 0 rgba(255,255,255,.38)!important;
}
.nav-title,.nav-section{color:#7f8a84!important}
.nav a,.side-link,.cat-toggle{
  position:relative;
  border:1px solid transparent!important;
  color:#b9c5be!important;
  border-radius:13px!important;
}
.nav a:hover,.nav a.active,.side-link:hover,.side-link.active,.cat-toggle:hover{
  color:#fff!important;
  background:linear-gradient(90deg,rgba(255,122,24,.13),rgba(22,217,140,.10))!important;
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:inset 3px 0 0 var(--cr-orange),0 8px 25px rgba(0,0,0,.16)!important;
  transform:translateX(2px);
}
.nav-icon,.side-link i,.cat-toggle i{filter:drop-shadow(0 0 7px rgba(22,217,140,.22))}

/* --- Topbar --- */
.topbar,.navbar,.top{
  background:rgba(5,9,7,.74)!important;
  color:var(--cr-white)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 10px 35px rgba(0,0,0,.25)!important;
  backdrop-filter:blur(22px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(135%);
}
.menu-btn,.icon-btn{background:rgba(255,255,255,.055)!important;color:#fff!important;border:1px solid rgba(255,255,255,.12)!important}

/* --- Main dashboard --- */
.main{background:transparent!important}
.content{position:relative}
.hero{
  position:relative;
  overflow:hidden;
  border-radius:26px!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 88% 20%,rgba(22,217,140,.24),transparent 24%),
    radial-gradient(circle at 12% 88%,rgba(255,122,24,.20),transparent 26%),
    linear-gradient(135deg,#080d0a 0%,#111a14 52%,#07110c 100%)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 26px 80px rgba(0,0,0,.42),0 0 42px rgba(22,217,140,.06)!important;
}
.hero:before{
  content:"";
  position:absolute;
  width:460px;height:460px;
  top:-270px;right:-140px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 0 34px rgba(255,255,255,.015),0 0 0 68px rgba(255,255,255,.010);
  animation:orbitSpin 16s linear infinite;
  pointer-events:none;
}
.hero .btn-light{color:#fff!important}
.stat-icon,.service-icon,.icon{
  background:linear-gradient(145deg,rgba(255,122,24,.16),rgba(22,217,140,.12))!important;
  color:#ffd18e!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 9px 28px rgba(0,0,0,.20)!important;
}
.service-card h3,.service-name{font-weight:850;color:#f5f8f6!important}
.price{font-size:1.06rem;color:#ffd18e!important}

/* dashboard inline .cardx theme wins via !important above */
.search{color:#fff!important}
.table{--bs-table-bg:transparent!important;color:#e5ece8!important}
.table thead th,th{
  background:rgba(255,255,255,.045)!important;
  color:#aeb9b2!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  font-size:.72rem!important;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:800!important;
}
.table tbody tr:hover{background:rgba(255,255,255,.03)!important}
td{border-bottom-color:rgba(255,255,255,.07)!important;color:#e5ece8!important}

/* --- Wallet / balances --- */
.balance{
  background:
    radial-gradient(circle at 82% 15%,rgba(22,217,140,.25),transparent 24%),
    radial-gradient(circle at 20% 88%,rgba(255,122,24,.20),transparent 25%),
    linear-gradient(135deg,#080c09,#162119 58%,#07100c)!important;
}

/* --- Dropdowns / modals --- */
.dropdown-menu{background:rgba(7,11,9,.93)!important;border-color:rgba(255,255,255,.10)!important}
.dropdown-item{color:#dfe7e2!important}.dropdown-item:hover{background:rgba(255,255,255,.06)!important;color:#fff!important}
.modal-backdrop.show{opacity:.72}

/* --- Login page: full crystal treatment --- */
.login-page,.auth-wrap{
  min-height:100vh!important;
  padding:30px!important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 10% 16%,rgba(255,122,24,.20),transparent 25%),
    radial-gradient(circle at 88% 85%,rgba(22,217,140,.20),transparent 27%),
    radial-gradient(circle at 54% 43%,rgba(255,255,255,.035),transparent 36%),
    #020302!important;
}
.login-page:before,.auth-wrap:before{
  content:"";
  position:absolute;
  inset:7%;
  border:1px solid rgba(255,255,255,.05);
  clip-path:polygon(0 8%,10% 0,24% 7%,39% 0,54% 8%,70% 1%,84% 9%,100% 2%,100% 92%,88% 100%,74% 93%,59% 100%,43% 92%,27% 100%,12% 93%,0 98%);
  box-shadow:0 0 80px rgba(22,217,140,.05),0 0 80px rgba(255,122,24,.05);
  pointer-events:none;
  animation:frameFloat 10s ease-in-out infinite alternate;
}
.login-page:after,.auth-wrap:after{
  content:"";
  position:absolute;
  width:90vw;height:90vw;
  max-width:900px;max-height:900px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.04);
  box-shadow:0 0 0 80px rgba(255,255,255,.012),0 0 0 160px rgba(255,255,255,.008);
  animation:orbitSpin 28s linear infinite reverse;
  pointer-events:none;
}
.auth{
  width:min(1100px,100%)!important;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  background:rgba(8,12,10,.76)!important;
  border-radius:32px!important;
  overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.58),0 0 60px rgba(22,217,140,.07)!important;
  z-index:2;
}
.promo{
  position:relative;
  min-height:640px;
  padding:58px!important;
  color:#fff!important;
  overflow:hidden;
  background:
    linear-gradient(125deg,rgba(255,122,24,.22),transparent 38%),
    linear-gradient(305deg,rgba(22,217,140,.18),transparent 45%),
    linear-gradient(145deg,#070b09 0%,#101a14 50%,#080d0a 100%)!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
}
.promo:before{
  content:"";
  position:absolute;
  width:320px;height:320px;
  right:-95px;top:-80px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 0 0 30px rgba(255,255,255,.014),0 0 0 60px rgba(22,217,140,.018);
  animation:orbitSpin 18s linear infinite;
}
.promo:after{
  content:"";
  position:absolute;
  left:-20%;bottom:-30%;
  width:80%;height:60%;
  background:linear-gradient(135deg,transparent 42%,rgba(255,122,24,.18) 43% 44%,transparent 45% 58%,rgba(22,217,140,.16) 59% 60%,transparent 61%);
  transform:rotate(-8deg);
  filter:blur(.4px);
  animation:zigzagMove 9s linear infinite;
}
.promo h1{font-weight:950!important;letter-spacing:-.065em;line-height:.96!important;position:relative;z-index:2}
.promo p,.promo li{position:relative;z-index:2;color:#d5ddd8!important}
.form{
  position:relative;
  padding:48px!important;
  color:var(--cr-white)!important;
  background:linear-gradient(145deg,rgba(13,18,15,.90),rgba(5,8,6,.92))!important;
}
.form .brand{color:var(--cr-orange-2)!important;text-shadow:0 0 18px rgba(255,122,24,.18)}
.form .text-muted{color:var(--cr-muted)!important}
.nav-pills .nav-link{color:#b9c5be!important;background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.06)!important}
.nav-pills .nav-link.active{background:linear-gradient(135deg,rgba(255,122,24,.18),rgba(22,217,140,.14))!important;color:#fff!important;border-color:rgba(255,255,255,.13)!important;box-shadow:0 0 24px rgba(255,122,24,.08)}

/* Login field / option polish */
.btn-check:checked + label{background:linear-gradient(135deg,rgba(255,122,24,.20),rgba(22,217,140,.18))!important;color:#fff!important;border-color:rgba(255,255,255,.20)!important;box-shadow:0 0 22px rgba(22,217,140,.08)}
.auth .form-control{min-height:48px}
.auth .alert{color:#fff!important}

/* --- Responsive --- */
@media(max-width:900px){
  .auth{grid-template-columns:1fr!important}
  .promo{min-height:340px!important;border-right:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
}
@media(max-width:760px){
  .auth-wrap,.login-page{padding:14px!important}
  .promo{padding:34px!important}
  .form{padding:30px!important}
}

/* --- Motion --- */
@keyframes crystalSheen{0%,30%{transform:translateX(0) rotate(-24deg);opacity:.10}55%{transform:translateX(-120px) rotate(-24deg);opacity:.34}100%{transform:translateX(-420px) rotate(-24deg);opacity:0}}
@keyframes crystalDrift{from{transform:translate3d(-1.5%,0,0) scale(1)}to{transform:translate3d(1.5%,-1%,0) scale(1.02)}}
@keyframes zigzagMove{0%{background-position:0 0}100%{background-position:220px 0}}
@keyframes btnSweep{0%,55%{left:-80px;opacity:0}70%{opacity:1}100%{left:120%;opacity:0}}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes orbPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.16);opacity:.85}}
@keyframes frameFloat{from{transform:translateY(-2px)}to{transform:translateY(8px)}}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}
}