/* VISSONIC locale preference bar 2026-05-20 */
:root{
  --vp-bg:rgba(255,255,255,.98);
  --vp-bg-2:rgba(249,250,251,.98);
  --vp-text:#111827;
  --vp-muted:#6b7280;
  --vp-border:#e5e7eb;
  --vp-accent:#2563eb;
  --vp-accent-2:#7c3aed;
}
.vp-banner{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483640;
    transform: translateY(-110%);
    opacity: 0;
    transition: transform .22s ease,opacity .22s ease;
    background: linear-gradient(180deg,var(--vp-bg),var(--vp-bg-2));
    color: var(--vp-text);
    border-bottom: 1px solid var(--vp-border);
    box-shadow: none;
    padding: 10px 16px;
    pointer-events: none;
    font-family: Inter,Arial,'Microsoft YaHei',sans-serif;

}
.vp-banner.show{transform:translateY(0);opacity:1;pointer-events:auto}
.vp-inner{
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;

}
.vp-left{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 420px;
    min-width: 0;

}
.vp-dot{width:8px;height:8px;border-radius:50%;background:var(--vp-accent);flex:0 0 8px}
.vp-text{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.5;

}
.vp-main{
    font-size: 14px;
    font-weight: 600;
    color: var(--vp-text);

}
.vp-meta{font-size:12px;color:var(--vp-muted)}
.vp-actions{
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: stretch;

}
.vp-btn{appearance:none;border:1px solid var(--vp-border);border-radius:10px;padding:8px 14px;font-size:13px;line-height:1.1;background:#fff;color:var(--vp-text);cursor:pointer;white-space:nowrap;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.vp-btn:hover{transform:translateY(-1px);border-color:#cbd5e1;background:#fff}
.vp-btn-primary{background:var(--vp-accent);border-color:var(--vp-accent);color:#fff;font-weight:600}
.vp-btn-primary:hover{background:var(--vp-accent);border-color:var(--vp-accent)}
.vp-btn-es{background:var(--vp-accent);border-color:var(--vp-accent);color:#fff;font-weight:600}
.vp-btn-fr{background:var(--vp-accent-2);border-color:var(--vp-accent-2);color:#fff;font-weight:600}
.vp-btn-ghost{background:#fff;color:var(--vp-muted)}
.vp-remember{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--vp-border);
    border-radius: 10px;
    background: #fff;
    color: var(--vp-muted);
    font-size: 13px;
    line-height: 1.1;
    white-space: nowrap;
    margin-bottom: 0rem;

}
.vp-remember span{line-height:1.1}
.vp-remember input{
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    display: grid;
    place-content: center;
    flex: 0 0 16px;

}
.vp-remember input::after{content:'';width:9px;height:9px;border-radius:2px;background:var(--vp-accent);transform:scale(0);transition:transform .14s ease}
.vp-remember input:checked{border-color:var(--vp-accent)}
.vp-remember input:checked::after{transform:scale(1)}
.vp-spacer{height:0;transition:height .22s ease}
.vp-hidden{opacity:0;transform:translateY(-110%);pointer-events:none}
@media(max-width:900px){
  .vp-inner{gap:10px}
  .vp-actions{width:100%;justify-content:flex-start}
}
@media(max-width:640px){
  .vp-banner{padding:10px 12px}
  .vp-left{flex-basis:100%}
  .vp-actions{gap:8px}
  .vp-btn,.vp-remember{width:100%;justify-content:center}
}