:root{
  --bg: #ffffff;
  --fg: #0f172a;
  --muted: #64748b;
  --ring: #e2e8f0;
  --hover: #e1e5e9; /*#f1f5f9*/
  --accent: #3b82f6;
  --submenu-bg:#ffffff;
  --shadow: 0 18px 45px rgba(2,6,23,.08);
}

/* Контейнер: наводимо на нього (або фокус всередині) — показуємо меню */
.menu-wrap{
  position:relative;
  display:inline-block;
}

/* Елемент X — тригер */
.trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--bg);
  color:var(--muted);
  border:1px solid var(--ring);
  box-shadow: 0 8px 20px rgba(2,6,23,.06);
  cursor:pointer;
  user-select:none;
  transition: background .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.trigger:hover{
  background:var(--hover);
  color:var(--fg);
  box-shadow: 0 12px 28px rgba(2,6,23,.08);
}
.trigger:active{ transform: translateY(1px); }

/* Горизонтальне меню (ховається за замовчуванням) */
.menu{
  position:absolute;
  left:0;
  top:100%;
  margin-top:10px;
  background:var(--bg);
  border:1px solid var(--ring);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:6px;
  display:flex;
  gap:6px;
  list-style:none;
  z-index:9999;

  opacity:0;
  visibility:hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

/* Показ при наведенні на контейнер або фокусі всередині (для клавіатури) */
.menu-wrap:hover .menu,
.menu-wrap:focus-within .menu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

/* Пункти верхнього рівня */
.menu > li{
  position:relative;
}
.menu > li > a{
  display:block;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  color:var(--fg);
  transition: background .15s ease, color .15s ease;
  white-space:nowrap;
}
.menu > li > a:hover,
.menu > li:focus-within > a{
  background:var(--hover);
}
.menu > li.has-sub > a::after{
  content:'▾';
  margin-left:.5ch;
  color:var(--muted);
}

/* Вертикальне підменю для кожного пункту */
.submenu{
  position:absolute;
  left:0;
  top:100%;
  margin-top:6px;
  min-width:180px;
  background:var(--submenu-bg);
  border:1px solid var(--ring);
  border-radius:12px;
  box-shadow: var(--shadow);
  list-style:none;
  padding:6px;
  display:grid;
  gap:4px;
  z-index:10000;

  opacity:0;
  visibility:hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
/* Показ підменю при наведенні/фокусі на пункт верхнього рівня */
.menu > li:hover .submenu,
.menu > li:focus-within .submenu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

.submenu a{
  display:block;
  padding:5px 12px;
  border-radius:8px;
  text-decoration:none;
  color:var(--fg);
  transition: background .12s ease, color .12s ease;
}
.submenu a:hover,
.submenu a:focus{
  background:var(--accent);
  color:#ffffff;
  outline:none;
}