html[dir="rtl"], body {
    font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Roboto,
                 "Noto Sans Arabic", "Noto Naskh Arabic", "Helvetica Neue",
                 Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums; /* اعداد ستونی برای جدول‌ها */
    direction: rtl;
  }
  
  /* نمونه وزن‌ها */
  h1 { font-weight: 800; }
  h2 { font-weight: 700; }
  strong, b { font-weight: 700; }

  

:root{
    --brand:#ffb202; /* Always 100 */
    --ink:#101010;
    --ink-2:#3b3b3b;
    --bg:#f7f7f8;
    --card:#fff;
    --ring: rgba(255,178,2,.25);
  }
  
  /* هدر */
  .help-hero{
    background:
      radial-gradient(1200px 300px at 80% -100px, rgba(255,178,2,.25), transparent 70%),
      linear-gradient(180deg, #fff, #fafafa);
    border-bottom: 1px solid #eee;
    padding: 28px 0 18px;
  }
  .header-brand{
    display:flex; align-items:center; gap:16px;
  }
  .head-logo img{
    width:72px; height:auto; display:block;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,.08));
  }
  .head-name .brand-top{
    font-size:1.25rem; font-weight:800; color:var(--ink);
  }
  .head-name .brand-sub{
    font-size:.95rem; color:#666;
  }
  
  /* گرید ویدیوها */
  .video-grid{
    list-style:none; padding: 22px 0 34px; margin:0;
    display:grid; gap:16px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  .video-card{
    background:var(--card);
    border-radius:18px;
    box-shadow: 0 6px 20px rgba(0,0,0,.05);
    overflow:hidden;
    transition: transform .18s ease, box-shadow .18s ease, outline-color .18s ease;
    outline: 2px solid transparent;
  }
  .video-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
    outline-color: var(--ring);
  }
  .video-link{ display:block; text-decoration:none; color:inherit; }
  
  .thumb{
    position:relative; aspect-ratio:16/9; background:#ddd;
  }
  .thumb img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  }
  .play{
    position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%;
    background: rgba(0,0,0,.45);
    backdrop-filter: saturate(140%) blur(1px);
    transition: transform .18s ease, background .18s ease, opacity .18s ease;
  }
  .play:before{
    content:""; position:absolute; left:26px; top:22px;
    border-left:18px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent;
  }
  .video-card:hover .play{ transform: scale(1.06); background: rgba(0,0,0,.55); }
  .badge{
    position:absolute; top:10px; right:10px; font-weight:700; font-size:.85rem;
    background:var(--brand); color:#000; padding:4px 10px; border-radius:999px;
    box-shadow: 0 4px 14px rgba(255,178,2,.45);
  }
  
  .meta{ padding:12px 14px 14px; text-align:right; direction:rtl; }
  .title{
    margin:0 0 8px; font-size:1.02rem; line-height:1.7; color:var(--ink);
  }
  .meta-row{ display:flex; justify-content:flex-end; gap:6px; }
  .chip{
    background:#f0f2f5; color:#444; border:1px solid #e8eaef;
    font-size:.78rem; padding:4px 10px; border-radius:999px;
  }
  .chip.brand{ background:rgba(255,178,2,.12); color:#8a5a00; border-color:rgba(255,178,2,.3); }
  
  /* مودال */
  .custom-modal{
    display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.65); backdrop-filter: blur(2px);
    animation: modal-fade .18s ease-out;
  }
  .custom-modal.show{ display:block; }
  @keyframes modal-fade{ from{ opacity:.0 } to{ opacity:1 } }
  
  .custom-modal-content{
    background:#fff; width:92%; max-width:920px; margin:5% auto; border-radius:16px; padding:16px;
    position:relative; box-shadow: 0 20px 60px rgba(0,0,0,.25);
    transform: translateY(8px); animation: modal-rise .18s ease-out forwards;
  }
  @keyframes modal-rise{ to{ transform: translateY(0) } }
  
  .custom-modal-close{
    position:absolute; top:10px; left:14px; width:38px; height:38px; border-radius:10px;
    border:none; background:#f5f5f7; color:#333; font-size:24px; line-height:38px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .custom-modal-close:hover{ background:#ebebef; }
  
  .modal-title{
    text-align:right; font-size:1.05rem; margin:0 0 10px; color:var(--ink-2);
  }
  
  .video-wrapper{ position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px; }
  .video-wrapper iframe{
    position:absolute; inset:0; width:100%; height:100%;
    border:0; border-radius:12px;
  }
  
  /* ریسپانسیو */
  @media (max-width: 576px){
    .head-logo img{ width:62px; }
    .custom-modal-content{ width:95%; margin-top:10%; padding:12px; }
    .modal-title{ font-size:.95rem; }
  }
  
  /* بهبودهای کوچک */
  body.modal-open{ overflow:hidden; }