:root { --border:#ddd; --ring:#eef3ff; --hover:#f5f7fb; }
    /* body{font-family:system-ui,Arial,Helvetica,sans-serif;margin:24px;max-width:900px} */
    .card{border:1px solid var(--border);border-radius:10px;padding:16px;margin-top:16px}
    .muted{color:#666}
    .small{font-size:13px;margin-top:6px}
    .rtl { direction: rtl; unicode-bidi: plaintext; }
     li.lang-item small {display: none;}
    /* Header / Language picker */
    .lang-header { display:flex; gap:12px; align-items:center;}
    .lang-label { font-weight:600; }
    .lang-native { display:none; } /* hide native select */

    .lang-dropdown { position:relative; }
    .lang-trigger {
      display:flex; align-items:center; gap:10px;
      border:1px solid var(--border); border-radius:12px; padding:9px 12px; background:#fff; cursor:pointer;
      min-width:100px;
      box-shadow:0 1px 0 rgba(0,0,0,.03);
    }
    .lang-trigger img { width:20px; height:20px; border-radius:50%; object-fit:cover; }
    .lang-trigger svg { margin-left:auto; fill:#444; }

    .lang-menu {
      position:absolute; top:100%; left:0; right:0; z-index:30;
      border:1px solid #e9e9e9; border-radius:12px; background:#fff; margin:6px 0 0; padding:6px;
      list-style:none; box-shadow:0 14px 40px rgba(0,0,0,.08);
      max-height:300px; overflow:auto; display:none;
    }
    .lang-menu.open { display:block; }
    .lang-item {
      display:flex; align-items:center; gap:10px;
      padding:10px 12px; border-radius:10px; cursor:pointer;
      transition: background .15s ease;
    }
    .lang-item img { width:20px; height:20px; border-radius:50%; object-fit:cover; }
    .lang-item:hover { background:var(--hover); }
    .lang-item[aria-selected="true"] { background:var(--ring); font-weight:600; }