/* آرنا فارسی — صفحهٔ رتبه‌بندی */
@import url('styles.css');

:root{ --lb-max: 1180px; }

.lb-page{ max-width: var(--lb-max); margin: 0 auto; padding: 36px 22px 72px; }

.lb-head{ margin-bottom: 26px; }
.lb-eyebrow{
  display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  color:var(--text-tertiary); background:var(--surface-tertiary);
  border-radius:999px; padding:4px 12px; margin-bottom:14px;
}
.lb-eyebrow i{ width:7px; height:7px; border-radius:50%; background:var(--highlight); display:block; }
.lb-page h1{ margin:0 0 10px; font-size:29px; line-height:1.5; font-weight:800; letter-spacing:-.7px; color:var(--text-heading); }
.lb-page h1 .hl{ background:var(--highlight); padding:0 9px; border-radius:4px; }
.lb-lede{ margin:0; color:var(--text-tertiary); font-size:13.5px; line-height:2; max-width:70ch; }

.lb-stats{ display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 8px; }
.lb-stat{
  background:var(--surface-white); border:1px solid var(--border-medium); border-radius:10px;
  padding:11px 16px; min-width:132px;
}
.lb-stat b{ display:block; font-size:19px; font-weight:800; color:var(--text-heading); line-height:1.4; }
.lb-stat span{ font-size:11px; color:var(--text-tertiary); }

/* تب‌ها */
.lb-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:24px 0 0; }
.lb-tab{
  height:34px; padding:0 14px; border-radius:999px; font-size:12.5px; font-weight:600;
  color:var(--text-tertiary); background:var(--surface-white); border:1px solid var(--border-medium);
  display:inline-flex; align-items:center; transition:.15s;
}
.lb-tab:hover{ background:var(--surface-tertiary); color:var(--text-primary); }
.lb-tab[aria-selected="true"]{ background:var(--cta); color:var(--on-cta); border-color:var(--cta); }

/* جدول */
.lb-card{
  background:var(--surface-white); border:1px solid var(--border-medium); border-radius:14px;
  overflow:hidden; margin-top:16px;
}
.lb-scroll{ overflow-x:auto; }
table.lb{ width:100%; border-collapse:collapse; font-size:13px; min-width:720px; }
table.lb thead th{
  text-align:right; font-size:11.5px; font-weight:700; color:var(--text-tertiary);
  background:#fbf9f6; padding:11px 14px; border-bottom:1px solid var(--border-medium);
  white-space:nowrap; position:sticky; top:0; z-index:2;
}
table.lb tbody td{ padding:11px 14px; border-bottom:1px solid #f2efe9; vertical-align:middle; }
table.lb tbody tr:last-child td{ border-bottom:0; }
table.lb tbody tr:hover{ background:#fdfbf7; }

.rank{
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px;
  font-size:12px; font-weight:800; color:var(--text-tertiary); background:var(--surface-tertiary);
}
.rank.r1{ background:#fdf0c2; color:#8a6a00; }
.rank.r2{ background:#eceef1; color:#5c626b; }
.rank.r3{ background:#f9e6dc; color:#9a5330; }

.model{ display:flex; align-items:center; gap:9px; min-width:0; }
.lab{
  width:26px; height:26px; border-radius:7px; display:grid; place-items:center; flex:none;
  font-size:11px; font-weight:800; color:#fff; letter-spacing:-.3px;
}
.lab.anthropic{ background:#c96442; }
.lab.openai{ background:#0f9d76; }
.lab.google{ background:#4285f4; }
.lab.meta{ background:#0a66ff; }
.lab.xai{ background:#111111; }
.lab.deepseek{ background:#4d6bfe; }
.lab.alibaba{ background:#ff6a00; }
.lab.mistral{ background:#f56f36; }
.lab.tencent{ background:#0b6bcb; }
.lab.minimax{ background:#e8474c; }
.model-name{ font-weight:600; color:var(--text-heading); font-size:13px; line-height:1.7; }
.model-lab{ font-size:11px; color:var(--text-tertiary); line-height:1.6; }

.score{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--text-heading); direction:ltr; text-align:right; }
.bar{ width:96px; height:6px; border-radius:999px; background:var(--surface-tertiary); overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:999px; background:var(--highlight); }
.votes{ font-variant-numeric:tabular-nums; color:var(--text-tertiary); direction:ltr; }

.badge{ font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; }
.badge.new{ background:#e8f5ee; color:#0d7a5f; }
.badge.free{ background:#eef2fd; color:#2a4bb5; }

/* جدول برترین‌ها */
.tops{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:26px; }
.top-card{ background:var(--surface-white); border:1px solid var(--border-medium); border-radius:14px; padding:16px 18px; }
.top-card h3{ margin:0 0 12px; font-size:13px; font-weight:800; color:var(--text-heading); }
.top-row{ display:flex; align-items:center; gap:9px; padding:6px 0; font-size:12.5px; }
.top-row .n{ color:var(--text-muted); font-weight:700; width:16px; font-variant-numeric:tabular-nums; }
.top-row .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary); }
.top-row .pc{ font-variant-numeric:tabular-nums; color:var(--text-heading); font-weight:700; direction:ltr; }

.note{ margin-top:26px; background:#fdf4e0; border:1px solid #f0ddb8; border-radius:12px; padding:14px 18px; font-size:12.5px; line-height:2; color:#7a5410; }
.note b{ color:#5c3d06; }

@media (max-width:640px){
  .lb-page{ padding:22px 14px 48px; }
  .lb-page h1{ font-size:22px; }
  .lb-stat{ min-width:104px; padding:9px 12px; }
  .lb-stat b{ font-size:16px; }
}