:root {
  --text: rgba(255,255,255,0.92);

  --muted: rgba(255,255,255,0.82);

  --glass: rgba(15,15,25,0.45);

  --glass-border: rgba(255,255,255,0.18);

  --input-bg: rgba(0,0,0,0.22);

  --shadow:
    0 8px 32px rgba(0,0,0,0.35);

  --blur: blur(18px);

  --primary:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.25),
      rgba(255,255,255,0.05)
    );
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  min-height:100vh;

  font-family:
    "Segoe UI",
    sans-serif;

  color:var(--text);

  overflow:hidden;
}

/* 视频背景 */

#background-video{
  position:fixed;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:-1;

  filter:
    saturate(1.45)
    contrast(1.12)
    brightness(1.08);

  transform:scale(1.03);
}

/* 暗色遮罩 */

/* body::before{
  content:"";

  position:fixed;
  inset:0;

  z-index:-2;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.15),
      rgba(0,0,0,0.25)
    );
} */

/* 柔光氛围 */

body::after{
  content:"";

  position:fixed;
  inset:0;

  z-index:-1;

  background:
    radial-gradient(
      circle at top left,
      rgba(255,255,255,0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(255,255,255,0.08),
      transparent 35%
    );

  pointer-events:none;
}

main{
  min-height:100vh;

  display:flex;

  justify-content:center;
  align-items:center;

  padding:32px;
}

/* 核心玻璃卡片 */

.card{
  position:relative;

  width:min(430px,100%);

  padding:36px;

  border-radius:32px;

  background:
    linear-gradient(
    135deg,
    rgba(20,20,28,0.18),
    rgba(20,20,28,0.18)
    );

  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);

  border:1px solid var(--glass-border);

  box-shadow:var(--shadow);

  overflow:hidden;

  isolation:isolate;
}

/* 顶部高光 */

.card::before{
  content:"";

  position:absolute;

  top:0;
  left:0;
  right:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.6),
      transparent
    );
}

/* LOGO */

.brand{
  display:flex;
  align-items:center;
  gap:14px;

  margin-bottom:28px;
}

.brand-icon{
  width:52px;
  height:52px;

  border-radius:18px;

  background:
    rgba(255,255,255,0.12);

  backdrop-filter:blur(10px);

  display:flex;
  justify-content:center;
  align-items:center;

  border:
    1px solid rgba(255,255,255,0.15);

  box-shadow:
    0 4px 20px rgba(255,255,255,0.08);
}

.brand-icon::after{
  content:"✦";

  font-size:22px;

  color:white;
}

.brand-title{
  display:flex;
  flex-direction:column;
}

.brand-title span{
  color:var(--muted);
  font-size:0.9rem;
}

/* 标题 */

h1{
  margin:0;

  font-size:2rem;

  font-weight:700;

  letter-spacing:1px;

  text-shadow:
    0 2px 12px rgba(0,0,0,0.35);
}

.description{
  color:var(--muted);

  margin-top:8px;

  line-height:1.6;
}

/* 表单 */

.form-group{
  display:flex;
  flex-direction:column;

  gap:10px;

  margin-top:20px;
}

label{
  color:var(--muted);

  font-size:0.92rem;
}

input{
  width:100%;

  padding:15px 18px;

  border-radius:16px;

  border:
    1px solid rgba(255,255,255,0.12);

  background:var(--input-bg);

  color:white;

  outline:none;

  transition:0.25s;
}

input::placeholder{
  color:rgba(255,255,255,0.4);
}

input:focus{
  border-color:
    rgba(255,255,255,0.35);

  background:
    rgba(255,255,255,0.08);

  box-shadow:
    0 0 0 4px rgba(255,255,255,0.06);
}

/* 按钮 */

button{
  width:100%;

  margin-top:24px;

  border:none;

  border-radius:18px;

  padding:15px;

  font-size:1rem;
  font-weight:600;

  color:white;

  cursor:pointer;

  background:
    rgba(255,255,255,0.12);

  backdrop-filter:blur(10px);

  border:
    1px solid rgba(255,255,255,0.15);

  transition:
    transform .25s,
    background .25s,
    box-shadow .25s;
}

button:hover{
  transform:translateY(-2px);

  background:
    rgba(255,255,255,0.18);

  box-shadow:
    0 8px 24px rgba(255,255,255,0.08);
}

/* 提示框 */

.notice{
  margin-top:18px;

  padding:14px 16px;

  border-radius:16px;

  background:
    rgba(255,255,255,0.08);

  border:
    1px solid rgba(255,255,255,0.12);

  backdrop-filter:blur(10px);

  line-height:1.6;
}

.notice.success{
  border-color:
    rgba(120,255,200,0.35);
}

.notice.error{
  border-color:
    rgba(255,120,120,0.35);
}

/* 链接 */

.link-row{
  display:flex;

  justify-content:space-between;

  margin-top:18px;
}

.link-row a{
  color:
    rgba(255,255,255,0.75);

  text-decoration:none;

  transition:0.25s;
}

.link-row a:hover{
  color:white;
}

/* 页脚 */

.footer{
  margin-top:20px;

  text-align:center;

  color:var(--muted);

  font-size:0.88rem;
}

/* 手机适配 */

@media (max-width:480px){

  .card{
    padding:26px;
    border-radius:26px;
  }

  h1{
    font-size:1.7rem;
  }

}