/* ===== 登录注册页 ===== */
.auth-wrap { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 40px; padding: 60px 24px; overflow: hidden; background: #060a16; }
.auth-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(800px 500px at 20% 30%, rgba(47,111,237,.35), transparent 60%),
    radial-gradient(700px 500px at 80% 70%, rgba(6,182,212,.25), transparent 60%),
    radial-gradient(600px 400px at 50% 100%, rgba(139,92,246,.18), transparent 65%);
}
.auth-back { position: absolute; top: 24px; left: 24px; color: #94a3b8; text-decoration: none; font-size: 14px; z-index: 3; }
.auth-back:hover { color: #fff; }

.auth-card { position: relative; z-index: 2; width: 420px; max-width: 100%;
  background: rgba(15,23,42,.7); border: 1px solid rgba(148,163,184,.2);
  border-radius: 16px; padding: 36px 32px; backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.4); transition: width .2s;
}
.auth-card--wide { width: 720px; max-width: calc(100% - 40px); padding: 32px 36px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } .auth-card--wide { padding: 24px 20px; } }
.auth-head { text-align: center; margin-bottom: 24px; }
.auth-head .auth-logo {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 14px;
  background: linear-gradient(135deg, #2f6fed, #06b6d4);
  box-shadow: 0 0 30px rgba(47,111,237,.5);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 22px;
}
.auth-head h1 { color: #fff; font-size: 18px; margin-bottom: 6px; font-weight: 700; }
.auth-head .auth-sub { color: #94a3b8; font-size: 13px; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .field { margin-bottom: 0; }
.auth-form .flabel { color: #cbd5e1; font-size: 12px; margin-bottom: 5px; }
.auth-form .ctrl {
  background: rgba(255,255,255,.04); border: 1px solid rgba(148,163,184,.25); color: #fff;
  padding: 10px 12px; border-radius: 8px;
}
.auth-form .ctrl:focus { border-color: var(--accent, #2f6fed); background: rgba(255,255,255,.08); box-shadow: 0 0 0 3px rgba(47,111,237,.2); }
.auth-form select.ctrl { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%), linear-gradient(135deg, #94a3b8 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.auth-error { color: #fca5a5; font-size: 12px; min-height: 14px; text-align: center; }

.auth-submit {
  width: 100%; padding: 12px; font-size: 14px; font-weight: 600;
  background: linear-gradient(135deg, #2f6fed, #06b6d4);
  color: #fff; border: 0; border-radius: 10px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(47,111,237,.4); margin-top: 4px;
}
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(47,111,237,.55); }
.auth-submit:disabled { opacity: .6; cursor: not-allowed; }

.auth-foot { text-align: center; color: #94a3b8; font-size: 13px; margin-top: 18px; }
.auth-foot a { color: #06b6d4; text-decoration: none; margin-left: 4px; font-weight: 500; }
.auth-foot a:hover { text-decoration: underline; }

.auth-tips { position: relative; z-index: 2; width: 280px; max-width: 100%;
  background: rgba(15,23,42,.5); border: 1px solid rgba(148,163,184,.15);
  border-radius: 14px; padding: 22px; backdrop-filter: blur(10px);
}
.auth-tips .tip-title { color: #fff; font-weight: 600; margin-bottom: 14px; font-size: 14px; }
.auth-tips ul { color: #94a3b8; font-size: 13px; line-height: 1.9; padding-left: 0; list-style: none; }
.auth-tips ul li { padding-left: 0; }

@media (max-width: 820px) {
  .auth-tips { display: none; }
  .auth-card { padding: 28px 22px; }
}

.topbar .user-info { display: flex; align-items: center; gap: 8px; padding: 4px 12px; background: #f1f5f9; border-radius: 20px; font-size: 13px; }
.topbar .user-info .avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #2f6fed, #06b6d4); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 12px; }
.topbar .user-info .role-tag-mini { font-size: 11px; color: var(--muted); padding: 2px 8px; background: #fff; border-radius: 10px; border: 1px solid var(--border); }
.topbar .logout-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.topbar .logout-btn:hover { color: var(--accent); border-color: var(--accent); }