:root{
  color-scheme: light dark;
  --bg:#f6f8fb;
  --card:#fff;
  --line:#e6e8eb;
  --text:#1f2328;
  --muted:#6a737d;
  --brand:#6c5ce7;

  /* 首页卡片配色 */
  --home-card:#fff;
  --home-press:#5a4ae3;
  --home-stripe1:rgba(108,92,231,.22);
  --home-stripe2:rgba(255,255,255,0);
}

*,:before,:after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,PingFang SC,Microsoft YaHei,Arial,Noto Sans CJK SC,sans-serif;
}

/* ================= 顶部导航 ================= */
.header{
  background:#fff;
  border-bottom:1px solid #e6e8eb; /* 底部分割线 */
  position:sticky;
  top:0;
  z-index:100;
}
.header-inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start; /* 由 .spacer 推开到两侧 */
  padding:12px 16px;
  gap:12px;
}
.header .logo img{
  height:40px;               /* 需要更高可改为 80px */
  display:block;
}
.header .tagline{
  font-size:14px;
  color:#666;
  white-space:nowrap;
  margin-left:6px;
}
.header .spacer{ flex:1 1 auto; }
.header .welcome{ color:#666; margin-right:8px; white-space:nowrap; }

/* 按钮 */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; margin-left:6px;
  border:1px solid #d0d7de; border-radius:6px;
  background:#fff; color:#1f2328; text-decoration:none;
  transition:all .2s ease;
}
.btn:hover{
  background:rgb(108,92,231);
  border-color:rgb(108,92,231);
  color:#fff;
}
.btn.primary{
  background:rgb(108,92,231);
  border-color:rgb(108,92,231);
  color:#fff;
}
.btn.primary:hover{
  background:#4c3bc7; border-color:#4c3bc7;
}

/* ================= 页面容器 ================= */
.container{ max-width:1200px; margin:24px auto; padding:0 24px }
.stack{ display:grid; gap:18px }

/* ================= 首页卡片布局（12栅格） ================= */
.h-wrap{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px;
}
.col-3{ grid-column:span 3 }
.col-9{ grid-column:span 9 }

/* 卡片样式 */
.h-card{
  position:relative; height:240px; border-radius:26px;
  background:var(--home-card);
  border:1px solid #d0d7de; box-shadow:0 12px 30px rgba(0,0,0,.06);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  transition:transform .18s ease, box-shadow .18s ease, background .12s ease;
}
.h-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(108,92,231,.18);
}
.h-card::before,.h-card::after{
  content:""; position:absolute; top:0; width:36%; height:100%;
  background:linear-gradient(115deg,var(--home-stripe1),var(--home-stripe2) 70%);
  pointer-events:none;
}
.h-card::before{ left:-8%; transform:skewX(-12deg) }
.h-card::after { right:-8%; transform:skewX(-12deg); opacity:.55 }
.h-label{
  position:relative; z-index:1; text-align:center;
  font-size:32px; font-weight:900; line-height:1.25; color:var(--text);
}
.h-stretch{ position:absolute; inset:0; z-index:2 }
.h-card .h-stretch:active ~ .h-label{ color:#fff; }
@supports(selector(.h-card:has(a:active))){
  .h-card:has(.h-stretch:active){
    background:var(--home-press);
    box-shadow:0 12px 36px rgba(90,74,227,.35);
  }
  .h-card:has(.h-stretch:active)::before,
  .h-card:has(.h-stretch:active)::after{
    background:linear-gradient(115deg, rgba(255,255,255,.85), rgba(255,255,255,0) 70%);
    opacity:.9;
  }
}

/* ================= 公告&页脚 ================= */
.card{ background:#fff; border:1px solid var(--line); border-radius:16px }
.announcement{ padding:16px }
.section-title{ font-size:16px; font-weight:700; letter-spacing:.02em; margin:12px 0 }
.muted{ color:var(--muted) }
.footer{ max-width:1200px; margin:32px auto 48px; padding:0 24px; color:var(--muted); font-size:13px; text-align:center }

/* ================= 响应式 ================= */
@media (max-width:960px){
  .h-wrap{ grid-template-columns:repeat(2,1fr) }
  .col-3,.col-9{ grid-column:span 1 }
  .h-card{ height:220px }
}
@media (max-width:640px){
  .h-wrap{ grid-template-columns:1fr }
  .h-card{ height:180px }
  .h-label{ font-size:22px }
}