/* The welcome screens share Panel's reading-room palette without app chrome. */
.login-page { background:#f5f3ec; color:#193c32; padding:0; }
.login-page .auth-shell {
  width:min(1180px,100%); min-height:100vh; min-height:100dvh; margin:0 auto;
  padding:max(56px,var(--panel-safe-top,env(safe-area-inset-top,0px))) max(64px,var(--panel-safe-right,env(safe-area-inset-right,0px))) max(30px,var(--panel-safe-bottom,env(safe-area-inset-bottom,0px))) max(64px,var(--panel-safe-left,env(safe-area-inset-left,0px))); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px);
  grid-template-rows:1fr auto; column-gap:86px; row-gap:32px; align-items:center;
  background:none;
}
.auth-story { min-width:0; padding:8px 0; }
.login-page .auth-story .brand { display:inline-flex; align-items:center; gap:11px; width:auto; color:#193c32; font-size:29px; font-weight:750; letter-spacing:-1px; padding:0; margin:0 0 55px; text-decoration:none; }
.auth-story .brand-symbol { width:36px; height:36px; background:#193c32; color:#f5f3ec; border-radius:9px; padding:5px; display:grid; place-items:center; }
.auth-story .brand-symbol svg { width:26px; height:26px; }
.auth-story-copy .login-eyebrow { margin:0 0 18px; color:#7c4d35; font-size:10px; letter-spacing:2px; }
.auth-story-copy h2 { font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(42px,4.8vw,62px); line-height:1.05; letter-spacing:-2px; margin:0; color:#193c32; }
.auth-story-copy > p:last-child { margin:20px 0 0; font-size:15px; line-height:1.8; color:#5c6e62; }
.auth-shelf { display:flex; align-items:flex-end; gap:13px; margin:38px 0 0; padding:0 6px 16px; width:min(100%,390px); border-bottom:2px solid #d6d8cb; }
.auth-book { height:157px; flex:1; position:relative; overflow:hidden; border-radius:3px 7px 7px 3px; box-shadow:inset 5px 0 #00000010,5px 6px 0 #193c3208; padding:15px 12px; display:flex; flex-direction:column; justify-content:space-between; }
.auth-book-label { font-family:Georgia,'Times New Roman',serif; font-size:18px; position:relative; z-index:1; }
.auth-book-comics { background:#bf6e4b; color:#fff4df; transform:rotate(-6deg); transform-origin:bottom center; }
.auth-book-manga { background:#244e3e; color:#e3e8c9; height:177px; }
.auth-book-books { background:#d8dcbe; color:#244e3e; transform:rotate(6deg); transform-origin:bottom center; }
.auth-book-mark { display:block; height:84px; position:relative; }
.auth-book-comics .auth-book-mark { border:1px solid #fff4df80; background:linear-gradient(135deg,transparent 48%,#fff4df80 49%,#fff4df80 50%,transparent 51%),linear-gradient(90deg,transparent 48%,#fff4df80 49%,#fff4df80 50%,transparent 51%); }
.auth-book-manga .auth-book-mark::before { content:''; display:block; width:61px; height:61px; border:1px solid #e3e8c9; border-radius:50%; margin:6px auto; box-shadow:0 0 0 9px #e3e8c91a,0 0 0 18px #e3e8c912; }
.auth-book-books .auth-book-mark { border:1px solid #244e3e80; border-radius:48px 48px 0 0; margin:0 5px; }
.auth-book-books .auth-book-mark::after { content:''; position:absolute; inset:12px 10px 0; border:1px solid #244e3e80; border-bottom:0; border-radius:40px 40px 0 0; }
.auth-story-note { color:#738073; font-size:11px; margin:20px 0 0; }
.login-page .auth-card { width:100%; padding:40px; background:#fffefa; border:1px solid #dedfd3; border-radius:20px; box-shadow:0 14px 50px #193c3207; }
.auth-card .login-eyebrow { color:#7c4d35; font-size:10px; letter-spacing:1.7px; margin:0 0 12px; }
.login-page .auth-card h1 { font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:37px; letter-spacing:-1.2px; line-height:1.14; margin:0; color:#193c32; }
.auth-card .login-intro { font-size:14px; line-height:1.75; color:#617167; margin:16px 0 0; }
.auth-card form { margin-top:30px; }
.auth-card label { color:#314b3d; font-size:12px; font-weight:650; margin-bottom:8px; }
.login-page .auth-card input:not([type=hidden]) { min-height:50px; padding:12px 14px; border:1px solid #d6dacd; background:#f8f8f2; border-radius:9px; color:#193c32; font-size:16px; margin-bottom:22px; }
.login-page .auth-card input:focus { outline:2px solid #244e3e; outline-offset:2px; }
.auth-card .password-field { margin-bottom:22px; }
.login-page .auth-card .password-field input { padding-right:70px; margin-bottom:0; }
.auth-card .password-field > button { top:3px; right:3px; min-height:44px; min-width:60px; color:#31513e; font-weight:600; font-size:12px; }
.auth-card .password-field > button:hover { background:#e8eedf; }
.login-page .auth-card .primary { background:#244e3e; color:#fffefa; border:1px solid #244e3e; border-radius:9px; min-height:50px; padding:12px 18px; font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.login-page .auth-card .primary:hover { background:#173d30; border-color:#173d30; }
.auth-card .primary > span[aria-hidden] { font-size:20px; line-height:1; }
.auth-card :is(a,button):focus-visible { outline:2px solid #244e3e; outline-offset:4px; }
.auth-invitation-note { border-top:1px solid #e4e5db; margin:25px 0 0; padding:20px 0 0; color:#6d796c; font-size:12px; line-height:1.7; }
.auth-field-help { color:#617167; font-size:12px; line-height:1.7; margin:-10px 0 21px; }
.auth-return { margin-top:24px; text-decoration:none; }
.auth-card .login-error { border-color:#dfc4b5; color:#8e3927; background:#fff2ea; margin-top:20px; font-size:13px; line-height:1.6; }
.login-page .auth-shell .login-caption { grid-column:1/-1; color:#7a8378; font-size:11px; margin:0; line-height:1.7; text-align:center; }
@media (min-width:900px) and (max-height:760px) {
  .login-page .auth-shell { padding-top:max(30px,var(--panel-safe-top,env(safe-area-inset-top,0px))); padding-bottom:max(20px,var(--panel-safe-bottom,env(safe-area-inset-bottom,0px))); row-gap:22px; }
  .login-page .auth-story .brand { margin-bottom:30px; }
  .auth-shelf { margin-top:28px; }
}
@media (max-width:899px) {
  .login-page .auth-shell { width:min(560px,100%); grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; gap:30px; padding:max(40px,var(--panel-safe-top,env(safe-area-inset-top,0px))) max(36px,var(--panel-safe-right,env(safe-area-inset-right,0px))) max(28px,var(--panel-safe-bottom,env(safe-area-inset-bottom,0px))) max(36px,var(--panel-safe-left,env(safe-area-inset-left,0px))); align-content:center; }
  .auth-story { padding:0; }
  .login-page .auth-story .brand { margin:0; }
  .auth-story-copy,.auth-shelf,.auth-story-note { display:none; }
  .login-page .auth-card { padding:38px; }
}
@media (max-width:480px) {
  .login-page .auth-shell { padding:calc(28px + var(--panel-safe-top,env(safe-area-inset-top,0px))) max(24px,var(--panel-safe-right,env(safe-area-inset-right,0px))) calc(24px + var(--panel-safe-bottom,env(safe-area-inset-bottom,0px))) max(24px,var(--panel-safe-left,env(safe-area-inset-left,0px))); gap:32px; align-content:start; }
  .login-page .auth-story .brand { font-size:27px; }
  .login-page .auth-card { border:0; border-radius:0; box-shadow:none; padding:0; background:none; }
  .login-page .auth-card h1 { font-size:36px; }
  .auth-card .login-intro { font-size:14px; }
  .auth-card form { margin-top:28px; }
  .login-page .auth-card input:not([type=hidden]) { background:#fffefa; }
  .login-page .auth-shell .login-caption { display:block; margin-top:2px; font-size:10px; }
}
@media (max-width:350px) {
  .login-page .auth-shell { padding-left:max(20px,var(--panel-safe-left,env(safe-area-inset-left,0px))); padding-right:max(20px,var(--panel-safe-right,env(safe-area-inset-right,0px))); gap:26px; }
  .login-page .auth-card h1 { font-size:31px; }
}
@media (forced-colors:active) {
  .auth-book,.auth-book-mark { border:1px solid CanvasText; }
  .auth-card .primary,.auth-card input { border:1px solid ButtonText; }
}