/* ============================================================
   N1ceStudio — единый общий ХЕДЕР (собрано из оригинального кода)
   Подключается на ВСЕ страницы. Правится в одном месте.
   ============================================================ */

/* --- Отступ контента под фикс-хедер --- */
#allrecords { padding-top: 80px; }
body.ns-home #allrecords { padding-top: 0 !important; }
@media (max-width: 480px) {
  #allrecords { padding-top: 64px; }
  body.ns-home #allrecords { padding-top: 0 !important; }
}

body.ns-home .hero { padding-top: 110px !important; }
@media (max-width: 992px) { body.ns-home .hero { padding-top: 104px !important; } }
@media (max-width: 480px) { body.ns-home .hero { padding-top: 88px !important; } }

/* --- Базовый хедер --- */
.ns-header {
  position: fixed; top: 0; left: 0; width: 100%; height: 80px;
  background: linear-gradient(180deg, #0d0d16 0%, #0a0a12 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
  box-sizing: border-box; overflow: hidden; isolation: isolate; z-index: 1000;
}
.ns-header::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(59,130,246,0.3) 20%, rgba(99,102,241,0.5) 50%, rgba(59,130,246,0.3) 80%, transparent 100%);
  background-size: 200% 100%; animation: nsGradientFlow 8s ease-in-out infinite; z-index: 1;
}
@keyframes nsGradientFlow { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }

.ns-header-bg-pixels {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.25;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='8' height='8' fill='%23ffffff' fill-opacity='0.03'/%3E%3Crect x='8' y='8' width='8' height='8' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat; z-index: 1;
}
.ns-header-bg-glow {
  position: absolute; top: -40%; left: 25%; right: 25%; height: 180%;
  background: radial-gradient(ellipse at center, rgba(59,130,246,0.07) 0%, transparent 70%);
  pointer-events: none; z-index: 2;
}
.ns-container {
  position: relative; max-width: 1400px; height: 100%; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; gap: 24px; z-index: 3;
}

