/* ── komponen dasar ───────────────────────────────────────────── */

/* tombol */
.btn{display:inline-flex;align-items:center;gap:var(--s-2);padding:.55rem 1rem;border-radius:var(--r-sm);
  font-size:var(--fs-md);font-weight:600;border:1px solid transparent;white-space:nowrap;
  transition:transform var(--dur-1) var(--ease),background var(--dur-1) var(--ease),
             box-shadow var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:disabled{opacity:.45;pointer-events:none}
/* Ujung terang gradien dulu violet-400: teks putih di atasnya hanya
   3.5:1. Dimulai dari violet-500 supaya titik tersulitnya 4.86:1. */
.btn--primary{background:linear-gradient(160deg,var(--violet-500),var(--violet-600));color:#fff;
  box-shadow:0 10px 24px -14px var(--violet-500)}
.btn--primary:hover{box-shadow:0 16px 30px -14px var(--violet-500)}
.btn--ok{background:linear-gradient(160deg,var(--mint-400),var(--mint-600));color:#04231b;
  box-shadow:0 10px 24px -14px var(--mint-500)}
.btn--soft{background:var(--surface-2);color:var(--text);border-color:var(--line)}
.btn--soft:hover{background:var(--surface-3)}
.btn--ghost{color:var(--text-soft);border-color:var(--line)}
.btn--ghost:hover{background:var(--surface-2);color:var(--text)}
.btn--danger{background:var(--bad-soft);color:var(--bad);border-color:#f0576f40}
.btn--sm{padding:.34rem .68rem;font-size:var(--fs-sm);border-radius:7px}
.btn--lg{padding:.78rem 1.4rem;font-size:var(--fs-lg)}
.btn--block{display:flex;width:100%;justify-content:center}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;color:var(--text-soft);
  border:1px solid transparent;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}

/* chip status di topbar */
.chip{display:inline-flex;align-items:center;gap:6px;padding:.28rem .6rem;border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:600;background:var(--surface-2);border:1px solid var(--line);
  color:var(--text-soft);transition:transform var(--dur-1) var(--ease)}
.chip:hover{transform:translateY(-1px);color:var(--text)}
.chip b{font-variant-numeric:tabular-nums;color:var(--text)}
.chip--streak{color:var(--warn)} .chip--xp{color:var(--brand-text)} .chip--due{color:var(--ok)}
/* Chip saran sengaja beda dari tiga chip di sebelahnya: yang lain
   melaporkan angka, yang ini mengajak menekan. Karena itu ia diberi
   garis warna merek dan kursor tangan, dan - tidak seperti chip XP
   dan jatuh tempo - TIDAK ikut disembunyikan di layar sempit. Kotak
   saran yang cuma muncul di layar lebar akan melewatkan justru
   pemakai yang paling banyak: pemakai ponsel. */
.chip--saran{color:var(--brand-text);border-color:var(--brand);cursor:pointer}
.chip--saran:hover{border-color:var(--brand);color:var(--text)}

/* kartu */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-5);box-shadow:var(--shadow-1);backdrop-filter:blur(8px)}
.card--flat{background:var(--surface-2);backdrop-filter:none}
.card--pad-lg{padding:var(--s-6)}
.card--link{cursor:pointer;transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),
  box-shadow var(--dur-2) var(--ease)}
.card--link:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-2);text-decoration:none}
.card__title{display:flex;align-items:center;gap:var(--s-2);font-weight:700;font-size:var(--fs-lg)}
.card__sub{color:var(--text-mute);font-size:var(--fs-sm);margin-top:2px}

/* grid & tata letak */
.grid{display:grid;gap:var(--s-4)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stack{display:flex;flex-direction:column;gap:var(--s-4)}
.stack--sm{gap:var(--s-2)} .stack--lg{gap:var(--s-6)}
.row{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.row--between{justify-content:space-between}
.row--end{justify-content:flex-end}
.spacer{flex:1}
.prose{max-width:var(--max-read)}

/* judul halaman */
.page-head{display:flex;align-items:flex-end;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-6)}
.page-head__txt{flex:1;min-width:260px}
.page-head h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em}
.page-head p{color:var(--text-soft);margin-top:var(--s-2);max-width:64ch}
.eyebrow{font-size:var(--fs-2xs);letter-spacing:.18em;text-transform:uppercase;color:var(--brand-text);font-weight:700}

