/* Added to the dashboard on the website only. */
.sessionbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 7px 16px; font-size: 15.5px; font-style: italic;
  background: var(--plum); color: var(--cream); }
.sessionbar a { color: var(--cream); font-weight: 700; font-style: normal; text-decoration: none; }
.sessionbar span { opacity: 0.85; flex: 1; min-width: 200px; }
.sessionbar button { color: var(--cream); background: transparent; border-color: color-mix(in srgb, var(--cream) 45%, transparent); padding: 3px 10px; font-size: 12.5px; }
.starting { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(3px); }
.starting > div { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 24px 28px; max-width: 420px; text-align: center; }
.starting h2 { font-size: 24px; font-weight: 600; margin: 0 0 6px; }
.starting p { margin: 0 0 4px; color: var(--muted); }
.starting a, .starting button { margin-top: 14px; display: inline-block; }
.starting.hidden { display: none; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--rule); border-top-color: var(--grid);
  margin: 0 auto 14px; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }