#canvasScroll .site-element[data-direct-kind] { position:relative; }
#canvasScroll .direct-text { cursor:text; }
#canvasScroll .direct-text:empty { min-height:1em; display:block; }
.v7-app .canvas.direct-canvas,.canvas.direct-canvas { grid-template-rows:var(--v7-toolbar,48px) auto minmax(0,1fr); }
.direct-help { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; color:var(--muted,#bdb6ae); background:var(--panel,#1c1916); border-bottom:1px solid var(--line,#3c3630); font-size:11px; line-height:1.5; }
.direct-help button { flex-shrink:0; }
#canvasScroll .direct-text:focus-visible { outline:2px solid #2563eb; outline-offset:4px; }
#canvasScroll .direct-editing { outline:2px solid #2563eb; outline-offset:4px; min-width:1ch; white-space:pre-wrap; }
#canvasScroll [data-direct-kind="image"]>.site-image,
#canvasScroll [data-direct-kind="image"]>.site-placeholder { cursor:pointer; }
#canvasScroll .direct-tools { display:flex; position:absolute; top:-30px; right:0; gap:2px; z-index:35; padding:2px; border-radius:6px; background:#1d4ed8; box-shadow:0 2px 8px #0003; opacity:0; pointer-events:none; }
#canvasScroll .direct-tools button { width:28px; height:26px; padding:0; border:0; border-radius:4px; font:18px/1 system-ui; color:#fff; background:#1d4ed8; cursor:pointer; }
#canvasScroll .direct-tools button:hover,#canvasScroll .direct-tools button:focus-visible { background:#173991; outline:2px solid white; }
#canvasScroll [data-direct-action="move"] { cursor:grab; touch-action:none; }
#canvasScroll .direct-resize { position:absolute; display:block; padding:0; border:2px solid white; background:#2563eb; border-radius:3px; z-index:36; width:13px; height:13px; opacity:0; pointer-events:none; touch-action:none; }
#canvasScroll .direct-resize-e { right:-6px; top:calc(50% - 6px); cursor:ew-resize; }
#canvasScroll .direct-resize-s { left:calc(50% - 6px); bottom:-6px; cursor:ns-resize; }
#canvasScroll .direct-resize-se { right:-6px; bottom:-6px; cursor:nwse-resize; }
#canvasScroll .site-element:hover:not(:has(.site-element:hover))>.direct-tools,#canvasScroll .site-element.selected>.direct-tools,#canvasScroll .site-element:focus-within:not(:has(.site-element:focus-within))>.direct-tools,
#canvasScroll .site-element:hover:not(:has(.site-element:hover))>.direct-resize,#canvasScroll .site-element.selected>.direct-resize,#canvasScroll .site-element:focus-within:not(:has(.site-element:focus-within))>.direct-resize { opacity:1; pointer-events:auto; }
#canvasScroll .site-element:has(>.direct-tools)>.site-el-toolbar,#canvasScroll .site-element:has(>.direct-tools)>.resize-handle { display:none; }
#canvasScroll .site-element.selected[data-direct-kind] { outline:1px solid #2563eb; outline-offset:2px; }
.direct-dragging { user-select:none; cursor:grabbing; }
.direct-menu { position:fixed; z-index:100000; width:210px; padding:6px; background:#fff; color:#172033; border:1px solid #cbd5e1; border-radius:10px; box-shadow:0 12px 36px #0004; }
.direct-menu button { display:block; width:100%; padding:12px; border:0; border-radius:6px; text-align:left; background:#fff; color:#172033; font:500 14px/1.4 system-ui; cursor:pointer; }
.direct-menu button:hover,.direct-menu button:focus-visible { outline:2px solid #2563eb; background:#eff6ff; }
#directImageError { color:#b91c1c; }
@media(pointer:coarse) { #canvasScroll .direct-tools button { width:36px;height:36px; } #canvasScroll .direct-resize { width:22px;height:22px; } }
@media(max-width:650px) { .direct-help { flex-wrap:wrap; gap:6px; } }