*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#fafafa;--toolbar-bg:#fff;--toolbar-border:#e8e8e8;--text:#333;--text-muted:#999;--accent:#5b6abf;--accent-hover:#4a59a8;--active-bg:#eef0fb;--separator:#e8e8e8;--shadow:0 1px 6px #00000014;--radius:8px}html,body{background:var(--bg);width:100%;height:100%;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{width:100%;height:100%;position:relative}#canvas{cursor:crosshair;touch-action:none;width:100%;height:100%;display:block}#watermark{color:#c8cce6;letter-spacing:-.5px;z-index:50;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:14px;font-weight:700;position:fixed;top:14px;left:18px}.beta-tag{color:#fff;background:var(--accent);vertical-align:middle;letter-spacing:.5px;border-radius:4px;margin-left:4px;padding:1px 5px;font-size:9px;font-weight:700;display:inline-block}#action-bar{background:var(--toolbar-bg);border:1px solid var(--toolbar-border);box-shadow:none;z-index:100;-webkit-user-select:none;user-select:none;border-radius:14px;align-items:center;gap:2px;padding:6px 10px;display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}.tool-btn{border-radius:var(--radius);cursor:pointer;width:38px;height:38px;color:var(--text);background:0 0;border:none;justify-content:center;align-items:center;font-size:18px;transition:background .15s,color .15s;display:flex;position:relative}.tool-btn:hover{background:#f0f0f0}.tool-btn.active{background:var(--active-bg);color:var(--accent)}.tool-btn svg{width:20px;height:20px}.toolbar-separator{background:var(--separator);width:1px;height:26px;margin:0 4px}.tool-btn:after{content:attr(data-shortcut);color:var(--text-muted);pointer-events:none;opacity:.5;font-size:8px;position:absolute;bottom:1px;right:3px}#properties-panel{z-index:100;-webkit-user-select:none;user-select:none;flex-direction:column;gap:8px;width:280px;max-height:calc(100vh - 100px);transition:opacity .15s,transform .15s;display:flex;position:fixed;top:12px;right:12px;overflow-y:auto}#properties-panel.hidden{opacity:0;pointer-events:none;transform:translate(10px)}#properties-panel::-webkit-scrollbar{width:4px}#properties-panel::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}.prop-panel{background:var(--toolbar-bg);border:1px solid var(--toolbar-border);border-radius:12px;flex-direction:column;gap:12px;padding:14px 16px;display:flex}.prop-panel-title{color:var(--text);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:700}.prop-section{flex-direction:column;gap:8px;display:flex}.prop-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600}.color-row{align-items:center;gap:4px;display:flex}.color-row-separator{background:var(--separator);flex-shrink:0;width:1px;height:20px;margin:0 2px}.color-swatch{cursor:pointer;border:2px solid #0000;border-radius:6px;flex-shrink:0;width:24px;height:24px;transition:border-color .15s,transform .1s}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:var(--accent)}.fill-style-row{flex-wrap:wrap;gap:3px;display:flex}.fill-style-btn{border:1px solid var(--toolbar-border);cursor:pointer;width:32px;height:32px;color:var(--text);background:0 0;border-radius:5px;justify-content:center;align-items:center;font-size:10px;transition:background .15s,border-color .15s;display:flex}.fill-style-btn:hover{background:#f0f0f0}.fill-style-btn.active{border-color:var(--accent);background:var(--active-bg);color:var(--accent)}.stroke-width-row{gap:3px;display:flex}.stroke-width-btn{border:1px solid var(--toolbar-border);cursor:pointer;background:0 0;border-radius:5px;flex:1;justify-content:center;align-items:center;height:34px;transition:background .15s,border-color .15s;display:flex}.stroke-width-btn:hover{background:#f0f0f0}.stroke-width-btn.active{border-color:var(--accent);background:var(--active-bg)}.stepper{align-items:center;gap:2px;display:flex}.stepper-btn{border:1px solid var(--toolbar-border);cursor:pointer;width:28px;height:28px;color:var(--text);background:0 0;border-radius:5px;justify-content:center;align-items:center;font-size:14px;font-weight:600;transition:background .1s;display:flex}.stepper-btn:hover{background:#f0f0f0}.stepper-btn:disabled{opacity:.3;cursor:default}.stepper-value{text-align:center;color:var(--text);flex:1;min-width:30px;font-size:12px;font-weight:500}.stepper-dots{flex:1;justify-content:center;align-items:center;gap:4px;display:flex}.stepper-dot{background:#e0e0e0;border-radius:50%;width:8px;height:8px;transition:background .15s}.stepper-dot.filled{background:var(--accent)}.endpoint-row{align-items:center;gap:3px;display:flex}.endpoint-label{color:var(--text-muted);min-width:32px;font-size:10px}.endpoint-btn{border:1px solid var(--toolbar-border);cursor:pointer;background:0 0;border-radius:5px;justify-content:center;align-items:center;width:34px;height:32px;transition:background .15s,border-color .15s;display:flex}.endpoint-btn:hover{background:#f0f0f0}.endpoint-btn.active{border-color:var(--accent);background:var(--active-bg)}.endpoint-btn svg{width:18px;height:18px}.line-type-row{gap:3px;display:flex}.line-type-btn{border:1px solid var(--toolbar-border);cursor:pointer;height:34px;color:var(--text);background:0 0;border-radius:5px;flex:1;justify-content:center;align-items:center;font-size:11px;transition:background .15s,border-color .15s;display:flex}.line-type-btn:hover{background:#f0f0f0}.line-type-btn.active{border-color:var(--accent);background:var(--active-bg);color:var(--accent)}.prop-slider{appearance:none;background:#e0e0e0;border-radius:2px;outline:none;width:100%;height:4px}.prop-slider::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:14px;height:14px}.font-picker-trigger{border:1px solid var(--toolbar-border);text-align:left;cursor:pointer;width:100%;color:var(--text);background:#fafafa;border-radius:6px;padding:7px 10px;font-size:13px;transition:border-color .15s}.font-picker-trigger:hover{border-color:var(--accent)}.font-picker-dropdown{border:1px solid var(--toolbar-border);background:var(--toolbar-bg);border-radius:8px;margin-top:4px;position:relative;overflow:hidden}.font-picker-dropdown.hidden{display:none}.font-picker-search{border:none;border-bottom:1px solid var(--toolbar-border);width:100%;color:var(--text);background:0 0;outline:none;padding:7px 10px;font-size:12px}.font-picker-list{max-height:200px;overflow-y:auto}.font-picker-list::-webkit-scrollbar{width:4px}.font-picker-list::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}.font-picker-item{text-align:left;cursor:pointer;width:100%;color:var(--text);background:0 0;border:none;padding:6px 10px;font-size:14px;transition:background .1s;display:block}.font-picker-item:hover{background:#f0f0f0}.font-picker-item.active{background:var(--active-bg);color:var(--accent);font-weight:600}.slider-input-row{align-items:center;gap:8px;display:flex}.slider-input-row .prop-slider{flex:1;min-width:0}.slider-value-input{border:1px solid var(--toolbar-border);text-align:center;width:48px;color:var(--text);background:#fafafa;border-radius:5px;outline:none;flex-shrink:0;padding:3px 6px;font-size:11px}.slider-value-input:focus{border-color:var(--accent)}.text-editor{z-index:200;cursor:text;white-space:pre-wrap;word-break:break-word;background:0 0;border:none;outline:none;min-width:20px;min-height:1em;margin:0;padding:0;line-height:1.3;position:fixed}#zoom-indicator{background:var(--toolbar-bg);border:1px solid var(--toolbar-border);box-shadow:none;color:var(--text-muted);z-index:100;-webkit-user-select:none;user-select:none;border-radius:8px;padding:4px 12px;font-size:11px;position:fixed;bottom:16px;right:12px}.prop-divider{background:var(--separator);height:1px;margin:2px 0}#save-btn,#share-btn{cursor:pointer;z-index:100;border:1px solid #0000;border-radius:8px;padding:7px 18px;font-size:12px;font-weight:600;transition:background .15s;position:fixed;bottom:16px}#save-btn{background:var(--accent);border-color:var(--accent);color:#fff;left:12px}#share-btn{color:var(--accent);border-color:var(--accent);background:0 0;left:80px}#save-btn:hover{background:var(--accent-hover)}#share-btn:hover{background:var(--active-bg)}#save-btn:disabled,#share-btn:disabled{opacity:.4;cursor:default}.share-overlay{z-index:500;background:#00000040;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.share-dialog{background:var(--toolbar-bg);border-radius:16px;width:400px;max-width:90vw;padding:24px;box-shadow:0 8px 30px #00000026}.share-title{color:var(--text);margin-bottom:4px;font-size:16px;font-weight:700}.share-desc{color:var(--text-muted);margin-bottom:16px;font-size:13px}.share-result{flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;display:flex}.share-link-input{border:1px solid var(--toolbar-border);color:var(--text);background:#f8f8f8;border-radius:8px;outline:none;flex:1;min-width:0;padding:8px 10px;font-family:monospace;font-size:12px}.share-link-input:focus{border-color:var(--accent)}.share-copy-btn{background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:600}.share-expiry{width:100%;color:var(--text-muted);margin-top:2px;font-size:11px}.viewer-banner{background:var(--active-bg);border-bottom:1px solid var(--toolbar-border);color:var(--accent);z-index:200;justify-content:center;align-items:center;gap:16px;padding:8px 16px;font-size:13px;display:flex;position:fixed;top:0;left:0;right:0}.viewer-banner.error{color:#e03131;background:#fff0f0}.viewer-new-btn{background:var(--accent);color:#fff;border-radius:6px;padding:4px 12px;font-size:12px;font-weight:600;text-decoration:none}#secondary-bar,#mobile-popup{display:none}#mobile-popup.hidden{display:none!important}@media (width<=768px){.tool-btn:after{display:none}#secondary-bar{background:var(--toolbar-bg);border:1px solid var(--toolbar-border);z-index:100;-webkit-user-select:none;user-select:none;border-radius:10px;align-items:center;gap:6px;padding:4px 10px;display:flex;position:fixed;bottom:56px;left:50%;transform:translate(-50%)}.secondary-btn{border:1px solid var(--toolbar-border);cursor:pointer;color:var(--text);background:0 0;border-radius:6px;align-items:center;gap:4px;padding:5px 10px;font-size:11px;transition:background .15s;display:flex}.secondary-btn.active{background:var(--active-bg);border-color:var(--accent);color:var(--accent)}.secondary-swatch{border-radius:4px;flex-shrink:0;width:16px;height:16px}.secondary-label{font-size:11px;font-weight:500}#mobile-popup{z-index:101;-webkit-overflow-scrolling:touch;max-height:50vh;display:block;position:fixed;bottom:92px;left:8px;right:8px;overflow-y:auto}#properties-panel{display:none!important}#action-bar{border-radius:12px;gap:1px;padding:4px 6px;bottom:8px}.tool-btn{width:34px;height:34px}.tool-btn svg{width:18px;height:18px}.toolbar-separator{height:20px;margin:0 2px}.prop-panel{gap:10px;padding:10px 12px}#save-btn,#share-btn{padding:5px 12px;font-size:11px;top:10px;bottom:auto}#save-btn{left:auto;right:68px}#share-btn{left:auto;right:8px}#watermark{font-size:12px;top:12px;left:12px}#zoom-indicator{display:none}.prop-slider::-webkit-slider-thumb{width:20px;height:20px}.color-swatch{width:22px;height:22px}.share-dialog{width:95vw;padding:16px}}@media (width<=400px){.tool-btn{width:30px;height:30px}.tool-btn svg{width:16px;height:16px}.toolbar-separator{margin:0 1px}.color-swatch{width:20px;height:20px}.stroke-width-btn,.line-type-btn{height:30px}.fill-style-btn{width:28px;height:28px}.endpoint-btn{width:30px;height:28px}}