* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #1a1a2e; color: #c0d0e0; font-family: monospace; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 40px 20px; }
.card { background: #0f0f1f; border: 1px solid #233; border-radius: 6px; padding: 28px 32px; max-width: 620px; width: 100%; margin-top: 12px; }
h1 { font-size: 20px; color: #64ffda; margin-bottom: 4px; }
.subtitle { color: #667; font-size: 12px; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 1px; }
h2 { font-size: 14px; color: #8af; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; }
label { display: block; font-size: 12px; color: #889; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.8px; }
input[type=text] { width: 100%; padding: 8px 10px; font-family: monospace; font-size: 13px; background: #1a1a2e; color: #c0d0e0; border: 1px solid #233; border-radius: 3px; margin-bottom: 14px; }
input[type=text]:focus { outline: none; border-color: #64ffda; }
button { padding: 10px 18px; font-family: monospace; font-size: 13px; background: #1a3a2a; color: #64ffda; border: 1px solid #2a5a4a; border-radius: 3px; cursor: pointer; transition: all 0.15s; }
button:hover { background: #2a4a3a; color: #64ffda; border-color: #3a6a5a; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
.pubkey-box { background: #1a1a2e; padding: 10px 12px; border: 1px solid #233; border-radius: 3px; font-size: 11px; line-height: 1.5; word-break: break-all; color: #8af; margin: 12px 0 6px; user-select: all; }
.copy-btn {
  background: #1a2a3a; color: #8af; border: 1px solid #345; border-radius: 4px;
  padding: 4px 12px; font-family: monospace; font-size: 12px; cursor: pointer;
  margin: 0 0 12px; transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.copy-btn:hover { background: #234; border-color: #64ffda; color: #64ffda; }
.copy-btn.copied { color: #4caf50; border-color: #4caf50; }
.step { margin-bottom: 20px; }
.instructions { font-size: 13px; color: #a0b0c0; line-height: 1.6; margin: 12px 0; }
.instructions a { color: #64ffda; text-decoration: none; }
.instructions a:hover { text-decoration: underline; }
.instructions ol { padding-left: 20px; margin-top: 8px; }
.instructions li { margin-bottom: 6px; }
.error { color: #ff6464; font-size: 13px; margin: 8px 0; }
.success { color: #64ffda; font-size: 14px; margin: 8px 0; }
.pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d8a046; margin-right: 6px; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
/* Bigger spinner for the GitHub-polling wait state — the average
   round-trip including GH propagation is 5-15s but the long tail
   can reach 45s, so the indicator needs to feel ALIVE the whole
   time, not freeze the user into wondering if the tab is broken. */
.waiting-box {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px; background: #1a1a2e; border: 1px solid #2a2a4a;
  border-radius: 4px; margin: 14px 0;
}
.spinner {
  width: 22px; height: 22px;
  border: 3px solid #2a2a4a; border-top-color: #64ffda;
  border-radius: 50%; animation: spin 0.9s linear infinite; flex-shrink: 0;
  margin-top: 1px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.waiting-text { font-size: 13px; line-height: 1.5; flex: 1; }
.waiting-text .head { color: #d0e0f0; font-weight: bold; margin-bottom: 4px; }
.waiting-text .detail { color: #667; font-size: 11px; line-height: 1.5; }
.waiting-text .elapsed { color: #d8a046; font-size: 11px; margin-top: 8px; font-family: monospace; }
.hidden { display: none !important; }
.field-error { color: #ff6464; font-size: 11px; margin-top: -10px; margin-bottom: 12px; }
/* Composite slug input: the project-name <input> on the left and a
   sticky read-only suffix span on the right, joined into one visual
   control. The suffix shows `_<dashed-host>` derived live from the
   host field above — operator sees the final slug shape AS they
   type, no separate preview-paragraph needed. */
.composite-slug { display: flex; align-items: stretch; border: 1px solid #233; border-radius: 3px; margin-bottom: 14px; overflow: hidden; }
.composite-slug:focus-within { border-color: #64ffda; }
.composite-slug input[type=text] {
  /* Strip the global input styles that would re-add the border /
     spacing inside the composite — we want a seamless join. */
  border: none; border-radius: 0; margin: 0;
  /* Take up exactly the slack between the left edge and the suffix. */
  flex: 1; min-width: 0;
}
.composite-slug input[type=text]:focus { outline: none; }
.composite-slug .composite-suffix {
  padding: 8px 10px; flex-shrink: 0;
  background: #131325; color: #889;
  font-family: monospace; font-size: 13px; line-height: 1; align-self: center;
  border-left: 1px solid #233;
  user-select: all;
}
/* One-line lead under each step heading — the single sentence that says
   what to do. Everything else lives in a .reg-help accordion below. */
.lead { font-size: 14px; color: #c0d0e0; line-height: 1.6; margin: 0 0 16px; }
.lead code { background: #1a1a2e; padding: 1px 5px; border-radius: 2px; font-size: 12px; color: #64ffda; }
.preview-line { font-size: 12px; color: #889; margin: -6px 0 14px; }
.preview-line code { background: #1a1a2e; padding: 1px 5px; border-radius: 2px; color: #8af; }
/* Numbered command steps — each a label + a copyable command box. */
.reg-steps { list-style: decimal; padding-left: 22px; margin: 4px 0 6px; }
.reg-steps > li { margin-bottom: 16px; }
.reg-step-label { display: block; font-size: 13px; color: #c0d0e0; margin-bottom: 6px; }
/* Generic helper accordion — everything explanatory hides here, opened
   only on demand. Shares the trust-model look (▸/▾ teal summary). */
.reg-help {
  background: #0a0a1a; border: 1px solid #1f2030; border-radius: 4px;
  padding: 10px 14px; margin: 12px 0; font-size: 12px; color: #889;
}
.reg-help > summary {
  cursor: pointer; color: #64ffda; font-weight: bold;
  list-style: none; padding: 2px 0;
}
.reg-help > summary::-webkit-details-marker { display: none; }
.reg-help > summary::before { content: '▸ '; color: #64ffda; display: inline-block; }
.reg-help[open] > summary::before { content: '▾ '; }
.reg-help .trust-body { margin-top: 10px; line-height: 1.6; }
.reg-help .trust-body p { margin-bottom: 8px; }
.reg-help .trust-body ul { padding-left: 18px; margin-bottom: 8px; }
.reg-help .trust-body li { margin-bottom: 4px; }
.reg-help code { background: #1a1a2e; padding: 1px 5px; border-radius: 2px; font-size: 11px; color: #8af; }
/* Inline variant used inside the waiting box — flush, no card chrome. */
.reg-help-inline { background: none; border: none; padding: 0; margin: 6px 0 0; }
.reg-help-inline > summary { font-weight: normal; font-size: 11px; }
/* Post-registration sign-in wait (T26) — the running "activating your
   credentials" bar shown while the just-restarted daemon loads the new slug
   into users.db. Indeterminate stripe so it reads as "working", not progress
   toward a known end. */
.signin-wait { margin-top: 12px; }
.signin-wait.hidden { display: none; }
.signin-wait-msg { font-size: 13px; color: #c0d0e0; margin-bottom: 6px; }
.signin-bar { height: 6px; background: #1a1a2e; border: 1px solid #233; border-radius: 4px; overflow: hidden; }
.signin-bar-fill {
  height: 100%; width: 32%; border-radius: 4px;
  background: linear-gradient(90deg, rgba(100,255,218,0), #64ffda, rgba(100,255,218,0));
  animation: signin-slide 1.1s linear infinite;
}
@keyframes signin-slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(330%); } }
.signin-wait-detail { font-size: 11px; color: #889; margin-top: 6px; }
.creds-row { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
.creds-row .label-narrow { width: 100px; font-size: 11px; color: #889; text-transform: uppercase; }
.creds-row .value { flex: 1; background: #1a1a2e; padding: 6px 10px; border: 1px solid #233; border-radius: 3px; font-size: 12px; color: #c0d0e0; user-select: all; word-break: break-all; }
/* Copy button sits to the right of the credential; clear the shared
   bottom margin so it stays vertically centred in the flex row. */
.creds-row .copy-btn { margin: 0; white-space: nowrap; }