:root{--bg: #f7f9f8;--surface: #ffffff;--surface-soft: #f1f7f4;--ink: #16211f;--muted: #6d7a77;--line: #dde6e2;--green: #008a76;--green-dark: #006d5b;--mint: #e0f5ee;--amber: #f2a900;--amber-soft: #fff3d4;--coral: #ef645d;--coral-soft: #ffeded;--shadow: 0 18px 45px rgba(26, 48, 43, .08);font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:var(--ink)}*{box-sizing:border-box}body{margin:0;background:var(--bg)}button,input,textarea,select{font:inherit}button{border:0;cursor:pointer}.app-shell{display:grid;grid-template-columns:214px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:26px 14px 22px;display:flex;flex-direction:column;gap:24px;border-right:1px solid var(--line);background:#ffffffe6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.brand{display:flex;align-items:center;gap:12px;font-size:23px;padding:0 12px}.brand.big{padding:0;font-size:30px}.brand-mark{width:29px;height:29px;border-radius:50%;display:inline-block;background:conic-gradient(from 20deg,var(--green),#0db39e 44%,#dcefe9 45%,#dcefe9 75%,var(--green) 76%)}.sidebar nav{display:grid;gap:8px}.sidebar nav button{height:48px;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;padding:0 14px;border-radius:8px;color:#34433f;background:transparent;text-align:left}.sidebar nav button.active{background:#e8f4f0;color:var(--green-dark);box-shadow:inset 3px 0 0 var(--green)}.sidebar nav b{min-width:26px;height:22px;border-radius:12px;color:#fff;background:var(--coral);display:grid;place-items:center;font-size:12px}.today-goal{margin-top:auto;padding:0 12px;display:grid;gap:9px;color:var(--muted);font-size:13px}.today-goal strong{color:var(--ink);font-size:14px}.profile{display:grid;grid-template-columns:42px 1fr 36px;align-items:center;gap:10px;padding:10px}.profile span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#d7ddd9;font-weight:800}main{min-width:0}.page{padding:30px 32px 42px;max-width:1360px;margin:0 auto}.page-header{height:42px;display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.page-header h1{margin:0;font-size:24px;line-height:1;letter-spacing:0}.primary,.ghost,.link-btn{min-height:42px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 17px;font-weight:700}.primary{color:#fff;background:linear-gradient(180deg,#079982,#007c69);box-shadow:0 11px 25px #008a7638}.primary:disabled,.ghost:disabled{opacity:.55;cursor:not-allowed}.primary.small{min-height:36px;padding:0 13px}.ghost{color:#3b4a46;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 18px #263a350a}.link-btn{background:transparent;color:var(--green-dark);padding:0}.icon-btn{width:34px;height:34px;border-radius:8px;background:#f1f5f3;color:#5c6a66;display:grid;place-items:center}.progress{height:7px;background:#e6ece9;border-radius:999px;overflow:hidden}.progress i{display:block;height:100%;background:var(--green);border-radius:inherit}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:14px}.metric,.book-panel,.mastery-panel,.timeline-panel,.recent-panel,.quick-panel,.prepare-panel,.learn-card,.report-card,.import-panel,.words-panel,.translation-card,.article-card,.settings-grid,.stats-band,.reading-setup,.word-picker,.reading-feedback-card{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.metric{min-height:124px;padding:20px;display:flex;justify-content:space-between;gap:12px}.metric span,.mastery-panel span,.stat span{color:var(--muted);font-size:13px}.metric strong{display:block;margin-top:12px;font-size:34px;letter-spacing:0}.metric em,.mastery-panel em{font-size:14px;font-style:normal;margin-left:5px;color:var(--muted)}.metric i{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-style:normal}.metric i.green{background:var(--mint);color:var(--green)}.metric i.amber{background:var(--amber-soft);color:var(--amber)}.metric i.coral{background:var(--coral-soft);color:var(--coral)}.metric i.mint{background:#dcf7f4;color:#119f93}.dashboard-grid{margin-top:18px;display:grid;grid-template-columns:1.5fr .9fr .95fr;gap:16px;grid-template-areas:"book mastery quick" "timeline timeline quick" "recent recent quick"}.book-panel{grid-area:book;display:grid;grid-template-columns:120px 1fr;gap:24px;padding:24px}.book-cover{height:170px;border-radius:8px;padding:24px 16px;color:#fff;font-weight:800;background:linear-gradient(145deg,#006d5b,#083f39);box-shadow:inset 0 0 0 1px #ffffff38,0 14px 25px #00000029}.book-cover small{display:block;margin-top:12px;color:#b8f0e4}.book-copy h2{margin:8px 0 10px;font-size:22px}.book-copy p{color:var(--muted);margin-bottom:18px}.book-copy .ghost{margin-top:22px}.mastery-panel{grid-area:mastery;padding:24px}.mastery-panel strong{display:block;margin:10px 0;font-size:36px}.mastery-panel svg{width:100%;height:84px}.mastery-panel path{fill:none;stroke:#3abd74;stroke-width:5;stroke-linecap:round}.timeline-panel{grid-area:timeline;padding:22px}.timeline-panel h3,.recent-panel h3,.quick-panel h3,.import-panel h2,.prepare-panel h2{margin:0 0 18px;font-size:18px}.timeline{display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:22px;min-height:112px}.timeline div{display:grid;justify-items:center;gap:10px;color:var(--muted);font-size:13px}.timeline b{width:49px;height:49px;border-radius:50%;display:grid;place-items:center;background:#fff;border:3px solid #cfd9d5;font-size:17px;color:var(--ink)}.timeline b.busy{border-color:#ff6b25}.timeline b.normal{border-color:#2bad75}.timeline b.quiet{border-color:#cfd9d5}.recent-panel{grid-area:recent;padding:22px}table{width:100%;border-collapse:collapse;font-size:14px}td,th{padding:13px 10px;border-bottom:1px solid #edf2f0;text-align:left}th{color:var(--muted);font-size:12px;font-weight:700}.quick-panel{grid-area:quick;padding:22px;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:12px}.quick-panel h3{grid-column:1 / -1}.quick-panel button{min-height:112px;display:grid;justify-items:center;gap:8px;padding:18px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-weight:800;color:var(--ink)}.quick-panel svg{color:var(--green);width:30px;height:30px}.quick-panel span{color:var(--muted);font-size:12px;font-weight:500}.floating-refresh{margin-top:18px;background:transparent;color:var(--muted);display:inline-flex;gap:7px;align-items:center}.auth-page{min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at top left,#e2f5ef 0,transparent 38%),var(--bg)}.auth-panel{width:min(480px,100%);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:34px}.auth-panel h1{margin:28px 0 12px;font-size:32px;line-height:1.18}.auth-panel p{color:var(--muted);line-height:1.7}form{display:grid;gap:14px;margin-top:24px}label{display:grid;gap:8px;font-weight:700;color:#34433f}input,textarea,select{width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;min-height:42px;padding:0 12px;color:var(--ink);outline-color:var(--green)}textarea{min-height:190px;padding:14px;resize:vertical;line-height:1.6}.form-error{color:var(--coral);background:var(--coral-soft);padding:10px 12px;border-radius:8px}.wordbook-layout{display:grid;grid-template-columns:210px minmax(300px,.9fr) minmax(450px,1.3fr);gap:16px;align-items:start}.book-list{display:grid;gap:10px}.book-list button{min-height:70px;padding:14px;text-align:left;border:1px solid var(--line);border-radius:8px;background:#fff}.book-list button.active{border-color:var(--green);box-shadow:inset 3px 0 0 var(--green)}.book-list span{display:block;margin-top:6px;color:var(--muted);font-size:13px}.import-panel,.words-panel{padding:22px}.import-panel p{color:var(--muted);line-height:1.6}.file-line{display:flex;gap:10px;align-items:center;margin:14px 0}.search{height:42px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:0 12px;margin-bottom:12px}.search input{border:0;padding:0;min-height:38px}.prepare-panel{max-width:720px;padding:30px}.prepare-panel p{color:var(--muted);line-height:1.8}.mode-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}.learn-card{max-width:650px;margin:0 auto;padding:22px;animation:cardIn .24s ease both}.learn-card.shake{animation:shake .25s ease}.learn-progress{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;color:var(--muted);font-size:13px}.word-head{margin:36px 0 24px;display:grid;justify-items:center;gap:8px}.word-head h2{margin:0;font-size:42px;letter-spacing:0}.word-head span{color:var(--muted)}.sound{width:38px;height:38px;border-radius:50%;background:#eff7f4;color:var(--green);display:grid;place-items:center}.question{text-align:center;color:#4d5d58}.options{display:grid;gap:12px;margin-top:18px}.options button{min-height:56px;display:flex;align-items:center;gap:12px;padding:0 18px;border:1px solid var(--line);border-radius:8px;background:#fff;text-align:left}.options button i{width:20px;height:20px;border-radius:50%;border:1px solid #aebbb7;display:grid;place-items:center;font-size:12px;font-style:normal}.options button.right{border-color:var(--green);background:#f0fbf7;color:var(--green-dark)}.options button.wrong{border-color:var(--coral);background:var(--coral-soft);color:#b52f29}.card-actions{display:flex;justify-content:space-between;gap:12px;margin-top:18px}.recall-box,.meaning-box{border:1px solid var(--line);border-radius:8px;padding:22px;background:#fbfdfc}.meaning-box h3{margin:16px 0 8px}.meaning-box h3:first-child{margin-top:0}.muted{color:var(--muted)}.rating{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.rating button{min-height:42px;border-radius:8px;border:1px solid var(--line);background:#fff}.report-card{max-width:680px;margin:40px auto;padding:34px;text-align:center}.success-mark{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--green)}.report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0}.report-grid span{border:1px solid var(--line);border-radius:8px;padding:16px;color:var(--muted)}.report-grid strong{display:block;color:var(--ink);font-size:28px;margin-top:6px}.reading-offer{margin-top:20px;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding:16px;border:1px solid var(--line);border-radius:8px;text-align:left;background:#f8fcfa}.reading-offer svg{color:var(--green)}.reading-offer p{margin:6px 0 0;color:var(--muted);line-height:1.6}.reading-layout{display:grid;gap:16px;max-width:900px}.reading-setup{max-width:900px;padding:22px;margin-bottom:16px;display:grid;grid-template-columns:1fr 180px auto;gap:16px;align-items:end}.reading-setup h2{margin:0 0 8px;font-size:20px}.reading-setup p{margin:0;color:var(--muted);line-height:1.6}.word-picker{max-width:900px;padding:14px;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}.word-picker button{min-height:58px;padding:10px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;display:grid;gap:5px;text-align:left}.word-picker button.selected{border-color:var(--green);background:#f0fbf7;color:var(--green-dark);box-shadow:inset 3px 0 0 var(--green)}.word-picker span{color:var(--muted);font-size:12px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.article-card{padding:28px;position:relative}.article-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-bottom:16px}.article-text{font-size:18px;line-height:2.1}mark{background:#cbeee4;color:var(--green-dark);border-radius:5px;padding:1px 4px;cursor:pointer}mark.known{background:#dff6eb;color:#15724e}mark.vague{background:#fff0c7;color:#8a5b00}mark.unknown{background:#ffe0df;color:#a73833}.popover{position:absolute;right:28px;top:140px;width:260px;padding:18px;border-radius:8px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}.popover>button{position:absolute;right:8px;top:8px;background:transparent}.popover div{display:flex;gap:8px;margin-top:14px}.popover div button{min-height:36px;padding:0 10px;border-radius:7px;border:1px solid var(--line);background:#fff}.reading-feedback-card{max-width:900px;padding:18px;position:relative;display:grid;gap:10px}.reading-feedback-card p{margin:0;color:var(--muted)}.close-btn{position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:8px;background:#f2f5f3;display:grid;place-items:center}.feedback-buttons{display:flex;flex-wrap:wrap;gap:10px}.feedback-buttons button{min-height:38px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:#fff;font-weight:800}.feedback-buttons button.active.known{border-color:var(--green);background:#e8f7f0;color:var(--green-dark)}.feedback-buttons button.active.vague{border-color:var(--amber);background:var(--amber-soft);color:#805500}.feedback-buttons button.active.unknown{border-color:var(--coral);background:var(--coral-soft);color:#a73833}.translation-card{padding:22px}.tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);margin-bottom:16px}.tabs button{padding:0 4px 12px;background:transparent;font-weight:800;color:var(--muted)}.tabs button.active{color:var(--green-dark);box-shadow:inset 0 -3px 0 var(--green)}.reading-actions{display:flex;gap:12px}.feedback-summary{display:grid;gap:10px}.feedback-summary span{min-height:42px;display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;padding:0 12px;color:var(--muted)}.feedback-summary b{color:var(--ink)}.stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px}.stat{padding:18px;border:1px solid var(--line);border-radius:8px}.stat strong{display:block;font-size:34px;margin-top:6px}.report-wide{margin-top:16px}.bar-row{min-height:240px;display:flex;align-items:end;gap:18px}.bar-row span{width:58px;min-height:32px;border-radius:8px 8px 0 0;display:grid;justify-items:center;align-content:start;padding-top:8px;color:#fff;background:linear-gradient(180deg,#1aa38c,#006d5b)}.bar-row em{color:var(--muted);font-style:normal;margin-top:12px;transform:translateY(100%)}.settings-grid{max-width:760px;padding:24px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.toggle{min-height:56px;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:space-between;font-weight:800}.toggle i{width:44px;height:25px;border-radius:99px;background:#d7dfdc;position:relative}.toggle i:after{content:"";position:absolute;width:19px;height:19px;border-radius:50%;left:3px;top:3px;background:#fff;transition:.2s}.toggle.on{border-color:var(--green)}.toggle.on i{background:var(--green)}.toggle.on i:after{transform:translate(19px)}.toast{position:fixed;right:24px;bottom:24px;background:var(--ink);color:#fff;padding:13px 18px;border-radius:8px;box-shadow:var(--shadow);animation:toast 2.6s ease both}.full-loader{min-height:100vh;display:grid;place-items:center;color:var(--green-dark);font-weight:800}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes cardIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes shake{0%,to{transform:translate(0)}33%{transform:translate(-8px)}66%{transform:translate(8px)}}@keyframes toast{0%,to{opacity:0;transform:translateY(10px)}12%,88%{opacity:1;transform:none}}@media(max-width:1050px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto;padding:16px}.sidebar nav{grid-template-columns:repeat(4,1fr)}.sidebar nav button{height:44px;grid-template-columns:20px 1fr}.today-goal,.profile{display:none}.dashboard-grid,.wordbook-layout,.reading-setup{grid-template-columns:1fr;grid-template-areas:none}.book-panel,.mastery-panel,.timeline-panel,.recent-panel,.quick-panel{grid-area:auto}.metric-grid,.stats-band{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.page{padding:20px 14px 34px}.sidebar nav{grid-template-columns:repeat(2,1fr)}.metric-grid,.quick-panel,.report-grid,.settings-grid,.stats-band,.book-panel{grid-template-columns:1fr}.timeline{grid-template-columns:repeat(3,1fr)}.learn-progress{grid-template-columns:1fr}.word-head h2{font-size:34px}.card-actions,.file-line,.reading-actions{flex-direction:column;align-items:stretch}.popover{position:static;width:100%;margin-top:14px}}