/* Shared workspace additions: team access card and sync status, using the app's own tokens. */
.system-team .row-head { align-items: flex-start; gap: 16px; }
.system-team .row-head p { margin: 4px 0 0; color: var(--app-muted); }
.team-list { list-style: none; margin: 16px 0 10px; padding: 0; display: grid; gap: 8px; }
.team-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-paper); }
.team-person { display: grid; gap: 2px; min-width: 0; }
.team-person small { color: var(--app-muted); overflow-wrap: anywhere; }
.sidebar-storage[data-state="saving"]::before { animation: cloud-pulse 1s ease-in-out infinite; }
.sidebar-storage[data-state="offline"], .sidebar-storage[data-state="error"] { color: var(--app-gold); }
@keyframes cloud-pulse { 50% { opacity: .25; } }

/* Sign-in and access screens shown before the workspace opens. */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(280px, 420px) 1fr; background: var(--app-bg); }
.auth-aside { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 36px 32px; background: var(--app-night); color: #f5f8fc; }
.auth-aside .brand { margin: 0; }
.auth-aside .brand-name { color: #f5f8fc; }
.auth-aside .brand-caption { color: #a8b9cd; }
.auth-aside h1 { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -.03em; }
.auth-aside p { margin: 12px 0 0; color: #c3d0df; max-width: 32ch; }
.auth-aside small { color: #8ea2ba; }
.auth-main { display: grid; place-items: center; padding: 40px 20px; }
.auth-card { width: min(100%, 420px); display: grid; gap: 16px; padding: 28px; border: 1px solid var(--app-border); border-radius: var(--app-radius); background: var(--app-paper); box-shadow: var(--app-shadow); }
.auth-card h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; color: var(--app-ink); }
.auth-card > p, .auth-card .auth-note { margin: 0; color: var(--app-muted); font-size: 13.5px; }
.auth-card form { display: grid; gap: 14px; }
.auth-card .field input { width: 100%; }
.auth-card .btn { width: 100%; justify-content: center; }
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--app-muted); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--app-border); }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.auth-links .btn { width: auto; }
.auth-success { padding: 12px 14px; border-radius: 10px; background: var(--app-blue-wash); color: var(--app-ink); font-size: 13.5px; }
.workspace-loading { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 14px; color: var(--app-muted); font-size: 14px; }
.workspace-loading .brand-mark { width: 56px; height: 56px; flex-basis: 56px; animation: cloud-pulse 1.4s ease-in-out infinite; }
@media (max-width: 820px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { padding: 24px 20px; }
  .auth-aside p, .auth-aside small { display: none; }
}