/**
 * NFS AUTO Design System v3 — Light Theme
 * Из ДНК логотипа: три полосы → три роли цвета
 * Хромовые градиенты + анимированные шиммеры + неоновые ховеры
 */

:root {
  /* === CORE PALETTE === */
  --nfs-white: #FFFFFF;
  --nfs-bg: #F0F3F8;
  --nfs-bg2: #E6EAF3;
  --nfs-surface: #FFFFFF;

  /* === BRAND: три полосы логотипа === */
  /* M-Синий — Primary (только для акцентов!) */
  --nfs-blue: #1A5FD9;
  --nfs-blue2: #2B6FE8;
  --nfs-blue3: #3B7FFF;
  --nfs-blue-dark: #1248B0;
  --nfs-blue-g: linear-gradient(150deg, #3B7FFF 0%, #1A5FD9 50%, #1248B0 100%);
  --nfs-blue-light: rgba(26, 95, 217, 0.08);
  --nfs-blue-glow: rgba(26, 95, 217, 0.22);

  /* NFS-Красный — Danger, внимание */
  --nfs-red: #C92222;
  --nfs-red-bright: #E03030;
  --nfs-red-dark: #A01818;
  --nfs-red-g: linear-gradient(150deg, #E03030 0%, #C92222 60%, #A01818 100%);
  --nfs-red-glow: rgba(201, 34, 34, 0.22);

  /* Зелёный — Success, электро */
  --nfs-green: #14A34A;
  --nfs-green-bright: #22C55E;
  --nfs-green-dark: #0A6A30;
  --nfs-green-light: rgba(20, 163, 74, 0.08);
  --nfs-green-glow: rgba(20, 163, 74, 0.22);

  /* Нитро — Warning, AI */
  --nfs-amber: #F59E0B;
  --nfs-amber-bright: #FBBF24;
  --nfs-amber-dark: #D97706;

  /* === CHROME RAMP (хромовая шкала) === */
  --nfs-ch0: #FFFFFF;
  --nfs-ch1: #F4F6FA;
  --nfs-ch2: #E0E5F0;
  --nfs-ch3: #B8C0D4;
  --nfs-ch4: #7A86A0;
  --nfs-ch5: #3A4260;
  --nfs-ch-g: linear-gradient(150deg, #FFFFFF 0%, #E8ECF5 30%, #D0D6E8 60%, #B8C0D4 100%);

  /* Кокпит — тёмный режим для nav/AI */
  --nfs-cockpit: #0D1117;
  --nfs-cockpit-mid: #1A2035;

  /* === TEXT === */
  --nfs-t1: #0D1117;
  --nfs-t2: #2A3450;
  --nfs-t3: #5A6480;
  --nfs-t4: #9AA0B8;

  /* === BORDERS === */
  --nfs-b1: rgba(58, 66, 96, 0.07);
  --nfs-b2: rgba(58, 66, 96, 0.12);
  --nfs-b3: rgba(26, 95, 217, 0.30);

  /* === TYPOGRAPHY === */
  --nfs-ff: 'Montserrat', system-ui, sans-serif;
  --nfs-ff-mono: 'Courier New', 'SF Mono', monospace;

  /* === RADII === */
  --nfs-r: 10px;
  --nfs-rl: 14px;
}

/* ══════════════════════════════════════════════════════════
   KEYFRAMES — анимации хромового блеска
   ══════════════════════════════════════════════════════════ */

@keyframes nfs-shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes nfs-shimmer-slow {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes nfs-shimmer-vertical {
  0% { background-position: center 200%; }
  100% { background-position: center -200%; }
}

/* ══════════════════════════════════════════════════════════
   SECTION LABEL
   ══════════════════════════════════════════════════════════ */

.nfs-sec-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--nfs-t4);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nfs-sec-label::before {
  content: '';
  width: 3px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--nfs-blue) 33%, var(--nfs-red) 33% 66%, var(--nfs-ch3) 66%);
}

/* ══════════════════════════════════════════════════════════
   CHROME TEXT — градиентный текст с анимацией
   ══════════════════════════════════════════════════════════ */

.nfs-ch-text {
  background: linear-gradient(135deg, var(--nfs-ch5) 0%, var(--nfs-blue) 35%, var(--nfs-ch5) 55%, var(--nfs-ch4) 75%, var(--nfs-ch5) 100%);
  background-size: 300% 100%;
  animation: nfs-shimmer-slow 5s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════════
   LOGO STRIPES — с анимированным блеском
   ══════════════════════════════════════════════════════════ */

.nfs-logo-stripes {
  display: flex;
  gap: 2.5px;
  align-items: flex-end;
  height: 17px;
}

.nfs-logo-stripes span {
  width: 4px;
  border-radius: 1px;
  transform: skewX(-12deg);
}

.nfs-logo-stripes span:nth-child(1) {
  background: linear-gradient(180deg, #3B7FFF, #1A5FD9, #0A2A80, #1A5FD9, #3B7FFF);
  background-size: 100% 300%;
  animation: nfs-shimmer-vertical 3s linear infinite;
  height: 17px;
}

.nfs-logo-stripes span:nth-child(2) {
  background: linear-gradient(180deg, #E03030, #C92222, #801010, #C92222, #E03030);
  background-size: 100% 300%;
  animation: nfs-shimmer-vertical 3s linear infinite 0.5s;
  height: 13px;
}

.nfs-logo-stripes span:nth-child(3) {
  background: linear-gradient(180deg, #FFFFFF, #D8DCE8, #909AAE, #D8DCE8, #FFFFFF);
  background-size: 100% 300%;
  animation: nfs-shimmer-vertical 3s linear infinite 1s;
  height: 9px;
}

/* ══════════════════════════════════════════════════════════
   CHROME DECORATIVE STRIPS — анимированные полосы
   ══════════════════════════════════════════════════════════ */

.nfs-chrome-strip {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--nfs-ch3) 10%,
    var(--nfs-white) 20%, var(--nfs-ch2) 28%,
    var(--nfs-ch3) 35%, var(--nfs-white) 42%,
    var(--nfs-ch2) 50%, var(--nfs-ch3) 58%,
    var(--nfs-white) 65%, var(--nfs-ch2) 72%,
    var(--nfs-ch3) 80%, var(--nfs-white) 88%,
    var(--nfs-ch3) 95%, transparent 100%
  );
  background-size: 300% 100%;
  animation: nfs-shimmer 3s linear infinite;
}

.nfs-brand-strip {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--nfs-blue) 5%, var(--nfs-blue3) 12%, var(--nfs-white) 18%, var(--nfs-blue3) 24%, var(--nfs-blue) 30%,
    var(--nfs-red) 35%, #ff8888 42%, var(--nfs-white) 48%, #ff8888 54%, var(--nfs-red) 60%,
    var(--nfs-ch3) 65%, var(--nfs-white) 72%, var(--nfs-ch3) 78%,
    transparent 100%
  );
  background-size: 300% 100%;
  animation: nfs-shimmer 4s linear infinite;
}

/* ══════════════════════════════════════════════════════════
   BUTTONS — градиенты + хромовый шиммер на ховере
   ══════════════════════════════════════════════════════════ */

.nfs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--nfs-ff);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  padding: 10px 20px;
  transition: transform 0.15s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

