*,:after,:before{box-sizing:border-box;margin:0;padding:0}body{background:#1a1a2e;color:#e0e0e0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;height:100dvh;flex-direction:column;-moz-user-select:none;user-select:none;-webkit-user-select:none}#canvas-container,body{display:flex;overflow:hidden}#canvas-container{flex:1 1;align-items:center;justify-content:center;position:relative;background:#111;background-image:radial-gradient(circle,#222 1px,transparent 0);background-size:24px 24px}#canvas-container canvas{position:absolute;max-width:100%;max-height:100%}#bg-canvas{z-index:1}#draw-canvas{z-index:2;touch-action:none}.canvas-text-overlay{position:absolute;top:0;left:0;right:0;z-index:3;pointer-events:none;padding:2.5%}.canvas-text-overlay h2{font-size:clamp(18px,2.5vw,36px);font-weight:700;color:rgba(255,255,255,.9);-webkit-text-stroke:1px rgba(0,0,0,.6);text-shadow:0 1px 3px rgba(0,0,0,.8);margin:0;line-height:1.3}.canvas-text-overlay h4{font-size:clamp(13px,1.6vw,22px);font-weight:500;color:rgba(255,255,255,.7);-webkit-text-stroke:.5px rgba(0,0,0,.5);text-shadow:0 1px 3px rgba(0,0,0,.8);margin:6px 0 0;line-height:1.4}#canvas-container.custom-cursor #draw-canvas{cursor:none}.brush-cursor{position:fixed;border-radius:50%;pointer-events:none;z-index:3;transition:width .1s ease,height .1s ease;transform:translate(-50%,-50%);border:2px solid;opacity:0}.brush-cursor.visible{opacity:1}.floating-toolbar{position:fixed;bottom:20px;left:0;right:0;margin:0 auto;width:-moz-fit-content;width:fit-content;z-index:50;display:flex;align-items:center;gap:6px;padding:8px 12px;background:rgba(22,33,62,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.4)}.toolbar-sep{width:1px;height:28px;background:rgba(255,255,255,.08);flex-shrink:0;margin:0 4px}.color-swatches{display:flex;align-items:center;gap:6px}.color-swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s;padding:0;outline:none;position:relative}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{border-color:rgba(255,255,255,.9);box-shadow:0 0 0 2px rgba(255,255,255,.2)}.color-swatch.custom-color{background:conic-gradient(#ff0000,#ff8800,#ffff00,#00ff00,#0088ff,#8800ff,#ff0000)!important}.color-swatch.custom-color:after{content:"";position:absolute;inset:3px;border-radius:50%;background:rgba(22,33,62,.85)}.color-swatch.custom-color.active:after{background:transparent}.hidden-color-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.brush-slider-group{display:flex;align-items:center;gap:8px;position:relative}.brush-slider-track{width:100px;height:6px;background:rgba(255,255,255,.08);border-radius:3px;position:relative;cursor:pointer}.brush-slider-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#e94560,#ff6b6b);border-radius:3px;pointer-events:none}.brush-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:-webkit-grab;cursor:grab;transition:box-shadow .15s}.brush-slider-thumb:hover{box-shadow:0 2px 10px rgba(233,69,96,.4)}.brush-slider-thumb:active{cursor:-webkit-grabbing;cursor:grabbing}.brush-size-label{font-size:11px;color:rgba(255,255,255,.5);min-width:18px;text-align:center;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.tool-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:none;background:transparent;color:rgba(255,255,255,.7);cursor:pointer;transition:background .15s,color .15s;padding:0;position:relative}.tool-btn:hover{background:rgba(255,255,255,.08);color:#fff}.tool-btn:active{background:rgba(233,69,96,.2);color:#e94560}.tool-btn.active{color:#e94560;background:rgba(233,69,96,.12)}.tool-btn-group{display:flex;align-items:center;gap:2px}.new-session-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;background:linear-gradient(135deg,#e94560,#d63851);color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:box-shadow .15s;white-space:nowrap}.new-session-btn:hover{box-shadow:0 4px 16px rgba(233,69,96,.4)}.admin-pill{position:fixed;top:16px;right:120px;z-index:50;display:flex;align-items:center;gap:5px;padding:6px 12px;background:rgba(22,33,62,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:20px;font-size:12px;color:rgba(255,255,255,.6);text-decoration:none;cursor:pointer;transition:background .15s,color .15s}.admin-pill:hover{background:rgba(233,69,96,.2);color:var(--accent);border-color:rgba(233,69,96,.3)}.connection-pill{position:fixed;top:16px;right:16px;z-index:50;display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(22,33,62,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:20px;font-size:12px;color:rgba(255,255,255,.6)}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}.status-dot.connected{background:#4caf50;box-shadow:0 0 6px rgba(76,175,80,.5);animation:pulse-green 2s ease-in-out infinite}.status-dot.disconnected{background:#e94560;box-shadow:0 0 6px rgba(233,69,96,.5)}@keyframes pulse-green{0%,to{opacity:1}50%{opacity:.5}}.metadata-slide-panel{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:45;max-width:700px;width:95%;background:rgba(22,33,62,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.4);padding:20px 24px}.metadata-close-btn{position:absolute;top:12px;right:12px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:none;background:transparent;color:rgba(255,255,255,.5);cursor:pointer;transition:background .15s,color .15s;font-size:16px}.metadata-close-btn:hover{background:rgba(255,255,255,.08);color:#fff}.metadata-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-gap:12px;gap:12px}.meta-field{display:flex;flex-direction:column;gap:4px}.meta-field-wide{grid-column:1/-1}.meta-field label{font-size:11px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.5px}.meta-field input,.meta-field select,.meta-field textarea{background:rgba(15,27,51,.8);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#e0e0e0;padding:8px 10px;font-size:13px;font-family:inherit;outline:none;transition:border-color .15s;resize:none}.meta-field select{cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238899aa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:28px}.meta-field select option{background:#0f1b33;color:#e0e0e0}.meta-field input:focus,.meta-field select:focus,.meta-field textarea:focus{border-color:#e94560}.meta-field input::placeholder,.meta-field textarea::placeholder{color:#4a5568}.toast-container{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:60;flex-direction:column;pointer-events:none}.toast,.toast-container{display:flex;align-items:center;gap:8px}.toast{padding:8px 16px;background:rgba(22,33,62,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.3);color:rgba(255,255,255,.85);font-size:13px;font-weight:500;pointer-events:auto;white-space:nowrap}.toast svg{flex-shrink:0;color:#4caf50}.drop-overlay{position:absolute;inset:0;z-index:50;background:rgba(233,69,96,.15);border:3px dashed #e94560;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .2s}.drop-overlay-content{text-align:center;color:#e94560}.drop-overlay-content p{margin-top:8px;font-size:18px;font-weight:600}@media (hover:hover){.tool-btn[data-tooltip]:hover:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:4px 10px;background:rgba(0,0,0,.85);color:#fff;font-size:11px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:100}}@media (max-width:1024px) and (min-width:769px){.floating-toolbar{padding:6px 10px;gap:5px}.brush-slider-track{width:85px}}@media (max-width:768px){.floating-toolbar{bottom:12px;padding:4px 8px calc(4px + env(safe-area-inset-bottom, 0px));gap:3px;max-width:calc(100vw - 16px);overflow-x:auto;-webkit-overflow-scrolling:touch}.floating-toolbar::-webkit-scrollbar{display:none}.toolbar-sep{height:24px;margin:0 2px}.color-swatch{width:26px;height:26px;min-width:26px}.color-swatches{gap:4px}.tool-btn{width:36px;height:36px;min-width:36px}.new-session-btn{padding:6px 10px;min-height:36px;font-size:12px}.new-session-label{display:none}.brush-slider-track{width:70px}.metadata-slide-panel{bottom:60px;padding:16px;max-height:60vh;overflow-y:auto}.metadata-grid{grid-template-columns:1fr}.toast-container{bottom:60px}.connection-pill{right:8px}.admin-pill,.connection-pill{top:8px;padding:4px 8px;font-size:11px}.admin-pill{right:90px}}@media (max-width:480px){.color-swatch{width:24px;height:24px;min-width:24px}.color-swatches{gap:3px}.brush-slider-track{width:50px}.new-session-btn{padding:6px 8px;gap:0}.metadata-slide-panel{width:98%;bottom:55px;padding:14px 12px;max-height:65vh}.admin-pill{right:80px}}@media (max-width:900px) and (orientation:landscape){.floating-toolbar{bottom:6px;padding:3px calc(6px + env(safe-area-inset-right, 0px)) calc(3px + env(safe-area-inset-bottom, 0px)) calc(6px + env(safe-area-inset-left, 0px));gap:3px}.toolbar-sep{height:20px;margin:0 1px}.color-swatch{width:22px;height:22px;min-width:22px}.color-swatches{gap:3px}.tool-btn{width:32px;height:32px;min-width:32px}.tool-btn svg{width:15px;height:15px}.new-session-btn{padding:4px 6px;min-height:32px;font-size:11px}.new-session-label{display:none}.brush-slider-track{width:50px}.brush-size-label{display:none}.metadata-slide-panel{bottom:45px;max-height:45vh;overflow-y:auto;padding:12px}.toast-container{bottom:45px}.connection-pill{right:6px}.admin-pill,.connection-pill{top:6px;padding:3px 6px;font-size:10px}.admin-pill{right:75px}.canvas-text-overlay{padding:1.5% 2%}}