/* 饭团子的小窝 · 内页共用样式 */
*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:#241a33; --sub:#6b5b7e; --soft:#9a8aad;
  --pink:#ff6fa5; --violet:#a855f7; --teal:#2fa8a0; --amber:#e8890c;
}
html{height:100%; -webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100%;
  padding:calc(22px + env(safe-area-inset-top)) 18px calc(34px + env(safe-area-inset-bottom));
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1000px 520px at 8% -10%, #ffe0ec 0%, rgba(255,224,236,0) 62%),
    radial-gradient(820px 480px at 96% 0%, #e2dbff 0%, rgba(226,219,255,0) 58%),
    radial-gradient(900px 560px at 50% 112%, #d9f0ff 0%, rgba(217,240,255,0) 62%),
    #fbf8fe;
  display:flex; justify-content:center; align-items:flex-start;
}
@media (min-width:760px){ body{align-items:center; padding-left:30px; padding-right:30px} }

.wrap{width:100%; max-width:620px}
@media (min-width:760px){ .wrap{max-width:660px} }

/* 顶栏 */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px}
.back{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-size:12.5px; font-weight:700; color:#6f5f85;
  background:rgba(255,255,255,.82); border:1px solid #eee2f7;
  padding:8px 14px; border-radius:999px;
  box-shadow:0 8px 18px -14px rgba(83,52,120,.55);
  transition:color .16s, border-color .16s, transform .16s;
}
.back:hover{color:#7c3aed; border-color:#e0cdf5}
.back:active{transform:translateY(1px)}
.crumb{font-size:11.5px; color:#a99bb8; letter-spacing:.02em}

/* 标题 */
header{text-align:center; padding:2px 2px 4px}
h1{
  margin:0 0 8px; font-size:26px; line-height:1.32; font-weight:800; letter-spacing:.01em;
  background:linear-gradient(96deg,#ff5f9e 0%,#a855f7 52%,#6366f1 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (min-width:760px){ h1{font-size:32px} }
.lead{margin:0 auto; max-width:30em; color:var(--sub); font-size:13.5px; line-height:1.75}

/* 按钮列表 */
.stack{display:grid; gap:12px; margin-top:22px}
.nav{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:13px;
  padding:16px 16px 16px 17px;
  text-decoration:none; color:inherit;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.96);
  border-radius:18px;
  box-shadow:0 16px 32px -22px rgba(83,52,120,.55), 0 1px 4px rgba(83,52,120,.05);
  transition:transform .18s cubic-bezier(.22,.9,.3,1), box-shadow .18s, border-color .18s;
  -webkit-tap-highlight-color:transparent;
  --accent:var(--pink); --tint1:#fff1f7; --tint2:#ffe3ee; --bd:#ffd2e1;
}
.nav::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), rgba(255,255,255,0) 92%);
  opacity:.85;
}
.nav:hover{transform:translateY(-2px); box-shadow:0 24px 38px -24px rgba(83,52,120,.55); border-color:#f3e9fb}
.nav:active{transform:translateY(0) scale(.995)}
.nav:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(139,92,246,.35)}

.nav .ico{
  flex:0 0 auto; width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center; color:var(--accent);
  background:linear-gradient(150deg, var(--tint1) 0%, var(--tint2) 100%);
  border:1px solid var(--bd);
}
.nav .ico svg{width:22px; height:22px; display:block}
.nav .txt{flex:1 1 auto; min-width:0}
.nav .t{display:block; font-size:15px; font-weight:800; line-height:1.4; color:#2d2043}
.nav .d{display:block; margin-top:3px; font-size:12.5px; line-height:1.5; color:var(--soft)}
.nav .arrow{flex:0 0 auto; color:var(--accent); display:inline-flex}
.nav .arrow svg{width:15px; height:15px; transition:transform .18s}
.nav:hover .arrow svg{transform:translateX(3px)}

.nav.violet{--accent:#a855f7; --tint1:#f8f1ff; --tint2:#efe2ff; --bd:#e4d2fb}
.nav.teal{--accent:#2fa8a0; --tint1:#effbf9; --tint2:#dff5f1; --bd:#c7ebe6}
.nav.amber{--accent:#e8890c; --tint1:#fff8ec; --tint2:#ffeed6; --bd:#fbe0b8}

/* 正文卡片 */
.doc{
  margin-top:22px; padding:22px 20px 20px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.96);
  border-radius:22px;
  box-shadow:0 20px 44px -30px rgba(83,52,120,.55), 0 1px 4px rgba(83,52,120,.05);
}
.doc p{margin:0 0 15px; font-size:14.5px; line-height:1.95; color:#3b2d52; letter-spacing:.005em}
.doc p:last-child{margin-bottom:0}
.doc h2{
  margin:22px 0 10px; font-size:15px; font-weight:800; color:#4a3763;
  display:flex; align-items:center; gap:8px;
}
.doc h2::before{content:""; width:4px; height:15px; border-radius:2px; background:linear-gradient(180deg,#ff6fa5,#a855f7)}
.doc ol,.doc ul{margin:0 0 15px; padding-left:21px; font-size:14.5px; line-height:1.9; color:#3b2d52}
.doc li{margin-bottom:5px}
.doc li::marker{color:#b18ad9; font-weight:700}
.doc ol.plain{list-style:none; padding-left:2px}
.doc ol.plain li{margin-bottom:8px}
.alert{
  margin:0 0 15px; padding:13px 15px; border-radius:14px;
  background:linear-gradient(135deg,#fff6fa 0%,#fff1f7 100%);
  border:1px solid #ffd9e6; border-left:4px solid #ff6fa5;
  color:#a83a6a; font-size:14px; font-weight:700; line-height:1.85;
}
.hint{margin:0; font-size:12.5px; color:#9a8aad; line-height:1.8}
.poster{
  display:block; width:100%; height:auto; margin:2px 0 20px;
  border-radius:18px; border:1px solid #f1e7f7; background:#fff;
  box-shadow:0 22px 44px -28px rgba(83,52,120,.6);
}

/* 空状态 */
.empty{
  margin-top:24px; padding:28px 20px; text-align:center;
  background:rgba(255,255,255,.94); border:1px solid #f1e7f7; border-radius:22px;
  box-shadow:0 20px 44px -32px rgba(83,52,120,.5);
}
.empty .em{font-size:30px; line-height:1}
.empty .et{margin-top:10px; font-size:16px; font-weight:800; color:#3d2b55}
.empty .ed{margin-top:7px; font-size:13px; line-height:1.8; color:var(--sub)}

footer{margin-top:22px; text-align:center; font-size:11.5px; color:#a294b3; line-height:1.8}