/* Shimmer overlay на ховере для всех кнопок */
.nfs-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% center;
  transition: background-position 0.4s;
  pointer-events: none;
}

.nfs-btn:hover::after {
  background-position: -200% center;
}

/* Primary — синий градиент от светлого к тёмному */
.nfs-btn-primary {
  background: linear-gradient(150deg, #3B7FFF 0%, var(--nfs-blue2) 40%, var(--nfs-blue) 70%, #1248B0 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 2px 10px rgba(26,95,217,0.3),
    0 0 0 0.5px rgba(26,95,217,0.4);
}

.nfs-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(59,127,255,0.6),
    0 0 14px rgba(59,127,255,0.3),
    0 4px 14px rgba(26,95,217,0.35),
    0 1px 0 rgba(255,255,255,0.2) inset;
}

/* Chrome — хромовый градиент */
.nfs-btn-chrome {
  background: linear-gradient(150deg, var(--nfs-white) 0%, var(--nfs-ch1) 40%, var(--nfs-ch2) 80%, var(--nfs-ch3) 100%);
  color: var(--nfs-ch5);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 -1px 0 rgba(0,0,0,0.07) inset,
    0 1px 5px rgba(0,0,0,0.08),
    0 0 0 0.5px var(--nfs-b2);
}

.nfs-btn-chrome:hover {
  color: var(--nfs-blue);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(26,95,217,0.4),
    0 0 12px rgba(26,95,217,0.18),
    0 2px 8px rgba(0,0,0,0.07),
    0 1px 0 rgba(255,255,255,0.95) inset;
}

/* Ghost — прозрачный с неоновым ховером */
.nfs-btn-ghost {
  background: transparent;
  color: var(--nfs-t2);
  border: 0.5px solid var(--nfs-b2);
  box-shadow: none;
}

.nfs-btn-ghost:hover {
  border-color: rgba(26,95,217,0.4);
  color: var(--nfs-blue);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

/* Danger — красный градиент */
.nfs-btn-danger {
  background: linear-gradient(150deg, #E03030 0%, var(--nfs-red) 50%, #A01818 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 2px 10px rgba(201,34,34,0.25),
    0 0 0 0.5px rgba(201,34,34,0.4);
}

.nfs-btn-danger:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(201,34,34,0.5),
    0 0 14px var(--nfs-red-glow);
}

/* Icon button — хромовый градиент */
.nfs-ibtn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--nfs-t3);
  transition: all 0.2s;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.05),
    0 1px 0 rgba(255,255,255,0.8) inset;
}

.nfs-ibtn:hover {
  border-color: rgba(26,95,217,0.4);
  color: var(--nfs-blue);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

.nfs-ibtn.active {
  background: linear-gradient(150deg, rgba(59,127,255,0.12), rgba(26,95,217,0.06));
  border-color: rgba(26,95,217,0.25);
  color: var(--nfs-blue);
}

/* ══════════════════════════════════════════════════════════
   INPUTS — хромовые градиенты
   ══════════════════════════════════════════════════════════ */

.nfs-input {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--nfs-ff);
  font-size: 12px;
  font-weight: 500;
  color: var(--nfs-t1);
  border: 0.5px solid var(--nfs-b2);
  border-radius: 8px;
  outline: none;
  background: linear-gradient(180deg, var(--nfs-white) 0%, var(--nfs-ch1) 100%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) inset;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.nfs-input::placeholder {
  color: var(--nfs-t4);
}

.nfs-input:focus {
  border-color: var(--nfs-b3);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow), 0 1px 4px rgba(0,0,0,0.05) inset;
}

