.sn-lang{position:relative;display:inline-block}
.lang-trigger{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;
  border:1px solid var(--line,#ddd6c8);border-radius:9px;color:var(--ink,#10202d);
  font:600 13px "Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--panel,#fbf8f1);cursor:pointer}
.lang-trigger:hover{border-color:var(--accent,#b3894e)}
.lang-trigger:focus-visible{outline:2px solid var(--accent,#b3894e);outline-offset:2px}
.lang-trigger .lang-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.lang-list{position:absolute;top:calc(100% + 6px);right:0;z-index:60;margin:0;padding:6px;
  list-style:none;width:240px;max-height:60vh;overflow:auto;
  background:var(--panel,#fbf8f1);border:1px solid var(--line,#ddd6c8);border-radius:12px;
  box-shadow:0 18px 44px rgba(16,32,45,.22);display:none}
.sn-lang.open .lang-list{display:block}
.lang-list li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 10px;
  padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--ink,#10202d)}
.lang-list li .lang-code{grid-row:span 2;font-family:ui-monospace,monospace;font-size:11px;
  color:var(--muted,#5f6b73);align-self:center}
.lang-list li .lang-name{font-weight:600}
.lang-list li .lang-name-en{font-size:12px;color:var(--muted,#5f6b73)}
.lang-list li.is-focused,.lang-list li:hover{background:var(--chip-bg,rgba(16,32,45,.06))}
.lang-list li[aria-selected="true"]{border:1px solid var(--accent,#b3894e)}

  
body.rtl .lang-list{left:0;right:auto}

@media (max-width:640px){
  .lang-list{width:min(280px,86vw)}
  

  .lang-trigger .lang-name{min-width:0}
}