/* ══════════ 页面局部:登录 ══════════
   卡片与表单零件在 v2.css(S2 加的 .field / .state / .btn);这里只有这一页
   自己的排版。⛔ 不另起一套颜色、圆角、字号。 */
/* ⛔ 不许写 `padding` 简写:<header class="head wrap">,简写会把 v2.css 里 .wrap 的
   左右 32px 清零。这一页文字居中,看不出来 —— 但别留同一个坑(/try/ 上就看得出)。 */
.head { padding-block: 72px 0; text-align: center; }
.head h1 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 600; line-height: 1.35; letter-spacing: .01em; }
.head .sub { color: var(--second); font-size: 15.5px; max-width: 30em; margin: 14px auto 0; }

.card {
  max-width: 430px; margin: 40px auto 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 26px 26px; box-shadow: var(--shadow);
}
.label { font-size: 12.5px; font-weight: 500; color: var(--second); margin-bottom: 8px; }
.card .btn { margin-top: 16px; }
.btn-block { display: block; width: 100%; text-align: center; }
.note { margin-top: 14px; font-size: 12.5px; color: var(--second); line-height: 1.7; }
#state, #reqState { margin-top: 12px; }

/* 已经发出去了:邮箱 + 「换个邮箱」 */
.sent { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--second); margin-bottom: 16px; }
.sent b { color: var(--ink); font-weight: 500; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; overflow-wrap: anywhere; }
.sent button {
  margin-left: auto; font: inherit; font-size: 12.5px; color: var(--coral-ink);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.sent button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 6 位码:**一个**输入框。
   ⛔ 不做六个小格子(mock 里那个样子):粘贴要么进第一格要么整个丢掉,
      密码管理器和 Safari 的「自动填充验证码」也认不出六个分开的 input。
      一个框 + one-time-code 才是能被自动填进来的那种。 */
.code {
  letter-spacing: .42em; text-indent: .42em;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 21px;
  text-align: center; padding: 15px 18px;
}
.code::placeholder { letter-spacing: .42em; }
.row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.row .resend {
  font: inherit; font-size: 13px; color: var(--second);
  background: transparent; border: 1px solid var(--line2); border-radius: 999px;
  padding: 7px 15px; cursor: pointer;
}
.row .resend:hover:not([disabled]) { color: var(--ink); border-color: var(--coral); }
.row .resend[disabled] { opacity: .45; cursor: not-allowed; }

/* 申请名额:一行小字,点开是表单。⛔ 入口**始终可见** ——
   不靠「登录失败」那个错误串才冒出来(GPT-6 对抗后第 3 条)。 */
.request { max-width: 560px; margin: 26px auto 0; }
.request details { border-top: 1px solid var(--line); }
.request summary {
  cursor: pointer; list-style: none; padding: 20px 0;
  font-size: 14px; color: var(--second);
  display: flex; justify-content: center; align-items: center; gap: 10px;
}
.request summary:hover { color: var(--ink); }
.request summary::-webkit-details-marker { display: none; }
.request summary::after { content: "+"; color: var(--faint); font-family: "Newsreader", serif; font-size: 20px; line-height: 1; }
.request details[open] summary::after { content: "−"; }
.request .body { padding-bottom: 28px; max-width: 30em; margin: 0 auto; }
.request .field + .label { margin-top: 16px; }
textarea.field { min-height: 84px; line-height: 1.6; }
.request .btn { margin-top: 16px; }
#turnstile:not([hidden]) { margin-top: 16px; }
/* 申请过的人:表单换成一行状态(见 showRequestStatus)。和 summary 同一个位置、同一个字号。 */
.request .req-status { border-top: 1px solid var(--line); margin: 0; padding: 20px 0; text-align: center; font-size: 14px; color: var(--second); }

@media (max-width: 820px) {
  .head { padding-top: 48px; }
  .card { margin-top: 28px; padding: 22px 18px 22px; border-radius: 16px; }
  /* ⚠️ 占位项是 <span class="soon">,不是 <a> —— 只写 a:not(.nav-cta) 收不到它们,
     窄屏上它们会留在顶栏里把「下载」挤成两行(S2 在 375 宽实拍到过)。
     ⭐ 2026-09-17:打了 class="nav-keep" 的项(Try it / Sign in)在手机上留着 ——
        顶栏只剩一个 Download 的时候,手机上的人一条能走的路都没有。
        尺寸收窄的那几条在 v2.css 的同一个断点里。 */
  .navlinks a:not(.nav-cta):not(.nav-keep), .navlinks .soon { display: none; }
}

/* SEC-L5(2026-10-08):原页面上的 style="…" 属性搬到这里(CSP 去掉 style-src 'unsafe-inline' 后内联样式属性会被挡)。
   !important 只为保持内联属性原来的优先级(内联 style 压过任何类选择器),只用在这几个一次性的工具类上。 */
.u-mt0 { margin-top: 0 !important; }
.u-mt10 { margin-top: 10px !important; }
.u-mt18 { margin-top: 18px !important; }
.u-tc { text-align: center !important; }