body::before {
  inset: -64px;
  animation: background-drift 28s linear infinite;
}

@keyframes background-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(64px, 64px, 0); }
}

.portal-title {
  margin: 14px 0 9px;
  color: var(--red2);
  font-size: clamp(25px, 4vw, 34px);
  font-weight: 900;
  letter-spacing: .12em;
}

.auth img {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

.empty-state {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 760px;
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px solid #ffffff12;
  border-radius: 15px;
  background: linear-gradient(145deg, #17171cbb, #101014bb);
  color: #c5c5cc;
}

.empty-state p { margin: 0; }

.empty-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #e6394616;
  color: var(--red2);
  font-size: 21px;
}

.brand b,
.conjures-glow {
  position: relative;
  color: #fff;
  text-shadow: 0 0 7px #fff8, 0 0 18px #ff596488, 0 0 34px #e6394655;
  animation: title-pulse 3.4s ease-in-out infinite;
}

.brand b::before,
.brand b::after,
.conjures-glow::before,
.conjures-glow::after {
  content: "✦";
  position: absolute;
  color: #fff;
  font-size: .45em;
  filter: drop-shadow(0 0 5px #ff5964);
  animation: sparkle 2.6s ease-in-out infinite;
}

.brand b::before,.conjures-glow::before { top: -.65em; right: -.7em; }
.brand b::after,.conjures-glow::after { content: "✦"; bottom: -.45em; left: -.75em; font-size: .34em; animation-delay: 1.15s; }

.profile-card,
.login-card {
  position: relative;
  isolation: isolate;
  border-color: transparent;
}

.profile-card::before,
.login-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  padding: 1px;
  border-radius: 20px;
  background: conic-gradient(from var(--border-angle),transparent 0 72%,#ffffff55 82%,#fff 89%,#ffffff55 96%,transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-orbit 5s linear infinite;
  filter: drop-shadow(0 0 5px #ffffff99);
}

.logout { width: auto; min-width: 70px; padding: 0 13px; font-size: 12px; display: grid; place-items: center; }

.disabled { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 40px; }
.profile-details { min-width: 0; flex: 1; }
.role-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.profile-tag { display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--role) 38%, transparent); background: color-mix(in srgb, var(--role) 16%, transparent); color: var(--role); font-size: 11px; letter-spacing: .075em; font-weight: 850; text-transform: uppercase; box-shadow: 0 0 18px color-mix(in srgb, var(--role) 10%, transparent); }
#add-section { margin-top: 14px; }
.question-editor .row { margin-bottom: 10px; }
.section-title + .section-desc { margin-top: 10px; }
.q-options { margin-top: 10px; }

@property --border-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes border-orbit { to { --border-angle: 360deg; } }
@keyframes title-pulse { 50% { text-shadow: 0 0 10px #fff,0 0 25px #ff5964aa,0 0 42px #e6394677; } }
@keyframes sparkle { 0%,100% { opacity: .15; transform: scale(.55) rotate(0); } 45% { opacity: 1; transform: scale(1.25) rotate(90deg); } }

@media (prefers-reduced-motion: reduce) {
  body::before,.brand b,.conjures-glow,.brand b::before,.brand b::after,.conjures-glow::before,.conjures-glow::after,.profile-card::before { animation: none; }
}