/* lencana */
.badge{display:inline-flex;align-items:center;gap:5px;padding:.14rem .55rem;border-radius:var(--r-full);
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.03em;background:var(--surface-3);color:var(--text-soft)}
.badge--brand{background:var(--brand-soft);color:var(--brand-text)}
.badge--ok{background:var(--ok-soft);color:var(--ok)}
.badge--warn{background:var(--warn-soft);color:var(--warn)}
.badge--bad{background:var(--bad-soft);color:var(--bad)}
.badge--info{background:var(--info-soft);color:var(--info)}
.badge--lv{color:#08121f;font-weight:800}
.lv-A1{background:var(--lv-a1)} .lv-A2{background:var(--lv-a2)} .lv-B1{background:var(--lv-b1)}
.lv-B2{background:var(--lv-b2)} .lv-C1{background:var(--lv-c1)} .lv-C2{background:var(--lv-c2)}

/* Skala SELAIN CEFR.
   Kelasnya dibentuk `lv-${g.level}`, dan tiga bahasa memakai skala
   ujiannya sendiri: Jepang N5-N1, Korea dan Mandarin 1-6. Kelas untuk itu
   tidak pernah ada, jadi 61 lencana jatuh ke latar bawaan kartu sementara
   .badge--lv tetap memaksa teksnya gelap (#08121f) — terukur latar
   rgb(28,34,64) dengan teks rgb(8,18,31), gelap di atas gelap.
   Dipetakan menurut URUTAN KESULITAN, jadi warnanya tetap berarti sama:
   yang termudah hijau, yang tersulit merah. */
.lv-N5{background:var(--lv-a1)} .lv-N4{background:var(--lv-a2)} .lv-N3{background:var(--lv-b1)}
.lv-N2{background:var(--lv-b2)} .lv-N1{background:var(--lv-c1)}
.lv-1{background:var(--lv-a1)} .lv-2{background:var(--lv-a2)} .lv-3{background:var(--lv-b1)}
.lv-4{background:var(--lv-b2)} .lv-5{background:var(--lv-c1)} .lv-6{background:var(--lv-c2)}

/* bar kemajuan */
.bar{height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--violet-400),var(--mint-400));
  transition:width var(--dur-3) var(--ease-out)}
.bar--sm{height:4px}
.bar--ok>i{background:linear-gradient(90deg,var(--mint-400),var(--mint-600))}
.bar--warn>i{background:linear-gradient(90deg,var(--amber-400),var(--amber-600))}

/* cincin kemajuan */
.ring{position:relative;display:grid;place-items:center}
.ring svg{transform:rotate(-90deg)}
.ring__val{position:absolute;text-align:center;line-height:1.1}
.ring__val b{display:block;font-size:var(--fs-xl);font-variant-numeric:tabular-nums}
.ring__val span{font-size:var(--fs-2xs);color:var(--text-mute)}

/* statistik */
.stat{display:grid;gap:2px;padding:var(--s-4);border-radius:var(--r-md);background:var(--surface-2);
  border:1px solid var(--line)}
