.computer-view{width:100%;height:100%;min-width:0;overflow:auto;overflow-anchor:none;background:#fff;color:#20262d}
.computer-heading,.computer-heading>div,.computer-toolbar,.computer-toolbar>div,.computer-captures-heading{display:flex;align-items:center;gap:12px}
.computer-heading{position:sticky;top:0;background:#fff;z-index:2;justify-content:space-between;padding:14px 18px}.computer-heading h2{font-size:14px;margin:0}.computer-heading>div{gap:8px;flex-wrap:wrap}.computer-heading [data-status]{font-size:12px;color:#506858}.computer-heading .recording{color:#b33333}
.computer-view button,.computer-captures button{min-height:36px;border:1px solid #dce1e5;background:#fff;color:#303b44;padding:7px 12px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer}.computer-view button:hover,.computer-captures button:hover{background:#f0f4f7}.computer-view button:disabled,.computer-captures button:disabled{opacity:.45;cursor:default}
.computer-stage{position:relative;background:#182129;display:grid;place-items:center;aspect-ratio:16/9;min-height:180px;overflow:hidden}.computer-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;user-select:none;touch-action:none}.computer-stage img.controlled{cursor:default}.computer-stage [hidden]{display:none}.computer-stage:focus-within{outline:2px solid var(--purple,#735c9b);outline-offset:-2px}
.computer-keyboard{position:absolute;inset:50% auto auto 50%;width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0;resize:none;font-size:16px;pointer-events:none}
.computer-empty{text-align:center;color:#ccd6dd;padding:32px}.computer-empty>span{font-size:40px;opacity:.5}.computer-empty h3{font-size:20px;color:#edf1f4;margin:12px}.computer-empty p{max-width:430px;font-size:14px;line-height:1.6;margin:12px auto 20px}
.computer-view [data-wake],.computer-view [data-wake]:hover{background:var(--purple,#735c9b);border-color:var(--purple,#735c9b);color:#fff}.computer-view [data-wake]:hover{filter:brightness(1.1)}
.computer-toolbar{padding:12px 18px;flex-wrap:wrap;justify-content:space-between;border-bottom:1px solid #e8ecee}.computer-toolbar>div{flex-wrap:wrap}.computer-toolbar p{font-size:12px;color:#5e6871;line-height:1.5;margin:0;flex:1;min-width:min(250px,100%);max-width:560px}
.computer-captures{padding:20px}.computer-captures-heading{justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}.computer-captures h2{font-size:14px;margin:0}.computer-captures-heading p,.computer-captures [data-status],.computer-limits{font-size:11px;color:#626d76;margin:0}.computer-limits{margin-top:16px}.computer-no-captures{font-size:13px;color:#626d76;padding:10px 0}
.computer-captures [data-captures]{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px}.computer-capture{border:1px solid #e2e7eb;border-radius:10px;overflow:hidden}.computer-capture img,.computer-capture video{width:100%;aspect-ratio:16/9;object-fit:contain;display:block;background:#172129}.computer-capture>div{display:flex;justify-content:space-between;gap:10px;padding:10px;font-size:11px}.computer-capture span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.computer-capture a{white-space:nowrap;color:#326083;text-decoration:none}.saved-capture{max-width:100%;max-height:65vh;display:block;margin:auto;border-radius:6px}
@media(max-width:650px){.computer-toolbar,.computer-heading,.computer-captures{padding:12px}.computer-view button,.computer-captures button{min-height:44px}.computer-heading{align-items:flex-start}.computer-heading>div{gap:4px;flex-direction:column;align-items:flex-start}.computer-heading>button{max-width:50%}.computer-empty{padding:24px}}