/* ============ AUTH SCREEN ============ */
.auth-screen {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center; padding: 24px;
  background: #e9e9e9;
}
.auth-card {
  width: min(430px, 100%); padding: 38px;
  background: #fff; border: 1px solid #d2d2d2;
  box-shadow: 0 20px 55px #00000018; border-radius: 18px;
}
.auth-symbol {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: #171717; color: #fff;
  font-size: 28px; margin-bottom: 23px;
}
.eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 1.1px;
  color: #666; margin: 0 0 9px;
}
.auth-card h1 { font-size: 29px; letter-spacing: -.7px; margin: 0; color: #171717; }
.auth-copy { font-size: 14px; line-height: 1.55; color: #696969; margin: 10px 0 25px; }
.auth-card label { color: #3d3d3d; margin-bottom: 13px; }
.auth-card input { margin-top: 3px; padding: 12px; }
.auth-submit { width: 100%; margin-top: 8px; padding: 13px; }
.auth-forgot { display: block; margin: 12px auto 0; padding: 4px; color: #555; }
.auth-message { min-height: 20px; margin: 17px 0 0; font-size: 13px; color: #555; }
.auth-small { font-size: 12px; color: #777; margin: 8px 0 0; }
.app-ready .auth-screen { display: none }
.viewer-mode [data-write] { display: none !important; }

@media (max-width: 480px) {
  .auth-screen { padding: 14px; }
  .auth-card { padding: 25px 21px; border-radius: 14px; }
  .auth-card h1 { font-size: 26px; }
}