*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#f8fafc,#e2e8f0 50%,#cbd5e1);font-family:Poppins,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh;overflow:hidden}.app{display:flex;height:100vh;width:100vw}.main-content{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#fffffffa;box-shadow:0 8px 32px #0000001a;display:flex;flex:1 1;flex-direction:column}.header{background:linear-gradient(135deg,#1e293b,#334155 50%,#475569);border-bottom:1px solid #e2e8f0;box-shadow:0 4px 20px #00000026;color:#fff;justify-content:space-between;padding:1rem 2rem}.header,.header-left{align-items:center;display:flex}.header-left{gap:1rem}.header h1{-webkit-text-fill-color:#0000;animation:gradientShift 6s linear infinite;background:linear-gradient(90deg,#a8e6cf,#b8e6b8,#c8e6c9,#dcedc8,#f0f4c3,#fff9c4,#ffe0b2,#ffccbc,#f8bbd9,#e1bee7,#c5cae9,#bbdefb,#b3e5fc,#b2ebf2,#a8e6cf);-webkit-background-clip:text;background-clip:text;background-size:300% 100%;filter:drop-shadow(0 0 25px rgba(255,255,255,.4));font-family:Poppins,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:2.5rem;font-weight:900;letter-spacing:.1em;margin:0;text-shadow:none;text-transform:uppercase}@keyframes gradientShift{0%{background-position:0 50%}to{background-position:300% 50%}}.header-btn,.header-toolbar{align-items:center;display:flex;gap:.5rem}.header-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:6px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:500;padding:.5rem 1rem;transition:all .2s ease}.header-btn:hover{background:#ffffff26;border-color:#ffffff4d;box-shadow:0 4px 12px #0003;transform:translateY(-1px)}.header-btn:active{transform:translateY(0)}.whiteboard{background:#fff;flex:1 1;overflow:hidden}.drawing-tools,.whiteboard{display:flex;position:relative}.drawing-tools{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(180deg,#f1f5f9,#e2e8f0 50%,#cbd5e1);border-right:1px solid #3b82f64d;box-shadow:4px 0 25px #0000001f,inset 0 0 0 1px #ffffffe6;flex-direction:column;gap:2rem;overflow-y:auto;padding:2rem;width:280px}.drawing-tools::-webkit-scrollbar{width:6px}.drawing-tools::-webkit-scrollbar-track{background:#e2e8f04d;border-radius:3px}.drawing-tools::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3b82f6,#8b5cf6,#06b6d4);border-radius:3px;box-shadow:inset 0 1px 2px #ffffff4d;-webkit-transition:all .3s ease;transition:all .3s ease}.drawing-tools::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#2563eb,#7c3aed,#0891b2);box-shadow:inset 0 1px 2px #fff6}.tools-header{background:linear-gradient(135deg,#3b82f614,#8b5cf614);border-bottom:2px solid #3b82f64d;border-radius:16px 16px 0 0;color:#1e293b;font-size:1rem;font-weight:800;letter-spacing:.15em;margin-bottom:.5rem;overflow:hidden;padding:1.5rem;position:relative;text-align:center;text-transform:uppercase}.tools-header:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .8s ease;width:100%}.tools-header:hover:before{left:100%}@keyframes shimmer{0%,to{opacity:.8}50%{opacity:1}}.tool-group{animation:fadeInUp .6s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#ffffffe6,#f8fafccc);border:1px solid #3b82f633;border-radius:12px;box-shadow:0 4px 20px #3b82f614;display:flex;flex-direction:column;gap:1rem;overflow:hidden;padding:1.5rem;position:relative;transition:all .3s ease}.tool-group:before{background:linear-gradient(90deg,#3b82f6,#8b5cf6,#06b6d4);content:"";height:2px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tool-group:hover{background:linear-gradient(135deg,#fffffff2,#f8fafce6);border-color:#3b82f666;box-shadow:0 12px 30px #3b82f626;transform:translateY(-3px)}.tool-group:hover:before{opacity:1}.tool-group-title{background:linear-gradient(135deg,#3b82f614,#8b5cf614);border-bottom:1px solid #3b82f64d;border-radius:8px 8px 0 0;color:#1e293b;font-size:.875rem;font-weight:700;letter-spacing:.1em;margin-bottom:.5rem;padding:.75rem 1rem;position:relative;text-transform:uppercase}.tool-group-title:before{background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:1px;bottom:-1px;box-shadow:0 1px 4px #3b82f666;content:"";height:2px;left:0;position:absolute;width:30px}.tool-buttons{display:flex;gap:.5rem}.tool-btn{align-items:center;background:linear-gradient(135deg,#fff,#f8fafc);border:2px solid #e2e8f0cc;border-radius:12px;box-shadow:0 2px 8px #0000000f;color:#64748b;cursor:pointer;display:flex;font-size:1.25rem;height:52px;justify-content:center;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:52px}.tool-btn:before{background:linear-gradient(90deg,#0000,#fff6,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.tool-btn:hover{background:linear-gradient(135deg,#fff,#f0f9ff);border-color:#3b82f6;box-shadow:0 8px 25px #3b82f633;color:#3b82f6;transform:translateY(-3px) scale(1.05)}.tool-btn:hover:before{left:100%}.tool-btn.active{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-color:#3b82f6;box-shadow:0 8px 25px #3b82f666;color:#fff;transform:translateY(-2px)}.tool-label{background:linear-gradient(135deg,#3b82f61a,#8b5cf61a);border-image:linear-gradient(180deg,#3b82f6,#8b5cf6) 1;border-left:4px solid;border-radius:10px;box-shadow:0 2px 8px #3b82f61a;color:#1e293b;font-family:Poppins,sans-serif;font-size:.875rem;font-weight:600;margin-bottom:.5rem;padding:.75rem 1rem;transition:all .3s ease}.tool-label:hover{background:linear-gradient(135deg,#3b82f626,#8b5cf626);box-shadow:0 4px 12px #3b82f633;transform:translateX(4px)}.canvas-color-btn{align-items:center;background:linear-gradient(135deg,#3b82f614,#8b5cf614);border:2px solid #3b82f633;border-radius:12px;color:#1e293b;cursor:pointer;display:flex;font-family:Poppins,sans-serif;font-weight:600;gap:.75rem;overflow:hidden;padding:1rem 1.25rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.canvas-color-btn:before{background:linear-gradient(90deg,#0000,#ffffff4d,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .6s ease;width:100%}.canvas-color-btn:hover:before{left:100%}.canvas-color-btn:hover{background:linear-gradient(135deg,#3b82f626,#8b5cf626);border-color:#3b82f680;box-shadow:0 8px 25px #3b82f640;transform:translateY(-3px)}.color-preview{border:2px solid #ffffffe6;border-radius:8px;box-shadow:0 3px 10px #00000026;flex-shrink:0;height:28px;transition:all .3s ease;width:28px}.canvas-color-btn:hover .color-preview{box-shadow:0 4px 15px #0003;transform:scale(1.1)}.color-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));font-size:1.25rem;margin-left:auto;opacity:.8;transition:all .4s cubic-bezier(.4,0,.2,1)}.canvas-color-btn:hover .color-icon{filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));opacity:1;transform:scale(1.2) rotate(1turn)}.color-panel-overlay{align-items:center;animation:fadeIn .3s ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0009;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.color-panel{animation:slideUp .4s cubic-bezier(.4,0,.2,1);background:linear-gradient(135deg,#fff,#f8fafc);border:1px solid #3b82f633;border-radius:16px;box-shadow:0 25px 50px #00000040;max-height:80vh;max-width:500px;overflow:hidden;width:90%}.color-panel-header{align-items:center;background:linear-gradient(135deg,#3b82f61a,#8b5cf61a);border-bottom:1px solid #3b82f633;display:flex;justify-content:space-between;padding:1.5rem 2rem}.color-panel-header h3{color:#1e293b;font-family:Poppins,sans-serif;font-size:1.25rem;font-weight:700;margin:0}.close-btn{align-items:center;background:#3b82f61a;border:none;border-radius:8px;color:#64748b;cursor:pointer;display:flex;font-size:1rem;height:32px;justify-content:center;transition:all .3s ease;width:32px}.close-btn:hover{background:#3b82f633;color:#1e293b;transform:scale(1.1)}.color-panel-content{padding:2rem}.custom-color-section,.preset-colors-section{margin-bottom:2rem}.custom-color-section label,.preset-colors-section label{color:#475569;display:block;font-family:Poppins,sans-serif;font-size:.875rem;font-weight:600;letter-spacing:.05em;margin-bottom:.75rem;text-transform:uppercase}.color-picker{background:none;border:2px solid #3b82f64d;border-radius:12px;cursor:pointer;height:50px;transition:all .3s ease;width:100%}.color-picker:hover{border-color:#3b82f680;box-shadow:0 4px 15px #3b82f626}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:10px}.preset-colors{display:flex;gap:.75rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-color:#3b82f64d #0000;scrollbar-width:thin}.preset-colors::-webkit-scrollbar{height:6px}.preset-colors::-webkit-scrollbar-track{background:#e2e8f04d;border-radius:3px}.preset-colors::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:3px;-webkit-transition:all .3s ease;transition:all .3s ease}.preset-colors::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#2563eb,#7c3aed)}.preset-color-btn{border:2px solid #e2e8f0cc;border-radius:8px;cursor:pointer;flex-shrink:0;height:36px;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:36px}.preset-color-btn:before{background:linear-gradient(90deg,#0000,#fff6,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .4s ease;width:100%}.preset-color-btn:hover{border-color:#3b82f699;box-shadow:0 6px 20px #3b82f640;transform:scale(1.15)}.preset-color-btn:hover:before{left:100%}.preset-color-btn.selected{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f64d;transform:scale(1.1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.canvas-controls{display:flex;flex-direction:column;gap:.5rem;position:absolute;right:1rem;top:1rem;z-index:10}.canvas-btn{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border:none;border-radius:6px;box-shadow:0 4px 12px #0000001a;color:#475569;cursor:pointer;display:flex;font-size:1.25rem;height:48px;justify-content:center;transition:all .2s ease;width:48px}.canvas-btn:hover{background:#fff;box-shadow:0 6px 20px #00000026;color:#1e293b;transform:translateY(-1px)}.canvas-btn.danger:hover{background:#fef2f2;color:#dc2626}.canvas-grid{background-image:linear-gradient(#0000000d 1px,#0000 0),linear-gradient(90deg,#0000000d 1px,#0000 0);background-size:20px 20px;bottom:0;left:0;right:0;top:0;z-index:1}.canvas-empty-state,.canvas-grid{pointer-events:none;position:absolute}.canvas-empty-state{color:#94a3b8;left:50%;text-align:center;top:50%;transform:translate(-50%,-50%);z-index:2}.empty-icon{animation:float 3s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));font-size:5rem;margin-bottom:1.5rem;opacity:.6}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.empty-text{color:#64748b;font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.empty-hint{font-size:.875rem;opacity:.6}.debug-info{background:#000c;border-radius:4px;bottom:1rem;color:#fff;font-family:monospace;font-size:.875rem;left:1rem;padding:.5rem 1rem;position:absolute;z-index:10}.whiteboard>div:last-child{flex:1 1;position:relative}.konvajs-content{border-radius:6px;overflow:hidden}.user-panel{background:#f8fafc;border-left:1px solid #e2e8f0;overflow-y:auto;padding:1rem;width:250px}.user-panel h3{color:#1e293b;font-size:1.125rem;margin-bottom:1rem}.user-list{list-style:none}.user-item{background:#fff;border-left:3px solid #3b82f6;border-radius:4px;margin-bottom:.5rem;padding:.5rem}.user-item.self{background:#f0fdf4;border-left-color:#059669}.video-call{background:#1e293b;border-radius:6px;bottom:1rem;box-shadow:0 4px 20px #0003;height:150px;overflow:hidden;position:absolute;right:1rem;width:200px;z-index:10}@media (max-width:1024px){.drawing-tools{padding:1rem;width:240px}.tool-btn{font-size:1rem;height:40px;width:40px}}@media (max-width:768px){.drawing-tools{padding:.75rem;width:200px}.header{padding:.75rem 1rem}.header h1{font-size:1.25rem}.canvas-controls{right:.5rem;top:.5rem}.canvas-btn{font-size:1rem;height:40px;width:40px}}@media (max-width:480px){.drawing-tools{padding:.5rem;width:180px}.tool-btn{font-size:.875rem;height:36px;width:36px}}
/*# sourceMappingURL=main.8f1d714c.css.map*/