:root{--bg: #f7f4ee;--paper: #fffdf8;--ink: #23201c;--muted: #8a8378;--line: #e6e0d4;--accent: #b8322a;--accent-soft: #f6e3df;--sel: #ffe8a3;--sent: #fbf1d6;--hard: #c2410c;--pop: #23201c;--pop-ink: #fffdf8;--shadow: 0 10px 30px rgba(35, 32, 28, .18);--zh: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;color-scheme:light}@media(prefers-color-scheme:dark){:root{--bg: #171614;--paper: #201f1c;--ink: #ece7de;--muted: #9b948a;--line: #34312c;--accent: #e0645a;--accent-soft: #3a2422;--sel: #5a4a17;--sent: #2c2a22;--hard: #f59e5b;--pop: #f2ede4;--pop-ink: #1b1a18;--shadow: 0 10px 30px rgba(0, 0, 0, .5);color-scheme:dark}}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}button,input{font:inherit;color:inherit}a{color:var(--accent);text-decoration:none}.zh{font-family:var(--zh)}.muted{color:var(--muted)}.pad{padding:24px}.center{text-align:center}.small{font-size:13px}.error{color:var(--accent);background:var(--accent-soft);padding:8px 12px;border-radius:8px}.splash{height:100vh;display:grid;place-items:center;font:48px var(--zh);color:var(--accent)}button{cursor:pointer;border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:6px 12px}button:disabled{opacity:.6;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;padding:10px 16px}button.primary.big{width:100%;padding:14px;font-size:16px}button.link{border:none;background:none;padding:0;color:var(--accent)}button.icon{border:none;background:none;font-size:20px;line-height:1;color:var(--muted);padding:4px 8px}button.icon:hover{color:var(--accent)}input:not([type]),input[type=text],input[type=password]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);outline:none}input:focus{border-color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent)}input[type=checkbox]{accent-color:var(--accent)}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:10px 24px;background:color-mix(in srgb,var(--paper) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:700}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;font-family:var(--zh);font-size:18px}.topbar nav{display:flex;gap:18px;flex:1}.topbar nav a{color:var(--muted);padding:4px 0;border-bottom:2px solid transparent}.topbar nav a.active{color:var(--ink);border-color:var(--accent)}.user{display:flex;gap:12px;align-items:center}.username{color:var(--muted)}main{max-width:860px;margin:0 auto;padding:24px 16px 80px}.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px}.error-card{color:var(--accent)}h2{margin:0 0 16px;font-size:20px}.login-page{min-height:100vh;display:grid;place-items:center;padding:16px}.login-card{width:100%;max-width:360px;display:flex;flex-direction:column;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)}.login-card h1{margin:0;font-size:22px;text-align:center}.login-card p{margin:-6px 0 6px;text-align:center;font-size:13px}.login-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}.login-mark{align-self:center;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:var(--accent);color:#fff;font:32px var(--zh)}.home{display:flex;flex-direction:column;gap:32px}.generator{display:flex;flex-direction:column;gap:22px}.field{display:flex;flex-direction:column;gap:10px}.field-label{display:flex;justify-content:space-between;align-items:center;font-weight:600;gap:12px}.field-label .value{font-weight:500;color:var(--accent);font-size:14px}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{border-radius:999px;padding:4px 12px;font-size:13px;background:var(--bg)}.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button{border:none;border-radius:0;background:var(--bg);padding:8px 0}.seg button+button{border-left:1px solid var(--line)}.seg button.on{background:var(--accent);color:#fff}.seg.levels{display:flex}.seg.levels button{flex:1;font-weight:600}.seg.small button{padding:3px 10px;font-size:12px;font-weight:500}.range-ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:-6px}.hint{font-size:12px;color:var(--muted)}.progress{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:-12px}.progress div{height:100%;width:30%;background:var(--accent);animation:slide 1.4s ease-in-out infinite}@keyframes slide{0%{transform:translate(-100%)}to{transform:translate(340%)}}.text-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.text-list li{display:flex;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:4px 4px 4px 16px}.text-list a{flex:1;display:flex;flex-direction:column;padding:8px 0;color:var(--ink);min-width:0}.t-title{font-size:17px}.t-meta{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px;flex-wrap:wrap}.toggles{display:flex;gap:16px;font-size:13px;color:var(--muted)}.toggles label{display:flex;align-items:center;gap:6px;cursor:pointer}.reader-body{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:36px 40px 48px}.reader .title{font-size:30px;font-weight:600;margin:0 0 4px;line-height:1.6}.title-tr{color:var(--muted);font-style:italic;margin-bottom:8px}.stats{font-size:13px;color:var(--muted);margin-bottom:24px}.stats .link{font-size:13px}.pending{color:var(--accent)}.hard-list{background:var(--bg);border-radius:8px;padding:8px 12px;margin:-12px 0 20px;color:var(--hard)}.reader .text{font-size:24px;line-height:2.1}.reader .text p{margin:0 0 .9em;text-indent:2em}.with-pinyin .text{line-height:2.6}.sent{border-radius:4px;transition:background .15s}.sent.active{background:var(--sent)}.w{cursor:pointer;border-radius:4px;padding:0 1px;transition:background .1s}.w:hover{background:var(--accent-soft)}.w.sel{background:var(--sel)}.w.hard{color:var(--hard);text-decoration:underline dotted;text-underline-offset:6px}.w.marked{box-shadow:inset 0 -2px 0 var(--accent)}ruby rt{font-family:-apple-system,sans-serif;font-size:11px;color:var(--muted)}.pop{position:absolute;z-index:10;box-shadow:var(--shadow);border-radius:12px}.word-pop{background:var(--pop);color:var(--pop-ink);padding:10px 14px;min-width:150px;max-width:280px}.wp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.wp-hanzi{font-size:28px;line-height:1.2}.wp-py{font-size:15px;opacity:.85}.wp-en{font-size:15px;font-weight:600;margin-top:2px}.wp-lvl{font-size:11px;opacity:.6;margin-top:6px;text-transform:uppercase;letter-spacing:.04em}.wp-lvl.hard{color:var(--hard);opacity:1}.star{border:none;background:none;color:inherit;font-size:22px;padding:0 2px;line-height:1}.star.on{color:#f5b301}.sent-pop{background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:10px 14px;width:max-content;max-width:min(520px,100%);font-size:15px;line-height:1.45}.reader>.hint{margin-top:12px}.bm-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}.bm-head h2{margin:0}.bm-tools{display:flex;gap:8px}.bm-tools input{width:200px}.bm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.bm{display:flex;gap:20px;align-items:flex-start;padding:16px}.bm-word{display:flex;flex-direction:column;min-width:90px}.bm-word .hanzi{font-size:30px;line-height:1.2}.bm-word .py{color:var(--muted)}.bm-body{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}.meaning{font-weight:600}.example{font-size:14px;border-left:3px solid var(--line);padding-left:10px}.example .zh{font-size:16px}@media(max-width:640px){.topbar{padding:8px 12px;gap:12px}.brand-name,.username{display:none}main{padding:16px 10px 60px}.reader-body{padding:22px 16px 32px}.reader .title{font-size:24px}.reader .text{font-size:21px}.reader>.hint{display:none}.bm{gap:12px}.bm-tools input{width:140px}}
