.browser-workspace{align-items:start}.browser-workspace [hidden]{display:none!important}.browser-upload-box{padding:20px;border-bottom:1px solid #e4e8e1}.browser-upload{position:relative;display:grid;justify-items:center;gap:8px;padding:22px 12px;background:#f6f8fc;border:1px dashed #bdcbe5;border-radius:12px;cursor:pointer;overflow:hidden;text-align:center}.browser-upload:hover,.browser-upload-box.is-dragging .browser-upload{border-color:#285be7;background:#edf2ff}.browser-upload-icon{display:grid;place-items:center;width:36px;height:36px;color:#285be7;background:#e6edff;border-radius:10px}.browser-upload strong{font-size:13px;font-weight:600}.browser-upload small{font-size:11px;color:#78818e}.browser-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.browser-upload:focus-within{outline:2px solid #285be7;outline-offset:3px}
.browser-segment{display:flex;gap:3px;align-items:center;border:1px solid #e0e5db;background:#f2f4ef;padding:3px;border-radius:9px;min-width:0;flex-wrap:wrap}.browser-segment legend:not(.sr-only){float:left;width:100%;padding-bottom:7px}.browser-segment label{position:relative;flex:1;cursor:pointer;text-align:center;white-space:nowrap}.browser-segment input{position:absolute;opacity:0;width:1px;height:1px}.browser-segment label>span{display:block;padding:8px 12px;border-radius:6px;color:#6d7968;font-size:12px}.browser-segment input:checked+span{background:#fff;box-shadow:0 1px 4px #24391d0a;color:#285be7}.browser-segment input:focus-visible+span{outline:2px solid #285be7;outline-offset:1px}.browser-style-switch{background:transparent;border:0;padding:0;gap:5px}.browser-style-switch label>span{padding:8px 12px;border:1px solid transparent}.browser-style-switch input:checked+span{border-color:#c7d4ff;background:#f0f4ff;box-shadow:none}.browser-toolbar{justify-content:space-between;gap:14px}.browser-canvas-formats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}.browser-canvas-formats legend{padding-bottom:10px}.browser-canvas-formats label:first-of-type{grid-column:1/-1}.browser-canvas-formats label{position:relative;cursor:pointer}.browser-canvas-formats input{position:absolute;opacity:0;width:1px;height:1px}.browser-canvas-formats span{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px;border:1px solid #e0e5db;border-radius:7px;color:#617059;font-size:11px}.browser-canvas-formats small{font-size:9px;color:#879480}.browser-canvas-formats input:checked+span{background:#f0f4ff;border-color:#b5c6ff;color:#285be7}.browser-canvas-formats input:focus-visible+span{outline:2px solid #285be7;outline-offset:1px}.browser-fit-toggle{font-size:11px;white-space:nowrap;color:#74806c;display:flex;align-items:center;gap:7px}.browser-fit-toggle input{accent-color:#285be7;width:14px;height:14px}
.browser-workspace .app-preview-stage{padding:26px;position:relative;min-height:290px;transition:background .15s}.browser-workspace .app-preview-stage.is-dragging{background:#e6eeff;outline:2px dashed #285be7;outline-offset:-8px}.browser-preview-wrap{position:relative;margin:auto;width:100%}.browser-preview-wrap [data-preview]{width:100%!important;max-width:none!important}.browser-preview-wrap svg{display:block;width:100%;height:auto}.browser-position-layer{position:absolute;inset:0;border:2px dashed #285be7;background:#285be705;cursor:grab;touch-action:none;border-radius:9px}.browser-position-layer:active{cursor:grabbing}.browser-position-layer:focus-visible{outline:3px solid #285be7;outline-offset:4px}.browser-preview-footer{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid #e5e9e2;background:#fff;font-size:11px;color:#74806c}
.browser-setting-card{display:grid;gap:14px;padding:14px;border:1px solid #e0e5dc;border-radius:10px;background:#f8faf6}.browser-field-label{font-size:12px;color:#4e5c47;font-weight:500}.browser-two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.browser-stepper{display:flex;align-items:center;border:1px solid #dce2d6;border-radius:8px;background:#fff;overflow:hidden}.browser-stepper button{height:38px;flex:0 0 28px;background:none;border:0;font-size:18px;color:#6f7c66;cursor:pointer}.browser-stepper button:hover:not(:disabled){background:#eff3ff;color:#285be7}.browser-stepper button:disabled{opacity:.3}.browser-controls .browser-stepper input{padding:8px 0;border:0!important;border-radius:0;appearance:textfield;text-align:center;min-width:0;font-size:12px;box-shadow:none}.browser-stepper input::-webkit-inner-spin-button{appearance:none}.browser-range{position:relative}.browser-range>span{position:absolute;right:0;top:0;color:#7c8973;font-size:11px}.browser-color>span{display:flex;align-items:center;gap:8px;border:1px solid #dce2d6;border-radius:8px;background:#fff;padding:8px}.browser-color b{font-size:10px;color:#6b7862;font-weight:400}.browser-color input[type=color]{width:25px;height:25px;min-width:25px;padding:0;border:0;background:none;cursor:pointer}.browser-color input::-webkit-color-swatch-wrapper{padding:0}.browser-color input::-webkit-color-swatch{border:0;border-radius:5px}.browser-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.browser-palette button{height:34px;border:1px solid #172b1f10;border-radius:8px;background:var(--swatch);cursor:pointer}.browser-palette button[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 0 3px #285be7}.browser-outline-button{border:1px solid #cbd6c3;border-radius:8px;background:white;color:#526449;font-size:12px;font-weight:500;font-family:inherit;padding:10px 12px;cursor:pointer}.browser-outline-button:hover,.browser-outline-button[aria-pressed=true]{color:#285be7;border-color:#b4c7ff;background:#f0f4ff}.browser-action-row{display:flex;justify-content:space-between;gap:8px}.browser-action-row button{font-size:11px}.browser-viewport-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.browser-viewport-grid button{display:grid;grid-template-columns:24px 1fr;gap:4px 9px;border:1px solid #dce2d6;border-radius:9px;background:#fff;padding:12px;text-align:left;color:#59694f;cursor:pointer}.browser-viewport-grid button[aria-pressed=true]{background:#f0f4ff;border-color:#b4c7ff;color:#285be7}.browser-viewport-grid strong{font-size:12px;font-weight:500}.browser-viewport-grid small{grid-column:2;font-size:9px;color:#88927f}.browser-device-icon{grid-row:span 2;border:1.5px solid currentColor;align-self:center;width:23px;height:15px;border-radius:3px}.browser-device-icon.is-mobile{height:23px;width:13px;justify-self:center}.browser-device-icon.is-tablet{height:24px;width:18px;justify-self:center}.browser-device-icon.is-laptop{border-bottom-width:3px}
@media(max-width:1100px){.browser-style-switch label>span{padding:7px 9px}.browser-workspace .app-preview-stage{padding:18px}}@media(max-width:720px){.browser-toolbar{align-items:flex-start}.browser-style-switch{width:100%}.browser-style-switch label{flex:1 1 28%}.browser-canvas-formats span{padding:7px 10px}.browser-workspace .app-preview-stage{padding:12px;min-height:220px}.browser-upload-box{padding:16px}.browser-upload{padding:16px}.browser-preview-footer{font-size:11px;line-height:1.6}}