/* 创作者登录页：一张居中的卡片，手机和电脑同一块中心区域 */
.login-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--gap-l);
  padding-top: calc(max(var(--gap-l), 8vh) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--gap-l) + env(safe-area-inset-bottom, 0px));
}

/* 卡片顶端位置固定：提示、申诉表单出现时卡片只向下长，上面的内容不挪动 */
.login-card {
  width: 24rem;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--gap-xl);
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-m);
}

.login-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-icon {
  display: block;
  width: 3rem;
  height: 3rem;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-s);
}

.login-title {
  margin-top: var(--gap-l);
  font-size: var(--font-xl);
  font-weight: 900;
}

.login-form { margin-top: var(--gap-l); }

.code-input {
  font-family: var(--font-mono);
  font-size: var(--font-l);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* 提示文字一直占两行的位置，出现和消失都不挪动按钮 */
.login-message {
  min-height: 3rem;
  margin: var(--gap-s) 0;
  font-size: var(--font-s);
  color: var(--danger);
}
.login-message.is-info { color: var(--ink-soft); }

.login-button {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  font-size: var(--font-m);
}
/* 两种文字叠在同一格，按钮宽高不随状态变化 */
.login-button-label { grid-area: 1 / 1; }
.login-button-label.is-busy { visibility: hidden; }
.login-button.is-busy .login-button-label { visibility: hidden; }
.login-button.is-busy .login-button-label.is-busy { visibility: visible; }

/* ---------- 申诉表单 ---------- */
.appeal-section,
.claim-section {
  margin-top: var(--gap-l);
  padding-top: var(--gap-l);
  border-top: var(--line-thin) solid var(--silver-deep);
}
.appeal-blocked {
  margin-bottom: var(--gap-l);
  color: var(--danger);
  font-weight: 700;
}
.appeal-title { font-size: var(--font-l); font-weight: 800; }
.appeal-hint {
  margin: var(--gap-xs) 0 var(--gap-m);
  font-size: var(--font-s);
  color: var(--ink-soft);
}
/* 藏起来的文件选择框固定在左上角，不撑出页面滚动 */
.appeal-file {
  position: fixed;
  left: 0;
  top: 0;
  width: 0.0625rem;
  height: 0.0625rem;
  opacity: 0;
  pointer-events: none;
}
.appeal-image-row {
  display: flex;
  margin-top: var(--gap-m);
}
.appeal-image-row .btn + .btn { margin-left: var(--gap-s); }
/* 提示文字一直占两行的位置，换文字时不挪动下面的内容 */
.appeal-image-note {
  min-height: 3rem;
  margin-top: var(--gap-s);
  font-size: var(--font-s);
  color: var(--ink-faint);
}

/* ---------- 订单号领取 ---------- */
.claim-toggle {
  display: block;
  width: 100%;
  min-height: var(--touch);
  margin-top: var(--gap-s);
  border: none;
  background: transparent;
  font-size: var(--font-s);
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: underline;
}
.claim-order {
  margin-bottom: var(--gap-m);
  font-family: var(--font-mono);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.claim-note {
  margin: var(--gap-s) 0;
  font-size: var(--font-s);
  color: var(--ink-soft);
}
.claim-code {
  padding: var(--gap-m);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-s);
  background: var(--silver);
  font-family: var(--font-mono);
  font-size: var(--font-l);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  overflow-wrap: anywhere;
}
.claim-copy {
  width: 100%;
  margin-top: var(--gap-s);
}

/* 矮屏（手机横屏）：收紧间距，让加上订单号入口后的登录卡片仍然放得下，不出现滚动 */
@media (max-height: 480px) {
  .login-shell {
    padding-top: calc(var(--gap-m) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--gap-m) + env(safe-area-inset-bottom, 0px));
  }
  .login-card { padding: var(--gap-l); }
  .login-title { margin-top: var(--gap-s); }
  .login-form { margin-top: var(--gap-s); }
}