/* ══════════════════════════════════════════════════════════
   BADGES — градиентные фоны вместо сплошных
   ══════════════════════════════════════════════════════════ */

.nfs-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 20px;
}

.nfs-badge-blue {
  background: linear-gradient(135deg, rgba(59,127,255,0.12), rgba(26,95,217,0.06));
  color: var(--nfs-blue);
  border: 0.5px solid rgba(26,95,217,0.22);
}

.nfs-badge-red {
  background: linear-gradient(135deg, rgba(201,34,34,0.1), rgba(201,34,34,0.04));
  color: var(--nfs-red);
  border: 0.5px solid rgba(201,34,34,0.2);
}

.nfs-badge-green {
  background: linear-gradient(135deg, rgba(20,163,74,0.1), rgba(20,163,74,0.04));
  color: var(--nfs-green);
  border: 0.5px solid rgba(20,163,74,0.2);
}

.nfs-badge-chrome {
  background: linear-gradient(135deg, var(--nfs-ch1), var(--nfs-ch2));
  color: var(--nfs-ch5);
  border: 0.5px solid var(--nfs-ch2);
}

.nfs-badge-ai {
  background: linear-gradient(135deg, var(--nfs-blue2), var(--nfs-blue));
  color: #fff;
  box-shadow: 0 2px 6px rgba(26,95,217,0.28);
}

/* ══════════════════════════════════════════════════════════
   TAGS — хромовые с градиентом
   ══════════════════════════════════════════════════════════ */

.nfs-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--nfs-ff);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b2);
  color: var(--nfs-t3);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.8) inset;
}

.nfs-tag:hover,
.nfs-tag.active {
  background: linear-gradient(135deg, rgba(59,127,255,0.12), rgba(26,95,217,0.06));
  border-color: rgba(26,95,217,0.32);
  color: var(--nfs-blue);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

/* ══════════════════════════════════════════════════════════
   HUD NUMBERS — моноширинный с градиентным фоном
   ══════════════════════════════════════════════════════════ */

.nfs-hud {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--nfs-ff-mono);
  color: var(--nfs-blue);
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, rgba(59,127,255,0.08), rgba(26,95,217,0.04));
  border: 0.5px solid rgba(26,95,217,0.15);
  padding: 1px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════
   CARD BASE — хромовый градиент
   ══════════════════════════════════════════════════════════ */

.nfs-card {
  background: linear-gradient(170deg, var(--nfs-white) 0%, var(--nfs-ch1) 100%);
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-rl);
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.9) inset;
}

/* ══════════════════════════════════════════════════════════
   STAT PILL — с анимированным шиммером
   ══════════════════════════════════════════════════════════ */

.nfs-stat {
  background: linear-gradient(150deg, var(--nfs-white) 0%, var(--nfs-ch1) 50%, var(--nfs-ch2) 100%);
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-r);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 2px 6px rgba(0,0,0,0.05);
}

.nfs-stat::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: nfs-shimmer 4s linear infinite;
}

.nfs-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--nfs-t1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.nfs-stat-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--nfs-t4);
  text-transform: uppercase;
  margin-top: 3px;
}

/* ══════════════════════════════════════════════════════════
   MOTIF CARDS — анимированные полосы
   ══════════════════════════════════════════════════════════ */

.nfs-motif-card {
  border-radius: var(--nfs-rl);
  padding: 18px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.9) inset;
}

/* Animated top stripe */
.nfs-motif-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--nfs-blue) 0% 28%,
    var(--nfs-white) 28%, var(--nfs-white) 32%,
    var(--nfs-red) 32%, var(--nfs-red) 60%,
    var(--nfs-white) 60%, var(--nfs-white) 64%,
    var(--nfs-ch3) 64%, var(--nfs-ch3) 88%,
    var(--nfs-white) 88%, var(--nfs-white) 92%,
    var(--nfs-ch3) 92%
  );
  background-size: 300% 100%;
  animation: nfs-shimmer 3.5s linear infinite;
}

/* Animated left stripe */
.nfs-motif-left::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg,
    var(--nfs-blue) 0% 28%,
    var(--nfs-white) 28%, var(--nfs-white) 32%,
    var(--nfs-red) 32%, var(--nfs-red) 60%,
    var(--nfs-white) 60%, var(--nfs-white) 64%,
    var(--nfs-ch3) 64%, var(--nfs-ch3) 88%,
    var(--nfs-white) 88%, var(--nfs-white) 92%,
    var(--nfs-ch3) 92%
  );
  background-size: 100% 300%;
  animation: nfs-shimmer-vertical 3.5s linear infinite;
}

/* ══════════════════════════════════════════════════════════
   AI BLOCK — тёмный кокпит с анимированной полосой
   ══════════════════════════════════════════════════════════ */

.nfs-ai-block {
  background: linear-gradient(155deg, #0C1630 0%, #0A1020 60%, #101828 100%);
  border-radius: var(--nfs-rl);
  border: 0.5px solid rgba(26,95,217,0.22);
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(26,95,217,0.18);
}

.nfs-ai-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--nfs-blue) 0%, var(--nfs-blue3) 15%, #fff 25%, var(--nfs-blue3) 35%,
    var(--nfs-red) 50%, #ff9999 62%, var(--nfs-red) 72%,
    var(--nfs-ch3) 82%, #fff 90%, var(--nfs-ch3) 100%
  );
  background-size: 300% 100%;
  animation: nfs-shimmer 3.5s linear infinite;
}