.stat__k{font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.stat__v{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat__note{font-size:var(--fs-xs);color:var(--text-mute)}

/* tab */
.tabs{display:flex;gap:4px;padding:4px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-md);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{padding:.42rem .85rem;border-radius:8px;font-size:var(--fs-md);font-weight:600;
  color:var(--text-mute);white-space:nowrap;transition:all var(--dur-1) var(--ease)}
.tabs button:hover{color:var(--text)}
.tabs button.is-active{background:var(--bg-elev);color:var(--text);box-shadow:var(--shadow-1)}

/* isian */
.field{display:grid;gap:6px}
.field label{font-size:var(--fs-sm);font-weight:600;color:var(--text-soft)}
.input,.select,.textarea{width:100%;padding:.6rem .8rem;border-radius:var(--r-sm);background:var(--surface-2);
  border:1px solid var(--line);color:var(--text);transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.btn--blok{width:100%;justify-content:center}

/* ── Gerbang masuk ───────────────────────────────────────────────
   Menutup seluruh layar, di atas segalanya termasuk modal, sebab
   selama ia berdiri tidak ada apa pun di belakangnya yang boleh
   disentuh. */
.gerbang{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:var(--s-4);overflow:auto;background:var(--bg);
  background-image:radial-gradient(60rem 40rem at 70% -10%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 60%)}
.gerbang__kotak{width:min(420px,100%);background:var(--bg-elev);border:1px solid var(--line-strong);
  border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:var(--s-6);
  animation:modalIn .3s var(--ease-out) both}
.gerbang__merek{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-5)}
.gerbang__merek strong{display:block;line-height:1.2}
.gerbang__tab{display:flex;gap:var(--s-1);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-full);padding:3px;margin-bottom:var(--s-4)}
.gerbang__tabbtn{flex:1;padding:.45rem .8rem;border:0;border-radius:var(--r-full);cursor:pointer;
  background:transparent;color:var(--text-soft);font-size:var(--fs-sm);font-weight:600}
.gerbang__tabbtn.is-on{background:var(--brand);color:var(--brand-ink,#fff)}
.gerbang__ajak{margin:0 0 var(--s-4)}
.gerbang__pesan{min-height:1.2em;margin:var(--s-3) 0}
.gerbang__beli{margin-top:var(--s-4);display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:center}
.gerbang__kaki{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);text-align:center}
/* Kotak sandi + tombol lihat. Mengetik sandi panjang di papan ketik
   ponsel tanpa bisa memeriksanya adalah sebab paling sering orang
   gagal masuk padahal sandinya benar. */
.gerbang__sandi{position:relative;display:flex;align-items:center}
.gerbang__sandi .input{padding-right:2.6rem}
.gerbang__lihat{position:absolute;right:.4rem;border:0;background:transparent;cursor:pointer;
  font-size:1rem;line-height:1;padding:.35rem;border-radius:var(--r-sm);opacity:.75}
.gerbang__lihat:hover{opacity:1}
.gerbang__tautan{display:block;margin-top:var(--s-3);border:0;background:transparent;cursor:pointer;
  color:var(--brand-text);font-size:var(--fs-xs);padding:0;text-align:left}
.gerbang__tautan:hover{text-decoration:underline}
.textarea{min-height:150px;resize:vertical;line-height:1.7}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-mute) 50%),
  linear-gradient(135deg,var(--text-mute) 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2rem}
.switch{display:inline-flex;align-items:center;gap:var(--s-3);cursor:pointer}
.switch input{appearance:none;width:42px;height:24px;border-radius:99px;background:var(--surface-3);
  border:1px solid var(--line);position:relative;transition:background var(--dur-1) var(--ease)}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:99px;
  background:var(--text-soft);transition:transform var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.switch input:checked{background:var(--brand)}
.switch input:checked::after{transform:translateX(18px);background:#fff}

/* daftar centang */
.check{display:flex;align-items:flex-start;gap:var(--s-3);padding:.6rem var(--s-3);border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface-2);cursor:pointer;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.check:hover{background:var(--surface-3)}
.check.is-done{border-color:#17c49340;background:var(--ok-soft)}
.check.is-done .check__txt{color:var(--text-mute);text-decoration:line-through}
.check__box{flex:none;width:20px;height:20px;border-radius:6px;border:2px solid var(--line-strong);
  display:grid;place-items:center;font-size:12px;color:transparent;margin-top:2px;
  transition:all var(--dur-1) var(--ease)}
.check.is-done .check__box{background:var(--ok);border-color:var(--ok);color:#04231b}
.check__txt{flex:1;font-size:var(--fs-md)}
.check__meta{font-size:var(--fs-2xs);color:var(--text-mute);display:block;margin-top:2px}

/* tabel */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-md);min-width:520px}
.tbl th,.tbl td{padding:.62rem .8rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);
  background:var(--surface-2);position:sticky;top:0}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-2)}

