.alif-canvas-editor{--canvas-accent:hsl(var(--primary));--canvas-border:hsl(var(--border));--canvas-panel:hsl(var(--card));--canvas-text:hsl(var(--foreground));background:hsl(var(--background));color:var(--canvas-text);font-family:var(--font-sans);outline:none;grid-template-rows:48px minmax(0,1fr);height:100%;min-height:520px;display:grid;overflow:hidden}.alif-canvas-toolbar{background:hsl(var(--card) / var(--opacity-toolbar));border-bottom:var(--border-width) solid var(--canvas-border);align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-3);z-index:10;display:flex;position:relative}.alif-canvas-toolbar__group{align-items:center;gap:var(--space-1);display:flex}.alif-canvas-toolbar__group--end{margin-left:auto}.alif-canvas-toolbar button,.alif-canvas-delete{border:var(--border-width) solid transparent;border-radius:var(--radius-sm);color:inherit;cursor:pointer;font:inherit;font-family:var(--font-sans-semibold);font-size:var(--text-xs);padding:var(--space-2) var(--space-3);background:0 0;font-weight:600}.alif-canvas-toolbar button:hover{background:hsl(var(--muted));border-color:var(--canvas-border)}.alif-canvas-toolbar button:disabled{cursor:default;opacity:var(--opacity-disabled)}.alif-canvas-file-input{display:none}.alif-canvas-editor__workspace{grid-template-columns:224px minmax(0,1fr) 248px;min-height:0;display:grid}.alif-canvas-navigator{background:var(--canvas-panel);border-right:var(--border-width) solid var(--canvas-border);flex-direction:column;min-width:0;display:flex;overflow:hidden}.alif-canvas-navigator__tabs{border-bottom:var(--border-width) solid var(--canvas-border);grid-template-columns:1fr 1fr;display:grid}.alif-canvas-navigator button{color:hsl(var(--muted-foreground));cursor:pointer;font:inherit;font-size:var(--text-2xs);min-width:0;padding:var(--space-2);text-align:left;background:0 0;border:0}.alif-canvas-navigator__tabs button{text-align:center;text-transform:capitalize}.alif-canvas-navigator__tabs button.is-active,.alif-canvas-navigator button.is-selected,.alif-canvas-navigator button:hover{background:hsl(var(--muted));color:var(--canvas-text)}.alif-canvas-navigator__content{gap:var(--space-1);padding:var(--space-2);display:grid;overflow:auto}.alif-canvas-navigator__row,.alif-canvas-navigator__variable{align-items:center;gap:var(--space-1);grid-template-columns:minmax(0,1fr) auto;display:grid}.alif-canvas-navigator__row>button:first-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.alif-canvas-navigator__variable{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.alif-canvas-navigator__variable input{background:hsl(var(--input));border:var(--border-width) solid hsl(var(--border));border-radius:var(--radius-sm);color:var(--canvas-text);font:inherit;font-size:var(--text-2xs);min-width:0;padding:var(--space-1)}.alif-canvas-navigator__add{align-items:center;gap:var(--space-1);margin-top:var(--space-2);border:var(--border-width) solid var(--canvas-border)!important;border-radius:var(--radius-sm)!important;color:var(--canvas-text)!important;display:flex!important}.alif-canvas-navigator__item,.alif-canvas-layer>button{align-items:center;gap:var(--space-1);text-overflow:ellipsis;white-space:nowrap;width:100%;display:flex;overflow:hidden}.alif-canvas-navigator__item svg,.alif-canvas-layer>button svg,.alif-canvas-navigator__add svg{flex:none}.alif-canvas-layer{padding-left:var(--space-2);display:grid}.alif-canvas-layer:first-child{padding-left:0}.alif-canvas-navigator__empty{color:hsl(var(--muted-foreground));font-size:var(--text-2xs);margin:var(--space-2);line-height:1.4}.alif-canvas-stage{background-color:hsl(var(--canvas));background-image:radial-gradient(circle, hsl(var(--canvas-dot)) var(--border-width), transparent var(--border-width));cursor:grab;touch-action:none;background-size:20px 20px;min-width:0;position:relative;overflow:hidden}.alif-canvas-stage:active{cursor:grabbing}.alif-canvas-world{transform-origin:0 0;width:1px;height:1px;position:absolute;top:0;left:0}.alif-canvas-node{background:var(--node-fill);box-sizing:border-box;cursor:move;height:var(--node-height);opacity:var(--node-opacity);transform:translate(var(--node-x), var(--node-y)) rotate(var(--node-rotation));transform-origin:50%;width:var(--node-width);position:absolute;top:0;left:0}.alif-canvas-node.is-selected:after{border:var(--border-width-focus) solid var(--canvas-accent);box-sizing:border-box;content:"";inset:calc(-1 * var(--border-width-focus));pointer-events:none;position:absolute}.alif-canvas-transform{border:var(--border-width-focus) solid var(--canvas-accent);box-sizing:border-box;pointer-events:none;position:absolute}.alif-canvas-transform button{background:hsl(var(--card));border:var(--border-width-focus) solid var(--canvas-accent);border-radius:var(--radius-full);height:var(--space-3);pointer-events:auto;width:var(--space-3);padding:0;position:absolute}.alif-canvas-transform__resize{bottom:calc(-1 * var(--space-2));cursor:nwse-resize;right:calc(-1 * var(--space-2))}.alif-canvas-transform__rotate{cursor:grab;left:calc(50% - var(--space-2));top:calc(-1 * var(--space-8))}.alif-canvas-marquee{background:hsl(var(--primary) / .14);border:var(--border-width-focus) solid var(--canvas-accent);box-sizing:border-box;pointer-events:none;position:absolute}.alif-canvas-node--frame{border:var(--border-width-card) solid hsl(var(--canvas-frame));box-shadow:var(--shadow-card)}.alif-canvas-node--component{border:var(--border-width-focus) solid var(--canvas-accent)}.alif-canvas-node--group{border:var(--border-width) dashed hsl(var(--canvas-frame))}.alif-canvas-image{object-fit:cover;pointer-events:none;width:100%;height:100%;display:block}.alif-canvas-frame-label{color:hsl(var(--muted-foreground));font-family:var(--font-sans-semibold);font-size:var(--text-sm);left:0;top:calc(-1 * var(--space-6));font-weight:600;position:absolute}.alif-canvas-node--rectangle{border-radius:var(--radius-sm)}.alif-canvas-node--text{background:0 0;align-items:center;display:flex}.alif-canvas-text{font-size:var(--node-font-size);overflow-wrap:anywhere;outline:none;width:100%;min-height:1em;line-height:1.15}.alif-canvas-text--editing{cursor:text;font:inherit;resize:none;-webkit-user-select:text;user-select:text;background:0 0;border:0;height:100%;padding:0}.alif-canvas-text--editing:focus{outline:none}.alif-canvas-zoom{background:hsl(var(--scrim) / var(--opacity-overlay));border-radius:var(--radius-sm);bottom:var(--space-3);color:hsl(var(--primary-foreground));font-size:var(--text-2xs);font-variant-numeric:tabular-nums;padding:var(--space-2);pointer-events:none;right:var(--space-3);position:absolute}.alif-canvas-preview{background:hsl(var(--scrim));z-index:30;display:grid;position:absolute;inset:0}.alif-canvas-preview__bar{background:var(--canvas-panel);border-bottom:var(--border-width) solid var(--canvas-border);align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);display:flex}.alif-canvas-preview__bar select,.alif-canvas-preview__bar button{background:hsl(var(--input));border:var(--border-width) solid var(--canvas-border);border-radius:var(--radius-sm);color:var(--canvas-text);font:inherit;padding:var(--space-1) var(--space-2)}.alif-canvas-preview__bar button{margin-left:auto}.alif-canvas-preview__backdrop{padding:var(--space-6);justify-content:center;align-items:center;display:flex;overflow:auto}.alif-canvas-preview__device{box-shadow:var(--shadow-raised);max-width:100%;position:relative;overflow:hidden}.alif-canvas-preview__device.is-scrollable{overflow:auto}.alif-canvas-preview-node{box-sizing:border-box;color:var(--canvas-text);text-align:left;border:0;align-items:center;padding:0;display:flex;position:absolute;overflow:hidden}.alif-canvas-preview-node img{object-fit:cover;width:100%;height:100%}.alif-canvas-preview-node.is-fixed{position:sticky}.alif-canvas-preview__overlay{backdrop-filter:blur(4px);background:hsl(var(--scrim) / .3);position:absolute;inset:0}.alif-canvas-preview-node__badge{background:var(--canvas-accent);color:hsl(var(--primary-foreground));font-size:var(--text-2xs);padding:var(--space-1);position:absolute;top:0;right:0}.alif-canvas-properties{background:var(--canvas-panel);border-left:var(--border-width) solid var(--canvas-border);gap:var(--space-4);padding:var(--space-4);flex-direction:column;display:flex;overflow:auto}.alif-canvas-properties label{color:hsl(var(--muted-foreground));font-family:var(--font-sans-bold);font-size:var(--text-2xs);gap:var(--space-2);letter-spacing:var(--tracking-wide);text-transform:uppercase;font-weight:700;display:grid}.alif-canvas-properties input,.alif-canvas-properties textarea,.alif-canvas-properties select{background:hsl(var(--input));border:var(--border-width) solid hsl(var(--border));border-radius:var(--radius-sm);box-sizing:border-box;color:var(--canvas-text);font:inherit;font-size:var(--text-xs);min-width:0;padding:var(--space-2);resize:vertical;text-transform:none;width:100%}.alif-canvas-properties__fieldset{border:var(--border-width) solid var(--canvas-border);border-radius:var(--radius-sm);gap:var(--space-2);padding:var(--space-2);margin:0;display:grid}.alif-canvas-properties__fieldset legend{color:hsl(var(--muted-foreground));font-family:var(--font-sans-bold);font-size:var(--text-2xs);padding:0 var(--space-1);text-transform:uppercase;font-weight:700}.alif-canvas-properties__toggle{align-items:center;gap:var(--space-2);font-size:var(--text-2xs)!important;display:flex!important}.alif-canvas-properties__toggle input{width:auto;min-width:auto}.alif-canvas-properties__action{background:hsl(var(--muted));border:var(--border-width) solid var(--canvas-border);border-radius:var(--radius-sm);color:var(--canvas-text);cursor:pointer;font:inherit;padding:var(--space-2)}.alif-canvas-properties input:focus,.alif-canvas-properties textarea:focus{border-color:var(--canvas-accent);outline:var(--border-width-focus) solid hsl(var(--ring) / var(--opacity-focus))}.alif-canvas-properties__heading{border-bottom:var(--border-width) solid var(--canvas-border);gap:var(--space-1);padding-bottom:var(--space-3);display:grid}.alif-canvas-properties__heading span{color:hsl(var(--muted-foreground));font-size:var(--text-2xs);text-transform:uppercase}.alif-canvas-properties__heading strong{font-size:var(--text-base)}.alif-canvas-properties__grid{gap:var(--space-2);grid-template-columns:1fr 1fr;display:grid}.alif-canvas-color-row{gap:var(--space-2);grid-template-columns:36px 1fr;display:grid}.alif-canvas-color-row input[type=color]{height:33px;padding:var(--space-1)}.alif-canvas-delete{border-color:hsl(var(--destructive-border));color:hsl(var(--destructive));margin-top:auto}.alif-canvas-component-actions button{background:hsl(var(--muted));border:var(--border-width) solid var(--canvas-border);border-radius:var(--radius-sm);color:var(--canvas-text);cursor:pointer;font:inherit;font-size:var(--text-xs);padding:var(--space-2);width:100%}.alif-canvas-delete:hover{background:hsl(var(--destructive-surface))}.alif-canvas-properties__empty{color:hsl(var(--muted-foreground));font-size:var(--text-xs);gap:var(--space-1);text-align:center;margin:auto 0;display:grid}.alif-canvas-properties__empty strong{color:hsl(var(--foreground))}@media (width<=760px){.alif-canvas-editor__workspace{grid-template-columns:1fr}.alif-canvas-properties,.alif-canvas-navigator{display:none}.alif-canvas-toolbar{gap:var(--space-1);overflow-x:auto}}