/* =========================================================
   RANJIT ONLINE — ULTRA 2035 UI
   Visual-only theme. No application logic is changed.
   ========================================================= */
:root{
  --u-bg:#f4f7ff;
  --u-bg2:#eef2ff;
  --u-surface:rgba(255,255,255,.78);
  --u-surface-solid:#fff;
  --u-text:#101828;
  --u-muted:#667085;
  --u-border:rgba(98,111,168,.16);
  --u-primary:#635bff;
  --u-primary2:#8b5cf6;
  --u-cyan:#06b6d4;
  --u-green:#10b981;
  --u-shadow:0 24px 80px rgba(45,55,110,.12);
  --u-shadow-sm:0 10px 35px rgba(45,55,110,.09);
  --u-radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 5% -10%,rgba(99,91,255,.17),transparent 30%),
    radial-gradient(circle at 105% 10%,rgba(6,182,212,.13),transparent 27%),
    linear-gradient(135deg,var(--u-bg),#f8faff 52%,var(--u-bg2));
  color:var(--u-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.32;
  background-image:linear-gradient(rgba(99,91,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(99,91,255,.035) 1px,transparent 1px);
  background-size:34px 34px;mask-image:linear-gradient(to bottom,black,transparent 82%);
}
::selection{background:rgba(99,91,255,.22);color:#111827}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--u-primary),var(--u-cyan));border-radius:99px}
a{transition:color .2s ease,opacity .2s ease,transform .2s ease}

/* Bootstrap polish */
.container,.container-fluid{position:relative}
.card,.cardx,.section-card,.login-box,.auth,.balance,.topbar,.navbar,.modal-content,.dropdown-menu{
  border-color:var(--u-border)!important;
}
.card,.cardx,.section-card,.login-box,.auth,.modal-content{
  border-radius:var(--u-radius)!important;
  box-shadow:var(--u-shadow)!important;
}
.btn{
  border-radius:13px!important;font-weight:750!important;letter-spacing:.01em;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease!important;
}
.btn:hover{transform:translateY(-2px);filter:saturate(1.08)}
.btn-primary,.btn-main,.btn-primary:hover{
  background:linear-gradient(135deg,var(--u-primary),var(--u-primary2))!important;
  border-color:transparent!important;color:#fff!important;
  box-shadow:0 12px 28px rgba(99,91,255,.26)!important;
}
.btn-success{box-shadow:0 10px 24px rgba(16,185,129,.18)}
.btn-light,.btn-outline-secondary{
  background:rgba(255,255,255,.72)!important;border-color:var(--u-border)!important;
  box-shadow:0 7px 20px rgba(30,41,80,.06)!important;
}
.form-control,.form-select,.filter,input,select,textarea{
  border:1px solid var(--u-border)!important;border-radius:13px!important;
  background:rgba(255,255,255,.84)!important;color:var(--u-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
  transition:border-color .2s,box-shadow .2s,transform .2s!important;
}
.form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus{
  border-color:rgba(99,91,255,.55)!important;
  box-shadow:0 0 0 4px rgba(99,91,255,.10),0 8px 25px rgba(99,91,255,.08)!important;
  transform:translateY(-1px);
}
.form-label,label{font-weight:750!important;color:#344054}
.alert{border:1px solid transparent!important;border-radius:15px!important;box-shadow:var(--u-shadow-sm)}
.table{--bs-table-bg:transparent}
.table thead th,th{
  background:rgba(99,91,255,.055)!important;color:#667085!important;
  border-bottom:1px solid var(--u-border)!important;font-size:.72rem!important;
  text-transform:uppercase;letter-spacing:.07em;font-weight:800!important;
}
.table tbody tr{transition:background .18s,transform .18s}
.table tbody tr:hover{background:rgba(99,91,255,.035)!important}
.badge{border-radius:999px!important;padding:.48em .75em!important}

/* App shell */
.app-shell{background:transparent!important}
.sidebar{
  background:linear-gradient(180deg,#080b18 0%,#0e1230 48%,#121736 100%)!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  box-shadow:18px 0 60px rgba(12,18,48,.20)!important;
}
.sidebar:after{
  content:"";position:absolute;left:-80px;bottom:70px;width:250px;height:250px;
  background:radial-gradient(circle,rgba(99,91,255,.27),transparent 68%);pointer-events:none;
}
.brand{position:relative;z-index:2}
.brand-mark{
  background:linear-gradient(135deg,#635bff,#06b6d4)!important;
  box-shadow:0 0 30px rgba(99,91,255,.42),inset 0 1px 0 rgba(255,255,255,.35)!important;
  border:1px solid rgba(255,255,255,.18)!important;
}
.brand-name{letter-spacing:-.03em}
.nav a,.side-link{
  position:relative;border:1px solid transparent!important;color:#b8c1d9!important;
  border-radius:13px!important;margin:4px 8px!important;padding:12px 13px!important;
}
.nav a:hover,.nav a.active,.side-link:hover,.side-link.active{
  color:#fff!important;background:linear-gradient(90deg,rgba(99,91,255,.20),rgba(6,182,212,.08))!important;
  border-color:rgba(139,92,246,.20)!important;box-shadow:inset 3px 0 0 #7c6cff,0 8px 25px rgba(0,0,0,.12)!important;
  transform:translateX(2px);
}
.nav-icon,.side-link i{filter:drop-shadow(0 0 8px rgba(99,91,255,.35));font-size:1.05em}
.topbar{
  background:rgba(255,255,255,.66)!important;backdrop-filter:blur(22px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:0 8px 30px rgba(40,50,100,.05)!important;
}
.content{padding-top:30px!important}
.page-head h1{font-weight:900;letter-spacing:-.045em}

/* Dashboard / service cards */
.stat-card,.service-card,.cardx,.section-card,.card{
  background:var(--u-surface)!important;backdrop-filter:blur(18px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--u-border)!important;
  box-shadow:var(--u-shadow-sm)!important;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important;
}
.stat-card:hover,.service-card:hover,.cardx:hover,.section-card:hover,.card:hover{
  transform:translateY(-5px);box-shadow:0 28px 75px rgba(45,55,110,.15)!important;
  border-color:rgba(99,91,255,.23)!important;
}
.stat-icon,.service-icon{
  background:linear-gradient(135deg,rgba(99,91,255,.13),rgba(6,182,212,.10))!important;
  color:var(--u-primary)!important;border:1px solid rgba(99,91,255,.10)!important;
  box-shadow:inset 0 1px 0 #fff,0 8px 25px rgba(99,91,255,.09)!important;
}
.service-card h3{font-weight:850;letter-spacing:-.025em}
.price{font-size:1.05rem}

/* Futuristic headings */
.page-head:after,.section:before{content:""}
h1,h2,h3,h4,h5,h6{letter-spacing:-.025em}
.text-primary{color:var(--u-primary)!important}

/* Tables / data */
.table-wrap,.table-responsive{border-radius:18px}
.table tbody td{vertical-align:middle}
.reference,.data-item,.data-box{
  border-radius:12px!important;
}

/* Login */
.login-page,.auth-wrap{
  background:
    radial-gradient(circle at 15% 10%,rgba(99,91,255,.40),transparent 28%),
    radial-gradient(circle at 90% 85%,rgba(6,182,212,.22),transparent 30%),
    #080b16!important;
}
.auth{
  background:rgba(255,255,255,.90)!important;backdrop-filter:blur(25px)!important;
}
.promo{
  background:
    radial-gradient(circle at 85% 20%,rgba(6,182,212,.24),transparent 22%),
    linear-gradient(145deg,#111632,#312e81 58%,#164e63)!important;
  position:relative;overflow:hidden;
}
.promo:after{content:"";position:absolute;width:340px;height:340px;right:-180px;bottom:-180px;border:1px solid rgba(255,255,255,.15);border-radius:50%;box-shadow:0 0 0 50px rgba(255,255,255,.025),0 0 0 100px rgba(255,255,255,.018)}
.promo h1{font-weight:950;letter-spacing:-.065em;line-height:.98}
.brand{font-weight:900;letter-spacing:-.04em}

/* Navigation / headers */
.navbar-dark,.top{background:linear-gradient(100deg,#080b18,#181c42,#0f172a)!important;box-shadow:0 15px 45px rgba(10,15,40,.20)!important}
.navbar-brand{font-weight:900;letter-spacing:-.04em}

/* Wallet / balances */
.balance{
  background:
    radial-gradient(circle at 85% 15%,rgba(6,182,212,.35),transparent 24%),
    linear-gradient(135deg,#312e81,#635bff 50%,#0e7490)!important;
  box-shadow:0 24px 55px rgba(67,56,202,.27)!important;position:relative;overflow:hidden;
}
.balance:after{content:"";position:absolute;width:210px;height:210px;right:-100px;top:-110px;border:1px solid rgba(255,255,255,.18);border-radius:50%;box-shadow:0 0 0 35px rgba(255,255,255,.04),0 0 0 70px rgba(255,255,255,.025)}
.balance strong{letter-spacing:-.05em}
.quick{border:1px solid var(--u-border)!important;border-radius:12px!important;background:rgba(255,255,255,.72)!important;transition:.2s!important}
.quick:hover{transform:translateY(-2px);border-color:rgba(99,91,255,.35)!important;box-shadow:0 10px 25px rgba(99,91,255,.10)}

/* Admin */
.admin-card,.top .cardx{backdrop-filter:blur(18px)}
.num{font-weight:900;letter-spacing:-.05em}

/* Icons: make every Bootstrap icon feel intentional */
.bi{vertical-align:-.1em}
.btn .bi,.nav-link .bi,a .bi{transition:transform .2s ease}
.btn:hover .bi,a:hover .bi{transform:translateX(2px)}

/* Search / filters */
.search input{background:rgba(255,255,255,.82)!important}
.search span{color:var(--u-primary)!important}

/* Empty states */
.empty{padding:60px 25px!important}
.empty i{font-size:3rem;display:block;margin-bottom:14px;color:var(--u-primary)}

/* Motion */
@keyframes uFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hero-icon,.stat-icon{animation:uFloat 5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Mobile */
@media(max-width:800px){
  .topbar{height:68px!important}
  .content{padding:20px 14px!important}
  .page-head h1{font-size:25px}
  .sidebar{box-shadow:25px 0 80px rgba(5,8,25,.38)!important}
}
@media(max-width:480px){
  .card,.cardx,.section-card,.stat-card,.service-card{border-radius:18px!important}
  .btn{min-height:42px}
}