:root{--bg: #F9FAFB;--surface: #ffffff;--border: #E5E7EB;--accent: #6366F1;--text: #111827;--muted: #6B7280;--radius: 12px}body{background-color:var(--bg);color:var(--text);font-family:Inter,sans-serif;height:100vh;overflow:hidden;display:flex}#app{display:flex;width:100%;height:100%}.sidebar{width:72px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:16px}.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;border-radius:8px;color:var(--muted);gap:4px}.tool span{font-size:10px}.tool.active{background:#eef2ff;color:var(--accent)}.main-content{flex:1;display:flex;flex-direction:column}.toolbar{height:56px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px}.btn{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-family:Inter,sans-serif;font-weight:500;color:var(--text)}.canvas-container{flex:1;overflow:auto;padding:24px;display:flex;justify-content:center;align-items:flex-start}.canvas-container canvas{cursor:none!important;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.right-panel{width:280px;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;padding:20px;overflow-y:auto}.panel-header{font-weight:600;font-size:14px;margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:12px}.prop-group{margin-bottom:16px;display:flex;flex-direction:column;gap:6px}.prop-row{display:flex;gap:12px;margin-bottom:16px}.prop-label{font-size:12px;color:var(--muted);font-weight:500}.prop-select,.prop-input{width:100%;height:32px;border:1px solid var(--border);border-radius:6px;padding:0 8px;font-family:Inter,sans-serif;font-size:13px;background:var(--surface);color:var(--text);outline:none}.prop-select:focus,.prop-input:focus{border-color:var(--accent)}.toggle-group{display:flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-bottom:16px}.toggle-btn{flex:1;height:32px;background:var(--surface);border:none;border-right:1px solid var(--border);font-family:Inter,sans-serif;font-size:13px;color:var(--text)}.toggle-btn:last-child{border-right:none}.toggle-btn.active{background:#eef2ff;color:var(--accent);font-weight:600}.color-picker-row{display:flex;gap:8px;align-items:center}.prop-color{width:32px;height:32px;padding:0;border:1px solid var(--border);border-radius:6px;background:none}.hex-input{flex:1}.prop-slider{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:var(--border);border-radius:2px;outline:none}.prop-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--accent)}.font-weight-bold{font-weight:700}.font-style-italic{font-style:italic}.text-decoration-underline{text-decoration:underline}.text-decoration-line-through{text-decoration:line-through}