.lang-picker{position:relative;display:inline-flex}
.lang-picker-wrap{position:relative}
.lang-picker-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm,8px);
  cursor:pointer;transition:background .2s cubic-bezier(0.16,1,0.3,1),border-color .2s;
}
.lang-picker-btn:hover{background:var(--bg-hover);border-color:var(--border-strong)}
.lang-picker-btn[aria-expanded="true"]{border-color:var(--border-strong);background:var(--bg-hover)}
.lang-picker-flag{
  display:block;width:22px;height:16px;object-fit:cover;border-radius:3px;
  box-shadow:0 0 0 1px var(--border);
}
.lang-picker-menu{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:4px;
  padding:6px;min-width:188px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md,12px);
  box-shadow:var(--shadow-md,0 4px 24px rgba(0,0,0,.2));z-index:200;
}
.lang-picker-menu[hidden]{display:none!important}
.lang-picker-item{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;
  border:1px solid transparent;border-radius:var(--radius-sm,8px);
  background:transparent;cursor:pointer;transition:background .15s,border-color .15s;
}
.lang-picker-item:hover{background:var(--bg-hover);border-color:var(--border)}
.lang-picker-item.active{border-color:var(--border-strong);background:var(--bg-hover)}