/* ══════════════════════════════════════════════════════════
   GRADIENT PRICES — по сегментам
   ══════════════════════════════════════════════════════════ */

.nfs-price-blue {
  background: linear-gradient(135deg, var(--nfs-blue2), var(--nfs-blue-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nfs-price-green {
  background: linear-gradient(135deg, var(--nfs-green-bright), var(--nfs-green-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nfs-price-bronze {
  background: linear-gradient(135deg, #92400E, #C97020);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════════
   DARK NAV (Кокпит)
   ══════════════════════════════════════════════════════════ */

.nfs-nav-dark {
  background: linear-gradient(180deg, var(--nfs-cockpit-mid) 0%, var(--nfs-cockpit) 100%);
  padding: 0 22px;
  height: 52px;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 16px rgba(0,0,0,0.2);
}

/* Animated stripe at bottom */
.nfs-nav-dark::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--nfs-blue) 15%, var(--nfs-blue3) 25%, #fff 35%, var(--nfs-blue3) 45%,
    var(--nfs-red) 60%, #ffaaaa 68%, var(--nfs-red) 75%,
    var(--nfs-ch3) 85%, var(--nfs-white) 90%, var(--nfs-ch3) 95%,
    transparent 100%
  );
  background-size: 300% 100%;
  animation: nfs-shimmer 4s linear infinite;
}

.nfs-nav-dark .nfs-nav-link {
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  font-weight: 600;
  padding: 0 14px;
  height: 52px;
  display: flex;
  align-items: center;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  letter-spacing: 0.03em;
}

.nfs-nav-dark .nfs-nav-link:hover {
  color: rgba(255,255,255,0.9);
}

.nfs-nav-dark .nfs-nav-link.active {
  color: var(--nfs-blue3);
  border-bottom-color: var(--nfs-blue3);
}

.nfs-nav-dark .nfs-logo-word {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.nfs-nav-dark .nfs-nav-search {
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  cursor: text;
  transition: border-color 0.2s, box-shadow 0.2s;
  color: rgba(255,255,255,0.4);
  font-size: 11px;
}

.nfs-nav-dark .nfs-nav-search:hover {
  border-color: rgba(59,127,255,0.4);
  box-shadow: 0 0 0 3px rgba(59,127,255,0.15);
}

/* ══════════════════════════════════════════════════════════
   FILTER CARD
   ══════════════════════════════════════════════════════════ */

.nfs-filter-card {
  background: linear-gradient(170deg, var(--nfs-white) 0%, var(--nfs-ch1) 100%);
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-rl);
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.9) inset;
}

.nfs-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.nfs-filter-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--nfs-t1);
}

.nfs-filter-reset {
  font-size: 11px;
  font-weight: 600;
  color: var(--nfs-blue);
  cursor: pointer;
  transition: opacity 0.2s;
}

.nfs-filter-reset:hover {
  opacity: 0.7;
}

.nfs-filter-group {
  margin-bottom: 16px;
}

.nfs-filter-group-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nfs-t3);
  margin-bottom: 10px;
}

/* Checkbox */
.nfs-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
}

.nfs-checkbox-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 1.5px solid var(--nfs-ch3);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nfs-checkbox.checked .nfs-checkbox-box {
  background: linear-gradient(150deg, #3B7FFF, var(--nfs-blue));
  border-color: var(--nfs-blue);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

.nfs-checkbox-box svg {
  width: 9px;
  height: 7px;
  opacity: 0;
}

.nfs-checkbox.checked .nfs-checkbox-box svg {
  opacity: 1;
}

.nfs-checkbox-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--nfs-t2);
  flex: 1;
}

.nfs-checkbox-count {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--nfs-ff-mono);
  color: var(--nfs-blue);
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, rgba(59,127,255,0.08), rgba(26,95,217,0.04));
  border: 0.5px solid rgba(26,95,217,0.15);
  padding: 2px 8px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

/* Tag buttons for КПП */
.nfs-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nfs-filter-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b2);
  color: var(--nfs-t3);
}

.nfs-filter-tag:hover,
.nfs-filter-tag.active {
  background: linear-gradient(135deg, rgba(59,127,255,0.12), rgba(26,95,217,0.06));
  border-color: rgba(26,95,217,0.32);
  color: var(--nfs-blue);
}

.nfs-filter-tag.active {
  box-shadow: 0 0 0 2px var(--nfs-blue-glow);
}

/* Submit button */
.nfs-filter-submit {
  width: 100%;
  margin-top: 16px;
}

/* ══════════════════════════════════════════════════════════
   CORNER ACCENT (угловой мотив)
   ══════════════════════════════════════════════════════════ */

.nfs-motif-corner {
  position: relative;
  overflow: hidden;
}

.nfs-motif-corner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: 
    linear-gradient(135deg, 
      var(--nfs-blue) 0%, var(--nfs-blue) 20%,
      transparent 20%, transparent 25%,
      var(--nfs-red) 25%, var(--nfs-red) 45%,
      transparent 45%, transparent 50%,
      var(--nfs-ch3) 50%, var(--nfs-ch3) 70%,
      transparent 70%
    );
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* ══════════════════════════════════════════════════════════
   CARD WITH BUTTONS (alternative car card style)
   ══════════════════════════════════════════════════════════ */

.nfs-cc-alt .nfs-cc-body {
  padding: 14px;
}

