:root{--bg-app:#faf8f5;--bg-canvas-area:#f0ece6;--bg-sidebar:#fff;--bg-panel:#fffdf9;--bg-toolbar:#fff;--border:#e8e2d9;--border-light:#f0ebe3;--text-primary:#2d2a26;--text-secondary:#7a7068;--text-muted:#b0a898;--accent:#8b7dd4;--accent-soft:#ede9f9;--accent-hover:#7b6dc4;--pink:#e8a0b4;--pink-soft:#fdf0f4;--green:#a8c5a0;--green-soft:#f0f6ef;--yellow:#e8d48a;--yellow-soft:#fdf8e8;--peach:#e8b89a;--blue:#9ab8d8;--lavender:#c5b8e8;--shadow-sm:0 1px 4px #0000000f;--shadow-md:0 4px 16px #00000014;--shadow-lg:0 8px 32px #0000001f;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--font-display:"Lora", Georgia, serif;--font-body:"DM Sans", sans-serif;--font-hand:"Caveat", cursive;--sidebar-w:64px;--panel-w:240px;--toolbar-h:52px;--header-h:56px;--mobile-bottom-h:60px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font-body);background:var(--bg-app);color:var(--text-primary);-webkit-font-smoothing:antialiased;overflow:hidden}button{font-family:var(--font-body);cursor:pointer;background:0 0;border:none}input,select,textarea{font-family:var(--font-body)}svg{display:block}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}input[type=range]{-webkit-appearance:none;background:var(--border);border-radius:2px;outline:none;flex:1;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 4px #8b7dd466}.btn-icon{border-radius:var(--radius-sm);width:34px;height:34px;color:var(--text-secondary);cursor:pointer;justify-content:center;align-items:center;font-size:15px;transition:background .15s,color .15s;display:flex}.btn-icon:hover{background:var(--bg-app);color:var(--text-primary)}.btn-icon.active{background:var(--accent-soft);color:var(--accent)}.btn-primary{background:var(--accent);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;padding:9px 20px;font-size:13px;font-weight:600;transition:background .15s}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:var(--bg-app);color:var(--text-secondary);border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;padding:9px 20px;font-size:13px;font-weight:500}.form-input{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);background:var(--bg-app);outline:none;width:100%;padding:7px 10px;font-size:13px;transition:border-color .15s}.form-input:focus{border-color:var(--accent)}.form-select{border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);background:var(--bg-app);cursor:pointer;outline:none;padding:7px 10px;font-size:13px}.form-select:focus{border-color:var(--accent)}.prop-section{margin-bottom:16px}.prop-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:11px;font-weight:600;display:block}.prop-row{align-items:center;gap:8px;margin-bottom:8px;display:flex}.prop-row label{color:var(--text-secondary);flex-shrink:0;width:60px;font-size:12px}.prop-val{color:var(--text-primary);text-align:right;min-width:32px;font-size:12px;font-weight:500}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;opacity:0;pointer-events:none;background:#00000040;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:fixed;inset:0}.modal-overlay.open{opacity:1;pointer-events:all}.modal-box{background:var(--bg-sidebar);border-radius:var(--radius-xl);width:min(420px,90vw);box-shadow:var(--shadow-lg);border:1px solid var(--border);padding:28px}.modal-title{font-family:var(--font-display);color:var(--text-primary);margin-bottom:6px;font-size:20px;font-weight:600}.modal-sub{color:var(--text-secondary);margin-bottom:20px;font-size:13px}.modal-section{margin-bottom:16px}.modal-section label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-size:12px;font-weight:600;display:block}.modal-actions{justify-content:flex-end;gap:8px;margin-top:20px;display:flex}@media (width<=768px){:root{--sidebar-w:0px;--panel-w:0px;--header-h:52px;--mobile-bottom-h:56px}}@keyframes fadeIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}