/* ============================================================
   GLOBAL.CSS — SPCE ROBOCON / SPARK Design System
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600&family=Sora:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables ── */
:root {
  --bg-primary: #0A0A0F;
  --bg-secondary: #0D0D17;
  --bg-card: rgba(13, 13, 23, 0.85);
  --accent-cyan: #00F5FF;
  --accent-orange: #FF6B00;
  --accent-gold: #FFD700;
  --accent-green: #00FF88;
  --accent-purple: #C084FC;
  --text-primary: #E8E8F0;
  --text-muted: #6B7280;
  --border-cyan: rgba(0, 245, 255, 0.25);
  --border-cyan-bright: rgba(0, 245, 255, 0.6);
  --glow-cyan: 0 0 20px rgba(0, 245, 255, 0.4), 0 0 60px rgba(0, 245, 255, 0.15);
  --glow-orange: 0 0 20px rgba(255, 107, 0, 0.4), 0 0 60px rgba(255, 107, 0, 0.15);
  --font-heading: 'Orbitron', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Sora', sans-serif;
  --nav-height: 72px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

img { max-width: 100%; display: block; }

button {
  cursor: none;
  font-family: inherit;
  border: none;
  background: none;
}

/* ── Scroll Progress Bar ── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-orange));
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px var(--accent-cyan);
}

/* ── Star Field ── */
.star-field {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.stars-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* Generate stars via box-shadow hack */
.stars-small {
  width: 1px; height: 1px;
  background: transparent;
  box-shadow:
    234px 567px #fff, 1234px 234px #fff, 456px 890px #fff, 789px 123px #fff,
    1456px 678px #fff, 67px 345px #fff, 890px 456px #fff, 345px 789px #fff,
    1200px 90px #fff, 678px 567px #fff, 123px 678px #fff, 901px 234px #fff,
    567px 123px #fff, 1345px 456px #fff, 234px 901px #fff, 789px 678px #fff,
    456px 345px #fff, 1123px 567px #fff, 678px 890px #fff, 345px 234px #fff,
    890px 123px #fff, 1456px 345px #fff, 567px 456px #fff, 234px 789px #fff,
    901px 567px #fff, 123px 456px #fff, 1234px 678px #fff, 678px 123px #fff,
    345px 567px #fff, 789px 890px #fff, 1100px 234px #fff, 456px 678px #fff,
    890px 345px #fff, 1400px 567px #fff, 234px 123px #fff, 567px 890px #fff,
    123px 345px #fff, 1300px 456px #fff, 678px 234px #fff, 345px 123px #fff,
    789px 456px #fff, 1000px 678px #fff, 456px 234px #fff, 890px 789px #fff,
    100px 567px #fff, 1450px 234px #fff, 567px 678px #fff, 234px 456px #fff,
    789px 345px #fff, 1200px 567px #fff, 678px 789px #fff, 123px 890px #fff,
    901px 123px #fff, 1350px 678px #fff, 456px 567px #fff, 234px 345px #fff,
    789px 234px #fff, 567px 123px rgba(0,245,255,0.6), 1100px 456px rgba(0,245,255,0.4),
    345px 678px rgba(255,107,0,0.4), 890px 567px rgba(0,245,255,0.5),
    50px 200px #fff, 1500px 800px #fff, 700px 50px #fff, 400px 900px #fff,
    1000px 400px #fff, 300px 600px #fff, 1400px 100px #fff, 800px 700px #fff,
    200px 300px #fff, 1100px 800px #fff, 600px 200px #fff, 900px 500px #fff;
  animation: moveStars 200s linear infinite;
}

.stars-medium {
  width: 2px; height: 2px;
  background: transparent;
  box-shadow:
    345px 234px #fff, 890px 567px rgba(0,245,255,0.8), 1234px 123px #fff,
    456px 678px #fff, 789px 345px rgba(255,107,0,0.6), 1100px 567px #fff,
    234px 890px #fff, 678px 123px rgba(0,245,255,0.9), 1345px 456px #fff,
    901px 234px #fff, 567px 567px #fff, 123px 789px rgba(255,107,0,0.7),
    789px 678px #fff, 1456px 345px rgba(0,245,255,0.6), 345px 123px #fff,
    890px 789px #fff, 234px 456px #fff, 1200px 234px rgba(0,245,255,0.8),
    678px 890px #fff, 456px 345px #fff, 1000px 678px rgba(255,107,0,0.5),
    123px 567px #fff, 789px 456px rgba(0,245,255,0.7), 1400px 789px #fff,
    567px 234px #fff, 901px 345px #fff, 234px 678px rgba(255,107,0,0.6),
    1300px 123px #fff, 678px 456px rgba(0,245,255,0.8), 345px 890px #fff;
  animation: moveStars 130s linear infinite;
}

.stars-large {
  width: 3px; height: 3px;
  background: transparent;
  border-radius: 50%;
  box-shadow:
    456px 345px rgba(0,245,255,0.9), 1100px 234px rgba(255,107,0,0.8),
    789px 678px rgba(0,245,255,0.7), 234px 567px rgba(255,255,255,0.9),
    1345px 456px rgba(0,245,255,0.8), 678px 123px rgba(255,107,0,0.7),
    901px 789px rgba(0,245,255,0.9), 345px 234px rgba(255,255,255,0.8),
    1234px 567px rgba(255,107,0,0.6), 567px 890px rgba(0,245,255,0.7),
    123px 456px rgba(255,255,255,0.9), 890px 345px rgba(0,245,255,0.8),
    1456px 678px rgba(255,107,0,0.7), 234px 123px rgba(0,245,255,0.9);
  animation: moveStars 80s linear infinite;
}

@keyframes moveStars {
  from { transform: translateY(0); }
  to   { transform: translateY(-100vh); }
}

/* ── Circuit Board SVG Texture Overlay ── */
.circuit-texture {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10 h20 v20 h20 v-20 h20 M10 50 h80 M50 10 v80 M70 30 v20 h10 M30 70 h20 v10' fill='none' stroke='%2300F5FF' stroke-width='0.5'/%3E%3Ccircle cx='10' cy='10' r='2' fill='%2300F5FF'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%2300F5FF'/%3E%3Ccircle cx='90' cy='90' r='2' fill='%2300F5FF'/%3E%3Ccircle cx='70' cy='30' r='1.5' fill='%23FF6B00'/%3E%3Ccircle cx='30' cy='70' r='1.5' fill='%23FF6B00'/%3E%3C/svg%3E");
  background-size: 100px 100px;
}

/* ── Grid Background ── */
.grid-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 245, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ── Scanline Effect ── */
.scanlines {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

/* ── Loading Screen ── */
#loading-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--bg-primary);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#loading-screen.fade-out {
  opacity: 0;
  visibility: hidden;
}

.loading-logo {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  color: var(--accent-cyan);
  letter-spacing: 0.3em;
  margin-bottom: 2rem;
  text-shadow: var(--glow-cyan);
}

.circuit-loader {
  width: 200px;
  height: 4px;
  background: rgba(0, 245, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.circuit-loader-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-orange));
  border-radius: 2px;
  animation: loadBar 1.2s ease-out forwards;
  box-shadow: 0 0 10px var(--accent-cyan);
}

@keyframes loadBar {
  from { width: 0; }
  to   { width: 100%; }
}

.loading-text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 1rem;
  letter-spacing: 0.2em;
  animation: blink 0.8s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Custom Cursor ── */
#cursor-dot {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--accent-cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease, opacity 0.2s ease;
  box-shadow: 0 0 10px var(--accent-cyan), 0 0 20px rgba(0,245,255,0.5);
}

