body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.App{width:100%;min-height:100vh}.dictionary-container{min-height:100vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.dictionary-header{text-align:center;color:#fff;margin-bottom:30px;padding:20px}.dictionary-header h1{font-size:2.5em;margin:0 0 10px;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.dictionary-header p{font-size:1.1em;margin:0;opacity:.95}.dictionary-content{display:grid;grid-template-columns:1fr 2fr;gap:20px;max-width:1400px;margin:0 auto}.left-panel{background:white;border-radius:12px;padding:25px;box-shadow:0 10px 30px #0003;height:fit-content;position:sticky;top:20px}.right-panel{display:flex;flex-direction:column;gap:20px}.controls-section{background:white;border-radius:12px;padding:20px;box-shadow:0 10px 30px #0003}.search-box{margin-bottom:15px}.search-input{width:100%;padding:12px 15px;border:2px solid #e0e0e0;border-radius:8px;font-size:1em;transition:all .3s ease}.search-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.action-buttons{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}.btn{padding:10px 20px;border:none;border-radius:8px;font-size:.95em;cursor:pointer;transition:all .3s ease;font-weight:600;flex:1;min-width:150px}.btn-primary{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.btn-secondary{background:#f0f0f0;color:#333;border:2px solid #ddd}.btn-secondary:hover{background:#e8e8e8;border-color:#999}.dictionary-footer{text-align:center;color:#fff;margin-top:30px;padding:20px;background:rgba(0,0,0,.1);border-radius:12px}.dictionary-footer p{margin:5px 0;font-size:.95em}@media (max-width: 1024px){.dictionary-content{grid-template-columns:1fr}.left-panel{position:static}}@media (max-width: 768px){.dictionary-header h1{font-size:1.8em}.action-buttons{flex-direction:column}.btn{width:100%}}.word-form{background:white}.word-form h2{color:#333;margin-top:0;padding-bottom:15px;border-bottom:2px solid #667eea;font-size:1.3em}.form-group{margin-bottom:18px}.form-group label{display:block;margin-bottom:8px;color:#333;font-weight:600;font-size:.95em}.form-input,.form-textarea{width:100%;padding:10px 12px;border:2px solid #e0e0e0;border-radius:6px;font-size:.95em;font-family:inherit;transition:all .3s ease;box-sizing:border-box}.form-input:focus,.form-textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-textarea{resize:vertical;min-height:80px}.form-buttons{display:flex;gap:10px;margin-top:20px}.btn-success{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:12px 24px;border:none;border-radius:6px;font-size:1em;font-weight:600;cursor:pointer;transition:all .3s ease;flex:1}.btn-success:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.btn-cancel{background:#f0f0f0;color:#333;border:2px solid #ddd;padding:10px 20px;border-radius:6px;font-size:.95em;font-weight:600;cursor:pointer;transition:all .3s ease;flex:1}.btn-cancel:hover{background:#e8e8e8;border-color:#999}.word-list{background:white;border-radius:12px;padding:25px;box-shadow:0 10px 30px #0003}.word-list h2{color:#333;margin-top:0;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #667eea;font-size:1.3em}.empty-state{text-align:center;padding:60px 20px;color:#999}.empty-state p{font-size:1.1em;margin:10px 0}.empty-state p:first-child{font-size:3em;margin-bottom:20px}.words-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:15px}.word-card{background:#f9f9f9;border:2px solid #e0e0e0;border-radius:8px;padding:18px;transition:all .3s ease;position:relative}.word-card:hover{border-color:#667eea;box-shadow:0 5px 15px #667eea33;transform:translateY(-2px)}.word-card.editing{background:#f0f4ff;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.word-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:10px}.word-header h3{margin:0;color:#333;font-size:1.3em;flex:1}.part-of-speech{background:#667eea;color:#fff;padding:4px 10px;border-radius:20px;font-size:.75em;font-weight:600;white-space:nowrap}.word-definition,.word-example{margin-bottom:12px}.word-definition strong,.word-example strong{color:#667eea;display:block;margin-bottom:5px;font-size:.9em}.word-definition p,.word-example p{margin:0;color:#555;line-height:1.5;font-size:.95em}.word-example p{font-style:italic;color:#777}.word-actions{display:flex;gap:8px;margin-top:15px;padding-top:12px;border-top:1px solid #ddd}.btn-edit,.btn-delete{flex:1;padding:8px 12px;border:none;border-radius:6px;font-size:.85em;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-edit{background:#e3f2fd;color:#1976d2;border:1px solid #1976d2}.btn-edit:hover{background:#1976d2;color:#fff}.btn-delete{background:#ffebee;color:#d32f2f;border:1px solid #d32f2f}.btn-delete:hover{background:#d32f2f;color:#fff}@media (max-width: 768px){.words-container{grid-template-columns:1fr}.word-header{flex-direction:column}.part-of-speech{align-self:flex-start}}.filter-bar{margin:20px 0}.filter-label{margin:0 0 12px;color:#333;font-weight:600;font-size:.95em}.filter-buttons{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}.filter-btn{padding:8px 6px;border:2px solid #e0e0e0;background:white;color:#333;border-radius:6px;cursor:pointer;font-weight:600;font-size:.85em;transition:all .3s ease;text-align:center}.filter-btn:hover{border-color:#667eea;color:#667eea}.filter-btn.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border-color:#667eea;box-shadow:0 4px 12px #667eea66}@media (max-width: 768px){.filter-buttons{grid-template-columns:repeat(auto-fill,minmax(35px,1fr));gap:4px}.filter-btn{padding:6px 4px;font-size:.75em}}:root{--primary-color: #667eea;--secondary-color: #764ba2;--text-dark: #333;--text-light: #666;--bg-light: #f9f9f9;--border-color: #e0e0e0}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f5f5f5;color:var(--text-dark);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,#root{height:100%;width:100%}button,input,textarea,select{font-family:inherit}