*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);height:100vh;overflow:hidden;color:#fff;-webkit-overflow-scrolling:touch;position:fixed;width:100%;top:0;left:0}.canvas-container{display:flex;flex-direction:column;height:100vh;height:100dvh;position:relative;overflow:hidden}.toolbar{background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:15px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;border-bottom:1px solid rgba(255,255,255,.1);overflow:visible;position:relative;z-index:300}.toolbar-section{display:flex;align-items:center;gap:8px}.toolbar-section:first-child{margin-right:auto}.toolbar-section:last-child{justify-content:space-between;gap:8px;width:100%}h1{font-size:1.5rem;margin:0}.connection-status{display:flex;align-items:center;gap:10px;font-size:.9rem;position:relative;margin-right:auto}.main-toolbar-buttons{display:flex;align-items:center;gap:8px;margin-left:auto}.status-indicator{font-size:1.2rem;transition:color .3s ease}.status-indicator.connected{color:#4ade80}.status-indicator.disconnected{color:#f87171}.status-indicator.connecting{color:#fbbf24;animation:pulse 1.5s infinite}#status-text{display:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.user-count{background:#ffffff1a;padding:4px 8px;border-radius:12px;font-size:.8rem;cursor:pointer;transition:background .2s ease}.user-count:hover{background:#fff3}.tool-group{display:flex;align-items:center;gap:8px;position:relative;overflow:visible}.tool-group.slider-group{display:flex;align-items:center;gap:8px;cursor:default}.tool-group.slider-group input[type=range]{display:block}.tool-group.slider-group .value-display{font-size:.8rem;color:#fffc}.slider-icon{width:16px;height:16px;color:#ffffffe6;display:none}.slider-text{display:inline}.tool-group label{font-size:.9rem;min-width:max-content}#brush-size{width:100px}.tool-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:8px 15px;border-radius:6px;cursor:pointer;transition:all .3s ease;font-size:.9rem;display:flex;align-items:center;gap:6px}#undo-btn svg{flex-shrink:0}.tool-btn:hover{background:#fff3;transform:translateY(-1px)}.tool-btn:disabled{opacity:.5;cursor:not-allowed}.tool-btn:disabled:hover{background:#ffffff1a;transform:none}.brush-icons{display:flex;flex-direction:column;gap:8px;position:relative;overflow:visible}.brush-icon-btn{background:#ffffff1a;border:2px solid rgba(255,255,255,.2);color:#fff;opacity:.5;width:42px;height:42px;border-radius:10px;cursor:pointer;transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease;will-change:opacity,transform;display:flex;align-items:center;justify-content:center;position:relative;overflow:visible}.brush-icon-btn svg{width:28px;height:28px;fill:currentColor;transition:none}.brush-icon-btn img{width:28px;height:28px;filter:brightness(0) invert(1);transition:none}.brush-icon-btn:hover{background:#fff3;border-color:#fff6;opacity:.8;transform:translateY(-2px) scale(1.05);box-shadow:0 4px 12px #0003}.brush-icon-btn.active{background:#fff6;border-color:#fffc;opacity:1;box-shadow:0 4px 16px #0000004d,0 0 0 2px #ffffff4d;transform:translateY(-1px)}.brush-icon-btn.active:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px #0006,0 0 0 2px #fff6}.brush-icon-btn[title]:hover:after{content:attr(title);position:fixed;top:50%;left:77px;transform:translateY(-50%);background:#000;color:#fff;padding:8px 12px;border-radius:6px;font-size:.85rem;white-space:nowrap;z-index:99999;pointer-events:none;opacity:0;animation:tooltipFadeIn .2s ease-out forwards;box-shadow:0 4px 12px #0009;border:1px solid rgba(255,255,255,.1);max-width:calc(100vw - 100px);word-wrap:break-word}.brush-icon-btn[title]:hover:before{content:"";position:fixed;top:50%;left:71px;transform:translateY(-50%);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #000000;z-index:99998;pointer-events:none;opacity:0;animation:tooltipFadeIn .2s ease-out forwards}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(-50%) translate(-10px)}to{opacity:1;transform:translateY(-50%) translate(0)}}.canvas-wrapper{flex:1;position:relative;overflow:hidden;background:#5a5a5a;margin:0;display:flex;align-items:center;justify-content:center}.brush-toolbar{position:absolute;top:8px;left:8px;background:#000000a6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:70px;padding:15px 10px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;border-right:1px solid rgba(255,255,255,.1);border-radius:6px;z-index:1000}.toolbar-divider{width:80%;height:1px;background:#fff3;margin:15px 0}.color-picker-container{display:flex;flex-direction:column;align-items:center;gap:6px}.color-picker-container #color-picker{width:40px;height:40px;border:none;border-radius:50%;cursor:pointer;background:none;padding:0;outline:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.color-picker-container #color-picker::-webkit-color-swatch-wrapper{padding:0;border:none;border-radius:50%}.color-picker-container #color-picker::-webkit-color-swatch{border:1px solid rgba(255,255,255,.85);border-radius:50%;box-shadow:0 0 0 1px #000000d9}.color-picker-container #color-picker::-moz-color-swatch{border:1px solid rgba(255,255,255,.85);border-radius:50%;box-shadow:0 0 0 1px #000000d9}#drawing-canvas{display:block;background:#fff;max-width:100%;max-height:100%;border-radius:4px;box-shadow:0 2px 8px #0003}.cursors-layer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:10}.user-cursor{position:absolute;width:20px;height:20px;border-radius:50%;border:2px solid;transform:translate(-50%,-50%);transition:all .1s ease;pointer-events:none;z-index:15}.user-cursor:after{content:attr(data-username);position:absolute;top:25px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:4px;font-size:.7rem;white-space:nowrap;pointer-events:none}.users-panel{position:fixed;top:52px;left:80px;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;padding:15px;min-width:200px;max-height:300px;overflow-y:auto;border:1px solid rgba(255,255,255,.1);z-index:999999;display:none;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease}.users-panel.active{display:block;opacity:1;transform:translateY(0)}.users-panel h3{font-size:1rem;margin-bottom:10px;text-align:center}.user-item{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:.9rem}.user-color{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.3)}@media (max-width: 768px){.toolbar{padding:8px 12px;gap:8px}.toolbar-section{gap:12px;flex-wrap:wrap}.toolbar-section:first-child{flex-direction:row;align-items:center;justify-content:space-between;width:100%}.toolbar-section:last-child{justify-content:space-between;gap:4px;width:100%}.main-toolbar-buttons{gap:4px}h1{font-size:1.1rem;margin:0}.connection-status{font-size:.8rem;gap:6px}.user-count{font-size:.7rem;padding:2px 6px}.tool-group{background:#ffffff0d;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.1);gap:4px;min-height:44px;justify-content:center;align-items:center}.tool-group:not(.slider-group){background:#ffffff0d;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.1);gap:4px;min-height:44px;justify-content:center;align-items:center}.tool-group label{font-size:.75rem;text-align:center;display:block;width:100%;margin-bottom:2px}#brush-size,#taper{width:100%;height:28px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff3;border-radius:14px;outline:none}#brush-size::-webkit-slider-thumb,#taper::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#0ff;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0000004d}.tool-btn{padding:8px 12px;font-size:.8rem;min-height:36px;text-align:center}.tool-btn .button-text{display:none}#undo-btn{padding:8px;min-width:36px;justify-content:center}.brush-toolbar{width:55px;border-radius:6px;background:#000000a6}.brush-icons{gap:6px;justify-content:center;align-items:center;flex-direction:column}.brush-icon-btn{width:36px;height:36px;border-radius:8px}.brush-icon-btn svg{width:24px;height:24px}.color-picker-container #color-picker{width:32px;height:32px;border-radius:50%}.color-picker-container #color-picker::-webkit-color-swatch-wrapper{padding:0;border:none;border-radius:50%}.color-picker-container #color-picker::-webkit-color-swatch{border:1px solid rgba(255,255,255,.85);border-radius:50%;box-shadow:0 0 0 1px #000000d9}.color-picker-container #color-picker::-moz-color-swatch{border:1px solid rgba(255,255,255,.85);border-radius:50%;box-shadow:0 0 0 1px #000000d9}.tool-group.slider-group{background:#ffffff0d;padding:6px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.1);gap:4px;min-height:36px;width:36px;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;z-index:1000}.tool-group.slider-group:active{background:#ffffff1a}.tool-group.slider-group .value-display{font-size:.9rem;font-weight:700;color:#0ff}.tool-group.slider-group input[type=range]{display:none}.slider-icon{display:inline-block!important;width:20px;height:20px}.slider-text{display:none!important}.tool-group.slider-group label{margin-bottom:0!important}.tool-group.slider-group .value-display{display:none!important}.mobile-slider-overlay{position:absolute;top:100%;left:50%;transform:translate(-50%);background:#1e1e1ef2;border:2px solid rgba(255,255,255,.3);border-radius:12px;padding:12px 8px;width:80px;height:180px;display:none;flex-direction:column;align-items:center;gap:8px;z-index:10000;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);margin-top:8px;box-shadow:0 4px 20px #0009;touch-action:none}.mobile-slider-overlay.active{display:flex}.mobile-slider-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}.mobile-slider-title{font-size:.7rem;font-weight:700;color:#fff;text-align:center}.mobile-slider-track{width:20px;height:120px;background:#ffffff40;border-radius:10px;position:relative;touch-action:none;flex:1}.mobile-slider-thumb{width:24px;height:24px;background:linear-gradient(135deg,#0ff,#06c);border:2px solid white;border-radius:50%;position:absolute;left:50%;transform:translate(-50%);cursor:pointer;touch-action:none;box-shadow:0 2px 6px #0006;transition:box-shadow .2s ease}.mobile-slider-thumb:active{box-shadow:0 3px 12px #00ffff80}.mobile-slider-value{font-size:.8rem;font-weight:700;color:#0ff;text-align:center;min-height:16px}.users-panel{position:fixed;top:52px;left:72px;right:auto;bottom:auto;max-height:200px;min-width:180px;z-index:999999;background:#000000e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);display:none;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease}.users-panel.active{display:block;opacity:1;transform:translateY(0)}}@media (max-width: 480px){.toolbar{padding:6px 8px}h1{font-size:1rem}.connection-status{font-size:.7rem}.toolbar-section:last-child{grid-template-columns:1fr 1fr 1fr 1fr;gap:3px}.tool-group{padding:4px 6px;min-height:40px}.tool-group label{font-size:.7rem}}.canvas-wrapper{touch-action:none}.loading{opacity:.7;pointer-events:none}@keyframes strokeAppear{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (min-width: 769px){.tool-btn .button-text{display:inline}#undo-btn{padding:8px 15px;min-width:auto}}.new-stroke{animation:strokeAppear .3s ease-out}.zoom-controls{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:250}.zoom-btn{width:48px;height:48px;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;touch-action:manipulation}.zoom-btn:hover{background:#000000e6;border-color:#fff6;transform:scale(1.05)}.zoom-btn:active{transform:scale(.95);background:#000}.zoom-btn svg{width:20px;height:20px}.zoom-display{width:48px;height:48px;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:12px;font-weight:500;text-align:center;display:flex;align-items:center;justify-content:center}#hand-tool.active{background:#fff3;border-color:#fff6}@media (max-width: 768px){.zoom-controls{position:fixed;bottom:15px;right:15px;gap:6px}.zoom-btn{width:44px;height:44px}.zoom-btn svg{width:18px;height:18px}.zoom-display{width:44px;height:44px;font-size:11px}}@supports (-webkit-touch-callout: none){.canvas-container{height:100vh;height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding-top:0;margin-top:0}body{height:100vh;height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)}.toolbar{margin-top:0;padding-top:15px}}@media screen and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait){.canvas-container{min-height:100vh;height:100vh}}@media screen and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape){.canvas-container{min-height:100vh;height:100vh}}