/* 基础布局 + 背景效果（与上传图一致） */
:root{
  --card-bg: rgba(255,255,255,.08);
  --card-border: rgba(255,255,255,.18);
  --text: #eaf1ff;
  --muted: rgba(234,241,255,.75);
  --accent: rgba(130,190,255,.95);
  --danger: rgba(255,110,110,.95);
  --ok: rgba(120,255,190,.95);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 50% -20%, rgba(120,170,255,.55), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(35,90,205,.35), rgba(15,45,120,.35)),
    url('/assets/bg.png') center/cover no-repeat fixed;
  min-height:100vh;
}

/* 叠加：点阵星光 + 轻薄连线（纯CSS效果） */
body:before,
body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;   /* 不拦截点击 */
  z-index:-1;            /* 永远在最底层 */
}

body:before{
  background-image:
    radial-gradient(circle at 10% 30%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 35%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 35%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 30% 55%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 65%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 12% 72%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 78%, rgba(255,255,255,.55) 0 1px, transparent 2px);
  opacity:.65;
}

body:after{
  background:
    radial-gradient(closest-side at 50% 10%, rgba(255,255,255,.08), transparent 70%),
    radial-gradient(closest-side at 20% 70%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(closest-side at 80% 60%, rgba(255,255,255,.06), transparent 70%);
  filter: blur(2px);
  opacity:1;
}


/* 容器 */
.container{max-width:1100px;margin:0 auto;padding:24px}
@media (max-width: 640px){ .container{padding:16px} }

.nav{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  margin-bottom:18px;
}
.brand{font-weight:700; letter-spacing:.5px}
.nav a{color:var(--text); text-decoration:none; opacity:.9}
.nav a:hover{opacity:1}
.nav .links{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}

.card{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter: blur(10px);
  border-radius:16px;
  padding:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.grid{display:grid; gap:16px}
.grid-2{grid-template-columns: 1.2fr .8fr}
@media (max-width: 900px){ .grid-2{grid-template-columns: 1fr} }

h1,h2{margin:0 0 12px 0}
p{margin:0 0 10px 0; color:var(--muted)}
label{display:block; margin:10px 0 6px; color:var(--muted); font-size:14px}

input,textarea,select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(10,20,50,.25);
  color:var(--text);
  outline:none;
}
textarea{min-height:120px; resize:vertical}
input:focus,textarea:focus,select:focus{border-color: rgba(150,210,255,.7)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(120,180,255,.18);
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
}
.btn:hover{background: rgba(120,180,255,.28)}
.btn.danger{background: rgba(255,110,110,.14)}
.btn.danger:hover{background: rgba(255,110,110,.22)}
.btn.ok{background: rgba(120,255,190,.12)}
.btn.ok:hover{background: rgba(120,255,190,.2)}
.btn.small{padding:7px 10px; border-radius:10px; font-size:13px}

.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.row.right{justify-content:flex-end}

.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px;
  border:1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.18); color:var(--muted)}

.alert{padding:10px 12px;border-radius:12px; border:1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.18); margin-bottom:12px}
.alert.error{border-color: rgba(255,110,110,.45)}
.alert.ok{border-color: rgba(120,255,190,.45)}

.table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:14px}
.table th,.table td{padding:10px 10px; border-bottom:1px solid rgba(255,255,255,.14); text-align:left; font-size:14px}
.table th{color:rgba(234,241,255,.85); font-weight:600}
.table td{color:rgba(234,241,255,.78)}
.table tr:hover td{background: rgba(255,255,255,.04)}
.table .mono{font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:rgba(234,241,255,.75)}

.gallery{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px}
@media (max-width: 980px){ .gallery{grid-template-columns: repeat(3, 1fr)} }
@media (max-width: 640px){ .gallery{grid-template-columns: repeat(2, 1fr)} }
.thumb{position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.18)}
.thumb img{width:100%; height:160px; object-fit:cover; display:block}
@media (max-width:640px){ .thumb img{height:140px} }
.thumb .meta{position:absolute; left:8px; right:8px; bottom:8px;
  background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18);
  padding:6px 8px; border-radius:12px; font-size:12px; color:rgba(234,241,255,.9);
  backdrop-filter: blur(8px);
}
.thumb .check{position:absolute; top:8px; left:8px; background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18);
  border-radius:10px; padding:4px 6px}

.pagination{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:14px}
.pagination a{padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.2); text-decoration:none; color:var(--text); background: rgba(0,0,0,.18)}
.pagination a.active{background: rgba(120,180,255,.25)}
.pagination a:hover{background: rgba(255,255,255,.06)}

.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(0,0,0,.55); z-index:9999;
}
.modal.open{display:flex}
.modal img{max-width:min(92vw, 1100px); max-height:88vh; border-radius:16px; border:1px solid rgba(255,255,255,.2); box-shadow:0 20px 60px rgba(0,0,0,.35)}
.footer{opacity:.75; font-size:12px; text-align:center; padding:22px 0}
#bgCanvas{
  position:fixed;
  inset:0;
  z-index:-1;            /* 永远在内容后面 */
  pointer-events:none;   /* 不拦截输入/点击 */
  width:100%;
  height:100%;
  display:block;
}