:root {
  color-scheme: light;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --transition-smooth: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --color-bg: #f7fafc;
  --color-bg-alt: #e8f1f8;
  --color-surface: rgba(255, 255, 255, 0.86);
  --color-surface-soft: rgba(249, 252, 255, 0.9);
  --color-inset: rgba(255, 255, 255, 0.94);
  --color-input-bg: rgba(255, 255, 255, 0.98);
  --color-status-bg: rgba(250, 253, 255, 0.96);
  --color-border: rgba(45, 76, 104, 0.18);
  --color-border-soft: rgba(45, 76, 104, 0.11);
  --color-text: #182432;
  --color-muted: #66798b;
  --color-subtle: #43576a;
  --color-highlight: #0d1b2a;
  --color-accent: #118ab2;
  --color-accent-strong: #0b6f95;
  --color-accent-warm: #2563eb;
  --color-on-accent: #ffffff;
  --color-focus-ring: rgba(17, 138, 178, 0.18);
  --color-shadow: rgba(32, 55, 80, 0.14);
  --theme-glow-a: rgba(82, 146, 206, 0.12);
  --theme-glow-b: rgba(36, 171, 163, 0.1);
  --theme-image-main: url("/images/themes/starry_sky/bg_1.png");
  --theme-image-secondary: url("/images/themes/starry_sky/bg_2.png");
}

body {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
}

body::before,
body::after {
  content: "";
  inset: -12%;
  pointer-events: none;
  position: fixed;
  z-index: -4;
}

body::before {
  background-image: var(--theme-image-main);
  background-position: center;
  background-size: cover;
  filter: brightness(1.38) saturate(0.72);
  opacity: 0.08;
  transform: scale(1.08);
  animation: drift-slow 36s ease-in-out infinite alternate;
}

body::after {
  background:
    linear-gradient(135deg, var(--theme-glow-a), transparent 38%),
    linear-gradient(315deg, var(--theme-glow-b), transparent 42%),
    var(--theme-image-secondary) center / cover;
  mix-blend-mode: multiply;
  opacity: 0.12;
  z-index: -3;
  animation: drift-reverse 46s ease-in-out infinite alternate;
}

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  padding: 28px clamp(16px, 2vw, 28px) 40px;
  position: relative;
}

.app-shell > section {
  flex: 1;
  min-height: 0;
}

.app-shell::before,
.app-shell::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
}

.app-shell::before {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 119px,
      rgba(43, 72, 96, 0.035) 120px 121px
    );
  opacity: 0.8;
  z-index: -2;
}

.app-shell::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(229, 238, 247, 0.24)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(219, 231, 242, 0.18));
  z-index: -1;
}

@keyframes drift-slow {
  from {
    transform: scale(1.06) translate3d(-1.5%, -0.8%, 0);
  }

  to {
    transform: scale(1.12) translate3d(1.5%, 1%, 0);
  }
}

@keyframes drift-reverse {
  from {
    transform: scale(1.04) translate3d(1.2%, -1%, 0);
  }

  to {
    transform: scale(1.1) translate3d(-1%, 1.2%, 0);
  }
}