:root{
  --bg:#060912;--bg2:#0f1b3d;--card:#111a33cc;--text:#edf2ff;--muted:#a8b3d7;
  --line:#ffffff22;--accent:#7b61ff;--accent2:#00d4ff;--ok:#42ffa4;
}
*{box-sizing:border-box}html,body{height:100%}
body{
  margin:0;color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;
  background:linear-gradient(125deg,var(--bg) 0%,#0a1230 45%,#0a1f34 100%);
  overflow-x:hidden; position:relative;
}
/* Aurora blobs */
body::before,body::after{
  content:"";position:fixed;z-index:-2;filter:blur(50px);opacity:.42;pointer-events:none;
  width:620px;height:620px;border-radius:50%;animation:aurora 10s ease-in-out infinite alternate;
}
body::before{left:-180px;top:-160px;background:radial-gradient(circle at 40% 35%,#7458ff,transparent 65%)}
body::after{right:-180px;bottom:-180px;background:radial-gradient(circle at 60% 60%,#00bfff,transparent 65%);animation-delay:1.4s}

#fx-canvas{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55}

.wrap{max-width:1140px;margin:0 auto;padding:36px}
.card{
  background:linear-gradient(180deg,#121d3a99,#0f173099);
  border:1px solid var(--line);backdrop-filter:blur(12px);
  border-radius:18px;box-shadow:0 20px 60px #0008;
}
.login{max-width:440px;margin:8vh auto;padding:30px;animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
h1{margin:0 0 8px;font-size:31px;letter-spacing:.3px}
.sub{color:var(--muted)}

input{
  width:100%;margin-top:12px;padding:12px 14px;border-radius:12px;
  border:1px solid #ffffff2a;background:#0c1330;color:#fff;outline:none;transition:.2s;
}
input:focus{border-color:#7b61ff88;box-shadow:0 0 0 3px #7b61ff22, 0 6px 20px #0006}
button{
  margin-top:14px;width:100%;padding:12px;border:0;border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-weight:700;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .2s,filter .2s,box-shadow .2s;
  box-shadow:0 10px 24px #4f58ff44;
}
button:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 14px 34px #3e63ff55}
button::after{
  content:"";position:absolute;inset:-120% -30%;
  background:linear-gradient(115deg,transparent 35%,#ffffff66 50%,transparent 65%);
  transform:translateX(-120%) rotate(8deg);
  animation:shine 3.8s ease-in-out infinite;
}
.error{color:#ff9ab0;font-size:14px;margin-top:10px}

.top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;animation:rise .5s ease both}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.tile{
  padding:18px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(180deg,#111c3a,#0f1730);text-decoration:none;color:inherit;
  display:block;opacity:0;transform:translateY(12px);
  animation:tileIn .48s cubic-bezier(.2,.8,.2,1) forwards;
  transition:.25s transform,.25s box-shadow,.25s border-color;
  position:relative;overflow:hidden;
}
.tile::before{
  content:"";position:absolute;inset:-2px;
  background:conic-gradient(from 180deg at 50% 50%,transparent 0 70%,#8f7bff88 82%,transparent 100%);
  opacity:0;transition:.3s;filter:blur(8px);pointer-events:none;
}
.tile:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 18px 38px #0009;border-color:#7b61ff66}
.tile:hover::before{opacity:.9}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}
.meta{color:var(--muted);font-size:14px;margin-top:8px;line-height:1.55}
.logout{color:#d6ddff;text-decoration:none;border:1px solid #ffffff2a;padding:8px 12px;border-radius:10px;transition:.2s}
.logout:hover{border-color:#7b61ff66;background:#7b61ff22}
.success-pop{
  margin-bottom:14px;padding:10px 14px;border-radius:12px;border:1px solid #42ffa466;
  background:linear-gradient(135deg,#42ffa422,#00d4ff22);color:#d8ffe9;
  animation:pop .8s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes aurora{0%{transform:translateY(0) scale(1)}100%{transform:translateY(22px) scale(1.06)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes tileIn{to{opacity:1;transform:translateY(0)}}
@keyframes pop{0%{opacity:0;transform:scale(.94)}100%{opacity:1;transform:scale(1)}}
@keyframes shine{0%,70%{transform:translateX(-120%) rotate(8deg)}100%{transform:translateX(120%) rotate(8deg)}}


/* 登录页全设备居中 */
body.login-page{min-height:100dvh;}
body.login-page .wrap{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
body.login-page .login{
  margin:0;
  width:min(440px,100%);
}