.quality-heading { display:flex; align-items:center; gap:5px; }
.converter-help { position:relative; display:inline-grid; width:17px; height:17px; place-items:center; border:1px solid #aeb8c9; border-radius:50%; color:var(--muted); font:700 10px 'DM Mono',monospace; cursor:help; }
.converter-help:hover,.converter-help:focus { border-color:var(--accent); color:var(--accent); outline:none; }
.converter-tooltip { position:absolute; z-index:80; left:50%; bottom:calc(100% + 10px); width:min(390px,calc(100vw - 32px)); padding:15px; border:1px solid var(--line); border-radius:12px; background:#172033; color:#fff; font:400 11px/1.5 'Noto Sans Thai',sans-serif; box-shadow:0 14px 35px rgba(23,32,51,.25); opacity:0; pointer-events:none; transform:translate(-50%,5px); transition:.16s; white-space:normal; overflow-wrap:anywhere; }
.converter-tooltip>strong { display:block; margin-bottom:10px; font-size:13px; }
.quality-row { display:grid; grid-template-columns:62px minmax(0,1fr); gap:9px; align-items:center; padding:7px 0; border-top:1px solid rgba(255,255,255,.12); }
.quality-row>b { color:#aeb9ff; font:700 11px 'DM Mono',monospace; }
.quality-row span { min-width:0; }
.quality-row em { display:inline-block; margin-left:4px; padding:2px 5px; border-radius:99px; background:#2d936f; color:#fff; font-style:normal; font-size:9px; font-weight:700; }
.converter-tooltip>small { display:block; margin-top:9px; padding-top:9px; border-top:1px solid rgba(255,255,255,.16); color:#bdc7d9; font-size:10px; line-height:1.6; }
.converter-tooltip:after { position:absolute; top:100%; left:50%; border:6px solid transparent; border-top-color:#172033; content:''; transform:translateX(-50%); }
.converter-help:hover .converter-tooltip,.converter-help:focus .converter-tooltip,.converter-help:focus-within .converter-tooltip { opacity:1; transform:translate(-50%,0); }
html[data-theme=dark] .converter-tooltip { border-color:#3a465b; background:#202940; color:#edf1fa; }
html[data-theme=dark] .converter-tooltip:after { border-top-color:#202940; }
@media(max-width:600px) {
  .converter-tooltip { position:fixed; z-index:200; left:16px; right:16px; bottom:18px; width:auto; max-height:calc(100vh - 36px); overflow:auto; transform:translateY(8px); }
  .converter-help:hover .converter-tooltip,.converter-help:focus .converter-tooltip,.converter-help:focus-within .converter-tooltip { transform:none; }
  .converter-tooltip:after { display:none; }
}