.nfs-cc-alt .nfs-cc-meta-inline {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--nfs-t3);
  margin-bottom: 12px;
}

.nfs-cc-alt .nfs-cc-meta-inline span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nfs-cc-alt .nfs-cc-buttons {
  display: flex;
  gap: 8px;
}

.nfs-cc-alt .nfs-cc-btn-details {
  flex: 1;
}

.nfs-cc-alt .nfs-cc-btn-compare {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ══════════════════════════════════════════════════════════
   A. BREADCRUMB
   ══════════════════════════════════════════════════════════ */

.nfs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.nfs-bc-item {
  font-size: 11px;
  font-weight: 500;
  color: var(--nfs-t3);
  cursor: pointer;
  transition: color 0.15s;
  text-decoration: none;
}

.nfs-bc-item:hover {
  color: var(--nfs-blue);
}

.nfs-bc-item.active {
  color: var(--nfs-t1);
  font-weight: 600;
  cursor: default;
}

.nfs-bc-sep {
  color: var(--nfs-ch3);
  font-size: 10px;
  user-select: none;
}

/* ══════════════════════════════════════════════════════════
   B. FEATURE CARDS (top of catalog)
   ══════════════════════════════════════════════════════════ */

.nfs-feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 992px) {
  .nfs-feat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
  .nfs-feat-grid { grid-template-columns: 1fr; }
}

.nfs-feat-card {
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-r);
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.9) inset;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.nfs-feat-card:hover {
  border-color: var(--nfs-b3);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(26,95,217,0.15), 0 0 16px rgba(26,95,217,0.1), 0 4px 14px rgba(0,0,0,0.08);
}

.nfs-feat-card:hover .nfs-feat-icon {
  box-shadow: 0 0 0 4px var(--nfs-blue-glow);
}

.nfs-feat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s;
}

.nfs-feat-icon--purple { background: linear-gradient(135deg, #2B1F6E, #1A1248); box-shadow: 0 2px 8px rgba(91,33,182,0.25); }
.nfs-feat-icon--blue { background: linear-gradient(135deg, #1a3a80, #1248B0); box-shadow: 0 2px 8px rgba(26,95,217,0.25); }
.nfs-feat-icon--green { background: linear-gradient(135deg, #0A5C30, #14A34A); box-shadow: 0 2px 8px rgba(20,163,74,0.25); }
.nfs-feat-icon--amber { background: linear-gradient(135deg, #923800, #D97706); box-shadow: 0 2px 8px rgba(217,119,6,0.25); }

.nfs-feat-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--nfs-t1);
  margin-bottom: 2px;
}

.nfs-feat-desc {
  font-size: 10px;
  color: var(--nfs-t3);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   C. CATALOG TOOLBAR
   ══════════════════════════════════════════════════════════ */

.nfs-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nfs-count-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--nfs-t1);
}

.nfs-count-badge span {
  color: var(--nfs-blue);
}

.nfs-sort-select {
  padding: 7px 28px 7px 11px;
  font-family: var(--nfs-ff);
  font-size: 11px;
  font-weight: 600;
  color: var(--nfs-t2);
  border: 0.5px solid var(--nfs-b2);
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7590' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.nfs-sort-select:focus {
  border-color: var(--nfs-b3);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

.nfs-view-btns {
  display: flex;
  gap: 4px;
  border: 0.5px solid var(--nfs-b2);
  border-radius: 8px;
  padding: 3px;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
}

.nfs-view-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nfs-t4);
  background: transparent;
  transition: all 0.15s;
  font-family: var(--nfs-ff);
}

.nfs-view-btn.active {
  background: linear-gradient(150deg, var(--nfs-blue2), var(--nfs-blue));
  color: #fff;
  box-shadow: 0 1px 5px rgba(26,95,217,0.3);
}

.nfs-cmp-btn-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 8px;
  background: linear-gradient(150deg, rgba(59,127,255,0.1), rgba(26,95,217,0.05));
  border: 0.5px solid rgba(26,95,217,0.25);
  color: var(--nfs-blue);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
}

.nfs-cmp-btn-inline:hover {
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
  background: linear-gradient(150deg, rgba(59,127,255,0.15), rgba(26,95,217,0.08));
}

/* ══════════════════════════════════════════════════════════
   D. FILTER SIDEBAR (Extended)
   ══════════════════════════════════════════════════════════ */

.nfs-filter-sidebar {
  background: linear-gradient(170deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-rl);
  padding: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.9) inset;
}

.nfs-fg {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--nfs-b1);
}

.nfs-fg:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.nfs-fg-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nfs-t3);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.nfs-fg-label svg {
  transition: transform 0.2s;
  color: var(--nfs-ch4);
}

.nfs-fg-label.open svg {
  transform: rotate(180deg);
}

.nfs-search-inp {
  width: 100%;
  padding: 7px 10px 7px 28px;
  border: 0.5px solid var(--nfs-b2);
  border-radius: 7px;
  font-family: var(--nfs-ff);
  font-size: 11px;
  color: var(--nfs-t1);
  background: linear-gradient(180deg, var(--nfs-white), var(--nfs-ch1));
  outline: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) inset;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.nfs-search-inp:focus {
  border-color: var(--nfs-b3);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow), 0 1px 3px rgba(0,0,0,0.04) inset;
}

.nfs-range-row {
  display: flex;
  gap: 7px;
  align-items: center;
}

