:root{
  --bg:#0e1014;
  --fg:#e9e9ec;
  --muted:#9aa0a8;
  --accent:#5b8cff;
  --accent-2:#4fd1c5;
  --accent-3:#f0a35e;
  --panel:#171a21;
  --panel-2:#1d212b;
  --border:#262b34;
  --radius:18px;
  --maxw:980px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

.deck{ position:fixed; inset:0; }

/* ---- 屏幕系统 ---- */
.screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  padding:7vh 8vw;
  opacity:0; transform:translateY(24px) scale(.995);
  transition:opacity .45s ease, transform .45s ease;
  pointer-events:none;
  overflow-y:auto;
}
.screen.is-active{ opacity:1; transform:none; pointer-events:auto; }

/* 内容短、需要视觉居中的屏单独覆盖 */
.screen--home,
.screen--directory{ justify-content:center; }

/* 列表/关于我/致谢等长内容屏：顶部自然排列，避免内容被居中截断 */
.screen--list,
.screen--about,
.screen--thanks{ justify-content:flex-start; }

/* ---- 欢迎屏 ---- */
.home-inner{ text-align:center; max-width:760px; }
.home-title{
  font-size:clamp(2.4rem,7vw,4.6rem);
  font-weight:700; letter-spacing:.02em; margin:0 0 .4em;
}
.home-slogan{
  font-size:clamp(1rem,2.4vw,1.4rem);
  color:var(--muted); margin:0 0 2.2em;
}
.enter-btn{
  font-size:1.05rem; padding:.85em 2.4em; border-radius:999px;
  border:1px solid var(--accent); background:transparent; color:var(--fg);
  cursor:pointer; transition:background .2s ease,transform .2s ease;
}
.enter-btn:hover{ background:var(--accent); transform:translateY(-2px); }
.enter-btn span{ display:inline-block; transition:transform .2s ease; }
.enter-btn:hover span{ transform:translateX(4px); }
.home-hint{ margin-top:1.4em; font-size:.8rem; color:var(--muted); opacity:.7; }

