/* Presentation controls extend the shared working interface. */
.demo-bar{display:flex;align-items:center;gap:20px;padding:12px 16px;margin-bottom:12px;background:var(--surface);border:1px solid var(--border);border-radius:20px;color:var(--text-primary)}
.demo-caption{display:flex;align-items:center;gap:12px;min-width:0;margin-right:auto;font-size:13px;color:var(--text-secondary)}
.demo-caption strong{font-size:12px;letter-spacing:.04em;background:var(--accent-soft);color:var(--accent);padding:6px 10px;border-radius:8px}
.demo-perspective{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-secondary)}
.demo-perspective select{width:160px;min-height:44px;font-size:14px;border-radius:12px}
.demo-actions{display:flex;align-items:center;gap:8px}
.demo-actions .btn{white-space:nowrap}
.demo-login-note{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-secondary);margin-top:20px}
.demo-login-note svg{flex-shrink:0}
.demo-auth .auth-foot{flex-wrap:wrap;gap:12px 20px}
.demo-auth .auth-story:after{opacity:.3}
@media(max-width:768px){
 .demo-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:12px;margin:4px 0 10px;border-radius:18px}
 .demo-caption{grid-column:1/-1;gap:10px;font-size:12px}
 .demo-caption strong{padding:4px 8px}
 .demo-perspective{gap:8px}
 .demo-perspective select{min-width:0;width:100%;font-size:16px}
 .demo-perspective>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .demo-actions{gap:4px}
 .demo-actions .btn{width:44px;padding:0;justify-content:center}
 .demo-actions .btn span{display:none}
 .demo-auth .auth-story h1{font-size:30px}
}
@media print{.demo-bar{display:none}}