:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;--bg-color: #f8f9fa;--grid-color: #e9ecef;--text-primary: #343a40;--toolbar-bg: #ffffff;--toolbar-border: #dee2e6;--toolbar-shadow: rgba(0,0,0,.1);--btn-hover: #e9ecef;--btn-active: #ced4da;--btn-text: #495057;--accent: #228be6;--accent-light: #e7f5ff}[data-theme=dark]{--bg-color: #1a1b1e;--grid-color: #2c2e33;--text-primary: #c1c2c5;--toolbar-bg: #25262b;--toolbar-border: #373a40;--toolbar-shadow: rgba(0,0,0,.3);--btn-hover: #2c2e33;--btn-active: #373a40;--btn-text: #a5d8ff;--accent: #339af0;--accent-light: rgba(51, 154, 240, .2)}body{margin:0;padding:0;overflow:hidden;width:100vw;height:100vh;background-color:var(--bg-color);color:var(--text-primary);transition:background-color .3s}.toolbar{background:var(--toolbar-bg);border:1px solid var(--toolbar-border);box-shadow:0 4px 12px var(--toolbar-shadow);color:var(--text-primary)}.icon-btn{background:transparent;border:none;padding:8px;border-radius:4px;color:var(--btn-text);display:flex;align-items:center;justify-content:center;font-size:1.2rem}.icon-btn:hover{background:var(--btn-hover)}.icon-btn.active{background:var(--accent-light);color:var(--accent)}.properties-panel{position:absolute;top:80px;right:20px;width:240px;background:var(--toolbar-bg);border:1px solid var(--toolbar-border);padding:16px;border-radius:8px;box-shadow:0 4px 12px var(--toolbar-shadow);color:var(--text-primary);z-index:10;font-size:13px;display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 100px);overflow-y:auto}.prop-header{margin:0 0 4px;font-size:14px;font-weight:600;border-bottom:1px solid var(--toolbar-border);padding-bottom:8px}.prop-section{display:flex;flex-direction:column;gap:8px}.prop-title{font-size:11px;font-weight:600;text-transform:uppercase;color:var(--btn-text);letter-spacing:.5px;margin-bottom:4px}.prop-row{display:flex;gap:8px;align-items:center}.prop-field{flex:1;display:flex;flex-direction:column;gap:4px}.prop-label{font-size:10px;color:var(--btn-text)}.prop-input{width:100%;background:var(--bg-color);border:1px solid var(--toolbar-border);border-radius:4px;padding:6px;color:var(--text-primary);font-size:12px;font-family:inherit;outline:none}.prop-input:focus{border-color:var(--accent)}.color-input{padding:2px;height:28px;cursor:pointer}.prop-input[type=range]{padding:0;background:transparent;border:none}hr.prop-divider{border:none;border-top:1px solid var(--toolbar-border);margin:4px 0}
