/* 诗中游 · 主页（目录）样式 */
:root{
  --ink:#294d46;
  --muted:#667970;
  --paper:#f9f6e6;
  --line:rgba(56,82,65,.17);
  --accent:#9b603f;
  --serif:'Songti SC','STSong','Noto Serif CJK SC',serif;
  --bg:#efeada;
  --bg-deep:#e3dfca;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%,#f5f1de,transparent 70%),
    radial-gradient(900px 500px at -10% 110%,#e6e2cd,transparent 65%),
    var(--bg);
  color:var(--ink);
  font-family:'PingFang SC','Microsoft YaHei',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* 顶部 */
.top{
  max-width:1180px;
  margin:0 auto;
  padding:48px 32px 24px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:14px}
.seal{
  display:inline-grid;place-items:center;
  width:42px;height:48px;
  background:#a15f44;color:#fff0d8;
  border-radius:4px;
  font-family:var(--serif);font-size:30px;
  box-shadow:0 4px 14px #a15f4433;
}
.brand-text{display:flex;flex-direction:column;gap:2px}
.brand-text b{
  font:24px/1 var(--serif);
  letter-spacing:.18em;
}
.brand-text small{
  font-size:11px;letter-spacing:.18em;color:var(--muted);
}

.progress{
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  font-size:12px;color:var(--muted);letter-spacing:.08em;
}
.progress b{font:22px var(--serif);color:var(--ink);letter-spacing:.06em}
.bar{width:140px;height:3px;background:#d6cfb7;border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:#3d6257;width:0%;transition:width .6s}

/* 简介 */
.intro{
  max-width:1180px;margin:0 auto;padding:6px 32px 28px;
  font-size:13px;line-height:1.85;color:#5a6b62;letter-spacing:.03em;
  max-width:780px;
}

/* 筛选 */
.filters{
  max-width:1180px;margin:8px auto 16px;padding:0 32px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.filters span{font-size:11px;letter-spacing:.15em;color:var(--muted);margin-right:6px}
.chip{
  font:12px var(--serif);
  padding:7px 14px;border-radius:20px;
  background:#fff8e0;border:1px solid var(--line);
  color:#36594d;cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
  letter-spacing:.06em;
}
.chip:hover{transform:translateY(-1px)}
.chip[aria-pressed=true]{
  background:#3d6257;color:#fff4db;border-color:transparent;
}

/* 网格 */
.grid{
  max-width:1180px;margin:0 auto;padding:8px 32px 80px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
}
.card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 18px 16px;
  min-height:142px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .25s,box-shadow .25s,border-color .25s;
  overflow:hidden;
}
.card::before{
  content:'';position:absolute;inset:auto -30px -40px auto;
  width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,#e8e2c7,transparent 70%);
  opacity:.7;pointer-events:none;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px #233d3422;
  border-color:#b57944;
}
.card .num{
  position:absolute;top:14px;right:48px;
  font:10px Georgia,serif;
  letter-spacing:.12em;color:var(--muted);
  z-index:1;
}
.card .num-inline{font:10px Georgia,serif;letter-spacing:.08em;color:var(--muted);margin-right:2px}
.card .title{
  font:24px/1.2 var(--serif);
  letter-spacing:.12em;
  margin:8px 0 4px;
}
.card .meta{
  font-size:11px;letter-spacing:.1em;color:var(--muted);
}
.card .note{
  margin-top:10px;
  font-size:12px;line-height:1.6;color:#516258;
  letter-spacing:.02em;
}
.card .badge{
  position:absolute;top:14px;right:14px;
  font:10px Georgia,serif;color:var(--muted);
  display:flex;align-items:center;gap:5px;
}
.card .badge::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:#c9c1a5;
}
.card.is-read .badge::before{background:#3d6257;box-shadow:0 0 0 3px #3d625722}
.card.is-read{border-color:#3d625755}
.card.is-soon{opacity:.55}
.card.is-soon .title::after{
  content:'· 筹备中';
  font:11px 'PingFang SC',sans-serif;color:var(--accent);
  letter-spacing:.06em;margin-left:6px;
}

/* 空状态 */
.empty{
  grid-column:1/-1;
  text-align:center;
  padding:60px 20px;
  font-size:13px;color:var(--muted);letter-spacing:.1em;
}

/* 页脚 */
footer{
  max-width:1180px;margin:0 auto;padding:24px 32px 40px;
  font-size:11px;color:var(--muted);letter-spacing:.1em;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  border-top:1px solid var(--line);
}

/* 手机 */
@media(max-width:640px){
  .top{padding:32px 20px 16px;flex-direction:column;align-items:flex-start}
  .progress{align-items:flex-start}
  .intro,.filters,.grid,footer{padding-left:20px;padding-right:20px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .card{padding:14px;min-height:124px}
  .card .title{font-size:20px}
  .card .note{font-size:11px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* 两套风格独立保留；每次进入目录默认 2D。 */

.version-switch{display:flex;gap:4px;padding:5px;background:#e4e2d1;border:1px solid var(--line);border-radius:30px}
.version-switch button{border:0;background:transparent;padding:11px 20px;border-radius:25px;font:13px var(--serif);letter-spacing:.05em;color:var(--muted);cursor:pointer}
.version-switch button[aria-pressed=true]{background:#3d6257;color:#fff4db;box-shadow:0 2px 8px #294d4620}

.card{padding:0;overflow:hidden}
.card[hidden]{display:none}
.card-main{display:block;flex:1;padding:27px 18px 16px;border-radius:10px 10px 0 0;min-height:143px}
.card-versions{display:flex;align-items:center;gap:8px;padding:11px 18px 14px;border-top:1px solid var(--line);position:relative;z-index:1}
.version-link{font-size:11px;line-height:1.4;padding:6px 10px;border-radius:14px;color:var(--muted);white-space:nowrap}
.version-link.selected{background:#dfe7d7;color:#315e4d}
.version-link[href]:hover{background:#e6dfc8;color:var(--ink)}
.version-link.unavailable{color:#928d7c;font-size:10px;padding-right:0}
.version-pending .card-main{opacity:.55;cursor:default}
.version-pending:hover{transform:none;box-shadow:none;border-color:var(--line)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:640px){.version-switch button{font-size:12px;padding:10px 14px}.card{padding:0}.card-main{padding:27px 13px 14px;min-height:146px}.card-versions{padding:10px 9px 12px;gap:1px}.version-link{font-size:10px;padding:6px 8px}}

/* 分组居左、版本居右；窄屏仅分组选项横向滚动。 */
.filters{flex-wrap:nowrap;justify-content:space-between;gap:20px}
.group-controls{display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;padding:5px 2px;scrollbar-width:thin}
.group-controls>*{flex-shrink:0;white-space:nowrap}
.version-switch{flex-shrink:0;margin-left:auto;padding:3px;gap:2px}
.version-switch button{padding:8px 16px;font:12px 'PingFang SC',sans-serif}
@media(max-width:640px){.filters{gap:10px}.version-switch button{padding:8px 12px}.group-controls{gap:6px}}