/* SwapDusk language switcher + translated CSS labels, 2026-11-10. Additive; does not edit app.css. */
/* Hide content until the chosen dictionary is applied; never longer than 1.2 s (fallback shows English). */
html.i18n-wait body{visibility:hidden;animation:sd-i18n-show 0s linear 1.2s forwards}
@keyframes sd-i18n-show{to{visibility:visible}}
.nav .langsel{position:relative;display:inline-flex;align-items:center;gap:5px;padding:7px 9px 7px 10px;margin-right:4px;border-radius:999px;border:1px solid var(--line2);background:#ffffff08;color:var(--muted);font-weight:700;font-size:.82rem;line-height:1;cursor:pointer;flex:none}
.nav .langsel:hover,.nav .langsel:focus-within{color:var(--ink);background:#ffffff12}
.nav .langsel:focus-within{outline:2px solid var(--violet2);outline-offset:2px}
.nav .langsel svg{width:16px;height:16px;flex:none}
.nav .langsel svg.chev{width:11px;height:11px;opacity:.7}
.nav .langsel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;border:0;-webkit-appearance:none;appearance:none;color:#111;background:#fff}
.nav{flex-wrap:nowrap;min-width:0}
.nav a.pill{white-space:nowrap}
@media (max-width:400px){.top .brand-logo{width:124px;height:auto}.nav a.pill{padding:8px 11px;font-size:.88rem;margin-left:2px}}
@media (max-width:350px){.nav .langsel svg.chev{display:none}}
footer .langlinks{display:inline-flex;flex-wrap:wrap;gap:4px 12px;font-size:.84rem}
footer .langlinks a{color:var(--muted);text-decoration:none}
footer .langlinks a:hover{color:var(--ink);text-decoration:underline}
footer .langlinks a[aria-current]{color:var(--ink);font-weight:700}
.prose .i18n-note{border:1px solid var(--line2);background:#ffffff08;border-radius:12px;padding:10px 14px;color:var(--muted);font-size:.92rem}
html[lang=pt] .card .step-l::before{content:"Escolha o par"}
html[lang=pt] .card:has(#s2:not([hidden])) .step-l::before{content:"Adicione o endereço"}
html[lang=pt] .card:has(#s3:not([hidden])) .step-l::before{content:"Envie o depósito"}
html[lang=pt] .card:has(#s3.s3-after-deposit:not([hidden])) .step-l::before{content:"Progresso da troca"}
html[lang=es] .card .step-l::before{content:"Elige el par"}
html[lang=es] .card:has(#s2:not([hidden])) .step-l::before{content:"Añade la dirección"}
html[lang=es] .card:has(#s3:not([hidden])) .step-l::before{content:"Envía el depósito"}
html[lang=es] .card:has(#s3.s3-after-deposit:not([hidden])) .step-l::before{content:"Progreso del intercambio"}
html[lang=ru] .card .step-l::before{content:"Выберите пару"}
html[lang=ru] .card:has(#s2:not([hidden])) .step-l::before{content:"Укажите адрес"}
html[lang=ru] .card:has(#s3:not([hidden])) .step-l::before{content:"Отправьте депозит"}
html[lang=ru] .card:has(#s3.s3-after-deposit:not([hidden])) .step-l::before{content:"Ход обмена"}
html[lang=pt] .qr.demoqr::after{content:"DEMO"}
html[lang=es] .qr.demoqr::after{content:"DEMO"}
html[lang=ru] .qr.demoqr::after{content:"ДЕМО"}
@media (max-width:480px){.nav a:not(.pill){display:none}}
/* Status details list: keep the value column readable when a label is long (also fixes the narrow English layout). */
.kv{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}