/* KeepWords UI —— 基于设计师稿件的设计系统（原样采用其颜色、间距、组件） */
/* 令牌：绿 #127a5e / 墨 #193d36 / 线 #dceae1 / 底 #f4f8f4；强调 紫 #6955a5、黄 #f9d67f、蓝 #386fa0 */
:root{--green:#127a5e;--green-dark:#0b5d47;--ink:#193d36;--muted:#527168;--line:#dceae1;--bg:#f4f8f4;--white:#fff;--mint:#dff3e7;--soft:#eef8f0;--yellow:#f9d67f;--yellow-soft:#fff5d9;--purple:#6955a5;--purple-soft:#f0edfa;--blue:#386fa0;--blue-soft:#eaf2fc;--red:#a34135;--red-soft:#fceae7;--shadow:0 12px 36px rgba(52,93,78,.08);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-size:16px}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #d39414;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.58}.app-header{height:72px;background:white;border-bottom:1px solid #edf2ed}.header-inner{max-width:1152px;padding:0 16px;height:100%;margin:auto;display:flex;align-items:center;gap:14px}.logo{border:0;background:none;color:var(--ink);display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:21px;padding:0;min-height:44px}.logo-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;color:white;background:var(--green);font-size:18px}.tagline{font-size:14px;color:var(--muted);margin-left:20px}.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.user-btn,.icon-btn{border:0;background:transparent;color:var(--ink);min-height:44px;border-radius:12px;display:flex;align-items:center;gap:8px;padding:4px 8px}.user-dot{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--mint);font-size:14px;color:var(--green);font-weight:700}.icon-btn{justify-content:center;width:44px;padding:0;background:var(--soft);color:var(--green);font-size:20px}.preview{max-width:1152px;margin:18px auto 0;padding:0 16px;color:#527168;font-size:13px}.preview span{background:#e6f2ea;padding:6px 10px;display:inline-block;border-radius:20px}.wrap{max-width:1152px;margin:auto;padding:44px 16px 80px}.heading{margin:0 0 12px;font-size:32px;line-height:1.35;letter-spacing:-.02em}.sub{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 30px}.back{display:inline-flex;align-items:center;min-height:44px;border:0;background:none;padding:0;color:var(--muted);font-size:14px;font-weight:600;margin:-12px 0 8px}.home-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,1fr);gap:24px}.card{background:var(--white);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.task{padding:32px 34px;min-height:404px;display:flex;flex-direction:column}.chip{display:inline-flex;align-items:center;min-height:30px;width:max-content;padding:4px 14px;border-radius:99px;background:var(--mint);color:var(--green);font-size:14px;font-weight:700}.metrics{display:flex;gap:clamp(34px,5vw,80px);margin:40px 0 42px}.metric strong{display:block;font-size:30px;line-height:1.1;font-weight:800;white-space:nowrap}.metric small{display:block;margin-top:9px;font-size:14px;color:var(--muted)}.metric.emphasis strong{color:var(--green)}.progress-label{display:flex;justify-content:space-between;color:var(--muted);font-size:14px}.progress-label b{color:var(--green)}.progress{height:10px;overflow:hidden;background:#e9f0ea;border-radius:99px;margin:14px 0 30px}.progress>span{display:block;height:100%;background:var(--green);border-radius:inherit;transition:width .2s ease}.btn{border:0;border-radius:14px;padding:0 24px;min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;text-decoration:none;background:var(--green);color:white;text-align:center}.btn:hover:not(:disabled){background:var(--green-dark)}.btn.secondary{border:1px solid var(--line);background:white;color:var(--green)}.btn.secondary:hover:not(:disabled){background:var(--soft)}.btn.full{width:100%}.task .btn{margin-top:auto}.entry-stack{display:grid;gap:24px}.entry{border:0;border-radius:24px;padding:28px;min-height:190px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;color:var(--ink)}.entry.purple{background:var(--purple-soft)}.entry.yellow{background:var(--yellow-soft)}.entry-top{display:flex;align-items:center;gap:18px}.entry-icon{display:grid;place-items:center;width:58px;height:58px;flex:none;border-radius:18px;font-size:28px;font-weight:700}.purple .entry-icon{background:#ded8f3;color:var(--purple)}.yellow .entry-icon{background:#fbe8ad;color:#956d14}.entry h2{font-size:21px;margin:0 0 6px}.entry p{font-size:14px;line-height:1.5;margin:0;color:var(--muted)}.entry-action{font-size:15px;font-weight:700;color:var(--purple);margin-top:auto}.yellow .entry-action{color:#80580d}.quiet{margin:38px 2px 0;color:var(--muted);font-size:14px;line-height:1.6}.narrow{width:100%;max-width:790px;margin:auto}.step-head{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:15px}.step-head .back{margin:0}.step-head strong{font-size:15px}.slim-progress{margin:20px 0 26px}.word-card{text-align:center;padding:32px 45px 42px;min-height:570px}.word-card .chip{display:flex}.word{font-family:Georgia,"Times New Roman",serif;font-size:58px;line-height:1.15;font-weight:500;margin:48px 0 12px}.phonetic{font-size:16px;color:var(--muted);margin:0}.prompt{font-size:15px;color:var(--muted);margin:60px 0 24px}.reveal-btn{min-width:300px}.meaning{font-size:28px;font-weight:800;margin:38px 0 20px}.example{max-width:620px;background:var(--soft);border-radius:16px;margin:0 auto;padding:18px 22px;line-height:1.65;font-size:15px}.example small{display:block;font-size:14px;color:var(--muted);margin-top:5px}.rating-title{color:var(--muted);margin:28px 0 16px;font-size:15px}.rating-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.rating{min-height:56px;border:0;border-radius:14px;font-weight:700;font-size:15px}.rating.no{background:var(--red-soft);color:var(--red)}.rating.maybe{background:#fff2ce;color:#80600d}.rating.yes{background:var(--green);color:white}.level-hero{padding:30px 32px;background:var(--purple-soft);border-radius:24px;display:flex;justify-content:space-between;gap:24px;align-items:center}.level-hero .chip{color:var(--purple);background:#ded8f3}.level-hero h2{font-size:26px;margin:18px 0 10px}.level-hero p{color:var(--muted);font-size:15px;margin:0;line-height:1.6}.section-heading{font-size:20px;margin:48px 0 20px}.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.level{border:1px solid var(--line);background:white;border-radius:20px;min-height:180px;padding:20px;text-align:left;color:var(--ink)}.level[disabled]{opacity:1;cursor:default}.level .entry-icon{width:48px;height:48px;border-radius:15px;font-size:16px}.level b{display:block;font-size:16px;margin-top:18px}.level small{display:block;font-size:14px;margin-top:9px;color:var(--muted)}.level.done small{color:var(--green)}.lobby-grid{display:grid;grid-template-columns:1.9fr 1fr;gap:24px}.lobby-panel{border-radius:24px;padding:30px;min-height:300px}.lobby-panel.room{background:var(--yellow-soft)}.lobby-panel.solo{background:var(--blue-soft)}.lobby-panel h2{font-size:22px;margin:0 0 8px}.lobby-panel p{font-size:15px;color:var(--muted);line-height:1.6;margin:0}.lobby-title{display:flex;align-items:center;gap:18px}.lobby-title .entry-icon{background:#fbe8ad;color:#956d14}.solo .entry-icon{background:#d6e7fa;color:var(--blue)}.lobby-rules{margin-top:42px;font-size:15px;color:#80580d;font-weight:700}.action-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}.action-row .btn{min-width:160px}.rank-entry{margin-top:24px;box-shadow:none;padding:22px;display:flex;align-items:center;gap:20px;width:100%;text-align:left;color:var(--ink);cursor:pointer}.rank-entry .entry-icon{background:var(--mint);color:var(--green);width:56px;height:56px}.rank-entry b{display:block;font-size:18px}.rank-entry small{display:block;font-size:14px;color:var(--muted);margin-top:8px}.rank-entry .more{margin-left:auto;color:var(--green);font-weight:700;font-size:14px}.room-banner{background:var(--yellow-soft);border-radius:24px;padding:26px 30px;display:flex;align-items:center;gap:32px}.room-banner small{color:#80580d;font-weight:700;font-size:14px}.room-code{font-size:28px;font-weight:800;letter-spacing:.04em;margin-top:4px}.room-banner .btn{margin-left:auto}.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.person{padding:20px;display:flex;gap:16px;align-items:center;min-height:108px;box-shadow:none}.avatar{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:var(--mint);color:var(--green);font-weight:700;font-size:18px;flex:none}.avatar.purple{background:var(--purple-soft);color:var(--purple)}.avatar.blue{background:var(--blue-soft);color:var(--blue)}.person b{display:block;font-size:16px}.person small{display:block;color:var(--muted);font-size:14px;margin-top:8px}.quiz-top{display:flex;justify-content:space-between;align-items:center;gap:14px}.quiz-top .back{margin:0}.time{font-size:22px;color:var(--green);font-weight:800;font-variant-numeric:tabular-nums}.time.warning{color:#aa3c31}.quiz-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px}.quiz-card{padding:30px 34px 38px}.quiz-card .word{text-align:center;margin:48px 0 12px}.quiz-card .question{text-align:center;color:var(--muted);font-size:15px;margin-bottom:32px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:16px}.choice{min-height:76px;border:1px solid var(--line);border-radius:16px;background:white;color:var(--ink);display:flex;align-items:center;text-align:left;gap:16px;padding:12px 16px;font-weight:700}.choice:disabled{opacity:1}.choice-letter{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--soft);color:var(--green);flex:none}.choice.correct{border-color:#94ceaa;background:#e2f5e9;color:#176a43}.choice.wrong{border-color:#eca79d;background:var(--red-soft);color:var(--red)}.mark{margin-left:auto}.score-card{padding:26px 28px;box-shadow:none;align-self:start}.score-card small{display:block;color:var(--muted);font-size:14px}.score-card strong{display:block;font-size:36px;margin:10px 0 26px}.dots{display:flex;gap:10px;margin:12px 0 24px}.dot{width:22px;height:22px;border-radius:50%;background:#ebf1ec}.dot.on{background:var(--yellow)}.summary-card{max-width:770px;margin:auto;padding:48px 42px;text-align:center;min-height:570px}.celebrate{width:104px;height:104px;display:grid;place-items:center;margin:auto;border-radius:50%;background:var(--mint);color:var(--green);font-size:42px;font-weight:700}.celebrate.purple{background:var(--purple-soft);color:var(--purple)}.summary-card h1{font-size:31px;margin:36px 0 10px}.summary-card .metrics{justify-content:center}.summary-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.summary-actions .btn{min-width:220px}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.score-summary,.board{padding:30px;box-shadow:none}.score-summary h1{font-size:48px;margin:22px 0 8px}.score-summary h1 small{font-size:17px;color:var(--muted)}.score-summary .metrics{gap:36px;margin:35px 0}.score-summary .metric strong{font-size:24px}.rank-title{font-size:20px;margin:0 0 24px}.rank-row{display:flex;align-items:center;gap:16px;min-height:52px;border-radius:12px;padding:0 14px;font-size:15px}.rank-row.me{background:var(--mint);font-weight:700}.rank-row .num{width:25px;color:var(--muted);font-weight:700}.rank-row:first-of-type .num{color:#986c11}.rank-row .points{margin-left:auto;font-weight:700}.form-card{max-width:520px;margin:auto;padding:38px}.form-card h1{font-size:28px;margin:0 0 30px}.field{display:block;margin:20px 0;color:var(--ink);font-size:14px;font-weight:700}.field input{width:100%;height:54px;margin-top:9px;border:1px solid #cbded2;border-radius:12px;background:white;padding:0 16px;font-size:16px;color:var(--ink)}.helper{color:var(--muted);font-size:14px;line-height:1.75}.notice{background:var(--soft);border-radius:14px;padding:16px;margin-top:24px}.modal-scrim{position:fixed;inset:0;background:rgba(19,49,39,.42);display:grid;place-items:center;padding:16px;z-index:10}.modal{width:min(480px,100%);max-height:90vh;overflow:auto;background:white;border-radius:24px;box-shadow:0 20px 60px #193d3633;padding:30px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.modal-header h2{font-size:24px;margin:0}.modal-header .icon-btn{font-size:23px}.modal-label{font-size:15px;font-weight:700;margin:30px 0 14px}.segments{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.segments button{min-height:48px;border:1px solid var(--line);background:white;color:var(--ink);border-radius:12px;font-weight:700}.segments button.selected{border-color:var(--green);background:var(--mint);color:var(--green)}.book{background:var(--soft);padding:16px;border-radius:14px;line-height:1.7}.modal-actions{display:flex;gap:12px;margin-top:30px}.modal-actions .btn{flex:1;min-width:0}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#193d36;color:#fff;border-radius:12px;padding:12px 18px;font-size:14px;z-index:20;box-shadow:var(--shadow);max-width:90%;text-align:center}.hidden{display:none!important}
@media(max-width:760px){.tagline,.user-label{display:none}.header-inner{padding:0 20px}.preview{margin-top:14px;padding:0 20px}.wrap{padding:34px 20px 64px}.heading{font-size:27px}.sub{font-size:14px;margin-bottom:24px}.home-grid,.lobby-grid,.quiz-grid,.result-grid{grid-template-columns:1fr}.home-grid,.entry-stack,.lobby-grid{gap:16px}.task{padding:24px;min-height:342px}.metrics{gap:26px;margin:30px 0 34px}.metric strong{font-size:27px}.metric small{font-size:13px}.entry{min-height:150px;padding:20px}.entry-icon{width:52px;height:52px;font-size:25px;border-radius:16px}.entry h2{font-size:19px}.entry-action{margin-top:20px}.quiet{margin-top:26px}.word-card{padding:24px 18px 38px;min-height:620px}.word{font-size:42px;margin:68px 0 12px}.word-card .prompt{margin-top:100px}.reveal-btn{min-width:0;width:100%}.meaning{font-size:25px;margin:36px 0 22px}.example{padding:16px 14px}.rating-row{gap:8px}.rating{font-size:14px;padding:0 4px}.level-hero{padding:22px;display:block}.level-hero h2{font-size:20px;margin:16px 0 8px}.level-hero .btn{margin-top:18px;min-height:48px}.section-heading{margin:34px 0 16px;font-size:19px}.level-grid,.people-grid{grid-template-columns:1fr;gap:14px}.level{min-height:118px;display:grid;grid-template-columns:54px 1fr;grid-template-rows:1fr 1fr;column-gap:16px;align-items:center}.level .entry-icon{grid-row:1/3}.level b{margin:0;align-self:end;font-size:17px}.level small{margin:8px 0 0;align-self:start}.lobby-panel{padding:22px;min-height:0}.lobby-rules{margin-top:30px}.action-row{margin-top:24px}.action-row .btn{flex:1;min-width:0;padding:0 14px}.rank-entry{padding:18px;margin-top:16px}.rank-entry .more{display:none}.room-banner{display:block;padding:22px}.room-banner .btn{margin-top:18px}.people-grid{gap:14px}.person{min-height:100px}.quiz-grid{gap:16px}.quiz-card{padding:22px 20px 28px}.quiz-card .word{margin:44px 0 12px}.quiz-card .question{margin-bottom:24px}.choices{grid-template-columns:1fr;gap:12px}.choice{min-height:64px}.score-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px}.score-card strong{font-size:22px;margin:8px 0 0}.score-card .dots{margin:8px 0 0}.score-card .answered{display:none}.dot{width:16px;height:16px}.summary-card{padding:36px 24px;min-height:620px}.summary-card h1{font-size:24px}.summary-card .metrics{gap:22px}.summary-card .metric strong{font-size:24px}.summary-actions{display:grid;grid-template-columns:1fr}.summary-actions .btn{width:100%;min-width:0}.score-summary,.board{padding:24px}.score-summary .metrics{gap:28px}.score-summary .metric strong{font-size:22px}.form-card{padding:28px 24px}.modal{padding:24px}.preview span{font-size:12px}}
@media(max-width:360px){.task .metrics{gap:18px}.metric strong{font-size:24px}.metrics{gap:18px}.logo{font-size:19px}.header-actions{gap:4px}.rating{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}