body {
  font-family: system-ui, sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #333;
  color: white;
  padding: 10px 15px;
  position: relative;
}

footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

main {
  flex: 1;
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

/* навигация */
nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

nav a:hover {
  text-decoration: underline;
}

/* бургер */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 25px;
  background: none;
  border: none;
  cursor: pointer;
}

.burger span {
  display: block;
  height: 3px;
  width: 100%;
  background: white;
  border-radius: 2px;
  transition: 0.3s;
}

.burger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.burger.active span:nth-child(2) {
  opacity: 0;
}

.burger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* сетка */
.grid-3 {
  display: grid;
  grid-template-columns: 15% 70% 15%;
  gap: 20px;
  margin-top: 20px;
}

.grid-block {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
  /* Полупрозрачный фон */
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  /* Окна */
/* Message */
.window-popup { width:400px; height:150px; background:#fff; border-radius:10px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:20px; box-shadow:0 0 10px rgba(0,0,0,0.3); }
.window-popup button { margin-top:20px; padding:5px 10px; cursor:pointer; }

/* Menu */
.window-menu { position:absolute; background:#fff; border-radius:10px; border:1px solid rgba(0,0,0,0.12); box-shadow:0 6px 18px rgba(0,0,0,0.12); min-width:160px; z-index:9999; overflow:hidden; }
.window-item { padding:8px 12px; cursor:pointer; white-space:nowrap; font-size:14px; }
.window-item:hover { background:rgba(0,0,0,0.04); }

/* File */
.window-panel { width:420px; background:#f0f0f0; border:1px solid #888; border-radius:10px; box-shadow:0 0 12px rgba(0,0,0,0.4); position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); user-select:none; display:flex; flex-direction:column; }
.window-header { background:#f0f0f0; padding:10px; font-size:16px; font-weight:600; border-bottom:1px solid #aaa; cursor:move; }
.window-tabs { display:flex; border-bottom:1px solid #aaa; background:#f0f0f0; }
.window-tab { padding:8px 14px; cursor:pointer; border-right:1px solid #aaa; user-select:none; }
.window-tab.active { background:#fff; font-weight:600; border-bottom:2px solid #fff; }
.window-content { display:none; padding:15px; background:#fff; }
.window-content.active { display:block; }
.window-row { display:flex; justify-content:space-between; margin-bottom:8px; font-size:14px; }
.window-buttons { display:flex; justify-content:flex-end; padding:10px; gap:8px; border-top:1px solid #aaa; background:#f0f0f0; }
.window-buttons button { padding:6px 16px; cursor:pointer; }

/* адаптив */
@media (max-width: 425px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .burger {
    display: flex;
  }

  nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #222;
    display: none;
    flex-direction: column;
    text-align: center;
    padding: 10px 0;
    z-index: 10;
  }

  nav.open {
    display: flex;
    animation: slideDown 0.3s ease;
  }

  nav ul {
    flex-direction: column;
    gap: 10px;
  }

  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}