.pronunciation-assessment{width:100%;margin:0 auto;padding:20px;background-color:#ffffff1a;border-radius:8px;color:#fff;display:flex;gap:20px}.main-column{flex:1;width:50%;min-width:0;max-width:50%}.logs-column{flex:1;width:50%;min-width:0;max-width:50%;max-height:calc(100vh - 40px);overflow-y:auto}.pronunciation-assessment h2{color:#61dafb;margin-bottom:20px;text-align:center}.connection-panel{display:flex;align-items:center;margin-bottom:20px;padding:10px;background-color:#0003;border-radius:4px}.server-url{flex-grow:1;margin-right:10px;font-size:14px;color:#ccc}.status-indicator{margin-left:10px;padding:5px 10px;border-radius:4px;font-size:14px}.status-indicator.connected{background-color:#4caf504d;color:#4caf50}.status-indicator.disconnected{background-color:#f443364d;color:#f44336}.reference-text-panel{margin-bottom:20px}.reference-text-panel label{display:block;margin-bottom:5px;font-weight:700;color:#61dafb}.reference-text-panel textarea{width:100%;height:100px;padding:10px;border-radius:4px;border:1px solid #444;background-color:#0000004d;color:#fff;resize:vertical}.control-panel{display:flex;justify-content:center;margin-bottom:20px}.control-panel button{padding:10px 20px;border:none;border-radius:4px;font-size:16px;font-weight:700;cursor:pointer;transition:background-color .3s}.control-panel button.start{background-color:#4caf50;color:#fff}.control-panel button.start:hover{background-color:#3e8e41}.control-panel button.stop{background-color:#f44336;color:#fff}.control-panel button.stop:hover{background-color:#d32f2f}.control-panel button:disabled{background-color:#555;cursor:not-allowed}.status-message{margin:20px 0;padding:10px;background-color:#ffffff1a;border-radius:4px;text-align:center;min-height:40px}.results-panel{background-color:#0003;border-radius:8px;padding:20px;margin-top:20px}.results-panel h3{color:#61dafb;margin-top:0;margin-bottom:15px}.score-cards{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.score-card{flex:1;min-width:120px;background-color:#0000004d;border-radius:4px;padding:15px;text-align:center}.score-label{font-size:14px;margin-bottom:5px;color:#ccc}.score-value{font-size:24px;font-weight:700}.recognized-text{background-color:#0000004d;border-radius:4px;padding:15px;margin-bottom:20px}.recognized-text p{margin:0;white-space:pre-wrap;word-break:break-word}.word-scores{background-color:#0000004d;border-radius:4px;padding:15px}.words-container{display:flex;flex-wrap:wrap;gap:8px}.word-item{padding:8px 12px;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center}.word-text{font-weight:700;margin-bottom:3px}.word-score{font-size:12px}.history-panel{background-color:#0003;border-radius:8px;padding:20px;margin-top:30px}.history-panel h3{color:#61dafb;margin-top:0;margin-bottom:15px;border-bottom:1px solid rgba(97,218,251,.3);padding-bottom:8px}.history-panel ul{list-style:none;padding:0;margin:0;max-height:400px;overflow-y:auto}.history-item{background-color:#0000004d;border-radius:4px;padding:15px;margin-bottom:15px;transition:all .3s ease}.history-item:hover{background-color:#0006;transform:translateY(-2px);box-shadow:0 2px 8px #0003}.history-timestamp{font-size:12px;color:#aaa;margin-bottom:8px}.history-text{font-size:16px;margin-bottom:12px;line-height:1.4;font-style:italic}.history-score{font-weight:700;font-size:18px;margin-bottom:10px}.history-words{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.history-word{display:inline-block;transition:transform .2s ease}.history-word:hover{transform:scale(1.1)}.token-input{display:flex;align-items:center;margin-right:10px}.token-input label{margin-right:5px;font-size:14px;color:#ccc}.token-input input{background-color:#0000004d;border:1px solid rgba(255,255,255,.2);color:#fff;padding:5px 8px;border-radius:4px;font-size:14px;width:120px}.token-input input:disabled{opacity:.6;cursor:not-allowed}button.connect{background-color:#2196f3;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer}button.connect:hover{background-color:#0b7dda}button.disconnect{background-color:#f44336;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer}button.disconnect:hover{background-color:#d32f2f}.logs-panel{height:100%;margin-top:0;background-color:#0003;border-radius:4px;overflow:hidden;display:flex;flex-direction:column}.logs-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background-color:#2196f333;border-bottom:1px solid rgba(33,150,243,.4)}.logs-controls{display:flex;align-items:center;gap:10px}.logs-header h3{margin:0;font-size:16px;color:#2196f3}.toggle-icon{color:#2196f3;font-size:18px;cursor:pointer;padding:5px;border-radius:4px;background-color:#2196f31a;transition:background-color .2s}.toggle-icon:hover{background-color:#2196f34d}.logs-content{flex:1;overflow-y:auto;padding:10px}.no-logs{color:#999;text-align:center;font-style:italic;padding:20px 0}.logs-list{display:flex;flex-direction:column;gap:8px}.log-entry{padding:8px;border-radius:4px;font-size:13px;display:flex;flex-direction:column;gap:8px}.log-entry-header{display:flex;justify-content:space-between;align-items:center}.log-entry-info{display:flex;gap:10px;align-items:center}.log-actions{display:flex;gap:5px;align-items:center}.log-info{background-color:#2196f31a;border-left:3px solid #2196F3}.log-sent{background-color:#4caf501a;border-left:3px solid #4CAF50}.log-received{background-color:#a09f9d81;border-left:3px solid #FFC107}.log-success{background-color:#3d9c181a!important;border-left:3px solid #4CAF50!important}.log-error{background-color:#f443361a;border-left:3px solid #F44336}.log-timestamp{color:#999;font-family:monospace;white-space:nowrap}.log-direction{font-weight:700;text-transform:capitalize}.copy-json-btn,.view-json-btn{background-color:#2196f31a!important;color:#2196f3!important;padding:4px!important;transition:background-color .2s!important}.copy-json-btn:hover,.view-json-btn:hover{background-color:#2196f333!important}.copy-json-btn.copied{background-color:#4caf5033!important;color:#4caf50!important}.view-json-btn{background-color:#9c27b01a!important;color:#9c27b0!important}.view-json-btn:hover{background-color:#9c27b033!important}.log-data{margin:0;white-space:pre-wrap;word-break:break-all;font-family:monospace;font-size:12px;max-height:300px;overflow-y:auto;background-color:#0000000d;padding:8px;border-radius:3px;border-left:3px solid rgba(0,0,0,.1)}.clear-logs-btn{background-color:#f44336b3;color:#fff;border:none;padding:5px 10px;border-radius:4px;cursor:pointer;font-size:12px}.clear-logs-btn:hover{background-color:#f44336}.clear-logs-btn:disabled{background-color:#f443364d;cursor:not-allowed}