:root {
  --bg: #0e1013;
  --panel: #171a1f;
  --line: #262a31;
  --text: #e6e8eb;
  --muted: #8b929c;
  --accent: #4c8dff;
  --ok: #3ecf8e;
  --err: #ff6b6b;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
[hidden] { display: none !important; }
h1 { font-size: 20px; margin: 0; letter-spacing: .2px; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.error { color: var(--err); }
button, select, input { font: inherit; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
button { cursor: pointer; }
button:hover, select:hover { border-color: #3a404a; }
button[type=submit] { background: var(--accent); border-color: var(--accent); color: #fff; }

.screen { min-height: 100%; }
#login { display: grid; place-items: center; padding: 16px; }
.card { width: min(360px, 100%); background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 24px; display: grid; gap: 12px; }
.card p { margin: 0; }

#devices { max-width: 720px; margin: 0 auto; padding: 24px 16px; }
.bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.devices { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.device { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.device:hover { border-color: var(--accent); }
.device .os { font-size: 26px; width: 34px; text-align: center; }
.device .meta { flex: 1; min-width: 0; }
.device .title { font-weight: 600; }
.device .sub { color: var(--muted); font-size: 13px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.dot.busy { background: #f0b429; }

#session { position: fixed; inset: 0; display: flex; flex-direction: column; background: #000; }
.toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--panel);
  border-bottom: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; }
.toolbar button, .toolbar select { padding: 4px 9px; font-size: 13px; }
.toolbar .name { font-weight: 600; }
.toolbar .stats { color: var(--muted); font-variant-numeric: tabular-nums; }
.toolbar .spacer { flex: 1; }
.chk { display: inline-flex; gap: 4px; align-items: center; color: var(--muted); cursor: pointer; }
:fullscreen .toolbar { position: absolute; top: 0; left: 50%; transform: translate(-50%, calc(-100% + 4px));
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; z-index: 5; transition: transform .15s; }
:fullscreen .toolbar:hover { transform: translate(-50%, 0); }
.stage { flex: 1; position: relative; overflow: hidden; outline: none; display: grid; place-items: center; }
#screen { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; max-width: 100%; max-height: 100%; width: auto; height: auto; image-rendering: auto;
  /* Remote cursor is drawn into the video; keep a tiny local dot for zero-latency aim. */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='2.5' fill='%23fff' stroke='%23000'/%3E%3C/svg%3E") 4 4, crosshair; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted);
  background: rgba(0,0,0,.55); pointer-events: none; font-size: 15px; text-align: center; padding: 16px; white-space: pre-line; }

.install { margin-top: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.install summary { cursor: pointer; font-weight: 600; }
.install-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.install-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.install-card h2 { font-size: 16px; margin: 0; }
.install-card p { margin: 0; }
.btn { display: inline-block; text-align: center; background: var(--accent); color: #fff; text-decoration: none;
  border-radius: 8px; padding: 9px 12px; font-weight: 600; }
.cmd { display: flex; gap: 6px; align-items: stretch; min-width: 0; }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; }
.cmd button { padding: 4px 10px; font-size: 13px; flex: none; }
.bar-actions { display: flex; align-items: center; gap: 14px; }
#btn-install { background: var(--accent); border-color: var(--accent); color: #fff; padding: 6px 12px; font-size: 13px; }
.vkb { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; font-size: 16px; border: 0; padding: 0; resize: none; }
#session { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.btn-secondary { background: transparent; border: 1px solid var(--accent); color: var(--accent); }