/* ---- 目录屏 ---- */
.dir-inner{ width:100%; max-width:var(--maxw); }
.dir-heading{
  font-size:.9rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted); text-align:center; margin:0 0 2em; font-weight:500;
}
.dir-grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.dir-card{
  display:flex; flex-direction:column; gap:.5em; text-align:left;
  padding:2em 1.6em; border-radius:var(--radius);
  background:var(--panel); border:1px solid var(--border);
  color:var(--fg); cursor:pointer;
  transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.dir-card:hover{
  border-color:var(--accent); transform:translateY(-4px); background:var(--panel-2);
}
.dir-card-title{ font-size:1.4rem; font-weight:600; }
.dir-card-sub{ font-size:.9rem; color:var(--muted); }

/* ---- 通用屏标题 ---- */
.screen-title{
  font-size:clamp(1.6rem,4vw,2.4rem); font-weight:700;
  margin:0 0 1.2em; align-self:flex-start; width:100%; max-width:var(--maxw);
  border-bottom:1px solid var(--border); padding-bottom:.4em;
}

/* ---- 关于我 ---- */
.about-inner{ width:100%; max-width:var(--maxw); }
.about-intro{
  font-size:1.05rem; color:var(--fg); line-height:1.7;
  margin:0 0 1.8em; padding-left:1em; border-left:3px solid var(--accent);
}
.about-group{ margin-bottom:1.6em; }
.about-group-label{
  display:flex; align-items:center; gap:.7em; margin:0 0 1em;
  font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.about-group-label::after{ content:""; flex:1; height:1px; background:var(--border); }
.about-grid{
  display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.role-card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.3em 1.4em;
  transition:border-color .2s ease,transform .2s ease;
}
.role-card:hover{ border-color:var(--accent); transform:translateY(-3px); }
.role-head{ display:flex; align-items:center; gap:.7em; margin-bottom:.7em; }
.role-name{ font-size:1.2rem; font-weight:700; letter-spacing:.02em; }
.role-ver{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8rem; padding:.15em .6em; border-radius:6px;
  border:1px solid var(--accent); color:var(--accent); background:rgba(91,140,255,.08);
}
.role-desc{ color:var(--muted); line-height:1.75; margin:0; font-size:.95rem; }

/* 哥哥卡：角色名与描述同行 */
.role-head--inline{ flex-wrap:wrap; align-items:baseline; margin-bottom:0; }
.role-head--inline .role-desc{ flex:1; min-width:220px; }

/* 后台进程：青色强调 */
.about-group--bg .role-ver{ border-color:var(--accent-2); color:var(--accent-2); background:rgba(79,209,197,.08); }
.about-group--bg .role-card:hover{ border-color:var(--accent-2); }

/* 哥哥：无版本号，与常规卡片一致（去掉暖橙） */
.role-card--core{ border-color:var(--border); background:var(--panel); }
.role-card--core:hover{ border-color:var(--accent); }
.role-card--core .role-name{ color:var(--fg); }

.about-note{ color:var(--fg); line-height:1.85; margin:0 0 1.2em; }
.about-outro{
  margin-top:1.4em; padding:1.4em 1.6em; border-radius:var(--radius);
  background:var(--panel); border:1px solid rgba(79,209,197,.35);
}
.about-outro p{ color:var(--muted); line-height:1.85; margin:0 0 .8em; }
.about-outro p:last-child{ margin-bottom:0; }
.about-quote{
  margin-top:1em; padding:.9em 1.1em; border-radius:12px;
  border-left:3px solid var(--accent-2);
  background:rgba(79,209,197,.08);
  font-style:italic; color:var(--accent-2); font-weight:700; font-size:1.1rem;
}

/* ---- 列表屏（文章 / 项目） ---- */
.list-inner{ width:100%; max-width:var(--maxw); }
.post-list{ list-style:none; padding:0; margin:0; }
.post-item{ border-top:1px solid var(--border); }
.post-item:last-child{ border-bottom:1px solid var(--border); }
.post-link{
  display:grid; grid-template-columns:110px 1fr; grid-template-areas:"date title" "date summary" "date meta";
  gap:.2em 1.2em; padding:1.3em .4em; color:var(--fg); text-decoration:none;
  transition:background .15s ease,padding-left .15s ease;
}
.post-link:hover{ background:var(--panel); padding-left:1.2em; }
.post-date{ grid-area:date; color:var(--muted); font-size:.85rem; font-variant-numeric:tabular-nums; padding-top:.15em; }
.post-title{ grid-area:title; font-size:1.15rem; font-weight:600; }
.post-summary{ grid-area:summary; color:var(--muted); font-size:.92rem; line-height:1.6; }
.post-meta{ grid-area:meta; color:var(--muted); font-size:.8rem; opacity:.8; }
.list-empty{ color:var(--muted); padding:2em 0; }

/* ---- 文章分类筛选 ---- */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:10px;
  width:100%; max-width:var(--maxw);
  margin:-.6em 0 1.4em;
}
.filter-btn{
  font-size:.85rem; padding:.45em 1em; border-radius:999px;
  border:1px solid var(--border); background:transparent; color:var(--muted);
  cursor:pointer; transition:all .2s ease;
}
.filter-btn:hover{ border-color:var(--accent); color:var(--fg); }
.filter-btn.is-active{ border-color:var(--accent); color:var(--accent); background:rgba(91,140,255,.10); }

/* ---- 致谢 ---- */
.thanks-inner{ width:100%; max-width:var(--maxw); }
.thanks-lead{
  font-size:1.05rem; color:var(--fg); line-height:1.7;
  margin:0 0 1.8em; padding-left:1em; border-left:3px solid var(--accent);
}
.thanks-list{ list-style:none; padding:0; margin:0 0 1.6em; }
.thanks-list li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6em;
  padding:.95em 0; border-top:1px solid var(--border);
  color:var(--muted); line-height:1.75;
}
.thanks-list li:last-child{ border-bottom:1px solid var(--border); }
.thanks-to{ color:var(--accent); font-weight:700; white-space:nowrap; }
.thanks-to::after{ content:"——"; margin:0 .35em; color:var(--border); font-weight:400; }
.thanks-desc{ flex:1; min-width:220px; }
.thanks-sign{
  margin:0 0 2.2em; padding:.9em 1.1em; border-radius:12px;
  border-left:3px solid var(--accent-2);
  background:rgba(79,209,197,.08);
  color:var(--accent-2); font-style:italic; font-weight:700; font-size:1.05rem;
}

/* ---- 常驻导航 ---- */
.deck-nav{
  position:fixed; right:22px; bottom:22px; display:flex; gap:10px; z-index:50;
}
.deck-nav button{
  font-size:.85rem; padding:.55em 1.1em; border-radius:999px;
  border:1px solid var(--border); background:rgba(23,26,33,.85); color:var(--fg);
  backdrop-filter:blur(6px); cursor:pointer; transition:border-color .2s ease;
}
.deck-nav button:hover{ border-color:var(--accent); }

/* ---- 响应式 ---- */
@media (max-width:640px){
  .screen{ padding:6vh 6vw; }
  .post-link{ grid-template-columns:1fr; grid-template-areas:"date" "title" "summary" "meta"; gap:.3em; }
  .post-date{ padding-top:0; }
  .deck-nav{ right:14px; bottom:14px; }
}