/* ATLCNND v2 — 共享样式 (简洁 / 玻璃拟态 / 天空背景) */
:root{
  --bg:#eef5fb;
  --ink:#223041;
  --muted:#5d6b7d;
  --green:#2e8b57;
  --green-soft:rgba(46,139,87,.12);
  --gold:#c9a84c;
  --card:rgba(255,255,255,.68);
  --card-border:rgba(255,255,255,.65);
  --glass-blur:14px;
  --shadow:0 12px 32px rgba(40,70,110,.12);
  --radius:16px;
  color-scheme:light;
  /* 主题化表面色 */
  --scrim:rgba(255,255,255,.08);
  --sky-scrim-top:rgba(255,255,255,.3);
  --sky-scrim-bottom:rgba(255,255,255,.5);
  --nav-bg:rgba(255,255,255,.55);
  --nav-border:rgba(255,255,255,.6);
  --hover-bg:rgba(255,255,255,.55);
  --btn-ghost-bg:rgba(255,255,255,.6);
  --btn-ghost-border:rgba(34,48,65,.15);
  --btn-line-border:rgba(34,48,65,.2);
  --btn-like-bg:rgba(255,255,255,.55);
  --btn-like-border:rgba(34,48,65,.14);
  --chip-bg:rgba(255,255,255,.6);
  --chip-border:rgba(255,255,255,.8);
  --splash-bg-top:rgba(255,255,255,.14);
  --splash-bg-bottom:rgba(255,255,255,.3);
  --splash-panel:rgba(255,255,255,.58);
  --splash-panel-border:rgba(255,255,255,.78);
  --splash-shadow:0 26px 70px rgba(20,45,75,.16);
  --hint-color:rgba(34,48,65,.55);
  --hint-chev:rgba(34,48,65,.5);
  --footer-border:rgba(255,255,255,.55);
  --doc-border:rgba(0,0,0,.1);
  --doc-hr:rgba(0,0,0,.08);
  /* 代码块：始终深底浅字，与主题反转变量解耦 */
  --code-bg:#0f1b28;
  --code-ink:#e6edf5;
  --code-inline:rgba(46,139,87,.14);
}
[data-theme="dark"]{
  --bg:#0e1620;
  --ink:#e7edf4;
  --muted:#9fb0c3;
  --green:#3aa56a;
  --green-soft:rgba(58,165,106,.16);
  --card:rgba(20,28,40,.6);
  --card-border:rgba(255,255,255,.09);
  --shadow:0 12px 32px rgba(0,0,0,.35);
  color-scheme:dark;
  --scrim:rgba(0,0,0,.22);
  --sky-scrim-top:rgba(10,16,26,.5);
  --sky-scrim-bottom:rgba(10,16,26,.72);
  --nav-bg:rgba(14,22,32,.62);
  --nav-border:rgba(255,255,255,.09);
  --hover-bg:rgba(255,255,255,.07);
  --btn-ghost-bg:rgba(255,255,255,.06);
  --btn-ghost-border:rgba(255,255,255,.16);
  --btn-line-border:rgba(255,255,255,.22);
  --btn-like-bg:rgba(255,255,255,.06);
  --btn-like-border:rgba(255,255,255,.14);
  --chip-bg:rgba(255,255,255,.07);
  --chip-border:rgba(255,255,255,.12);
  --splash-bg-top:rgba(10,16,26,.25);
  --splash-bg-bottom:rgba(10,16,26,.45);
  --splash-panel:rgba(18,26,38,.66);
  --splash-panel-border:rgba(255,255,255,.14);
  --splash-shadow:0 26px 70px rgba(0,0,0,.5);
  --hint-color:rgba(231,237,244,.6);
  --hint-chev:rgba(231,237,244,.55);
  --footer-border:rgba(255,255,255,.1);
  --doc-border:rgba(255,255,255,.12);
  --doc-hr:rgba(255,255,255,.1);
  --code-bg:#0b1522;
  --code-ink:#e6edf5;
  --code-inline:rgba(58,165,106,.2);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:var(--bg);
  min-height:100vh;
  line-height:1.75;
  transition:background-color .3s ease,color .3s ease;
}
/* 全局背景：天空图铺满，带半透明雾化遮罩，整个站点共享 */
.bg{
  position:fixed;inset:0;z-index:-2;
  background-image:url('hero-1600.jpg');
  background-size:cover;background-position:center;
}
.bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,var(--sky-scrim-top) 0%,var(--sky-scrim-bottom) 100%);
  transition:background .3s ease;
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--scrim);
  transition:background .3s ease;
}

