.photo-ocr{max-width:1000px}.ocr-upload{background:#fff;padding:20px;border-radius:8px;margin-bottom:20px;box-shadow:0 2px 8px #0000001a}.ocr-upload h3{color:#333;margin-bottom:15px}#photo-input{display:none}.upload-label{display:inline-block}.upload-btn{display:inline-block;padding:12px 24px;background:#667eea;color:#fff;border-radius:4px;cursor:pointer;font-weight:600;transition:all .2s ease}.upload-btn:hover{background:#5568d3;transform:scale(1.05)}.progress{margin-top:15px}.progress-bar{height:8px;background:#667eea;border-radius:4px;transition:width .3s ease;margin-bottom:10px}.progress p{color:#666;font-size:14px;text-align:center}.ocr-result{background:#fff;padding:20px;border-radius:8px;margin-bottom:20px;box-shadow:0 2px 8px #0000001a}.ocr-result h4{color:#333;margin-bottom:10px}.ocr-result textarea{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:4px;font-family:Menlo,monospace;font-size:13px;resize:vertical}.ocr-result textarea:focus{outline:none;border-color:#667eea}.parsed-words{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 8px #0000001a}.parsed-words h4{color:#333;margin-bottom:10px}.edit-hint{color:#999;font-size:12px;margin-bottom:15px}.words-table{margin-bottom:20px;border:2px solid #e0e0e0;border-radius:4px;overflow:hidden}.word-row{display:grid;grid-template-columns:80px 120px 1fr 40px;gap:0;padding:12px;border-bottom:1px solid #e0e0e0;align-items:center}.word-row:last-child{border-bottom:none}.word-row:hover{background:#f9f9f9}.cell{padding:8px;cursor:pointer;font-size:14px;min-height:20px}.cell.character{font-size:20px;font-weight:700;font-family:SimSun,STHeiti,sans-serif;text-align:center}.cell.pinyin{color:#667eea;font-weight:600}.cell.english{color:#666}.cell input{width:100%;padding:4px 8px;border:2px solid #667eea;border-radius:2px;font-size:14px}.cell input:focus{outline:none}.cell.character input{font-size:18px;font-weight:700;font-family:SimSun,STHeiti,sans-serif;text-align:center}.cell.pinyin input{color:#667eea;font-weight:600}.delete-btn{background:#ff6b6b;color:#fff;border:none;border-radius:3px;padding:4px 8px;cursor:pointer;font-size:14px;transition:all .2s ease}.delete-btn:hover{background:#ee5a52}.import-btn{width:100%;padding:14px;font-size:16px;font-weight:600}@media (max-width: 768px){.word-row{grid-template-columns:60px 80px 1fr 30px;padding:10px}.cell{font-size:12px}.cell.character{font-size:16px}}.word-bank{max-width:1000px}.bank-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:20px}.bank-header h2{color:#fff;font-size:24px}.header-buttons{display:flex;gap:10px}.add-form{margin-bottom:20px}.add-form h3{color:#333;margin-bottom:15px}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;color:#333;font-weight:500}.form-group input{width:100%;padding:10px 12px;border:2px solid #e0e0e0;border-radius:4px;font-size:14px}.words-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}.word-card{display:flex;flex-direction:column;justify-content:space-between;height:100%;background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 8px #0000001a;transition:all .3s ease}.word-card:hover{box-shadow:0 4px 16px #667eea33;transform:translateY(-2px)}.word-content{margin-bottom:15px}.breakdown{margin-top:12px;padding-top:12px;border-top:1px solid #e0e0e0}.breakdown-label{font-size:12px;color:#999;margin-bottom:8px;font-weight:600;text-transform:uppercase}.breakdown-items{display:flex;gap:8px;flex-wrap:wrap}.breakdown-item{background:#f5f5f5;padding:8px;border-radius:4px;text-align:center;flex:1;min-width:50px}.breakdown-char{font-size:18px;font-weight:700;color:#333;margin-bottom:2px}.breakdown-pinyin{font-size:11px;color:#667eea;margin-bottom:2px}.breakdown-english{font-size:10px;color:#999}.word-actions{display:flex;gap:8px}.word-actions button{flex:1;padding:10px;font-size:13px}@media (max-width: 768px){.bank-header{flex-direction:column}.bank-header h2{font-size:18px}.words-grid{grid-template-columns:1fr}}.flashcards{max-width:800px;margin:0 auto}.flashcard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;color:#fff}.flashcard-header h2{font-size:24px}.score{display:flex;gap:20px;font-size:16px;font-weight:700}.score .correct{color:#4caf50}.score .incorrect{color:#ff6b6b}.practice-controls{display:flex;gap:10px;margin-bottom:20px;justify-content:center}.mode-btn{padding:10px 16px;border:2px solid white;background:transparent;color:#fff;border-radius:4px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease}.flashcard{perspective:1000px;cursor:pointer;margin-bottom:20px;height:400px;position:relative}.card-inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}.flashcard.flipped .card-inner{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:40px 20px}.card-back{transform:rotateY(180deg)}.card-text{font-size:36px;font-weight:700;color:#333;margin-bottom:10px;word-break:break-all}.card-text.large{font-size:64px;font-family:SimSun,STHeiti,sans-serif}.card-text.medium{font-size:44px}.card-hint{color:#999;font-size:12px;margin-top:auto}.card-actions{display:flex;gap:10px;margin-bottom:20px;justify-content:center}.card-actions button{flex:1;max-width:200px}.feedback-buttons{display:flex;gap:10px;margin-bottom:20px;justify-content:center}.feedback-buttons button{flex:1;max-width:200px;padding:12px 20px;font-size:16px}.success-btn{background:#4caf50;color:#fff}.success-btn:hover{background:#45a049}.navigation{display:flex;gap:10px;justify-content:center;align-items:center}.navigation button{flex:1;max-width:120px}.card-counter{color:#fff;font-size:16px;font-weight:600;padding:0 10px}.empty-state{color:#fff;text-align:center;padding:40px 20px;font-size:16px}@media (max-width: 768px){.flashcard{height:300px}.card-text{font-size:28px}.card-text.large{font-size:48px}.card-text.medium{font-size:32px}.practice-controls{flex-wrap:wrap}}.pinyin-practice{max-width:1000px;margin:0 auto}.practice-header h2{color:#fff;font-size:24px;margin-bottom:20px}.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.item-card{display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;transition:all .3s ease}.item-card:hover{box-shadow:0 4px 16px #667eea33;transform:translateY(-2px)}.item-content{margin-bottom:12px;width:100%}.item-label{font-size:28px;font-weight:700;color:#333;margin-bottom:4px;font-family:Menlo,Monaco,Courier New,monospace}.item-pinyin{font-size:14px;color:#667eea;font-weight:600;margin-bottom:4px}.item-example{font-size:12px;color:#999}.item-card .play-btn{width:100%;padding:8px 12px;font-size:12px}@media (max-width: 768px){.items-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}.item-label{font-size:22px}}.numbers{max-width:1000px;margin:0 auto}.numbers-header h2{color:#fff;font-size:24px;margin-bottom:20px}.mode-selector{display:flex;gap:10px;margin-bottom:20px;justify-content:center;flex-wrap:wrap}.mode-btn{padding:12px 20px;border:2px solid white;background:transparent;color:#fff;border-radius:4px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease}.mode-btn:hover{background:#ffffff1a}.mode-btn.active{background:#fff;color:#667eea}.numbers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}.number-card{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:15px;min-height:180px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;cursor:pointer;transition:all .3s ease}.number-card:hover{box-shadow:0 4px 16px #667eea33;transform:translateY(-2px)}.card-inner{width:100%;text-align:center;flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:8px;margin-bottom:10px}.card-front,.card-back{width:100%}.number-digit{font-size:48px;font-weight:700;color:#667eea}.number-char{font-size:32px;font-weight:700;color:#333;font-family:SimSun,STHeiti,sans-serif;margin-bottom:4px}.number-pinyin{font-size:14px;color:#667eea;font-weight:600}.card-hint{font-size:10px;color:#999;margin-top:auto}.number-card .play-btn{width:100%;padding:8px 12px;font-size:12px}.quiz-container{max-width:600px;margin:0 auto}.quiz-progress{display:flex;justify-content:space-between;color:#fff;margin-bottom:20px;font-size:16px;font-weight:600}.quiz-prompt{text-align:center;margin-bottom:30px}.quiz-prompt p{color:#fff;font-size:18px;margin-bottom:15px}.quiz-options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:30px}.option-btn{padding:30px;font-size:24px;font-weight:700;background:#fff;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;color:#333}.option-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 4px 12px #00000026}.option-btn:disabled{cursor:default}.option-btn.correct{background:#4caf50;color:#fff;border-color:#4caf50}.option-btn.incorrect{background:#ff6b6b;color:#fff;border-color:#ff6b6b}.quiz-feedback{text-align:center}.quiz-answer{background:#fff;padding:30px;border-radius:8px;margin-bottom:20px}.answer-char{font-size:48px;font-weight:700;color:#333;font-family:SimSun,STHeiti,sans-serif;margin-bottom:10px}.answer-pinyin{font-size:18px;color:#667eea;font-weight:600}@media (max-width: 768px){.numbers-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px}.number-card{min-height:150px}.number-digit{font-size:36px}.quiz-options{grid-template-columns:1fr}.option-btn{padding:20px;font-size:20px}}.login-screen{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.login-container{background:#fff;padding:40px;border-radius:12px;box-shadow:0 10px 40px #0003;width:100%;max-width:400px}.login-header{text-align:center;margin-bottom:30px}.login-header h1{font-size:36px;color:#333;margin:0 0 10px;font-family:SimSun,STHeiti,sans-serif}.login-header p{font-size:16px;color:#667eea;margin:0;font-weight:600}.login-form,.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;color:#333;font-weight:600;font-size:14px}.form-group input{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:6px;font-size:16px;transition:border-color .2s ease;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#667eea}.error-message{color:#ff6b6b;font-size:14px;margin-bottom:15px;text-align:center;font-weight:600}.login-btn{width:100%;padding:12px;background:#667eea;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.login-btn:hover{background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.login-btn:active{transform:translateY(0)}.login-footer{text-align:center;color:#999;font-size:12px;margin:0}@media (max-width: 480px){.login-container{padding:30px 20px;margin:20px}.login-header h1{font-size:28px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh;max-width:1200px;margin:0 auto}.app-header{background:#fffffff2;padding:20px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px;border-radius:0 0 12px 12px}.app-header h1{color:#333;margin-bottom:15px;font-size:28px;text-align:center}.tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.tab{padding:10px 20px;border:2px solid #667eea;background:#fff;color:#667eea;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s ease}.tab:hover{background:#f0f4ff}.tab.active{background:#667eea;color:#fff}.content{flex:1;padding:20px}button{font-family:inherit;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s ease}button:hover{opacity:.9;transform:translateY(-1px)}button:active{transform:translateY(0)}.primary-btn{background:#667eea;color:#fff}.primary-btn:hover{background:#5568d3}.danger-btn{background:#ff6b6b;color:#fff}.danger-btn:hover{background:#ee5a52}.secondary-btn{background:#f0f4ff;color:#667eea;border:2px solid #667eea}.secondary-btn:hover{background:#e8ecff}input,textarea{font-family:inherit;padding:10px 12px;border:2px solid #e0e0e0;border-radius:4px;font-size:14px;transition:border-color .2s ease}input:focus,textarea:focus{outline:none;border-color:#667eea}.card{background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 8px #0000001a;margin-bottom:16px}.chinese-text{font-size:32px;font-weight:700;color:#333;margin-bottom:10px;font-family:SimSun,STHeiti,sans-serif}.pinyin-text{font-size:18px;color:#667eea;margin-bottom:8px}.english-text{font-size:16px;color:#666;margin-bottom:10px}.play-btn{background:#667eea;color:#fff;padding:10px 16px;border-radius:4px;cursor:pointer;border:none;font-size:14px;transition:all .2s ease}.play-btn:hover{background:#5568d3;transform:scale(1.05)}.play-btn:active{transform:scale(.95)}@media (max-width: 768px){.app-header h1{font-size:20px}.tabs{gap:8px}.tab{padding:8px 12px;font-size:12px}.content{padding:12px}.chinese-text{font-size:24px}.pinyin-text{font-size:14px}}