/* ================================================================
   NEXUS v334 — سیستم مستقل مشخصات فنی (فلکس‌باکس + اسکرول جدا)
   ================================================================ */

.nx-specs-title{
  font-size:1.25rem;
  font-weight:800;
  margin:0 0 16px;
  letter-spacing:-.2px;
}

/* ظرف اصلی با اسکرول مستقل */
.nx-specs-system{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:min(62vh,600px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:4px 6px 10px 2px;
  scrollbar-width:thin;
  scrollbar-color:rgba(120,170,230,.5) transparent;
  isolation:isolate;
}
.nx-specs-system::-webkit-scrollbar{ width:8px; }
.nx-specs-system::-webkit-scrollbar-track{ background:transparent; border-radius:8px; }
.nx-specs-system::-webkit-scrollbar-thumb{
  background:rgba(120,170,230,.45);
  border-radius:8px;
}
.nx-specs-system::-webkit-scrollbar-thumb:hover{ background:rgba(120,170,230,.65); }

/* هر گروه */
.nx-spec-group{
  display:flex;
  flex-direction:column;
  border:1px solid var(--nx-line,rgba(160,200,230,.14));
  border-radius:14px;
  overflow:hidden;
  background:var(--nx-panel,rgba(12,22,38,.55));
  box-shadow:0 4px 18px rgba(0,0,0,.08);
  flex-shrink:0;
}

.nx-spec-group-head{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 16px;
  background:linear-gradient(135deg,var(--nx-primary,#2f8dff),var(--nx-secondary,#1d6fe0));
  color:#fff;
}
.nx-spec-group-head h3{
  margin:0;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:.15px;
}
.nx-spec-group-icon{
  display:inline-flex;
  width:26px;height:26px;
  align-items:center;justify-content:center;
  border-radius:8px;
  background:rgba(255,255,255,.18);
  font-size:13px;
  flex-shrink:0;
}
.nx-spec-group-unknown .nx-spec-group-head{
  background:linear-gradient(135deg,#4b5b73,#2c3646);
}

.nx-spec-group-body{
  display:flex;
  flex-direction:column;
}

/* ردیف فلکس */
.nx-spec-item{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 16px;
  padding:12px 16px;
  border-bottom:1px solid var(--nx-line,rgba(160,200,230,.1));
  line-height:1.7;
  min-height:44px;
}
.nx-spec-item:last-child{ border-bottom:0; }
.nx-spec-item-alt{ background:rgba(125,165,220,.055); }

.nx-spec-key{
  flex:0 1 38%;
  min-width:110px;
  font-size:13px;
  font-weight:600;
  color:var(--nx-muted,#9fb2c8);
  word-break:break-word;
}
.nx-spec-val{
  flex:1 1 55%;
  font-size:13.5px;
  font-weight:650;
  color:var(--nx-text,#eef4ff);
  overflow-wrap:anywhere;
  text-align:left;
}
html[dir="rtl"] .nx-spec-val,
.nx-specs-system[dir="rtl"] .nx-spec-val{ text-align:right; }

.nx-spec-item-unknown .nx-spec-val,
.nx-val-unknown{
  color:var(--nx-muted,#7c8ba3);
  font-weight:500;
  font-style:italic;
}

/* یادداشت AI */
.nx-ai-spec-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:14px;
  padding:12px 14px;
  border-radius:12px;
  font-size:12px;
  line-height:1.9;
  color:var(--nx-muted,#8fa2bd);
  background:rgba(125,165,220,.06);
  border:1px solid var(--nx-line,rgba(160,200,230,.12));
}
.nx-ai-badge{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:20px;
  padding:0 6px;
  border-radius:6px;
  background:linear-gradient(135deg,#2f7dff,#38bdf8);
  color:#fff;
  font-size:10px;
  font-weight:800;
}
.nx-ai-spec-note a{
  color:var(--nx-accent,#38bdf8);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* تم روز */
html[data-theme="light"] .nx-spec-group{
  background:#fff;
  border-color:var(--nx-line,#dbe6f4);
  box-shadow:0 4px 16px rgba(40,72,130,.06);
}
html[data-theme="light"] .nx-spec-item{ border-bottom-color:var(--nx-line,#e8f0fa); }
html[data-theme="light"] .nx-spec-item-alt{ background:rgba(47,141,255,.04); }
html[data-theme="light"] .nx-spec-key{ color:var(--nx-muted,#5c6f89); }
html[data-theme="light"] .nx-spec-val{ color:var(--nx-text,#101f38); }
html[data-theme="light"] .nx-ai-spec-note{
  background:rgba(47,141,255,.04);
  border-color:var(--nx-line,#e0ebf8);
  color:#5a6d86;
}

/* موبایل */
@media (max-width:640px){
  .nx-specs-system{ max-height:min(58vh,520px); gap:10px; }
  .nx-spec-item{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding:11px 14px;
  }
  .nx-spec-key{ flex:none; width:100%; font-size:11.5px; opacity:.85; }
  .nx-spec-val{ flex:none; width:100%; font-size:13.5px; }
  .nx-spec-group-head{ padding:10px 14px; }
  .nx-spec-group-head h3{ font-size:13px; }
}

/* ================================================================
   هایلایت‌های کلیدی — ردیف افقی، آیکون کنار متن
   ================================================================ */
.nx-spec-highlights{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  padding:2px;
}
.nx-hl-item{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  flex:1 1 140px;
  min-width:0;
  max-width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(80,160,230,.28);
  background:linear-gradient(165deg,rgba(40,110,190,.22),rgba(10,25,50,.4));
  transition:transform .15s ease, box-shadow .15s ease;
}
.nx-hl-item:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(30,100,180,.18);
}
html[data-theme="light"] .nx-hl-item{
  background:linear-gradient(165deg,#ffffff,rgba(235,245,255,.98));
  border-color:rgba(40,120,200,.2);
  box-shadow:0 3px 12px rgba(20,70,140,.08);
}
.nx-hl-icon{
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.1);
  color:#7ec8ff;
}
.nx-hl-icon svg{ display:block; }
html[data-theme="light"] .nx-hl-icon{
  background:rgba(40,120,220,.1);
  color:#1a6fc4;
}
.nx-hl-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  text-align:right;
}
.nx-hl-label{
  font-size:11px;
  font-weight:700;
  color:#8ec8f5;
  opacity:.95;
}
html[data-theme="light"] .nx-hl-label{ color:#3a6a9a; }
.nx-hl-val{
  font-size:13px;
  font-weight:800;
  color:#eef6ff;
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html[data-theme="light"] .nx-hl-val{ color:#122536; }

@media (max-width:520px){
  .nx-hl-item{ flex:1 1 calc(50% - 10px); padding:10px 12px; }
  .nx-hl-icon{ width:34px; height:34px; border-radius:10px; }
  .nx-hl-icon svg{ width:18px; height:18px; }
  .nx-hl-val{ font-size:12px; white-space:normal; }
}

/* ================================================================
   انیمیشن‌های مدرن CSS (v334)
   ================================================================ */
@keyframes nx-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nx-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes nx-scale-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes nx-slide-in-right {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes nx-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes nx-soft-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47,141,255,.25); }
  50%      { box-shadow: 0 0 0 6px rgba(47,141,255,0); }
}

/* ورود گروه‌های مشخصات */
.nx-specs-system .nx-spec-group{
  animation: nx-fade-up .45s cubic-bezier(.22,1,.36,1) both;
}
.nx-specs-system .nx-spec-group:nth-child(1){ animation-delay: .04s; }
.nx-specs-system .nx-spec-group:nth-child(2){ animation-delay: .09s; }
.nx-specs-system .nx-spec-group:nth-child(3){ animation-delay: .14s; }
.nx-specs-system .nx-spec-group:nth-child(4){ animation-delay: .19s; }
.nx-specs-system .nx-spec-group:nth-child(5){ animation-delay: .24s; }
.nx-specs-system .nx-spec-group:nth-child(n+6){ animation-delay: .28s; }

/* هاور نرم روی ردیف مشخصات */
.nx-spec-item{
  transition: background .22s ease, transform .22s cubic-bezier(.22,1,.36,1);
}
.nx-spec-item:hover{
  background: rgba(47,141,255,.08);
}
html[data-theme="light"] .nx-spec-item:hover{
  background: rgba(47,141,255,.07);
}

/* هدر گروه — درخشش ملایم */
.nx-spec-group-head{
  background-size: 200% 100%;
  transition: filter .25s ease;
}
.nx-spec-group:hover .nx-spec-group-head{
  filter: brightness(1.06);
}

/* هایلایت‌های کلیدی — ورود و هاور */
.nx-spec-highlights .nx-hl-item{
  animation: nx-scale-in .4s cubic-bezier(.22,1,.36,1) both;
  transition: transform .25s cubic-bezier(.22,1,.36,1),
              box-shadow .25s ease,
              border-color .25s ease,
              background .25s ease;
}
.nx-spec-highlights .nx-hl-item:nth-child(1){ animation-delay: .05s; }
.nx-spec-highlights .nx-hl-item:nth-child(2){ animation-delay: .1s; }
.nx-spec-highlights .nx-hl-item:nth-child(3){ animation-delay: .15s; }
.nx-spec-highlights .nx-hl-item:nth-child(4){ animation-delay: .2s; }

.nx-spec-highlights .nx-hl-item:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 28px rgba(30,100,180,.22);
  border-color: rgba(100,180,255,.45);
}
html[data-theme="light"] .nx-spec-highlights .nx-hl-item:hover{
  box-shadow: 0 10px 24px rgba(40,90,160,.14);
}

.nx-hl-icon{
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease, color .25s ease;
}
.nx-hl-item:hover .nx-hl-icon{
  transform: scale(1.12) rotate(-4deg);
}

/* یادداشت AI */
.nx-ai-spec-note{
  animation: nx-fade-in .5s ease .2s both;
}
.nx-ai-badge{
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.nx-ai-spec-note:hover .nx-ai-badge{
  transform: scale(1.08);
}

/* کاهش حرکت برای accessibility */
@media (prefers-reduced-motion: reduce){
  .nx-specs-system .nx-spec-group,
  .nx-spec-highlights .nx-hl-item,
  .nx-ai-spec-note{
    animation: none !important;
  }
  .nx-spec-item,
  .nx-hl-item,
  .nx-hl-icon,
  .nx-ai-badge,
  .nx-spec-group-head{
    transition: none !important;
  }
  .nx-spec-highlights .nx-hl-item:hover{
    transform: none;
  }
  .nx-hl-item:hover .nx-hl-icon{
    transform: none;
  }
}