:root{--bg: #EEF2F7;--surface: #FFFFFF;--surface-soft: #F8FAFC;--text: #0F172A;--text-muted: #475569;--text-soft: #64748B;--border: #E2E8F0;--primary: #2563EB;--primary-dark: #1D4ED8;--primary-soft: #E0E7FF;--success: #16A34A;--success-soft: #ECFDF3;--danger: #DC2626;--danger-soft: #FEF2F2;--play-bg: #F1F5F9;--play-hover: #E2E8F0;--header-height: 96px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}.app{max-width:480px;margin:0 auto;padding-bottom:env(safe-area-inset-bottom,20px)}.app__header{position:fixed;top:0;left:0;right:0;z-index:1000;background:#f8fafce0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);box-shadow:0 1px 3px #00000008;padding-top:max(0px,env(safe-area-inset-top,0px))}.app__header-inner{max-width:480px;margin:0 auto;padding:12px 16px 8px}.app__list{padding:12px 16px;padding-top:calc(var(--header-height) + 12px);display:flex;flex-direction:column;gap:12px}.app__loading{text-align:center;padding:60px 16px;color:var(--text-soft);font-size:.9375rem}.progress-header{display:flex;flex-direction:column;gap:6px}.progress-header__top{display:flex;align-items:center;justify-content:space-between}.progress-header__count{font-size:.875rem;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}.progress-header__actions{display:flex;gap:8px}.progress-header__bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden}.progress-header__fill{height:100%;background:linear-gradient(90deg,#2563eb,#06b6d4);border-radius:2px;transition:width .3s ease}.pack-selector{margin-top:6px}.pack-selector__select{width:100%;padding:6px 30px 6px 10px;border:1px solid var(--border);border-radius:8px;font-size:.8125rem;font-weight:500;color:var(--text);background:var(--surface);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.pack-selector__select:focus{border-color:var(--primary)}.progress-sync{display:flex;gap:8px;margin-top:4px}.btn--sync{background:var(--surface-soft);color:var(--text-muted);border:1px solid var(--border);border-radius:8px;padding:4px 12px;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.btn--sync:hover{background:var(--primary-soft);color:var(--primary);border-color:var(--primary)}.btn--sync:active{opacity:.8}.progress-sync-msg{font-size:.75rem;margin-top:4px;padding:4px 8px;border-radius:6px;line-height:1.4}.progress-sync-msg--ok{background:var(--success-soft);color:var(--success)}.progress-sync-msg--err{background:var(--danger-soft);color:var(--danger)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;border:none;border-radius:12px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.btn:active{opacity:.8}.btn:disabled{opacity:.4;cursor:default}.btn--sm{padding:6px 14px;font-size:.8125rem}.btn--primary{background:var(--primary);color:#fff}.btn--primary:hover{background:var(--primary-dark)}.btn--cert{background:var(--success);color:#fff}.btn--copy{background:var(--primary);color:#fff;padding:10px 14px;font-size:.9375rem;flex-shrink:0}.btn--copy:hover{background:var(--primary-dark)}.btn--copy-done{background:var(--success)}.theme-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:8px 0 2px;-webkit-overflow-scrolling:touch}.theme-tabs::-webkit-scrollbar{display:none}.theme-tab{flex-shrink:0;padding:5px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:.8125rem;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.theme-tab--active{background:var(--primary);color:#fff;border-color:var(--primary)}.word-card{background:var(--surface);border-radius:20px;padding:18px;border:1px solid var(--border);box-shadow:0 1px 2px #00000008;scroll-margin-top:calc(var(--header-height) + 12px);border-left:4px solid transparent;transition:border-color .3s}.word-card--completed{border-left-color:var(--success)}.word-card__header{margin-bottom:8px}.word-card__word-row{display:flex;align-items:center;gap:6px}.word-card__word{font-size:1.375rem;font-weight:700;color:var(--text);line-height:1.3}.word-card__translation{font-size:.9375rem;color:var(--text-muted);margin-left:auto;font-weight:500;white-space:nowrap}.word-card__full-form{font-size:.8125rem;color:var(--text-soft);margin-top:4px;padding-left:34px;line-height:1.4}.word-card__meaning{font-size:.875rem;color:var(--text-muted);margin-top:4px;padding-left:34px;line-height:1.4}.word-card__badge{display:inline-block;font-size:.75rem;color:var(--success);border:1px solid var(--success);border-radius:4px;padding:1px 6px;font-weight:500}.word-card__play-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:none;background:var(--play-bg);color:var(--primary);cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent;transition:background .15s}.word-card__play-btn:hover{background:var(--play-hover)}.word-card__play-btn:active{background:#cbd5e1}.word-card__play-btn--small{width:22px;height:22px}.word-card__example{margin-bottom:12px}.word-card__example-row{display:flex;align-items:flex-start;gap:6px;margin-bottom:2px}.word-card__example-en{font-size:.9375rem;color:var(--text);line-height:1.45}.word-card__example-zh{font-size:.875rem;color:var(--text);line-height:1.45;padding-left:28px}.word-card__copy-area{display:flex;align-items:center;gap:8px}.word-card__input{flex:1;min-width:0;height:42px;padding:0 12px;border:2px solid var(--border);border-radius:10px;font-size:1rem;color:var(--text);background:var(--surface);outline:none;transition:border-color .15s;-webkit-appearance:none}.word-card__input:focus{border-color:var(--primary)}.word-card__input--error{border-color:var(--danger)}.word-card__input--error:focus{border-color:var(--danger)}.word-card__input[readonly]{background:var(--surface-soft);color:var(--text-muted)}.word-card__input--shake{animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.word-card__error{margin-top:6px;font-size:.8125rem;color:var(--danger)}.celebration-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#0f172a66;animation:fadeIn .2s ease}.celebration-modal{background:var(--surface);border-radius:20px;padding:32px 28px;text-align:center;max-width:300px;width:90%;box-shadow:0 20px 60px #0000001a;animation:scaleIn .3s ease}.celebration-modal__emoji{font-size:3rem;margin-bottom:12px}.celebration-modal__title{font-size:1.375rem;font-weight:700;margin-bottom:8px;color:var(--text)}.celebration-modal__text{font-size:1rem;color:var(--text-muted);margin-bottom:20px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.name-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#0f172a66;animation:fadeIn .2s ease}.name-modal{background:var(--surface);border-radius:20px;padding:28px 24px;text-align:center;max-width:300px;width:90%;box-shadow:0 20px 60px #0000001a;animation:scaleIn .3s ease}.name-modal h3{font-size:1.125rem;font-weight:600;margin-bottom:16px;color:var(--text)}.name-modal__input{width:100%;height:44px;padding:0 14px;border:2px solid var(--border);border-radius:10px;font-size:1rem;margin-bottom:16px;outline:none;text-align:center;-webkit-appearance:none;color:var(--text);background:var(--surface)}.name-modal__input:focus{border-color:var(--primary)}.certificate{width:600px;padding:40px;background:var(--surface)}.certificate__inner{border:3px solid #c7a951;padding:40px;position:relative}.certificate__border{border:1px solid #c7a951;padding:48px 40px;text-align:center;position:relative}.certificate__title{font-size:1.75rem;font-weight:700;color:var(--text);letter-spacing:.05em;margin-bottom:4px}.certificate__subtitle{font-size:1rem;color:var(--text-muted);margin-bottom:24px}.certificate__body{margin-bottom:28px}.certificate__to{font-size:.875rem;color:var(--text-soft);margin-bottom:8px}.certificate__name{font-size:1.5rem;font-weight:600;color:var(--text);margin-bottom:8px}.certificate__desc{font-size:.875rem;color:var(--text-muted)}.certificate__footer{margin-top:24px}.certificate__date{font-size:.875rem;color:var(--text-soft)}.certificate__seal{position:absolute;bottom:40px;right:40px;font-size:2rem;font-weight:700;color:#c7a951;opacity:.3}