/* 墨羽 · 封面页公共样式（登录 / 注册共用） */

:root{
  --paper:#FFFFFF;
  --ink:#16171A;
  --ink-2:#4A4C53;
  --ink-3:#8E9098;
  --ink-4:#B9BBC2;
  --rule:#E4E4E8;
  --serif:"Noto Serif SC",Songti SC,SimSun,Georgia,serif;
  --sans:"Noto Sans SC",-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-card:14px;
  --r-ctl:10px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:40px; --s8:56px;
}

*,*::before,*::after{box-sizing:border-box}

html{height:100%}

body{
  min-height:100%;
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  display:grid;
  place-items:center;
  padding:var(--s8) var(--s5);
  overflow-x:hidden;
}

/* ── 极淡的方格底纹：只在中心之外显影 ── */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(22,23,26,.1) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(22,23,26,.1) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(74% 58% at 50% 46%,transparent 22%,#000 82%);
          mask-image:radial-gradient(74% 58% at 50% 46%,transparent 22%,#000 82%);
}
/* ── 羽毛：原稿水彩，出血裁切 ──
   用背景图而不是 <img>，图片只在 min-width:641px 里声明，
   手机端命中 display:none 的分支，浏览器根本不会去下载这 450KB */
.plume{
  position:fixed;
  aspect-ratio:445 / 760;      /* feather.png 原始比例，宽度由高度推出 */
  background-repeat:no-repeat;
  background-size:100% 100%;
  pointer-events:none;
  user-select:none;
  z-index:0;
  opacity:0;
  filter:grayscale(.45);
  animation:settle 1800ms cubic-bezier(.16,.8,.3,1) forwards;
}
@media (min-width:641px){
  .plume{ background-image:url("feather.png") }
}
/* 羽根落点：距左/右 336px（第 7 格左边线），距下 116px（900 高时为倒数第二行上边线）
   羽根在图内位于 (1.6%,98.6%)，565px 高时离盒底 8px、离盒边 326px */
.plume--l{
  left:10px;
  bottom:108px;
  height:565px;
  scale:-1 1;            /* 独立 longhand，与 keyframes 的 transform 叠加 */
  animation-delay:140ms;
}
.plume--r{
  right:10px;
  bottom:108px;
  height:565px;
  animation-delay:300ms;
}

@keyframes settle{
  from{ opacity:0; transform:translateY(-18px) rotate(-1.5deg) }
  to  { opacity:.7; transform:translateY(0) rotate(0) }
}

/* ── 主列 ── */
.shell{
  position:relative;
  z-index:1;
  width:100%;
  max-width:404px;
  text-align:center;
}

.rise{ opacity:0; animation:rise 640ms cubic-bezier(.2,.7,.3,1) forwards }
@keyframes rise{
  from{ opacity:0; transform:translateY(10px) }
  to  { opacity:1; transform:translateY(0) }
}
/* ── 标识 ── */
.crest{
  width:74px;
  height:74px;
  margin:0 auto var(--s4);
  border-radius:18px;
  background:var(--paper);
  border:1px solid rgba(22,23,26,.06);
  box-shadow:0 1px 2px rgba(22,23,26,.05),0 14px 30px -14px rgba(22,23,26,.22);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.crest img{
  height:54px;
  width:54px;
  object-fit:contain;
  display:block;
}

.brand{
  font-family:var(--serif);
  font-weight:400;
  font-size:38px;
  line-height:1;
  letter-spacing:.22em;
  text-indent:.22em;
  margin:0 0 var(--s3);
}

.tagline{
  margin:0 0 var(--s7);
  font-size:12.5px;
  letter-spacing:.14em;
  color:var(--ink-3);
}

/* ── 卡片 ── */
.card{
  background:var(--paper);
  border:1px solid rgba(22,23,26,.07);
  border-radius:var(--r-card);
  padding:var(--s6) var(--s6) var(--s7);
  box-shadow:0 1px 2px rgba(22,23,26,.04),0 18px 44px -18px rgba(22,23,26,.16);
  text-align:left;
}
.card__title{
  font-family:var(--sans);
  font-weight:700;
  font-size:21px;
  letter-spacing:.06em;
  text-align:center;
  margin:0 0 var(--s2);
}

.card__sub{
  text-align:center;
  font-size:12.5px;
  color:var(--ink-3);
  letter-spacing:.04em;
  margin:0 0 var(--s6);
}

/* ── 字段 ── */
.field{ margin-bottom:var(--s5) }

.field__label{
  display:block;
  font-size:12px;
  font-weight:400;
  letter-spacing:.1em;
  color:var(--ink-2);
  margin-bottom:var(--s2);
  transition:color 200ms ease;
}
/* 「（可选）」等次要标注 */
.field__label .opt{
  color:var(--ink-4);
  letter-spacing:.04em;
}

.field__hint{
  margin:6px 0 0;
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--ink-4);
}

.control{ position:relative; display:block }
.control__icon{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  color:var(--ink-4);
  pointer-events:none;
  transition:color 200ms ease;
}

.control__input{
  width:100%;
  font-family:var(--sans);
  font-weight:300;
  font-size:14px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-ctl);
  padding:13px 14px 13px 42px;
  transition:border-color 200ms ease,box-shadow 200ms ease;
}
.control__input::placeholder{ color:var(--ink-4); font-weight:300 }
.control__input:focus{
  outline:0;
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(22,23,26,.06);
}
.field:focus-within .field__label{ color:var(--ink) }
.field:focus-within .control__icon{ color:var(--ink-2) }

