*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Arial,sans-serif}

:root{
  --bg:#1f2329;
  --bg-card:rgba(35,40,46,.92);
  --bg-input:#2a3038;
  --bg-input-focus:#313843;
  --border:rgba(255,255,255,.05);
  --border-focus:#5d6a7a;
  --text:#f3f4f6;
  --text-secondary:#9ca6b3;
  --text-muted:#7f8a98;
  --btn-top:#505c6b;
  --btn-bottom:#3f4956;
  --accent:#7e8b9c;
  --success:#6abf8a;
  --error:#c0616a;
}

body{
  height:100vh;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  background:
    radial-gradient(circle at top left,rgba(255,255,255,0.03),transparent 30%),
    radial-gradient(circle at bottom right,rgba(255,255,255,0.02),transparent 25%),
    var(--bg);
  color:var(--text);
}

.grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);
  background-size:40px 40px;opacity:.35;
}

.glow{
  position:absolute;width:500px;height:500px;border-radius:50%;
  background:rgba(70,90,120,.15);filter:blur(120px);
  animation:glow-move 10s ease-in-out infinite alternate;
}

@keyframes glow-move{
  from{transform:translate(-120px,-80px)}
  to{transform:translate(120px,80px)}
}

.card{
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--border);
  backdrop-filter:blur(12px);
  box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.03);
  border-radius:14px;overflow:hidden;
  animation:fade-in .7s ease;z-index:1;
}

.card.login-card{
  width:390px;
}

@keyframes fade-in{
  from{opacity:0;transform:translateY(25px)}
  to{opacity:1;transform:translateY(0)}
}

.card-header{
  padding:28px 30px 20px;
  border-bottom:1px solid var(--border);
}

.logo{font-size:30px;font-weight:600;letter-spacing:.5px;color:#fff}
.logo span{color:var(--accent)}
.slogan{margin-top:8px;color:var(--text-secondary);font-size:13px;letter-spacing:.4px}

.card-body{padding:30px}

.card-title{font-size:21px;font-weight:500;margin-bottom:25px;color:var(--text)}

.input-group{margin-bottom:18px}
.input-group label{display:block;margin-bottom:8px;font-size:13px;color:var(--text-secondary)}

input[type="text"],input[type="password"]{
  width:100%;padding:14px;border-radius:8px;
  border:1px solid rgba(255,255,255,.06);
  background:var(--bg-input);color:#fff;outline:none;
  transition:.25s;font-size:14px;
}

input[type="text"]:focus,input[type="password"]:focus{
  border-color:var(--border-focus);
  background:var(--bg-input-focus);
  box-shadow:0 0 0 4px rgba(120,130,145,.12);
}

.row{display:flex;justify-content:space-between;align-items:center;margin:18px 0 24px;font-size:13px;color:#aab2bd}
.row label{display:flex;align-items:center;gap:7px;margin:0}
.row input{width:auto}

a{color:var(--text-secondary);text-decoration:none;transition:.2s}
a:hover{color:#fff}

.btn{
  width:100%;padding:14px;border:none;border-radius:8px;
  background:linear-gradient(180deg,var(--btn-top),var(--btn-bottom));
  color:white;font-size:14px;font-weight:600;cursor:pointer;
  transition:.25s;position:relative;overflow:hidden;
}

.btn:hover{
  background:linear-gradient(180deg,#5d6978,#495463);
  transform:translateY(-1px);
}

.btn::before{
  content:"";position:absolute;top:0;left:-120%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transition:.6s;
}

.btn:hover::before{left:120%}

.status{margin-top:18px;text-align:center;font-size:13px;min-height:20px}
.status.error{color:var(--error)}
.status.success{color:var(--success)}

.card-footer{
  padding:16px;text-align:center;
  border-top:1px solid var(--border);
  font-size:12px;color:var(--text-muted);
}

.topbar{
  position:fixed;top:0;left:0;width:100%;
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 24px;box-sizing:border-box;
  background:rgba(35,40,46,.95);
  border-bottom:1px solid var(--border);z-index:100;
  height:64px;overflow:hidden;
}

.topbar .user-info{color:var(--text-secondary);font-size:13px}

.btn-logout{
  padding:8px 18px;border:1px solid rgba(255,255,255,.08);border-radius:6px;
  background:transparent;color:var(--text-secondary);font-size:13px;
  cursor:pointer;transition:.2s;text-decoration:none;
}

.btn-logout:hover{background:rgba(255,255,255,.06);color:#fff}

.sidebar{
  position:fixed;top:64px;left:0;bottom:0;width:220px;
  background:rgba(30,34,40,.97);
  border-right:1px solid var(--border);
  padding:12px 0;overflow-y:auto;z-index:99;
}

.sb-link{
  display:flex!important;align-items:center;gap:12px;
  padding:9px 20px!important;margin:1px 8px;border-radius:8px;
  font-size:13px;color:var(--text-secondary);
  transition:all .2s ease;text-decoration:none;
  position:relative;border-left:3px solid transparent;
}

.sb-link svg{flex-shrink:0;opacity:.5;transition:all .2s ease}

.sb-link:hover{
  color:#fff;background:rgba(255,255,255,.06);
  transform:translateX(2px);
}
.sb-link:hover svg{opacity:1}

.sb-link.sb-active{
  color:#fff;background:rgba(255,255,255,.08);
  border-left-color:var(--accent);
}
.sb-link.sb-active svg{opacity:1;stroke:#60a5fa}

.sidebar .section-title{
  padding:6px 20px;font-size:10px;text-transform:uppercase;
  letter-spacing:1.2px;color:var(--text-muted);margin-top:14px;
  border-left:3px solid transparent;margin-left:8px;
}

.sb-sec-nav{border-left-color:#60a5fa}
.sb-sec-users{border-left-color:#a78bfa}
.sb-sec-ops{border-left-color:#f59e0b}
.sb-sec-analytics{border-left-color:#10b981}
.sb-sec-system{border-left-color:#ef4444}

.main-content{
  margin-top:64px;margin-left:220px;padding:30px;
  min-height:calc(100vh - 64px);width:calc(100% - 220px);
  animation:mc-fade .4s ease;
  position:relative;z-index:1;
}

@keyframes mc-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.card{transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 24px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04)}

.topbar-avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,#60a5fa,#a78bfa);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;letter-spacing:.5px;
  flex-shrink:0;
}

.waves{
  position:fixed;bottom:0;left:0;width:100%;height:35vh;min-height:180px;
  z-index:0;pointer-events:none;
}

.wave-parallax>use{animation:wave 18s cubic-bezier(.55,.5,.45,.5) infinite}
.wave-parallax>use:nth-child(1){animation-delay:-2s;animation-duration:10s;fill:rgba(42,48,56,.45)}
.wave-parallax>use:nth-child(2){animation-delay:-3s;animation-duration:14s;fill:rgba(50,58,68,.35)}
.wave-parallax>use:nth-child(3){animation-delay:-4s;animation-duration:18s;fill:rgba(60,70,82,.25)}
.wave-parallax>use:nth-child(4){animation-delay:-5s;animation-duration:24s;fill:rgba(31,35,41,.6)}

@keyframes wave{
  0%{transform:translateX(0)}
  50%{transform:translateX(-25%)}
  100%{transform:translateX(0)}
}

body.panel{
  overflow:auto;display:block;
  background:var(--bg);
}