:root {
  --bg-main: #0f0518;
  --bg-gradient: linear-gradient(135deg, #0f0518 0%, #2d1155 50%, #4a1c6e 100%);
  --glass-bg: rgba(255, 255, 255, 0.095);
  --glass-border: rgba(255, 255, 255, 0.18);
  --primary: #a0c4ff;
  --primary-dark: #7ba3d9;
  --success: #00e676;
  --warning: #ffa726;
  --danger: #ef5350;
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.86);
  --muted-2: rgba(255, 255, 255, 0.76);
}

body { background: var(--bg-main); color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.gradient-bg { background: var(--bg-gradient); }

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
}

.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.card:hover { transform: translateY(-3px); border-color: rgba(160, 196, 255, 0.35); }

.btn-primary {
  background: var(--primary);
  color: #0f0518;
  padding: 0.85rem 2rem;
  border-radius: 12px;
  font-weight: 800;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.02); }

.btn-secondary {
  background: transparent;
  color: var(--text);
  padding: 0.85rem 2rem;
  border-radius: 12px;
  font-weight: 800;
  border: 1px solid var(--glass-border);
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-secondary:hover { background: rgba(255, 255, 255, 0.06); transform: translateY(-2px); }

.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }

.nav-link { color: var(--text); padding: 0.6rem 0.9rem; border-radius: 10px; font-weight: 700; }
.nav-link:hover { background: rgba(255, 255, 255, 0.06); }

.menu { position: relative; }
.menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 520px;
  z-index: 50;
  border-radius: 16px;
  padding: 14px;
}
.menu:hover .menu-panel { display: block; }
.menu-item { display: block; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; }
.menu-item:hover { border-color: rgba(160, 196, 255, 0.28); background: rgba(255, 255, 255, 0.06); }
.menu-title { font-weight: 900; color: var(--text); }
.menu-desc { font-size: 0.85rem; color: var(--muted-2); margin-top: 2px; }

.breadcrumb a { color: var(--primary); font-weight: 800; }
.breadcrumb a:hover { filter: brightness(1.05); }