/* Globalne tło */
body {
  margin: 0;
  min-height: 100vh;
  background-color: #0a0f0f;
  background-image: url('logo8.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #e0e0e0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  display: flex;
  flex-direction: row;       /* ważne: sidebar i content obok siebie */
}

/* Sidebar */
.sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem;
  background-color: rgba(0,0,0,0.6);
  border-right: 1px solid #222;
  width: 250px;
  box-sizing: border-box;
  min-height: 100vh;         /* pełna wysokość */
  position: fixed;           /* żeby nie przesuwał contentu */
  top: 0;
  left: 0;
}

/* Content */
.content {
  flex: 1;                     /* zajmuje resztę szerokości */
  margin-left: 250px;          /* offset równy szerokości sidebaru */
  padding: 2rem;
  box-sizing: border-box;
}

/* Logo */
.logo {
  width: 100%;
  display: flex;
  justify-content: center;
}
.logo img {
  height: 170px;
  max-width: 170px;
  margin-bottom: 1rem;
  opacity: 0.95;
  border: 1px solid #00ffcc;
  box-shadow: 0 0 8px #00ffcc;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.logo img:hover {
  border-color: #ff66cc;
}

/* Menu */
.menu {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

/* Przyciski */
.btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 1rem;
  background-color: #00ffcc;
  color: #000;
  text-decoration: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid #00ffcc;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn:hover {
  background-color: #00ddb3;
  border-color: #ff66cc;
}

/* Wybór języka */
.lang-switch {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.lang {
  padding: 0.4rem 0.8rem;
  background-color: #333;
  color: #00ffcc;
  border: 1px solid #00ffcc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.lang:hover {
  background-color: #00ffcc;
  color: #000;
  border-color: #ff66cc;
}

/* Stopka */
.footer {
  position: fixed;
  bottom: 0;
  left: 250px;                /* przesunięcie obok sidebaru */
  width: calc(100% - 250px);  /* szerokość contentu */
  background-color: #000;
  color: #00ffcc;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.8rem;
  border-top: 1px solid #00ffcc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.footer:hover {
  border-top-color: #ff66cc;
}

/* Aktywny przycisk */
.btn.active {
  background-color: #ff66cc;
  color: #000;
  border-color: #ff66cc;
  box-shadow: 0 0 4px #ff66cc;
}
.menu .btn.active,
.menu .btn.active:hover {
  background-color: #ff66cc;
  color: #000;
  border-color: #ff66cc;
  box-shadow: 0 0 4px #ff66cc;
}