:root{
  --bg1:#ffffff;
  --bg2:#fdeff6;
  --bg3:#eef5ff;

  --glass: rgba(255,255,255,.55);
  --stroke: rgba(255,255,255,.55);
  --shadow: 0 20px 60px rgba(10,10,20,.10);

  --text:#1c1c22;
  --sub: rgba(28,28,34,.55);

  --r: 26px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Microsoft YaHei", Arial;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 20% 20%, var(--bg2), transparent 70%),
    radial-gradient(900px 500px at 80% 30%, var(--bg3), transparent 70%),
    linear-gradient(180deg, var(--bg1), #fff);
  overflow-x:hidden;
}

/* 鼠标光晕 */
.halo{
  position:fixed;
  width:260px; height:260px;
  border-radius:999px;
  pointer-events:none;
  transform: translate(-50%,-50%);
  left:-999px; top:-999px;
  background: radial-gradient(circle,
    rgba(255,190,220,.35) 0%,
    rgba(210,225,255,.22) 35%,
    rgba(255,255,255,0) 70%);
  filter: blur(2px);
  transition: opacity .2s ease;
  opacity:.9;
  z-index:1;
}

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 18px 24px;
  position:relative;
  z-index:2;
}

.card{
  width:min(920px, 92vw);
  background: var(--glass);
  border:1px solid var(--stroke);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 36px 36px 28px;
}

.top{
  text-align:center;
  margin-bottom: 22px;
}

.avatar{
  width:86px;
  height:86px;
  border-radius:999px;
  object-fit:cover;
  border: 3px solid rgba(255,255,255,.8);
  box-shadow: 0 10px 25px rgba(20,20,30,.12);
  display:block;
  margin:0 auto 14px;
}

.title{
  margin:0;
  font-size:54px;
  letter-spacing:.5px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
}

.subtitle{
  margin:10px 0 0;
  color: var(--sub);
  font-size:14px;
  letter-spacing: .12em;
  text-transform: lowercase;
}

.caret{
  display:inline-block;
  margin-left:2px;
  color: rgba(28,28,34,.35);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50%{opacity:0;} }

.tiles{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.tile{
  text-decoration:none;
  color:inherit;
  background: rgba(255,255,255,.50);
  border:1px solid rgba(255,255,255,.55);
  border-radius: 18px;
  padding: 12px 12px 10px;
  box-shadow: 0 14px 32px rgba(10,10,20,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.tile img{
  width:100%;
  height:110px;         /* 中等大小 */
  object-fit:cover;
  border-radius: 14px;
  display:block;
}

.label{
  margin-top:10px;
  text-align:center;
  font-size:14px;
  color: rgba(28,28,34,.65);
}

.tile:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(10,10,20,.12);
}

.footer{
  margin-top: 16px;
  text-align:center;
  color: rgba(28,28,34,.35);
  font-size:12px;
}

/* 子页面布局 */
.pageTitle{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size:44px;
  margin:0 0 12px;
}
.pageText{
  color: rgba(28,28,34,.65);
  line-height:1.8;
  font-size:14px;
}
.backBtn{
  display:inline-block;
  margin-top:18px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(28,28,34,.15);
  background: rgba(255,255,255,.45);
  text-decoration:none;
  color: rgba(28,28,34,.75);
}

@media (max-width: 860px){
  .title{ font-size:42px; }
  .tiles{ grid-template-columns: repeat(2, 1fr); }
  .tile img{ height:130px; }
  .card{ padding: 28px 18px 22px; }
}