:root{--canvas-bg:#fafafa;--block-border:#bbb;--block-bg:#fff;--block-label:#888;--block-hover:#999;--block-selected:#4a9eed;--container-border:#bbb;--resize-handle:#ccc;--btn-border:#ccc;--btn-text:#666;--grid-line:#f0f0f0;--font-mono:"SF Mono", "Fira Code", "Consolas", monospace;--label-size:16px;--grid-margin:4px;--header-bg:#fff;--header-text:#999;--header-accent:#444;--artboard-shadow:#0000000f;--scrollbar-thumb:silver;--scrollbar-track:transparent;--accent:#e03e3e;--accent-24:#e03e3e3d}@media (prefers-color-scheme:dark){:root{--canvas-bg:#1e1e1e;--block-border:#555;--block-bg:#2a2a2a;--block-label:#a0a0a0;--block-hover:#ccc;--block-selected:#888;--container-border:#555;--resize-handle:#666;--btn-border:#444;--btn-text:#b0b0b0;--grid-line:#333;--header-bg:#252525;--header-text:#909090;--header-accent:silver;--artboard-shadow:#0003;--scrollbar-thumb:#555;--scrollbar-track:transparent;--accent:#e03e3e;--accent-24:#e03e3e3d}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-mono);background:var(--canvas-bg);color:var(--btn-text)}.layout-sandbox{background:var(--canvas-bg);flex-direction:column;height:100vh;display:flex}.layout-sandbox__header{background:var(--header-bg);border-bottom:1px solid var(--grid-line);align-items:baseline;gap:8px;padding:8px 16px;display:flex}.layout-sandbox__logo{font-family:var(--font-mono);color:var(--header-accent);letter-spacing:3px;font-size:18px;font-weight:700}.layout-sandbox__subtitle{font-family:var(--font-mono);color:var(--header-text);font-size:13px;font-weight:500}.header-settings{margin-left:auto;position:relative}.header-settings__btn{color:var(--block-border);cursor:pointer;opacity:.6;background:0 0;border:none;padding:2px 4px;font-size:16px;line-height:1;transition:opacity .15s}.header-settings__btn:hover{opacity:1}.header-settings__dropdown{background:var(--block-bg);border:1px solid var(--grid-line);z-index:100;border-radius:4px;flex-direction:column;gap:6px;width:220px;margin-top:6px;padding:12px;display:flex;position:absolute;top:100%;right:0;box-shadow:0 4px 12px #00000026}.header-settings__title{font-family:var(--font-mono);color:var(--block-hover);letter-spacing:1px;text-transform:uppercase;margin-bottom:2px;font-size:11px;font-weight:600}.header-settings__label{font-family:var(--font-mono);color:var(--block-border);font-size:11px}.header-settings__input{font-family:var(--font-mono);font-size:var(--label-size);color:var(--btn-text);background:var(--canvas-bg);border:1px solid var(--grid-line);border-radius:2px;outline:none;width:100%;padding:4px 6px}.header-settings__input:focus{border-color:var(--block-selected)}.header-settings__dropdown .accent-picker{border-top:1px solid var(--grid-line);margin-top:4px;padding-top:8px}.header-settings__dropdown .accent-picker__swatches{grid-template-columns:repeat(3,1fr);justify-items:center;gap:8px;display:grid}.header-settings__auth{border-top:1px solid var(--grid-line);flex-direction:column;gap:6px;margin-top:4px;padding-top:8px;display:flex}.header-settings__auth-btn{font-family:var(--font-mono);font-size:var(--label-size);color:var(--btn-text);background:var(--canvas-bg);border:1px solid var(--grid-line);cursor:pointer;text-align:center;border-radius:2px;padding:4px 8px;transition:border-color .15s,color .15s}.header-settings__auth-btn:hover{border-color:var(--block-hover);color:var(--block-hover)}.layout-sandbox__body{flex:1;min-height:0;display:flex}.toolbar{border-bottom:1px solid var(--grid-line);background:var(--block-bg);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;display:flex}.toolbar__pages{align-items:center;gap:4px;display:flex}.toolbar__page-tab{align-items:center;gap:2px;display:flex}.toolbar__page-btn{font-family:var(--font-mono);font-size:var(--label-size);color:var(--block-border);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:2px;padding:4px 10px}.toolbar__page-tab--active .toolbar__page-btn{color:var(--btn-text);border-color:var(--btn-border)}.toolbar__page-btn:hover{color:var(--block-hover)}.toolbar__page-close{font-family:var(--font-mono);color:var(--block-border);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:12px;line-height:1}.toolbar__page-close:hover{color:var(--block-hover)}.toolbar__page-rename{font-family:var(--font-mono);font-size:var(--label-size);color:var(--btn-text);background:var(--canvas-bg);border:1px solid var(--block-selected);border-radius:2px;outline:none;width:80px;padding:3px 8px}.toolbar__separator{background:var(--grid-line);width:1px;height:20px;margin:0 4px}.toolbar__spacer{flex:1}.toolbar__dropdown-wrap{position:relative}.toolbar__dropdown{background:var(--block-bg);border:1px solid var(--grid-line);z-index:100;border-radius:4px;flex-direction:column;gap:6px;min-width:180px;margin-top:4px;padding:8px;display:flex;position:absolute;top:100%;left:0;box-shadow:0 4px 12px #00000026}.toolbar__dropdown-label{font-family:var(--font-mono);color:var(--block-border);font-size:11px}.toolbar__dropdown-action{font-family:var(--font-mono);font-size:var(--label-size);color:var(--btn-text);background:var(--grid-line);border:1px solid var(--btn-border);cursor:pointer;text-align:left;border-radius:2px;padding:4px 8px;transition:border-color .15s,color .15s}.toolbar__dropdown-action:hover{border-color:var(--block-hover);color:var(--block-hover)}.toolbar__dropdown-action:disabled{opacity:.4;cursor:default}.toolbar__btn{font-family:var(--font-mono);font-size:var(--label-size);color:var(--btn-text);background:var(--block-bg);border:1px solid var(--btn-border);cursor:pointer;border-radius:2px;padding:6px 14px}.toolbar__btn--small{padding:4px 10px;font-size:11px}.toolbar__btn:hover{border-color:var(--block-hover);color:var(--block-hover)}.toolbar__btn:disabled{opacity:.4;cursor:default}.toolbar__hint{font-family:var(--font-mono);color:var(--block-border);align-self:center;margin-left:4px;font-size:11px}.canvas__outer{flex:1;min-height:0;position:relative;overflow:hidden}.canvas{background:var(--canvas-bg);scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);width:100%;height:100%;overflow:auto}.canvas::-webkit-scrollbar{width:6px;height:6px}.canvas::-webkit-scrollbar-track{background:var(--scrollbar-track)}.canvas::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}.canvas::-webkit-scrollbar-thumb:hover{background:var(--block-border)}.canvas::-webkit-scrollbar-corner{background:0 0}.canvas__artboard-wrapper{justify-content:center;align-items:flex-start;width:fit-content;min-width:100%;min-height:100%;padding:40px;display:flex}.canvas__artboard{background:var(--block-bg);border:calc(1px / var(--canvas-zoom,1)) solid var(--grid-line);box-shadow:0 2px 12px var(--artboard-shadow);border-radius:4px;position:relative}.canvas__artboard--free{box-shadow:none;border:none;border-radius:0}.canvas__zoom-wrapper{background-image:radial-gradient(circle, var(--grid-line) 1px, transparent 1px);background-position:4px 4px;background-size:44px 44px;min-height:100%}.canvas__marquee{border:1px dashed var(--block-selected);background:var(--accent-24);pointer-events:none;z-index:10;position:absolute}.toolbar__select{font-family:var(--font-mono);font-size:var(--label-size);color:var(--btn-text);background:var(--block-bg);border:1px solid var(--btn-border);cursor:pointer;border-radius:2px;outline:none;padding:4px 8px}.toolbar__select:hover{border-color:var(--block-hover)}.canvas__zoom-bar{background:var(--block-bg);border:1px solid var(--grid-line);z-index:10;font-family:var(--font-mono);border-radius:4px;align-items:center;font-size:11px;display:flex;position:absolute;bottom:12px;left:12px}.canvas__zoom-bar--open{gap:6px;padding:4px 10px}.canvas__zoom-compact{color:var(--btn-text);font-family:var(--font-mono);cursor:pointer;opacity:.7;background:0 0;border:none;padding:4px 8px;font-size:11px}.canvas__zoom-compact:hover{opacity:1}.canvas__zoom-btn{border:1px solid var(--grid-line);width:22px;height:22px;color:var(--block-border);font-family:var(--font-mono);cursor:pointer;background:0 0;border-radius:2px;justify-content:center;align-items:center;padding:0;font-size:14px;line-height:1;display:flex}.canvas__zoom-btn:hover{color:var(--block-hover);border-color:var(--block-hover)}.canvas__zoom-slider-wrap{align-items:center;width:120px;height:22px;display:flex;position:relative}.canvas__zoom-slider{appearance:none;background:var(--grid-line);cursor:pointer;border-radius:2px;outline:none;width:100%;height:4px}.canvas__zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--btn-text);border:1px solid var(--btn-border);cursor:pointer;border-radius:50%;width:12px;height:12px}.canvas__zoom-slider::-moz-range-thumb{background:var(--btn-text);border:1px solid var(--btn-border);cursor:pointer;border-radius:50%;width:12px;height:12px}.canvas__zoom-marker{background:var(--block-selected);pointer-events:none;opacity:.7;border-radius:1px;width:2px;height:10px;position:absolute;top:50%;transform:translate(-50%,-50%)}.canvas__zoom-label{color:var(--btn-text);text-align:center;min-width:36px}.canvas__zoom-preset{font-family:var(--font-mono);color:var(--block-border);border:1px solid var(--grid-line);cursor:pointer;background:0 0;border-radius:2px;padding:2px 8px;font-size:10px}.canvas__zoom-preset:hover{color:var(--block-hover);border-color:var(--block-hover)}.canvas__zoom-preset:disabled{opacity:.4;cursor:default}.block{border:calc(1px / var(--canvas-zoom,1)) dashed var(--block-border);background:var(--block-bg);-webkit-user-select:none;user-select:none;cursor:move;border-radius:2px;flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.block--container{border:calc(1px / var(--canvas-zoom,1)) solid var(--container-border);overflow:hidden}.block--selected{border-color:var(--block-selected);outline:calc(1px / var(--canvas-zoom,1)) dashed var(--block-selected);outline-offset:calc(-1px / var(--canvas-zoom,1))}.block--container.block--selected{border-color:var(--block-selected);outline:calc(1px / var(--canvas-zoom,1)) solid var(--block-selected);outline-offset:calc(-1px / var(--canvas-zoom,1));border-style:solid}.block__remove{width:18px;height:18px;color:var(--block-border);cursor:pointer;opacity:0;z-index:2;background:0 0;border:none;justify-content:center;align-items:center;padding:0;font-size:14px;line-height:1;transition:opacity .1s;display:flex;position:absolute;top:2px;right:2px}.block:hover>.block__remove{opacity:1}.block__remove:hover{color:var(--block-hover)}.block__header{z-index:1;pointer-events:none;align-items:center;gap:4px;padding:2px 6px 0;display:flex;position:absolute;top:0;left:0}.block__header>*{pointer-events:auto}.block__info-btn{border:1px solid var(--block-border);width:16px;height:16px;color:var(--block-label);font-family:var(--font-mono);cursor:pointer;background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-left:6px;padding:0;font-size:10px;font-style:italic;display:flex}.block__info-btn:hover{border-color:var(--block-selected);color:var(--block-selected)}.block__title{font-family:var(--font-mono);font-size:var(--label-size);color:var(--block-label);white-space:nowrap;text-overflow:ellipsis;padding:2px 4px;line-height:1.2;overflow:hidden}.block__children{background-image:radial-gradient(circle, var(--grid-line) .5px, transparent .5px);background-size:var(--nested-unit,44px) var(--nested-unit,44px);flex:1;min-height:0}.info-panel{border-left:1px solid var(--grid-line);background:var(--block-bg);flex-direction:column;width:260px;min-width:260px;padding:12px;display:flex}.info-panel--empty{color:var(--block-border);font-family:var(--font-mono);justify-content:center;align-items:center;font-size:11px}.info-panel__header{border-bottom:1px solid var(--grid-line);margin-bottom:8px;padding-bottom:8px}.info-panel__title-input{font-family:var(--font-mono);font-size:var(--label-size);color:var(--btn-text);background:var(--canvas-bg);border:1px solid var(--grid-line);border-radius:2px;outline:none;width:100%;padding:4px 8px}.info-panel__title-input:focus{border-color:var(--block-selected)}.info-panel__align{align-items:center;gap:8px;margin-bottom:8px;display:flex}.info-panel__align-label{font-family:var(--font-mono);color:var(--block-border);font-size:11px}.info-panel__align-btns{gap:4px;display:flex}.info-panel__align-btn{background:var(--canvas-bg);border:1px solid var(--grid-line);width:28px;height:28px;color:var(--btn-text);cursor:pointer;border-radius:2px;justify-content:center;align-items:center;padding:0;font-size:14px;transition:border-color .15s,color .15s;display:flex}.info-panel__align-btn:hover{border-color:var(--block-hover);color:var(--block-hover)}.info-panel__textarea{font-family:var(--font-mono);color:var(--btn-text);background:var(--canvas-bg);border:1px solid var(--grid-line);resize:none;border-radius:2px;outline:none;flex:1;padding:8px;font-size:12px}.info-panel__delete-btn{font-family:var(--font-mono);color:var(--btn-text);background:var(--grid-line);border:1px solid var(--btn-border);cursor:pointer;border-radius:2px;margin-top:8px;padding:6px 12px;font-size:12px;transition:background .15s,border-color .15s}.info-panel__delete-btn:hover{border-color:var(--block-hover);color:var(--block-hover)}.accent-picker{border-top:1px solid var(--grid-line);margin-top:auto;padding-top:12px}.accent-picker__label{font-family:var(--font-mono);color:var(--block-border);margin-bottom:6px;font-size:11px;display:block}.accent-picker__swatches{flex-wrap:wrap;gap:6px;display:flex}.accent-picker__swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:18px;height:18px;padding:0;transition:border-color .15s,transform .15s}.accent-picker__swatch:hover{transform:scale(1.2)}.accent-picker__swatch--active{border-color:var(--btn-text)}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--block-bg);border:1px solid var(--grid-line);border-radius:4px;min-width:280px;max-width:400px;padding:16px}.modal__message{font-family:var(--font-mono);color:var(--btn-text);margin:0 0 12px;font-size:13px}.modal__input{font-family:var(--font-mono);font-size:var(--label-size);color:var(--btn-text);background:var(--canvas-bg);border:1px solid var(--grid-line);border-radius:2px;outline:none;width:100%;margin-bottom:12px;padding:6px 8px}.modal__input:focus{border-color:var(--block-selected)}.modal__actions{justify-content:flex-end;gap:8px;display:flex}.modal__btn{font-family:var(--font-mono);font-size:var(--label-size);cursor:pointer;border-radius:2px;padding:6px 14px}.modal__btn--cancel{color:var(--block-border);border:1px solid var(--grid-line);background:0 0}.modal__btn--ok{color:var(--btn-text);background:var(--block-bg);border:1px solid var(--btn-border);position:relative;overflow:hidden}.modal__btn--ok:after{content:"";background:var(--accent-24);pointer-events:none;position:absolute;inset:0}.modal__btn:hover{border-color:var(--block-hover);color:var(--block-hover)}