@font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/Montserrat-Regular-400.woff2') format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/Montserrat-SemiBold-600.woff2') format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/Montserrat-Bold-700.woff2') format('woff2'); }
@font-face { font-family: Montserrat; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/Montserrat-Italic-400-latin.woff2') format('woff2'); }

/* Customer reference, 2026-10-28. Entry-only rules leave the assessment workspace intact.
   2026-10-28 客户设计稿；样式仅作用于入口，保留答题区布局。 */
body.entry-active {
  background: #f6fafd;
  color: #152b40;
  min-height: 100vh;
  min-height: 100dvh;
}
.entry-active > .site-header,
.entry-active > .site-footer { display: none; }
body.entry-active > #main-content.page-shell {
  background: #f6fafd;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  padding: 64px 24px 0;
  align-items: center;
  justify-content: center;
}
#login-view {
  --entry-unit: min(1px, calc((100cqw - 64px) / 1358), calc((100dvh - 88px) / 754));
  width: calc(1358 * var(--entry-unit));
  max-width: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 766fr) minmax(0, 538fr);
  gap: calc(54 * var(--entry-unit));
  align-items: stretch;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
}
#login-view .welcome-panel {
  position: relative;
  display: block;
  min-width: 0;
  min-height: calc(690 * var(--entry-unit));
  padding: calc(22 * var(--entry-unit)) 0 0;
}
#login-view .welcome-copy-block { position: relative; z-index: 1; }
#login-view h1 {
  max-width: 12ch;
  margin: 0;
  color: #000;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-size: max(36px, calc(78 * var(--entry-unit)));
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.055;
}
#login-view .welcome-copy-block > p {
  max-width: none;
  margin: calc(26 * var(--entry-unit)) 0 0;
  color: #35465e;
  font-size: max(17px, calc(32 * var(--entry-unit)));
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -.025em;
}
/* Show only the original artwork crop; copy, logos and controls are real DOM elements.
   仅展示原图插画区域；文字、品牌和表单均为独立页面元素。 */
#login-view .book-hero {
  position: absolute;
  top: calc(299 * var(--entry-unit));
  left: calc(-54 * var(--entry-unit));
  width: calc(824 * var(--entry-unit));
  height: auto;
  aspect-ratio: 824 / 380;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(to right, transparent, #000 1%, #000 99%, transparent);
}
.entry-art-source {
  position: absolute;
  display: block;
  width: 192.475728%;
  max-width: none;
  height: auto;
  left: -7.524272%;
  top: -126.842105%;
  mix-blend-mode: multiply;
}
#login-view .login-column { width: 100%; min-width: 0; }
#login-view .login-card {
  width: 100%;
  max-width: none;
  min-height: calc(690 * var(--entry-unit));
  padding: calc(63 * var(--entry-unit)) calc(62 * var(--entry-unit)) calc(41 * var(--entry-unit));
  border: 0;
  border-radius: calc(20 * var(--entry-unit));
  background: #fff;
  box-shadow: 0 7px 24px #19364d13;
}
.entry-brand-row {
  display: flex;
  align-items: center;
  gap: calc(31 * var(--entry-unit));
  height: calc(71 * var(--entry-unit));
  width: 100%;
}
.entry-booknook-logo { display: block; width: calc(248 * var(--entry-unit)); height: auto; min-width: 0; }
.entry-brand-divider { width: 1px; height: 100%; background: #d5dbe0; flex: 0 0 1px; }
.entry-lexile-logo { display: block; width: calc(69 * var(--entry-unit)); height: calc(71 * var(--entry-unit)); object-fit: contain; }
#login-view .form-heading {
  display: block;
  margin: calc(68 * var(--entry-unit)) 0 calc(43 * var(--entry-unit));
  text-align: left;
}
#login-view .form-heading h2 {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--entry-unit));
  margin: 0;
  color: #000;
  font: 700 max(28px, calc(44 * var(--entry-unit)))/1.12 Montserrat, Arial, Helvetica, sans-serif;
  letter-spacing: -.04em;
}
.entry-wave, .entry-person-icon {
  display: inline-block;
  flex: none;
  background-image: url('/assets/entry-reference-20261028.png');
  background-repeat: no-repeat;
}
.entry-wave {
  width: calc(46 * var(--entry-unit)); height: calc(49 * var(--entry-unit));
  background-size: calc(1586 * var(--entry-unit)) calc(992 * var(--entry-unit));
  background-position: calc(-1224 * var(--entry-unit)) calc(-388 * var(--entry-unit));
}
#login-view .field-group { margin: 0; }
#login-view label {
  margin: 0 0 calc(11 * var(--entry-unit));
  color: #152239;
  font-size: max(16px, calc(21 * var(--entry-unit)));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.entry-input-wrap { position: relative; }
#login-view input {
  height: max(44px, calc(60 * var(--entry-unit)));
  min-height: 44px;
  padding: 0 calc(48 * var(--entry-unit)) 0 max(14px, calc(19 * var(--entry-unit)));
  border: 2px solid #cfd4dd;
  border-radius: calc(12 * var(--entry-unit));
  box-shadow: none;
  background: #fff;
  color: #152239;
  font: 400 max(16px, calc(21 * var(--entry-unit)))/1.2 Montserrat, Arial, Helvetica, sans-serif;
}
#login-view input::placeholder { color: #a0a9b8; opacity: 1; }
#login-view input:focus { border-color: #008fca; box-shadow: 0 0 0 3px #9ee2f64d; outline: none; }
#login-view input[aria-invalid='true'] { border-color: #b63d43; }
.entry-person-icon {
  position: absolute;
  width: calc(25 * var(--entry-unit)); height: calc(30 * var(--entry-unit));
  right: calc(20 * var(--entry-unit)); top: 50%; transform: translateY(-50%);
  background-size: calc(1586 * var(--entry-unit)) calc(992 * var(--entry-unit));
  background-position: calc(-1367 * var(--entry-unit)) calc(-534 * var(--entry-unit));
  pointer-events: none;
}
/* Reserve feedback space without adding layout shifts; errors remain in normal flow.
   预留校验反馈高度，避免按钮跳动；错误内容保持正常文档流。 */
