:root{--ink:#182033;--muted:#717889;--line:#e5e8ee;--purple:#6457e8;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-size:14px}.topbar{height:64px;display:grid;grid-template-columns:270px 1fr auto;align-items:center;border-bottom:1px solid var(--line);padding:0 16px}.brand,.actions{display:flex;align-items:center;gap:9px}.brand{font-weight:800;font-size:16px}.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center}.badge{font-size:10px;color:var(--purple);background:#eeecff;padding:4px 6px;border-radius:5px}.page-title{text-align:center}.muted,.save-state{color:#8a909e}.button,.icon-btn,.viewport-switcher button{border:0;background:none;font:inherit;cursor:pointer}.button{border-radius:8px;padding:10px 14px;font-weight:700}.secondary{border:1px solid var(--line)!important}.primary{background:#ebe9ff!important;color:#5143d7}.dark{background:#1d2433!important;color:#fff}.icon-btn{width:34px;height:34px;border-radius:7px;font-size:18px}.icon-btn:hover{background:#f2f3f6}.editor-shell{height:calc(100vh - 64px);display:grid;grid-template-columns:270px minmax(460px,1fr) 300px}.panel{background:#fff;overflow:auto}.library{border-right:1px solid var(--line)}.inspector{border-left:1px solid var(--line)}.panel-heading{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line)}.search{display:flex;align-items:center;margin:14px;padding:0 12px;height:38px;border:1px solid var(--line);border-radius:8px;gap:8px}.search input{border:0;outline:0;width:100%;font:inherit}.component-group{padding:4px 14px 12px}.component-group h3,.inspector-section h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#8a909e}.component-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.component-card{border:1px solid var(--line);border-radius:9px;padding:12px 8px;background:#fff;cursor:grab;text-align:left}.component-card:hover{border-color:#afa8fb;background:#faf9ff}.component-icon{display:block;font-size:20px;margin-bottom:8px}.component-name{font-size:12px;font-weight:650}.library-tip{display:flex;gap:10px;margin:14px;padding:14px;background:#f5f3ff;border-radius:10px;color:#5547d6}.library-tip p{margin:4px 0 0;font-size:12px;line-height:1.45;color:#77709e}.workspace{min-width:0;background:#f3f4f7;display:flex;flex-direction:column}.workspace-toolbar{height:56px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.viewport-switcher{display:flex;border:1px solid var(--line);border-radius:8px;padding:3px}.viewport-switcher button{width:32px;height:28px;border-radius:5px}.viewport-switcher button.active{background:#eceaff;color:#5748dc}.save-state,.zoom{font-size:12px}.zoom select{border:1px solid var(--line);padding:5px;border-radius:6px}.canvas-stage{flex:1;overflow:auto;padding:28px;display:flex;justify-content:center;align-items:flex-start}.canvas-frame{width:100%;max-width:1140px;transition:width .2s;transform-origin:top center}.canvas{background:#fff;min-height:calc(100vh - 176px);box-shadow:0 6px 28px #1f273312;overflow:hidden}.empty-canvas{min-height:600px;display:grid;place-items:center;text-align:center;color:#858b99}.empty-inner{padding:40px;border:2px dashed #dfe2e8;border-radius:18px}.empty-inner strong{display:block;color:#434a5a;font-size:18px;margin-bottom:8px}.canvas-block{position:relative;outline:2px solid transparent;outline-offset:-2px}.canvas-block:hover{outline-color:#bcb6fc}.canvas-block.selected{outline-color:var(--purple)}.block-tools{display:none;position:absolute;right:8px;top:8px;z-index:2;background:#232a39;border-radius:7px}.selected>.block-tools{display:flex}.block-tools button{border:0;background:transparent;color:#fff;padding:7px 9px;cursor:pointer}.drop-line{height:5px}.drop-line.dragover{background:var(--purple)}.preview-hero{min-height:430px;padding:64px 45px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.preview-hero h1{font-size:clamp(42px,6vw,78px);line-height:.98;letter-spacing:-.055em;margin:16px 0}.preview-hero p{max-width:640px;font-size:17px;line-height:1.65;opacity:.7}.preview-eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:800}.preview-button{display:inline-block;padding:12px 20px;border-radius:9px;background:var(--purple);color:#fff;font-weight:700;margin-top:12px}.preview-section{padding:38px 42px}.preview-section h2{font-size:36px;letter-spacing:-.04em;margin:0}.preview-section p{line-height:1.75}.preview-image img{width:100%;height:380px;object-fit:cover;border-radius:12px}.preview-image small{display:block;text-align:center;color:#888;margin-top:8px}.preview-columns,.preview-stats{display:grid;grid-template-columns:1fr 1fr;gap:26px}.preview-stats{grid-template-columns:repeat(3,1fr);text-align:center}.preview-stats strong{display:block;font-size:36px}.preview-quote{font-size:27px;font-weight:650}.preview-quote small{display:block;font-size:13px;color:#777;margin-top:12px}.danger-icon{border:0;background:#fff;color:#c44255;cursor:pointer;font-size:18px}.inspector-empty{padding:46px 24px;text-align:center;color:#878e9d}.inspector-section{padding:16px;border-bottom:1px solid var(--line)}.inspector-section h3{margin:0 0 14px}.field{display:block;margin-bottom:14px}.field span{display:block;font-size:12px;font-weight:650;margin-bottom:6px}.field input,.field textarea,.field select{width:100%;border:1px solid #dfe2e8;border-radius:7px;padding:9px;font:inherit;background:#fff}.field textarea{min-height:80px;resize:vertical}.field input[type=color]{padding:3px;height:40px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#202735;color:#fff;padding:11px 16px;border-radius:8px;opacity:0;transition:.2s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:900px){.editor-shell{grid-template-columns:220px 1fr}.inspector{position:fixed;right:0;top:64px;bottom:0;width:290px;box-shadow:-10px 0 30px #0001}.topbar{grid-template-columns:210px 1fr}.page-title{display:none}}@media(max-width:650px){.library{display:none}.editor-shell{grid-template-columns:1fr}.topbar{grid-template-columns:1fr auto}.actions .secondary,.actions .icon-btn{display:none}.canvas-stage{padding:12px}.inspector{width:270px}}