.nfs-range-input {
  flex: 1;
  padding: 7px 9px;
  border: 0.5px solid var(--nfs-b2);
  border-radius: 7px;
  text-align: center;
  font-family: var(--nfs-ff);
  font-size: 11px;
  font-weight: 700;
  color: var(--nfs-t1);
  background: linear-gradient(180deg, var(--nfs-white), var(--nfs-ch1));
  outline: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) inset;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.nfs-range-input:focus {
  border-color: var(--nfs-b3);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

.nfs-fuel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.nfs-fuel-tag {
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b2);
  color: var(--nfs-t3);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.2s;
}

.nfs-fuel-tag:hover,
.nfs-fuel-tag.active {
  background: linear-gradient(135deg, rgba(59,127,255,0.12), rgba(26,95,217,0.06));
  border-color: rgba(26,95,217,0.3);
  color: var(--nfs-blue);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

/* ══════════════════════════════════════════════════════════
   E. LOAD MORE BUTTON
   ══════════════════════════════════════════════════════════ */

.nfs-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  font-family: var(--nfs-ff);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(160deg, var(--nfs-white) 0%, var(--nfs-ch1) 50%, var(--nfs-ch2) 100%);
  border: 0.5px solid var(--nfs-b2);
  color: var(--nfs-ch5);
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 2px 8px rgba(0,0,0,0.06), 0 0 0 0.5px var(--nfs-b1);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.nfs-load-more::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% center;
  pointer-events: none;
  transition: background-position 0.4s;
}

.nfs-load-more:hover::after {
  background-position: -200% center;
}

.nfs-load-more:hover {
  color: var(--nfs-blue);
  border-color: rgba(26,95,217,0.35);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(26,95,217,0.2), 0 0 14px rgba(26,95,217,0.1), 0 4px 10px rgba(0,0,0,0.08);
}

.nfs-load-more-count {
  background: linear-gradient(135deg, rgba(59,127,255,0.12), rgba(26,95,217,0.06));
  border: 0.5px solid rgba(26,95,217,0.2);
  color: var(--nfs-blue);
  border-radius: 4px;
  padding: 1px 7px;
  font-family: var(--nfs-ff-mono);
  font-size: 11px;
}

.nfs-progress-bar {
  width: 100%;
  height: 3px;
  background: var(--nfs-ch2);
  border-radius: 2px;
  overflow: hidden;
}

.nfs-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--nfs-blue), var(--nfs-blue3));
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ══════════════════════════════════════════════════════════
   F. PRICE TREND MINI CHART
   ══════════════════════════════════════════════════════════ */

.nfs-trend-wrap {
  padding: 14px;
  background: linear-gradient(170deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-r);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.nfs-trend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.nfs-trend-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--nfs-t1);
}

.nfs-trend-delta {
  font-size: 11px;
  font-weight: 700;
  color: var(--nfs-green);
  background: var(--nfs-green-light);
  border: 0.5px solid rgba(20,163,74,0.2);
  border-radius: 5px;
  padding: 2px 7px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nfs-trend-delta.down {
  color: var(--nfs-red);
  background: rgba(201,34,34,0.07);
  border-color: rgba(201,34,34,0.2);
}

.nfs-trend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--nfs-t4);
  font-weight: 600;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════
   G. PHOTO GALLERY
   ══════════════════════════════════════════════════════════ */

.nfs-gallery-wrap {
  border-radius: var(--nfs-rl);
  overflow: hidden;
  position: relative;
}

.nfs-gallery-main {
  width: 100%;
  height: 300px;
  background: linear-gradient(155deg, #0C1830 0%, #0A1020 60%, #101828 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.nfs-gallery-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--nfs-blue) 15%, var(--nfs-blue3) 25%, #fff 33%, var(--nfs-blue3) 41%, var(--nfs-red) 55%, #ffaaaa 63%, var(--nfs-red) 71%, var(--nfs-ch3) 80%, #fff 87%, var(--nfs-ch3) 93%, transparent 100%);
  background-size: 300% 100%;
  animation: nfs-shimmer 3.5s linear infinite;
  z-index: 2;
}

.nfs-gallery-nav {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(10,15,35,0.75);
  backdrop-filter: blur(6px);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 4px 10px;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  font-weight: 700;
  z-index: 3;
  font-family: var(--nfs-ff-mono);
  letter-spacing: 0.05em;
}

.nfs-gallery-badge-row {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  z-index: 3;
}

.nfs-g-badge {
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.nfs-g-badge--blue {
  background: linear-gradient(135deg, var(--nfs-blue2), var(--nfs-blue));
  color: #fff;
  box-shadow: 0 2px 8px rgba(26,95,217,0.35);
}

.nfs-g-badge--green {
  background: linear-gradient(135deg, #16A34A, #14A34A);
  color: #fff;
  box-shadow: 0 2px 8px rgba(20,163,74,0.3);
}

.nfs-thumbs {
  display: flex;
  gap: 6px;
  padding: 8px;
  background: linear-gradient(180deg, var(--nfs-white), var(--nfs-ch1));
  border-top: 0.5px solid var(--nfs-b1);
}

.nfs-thumb {
  width: 64px;
  height: 44px;
  border-radius: 6px;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  border: 1.5px solid transparent;
  transition: all 0.15s;
  background: linear-gradient(155deg, #1a2535, #0a1020);
}

.nfs-thumb.active {
  border-color: var(--nfs-blue);
  box-shadow: 0 0 0 2px var(--nfs-blue-glow);
}

.nfs-thumb:hover:not(.active) {
  border-color: var(--nfs-ch3);
}

/* ══════════════════════════════════════════════════════════
   H. PRICE BLOCK + ACTIONS
   ══════════════════════════════════════════════════════════ */

.nfs-price-block {
  background: linear-gradient(160deg, var(--nfs-white) 0%, var(--nfs-ch1) 60%, var(--nfs-ch2) 100%);
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-rl);
  padding: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.9) inset;
  position: relative;
  overflow: hidden;
}

.nfs-price-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--nfs-blue) 0% 33%, #fff 33% 35%, var(--nfs-red) 35% 68%, #fff 68% 70%, var(--nfs-ch3) 70% 100%);
  background-size: 300% 100%;
  animation: nfs-shimmer 3s linear infinite;
}

