.role-demo-player { position: absolute; inset: 112px 40px 30px; }
.role-demo-screen { position: absolute; inset: 0 0 126px; overflow: hidden; border: 1px solid #221e29; border-radius: 10px; background: #08070b; }
.role-demo-screen.is-dragging { border-color: var(--accent); background: #15101d; }
.role-demo-screen video { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.role-demo-empty { position: absolute; inset: 0; }
.role-demo-controls { position: absolute; left: 0; bottom: 56px; width: 48px; height: 48px; }
.role-demo-toggle { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.role-demo-toggle:disabled { opacity: .25; cursor: default; }
.role-demo-toggle img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.role-demo-seek { position: absolute; left: 72px; right: 0; bottom: 62px; height: 36px; }
.role-demo-range { display: block; width: 100%; height: 36px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.role-demo-range::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: linear-gradient(to right,#b79aff var(--progress,0%),#37313f var(--progress,0%)); }
.role-demo-range::-webkit-slider-thumb { appearance: none; width: 10px; height: 10px; margin-top: -4px; border: none; border-radius: 50%; background: #ded0f6; }
.role-demo-range::-moz-range-track { height: 2px; background: #37313f; }
.role-demo-range::-moz-range-progress { height: 2px; background: #b79aff; }
.role-demo-range::-moz-range-thumb { width: 10px; height: 10px; border: none; border-radius: 50%; background: #ded0f6; }
.role-demo-markers { position: absolute; inset: 0; pointer-events: none; }
.role-demo-markers i { position: absolute; left: var(--at); top: 15px; width: 1px; height: 6px; background: #8b7c9d; }
.role-demo-chapters { position: absolute; left: 72px; right: 0; bottom: 12px; display: grid; grid-template-columns: repeat(var(--count,4),minmax(0,1fr)); gap: 24px; padding: 0; list-style: none; }
.role-demo-chapters button { display: block; width: 100%; padding: 0; border: 0; text-align: left; background: none; color: #aaa0b6; cursor: pointer; }
.role-demo-chapters button strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24px; line-height: 1.3; font-weight: 500; }
.role-demo-chapters button[aria-current] strong,.role-demo-chapters button:hover strong { color: var(--accent); }
.role-demo-status { position: absolute; left: 24px; right: 24px; bottom: 18px; color: #c4b2d5; font-size: 21px; text-align: center; }
.role-demo-authoring { margin-top: 22px; padding-top: 18px; border-top: 1px solid #3b3145; }
.role-demo-authoring > p { margin-bottom: 12px; color: #b6a4c4; font-size: 13px; }
.role-demo-authoring .role-demo-options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.role-demo-authoring label { display: flex; width: 100%; align-items: center; gap: 10px; color: #c7bbd1; font-size: 14px; cursor: pointer; }
.role-demo-authoring input { accent-color: #b79aff; }
.presenter-panel .role-demo-authoring button { padding: 5px 0; border: 0; background: none; color: #c8b1e0; font: inherit; font-size: 14px; cursor: pointer; }
.role-demo-settings { width: min(680px,calc(100vw - 40px)); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid #51435e; border-radius: 16px; background: #121015; color: #eee7f5; padding: 28px; font: 16px/1.4 Poppins,Manrope,Arial,sans-serif; }
.role-demo-settings::backdrop { background: #000a; }
.role-demo-settings h2 { font-size: 26px; font-weight: 500; margin: 0; }
.role-demo-settings > p { color: #a99db6; margin: 10px 0 24px; }
.role-demo-settings-list { display: grid; gap: 12px; }
.role-demo-settings-row { display: grid; grid-template-columns: minmax(0,1fr) 85px auto auto; gap: 10px; align-items: center; }
.role-demo-settings input { min-width: 0; width: 100%; border: 1px solid #4b4058; border-radius: 7px; padding: 10px 12px; color: #fff; background: #1d1823; font: inherit; }
.role-demo-settings button { border: 0; border-radius: 7px; padding: 10px 14px; color: #ded0ef; background: #292031; font: inherit; cursor: pointer; }
.role-demo-settings button:disabled { opacity: .35; cursor: default; }
.role-demo-settings .role-demo-settings-here { padding: 10px; font-size: 13px; }
.role-demo-settings footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
.role-demo-settings footer div { display: flex; gap: 10px; }
.role-demo-settings .role-demo-settings-save { background: #dfd0ff; color: #21162f; }
.role-demo-settings .role-demo-settings-remove { display: block; margin-top: 18px; padding-left: 0; color: #a393af; background: none; font-size: 13px; }
@media(max-width:520px) { .role-demo-settings { padding:20px; }.role-demo-settings-row { grid-template-columns:minmax(0,1fr) 70px auto; }.role-demo-settings-here { display:none; } }