:root { --pa-purple:#6B46C1; --pa-lime:#8BCF3A; --ink:#1a1a1a; --line:#e3e3e8; }
* { box-sizing: border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; color:var(--ink); background:#f4f4f7; }
.sm-top { background:var(--pa-purple); color:#fff; padding:10px 16px; display:flex; justify-content:space-between; align-items:center; }
.sm-admin { font-size:12px; opacity:.85; }
.sm-toolbar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px 12px; background:#fff; border-bottom:1px solid var(--line); }
.sm-toolbar button, .sm-btn { padding:6px 10px; border:1px solid var(--line); background:#fff; border-radius:6px; cursor:pointer; }
.sm-toolbar button:hover, .sm-btn:hover { border-color:var(--pa-purple); }
.sep { width:1px; height:24px; background:var(--line); margin:0 4px; }
.sm-body { display:grid; grid-template-columns:230px 1fr 250px; gap:12px; padding:12px; }
.sm-props, .sm-output { background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px; }
.sm-props label, .sm-output label { display:block; font-size:13px; margin:6px 0; }
.sm-props .row, .sm-output .row { display:flex; gap:6px; }
.sm-props input, .sm-props select, .sm-output input, .sm-output select { width:100%; padding:4px; }
.sm-props .row button { flex:1; }
.sm-canvas-wrap { background:#ddd; border:1px solid var(--line); border-radius:8px; overflow:auto; display:flex; justify-content:center; padding:16px; }
#c { background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.15); }
.primary { background:var(--pa-lime)!important; font-weight:bold; }
.sm-help { margin-top:10px; font-size:12px; color:#555; }
.office-help { background:#fff8e1; border:1px solid #f0d264; padding:8px; border-radius:6px; }
#recent a { display:block; font-size:12px; padding:3px 0; color:var(--pa-purple); cursor:pointer; }