/* :root 变量定义已上收到 css/base.css */
*{box-sizing:border-box}
body{margin:0;background: var(--bg);color: var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;line-height:1.7}
.wrap{max-width:920px;margin:0 auto;padding:28px 20px 60px}
.hero{background: var(--card);border: 1px solid var(--line);border-radius:18px;padding:38px 34px 30px;margin:6px 0 22px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.hero h1{font-size:1.85em;margin:0 0 6px;font-weight:700;letter-spacing:.02em}
.hero .sub{color: var(--mut);font-size:14.5px}
.hero .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.hero .tags span{background: var(--paper-2);border-radius:99px;font-size:12.5px;color: var(--ink-2);padding:3px 13px}
.hero .tags b{color: var(--ink);font-weight:650}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.card{display:block;text-decoration:none!important;background: var(--card);border: 1px solid var(--line);border-radius:18px;padding:26px 26px 22px;transition:all .2s;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px -14px rgba(34,32,27,.25);border-color: var(--line)}
.card .ic{font-size:2em;line-height:1}
.card h2{margin:10px 0 6px;font-size:1.3em;font-weight:700}
.card p{margin:4px 0;color: var(--mut);font-size:13.5px}
.card .cnt{display:inline-block;margin-top:12px;background: var(--pri);color: var(--on-pri);border-radius:99px;padding:5px 16px;font-size:13px}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
@media(max-width:760px){.mini{grid-template-columns:1fr}}
.card.sm{display:block;text-decoration:none!important;background: var(--card);border: 1px solid var(--line);border-radius:14px;padding:16px 18px;transition:all .18s;color: var(--ink)}
.card.sm:hover{transform:translateY(-2px);border-color: var(--line);box-shadow:0 8px 20px -12px rgba(0,0,0,.18)}
.card.sm .ic{font-size:1.5em}
.card.sm h3{margin:6px 0 2px;font-size:1.02em}
.card.sm p{font-size:12.5px}
.foot{margin-top:34px;text-align:center;color: var(--mut);font-size:12.5px;border-top: 1px solid var(--line);padding-top:16px}
.topbar{position:fixed;top:10px;right:12px;z-index:60;display:flex;gap:8px;align-items:center}
.lgout{min-height:44px;padding:0 16px;border-radius:99px;border: 1px solid var(--line);background: var(--card);color: var(--pri);font-size:13.5px;font-family:inherit;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:transform .12s ease,border-color .15s ease}
.lgout:active{transform:scale(.97)}
.lgout:hover{border-color: var(--line)}


/* ===== FX 动画层（纯动画，不改任何配色/背景） ===== */
@keyframes fxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fxPop{0%{opacity:0;transform:translateY(12px) scale(.97)}60%{transform:translateY(-2px) scale(1.004)}100%{opacity:1;transform:none}}
section,header.hero,.card,.mode,.stat,.hotcard,.qbox,.listrow,.kd,details{animation:fxIn .5s cubic-bezier(.22,.85,.3,1) both}
section:nth-of-type(2),.card:nth-of-type(2),.mode:nth-of-type(2){animation-delay:.05s}
section:nth-of-type(3),.card:nth-of-type(3),.mode:nth-of-type(3){animation-delay:.1s}
section:nth-of-type(4){animation-delay:.15s}
.opt,.btn,.chip{transition:transform .12s ease,box-shadow .2s ease,background .15s ease,border-color .15s ease}
.opt:active,.btn:active{transform:scale(.975)}
.opt:hover{transform:translateY(-1px)}
.feed{animation:fxPop .42s cubic-bezier(.3,1.25,.45,1) both}
#fxbar{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:999;border-radius:0 3px 3px 0;
  background: linear-gradient(90deg,var(--pri-line),var(--pri));box-shadow:0 0 10px rgba(51,85,110,.3);transition:width .08s linear}
/* 漂浮效果：知识站目录导航吸顶 + 卡片悬浮 */
nav.top{position:sticky;top:8px;z-index:30;box-shadow:0 6px 22px -12px rgba(28,39,51,.28)}
.card:hover,section:hover,.mode:hover,.listrow:hover,.hotcard:hover,.qbox:hover{transform:translateY(-2px);box-shadow:0 12px 28px -16px rgba(28,39,51,.3)}


html.fx .reveal{opacity:0;transform:translateY(14px)}
html.fx .reveal.on{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.3,1)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html.fx .reveal{opacity:1;transform:none}}