* { box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: system-ui, sans-serif; margin: 0; background: #14161a; color: #e8e8ec; display: flex; flex-direction: column; overflow: hidden; }

header { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.25rem; background: #1c1f26; }
header h1 { font-size: 1.1rem; margin: 0; }
header button { background: #2a2e37; color: #e8e8ec; border: 1px solid #3a3f4b; border-radius: 4px; padding: 0.3rem 0.7rem; cursor: pointer; }

.login-body { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-form { background: #1c1f26; padding: 2rem; border-radius: 8px; width: 280px; }
.login-form h1 { margin-top: 0; font-size: 1.2rem; }
.login-form label { display: block; margin-bottom: 0.9rem; font-size: 0.85rem; }
.login-form input { display: block; width: 100%; margin-top: 0.3rem; padding: 0.5rem; border-radius: 4px; border: 1px solid #3a3f4b; background: #14161a; color: #e8e8ec; }
.login-form button { width: 100%; padding: 0.6rem; border-radius: 4px; border: none; background: #4a7dff; color: white; cursor: pointer; }
.error { color: #ff6b6b; font-size: 0.85rem; }

#app { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 320px; gap: 1rem; padding: 1rem; overflow: hidden; }
.video-grid { grid-column: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0.75rem; align-content: start; }
.video-tile { background: #000; border-radius: 6px; overflow: hidden; position: relative; }
.video-tile video { width: 100%; display: block; aspect-ratio: 16/9; background: #000; }
.video-label { position: absolute; top: 0.4rem; left: 0.5rem; background: rgba(0,0,0,0.6); padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; z-index: 1; }

.sidebar { grid-column: 2; min-height: 0; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; }
.ptz-panel { flex: 0 0 auto; background: #1c1f26; border-radius: 8px; padding: 1rem; }
.ptz-panel h2 { font-size: 0.9rem; margin-top: 0; }
.ptz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.ptz-grid button { aspect-ratio: 1; font-size: 1.2rem; border-radius: 6px; border: 1px solid #3a3f4b; background: #2a2e37; color: #e8e8ec; cursor: pointer; user-select: none; }
.ptz-grid button.stop { background: #4a2a2a; }
.ptz-grid button.enabled { background: #2a4a32; border-color: #3a7a4b; }
.zoom-row { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
.zoom-row button { flex: 1; padding: 0.5rem; border-radius: 6px; border: 1px solid #3a3f4b; background: #2a2e37; color: #e8e8ec; cursor: pointer; }

.online-panel { flex: 0 0 auto; background: #1c1f26; border-radius: 8px; padding: 1rem; }
.online-panel h2 { font-size: 0.9rem; margin-top: 0; }
#online-list { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
#online-list li { padding: 0.2rem 0; color: #b8bcc6; }
#online-list li::before { content: "●"; color: #4caf6a; margin-right: 0.4rem; font-size: 0.7rem; }
#online-list:empty::after { content: "No one else is online"; color: #6a6f7a; font-style: italic; }

.system-panel { flex: 0 0 auto; background: #1c1f26; border-radius: 8px; padding: 1rem; }
.system-panel h2 { font-size: 0.9rem; margin-top: 0; }
#restart-video-btn { width: 100%; padding: 0.5rem; border-radius: 4px; border: 1px solid #3a3f4b; background: #2a2e37; color: #e8e8ec; cursor: pointer; }
#restart-video-status { font-size: 0.8rem; color: #b8bcc6; margin: 0.5rem 0 0; }
#restart-video-status:empty { display: none; }

.users-panel { flex: 0 0 auto; background: #1c1f26; border-radius: 8px; padding: 1rem; }
.users-panel h2 { font-size: 0.9rem; margin-top: 0; }
#user-list { list-style: none; margin: 0 0 0.8rem; padding: 0; font-size: 0.85rem; }
#user-list li { padding: 0.2rem 0; color: #b8bcc6; }
#add-user-form { display: flex; flex-direction: column; gap: 0.4rem; }
#add-user-form input { padding: 0.5rem; border-radius: 4px; border: 1px solid #3a3f4b; background: #14161a; color: #e8e8ec; }
#add-user-form button { padding: 0.5rem; border-radius: 4px; border: none; background: #4a7dff; color: white; cursor: pointer; }
#add-user-error:empty { display: none; }

.idle-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 100; }
.idle-modal.visible { display: flex; }
.idle-modal-box { background: #1c1f26; padding: 1.5rem 2rem; border-radius: 8px; text-align: center; }
.idle-modal-box p { margin: 0 0 1rem; }
.idle-modal-box button { padding: 0.5rem 1.2rem; border-radius: 4px; border: none; background: #4a7dff; color: white; cursor: pointer; }

@media (max-width: 900px) {
  body { overflow-y: auto; height: auto; }
  #app { grid-template-columns: 1fr; overflow: visible; }
  .video-grid, .sidebar { grid-column: 1; overflow: visible; }
}