:root{
  --bg1:#0f172a;--bg2:#0b3948;--accent:#7dd3fc;--card:#0b1220;--muted:#94a3b8
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial}
body{background:radial-gradient(1000px 600px at 10% 10%, rgba(125,211,252,0.06), transparent), linear-gradient(180deg,var(--bg1),var(--bg2));color:#e6eef8}
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px}
.card{width:420px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:14px;padding:28px;box-shadow:0 10px 30px rgba(2,6,23,0.6);backdrop-filter: blur(6px);position:relative;overflow:hidden}
.logo{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.logo .dot{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#60a5fa);box-shadow:0 6px 20px rgba(99,102,241,0.14);display:flex;align-items:center;justify-content:center;font-weight:700;color:#012}
.title{font-size:20px;font-weight:700}
.subtitle{font-size:13px;color:var(--muted);margin-top:4px}
/* make placeholder text more readable */
input::placeholder, textarea::placeholder, select::placeholder{ color: #ffffff; opacity: 0.9 }
/* support full-width card variant */
.card.full{width:100%;max-width:none;padding:28px}
form{margin-top:16px}
.field{margin-top:12px;position:relative}
.field input, .field select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:inherit;font-size:14px;transition:all .22s}
.field input:focus{outline:none;transform:translateY(-2px);box-shadow:0 8px 30px rgba(13,71,161,0.12);border-color:rgba(125,211,252,0.28)}
.field select{color:#ffffff;background:rgba(255,255,255,0.02);}
.btn{margin-top:16px;width:100%;padding:12px;border-radius:10px;background:linear-gradient(90deg,var(--accent),#60a5fa);border:none;color:#04233a;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(125,211,252,0.12);transition:transform .18s;text-align:center;text-decoration:none}
.btn:active{transform:translateY(1px)}
.muted{color:var(--muted);font-size:13px}
.floating-shape{position:absolute;border-radius:50%;filter:blur(36px);opacity:0.25}
.shape1{width:260px;height:260px;left:-80px;top:-60px;background:linear-gradient(45deg,#7dd3fc,#60a5fa)}
.shape2{width:160px;height:160px;right:-50px;bottom:-40px;background:linear-gradient(45deg,#7dd3fc, #06b6d4)}
/* users list */
.tools{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.search{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);color:inherit}
table{width:100%;border-collapse:collapse;background:transparent}
th,td{padding:12px 10px;text-align:left;border-bottom:1px dashed rgba(255,255,255,0.03)}
tr{transition:transform .18s,background .18s}
tr:hover{transform:translateX(6px);background:linear-gradient(90deg, rgba(125,211,252,0.02), rgba(255,255,255,0.01))}
.small{font-size:13px;color:var(--muted)}

/* action icons */
.action-icon{display:inline-flex;align-items:center;gap:6px;color:#ffffff;text-decoration:none}
.action-icon svg{width:18px;height:18px;fill:currentColor}
.action-btn{background:transparent;border:none;color:#fff;padding:6px 8px;border-radius:6px;cursor:pointer;text-decoration:none}
.action-btn:hover{background:rgba(255,255,255,0.03)}
.card .small a, .card a.small{color:var(--accent);text-decoration:none}

/* subtle entrance */
.fade-in{opacity:0;transform:translateY(8px);animation:fadeUp .6s forwards cubic-bezier(.2,.9,.2,1)}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* responsive */
@media (max-width:520px){.card{width:92vw;padding:18px}.logo .dot{width:40px;height:40px}}

/* ensure dot (logo) shows white icon */
.logo .dot{color:#ffffff}