*{box-sizing:border-box}
:root{--bg:#0d0f17;--card:#14161f;--sf:#1b1e2b;--fg:#e8eaf2;--mid:#8b90a7;--ac:#7c8cff;--ok:#4fd1a5;--bd:#2a2e42}
@media(prefers-color-scheme:light){:root{--bg:#eceef8;--card:#fff;--sf:#f4f5fb;--fg:#1c1f2e;--mid:#6b7088;--ac:#4f5bd5;--ok:#0f9d74;--bd:#dcdfec}}
:root[data-theme="light"]{color-scheme:light;--bg:#eceef8;--card:#fff;--sf:#f4f5fb;--fg:#1c1f2e;--mid:#6b7088;--ac:#4f5bd5;--ok:#0f9d74;--bd:#dcdfec}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0d0f17;--card:#14161f;--sf:#1b1e2b;--fg:#e8eaf2;--mid:#8b90a7;--ac:#7c8cff;--ok:#4fd1a5;--bd:#2a2e42}
.tg{position:absolute;top:0;right:0;font-size:12px;padding:3px 10px;border-radius:99px}
body{margin:0;min-height:100vh;display:flex;justify-content:center;padding:26px 14px 40px;background:radial-gradient(900px 380px at 50% -80px,color-mix(in srgb,var(--ac) 22%,transparent),transparent),var(--bg);color:var(--fg);font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
main{width:100%;max-width:700px;display:flex;flex-direction:column;gap:10px}
header{position:relative;text-align:center;margin-bottom:6px}h1{margin:0;font-size:24px;letter-spacing:-.02em}header p{margin:2px 0 0;color:var(--mid)}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.12)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mid)}
summary::-webkit-details-marker{display:none}summary::before{content:'▸';transition:transform .15s}details[open]>summary::before{transform:rotate(90deg)}
summary span{margin-left:auto;font-weight:400;letter-spacing:0;text-transform:none}
.body{padding:0 14px 14px;display:flex;flex-direction:column;gap:8px}
button{font:inherit;color:inherit;cursor:pointer;background:var(--sf);border:1px solid var(--bd);border-radius:8px;padding:5px 12px;transition:.15s}button:hover{border-color:var(--ac)}
.pri{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:600}
input,textarea{font:13px ui-monospace,monospace;color:var(--fg);background:var(--sf);border:1px solid var(--bd);border-radius:8px;padding:7px 10px;width:100%}input:focus,textarea:focus{outline:none;border-color:var(--ac)}
.drop{display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px;border:1.5px dashed var(--bd);border-radius:12px;cursor:pointer;text-align:center;transition:.15s}.drop:hover,.drop.over{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 8%,transparent)}
small{color:var(--mid);font-size:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#list{display:flex;flex-wrap:wrap;gap:4px;max-height:132px;overflow:auto}
.pill{padding:1px 9px;font:12px ui-monospace,monospace;border-radius:99px}.pill.done{color:var(--ok)}.pill.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 18%,transparent)}
.bar{display:flex;align-items:center;gap:10px;padding:12px 14px 2px}.bar .cur{flex:1;text-align:center;color:var(--mid);font-size:12px}
.bar .cur button{padding:1px 10px;font-size:12px;margin-left:8px;border-radius:99px}
.foot{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--bd)}
phonetic-translator{--pt-frame:0;--pt-radius:0;--pt-bg:var(--card);--pt-surface:var(--sf);--pt-fg:var(--fg);--pt-mid:var(--mid);--pt-accent:var(--ac);--pt-ok:var(--ok);--pt-border:var(--bd)}
footer{text-align:center;color:var(--mid);font-size:12px}
[hidden]{display:none!important}
.empty{padding:34px 18px;text-align:center;color:var(--mid)}
button:disabled{opacity:.45;cursor:default}