/* Only the demo controls are new. Product surfaces keep their native Campus styles. */
.demo-ribbon{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:12px 3vw;border-bottom:1px solid var(--line);background:#fffdf8;font-size:13px}
.demo-ribbon-status{display:grid;gap:4px}.demo-ribbon-status strong{color:#805532}.demo-ribbon-status span{color:#52656d}
.demo-views{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.demo-views button{min-height:36px;border:0;border-radius:5px;padding:7px 12px;background:transparent;color:var(--ink);font-size:13px}
.demo-views [aria-pressed=true]{background:var(--nav);color:white}.demo-account{margin-left:auto;display:inline-flex;align-items:center;min-height:44px}
.demo-message{margin:16px 4vw}.demo-message:empty{display:none}.demo-video-label{display:block;font-size:11px;font-weight:500;color:#805532;margin-top:8px}
.demo-video-panel{max-width:960px;margin:32px auto;padding:28px;background:#fffdf8;border:1px solid var(--line);border-radius:12px;line-height:1.6}
.demo-video-panel h1,.demo-video-panel h2{line-height:1.2}.demo-video-panel video{display:block;width:100%;max-height:70vh;background:var(--nav);margin-block:24px;border-radius:8px}
.demo-video-empty{padding:24px;border:1px dashed #aebdbf;border-radius:8px;background:var(--paper)}.demo-video-empty strong{display:block;margin-bottom:8px}
.demo-video-links{display:flex;gap:12px 24px;flex-wrap:wrap;margin-top:24px}.demo-video-links a{min-height:44px;display:inline-flex;align-items:center}
.demo-player{width:100%;height:calc(100dvh - 220px);min-height:600px;border:0;display:block;background:var(--paper)}
.demo-work-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:8px 4vw;border-bottom:1px solid var(--line);font-size:13px}
.demo-work-actions [role=status]{margin-left:auto}.demo-work-actions button{min-height:40px}
.demo-personal{max-width:900px}.demo-personal .action{display:inline-block;margin-right:18px}.demo-manager-video{padding-top:12px}
.campus-demo .manager-content .demo-video-panel{max-width:none}
@media(max-width:720px){.demo-ribbon{padding:12px 20px;gap:8px 16px}.demo-ribbon-status{flex:1}.demo-views{order:3;width:100%}.demo-views button{flex:1;min-height:44px}.demo-account{margin-left:0;max-width:130px;font-size:12px}.demo-video-panel{margin:20px;padding:20px}.demo-player{min-height:650px}.demo-work-actions{padding:8px 20px}.demo-work-actions [role=status]{margin-left:0;width:100%}}