#login-view .field-feedback {
  margin: 0;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.15;
  min-height: calc(29 * var(--entry-unit));
}
#login-view .field-feedback-size { display: grid; }
#login-view .field-error { margin: 0; min-height: 0; }
#login-view #login-button {
  display: inline-flex;
  width: auto;
  min-width: calc(188 * var(--entry-unit));
  height: max(44px, calc(57 * var(--entry-unit)));
  min-height: 44px;
  margin: 0;
  padding: 0 max(18px, calc(25 * var(--entry-unit)));
  gap: calc(17 * var(--entry-unit));
  border: 0;
  border-radius: calc(13 * var(--entry-unit));
  background: #a1e5fa;
  color: #051923;
  box-shadow: none;
  font: 600 max(17px, calc(23 * var(--entry-unit)))/1 Montserrat, Arial, Helvetica, sans-serif;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
#login-view #login-button:hover { background: #90ddf5; transform: none; box-shadow: 0 3px 10px #1682a517; }
#login-view #login-button:active { background: #80d5f0; transform: none; }
#login-view .continue-arrow { color: #009cd5; width: calc(19 * var(--entry-unit)); height: calc(19 * var(--entry-unit)); }
#login-view .teacher-help {
  display: block;
  margin: calc(30 * var(--entry-unit)) 0 0;
  color: #35465e;
  font-size: max(14px, calc(19.5 * var(--entry-unit)));
  line-height: 1.35;
  font-style: italic;
  text-align: left;
  letter-spacing: -.025em;
}
.entry-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: .3em;
  margin-top: calc(56 * var(--entry-unit));
  color: #35465e;
  font-size: max(14px, calc(18.5 * var(--entry-unit)));
  line-height: 1.3;
  letter-spacing: -.035em;
}
.entry-footer a { display: inline-flex; align-items: center; min-height: 44px; color: #009cda; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
@container (max-width: 900px) {
  #login-view { --entry-unit: 1px; width: min(620px, 100%); grid-template-columns: minmax(0, 1fr); gap: 32px; }
  #login-view .welcome-panel { min-height: 0; padding: 0; }
  #login-view h1 { font-size: clamp(36px, 7cqw, 60px); }
  #login-view .welcome-copy-block > p { font-size: clamp(17px, 3cqw, 24px); margin-top: 18px; }
  #login-view .book-hero { position: relative; top: auto; left: auto; width: 100%; max-width: 620px; margin: 25px 0 0; }
  #login-view .login-card { min-height: 0; padding: clamp(24px, 6cqw, 48px); border-radius: 20px; }
  .entry-brand-row { gap: 24px; height: 60px; }
  .entry-booknook-logo { width: min(248px, 65%); }
  .entry-lexile-logo { width: 56px; height: 58px; }
  #login-view .form-heading { margin: 40px 0 28px; }
  #login-view .form-heading h2 { font-size: 36px; }
  #login-view .field-feedback { min-height: 36px; }
  #login-view .teacher-help { margin-top: 26px; }
  .entry-footer { margin-top: 32px; font-size: 16px; }
}
@media (max-width: 948px) { body.entry-active > #main-content.page-shell { padding: 32px 24px; } }
@container (max-width: 380px) {
  #login-view .login-card { padding: 24px 20px; }
  .entry-brand-row { gap: 14px; height: 46px; }
  .entry-lexile-logo { width: 42px; height: 44px; }
  #login-view .form-heading h2 { font-size: 30px; }
  #login-view .field-feedback { min-height: 48px; }
  #login-view label { font-size: 17px; }
  #login-view .teacher-help { font-size: 17px; }
}

/* Older tablet WebViews still get a fluid layout without container query units.
   较早平板 WebView 不支持容器查询时，仍使用可访问的响应式布局。 */
@supports not (container-type: inline-size) {
  body.entry-active > #main-content.page-shell { min-height: 100vh; padding: 32px 24px; }
  #login-view { --entry-unit: min(1px, calc((100vw - 112px) / 1358), calc((100vh - 88px) / 754)); }
  @media (max-width: 948px) {
    #login-view { --entry-unit: 1px; width: min(620px, 100%); grid-template-columns: minmax(0, 1fr); gap: 32px; }
    #login-view .welcome-panel { min-height: 0; padding: 0; }
    #login-view h1 { font-size: clamp(36px, 7vw, 60px); }
    #login-view .welcome-copy-block > p { font-size: clamp(17px, 3vw, 24px); margin-top: 18px; }
    #login-view .book-hero { position: relative; top: auto; left: auto; width: 100%; margin: 25px 0 0; }
    #login-view .login-card { min-height: 0; padding: 24px; border-radius: 20px; }
    .entry-brand-row { gap: 14px; height: 46px; }
    .entry-booknook-logo { width: min(248px, 65%); }
    .entry-lexile-logo { width: 42px; height: 44px; }
    #login-view .form-heading { margin: 40px 0 28px; }
    #login-view .form-heading h2 { font-size: 30px; }
    #login-view .field-feedback { min-height: 48px; }
    #login-view label { font-size: 17px; }
    #login-view .teacher-help { margin-top: 26px; font-size: 17px; }
    .entry-footer { margin-top: 32px; font-size: 16px; }
  }
}