.control--pw .control__input{ padding-right:44px }

.peek{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--ink-4);
  cursor:pointer;
  transition:color 200ms ease,background 200ms ease;
}
.peek:hover{ color:var(--ink-2); background:rgba(22,23,26,.04) }
.peek .peek__off{ display:none }
.peek[aria-pressed="true"] .peek__on{ display:none }
.peek[aria-pressed="true"] .peek__off{ display:block }
.peek[aria-pressed="true"]{ color:var(--ink-2) }

/* ── 主按钮 ── */
.submit{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--s2);
  padding:14px 0;
  font-family:var(--sans);
  font-weight:500;
  font-size:14px;
  letter-spacing:.22em;
  text-indent:.22em;
  color:var(--paper);
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:var(--r-ctl);
  cursor:pointer;
  transition:background 220ms ease,color 220ms ease,box-shadow 220ms ease;
}
.submit svg{ text-indent:0; flex:none }
.submit:hover{
  background:#000;
  box-shadow:0 10px 22px -12px rgba(22,23,26,.6);
}
.submit:active{ background:var(--ink-2); border-color:var(--ink-2) }

/* ── 卡片外 ── */
.alt{
  margin:var(--s5) 0 0;
  font-size:13px;
  color:var(--ink-3);
  letter-spacing:.04em;
}
.alt a{
  color:var(--ink);
  font-weight:400;
  text-decoration:none;
  padding-bottom:2px;
  background:linear-gradient(var(--ink),var(--ink)) left bottom/0 1px no-repeat;
  transition:background-size 320ms cubic-bezier(.2,.7,.3,1);
}
.alt a:hover,.alt a:focus-visible{ background-size:100% 1px }
.copyright{
  margin:var(--s7) 0 0;
  font-size:11.5px;
  color:var(--ink-4);
  letter-spacing:.05em;
}

:focus-visible{ outline:1px solid var(--ink); outline-offset:3px }

/* ── 响应式 ── */
@media (max-width:1080px){
  .plume--l{ left:10px; bottom:96px; height:420px }
  .plume--r{ right:10px; bottom:96px; height:420px }
  @keyframes settle{
    from{ opacity:0; transform:translateY(-18px) }
    to  { opacity:.55; transform:translateY(0) }
  }
}
@media (max-width:640px){
  body{ padding:var(--s6) var(--s4) }
  .card{ padding:var(--s5) var(--s5) var(--s6) }
  .brand{ font-size:33px }
  .tagline{ margin-bottom:var(--s6) }
  .plume{ display:none }
}

@media (prefers-reduced-motion:reduce){
  .plume,.rise{ animation-duration:1ms!important; animation-delay:0ms!important }
  *{ transition-duration:1ms!important }
}