:root{--blue-900: #0c2d6b;--blue-800: #0f3d91;--blue-700: #1a56c4;--blue-600: #2563eb;--blue-500: #3b82f6;--blue-400: #60a5fa;--blue-300: #93c5fd;--blue-200: #bfdbfe;--blue-100: #dbeafe;--blue-50: #eff6ff;--gray-900: #111827;--gray-700: #374151;--gray-600: #4b5563;--gray-500: #6b7280;--gray-400: #9ca3af;--gray-300: #d1d5db;--gray-200: #e5e7eb;--gray-100: #f3f4f6;--gray-50: #f9fafb;--green-500: #22c55e;--green-100: #dcfce7;--red-500: #ef4444;--red-100: #fee2e2;--amber-500: #f59e0b;--amber-100: #fef3c7;--radius: clamp(10px, .7vw, 16px);--nav-h: clamp(54px, 3.8vw, 74px);--tab-h: clamp(44px, 3.1vw, 60px);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 30px rgba(0, 0, 0, .12);--transition: .25s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,Microsoft YaHei,PingFang SC,sans-serif;background:var(--gray-100);color:var(--gray-900);overflow:hidden;height:100vh}button{cursor:pointer;border:none;font-family:inherit}button:focus{outline:none}input,textarea,select{font-family:inherit}.top-nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);background:linear-gradient(135deg,var(--blue-800),var(--blue-600));display:flex;align-items:center;padding:0 clamp(24px,1.6vw,34px);box-shadow:0 2px 12px #0f3d914d}.nav-brand{display:flex;align-items:center;gap:clamp(8px,.6vw,14px);margin-right:clamp(26px,1.8vw,38px);flex-shrink:0}.nav-brand svg{width:clamp(27px,1.9vw,37px);height:clamp(27px,1.9vw,37px)}.nav-brand span{font-size:clamp(18px,1.4vw,24px);font-weight:700;color:#fff;letter-spacing:.5px}.nav-selectors{display:flex;gap:clamp(10px,.7vw,16px);flex:1}.nav-right{display:flex;align-items:center;gap:clamp(14px,1vw,20px);margin-left:auto;flex-shrink:0}.nav-avatar{width:clamp(31px,2.2vw,41px);height:clamp(31px,2.2vw,41px);border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:clamp(14px,1.1vw,18px);font-weight:600;border:2px solid rgba(255,255,255,.4)}.nav-teacher-name{color:#ffffffe6;font-size:clamp(13px,.9vw,16px)}.tab-bar{position:fixed;top:var(--nav-h);left:0;right:0;z-index:99;height:var(--tab-h);background:#fff;display:flex;align-items:stretch;border-bottom:1px solid var(--gray-200);padding:0 clamp(24px,1.6vw,34px);box-shadow:var(--shadow-sm)}.tab-item{display:flex;align-items:center;gap:clamp(4px,.3vw,6px);padding:0 clamp(16px,1.2vw,26px);font-size:clamp(13px,1vw,17px);font-weight:500;color:var(--gray-500);background:transparent;border-bottom:3px solid transparent;transition:var(--transition)}.tab-item:hover{color:var(--blue-600);background:var(--blue-50)}.tab-item.active{color:var(--blue-600);border-bottom-color:var(--blue-600);font-weight:600}.tab-item svg{width:clamp(15px,1.1vw,21px);height:clamp(15px,1.1vw,21px)}.main-content{position:fixed;top:calc(var(--nav-h) + var(--tab-h));left:0;right:0;bottom:0;overflow-y:auto;padding:0}.main-content::-webkit-scrollbar{width:8px}.main-content::-webkit-scrollbar-track{background:transparent}.main-content::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:clamp(3px,.2vw,6px)}.toolbar{display:flex;align-items:center;gap:clamp(10px,.7vw,16px);margin-bottom:clamp(16px,1.2vw,26px);flex-wrap:wrap}.toolbar-title{font-size:clamp(18px,1.4vw,24px);font-weight:700;color:var(--gray-900);margin-right:auto}.btn{display:inline-flex;align-items:center;gap:clamp(4px,.3vw,6px);padding:clamp(6px,.5vw,10px) clamp(16px,1.1vw,24px);border-radius:clamp(6px,.5vw,10px);font-size:clamp(13px,.9vw,16px);font-weight:500;transition:var(--transition)}.btn-primary{background:var(--blue-600);color:#fff}.btn-primary:hover{background:var(--blue-700)}.btn-secondary{background:var(--blue-50);color:var(--blue-700);border:1px solid var(--blue-200)}.btn-secondary:hover{background:var(--blue-100)}.btn-success{background:var(--green-500);color:#fff}.btn-success:hover{background:#16a34a}.btn-danger{background:var(--red-500);color:#fff}.btn-ghost{background:transparent;color:var(--gray-500);border:1px solid var(--gray-300)}.btn-ghost:hover{background:var(--gray-100);color:var(--gray-700)}.btn-lg{padding:clamp(10px,.7vw,16px) clamp(24px,1.6vw,34px);font-size:clamp(14px,1.1vw,18px);border-radius:clamp(8px,.6vw,14px)}.btn-add{background:var(--blue-50);color:var(--blue-600);border:2px dashed var(--blue-300);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;gap:clamp(6px,.5vw,10px);font-size:clamp(13px,1vw,17px);font-weight:600;min-height:clamp(102px,7.2vw,138px);transition:var(--transition);cursor:pointer}.btn-add:hover{background:var(--blue-100);border-color:var(--blue-400)}.cards-grid{display:grid;gap:clamp(16px,1.1vw,24px)}.cards-grid.cols-3{grid-template-columns:repeat(3,1fr)}.cards-grid.cols-2{grid-template-columns:repeat(2,1fr)}.word-card{background:#fff;border-radius:var(--radius);padding:clamp(20px,1.4vw,30px);box-shadow:var(--shadow-sm);border:2px solid transparent;transition:var(--transition);position:relative;cursor:pointer}.word-card:hover{box-shadow:var(--shadow-md);border-color:var(--blue-200);transform:translateY(-2px)}.word-card .word-en{font-size:clamp(32px,2.2vw,40px);font-weight:700;color:var(--blue-800);line-height:1.2;margin-bottom:clamp(6px,.5vw,10px)}.word-card .word-phonetic{font-size:clamp(16px,1.2vw,20px);color:var(--gray-500);margin-bottom:clamp(10px,.7vw,16px);font-style:italic}.word-card .word-cn{font-size:clamp(18px,1.4vw,24px);color:var(--gray-700);padding:clamp(6px,.5vw,10px) 0;border-top:1px solid var(--gray-100);transition:var(--transition)}.word-card .word-cn.hidden{color:transparent;background:var(--gray-100);border-radius:clamp(4px,.3vw,8px);text-align:center;user-select:none}.word-card .pos-tag{display:inline-block;padding:clamp(2px,.15vw,3px) clamp(8px,.6vw,14px);background:var(--blue-50);color:var(--blue-600);border-radius:clamp(16px,1.2vw,26px);font-size:clamp(11px,.8vw,14px);font-weight:600;margin-bottom:clamp(6px,.5vw,10px)}.card-actions{position:absolute;top:clamp(10px,.7vw,16px);right:clamp(10px,.7vw,16px);display:flex;gap:clamp(3px,.3vw,6px);opacity:0;transition:var(--transition)}.word-card:hover .card-actions,.phrase-card:hover .card-actions,.sentence-card:hover .card-actions{opacity:1}.card-act-btn{width:clamp(26px,1.8vw,35px);height:clamp(26px,1.8vw,35px);border-radius:clamp(4px,.3vw,8px);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);color:var(--gray-400);transition:var(--transition)}.card-act-btn:hover{color:var(--blue-600);background:var(--blue-50)}.card-act-btn.delete:hover{color:var(--red-500);background:var(--red-100)}.card-act-btn svg{width:clamp(13px,1vw,17px);height:clamp(13px,1vw,17px)}.phrase-card{background:#fff;border-radius:var(--radius);padding:clamp(20px,1.4vw,30px);box-shadow:var(--shadow-sm);border:2px solid transparent;transition:var(--transition);position:relative;cursor:pointer}.phrase-card:hover{box-shadow:var(--shadow-md);border-color:var(--blue-200)}.phrase-card .phrase-en{font-size:clamp(24px,1.8vw,32px);font-weight:700;color:var(--blue-800);margin-bottom:clamp(6px,.5vw,10px)}.phrase-card .phrase-type{display:inline-block;padding:clamp(2px,.15vw,3px) clamp(8px,.6vw,14px);background:var(--amber-100);color:var(--amber-500);border-radius:clamp(16px,1.2vw,26px);font-size:clamp(11px,.8vw,14px);font-weight:600;margin-bottom:clamp(6px,.5vw,10px)}.phrase-card .phrase-cn{font-size:clamp(16px,1.2vw,20px);color:var(--gray-700);padding-top:clamp(8px,.6vw,14px);border-top:1px solid var(--gray-100);transition:var(--transition)}.phrase-card .phrase-cn.hidden{color:transparent;background:var(--gray-100);border-radius:clamp(4px,.3vw,8px);user-select:none}.star-badge{position:absolute;top:clamp(10px,.7vw,16px);left:clamp(10px,.7vw,16px);font-size:clamp(16px,1.2vw,20px);color:var(--amber-500)}.sentence-card{background:#fff;border-radius:var(--radius);padding:clamp(24px,1.6vw,34px);box-shadow:var(--shadow-sm);border:2px solid transparent;transition:var(--transition);position:relative}.sentence-card:hover{box-shadow:var(--shadow-md);border-color:var(--blue-200)}.sentence-en{font-size:clamp(22px,1.6vw,28px);font-weight:600;color:var(--blue-800);line-height:1.5;margin-bottom:clamp(10px,.7vw,16px)}.sentence-cn{font-size:clamp(16px,1.2vw,20px);color:var(--gray-600);line-height:1.5;padding-top:clamp(10px,.7vw,16px);border-top:1px solid var(--gray-100);transition:var(--transition);cursor:pointer}.sentence-cn.hidden{color:transparent;background:var(--gray-100);border-radius:clamp(4px,.3vw,8px);user-select:none}.focus-overlay{position:fixed;inset:0;z-index:200;background:linear-gradient(160deg,#f0f5ff,#fff,#f0f5ff);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.focus-close{position:absolute;top:clamp(16px,1.2vw,26px);right:clamp(24px,1.6vw,34px);width:clamp(37px,2.6vw,51px);height:clamp(37px,2.6vw,51px);border-radius:50%;background:var(--gray-100);color:var(--gray-500);display:flex;align-items:center;justify-content:center;font-size:clamp(22px,1.6vw,28px);transition:var(--transition)}.focus-close:hover{background:var(--gray-200);color:var(--gray-700)}.focus-word{font-size:clamp(72px,5vw,120px);font-weight:800;color:var(--blue-800);text-align:center;margin-bottom:clamp(10px,.7vw,16px);letter-spacing:2px}.focus-phonetic{font-size:clamp(24px,1.8vw,32px);color:var(--gray-500);font-style:italic;margin-bottom:clamp(16px,1.2vw,26px)}.focus-meaning{font-size:clamp(28px,2vw,36px);color:var(--gray-700);margin-bottom:clamp(26px,1.8vw,38px);padding:clamp(10px,.7vw,16px) clamp(32px,2.2vw,48px);background:var(--blue-50);border-radius:clamp(10px,.7vw,16px);transition:var(--transition);cursor:pointer}.focus-meaning.hidden{color:transparent;background:var(--gray-200);user-select:none}.focus-phonics{display:flex;gap:clamp(6px,.5vw,10px);margin-bottom:clamp(20px,1.4vw,30px);flex-wrap:wrap;justify-content:center}.phonics-chunk{padding:clamp(8px,.6vw,14px) clamp(16px,1.2vw,26px);border-radius:clamp(8px,.6vw,14px);font-size:clamp(24px,1.8vw,32px);font-weight:700;text-align:center;line-height:1.3}.phonics-chunk .ipa{font-size:clamp(13px,.9vw,16px);font-weight:400;display:block;margin-top:2px}.phonics-vowel{background:#fef3c7;color:#92400e}.phonics-consonant{background:#dbeafe;color:#1e40af}.focus-example{max-width:clamp(510px,36vw,690px);text-align:center;font-size:clamp(18px,1.4vw,24px);color:var(--gray-500);line-height:1.6;margin-bottom:clamp(20px,1.4vw,30px)}.focus-nav{position:absolute;top:50%;transform:translateY(-50%);width:clamp(48px,3.4vw,64px);height:clamp(48px,3.4vw,64px);border-radius:50%;background:var(--blue-600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:clamp(24px,1.8vw,32px);box-shadow:var(--shadow-md);transition:var(--transition)}.focus-nav:hover{background:var(--blue-700);transform:translateY(-50%) scale(1.05)}.focus-nav.prev{left:clamp(32px,2.2vw,48px)}.focus-nav.next{right:clamp(32px,2.2vw,48px)}.focus-bottom-bar{position:absolute;bottom:clamp(24px,1.6vw,34px);left:50%;transform:translate(-50%);display:flex;gap:clamp(10px,.7vw,16px);align-items:center}.focus-counter{font-size:clamp(14px,1.1vw,18px);color:var(--gray-400);padding:clamp(6px,.5vw,10px) clamp(16px,1.2vw,26px);background:rgba(255,255,255,.8);border-radius:clamp(16px,1.2vw,26px)}@keyframes dictPrepIn{0%{opacity:0;backdrop-filter:blur(0px)}to{opacity:1;backdrop-filter:blur(24px)}}@keyframes dictSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes dictRevealBlur{0%{opacity:0;transform:scale(.92);filter:blur(10px)}to{opacity:1;transform:scale(1);filter:blur(0)}}@keyframes dictCountPop{0%{transform:scale(1.15);opacity:.6}to{transform:scale(1);opacity:1}}.dictation-prep{position:fixed;inset:0;z-index:200;background:rgba(245,247,252,.88);backdrop-filter:blur(24px) saturate(180%);display:flex;flex-direction:column;animation:dictPrepIn .4s ease}.dictation-prep-header{padding:clamp(16px,1.2vw,26px) clamp(26px,1.8vw,38px);display:flex;align-items:center;gap:clamp(14px,1vw,20px);border-bottom:.5px solid rgba(0,0,0,.06);background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,transparent 100%)}.dictation-prep-header h2{font-size:clamp(20px,1.5vw,26px);color:var(--gray-800);flex:1;font-weight:700}.dictation-prep-body{flex:1;overflow-y:auto;padding:clamp(20px,1.4vw,30px) clamp(26px,1.8vw,38px);background:linear-gradient(180deg,rgba(240,245,255,.3) 0%,rgba(248,250,255,.1) 100%)}.dictation-prep-footer{padding:clamp(14px,1vw,20px) clamp(26px,1.8vw,38px);display:flex;align-items:center;justify-content:space-between;border-top:.5px solid rgba(0,0,0,.06);background:linear-gradient(0deg,rgba(255,255,255,.5) 0%,transparent 100%)}.word-check-list{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,.6vw,14px)}.word-check-item{display:flex;align-items:center;gap:clamp(8px,.6vw,14px);padding:clamp(10px,.7vw,16px) clamp(14px,1vw,20px);border-radius:clamp(12px,.8vw,18px);background:linear-gradient(135deg,rgba(255,255,255,.7) 0%,rgba(248,250,255,.5) 100%);backdrop-filter:blur(12px);border:.5px solid rgba(0,0,0,.06);box-shadow:0 1px 3px #00000008,inset 0 .5px #fffc;cursor:pointer;transition:all .25s ease}.word-check-item:hover{background:linear-gradient(135deg,rgba(255,255,255,.85) 0%,rgba(240,245,255,.7) 100%);border-color:#2563eb26;box-shadow:0 2px 8px #2563eb14,inset 0 .5px #ffffffe6}.word-check-item.checked{background:linear-gradient(135deg,rgba(219,234,254,.6) 0%,rgba(191,219,254,.4) 100%);border-color:#2563eb40;box-shadow:0 2px 10px #2563eb1a,inset 0 .5px #ffffffb3}.word-check-item input[type=checkbox]{width:clamp(15px,1.1vw,21px);height:clamp(15px,1.1vw,21px);accent-color:var(--blue-600)}.wci-en{font-weight:600;color:var(--gray-800)}.wci-cn{font-size:clamp(12px,.8vw,14px);color:var(--gray-500)}.dictation-overlay{position:fixed;inset:0;z-index:200;background:radial-gradient(ellipse at 20% 50%,rgba(191,219,254,.4) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(196,181,253,.25) 0%,transparent 50%),linear-gradient(160deg,#e8edf8 0%,#f0f4ff 50%,#eef2ff 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:dictPrepIn .4s ease}.dictation-close{position:absolute;top:clamp(16px,1.2vw,26px);right:clamp(24px,1.6vw,34px);width:clamp(37px,2.6vw,51px);height:clamp(37px,2.6vw,51px);border-radius:50%;background:rgba(255,255,255,.6);backdrop-filter:blur(12px);border:.5px solid rgba(0,0,0,.06);box-shadow:0 2px 8px #0000000f;color:var(--gray-500);display:flex;align-items:center;justify-content:center;font-size:clamp(22px,1.6vw,28px);transition:all .25s ease;cursor:pointer}.dictation-close:hover{background:rgba(255,255,255,.85);color:var(--gray-800);box-shadow:0 4px 16px #00000014}.dictation-progress{position:absolute;top:0;left:0;right:0;height:4px;background:rgba(0,0,0,.04);border-radius:0 0 4px 4px;overflow:hidden}.dictation-progress-bar{height:100%;border-radius:0 4px 4px 0;background:linear-gradient(90deg,var(--blue-400),var(--blue-500));transition:width .5s cubic-bezier(.4,0,.2,1)}.dictation-counter-label{position:absolute;top:clamp(20px,1.4vw,28px);left:50%;transform:translate(-50%);font-size:clamp(13px,.9vw,16px);font-weight:600;color:var(--gray-500);padding:clamp(4px,.3vw,8px) clamp(16px,1.2vw,26px);border-radius:clamp(16px,1.2vw,26px);background:rgba(255,255,255,.55);backdrop-filter:blur(12px);border:.5px solid rgba(255,255,255,.7);box-shadow:0 2px 8px #0000000a}.dictation-countdown{font-size:clamp(120px,8vw,200px);font-weight:800;line-height:1;margin-bottom:clamp(20px,1.4vw,30px);color:var(--blue-200);opacity:.5;animation:dictCountPop .4s cubic-bezier(.175,.885,.32,1.1)}.dictation-word-area{text-align:center;min-height:clamp(170px,12vw,230px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(32px,2.2vw,48px) clamp(48px,3.6vw,72px);border-radius:clamp(24px,1.6vw,34px);background:linear-gradient(165deg,rgba(255,255,255,.82) 0%,rgba(248,250,255,.68) 100%);backdrop-filter:blur(32px) saturate(200%);border:1px solid rgba(255,255,255,.7);box-shadow:0 .5px 1px #00000008,0 4px 16px #0000000a,0 16px 48px #0000000a,inset 0 1px #fffffff2,inset 0 -.5px #00000005;animation:dictSlideUp .5s cubic-bezier(.175,.885,.32,1.1)}.dictation-reveal-word{font-size:clamp(60px,4.8vw,92px);font-weight:800;color:var(--blue-800);margin-bottom:clamp(10px,.7vw,16px);letter-spacing:2px;text-shadow:0 2px 4px rgba(0,0,0,.04);animation:dictRevealBlur .5s cubic-bezier(.2,.8,.2,1)}.dictation-reveal-cn{font-size:clamp(24px,1.8vw,32px);color:var(--gray-600);margin-bottom:clamp(6px,.5vw,10px);font-weight:600}.dictation-reveal-phonetic{font-size:clamp(20px,1.5vw,26px);color:var(--gray-400);font-style:italic}.dictation-controls{position:absolute;bottom:clamp(64px,4.8vw,96px);display:flex;gap:clamp(10px,.7vw,16px);align-items:center}.dict-btn{padding:clamp(10px,.7vw,16px) clamp(24px,1.6vw,34px);border-radius:clamp(12px,.8vw,18px);font-size:clamp(14px,1.1vw,18px);font-weight:600;transition:all .25s cubic-bezier(.175,.885,.32,1.1);backdrop-filter:blur(12px);cursor:pointer}.dict-btn-reveal{background:linear-gradient(135deg,var(--blue-500),var(--blue-600));color:#fff;box-shadow:0 4px 16px #2563eb40,inset 0 1px #fff3;border:.5px solid rgba(37,99,235,.3)}.dict-btn-reveal:hover{transform:translateY(-2px);box-shadow:0 6px 24px #2563eb59}.dict-btn-pause{background:rgba(255,255,255,.55);color:var(--gray-600);border:.5px solid rgba(0,0,0,.06);box-shadow:0 2px 8px #0000000a}.dict-btn-pause:hover{background:rgba(255,255,255,.8);transform:translateY(-1px)}.dict-btn-skip{background:transparent;color:var(--gray-400);border:none;text-decoration:underline;text-underline-offset:3px}.dict-btn-skip:hover{color:var(--gray-600)}.dict-pagination{position:absolute;bottom:clamp(16px,1.2vw,26px);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:clamp(8px,.6vw,14px);z-index:10;padding:clamp(6px,.5vw,10px) clamp(12px,.8vw,18px);border-radius:clamp(16px,1.2vw,26px);background:rgba(255,255,255,.45);backdrop-filter:blur(16px);border:.5px solid rgba(255,255,255,.6);box-shadow:0 2px 12px #0000000a}.dict-page-arrow{width:clamp(31px,2.2vw,41px);height:clamp(31px,2.2vw,41px);border-radius:50%;background:rgba(255,255,255,.5);color:var(--gray-500);border:.5px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.dict-page-arrow:hover:not(:disabled){background:rgba(255,255,255,.8);color:var(--blue-600);box-shadow:0 2px 8px #0000000f}.dict-page-arrow:disabled{opacity:.25;cursor:not-allowed}.dict-page-dots{display:flex;gap:clamp(4px,.3vw,8px);align-items:center;flex-wrap:wrap;justify-content:center;max-width:clamp(425px,30vw,575px)}.dict-dot{width:clamp(9px,.6vw,12px);height:clamp(9px,.6vw,12px);border-radius:50%;background:rgba(0,0,0,.08);cursor:pointer;transition:all .25s ease;flex-shrink:0}.dict-dot:hover{background:rgba(37,99,235,.2)}.dict-dot.active{background:var(--blue-500);transform:scale(1.3);box-shadow:0 0 8px #2563eb4d}.dictation-summary{position:fixed;inset:0;z-index:200;background:radial-gradient(ellipse at 30% 20%,rgba(191,219,254,.2) 0%,transparent 50%),linear-gradient(160deg,rgba(245,247,252,.95),rgba(255,255,255,.98));backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;animation:dictPrepIn .4s ease;overflow-y:auto;padding:clamp(36px,2.6vw,56px) clamp(24px,1.6vw,34px)}.summary-header{text-align:center;padding:clamp(36px,2.6vw,56px) 0 clamp(26px,1.8vw,38px)}.summary-header h1{font-size:clamp(32px,2.2vw,40px);color:var(--gray-800);margin-bottom:clamp(6px,.5vw,10px);font-weight:800}.summary-header p{font-size:clamp(16px,1.2vw,20px);color:var(--gray-400)}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,.8vw,18px);max-width:clamp(850px,60vw,1150px);width:100%;padding:0 clamp(24px,1.6vw,34px) clamp(32px,2.2vw,48px)}.summary-item{background:linear-gradient(165deg,rgba(255,255,255,.82) 0%,rgba(248,250,255,.65) 100%);backdrop-filter:blur(16px);border-radius:clamp(16px,1.1vw,24px);padding:clamp(16px,1.2vw,26px);border:.5px solid rgba(255,255,255,.7);box-shadow:0 2px 8px #00000008,0 8px 24px #00000005,inset 0 .5px #ffffffe6;text-align:center;transition:all .25s ease}.summary-item:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000000d,0 12px 32px #00000008,inset 0 .5px #fffffff2}.summary-item .si-en{font-size:clamp(22px,1.6vw,28px);font-weight:700;color:var(--blue-800)}.summary-item .si-cn{font-size:clamp(13px,.9vw,16px);color:var(--gray-400);margin-top:4px}.fill-sentence{background:#fff;border-radius:var(--radius);padding:clamp(26px,1.8vw,38px);box-shadow:var(--shadow-sm);margin-bottom:clamp(14px,1vw,20px)}.fill-sentence .fs-text{font-size:clamp(23px,1.6vw,29px);line-height:1.8;color:var(--gray-900)}.blank{display:inline-block;min-width:clamp(102px,7.2vw,138px);border-bottom:3px dashed var(--blue-300);padding:clamp(2px,.15vw,3px) clamp(6px,.5vw,10px);margin:0 4px;font-weight:700;color:var(--blue-600);text-align:center;cursor:pointer;transition:var(--transition)}.blank.revealed{border-bottom-color:var(--green-500);background:var(--green-100);border-radius:4px}.blank.unrevealed{color:transparent;background:var(--gray-100);border-radius:4px}.wordform-section{background:#fff;border-radius:var(--radius);padding:clamp(24px,1.6vw,34px);box-shadow:var(--shadow-sm);margin-bottom:clamp(14px,1vw,20px)}.wordform-section h3{font-size:clamp(18px,1.4vw,24px);color:var(--blue-800);margin-bottom:clamp(14px,1vw,20px);padding-bottom:clamp(10px,.7vw,16px);border-bottom:1px solid var(--gray-100)}.wordform-row{display:flex;gap:clamp(10px,.7vw,16px);flex-wrap:wrap;margin-bottom:clamp(10px,.7vw,16px)}.wordform-chip{padding:clamp(8px,.6vw,14px) clamp(16px,1.2vw,26px);border-radius:clamp(8px,.6vw,14px);font-size:clamp(16px,1.2vw,20px);font-weight:600;border:2px solid var(--gray-200);cursor:pointer;transition:var(--transition)}.wordform-chip .wf-label{font-size:clamp(11px,.8vw,14px);color:var(--gray-500);display:block;margin-bottom:2px}.wordform-chip .wf-value{color:var(--blue-800)}.wordform-chip.hidden-answer .wf-value{color:transparent;background:var(--gray-100);border-radius:4px;user-select:none}.wordform-chip.revealed{border-color:var(--green-500);background:var(--green-100)}.tree-root{display:inline-block;padding:clamp(14px,1vw,20px) clamp(26px,1.8vw,38px);background:linear-gradient(135deg,var(--blue-600),var(--blue-800));color:#fff;border-radius:clamp(14px,1vw,20px);font-size:clamp(24px,1.8vw,32px);font-weight:700;margin-bottom:clamp(26px,1.8vw,38px);box-shadow:var(--shadow-md)}.tree-branches{display:flex;gap:clamp(14px,1vw,20px);justify-content:center;flex-wrap:wrap}.tree-branch{padding:clamp(12px,.8vw,18px) clamp(20px,1.4vw,30px);border-radius:clamp(10px,.7vw,16px);text-align:center;min-width:clamp(119px,8.4vw,161px)}.tree-branch .tb-pos{font-size:clamp(11px,.8vw,14px);font-weight:700;margin-bottom:4px;text-transform:uppercase}.tree-branch .tb-word{font-size:clamp(18px,1.4vw,24px);font-weight:600}.tree-branch.verb{background:#dbeafe;color:#1e40af}.tree-branch.noun{background:#dcfce7;color:#166534}.tree-branch.adj{background:#fef3c7;color:#92400e}.tree-branch.adv{background:#f3e8ff;color:#7e22ce}.tree-connector{width:2px;height:clamp(20px,1.4vw,28px);background:var(--gray-300);margin:0 auto}.article-view{background:#fff;border-radius:var(--radius);padding:clamp(32px,2.2vw,48px);box-shadow:var(--shadow-sm);max-width:clamp(765px,54vw,1035px);margin:0 auto}.article-view h2{font-size:clamp(28px,2vw,36px);color:var(--blue-800);margin-bottom:clamp(20px,1.4vw,30px);text-align:center}.article-view .article-body{font-size:clamp(20px,1.5vw,26px);line-height:2;color:var(--gray-800)}.modal-mask{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease;backdrop-filter:blur(2px)}.modal-box{background:#fff;border-radius:clamp(14px,1vw,20px);width:clamp(476px,33.6vw,644px);max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:slideUp .25s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{padding:clamp(16px,1.2vw,26px) clamp(20px,1.4vw,30px);border-bottom:1px solid var(--gray-200);display:flex;align-items:center;flex-shrink:0}.modal-header h3{flex:1;font-size:clamp(16px,1.2vw,20px);color:var(--gray-900)}.modal-body{padding:clamp(20px,1.4vw,30px);overflow-y:auto;flex:1;min-height:0}.modal-body::-webkit-scrollbar{width:5px}.modal-body::-webkit-scrollbar-track{background:transparent;margin:4px 0}.modal-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:10px;transition:background .2s}.modal-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25)}.modal-body{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.12) transparent}.modal-footer{padding:clamp(14px,1vw,20px) clamp(20px,1.4vw,30px);border-top:1px solid var(--gray-200);display:flex;justify-content:flex-end;gap:clamp(8px,.6vw,14px);flex-shrink:0}.form-group{margin-bottom:clamp(16px,1.1vw,24px)}.form-group label{display:block;font-size:clamp(13px,.9vw,16px);font-weight:600;color:var(--gray-700);margin-bottom:clamp(4px,.3vw,8px)}.form-group input,.form-group textarea,.form-group select{width:100%;padding:clamp(8px,.6vw,14px) clamp(12px,.8vw,18px);border:1px solid var(--gray-300);border-radius:clamp(6px,.5vw,10px);font-size:clamp(13px,1vw,17px);color:var(--gray-900);transition:var(--transition)}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 3px #3b82f626}.form-group textarea{resize:vertical;min-height:clamp(64px,4.8vw,96px)}.form-row{display:flex;gap:clamp(10px,.7vw,16px)}.form-row .form-group{flex:1}.skeleton-grid{display:grid;gap:clamp(8px,1vw,16px);flex:1;min-height:0;overflow:hidden;padding-bottom:clamp(8px,.6vw,14px)}.skeleton-card{border-radius:clamp(16px,1.6vw,24px);background:linear-gradient(135deg,rgba(209,213,219,.65) 0%,rgba(229,231,235,.8) 50%,rgba(209,213,219,.65) 100%);background-size:200% 100%;animation:skeletonShimmer 1.5s ease-in-out infinite;min-height:clamp(80px,8vw,140px)}@keyframes skeletonShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-line{height:clamp(14px,1vw,20px);border-radius:clamp(6px,.5vw,10px);background:linear-gradient(90deg,rgba(209,213,219,.65) 25%,rgba(229,231,235,.8) 50%,rgba(209,213,219,.65) 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s ease-in-out infinite;margin-bottom:clamp(8px,.6vw,12px)}.skeleton-line.w60{width:60%}.skeleton-line.w80{width:80%}.skeleton-line.w40{width:40%}.skeleton-article{max-width:clamp(680px,48vw,920px);width:100%;margin:clamp(24px,2vw,40px) auto 0;padding:clamp(16px,2vw,28px) clamp(20px,2.5vw,36px);border-radius:clamp(16px,1.6vw,24px);background:rgba(243,244,246,.85)}@media (min-width: 1920px){.word-card .word-en{font-size:42px}.focus-word{font-size:120px}.cards-grid.cols-3{grid-template-columns:repeat(4,1fr)}}
