/* START futuristic visual theme - loaded separately to avoid touching app routes */

.home-menu-page {
  background:
    radial-gradient(circle at 18% 12%, rgba(168,85,247,0.34), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(37,99,235,0.24), transparent 34%),
    linear-gradient(180deg, rgba(2,6,23,0.82), rgba(2,6,23,0.96)),
    url('/media/webimg/ui-assets/up-bg.jpg') center center / cover no-repeat !important;
}

.home-menu-page::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
}

.home-menu-card {
  width: min(1080px, 94vw) !important;
  max-width: 1080px !important;
  padding: clamp(28px, 5vw, 54px) !important;
  border-radius: 34px !important;
  background: linear-gradient(145deg, rgba(8,13,34,0.68), rgba(5,8,22,0.54)) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    0 0 80px rgba(124,58,237,0.14),
    0 0 130px rgba(37,99,235,0.10),
    0 30px 90px rgba(0,0,0,0.60) !important;
}

.home-menu-card .eyebrow {
  font-size: clamp(20px, 4vw, 46px) !important;
  letter-spacing: -0.04em !important;
  text-transform: none !important;
  color: #f8fafc !important;
  margin-bottom: 30px !important;
  text-shadow: 0 0 28px rgba(168,85,247,0.50);
}

.home-menu-card .eyebrow::after {
  content: 'AI OPERATIONS CONSOLE';
  display: block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.34em;
  color: rgba(216,180,254,0.88);
}

.home-menu-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

.menu-button {
  min-height: 92px !important;
  border-radius: 26px !important;
  font-size: 17px !important;
  background:
    linear-gradient(145deg, rgba(15,23,42,0.90), rgba(30,41,59,0.62)) !important;
  border: 1px solid rgba(148,163,184,0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 0 28px rgba(255,255,255,0.035),
    0 18px 45px rgba(0,0,0,0.48) !important;
}

.menu-button:hover,
.menu-group:focus-within .menu-button {
  transform: translateY(-4px) scale(1.018) !important;
  border-color: rgba(216,180,254,0.64) !important;
  background: linear-gradient(145deg, rgba(124,58,237,0.38), rgba(37,99,235,0.18)) !important;
  box-shadow:
    0 0 42px rgba(168,85,247,0.28),
    0 24px 60px rgba(0,0,0,0.54) !important;
}

.explorer-page {
  background:
    linear-gradient(180deg, rgba(3,7,18,0.68), rgba(15,23,42,0.86)),
    url('/media/webimg/ui-assets/up-bg.jpg') center center / cover fixed no-repeat !important;
}

.explorer-toolbar,
.explorer-sidebar,
.explorer-main {
  background: rgba(15,23,42,0.62) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #e2e8f0 !important;
  box-shadow:
    0 12px 42px rgba(0,0,0,0.46),
    inset 0 0 24px rgba(255,255,255,0.035) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

.sidebar-header,
.breadcrumb button,
.file-link,
.compact-file-link,
.tree-folder-button,
.tree-caret {
  color: #e2e8f0 !important;
}

.tree-folder-button:hover,
.tree-folder-button.active {
  background: rgba(168,85,247,0.18) !important;
}

.upload-controls input {
  background: rgba(15,23,42,0.82) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148,163,184,0.26) !important;
}

.upload-controls button {
  background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
  border: none !important;
  box-shadow: 0 12px 30px rgba(37,99,235,0.28) !important;
}

.compact-file-table th,
.compact-file-table td {
  color: #e2e8f0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

.folder-row {
  background: rgba(255,255,255,0.03) !important;
}

@media (max-width: 760px) {
  .home-menu-card {
    width: min(420px, 92vw) !important;
    padding: 26px !important;
    border-radius: 28px !important;
  }

  .home-menu-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .menu-button {
    min-height: 78px !important;
    font-size: 16px !important;
  }

  .menu-dropdown {
    margin-top: 10px !important;
    border-radius: 18px !important;
  }

  .explorer-layout {
    gap: 14px !important;
  }
}