:root{ /* корневые CSS переменные темы */
  --bg:#0f1520; /* цвет фона страницы */
  --fg:#e7e9ee; /* основной цвет текста */
  --muted:#a3a8b6; /* приглушённый текст */
  --card:#121826; /* фон карточек */
  --border:#2a3040; /* цвет границ/разделителей */
  --accent:#66a3ff; /* основной акцент (кнопки/элементы) */
  --accent-2:#a486ff; /* дополнительный акцент/градиенты */
  --radius:16px; /* базовый радиус скругления карточек */
  --shadow:0 10px 28px rgba(0,0,0,0.25); /* базовая тень */
}
*{box-sizing:border-box} /* включаем модель коробки border-box для всех элементов */
html,body{height:100%} /* растягиваем html и body на всю высоту окна */
body{ margin:0; /* убираем стандартные отступы */
  background:var(--bg); /* фон страницы */
  color:var(--fg); /* цвет текста */
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif; /* стек шрифтов */}
img{max-width:100%; /* изображения не выходят за контейнер */ display:block /* убираем лишние пробелы вокруг inline изображений */}
a{color:inherit; /* ссылка наследует цвет текста */ text-decoration:none /* убираем подчеркивание */}
h1,h2,h3{margin:0 0 12px} /* отступ снизу для заголовков */
p{margin:0 0 12px} /* отступ снизу для параграфов */
.muted{color:var(--muted)} /* приглушённый текст */
.wrap{max-width:980px; /* максимальная ширина контента */ margin:0 auto; /* центрирование */ padding:0 16px /* горизонтальные поля */}
.container{max-width:980px; margin:0 auto; padding:10px 16px 96px; /* внутренние отступы + место под нижнюю навигацию */ min-height:100svh /* высота минимум окно с учётом мобильных safe-area */}

/* Top bar */ /* секция стилей верхней панели */
.topbar{ position:sticky; /* фиксируется при прокрутке */ top:0; /* приклеено к верху */ z-index:20; /* поверх контента */ background:rgba(15,21,32,0.75); /* полупрозрачный фон */
  backdrop-filter: blur(12px); /* размытие заднего фона */ border-bottom:1px solid var(--border); /* нижняя граница */ }
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:56px} /* выравнивание содержимого топбара */
.brand{display:flex; align-items:center; gap:10px} /* блок логотип + название */
.logo{width:28px; height:28px; border-radius:10px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:var(--shadow)} /* значок/лого */
.brand-title{font-weight:600} /* утолщённый заголовок бренда */
.right{display:flex; align-items:center; gap:8px} /* правая часть топбара (селект и т.п.) */
#langSelect{background:#141b2c; border:1px solid var(--border); color:#e7e9ee; border-radius:10px; padding:6px 8px} /* селектор языка */

/* Cards / Grid */ /* карточки и сетки */
.card{ background:var(--card); /* фон карточки */ border:1px solid var(--border); /* граница */ border-radius:var(--radius); /* скругление */ box-shadow:var(--shadow); /* тень */
  padding:16px; /* внутренние отступы */ margin:0 0 16px /* отступ снизу */}
.card.subtle{background:rgba(18,24,38,0.6)} /* более прозрачная карточка */
.grid{display:grid; grid-template-columns:1fr; gap:16px} /* базовая сетка */
.cards-3{grid-template-columns:repeat(1,1fr)} /* начальная конфигурация сетки на 1 колонку */
@media(min-width:560px){ .cards-3{grid-template-columns:repeat(2,1fr)} } /* 2 колонки на средних экранах */
@media(min-width:900px){ .cards-3{grid-template-columns:repeat(3,1fr)} } /* 3 колонки на широких экранах */

/* NFT catalog & modal moved to catalog.css */ /* напоминание что перенесено */

.row{display:flex; align-items:center} /* горизонтальное выравнивание элементов */
.row.gap{gap:12px} /* промежуток между элементами */
.row.gap.sm{gap:8px} /* небольшой промежуток */
.row.between{justify-content:space-between} /* распределение элементов по краям */

/* Buttons */ /* базовые кнопки */
.btn{ display:inline-flex; /* строчно-блочный flex для выравнивания */ align-items:center; justify-content:center; /* центрируем содержимое */
  padding:10px 14px; /* внутренние отступы */ border-radius:12px; /* скругление */ border:1px solid var(--border); /* граница */
  background:linear-gradient(180deg,#1b2235,#101624); /* фон градиент */ cursor:pointer; transition:.2s transform, .2s opacity; /* плавные эффекты */ }
.btn:hover{ transform:translateY(-1px) } /* лёгкий подъём при наведении */
.btn.ghost{ background:transparent } /* прозрачная вариация */

/* List */ /* списки на странице */
.list{display:flex; flex-direction:column; gap:12px} /* вертикальный стек элементов */
.list .item{display:flex; gap:12px; align-items:center; padding:10px; border:1px dashed var(--border); border-radius:12px} /* элемент списка */

/* Profile */ /* базовая обертка профиля */
.profile{display:flex; gap:16px; align-items:center} /* горизонтальное расположение данных профиля */
.profile .avatar{width:72px; height:72px; border-radius:24px; background:#1a2031} /* заглушка аватара */

/* Warnings */ /* блоки предупреждений */
.warning{ padding:12px; border-radius:12px; background:#3a2a2a; border:1px solid #5a3a3a; color:#f4d1d1; margin-bottom:12px} /* оформление предупреждения */
.hidden{display:none!important} /* утилита скрытия элемента */

/* Bottom nav */ /* нижняя навигационная панель (мобильная) */
.bottom-nav{
  position:fixed; /* фиксируем у низа экрана */ bottom:0; left:0; right:0;
  display:flex; justify-content:space-around; gap:4px; /* равномерное распределение ссылок */
  background:rgba(15,21,32,0.95); /* фон с непрозр. */
  border-top:1px solid var(--border); /* верхняя граница */
  padding:8px env(safe-area-inset-right) calc(8px + env(safe-area-inset-bottom)) env(safe-area-inset-left); /* учитываем вырезы (notch) */
  z-index:100; /* поверх основного контента */
}
.bn-item{
  flex:1; /* равная ширина */ text-align:center; color:#e7e9ee; text-decoration:none; /* без подчеркивания */
  font-size:14px; display:flex; flex-direction:column; align-items:center; gap:2px; /* иконка + текст */
  padding:8px 0; border-radius:12px; /* скругление для активного состояния */
}
.bn-item.active{background:#171f31} /* фон активной вкладки */
.bn-item span{font-size:12px} /* меньший шрифт подписи */

/* Quests grid moved to quests.css */ /* сетка заданий вынесена */

/* Home page project intro moved to home.css */ /* блок intro главной вынесен */

/* Gradient variant (как кнопка "Отправить" в quests) */ /* универсальная градиентная кнопка */
.btn.gradient, body[data-page="home"] .btn.gradient { background:linear-gradient(135deg,#7c3aed,#2563eb); /* градиент */ color:#fff; border:0; }
.btn.gradient:hover{ filter:brightness(1.08); transform:translateY(-1px); } /* hover эффект */
.btn.gradient:active{ filter:brightness(.92); transform:translateY(0); } /* активное состояние */

/* Catalog search input moved to catalog.css */ /* поиск магазина вынесен */