:root{--primary-blue: #3498db;--dark-blue: #2980b9;--light-blue-bg: #eaf4fc;--light-blue-border: #d6eaf8;--light-green-bg: #e8f8f5;--green-border: #1abc9c;--context-bg: rgba(0,0,0,.03);--bg-color: #f4f7f9;--app-bg-color: #ffffff;--text-color: #333;--text-muted-color: #666;--input-border-color: #ddd;--input-focus-shadow: #eaf4fc;--shadow-color: rgba(0, 0, 0, .08);--border-radius: 12px;--shadow: 0 4px 15px var(--shadow-color);--card-bg-green: var(--light-green-bg);--card-border-green: var(--green-border);--card-bg-blue: var(--light-blue-bg);--card-border-blue: var(--primary-blue);--card-bg-yellow: #fef9e7;--card-border-yellow: #f1c40f;--card-bg-pink: #fdeef4;--card-border-pink: #e91e63;--modal-overlay: rgba(0, 0, 0, .5);--modal-bg: #ffffff}html.dark-mode{--primary-blue: #3498db;--dark-blue: #5dade2;--light-blue-bg: #2c3e50;--light-blue-border: #34495e;--light-green-bg: #213f3a;--green-border: #1abc9c;--context-bg: rgba(255,255,255,.05);--bg-color: #1a1d21;--app-bg-color: #282c34;--text-color: #e0e0e0;--text-muted-color: #a0a0e0;--input-border-color: #444;--input-focus-shadow: rgba(52, 152, 219, .2);--shadow-color: rgba(0, 0, 0, .2);--modal-overlay: rgba(0, 0, 0, .7);--modal-bg: #282c34}*{box-sizing:border-box;margin:0;padding:0}html{background-color:var(--bg-color);transition:background-color .3s}body{font-family:Poppins,sans-serif;color:var(--text-color);display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:0 1rem;transition:color .3s}#root{width:100%;max-width:600px}.app-container{position:relative;text-align:center;padding:2rem;margin:2rem 0;background:var(--app-bg-color);border-radius:var(--border-radius);box-shadow:var(--shadow);transition:background-color .3s,box-shadow .3s}.header-controls{position:absolute;top:1rem;right:1rem;display:flex;gap:.5rem}.icon-button{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-muted-color);transition:transform .2s,color .2s;padding:.2rem;display:flex;align-items:center;justify-content:center}.icon-button:hover{transform:scale(1.1);color:var(--primary-blue)}.icon-button svg{width:24px;height:24px}header h1{font-size:2.5rem;color:var(--primary-blue);margin-bottom:.5rem}header p{color:var(--text-muted-color);font-size:1.1rem;margin-bottom:2rem}.search-form{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}.word-input{flex:1 1 100%;padding:.75rem 1rem;border:1px solid var(--input-border-color);border-radius:var(--border-radius);font-family:inherit;font-size:1rem;background-color:var(--app-bg-color);color:var(--text-color);transition:border-color .2s,box-shadow .2s,background-color .3s}@media(min-width:600px){.word-input{flex-grow:1;flex-basis:0}}.word-input:focus{outline:none;border-color:var(--primary-blue);box-shadow:0 0 0 3px var(--input-focus-shadow)}.button-group{display:flex;gap:.5rem;width:100%}@media(min-width:600px){.button-group{width:auto;flex:0 1 auto}}.submit-button,.translate-button{padding:.5rem 1rem;border:none;border-radius:var(--border-radius);color:#fff;font-family:inherit;font-size:.875rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s,background-color .2s,opacity .2s,color .2s,border-color .2s;white-space:nowrap;flex-grow:1}.submit-button{background:linear-gradient(45deg,var(--primary-blue),var(--dark-blue))}.translate-button{background-color:transparent;border:2px solid var(--input-border-color);color:var(--text-muted-color)}.translate-button:not(:disabled):hover{background-color:var(--light-blue-bg);border-color:var(--primary-blue);color:var(--primary-blue)}.submit-button:disabled,.translate-button:disabled{opacity:.6;cursor:not-allowed}.submit-button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 20px #3498db66}.welcome-container{text-align:center;padding:2rem 1rem;background-color:var(--light-blue-bg);border:1px solid var(--light-blue-border);border-radius:var(--border-radius);color:var(--text-muted-color)}.welcome-container h2{color:var(--text-color);margin-bottom:.5rem}.result-container{text-align:left;min-height:50px;background:transparent;border:none;padding:0}.response-content{font-family:inherit;font-size:1rem;line-height:1.6}.response-content hr{border:0;height:1px;background-color:var(--input-border-color);margin:1.5rem 0;transition:background-color .3s}.introduction-summary{font-size:1.1rem;color:var(--text-muted-color);margin-bottom:1rem;padding-bottom:1rem;text-align:left;border-bottom:1px solid var(--input-border-color)}.meanings-summary{font-size:1.1rem;font-weight:600;color:var(--text-muted-color);margin-bottom:1.5rem;text-align:left}.meanings-summary strong{color:var(--primary-blue)}.ambiguity-note{color:var(--primary-blue);font-weight:600;font-size:1.2rem;margin-bottom:1rem}.definition-box{border:none;border-left:4px solid var(--green-border);border-radius:0 4px 4px 0;padding:1rem;background-color:var(--light-green-bg);margin-bottom:1.5rem;transition:background-color .3s,border-color .3s}.root-word-display{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;font-size:1.5rem;font-weight:600;color:var(--text-color);margin:0 0 .75rem;line-height:1.2}.definition-box p{margin-bottom:0;white-space:pre-wrap}.context-section{background-color:var(--context-bg);padding:1rem;border-radius:8px;margin-bottom:1.5rem;transition:background-color .3s}.context-section h4{font-weight:600;color:var(--dark-blue);margin-bottom:.5rem;font-size:1rem}.context-section p{margin-bottom:0}.context-section em{color:var(--text-muted-color)}.response-content h3{font-size:1.3rem;font-weight:700;color:var(--text-color);margin:1.5rem 0 1rem;transition:color .3s}.part-of-speech-section h3:first-of-type{margin-top:0}.response-content p{margin-bottom:1.5rem}.response-content p:last-child{margin-bottom:0}.response-content ul{padding-left:20px;margin:0;list-style-position:outside}.response-content li{padding-left:4px;margin-bottom:.5rem}.response-content li:last-child{margin-bottom:0}.response-content strong{color:var(--dark-blue);font-weight:600;transition:color .3s;display:inline-flex;align-items:center;flex-wrap:wrap}.error-message{color:#e74c3c;background-color:#e74c3c1a;border:1px solid rgba(231,76,60,.3);border-radius:var(--border-radius);padding:1rem;margin-bottom:1rem}.spinner{border:4px solid rgba(0,0,0,.1);width:36px;height:36px;border-radius:50%;border-left-color:var(--primary-blue);animation:spin 1s ease infinite;margin:2rem auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.analysis-item{background-color:var(--app-bg-color);border-radius:var(--border-radius);padding:1.5rem;margin-bottom:1rem;box-shadow:0 2px 8px var(--shadow-color);border:1px solid var(--input-border-color);transition:background-color .3s,border-color .3s,box-shadow .3s}.analysis-item:last-child{margin-bottom:0}.analysis-item.color-0{background-color:var(--card-bg-green);border-color:var(--card-border-green);--accent-color: var(--card-border-green)}.analysis-item.color-1{background-color:var(--card-bg-blue);border-color:var(--card-border-blue);--accent-color: var(--card-border-blue)}.analysis-item.color-2{background-color:var(--card-bg-yellow);border-color:var(--card-border-yellow);--accent-color: var(--card-border-yellow)}.analysis-item.color-3{background-color:var(--card-bg-pink);border-color:var(--card-border-pink);--accent-color: var(--card-border-pink)}.analysis-item[class*=color-] .definition-box{background-color:var(--app-bg-color);border-left-color:var(--accent-color)}.analysis-item[class*=color-] .context-section h4{color:var(--accent-color)}.translation-content{margin-top:1.5rem;padding-top:1.5rem;border-top:2px dashed var(--input-border-color);transition:border-color .3s}.translation-content h4{font-weight:600;color:var(--text-muted-color);margin-bottom:1.5rem;font-size:1rem;text-transform:uppercase;letter-spacing:.5px}.pinyin{font-size:.9em;color:var(--text-muted-color);font-weight:400;margin-left:.25em;text-transform:none}.pronounce-button{background:none;border:none;cursor:pointer;padding:0;margin-left:.4rem;display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted-color);transition:color .2s,transform .2s;vertical-align:middle;position:relative;top:-1px}.pronounce-button:hover{color:var(--primary-blue);transform:scale(1.1)}.pronounce-icon{width:1.1em;height:1.1em}.translation-pair{white-space:nowrap}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--modal-overlay);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1000;display:flex;justify-content:center;align-items:center;padding:1rem;animation:fadeIn .2s ease-out}.modal-content{background-color:var(--modal-bg);color:var(--text-color);padding:2rem;border-radius:var(--border-radius);width:100%;max-width:450px;box-shadow:0 10px 25px #0003;position:relative;animation:slideUp .3s ease-out}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--input-border-color)}.modal-header h2{font-size:1.25rem;margin:0;color:var(--primary-blue)}.close-button{background:none;border:none;font-size:1.5rem;color:var(--text-muted-color);cursor:pointer;padding:.2rem;line-height:1}.close-button:hover{color:var(--text-color)}.setting-group{margin-bottom:1.5rem;text-align:left}.setting-label{display:block;font-weight:600;margin-bottom:.5rem;font-size:.9rem;color:var(--text-color)}.custom-select-container{position:relative;width:100%}.custom-select-trigger{width:100%;padding:.75rem 1rem;background-color:var(--app-bg-color);border:1px solid var(--input-border-color);border-radius:var(--border-radius);cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--text-color);transition:border-color .2s;-webkit-user-select:none;user-select:none}.custom-select-trigger:hover{border-color:var(--primary-blue)}.custom-select-options{position:absolute;top:100%;left:0;right:0;margin-top:.5rem;background-color:var(--app-bg-color);border:1px solid var(--input-border-color);border-radius:var(--border-radius);max-height:200px;overflow-y:auto;z-index:10;box-shadow:0 4px 10px var(--shadow-color);list-style:none;padding:.5rem 0}.custom-option{padding:.75rem 1rem;cursor:pointer;transition:background-color .2s;color:var(--text-color)}.custom-option:hover{background-color:var(--light-blue-bg)}.custom-option.selected{background-color:var(--light-blue-bg);color:var(--primary-blue);font-weight:600}.range-slider{-webkit-appearance:none;width:100%;height:6px;background:var(--input-border-color);border-radius:3px;outline:none;margin:1rem 0}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary-blue);cursor:pointer;transition:transform .2s;box-shadow:0 2px 5px #0003}.range-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.range-value{float:right;color:var(--primary-blue);font-weight:600}.test-voice-btn{width:100%;padding:.75rem;background-color:var(--light-green-bg);color:var(--green-border);border:1px solid var(--green-border);border-radius:var(--border-radius);font-weight:600;cursor:pointer;transition:all .2s}.test-voice-btn:hover{background-color:var(--green-border);color:#fff}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:600px){body{padding:0 .5rem}.app-container{padding:1.5rem 1rem;margin:1rem 0}header h1{font-size:2rem}header p{font-size:1rem;margin-bottom:1.5rem}.word-input{padding:.8rem 1rem}.submit-button,.translate-button{padding:.8rem 1rem;font-size:1rem}.analysis-item{padding:1rem}.response-content h3{font-size:1.1rem}.header-controls{top:1.5rem}}