*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif}.app{max-width:1200px;margin:0 auto;padding:20px}.main-content{margin-top:80px;padding:20px}.nav{z-index:1000;background:#fff;border-radius:15px;justify-content:space-between;align-items:center;width:90%;max-width:1200px;padding:15px 30px;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%);box-shadow:0 4px 6px #0000001a}.nav-brand{color:#667eea;font-size:1.5rem;font-weight:700}.nav-links{gap:20px;display:flex}.nav-link{color:#333;border-radius:8px;padding:8px 16px;text-decoration:none;transition:all .3s}.nav-link:hover{color:#fff;background:#667eea}.card{background:#fff;border-radius:15px;margin-bottom:20px;padding:25px;transition:transform .3s,box-shadow .3s;box-shadow:0 4px 6px #0000001a}.card:hover{transform:translateY(-5px);box-shadow:0 8px 12px #00000026}.card-title{color:#667eea;margin-bottom:15px;font-size:1.5rem}.word-card{border-left:5px solid #667eea}.word-card.learning{border-left-color:#f59e0b}.word-card.learned{border-left-color:#10b981}.word-text{color:#333;margin-bottom:10px;font-size:1.8rem;font-weight:700}.word-translation{color:#666;margin-bottom:10px;font-size:1.2rem}.word-context{color:#888;background:#f8f9fa;border-radius:8px;margin-bottom:15px;padding:10px;font-style:italic}.word-meta{flex-wrap:wrap;gap:15px;display:flex}.status-badge{border-radius:20px;padding:5px 12px;font-size:.85rem;font-weight:600}.status-badge.new{color:#667eea;background:#e0e7ff}.status-badge.learning{color:#f59e0b;background:#fef3c7}.status-badge.learned{color:#10b981;background:#d1fae5}.date-badge{color:#999;font-size:.85rem}.btn{cursor:pointer;border:none;border-radius:8px;padding:12px 24px;font-size:1rem;text-decoration:none;transition:all .3s;display:inline-block}.btn-primary{color:#fff;background:#667eea}.btn-primary:hover{background:#5568d3}.btn-secondary{color:#667eea;background:#e0e7ff}.btn-secondary:hover{color:#fff;background:#667eea}.btn-danger{color:#fff;background:#ef4444}.btn-danger:hover{background:#dc2626}.btn-group{gap:10px;margin-top:15px;display:flex}.form-group{margin-bottom:20px}.form-label{color:#333;margin-bottom:8px;font-weight:600;display:block}.form-input,.form-textarea,.form-select{border:2px solid #e0e0e0;border-radius:8px;width:100%;padding:12px 15px;font-size:1rem;transition:border-color .3s}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:#667eea;outline:none}.form-textarea{resize:vertical;min-height:100px}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px;display:grid}.stat-card{text-align:center;background:#fff;border-radius:15px;padding:25px;box-shadow:0 4px 6px #0000001a}.stat-number{color:#667eea;font-size:2.5rem;font-weight:700}.stat-label{color:#666;margin-top:5px}.empty-state{text-align:center;background:#fff;border-radius:15px;padding:60px 20px;box-shadow:0 4px 6px #0000001a}.empty-state-icon{margin-bottom:20px;font-size:4rem}.empty-state-title{color:#333;margin-bottom:10px;font-size:1.5rem}.empty-state-text{color:#666;margin-bottom:20px}.loading{text-align:center;padding:60px 20px}.loading-spinner{border:4px solid #f3f3f3;border-top-color:#667eea;border-radius:50%;width:50px;height:50px;margin:0 auto 20px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.filters{flex-wrap:wrap;gap:15px;margin-bottom:20px;display:flex}.filter-btn{color:#667eea;cursor:pointer;background:#fff;border:2px solid #667eea;border-radius:20px;padding:8px 16px;transition:all .3s}.filter-btn.active,.filter-btn:hover{color:#fff;background:#667eea}.search-box{margin-bottom:20px}.search-input{border:2px solid #e0e0e0;border-radius:8px;width:100%;padding:12px 15px;font-size:1rem}.search-input:focus{border-color:#667eea;outline:none}