/* ============================================================
   sidebar.css - 侧边栏视觉打磨（全站共享）
   原则：保留粗野主义骨架（黑 + 荧光绿 + 硬阴影），只做细节精致化。
   ============================================================ */

/* 1. 导航项激活态（原缺失）：荧光绿底黑字，呼应品牌主色 */
.lb-sidebar nav a.active {
  background: var(--lb-accent);
  color: var(--lb-ink);
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--lb-ink);
}
.lb-sidebar nav a.active .lb-icon { color: var(--lb-ink); }
/* 激活态下角标：加白描边，在荧光绿底上仍清晰可辨（保持 HOT 红 / NEW 绿） */
.lb-sidebar nav a.active .lb-new {
  box-shadow: 2px 2px 0 var(--lb-ink), 0 0 0 2px #fff;
}

/* 2. hover 反馈：浅绿悬浮层（与激活态同色系，hover 浅、active 深） */
.lb-sidebar nav a {
  transition: background .15s, color .15s, transform .12s, box-shadow .15s;
}
.lb-sidebar nav a:hover {
  background: rgba(224,251,113,.38);
  color: var(--lb-ink);
  transform: translateX(2px);
}
.lb-sidebar nav a:active {
  transform: translateX(1px);
}

/* 3. 图标与文字间距、对齐节奏微调 */
.lb-sidebar nav a .lb-icon { opacity: .9; }
.lb-sidebar nav a.active .lb-icon { opacity: 1; }

/* 4. 底部操作区视觉层次 */
/* 底部整体节奏：统一 8px 间距 */
.lb-sidebar .lb-sidebar-foot { gap: 8px; }
/* 充值 + 账户：两列半宽，降低堆叠高度 */
.lb-sidebar .lb-foot-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.lb-sidebar .lb-foot-row .lb-btn { width: 100%; min-width: 0; }
/* 长文本（如 账户（admin））防溢出：省略号 + 提示 */
.lb-sidebar .lb-foot-row .lb-btn .lb-txt {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 底部次级按钮：更矮更紧凑，与主按钮形成层次 */
.lb-sidebar .lb-sidebar-foot .lb-btn-s { padding: 9px 10px; font-size: 12.5px; }
/* 积分卡：荧光绿底 + 黑描边 + 硬阴影，突出资产信息 */
.lb-sidebar #sbCreditText {
  background: var(--lb-accent);
  color: var(--lb-ink);
  font-weight: 700;
  border: 2px solid var(--lb-ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--lb-ink);
  padding: 5px 10px;
}
/* 次级按钮（充值/账户/进入工作室）：hover 绿色浅底 + 硬阴影浮现 */
.lb-sidebar .lb-sidebar-foot .lb-btn-s {
  border-width: 1.5px;
  border-color: var(--lb-ink);
  font-weight: 600;
  transition: background .15s, color .15s, box-shadow .15s, transform .12s;
}
.lb-sidebar .lb-sidebar-foot .lb-btn-s:hover {
  background: rgba(224,251,113,.45);
  color: var(--lb-ink);
  box-shadow: 2px 2px 0 var(--lb-ink);
  transform: translate(-1px, -1px);
}
.lb-sidebar .lb-sidebar-foot .lb-btn-s:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}
/* 主按钮「开始创作」层次强化：硬阴影 + hover 上浮 */
.lb-sidebar .lb-sidebar-foot .lb-btn-p {
  box-shadow: 3px 3px 0 var(--lb-ink);
  transition: transform .12s, box-shadow .12s, background .15s;
}
.lb-sidebar .lb-sidebar-foot .lb-btn-p:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--lb-ink);
}
.lb-sidebar .lb-sidebar-foot .lb-btn-p:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--lb-ink);
}
/* 收起导航：弱化为无边框幽灵按钮，hover 才显边 */
.lb-sidebar .lb-sidebar-foot #collapseBtn {
  border: 1px solid transparent;
  background: transparent;
  font-size: 12px;
  opacity: .65;
  transition: opacity .15s, border-color .15s, background .15s;
}
.lb-sidebar .lb-sidebar-foot #collapseBtn:hover {
  opacity: 1;
  border-color: var(--lb-border);
  background: #fff;
}

/* 5. logo 区微调：与导航更有层次 + 图标文字垂直居中 + 整体水平居中 */
.lb-sidebar .lb-logo {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--lb-border);
  margin-bottom: 16px;
  justify-content: center;
}
.lb-sidebar .lb-logo img {
  flex-shrink: 0;
  vertical-align: middle;
  display: inline-block;
}

/* 6. 分类角标：HOT 红底白字 / NEW 黑底白字 / Beta 黑描边白底，均带粗野黑阴影 */
.lb-sidebar nav a .lb-new {
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--lb-ink);
}
.lb-sidebar nav a .lb-tag-hot { background: #ff4d4f; color: #fff; }
.lb-sidebar nav a .lb-tag-new { background: var(--lb-ink); color: #fff; }
.lb-sidebar nav a .lb-tag-beta { background: #fff; color: var(--lb-ink); border: 1.5px solid var(--lb-ink); }

/* ============================================================
   7. 容器外观对齐 admin 后端：米色浮层卡 + 黑粗边框 + 硬阴影
   （仅改容器，保留前端菜单项荧光绿选中态 .active）
   ============================================================ */
.lb-sidebar {
  margin: 12px 4px 12px 12px;   /* 四周留白，形成浮层卡（对齐 admin） */
  top: 0;                        /* 定位偏移归零，间距全由 margin 提供（避免与 top:12 叠加成 24） */
  bottom: 0;
  border: 2px solid var(--lb-ink);       /* 全黑粗边框，替换原仅右侧浅线 */
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--lb-ink);   /* 粗野黑硬阴影 */
}
/* 内容区左内边距补偿：原 240 宽 + 左 12 + 右 4 + 硬阴影外扩 6 + 余量 6 */
.lb-body { padding-left: calc(var(--lb-sidebar-w) + 28px); }
/* 折叠态补偿：原 64 宽 + 28 */
.lb-body.sb-collapsed { padding-left: calc(64px + 28px); }
/* 折叠态卡片同样保留浮层外观 */
.lb-sidebar.sb-collapsed { top: 0; bottom: 0; }

/* ============================================================
   8. 顶栏对齐浮层卡设计语言（仅限带 .lb-sidebar 的页面，admin 不受影响）
   顶栏与侧栏同顶对齐（y=12）、白底 + 2px 黑边框 + 圆角 + 硬阴影，
   右侧 12px 留白——消除「顶栏半通栏 vs 侧栏浮层卡」的 L 形断层。
   ============================================================ */
body:has(.lb-sidebar) .topbar {
  top: 12px;                    /* sticky 时与侧栏顶对齐 */
  margin: 12px 12px 0 0;        /* 上 12 与侧栏同高起步，右 12 统一留白 */
  background: #fff;
  border: 2px solid var(--lb-ink, #0a0a0a);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--lb-ink, #0a0a0a);
  padding: 9px 16px;
}

/* 顶部 12px 缝隙遮挡条：顶栏/侧栏均 sticky 在 y=12，滚动内容会从 0-12px 穿出，
   用与页面同底色的固定条盖住（层级低于侧栏卡片、不挡任何交互）。 */
body:has(.lb-sidebar)::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 12px;
  background: var(--lb-bg-main, #f6f6f3);
  z-index: 45;                  /* 高于内容，低于侧栏(z-50) */
  pointer-events: none;
}