/* Cloud's own additions to Roostack's design system (css/app.css, copied
   by tools/sync-design.sh). Purpose tokens only, as Roostack's. */
.add-lab { position: relative; }
.add-lab-how { position: absolute; right: 0; top: calc(100% + var(--space-2)); width: min(22rem, 80vw); z-index: 10;
  padding: var(--space-3) var(--space-4); }
.add-lab-how p { margin: 0 0 var(--space-2); }
.add-lab-how p:last-child { margin: 0; }
/* "Cloud" in the highlight colour, as in Roostack Cloud's wordmark. */
.brand-cloud { color: var(--highlight); }
.recovery-codes pre.output { max-height: none; }
.link-code { font-family: var(--font-mono); font-size: 1.4em; letter-spacing: 0.1em; padding: var(--space-1) var(--space-3);
  background: var(--surface-2); border-radius: var(--radius); }
/* The Security page's forms: a comfortable width, left-aligned in the card. */
.security-form { max-width: 28rem; }
/* Where you're logged in: one browser a row, its details below its name,
   Log out at the side (stacks at phone width without scrolling). */
.sessions { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.sessions li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.sessions li small { display: block; margin-top: var(--space-1); }