:root{--ink:#222;--gold:#c99b32;--paper:#fff;--mist:#f5f3ee;--line:#ded8ca;--muted:#766f63;--blue:#2458de}
*{box-sizing:border-box} body{margin:0;background:var(--mist);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}
.topbar{height:70px;background:#fff;display:flex;align-items:center;gap:20px;padding:0 22px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}.brand{letter-spacing:.06em;font-size:14px;white-space:nowrap}.brand strong{font-weight:900}.brand span{color:var(--gold);font-weight:800}.project-title{border:1px solid var(--line);border-radius:7px;padding:8px 10px;width:180px;font-weight:700;background:#fff}.top-actions{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.tool-button,.quiet-button,.wide-button,.tab{border:1px solid transparent;background:#fff;border-radius:7px;color:#2b2b2b;padding:8px 10px;font-size:12px;font-weight:700}.tool-button:hover,.quiet-button:hover,.wide-button:hover,.tab:hover{border-color:var(--line)}.tool-button.active,.tab.active{background:#222;color:#fff}.export-button{border:0;border-radius:7px;background:var(--gold);color:#fff;padding:9px 12px;font-size:12px;font-weight:800}
.workspace{height:calc(100vh - 70px);display:grid;grid-template-columns:190px minmax(420px,1fr) 300px;overflow:hidden}.left-panel,.right-panel{background:#fff;border-right:1px solid var(--line);overflow:auto;padding:16px 12px}.right-panel{border-right:0;border-left:1px solid var(--line);padding:12px}.panel-kicker{font-size:9px;font-weight:900;letter-spacing:.14em;color:#817869;margin:0 0 9px}.pages-heading{margin-top:22px}.element-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.add-element{height:50px;border:1px solid #e7e1d4;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-size:10px;font-weight:750;color:#332f28}.add-element:hover{border-color:var(--gold);background:#fffcf6}.add-element .tool-icon{font-size:17px;line-height:1;display:grid;place-items:center;width:20px;height:20px}.page-list{display:grid;gap:5px}.page-item{display:flex;align-items:center;gap:7px;width:100%;border:1px solid transparent;background:#faf9f6;padding:9px;border-radius:7px;text-align:left;font-size:12px;font-weight:700}.page-item.active{background:#fff7e4;border-color:#e4bd69}.page-dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}.wide-button{margin-top:8px;width:100%;border:1px dashed #cfc5b5;color:#5e5548}.help-text{font-size:10px;line-height:1.6;color:#746b5d;margin-top:20px}
.canvas-area{min-width:0;position:relative;overflow:hidden;background-image:radial-gradient(#ded7c9 1px,transparent 1px);background-size:16px 16px}.canvas-toolbar{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:#766e61;font-size:12px}.canvas-scroller{height:calc(100% - 44px);overflow:auto;padding:20px 30px 70px;display:flex;justify-content:center;align-items:flex-start}.design-frame{position:relative;flex:0 0 auto;box-shadow:0 20px 38px rgba(31,26,18,.13);background:#fff;overflow:hidden}.design-frame.desktop{width:1050px;height:680px}.design-frame.mobile{width:390px;height:720px;border:8px solid #202020;border-radius:32px;box-shadow:0 20px 42px rgba(31,26,18,.23)}.design-surface{position:relative;width:100%;height:100%;overflow:hidden;background:#fff;isolation:isolate}.background-layer{position:absolute;inset:0;background-repeat:no-repeat;background-size:cover;background-position:center;z-index:-2}.background-tint{position:absolute;inset:0;background:#fff;z-index:-1;pointer-events:none}.page-element{position:absolute;min-width:20px;min-height:20px;user-select:none;touch-action:none;outline:1px solid transparent;transition:box-shadow .15s,outline-color .15s}.page-element.selected{outline:2px solid var(--gold);box-shadow:0 0 0 3px rgba(201,155,50,.18)}.page-element:hover{outline-color:rgba(201,155,50,.7)}.element-content{width:100%;height:100%;overflow:hidden;word-break:break-word}.element-text{white-space:pre-wrap}.element-button{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;cursor:pointer}.element-card{display:flex;flex-direction:column;justify-content:center}.element-icon{display:grid;place-items:center;font-size:30px}.element-image{width:100%;height:100%;object-fit:cover;display:block}.resize-handle{position:absolute;right:-5px;bottom:-5px;width:14px;height:14px;border-radius:3px;background:var(--gold);border:2px solid #fff;cursor:nwse-resize;z-index:4}.resize-handle:before{content:"";position:absolute;inset:2px;border-right:1px solid #fff;border-bottom:1px solid #fff}.element-search{display:flex;align-items:center;border:1px solid currentColor;border-radius:10px;padding:0 10px;gap:7px}.element-search input{border:0;outline:0;width:100%;background:transparent;color:inherit}.element-upload{display:flex;align-items:center;justify-content:center;gap:8px;border:2px dashed currentColor;border-radius:10px;font-weight:750}
.global-menu{position:absolute;z-index:20;display:flex;gap:8px;background:#222;color:#fff;box-shadow:0 9px 26px rgba(0,0,0,.22);padding:10px;transition:transform .24s ease,opacity .24s ease,width .24s ease,height .24s ease;overflow:hidden}.global-menu.top{top:0;left:0;right:0;align-items:center}.global-menu.bottom{bottom:0;left:0;right:0;align-items:center}.global-menu.left{top:0;bottom:0;left:0;width:230px;flex-direction:column;align-items:stretch}.global-menu.right{top:0;bottom:0;right:0;width:230px;flex-direction:column;align-items:stretch}.global-menu.compact.left,.global-menu.compact.right{width:64px}.global-menu.compact .menu-label{display:none}.global-menu.collapsed.left{transform:translateX(-88%)}.global-menu.collapsed.right{transform:translateX(88%)}.global-menu.collapsed.top{transform:translateY(-78%)}.global-menu.collapsed.bottom{transform:translateY(78%)}.menu-toggle{border:0;background:rgba(255,255,255,.12);color:#fff;width:34px;height:34px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto}.menu-items{display:flex;gap:5px;min-width:0}.left .menu-items,.right .menu-items{flex-direction:column}.menu-link{border:0;color:#fff;background:transparent;padding:8px 10px;border-radius:6px;display:flex;align-items:center;gap:8px;text-align:left;white-space:nowrap;font-size:12px;font-weight:700}.menu-link:hover,.menu-link.active{background:rgba(255,255,255,.13)}.menu-link .icon{width:18px;height:18px;display:grid;place-items:center}.global-menu.menu-selected{outline:2px solid var(--gold);outline-offset:-2px}
.inspector-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-bottom:1px solid var(--line);padding-bottom:9px}.tab{padding:7px 4px;font-size:11px}.inspector-content{padding:14px 2px 34px}.section-title{font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#756c5e;margin:12px 0 8px}.field{display:grid;gap:4px;margin-bottom:9px;font-size:10px;color:#665d4f;font-weight:700}.field input,.field textarea,.field select{width:100%;border:1px solid #ded8cb;border-radius:6px;padding:7px;background:#fff;color:#222;min-height:31px;font-size:12px}.field textarea{resize:vertical;min-height:70px}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:7px}.three-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.color-row{display:grid;grid-template-columns:38px 1fr;gap:7px;align-items:center}.color-row input[type=color]{padding:2px;height:33px}.swatches{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0}.swatch{width:18px;height:18px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #ccc}.small-button{border:1px solid #d8d0c2;background:#fff;padding:7px 8px;border-radius:6px;font-size:11px;font-weight:750}.small-button.gold{background:var(--gold);color:#fff;border-color:var(--gold)}.danger{color:#a12e2e}.menu-config{border:1px solid #e4ded2;background:#fcfbf8;border-radius:8px;padding:8px;margin:8px 0}.menu-config-row{display:grid;grid-template-columns:1fr auto;gap:5px;align-items:center;margin-top:6px}.hidden{display:none!important}.raw-mode{height:100%;display:flex;flex-direction:column;background:#f8f7f3}.raw-mode-bar{padding:10px 18px;background:#222;color:#fff;font-size:12px;font-weight:650}.raw-mode-bar button{margin-left:8px;border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;border-radius:5px;padding:4px 8px}.raw-mode iframe{border:0;width:100%;height:100%;background:#fff}.toast{position:fixed;right:18px;bottom:18px;background:#222;color:#fff;padding:11px 14px;border-radius:9px;font-size:12px;font-weight:700;box-shadow:0 10px 26px rgba(0,0,0,.2);opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s;z-index:99}.toast.show{opacity:1;transform:none}.preview-mode .editor-only,.preview-mode .left-panel,.preview-mode .right-panel{display:none}.preview-mode .workspace{grid-template-columns:1fr}.preview-mode .canvas-toolbar{display:flex}.preview-mode .canvas-area{background:#f1eee8}.preview-mode .canvas-scroller{height:calc(100% - 44px)}.preview-mode .page-element{outline:none!important;box-shadow:none!important;cursor:default}.preview-mode .resize-handle{display:none}.preview-mode .global-menu{cursor:default}
@media(max-width:900px){.workspace{grid-template-columns:155px minmax(350px,1fr) 260px}.topbar{gap:8px;padding:0 10px}.project-title{width:130px}.top-actions{gap:3px}.tool-button{padding:7px;font-size:10px}.canvas-scroller{padding:15px}}