#cursor-ring {
  position: fixed;
  width: 32px; height: 32px;
  border: 1px solid rgba(0, 245, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}

#cursor-ring::before,
#cursor-ring::after {
  content: '';
  position: absolute;
  background: var(--accent-cyan);
}

#cursor-ring::before {
  width: 1px; height: 8px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

#cursor-ring::after {
  width: 8px; height: 1px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.cursor-trail {
  position: fixed;
  width: 4px; height: 4px;
  background: var(--accent-cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99996;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ── Typography ── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-cyan);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-label::before {
  content: '//';
  color: var(--accent-orange);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.section-title .highlight {
  color: var(--accent-cyan);
  text-shadow: var(--glow-cyan);
}

/* ── Glassmorphism Cards ── */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-cyan);
  border-radius: 12px;
  padding: 1.5rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  opacity: 0.5;
}

.glass-card:hover {
  border-color: var(--border-cyan-bright);
  box-shadow: var(--glow-cyan);
  transform: translateY(-4px);
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  cursor: none;
}

.btn-primary {
  background: transparent;
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: inset 0 0 0 0 var(--accent-cyan);
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.1), transparent);
  transition: left 0.4s ease;
}

.btn-primary:hover {
  background: rgba(0, 245, 255, 0.08);
  box-shadow: var(--glow-cyan), inset 0 0 15px rgba(0,245,255,0.05);
  color: #fff;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--accent-orange);
  color: var(--accent-orange);
}

.btn-secondary:hover {
  background: rgba(255, 107, 0, 0.08);
  box-shadow: var(--glow-orange);
  color: #fff;
}

/* ── Section Layout ── */
.section {
  position: relative;
  z-index: 10;
  padding: 6rem 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

/* ── HUD Elements ── */
.hud-corner {
  position: absolute;
  width: 20px; height: 20px;
  border-color: var(--accent-cyan);
  border-style: solid;
  opacity: 0.6;
}

.hud-corner-tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.hud-corner-tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.hud-corner-bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.hud-corner-br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.25rem 0.75rem;
  border-radius: 2px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.status-active {
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
  color: var(--accent-green);
}

.status-active::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* ── Tag / Chip ── */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tag-cyan   { background: rgba(0,245,255,0.1); border: 1px solid rgba(0,245,255,0.3); color: var(--accent-cyan); }
.tag-orange { background: rgba(255,107,0,0.1); border: 1px solid rgba(255,107,0,0.3); color: var(--accent-orange); }
.tag-gold   { background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.3); color: var(--accent-gold); }
.tag-green  { background: rgba(0,255,136,0.1); border: 1px solid rgba(0,255,136,0.3); color: var(--accent-green); }
.tag-purple { background: rgba(192,132,252,0.1); border: 1px solid rgba(192,132,252,0.3); color: var(--accent-purple); }

