/* ====== Trigger ====== */
.wx-lang{ position:relative; display:inline-flex; align-items:center; }
.wx-trigger{
    display:inline-flex; align-items:center; gap:10px;
    padding:7px 10px;
    border-radius:12px;
    background:rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.18);
    color:#fff; cursor:pointer;
}
.wx-trigger:hover{ border-color:rgba(255,255,255,.30); transform:translateY(-1px); }
.wx-flag{ font-size:15px; line-height:1; }
.wx-code{
    font-weight:800; letter-spacing:.6px;
    padding:2px 8px; border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
}
.wx-caret{ opacity:.75; font-size:11px; }

/* ====== Modal ====== */
.wx-modal{ position:fixed; inset:0; display:none; z-index:99999; }
.wx-modal.open{ display:block; }

.wx-backdrop{
    position:absolute; inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter: blur(3px);
}

.wx-panel{
    position:relative;
    width:min(420px, calc(100vw - 24px));
    margin:84px auto 0 auto;
    border-radius:16px;
    background:rgba(14,14,16,.96);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 18px 60px rgba(0,0,0,.55);
    overflow:hidden;
}

.wx-panel-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px;
    border-bottom:1px solid rgba(255,255,255,.10);
}
.wx-title{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; }
.wx-title-flag{ font-size:16px; }
.wx-pill{
    font-weight:900; letter-spacing:.6px;
    padding:2px 8px; border-radius:999px;
    background:rgba(80,140,255,.18);
    border:1px solid rgba(80,140,255,.28);
    color:#cfe1ff;
}
.wx-x{
    border:0; background:transparent; color:#fff; opacity:.8;
    width:36px; height:36px; border-radius:10px; cursor:pointer;
}
.wx-x:hover{ background:rgba(255,255,255,.08); opacity:1; }

.wx-panel-body{ padding:12px 14px 14px 14px; }

.wx-search{
    width:100%;
    padding:10px 12px;
    border-radius:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    color:#fff; outline:none;
}
.wx-search:focus{ border-color:rgba(80,140,255,.45); box-shadow:0 0 0 3px rgba(80,140,255,.15); }

.wx-list{
    margin-top:10px;
    display:flex; flex-direction:column;
    gap:6px;
    max-height:320px;
    overflow:auto;
    padding-right:4px;
}

.wx-item{
    width:100%;
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    padding:10px 10px;
    border-radius:12px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
}
.wx-item:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); }

.wx-item-left{ display:flex; align-items:center; gap:10px; }
.wx-item-flag{ font-size:16px; }
.wx-item-name{ font-weight:800; }
.wx-item-code{
    font-weight:900; letter-spacing:.6px; opacity:.9;
    padding:2px 8px; border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
}
.wx-item.active{
    border-color:rgba(80,140,255,.40);
    background:rgba(80,140,255,.14);
}

/* === WX modal hard override (must win) === */
.wx-modal{ position:fixed !important; inset:0 !important; z-index:2147483647 !important; }
.wx-modal{ display:none !important; }
.wx-modal.open{ display:block !important; }
.wx-backdrop{ position:absolute !important; inset:0 !important; }



.wx-code{
    font-weight:900;
    letter-spacing:.5px;
    font-size:11px;
    padding:2px 7px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    line-height:1;
}



.wx-progress{
    position: fixed;
    left: 0; top: 0;
    width: 100%;
    height: 3px;
    z-index: 999999;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.wx-progress.is-on{ opacity: 1; }

.wx-progress-bar{
    width: 35%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(120,180,255,.0), rgba(120,180,255,.85), rgba(120,180,255,.0));
    animation: wxProgressMove .9s linear infinite;
}
@keyframes wxProgressMove{
    0%{ transform: translateX(-60%); }
100%{ transform: translateX(320%); }
}