.btn{padding:var(--spacing-md) var(--spacing-lg);border-radius:14px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:120px;border:1px solid rgba(0,0,0,.06);box-shadow:0 8px 24px #00000029,inset 0 1px #ffffffb3}.btn-primary{background:linear-gradient(180deg,#6d8eff,#3d6be0);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 28px #3d6be059,inset 0 1px #ffffffb3}.btn-secondary{background:linear-gradient(180deg,#f8f8f8,#e9edf5);color:var(--text-color)}.btn-secondary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 24px #0000001f,inset 0 1px #fffc}.btn:disabled{opacity:.5;cursor:not-allowed}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-gradient);background-attachment:fixed;padding:var(--spacing-lg)}.login-container{width:100%;max-width:400px;background:var(--card-bg);padding:var(--spacing-xl);border-radius:var(--border-radius);box-shadow:0 4px 12px var(--card-shadow)}.login-container h1{text-align:center;margin-bottom:var(--spacing-xl);font-size:28px;font-weight:600}.login-form{display:flex;flex-direction:column;gap:var(--spacing-md)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.form-group label{font-size:14px;font-weight:500;color:var(--text-color)}.form-group input{padding:var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:16px;transition:border-color .2s}.form-group input:focus{border-color:var(--primary-color)}.error-message{color:#ff3b30;font-size:14px;text-align:center;padding:var(--spacing-sm)}.full-width{width:100%;margin-top:var(--spacing-md)}.code-input-group{display:flex;gap:var(--spacing-sm);align-items:flex-start}.code-input{flex:1}.send-code-btn{white-space:nowrap;min-width:120px;padding:var(--spacing-md) var(--spacing-sm)}.success-message{color:#34c759;font-size:14px;text-align:center;padding:var(--spacing-sm);background:#f0f9f4;border-radius:var(--border-radius)}.login-tip{text-align:center;margin-top:var(--spacing-md);font-size:12px;color:var(--text-secondary)}.home-page{min-height:100vh;padding:var(--spacing-lg);max-width:600px;margin:0 auto;background:var(--bg-gradient);background-attachment:fixed}.home-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl)}.home-header h1{font-size:24px;font-weight:600}.logout-btn{padding:var(--spacing-sm) var(--spacing-md);background:var(--btn-secondary-bg);border-radius:var(--border-radius);font-size:14px;color:var(--text-color);cursor:pointer;transition:background .2s ease}.logout-btn:hover{background:var(--btn-secondary-hover)}.home-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xl);margin-top:var(--spacing-xl)}.welcome-section{text-align:center}.welcome-section h2{font-size:28px;margin-bottom:var(--spacing-md)}.welcome-section p{color:var(--text-secondary);font-size:16px}.home-actions{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%;max-width:300px}.start-button,.vocab-book-button{padding:var(--spacing-lg) var(--spacing-xl);font-size:18px;min-width:200px}.vocab-book-button{background:var(--secondary-color, #6c757d)}.vocab-book-button:hover{background:var(--secondary-color-hover, #5a6268)}.language-select-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);background:var(--bg-gradient);background-attachment:fixed;flex-direction:column;gap:var(--spacing-md)}.language-select-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);position:relative}.language-select-header h1{margin:0;flex:1;text-align:center}.logout-button{padding:8px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.08);background:linear-gradient(180deg,#f8f8f8,#e9edf5);color:var(--text-color);font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #00000014,inset 0 1px #fffc;transition:all .2s ease;position:absolute;right:0;top:50%;transform:translateY(-50%)}.logout-button:hover{transform:translateY(-50%) translateY(-1px);box-shadow:0 6px 16px #0000001f,inset 0 1px #ffffffd9}.language-select-container{width:100%;max-width:500px;background:var(--card-bg);padding:var(--spacing-xl);border-radius:var(--border-radius);box-shadow:0 4px 12px var(--card-shadow)}.select-group{margin-bottom:var(--spacing-lg)}.select-group label{display:block;margin-bottom:var(--spacing-sm);font-size:14px;font-weight:500;color:var(--text-color)}.mode-circle-group{display:flex;gap:var(--spacing-md);flex-wrap:wrap}.mode-circle{width:96px;height:96px;border-radius:50%;border:2px solid var(--border-color);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-xs);cursor:pointer;transition:all .2s ease;font-size:16px}.mode-circle-sub{font-size:12px;color:var(--text-secondary);letter-spacing:.5px}.mode-circle:hover{border-color:var(--primary-color);box-shadow:0 4px 12px #3563e926}.mode-circle.active{background:linear-gradient(135deg,var(--primary-color),var(--primary-color-hover));color:#fff;border-color:transparent}.mode-circle.active .mode-circle-sub{color:#fffc}@media(max-width:600px){.mode-circle{width:80px;height:80px;font-size:14px}}.select-input{width:100%;padding:var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:16px;background:#fff;cursor:pointer}.select-input:focus{outline:none;border-color:var(--primary-color)}.action-buttons{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.start-button,.next-button{flex:1}.back-button,.refresh-button{flex:1;background:var(--border-color);color:var(--text-color)}.slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.slider-header label{margin-bottom:0}.slider-value{font-size:14px;color:var(--text-secondary)}.slider-input{width:100%;-webkit-appearance:none;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--slider-bg-start),var(--slider-bg-end));outline:none;margin:var(--spacing-sm) 0}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--slider-thumb);box-shadow:0 4px 10px #0003;cursor:pointer;transition:transform .2s ease}.slider-input::-webkit-slider-thumb:active{transform:scale(1.1)}.slider-input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--slider-thumb);border:none;box-shadow:0 4px 10px #0003;cursor:pointer}.slider-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary)}.theme-switch-container{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);margin-top:var(--spacing-sm);padding:var(--spacing-sm)}.theme-label{font-size:14px;color:var(--text-secondary);transition:color .3s ease,font-weight .3s ease;-webkit-user-select:none;user-select:none}.theme-label.active{color:var(--primary-color);font-weight:600}.theme-switch{position:relative;display:inline-block;width:52px;height:28px;flex-shrink:0}.theme-switch input{opacity:0;width:0;height:0}.theme-slider{position:absolute;cursor:pointer;inset:0;background-color:var(--btn-secondary-bg);transition:background-color .3s ease,box-shadow .3s ease;border-radius:28px;box-shadow:inset 0 2px 4px #0000001a}.theme-slider:before{position:absolute;content:"";height:22px;width:22px;left:3px;bottom:3px;background-color:#fff;transition:transform .3s ease,box-shadow .3s ease;border-radius:50%;box-shadow:0 2px 4px #0003}.theme-switch input:checked+.theme-slider{background-color:var(--primary-color)}.theme-switch input:checked+.theme-slider:before{transform:translate(24px)}.theme-switch:hover .theme-slider{box-shadow:inset 0 2px 4px #0000001a,0 0 8px #0000001a}.theme-switch input:checked+.theme-slider:hover{box-shadow:inset 0 2px 4px #0000001a,0 0 12px var(--primary-color)}.theme-switch input:focus+.theme-slider{outline:2px solid var(--primary-color);outline-offset:2px}.select-group-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.select-group-row .select-group{margin-bottom:0}@media(max-width:600px){.select-group-row{grid-template-columns:1fr;gap:var(--spacing-lg)}}.word-card-container{width:100%;max-width:500px;margin:0 auto;position:relative}.word-card{position:relative;width:100%;min-height:300px}.word-card-front,.word-card-back{position:absolute;width:100%;min-height:300px;border-radius:var(--border-radius);padding:var(--spacing-xl);display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--card-bg);box-shadow:0 4px 12px var(--card-shadow);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:opacity .5s cubic-bezier(.4,0,.2,1),visibility .5s cubic-bezier(.4,0,.2,1);opacity:1;visibility:visible;will-change:opacity;transform:translateZ(0)}.word-card-back,.word-card.flipped .word-card-front{opacity:0;visibility:hidden;pointer-events:none}.word-card.flipped .word-card-back{opacity:1;visibility:visible;pointer-events:auto}.word-text{font-size:32px;font-weight:600;color:var(--text-color);margin-bottom:var(--spacing-md);text-align:center}.part-of-speech{font-size:14px;color:var(--text-secondary);margin-bottom:var(--spacing-lg)}.pronunciation{font-size:18px;color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.pronunciation-secondary{font-size:16px;margin-top:-var(--spacing-sm);margin-bottom:var(--spacing-md)}.example{margin-top:var(--spacing-lg);width:100%;text-align:center}.example-foreign{font-size:16px;color:var(--text-color);margin-bottom:var(--spacing-sm);font-style:italic;line-height:1.6}.example-chinese{font-size:15px;color:var(--text-secondary);line-height:1.6}.hint{position:absolute;bottom:var(--spacing-md);font-size:12px;color:var(--text-secondary)}.hint-text{margin-top:var(--spacing-lg);font-size:14px;color:var(--text-secondary);font-style:italic;text-align:center}.answer-buttons{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-lg);justify-content:center}.btn-answer{padding:var(--spacing-sm) var(--spacing-lg);border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid rgba(0,0,0,.06);transition:all .2s ease;min-width:92px;box-shadow:0 6px 18px #0000001f,inset 0 1px #fff9}.btn-wrong{background:linear-gradient(180deg,#ff6b6b,#ff3b30);color:#fff}.btn-wrong:hover{transform:translateY(-1px);box-shadow:0 8px 20px #ff3b3040,inset 0 1px #fff9}.btn-correct{background:linear-gradient(180deg,#5ed37f,#34c759);color:#fff}.btn-correct:hover{transform:translateY(-1px);box-shadow:0 8px 20px #34c75940,inset 0 1px #fff9}.timer-display{position:absolute;top:var(--spacing-md);right:var(--spacing-md);z-index:10}.timer-circle{width:50px;height:50px;border-radius:50%;background-color:var(--success-color);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;box-shadow:0 2px 8px #0003;transition:all .3s ease}.timer-warning{background-color:var(--error-color);animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.audio-play-button{margin-top:var(--spacing-md);margin-bottom:var(--spacing-sm);width:48px;height:48px;border-radius:50%;border:2px solid var(--primary-color, #007AFF);background:#fff;color:var(--primary-color, #007AFF);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 2px 8px #0000001a;padding:0}.audio-play-button:hover{background:var(--primary-color, #007AFF);color:#fff;transform:scale(1.1);box-shadow:0 4px 12px #007aff4d}.audio-play-button:active{transform:scale(.95)}.audio-play-button svg{width:24px;height:24px}.study-info{display:flex;flex-direction:column;gap:var(--spacing-xs);margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:#007aff0d;border-radius:var(--border-radius);font-size:13px;color:var(--text-secondary);text-align:center}.study-info-item{display:inline-block;margin:0 var(--spacing-xs);padding:2px 8px;background:#007aff1a;border-radius:12px;font-weight:500;color:var(--primary-color, #007AFF)}.progress-bar-container{width:100%;max-width:500px;margin:0 auto}.progress-bar{width:100%;height:8px;background-color:var(--btn-secondary-bg);border-radius:4px;overflow:hidden;margin-bottom:var(--spacing-xs)}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary-color),var(--primary-color-hover));transition:width .3s ease}.progress-text{text-align:center;font-size:14px;color:var(--text-secondary)}.study-page{min-height:100vh;padding:var(--spacing-lg);max-width:600px;margin:0 auto;display:flex;flex-direction:column;background:var(--bg-gradient);background-attachment:fixed}.study-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.back-btn{padding:var(--spacing-sm) var(--spacing-md);background:var(--btn-secondary-bg);border-radius:var(--border-radius);font-size:14px;cursor:pointer;transition:background .2s ease}.back-btn:hover{background:var(--btn-secondary-hover)}.language-mode{font-size:14px;color:var(--text-secondary);text-transform:uppercase}.word-card-wrapper{flex:1;display:flex;align-items:center;justify-content:center;margin-top:var(--spacing-xl)}.finish-container{text-align:center;padding:var(--spacing-xl)}.finish-container h2{font-size:28px;margin-bottom:var(--spacing-xl)}.score-display{text-align:center;margin-bottom:var(--spacing-xl);padding:var(--spacing-lg);background:var(--card-bg);border-radius:var(--border-radius);box-shadow:0 2px 8px var(--card-shadow)}.score-fraction{font-size:48px;font-weight:700;line-height:1.2;margin-bottom:var(--spacing-sm)}.score-numerator{color:var(--success-color)}.score-divider{color:var(--text-secondary);margin:0 var(--spacing-xs)}.score-denominator{color:var(--text-primary)}.score-label{font-size:14px;color:var(--text-secondary)}.stats{display:flex;justify-content:center;gap:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.stat-item{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:32px;font-weight:600;margin-bottom:var(--spacing-xs)}.stat-value.correct{color:var(--success-color)}.stat-value.wrong{color:var(--error-color)}.stat-value.vague{color:var(--warning-color)}.stat-label{font-size:14px;color:var(--text-secondary)}.finish-actions{display:flex;gap:var(--spacing-md);justify-content:center}.finish-actions button{flex:1}.vocab-book-page{min-height:100vh;padding:var(--spacing-lg);max-width:800px;margin:0 auto;display:flex;flex-direction:column;background:var(--bg-gradient);background-attachment:fixed}.vocab-book-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.vocab-book-header h1{font-size:24px;font-weight:600;margin:0}.back-btn,.refresh-btn{padding:var(--spacing-sm) var(--spacing-md);background:var(--btn-secondary-bg);border:none;border-radius:var(--border-radius);font-size:14px;cursor:pointer;transition:background .2s}.back-btn:hover,.refresh-btn:hover{background:var(--btn-secondary-hover)}.loading,.error{text-align:center;padding:var(--spacing-xl);font-size:18px}.error{color:#ff3b30;margin-bottom:var(--spacing-lg)}.vocab-book-content{flex:1}.vocab-book-stats{margin-bottom:var(--spacing-md);font-size:14px;color:var(--text-secondary)}.vocab-book-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.vocab-word-item{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-md);transition:all .2s;box-shadow:0 2px 4px var(--card-shadow)}.vocab-word-item:hover{box-shadow:0 4px 12px var(--card-shadow)}.vocab-word-item.overdue{border-color:#ff3b30;background:#fff5f5}.vocab-word-main{margin-bottom:var(--spacing-sm)}.vocab-word-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs)}.vocab-word-text{font-size:20px;font-weight:600;margin:0;color:var(--text-primary)}.overdue-badge{background:#ff3b30;color:#fff;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500}.vocab-word-phonetic{font-size:14px;color:var(--text-secondary);margin-bottom:var(--spacing-xs);font-style:italic}.vocab-word-translation{font-size:16px;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.vocab-word-pos{font-size:12px;color:var(--text-secondary);display:inline-block;padding:2px 6px;background:#f0f0f0;border-radius:4px}.vocab-word-meta{display:flex;justify-content:space-between;align-items:center;padding-top:var(--spacing-sm);border-top:1px solid #f0f0f0}.vocab-word-info{display:flex;flex-direction:column;gap:var(--spacing-xs)}.vocab-word-stat{font-size:14px}.stat-label{color:var(--text-secondary)}.stat-value{color:var(--text-primary);font-weight:500}.stat-value.overdue-text{color:#ff3b30;font-weight:600}.reset-btn{padding:var(--spacing-xs) var(--spacing-md);font-size:14px;background:#ff3b30;color:#fff}.reset-btn:hover{background:#e03020}.reset-btn:disabled{background:#ccc;cursor:not-allowed}.empty-state{text-align:center;padding:var(--spacing-xxl);color:var(--text-secondary)}.empty-state p{margin:var(--spacing-sm) 0}.empty-hint{font-size:14px;color:var(--text-secondary)}.app{min-height:100vh;display:flex;flex-direction:column}:root{--border-radius: 12px;--spacing-xs: 8px;--spacing-sm: 12px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-xxl: 48px;--primary-color: #3d6be0;--primary-color-hover: #2d5bd0;--background-color: #FFFFFF;--text-color: #333333;--text-primary: #333333;--text-secondary: #666666;--border-color: #E5E5E5;--bg-gradient-start: #e8f5e9;--bg-gradient-end: #e3f2fd;--bg-gradient: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);--card-bg: #FFFFFF;--card-shadow: rgba(0, 0, 0, .1);--btn-primary-bg: #3d6be0;--btn-primary-hover: #2d5bd0;--btn-secondary-bg: #f0f0f0;--btn-secondary-hover: #e0e0e0;--success-color: #34c759;--error-color: #ff3b30;--warning-color: #ff9500;--slider-bg-start: #e3e8ff;--slider-bg-end: #cad4ff;--slider-thumb: #3d6be0}body.theme-cute{--primary-color: #ff6b9d;--primary-color-hover: #ff4d8a;--background-color: #FFFFFF;--text-color: #333333;--text-primary: #333333;--text-secondary: #666666;--border-color: #ffe0e8;--bg-gradient-start: #ffeef5;--bg-gradient-end: #ffe0f0;--bg-gradient: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);--card-bg: #FFFFFF;--card-shadow: rgba(255, 107, 157, .2);--btn-primary-bg: #ff6b9d;--btn-primary-hover: #ff4d8a;--btn-secondary-bg: #ffe0e8;--btn-secondary-hover: #ffd0e0;--success-color: #34c759;--error-color: #ff3b30;--warning-color: #ff9500;--slider-bg-start: #ffe0f0;--slider-bg-end: #ffcce0;--slider-thumb: #ff6b9d}body,.language-select-page,.login-page,.home-page,.study-page,.vocab-book-page,.language-select-container,.login-container,.mode-circle,.btn,.theme-switch-container,.theme-label{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-gradient);background-attachment:fixed;color:var(--text-color);line-height:1.6;transition:background .3s ease}#root{min-height:100vh}button{font-family:inherit;cursor:pointer;border:none;outline:none;transition:all .2s ease}button:disabled{opacity:.5;cursor:not-allowed}input{font-family:inherit;outline:none}a{text-decoration:none;color:inherit}