/* ── Glow Text ── */
.text-cyan   { color: var(--accent-cyan); }
.text-orange { color: var(--accent-orange); }
.text-gold   { color: var(--accent-gold); }
.text-green  { color: var(--accent-green); }
.text-muted  { color: var(--text-muted); }

.glow-cyan   { text-shadow: var(--glow-cyan); }
.glow-orange { text-shadow: var(--glow-orange); }

/* ── Footer (shared) ── */
.site-footer {
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--border-cyan);
  padding: 3rem 0 2rem;
  background: rgba(10, 10, 15, 0.9);
  backdrop-filter: blur(10px);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}

.footer-logo {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--accent-cyan);
  letter-spacing: 0.2em;
  text-shadow: var(--glow-cyan);
}

.footer-tagline {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.2em;
  margin-top: 0.25rem;
}

.footer-socials {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.footer-social-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.5rem 1rem;
  border: 1px solid rgba(107, 114, 128, 0.3);
  border-radius: 4px;
  transition: var(--transition);
}

.footer-social-link:hover {
  color: var(--accent-cyan);
  border-color: var(--border-cyan-bright);
  box-shadow: var(--glow-cyan);
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  text-align: right;
  letter-spacing: 0.1em;
}

/* ── Fade-up animation (Antigravity fallback) ── */
[data-ag-fade-up],
[data-ag-stagger],
[data-ag-slide-left],
[data-ag-slide-right] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-ag-slide-left]  { transform: translateX(-40px); }
[data-ag-slide-right] { transform: translateX(40px); }

[data-ag-fade-up].ag-visible,
[data-ag-stagger].ag-visible,
[data-ag-slide-left].ag-visible,
[data-ag-slide-right].ag-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ── Glitch Text ── */
.glitch {
  position: relative;
  display: inline-block;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.glitch::before {
  color: var(--accent-cyan);
  animation: glitch1 3s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

.glitch::after {
  color: var(--accent-orange);
  animation: glitch2 3s infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitch1 {
  0%, 90%, 100% { transform: translate(0); opacity: 0; }
  91%, 93% { transform: translate(-3px, 1px); opacity: 0.8; }
  92%, 94% { transform: translate(3px, -1px); opacity: 0.8; }
}

@keyframes glitch2 {
  0%, 88%, 100% { transform: translate(0); opacity: 0; }
  89%, 91% { transform: translate(3px, 1px); opacity: 0.8; }
  90%, 92% { transform: translate(-3px, -1px); opacity: 0.8; }
}

/* ── Utility ── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb {
  background: var(--accent-cyan);
  border-radius: 3px;
  box-shadow: 0 0 6px var(--accent-cyan);
}

/* ── Selection ── */
::selection {
  background: rgba(0, 245, 255, 0.2);
  color: var(--accent-cyan);
}

/* ── Responsive Utilities ── */
@media (max-width: 768px) {
  .section { padding: 4rem 0; }
  .container { padding: 0 1.25rem; }
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-copy { text-align: center; }
  .footer-socials { justify-content: center; }
}

/* ── Easter Egg Robot Walk ── */
#spark-easter-egg {
  position: fixed;
  bottom: 0;
  left: -200px;
  z-index: 99990;
  pointer-events: none;
  font-size: 4rem;
  animation: robotWalk 4s linear forwards;
  display: none;
  filter: drop-shadow(0 0 20px var(--accent-cyan));
}

#spark-easter-egg.active { display: block; }

@keyframes robotWalk {
  0%   { left: -200px; transform: scaleX(1); }
  50%  { left: calc(100vw + 200px); transform: scaleX(1); }
  50.1%{ transform: scaleX(-1); }
  100% { left: -200px; transform: scaleX(-1); }
}

/* ── Marquee / Ticker ── */
.marquee-wrapper {
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  gap: 0;
  animation: marqueeScroll 30s linear infinite;
  width: max-content;
}

.marquee-track:hover { animation-play-state: paused; }

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 2rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  white-space: nowrap;
}

.marquee-item::after {
  content: '◆';
  color: var(--accent-cyan);
  font-size: 0.5rem;
}

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-cyan);
  border-radius: 12px;
  padding: 2rem;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--glow-cyan);
}

.modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-cyan);
  border-radius: 4px;
  color: var(--text-muted);
  transition: var(--transition);
  font-size: 1.2rem;
  cursor: none;
}

.modal-close:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: var(--glow-cyan);
}