:root{
  --bg:#1f1f1f;
  --card:#2b2b2b;
  --card2:#252525;
  --text:#eee;
  --muted:#bdbdbd;
  --line:#3b3b3b;
  --accent:#4da3ff;
  --danger:#ff4d4d;
}

*{ box-sizing:border-box; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--text); }
.wrap{ max-width: 1100px; margin:0 auto; padding:14px; }

.topbar{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.brand{ font-weight:700; }
.me{ font-size:13px; color:var(--muted); }

/* БАЗОВЫЙ layout (если меню слева). Но для menu-top ниже есть override */
.layout{ display:grid; grid-template-columns: 240px 1fr; gap:12px; }
@media (max-width: 900px){ .layout{ grid-template-columns: 1fr; } }

.menu{ display:flex; flex-direction:column; gap:8px; }
.menu button{
  width:100%;
  text-align:left;
  background:var(--card);
  color:var(--text);
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
}
.menu button.active{ outline:2px solid var(--accent); }
.menu .muted{ opacity:.7; font-size:12px; padding:0 6px; }

.content .card{ min-height: 240px; }

.card{ background:var(--card); border-radius:16px; padding:12px; margin-bottom:12px; }
.card2{ background:var(--card2); border-radius:14px; padding:12px; }

h3{ margin:0 0 10px 0; }
h4{ margin:10px 0 6px 0; }

.row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

input, select, textarea{
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
}

textarea{ width:100%; min-height:90px; }

button{ background:var(--accent); color:#111; border:0; padding:10px 12px; border-radius:12px; cursor:pointer; }
button.secondary{ background:#3a3a3a; color:#fff; }
button.danger{ background:var(--danger); color:#111; }
button:disabled{ opacity:.6; cursor:not-allowed; }

.small{ font-size:12px; }
.muted{ opacity:.7; }
.miniapp-retry-warning{
  margin: 0 0 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 77, 77, 0.45);
  background: rgba(255, 77, 77, 0.12);
  color: #ffd4d4;
  font-size: 13px;
}
a{ color:#9cc9ff; }
a:hover{ color:#c0ddff; }
a:visited{ color:#b8d6ff; }
.muted a{ color:#b8d6ff; opacity:1; }



#toastBox{ position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 9999; }
.toast{ background:var(--card); color:#fff; padding:10px 14px; margin-top:8px; border-radius:12px; font-size:14px; min-width:220px; text-align:center; box-shadow:0 6px 20px rgba(0,0,0,.35); }
.toast.ok { border-left: 4px solid #3ddc84; }
.toast.err { border-left: 4px solid var(--danger); }
.toast.info{ border-left: 4px solid var(--accent); }

#globalLoader{ position: fixed; inset:0; background: rgba(0,0,0,.35); z-index: 9998; display:none; align-items:center; justify-content:center; }
.spinner{ width:42px; height:42px; border:4px solid #444; border-top-color:var(--accent); border-radius:50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg);} }

/* ===================================================================== */
/* МЕНЮ СВЕРХУ: компактно, без “карточек в пол экрана”, без скроллов */
/* ===================================================================== */

/* Когда меню сверху — layout должен быть колонкой (а не grid 240px/1fr) */
.layout:has(.menu.menu-top){
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Само меню — сетка */
.menu.menu-top{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:8px;

  position: sticky;
  top: 0;
  z-index: 50;

  padding:8px;
  background: var(--bg);
  border-radius: 14px;
  border:1px solid var(--line);
}

/* На средних — 3 колонки */
@media (max-width: 900px){
  .menu.menu-top{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* На телефонах — 2 колонки */
@media (max-width: 520px){
  .menu.menu-top{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ВАЖНО: переопределяем именно button внутри menu-top (а не .menu-btn) */
.menu.menu-top button{
  width:100% !important;
  text-align:left;

  background: var(--card2) !important;
  border: 1px solid var(--line) !important;
  outline: none;

  padding: 10px 10px !important;
  border-radius: 12px !important;

  min-height: 44px;            /* нормальная высота тапа */
  height: auto !important;

  font-size: 13px !important;
  line-height: 1.15 !important;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active подсветка */
.menu.menu-top button.active{
  outline: 2px solid var(--accent) !important;
}

/* Убираем “скачок” контента при переключении вкладок */
#pageBox{
  min-height: 60vh;
}

.announcement-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--accent);
  color:#111;
  font-weight:700;
  z-index: 80;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

.announcement-widget{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: min(360px, calc(100vw - 24px));
  max-height: 55vh;
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 14px;
  z-index: 80;
  display:flex;
  flex-direction:column;
  box-shadow:0 10px 28px rgba(0,0,0,.4);
}

.announcement-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:10px;
  border-bottom:1px solid var(--line);
}

.announcement-list{
  overflow:auto;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.announcement-item{
  background:var(--card2);
  border-radius:10px;
  border-left:3px solid #4da3ff;
  padding:8px;
}

.announcement-item .meta{
  font-size:12px;
  opacity:.75;
}

.release-badge{
  display:inline-flex;
  margin: 0 14px 14px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
}

@media (max-width: 520px){
  .release-badge{
    margin: 0 10px 10px;
    font-size: 11px;
  }
}