:root{--bg:#f6f7f8;--panel:#fff;--ink:#1a2223;--muted:#5c6b6d;--line:#dfe4e5;--accent:#173234;--accent-ink:#fff;--radius:8px}@media (prefers-color-scheme:dark){:root{--bg:#10191a;--panel:#172223;--ink:#e7edee;--muted:#9fb0b1;--line:#26383a;--accent:#3ea6a0;--accent-ink:#06201f}}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{color:var(--ink);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{flex-direction:column;display:flex}.builder-toolbar{background:var(--panel);border-bottom:1px solid var(--line);align-items:center;gap:8px;padding:10px 14px;display:flex}.builder-title{font-weight:600}.builder-spacer{flex:1}.toolbar-signout{margin-left:8px}.builder-status{color:var(--muted);text-align:right;min-width:60px;font-size:13px}.builder-btn{font:inherit;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);cursor:pointer;padding:6px 12px;font-size:13px}.builder-btn:hover{border-color:var(--accent)}.builder-body{flex:1;grid-template-columns:240px 1fr 300px;min-height:0;display:grid}.builder-panel{background:var(--panel);padding:14px;overflow:auto}.builder-palette{border-right:1px solid var(--line)}.builder-inspector{border-left:1px solid var(--line)}.mobile-only{display:none}.drawer-close{width:100%;font:inherit;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);min-height:40px;color:var(--ink);cursor:pointer;margin-bottom:10px;font-size:14px;display:none}.builder-backdrop{z-index:1150;background:#0a14156b;display:none;position:fixed;inset:0}@media (width<=820px){.builder-toolbar{flex-wrap:wrap;gap:6px;padding:8px 10px}.builder-title{display:none}.builder-body{grid-template-columns:1fr}.builder-palette,.builder-inspector{z-index:1200;width:min(86vw,340px);transition:transform .22s;position:fixed;top:0;bottom:0;box-shadow:0 0 44px #0a141547}.builder-palette{left:0;transform:translate(-100%)}.builder-inspector{right:0;transform:translate(100%)}.builder-palette.open,.builder-inspector.open{transform:translate(0)}.builder-backdrop.show{display:block}.mobile-only{display:inline-flex}.drawer-close{display:block}.toolbar-signout{margin-left:6px}}.builder-placeholder{color:var(--muted);font-size:13px}.builder-section+.builder-section{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}.builder-section-header{cursor:pointer;width:100%;font:inherit;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:0 0;border:none;align-items:center;gap:6px;margin:0 0 10px;padding:0;font-size:12px;display:flex}.builder-section-header:hover{color:var(--ink)}.builder-section-caret{font-size:10px;line-height:1;transition:transform .15s}.builder-section.collapsed .builder-section-caret{transform:rotate(-90deg)}.builder-section.collapsed .builder-section-header{margin-bottom:0}.builder-section.collapsed .builder-section-body{display:none}.palette-group{margin-bottom:14px}.palette-group-heading{color:var(--muted);margin-bottom:6px;font-size:11px}.palette-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.palette-chip{font:inherit;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);cursor:grab;text-align:left;touch-action:none;padding:8px 10px;font-size:13px}.palette-chip:hover{border-color:var(--accent)}.palette-chip:active{cursor:grabbing}.layer-row{cursor:pointer;border-radius:4px;align-items:center;gap:6px;padding:4px 8px;font-size:13px;display:flex}.layer-row:hover{background:color-mix(in srgb, var(--accent) 8%, transparent)}.layer-row.selected{background:color-mix(in srgb, var(--accent) 16%, transparent)}.layer-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.layer-del{font:inherit;color:var(--muted);cursor:pointer;opacity:0;background:0 0;border:none;padding:0 4px;line-height:1}.layer-row:hover .layer-del{opacity:1}.layer-del:hover{color:#c0392b}.dnd-ghost{background:var(--accent);color:var(--accent-ink);border-radius:6px;padding:6px 10px;font-size:12px}.login-wrap{background:var(--bg);justify-content:center;align-items:center;height:100%;display:flex}.login-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-direction:column;gap:12px;width:320px;padding:28px 24px;display:flex}.login-title{margin:0;font-size:20px}.login-sub{color:var(--muted);margin:0 0 6px;font-size:13px}.login-field{color:var(--muted);flex-direction:column;gap:4px;font-size:13px;display:flex}.login-input{font:inherit;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);padding:9px 10px;font-size:14px}.login-input:focus{border-color:var(--accent);outline:none}.login-error{color:#c0392b;margin:0;font-size:13px}.login-btn{font:inherit;border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);cursor:pointer;border:none;margin-top:4px;padding:10px;font-size:14px}.login-btn:disabled{opacity:.6;cursor:default}.inspector-bp{gap:4px;margin-bottom:12px;display:flex}.inspector-bp-btn{font:inherit;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--muted);cursor:pointer;flex:1;padding:5px 0;font-size:12px}.inspector-bp-btn.active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}.inspector-title{margin-bottom:4px;font-size:14px;font-weight:600}.inspector-section{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-top:1px solid var(--line);margin:14px 0 8px;padding-top:10px;font-size:11px}.inspector-note{color:var(--muted);margin:-2px 0 8px;font-size:12px}.inspector-row{margin-bottom:10px;display:block}.inspector-label{color:var(--muted);margin-bottom:4px;font-size:12px;display:block}.inspector-input{width:100%;font:inherit;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);padding:6px 8px;font-size:13px}.inspector-input:focus{border-color:var(--accent);outline:none}textarea.inspector-input{resize:vertical}.inspector-range{width:100%;accent-color:var(--accent)}.inspector-range:disabled{opacity:.4}.inspector-image{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.inspector-image-thumb{object-fit:contain;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);width:100%;max-height:120px}.inspector-upload-btn{font:inherit;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);cursor:pointer;padding:6px 12px;font-size:13px}.inspector-upload-btn:hover:not(:disabled){border-color:var(--accent)}.inspector-upload-btn:disabled{opacity:.5;cursor:default}.inspector-upload-status{color:var(--muted);font-size:12px}.inspector-image-actions{align-items:center;gap:8px;width:100%;display:flex}.inspector-upload-progress{flex-direction:column;gap:4px;width:100%;display:flex}.inspector-upload-bar{background:var(--line);border-radius:3px;height:6px;position:relative;overflow:hidden}.inspector-upload-fill{background:var(--accent);border-radius:3px;width:0;height:100%;transition:width .15s}.inspector-upload-progress.indeterminate .inspector-upload-fill{width:35%;transition:none;animation:1.1s ease-in-out infinite inspector-upload-sweep}@keyframes inspector-upload-sweep{0%{margin-left:-35%}to{margin-left:100%}}.inspector-video{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.inspector-video-preview{border:1px solid var(--line);border-radius:var(--radius);background:#000;width:100%;max-height:140px}.inspector-url{flex-direction:column;gap:4px;width:100%;margin-top:6px;display:flex}.inspector-url-field{gap:6px;display:flex}.inspector-url-field .inspector-input{flex:1;min-width:0;font-size:12px}.inspector-copy{font:inherit;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);cursor:pointer;white-space:nowrap;padding:4px 10px;font-size:12px}.inspector-copy:hover{border-color:var(--accent)}.inspector-color{align-items:center;gap:8px;display:flex}.inspector-color input[type=color]{border:1px solid var(--line);border-radius:var(--radius);background:0 0;width:34px;height:28px;padding:0}.inspector-swatch{color:var(--muted);flex:1;font-size:12px}.inspector-clear{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:none;padding:0 4px}.inspector-clear:hover{color:#c0392b}.builder-canvas{background:var(--bg);min-height:0;position:relative;overflow:hidden}.canvas-container{width:100%;height:100%;position:relative}.canvas-overlay{pointer-events:none;z-index:5;position:absolute;inset:0}.canvas-sel{outline:2px solid var(--accent);outline-offset:-1px;border-radius:2px}.canvas-hover{outline:1px dashed var(--accent);outline-offset:-1px;opacity:.7}.canvas-sel-label{background:var(--accent);color:var(--accent-ink);white-space:nowrap;border-radius:3px 3px 0 0;padding:3px 6px;font-size:11px;line-height:1;position:absolute}.canvas-sel-menu{pointer-events:auto;width:28px;height:22px;color:var(--accent-ink);background:var(--accent);cursor:pointer;border:none;border-radius:3px 3px 0 0;justify-content:center;align-items:center;padding:0;font-size:15px;line-height:1;display:flex;position:absolute}@media (pointer:coarse){.canvas-sel-menu{width:44px;height:32px;font-size:22px}}.ctx-menu{z-index:1100;background:var(--panel);border:1px solid var(--line);border-radius:10px;flex-direction:column;gap:2px;min-width:180px;padding:6px;display:flex;position:fixed;box-shadow:0 12px 32px #0a141538}.ctx-item{font:inherit;text-align:left;min-height:40px;color:var(--ink);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:0 12px;font-size:14px}.ctx-item:hover:not(:disabled){background:var(--accent);color:var(--accent-ink)}.ctx-item.danger{color:#c0392b}.ctx-item.danger:hover:not(:disabled){color:#fff;background:#c0392b}.ctx-item:disabled{opacity:.38;cursor:default}.builder-pages{flex-wrap:wrap;gap:4px;display:flex}.pages-section{flex-direction:column;gap:10px;display:flex}.pages-actions{flex-wrap:wrap;gap:6px;display:flex}.grid-section{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.grid-section .grid-control{flex-wrap:wrap}.output-section{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.builder-page-tab{font:inherit;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--muted);cursor:pointer;padding:4px 10px;font-size:12px}.builder-page-tab.active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}.page-delete-wrap{border-top:1px solid var(--line);align-items:center;gap:6px;padding-top:15px;padding-bottom:0;display:flex}.page-delete{font:inherit;border-radius:var(--radius);color:#b4442f;cursor:pointer;background:0 0;border:1px solid #e6b3a8;padding:3px 9px;font-size:12px}.page-delete:hover:not(:disabled){background:#fdf3f1;border-color:#d98b7a}.page-delete:disabled{opacity:.4;cursor:default}.page-delete-label{color:#b4442f;cursor:pointer;font-size:12px}.page-delete:disabled~.page-delete-label{opacity:.4;cursor:default;pointer-events:none}.builder-btn:disabled{opacity:.4;cursor:default}.mode-toggle{border:1px solid var(--line);border-radius:var(--radius);display:inline-flex;overflow:hidden}.mode-btn{font:inherit;background:var(--panel);color:var(--muted);cursor:pointer;border:none;padding:6px 10px;font-size:12px}.mode-btn.active{background:var(--accent);color:var(--accent-ink)}.grid-control{align-items:center;gap:4px;display:inline-flex}.grid-toggle.active,.snap-toggle.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.grid-num{width:40px;font:inherit;text-align:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);padding:5px 4px;font-size:12px}.grid-x{color:var(--muted);font-size:12px}.preview-overlay{z-index:1000;background:#0a14158c;flex-direction:column;padding:24px;display:flex;position:fixed;inset:0}.preview-bar{color:#fff;justify-content:space-between;align-items:center;padding:0 4px 10px;font-size:13px;display:flex}.preview-close{font:inherit;border-radius:var(--radius);color:#fff;cursor:pointer;background:0 0;border:1px solid #fff6;padding:5px 12px;font-size:13px}.preview-frame{border-radius:var(--radius);background:#fff;border:none;flex:1;width:100%}.theme-panel{flex-direction:column;gap:10px;font-size:13px;display:flex}.theme-row{align-items:center;gap:8px;display:flex}.theme-label{color:var(--muted);min-width:34px}.theme-sublabel{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;font-size:11px}.theme-seed{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:6px;width:40px;height:28px;padding:0}.theme-hex{min-width:0;font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:6px;flex:1;padding:5px 8px;font-family:ui-monospace,monospace}.theme-seg{border:1px solid var(--line);border-radius:6px;gap:0;display:flex;overflow:hidden}.theme-seg-btn{font:inherit;border:none;border-right:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;flex:1;padding:6px 4px;font-size:12px}.theme-seg-btn:last-child{border-right:none}.theme-seg-btn.active{background:var(--accent);color:var(--accent-ink)}.theme-demo{border:1px solid;border-radius:8px;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;transition:background .1s,color .1s;display:flex}.theme-chip{border-radius:6px;padding:8px 10px;font-size:12px}.theme-pill{border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600}.theme-swatches{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.theme-swatch{flex-direction:column;gap:3px;display:flex}.theme-swatch-box{border:1px solid #0000001f;border-radius:5px;height:30px}.theme-swatch-name{color:var(--ink);font-size:11px}.theme-swatch-hex{color:var(--muted);font-family:ui-monospace,monospace;font-size:10px}.theme-actions{justify-content:flex-start}.theme-hint{color:var(--muted);font-size:11px;line-height:1.4}