#canvas-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.glass {
  background: rgba(28, 32, 40, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.rim-light {
  box-shadow:
    inset 0 1px 0 rgba(224, 226, 237, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.35);
}

.pulse-border {
  animation: pulse-border 3s ease-in-out infinite;
}

@keyframes pulse-border {
  0%, 100% { border-color: rgba(139, 144, 160, 0.5); }
  50% { border-color: rgba(173, 198, 255, 0.6); }
}

.pulse-orb {
  animation: pulse-orb 2.5s ease-in-out infinite;
}

@keyframes pulse-orb {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(173, 198, 255, 0.2); }
  50% { transform: scale(1.03); box-shadow: 0 0 30px 8px rgba(173, 198, 255, 0.15); }
}

.glow-button {
  box-shadow: 0 0 24px rgba(75, 142, 255, 0.35);
}

.glow-button:hover {
  box-shadow: 0 0 32px rgba(75, 142, 255, 0.5);
}

.fade-slide-up {
  animation: fade-slide-up 0.7s ease-out both;
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.25s; }

@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.file-drop-area.dragover {
  border-color: rgba(173, 198, 255, 0.9) !important;
  background: rgba(75, 142, 255, 0.08);
}

#file-list {
  width: 100%;
  max-width: 360px;
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}

#error-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 12px 24px;
  border-radius: 8px;
  background: #93000a;
  color: #ffdad6;
  font-size: 14px;
  transition: opacity 0.3s ease;
  max-width: 90vw;
  text-align: center;
}

#success-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 14, 22, 0.75);
  backdrop-filter: blur(8px);
  padding: 24px;
}

#success-modal.hidden {
  display: none;
}

#success-modal > div {
  width: 100%;
  max-width: 520px;
}

#contact-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 14, 22, 0.75);
  backdrop-filter: blur(8px);
  padding: 24px;
}

#contact-modal.hidden {
  display: none;
}

#contact-modal > div {
  width: 100%;
  max-width: 480px;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

@media (max-width: 768px) {
  .font-display-lg { font-size: 32px !important; line-height: 40px !important; }
}