*{margin:0;padding:0;box-sizing:border-box}
body{
  min-height:100vh;display:flex;flex-direction:column;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  background:#0a0a0a;color:#fff;overflow-x:hidden;
}
.bg{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -20%,rgba(88,28,135,.35),transparent),
    radial-gradient(ellipse 60% 50% at 80% 50%,rgba(15,23,42,.6),transparent),
    radial-gradient(ellipse 60% 50% at 20% 80%,rgba(30,58,138,.25),transparent);
}
header{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 2.5rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
header .brand{
  text-decoration:none;
  font-size:1.25rem;font-weight:700;letter-spacing:-.03em;
  background:linear-gradient(135deg,#e0e7ff 0%,#a78bfa 50%,#7c3aed 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
header .brand .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#7c3aed;margin-left:1px;vertical-align:super;
  box-shadow:0 0 12px rgba(124,58,237,.6);
}
header nav{display:flex;gap:2rem}
header nav a{
  color:rgba(255,255,255,.45);text-decoration:none;font-size:.9rem;
  font-weight:400;letter-spacing:.04em;transition:color .2s;
}
header nav a:hover,header nav a.active{color:rgba(255,255,255,.9)}

/* ── header profile ── */
.header-profile{
  display:flex;align-items:center;gap:.5rem;
  text-decoration:none;color:rgba(255,255,255,.45);
  font-size:.88rem;font-weight:400;letter-spacing:.02em;
  transition:color .2s;
}
.header-profile:hover,.header-profile.active{color:rgba(255,255,255,.9)}
.header-avatar{
  width:26px;height:26px;border-radius:50%;
  border:1.5px solid rgba(124,58,237,.4);object-fit:cover;
}
.header-avatar-placeholder{
  width:26px;height:26px;border-radius:50%;
  border:1.5px solid rgba(124,58,237,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:600;
  background:rgba(124,58,237,.15);color:#a78bfa;
}
.header-avatar-icon{
  width:22px;height:22px;color:rgba(255,255,255,.35);
}
.header-profile:hover .header-avatar-icon{color:rgba(255,255,255,.7)}
.header-profile-label{white-space:nowrap}

footer{
  position:relative;z-index:1;text-align:center;padding:1.5rem;
  border-top:1px solid rgba(255,255,255,.06);
}
footer p{
  font-size:.75rem;color:rgba(255,255,255,.25);font-weight:300;
  letter-spacing:.05em;
}