/* Customer creative dimensions remain fixed; only its preview scale responds. */
.studio-ad-artboard { margin:0; padding:0; min-width:0; max-width:none; color:#20241f; text-rendering:optimizeLegibility; }
.studio-ad-artboard *, .studio-ad-artboard *::before, .studio-ad-artboard *::after { box-sizing:border-box; }
.studio-ad-layer { margin:0; padding:0; max-width:none; min-width:0; }
.studio-ad-layer img { margin:0; max-width:none; border:0; pointer-events:none; }
.studio-ad-layer .service-description { font:inherit; color:inherit; }
.studio-ad-layer .service-description p, .studio-ad-layer .service-description h1, .studio-ad-layer .service-description h2, .studio-ad-layer .service-description h3 { margin-block-start:0; font-size:inherit; font-weight:inherit; }
.studio-ad-artboard--editor { user-select:none; -webkit-user-select:none; }
.studio-ad-artboard--editor .studio-ad-layer { cursor:move; touch-action:none; outline:none; }
.studio-ad-artboard--editor .studio-ad-layer[data-ad-locked] { cursor:default; }
.studio-ad-artboard--editor .studio-ad-layer:focus-visible { outline:2px solid #4b97c5; outline-offset:-2px; }
.studio-ad-artboard--editor .studio-ad-layer a { pointer-events:none; }
.studio-ad-image-missing { display:grid; place-content:center; width:100%; height:100%; background:#e9ebe6; color:#73786d; font:20px Arial,sans-serif; }
.studio-ad-empty { padding:36px 20px; color:#6b7068; font-size:13px; text-align:center; }
.studio-ad-thumbnail, .studio-ad-placement-creative { position:relative; container-type:inline-size; width:100%; overflow:hidden; }
.studio-ad-thumbnail > .studio-ad-artboard, .studio-ad-placement-scale { transform:scale(calc(100cqw / var(--ad-output-width))); transform-origin:top left; }
.studio-ad-thumbnail { max-height:100%; }

/* Representative platform surroundings stay outside the exported artboard. */
.studio-ad-placement { width:min(100%,520px); margin:0 auto; border:1px solid #d4d7d1; background:#fff; border-radius:6px; overflow:hidden; font:14px/1.45 Arial,sans-serif; color:#242625; }
.studio-ad-placement-identity { display:flex; gap:10px; padding:14px; align-items:center; }
.studio-ad-placement-identity > span:nth-child(2) { flex:1; }
.studio-ad-placement-identity strong, .studio-ad-placement-identity small { display:block; }
.studio-ad-placement-identity small { font-size:11px; color:#737872; }
.studio-ad-placement-avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#e2e6de; font-weight:bold; }
.studio-ad-placement-primary { margin:0; padding:0 14px 14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.studio-ad-placement-reddit-title { margin:0; padding:0 14px 14px; font-size:17px; line-height:1.3; font-weight:600; }
.studio-ad-placement-details { display:flex; align-items:center; gap:14px; padding:14px; background:#f3f4f0; }
.studio-ad-placement-details > span:first-child { flex:1; min-width:0; }
.studio-ad-placement-details strong, .studio-ad-placement-details small { display:block; overflow-wrap:anywhere; }
.studio-ad-placement-details small { color:#737872; margin-top:3px; font-size:12px; }
.studio-ad-placement-cta { border:1px solid #c7cbc3; padding:6px 12px; border-radius:4px; white-space:nowrap; font-weight:600; font-size:12px; }
.studio-ad-placement-caption { padding:10px 12px; font-size:11px; color:#747870; display:flex; justify-content:space-between; }
.studio-ad-placement-caption span { border:1px solid #cbd0c5; border-radius:2px; padding:0 4px; }
.studio-ad-placement-pagination { display:flex; gap:5px; justify-content:center; padding:12px 0 4px; }
.studio-ad-placement-pagination i { width:5px; height:5px; border-radius:50%; background:#c8ccc4; }
.studio-ad-placement-pagination i.is-active { background:#5f7660; }
.studio-ad-placement-note { margin:0; padding:9px 12px; font:10px/1.4 'DM Sans',Arial,sans-serif; color:#777b72; text-align:center; background:#fff; }
.studio-ad-placement--story { max-width:360px; }
.studio-ad-placement--story .studio-ad-placement-identity { padding:10px 12px; }
.studio-ad-placement--story .studio-ad-placement-details { padding:10px 12px; }
.studio-ad-placement--banner { border-radius:0; }
.studio-ad-placement--reels { max-width:360px; }
.studio-ad-reels-stage { position:relative; container-type:inline-size; }
.studio-ad-reels-chrome { position:absolute; inset:0; pointer-events:none; overflow:hidden; background:linear-gradient(180deg,#0008 0%,#0000 22%,#0000 48%,#000b 100%); color:#fff; font-size:clamp(10px,3.7cqw,14px); }
.studio-ad-reels-chrome svg { display:block; width:100%; height:100%; }
.studio-ad-reels-header { position:absolute; top:4%; left:5%; right:5%; display:flex; align-items:center; gap:8px; text-shadow:0 1px 3px #0005; }
.studio-ad-reels-header strong { flex:1; font-size:clamp(15px,5.6cqw,21px); }
.studio-ad-reels-header > span { width:clamp(18px,7cqw,25px); height:clamp(18px,7cqw,25px); }
.studio-ad-reels-actions { position:absolute; bottom:22%; right:4%; display:grid; gap:clamp(13px,5cqw,20px); filter:drop-shadow(0 1px 2px #0005); }
.studio-ad-reels-actions > span { width:clamp(20px,7.5cqw,28px); height:clamp(20px,7.5cqw,28px); }
.studio-ad-reels-copy { position:absolute; bottom:3%; left:5%; right:5%; }
.studio-ad-reels-copy .studio-ad-placement-identity { gap:7px; padding:0; padding-right:10%; }
.studio-ad-reels-copy .studio-ad-placement-identity > span:nth-child(2) { min-width:0; }
.studio-ad-reels-copy .studio-ad-placement-identity strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-ad-reels-copy .studio-ad-placement-identity small { color:#fff; font-size:clamp(9px,3cqw,11px); }
.studio-ad-reels-copy .studio-ad-placement-identity > span:last-child { display:none; }
.studio-ad-reels-copy .studio-ad-placement-avatar { flex:none; width:clamp(24px,9cqw,34px); height:clamp(24px,9cqw,34px); border:1px solid #fff8; background:#ffffff30; color:#fff; }
.studio-ad-reels-caption { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; white-space:pre-wrap; margin:8px 10% 10px 0; line-height:1.35; }
.studio-ad-reels-cta { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; border:1px solid #fff6; border-radius:3px; background:#ffffff26; font-weight:600; overflow-wrap:anywhere; }
.studio-ad-reels-cta svg { flex:none; width:16px; height:16px; }

/* This overlay is a sibling of the clipped artboard, never its child. */
[data-ad-canvas-host] { position:relative; }
.studio-ad-canvas-overlay { position:absolute; inset:0; pointer-events:none; z-index:20; font:12px/1.3 'DM Sans',Arial,sans-serif; color:#337fb2; }
.studio-ad-layer-outline { position:absolute; outline:1px solid #65a6d0; outline-offset:0; }
.studio-ad-selection-frame { position:absolute; border:1px solid #65a6d0; }
.studio-ad-selection-frame.has-rotated-selection { border-color:transparent; }
.studio-ad-selection-frame[hidden], .studio-ad-marquee[hidden], .studio-ad-move-rulers[hidden] { display:none; }
.studio-ad-quick-actions { position:absolute; display:flex; align-items:center; gap:1px; width:max-content; height:32px; padding:2px 3px; border:1px solid #7eb4d9; border-radius:5px; background:#fff; box-shadow:0 2px 7px #172b3a14; pointer-events:auto; white-space:nowrap; }
.studio-ui .studio-ad-quick-actions button, .studio-ad-quick-actions button { display:grid; place-items:center; width:27px; min-width:27px; height:26px; min-height:26px; margin:0; padding:0; border:0; border-radius:3px; color:#346e92; background:transparent; font:15px/1 Arial,sans-serif; cursor:pointer; }
.studio-ad-quick-actions button[data-ad-action=text] { font-family:Georgia,serif; font-size:19px; }
.studio-ad-quick-actions button[data-ad-handle=move] { cursor:move; touch-action:none; }
.studio-ad-quick-actions button[hidden] { display:none; }
.studio-ad-quick-actions button:hover { background:#eaf3f9; }
.studio-ad-quick-actions button:focus-visible { outline:2px solid #4b97c5; outline-offset:-1px; }
.studio-ad-quick-actions button:disabled { color:#a6aca4; cursor:default; }
.studio-ad-quick-divider { width:1px; height:16px; margin:0 3px; background:#dce2e5; }
.studio-ui .studio-ad-resize-handle, .studio-ad-resize-handle { position:absolute; display:block; width:9px; min-width:9px; height:9px; min-height:9px; margin:0; padding:0; border:1px solid #519ace; border-radius:0; background:#fff; pointer-events:auto; touch-action:none; }
.studio-ad-resize-handle::after { content:''; position:absolute; inset:-5px; }
.studio-ad-resize-handle:disabled { display:none; }
.studio-ad-resize-handle[data-ad-handle=nw] { top:-5px; left:-5px; cursor:nwse-resize; }
.studio-ad-resize-handle[data-ad-handle=n] { top:-5px; left:calc(50% - 4px); cursor:ns-resize; }
.studio-ad-resize-handle[data-ad-handle=ne] { top:-5px; right:-5px; cursor:nesw-resize; }
.studio-ad-resize-handle[data-ad-handle=e] { top:calc(50% - 4px); right:-5px; cursor:ew-resize; }
.studio-ad-resize-handle[data-ad-handle=se] { right:-5px; bottom:-5px; cursor:nwse-resize; }
.studio-ad-resize-handle[data-ad-handle=s] { bottom:-5px; left:calc(50% - 4px); cursor:ns-resize; }
.studio-ad-resize-handle[data-ad-handle=sw] { bottom:-5px; left:-5px; cursor:nesw-resize; }
.studio-ad-resize-handle[data-ad-handle=w] { top:calc(50% - 4px); left:-5px; cursor:ew-resize; }
.studio-ad-size-readout { position:absolute; top:-23px; right:-1px; background:#5799c2; border-radius:2px; padding:2px 5px; color:#fff; font-size:10px; white-space:nowrap; }
.studio-ad-marquee { position:absolute; border:1px solid #65a6d0; background:#65a6d020; }
.studio-ad-move-rulers { position:absolute; inset:0; color:#4b97c5; overflow:visible; }
.studio-ad-move-rulers svg { width:100%; height:100%; overflow:visible; }
.studio-ad-move-rulers output { position:absolute; padding:4px 7px; border:1px solid #a9cce1; border-radius:3px; background:#f6fbff; color:#326d93; white-space:nowrap; font-size:11px; }
.studio-ad-canvas-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media (prefers-reduced-motion:reduce) { .studio-ad-canvas-overlay * { transition:none; } }