/* ---------- 顶部导航 ---------- */
nav{
  position:sticky;top:0;z-index:100;
  background:var(--nav-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border-bottom:1px solid var(--nav-border);
  transition:background-color .3s ease,border-color .3s ease;
}
nav .w{
  max-width:1080px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;padding:14px 22px;
}
.logo{font-size:1.12rem;font-weight:800;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.nl{display:flex;list-style:none;gap:4px}
.nl a{
  color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:600;
  padding:8px 14px;border-radius:999px;transition:.2s;
}
.nl a:hover{color:var(--ink);background:var(--hover-bg)}
.nl a.act{color:#fff;background:var(--green);box-shadow:0 6px 16px rgba(46,139,87,.3)}
.nav-right{display:flex;align-items:center;gap:10px}
.theme-toggle{background:none;border:1px solid var(--nav-border);cursor:pointer;font-size:1.05rem;padding:5px 9px;border-radius:9px;line-height:1;transition:.2s}
.theme-toggle:hover{background:var(--hover-bg)}
/* 滚动进度条 */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:300;background:linear-gradient(90deg,var(--green),#3aa56a)}
/* 返回顶部 */
.to-top{position:fixed;right:20px;bottom:22px;z-index:150;width:42px;height:42px;border-radius:50%;border:1px solid var(--card-border);background:var(--card);backdrop-filter:blur(8px);color:var(--ink);font-size:1.15rem;cursor:pointer;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--green);color:var(--green)}
/* 移动端菜单按钮 */
.burger{display:none;background:none;border:1px solid var(--nav-border);cursor:pointer;font-size:1.05rem;padding:5px 10px;border-radius:9px;line-height:1;color:var(--ink)}
/* 仅首页（body.has-splash）：进入前隐藏整个首页内容，避免内容透出进入页遮罩 */
body.has-splash nav,
body.has-splash main,
body.has-splash footer{visibility:hidden}
body.has-splash main,
body.has-splash footer{opacity:0;transition:opacity .6s ease}
body.has-splash.entered main,
body.has-splash.entered footer{visibility:visible;opacity:1}

/* 进入后：导航栏从左侧横向滑入 */
body.has-splash.entered nav{visibility:visible;animation:navSlide .65s cubic-bezier(.2,.7,.3,1) .05s both}
@keyframes navSlide{from{transform:translateX(-100%);opacity:0}to{transform:none;opacity:1}}

/* ---------- 布局 ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
main{padding:40px 0 70px}
.page-title{
  font-size:1.8rem;font-weight:800;margin-bottom:6px;letter-spacing:-.02em;
}
.page-sub{color:var(--muted);margin-bottom:30px;font-size:.95rem}

/* ---------- 玻璃卡片 ---------- */
.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--shadow);
  padding:22px;margin-bottom:16px;
  transition:transform .2s,box-shadow .2s,background-color .3s,border-color .3s;
}
.card:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(40,70,110,.18)}
.card h3{font-size:1.1rem;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.card h3 .ic{font-size:1.35rem}
.card p{color:var(--muted);font-size:.9rem;margin-bottom:10px}
.tag{
  display:inline-block;font-size:.72rem;font-weight:600;color:var(--green);
  background:var(--green-soft);padding:3px 10px;border-radius:999px;margin:2px 4px 2px 0;
}
.row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.cards-actions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:10px;font-size:.85rem;font-weight:700;
  cursor:pointer;text-decoration:none;border:1.5px solid transparent;
  transition:.18s;
}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:#237a49;transform:translateY(-1px)}
.btn-ghost{background:var(--btn-ghost-bg);color:var(--ink);border-color:var(--btn-ghost-border)}
.btn-ghost:hover{background:var(--hover-bg);border-color:var(--btn-line-border)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--btn-line-border)}
.btn-line:hover{border-color:var(--green);color:var(--green)}
.btn-like{
  background:var(--btn-like-bg);color:var(--muted);
  border:1px solid var(--btn-like-border);padding:8px 14px;border-radius:999px;font-size:.8rem;
}
.btn-like:hover{border-color:var(--gold);color:#c0392b}
.btn-like.liked{color:#c0392b;border-color:#e74c3c;background:#fff}
.like-err{color:#c0392b;font-size:.72rem;margin-top:6px;font-weight:600}

/* ---------- 首页 hero ---------- */
.hero{
  display:flex;flex-direction:column;gap:26px;
}
.hero .kicker{color:var(--green);font-weight:800;letter-spacing:.12em;font-size:.8rem;text-transform:uppercase}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--green)}
.hero-tagline{font-size:clamp(1.25rem,3vw,1.6rem);color:var(--muted);font-weight:700;letter-spacing:.06em;margin-top:-14px}
.hero .lead{color:var(--muted);font-size:1.05rem;max-width:560px}


/* ---------- 首页服务器卡片 ---------- */
.server-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:8px}
/* 首页板块入口 & 最新文档 */
.home-section{margin-top:52px}
.home-row{display:grid;grid-template-columns:1fr 2.2fr;gap:28px;margin-top:52px;align-items:start}
.home-row .home-section{margin-top:0}
.section-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.section-card{flex-direction:column;align-items:center;text-align:center;gap:6px;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:14px 10px;box-shadow:var(--shadow);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));transition:transform .2s,box-shadow .2s,border-color .2s}
.section-card:hover{transform:translateY(-3px);border-color:rgba(46,139,87,.45);box-shadow:0 16px 40px rgba(40,70,110,.18)}
.section-card .ic{font-size:1.4rem}
.section-card .t{font-weight:800;font-size:.82rem}
@media (max-width:720px){.home-row{grid-template-columns:1fr}}
.latest-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.more-link{color:var(--green);font-size:.85rem;margin-left:8px;text-decoration:none}
.more-link:hover{text-decoration:underline}