/* Без верхней анимированной полоски (страница лота и др.) */
.nfs-price-block--no-shimmer::before {
  display: none;
}

.nfs-price-main {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--nfs-blue2) 0%, var(--nfs-blue) 50%, #1248B0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
}

.nfs-price-byn {
  font-size: 16px;
  font-weight: 700;
  -webkit-text-fill-color: var(--nfs-t3);
  color: var(--nfs-t3);
  margin-left: 4px;
}

.nfs-price-fair {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--nfs-green);
  background: var(--nfs-green-light);
  border: 0.5px solid rgba(20,163,74,0.2);
  border-radius: 5px;
  padding: 4px 9px;
  margin-bottom: 14px;
}

.nfs-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 10px;
}

.nfs-act-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 8px;
  font-family: var(--nfs-ff);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  border: 0.5px solid var(--nfs-b2);
  transition: all 0.2s;
  letter-spacing: 0.02em;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  color: var(--nfs-t2);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.8) inset;
}

.nfs-act-btn:hover {
  border-color: rgba(26,95,217,0.35);
  color: var(--nfs-blue);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
  transform: translateY(-1px);
}

.nfs-act-btn.primary {
  background: var(--nfs-blue-g);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(26,95,217,0.28), 0 1px 0 rgba(255,255,255,0.15) inset;
}

.nfs-act-btn.primary:hover {
  box-shadow: 0 0 0 1px rgba(59,127,255,0.5), 0 0 14px rgba(59,127,255,0.25);
}

.nfs-act-btn.ai {
  background: linear-gradient(135deg, #0C1830, #0A1020);
  color: #7AB3FF;
  border-color: rgba(26,95,217,0.25);
  box-shadow: 0 0 0 0.5px rgba(26,95,217,0.2);
}

.nfs-act-btn.ai:hover {
  box-shadow: 0 0 0 1px rgba(59,127,255,0.4), 0 0 12px rgba(59,127,255,0.2);
}

/* ══════════════════════════════════════════════════════════
   I. QUICK SPECS BAR
   ══════════════════════════════════════════════════════════ */

.nfs-specs-bar {
  display: flex;
  gap: 0;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-r);
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.9) inset;
}

.nfs-spec-item {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 0.5px solid var(--nfs-b1);
  transition: background 0.15s;
  cursor: default;
}

.nfs-spec-item:last-child {
  border-right: none;
}

.nfs-spec-item:hover {
  background: rgba(26,95,217,0.03);
}

.nfs-spec-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--nfs-t4);
}

.nfs-spec-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--nfs-t1);
}

/* ══════════════════════════════════════════════════════════
   J. CHARACTERISTICS TABLE
   ══════════════════════════════════════════════════════════ */

.nfs-char-section {
  background: linear-gradient(170deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-rl);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.nfs-char-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  background: linear-gradient(160deg, var(--nfs-ch1), var(--nfs-ch2));
  border-bottom: 0.5px solid var(--nfs-b1);
  font-size: 11px;
  font-weight: 700;
  color: var(--nfs-t2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.15s;
  position: relative;
  overflow: hidden;
}

.nfs-char-group-head::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--nfs-blue) 33%, var(--nfs-red) 33% 66%, var(--nfs-ch3) 66%);
}

.nfs-char-group-head:hover {
  background: linear-gradient(160deg, var(--nfs-ch2), var(--nfs-ch3));
}

.nfs-char-row {
  display: flex;
  padding: 9px 16px;
  border-bottom: 0.5px solid var(--nfs-b1);
  transition: background 0.15s;
}

.nfs-char-row:hover {
  background: rgba(26,95,217,0.03);
}

.nfs-char-row:last-child {
  border-bottom: none;
}

.nfs-char-key {
  font-size: 11px;
  color: var(--nfs-t3);
  font-weight: 500;
  width: 50%;
  flex-shrink: 0;
}

.nfs-char-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--nfs-t1);
  text-align: right;
  flex: 1;
}

/* ══════════════════════════════════════════════════════════
   K. AI ANALYSIS TABS + DONUT
   ══════════════════════════════════════════════════════════ */

.nfs-ai-tabs {
  display: flex;
  gap: 2px;
  background: linear-gradient(160deg, var(--nfs-ch1), var(--nfs-ch2));
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 14px;
}

.nfs-ai-tab {
  flex: 1;
  padding: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
  color: var(--nfs-t3);
  transition: all 0.2s;
  border: none;
  background: transparent;
  font-family: var(--nfs-ff);
}

.nfs-ai-tab.active {
  background: linear-gradient(150deg, var(--nfs-blue2), var(--nfs-blue));
  color: #fff;
  box-shadow: 0 2px 8px rgba(26,95,217,0.3);
}

