/* ============================================================
   GHOST4FREE — PREMIUM DARK THEME v2
   Deep Space + Neon Cyan Glassmorphism
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --ghost-bg:       #05080f;
  --ghost-surface:  #080e1c;
  --ghost-card:     #0c1628;
  --ghost-border:   rgba(0, 229, 255, 0.12);
  --ghost-cyan:     #00e5ff;
  --ghost-cyan-dim: #00b8d4;
  --ghost-cyan-glow: rgba(0, 229, 255, 0.35);
  --ghost-text:     #dff4ff;
  --ghost-muted:    #6a93aa;
  --ghost-danger:   #ff4d6d;
  --ghost-success:  #00e5a0;
}

/* ── Global ── */
*, *::before, *::after { box-sizing: border-box; }

html, body, #app {
  font-family: 'Inter', system-ui, sans-serif !important;
  background: var(--ghost-bg) !important;
  color: var(--ghost-text) !important;
  min-height: 100vh;
}

/* Animated gradient background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 40% at 10% 0%, rgba(0,180,255,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(0,100,255,0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── App Bar / Header ── */
.v-app-bar,
.v-toolbar {
  background: rgba(5, 10, 20, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--ghost-border) !important;
  box-shadow: 0 1px 30px rgba(0,0,0,0.5) !important;
}

/* ── Navigation Drawer / Sidebar ── */
.v-navigation-drawer {
  background: rgba(8, 14, 28, 0.97) !important;
  border-right: 1px solid var(--ghost-border) !important;
  backdrop-filter: blur(24px) !important;
}

/* ── Cards ── */
.v-card,
.v-sheet {
  background: var(--ghost-card) !important;
  border: 1px solid var(--ghost-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(0,229,255,0.06) !important;
  backdrop-filter: blur(12px) !important;
  transition: box-shadow 0.3s ease, transform 0.2s ease !important;
}
.v-card:hover {
  box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 24px rgba(0,229,255,0.12) !important;
  transform: translateY(-1px) !important;
}

/* ── Buttons ── */
.v-btn--variant-elevated {
  background: linear-gradient(135deg, #00e5ff 0%, #0096c7 100%) !important;
  color: #000 !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 0 20px var(--ghost-cyan-glow), 0 4px 12px rgba(0,0,0,0.4) !important;
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
}
.v-btn--variant-elevated:hover {
  box-shadow: 0 0 32px rgba(0,229,255,0.6), 0 6px 20px rgba(0,0,0,0.5) !important;
  transform: translateY(-1px) !important;
}

/* Outlined buttons */
.v-btn--variant-outlined {
  border-color: var(--ghost-cyan) !important;
  color: var(--ghost-cyan) !important;
  background: transparent !important;
}
.v-btn--variant-outlined:hover {
  background: rgba(0,229,255,0.1) !important;
}

/* Text buttons */
.v-btn--variant-text {
  color: var(--ghost-cyan) !important;
}

/* ── List Items (Sidebar) ── */
.v-list-item {
  border-radius: 10px !important;
  margin: 2px 8px !important;
  transition: all 0.2s ease !important;
}
.v-list-item:hover {
  background: rgba(0, 229, 255, 0.08) !important;
}
.v-list-item--active,
.v-list-item--active:hover {
  background: rgba(0, 229, 255, 0.15) !important;
  border-left: 3px solid var(--ghost-cyan) !important;
  box-shadow: inset 0 0 20px rgba(0,229,255,0.05) !important;
}
.v-list-item--active .v-list-item-title,
.v-list-item--active .v-icon {
  color: var(--ghost-cyan) !important;
}

/* ── Input Fields ── */
.v-field {
  background: rgba(5, 12, 25, 0.8) !important;
  border-radius: 10px !important;
}
.v-field__outline {
  border-color: var(--ghost-border) !important;
}
.v-field--focused .v-field__outline {
  border-color: var(--ghost-cyan) !important;
  box-shadow: 0 0 0 2px rgba(0,229,255,0.15) !important;
}

/* ── Chips ── */
.v-chip {
  background: rgba(0,229,255,0.12) !important;
  color: var(--ghost-cyan) !important;
  border: 1px solid rgba(0,229,255,0.25) !important;
  font-weight: 600 !important;
}

/* ── Dividers ── */
.v-divider {
  border-color: var(--ghost-border) !important;
}

/* ── Welcome Banner ── */
.v-alert,
[class*="welcome"],
[class*="banner"] {
  background: rgba(0,229,255,0.07) !important;
  border: 1px solid rgba(0,229,255,0.2) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(10px) !important;
}

/* ── Tables ── */
.v-table {
  background: var(--ghost-card) !important;
  border: 1px solid var(--ghost-border) !important;
  border-radius: 14px !important;
}
.v-table thead tr {
  background: rgba(0,229,255,0.06) !important;
}
.v-table thead th {
  color: var(--ghost-cyan) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}
.v-table tbody tr:hover {
  background: rgba(0,229,255,0.05) !important;
}

/* ── Progress bars ── */
.v-progress-linear {
  background: rgba(0,229,255,0.15) !important;
  border-radius: 4px !important;
}
.v-progress-linear__determinate {
  background: linear-gradient(90deg, #00b8d4, #00e5ff) !important;
  box-shadow: 0 0 8px rgba(0,229,255,0.4) !important;
}

/* ── Stepper ── */
.v-stepper-item--selected .v-stepper-item__avatar {
  background: var(--ghost-cyan) !important;
  box-shadow: 0 0 16px var(--ghost-cyan-glow) !important;
}

/* ── Tab bar ── */
.v-tab--selected {
  color: var(--ghost-cyan) !important;
}
.v-tabs-slider {
  background: var(--ghost-cyan) !important;
  box-shadow: 0 0 8px var(--ghost-cyan-glow) !important;
}

/* ── Selection (dropdowns, menus) ── */
.v-menu > .v-overlay__content > .v-list,
.v-overlay__content .v-list {
  background: #0a1525 !important;
  border: 1px solid var(--ghost-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00b8d4, #005f6e);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ghost-cyan); }

/* ── Typography overrides ── */
.v-toolbar-title span,
.v-toolbar-title a {
  background: linear-gradient(135deg, #00e5ff, #7df9ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  filter: drop-shadow(0 0 8px rgba(0,229,255,0.5));
}

h1, h2, h3, .text-h4, .text-h5 {
  color: var(--ghost-text) !important;
  font-weight: 700 !important;
}

/* ── Thumbnail / Video Card hover ── */
.item-card-duration,
[class*="card-duration"] {
  background: rgba(0,229,255,0.15) !important;
  color: var(--ghost-cyan) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
}

/* ── Badge glow ── */
.v-badge__badge {
  background: var(--ghost-cyan) !important;
  color: #000 !important;
  box-shadow: 0 0 10px var(--ghost-cyan-glow) !important;
}

/* ── Announcement banner ── */
.v-system-bar,
[class*="announcement"] {
  background: linear-gradient(135deg, rgba(0,229,255,0.12), rgba(0,100,180,0.08)) !important;
  border-bottom: 1px solid var(--ghost-border) !important;
}

/* ── Selection highlight ── */
::selection {
  background: rgba(0,229,255,0.25);
  color: #fff;
}

/* ── Link colors ── */
a { color: var(--ghost-cyan) !important; text-decoration: none; transition: color 0.2s; }
a:hover { color: #7df9ff !important; }