*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif}canvas{width:100%;height:100%;display:block}header{position:fixed;top:0;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1rem 2rem;box-shadow:0 2px 10px #0000001a;z-index:100;display:flex;justify-content:space-between;align-items:center;gap:1rem}header h1{font-size:1.5rem;font-weight:600;color:#333;flex-shrink:0}.controls{display:flex;gap:1rem;align-items:center;flex:1}.language-selector{display:flex;gap:.5rem;align-items:center;flex-shrink:0}.room-switcher-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;transition:all .2s;font-size:.9rem;color:#333;font-weight:500}.room-switcher-btn:hover{background:#e9ecef;border-color:#3498db}.room-icon{font-size:1.2rem}.room-name{font-family:monospace;color:#3498db}.room-switcher-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center}.room-switcher-modal.hidden{display:none}.modal-overlay{position:absolute;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{position:relative;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0003;width:90%;max-width:500px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid #e0e0e0}.modal-header h3{margin:0;font-size:1.25rem;color:#333}.modal-close{background:none;border:none;font-size:2rem;color:#999;cursor:pointer;line-height:1;padding:0;width:32px;height:32px;border-radius:6px;transition:all .2s}.modal-close:hover{background:#f0f0f0;color:#333}.modal-body{padding:1.5rem;overflow-y:auto;flex:1}.current-room{display:flex;align-items:center;gap:.5rem;padding:1rem;background:#e3f2fd;border-radius:8px;margin-bottom:1.5rem;font-size:.9rem}.current-room strong{font-family:monospace;color:#1976d2;font-size:1rem}.btn-copy{background:none;border:none;cursor:pointer;font-size:1.2rem;padding:.25rem;margin-left:auto;border-radius:4px;transition:background .2s}.btn-copy:hover{background:#0000001a}.room-actions{display:flex;gap:.75rem;margin-bottom:1.5rem}.room-actions input{flex:1;padding:.6rem;border:1px solid #ddd;border-radius:6px;font-size:.9rem}.room-actions input:focus{outline:none;border-color:#3498db}.room-list-container h4{font-size:.85rem;text-transform:uppercase;color:#666;margin-bottom:.75rem;letter-spacing:.5px}.room-list{display:flex;flex-direction:column;gap:.5rem}.room-item{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:6px;transition:all .2s}.room-item:hover{background:#e9ecef}.room-item.current{background:#e3f2fd;border-color:#3498db}.room-info{display:flex;flex-direction:column;gap:.25rem}.room-id{font-family:monospace;font-weight:600;color:#333}.room-stats{font-size:.8rem;color:#666}.btn-join{padding:.4rem .8rem;background:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.85rem;transition:background .2s}.btn-join:hover{background:#2980b9}.badge-current{font-size:.75rem;padding:.25rem .5rem;background:#1976d2;color:#fff;border-radius:12px;font-weight:600}.loading,.error,.empty{padding:2rem;text-align:center;color:#999;font-style:italic}.error{color:#e74c3c}.lang-btn{background:none;border:2px solid transparent;border-radius:6px;padding:.25rem .5rem;font-size:1.5rem;cursor:pointer;transition:all .2s;line-height:1}.lang-btn:hover{background:#f0f0f0}.lang-btn.active{border-color:#3498db;background:#e3f2fd}#clearBtn{padding:.5rem 1rem;background:#e74c3c;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.9rem;transition:background .2s}#clearBtn:hover{background:#c0392b}#status{font-size:.85rem;color:#666;padding:.5rem 1rem;background:#f8f9fa;border-radius:20px;border:1px solid #e0e0e0}.config-panel{position:fixed;top:80px;right:20px;width:320px;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026;z-index:1000;transition:transform .3s ease,opacity .3s ease}.config-panel.collapsed .config-content{display:none}.config-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid #e0e0e0;cursor:pointer;-webkit-user-select:none;user-select:none}.config-header h3{font-size:1rem;font-weight:600;color:#333}.toggle-btn{background:none;border:none;font-size:1.5rem;color:#666;cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s}.toggle-btn:hover{background:#f0f0f0}.config-content{padding:1.25rem;max-height:calc(100vh - 200px);overflow-y:auto}.config-section{margin-bottom:1.5rem}.config-section:last-of-type{margin-bottom:1rem}.section-title{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.config-section h4{font-size:.85rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px;margin:0}.badge{font-size:.7rem;padding:.15rem .5rem;border-radius:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.badge-shared{background:#e3f2fd;color:#1976d2}.badge-local{background:#f3e5f5;color:#7b1fa2}.section-description{font-size:.75rem;color:#999;margin:0 0 .75rem;font-style:italic}.input-group{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.input-group label{font-size:.9rem;color:#555;flex:1}.input-group input[type=number]{width:80px;padding:.4rem .6rem;border:1px solid #ddd;border-radius:6px;font-size:.9rem;transition:border-color .2s}.input-group input[type=number]:focus{outline:none;border-color:#3498db}.input-group input[type=color]{width:50px;height:35px;min-width:50px;border:1px solid #ddd;border-radius:6px;cursor:pointer;flex-shrink:0}.color-opacity-group{display:flex;align-items:center;gap:.5rem;flex:1}.color-opacity-group:has(input[type=color]:only-child){justify-content:flex-end}.input-group input[type=range]{flex:1}.input-group span{font-size:.85rem;color:#666;min-width:40px;text-align:right}.config-actions{display:flex;gap:.75rem;margin-top:1rem;padding-top:1rem;border-top:1px solid #e0e0e0}.btn-primary,.btn-secondary{flex:1;padding:.6rem;border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-primary{background:#3498db;color:#fff}.btn-primary:hover{background:#2980b9;transform:translateY(-1px);box-shadow:0 2px 8px #3498db4d}.btn-secondary{background:#ecf0f1;color:#555}.btn-secondary:hover{background:#bdc3c7}.config-content::-webkit-scrollbar{width:6px}.config-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.config-content::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:10px}.config-content::-webkit-scrollbar-thumb:hover{background:#a0aec0}