/* Banner presentations share ContentHub's neutral surfaces and orange primary actions. */
:root{--accent:#ff7410;--text:#303034;--bg:#f5f5f7;--side:#eeeeef;--panel:#fff;--field:#f4f4f6;--hover:#e7e7e9;--line:#dddde2;--muted:#77777f}
body.banner-admin,body.banner-public{margin:0;color:var(--text);background:var(--bg);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:auto;height:auto}
.bh-shell{height:100dvh;display:grid;grid-template-columns:250px minmax(0,1fr)}
.bh-sidebar{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:auto;padding:30px 14px 16px;gap:24px}
.bh-brand{display:block;text-align:center;padding:8px 0 12px}.bh-brand img{width:124px;height:auto}
.bh-main-nav{display:grid;gap:6px}.bh-main-nav a,.bh-tree-link{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;border-radius:8px;padding:10px 12px;font-weight:500;transition:background .16s,transform .16s}
.bh-main-nav a:hover,.bh-tree-link:hover,.bh-main-nav a.active,.bh-tree-link.active{background:var(--hover)}
.bh-tree-heading{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:600;letter-spacing:.09em;color:var(--muted)}
.bh-tree-heading button{font-size:21px;background:none;border:0;padding:2px 6px;min-height:30px}
#bh-tree{flex:1;min-height:100px}#bh-tree details{margin:3px 0}#bh-tree summary{cursor:pointer;color:var(--muted);font-size:12px;padding:7px 5px;overflow-wrap:anywhere}#bh-tree .bh-tree-link{font-size:12px;padding:7px 10px;margin:2px 0;overflow-wrap:anywhere}#bh-tree details details{margin-left:12px}.bh-client-link{color:var(--text);font-weight:600;text-decoration:none}
.bh-sidebar-bottom{display:grid;gap:8px;font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}.bh-sidebar-bottom a{color:var(--muted)}
.bh-main{min-width:0;overflow:auto}.bh-topbar{position:sticky;top:0;z-index:5;min-height:68px;padding:12px 32px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(16px)}
#bh-crumbs{display:flex;align-items:center;gap:9px;flex:1;flex-wrap:wrap;font-size:12px}#bh-crumbs a{color:var(--muted);text-decoration:none}#bh-crumbs strong{font-weight:500}.bh-theme{display:flex;padding:3px;border-radius:8px;background:var(--hover)}.bh-theme button{display:grid;place-items:center;width:31px;height:30px;min-height:30px;padding:4px;background:none;border:0;box-shadow:none;color:var(--muted)}.bh-theme button[aria-pressed=true]{background:var(--panel);color:var(--text);border-radius:6px}.bh-theme svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}.bh-profile{font-size:12px;color:var(--muted)}
.bh-content{padding:36px clamp(20px,3vw,52px) 64px;max-width:1800px;margin:auto}.bh-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:28px}.bh-heading h1,.bh-heading h2{font-size:30px;letter-spacing:-.035em;font-weight:550;margin:4px 0 8px}.bh-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.bh-heading p{margin:0;color:var(--muted);max-width:620px}.bh-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.bh-actions button,.bh-actions a{white-space:nowrap}
.banner-admin button,.banner-public button,.bh-button{font:inherit;color:var(--text);cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:8px;min-height:36px;padding:7px 12px;transition:background .16s,box-shadow .16s,transform .16s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.banner-admin button:hover,.banner-public button:hover,.bh-button:hover{background:var(--hover)}.banner-admin button:active,.banner-public button:active{transform:scale(.98)}.banner-admin .primary,.banner-public .primary{background:var(--accent);color:#fff;border-color:transparent}.banner-admin .primary:hover{background:#ed690b}.banner-admin button:disabled{opacity:.45;cursor:default}.banner-admin button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.banner-admin :focus-visible,.banner-public :focus-visible{outline:1px solid color-mix(in srgb,var(--text) 50%,transparent);outline-offset:3px;box-shadow:none}
.bh-collections{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}.bh-collection{position:relative;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:16px;min-height:150px;display:flex;flex-direction:column;gap:10px;color:var(--text);text-decoration:none;transition:transform .2s,box-shadow .2s}.bh-collection:hover{transform:translateY(-3px);box-shadow:0 9px 30px #0000000a}.bh-collection span{color:var(--muted);font-size:12px}.bh-collection strong{font-size:18px;font-weight:550;overflow-wrap:anywhere}.bh-collection .bh-folder-mark{font-size:28px;color:var(--muted)}
.bh-drop{width:100%;border:1.5px dashed var(--line)!important;border-radius:14px!important;background:color-mix(in srgb,var(--field) 70%,transparent)!important;min-height:160px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;padding:28px!important;color:var(--text);transition:border-color .18s,background .18s,transform .18s!important}.bh-drop strong{font-weight:550;font-size:16px}.bh-drop span,.bh-drop small{color:var(--muted);font-size:12px}.bh-drop .bh-drop-icon{font-size:26px;color:var(--text)}
.bh-drop:hover,.bh-drop.drag-over,.bh-card.drag-over{background:color-mix(in srgb,var(--hover) 70%,var(--panel))!important;border-color:var(--text)!important;transform:translateY(-2px)}.bh-drop.drag-over{box-shadow:0 0 0 5px color-mix(in srgb,var(--text) 5%,transparent)}
.bh-new-drop{min-height:150px!important;margin:22px 0 32px}.bh-empty{padding:48px 20px;text-align:center;color:var(--muted)}.bh-empty h2{font-size:24px;font-weight:500;color:var(--text)}
.bh-child-nav{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.bh-child-nav a{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 14px;color:var(--text);text-decoration:none;font-size:13px}
.bh-card{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:22px;margin:0 0 26px;transition:border-color .2s,box-shadow .2s;animation:bh-appear .28s ease-out}.bh-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}.bh-card h2{font-size:17px;font-weight:550;margin:0 0 4px;overflow-wrap:anywhere}.bh-card-meta{display:flex;flex-wrap:wrap;gap:9px;color:var(--muted);font-size:12px}.bh-card-tools{display:flex;gap:6px;flex-wrap:wrap}.bh-card-tools button{min-height:30px;padding:4px 8px;font-size:12px}.bh-grip{cursor:grab!important;color:var(--muted)!important}.bh-card-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}.bh-lane{min-width:0}.bh-lane-title{display:flex;justify-content:space-between;align-items:center;min-height:30px;margin-bottom:10px;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.bh-lane-title button{font-size:11px;min-height:26px;padding:3px 7px;text-transform:none;letter-spacing:0}
.bh-stage{display:flex;align-items:center;justify-content:center;position:relative;overflow:auto;padding:20px;border:1px solid var(--line);border-radius:10px;background:repeating-conic-gradient(color-mix(in srgb,var(--line) 20%,var(--field)) 0% 25%,var(--field) 0% 50%) 50% / 16px 16px;min-height:210px}
.bh-frame-box{position:relative;flex-shrink:0;overflow:hidden;box-shadow:0 3px 16px #00000010;background:#fff}.bh-frame-box iframe,.bh-frame-box img{position:absolute;top:0;left:0;border:0;display:block;transform-origin:0 0;max-width:none}.bh-frame-box img{object-fit:contain}.bh-stage .bh-drop{height:100%;min-height:210px!important}.bh-scale{display:block;text-align:right;color:var(--muted);font-size:10px;margin-top:7px}.bh-muted{color:var(--muted);font-size:12px}.bh-warning{background:var(--field);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:12px 0 0;font-size:12px}.bh-warning button{margin-left:8px;font-size:12px;min-height:28px;padding:2px 7px}.bh-publish-state{border-radius:7px;padding:5px 9px;background:var(--hover);color:var(--muted);font-size:11px}.bh-publish-state.live{color:var(--text)}
.bh-status{position:sticky;top:69px;z-index:6;margin:0 32px;padding:12px 16px;background:var(--panel);border:1px solid var(--line);box-shadow:0 6px 22px #0000000b;border-radius:0 0 10px 10px;font-size:13px}.bh-status[data-error=true]{color:#c34444}.bh-status progress{height:4px;width:100%;margin:9px 0 0;accent-color:var(--accent)}
#bh-dialog{width:min(480px,calc(100vw - 32px));max-height:88vh;overflow:auto;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--text);padding:26px;box-shadow:0 22px 90px #0003}#bh-dialog::backdrop{background:#20202460;backdrop-filter:blur(5px)}.bh-dialog-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.bh-dialog-title h2{margin:0;font-size:22px;font-weight:550}.bh-dialog-title button{background:none;border:0;font-size:25px;padding:0 4px}#bh-fields label{display:grid;gap:6px;margin:14px 0;color:var(--text);font-size:13px}#bh-fields input,#bh-fields select{width:100%;background:var(--field);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:10px;font:inherit;box-sizing:border-box}#bh-fields p{color:var(--muted);font-size:13px}#bh-fields input[type=checkbox]{width:auto}.bh-form-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.bh-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}#bh-dialog-error{color:#c34444;font-size:12px}.bh-link-output{width:100%;font-size:12px!important}.bh-presentation-section{margin-top:26px}.bh-presentation-section>h2{font-size:21px;font-weight:550}.bh-public-header{padding:28px clamp(20px,4vw,64px);display:flex;align-items:center;gap:26px;border-bottom:1px solid var(--line);background:var(--panel)}.bh-public-header>div{flex:1}.bh-public-header h1{font-size:28px;font-weight:550;margin:3px 0;letter-spacing:-.03em}#bh-client{color:var(--muted);font-size:12px}#bh-public-nav{display:flex;flex-wrap:wrap;gap:8px;padding:18px clamp(20px,4vw,64px);background:var(--bg);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line)}#bh-public-nav a{color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:7px;font-size:12px}#bh-public-nav a.active,#bh-public-nav a:hover{background:var(--hover);color:var(--text)}.bh-public-footer{text-align:center;color:var(--muted);font-size:12px;padding:24px}.bh-public-footer a{color:var(--accent);text-decoration:none}.bh-public-footer sup{font-size:8px}.banner-public .bh-card{margin-bottom:30px}
@keyframes bh-appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.bh-shell{grid-template-columns:210px minmax(0,1fr)}.bh-heading{flex-direction:column}.bh-content{padding:26px 20px}.bh-topbar{padding:12px 20px}.bh-card-pair{gap:12px}.bh-card{padding:16px}.bh-stage{padding:12px}}
@media(max-width:700px){.bh-shell{display:block;height:auto}.bh-sidebar{position:relative;max-height:300px;padding:14px;gap:10px;border-right:0;border-bottom:1px solid var(--line)}.bh-brand{display:none}.bh-main-nav{display:flex}.bh-tree-heading{margin-top:8px}.bh-sidebar-bottom{display:none}#bh-tree{min-height:0;overflow:auto}.bh-topbar{position:relative}.bh-content{padding:24px 14px}.bh-card-pair{grid-template-columns:1fr}.bh-card-top{flex-wrap:wrap}.bh-public-header{padding:22px 18px;gap:14px;flex-wrap:wrap}.bh-public-header img{width:72px;height:auto}.bh-public-header h1{font-size:23px}.bh-public-header button{width:100%}.bh-profile{display:none}}
@media(prefers-reduced-motion:reduce){.banner-admin *,.banner-public *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
[hidden]{display:none!important}
.bh-dragging iframe,.bh-dragging .bh-frame-box{pointer-events:none}.bh-tree-heading button{background:none;border:0;min-height:28px}.bh-theme button{min-height:30px;padding:4px}.bh-theme button[aria-pressed=true]{background:var(--panel)}

/* Match paired preview surfaces and keep appearance controls quiet. */
.bh-stage .bh-drop{min-height:168px!important;flex:1}
#bh-tree summary .bh-tree-link{display:inline;margin:0;padding:5px 7px;font-weight:500}
.banner-admin .bh-theme button{border:0;background:transparent;box-shadow:none}
.banner-admin .bh-theme button[aria-pressed=true]{background:var(--panel);box-shadow:0 1px 4px #00000012}
.bh-main-nav svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}
/* BannerAds navigation and overview: neutral, compact and animated. */
#bh-tree{overflow:auto;padding-bottom:20px}
.bh-tree-row{display:flex;align-items:center;border-radius:7px;min-height:35px;transition:background .18s ease}
.bh-tree-row:hover,.bh-tree-row.active{background:var(--hover)}
#bh-tree .bh-tree-link{display:flex;align-items:center;gap:7px;min-width:0;flex:1;font-size:13px;margin:0;padding:7px 4px;font-weight:400;background:none}
#bh-tree .bh-tree-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bh-tree .bh-tree-link svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.5}
.banner-admin .bh-disclosure{width:22px;min-height:28px;flex:none;padding:3px;border:0;background:none;border-radius:5px;color:var(--muted)}
.bh-disclosure-spacer{width:22px;flex:none}.bh-disclosure svg{width:12px!important;height:12px!important;transition:transform .28s cubic-bezier(.2,.8,.3,1.2)}
.bh-branch.is-open>.bh-tree-row>.bh-disclosure svg{transform:rotate(90deg)}
.bh-branch-content{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .28s cubic-bezier(.2,.8,.2,1),opacity .18s ease}
.bh-branch-content>div{overflow:hidden;min-height:0;margin-left:13px}
.bh-branch.is-open>.bh-branch-content{grid-template-rows:1fr;opacity:1}
.bh-tree-empty{font-size:11px;color:var(--muted);margin:7px 12px}
.bh-view-switch{display:flex;gap:2px;padding:3px;border-radius:8px;background:var(--hover)}
.banner-admin .bh-view-switch button{min-height:30px;width:34px;padding:6px;border:0;background:transparent;color:var(--muted)}
.banner-admin .bh-view-switch button[aria-pressed=true]{background:var(--panel);color:var(--text);box-shadow:0 1px 4px #0001;animation:bh-switch .24s ease-out}
.bh-view-switch svg,.bh-folder-mark svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6}
.bh-folder-mark svg{width:30px;height:30px}
.bh-collections{animation:bh-appear .22s ease-out}.bh-collections[data-view=list]{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.bh-collections[data-view=list] .bh-collection{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:68px;padding:14px 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.bh-collections[data-view=list] .bh-collection:hover{background:var(--hover);transform:none;box-shadow:none}
.bh-collections[data-view=list] .bh-collection strong{font-size:15px;font-weight:500}.bh-collections[data-view=list] .bh-folder-mark{display:flex}
.banner-admin .bh-mobile-tree{display:none}
@keyframes bh-switch{0%{transform:scale(.93)}65%{transform:scale(1.035)}100%{transform:scale(1)}}
/* Customer previews follow the creative's dimensions, without boxed placeholder canvases. */
.banner-public .bh-content{max-width:none;padding-top:16px}
.banner-public .bh-card{background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:30px 0 54px}
.banner-public .bh-card-top{justify-content:flex-start;align-items:center;gap:24px;margin-bottom:20px}
.banner-public .bh-card-pair{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px 48px}
.banner-public .bh-lane{width:max-content;max-width:100%;min-width:0;overflow:auto}
.banner-public .bh-stage{display:block;min-height:0;padding:0;border:0;border-radius:0;background:none;overflow:auto;max-width:none}
.banner-public .bh-frame-box{box-shadow:none}
.banner-public .bh-lane-title{justify-content:flex-start;margin-bottom:8px;min-height:20px}
.banner-public .bh-scale{text-align:left;margin-top:8px}
.banner-public .bh-public-header{background:none;border-bottom:0;padding-bottom:16px}
.banner-public #bh-public-nav{border-bottom:0;padding-top:0}
.banner-public .bh-presentation-section>h2{font-size:18px;font-weight:500;color:var(--muted)}
@media(max-width:780px){.banner-admin .bh-mobile-tree{display:inline-flex;min-width:30px;padding:4px;border:0;background:none}.bh-collections[data-view=list] .bh-collection{grid-template-columns:26px minmax(0,1fr);gap:6px 12px}.bh-collections[data-view=list] .bh-collection>span:last-child{grid-column:2}.bh-card-tools{gap:4px}.banner-public .bh-card-pair{gap:24px}}
@media(prefers-reduced-motion:reduce){.bh-branch-content,.bh-disclosure svg{transition:none!important}.bh-view-switch button{animation:none!important}}

/* The editor uses the same format-led previews, with an equally sized fallback drop target. */
.banner-admin .bh-card-pair{display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px 40px}
.banner-admin .bh-lane{width:max-content;max-width:100%;min-width:0;overflow:auto}
.banner-admin .bh-stage{display:flex;min-height:0;padding:0;border:0;border-radius:0;background:none;max-width:none;justify-content:flex-start}
.banner-admin .bh-frame-box{box-shadow:none}
.banner-admin .bh-stage .bh-drop{height:100%;min-height:0!important;padding:16px!important;border-radius:8px!important}
.bh-stage-compact .bh-drop-icon,.bh-stage-compact .bh-drop small{display:none}
.bh-stage-compact .bh-drop strong{font-size:13px}.bh-stage-compact .bh-drop span{font-size:11px}
.banner-admin .bh-scale{text-align:left}
.bh-collections[data-view=list]{animation:bh-appear .2s ease-out}