/* Palavras (pw-), nivelamento (pl-) e inglês fora do app (in-). Celular primeiro (375px); cores só por variáveis (claro e escuro). */

/* ===== palavras ===== */
.pw .btn svg,.pw-yn svg{width:16px;height:16px;flex:none}
.pw-tiles .tile{min-width:0}
.pw-tiles .tile .v{overflow-wrap:anywhere}
.pw-tilebtn{justify-self:start;margin-top:4px}
.pw-next{display:grid;gap:14px}
.pw-prev{font-size:13px;color:var(--muted);line-height:1.6}
.pw-prev b{color:var(--en);font-weight:600}
.pw-seg4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;border-radius:var(--r)}
.pw-seg4 button{padding:7px 2px;border-radius:calc(var(--r) - 3px);white-space:nowrap;font-size:12.5px}
.pw-seg4 button[disabled]{opacity:.4;cursor:not-allowed}
.pw-bandinfo{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.pw-list{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.pw-item{border-bottom:1px solid var(--line)}
.pw-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0}
.pw-main{border:0;background:none;padding:4px 0;margin:0;text-align:left;display:grid;gap:1px;min-width:0;color:inherit;border-radius:var(--r-sm)}
.pw-main:hover .en{color:var(--accent-strong)}
.pw-w{display:flex;gap:4px 8px;align-items:baseline;flex-wrap:wrap;min-width:0}
.pw-w .en{font-size:16px;overflow-wrap:anywhere}
.pw-pos{font-size:11.5px;color:var(--muted);font-style:italic}
.pw-pt{font-size:14px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-item.open .pw-pt{white-space:normal}
.pw-row .pill{font-size:11px;padding:2px 8px}
.pw-more{display:grid;gap:10px;padding:2px 0 14px 42px}
.pw-ex{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;background:var(--surface-2);border-radius:var(--r);padding:10px 12px}
.pw-ex .en{font-weight:500}
@media (max-width:420px){.pw-more{padding-left:0}.pw-row{gap:8px}}

/* teste de vocabulário */
.pw-test{display:grid;gap:16px}
.pw-h{font-size:20px;line-height:1.25}
.pw-run{gap:14px}
.pw-word{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center;padding:26px 0 18px;min-height:150px}
.pw-word .big-en{font-size:clamp(32px,9vw,46px);overflow-wrap:anywhere}
.pw-yn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.pw-yn button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;border-radius:var(--r-lg);font-size:16px;font-weight:700;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:10px 8px;white-space:nowrap}
.pw-yn button:hover{border-color:var(--ink-2)}
.pw-yn .pw-yes{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pw-yn .pw-yes:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.pw-yn svg{width:18px;height:18px}
.pw-back{justify-self:center}
.pw-est{display:grid;gap:4px}
.pw-est b{font-family:var(--f-display);font-weight:800;font-size:clamp(52px,14vw,72px);line-height:.9}
.pw-est span{color:var(--ink-2)}
.pw-bars{display:grid;gap:10px}
.pw-bar{display:grid;grid-template-columns:96px minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:14px}
.pw-bar>span:first-child{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.pw-bar>span:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.pw-test .ins .btn{white-space:normal;text-align:left}

/* ===== nivelamento ===== */
.pb.pl{max-width:760px;width:100%;margin-inline:auto}
.pl-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pl-facts li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:grid;gap:2px;align-content:start}
.pl-facts b{font-size:15px}
.pl-facts span{font-size:13px;color:var(--muted)}
@media (max-width:600px){.pl-facts{grid-template-columns:minmax(0,1fr)}}
.pl-track{display:flex;gap:4px}
.pl-track span{flex:1;text-align:center;font:600 11px var(--f-mono);padding:4px 0;border-radius:6px;background:var(--surface-2);color:var(--muted)}
.pl-track span.done{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.pl-track span.cur{background:var(--ink);color:var(--bg)}
.pl-listen{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.pl-listen .audiobtn[disabled]{opacity:.5;cursor:default}
.pl-listen .audiobtn.on[disabled]{opacity:1}
.pl-read{margin:0;background:var(--surface);border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;padding:12px 14px;font-size:16px;font-weight:500;line-height:1.55}
.pl-stem{font-size:clamp(18px,4.6vw,22px);font-weight:600;line-height:1.4}
.pl-gap{display:inline-block;width:3.2em;height:1em;vertical-align:-0.1em;border-bottom:2px solid var(--accent)}
.pl-opts{display:grid;gap:8px}
.pl-opt{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:11px 14px;font-size:16px;min-height:54px;color:var(--ink)}
.pl-opt i{font:600 12px var(--f-mono);font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2)}
.pl-opt:hover{border-color:var(--ink-2)}
.pl-opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.pl-opt[aria-pressed="true"] i{background:var(--accent);color:var(--accent-ink)}
.pl-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.lvl.pl-big{min-width:88px;height:88px;font-size:32px;border-radius:var(--r-lg)}
.pl-name{font-size:22px;font-weight:700}
@media (max-width:480px){.pl-hero{grid-template-columns:minmax(0,1fr)}.lvl.pl-big{min-width:72px;height:72px;font-size:26px}}
.pl-lvrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.pl-lvrow:first-child{border-top:0}

/* ===== inglês fora do app ===== */
.in-chips{display:flex;flex-wrap:wrap;gap:8px}
.in-chips .chip{min-height:36px}
.in-custom{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
.in-custom input{width:96px}
.in-form .btn.primary{justify-self:stretch}
@media (min-width:600px){.in-form .btn.primary{justify-self:start}}
.in-total{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.in-total b{font-family:var(--f-display);font-weight:800;font-size:clamp(46px,12vw,60px);line-height:.9}
.in-total span{color:var(--ink-2);font-size:14px}
.in-miles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.in-miles li{text-align:center;font:600 11px var(--f-mono);padding:6px 0;border-radius:6px;background:var(--surface-2);color:var(--muted);white-space:nowrap;overflow:hidden}
.in-miles li.ok{background:var(--accent);color:var(--accent-ink)}
.in-miles li.next{box-shadow:0 0 0 1.5px var(--accent) inset;color:var(--accent-strong)}
.in-bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:130px;gap:4px;border-bottom:1px solid var(--surface-3)}
.in-bar{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;min-width:0}
.in-bar i{display:block;width:100%;max-width:28px;background:var(--accent-dim);border-radius:4px 4px 0 0}
.in-bar.cur i{background:var(--accent)}
.in-bar b{font-size:11px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.in-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.in-log .t{font-size:15px}
.in-log .d{overflow-wrap:anywhere}
.in-log .confirm{flex-wrap:wrap;justify-content:flex-end}
.in-sugs{list-style:none;margin:0;padding:0;display:grid}
.in-sug{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.in-sug:first-child{border-top:0}
.in-sugt{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media (max-width:480px){.in-sug{grid-template-columns:minmax(0,1fr)}.in-sug .btn{justify-self:start}}
.in-tips{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.in-tips li{display:grid;gap:2px;padding-left:12px;border-left:3px solid var(--accent-dim)}
.in-tips b{font-size:14px}
.in-tips span{font-size:14px;color:var(--ink-2)}