:root { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #182232; background: #f2f5fa; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1260px; margin: 0 auto; padding: 22px; }
header { margin-bottom: 18px; }
h1 { font-size: 26px; margin: 0 0 5px; }
h2 { font-size: 16px; margin: 0; }
p { line-height: 1.5; }
header p, .hint, #device-info { color: #637085; font-size: 13px; }
.card { border: 1px solid #dce3ed; border-radius: 14px; background: white; padding: 18px; box-shadow: 0 4px 22px #1c355408; }
.compact { max-width: 410px; }
form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.compact form { align-items: stretch; flex-direction: column; margin-top: 14px; }
label { font-size: 13px; font-weight: 600; }
input:not([type="checkbox"]) { min-width: 170px; padding: 10px 12px; border: 1px solid #b9c5d4; border-radius: 8px; font: inherit; }
button { padding: 10px 15px; color: white; background: #2563eb; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
button:hover:not(:disabled) { background: #1c4ebc; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.danger { background: #bd3030; }
button.danger:hover:not(:disabled) { background: #9d2525; }
.secondary { color: #2457b3; background: #eaf1ff; }
.secondary:hover:not(:disabled) { background: #dce8ff; }
.connect { margin-bottom: 14px; }
.invite-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.invite-row span { font-size: 12px; color: #68788f; }
.connect #status { margin-bottom: 0; font-size: 14px; }
#device-info { margin-bottom: 0; }
.columns { display: grid; grid-template-columns: minmax(320px, 1.05fr) minmax(320px, .95fr); gap: 14px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.section-head span { font-size: 12px; color: #68788f; }
.screen-stage { min-height: 360px; height: min(72vh, 800px); display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #111923; overflow: hidden; touch-action: none; }
.screen-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; user-select: none; touch-action: none; cursor: crosshair; }
#screen-placeholder { padding: 20px; text-align: center; color: #aeb9c9; }
.controls { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.control-toggle { margin-right: auto; }
.hint { margin: 10px 0 0; }
.events-card { min-height: 420px; }
#events { height: min(72vh, 800px); overflow: auto; list-style: none; margin: 0; padding: 0; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
#events li { border-top: 1px solid #edf0f4; padding: 8px 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
#events li:first-child { border-top: 0; }
#events .WARN { color: #a4620b; }
#events .ERROR { color: #b72e2e; }
@media (max-width: 850px) { .columns { grid-template-columns: 1fr; } .screen-stage { height: 65vh; } #events { height: 35vh; } }