:root{--bg: #f5f5f5;--surface: #ffffff;--surface-2: #fafafa;--surface-alt: #ececec;--border: #e0e0e0;--border-strong: #bbbbbb;--text: #1a1a1a;--text-secondary: #444444;--text-muted: #666666;--text-dim: #999999;--topbar-bg: #1a1a1a;--topbar-text: #ffffff;--topbar-muted: rgba(255,255,255,.55);--topbar-token-bg: #333333;--tab-bar-bg: #e0e0e0;--tab-bar-border: #bbbbbb;--tab-inactive: #d0d0d0;--tab-inactive-hover: #c8c8c8;--tab-active: #ffffff;--tab-active-text: #1a1a1a;--input-border: #cccccc;--accent: #1a6ef5;--accent-hover: #0f5ce0;--error: #c0392b;--draw-bg: #ffffff}[data-theme=sombre]{--bg: #1e1e1e;--surface: #252526;--surface-2: #2d2d30;--surface-alt: #2a2a2a;--border: #3e3e42;--border-strong: #555555;--text: #cccccc;--text-secondary: #aaaaaa;--text-muted: #888888;--text-dim: #606060;--topbar-bg: #252526;--topbar-text: #cccccc;--topbar-muted: rgba(204,204,204,.5);--topbar-token-bg: #3c3c3c;--tab-bar-bg: #2d2d30;--tab-bar-border: #3e3e42;--tab-inactive: #3c3c3c;--tab-inactive-hover: #464646;--tab-active: #1e1e1e;--tab-active-text: #cccccc;--input-border: #3e3e42;--accent: #4d90fe;--accent-hover: #6aa3ff;--error: #f44747;--draw-bg: #ffffff}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;background:var(--bg);color:var(--text);height:100dvh;display:flex;flex-direction:column}#root{display:contents}.theme-select{font-size:.8rem;padding:.2rem .4rem;border:1px solid var(--border-strong);border-radius:4px;background:var(--surface);color:var(--text);cursor:pointer}.theme-select:focus{outline:none;border-color:var(--accent)}.topbar .theme-select{background:var(--topbar-token-bg);color:var(--topbar-text);border-color:#555}.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}h1{font-size:2.5rem;font-weight:700}.subtitle{color:var(--text-muted);font-size:1.1rem}.btn-primary{padding:.75rem 2rem;font-size:1.1rem;background:var(--accent);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-primary:not(:disabled):hover{background:var(--accent-hover)}.join-form{display:flex;flex-direction:column;align-items:center;gap:.75rem}.join-form-row{display:flex;gap:.5rem}.name-input{padding:.75rem 1rem;font-size:1.1rem;border:2px solid var(--input-border);border-radius:8px;width:22ch;text-align:center;background:var(--surface);color:var(--text)}.name-input:focus{outline:none;border-color:var(--accent)}.token-input{padding:.75rem 1rem;font-size:1.4rem;font-family:monospace;letter-spacing:.15em;text-transform:uppercase;border:2px solid var(--input-border);border-radius:8px;width:14ch;text-align:center;background:var(--surface);color:var(--text)}.token-input:focus{outline:none;border-color:var(--accent)}.landing-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.btn-secondary{padding:.75rem 2rem;font-size:1.1rem;background:var(--surface);color:var(--text);border:2px solid var(--border-strong);border-radius:8px;cursor:pointer;font-weight:600}.btn-secondary:hover{background:var(--surface-alt)}.btn-link{background:none;border:none;color:var(--accent);cursor:pointer;font-size:.95rem;text-decoration:underline;padding:0}.btn-link:hover{color:var(--accent-hover)}.error{color:var(--error);font-weight:500}.app{flex:1;display:flex;flex-direction:column;overflow:hidden}.topbar{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;background:var(--topbar-bg);color:var(--topbar-text);font-size:.9rem;flex-shrink:0}.topbar-label{opacity:.6}.topbar-token{font-family:monospace;font-size:1.1rem;font-weight:700;letter-spacing:.1em;background:var(--topbar-token-bg);padding:.2rem .6rem;border-radius:4px}.topbar-url{opacity:.5;font-size:.8rem;margin-left:auto}.topbar-leave{background:none;border:1px solid #555;border-radius:4px;color:var(--topbar-muted);cursor:pointer;padding:.2rem .5rem;font-size:.9rem}.topbar-leave:hover{background:#333;color:var(--topbar-text)}.board{flex:1;display:flex;flex-direction:column;overflow:hidden}.tab-bar-row{display:flex;align-items:stretch;background:var(--tab-bar-bg);border-bottom:2px solid var(--tab-bar-border);flex-shrink:0}.tab-bar{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;flex:1;gap:2px;padding:4px 4px 0}.tab-bar::-webkit-scrollbar{display:none}.tab-item{display:flex;align-items:center;gap:.35rem;padding:.35rem .75rem;background:var(--tab-inactive);border-radius:6px 6px 0 0;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;font-size:.9rem;color:var(--text-secondary);border:1px solid transparent;border-bottom:none;min-width:0}.tab-item:hover{background:var(--tab-inactive-hover)}.tab-item.active{background:var(--tab-active);color:var(--tab-active-text);border-color:var(--tab-bar-border);font-weight:500}.tab-icon{width:8px;height:8px;border-radius:50%;flex-shrink:0}.tab-icon--code{background:#4a9eff}.tab-icon--draw{background:#ff7a4a}.tab-icon--links{background:#a94fff}.tab-name{max-width:120px;overflow:hidden;text-overflow:ellipsis}.tab-name-edit{width:80px;font-size:.9rem;border:1px solid var(--border-strong);border-radius:3px;padding:0 4px;outline:none;background:var(--surface);color:var(--text)}.tab-close{background:none;border:none;cursor:pointer;color:var(--text-dim);font-size:1rem;line-height:1;padding:0 1px;border-radius:3px;flex-shrink:0}.tab-close:hover{background:var(--border);color:var(--text-muted)}.tab-focus-btn{background:none;border:none;cursor:pointer;padding:0 2px;font-size:11px;line-height:1;opacity:0;flex-shrink:0;color:var(--text-muted);border-radius:3px;transition:opacity .15s}.tab-item:hover .tab-focus-btn{opacity:.55}.tab-focus-btn:hover{opacity:1!important;background:var(--border)}.tab-actions{display:flex;align-items:center;gap:2px;padding:0 .5rem;flex-shrink:0}.tab-add{padding:.3rem .65rem;background:none;border:1px solid var(--border-strong);border-radius:5px;flex-shrink:0;cursor:pointer;font-size:.8rem;color:var(--text-muted);white-space:nowrap}.tab-add:hover{background:var(--tab-inactive-hover)}.tab-import-label{cursor:pointer}.status-dot{width:9px;height:9px;border-radius:50%;margin-left:.25rem;flex-shrink:0}.status-dot.ok{background:#27ae60}.status-dot.ko{background:#e74c3c}.board-main{flex:1;display:flex;overflow:hidden}.board-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.empty-board{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;color:var(--text-dim)}.empty-board-actions{display:flex;gap:1rem}.loading{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-dim)}.panel-grip{width:6px;flex-shrink:0;background:var(--border);cursor:col-resize;display:flex;align-items:center;justify-content:center;position:relative;transition:background .15s;-webkit-user-select:none;user-select:none}.panel-grip:hover,.panel-grip--closed{background:var(--border-strong);cursor:pointer}.panel-grip-toggle{position:absolute;top:50%;transform:translateY(-50%);width:16px;height:40px;background:var(--surface-alt);border:1px solid var(--border-strong);border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-muted);padding:0;line-height:1;opacity:0;transition:opacity .15s}.panel-grip:hover .panel-grip-toggle,.panel-grip--closed .panel-grip-toggle{opacity:1}.participants-panel{flex-shrink:0;background:var(--surface-2);display:flex;flex-direction:column;overflow-y:auto}.participants-header{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;font-size:.85rem;font-weight:600;color:var(--text);border-bottom:1px solid var(--border);flex-shrink:0}.participants-count{background:var(--accent);color:#fff;font-size:.75rem;font-weight:700;padding:1px 6px;border-radius:10px}.no-participants{padding:.75rem;font-size:.82rem;color:var(--text-dim);text-align:center}.participant-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.45rem .75rem;border-bottom:1px solid var(--surface-alt)}.participant-name{font-size:.85rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;cursor:default}.participant-name:hover{text-decoration:underline dotted var(--border-strong)}.participant-name-edit{flex:1;min-width:0;font-size:.85rem;border:1px solid var(--accent);border-radius:3px;padding:1px 4px;outline:none;background:var(--surface);color:var(--text)}.participant-actions{display:flex;gap:.3rem;flex-shrink:0}.perm-btn{flex-shrink:0;padding:.25rem .5rem;font-size:.75rem;border:1px solid var(--border-strong);border-radius:4px;background:var(--surface);cursor:pointer;color:var(--text-muted);white-space:nowrap}.perm-btn:hover{background:var(--surface-alt)}.perm-btn.perm-granted{background:#e8f5e9;border-color:#81c784;color:#2e7d32}.perm-btn.perm-granted:hover{background:#fdecea;border-color:#e57373;color:#c62828}.kick-btn{flex-shrink:0;padding:.25rem .5rem;font-size:.75rem;border:1px solid #e57373;border-radius:4px;background:var(--surface);cursor:pointer;color:#c62828;white-space:nowrap}.kick-btn:hover{background:#fdecea}.kicked-section{border-top:1px solid var(--border);margin-top:.25rem}.kicked-section-title{padding:.4rem .75rem .2rem;font-size:.75rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em}.participant-row--kicked{opacity:.7}.participant-name--kicked{color:var(--text-dim);font-style:italic}.unkick-btn{flex-shrink:0;padding:.25rem .5rem;font-size:.75rem;border:1px solid #81c784;border-radius:4px;background:var(--surface);cursor:pointer;color:#2e7d32;white-space:nowrap}.unkick-btn:hover{background:#e8f5e9}.kicked-screen{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg)}.kicked-box{text-align:center;padding:2rem 3rem;background:var(--surface);border:2px solid #e57373;border-radius:12px;max-width:400px}.kicked-title{font-size:1.2rem;font-weight:600;color:#c62828;margin-bottom:.5rem}.kicked-sub{color:var(--text-muted);font-size:.95rem}.code-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden}.code-toolbar{display:flex;align-items:center;gap:.5rem;padding:.4rem .75rem;background:var(--surface-2);border-bottom:1px solid var(--border);flex-shrink:0}.lang-select{font-size:.85rem;padding:.2rem .4rem;border:1px solid var(--border-strong);border-radius:4px;background:var(--surface);cursor:pointer;color:var(--text)}.lang-select:focus{outline:none;border-color:var(--accent)}.lang-badge{font-size:.82rem;color:var(--text-muted);background:var(--surface-alt);padding:.2rem .55rem;border-radius:4px}.btn-download{margin-left:auto;padding:.25rem .7rem;font-size:.82rem;background:var(--surface);border:1px solid var(--border-strong);border-radius:5px;cursor:pointer;color:var(--text)}.btn-download:hover{background:var(--surface-alt)}.hl-yellow{background:#ffdc0073;border-radius:2px}.hl-red{background:#ff505061;border-radius:2px}.hl-blue{background:#3c8cff61;border-radius:2px}.hl-green{background:#32c85061;border-radius:2px}.hl-orange{background:#ff96286b;border-radius:2px}.toolbar-sep{width:1px;height:20px;background:var(--border-strong);flex-shrink:0}.hl-swatch{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;flex-shrink:0}.hl-swatch.active{border-color:var(--text);box-shadow:0 0 0 1px var(--surface-2)}.btn-hl{padding:.2rem .6rem;font-size:.8rem;background:var(--surface);border:1px solid var(--border-strong);border-radius:4px;cursor:pointer;color:var(--text);white-space:nowrap}.btn-hl:hover{background:var(--surface-alt)}.btn-hl-clear{padding:.2rem .45rem;font-size:.8rem;background:var(--surface);border:1px solid var(--border-strong);border-radius:4px;cursor:pointer;color:var(--text-muted)}.btn-hl-clear:hover{background:#fdecea;color:#c0392b;border-color:#e57373}.editor-container{flex:1;overflow:hidden;display:flex;flex-direction:column}.editor-container .cm-editor{height:100%;font-size:14px}.draw-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden}.draw-toolbar{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--surface-2);border-bottom:1px solid var(--border);flex-shrink:0}.toolbar-label{font-size:.85rem;color:var(--text-muted)}.toolbar-readonly{font-size:.85rem;color:var(--text-dim);font-style:italic}.color-swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}.color-swatch.active{border-color:var(--surface);box-shadow:0 0 0 2px var(--accent)}.width-btn{width:36px;height:24px;display:flex;align-items:center;padding:0 4px;background:var(--surface-alt);border:2px solid transparent;border-radius:4px;cursor:pointer}.width-btn.active{border-color:var(--accent);background:#e0ecff}[data-theme=sombre] .width-btn.active{background:#1e3a5f}.btn-clear{margin-left:auto;padding:.3rem .8rem;font-size:.85rem;background:var(--surface);border:1px solid var(--border-strong);border-radius:6px;cursor:pointer;color:#c0392b}.btn-clear:hover{background:#fdecea}.tool-btn{padding:.2rem .55rem;font-size:.8rem;background:var(--surface);border:1px solid var(--border-strong);border-radius:4px;cursor:pointer;color:var(--text-muted);white-space:nowrap}.tool-btn:hover{background:var(--surface-alt);color:var(--text)}.tool-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.draw-canvas-wrapper{flex:1;position:relative;overflow:hidden}.draw-canvas{width:100%;height:100%;display:block;background:var(--draw-bg);cursor:crosshair;touch-action:none}.draw-canvas--readonly,.draw-canvas--select{cursor:default}.draw-canvas--eraser{cursor:cell}.draw-canvas--text{cursor:text}.btn-delete-shape{padding:.3rem .8rem;font-size:.85rem;background:var(--surface);border:1px solid #e57373;border-radius:6px;cursor:pointer;color:#c0392b}.btn-delete-shape:hover{background:#fdecea}.draw-text-input{position:absolute;background:transparent;border:1px dashed var(--border-strong);border-radius:2px;padding:1px 3px;outline:none;min-width:60px;font-family:system-ui,sans-serif;color:inherit}.links-board{flex:1;display:flex;flex-direction:column;overflow:hidden}.links-form{display:flex;align-items:flex-start;gap:.5rem;padding:.6rem .75rem;background:var(--surface-2);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}.links-input{flex:1;min-width:180px;padding:.35rem .6rem;font-size:.9rem;border:1px solid var(--input-border);border-radius:5px;background:var(--surface);color:var(--text)}.links-input:focus{outline:none;border-color:var(--accent)}.links-input--url{min-width:240px}.links-add-btn{padding:.35rem .9rem;font-size:.88rem;background:var(--accent);color:#fff;border:none;border-radius:5px;cursor:pointer;font-weight:600;white-space:nowrap}.links-add-btn:disabled{opacity:.5;cursor:not-allowed}.links-add-btn:not(:disabled):hover{background:var(--accent-hover)}.links-error{font-size:.82rem;color:var(--error);align-self:center}.links-list{flex:1;overflow-y:auto;padding:.75rem 1rem;display:flex;flex-direction:column;gap:.5rem}.links-empty{color:var(--text-dim);font-size:.9rem;text-align:center;padding:2rem 0}.link-row{display:flex;align-items:center;gap:.75rem;padding:.6rem .85rem;background:var(--surface);border:1px solid var(--border);border-radius:7px;transition:border-color .15s}.link-row:hover{border-color:var(--accent)}.link-anchor{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;text-decoration:none}.link-label{font-size:.92rem;font-weight:600;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.link-anchor:hover .link-label{text-decoration:underline}.link-url{font-size:.78rem;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.link-delete{flex-shrink:0;background:none;border:1px solid transparent;border-radius:4px;cursor:pointer;color:var(--text-dim);font-size:.9rem;padding:.15rem .35rem;line-height:1}.link-delete:hover{border-color:#e57373;color:#c62828;background:#fdecea}.private-btn{flex-shrink:0;padding:.25rem .5rem;font-size:.75rem;border:1px solid var(--border-strong);border-radius:4px;background:var(--surface);cursor:pointer;color:var(--text-muted);white-space:nowrap}.private-btn:hover{background:var(--surface-alt);color:var(--text)}.private-panel-header{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--border);flex-shrink:0}.private-back{background:none;border:none;cursor:pointer;color:var(--accent);font-size:.85rem;padding:0;white-space:nowrap}.private-back:hover{text-decoration:underline}.private-panel-name{font-size:.85rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.private-panel-tabs{display:flex;flex-direction:column;flex-shrink:0;border-bottom:1px solid var(--border)}.private-panel-tab{padding:.35rem .75rem;font-size:.82rem;cursor:pointer;color:var(--text-secondary);border-left:2px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.private-panel-tab:hover{background:var(--surface-alt)}.private-panel-tab.active{border-left-color:var(--accent);color:var(--text);font-weight:500;background:var(--surface-alt)}.private-panel-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.private-drawer{flex-shrink:0;border-top:2px solid var(--border);display:flex;flex-direction:column;background:var(--surface-2)}.private-drawer.open{flex-shrink:0}.private-drawer-handle{height:5px;cursor:ns-resize;background:transparent;flex-shrink:0}.private-drawer-handle:hover{background:var(--accent);opacity:.4}.private-drawer-toggle{padding:.4rem .75rem;background:none;border:none;cursor:pointer;font-size:.85rem;color:var(--text-muted);text-align:left;width:100%}.private-drawer-toggle:hover{background:var(--surface-alt);color:var(--text)}.private-board{flex:1;display:flex;flex-direction:column;overflow:hidden;border-top:1px solid var(--border)}.private-tab-row{display:flex;align-items:stretch;background:var(--tab-bar-bg);border-bottom:1px solid var(--tab-bar-border);flex-shrink:0;gap:2px;padding:3px 4px 0}.private-tab-list{display:flex;flex:1;overflow-x:auto;scrollbar-width:none;gap:2px}.private-tab-list::-webkit-scrollbar{display:none}.private-tab-item{display:flex;align-items:center;gap:.3rem;padding:.3rem .65rem;background:var(--tab-inactive);border-radius:5px 5px 0 0;cursor:pointer;font-size:.82rem;color:var(--text-secondary);white-space:nowrap;-webkit-user-select:none;user-select:none}.private-tab-item:hover{background:var(--tab-inactive-hover)}.private-tab-item.active{background:var(--tab-active);color:var(--tab-active-text);font-weight:500}.private-tab-name{max-width:100px;overflow:hidden;text-overflow:ellipsis}.private-content{flex:1;overflow:hidden;display:flex;flex-direction:column}