/* The application always uses Nedvisual branding. Client branding lives in artwork only. */
@font-face{font-family:Onest;src:url('/assets/onest.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{--purple:#6846ff;--purple-dark:#362094;--purple-pale:#ece9ff}
.nedvisual-logo{width:220px;height:74px;object-fit:contain}
.brand{gap:16px}.brand>span{border-left:1px solid var(--line);padding-left:18px}
.demo-notice{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 20px;border-radius:16px;background:var(--purple-pale);color:var(--purple-dark);font-size:13px;margin-bottom:18px}
.demo-notice b{letter-spacing:.1em}.demo-notice a{color:inherit;margin-left:auto}
.flat.sold{opacity:.62}
.studio-layout{grid-template-columns:minmax(310px,.85fr) minmax(0,1.15fr)}
.studio-canvas{max-width:460px;border-radius:18px}.banner-item,.carousel-navigation{max-width:540px}
.preview-note{font-size:12px;color:#d9d4ff;text-align:center}.offer-program input{font-family:inherit}
.studio-editor select{font:inherit;padding:12px;border:1px solid var(--line);border-radius:10px;width:100%;background:#fff;color:var(--ink)}
.hero-card h2{font-size:clamp(32px,4vw,48px)}
@media(max-width:760px){.nedvisual-logo{width:170px;height:58px}.brand>span{display:none}.topbar{flex-wrap:wrap;gap:12px}.top-actions{flex-wrap:wrap}.sync-status{font-size:11px}.studio-layout{grid-template-columns:1fr}.banner-carousel{position:static}.demo-notice{font-size:12px;gap:8px}.studio-canvas{max-width:420px}}

/* Banner typography is isolated from the Nedvisual interface. Supply the licensed webfonts here when available. */
@font-face{font-family:BannerCirce;src:local("Circe"),local("Circe-Regular");font-weight:400;font-display:swap}
@font-face{font-family:BannerCirce;src:local("Circe Bold"),local("Circe-Bold");font-weight:700;font-display:swap}

.studio-backgrounds{padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.background-heading{display:flex;align-items:start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.background-heading h3{margin:0;font-size:18px}.background-heading p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.background-upload{border:1px solid #d9d2ff;border-radius:11px;padding:10px 13px;background:var(--purple-pale);color:var(--purple-dark);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.background-upload:disabled{opacity:.55;cursor:wait}
.background-slots{display:flex;gap:7px;margin-top:14px}.background-slots[hidden]{display:none}
.background-slots button{flex:1;border:1px solid var(--line);border-radius:10px;padding:9px;background:#fff;color:var(--muted);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.background-slots button[aria-pressed=true]{border-color:var(--purple);background:var(--purple-pale);color:var(--purple-dark)}
.background-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;max-height:360px;overflow:auto;padding:3px}
.background-option{min-width:0;position:relative;display:flex;flex-direction:column;gap:4px;border:2px solid transparent;border-radius:13px;background:#f5f4fa;padding:5px 5px 10px;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.background-option img{width:100%;height:96px;object-fit:cover;border-radius:8px}.background-option span{padding:1px 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:12px;font-weight:700}.background-option small{padding:0 5px;font-size:10px;color:var(--muted)}
.background-option[aria-pressed=true]{border-color:var(--purple);background:var(--purple-pale)}
.background-option[aria-pressed=true]::after{content:'✓';position:absolute;top:10px;right:10px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--purple);color:white;font-size:13px;font-weight:700}
.background-option:focus-visible,.background-upload:focus-visible,.background-slots button:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
.background-hint,.background-status{font-size:11px;line-height:1.5;color:var(--muted);margin:10px 0 0}.background-status:empty{display:none}