/* The same quiet white canvas and Inter typography as the team workspace. */
.auth-screen {
  --auth-ink: #202526;
  --auth-muted: #62696b;
  --auth-surface: #fff;
  --auth-accent: #077b82;
  --auth-hover: #06676d;
  --auth-active: #05565b;
  --auth-line: #e5e8e8;
  --auth-soft: #f7f8f8;
  display: none;
  min-height: 100vh;
  min-height: 100svh;
  padding: 100px 28px;
  place-items: center;
  position: relative;
  background: var(--auth-surface);
  color: var(--auth-ink);
  font: 14px/1.6 Inter, sans-serif;
  letter-spacing: -.01em;
}
.auth-page { margin: 0; background: #fff; }
.auth-page .auth-screen,
html[data-live="true"]:not([data-team-access="ready"]) #auth-screen { display: grid; }
html[data-live="true"]:not([data-team-access="ready"]) :is(.frame, .skip-link, #drawer, #toast) { display: none; }
.auth-panel { width: 100%; max-width: 360px; padding-bottom: 9vh; }
.auth-brand {
  position: absolute;
  top: 32px;
  left: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}
.auth-mark { color: var(--auth-accent); font-size: 26px; font-weight: 750; font-style: italic; letter-spacing: -.03em; }
.auth-panel h1 { font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
#auth-message { margin: 12px 0 28px; color: var(--auth-muted); overflow-wrap: anywhere; }
#auth-actions { display: grid; gap: 12px; }
.auth-button,
.auth-secondary {
  width: 100%;
  min-height: 44px;
  padding: 11px 18px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 550;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.auth-button { background: var(--auth-accent); color: #fff; }
.auth-button:hover:not(:disabled) { background: var(--auth-hover); }
.auth-button:active:not(:disabled) { background: var(--auth-active); }
.auth-secondary { background: var(--auth-soft); color: var(--auth-ink); }
.auth-secondary:hover:not(:disabled) { background: var(--auth-line); }
.auth-screen :is(button, a):focus-visible { outline: 2px solid var(--auth-accent); outline-offset: 4px; }
.auth-screen button:disabled { cursor: wait; opacity: .65; }
.auth-screen ::selection { background: #c5eeec; color: #202526; }
.auth-noscript { margin-top: 18px; color: var(--auth-muted); }
html[data-auth-theme="dark"] .auth-screen,
.theme-dark .auth-screen {
  --auth-ink: #edf1f1;
  --auth-muted: #afb8b9;
  --auth-surface: #1d2425;
  --auth-accent: #85dddf;
  --auth-hover: #a3e7e8;
  --auth-active: #6dcfd2;
  --auth-line: #363e40;
  --auth-soft: #30393b;
}
html[data-auth-theme="dark"] .auth-button,
.theme-dark .auth-button { color: #163033; }
@media (max-width: 600px) {
  .auth-screen { padding: 100px 24px 48px; }
  .auth-brand { top: 28px; left: 24px; }
  .auth-panel { padding-bottom: 12vh; }
  .auth-panel h1 { font-size: 26px; }
}
@media (max-height: 520px) {
  .auth-panel { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-screen :is(button, a) { transition: none; }
}

/* Match the workspace footprint while authorization loads, without cached records. */
#startup-screen {
  min-height: 100vh;
  min-height: 100svh;
  color: var(--text, #202526);
  background: var(--bg, #f7f7f7);
}
.startup-sidebar { width: 202px; flex-shrink: 0; padding: 28px 22px; }
.startup-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.startup-nav { display: grid; gap: 25px; margin-top: 32px; }
.startup-nav i { display: block; height: 12px; width: 70%; border-radius: 4px; background: #e9ebeb; }
.startup-nav i:nth-child(even) { width: 55%; }
.startup-workspace { flex: 1; min-width: 0; margin: 8px 8px 8px 0; border: 1px solid #e4e6e6; border-radius: 18px; background: #fff; }
.startup-topbar { height: 44px; display: flex; align-items: center; padding: 0 30px; border-bottom: 1px solid #e9ebeb; }
.startup-content { padding: 30px; }
.startup-heading { width: 170px; height: 23px; border-radius: 5px; background: #eceeee; }
.startup-toolbar { width: 220px; height: 32px; margin: 24px 0; border-radius: 8px; background: #f4f5f5; }
.startup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.startup-grid > div { height: 104px; border-radius: 12px; background: #f6f7f7; }
.startup-rows { display: grid; gap: 24px; margin-top: 36px; }
.startup-rows i { display: block; height: 52px; border-bottom: 1px solid #eceeee; }
html[data-auth-theme="dark"] #startup-screen { color: #edf1f1; background: #101416; }
html[data-auth-theme="dark"] .startup-workspace { background: #191d23; border-color: #353c46; }
html[data-auth-theme="dark"] .startup-topbar,
html[data-auth-theme="dark"] .startup-rows i { border-color: #353c46; }
html[data-auth-theme="dark"] :is(.startup-nav i, .startup-heading) { background: #2b313a; }
html[data-auth-theme="dark"] :is(.startup-toolbar, .startup-grid > div) { background: #232830; }
@media (max-width: 850px) {
  .startup-sidebar { display: none; }
  .startup-workspace { margin: 0; border: 0; border-radius: 0; }
  .startup-content, .startup-topbar { padding-left: 22px; padding-right: 22px; }
}
@media (max-width: 520px) {
  .startup-grid { grid-template-columns: 1fr; gap: 12px; }
  .startup-grid > div { height: 72px; }
}
/* loading screen matches the real frame: same logo, same menu, same canvas, so nothing jumps when the page opens */
.auth-brand .auth-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
.startup-sidebar { width: 236px; padding: 22px 16px; background: transparent; }
.startup-brand { gap: 10px; font-size: 14px; font-weight: 600; color: #1d2126; }
.startup-brand img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.startup-nav { display: flex; flex-direction: column; gap: 0; margin-top: 26px; }
.startup-link { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; font-size: 13.5px; color: #3a4048; }
.startup-link i { width: 16px; height: 16px; border-radius: 4px; background: #e6e8e8; }
html[data-auth-theme="dark"] .startup-link i { background: #2b313a; }
.startup-link.is-sub { padding-left: 34px; font-size: 13px; color: #5c636b; }
.startup-workspace { border-radius: 16px; }
.startup-topbar { height: 48px; }
.startup-topbar span { width: 90px; height: 12px; border-radius: 4px; background: #eceeee; }
.startup-content { padding: 36px 48px; }
.startup-heading { width: 140px; height: 24px; border-radius: 6px; }
.startup-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; }
.startup-grid > div { height: 88px; border: 1px solid #eceeee; border-radius: 12px; background: #fff; }
.startup-panel { height: 280px; margin-top: 16px; border: 1px solid #eceeee; border-radius: 14px; background: #fff; }
html[data-auth-theme="dark"] .startup-brand { color: #edf1f1; }
html[data-auth-theme="dark"] .startup-link { color: #c9d0d6; }
html[data-auth-theme="dark"] .startup-link.is-sub { color: #9aa3ab; }
html[data-auth-theme="dark"] .startup-topbar span { background: #2b313a; }
html[data-auth-theme="dark"] :is(.startup-grid > div, .startup-panel) { background: #191d23; border-color: #353c46; }
@media (max-width: 850px) { .startup-content { padding: 24px 22px; } .startup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }