.layout{display:flex;flex-direction:column;min-height:100vh;background-color:#f5f5f5}.header{background-color:#fff;border-bottom:1px solid #e0e0e0;box-shadow:0 2px 4px #0000001a;position:sticky;top:0;z-index:100}.header-container{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:0 20px;height:64px}.header-left .logo{text-decoration:none;color:#1976d2}.header-left h1{margin:0;font-size:24px;font-weight:600}.header-nav{display:flex;gap:24px}.header-nav .nav-link{text-decoration:none;color:#666;font-weight:500;padding:8px 16px;border-radius:4px;transition:all .2s}.header-nav .nav-link:hover{color:#1976d2;background-color:#f0f7ff}.header-right{display:flex;align-items:center;gap:16px}.loading-indicator{color:#1976d2;font-size:14px}.user-info{color:#666;font-size:14px}.layout-content{display:flex;flex:1;max-width:1200px;margin:0 auto;width:100%;gap:20px;padding:20px}.sidebar{width:240px;background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:20px;height:fit-content;position:sticky;top:84px}.sidebar-nav .nav-list{list-style:none;padding:0;margin:0}.sidebar-nav .nav-item{margin-bottom:8px}.sidebar-nav .nav-item.active .nav-link{background-color:#1976d2;color:#fff}.sidebar-nav .nav-link{display:flex;align-items:center;gap:12px;padding:12px 16px;text-decoration:none;color:#666;border-radius:6px;transition:all .2s}.sidebar-nav .nav-link:hover{background-color:#f0f7ff;color:#1976d2}.nav-icon{font-size:18px}.nav-text{font-weight:500}.sidebar-stats{margin-top:32px;padding-top:20px;border-top:1px solid #e0e0e0}.sidebar-stats h3{margin:0 0 16px;font-size:16px;color:#333}.stat-item{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.stat-label{color:#666}.stat-value{color:#1976d2;font-weight:600}.main-content{flex:1;background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:24px;min-height:600px}.footer{background-color:#333;color:#fff;margin-top:40px}.footer-container{max-width:1200px;margin:0 auto;padding:40px 20px 20px}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;margin-bottom:32px}.footer-section h4{margin:0 0 16px;color:#fff;font-size:16px}.footer-section p{margin:0;color:#ccc;line-height:1.5}.footer-section ul{list-style:none;padding:0;margin:0}.footer-section li{margin-bottom:8px;color:#ccc;cursor:pointer;transition:color .2s}.footer-section li:hover{color:#fff}.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid #555;color:#ccc;font-size:14px}@media (max-width: 768px){.layout-content{flex-direction:column;padding:10px}.sidebar{width:100%;position:static}.header-nav{display:none}.header-container{padding:0 10px}.footer-content{grid-template-columns:1fr;gap:20px}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:6px;font-weight:500;text-decoration:none;cursor:pointer;transition:all .2s ease;font-family:inherit;outline:none;position:relative;overflow:hidden}.btn:focus{box-shadow:0 0 0 2px #1976d233}.btn-small{padding:6px 12px;font-size:14px;min-height:32px}.btn-medium{padding:8px 16px;font-size:16px;min-height:40px}.btn-large{padding:12px 24px;font-size:18px;min-height:48px}.btn-primary{background-color:#1976d2;color:#fff;border:1px solid #1976d2}.btn-primary:hover:not(.btn-disabled){background-color:#1565c0;border-color:#1565c0;transform:translateY(-1px);box-shadow:0 4px 12px #1976d24d}.btn-primary:active:not(.btn-disabled){background-color:#0d47a1;border-color:#0d47a1;transform:translateY(0)}.btn-secondary{background-color:#6c757d;color:#fff;border:1px solid #6c757d}.btn-secondary:hover:not(.btn-disabled){background-color:#5a6268;border-color:#5a6268;transform:translateY(-1px);box-shadow:0 4px 12px #6c757d4d}.btn-secondary:active:not(.btn-disabled){background-color:#495057;border-color:#495057;transform:translateY(0)}.btn-outline{background-color:transparent;color:#1976d2;border:1px solid #1976d2}.btn-outline:hover:not(.btn-disabled){background-color:#1976d2;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #1976d233}.btn-outline:active:not(.btn-disabled){background-color:#1565c0;border-color:#1565c0;transform:translateY(0)}.btn-ghost{background-color:transparent;color:#1976d2;border:1px solid transparent}.btn-ghost:hover:not(.btn-disabled){background-color:#1976d21a;transform:translateY(-1px)}.btn-ghost:active:not(.btn-disabled){background-color:#1976d233;transform:translateY(0)}.btn-disabled{opacity:.6;cursor:not-allowed;transform:none!important;box-shadow:none!important}.btn-loading{cursor:wait}.btn-spinner{animation:spin 1s linear infinite}.btn-content-loading{opacity:.7}.btn-content{opacity:1}@media (max-width: 768px){.btn-large{padding:10px 20px;font-size:16px;min-height:44px}.btn-medium{padding:8px 14px;font-size:15px;min-height:38px}.btn-small{padding:6px 10px;font-size:13px;min-height:30px}}.card{background-color:#fff;border-radius:8px;transition:all .2s ease;position:relative;overflow:hidden}.card-default{border:1px solid #e0e0e0;box-shadow:0 1px 3px #0000001a}.card-elevated{border:none;box-shadow:0 4px 12px #00000026}.card-outlined{border:2px solid #e0e0e0;box-shadow:none}.card-clickable{cursor:pointer}.card-clickable:hover{transform:translateY(-2px)}.card-default.card-clickable:hover{box-shadow:0 4px 12px #00000026;border-color:#1976d2}.card-elevated.card-clickable:hover{box-shadow:0 8px 24px #0003}.card-outlined.card-clickable:hover{border-color:#1976d2;box-shadow:0 2px 8px #1976d21a}.card-clickable:active{transform:translateY(0)}.text-center{text-align:center}.bg-light{background-color:#f8f9fa!important}.card-padding-none{padding:0}.card-padding-small{padding:12px}.card-padding-medium{padding:16px}.card-padding-large{padding:24px}.card-header{margin-bottom:16px}.card-title{margin:0 0 8px;font-size:18px;font-weight:600;color:#333;line-height:1.4}.card-subtitle{margin:0;font-size:14px;color:#666;line-height:1.5}.card-content{color:#333;line-height:1.6}.card-padding-none .card-header{padding:16px 16px 0}.card-padding-none .card-content{padding:0 16px 16px}.card-padding-none .card-header+.card-content{padding-top:0}@media (max-width: 768px){.card-padding-large{padding:16px}.card-padding-medium{padding:12px}.card-title{font-size:16px}.card-subtitle{font-size:13px}.card-padding-none .card-header{padding:12px 12px 0}.card-padding-none .card-content{padding:0 12px 12px}}@media (prefers-color-scheme: dark){.card{background-color:#2d2d2d;color:#e0e0e0}.card-default,.card-outlined{border-color:#404040}.card-title{color:#e0e0e0}.card-subtitle{color:#b0b0b0}.card-content{color:#e0e0e0}}.input-wrapper{display:flex;flex-direction:column;gap:4px}.input-full-width{width:100%}.input-label{font-size:14px;font-weight:500;color:#333;margin-bottom:4px}.input-required{color:#d32f2f;margin-left:2px}.input-container{position:relative;display:flex;align-items:center}.input-field{width:100%;border:none;outline:none;background:transparent;font-size:16px;color:#333;font-family:inherit;transition:all .2s ease}.input-field::placeholder{color:#999}.input-small .input-container{height:32px}.input-small .input-field{font-size:14px;padding:0 8px}.input-small.input-has-icons .input-field{padding:0 32px 0 8px}.input-small.input-has-icons .input-field:first-child{padding-left:32px}.input-medium .input-container{height:40px}.input-medium .input-field{font-size:16px;padding:0 12px}.input-medium.input-has-icons .input-field{padding:0 40px 0 12px}.input-medium.input-has-icons .input-field:first-child{padding-left:40px}.input-large .input-container{height:48px}.input-large .input-field{font-size:18px;padding:0 16px}.input-large.input-has-icons .input-field{padding:0 48px 0 16px}.input-large.input-has-icons .input-field:first-child{padding-left:48px}.input-outlined .input-container{border:1px solid #e0e0e0;border-radius:6px;background-color:#fff}.input-outlined .input-container:hover:not(.input-disabled){border-color:#1976d2}.input-outlined .input-container:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.input-filled .input-container{background-color:#f5f5f5;border:none;border-bottom:2px solid #e0e0e0;border-radius:6px 6px 0 0}.input-filled .input-container:hover:not(.input-disabled){background-color:#eee;border-bottom-color:#1976d2}.input-filled .input-container:focus-within{background-color:#eee;border-bottom-color:#1976d2}.input-standard .input-container{background:transparent;border:none;border-bottom:1px solid #e0e0e0;border-radius:0}.input-standard .input-container:hover:not(.input-disabled){border-bottom-color:#1976d2}.input-standard .input-container:focus-within{border-bottom-color:#1976d2;border-bottom-width:2px}.input-icon{position:absolute;display:flex;align-items:center;justify-content:center;color:#666;pointer-events:none;z-index:1}.input-start-icon{left:8px}.input-end-icon{right:8px}.input-small .input-icon{width:16px;height:16px;font-size:14px}.input-medium .input-icon{width:20px;height:20px;font-size:16px}.input-large .input-icon{width:24px;height:24px;font-size:18px}.input-error .input-container{border-color:#d32f2f!important}.input-error.input-outlined .input-container:focus-within{box-shadow:0 0 0 2px #d32f2f1a}.input-error .input-label{color:#d32f2f}.input-disabled .input-container{opacity:.6;cursor:not-allowed;background-color:#f5f5f5!important}.input-disabled .input-field{cursor:not-allowed;color:#999}.input-disabled .input-label{color:#999}.input-helper{font-size:12px;color:#666;margin-top:4px;line-height:1.4}.input-helper-error{color:#d32f2f}@media (max-width: 768px){.input-large .input-container{height:44px}.input-large .input-field{font-size:16px}.input-medium .input-container{height:38px}.input-medium .input-field{font-size:15px}}@media (prefers-color-scheme: dark){.input-label,.input-field{color:#e0e0e0}.input-field::placeholder{color:#b0b0b0}.input-outlined .input-container{background-color:#2d2d2d;border-color:#404040}.input-filled .input-container{background-color:#404040;border-bottom-color:#606060}.input-standard .input-container{border-bottom-color:#606060}.input-helper{color:#b0b0b0}.input-disabled .input-container{background-color:#404040!important}.input-disabled .input-field,.input-disabled .input-label{color:#666}}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;animation:modalFadeIn .2s ease-out}.modal-content{background-color:#fff;border-radius:8px;box-shadow:0 8px 32px #0003;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:modalSlideIn .3s ease-out}.modal-small{width:100%;max-width:400px}.modal-medium{width:100%;max-width:600px}.modal-large{width:100%;max-width:800px}.modal-fullscreen{width:100%;height:100%;max-width:none;max-height:none;border-radius:0;margin:0}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.modal-title{margin:0;font-size:20px;font-weight:600;color:#333;line-height:1.4}.modal-close-button{background:none;border:none;font-size:20px;color:#666;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:32px;height:32px}.modal-close-button:hover{background-color:#f5f5f5;color:#333}.modal-close-button:active{background-color:#e0e0e0}.modal-body{padding:24px;overflow-y:auto;flex:1;color:#333;line-height:1.6}.modal-content:not(:has(.modal-header)) .modal-body{padding-top:24px}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.modal-overlay{padding:8px}.modal-large,.modal-medium{max-width:none;width:100%}.modal-header{padding:16px 20px}.modal-title{font-size:18px}.modal-body{padding:20px}.modal-fullscreen{border-radius:0}}@media (max-width: 480px){.modal-overlay{padding:0}.modal-content{border-radius:0;height:100%;max-height:100%}.modal-header{padding:12px 16px}.modal-title{font-size:16px}.modal-body{padding:16px}}@media (prefers-color-scheme: dark){.modal-overlay{background-color:#000000b3}.modal-content{background-color:#2d2d2d;color:#e0e0e0}.modal-header{border-bottom-color:#404040}.modal-title{color:#e0e0e0}.modal-close-button{color:#b0b0b0}.modal-close-button:hover{background-color:#404040;color:#e0e0e0}.modal-close-button:active{background-color:#505050}.modal-body{color:#e0e0e0}}.modal-body::-webkit-scrollbar{width:6px}.modal-body::-webkit-scrollbar-track{background:transparent}.modal-body::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:3px}.modal-body::-webkit-scrollbar-thumb:hover{background-color:#999}@media (prefers-color-scheme: dark){.modal-body::-webkit-scrollbar-thumb{background-color:#666}.modal-body::-webkit-scrollbar-thumb:hover{background-color:#888}}.audio-play-button{display:flex!important;align-items:center;gap:8px}.audio-control-button{display:flex!important;align-items:center;gap:8px;min-width:80px}.audio-player-container{display:inline-block}.audio-player-error{margin-top:4px;font-size:12px;color:#d32f2f}.audio-player-full{display:flex;flex-direction:column;gap:16px}.audio-controls{display:flex;align-items:center;gap:12px}.audio-progress{display:flex;flex-direction:column;gap:8px}.audio-progress-bar{width:100%;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden}.audio-progress-fill{height:100%;background-color:#1976d2;transition:width .1s ease}.audio-progress-time{display:flex;justify-content:space-between;font-size:12px;color:#666}.audio-loading{display:flex;align-items:center;gap:8px;font-size:14px;color:#666}.audio-error{padding:8px 12px;background-color:#ffebee;border:1px solid #ffcdd2;border-radius:4px;font-size:14px;color:#d32f2f}.audio-controls{display:flex;flex-direction:column;gap:16px;padding:16px;background-color:#f5f5f5;border-radius:8px;border:1px solid #e0e0e0}.audio-controls-section{display:flex;flex-direction:column;gap:8px}.audio-controls-section h4{margin:0;font-size:14px;font-weight:600;color:#333}.audio-controls-buttons{display:flex;gap:8px;flex-wrap:wrap}.audio-control-btn{display:flex!important;align-items:center;gap:4px;font-size:12px;padding:6px 12px}.audio-control-label{font-size:12px;font-weight:500;color:#555;margin-bottom:4px}.audio-control-slider{width:100%;height:4px;border-radius:2px;background:#ddd;outline:none;-webkit-appearance:none}.audio-control-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#1976d2;cursor:pointer}.audio-control-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#1976d2;cursor:pointer;border:none}.audio-control-select{padding:6px 8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:12px;color:#333;outline:none}.audio-control-select:focus{border-color:#1976d2;box-shadow:0 0 0 2px #1976d233}@media (max-width: 768px){.audio-controls{padding:12px;gap:12px}.audio-controls-buttons{flex-direction:column}.audio-control-btn{justify-content:center}}.vocabulary-audio-compact{display:inline-flex;align-items:center;gap:8px}.vocabulary-audio-full{display:flex;flex-direction:column;gap:12px}.vocabulary-audio-section{display:flex;flex-direction:column;gap:8px}.vocabulary-audio-section h4{margin:0;font-size:14px;font-weight:600;color:#333}.vocabulary-audio-controls{display:flex;gap:8px;flex-wrap:wrap}.vocabulary-audio-btn{display:flex!important;align-items:center;gap:6px;font-size:13px;transition:all .2s ease}.vocabulary-audio-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.vocabulary-audio-btn:disabled{opacity:.6;cursor:not-allowed}.vocabulary-audio-error{padding:6px 8px;background-color:#ffebee;border:1px solid #ffcdd2;border-radius:4px;font-size:12px;color:#d32f2f;display:flex;align-items:center;gap:4px}.vocabulary-audio-compact .vocabulary-audio-btn{min-width:32px;height:32px;padding:6px;border-radius:50%;font-size:16px}.vocabulary-audio-compact .vocabulary-audio-error{position:absolute;top:100%;left:0;margin-top:4px;white-space:nowrap;z-index:10;box-shadow:0 2px 8px #00000026}@media (max-width: 768px){.vocabulary-audio-controls{flex-direction:column}.vocabulary-audio-btn{justify-content:center;width:100%}.vocabulary-audio-compact .vocabulary-audio-error{position:relative;top:auto;left:auto;margin-top:8px;white-space:normal}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.vocabulary-audio-btn:disabled{animation:pulse 1.5s ease-in-out infinite}.home-page{max-width:800px;margin:0 auto}.welcome-section{text-align:center;margin-bottom:40px}.welcome-section h1{color:#1976d2;margin-bottom:16px}.welcome-text{font-size:18px;color:#666;margin:0}.stats-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:40px}.stat-card{text-align:center;transition:transform .2s ease}.stat-card:hover{transform:translateY(-2px)}.stat-card h3{margin:0 0 12px;font-size:14px;opacity:.9}.stat-number{font-size:32px;font-weight:700;margin-bottom:8px}.stat-card p{margin:0;font-size:12px;opacity:.8}.quick-actions{margin-bottom:40px}.quick-actions h2{margin-bottom:20px;color:#333;font-size:24px}.action-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.action-card{background:white;padding:24px;border-radius:8px;box-shadow:0 2px 8px #0000001a;text-decoration:none;color:inherit;transition:all .2s ease;border:2px solid transparent;text-align:center}.action-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #00000026;border-color:#1976d2;text-decoration:none;color:inherit}.action-icon{font-size:48px;margin-bottom:16px}.action-card h3{margin:0 0 8px;color:#333;font-size:18px}.action-card p{margin:0 0 16px;color:#666;font-size:14px;line-height:1.5}.action-button{margin-top:16px}.recent-activity{margin-bottom:40px}.recent-activity h2{margin-bottom:20px;color:#333}.activity-list{display:flex;flex-direction:column;gap:12px}.activity-item{display:flex;justify-content:space-between;align-items:center}.activity-date{font-weight:500;color:#333}.activity-stats{display:flex;gap:16px;font-size:14px;color:#666}.no-activity{text-align:center}.no-activity p{color:#666;font-style:italic;margin:0 0 16px}@media (max-width: 768px){.stats-overview{grid-template-columns:repeat(2,1fr)}.action-cards{grid-template-columns:1fr}.activity-stats{flex-direction:column;gap:4px;text-align:right}}.vocabulary-learning-container{max-width:1000px;margin:0 auto;padding:20px;min-height:100vh;background-color:#f8f9fa}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:16px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #1976d2;border-radius:50%;animation:spin 1s linear infinite}.error-card,.completion-card{text-align:center;padding:40px;margin:40px auto;max-width:500px}.completion-stats{margin:20px 0;padding:20px;background-color:#f5f5f5;border-radius:8px}.completion-stats p{margin:8px 0;font-size:16px}.completion-actions{display:flex;gap:12px;justify-content:center;margin-top:20px}.learning-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding:16px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;flex-wrap:wrap;gap:16px}.progress-section{display:flex;align-items:center;gap:12px;flex:1;min-width:200px}.progress-bar{flex:1;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background-color:#4caf50;transition:width .3s ease}.progress-text{font-size:14px;font-weight:600;color:#333;white-space:nowrap}.stats-section{display:flex;gap:16px}.stat-item{font-size:14px;color:#666;white-space:nowrap}.header-actions{display:flex;gap:8px}.audio-controls-panel{margin-bottom:20px}.learning-content{display:flex;justify-content:center}.vocabulary-card{width:100%;max-width:800px;padding:32px}.vocabulary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #e0e0e0}.vocabulary-category{margin:0;color:#1976d2;font-size:18px}.question-mode{display:flex;flex-direction:column;gap:24px}.question-section h3{margin:0 0 16px;color:#333;font-size:20px}.definition-display{padding:20px;background-color:#f8f9fa;border-radius:8px;border-left:4px solid #1976d2}.definition-text{font-size:18px;line-height:1.6;margin:0 0 12px;color:#333}.example-section{margin-top:16px;padding-top:16px;border-top:1px solid #e0e0e0}.example-label{font-weight:600;color:#666;margin:0 0 8px;font-size:14px}.example-text{font-style:italic;color:#555;margin:0;font-size:16px}.answer-input-section{display:flex;flex-direction:column;gap:16px}.answer-input{padding:16px;font-size:18px;border:2px solid #e0e0e0;border-radius:8px;outline:none;transition:border-color .2s ease}.answer-input:focus{border-color:#1976d2;box-shadow:0 0 0 3px #1976d21a}.question-actions{display:flex;gap:12px;justify-content:center}.answer-mode{display:flex;flex-direction:column;gap:24px}.answer-section{display:flex;flex-direction:column;gap:20px}.correct-answer h3{margin:0 0 12px;color:#333}.word-display{display:flex;align-items:center;gap:12px;padding:16px;background-color:#e8f5e8;border-radius:8px;border:2px solid #4caf50}.word-text{font-size:28px;font-weight:700;color:#2e7d32}.pronunciation{font-size:16px;color:#666;font-style:italic}.user-answer{padding:12px 16px;border-radius:8px;display:flex;align-items:center;justify-content:space-between}.user-answer.correct{background-color:#e8f5e8;border:1px solid #4caf50}.user-answer.incorrect{background-color:#ffebee;border:1px solid #f44336}.user-answer-text,.feedback-icon{font-weight:600}.vocabulary-details{display:flex;flex-direction:column;gap:12px;padding:20px;background-color:#f8f9fa;border-radius:8px}.detail-item{display:flex;flex-direction:column;gap:4px}.detail-item strong{color:#333;font-size:14px}.detail-item span{color:#555;line-height:1.5}.tags{display:flex;gap:8px;flex-wrap:wrap}.tag{padding:4px 8px;background-color:#e3f2fd;color:#1976d2;border-radius:4px;font-size:12px;font-weight:500}.answer-actions{display:flex;flex-direction:column;gap:16px;align-items:center}@media (max-width: 768px){.vocabulary-learning-container{padding:12px}.learning-header{flex-direction:column;align-items:stretch}.progress-section{min-width:auto}.stats-section{justify-content:space-between}.header-actions{justify-content:center}.vocabulary-card{padding:20px}.vocabulary-header{flex-direction:column;gap:12px;align-items:flex-start}.word-display{flex-direction:column;align-items:flex-start;gap:8px}.word-text{font-size:24px}.question-actions,.completion-actions{flex-direction:column}.user-answer{flex-direction:column;align-items:flex-start;gap:8px}}@media (max-width: 480px){.definition-text{font-size:16px}.answer-input{font-size:16px;padding:12px}.word-text{font-size:20px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@tailwind base;@tailwind components;@tailwind utilities;@layer base{html{font-family:Inter,system-ui,sans-serif}body{@apply bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100;@apply transition-colors duration-200;}*{@apply border-gray-200 dark:border-gray-700;}}@layer components{.btn{@apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors;@apply focus:outline-none focus:ring-2 focus:ring-offset-2;}.btn-primary{@apply bg-primary-600 text-white hover:bg-primary-700;@apply focus:ring-primary-500 dark:focus:ring-primary-400;}.btn-secondary{@apply bg-gray-200 text-gray-900 hover:bg-gray-300;@apply dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600;@apply focus:ring-gray-500;}.card{@apply bg-white rounded-xl shadow-sm border;@apply dark:bg-gray-800 dark:border-gray-700;}.input{@apply block w-full rounded-lg border px-3 py-2 text-sm;@apply focus:border-primary-500 focus:ring-1 focus:ring-primary-500;@apply dark:bg-gray-700 dark:border-gray-600 dark:text-white;}}@layer utilities{.text-balance{text-wrap:balance}.animate-fade-in{animation:fadeIn .5s ease-in-out}.animate-slide-up{animation:slideUp .3s ease-out}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{@apply bg-gray-100 dark:bg-gray-800;}::-webkit-scrollbar-thumb{@apply bg-gray-300 dark:bg-gray-600 rounded-full;}::-webkit-scrollbar-thumb:hover{@apply bg-gray-400 dark:bg-gray-500;}