* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; padding: 12px; background: #eee; font-size: 14px; }
h1 { font-size: 1.1rem; margin: 0 0 8px; }
fieldset { border: 1px solid #ccc; margin: 0 0 10px; padding: 8px 10px; background: #fff; }
legend { padding: 0 6px; font-weight: 600; }
label { display: inline-block; min-width: 120px; }
input[type="text"], input[type="password"] { width: 260px; max-width: 100%; margin: 2px 0; }
.row { margin: 4px 0; }
button { margin: 2px 4px 2px 0; padding: 4px 10px; cursor: pointer; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.on { background: #2a6ea8; color: #fff; border-color: #1e5280; }
.hint { font-size: 12px; color: #444; margin: 6px 0; max-width: 900px; }
.media-hint { color: #a02020; font-weight: 600; }
#log { background: #111; color: #ccc; font-size: 11px; padding: 8px; height: 120px; overflow: auto; white-space: pre-wrap; margin-top: 8px; }
#tiles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.tile { border: 1px solid #999; padding: 6px; background: #fafafa; min-width: 200px; max-width: 320px; }
.tile.local { border-color: #2a6ea8; }
.tile h3 { margin: 0 0 6px; font-size: 13px; }
.tile video { width: 100%; max-height: 200px; background: #000; vertical-align: middle; }
.ind { font-size: 12px; margin: 4px 0; font-family: ui-monospace, monospace; }
.ind span { margin-right: 8px; }
.ind .off { color: #c00; text-decoration: line-through; }
.ind .on { color: #080; }