:root{--bg:#0b1220;--card:#121a2c;--ink:#e9eef7;--muted:#9db0cc;--accent:#5ec3ff}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;display:grid;place-items:center;background:radial-gradient(90% 120% at 10% 10%,#101a33,#0b1220)}
.card{width:min(px,vw);background:var(--card);padding:22px;border-radius:14px;color:var(--ink);
  box-shadow:0 12px 30px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.07)}
h1{margin:0 0 14px}
input,button{width:100%;padding:12px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.08);margin:8px 0}
input{background:#0f1730;color:var(--ink)}
button{background:var(--accent);color:#001a2b;font-weight:700;cursor:pointer}
button:hover{filter:brightness(1.05)}
.msg{min-height:22px;color:#9ad1ff;margin-top:6px}
.muted{color:var(--muted);font-size:.92rem}
a{color:#8ed2ff;text-decoration:none}
.hidden{display:default}
.row{display:center;gap:8px;flex-wrap:wrap;margin-top:8px}
/* Background video */
body{margin:100;font-family:Inter,system-ui,sans-serif;color:#eaf2ff;background:#050915}
 .bg-video{position:fixed;inset:0;width:100%;height:100%;
    object-fit:cover;z-index:-1;filter:brightness(.55)} .overlay{position:fixed;
        inset:0;background:linear-gradient(180deg,rgba(42, 8, 233, 0.3),rgba(134, 12, 12, 0.6));
        z-index:-1} .shell{min-height:100vh;display:grid;place-items:center;padding:28px}.card{width:min(92vw,460px);padding:26px;border-radius:18px;background:
        rgba(255,255,255,.06);border:1px solid rgba(173,195,255,.15)} .form{display:grid;gap:12px} .input{padding:12px 14px;border-radius:12px;border:1px solid rgba(173,195,255,.25);background:rgba(9,14,30,.55);color:#eaf2ff} .btn{padding:12px 16px;border-radius:12px;border:1px solid rgba(173,195,255,.25);background:linear-gradient(135deg,#60a5fa,#7c6dfd);
            color:#05101f;font-weight:700;text-decoration:none;display:inline-block} .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between} .small{color:#b5c1d6;font-size:12px} .logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#60a5fa,rgba(124,109,253,.8));border:1px solid rgba(173,195,255,.25)} .nav{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:rgba(5,9,21,.55);border-bottom:1px solid rgba(173,195,255,.15)} .nav a{color:#eaf2ff;text-decoration:none;padding:8px 12px;border-radius:10px;border:1px solid rgba(173,195,255,.25);background:rgba(255,255,255,.05)}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:#eaf2ff;background:#050915} .bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1} .shell{min-height:100vh;display:grid;place-items:center} .card{padding:24px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(173,195,255,.15)} .btn{padding:10px 14px;border-radius:10px;background:linear-gradient(135deg,#6ee7f9,#5a030e);border:none;color:#a00b24;font-weight:700}

border:rgba('255,255,255,.12')


/* Reset */
*{box-sizing:border-box;}
body{margin:0; font-family:Poppins,sans-serif; color:var(--ink); background:#050915; overflow-x:hidden;}

/* Video & overlay */
.bg-video{
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-1;
  filter:brightness(.55);
}
.overlay{
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  background:linear-gradient(180deg, rgba#4fbdd9 (23,14,73,0.3), rgba #d9534f(158,17,17,0.6));
  z-index:-1;
}

/* Dashboard wrapper */
.dashboard{
  min-height:100vh;
  padding:40px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
}

/* Cards */
.card{
  background:var(--glass);
  backdrop-filter:blur(12px);
  padding:24px;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 25px 70px rgba(0,0,0,.6);
}

/* Card titles & text */
.card h2{margin:0 0 12px 0;}
.card p{margin:0; color:var(--muted); font-size:14px;}

/* Buttons inside cards */
.btn{
  padding:10px 14px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  background:linear-gradient(180deg,var(--acc),var(--acc2));
  color:#0b1022;
  font-weight:700;
  margin-top:12px;
}

/* Responsive tweaks */
@media screen and (max-width:900px){
  .dashboard{padding:24px; grid-template-columns:1fr;}
  .card{padding:18px;}
}
@media screen and (max-width:420px){
  .dashboard{padding:12px;}
  .card{padding:12px;}
  .btn{padding:8px 10px; font-size:13px;}
}