#canvas-area{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}#canvas-notch-bar{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:80px;height:20px;background:rgba(22,22,22,0.85);border-radius:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:30;border:1px solid rgba(255,255,255,0.08);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity 0.25s ease,transform 0.25s ease;box-shadow:var(--ui-shadow-sm)}#canvas-notch-bar.visible{opacity:1;pointer-events:auto}#canvas-notch-bar:hover{background:rgba(40,40,40,0.95);width:100px}#canvas-notch{position:absolute;top:50%;transform:translate(-50%,-50%);width:3px;height:10px;background:#5a5a5a;border-radius:2px;transition:background 0.2s,left 0.1s;pointer-events:none}#canvas-notch.centered{background:#4a8af4;box-shadow:0 0 5px rgba(74,138,244,0.7)}#canvas-wrap{flex:1;background:#969696;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:40px;position:relative}#canvas-wrap.pan-mode{cursor:grab}#canvas-wrap.pan-mode.panning{cursor:grabbing;user-select:none}#canvas-wrap::-webkit-scrollbar{width:6px;height:6px}#canvas-wrap::-webkit-scrollbar-thumb{background:var(--ui-border);border-radius:3px}#canvas-wrap.scratch-drag-over{outline:2px dashed rgba(21,146,254,0.45);outline-offset:-6px}.scratch-item{position:absolute;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.35),0 0 0 1px rgba(255,255,255,0.12);cursor:move;user-select:none;z-index:100}.scratch-item:hover{box-shadow:0 6px 24px rgba(0,0,0,0.45),0 0 0 2px rgba(255,255,255,0.22)}.scratch-item img{display:block;width:100%;height:auto;border-radius:6px;pointer-events:none;min-height:20px}.scratch-close{position:absolute;top:4px;right:4px;transform:scale(var(--inv-zoom, 1));transform-origin:top right;width:18px;height:18px;background:rgba(28,28,28,0.88);color:#fff;border:1.5px solid rgba(255,255,255,0.18);border-radius:50%;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.15s;z-index:10;line-height:1}.scratch-item:hover .scratch-close{opacity:1}.scratch-close:hover{background:var(--ui-danger-hover);border-color:var(--ui-danger-hover)}.scratch-slice-btn{position:absolute;top:4px;right:calc(4px + 22px * var(--inv-zoom, 1));transform:scale(var(--inv-zoom, 1));transform-origin:top right;width:18px;height:18px;background:rgba(28,28,28,0.88);color:#fff;border:1.5px solid rgba(255,255,255,0.18);border-radius:50%;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.15s;z-index:10;line-height:1;padding:0}.scratch-item:hover .scratch-slice-btn{opacity:1}.scratch-slice-btn:hover{background:var(--ui-accent-primary);border-color:var(--ui-accent-primary)}.scratch-ai-btn{position:absolute;top:4px;right:calc(4px + 44px * var(--inv-zoom, 1));transform:scale(var(--inv-zoom, 1));transform-origin:top right;width:18px;height:18px;background:rgba(28,28,28,0.88);color:#fff;border:1.5px solid rgba(255,255,255,0.18);border-radius:50%;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.15s;z-index:10;line-height:1;padding:0}.scratch-item:hover .scratch-ai-btn{opacity:1}.scratch-ai-btn:hover{background:#a855f7;border-color:#a855f7}.scratch-item.scratch-slice-mode{cursor:crosshair}.scratch-item.scratch-slice-mode .scratch-close,.scratch-item.scratch-slice-mode .scratch-slice-btn,.scratch-item.scratch-slice-mode .scratch-ai-btn,.scratch-item.scratch-slice-mode .scratch-resize,.scratch-item.scratch-slice-mode .scratch-id-chip{opacity:0!important;pointer-events:none!important}.scratch-item.scratch-slice-mode img{cursor:crosshair}.scratch-slice-line{position:absolute;left:0;right:0;top:0;height:0;border-top:1px dashed rgba(231,76,60,0.95);box-shadow:0 0 0 1px rgba(255,255,255,0.6);pointer-events:none;z-index:11}.scratch-slice-line.vert{left:50%;right:auto;top:0;bottom:0;height:auto;width:0;border-top:none;border-left:1px dashed rgba(231,76,60,0.95)}.scratch-resize{position:absolute;bottom:0;right:0;transform:translate(50%,50%) scale(var(--inv-zoom, 1));transform-origin:center center;width:7px;height:7px;box-sizing:border-box;background:rgba(255,255,255,0.88);border:1.5px solid rgba(0,0,0,0.25);border-radius:1px;cursor:nwse-resize;opacity:0;transition:opacity 0.15s;z-index:10}.scratch-item:hover .scratch-resize{opacity:1}.scratch-item.scratch-selected{outline:var(--sel-outline-w) solid var(--sel-color);outline-offset:calc(-1 * var(--sel-outline-w))}.scratch-marquee{position:absolute;border:var(--sel-outline-w) solid var(--sel-color);background:var(--sel-color-fill);pointer-events:none;z-index:9999}#canvas-scaler{transform-origin:top center;transition:transform 0.15s ease;position:relative}#canvas-wrap.panning #canvas-scaler{transition:none}#canvas{width:860px;background:transparent;overflow:visible;display:flex;flex-direction:column;gap:20px}.section-block{position:relative;background:#fff;width:100%;cursor:default;outline:2px solid transparent;z-index:2}.section-block:has(.section-hitzone:hover)::after{content:"";position:absolute;inset:0;background:var(--sel-color-fill);pointer-events:none;z-index:0}.section-block.selected{outline:var(--sel-outline-w) solid var(--sel-color);outline-offset:calc(-1 * var(--sel-outline-w))}.section-label{font-size:var(--ui-fs-base);font-weight:var(--ui-fw-medium);color:var(--ui-text-muted);letter-spacing:0.06em;text-transform:uppercase;background:var(--ui-bg-input);padding:3px 10px;border-radius:4px 4px 0 0;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc((100% - 110px) / var(--ui-scale, 1));display:inline-block;transform:scale(var(--ui-scale, 1));transform-origin:left bottom}.scratch-snap-guide-line{position:absolute;background:#ff3b6b;pointer-events:none;z-index:9999}.scratch-snap-guide-line.spacing{background:transparent;border-top:1px dashed var(--ui-accent-primary);height:0!important}.scratch-snap-guide-line.v.spacing{border-top:none;border-left:1px dashed var(--ui-accent-primary);width:0!important}#canvas.canvas-drop-target{box-shadow:inset 0 0 0 2px var(--p-blue-600, #2d6fe8);border-radius:4px}