/* ============================================================
   CYBERPUNK MAIL v3 — Glassmorphism + Neon Aurora
   Deep navy glass + hot pink/cyan/violet accents
   Animated aurora background + grid mesh overlay
   ============================================================ */

/* ---- 0. ROOT TOKENS ---- */
:root {
  --te-bg: #060814;
  --te-surface: rgba(15, 18, 35, 0.72);
  --te-surface-2: rgba(20, 24, 48, 0.8);
  --te-border: rgba(124, 77, 255, 0.22);
  --te-border-hot: rgba(255, 45, 170, 0.35);
  --te-pink: #FF2DAA;
  --te-cyan: #00E5FF;
  --te-violet: #7C4DFF;
  --te-text: #C9D1D9;
  --te-text-dim: #6B7294;
  --te-radius: 10px;
  --te-glow-pink: 0 0 20px rgba(255, 45, 170, 0.35);
  --te-glow-cyan: 0 0 20px rgba(0, 229, 255, 0.25);
}

/* ---- 1. GLOBAL RESET + AURORA BG ---- */
html, body, #app {
  background: var(--te-bg) !important;
  color: var(--te-text) !important;
  min-height: 100vh;
}

body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 77, 255, 0.18), transparent 65%),
    radial-gradient(ellipse 60% 40% at 90% 80%, rgba(255, 45, 170, 0.12), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(0, 229, 255, 0.08), transparent 55%) !important;
  background-attachment: fixed !important;
}

/* Animated aurora blobs */
body::before {
  content: "" !important;
  position: fixed !important;
  top: -20% !important; left: -10% !important;
  width: 50vw !important; height: 50vw !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(124, 77, 255, 0.12), transparent 70%) !important;
  filter: blur(60px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: aurora-drift-1 20s ease-in-out infinite alternate !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  bottom: -15% !important; right: -10% !important;
  width: 45vw !important; height: 45vw !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 45, 170, 0.1), transparent 70%) !important;
  filter: blur(70px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: aurora-drift-2 25s ease-in-out infinite alternate !important;
}

@keyframes aurora-drift-1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(8vw, 6vh) scale(1.15); }
}
@keyframes aurora-drift-2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-6vw, -4vh) scale(1.2); }
}

/* Subtle grid mesh overlay */
#app::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(124, 77, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 77, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  mask-image: radial-gradient(ellipse 100% 70% at 50% 40%, black, transparent 85%) !important;
  -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 40%, black, transparent 85%) !important;
}

#app { position: relative; }

