/* ============================================
 * 暗夜星辰 - 登录页样式
 * 可自定义项：配色（--primary 等）、圆角、间距
 * ============================================ */
:root {
  --primary: #6366f1;        /* 主色（按钮/强调） */
  --primary-light: #818cf8;  /* 主色亮调 */
  --bg-start: #0a0a2e;       /* 背景渐变起点 */
  --bg-end: #000010;         /* 背景渐变终点 */
  --card-bg: rgba(30,41,59,.7);  /* 卡片背景 */
  --card-border: rgba(129,140,248,.2); /* 卡片边框 */
  --text: #e2e8f0;           /* 主文字色 */
  --text-dim: #94a3b8;       /* 次要文字色 */
  --radius: 16px;            /* 卡片圆角 */
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"PingFang SC","Microsoft YaHei",sans-serif; background:#0b1220; color:var(--text); min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }

/* 星空背景 */
.stars { position:fixed; inset:0; z-index:0; background:radial-gradient(ellipse at 50% 0%, var(--bg-start), var(--bg-end) 60%, #000); }

/* 登录卡片 */
.login-box { position:relative; z-index:1; width:380px; max-width:92vw; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius); padding:40px 36px; backdrop-filter:blur(10px); }
.login-box .title { font-size:22px; font-weight:700; text-align:center; margin-bottom:6px; }
.login-box .sub { font-size:13px; color:var(--text-dim); text-align:center; margin-bottom:30px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; }
.field input { width:100%; padding:11px 14px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:rgba(255,255,255,.05); color:#fff; font-size:14px; outline:none; transition:border .2s; }
.field input:focus { border-color:var(--primary-light); }
.login-btn { width:100%; padding:12px; border:none; border-radius:8px; background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; font-size:15px; font-weight:600; cursor:pointer; margin-top:6px; transition:opacity .2s; }
.login-btn:hover { opacity:.9; }
.foot { text-align:center; margin-top:20px; font-size:13px; color:var(--text-dim); }
.foot a { color:var(--primary-light); margin-left:6px; text-decoration:none; }
.msg { text-align:center; font-size:13px; margin-top:12px; min-height:18px; }
.msg.err { color:#f87171; }
.msg.ok { color:#4ade80; }
.captcha-row { display:flex; gap:10px; align-items:center; }
.captcha-row input { flex:1; }
.captcha-row img { height:44px; width:120px; border-radius:8px; cursor:pointer; background:#fff; border:1px solid rgba(255,255,255,.2); }