:root{
  --bg0:#070a13;
  --bg1:#0b1635;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.09);
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.72);
  --border:rgba(255,255,255,.12);
  --shadow: 0 24px 80px rgba(0,0,0,.35);
  --accent:#2f7dff;
  --accent2:#7c4dff;
}

html[data-theme="light"]{
  --bg0:#f5f8ff;
  --bg1:#dbe8ff;
  --card:rgba(255,255,255,.72);
  --card2:rgba(255,255,255,.82);
  --text:#0c1020;
  --muted:rgba(12,16,32,.65);
  --border:rgba(12,16,32,.12);
  --shadow: 0 24px 60px rgba(20,36,86,.15);
  --accent:#1d6bff;
  --accent2:#6a3dff;
}

*{box-sizing:border-box}
body{color:var(--text); background:radial-gradient(1200px 700px at 30% 20%, var(--bg1), var(--bg0)); min-height:100vh; overflow-x:hidden}
.text-muted-2{color:var(--muted)}
.bg-aurora{position:relative}
/* Layering safety: keep background behind and never block clicks */
.aurora-layer,.float-shapes,.float-shapes *{pointer-events:none !important;}
main{position:relative; z-index:1;}

.aurora-layer{
  position:fixed; inset:-20%;
  background:
    radial-gradient(500px 300px at 20% 20%, rgba(47,125,255,.35), transparent 60%),
    radial-gradient(600px 340px at 80% 30%, rgba(124,77,255,.28), transparent 60%),
    radial-gradient(600px 340px at 70% 80%, rgba(0,255,213,.18), transparent 60%);
  filter: blur(26px);
  animation: drift 10s ease-in-out infinite alternate;
  z-index:0;
  pointer-events:none;
}
@keyframes drift{
  0%{transform:translate3d(-2%, -1%,0) scale(1)}
  100%{transform:translate3d(2%, 1%,0) scale(1.05)}
}
.float-shapes{position:fixed; inset:0; z-index:0; pointer-events:none}
.shape{
  pointer-events:none;
  position:absolute; border-radius:999px; background:rgba(255,255,255,.08);
  filter: blur(2px);
  box-shadow: 0 0 60px rgba(47,125,255,.18);
  animation: floaty 7s ease-in-out infinite;
}
.shape.s1{width:240px;height:240px; left:-70px; top:80px; animation-duration:9s}
.shape.s2{width:180px;height:180px; right:-50px; top:120px; animation-duration:8s}
.shape.s3{width:260px;height:260px; right:12%; bottom:-90px; animation-duration:10s}
.shape.s4{width:140px;height:140px; left:18%; bottom:18%; animation-duration:7s}
@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-18px)}
}

.auth-top{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 20px;
}
.topbar{
  position:sticky; top:0; z-index:3;
  backdrop-filter: blur(12px);
  background: rgba(0,0,0,.12);
  border-bottom: 1px solid var(--border);
}

.brand-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  background:var(--card); border:1px solid var(--border);
  text-decoration:none; color:var(--text);
  box-shadow: var(--shadow);
  transform: translateZ(0);
}
.brand-chip:hover{transform: translateY(-1px)}
.brand-icon{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(47,125,255,.7), rgba(124,77,255,.55));
  border:1px solid rgba(255,255,255,.16);
}
.brand-logo{width:34px;height:34px;border-radius:12px; object-fit:cover; border:1px solid rgba(255,255,255,.16)}
.brand-name{font-weight:700; letter-spacing:.2px}

.icon-btn{
  width:44px;height:44px;border-radius:14px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  display:grid;place-items:center;
  box-shadow: var(--shadow);
  transition: transform .18s ease, background .18s ease;
}
.icon-btn:hover{transform: translateY(-2px) scale(1.03); background:var(--card2)}
.icon-btn:active{transform: scale(.96)}

.notif-dot{
  position:absolute; top:-6px; right:-6px;
  min-width:20px;height:20px;border-radius:999px;
  background:#ff3b5c; color:white;
  display:grid;place-items:center;
  font-size:12px; font-weight:800;
  border:2px solid rgba(0,0,0,.25);
}

.auth-wrap{position:relative; z-index:2; display:grid; place-items:center; padding:30px 16px;}
.glass-card{
  background: linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid var(--border);
  border-radius: 26px;
  box-shadow: var(--shadow);
}
.auth-card{width:min(520px, 92vw); padding:28px; animation: popin .35s ease}
@keyframes popin{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none}}
.logo-badge{
  width:54px;height:54px;border-radius:18px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(47,125,255,.85), rgba(124,77,255,.65));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 55px rgba(47,125,255,.22);
}

.hero{border-radius:26px}
.glass{background: linear-gradient(180deg, var(--card2), var(--card)); border:1px solid var(--border); box-shadow: var(--shadow); border-radius:26px}
.feature-card{
  border-radius:22px;
  transition: transform .18s ease, box-shadow .18s ease;
  position:relative; overflow:hidden;
  animation: floaty 6.5s ease-in-out infinite;
}
.feature-card:hover{transform: translateY(-4px) scale(1.02)}
.feature-card:active{transform: scale(.985)}
.feature-card::after{
  content:""; position:absolute; inset:-40%;
  background: radial-gradient(closest-side, rgba(255,255,255,.12), transparent 70%);
  transform: translateX(-40%);
  transition: transform .4s ease;
}
.feature-card:hover::after{transform: translateX(40%)}

.icon-badge{
  width:54px;height:54px;border-radius:18px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.08);
  border:1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.btn-soft{
  background: var(--card);
  border:1px solid var(--border);
  color:var(--text);
}
.btn-soft:hover{background:var(--card2); color:var(--text)}
.link-soft{color:var(--text); opacity:.85; text-decoration:none}
.link-soft:hover{opacity:1; text-decoration:underline}

.table-darkish{
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: rgba(255,255,255,.06);
}

.stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; min-width:min(520px, 100%)}
.stat{padding:14px 16px; border-radius:20px}
@media (max-width: 900px){
  .stats{grid-template-columns:1fr}
}

/* Ripple + "pop" effect */
.needs-ripple, .pop-btn{position:relative; overflow:hidden}
.ripple{
  position:absolute; border-radius:999px; transform: scale(0);
  animation: ripple .6s ease-out;
  background: rgba(255,255,255,.32);
  pointer-events:none;
}
@keyframes ripple{to{transform: scale(6); opacity:0}}

/* Mobile compact cards (Home) */
@media (max-width: 767.98px){
  .feature-card{
    border-radius:18px;
  }
  .feature-card .icon-badge{
    width:44px; height:44px; border-radius:14px;
  }
  .feature-card .icon-badge i{
    font-size:1.15rem;
  }
  .feature-title{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }
}