/* kotak catatan */
.note{border-left:3px solid var(--brand);background:var(--brand-soft);padding:var(--s-3) var(--s-4);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:var(--fs-md)}
.note--ok{border-color:var(--ok);background:var(--ok-soft)}
.note--warn{border-color:var(--warn);background:var(--warn-soft)}
.note--bad{border-color:var(--bad);background:var(--bad-soft)}
.note strong{display:block;margin-bottom:2px}

/* pemberitahuan */
.toasts{position:fixed;right:var(--s-5);bottom:var(--s-5);z-index:150;display:flex;flex-direction:column;
  gap:var(--s-2);pointer-events:none;max-width:min(92vw,360px)}
.toast{pointer-events:auto;display:flex;gap:var(--s-3);align-items:flex-start;padding:.7rem .9rem;
  border-radius:var(--r-md);background:var(--surface-solid);border:1px solid var(--line-strong);
  box-shadow:var(--shadow-3);font-size:var(--fs-md);animation:toastIn .3s var(--ease-out) both}
.toast.is-out{animation:toastOut .25s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(28px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(28px) scale(.96)}}
.toast__ico{font-size:1.1rem;line-height:1.2}
.toast--ok .toast__ico{color:var(--ok)} .toast--bad .toast__ico{color:var(--bad)}
.toast--warn .toast__ico{color:var(--warn)}

/* modal */
.modal-root:empty{display:none}
.modal{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:var(--s-4);
  background:#000000a8;backdrop-filter:blur(4px);animation:viewIn .2s var(--ease) both}
.modal__box{width:min(640px,100%);max-height:86dvh;overflow:auto;background:var(--bg-elev);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-3);
  padding:var(--s-6);animation:modalIn .3s var(--ease-out) both}
/* Kerangka isi modal. Ditulis di sini, bukan di berkas pemanggil,
   karena modal() dipakai bersama: kepala sebaris (judul kiri, tombol
   tutup kanan) dan kaki rata kanan berlaku untuk semua yang memakainya. */
.modal__head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-3);margin-bottom:var(--s-4)}
.modal__head h3{margin:0;display:flex;align-items:center;gap:.5rem;font-size:var(--fs-lg)}
.modal__foot{display:flex;justify-content:flex-end;gap:var(--s-2);margin-top:var(--s-5)}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

/* palet pencarian */
.palette{position:fixed;inset:0;z-index:145;background:#000000a8;backdrop-filter:blur(4px);
  padding-top:12vh;display:flex;justify-content:center;animation:viewIn .18s var(--ease) both}
.palette__box{width:min(660px,94vw);height:max-content;max-height:70dvh;display:flex;flex-direction:column;
  background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);overflow:hidden}
.palette__box input{padding:var(--s-5);border:0;border-bottom:1px solid var(--line);
  background:transparent;font-size:var(--fs-lg);outline:none}
.palette__results{overflow-y:auto;padding:var(--s-2)}
.palette__results .pr{display:flex;gap:var(--s-3);align-items:center;padding:.5rem var(--s-3);
  border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs-md)}
.palette__results .pr:hover,.palette__results .pr.is-sel{background:var(--brand-soft)}
.palette__results .pr small{margin-left:auto;color:var(--text-mute);font-size:var(--fs-2xs)}
.palette__hint{padding:.5rem var(--s-4);border-top:1px solid var(--line);color:var(--text-mute);
  font-size:var(--fs-2xs);display:flex;gap:6px;align-items:center}

/* keadaan kosong */
.empty{display:grid;place-items:center;gap:var(--s-3);padding:var(--s-12) var(--s-4);text-align:center;
  color:var(--text-mute)}
.empty__ico{font-size:2.6rem;opacity:.5}

/* util */
.t-c{text-align:center} .t-r{text-align:right}
.muted{color:var(--text-mute)} .soft{color:var(--text-soft)}
.small{font-size:var(--fs-sm)} .xs{font-size:var(--fs-xs)}
.b{font-weight:700} .nowrap{white-space:nowrap}
.hide{display:none!important}
.num{font-variant-numeric:tabular-nums}
.ipa{font-family:var(--font-mono);color:var(--info);font-size:.92em}
.en{font-weight:600}
.id-txt{color:var(--text-soft);font-style:italic}
.pill-row{display:flex;gap:var(--s-2);flex-wrap:wrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── pengalih bahasa di bilah atas ────────────────────────────── */
.langsw{position:relative}
.langsw__btn{display:flex;align-items:center;gap:.5rem;padding:.32rem .7rem;border-radius:var(--r-full);
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);font-size:var(--fs-sm);
  font-weight:600;transition:all var(--dur-1) var(--ease)}
