:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{color:#1f1c26;background:#eef0f4;margin:0}:root{--accent:#4f6ef7;--accent-soft:#eef1fe;--ink:#1f1c26;--muted:#8b8792;--line:#e8e7ec;--line-strong:#d9d7de;--panel:#fff;--surface:#eef0f4;--radius:10px}.app{flex-direction:column;height:100vh;display:flex;overflow:hidden}.topbar{background:var(--panel);border-bottom:1px solid var(--line);flex:none;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;height:56px;padding:0 14px;display:grid}.topbar-left{align-items:center;gap:10px;min-width:0;display:flex}.topbar-center{justify-content:center;display:flex}.topbar-right{justify-content:flex-end;align-items:center;gap:6px;display:flex}.doc-name{color:var(--ink);background:0 0;border:1px solid #0000;border-radius:7px;max-width:220px;padding:5px 8px;font-size:14px;font-weight:600}.doc-name:hover{background:#f4f4f6}.doc-name:focus{border-color:var(--accent);background:#fff;outline:none}.badge{color:var(--muted);border:1px solid var(--line);background:#f1f1f3;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:600}.divider-v{background:var(--line);width:1px;height:22px;margin:0 4px}.icon-btn{color:#4b4753;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;text-decoration:none;display:inline-flex}.icon-btn:hover{background:#f1f1f3}.icon-btn:disabled{color:#c8c6cd;cursor:default;background:0 0}.btn{border:1px solid var(--line);height:36px;color:var(--ink);cursor:pointer;background:#fff;border-radius:9px;align-items:center;gap:7px;padding:0 14px;font-size:13.5px;font-weight:600;display:inline-flex}.btn:hover{background:#f7f7f9}.btn-dark{color:#fff;background:#1c1a22;border-color:#1c1a22}.btn-dark:hover{background:#000}.seg{background:#f1f1f3;border-radius:9px;gap:2px;padding:3px;display:inline-flex}.seg button{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:7px;justify-content:center;align-items:center;padding:5px 12px;font-size:13px;font-weight:600;display:inline-flex}.seg button.on{color:var(--ink);background:#fff;box-shadow:0 1px 2px #00000014}.device-seg button{padding:5px 14px}.main{flex:1;grid-template-columns:264px 1fr 300px;min-height:0;display:grid}.palette{border-right:1px solid var(--line);background:var(--panel);flex-direction:column;min-height:0;display:flex}.palette-search{border:1px solid var(--line);height:38px;color:var(--muted);border-radius:9px;align-items:center;gap:8px;margin:14px;padding:0 10px;display:flex}.palette-search input{width:100%;color:var(--ink);background:0 0;border:none;outline:none;font-size:13.5px}.palette-scroll{padding:0 14px 20px;overflow-y:auto}.palette-heading{color:var(--muted);text-transform:none;margin:12px 2px 8px;font-size:12px;font-weight:700}.palette-item-icon{color:#6a6675;display:inline-flex}.palette-cat{border:1px solid var(--line);background:#fff;border-radius:9px;margin-bottom:8px;overflow:hidden}.palette-cat.open{border-color:var(--line-strong)}.palette-cat-head{cursor:pointer;width:100%;color:var(--ink);text-align:left;background:0 0;border:none;align-items:center;gap:11px;padding:10px 12px;font-size:13.5px;font-weight:500;display:flex}.palette-cat-head:hover{background:#f7f7f9}.palette-cat-label{flex:1}.palette-cat-count{color:var(--muted);background:var(--surface);border-radius:20px;padding:2px 7px;font-size:11px;font-weight:700}.palette-chevron{color:var(--muted);transition:transform .15s;display:inline-flex}.palette-chevron.open{transform:rotate(90deg)}.palette-variants{flex-direction:column;gap:8px;padding:0 10px 10px;display:flex}.variant-card{border:1px solid var(--line);cursor:grab;text-align:left;background:#fff;border-radius:8px;padding:0;overflow:hidden}.variant-card:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.variant-card:active{cursor:grabbing}.variant-preview{pointer-events:none;background:#fff;height:48px;display:block;position:relative;overflow:hidden}.variant-preview.tall{height:80px}.variant-preview-inner{box-sizing:border-box;transform-origin:top;width:600px;padding:10px 52px;display:block;position:absolute;top:0;left:50%;transform:translate(-50%)scale(.38)}.variant-spacer-demo{border:1px dashed var(--line-strong);background:var(--surface);border-radius:6px;margin:10px 14px;display:block}.variant-label{color:var(--muted);border-top:1px solid var(--line);background:#fbfbfc;padding:7px 10px;font-size:12px;font-weight:600;display:block}.workspace{background:var(--surface);justify-content:center;align-items:flex-start;padding:32px 24px 80px;display:flex;overflow:auto}.canvas{background:#fff;border-radius:12px;width:600px;max-width:100%;padding:32px;transition:width .2s;box-shadow:0 1px 3px #1414280f,0 12px 40px #1414280f}.canvas.mobile{width:380px}.canvas-empty{border:2px dashed var(--line-strong);text-align:center;color:var(--muted);border-radius:12px;padding:56px 20px}.canvas-empty.is-over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.canvas-empty p{color:var(--ink);margin:10px 0 2px;font-weight:600}.canvas-empty span{font-size:13px}.block{cursor:pointer;border-radius:8px;margin:2px 0;padding:12px;position:relative}.block:after{content:"";pointer-events:none;z-index:2;border:1px solid #0000;border-radius:8px;position:absolute;inset:0}.block:hover:after{border-color:var(--line-strong)}.block.selected:after{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.block-tag{z-index:3;color:#fff;background:var(--accent);opacity:0;pointer-events:none;border-radius:5px;padding:2px 7px;font-size:10.5px;font-weight:700;transition:opacity .12s;position:absolute;top:-10px;left:8px}.block:hover .block-tag,.block.selected .block-tag{opacity:1}.block-actions{z-index:3;opacity:0;gap:4px;transition:opacity .12s;display:flex;position:absolute;top:-13px;right:8px}.block:hover .block-actions,.block.selected .block-actions{opacity:1}.block-actions button{border:1px solid var(--line);color:#4b4753;cursor:pointer;background:#fff;border-radius:6px;justify-content:center;align-items:center;width:26px;height:26px;display:inline-flex;box-shadow:0 1px 2px #00000014}.block-actions button:hover{color:var(--accent);border-color:var(--accent)}.drop-line{background:var(--accent);border-radius:3px;height:3px;margin:3px 0}.properties{border-left:1px solid var(--line);background:var(--panel);min-height:0;overflow-y:auto}.properties-empty{text-align:center;height:100%;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:40px 24px;display:flex}.properties-empty svg{color:var(--line-strong);margin-bottom:6px}.properties-empty strong{color:var(--ink);font-size:14px}.properties-empty span{font-size:13px}.properties-head{border-bottom:1px solid var(--line);background:#fff;align-items:center;gap:10px;padding:16px;display:flex;position:sticky;top:0}.properties-head h3{margin:0;font-size:14px;font-weight:700}.properties-icon{background:var(--accent-soft);width:30px;height:30px;color:var(--accent);border-radius:8px;justify-content:center;align-items:center;display:inline-flex}.properties-fields{flex-direction:column;gap:16px;padding:16px;display:flex}.field{flex-direction:column;gap:6px;display:flex}.field-label{color:#6a6675;font-size:12px;font-weight:600}.field-hint{color:var(--muted);font-size:11px}.ctl{border:1px solid var(--line);width:100%;color:var(--ink);background:#fff;border-radius:8px;padding:8px 10px;font-family:inherit;font-size:13px}.ctl:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}textarea.ctl{resize:vertical}.color-ctl{align-items:center;gap:8px;display:flex}.color-ctl input[type=color]{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:8px;flex:none;width:38px;height:34px;padding:2px}.range-ctl{align-items:center;gap:10px;display:flex}.range-ctl input[type=range]{accent-color:var(--accent);flex:1}.range-val{color:var(--muted);text-align:right;min-width:42px;font-size:12px;font-weight:600}.toggle{cursor:pointer;align-items:center;gap:9px;font-size:13px;font-weight:500;display:flex}.toggle input{width:16px;height:16px;accent-color:var(--accent)}.social-rows{flex-direction:column;gap:8px;display:flex}.social-row{grid-template-columns:auto 1fr 1fr auto;align-items:center;gap:6px;display:grid}.social-badge{border-radius:50%;flex:none;justify-content:center;align-items:center;width:24px;height:24px;display:inline-flex}.add-row{border:1px dashed var(--line-strong);color:var(--accent);cursor:pointer;background:#fff;border-radius:8px;align-self:flex-start;align-items:center;gap:6px;padding:7px 12px;font-size:12.5px;font-weight:600;display:inline-flex}.add-row:hover{border-color:var(--accent)}.modal-backdrop{z-index:50;background:#12121c8c;justify-content:center;align-items:center;padding:32px;display:flex;position:fixed;inset:0}.modal{background:#fff;border-radius:14px;flex-direction:column;width:760px;max-width:100%;max-height:90vh;display:flex;overflow:hidden}.modal-head{border-bottom:1px solid var(--line);align-items:center;gap:14px;padding:14px 16px;display:flex}.modal-head strong{font-size:15px}.modal-head .device-seg{margin-left:auto}.modal-body{background:var(--surface);justify-content:center;padding:28px;display:flex;overflow:auto}.canvas.preview{box-shadow:0 8px 30px #0000001f}.block-preview{padding:12px}.muted{color:var(--muted)}.app-message{background:var(--surface);height:100vh;color:var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:14px;font-size:15px;display:flex}.app-message a{color:var(--accent);font-weight:600}.banner-warning{color:#6b5416;text-align:center;background:#fdf3d7;border-bottom:1px solid #f0dfa6;padding:9px 18px;font-size:13px}.image-ctl{flex-direction:column;gap:8px;display:flex}.image-ctl .upload-btn{justify-content:center;height:32px;font-size:12.5px}.drive-modal{width:640px}.drive-crumbs{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:2px;padding:10px 16px;font-size:13px;display:flex}.crumb{color:var(--accent);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:2px 4px;font-size:13px;font-weight:600}.crumb:hover{background:var(--accent-soft)}.crumb.current{color:var(--ink);cursor:default}.crumb.current:hover{background:0 0}.crumb-sep{color:var(--muted);margin:0 2px}.drive-upload{height:30px;margin-left:auto;font-size:12.5px}.drive-upload.disabled{opacity:.6;pointer-events:none}.drive-body{justify-content:flex-start;align-items:flex-start;min-height:260px;padding:16px}.drive-grid{grid-template-columns:repeat(4,1fr);gap:10px;width:100%;display:grid}.drive-tile{border:1px solid var(--line);cursor:pointer;text-align:left;background:#fff;border-radius:9px;padding:0;overflow:hidden}.drive-tile:hover:not(:disabled){border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.drive-tile:disabled{cursor:not-allowed;opacity:.55}.drive-thumb{background:var(--surface);height:84px;color:var(--muted);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.drive-thumb img{object-fit:cover;width:100%;height:100%}.drive-lock{color:#fff;background:#12121ca6;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;display:inline-flex;position:absolute;top:6px;right:6px}.drive-name{color:var(--ink);white-space:nowrap;text-overflow:ellipsis;padding:6px 8px;font-size:12px;font-weight:500;display:block;overflow:hidden}.drive-pager{border-top:1px solid var(--line);justify-content:center;align-items:center;gap:14px;padding:12px 16px;font-size:13px;display:flex}.toast{color:#fff;z-index:60;background:#1c1a22;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:500;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #00000040}@media (width<=1000px){.main{grid-template-columns:220px 1fr 260px}}