*,: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);text-shadow:0 2px 6px rgba(0,0,0,.7);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);text-shadow:0 1px 4px rgba(0,0,0,.7);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:50%;transform:translateX(-50%);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)}.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}.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:768px){.floating-toolbar{bottom:12px;padding:6px 10px;gap:4px;max-width:calc(100vw - 24px);overflow-x:auto;-webkit-overflow-scrolling:touch}.floating-toolbar::-webkit-scrollbar{display:none}.color-swatch{width:28px;height:28px;min-width:28px}.tool-btn{width:40px;height:40px;min-width:40px}.new-session-btn{padding:8px 12px;min-height:40px}.brush-slider-track{width:70px}.metadata-slide-panel{bottom:70px;padding:16px}.metadata-grid{grid-template-columns:1fr}.connection-pill{top:8px;right:8px}}