/* Design System – Dark Academia Tech */
:root {
  /* Palette */
  --color-bg-deep: #07080F;
  --color-surface-card: rgba(255,255,255,0.04);
  --color-border-subtle: rgba(255,255,255,0.10);
  --color-primary: #7A8CFF;
  --color-secondary: #C77DFF;
  --color-success: #38F5B4;
  --color-danger: #FF7A56;
  --color-text-primary: #F0F2FF;
  --color-text-secondary: #9DA3BF;
  --color-text-tertiary: #5C6080;
  /* Typography */
  --font-syne: 'Syne', sans-serif;
  --font-dm: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  /* Radii */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
}
/* Keyframes */
@keyframes slideDown { from { transform: translateY(-60px); opacity:0; } to { transform: translateY(0); opacity:1; } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
/* Utility classes */
.glass { background: var(--color-surface-card); backdrop-filter: blur(24px); border:1px solid var(--color-border-subtle); border-radius: var(--radius-lg); }
.topbar { height:60px; position:fixed; top:0; left:0; right:0; z-index:100; background: rgba(7,8,15,0.85); backdrop-filter: blur(20px); border-bottom:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; padding:0 1rem; animation: slideDown 0.55s ease-out forwards; }
.login-card { max-width:420px; margin:auto; padding:52px 44px 44px; border-radius: var(--radius-lg); background: var(--color-surface-card); backdrop-filter: blur(24px); border:1px solid var(--color-border-subtle); position:relative; overflow:hidden; }
.login-card::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent); }
.btn-primary { display:inline-block; padding:0.6rem 1.2rem; border:none; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: var(--color-text-primary); cursor:pointer; transition:transform 0.1s, box-shadow 0.2s; }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 20px rgba(122,140,255,0.35); }
.btn-primary:active { transform:scale(0.97); }
.progress-bar { height:4px; background:rgba(255,255,255,0.08); border-radius: var(--radius-sm); overflow:hidden; }
.progress-fill { height:100%; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); animation: shimmer 2s infinite; }
.option-item { padding:18px 22px; border-radius:20px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.025); display:flex; align-items:center; gap:16px; cursor:pointer; transition:all 0.18s cubic-bezier(0.4,0,0.2,1); }
.option-item:hover { transform:translateX(4px); border-color:rgba(122,140,255,0.4); }
.option-item.selected { border-color:var(--color-primary); background:rgba(122,140,255,0.12); }
#global-bg { position:fixed; inset:0; z-index:0; pointer-events:none; }