:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #050505;
  color: #f5f5f5;
  letter-spacing: 0;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; background: #050505; }

button, input { font: inherit; letter-spacing: 0; }

button {
  min-height: 38px;
  border: 1px solid #292929;
  border-radius: 6px;
  background: #111;
  color: #e9e9e9;
  padding: 0 14px;
  cursor: pointer;
}

button:hover { background: #191919; border-color: #3a3a3a; }
button:focus-visible, input:focus-visible, .screen-stage:focus-visible { outline: 2px solid #f5f5f5; outline-offset: 2px; }

.brand { color: #8c8c8c; font: 600 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; }

.login-view { min-height: 100dvh; display: grid; place-items: center; padding: 28px; }
.login-panel { width: min(100%, 360px); }
.login-panel h1 { margin: 18px 0 34px; font-size: 30px; font-weight: 550; }
.login-panel form { display: grid; gap: 10px; }
.login-panel label { margin-top: 8px; color: #a8a8a8; font-size: 13px; }
.login-panel input {
  width: 100%; height: 46px; border: 1px solid #292929; border-radius: 6px;
  background: #0c0c0c; color: #fff; padding: 0 13px;
}
.login-panel .primary { height: 46px; margin-top: 14px; background: #f2f2f2; border-color: #f2f2f2; color: #080808; font-weight: 650; }
.login-panel .primary:hover { background: #fff; }
.error { min-height: 18px; margin: 5px 0 0; color: #ff7575; font-size: 13px; }
.availability { display: flex; align-items: center; gap: 8px; margin-top: 26px; color: #858585; font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #555; }
.status-dot.online { background: #57c977; box-shadow: 0 0 0 3px rgba(87, 201, 119, .1); }

.remote-view { height: 100dvh; display: grid; grid-template-rows: 56px minmax(0, 1fr) 58px; overflow: hidden; }
.topbar, .controlbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-color: #202020; background: #090909; }
.topbar { border-bottom: 1px solid #202020; }
.controlbar { border-top: 1px solid #202020; }
.identity, .actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.computer-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.connection-state { color: #737373; font-size: 12px; }
.connection-state.connected { color: #57c977; }
.actions button, .controlbar button { min-height: 34px; font-size: 12px; }
.danger-text { color: #ff7474; }

.workspace { min-height: 0; display: grid; padding: 12px; background: #050505; }
.screen-stage { min-width: 0; min-height: 0; position: relative; display: grid; place-items: center; overflow: hidden; background: #0a0a0a; border: 1px solid #1d1d1d; border-radius: 6px; touch-action: none; user-select: none; }
.screen-stage img, .screen-stage video { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.screen-stage img:not([src]) { display: none; }
.remote-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 18px;
  height: 25px;
  background: #fff;
  clip-path: polygon(0 0, 0 88%, 25% 67%, 43% 100%, 58% 92%, 40% 61%, 72% 61%);
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 1px 1px #000);
  pointer-events: none;
  will-change: transform;
}
.screen-empty { position: absolute; color: #5f5f5f; font-size: 12px; }
.segmented { display: flex; flex: 0 0 auto; align-items: center; border: 1px solid #292929; border-radius: 6px; overflow: hidden; }
.segmented button { border: 0; border-radius: 0; background: transparent; }
.segmented button + button { border-left: 1px solid #292929; }
.segmented button.selected { background: #efefef; color: #090909; }
.command-bar {
  flex: 1 1 360px; min-width: 180px; max-width: 520px; height: 36px;
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border: 1px solid #292929; border-radius: 6px; background: #0d0d0d;
  color: #777; font: 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.command-bar input { min-width: 80px; flex: 1; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #f1f1f1; font: inherit; }
.command-bar input::placeholder { color: #5f5f5f; }
.command-bar button { min-height: 26px; padding: 0 10px; border-color: #393939; background: #ededed; color: #090909; font: 600 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.command-bar button:hover { background: #fff; }
.command-bar button:active { background: #cfcfcf; }
.command-bar output { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a8a8a; }
.command-bar output.success { color: #57c977; }
.command-bar output.failure { color: #ff7575; }
.mobile-keyboard { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#mobile-logs-button { display: none; }

dialog { width: min(92vw, 520px); max-height: 72vh; padding: 0; border: 1px solid #303030; border-radius: 8px; background: #0c0c0c; color: #f5f5f5; }
dialog::backdrop { background: rgba(0, 0, 0, .72); }
.dialog-head { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #242424; }
.dialog-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.close-button { width: 34px; min-height: 34px; padding: 0; border: 0; background: transparent; font-size: 22px; }
.activity-list { overflow: auto; max-height: calc(72vh - 55px); }
.activity-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #1d1d1d; font-size: 12px; }
.activity-row time, .activity-row .muted { color: #777; }
.power-list { display: grid; padding: 8px; }
.power-list button { justify-content: flex-start; text-align: left; border: 0; background: transparent; }

[hidden] { display: none !important; }

@media (max-width: 720px) {
  .remote-view { grid-template-rows: 52px minmax(0, 1fr) 54px; }
  .topbar, .controlbar { padding: 0 8px; }
  .topbar .brand, .connection-state, #clipboard-button, #logs-button { display: none; }
  .actions { gap: 5px; }
  .actions button { padding: 0 9px; }
  .workspace { padding: 0; }
  .screen-stage { border: 0; border-radius: 0; }
  .controlbar { gap: 6px; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .command-bar { flex: 0 0 min(72vw, 320px); }
  .command-bar output { max-width: 100px; }
  .controlbar::-webkit-scrollbar { display: none; }
  .controlbar button { padding: 0 9px; }
  .controlbar > button { flex: 0 0 auto; }
  #mobile-logs-button { display: inline-block; }
  .activity-row { grid-template-columns: 72px 1fr; }
  .activity-row .muted { grid-column: 2; }
}