* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  background: #121318;
  color: #eaeaf0;
}
.screen { min-height: 100vh; }
.hidden { display: none !important; }

.login-box {
  max-width: 320px;
  margin: 18vh auto;
  padding: 28px;
  background: #1c1e26;
  border-radius: 14px;
  text-align: center;
}
.login-box input {
  width: 100%;
  padding: 10px;
  margin: 14px 0;
  border-radius: 8px;
  border: 1px solid #333;
  background: #0f1015;
  color: #fff;
}
.login-box button, .btn-row button, .cmd-row button, #close-stream {
  background: #5865f2;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.login-box button:hover, .btn-row button:hover { background: #4752c4; }
.error { color: #ff6b6b; min-height: 1em; font-size: 13px; }

header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-bottom: 1px solid #2a2c36;
}
header h1 { font-size: 18px; margin: 0; flex: 1; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.online { background: #3ba55d; }
.dot.offline { background: #888; }

.preview-section { padding: 20px 24px; }
.thumb-box {
  position: relative;
  width: 220px;
  height: 130px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  border: 1px solid #333;
}
.thumb-box img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.thumb-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.6);
  font-size: 11px;
  padding: 4px 8px;
  text-align: center;
}

.controls { padding: 0 24px 40px; }
.controls h2 { font-size: 14px; color: #9a9ca5; margin: 22px 0 8px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cmd-row { display: flex; gap: 8px; }
.cmd-row input {
  flex: 1; padding: 10px; border-radius: 8px;
  border: 1px solid #333; background: #0f1015; color: #fff;
}
pre {
  background: #0f1015;
  border: 1px solid #2a2c36;
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
  font-size: 13px;
}

.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.modal-content { position: relative; max-width: 95vw; max-height: 95vh; }
.modal-content img { max-width: 95vw; max-height: 90vh; border-radius: 6px; }
#close-stream { position: absolute; top: -44px; right: 0; }