* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-page:            #e0e5ec; /* Jasny, miękki szary pod neomorfizm */
  --menu-bg:         #e0e5ec;
  --menu-surface:    #e0e5ec;
  --menu-border:     #b8bec5;
  --text-main:          #1e293b;
  --text-menu:       #3a4750;
  --text-menu-muted: #636e72;
  --accent:             #448aff;
  --accent-glow:        rgba(68, 138, 255, 0.3);
  --hover-bg:           rgba(255, 255, 255, 0.05);
  --active-bg:          rgba(91, 124, 250, 0.12);
  --transition:         0.22s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  --radius-md:          12px;
  --radius-sm:          8px;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg-page);
  color: var(--text-main);
  display: flex;
  overflow: hidden;
  height: 100vh;
}

#app-wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
}

#content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

#content {
  flex: 1; /* Sprawia, że #content wypełnia dostępną przestrzeń w #content-wrapper */
  display: flex; /* Ustawia #content jako kontener flex */
  flex-direction: column; /* Układa elementy w kolumnie */
  overflow-y: auto; /* Włącza przewijanie dla #content */
  background: url('backgrounds/content1.jpg') no-repeat center;
  background-size: cover;
  background-attachment: fixed;
}