.demo-banner { background:#eee9ff; color:#312346; font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.demo-banner-inner { max-width:1120px; margin:auto; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.demo-banner-note { display:block; color:#625573; font-size:12px; }
.demo-banner-actions { display:flex; align-items:center; gap:20px; flex-shrink:0; }
.demo-banner-actions form { margin:0; }
.demo-banner-actions button,.demo-banner-actions a { color:#312346; font:inherit; font-weight:600; background:none; border:0; cursor:pointer; padding:4px 0; text-decoration:none; white-space:nowrap; }
.demo-banner-actions button:hover,.demo-banner-actions a:hover { text-decoration:underline; }
.demo-banner-actions button:focus-visible,.demo-banner-actions a:focus-visible { outline:2px solid #7350aa; outline-offset:4px; }
.demo-start-form { margin:16px 0; }
.demo-start-form .button { width:100%; justify-content:center; }
.demo-start-form .small { margin-top:10px; text-align:center; }
.demo-start { background:#ece6fa; color:#493074; }
.demo-start:hover { background:#e0d5f6; }
body.demo-editor { display:flex; flex-direction:column; height:100dvh; overflow:hidden; }
body.demo-editor .editor-container { height:auto; min-height:0; flex:1; }
@media(max-width:600px) { .demo-banner-inner { padding:10px 16px; flex-wrap:wrap; gap:6px; } .demo-banner-actions { gap:24px; } }

.login-demo-note { padding: 0 16px; margin-top: 20px; text-align: center; line-height: 1.7; }
.photo.demo-print img { object-fit: contain; }
.photo.demo-guest-photo { aspect-ratio: auto; }
.demo-guest-photo > a:first-child { display: block; aspect-ratio: 1; }
.demo-guest-photo .button { margin: 8px; }

/* Keep the demo state clear in the editor and alongside dashboard footer links. */
.demo-banner strong { display: inline-block; padding: 2px 7px; border-radius: 5px; background: #493074; color: #fff; font-size: 12px; }
body.demo-editor .demo-banner { flex-shrink: 0; }
.app-footer .demo-banner { border-radius: 10px; margin-bottom: 20px; }
.app-footer .demo-banner-inner { padding: 12px 16px; }