/* ---- 2. SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--te-pink), var(--te-violet)) !important;
  border-radius: 99px !important;
}
::-webkit-scrollbar-thumb:hover { background: var(--te-pink) !important; }
::selection { background: rgba(255, 45, 170, 0.35); color: #fff; }

/* ---- 3. LAYOUT CONTAINER ---- */
.main, .n-grid {
  max-width: 1080px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ---- 4. HEADER: floating glass bar ---- */
.app-header {
  background: rgba(11, 14, 28, 0.72) !important;
  backdrop-filter: saturate(1.8) blur(20px) !important;
  -webkit-backdrop-filter: saturate(1.8) blur(20px) !important;
  border-bottom: none !important;
  box-shadow:
    0 1px 0 rgba(124, 77, 255, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.4) !important;
  padding: 0 20px !important;
  border-radius: 0 0 var(--te-radius) var(--te-radius) !important;
}

.app-header::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent 0%, var(--te-violet) 15%, var(--te-pink) 40%,
    var(--te-cyan) 65%, var(--te-violet) 85%, transparent 100%) !important;
  animation: neon-sweep 5s ease-in-out infinite !important;
}
@keyframes neon-sweep {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.app-header .n-page-header__title h3 {
  color: var(--te-pink) !important;
  text-shadow: 0 0 14px rgba(255, 45, 170, 0.5), 0 0 40px rgba(255, 45, 170, 0.15) !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  text-transform: uppercase !important;
}

.n-avatar {
  border: 2px solid var(--te-violet) !important;
  box-shadow: 0 0 12px rgba(124, 77, 255, 0.35) !important;
  border-radius: var(--te-radius) !important;
}

/* ---- 5. CARDS: glassmorphism with neon edge ---- */
.n-card {
  --n-color: transparent !important;
  --n-color-modal: rgba(20, 24, 48, 0.85) !important;
  --n-color-popover: rgba(20, 24, 48, 0.85) !important;
  --n-border-color: var(--te-border) !important;
  --n-color-embedded: transparent !important;
  background: var(--te-surface) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  border: 1px solid var(--te-border) !important;
  border-radius: var(--te-radius) !important;
  box-shadow:
    0 0 0 1px rgba(124, 77, 255, 0.04),
    0 4px 24px rgba(0, 0, 0, 0.4) !important;
  clip-path: none !important;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s !important;
}

.n-card:hover {
  border-color: rgba(255, 45, 170, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(255, 45, 170, 0.06),
    0 4px 28px rgba(0, 0, 0, 0.45),
    0 0 20px rgba(124, 77, 255, 0.06) !important;
}

.n-card > .n-card-header {
  border-bottom: 1px solid rgba(124, 77, 255, 0.12) !important;
  padding: 12px 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  background: rgba(124, 77, 255, 0.03) !important;
  border-radius: var(--te-radius) var(--te-radius) 0 0 !important;
}

/* ---- 6. BUTTONS ---- */
.n-button--primary-type {
  background: linear-gradient(135deg, var(--te-pink), #cc1d87) !important;
  border: 1px solid rgba(255, 45, 170, 0.5) !important;
  box-shadow: var(--te-glow-pink), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  color: #fff !important;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.25) !important;
  border-radius: var(--te-radius) !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
}

.n-button--primary-type:hover {
  background: linear-gradient(135deg, #FF3DB3, #e62293) !important;
  box-shadow: 0 0 28px rgba(255, 45, 170, 0.5), 0 0 48px rgba(255, 45, 170, 0.12), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transform: translateY(-1px) !important;
}

.n-button--primary-type:active {
  transform: translateY(0) !important;
  box-shadow: 0 0 12px rgba(255, 45, 170, 0.3) !important;
}

.n-button:not(.n-button--primary-type) {
  color: var(--te-cyan) !important;
  border-radius: var(--te-radius) !important;
  transition: all 0.2s !important;
}
.n-button:not(.n-button--primary-type):hover {
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.4) !important;
  background: rgba(0, 229, 255, 0.06) !important;
}

/* Tertiary buttons — subtle glass */
.n-button.n-button--tertiary-type {
  background: rgba(124, 77, 255, 0.06) !important;
  border: 1px solid rgba(124, 77, 255, 0.15) !important;
}
.n-button.n-button--tertiary-type:hover {
  background: rgba(124, 77, 255, 0.1) !important;
  border-color: rgba(124, 77, 255, 0.25) !important;
}

/* ---- 7. INPUTS: glass fields ---- */
.n-input, .n-base-selection {
  border: 1px solid rgba(124, 77, 255, 0.2) !important;
  background: rgba(15, 18, 35, 0.6) !important;
  border-radius: var(--te-radius) !important;
  transition: all 0.2s !important;
}
.n-input:focus-within, .n-base-selection:focus-within {
  border-color: var(--te-cyan) !important;
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.12), inset 0 0 0 1px rgba(0, 229, 255, 0.08) !important;
  background: rgba(15, 18, 35, 0.8) !important;
}

/* ---- 8. TABS ---- */
.n-tabs-bar {
  background: linear-gradient(90deg, var(--te-violet), var(--te-cyan)) !important;
  box-shadow: 0 0 10px rgba(124, 77, 255, 0.4) !important;
  height: 2px !important;
  border-radius: 2px !important;
}
.n-tabs .n-tabs-tab--active {
  color: var(--te-pink) !important;
  text-shadow: 0 0 8px rgba(255, 45, 170, 0.35) !important;
  font-weight: 600 !important;
}
.n-tabs-tab {
  transition: color 0.2s !important;
}
.n-tabs-tab:hover {
  color: var(--te-cyan) !important;
}
.n-tabs.n-tabs--card-type .n-tabs-tab {
  background: transparent !important;
  border: none !important;
}
.n-tabs.n-tabs--card-type .n-tabs-nav {
  border-bottom: 1px solid rgba(124, 77, 255, 0.1) !important;
}

/* ---- 9. ALERTS ---- */
.n-alert {
  background: rgba(20, 24, 48, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid var(--te-border) !important;
  border-left: 3px solid var(--te-violet) !important;
  box-shadow: 0 0 0 1px rgba(124, 77, 255, 0.04) !important;
  border-radius: var(--te-radius) !important;
}
.n-alert--info-type {
  border-left-color: var(--te-cyan) !important;
}
.n-alert--warning-type {
  border-left-color: #FFD319 !important;
}
.n-alert--error-type {
  border-left-color: var(--te-pink) !important;
}

/* ---- 10. MODAL/DRAWER/DROPDOWN: deep glass ---- */
.n-modal, .n-drawer, .n-popover, .n-dropdown-menu {
  border: 1px solid var(--te-border) !important;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(124, 77, 255, 0.06) !important;
  background: var(--te-surface-2) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border-radius: var(--te-radius) !important;
}

/* ---- 11. DATA TABLE ---- */
.n-data-table-th {
  background: rgba(124, 77, 255, 0.06) !important;
  color: var(--te-text) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}
.n-data-table-tr:nth-child(even) td {
  background: rgba(124, 77, 255, 0.02) !important;
}
.n-data-table-tr:hover td {
  background: rgba(255, 45, 170, 0.04) !important;
}
.n-data-table-td {
  border-bottom: 1px solid rgba(124, 77, 255, 0.06) !important;
}

/* ---- 12. TAGS ---- */
.n-tag {
  border: 1px solid rgba(124, 77, 255, 0.2) !important;
  background: rgba(124, 77, 255, 0.06) !important;
  border-radius: 6px !important;
  color: var(--te-text) !important;
}

/* ---- 13. MONO/TECH ---- */
code, pre, .n-text code, .mail-address {
  font-family: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace !important;
  color: var(--te-cyan) !important;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.25) !important;
}
code {
  background: rgba(0, 229, 255, 0.05) !important;
  border: 1px solid rgba(0, 229, 255, 0.1) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
}

/* ---- 14. SKELETON ---- */
.n-skeleton {
  --n-color: rgba(124, 77, 255, 0.08) !important;
  border-radius: var(--te-radius) !important;
}

/* ---- 15. MESSAGE/toast ---- */
.n-message {
  border: 1px solid var(--te-border) !important;
  background: var(--te-surface-2) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: var(--te-radius) !important;
}

/* ---- 16. SELECT DROPDOWN ---- */
.n-select-menu-item:hover,
.n-dropdown-option-body:hover {
  background: rgba(255, 45, 170, 0.08) !important;
}
.n-select-menu-item--selected {
  color: var(--te-pink) !important;
}

/* ---- 17. LINKS ---- */
a {
  color: var(--te-cyan) !important;
  text-decoration: none !important;
  transition: text-shadow 0.2s !important;
}
a:hover {
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.4) !important;
}

/* ---- 18. DIVIDER ---- */
.n-divider:not(.n-divider--vertical)::before {
  border-top-color: rgba(124, 77, 255, 0.1) !important;
}

/* ---- 19. SWITCH ---- */
.n-switch--active {
  --n-rail-color-active: rgba(255, 45, 170, 0.3) !important;
  --n-button-color: #fff !important;
}
.n-switch.n-switch--active .n-switch__rail {
  background: linear-gradient(90deg, var(--te-violet), var(--te-pink)) !important;
  box-shadow: 0 0 10px rgba(255, 45, 170, 0.2) !important;
}

/* ---- 20. STATISTIC ---- */
.n-statistic .n-statistic-value, .n-number-animation {
  color: var(--te-cyan) !important;
  font-family: 'SF Mono', 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
}

/* ---- 21. PAGE HEADER ---- */
.n-page-header {
  border-bottom: none !important;
}

/* ---- 22. EMPTY STATE ---- */
.n-empty {
  --n-text-color: rgba(201, 209, 217, 0.35) !important;
}

/* ---- 23. FOOTER ---- */
footer, .footer-divider {
  border-top: 1px solid rgba(124, 77, 255, 0.08) !important;
}

/* ---- 24. SPIN ---- */
.n-spin-description {
  color: var(--te-cyan) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

/* ---- 25. ADDRESS BAR — hero element ---- */
.address-row {
  padding: 4px 0 !important;
}

.address-select .n-base-selection {
  background: rgba(15, 18, 35, 0.7) !important;
  border-color: rgba(255, 45, 170, 0.2) !important;
  box-shadow: 0 0 16px rgba(124, 77, 255, 0.06) !important;
}
.address-select .n-base-selection:hover {
  border-color: rgba(255, 45, 170, 0.35) !important;
  box-shadow: 0 0 20px rgba(255, 45, 170, 0.08) !important;
}

/* ---- 26. MAIL LIST ITEMS ---- */
.n-list-item {
  border-radius: var(--te-radius) !important;
  transition: background 0.2s, border-color 0.2s !important;
  border: 1px solid transparent !important;
  margin-bottom: 6px !important;
}
.n-list-item:hover {
  background: rgba(124, 77, 255, 0.04) !important;
  border-color: rgba(124, 77, 255, 0.1) !important;
}

/* ---- 27. BACK TOP ---- */
.n-back-top {
  background: rgba(20, 24, 48, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid var(--te-border) !important;
  box-shadow: var(--te-glow-pink) !important;
  border-radius: 50% !important;
}

/* ---- 28. RESPONSIVE ---- */
@media (max-width: 640px) {
  .app-header .n-page-header__title h3 {
    font-size: 14px !important;
  }
  .main, .n-grid {
    max-width: 100% !important;
    padding: 0 8px !important;
  }
  body::before, body::after {
    width: 70vw !important;
    height: 70vw !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
  .app-header::after { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}