/* ============ 有间书馆 · 登录页定制 ============ */

/* 全屏山水背景 */
#login {
  background: url("/files/static/img/login-bg.jpg") center / cover no-repeat;
}

/* 左侧：好书常在，与友共读 */
#login::before {
  content: "好书常在，\A与友共读。\A\A A PRIVATE\ALIBRARY\AFOR FRIENDS";
  white-space: pre-line;
  position: absolute;
  left: 7%;
  top: 24%;
  z-index: 1;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 21px;
  letter-spacing: 0.3em;
  line-height: 2.2;
  color: #2b2b2b;
  opacity: 0.88;
  background: linear-gradient(#2b2b2b, #2b2b2b) left top / 46px 2px no-repeat;
  padding-top: 30px;
}

/* 右侧：竖排诗句 + 小印章 */
#login::after {
  content: "在书中，看见更大的世界。";
  position: absolute;
  right: 6%;
  top: 22%;
  z-index: 1;
  writing-mode: vertical-rl;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 19px;
  letter-spacing: 0.5em;
  color: #2b2b2b;
  opacity: 0.88;
  background: url("/files/static/img/logo.svg") no-repeat center bottom / 30px 30px;
  padding-bottom: 54px;
}

/* 磨砂玻璃卡片 */
#login form {
  width: min(92%, 470px);
  max-width: 30em;
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(60, 50, 40, 0.22);
  padding: 52px 58px 40px;
}

/* 印章 logo */
#login img {
  width: 4.4em;
  height: 4.4em;
}

/* 标题 */
#login h1 {
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  font-size: 3.1em;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: #1d1d1f;
  margin: 0.32em 0 0.5em;
}
#login h1::after {
  content: "藏书于此，分享于友";
  display: block;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  opacity: 0.62;
  margin-top: 18px;
}

/* 输入框（带图标） */
#login .input {
  font-size: 17px;
  padding: 0.9em 1em 0.9em 3em;
  margin: 0 0 1em;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  background-color: rgba(255, 255, 255, 0.92);
  background-repeat: no-repeat;
  background-position: 1.1em center;
  background-size: 1.25em;
}
#login input[type="text"] {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='1.8' stroke-linecap='round'><circle cx='12' cy='8' r='4'/><path d='M4.5 20.5c.8-3.9 3.9-6 7.5-6s6.7 2.1 7.5 6'/></svg>");
}
#login input[type="password"] {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='1.8' stroke-linecap='round'><rect x='5' y='10.5' width='14' height='9.5' rx='2.5'/><path d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/></svg>");
}

/* 登录按钮 */
#login input[type="submit"].button {
  font-size: 18px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  padding: 0.95em 1em;
  border-radius: 12px;
  border: none;
  color: #fff;
  cursor: pointer;
  background-color: #2b7fff;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 12h15'/><path d='M13.5 6l6 6-6 6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1.7em center;
  background-size: 1.2em;
  box-shadow: 0 12px 26px rgba(43, 127, 255, 0.38);
}
#login input[type="submit"].button:hover {
  background-color: #1f6feb;
}

/* 卡片底部：阅读 · 交流 · 共享 */
#login form::after {
  content: "阅读 · 交流 · 共享";
  display: block;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  color: #777;
  margin-top: 34px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)) left center / calc(50% - 112px) 1px no-repeat,
    linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)) right center / calc(50% - 112px) 1px no-repeat;
}

#login .wrong {
  border-radius: 10px;
  font-size: 15px;
}

/* 小屏幕：隐藏两侧诗句 */
@media (max-width: 900px) {
  #login::before,
  #login::after {
    display: none;
  }
  #login form {
    padding: 42px 30px 34px;
  }
  #login h1 {
    font-size: 2.5em;
  }
}