/* --- Логотип --- */
.ns-logo-block { display: flex; align-items: center; gap: 14px; text-decoration: none !important; user-select: none; flex-shrink: 0; min-width: fit-content; }
.ns-logo-img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(59,130,246,0.3)); }
.ns-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.ns-logo-title { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: 0.04em; text-transform: uppercase; }
.ns-blue-text { color: #3b82f6; text-shadow: 0 0 20px rgba(59,130,246,0.5); }
.ns-logo-subtitle { font-size: 9px; font-weight: 500; color: rgba(255,255,255,0.4); letter-spacing: 0.25em; text-transform: uppercase; }

/* --- Навигация --- */
.ns-nav-wrapper { display: flex; align-items: center; flex: 1; justify-content: center; min-width: 0; }
.ns-nav { display: flex; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 100px; padding: 6px; gap: 4px; backdrop-filter: blur(10px); flex-shrink: 0; position: relative; }

.ns-nav-indicator {
  position: absolute; top: 6px; left: 6px; width: 0; height: 0;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  border-radius: 100px; box-shadow: 0 2px 20px rgba(59,130,246,0.4);
  opacity: 0; z-index: 0; pointer-events: none;
  transition: left .42s cubic-bezier(.4,0,.2,1), top .42s cubic-bezier(.4,0,.2,1),
              width .42s cubic-bezier(.4,0,.2,1), height .42s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.ns-nav-link { padding: 10px 20px; border-radius: 100px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.7) !important; text-decoration: none !important; cursor: pointer; transition: color .35s ease; white-space: nowrap; user-select: none; position: relative; z-index: 1; }
.ns-nav-link:hover, .ns-nav-link.active { color: #fff !important; }

/* --- Правые кнопки --- */
.ns-right-section { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.ns-cabinet-btn { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; color: #fff !important; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); white-space: nowrap; }
.ns-cabinet-btn:hover { border-color: rgba(59,130,246,0.4); background: rgba(59,130,246,0.08); }
.ns-avatar-wrapper { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; }
.ns-avatar-icon { width: 12px; height: 12px; color: rgba(255,255,255,0.7); }
.ns-order-btn { padding: 12px 28px; background: linear-gradient(135deg, #3b82f6, #6366f1); border: none; border-radius: 14px; color: #fff !important; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); text-decoration: none !important; box-shadow: 0 4px 20px rgba(59,130,246,0.4); white-space: nowrap; }
.ns-order-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(59,130,246,0.5); }

/* --- Бургер --- */
.ns-burger { display: none; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; cursor: pointer; padding: 0; gap: 5px; transition: all 0.3s ease; flex-shrink: 0; }
.ns-burger:hover { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); }
.ns-burger-line { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
.ns-burger.active .ns-burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ns-burger.active .ns-burger-line:nth-child(2) { opacity: 0; }
.ns-burger.active .ns-burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Мобильное меню --- */
.ns-mobile-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(5,5,8,0.98); backdrop-filter: blur(30px); z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: all 0.4s cubic-bezier(0.4,0,0.2,1); pointer-events: none; overflow: hidden; }
.ns-mobile-menu-bg-pixels { position: absolute; inset: 0; pointer-events: none; opacity: 0.15; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='8' height='8' fill='%23ffffff' fill-opacity='0.03'/%3E%3Crect x='8' y='8' width='8' height='8' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E"); background-repeat: repeat; z-index: 1; }
.ns-mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all; }
.ns-mobile-header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,0.06); z-index: 3; }
.ns-mobile-logo { display: flex; align-items: center; gap: 12px; text-decoration: none !important; }
.ns-mobile-logo-img { width: 40px; height: 40px; }
.ns-mobile-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.ns-mobile-logo-title { font-size: 18px; font-weight: 900; color: #fff; letter-spacing: 0.04em; text-transform: uppercase; }
.ns-mobile-logo-subtitle { font-size: 8px; font-weight: 500; color: rgba(255,255,255,0.4); letter-spacing: 0.22em; text-transform: uppercase; }
.ns-mobile-menu-close { width: 44px; height: 44px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ns-mobile-menu-close svg { width: 20px; height: 20px; color: #fff; }
.ns-mobile-menu-body { position: relative; padding: 24px; z-index: 3; }
.ns-mobile-nav-link { display: block; padding: 16px 20px; border-radius: 12px; font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.7) !important; text-decoration: none !important; margin-bottom: 8px; transition: background .35s ease, color .35s ease; }
.ns-mobile-nav-link.active { background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(99,102,241,0.2)); color: #fff !important; }
.ns-mobile-actions { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 12px; }
.ns-mobile-cabinet-btn { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; color: #fff !important; font-size: 13px; font-weight: 700; text-transform: uppercase; text-decoration: none !important; }
.ns-mobile-order-btn { display: block; text-align: center; padding: 16px 24px; background: linear-gradient(135deg, #3b82f6, #6366f1); border-radius: 14px; color: #fff !important; font-size: 13px; font-weight: 700; text-transform: uppercase; text-decoration: none !important; }

body.ns-menu-open { overflow: hidden; }

/* --- Адаптив --- */
@media (max-width: 1200px) { .ns-nav-link { padding: 9px 16px; font-size: 13px; } }
@media (max-width: 1100px) {
  .ns-container { padding: 0 20px; gap: 16px; }
  .ns-logo-img { width: 46px; height: 46px; }
  .ns-logo-title { font-size: 19px; }
  .ns-logo-subtitle { font-size: 8px; }
  .ns-nav-link { padding: 8px 12px; font-size: 12px; }
  .ns-cabinet-btn span { display: none; }
  .ns-cabinet-btn { padding: 12px; }
  .ns-order-btn { padding: 12px 20px; font-size: 11px; }
}
@media (max-width: 992px) {
  .ns-nav { display: none; }
  .ns-right-section { display: none; }
  .ns-burger { display: flex; }
  .ns-logo-img { width: 42px; height: 42px; }
  .ns-logo-title { font-size: 17px; }
  .ns-logo-subtitle { font-size: 7px; }
}
@media (max-width: 480px) {
  .ns-header { height: 64px; }
  .ns-container { padding: 0 12px; }
  .ns-logo-block { gap: 10px; }
  .ns-logo-img { width: 32px; height: 32px; }
  .ns-logo-title { font-size: 14px; }
  .ns-logo-subtitle { font-size: 7px; letter-spacing: 0.2em; }
  .ns-burger { width: 40px; height: 40px; }
  .ns-burger-line { width: 18px; }
}