/* ---------- 小工具页 ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:8px}
.tool-card{
  flex-direction:column;align-items:flex-start;text-align:left;gap:8px;
  text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
  padding:20px 18px;box-shadow:var(--shadow);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  transition:transform .2s,box-shadow .2s,border-color .2s;
  display:flex;
}
.tool-card:hover{transform:translateY(-4px);border-color:rgba(46,139,87,.5);box-shadow:0 18px 42px rgba(40,70,110,.2)}
.tool-card .ic{font-size:1.9rem;line-height:1}
.tool-card .t{font-weight:800;font-size:1.02rem}
.tool-card .d{color:var(--muted);font-size:.84rem;line-height:1.55;flex:1}
.tool-card .go{margin-top:6px;color:var(--green);font-size:.8rem;font-weight:800;letter-spacing:.04em}
.tool-card:hover .go{text-decoration:underline}
.server .pulse{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}
.server .pulse-on{background:var(--green);box-shadow:0 0 0 4px rgba(46,139,87,.15);animation:pulse 1.8s infinite}
.server .pulse-maint{background:#e67e22;box-shadow:0 0 0 4px rgba(230,126,34,.15);animation:pulse 2.6s infinite}
.server .pulse-off{background:#c0392b;box-shadow:0 0 0 4px rgba(192,57,43,.15)}
.server .status-label{font-size:.72rem;font-weight:700;margin-left:4px;padding:1px 8px;border-radius:999px}
.server .status-label.on{color:var(--green);background:var(--green-soft)}
.server .status-label.maint{color:#e67e22;background:rgba(230,126,34,.14)}
.server .status-label.off{color:#c0392b;background:rgba(192,57,43,.12)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- footer ---------- */
footer{margin-top:40px;padding:24px 0;text-align:center;color:var(--muted);font-size:.8rem;border-top:1px solid var(--footer-border)}
footer a{color:var(--muted);text-decoration:none;margin:0 6px}
footer a:hover{color:var(--green)}

/* 加载 & 空态 */
.loading{color:var(--muted);padding:30px;text-align:center}
.empty{color:var(--muted);padding:30px;text-align:center;font-weight:600}

/* =========================================================
   v2 动效 + 开始进入页
   ========================================================= */

/* ---------- 进入页：固定天空 + 白色磨砂玻璃，下滑/点击 = 整屏切换 ---------- */
/* 关键：进入页作为一整屏固定遮罩(fixed)盖在首页之上；天空由固定 .bg 提供、始终不动；
   下滑或点击触发 .splash.gone，整屏上滑离开、露出首页，导航栏从顶部滑落 */
