/* M39 Online: Konto-Seiten. Nur Tokens aus theme.css. */
body.online [hidden] { display: none !important; }
body.online {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  background: radial-gradient(ellipse at top, var(--c-bg-3), var(--c-bg-0) 70%);
  color: var(--c-text); font-family: var(--font-ui); padding: var(--sp-4); box-sizing: border-box;
}
.online-card {
  width: min(26rem, 100%); background: var(--c-bg-2); border-radius: var(--r-xl);
  box-shadow: var(--sh-dialog); padding: var(--sp-6) var(--sp-5); box-sizing: border-box;
}
.online-card.wide { width: min(52rem, 100%); }
.online-card h1 { font-family: var(--font-display); font-size: var(--fs-2xl); margin: 0 0 var(--sp-1); text-align: center; }
.online-card h2 { font-family: var(--font-display); font-size: var(--fs-lg); margin: var(--sp-5) 0 var(--sp-3); }
.online-tagline { color: var(--c-text-2); text-align: center; margin: 0 0 var(--sp-5); }
.online-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.online-form label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--c-text-2); }
.online-form input, .online-form textarea {
  font: inherit; font-size: var(--fs-md); color: var(--c-text); background: var(--c-bg-1);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3);
}
.online-form input:focus-visible, .online-form textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.online-form button { min-height: var(--btn-h); margin-top: var(--sp-2); }
.online-msg { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.online-msg[data-kind="error"] { background: rgba(224, 101, 93, .16); color: #ffb3ad; }
.online-msg[data-kind="ok"] { background: var(--c-success-soft); color: var(--c-success); }
.online-switch { text-align: center; margin: var(--sp-4) 0 0; }
.online-switch button, .online-link { background: none; border: 0; color: var(--accent-2); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }
.online-foot { margin-top: var(--sp-5); font-size: var(--fs-2xs); color: var(--c-text-3); text-align: center; line-height: 1.5; }
.online-foot a { color: var(--c-text-2); }
.online-users { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.online-users th, .online-users td { text-align: left; padding: var(--sp-2); border-bottom: 1px solid var(--c-line); vertical-align: top; }
.online-users td.actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.online-users button { font: inherit; font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-xs); cursor: pointer; }
.online-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; }
.online-text p { color: var(--c-text-2); line-height: 1.55; }