.langsw__btn:hover{background:var(--surface-3);border-color:var(--line-strong)}
.langsw__dot{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none}
.langsw__caret{color:var(--text-mute);font-size:.7rem}
.langsw__menu{position:absolute;right:0;top:calc(100% + 8px);width:min(300px,84vw);z-index:70;
  background:var(--bg-elev);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);padding:var(--s-2);animation:viewIn .16s var(--ease-out) both}
.langsw__item{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border-radius:var(--r-sm);
  color:var(--text);transition:background var(--dur-1) var(--ease)}
.langsw__item:hover{background:var(--surface-2);text-decoration:none}
.langsw__item.is-active{background:var(--brand-soft)}
.langsw__txt{display:flex;flex-direction:column;line-height:1.15;flex:1;min-width:0}
.langsw__txt b{font-size:var(--fs-md)}
.langsw__txt em{font-style:normal;font-size:var(--fs-2xs);color:var(--text-mute)}
.langsw__item small{color:var(--text-mute);font-size:var(--fs-2xs);text-align:right;max-width:9ch}
.langsw__all{display:block;margin-top:var(--s-2);padding:.5rem;border-top:1px solid var(--line);
  text-align:center;font-size:var(--fs-sm);font-weight:600}
@media(max-width:640px){.langsw__name{display:none}}

/* ── spanduk status suara ─────────────────────────────────────── */
.vbanner{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-4);
  border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-2)}
.vbanner>svg{flex:none;margin-top:2px}
.vbanner>div{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.vbanner b{font-size:var(--fs-md)}
.vbanner span{font-size:var(--fs-sm);color:var(--text-soft)}
.vbanner details{margin-top:.5rem}
.vbanner summary{cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--brand-text)}
.vbanner ol{margin:.5rem 0 .3rem 1.1rem;display:flex;flex-direction:column;gap:.35rem}
.vbanner li{font-size:var(--fs-sm);color:var(--text-soft)}
.vbanner.is-ok{border-color:#2ee6a840;background:var(--ok-soft)}
.vbanner.is-ok>svg{color:var(--ok)}
.vbanner.is-warn{border-color:#f5b34140;background:var(--warn-soft)}
.vbanner.is-warn>svg{color:var(--warn)}
.vbanner.is-bad{border-color:#f0576f40;background:var(--bad-soft)}
.vbanner.is-bad>svg{color:var(--bad)}

/* bentuk sambung huruf Arab */
.forms-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2);margin-top:var(--s-3)}
.form-cell{display:grid;place-items:center;gap:2px;padding:.6rem .3rem;border-radius:var(--r-sm);
  background:var(--surface-3);border:1px solid var(--line)}
.form-cell b{font-size:1.7rem;line-height:1}
.form-cell span{font-size:var(--fs-2xs);color:var(--text-mute)}
.num-cell[role="button"]{cursor:pointer;transition:background var(--dur-1) var(--ease)}
.num-cell[role="button"]:hover{background:var(--brand-soft)}

/* tabel pemilih suara per bahasa */
.voice-rows{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-4)}
.voice-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--s-3);align-items:center;
  padding:.5rem var(--s-3);border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line)}
.voice-row__n{display:flex;flex-direction:column;line-height:1.2;min-width:8ch}
.voice-row__n b{font-size:var(--fs-md)}
.voice-row__n em{font-style:normal;font-size:var(--fs-2xs);color:var(--text-mute)}
.voice-row select{padding:.35rem .5rem;font-size:var(--fs-sm)}
.voice-row .badge{white-space:nowrap}
@media(max-width:700px){.voice-row{grid-template-columns:1fr auto}.voice-row select{grid-column:1/-1}}