.splash{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  background:linear-gradient(180deg,var(--splash-bg-top) 0%,var(--splash-bg-bottom) 100%);
  cursor:pointer;
  transition:transform .75s cubic-bezier(.2,.7,.3,1), visibility 0s linear .75s;
}
/* 切换后：整屏上滑离开并隐藏，不再拦截交互 */
.splash.gone{transform:translateY(-100%);visibility:hidden;pointer-events:none}
/* 白色磨砂玻璃面板：整屏居中，初始自下浮起 */
.splash-inner{
  position:relative;z-index:2;
  background:var(--splash-panel);
  backdrop-filter:blur(24px) saturate(1.25);
  -webkit-backdrop-filter:blur(24px) saturate(1.25);
  border:1px solid var(--splash-panel-border);
  border-radius:30px;
  box-shadow:var(--splash-shadow);
  padding:54px 60px;
  max-width:620px;width:min(88vw,620px);
  animation:riseIn 1.1s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes riseIn{from{transform:translateY(58px);opacity:.4}to{transform:none;opacity:1}}
.splash .mark{
  width:112px;height:112px;border-radius:50%;margin:0 auto 24px;
  display:block;object-fit:cover;
  border:3px solid var(--splash-panel-border);
  box-shadow:0 14px 34px rgba(31,107,69,.35);
  animation:float 3.4s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.splash h1{font-size:clamp(1.9rem,5.4vw,3rem);font-weight:800;color:var(--ink);letter-spacing:.05em}
.splash .sub{color:var(--muted);font-size:.92rem;margin-top:14px;letter-spacing:.4em;text-transform:uppercase;font-weight:600}
.splash .cta{margin-top:36px}
.splash .enter{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 40px;border-radius:999px;border:none;
  background:linear-gradient(135deg,var(--green),#237a49);color:#fff;
  font-weight:800;font-size:1.02rem;letter-spacing:.14em;
  cursor:pointer;transition:.25s;
  box-shadow:0 14px 34px rgba(46,139,87,.35);
}
.splash .enter:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(46,139,87,.45)}
.splash .hint{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;
  color:var(--hint-color);font-size:.78rem;letter-spacing:.2em;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  animation:bob 1.6s ease-in-out infinite;
}
.splash .hint .chev{width:22px;height:13px;position:relative}
.splash .hint .chev::before,.splash .hint .chev::after{
  content:'';position:absolute;top:0;left:50%;width:12px;height:2px;background:var(--hint-chev);border-radius:2px;
}
.splash .hint .chev::before{transform:translateX(-8px) rotate(45deg)}
.splash .hint .chev::after{transform:translateX(2px) rotate(-45deg)}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* ---------- 进场动画：逐层浮现 ---------- */
.fade-in{animation:fadeIn .8s cubic-bezier(.2,.7,.3,1) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fade-in.d1{animation-delay:.05s}
.fade-in.d2{animation-delay:.15s}
.fade-in.d3{animation-delay:.3s}
.fade-in.d4{animation-delay:.45s}
.fade-in.d5{animation-delay:.6s}

/* 首页 hero 进场：默认隐藏，待进入页滚动离开(body.entered)后再逐层浮现 */
.hero .fade-in,
.hero .kicker, /* 兜底：hero 内即便无 fade-in 类也不抢跑 */
.hero h1, .hero .lead{
  opacity:0;
  animation:none;
}
body.entered .hero .fade-in{animation:fadeIn .8s cubic-bezier(.2,.7,.3,1) both}
body.entered .hero .fade-in.d1{animation-delay:.05s}
body.entered .hero .fade-in.d2{animation-delay:.18s}
body.entered .hero .fade-in.d3{animation-delay:.33s}
body.entered .hero .fade-in.d4{animation-delay:.48s}
body.entered .hero .fade-in.d5{animation-delay:.63s}

/* ---------- 滚动显现 ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* 卡片更柔和地浮现 + 叠加悬浮动画 */
.card:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(40,70,110,.18)}
.card.hover-float:hover{animation:lift .4s ease}

/* 标题强调字符的轻微上移 */
.page-title em,.hero h1 em{display:inline-block;animation:textRise .7s ease both}
@keyframes textRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 文档 ---------- */
.doc-card{display:block;text-decoration:none;color:var(--ink)}
.doc-card h3{margin-bottom:6px}
.doc-card p{color:var(--muted);font-size:.92rem}
.doc-card .doc-meta{margin-top:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.8rem}
.doc-card:hover{border-color:rgba(46,139,87,.4)}

/* 文档详情页 + Markdown 排版 */
.doc{max-width:760px;margin:0 auto}
.doc-title{font-size:1.9rem;font-weight:800;letter-spacing:-.02em}
.doc-meta{color:var(--muted);font-size:.85rem;margin:10px 0 26px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.doc-body{font-size:1rem;line-height:1.85}
.doc-body h1,.doc-body h2,.doc-body h3,.doc-body h4{margin:1.4em 0 .5em;font-weight:800;line-height:1.4}
.doc-body h1{font-size:1.5rem}.doc-body h2{font-size:1.3rem}.doc-body h3{font-size:1.15rem}
.doc-body p{margin:.8em 0}
.doc-body ul,.doc-body ol{margin:.6em 0;padding-left:1.4em}
.doc-body li{margin:.25em 0}
.doc-body code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background:var(--code-inline);padding:.1em .35em;border-radius:5px;font-size:.9em}
.doc-body pre{background:var(--code-bg);color:var(--code-ink);padding:16px 18px;border-radius:12px;overflow:auto;margin:1em 0;border:1px solid rgba(255,255,255,.06)}
.doc-body pre code{background:none;padding:0;color:inherit}
.doc-body blockquote{margin:1em 0;padding:4px 16px;border-left:3px solid var(--green);background:rgba(46,139,87,.06);border-radius:0 8px 8px 0;color:var(--muted)}
.doc-body a{color:var(--green);text-decoration:none;border-bottom:1px solid rgba(46,139,87,.35)}
.doc-body a:hover{border-bottom-color:var(--green)}
.doc-body img{max-width:100%;border-radius:12px}
.doc-body hr{border:none;border-top:1px solid var(--doc-hr);margin:2em 0}
.doc-body table{border-collapse:collapse;width:100%;margin:1em 0}
.doc-body th,.doc-body td{border:1px solid var(--doc-border);padding:8px 12px;font-size:.9rem}
.doc-body th{background:rgba(46,139,87,.08)}

@media (max-width:640px){
  .splash .sub{letter-spacing:.28em}
  .splash .enter{padding:12px 26px}
}

@media (max-width:720px){
  .burger{display:inline-flex;align-items:center}
  .nav-right{position:relative}
  .nl{display:none;position:absolute;top:calc(100% + 10px);right:0;flex-direction:column;gap:2px;
      background:var(--card);border:1px solid var(--card-border);border-radius:14px;
      padding:8px;min-width:170px;box-shadow:var(--shadow)}
  .nl.open{display:flex}
  .nl a{display:block;width:100%;text-align:left;padding:9px 14px;border-radius:10px}
}

/* ---------- 左右侧功能组件 ---------- */
.side-tab{
  position:fixed;top:50%;z-index:150;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--card-border);background:var(--card);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--ink);cursor:pointer;font-size:1.1rem;
  box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;
}
.side-tab-left{left:8px}
.side-tab-right{right:8px}
.side-panel{
  position:fixed;top:50%;z-index:150;transform:translateY(-50%);
  width:min(300px,84vw);max-height:82vh;overflow:auto;
  background:var(--card);border:1px solid var(--card-border);border-radius:16px;
  padding:16px;box-shadow:var(--shadow);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.side-panel[hidden]{display:none}
/* 进入页（未 entered）时隐藏左右侧组件 */
body.has-splash:not(.entered) .side-panel{display:none}
.side-left{left:56px}
.side-right{right:56px}
.widget{margin-bottom:18px}
.widget:last-child{margin-bottom:0}
.widget h4{font-size:.92rem;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.avatar-link{display:block;width:min(236px,92%);height:auto;aspect-ratio:1;margin:0 auto 12px;line-height:0}
.avatar{width:100%;height:100%;border-radius:28px;object-fit:cover;border:2px solid var(--green);display:block;transition:transform .2s,box-shadow .2s}
.avatar-link:hover .avatar{transform:scale(1.03);box-shadow:0 10px 26px rgba(46,139,87,.35)}
.profile-card{text-align:center}
.profile-card .name{font-weight:800;font-size:1.05rem}
.profile-card .bio{color:var(--muted);font-size:.8rem;margin:4px 0 10px}
.gh-link{display:inline-block;color:var(--green);text-decoration:none;font-size:.85rem;font-weight:700;margin-bottom:10px}
.profile-stats{font-size:.78rem;color:var(--muted);line-height:1.7}
.search-input{width:100%;padding:8px 12px;border:1px solid var(--card-border);border-radius:10px;background:var(--bg);color:var(--ink);font-size:.85rem}
.search-results{margin-top:8px;max-height:200px;overflow:auto}
.search-item{display:block;text-decoration:none;padding:7px 10px;border-radius:8px;font-size:.82rem;color:var(--ink)}
.search-item:hover{background:var(--hover-bg)}
.search-item .k{color:var(--green);font-size:.72rem;font-weight:700}
.search-item .d{color:var(--muted);font-size:.74rem;display:block}
.music-select{width:100%;padding:7px 10px;border:1px solid var(--card-border);border-radius:9px;background:var(--bg);color:var(--ink);font-size:.82rem;margin-bottom:8px}
.music-player audio{width:100%;height:36px}
.motd-item{font-size:.8rem;padding:7px 0;border-bottom:1px solid var(--doc-hr)}
.motd-item:last-child{border-bottom:none}
.motd-item .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}
.dot-on{background:var(--green)}
.dot-off{background:#c0392b}
.calendar-box table{width:100%;border-collapse:collapse}
.calendar-box th,.calendar-box td{text-align:center;padding:4px;font-size:.78rem}
.calendar-box .today{background:var(--green);color:#fff;border-radius:6px}
.calendar-box .cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.calendar-box .cal-head button{background:none;border:1px solid var(--card-border);border-radius:6px;cursor:pointer;color:var(--ink);padding:2px 8px}
.stats-box{font-size:.8rem;color:var(--muted);line-height:1.7}
.motd-query{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.motd-query input{flex:1;min-width:70px;padding:7px 9px;border:1px solid var(--card-border);border-radius:8px;background:var(--bg);color:var(--ink);font-size:.8rem}
.motd-query button{padding:7px 12px;background:var(--green);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:700;font-size:.8rem}
.motd-result{font-size:.8rem;padding:6px 0}
.motd-card{background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow)}
.motd-head{display:flex;align-items:flex-start;gap:10px}
.motd-icon{width:56px;height:56px;border-radius:8px;image-rendering:pixelated;flex-shrink:0}
.motd-name{white-space:normal;word-break:break-word;line-height:1.5;font-weight:600;font-size:.82rem}
.motd-meta{margin-top:8px;color:var(--muted);font-size:.75rem;line-height:1.6}
.motd-online{margin-top:6px;color:var(--muted);font-size:.74rem;line-height:1.8}
.motd-err{color:#c0392b;font-size:.72rem;margin-top:4px}
/* 页面横向切换 */
.page-anim main,.page-anim footer{animation:pageIn .45s cubic-bezier(.2,.7,.3,1) both}
@keyframes pageIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
body.page-out main,body.page-out footer{animation:pageOut .18s ease both}
@keyframes pageOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-24px)}}
@media (max-width:1499px){
  .side-panel{display:none}
}

/* ---------- 相册 / 动态 / 下载 ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.album{margin-bottom:28px}
.album-title{font-size:1.05rem;font-weight:800;margin-bottom:4px}
.album-desc{color:var(--muted);font-size:.85rem;margin-bottom:12px}
.filter-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.filter-tabs button{padding:7px 16px;border:1px solid var(--card-border);background:var(--card);color:var(--muted);border-radius:999px;cursor:pointer;font-size:.85rem;font-weight:600;transition:.15s}
.filter-tabs button.act{background:var(--green);color:#fff;border-color:var(--green)}
.gallery-item{overflow:hidden;border-radius:var(--radius);background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow);margin:0}
.gallery-item img{width:100%;height:180px;object-fit:cover;display:block;cursor:zoom-in;transition:transform .3s}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item figcaption{padding:8px 12px;font-size:.82rem;color:var(--muted)}
.lightbox{position:fixed;inset:0;z-index:400;background:rgba(10,15,25,.85);display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.lightbox.show{display:flex}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:10px;box-shadow:0 20px 80px rgba(0,0,0,.5)}
.moments-list{display:flex;flex-direction:column;gap:12px}
.moment-item{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow);font-size:.92rem}
.moment-item .time{display:block;color:var(--muted);font-size:.76rem;margin-bottom:4px}
.moment-img{max-width:100%;border-radius:10px;margin-top:10px;display:block}
.friend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.friend-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.friend-card:hover{transform:translateY(-3px);border-color:rgba(46,139,87,.45)}
.friend-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--green-soft);color:var(--green);font-weight:800;font-size:1.1rem;overflow:hidden}
.friend-card .nm{font-weight:700;font-size:.92rem;display:block}
.friend-card .ds{color:var(--muted);font-size:.78rem;display:block}
