frontend/src/components/layout/AppLayout.css

.dw-app-layout {
  display: flex;
  min-height: 100vh;
  background: linear-gradient(145deg, #0d1117 0%, #111a2e 50%, #0a1628 100%);
  position: relative;
}

.dw-app-layout::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(76, 141, 255, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 141, 255, 0.15) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 20%, transparent 70%);
  z-index: 0;
}

.dw-app-layout::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 25%, rgba(76, 141, 255, 0.25) 0%, transparent 40%),
    radial-gradient(circle at 75% 65%, rgba(110, 86, 255, 0.18) 0%, transparent 35%),
    radial-gradient(circle at 50% 90%, rgba(63, 191, 127, 0.12) 0%, transparent 30%);
  z-index: 0;
}

.dw-app-layout__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.dw-app-layout__content {
  flex: 1;
  padding: var(--space-8);
  max-width: var(--content-max-width);
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 960px) {
  .dw-app-layout__content {
    padding: var(--space-5);
  }
}

/* Mobile: stack layout vertically */
@media (max-width: 768px) {
  .dw-app-layout {
    flex-direction: column;
  }

  .dw-app-layout__content {
    padding: var(--space-4) var(--space-3);
    padding-bottom: 80px; /* space for bottom nav */
  }
}