/*
 * Критические стили — грузятся обычным <link>, не через React.
 * Если основной CSS задержится, сайт не выглядит «сломанным».
 */
:root {
  --background: #08080a;
  --surface: #121216;
  --surface-2: #1b1b21;
  --border: #26262e;
  --foreground: #f2f2f5;
  --muted: #8b8b95;
  --accent: #e0479f;
  --accent-foreground: #ffffff;
  --brand-gradient: linear-gradient(90deg, #ffa052 0%, #e046a4 45%, #6851eb 100%);
  --radius: 14px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--background);
  color: var(--foreground);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hidden {
  display: none !important;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-1 {
  flex: 1 1 0%;
}

.shrink-0 {
  flex-shrink: 0;
}

.min-w-0 {
  min-width: 0;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.min-h-full {
  min-height: 100%;
}

.overflow-hidden {
  overflow: hidden;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: 0.5rem;
}

.border-r {
  border-right: 1px solid var(--border);
}

.border-b {
  border-bottom: 1px solid var(--border);
}

.w-\[280px\] {
  width: 280px;
}

.fixed {
  position: fixed;
}

.inset-0 {
  inset: 0;
}

.inset-y-0 {
  top: 0;
  bottom: 0;
}

.left-0 {
  left: 0;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.-translate-x-full {
  transform: translateX(-100%);
}

.translate-x-0 {
  transform: translateX(0);
}

.max-w-\[85vw\] {
  max-width: 85vw;
}

.btn-brand {
  background-image: var(--brand-gradient);
  color: #fff;
  border: 0;
  cursor: pointer;
}

.text-muted {
  color: var(--muted);
}

/* Desktop: сайдбар колонкой; мобилка: drawer скрыт */
@media (min-width: 64rem) {
  .lg\:block {
    display: block !important;
  }

  .lg\:hidden {
    display: none !important;
  }

  .lg\:flex {
    display: flex !important;
  }
}

@media (max-width: 63.99rem) {
  .lg\:block {
    display: none !important;
  }
}