.computer-view{width:100%;height:100%;min-width:0;overflow:auto;overflow-anchor:none;background:var(--ui-background);color:var(--ui-foreground)}
.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:var(--ui-background);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:var(--ui-success)}.computer-heading .recording{color:var(--ui-danger)}
.computer-view button,.computer-captures button{min-height:36px;border:1px solid var(--ui-control-border);background:var(--ui-background);color:var(--ui-foreground);padding:7px 12px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer}.computer-view button:hover,.computer-captures button:hover{background:var(--ui-secondary)}.computer-view button:disabled,.computer-captures button:disabled{opacity:.45;cursor:default}
.computer-stage{position:relative;background:var(--ui-subtle);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(--ui-primary);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:var(--ui-muted);padding:32px}.computer-empty>span{font-size:40px;opacity:.5}.computer-empty h3{font-size:20px;color:var(--ui-foreground);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(--ui-primary);border-color:var(--ui-primary);color:var(--ui-primary-foreground)}.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 var(--ui-border)}.computer-toolbar>div{flex-wrap:wrap}.computer-toolbar p{font-size:12px;color:var(--ui-muted);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:var(--ui-muted);margin:0}.computer-limits{margin-top:16px}.computer-no-captures{font-size:13px;color:var(--ui-muted);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 var(--ui-border);border-radius:10px;overflow:hidden}.computer-capture img,.computer-capture video{width:100%;aspect-ratio:16/9;object-fit:contain;display:block;background:var(--ui-subtle)}.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:var(--ui-primary);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}}