/* 
  版权与说明
  by：逆行者秋叔@QiuShuYa
  官网：https://www.nxzlm.com/
  频道：https://t.me/NxzGF
  本样式为后台“科技风”皮肤，采用深色背景、玻璃拟态与霓虹渐变。
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Space+Grotesk:wght@500;700&display=swap');
:root {
  --bg: #0a0f1f;
  --card: rgba(19,24,39,0.6);
  --text: #d8e0ff;
  --muted: #9fb3c8;
  --accent: #00e0b8;
  --accent2: #5b8cff;
  --danger: #ff6b6b;
  --shadow: 0 12px 36px rgba(0,0,0,0.45);
  --radius: 16px;
  --brand: #cfeaff;
}
*.hidden { display:none }
* { box-sizing: border-box }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,Arial }
.bg-glow {
  position: fixed; inset: -20vh -20vw; pointer-events:none;
  background: radial-gradient(900px 420px at 10% 10%, rgba(0,224,184,0.18), transparent 70%),
              radial-gradient(700px 320px at 90% 20%, rgba(91,140,255,0.18), transparent 70%),
              radial-gradient(700px 320px at 20% 80%, rgba(255,107,107,0.14), transparent 70%);
  filter: blur(40px);
}
header.nav {
  display:flex; align-items:center; justify-content:space-between; padding:16px 28px; position:sticky; top:0;
  background: linear-gradient(90deg, rgba(15,20,35,0.85), rgba(15,20,35,0.5)); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand { display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:0.6px; color:var(--brand); font-family:Space Grotesk,Inter,system-ui }
.brand .logo { width:32px; height:32px; object-fit:contain; filter: drop-shadow(0 4px 10px rgba(0,224,184,0.4)); }
header.nav nav a { margin-right:14px; color:var(--muted); text-decoration:none }
header.nav nav a:hover { color:var(--text) }
.logout { margin-left:12px; color:var(--danger) }
main { max-width:1200px; margin: 24px auto; padding: 0 20px }
.card {
  background: var(--card); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px;
}
.grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 16px }
h2,h3 { margin: 0 0 12px }
.form label { display:block; margin-top:8px; color: var(--muted) }
.form input,.form textarea,.form select {
  width:100%; padding:12px 14px; margin-top:6px; color: var(--text);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; outline:none;
}
.form textarea { min-height: 120px }
.form button {
  margin-top:14px; padding:12px 16px; border-radius:12px; border: none;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); color:#001114; font-weight:600; cursor:pointer;
  transition: transform .08s ease, box-shadow .2s ease;
}
.form button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,224,184,0.3) }
.form .row { display:flex; gap: 10px; align-items:center }
.captcha-row { display:flex; gap: 10px; align-items:center; margin-top:6px }
.errmsg { color: var(--danger) }
.notice { background: rgba(0,224,184,0.15); border: 1px solid rgba(0,224,184,0.4); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px }
.table { width:100%; border-collapse: collapse }
.table th,.table td { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 10px }
.gallery { display:grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap:8px }
.gallery img { width:100%; height:120px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,0.1) }
.ph { height:120px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.06); border-radius:10px }
.emoji-btn { margin-left:8px; padding:6px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: var(--text); cursor:pointer }
.emoji-pop { position:absolute; z-index:9999; background: rgba(19,24,39,0.9); border:1px solid rgba(255,255,255,0.12); border-radius:12px; box-shadow: var(--shadow) }

.auth { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 40px 20px }
.auth-card { width: 880px; display:grid; grid-template-columns: 1.3fr 1fr; gap: 0; overflow:hidden; border-radius: 18px; background: linear-gradient(180deg, rgba(28,34,54,0.65), rgba(22,26,44,0.65)); border:1px solid rgba(255,255,255,0.08); box-shadow: var(--shadow) }
.auth-left { padding: 36px 32px; border-right: 1px solid rgba(255,255,255,0.08) }
.auth-right { padding: 36px 32px; background: radial-gradient(600px 240px at 20% 20%, rgba(91,140,255,0.18), transparent 70%) }
.brand-line { display:flex; align-items:center; gap:12px; margin-bottom: 18px; font-family: Space Grotesk,Inter; color: var(--brand) }
.brand-line .logo { width:40px; height:40px; object-fit:contain }
.auth-title { font-size: 28px; font-weight: 700; margin: 0 0 6px }
.auth-sub { color: var(--muted); margin-bottom: 16px }
.auth-actions { margin-top: 16px }

.table-wrap { width:100%; overflow-x:auto }

@media (max-width: 920px) {
  header.nav { padding: 12px 16px }
  .brand .logo { width:28px; height:28px }
  main { padding: 0 14px }
  .card { padding: 16px }
  .grid { grid-template-columns: repeat(auto-fill,minmax(200px,1fr)) }
}

@media (max-width: 760px) {
  .auth-card { width: 100%; grid-template-columns: 1fr }
  .auth-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08) }
  .captcha-row { flex-direction: column; align-items: stretch }
  header.nav nav a { margin-right:10px; display:inline-block }
}