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

/* ---------- top bar ---------- */
header {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; background: #16161f; border-bottom: 1px solid #262633;
  font-size: 14px;
}
header strong { color: #cfe6ff; }
#count { color: #8a8aa0; font-size: 12px; }
#presence { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.chip {
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  color: #0f0f19; background: var(--c); font-weight: 600;
}
.auto { font-size: 12px; color: #9a9ab0; display: flex; align-items: center; gap: 4px; }
.name {
  width: 120px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid #2a2a3a; background: #12121b; color: #d7e7ff;
  font-size: 12px; outline: none;
}
.name:focus { border-color: #2b6cff; }
header button {
  background: #2b6cff; color: #fff; border: 0; border-radius: 6px;
  padding: 5px 12px; font-size: 13px; cursor: pointer;
}
header button:hover { background: #3f7bff; }

.room {
  font: 12px ui-monospace, monospace; color: #ffd28f;
  background: #241f12; padding: 2px 8px; border-radius: 6px;
}
#copy, #switch {
  background: #262633; color: #cfe6ff; border: 0; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
}
#copy:hover, #switch:hover { background: #313143; }

/* ---------- editor column + tabs + stage ---------- */
main { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }

.editor-col {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border-right: 1px solid #262633;
}
.tabs {
  display: flex; gap: 2px; padding: 0 6px;
  background: #12121b; border-bottom: 1px solid #262633;
}
.tab {
  background: transparent; border: 0; color: #7a7a90; cursor: pointer;
  padding: 8px 14px; margin-bottom: -1px;
  font: 12px ui-monospace, monospace; border-bottom: 2px solid transparent;
}
.tab:hover { color: #cfe6ff; }
.tab.active { color: #d7e7ff; border-bottom-color: #2b6cff; }

.editor-wrap { position: relative; flex: 1; min-height: 0; }
#editor {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; resize: none; outline: none;
  background: #12121b; color: #d7e7ff; padding: 14px;
  font: 13px/1.55 ui-monospace, "SF Mono", Menlo, monospace; tab-size: 2;
}
#stage { border: 0; width: 100%; height: 100%; background: #0f0f19; }

/* ---------- collaborator cursors (overlay over the textarea) ---------- */
.cursors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.caret-mirror {
  position: absolute; top: 0; left: 0; box-sizing: border-box; border: 0;
  visibility: hidden; overflow: hidden; white-space: pre-wrap; word-wrap: break-word;
}
.cursor { position: absolute; top: 0; left: 0; width: 2px; background: var(--c); }
.cursor-flag {
  position: absolute; top: -1.4em; left: -1px; padding: 0 4px;
  border-radius: 4px 4px 4px 0; white-space: nowrap; font-weight: 600;
  font: 11px/1.4 ui-monospace, monospace; color: #0f0f19; background: var(--c);
}

@media (max-width: 720px) {
  main { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .editor-col { border-right: 0; border-bottom: 1px solid #262633; }
}

/* ---------- lobby ---------- */
#lobby {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #1b1b2b, #0f0f19);
}
#lobby .card {
  width: min(420px, 90vw); padding: 28px; border-radius: 14px;
  background: #16161f; border: 1px solid #2a2a3a; text-align: center;
}
#lobby h1 { margin: 0 0 6px; font-size: 18px; color: #cfe6ff; }
#lobby p { margin: 0 0 20px; font-size: 13px; color: #9a9ab0; }
#lobby .primary {
  width: 100%; padding: 11px; border: 0; border-radius: 8px; cursor: pointer;
  background: #2b6cff; color: #fff; font-size: 14px; font-weight: 600;
}
#lobby .primary:hover { background: #3f7bff; }
#lobby .or {
  margin: 16px 0 10px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: #6a6a80;
}
#lobby .joinrow { display: flex; gap: 8px; }
#lobby input {
  flex: 1; padding: 9px 11px; border-radius: 8px; border: 1px solid #2a2a3a;
  background: #12121b; color: #d7e7ff; font: 13px ui-monospace, monospace; outline: none;
}
#lobby input:focus { border-color: #2b6cff; }
#lobby #join {
  padding: 9px 16px; border: 0; border-radius: 8px; cursor: pointer;
  background: #262633; color: #cfe6ff; font-size: 13px;
}

/* login row: usable without login; this just enables sync + a real name */
.authrow {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid #262633;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
#authnote { font-size: 12px; color: #8a8aa0; line-height: 1.5; }
#authnote strong { color: #cfe6ff; font-weight: 600; }
#login {
  padding: 9px 16px; border: 0; border-radius: 8px; cursor: pointer;
  background: #2f6f4f; color: #eafff2; font-size: 13px; font-weight: 600;
}
#login:hover { background: #38855f; }
#login[disabled] { background: #23262a; color: #8a8aa0; cursor: default; }

/* header "log in to sync" call-to-action (shown when an unauthed socket is rejected) */
.synclogin {
  background: #2f6f4f !important; color: #eafff2 !important;
}
.synclogin:hover { background: #38855f !important; }