/* White canvas and vivid page composition. Loaded after shared app styles.
   Only the auth frame is styled here; labels, field state and security behavior
   remain in the route modules. Artwork is native CSS made for this frame. */
.auth-studio,
:root:not([data-theme="dark"]) .auth-studio {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f3f4;
  --surface-3: #e8eaed;
  --ink: #202124;
  --ink-2: #5f6368;
  --ink-3: #5f6368;
  --line: #dadce0;
  --line-strong: #767676;
  --accent: #d0005b;
  --accent-hover: #ab004b;
  --accent-ink: #ffffff;
  --accent-text: #ab004b;
  --accent-soft: #ffe2ef;
  --focus: #202124;
  --auth-room: #ffffff;
  --auth-room-ink: #202124;
  --auth-room-muted: #5f6368;
  --auth-lemon: #ffeb3b;
  --auth-lime: #b8f542;
  --auth-mint: #70ebc0;
  --auth-art-ink: #d0005b;
  --auth-art-shadow: rgb(32 33 36 / .14);
  --auth-dur-panel: 480ms;
  --auth-dur-hero: 480ms;
  --auth-dur-loop: 14000ms;
  color-scheme: light;
}

:root[data-theme="dark"] .auth-studio {
  --bg: #202124;
  --surface: #292a2d;
  --surface-2: #35363a;
  --surface-3: #44464b;
  --ink: #f5f5f7;
  --ink-2: #bdc1c6;
  --ink-3: #bdc1c6;
  --line: #5f6368;
  --line-strong: #9aa0a6;
  --accent: #d0005b;
  --accent-hover: #ab004b;
  --accent-ink: #ffffff;
  --accent-text: #ff8cbb;
  --accent-soft: #4c1830;
  --focus: #ff8cbb;
  --auth-room: #202124;
  --auth-room-ink: #f5f5f7;
  --auth-room-muted: #bdc1c6;
  --auth-art-shadow: rgb(0 0 0 / .3);
  color-scheme: dark;
}
:root[data-theme="dark"] .auth-studio .btn-primary { border-color: #ff8cbb; }
:root[data-theme="dark"] .auth-studio .auth-symbol { color: #ff8cbb; }

.auth-studio .auth-room {
  background: var(--auth-room);
  color: var(--auth-room-ink);
  border-right: 1px solid var(--line);
}
.auth-studio .auth-brand { gap: 10px; }
.auth-studio .auth-brand:focus-visible { outline-color: var(--focus); }
.auth-studio .auth-symbol { color: var(--accent); }
.auth-studio .auth-symbol span { border-radius: 3px; }
.auth-studio .auth-room-copy { animation: none; }
.auth-studio .auth-statement { font-weight: 500; letter-spacing: -.055em; }
.auth-studio .auth-description { color: var(--auth-room-muted); max-width: 350px; }
.auth-studio .auth-room-foot { color: var(--auth-room-muted); }
.auth-studio .auth-workspace { background: var(--surface); }
.auth-studio .auth-toolbar .icon-btn {
  color: var(--ink-2);
  border-color: var(--line-strong);
  background: transparent;
}
.auth-studio .auth-toolbar .icon-btn:hover { color: var(--ink); background: var(--surface-2); }
.auth-studio .auth-toolbar .icon-btn:focus-visible { outline-color: var(--focus); }
.auth-studio .auth-toolbar { display: flex; align-items: center; gap: 12px; }
.auth-studio .auth-home { min-height: 44px; padding-inline: 14px; color: var(--ink); font-size: 15px; }
.auth-studio .auth-art { margin-top: 24px; isolation: isolate; }
.auth-studio .auth-paper-study {
  width: 91%;
  max-width: 490px;
  animation: auth-paper-settle var(--auth-dur-hero) var(--auth-ease-out) both;
}
.auth-studio .auth-sheet-one {
  background: var(--auth-lime);
}
.auth-studio .auth-sheet-two {
  background: var(--auth-mint);
}
.auth-studio .auth-sheet-three {
  background: var(--auth-lemon);
}
.auth-studio .auth-sheet-one::after,
.auth-studio .auth-sheet-three::after {
  border-left-color: rgb(255 255 255 / .75);
  border-right-color: rgb(32 33 36 / .16);
}
.auth-studio .auth-fold-shadow {
  background: var(--auth-art-shadow);
  opacity: 1;
  filter: blur(16px);
}
.auth-studio .auth-sheet-circle {
  border: 0;
  background: #ffffff;
  width: 48%;
  left: 14%;
  top: 12%;
  border-radius: 50% 50% 8% 50%;
}
.auth-studio .auth-sheet-circle::after {
  inset: 24%;
  border-radius: 50% 50% 8% 50%;
  background: #202124;
}
.auth-studio .auth-sheet-line { background: #202124; opacity: .72; }
.auth-studio .auth-sheet-line:last-child { opacity: .38; }
.auth-studio .auth-sheet-window { border-color: rgb(32 33 36 / .4); }
.auth-studio .auth-sheet-window::after {
  border-color: rgb(32 33 36 / .4);
  background: linear-gradient(90deg, transparent 48%, rgb(32 33 36 / .25) 48%, rgb(32 33 36 / .25) 49%, transparent 49%);
}
.auth-studio .auth-sheet-disc::after { border-color: rgb(255 255 255 / .8); }
.auth-studio .auth-fold-light::after {
  background: linear-gradient(100deg, transparent 39%, rgb(255 255 255 / .2) 50%, transparent 61%);
  animation: auth-paper-light var(--auth-dur-loop) linear infinite;
  animation-delay: -3200ms;
}
.auth-studio .auth-foot a,
.auth-studio .auth-forgot a { text-decoration-color: var(--line-strong); }
.auth-studio .auth-foot a:hover,
.auth-studio .auth-forgot a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.auth-studio .input { background: var(--surface); border-color: var(--line-strong); }
.auth-studio .input:focus-visible { border-color: var(--focus); }
.auth-studio .input[aria-invalid="true"] { border-color: var(--danger); }

@keyframes auth-paper-settle {
  from { transform: translateY(12px); }
  to { transform: translateY(0); }
}
@keyframes auth-paper-light {
  from { transform: translateX(-70%); }
  to { transform: translateX(70%); }
}

@media (max-width: 760px) {
  .auth-studio .auth-toolbar { position: static; justify-content: space-between; margin-bottom: 20px; }
  .auth-studio .auth-room { border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-studio .auth-room-copy { max-width: 83%; }
  .auth-studio .auth-art { margin: 0; right: -24px; bottom: 8px; opacity: 1; }
  .auth-studio .auth-paper-study { width: 112px; }
  .auth-studio .auth-description,
  .auth-studio .auth-room-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-studio .auth-paper-study,
  .auth-studio .auth-fold-light::after { animation: none; transform: none; }
  .auth-studio .auth-fold-light::after { opacity: .4; }
  .auth-studio .btn,
  .auth-studio .input,
  .auth-studio .icon-btn { transition: none; }
}
.auth-studio .social-provider { min-height: 48px; padding: 2px; background: transparent; border: 0; box-shadow: none; align-self: center; }
.auth-studio .social-provider img { height: 44px; width: auto; max-width: 100%; object-fit: contain; }

/* Mail sign-in respects the user's text size as well as browser zoom. */
.auth-mail.auth-studio { font-size:1rem; }
.auth-mail.auth-studio h1 { font-size:2.5rem; }
.auth-mail .auth-description { font-size:1.0625rem; }
.auth-mail .auth-room-foot,.auth-mail .auth-divider,
.auth-mail.auth-studio .field>label,.auth-mail.auth-studio .hint,
.auth-mail.auth-studio .error-text,.auth-mail.auth-studio .input-group .btn { font-size:.875rem; }
.auth-mail.auth-studio .auth-foot,.auth-mail.auth-studio .auth-home,
.auth-mail.auth-studio .notice { font-size:.9375rem; }
.auth-mail.auth-studio .input,.auth-mail.auth-studio .btn-block { font-size:1rem; }
.auth-mail.auth-studio .input-group .input { padding-right:5em; }
.auth-mail .auth-panel,.auth-mail .auth-heading,.auth-mail .field { min-width:0; }
.auth-mail.auth-studio .auth-toolbar { flex-wrap:wrap; }
.auth-mail.auth-studio .auth-home { min-width:0; white-space:normal; }
.auth-mail .auth-forgot,.auth-mail.auth-studio .auth-recovery-link { font-size:.875rem; }
/* Theme foreground and ground must change together; interpolated text can vanish. */
.auth-mail.auth-studio .btn { transition:transform var(--auth-dur-micro) var(--auth-ease-out); }
@media(max-width:600px) { .auth-mail.auth-studio h1 { font-size:2rem; } }
@media(max-width:380px) { .auth-mail.auth-studio h1 { font-size:1.875rem; } }