.nfs-donut-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 0 auto 16px;
}

.nfs-donut-bg {
  fill: none;
  stroke: var(--nfs-ch2);
  stroke-width: 12;
}

.nfs-donut-fg {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 283;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: nfs-dash 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes nfs-dash {
  to { stroke-dashoffset: var(--nfs-donut-offset, 70); }
}

.nfs-donut-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nfs-donut-score {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--nfs-blue2), #1248B0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nfs-donut-score--green {
  background: linear-gradient(135deg, #22C55E, #14A34A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nfs-donut-max {
  font-size: 10px;
  color: var(--nfs-t4);
  font-weight: 600;
}

.nfs-ai-verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--nfs-green-light);
  border: 0.5px solid rgba(20,163,74,0.2);
  margin-bottom: 10px;
}

.nfs-ai-verdict-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22C55E, #14A34A);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(20,163,74,0.3);
}

.nfs-ai-verdict-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--nfs-green);
}

.nfs-ai-verdict-sub {
  font-size: 10px;
  color: var(--nfs-t3);
  margin-top: 1px;
}

/* Risk items */
.nfs-risk-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--nfs-b1);
}

.nfs-risk-item:last-child {
  border-bottom: none;
}

.nfs-risk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}

.nfs-risk-dot--green {
  background: #22C55E;
  box-shadow: 0 0 5px rgba(34,197,94,0.4);
}

.nfs-risk-dot--amber {
  background: #F59E0B;
  box-shadow: 0 0 5px rgba(245,158,11,0.4);
}

.nfs-risk-dot--red {
  background: var(--nfs-red);
  box-shadow: 0 0 5px rgba(201,34,34,0.4);
}

.nfs-risk-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--nfs-t2);
}

.nfs-risk-sub {
  font-size: 10px;
  color: var(--nfs-t3);
  margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════
   L. HISTORY TIMELINE
   ══════════════════════════════════════════════════════════ */

.nfs-timeline {
  position: relative;
  padding-left: 22px;
}

.nfs-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: linear-gradient(180deg, var(--nfs-blue) 0%, var(--nfs-ch2) 100%);
}

.nfs-tl-item {
  position: relative;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--nfs-b1);
}

.nfs-tl-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.nfs-tl-dot {
  position: absolute;
  left: -22px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nfs-blue2), var(--nfs-blue));
  border: 2px solid var(--nfs-white);
  box-shadow: 0 0 0 2px var(--nfs-blue), 0 0 8px var(--nfs-blue-glow);
}

.nfs-tl-dot--warn {
  background: linear-gradient(135deg, #FBBF24, #D97706);
  box-shadow: 0 0 0 2px #D97706;
}

.nfs-tl-dot--gray {
  background: linear-gradient(135deg, var(--nfs-ch3), var(--nfs-ch4));
  box-shadow: 0 0 0 2px var(--nfs-ch3);
}

.nfs-tl-date {
  font-size: 9px;
  font-weight: 700;
  color: var(--nfs-t4);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.nfs-tl-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--nfs-t1);
}

.nfs-tl-sub {
  font-size: 10px;
  color: var(--nfs-t3);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
   M. EQUIPMENT TABS
   ══════════════════════════════════════════════════════════ */

.nfs-equip-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.nfs-eq-tab {
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b2);
  color: var(--nfs-t3);
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.nfs-eq-tab.active {
  background: var(--nfs-blue-g);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(26,95,217,0.3);
}

.nfs-eq-tab:not(.active):hover {
  border-color: rgba(26,95,217,0.3);
  color: var(--nfs-blue);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

.nfs-equip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.nfs-eq-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.nfs-eq-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #22C55E, #14A34A);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(20,163,74,0.3);
}

.nfs-eq-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--nfs-t2);
}

/* ══════════════════════════════════════════════════════════
   N. SIMILAR CARS ROW
   ══════════════════════════════════════════════════════════ */

.nfs-similar-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.nfs-similar-row::-webkit-scrollbar {
  height: 3px;
}

.nfs-similar-row::-webkit-scrollbar-track {
  background: var(--nfs-ch2);
  border-radius: 2px;
}

.nfs-similar-row::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--nfs-blue), var(--nfs-blue3));
  border-radius: 2px;
}

.nfs-sim-card {
  flex-shrink: 0;
  width: 180px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(170deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.2s;
}

.nfs-sim-card:hover {
  transform: translateY(-2px);
  border-color: rgba(26,95,217,0.3);
  box-shadow: 0 0 0 1px rgba(26,95,217,0.12), 0 6px 16px rgba(0,0,0,0.1);
}

.nfs-sim-img {
  width: 100%;
  height: 100px;
  background: linear-gradient(155deg, #1a2535, #0a1020);
  position: relative;
  overflow: hidden;
}

.nfs-sim-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,15,35,0.35) 100%);
}

.nfs-sim-body {
  padding: 9px 11px 11px;
}

.nfs-sim-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--nfs-t1);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nfs-sim-price {
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--nfs-blue2), #1248B0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-variant-numeric: tabular-nums;
}

.nfs-sim-price--green {
  background: linear-gradient(135deg, #14A34A, #0A6A30);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nfs-sim-byn {
  font-size: 10px;
  font-weight: 600;
  -webkit-text-fill-color: var(--nfs-t3);
  color: var(--nfs-t3);
}