/* ============================================================
   校园论坛 2.0.0 · 前台外壳（左侧栏 / 底部液态玻璃导航 / 过渡动画）
   仅在 header.php / footer.php 中引入，覆盖式补充 style.css，不改旧规则主体
   ============================================================ */

/* ---------- 通用：页面容器 ---------- */
.app-main{min-height:100vh;display:flex;flex-direction:column}
.app-main>.wrap{flex:1 0 auto;width:100%}

/* ---------- 桌面左侧导航（≥761px） ---------- */
.app-side{display:none}
@media(min-width:761px){
  .app-side{
    position:fixed;left:0;top:0;bottom:0;width:238px;z-index:45;
    display:flex;flex-direction:column;
    background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.9));
    backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
    border-right:1px solid var(--border);
    padding:20px 14px 14px;
  }
  .app-side .side-brand{display:flex;align-items:center;gap:10px;padding:2px 8px 18px;border-bottom:1px solid var(--border);margin-bottom:10px}
  .app-side .side-brand img{width:34px;height:34px;border-radius:10px;box-shadow:0 2px 8px rgba(37,99,235,.25)}
  .app-side .side-brand b{display:block;font-size:15px;font-weight:800;letter-spacing:-.2px;line-height:1.25}
  .app-side .side-brand span{display:block;font-size:11px;color:var(--muted);margin-top:1px}
  .app-side nav{display:flex;flex-direction:column;gap:2px}
  .app-side .side-group{font-size:11px;color:#A8B3C4;letter-spacing:1.4px;font-weight:600;padding:12px 10px 5px}
  .app-side nav a,.app-side nav button.side-item{
    display:flex;align-items:center;gap:10px;width:100%;
    padding:10px 12px;border-radius:11px;border:0;background:transparent;
    font:inherit;font-size:14px;color:#4B5563;text-align:left;cursor:pointer;transition:all .16s;
  }
  .app-side nav a .svg-ico,.app-side nav button.side-item .svg-ico{color:#94A3B8;transition:color .16s}
  .app-side nav a:hover,.app-side nav button.side-item:hover{background:var(--bg);color:var(--text)}
  .app-side nav a.on{background:var(--primary-soft);color:var(--primary);font-weight:600}
  .app-side nav a.on .svg-ico{color:var(--primary)}
  .app-side .side-badge{margin-left:auto;min-width:18px;height:18px;border-radius:999px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 5px}
  .app-side .side-sub{margin:2px 0 2px 18px;padding-left:8px;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:1px}
  .app-side .side-sub a{padding:7px 10px;font-size:13px;border-radius:8px;color:#5B6472}
  .app-side .side-sub a.on{background:var(--primary-soft);color:var(--primary);font-weight:600}
  .app-side .side-sub.collapsed{display:none}
  .app-side .side-more{font-size:12px;color:var(--primary);padding:7px 10px;border:0;background:transparent;text-align:left;cursor:pointer;font-family:inherit}
  .app-side .side-foot{margin-top:auto;padding:12px 10px 0;border-top:1px solid var(--border);font-size:11px;color:var(--muted)}
  .app-main{margin-left:238px}
  .app-main>.top .logo{display:none}          /* 桌面用侧边栏品牌，顶栏只留登录区 */
  .app-main>.top .top-in{justify-content:flex-end}
  .app-main>.top .nav{display:none}           /* 旧顶栏导航隐藏，改由侧边栏承担 */
}

/* ---------- 底部液态玻璃导航（≤760px） ---------- */
@media(max-width:760px){
  .app-side{display:none}
  .app-main{margin-left:0}
  /* 5 项导航：主页 / 版块 / 发帖 / 消息 / 我的 */
  .nav{justify-content:space-around;gap:2px;padding:6px 8px}
  .nav .nav-drop{position:static} /* 让子面板以整条固定导航为定位基准，避免只对齐窄按钮 */
  .nav .nav-item{position:relative;flex:1;min-width:0}
  .nav .nav-item>a,.nav .nav-item>button.nav-link{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    width:100%;min-height:52px;padding:7px 2px;border:0;border-radius:20px;background:transparent;
    font:inherit;font-size:11px;line-height:1.2;color:#4B5563;cursor:pointer;transition:color .16s;
  }
  .nav .nav-item>a .svg-ico,.nav .nav-item>button.nav-link .svg-ico{width:19px;height:19px;color:#9AA4B5;transition:color .16s}
  .nav .nav-item>a.on,.nav .nav-item>button.nav-link.on{color:var(--primary);font-weight:600}
  .nav .nav-item>a.on .svg-ico,.nav .nav-item>button.nav-link.on .svg-ico{color:var(--primary)}
  /* 底部导航的液态滑动指示块：由 shell.js 写入位置与宽度 */
  .tab-ind{
    position:absolute;left:0;top:6px;height:calc(100% - 12px);border-radius:20px;
    background:rgba(37,99,235,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 8px rgba(37,99,235,.08);
    transition:transform .34s cubic-bezier(.22,1,.36,1),width .34s cubic-bezier(.22,1,.36,1);
    pointer-events:none;z-index:0;
  }
  .tab-ind.idle{opacity:0}
  /* 点击流动光斑：点按导航项时从触点扩散一层液态高光 */
  .nav-ripple{position:absolute;border-radius:50%;background:rgba(37,99,235,.22);transform:translate(-50%,-50%) scale(0);animation:navRipple .5s ease-out forwards;pointer-events:none;z-index:0}
  @keyframes navRipple{60%{transform:translate(-50%,-50%) scale(1);opacity:.55}100%{transform:translate(-50%,-50%) scale(1.35);opacity:0}}
  .nav .nav-item>a,.nav .nav-item>button.nav-link{position:relative;z-index:1}
  /* 中间发帖按钮：圆形凸起，仍位于导航条内 */
  .nav-post-wrap{flex:0 0 62px;display:flex;align-items:center;justify-content:center}
  .nav-post{
    width:50px;height:50px;border-radius:50%;border:0;margin-top:-18px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--primary),#60A5FA);color:#fff;cursor:pointer;
    box-shadow:0 8px 20px rgba(37,99,235,.42),inset 0 1px 0 rgba(255,255,255,.4);
    transition:transform .18s ease,box-shadow .18s ease;
  }
  .nav-post:hover{transform:translateY(-2px) scale(1.04)}
  .nav-post:active{transform:scale(.94)}
  .nav-post:disabled{opacity:.55;cursor:not-allowed}
  .nav-post .svg-ico{width:24px;height:24px}
  /* 液态面板：主页 / 版块共用，定位基准为固定导航条 */
  .nav .nav-drop-panel{border-radius:20px;padding:8px}
  .nav .nav-drop-panel a,.nav .nav-drop-panel button.pop-link{
    display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:10px 14px;
    border:0;border-radius:12px;background:transparent;font:inherit;font-size:14px;
    color:#4B5563;text-align:left;cursor:pointer;
  }
  .nav .nav-drop-panel a:hover,.nav .nav-drop-panel button.pop-link:hover{background:var(--primary-soft);color:var(--primary)}
  .nav .nav-drop-panel a.on,.nav .nav-drop-panel button.pop-link.on{background:var(--primary-soft);color:var(--primary);font-weight:600}
  .nav .nav-drop-panel .pop-more{border-top:1px solid var(--border);margin-top:4px;padding-top:4px;color:var(--primary);font-weight:600}
  .nav .nav-drop-panel .pop-extra{display:none}
  .nav .nav-drop-panel.more-open .pop-extra{display:flex}
  .nav .nav-drop-panel.more-open .pop-more{display:none}
  /* 站内页面切换：导航条固定最高层级，内容单独滑动 */
  body.page-out-left>.app-main>.wrap{animation:pageOutLeft .16s ease forwards}
  body.page-out-right>.app-main>.wrap{animation:pageOutRight .16s ease forwards}
  html.page-in-left .app-main>.wrap{animation:pageInLeft .24s cubic-bezier(.22,1,.36,1) both}
  html.page-in-right .app-main>.wrap{animation:pageInRight .24s cubic-bezier(.22,1,.36,1) both}
}

@keyframes pageOutLeft{to{opacity:.25;transform:translateX(-26px)}}
@keyframes pageOutRight{to{opacity:.25;transform:translateX(26px)}}
@keyframes pageInLeft{from{opacity:.2;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes pageInRight{from{opacity:.2;transform:translateX(30px)}to{opacity:1;transform:none}}

/* ---------- 2.0 加载动画：logo + 状态文字 + 水波扩散 ---------- */
.app-loader{
  background:radial-gradient(circle at 50% 42%,#FFFFFF 0%,var(--bg) 58%,#F3EEE6 100%);
  gap:0;
}
.app-loader .ld-logo{width:64px;height:64px;border-radius:18px;position:relative;z-index:2;box-shadow:0 10px 30px rgba(37,99,235,.22);animation:ldpop .45s cubic-bezier(.22,1,.36,1) both}
.app-loader .ld-t{margin-top:16px;font-size:13.5px;color:#6B7484;letter-spacing:.6px;position:relative;z-index:2;transition:color .2s}
.app-loader .ld-t b{font-weight:700;color:var(--text)}
.app-loader .ld-rings{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);z-index:1;pointer-events:none}
.app-loader .ld-rings i{
  position:absolute;inset:0;border-radius:22px;
  border:2px solid rgba(37,99,235,.35);opacity:0;
}
.app-loader.ld-done .ld-rings i{animation:ldripple .5s ease-out forwards}
.app-loader.ld-done .ld-rings i:nth-child(2){animation-delay:.5s}
.app-loader.ld-done .ld-rings i:nth-child(3){animation-delay:1s;animation-duration:.28s}
.app-loader.ld-out{opacity:0;pointer-events:none;transition:opacity .22s ease}
html.no-loader #appLoader{display:none!important}
.home-hero .home-logo{display:none}
@keyframes ldripple{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
@keyframes ldpop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

/* ---------- 手机端首页：大 logo / 滚动后白底栏（清单第 9 项） ---------- */
@media(max-width:760px){
  /* 发帖已聚合到底部导航中部，隐藏右下角悬浮按钮 */
  .fab{display:none!important}
  .home-hero{padding-top:6px}
  .home-hero .home-logo{width:76px;height:76px;border-radius:22px;display:block;margin:0 auto 14px;box-shadow:0 10px 30px rgba(37,99,235,.22)}
  body.is-home:not(.home-scrolled) .app-main>.top{
    background:transparent;border-bottom-color:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
  }
  .app-main>.top .logo{transition:opacity .22s ease,transform .22s ease}
  body.is-home:not(.home-scrolled) .app-main>.top .logo{opacity:0;transform:translateY(-7px);pointer-events:none}
  body.is-home.home-scrolled .app-main>.top{
    background:rgba(255,255,255,.94);border-bottom-color:var(--border);
    box-shadow:0 4px 18px rgba(15,40,90,.06);
  }
}

/* ---------- 对比度修复（清单第 11 项） ---------- */
.rank-switch a.on,
.rank-switch a.on:hover,
.rank-switch a.on:focus-visible{background:var(--primary);color:#fff;font-weight:600}
.pc-act:disabled,.pc-act[disabled]{color:#8B95A6;opacity:1;cursor:not-allowed}
.pc-act:disabled .svg-ico,.pc-act[disabled] .svg-ico{color:#8B95A6}
.pc-act:disabled b,.pc-act[disabled] b{color:#8B95A6}

/* ---------- 尊重「减少动态效果」 ---------- */
@media(prefers-reduced-motion:reduce){
  .tab-ind{transition:none}
  .app-loader .ld-rings i{animation:none!important}
  .app-loader .ld-logo{animation:none}
  html.page-in-left .app-main>.wrap,
  html.page-in-right .app-main>.wrap,
  body.page-out-left>.app-main>.wrap,
  body.page-out-right>.app-main>.wrap{animation:none}
}

/* ============================================================
   v2.9.0 液态玻璃主题（与 App 视觉对齐）
   - 全局半透明玻璃容器 + 背景光斑，增强通透感
   - 桌面端保留侧边栏、不显示底部导航，版心收窄为类手机单列宽度
   ============================================================ */
:root{
  --glass-1:rgba(255,255,255,.56);
  --glass-2:rgba(255,255,255,.76);
  --glass-border:rgba(255,255,255,.7);
  --glass-shadow:0 20px 50px rgba(31,64,120,.14),0 2px 10px rgba(31,64,120,.06);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.92);
  --glass-blur:26px;
  --app-width:980px;
}
html{background:#F1ECE4}
body{
  background:
    radial-gradient(1000px 560px at 8% -10%,rgba(96,165,250,.34),transparent 60%),
    radial-gradient(820px 520px at 96% 2%,rgba(255,138,178,.22),transparent 60%),
    radial-gradient(900px 620px at 50% 112%,rgba(124,107,255,.18),transparent 62%),
    linear-gradient(180deg,#FCF9F4 0%,#F4F0E8 46%,#EDE7DD 100%);
  background-attachment:fixed;
}
/* 玻璃容器：卡片 / 表单 / 弹窗 / 下拉面板 */
.card,.side-card,.form,.modal,.bell-panel,.pop-box,.appl-item,.ticket-item,.notice-item{
  background:var(--glass-1);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow),var(--glass-inset);
  backdrop-filter:blur(var(--glass-blur)) saturate(185%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(185%);
}
.bell-panel{background:var(--glass-2)}
.top{background:rgba(255,255,255,.5);border-bottom:1px solid var(--glass-border);box-shadow:0 8px 30px rgba(31,64,120,.06)}
.inp{background:rgba(255,255,255,.66);border-color:rgba(120,140,170,.22)}
.inp:focus{background:rgba(255,255,255,.92);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.btn.ghost{background:rgba(255,255,255,.6);border-color:var(--glass-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.chip{background:rgba(255,255,255,.6);border-color:var(--glass-border)}
.icon-btn{background:rgba(255,255,255,.6);border-color:var(--glass-border)}
.post-item:hover,.hot-item:hover{background:rgba(37,99,235,.06)}
.modal-mask{background:rgba(15,23,42,.34);backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%)}
.footer-dark{background:rgba(15,23,42,.74);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border-top:1px solid rgba(255,255,255,.08)}

/* 桌面端：玻璃侧栏 + 收窄版心（更接近手机单列观感，且不出现底部导航） */
@media(min-width:761px){
  .top{backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%)}
  .app-side{
    background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.44));
    backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);
    border-right:1px solid var(--glass-border);
    box-shadow:10px 0 34px rgba(31,64,120,.06);
  }
  .wrap,.layout{max-width:var(--app-width)}
  .layout{gap:20px}
}
/* 手机端：顶栏保持无 filter（避免影响底部固定导航的定位基准），导航胶囊再增强通透 */
@media(max-width:760px){
  .top{background:rgba(255,255,255,.72)}
  .nav{
    background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.52));
    border:1px solid rgba(255,255,255,.9);
    backdrop-filter:blur(30px) saturate(200%);
    -webkit-backdrop-filter:blur(30px) saturate(200%);
    box-shadow:0 14px 44px rgba(15,23,42,.2),inset 0 1px 0 rgba(255,255,255,.96);
  }
  .nav-drop-panel{background:rgba(255,255,255,.88)}
}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .card,.side-card,.form,.modal,.bell-panel,.pop-box,.appl-item{background:rgba(255,255,255,.96)}
  .app-side{background:rgba(255,255,255,.97)}
  .nav{background:rgba(255,255,255,.98)}
}