:root {
  --v2-glow: rgba(139, 92, 246, .34);
  --v2-cyan: rgba(34, 211, 238, .26);
  --v2-panel: rgba(9, 13, 28, .78);
  --v2-line: rgba(167, 139, 250, .22);
}

body::before,
body::after {
  content: "";
  position: fixed;
  width: 42rem;
  height: 42rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .32;
  pointer-events: none;
  z-index: -2;
  animation: v2-drift 18s ease-in-out infinite alternate;
}
body::before { top: -18rem; left: -14rem; background: var(--v2-glow); }
body::after { right: -18rem; bottom: -20rem; background: var(--v2-cyan); animation-delay: -7s; }

.app-shell { position: relative; isolation: isolate; }
.app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 88%);
  animation: v2-grid 24s linear infinite;
}

.topbar,
.panel,
.portal-panel,
.hyper-card,
.admin-header,
.admin-quick-panel {
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

button, input, select, textarea, .panel, .portal-panel, .hyper-card {
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease, opacity .2s ease;
}
button:not(:disabled):active { transform: translateY(1px) scale(.985); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(103, 232, 249, .8);
  outline-offset: 3px;
}

.is-loading { position: relative; cursor: wait; }
.is-loading::after {
  content: "";
  width: 15px;
  height: 15px;
  margin-left: 9px;
  display: inline-block;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -3px;
  animation: v2-spin .7s linear infinite;
}

.admin-portal .view-switch,
.user-portal .view-switch { display: none !important; }
.user-portal #adminView { display: none !important; }
.admin-portal #userView:not(.active),
.admin-portal #dashboardView { display: none !important; }
.admin-portal #adminView.active { animation: v2-enter .38s cubic-bezier(.2,.8,.2,1); }
.admin-portal .topbar .eyebrow { color: #c4b5fd; }
.admin-portal .topbar h1 { font-size: clamp(1rem, 2vw, 1.35rem); }
.admin-portal .admin-header {
  border: 1px solid var(--v2-line);
  background: linear-gradient(135deg, rgba(17,24,39,.9), rgba(30,27,75,.64));
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 22px 70px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.05);
}
.admin-portal .admin-section-tab { min-height: 48px; }
.admin-portal .admin-section-tab.is-active { box-shadow: 0 0 0 1px rgba(167,139,250,.34), 0 12px 30px rgba(76,29,149,.22); }

.form-message:not(:empty), .feature-action-message.show {
  animation: v2-message .28s ease-out;
}

@keyframes v2-spin { to { transform: rotate(360deg); } }
@keyframes v2-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes v2-message { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes v2-drift { to { transform: translate3d(10vw, 7vh, 0) scale(1.08); } }
@keyframes v2-grid { to { background-position: 46px 46px; } }

@media (max-width: 720px) {
  body::before, body::after { width: 24rem; height: 24rem; filter: blur(70px); opacity: .22; }
  .admin-portal .admin-header { padding: 16px; border-radius: 18px; }
  .admin-portal .button-row { width: 100%; display: grid; grid-template-columns: 1fr; }
  .admin-portal .button-row button { width: 100%; min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}