:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin: 0; background: #0f1115; color: #e6e6e6; }
a { color: #9ad0ff; text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; background:#151924; border-bottom:1px solid #252b3a; }
.topbar__brand { font-weight: 700; }
.topbar__nav a { margin-left: 14px; }

.card { background:#151924; border:1px solid #252b3a; border-radius:12px; padding:14px; }
.footer { padding: 18px; color:#9aa3b2; border-top:1px solid #252b3a; text-align:center; }

input, button { font: inherit; }
.input { width:100%; padding:10px 12px; border-radius:10px; border:1px solid #2b3245; background:#0f1115; color:#e6e6e6; }
.btn { padding:10px 12px; border-radius:10px; border:1px solid #2b3245; background:#1b2233; color:#e6e6e6; cursor:pointer; }
.btn:hover { filter: brightness(1.08); }

.grid { display:grid; gap:12px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid #2b3245; color:#cdd6e5; font-size: 12px; }

/* app/static/css/styles.css */

/* База */
:root{
  --bg: #0b0d12;
  --panel: #131722;
  --panel2: #0f1115;
  --border: #252b3a;
  --text: #e6e9ef;
  --muted: #9aa3b2;
  --btn: #1b2233;
  --btnHover: #242f46;
  --accent: #4da3ff;
}

*{ box-sizing:border-box; }
html, body{
  margin:0;
  padding:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Контейнер: вот тут “95% ширины” */
.container{
  width: min(95vw, 1800px);
  margin: 0 auto;
  padding: 16px 12px;
}

/* Карточки */
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}

/* Кнопки/инпуты */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--btn);
  color: var(--text);
  text-decoration:none;
  cursor:pointer;
  white-space: nowrap; /* чтобы кнопки не “ломались” */
}
.btn:hover{ background: var(--btnHover); }

.input, textarea, select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  outline: none;
}
textarea{ resize: vertical; }

/* Бейджи */
.badge{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(77,163,255,.12);
  border: 1px solid rgba(77,163,255,.25);
  color: var(--text);
}

/* Гриды */
.grid{ display: grid; }
.grid-2{ grid-template-columns: 1fr 1fr; }
.grid-3{ grid-template-columns: 1fr 1fr 1fr; }
.gap-8{ gap: 8px; }
.gap-10{ gap: 10px; }
.gap-12{ gap: 12px; }
.gap-14{ gap: 14px; }

@media (max-width: 980px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
  .container{ width: 96vw; }
}

/* Верхняя “строка управления” (кнопки/поиск/фильтры) — чтобы НЕ наезжало */
.toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;  /* ВАЖНО: предотвращает налезание */
}
.toolbar .grow{ flex: 1 1 320px; min-width: 260px; }
.toolbar .fixed{ flex: 0 0 auto; }

/* Таблица */
.table{
  width:100%;
  border-collapse: collapse;
}
.table th, .table td{
  border-top: 1px solid var(--border);
  padding: 10px 8px;
  vertical-align: top;
}
.table th{
  text-align:left;
  color: var(--muted);
  font-weight: 600;
}

/* Мелкий текст */  
.muted{ color: var(--muted); }

/* ===== Dropdown menu in topbar (no JS) ===== */

.topbar__nav{
  display:flex;
  gap:14px;
  align-items:center;
}

/* кнопка без вида "кнопки" */
.nav-dd__btn{
  background: transparent;
  border: 0;
  color: #9ad0ff;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.nav-dd__btn:hover{ text-decoration: underline; }

.nav-dd{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* само выпадающее */
.nav-dd__menu{
  display:none;
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;

  background: var(--panel, #151924);
  border: 1px solid var(--border, #252b3a);
  border-radius: 12px;
  padding: 8px;

  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 1000;
}

.nav-dd__menu a{
  display:block;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text, #e6e6e6);
  text-decoration:none;
}
.nav-dd__menu a:hover{
  background: var(--btnHover, #242f46);
}

/* открыть меню: hover или фокус (Tab) */
.nav-dd:hover .nav-dd__menu,
.nav-dd:focus-within .nav-dd__menu{
  display:block;
}
/* Drawer (шторка) */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  justify-content: flex-end;
  z-index: 9999;
}

.overlay.hidden { display: none; }

.drawer {
  width: min(40vw, 720px);
  max-width: 95vw;
  height: 100%;
  background: #0b0d12;
  border-left: 1px solid #1f2737;
  padding: 16px;
  overflow: auto;
  box-shadow: -20px 0 60px rgba(0,0,0,.5);
}

.no-scroll { overflow: hidden; }