:root {
  --bg: #0A0E17; --card: rgba(16,20,36,0.10); --border: rgba(30,42,58,0.15);
  --cyan: #00E5FF; --cyan-dim: rgba(0,229,255,0.08);
  --pink: #e63976; --pink-dark: #c2185b; --text: #c8cdd8; --text-dim: #7a8299;
  --nav-h: 56px;
}
* { margin:0; padding:0; box-sizing: border-box; }
#particle-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
body {
  background: #0A0E17 url('images/bg.webp') no-repeat center center fixed !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  color: var(--text);
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; min-height: 100vh;
}

main.page-content { background-color: transparent; padding-top: calc(var(--nav-h, 56px) + 30px); }
nav:not(.sidebar-nav) {
  background: linear-gradient(135deg, rgba(10,14,23,0.85) 0%, rgba(18,26,48,0.70) 100%);
  border: 1px solid rgba(0,229,255,0.14);
  border-radius: 18px;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 1520px; z-index: 1000; padding: 0 22px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.nav-inner {
  max-width: 1480px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; height: 56px;
}
.nav-logo { font-size: 16px; font-weight: 800; color: var(--cyan); letter-spacing: 1px; text-decoration: none; }
.nav-logo-text { display: inline-block; animation: floatLogo 3.5s ease-in-out infinite; will-change: transform; }
.nav-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.nav-links a {
  color: var(--text-dim); text-decoration: none; font-size: 13px;
  padding: 6px 12px; border-radius: 6px; transition: all 0.25s;
}
/* 导航链接小图标（悬浮卡片导航） */
.nav-links a::before { margin-right: 5px; font-size: 12px; display: inline-block; vertical-align: -1px; }
.nav-links a[href="gta5.html"]::before { content: '🚗'; }
.nav-links a[href="rdr2.html"]::before { content: '🤠'; }
.nav-links a[href="fivem.html"]::before { content: '🎮'; }
.nav-links a[href="cs2.html"]::before { content: '🎯'; }
.nav-links a[href="other.html"]::before { content: '🗂️'; }
.nav-links a[href="settings.html"]::before { content: '⚙️'; }
.nav-links a[href="contact.html"]::before { content: '📞'; }
.nav-links a[href^="https://gta5abc.shop"]::before { content: '🛒'; }
.nav-links a:hover, .nav-links a.active { color: var(--cyan); background: var(--cyan-dim); }

.container { max-width: 1000px; margin: 0 auto; padding: 32px 20px 60px; position:relative; z-index:1; }

.page-header {
  text-align: center; margin-bottom: 32px;
}
.page-header h1 {
  font-size: 32px; font-weight: 900; color: var(--cyan);
  text-shadow:0 0 40px rgba(0,229,255,0.2); letter-spacing: 2px;
}
.page-header p { color: var(--text-dim); font-size: 14px; margin-top: 6px; }

/* ===== 页头独立卡片：面包屑 + 标题 + 副标题 装进一张卡（content-loader 运行时包裹） ===== */
.head-card{
  background:rgba(0,0,0,0.30);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:18px;
  padding:14px 20px 16px;
  margin:0 0 18px;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
}

/* ===== 内容卡片统一：黑色毛玻璃 30%（规则见文件末尾「右栏统一卡片」总块） ===== */
.head-card .breadcrumb{ padding:0 0 6px; font-size:12.5px; }
.head-card .page-header{ margin-bottom:0; }
/* 标题字号收小：32px -> 21px */
.head-card .page-header h1{
  font-size:21px; letter-spacing:1px;
  text-shadow:0 0 22px rgba(0,229,255,0.18);
}
.head-card .page-header p{ font-size:13px; margin-top:4px; }
@media (max-width:960px){
  .head-card{ padding:12px 14px 14px; border-radius:16px; margin-bottom:14px; }
  .head-card .page-header h1{ font-size:19px; }
  .head-card .page-header p{ font-size:12.5px; }
}

.back-link { display: inline-block; color: var(--cyan); text-decoration: none; font-size: 13px; margin-bottom: 20px; }
.back-link:hover { text-decoration: underline; }

.menu-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.menu-item {
  background: rgba(16,20,36,0.10); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 12px; text-align: center; transition: all 0.3s;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.menu-item:hover {
  border-color: var(--cyan); transform: translateY(-2px);
  box-shadow:0 6px 20px rgba(0,229,255,0.06);
}
.menu-item .name { font-size: 14px; font-weight: 700; color: #e0e4f0; }
.menu-item .tag {
  display: inline-block; margin-top: 6px; padding: 2px 8px;
  background: rgba(0,229,255,0.1); color: var(--cyan); border-radius: 10px;
  font-size: 10px; font-weight: 600;
}
.menu-item .tag-script {
  display: inline-block; margin-top: 6px; padding: 2px 8px;
  background: rgba(230,57,118,0.1); color: var(--pink); border-radius: 10px;
  font-size: 10px; font-weight: 600;
}

/* ===== 菜单总览面板：胶囊列表（覆盖默认方块卡片，面板去背景避免双层叠加） ===== */







/* 菜单总览页：下方内容预览区 */
.content-preview{
  margin-top: 18px;
  background: rgba(0,0,0,0.20);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px; padding: 16px 20px 20px;
}
.content-preview .cp-head{
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; color: #e0e4f0; margin-bottom: 12px;
}
.content-preview .cp-tip{ font-size: 12px; font-weight: 400; color: #8a93a8; }
.content-preview .cp-frame{
  width: 100%; height: 520px; border: 0; border-radius: 14px;
  background: #0b0f1a; display: block;
}
@media (max-width:520px){
  
  
  .content-preview{ padding: 12px 12px 16px; border-radius: 16px; }
  .content-preview .cp-frame{ height: 420px; }
}

.note {
  margin-top: 36px; padding: 16px 20px;
  background: rgba(16,20,36,0.10);
  border: 1px solid var(--border); border-radius: 10px; font-size: 12px;
  color: var(--text-dim); text-align: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.tutorial-section {
  margin-top: 40px; padding: 28px 24px;
  background: rgba(16,20,36,0.10);
  border: 1px solid var(--border); border-radius: 14px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tutorial-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.tutorial-header h2 {
  font-size: 20px; font-weight: 800; color: var(--cyan);
  letter-spacing: 1px;
}
.tutorial-top {
  color: var(--cyan); text-decoration: none; font-size: 20px;
  width: 36px; height: 36px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; background: var(--cyan-dim);
  transition: all 0.2s;
}
.tutorial-top:hover { background: rgba(0,229,255,0.15); }
.tutorial-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tutorial-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 24px;
  background: rgba(16,20,36,0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,229,255,0.1);
  border-radius: 16px;
  transition: all 0.25s;
}
.tutorial-card:hover {
  background: rgba(16,20,36,0.45);
  border-color: rgba(0,229,255,0.2);
  box-shadow: 0 0 20px rgba(0,229,255,0.08);
}
.tutorial-num {
  flex-shrink: 0; width: 32px; height: 32px; display: flex;
  align-items: center; justify-content: center;
  background: var(--cyan-dim); color: var(--cyan);
  border-radius: 8px; font-size: 12px; font-weight: 800;
}
.tutorial-body { flex: 1; }
.tutorial-title { font-size: 14px; font-weight: 700; color: #e0e4f0; }
.tutorial-desc {
  font-size: 12px; color: var(--text-dim); margin-top: 4px; line-height: 1.6;
}
.tutorial-detail { margin-top: 6px; }
.tutorial-detail summary {
  cursor: pointer; padding: 6px 10px; border-radius: 6px;
  background: rgba(0,229,255,0.04); color: var(--text-dim);
  font-size: 12px; font-weight: 600; transition: all 0.2s;
  list-style: none; outline: none;
}
.tutorial-detail summary::-webkit-details-marker { display: none; }
.tutorial-detail summary:hover { background: rgba(0,229,255,0.08); color: var(--cyan); }
.tutorial-detail summary::before { content: '▸ '; transition: transform 0.2s; display: inline-block; color: var(--cyan); }
.tutorial-detail[open] summary::before { transform: rotate(90deg); }
.tutorial-detail[open] summary { background: rgba(0,229,255,0.06); color: var(--cyan); }
.tutorial-detail-body { padding: 12px 0 0 0; }
.td-section { margin-bottom: 14px; }
.td-title {
  font-size: 13px; font-weight: 700; color: #e0e4f0;
  margin-bottom: 4px; padding-left: 8px; border-left: 2px solid var(--cyan);
}
.td-section p {
  font-size: 12px; color: var(--text-dim); line-height: 1.8;
  padding-left: 10px; margin: 2px 0;
}
.td-section p strong { color: #c8cdd8; }
.td-section p a {
  color: var(--cyan); text-decoration: none;
}
.td-section p a:hover { text-decoration: underline; }
.td-img {
  display: block; max-width: 100%; margin: 10px 0 10px 10px;
  border-radius: 8px; border: 1px solid var(--border);
}
.td-video-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 10px 10px; }
.td-video {
  display: block; max-width: 100%; border-radius: 8px;
  border: 1px solid var(--border);
}
.tutorial-sub-list { display: flex; flex-direction: column; gap: 6px; }
.tutorial-sub-item {
  display: block; padding: 8px 12px; border-radius: 6px;
  background: rgba(0,229,255,0.06); border: 1px solid rgba(0,229,255,0.18);
  font-size: 13px; font-weight: 600; color: #00E5FF; text-decoration: none;
  transition: all 0.2s;
}
.tutorial-sub-item:hover {
  border-color: var(--cyan); color: var(--cyan);
  background: rgba(0,229,255,0.06);
}
.tutorial-sub-detail {
  border-radius: 6px; background: rgba(0,229,255,0.03);
  border: 1px solid var(--border);
}
.tutorial-sub-detail summary {
  cursor: pointer; padding: 8px 12px; font-size: 12px;
  color: var(--text-dim); font-weight: 600; list-style: none;
  outline: none; transition: all 0.2s;
}
.tutorial-sub-detail summary::-webkit-details-marker { display: none; }
.tutorial-sub-detail summary::before { content: '▸ '; color: var(--cyan); }
.tutorial-sub-detail[open] summary::before { content: '▾ '; }
.tutorial-sub-detail[open] summary { color: var(--cyan); }
.tutorial-sub-detail[open] { border-color: var(--cyan); }
.tutorial-sub-detail .tutorial-detail-body { padding: 12px 16px; }

/* 导航下拉菜单已移除 */

footer {
  text-align: center; padding: 24px; color: var(--text-dim); font-size: 12px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ===== 移动端导航栏适配 ===== */
@media (max-width: 700px) {
  nav:not(.sidebar-nav) { padding: 0 10px; z-index: 101; }
  .nav-inner { height: auto; min-height: 48px; padding: 5px 0; }
  .nav-logo { font-size: 13px; }
  .nav-logo img, .nav-avatar { width: 28px !important; height: 28px !important; margin-right: 5px !important; }
  .nav-links { gap: 3px; }
  .nav-links a { font-size: 11px; padding: 4px 7px; }
  /* 手风琴面板 */
  
  
  
  
  
  
}
@media (max-width: 520px) {
  nav:not(.sidebar-nav) { padding: 0 6px; }
  .nav-inner { min-height: 42px; flex-wrap: wrap; gap: 3px; }
  .nav-logo { font-size: 12px; letter-spacing: 0; flex-shrink: 0; }
  .nav-logo img, .nav-avatar { width: 24px !important; height: 24px !important; margin-right: 4px !important; }
  .nav-links { width: 100%; gap: 2px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { font-size: 10px; padding: 4px 6px; white-space: nowrap; border-radius: 4px; }
  
}
@media (max-width: 600px) {
  .page-header h1 { font-size: 24px; }
  .menu-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}


/* ===== 首页专属样式（SPA 路由兼容） ===== */
.hero {
  text-align: center; padding: 10px 0 24px;
}
.hero h1 {
  font-size: 36px; font-weight: 900; color: var(--cyan);
  text-shadow: 0 0 40px rgba(0,229,255,0.25); letter-spacing: 2px;
}
.hero .subtitle { color: var(--text-dim); font-size: 14px; margin-top: 4px; }

.marquee-wrap {
  max-width: 700px; margin: 0 auto 10px; overflow: hidden;
  border: 1px solid rgba(30,42,58,0.15); border-radius: 8px; padding: 8px 0;
}
.marquee-wrap span {
  display: inline-block; padding-left: 100%; font-size: 13px; color: var(--pink);
  font-weight: 500; animation: marqueeScroll 24s linear infinite; white-space: nowrap;
}
@keyframes floatLogo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-logo-text { animation: none; }
}
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.icon-banner {
  max-width: 700px; margin: 0 auto 16px;
  height: 280px;
  background: url('https://gta5abc.shop/assets/cache/images/202607151639218872430.png') center/contain no-repeat;
}

.notice-card {
  max-width: 700px; margin: 0 auto 20px;
  background: rgba(16,20,36,0.7); border: 1px solid rgba(30,42,58,0.25); border-radius: 12px;
  padding: 20px 24px; text-align: center; font-size: 12px; line-height: 2.2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.notice-card .red { color: #e53935; font-weight: bold; }
.notice-card .green { color: #43a047; font-weight: bold; }
.notice-card .pink { color: #ec407a; font-weight: bold; }
.notice-card .lpink { color: #f06292; font-weight: bold; }
.notice-card .blue { color: #42a5f5; font-weight: bold; margin-top: 4px; }
.notice-card .gray { color: #888; font-size: 11px; }

.btns-row {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  max-width: 700px; margin: 0 auto 12px;
}
.btn {
  display: inline-block; padding: 9px 22px;
  background: linear-gradient(135deg, #e63976, #c2185b);
  color: #fff; border-radius: 22px; font-size: 13px; font-weight: bold;
  letter-spacing: 1px; text-decoration: none;
  box-shadow: 0 3px 12px rgba(230,57,118,0.3);
  transition: all 0.3s ease; cursor: pointer;
}
.btn:hover {
  background: linear-gradient(135deg, #ff4081, #e91e63);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 24px rgba(230,57,118,0.5);
}
.btn-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

.bottom-marquee {
  max-width: 700px; margin: 0 auto 36px; overflow: hidden;
  border: 1px solid #ff6b9d40; border-radius: 16px; padding: 7px 0;
}
.bottom-marquee span {
  display: inline-block; padding-left: 100%; font-size: 12px; color: var(--pink);
  font-weight: bold; letter-spacing: 1px; animation: marqueeScroll 20s linear infinite; white-space: nowrap;
}

.section-title {
  text-align: center; font-size: 22px; font-weight: 800; color: var(--cyan);
  margin-bottom: 28px; letter-spacing: 1px;
}

.cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.card {
  background: transparent; border: 1px solid rgba(0,229,255,0.06); border-radius: 16px;
  padding: 24px; text-decoration: none; color: var(--text);
  transition: all 0.3s ease; position: relative; overflow: hidden;
}

.card:hover {
  background: transparent; border-color: rgba(0,229,255,0.12);
  transform: translateY(-3px);
}
.card-icon { font-size: 28px; margin-bottom: 8px; }
/*卡片图标：内联 SVG 矢量图形（不依赖 emoji 字体，永不裂图） */
.card-icon svg { display: block; margin: 0 auto; color: #00E5FF; }
/* 卡片图标：后端真图标 PNG（8px 圆角方形 + 霓虹描边） */
.card-ico-img {
  display: block; width: 32px; height: 32px; margin: 0 auto 8px;
  object-fit: cover; border-radius: 8px;
  border: 1px solid rgba(0, 229, 255, 0.35);
}
/* 真图标自带下边距，外层 .card-icon 不再叠加，避免间距翻倍。
   用 div+img 提高特异性，确保压过页面内 .index-card .card-icon 的局部覆盖；
   不支持 :has() 的老浏览器仅表现为间距略大，不影响布局。 */
div.card-icon:has(> img.card-ico-img) { margin-bottom: 0; }
.card h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: #fff; }
.card p { font-size: 12px; color: var(--text-dim); line-height: 1.5; }

.hamburger-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 6px; flex-shrink: 0;
}
.hamburger-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--cyan); margin: 5px 0;
  border-radius: 2px; transition: all 0.3s ease;
}

/* 首页移动端适配 */
@media (max-width: 700px) {
  .hero h1 { font-size: 24px; }
  .icon-banner { height: 200px; }
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .hamburger-toggle { display: block; }
}
@media (max-width: 520px) {
  .hero h1 { font-size: 20px; }
  .icon-banner { height: 140px; }
  .btns-row { gap: 6px; }
  .btn { padding: 7px 14px; font-size: 11px; }
  .hamburger-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .hamburger-toggle.open span:nth-child(2) { opacity: 0; }
  .hamburger-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
}

/* ========== 面包屑「主页」房子图标：全局尺寸约束（修复图标铺满页面） ========== */



/* ========== 导航标题「江小白 · 菜单教程」逐字鱼漂 + 悬浮跳起 ========== */
.nav-logo-text .tchar{
  display:inline-block;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.nav-logo-text .tchar:hover{ transform:translateY(-7px); }
.nav-logo-text .tfloat{
  display:inline-block;
  animation:fish-float-sm 3s ease-in-out infinite;
}
@keyframes fish-float-sm{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
.nav-logo-text .tchar:nth-child(1) .tfloat{ animation-delay:0s; }
.nav-logo-text .tchar:nth-child(2) .tfloat{ animation-delay:.3s; }
.nav-logo-text .tchar:nth-child(3) .tfloat{ animation-delay:.6s; }
.nav-logo-text .tchar:nth-child(4) .tfloat{ animation-delay:.9s; }
.nav-logo-text .tchar:nth-child(5) .tfloat{ animation-delay:.45s; }
.nav-logo-text .tchar:nth-child(6) .tfloat{ animation-delay:.75s; }
.nav-logo-text .tchar:nth-child(7) .tfloat{ animation-delay:.15s; }
.nav-logo-text .tchar:nth-child(8) .tfloat{ animation-delay:.55s; }
@media (prefers-reduced-motion: reduce){
  .nav-logo-text .tfloat{ animation:none !important; }
}

/* ========== 分类列表统一毛玻璃卡片（所有分类页同款） ========== */
.alpha-grid, .index-grid, .cards-grid, .games-grid, .link-grid, .card-grid, .tutorial-grid, .hp-grid, .tutorial-list{
  background: rgba(0,0,0,0.20);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 20px;
}
/* 主页 cards-grid 已在 cards-panel 内，去掉双层玻璃 */
.cards-panel .cards-grid{
  background: transparent; border: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 0; border-radius: 0;
}

/* ========== 分类页子文件 → 胶囊形式（主页宫格保持原样） ========== */
.alpha-grid, .index-grid, .cards-grid, .games-grid,
.link-grid, .card-grid, .tutorial-grid, .tutorial-list{
  display:flex; flex-direction:row; flex-wrap:wrap; gap:10px;
}
.cards-panel .cards-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px;
  background:transparent; border:0;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:0; border-radius:0;
}

/* 教程胶囊：等宽网格，避免标题长短不一导致卡片长度参差 */
.tutorial-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
  gap:10px;
}

.alpha-grid .alpha-card,
.index-grid .index-card,
.cards-grid .card,
.games-grid .game-card,
.link-grid .link-card,
.card-grid .card,
.tutorial-grid .tutorial-card,
.tutorial-list .tutorial-card{
  display:flex; align-items:center; gap:8px; min-width:0;
  max-width:100%; padding:9px 16px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  text-decoration:none;
  transition:all .25s ease;
}
.alpha-grid .alpha-card:hover,
.index-grid .index-card:hover,
.cards-grid .card:hover,
.games-grid .game-card:hover,
.link-grid .link-card:hover,
.card-grid .card:hover,
.tutorial-grid .tutorial-card:hover,
.tutorial-list .tutorial-card:hover{
  border-color:#00E5FF; transform:translateY(-2px);
}

/* Alpha 子文件：纯文字小卡片（标题 + 图数，不显示任何图片） */
.alpha-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px;
}
.alpha-grid .alpha-card{
  display:flex; flex-direction:column; align-items:stretch; justify-content:center;
  gap:2px; max-width:none; min-height:78px; padding:13px 14px;
  border-radius:14px;
  background:rgba(0,0,0,0.30);
  border:1px solid rgba(255,255,255,0.14);
  text-decoration:none;
  transition:background .2s, border-color .2s, transform .2s;
}
.alpha-grid .alpha-card:hover{
  background:rgba(0,0,0,0.38);
  border-color:rgba(0,229,255,0.55);
  transform:translateY(-2px);
}
/* 缩略图、编号角标、旧版兜底背景图：一律不显示 */
.alpha-grid .alpha-card .card-thumb,
.alpha-grid .alpha-card .card-thumb img,
.alpha-grid .alpha-card .card-num{ display:none !important; }
.alpha-grid .alpha-card::before{
  content:none !important; display:none !important; background:none !important;
}
.alpha-grid .alpha-card .card-title{
  margin:0; padding:0;
  font-size:13.5px; font-weight:700; color:#e6eaf4;
  text-align:left; white-space:normal; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  line-clamp:2; overflow:hidden;
}
.alpha-grid .alpha-card .card-meta{
  margin:4px 0 0; padding:0;
  font-size:11px; color:#8b93a8; text-align:left; white-space:nowrap; opacity:1;
}

/* 彼岸 / FiveM / CS2 / 其他游戏：图标 + 标题，隐藏长描述 */
.index-grid .index-card .card-icon,
.cards-grid .card .card-icon,
.games-grid .game-card .icon{ font-size:15px; line-height:1; }
.index-grid .index-card h3,
.cards-grid .card h3,
.games-grid .game-card h3,
.tutorial-grid .tutorial-card .tutorial-label{ font-size:13px; font-weight:600; color:#e0e4f0; white-space:nowrap; }
.index-grid .index-card .card-desc,
.cards-grid .card p,
.games-grid .game-card p{ display:none; }

/* 外链卡片：名称 + 域名 */
.link-grid .link-card .link-name{ font-size:13px; color:#e0e4f0; }
.link-grid .link-card .link-url{ font-size:11px; color:#7a8299; }

/* 教程列表（制裁/樱桃/设置等）：编号 + 标题，描述隐藏 */
.tutorial-list .tutorial-card{ padding:9px 14px; gap:10px; }
.tutorial-list .tutorial-card .tutorial-num{ margin:0; width:26px; height:26px; font-size:11px; border-radius:7px; }
.tutorial-list .tutorial-card .tutorial-body{ display:flex; align-items:center; gap:8px; min-width:0; }
.tutorial-list .tutorial-card .tutorial-title{ font-size:11px; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-clamp:2; overflow:hidden; min-width:0; flex:1 1 auto; }
.tutorial-list .tutorial-card .tutorial-desc{ display:none; }
.tutorial-grid .tutorial-card .tutorial-num{ margin:0; }

/* 主页教程导航卡片：保持原大卡片宫格，不胶囊化 */
.cards-panel .card{
  display:block; padding:24px; border-radius:16px;
  background:transparent; border-color:rgba(0,229,255,0.06);
}
.cards-panel .card:hover{ border-color:rgba(0,229,255,0.12); transform:translateY(-3px); }
.cards-panel .card .card-icon{ font-size:28px; margin-bottom:8px; display:block; }
.cards-panel .card h3{ font-size:16px; font-weight:700; margin-bottom:6px; color:#fff; white-space:normal; }
.cards-panel .card p{ display:block; font-size:12px; color:var(--text-dim); line-height:1.5; }

/* ========== 教程内容区块 → 白色毛玻璃卡片 ========== */
/* 白玻璃 9% + blur 20px，透出页面立绘背景产生真实玻璃感；边框亮白微光 */
.tutorial-content, .td-section, .tutorial-step{
  background: rgba(8,12,22,0.58);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.38);
}
.tutorial-content{ position:relative; overflow:hidden; }
.tutorial-content > *{ position:relative; z-index:1; }
.td-section{ margin-bottom: 12px; }
.tutorial-step{ margin-bottom: 12px; }

/* ========== 导航栏网易云音乐播放器 ========== */
.mc-player{
  display:flex; align-items:center; gap:6px; margin-left:8px;
  padding:4px 10px; border-radius:999px;
  background:rgba(0,0,0,0.30);
  border:1px solid rgba(0,229,255,0.18);
}
.mc-btn{
  width:24px; height:24px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:transparent;
  color:#9fb2c8; cursor:pointer; transition:all .2s;
}
.mc-btn svg{ width:13px; height:13px; fill:currentColor; display:block; }
.mc-btn:hover{ color:#00E5FF; background:rgba(0,229,255,0.14); }
.mc-btn-main{ width:28px; height:28px; color:#00E5FF; }
.mc-btn-main .mc-ico-pause{ display:none; }
.mc-player.is-playing .mc-btn-main .mc-ico-play{ display:none; }
.mc-player.is-playing .mc-btn-main .mc-ico-pause{ display:block; }
/* 自动播放被浏览器拦截时，播放键呼吸提示 */
.mc-player.mc-blocked .mc-btn-main{ animation:mcPulse 1.6s ease-in-out infinite; }
@keyframes mcPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(0,229,255,0.5); }
  50%{ box-shadow:0 0 0 7px rgba(0,229,255,0); }
}
/* 频谱条：随音乐跳动 */
.mc-viz{ display:flex; align-items:flex-end; gap:2px; height:18px; flex:0 0 auto; }
.mc-viz i{
  display:block; width:3px; height:100%; border-radius:2px;
  transform-origin:bottom center; transform:scaleY(.12);
  background:linear-gradient(180deg,#ff5f9e,#00E5FF);
}
.mc-viz.is-live i{ background:linear-gradient(180deg,#00E5FF,#ff5f9e); }
.mc-title{
  max-width:132px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  text-decoration:none; flex:0 1 auto;
}
.mc-title-text{ font-size:12px; color:#c8cdd8; }
.mc-title:hover .mc-title-text{ color:#00E5FF; }
.mc-vol{
  width:54px; height:3px; flex:0 0 auto; -webkit-appearance:none; appearance:none;
  background:rgba(255,255,255,0.20); border-radius:2px; outline:none; cursor:pointer;
}
.mc-vol::-webkit-slider-thumb{
  -webkit-appearance:none; width:10px; height:10px; border-radius:50%;
  background:#00E5FF; border:0; cursor:pointer;
}
.mc-vol::-moz-range-thumb{ width:10px; height:10px; border:0; border-radius:50%; background:#00E5FF; }
@media (max-width:860px){
  .mc-title, .mc-vol{ display:none; }
  .mc-player{ padding:4px 8px; margin-left:6px; }
}

/* ========== 播放器位置：紧贴「购买菜单点我」左侧 ========== */
.nav-links .mc-player{
  margin-left:0; align-self:center; flex:0 0 auto;
}
/* 抵消 .nav-links a 对曲名链接的样式污染 */
.nav-links .mc-title{
  padding:0; font-size:inherit; color:inherit;
  background:transparent; border-radius:0;
}
.nav-links .mc-title:hover{ background:transparent; }
/* 窄屏横滚导航区：播放器固定在左侧不被划走 */
@media (max-width:520px){
  .nav-links .mc-player{ position:sticky; left:0; z-index:2; }
}

/* ========== 导航栏歌词显示（nav 中间区域，玻璃质感与播放器一致） ========== */
.mc-lyrics{
  display:flex; align-items:center; gap:8px;
  flex:0 1 auto; min-width:0; max-width:320px;
  height:30px; padding:0 14px; margin:0 8px;
  border-radius:999px;
  background:rgba(0,0,0,0.30);
  border:1px solid rgba(0,229,255,0.18);
  overflow:hidden;
}
.mc-lyrics-icon{ font-size:12px; color:#00E5FF; flex:0 0 auto; }
.mc-lyrics-body{
  position:relative; height:30px; flex:1 1 auto; min-width:0;
  overflow:hidden; scroll-behavior:smooth;
}
.mc-lyric-line{
  height:30px; line-height:30px; font-size:12px; color:#9fb2c8;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .25s;
}
.mc-lyric-line.active{ color:#00E5FF; font-weight:600; }
.mc-lyrics.mc-empty .mc-lyrics-placeholder{ color:#5f7185; }
@media (max-width:860px){
  .mc-lyrics{ display:none; }
}

/* ========== 首页双栏布局：左栏目录 + 右栏内容 ========== */
.app-shell{
  display:flex; gap:20px; align-items:flex-start;
  max-width:1520px; margin:0 auto; padding:18px 20px 40px;
  position:relative; z-index:1;
}
.sidebar{
  flex:0 0 280px; width:280px;
  display:flex; flex-direction:column;
  background:rgba(8,12,22,0.62);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.15); border-radius:20px;
  padding:16px 14px;
  /* 左栏高度跟随内容：内容少则收缩，内容超过视口上限时内部滚动（不再与右栏强制等高） */
  max-height:var(--shell-h, none);
  overflow:hidden;
}
/* 子元素统一建立层叠上下文，杜绝内容互相透叠 */
.sidebar > *{ position:relative; z-index:1; }
.sidebar-head{ padding:6px 10px 14px; border-bottom:1px solid rgba(255,255,255,0.12); margin-bottom:10px; }
.sidebar-eyebrow{ font-size:10px; font-weight:700; letter-spacing:2.5px; color:var(--text-dim); text-transform:uppercase; margin-bottom:4px; }
.sidebar-title{ font-size:19px; font-weight:800; color:#fff; letter-spacing:1px; flex:0 0 auto; white-space:nowrap; }
/* 标题行右侧：列表/卡片视图切换（标题与切换按钮始终同一行，不挤成两行） */
.sidebar-head-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:nowrap; }
.sb-view-toggle{ display:flex; gap:4px; flex:0 0 auto; }
.sb-view-btn{
  padding:5px 10px; border-radius:8px; border:1px solid transparent;
  background:transparent; color:var(--text-dim); font-size:12px; font-weight:700;
  cursor:pointer; transition:all .2s; white-space:nowrap; font-family:inherit;
}
.sb-view-btn:hover{ color:#fff; }
.sb-view-btn.active{ color:var(--cyan); border-color:rgba(0,229,255,0.35); background:rgba(0,229,255,0.10); }
/* 卡片模式：整页变上下结构——分类面板变顶部通栏，分类排成横排胶囊，内容区在下方全宽 */
.app-shell.card-mode{ flex-direction:column; }
/* 卡片模式为纵向堆叠，取消等高，高度随内容 */
.app-shell.card-mode .sidebar,
.app-shell.card-mode .page-content{ height:auto; max-height:none; overflow:visible; }
.app-shell.card-mode .sidebar-nav{ overflow:visible; }
.app-shell.card-mode .sidebar{ width:100%; flex:0 0 auto; }
.app-shell.card-mode .sidebar-nav{ flex-direction:row; flex-wrap:wrap; gap:10px; }
.app-shell.card-mode .sb-cat-item{
  padding:9px 18px 9px 10px; border-radius:999px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
  font-size:14px;
}
.app-shell.card-mode .sb-cat-item:hover{ border-color:rgba(0,229,255,0.35); color:#fff; }
.app-shell.card-mode .sb-cat-item.active{
  border-color:rgba(0,229,255,0.50);
  background:rgba(0,229,255,0.12); color:#fff;
  box-shadow:0 0 14px rgba(0,229,255,0.15);
}
.app-shell.card-mode .sb-ico{ width:28px; height:28px; font-size:15px; border-radius:8px; }
.app-shell.card-mode .sb-cat-name{ white-space:nowrap; }
.app-shell.card-mode .sidebar-foot{ margin-top:10px; justify-content:flex-start; border-top:none; padding-top:0; }
.app-shell.card-mode #contentPane{ width:100%; }
.sidebar-nav{ display:flex; flex-direction:column; gap:6px; }
.sb-cat-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:14px;
  color:var(--text); text-decoration:none; font-size:15px; font-weight:600;
  border:1px solid transparent; transition:all .2s;
}
.sb-cat-item .sb-ico{
  flex:0 0 auto; width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:19px; background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.10); border-radius:11px;
}
/* 选中项图标不再额外染色，与普通项一致 */
.sb-cat-item.active .sb-ico{ background:transparent; border-color:transparent; }
/* 分类名一行完整展示，不换行也不出现“…” */
.sb-cat-name{ flex:1 1 auto; min-width:0; white-space:nowrap; line-height:1.35; }
/* 超长分类名（加入代理 | 搭建网站定制安装器）：允许两行 + 字号微收，避免溢出侧栏 */
.sb-cat-item.sb-cat-wide .sb-cat-name{
  white-space:normal; font-size:13px; line-height:1.32; word-break:break-word;
}
.app-shell.card-mode .sb-cat-item.sb-cat-wide .sb-cat-name{
  white-space:normal; font-size:13px;
}
/* 细条深色滚动条（替代浏览器默认带箭头的灰条） */
.sidebar{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.20) transparent; }
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-track{ background:transparent; }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.18); border-radius:3px; }
/* 等高后：只有分类列表内部滚动，标题区与底部链接固定不动 */
.sidebar-nav{ flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.20) transparent; padding-right:2px; }
.sidebar-nav::-webkit-scrollbar{ width:6px; }
.sidebar-nav::-webkit-scrollbar-track{ background:transparent; }
.sidebar-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.18); border-radius:3px; }
.sidebar-foot{ flex:0 0 auto; }
.sidebar-foot{ margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.10); display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; justify-content:center; }
.sb-foot-link{
  display:block; padding:9px 16px; border-radius:999px; text-decoration:none;
  color:var(--text); font-size:13px; background:rgba(255,255,255,0.05); transition:all .2s;
}
.sb-foot-link:hover{ background:rgba(230,57,118,0.14); color:#fff; }
#contentPane{ min-width:0; flex:1; }

/* ========== 顶部横幅区（SPA 之外，固定不变） ========== */
.top-wrap{
  max-width:1520px; margin:0 auto;
  padding:calc(var(--nav-h,56px) + 30px) 0 0;
  position:relative; z-index:1;
}
/* 顶部横幅区与导航/内容壳同宽（1520 宽度系统）：shop-banner / banner-marquee 跟随该容器，
   与 nav、.app-shell 同宽同居中，不再用视口 breakout 或右栏 320px 偏移。
   清除 .container 默认 20px 左右内边距，避免横幅相对导航/内容壳内缩 20px */
.top-wrap > .container{ max-width:1520px; padding:0; }
/* 右栏内容区：高度完全跟随内容（内容多则增高，内容少则收缩），整页自然滚动 */
.app-shell .page-content{
  padding-top:0;
  background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:none;
  border-radius:0;
  height:auto;
  min-height:0;
  overflow:visible;
}
/* 顶部/底部对齐：去掉内容区容器上下内边距，页头卡片顶边与左栏顶边齐平、底边与左栏底边齐平 */
/* 宽度放开：壳加宽后内容卡跟随拉长（原 max-width:1000px 会在两侧留深色空档） */
.app-shell .page-content > .container{
  padding-top:0; padding-bottom:0;
  max-width:none;
  padding-left:6px; padding-right:6px;
  /* 转场骨架（.pane-skeleton）绝对定位的参照系 */
  position:relative;
}
/* 末尾元素的下外边距一并去掉，避免左栏比右侧卡片多出一截 */
.app-shell .page-content > .container > *:last-child{ margin-bottom:0 !important; }
.app-shell .page-content::-webkit-scrollbar{ display:none; }

/* ========== 购物站式左栏：分类列表（纯文字，无任何底卡） ========== */
.sidebar-nav{
  display:flex; flex-direction:column; gap:8px;
  /* 防御性重置：杜绝任何通用 nav/容器样式给列表加底卡 */
  background:none; border:none; box-shadow:none;
  padding:0; margin:0; backdrop-filter:none; -webkit-backdrop-filter:none;
  position:static; transform:none; inset:auto; width:auto;
}
.sb-cat-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 10px; border-radius:10px;
  color:var(--text); text-decoration:none; font-size:15px; font-weight:600;
  background:transparent; border:none; transition:color .2s;
  flex:0 0 auto;
}
.sb-cat-item .sb-ico{
  flex:0 0 auto; width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; background:transparent; border:none; border-radius:8px;
}
.sb-cat-item:hover{ color:#fff; }
/* 选中项：无底色，仅文字变青 + 左侧细青条 */
.sb-cat-item.active{
  color:var(--cyan);
  box-shadow:inset 3px 0 0 var(--cyan);
}
/* 有子文件的分类：右侧箭头指示，展开时朝上 */
.sb-cat-item.sb-has-sub::after{
  content:''; flex:0 0 auto;
  width:7px; height:7px; margin-left:auto;
  border-right:1.5px solid rgba(255,255,255,0.40);
  border-bottom:1.5px solid rgba(255,255,255,0.40);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s ease;
}
.sb-cat-item.sb-has-sub.open::after{ transform:rotate(-135deg) translate(-2px,-2px); }

/* ========== 子文件列表（就地展开，缩进 + 竖线） ========== */
.sb-sub-list{
  display:flex; flex-direction:column; gap:1px;
  margin:-2px 0 4px; padding:0 0 0 45px;
  position:relative;
  max-height:none; overflow:visible;
  /* 定高滚动容器内：禁止被 flex 压缩，否则展开后高度会被挤成 0（看不见子文件） */
  flex:0 0 auto;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.18) transparent;
}
.sb-sub-list::-webkit-scrollbar{ width:5px; }
.sb-sub-list::-webkit-scrollbar-track{ background:transparent; }
.sb-sub-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.16); border-radius:3px; }
.sb-sub-list[hidden]{ display:none; }
/* 左侧竖向引导线 */
.sb-sub-list::before{
  content:''; position:absolute; left:29px; top:2px; bottom:6px;
  width:1px; background:rgba(255,255,255,0.14);
}
.sb-sub-item{
  display:block; padding:7px 10px; border-radius:8px;
  color:var(--text-dim); font-size:13.5px; font-weight:500;
  text-decoration:none; line-height:1.45; white-space:normal;
  transition:color .18s, background .18s;
}
.sb-sub-item:hover{ color:#fff; background:rgba(255,255,255,0.05); }
.sb-sub-item.active{
  color:var(--cyan); font-weight:700;
  background:rgba(0,229,255,0.08);
}
/* 卡片模式 / 窄屏：分类变横排，子文件列表收起不显示 */
.app-shell.card-mode .sb-sub-list{ display:none !important; }
.app-shell.card-mode .sb-cat-item.sb-has-sub::after{ display:none; }

/* 右栏默认欢迎面板 */
.welcome-panel{
  text-align:center; padding:70px 24px;
  background:rgba(0,0,0,0.20);
  border:1px solid rgba(255,255,255,0.15); border-radius:20px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.welcome-panel .welcome-ico{ font-size:44px; margin-bottom:12px; }
.welcome-panel h2{ color:#fff; font-size:22px; margin-bottom:10px; }
.welcome-panel p{ color:var(--text-dim); font-size:14px; line-height:1.9; }

@media (max-width:960px){
  .top-wrap{ padding:calc(var(--nav-h,56px) + 20px) 14px 0; }
  .app-shell{ flex-direction:column; padding:14px; gap:14px; }
  /* 窄屏改回自然高度（纵向堆叠，不做等高） */
  .sidebar{ position:static; width:100%; height:auto; max-height:none; overflow:visible; }
  .app-shell .page-content{ height:auto; max-height:none; overflow:visible; }
  .sidebar-nav{ flex-direction:row; flex-wrap:wrap; overflow:visible; }
  .sb-cat-item{ flex:1 1 44%; }
  .sb-sub-list{ display:none !important; }
}

/* ========== 目录树并入首页「教程导航」容器 ========== */
.cards-panel .sidebar-tree{ margin-top:4px; }
.cards-panel .sb-cat{ font-size:15px; padding:12px 16px; border-radius:14px; }
.cards-panel .sb-items{ padding:6px 8px 14px 12px; }
.cards-panel .sb-cat.open + .sb-items{ display:flex; flex-wrap:wrap; gap:8px; }
.cards-panel .sb-item{
  display:inline-flex; align-items:center;
  padding:8px 18px; border-radius:999px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14);
}
.cards-panel .sb-item:hover{ background:rgba(0,229,255,0.12); border-color:rgba(0,229,255,0.35); }
.cards-panel .sb-item.active{ background:rgba(0,229,255,0.16); border-color:rgba(0,229,255,0.45); }
.sidebar-foot{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
.cards-panel .sb-foot-link{ padding:9px 22px; border-radius:999px; }

/* ===== 兜底：面包屑「主页图标 + 江小白菜单教程」段一律隐藏（兼容浏览器缓存的旧页面） ===== */
.breadcrumb a.breadcrumb-home,
.breadcrumb a[href="index.html"],
.breadcrumb a.breadcrumb-home + .breadcrumb-sep { display:none !important; }

/* ==================================================================
   右栏统一卡片：黑色毛玻璃 30%
   —— 页头卡片、按钮面板、教程卡、功能卡、链接卡、活动卡等一律同参数
   —— blur 14px + 1px 白 14% 边框，保持各卡片自身圆角不变
   ================================================================== */
.head-card, main.page-content .alpha-card, main.page-content .tutorial-card, main.page-content .feature-card, main.page-content .link-card, main.page-content .hp-card, main.page-content .activity-card, main.page-content .content-card, main.page-content .card{
  background: rgba(0, 0, 0, 0.30) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* 悬停：只轻微加深，不改结构 */
main.page-content .alpha-card:hover, main.page-content .tutorial-card:hover, main.page-content .feature-card:hover, main.page-content .link-card:hover, main.page-content .hp-card:hover, main.page-content .activity-card:hover, main.page-content .content-card:hover, main.page-content .card:hover{
  background: rgba(0, 0, 0, 0.38) !important;
  border-color: rgba(0, 229, 255, 0.45) !important;
}


/* ========== 右栏 iframe 就地加载（file:// 双击打开也不跳转） ========== */
.pane-frame{
  display:none;
  width:100%;
  height:640px;
  border:none;
  border-radius:20px;
  /* 全透明：iframe 自身不再垫深色底/外阴影，否则会在背景图上留一块圆角暗影矩形；
     子页 body 已改透明，卡片浮在主页面背景上 */
  background:transparent;
  box-shadow:none;
  /* 平滑过渡：换源时淡入 + 轻微上移（pane-ready 触发），消除生硬跳变 */
  opacity:0;
  transform:translateY(10px);
  transition:opacity 240ms ease, transform 240ms ease;
  will-change:opacity, transform;
}
.pane-frame.on{ display:block; }
.pane-frame.pane-ready{ opacity:1; transform:translateY(0); }
.app-shell.has-pane .welcome-panel{ display:none !important; }
@media (max-width:960px){
  .pane-frame.on{ height:70vh; }
}
@media (prefers-reduced-motion: reduce){
  .pane-frame{ transition:none; transform:none; }
}

/* ========== 右栏转场骨架：换页未即时就绪时的脉冲占位（杜绝空白闪烁） ==========
   绝对定位覆盖整个内容容器（标题卡 + iframe 区域），高度自动跟随容器，
   换源与高度重排都在骨架下进行，用户看不到任何空白与跳动 */
.pane-skeleton{
  position:absolute;
  /* 上下各外扩一点：内容容器与标题卡/iframe 之间存在数像素的盒模型间隙，
     不外扩会在底部漏出一条未被遮住的背景，慢加载时看着像闪烁 */
  left:6px; right:6px; top:-6px; bottom:-16px;
  z-index:6;
  background:rgba(8,12,22,0.58);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:20px;
  padding:30px 24px;
  display:flex; flex-direction:column; gap:16px;
  opacity:0;
  transition:opacity 220ms ease;
  pointer-events:none;
}
.pane-skeleton[hidden]{ display:none !important; }
.pane-skeleton.on{ opacity:1; }
.psk-line{
  height:14px; border-radius:8px; flex:0 0 auto;
  background:linear-gradient(90deg,
    rgba(255,255,255,0.05) 25%,
    rgba(0,229,255,0.18) 37%,
    rgba(255,255,255,0.05) 63%);
  background-size:400% 100%;
  animation:pskPulse 1.4s ease-in-out infinite;
}
.psk-w46{ width:46%; height:22px; }
.psk-w72{ width:72%; }
.psk-w55{ width:55%; }
.psk-w88{ width:88%; }
.psk-w63{ width:63%; }
@keyframes pskPulse{
  0%   { background-position:100% 50%; }
  100% { background-position:0 50%; }
}
@media (prefers-reduced-motion: reduce){
  .pane-skeleton{ transition:none; }
  .psk-line{ animation:none; }
}

/* ========== 全站滚动条美化（深色主题细条 + 青色滑块） ========== */
html, body{
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,255,0.28) rgba(8,12,22,0.55);
}
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:rgba(8,12,22,0.55); }
::-webkit-scrollbar-thumb{
  background:rgba(0,229,255,0.28);
  border-radius:8px;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(0,229,255,0.50); }
::-webkit-scrollbar-corner{ background:transparent; }

/* ========== 右栏外置标题卡（从 iframe 容器移出，吸顶固定） ========== */
.pane-head-card{
  position:sticky; top:0; z-index:999;
  /* 与内容卡统一：黑色毛玻璃半透明 */
  background:rgba(8,12,22,0.58);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:20px;
  padding:14px 20px 16px;
  margin-bottom:12px;
  box-shadow:0 10px 26px rgba(0,0,0,0.38);
  /* 转场：与 iframe 同步淡出 / 淡入（由 .pane-ready 驱动）。
     旧版标题卡靠 hidden 属性瞬间消失又瞬间出现，是切换时「闪一下」的元凶 */
  opacity:0;
  transform:translateY(10px);
  transition:opacity 240ms ease, transform 240ms ease;
}
.pane-head-card.pane-ready{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .pane-head-card{ transition:none; transform:none; opacity:1; }
}
.pane-head-card[hidden]{ display:none; }
.ph-crumbs{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  font-size:14px; color:#888;
}
.ph-crumbs a{ color:#00E5FF; text-decoration:none; transition:color .2s; }
.ph-crumbs a:hover{ color:#33F0FF; }
.ph-crumbs .breadcrumb-current{ color:#BBBBBB; }
.ph-title{
  margin:8px 0 0; text-align:center;
  font-size:26px; color:#00E5FF;
  text-shadow:0 0 18px rgba(0,229,255,0.35);
}
.ph-sub{ text-align:center; font-size:14px; color:#9AA7BD; margin-top:6px; }
.ph-sub:empty{ display:none; }

/* ========== 右栏内容卡全长展开：iframe 高度跟随内容，右栏整体滚动 ========== */
/* 标题卡改为非吸顶（静态）——随页滚动，物理上不可能再从内容底下穿过 */
/* 卡片按内容全长撑开，超出右栏高度时右栏滚动显示全部内容（滚动条已隐藏） */
.app-shell:not(.card-mode) .pane-head-card{ position:static; }

/* ============================================================
   左栏「教程分类」跟随滚动：右栏内容往下滚时左栏固定在视口内
   - sticky 需配合 align-self:flex-start（.app-shell 已 flex-start）
   - 高度上限沿用 --shell-h（视口高 -140px），超出时卡片内部滚动
   - 卡片模式（横向布局）不参与跟随
   ============================================================ */
.app-shell:not(.card-mode) .sidebar{
  position:sticky;
  /* 让开顶部固定导航栏：导航是 position:fixed; top:16px; 高 --nav-h(56px)，
     即占据 16~72px；左栏吸顶位置再往下留 16px 呼吸位，避免与导航重叠 */
  top:calc(var(--nav-h, 56px) + 32px);
  align-self:flex-start;
}
/* 顶到位置后与导航栏保持一点呼吸感，并让毛玻璃在滚动时层次更清楚 */
.app-shell:not(.card-mode) .sidebar{
  box-shadow:0 14px 38px rgba(0,0,0,0.34);
}
@media (max-width:960px){
  .app-shell:not(.card-mode) .sidebar{ position:static; top:auto; }
}

/* ============================================================
   右侧快速定位：顶部 / 教程 / 底部
   深色毛玻璃胶囊 + 青色描边，固定右侧垂直居中，滚动时高亮当前区段
   ============================================================ */
.quick-jump{
  position:fixed;
  right:56px; /* 从右缘 18px 内收到 56px，不再贴着屏幕边 */
  top:50%;
  transform:translateY(-50%);
  z-index:1300;
  display:flex;
  flex-direction:column;
  gap:10px;
  opacity:0;
  /* 未进入教程区时右移+淡出，进入后滑入 */
  transform:translateY(-50%) translateX(16px);
  pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}
.quick-jump.visible{
  opacity:1;
  transform:translateY(-50%) translateX(0);
  pointer-events:auto;
}
.qj-btn{
  display:flex; align-items:center; gap:8px;
  padding:10px 18px;
  border-radius:14px;
  background:rgba(8,12,22,0.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(0,229,255,0.30);
  color:#E3F1F7;
  font-size:14px; font-weight:600;
  font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,0.32);
  transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.qj-btn:hover{
  background:rgba(0,229,255,0.12);
  border-color:rgba(0,229,255,0.55);
  color:#fff;
  transform:translateX(-3px);
}
.qj-btn.active{
  background:rgba(0,229,255,0.18);
  border-color:rgba(0,229,255,0.65);
  color:#fff;
  box-shadow:0 8px 26px rgba(0,229,255,0.18);
}
.qj-ico{ font-size:15px; line-height:1; color:#00E5FF; }
.qj-btn.active .qj-ico, .qj-btn:hover .qj-ico{ color:#66F7FF; }
/* 小屏隐藏：避免遮挡正文 */
@media (max-width:960px){
  
}

/* ============================================================
   顶部导航：白色毛玻璃半透明 + 鼠标跟随光晕 + 胶囊购买按钮
   --mx/--my 由 content-loader.js 的 mousemove 更新，驱动跟随高光
   ============================================================ */
nav:not(.sidebar-nav){
  background:
    radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,0.12), rgba(255,255,255,0.02) 55%, transparent 75%),
    linear-gradient(135deg,
      rgba(10,14,23,0.92) 0%,
      rgba(18,26,48,0.85) 100%);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 10px 36px rgba(0,0,0,0.34),
              inset 0 1px 0 rgba(255,255,255,0.30);
  transition: border-color .3s ease, box-shadow .3s ease;
}
nav:not(.sidebar-nav):hover{
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 12px 44px rgba(0,229,255,0.16),
              inset 0 1px 0 rgba(255,255,255,0.40);
}
/* 白玻璃下导航文字提亮，保证可读 */
nav:not(.sidebar-nav) .nav-links a{ color: #DCEAF2; }
nav:not(.sidebar-nav) .nav-links a:hover{ color: #fff; }

/* 购买按钮：胶囊 + 青蓝渐变（原红色已弃用）+ 弹性悬浮交互 */
.nav-buy-btn{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px;
  padding:9px 22px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg, #22E1FF 0%, #3B82F6 100%)!important;
  color:#04202C!important;
  font-weight:800!important;
  font-size:13px;
  letter-spacing:0.5px;
  border:1px solid rgba(255,255,255,0.42)!important;
  box-shadow:0 4px 16px rgba(0,180,255,0.30), inset 0 1px 0 rgba(255,255,255,0.45);
  text-decoration:none!important;
  white-space:nowrap;
  transition:transform .24s cubic-bezier(.34,1.56,.64,1),
             box-shadow .24s ease, filter .24s ease;
  animation:navBuyBreath 3.2s ease-in-out infinite;
}
.nav-buy-btn:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 10px 30px rgba(0,200,255,0.55), inset 0 1px 0 rgba(255,255,255,0.6);
  filter:brightness(1.08) saturate(1.1);
  animation-play-state:paused;
}
/* 悬浮光点：指针跟随的小高光 */
.nav-buy-btn::after{
  content:"";
  position:absolute;
  width:120px; height:120px;
  left:var(--bx, 50%); top:var(--by, 50%);
  transform:translate(-50%, -50%);
  background:radial-gradient(circle, rgba(255,255,255,0.55), transparent 65%);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.nav-buy-btn{ position:relative; overflow:hidden; }
.nav-buy-btn:hover::after{ opacity:1; }
@keyframes navBuyBreath{
  0%, 100%{ box-shadow:0 4px 16px rgba(0,180,255,0.28), inset 0 1px 0 rgba(255,255,255,0.45); }
  50%    { box-shadow:0 6px 24px rgba(0,200,255,0.48), inset 0 1px 0 rgba(255,255,255,0.5); }
}
@media (prefers-reduced-motion: reduce){
  .nav-buy-btn{ animation:none; }
}

/* ============================================================
   首页 shop-banner 大卡：与顶部导航同宽 + 背景全透明
   - 宽：突破 .container(1100px) 限制，按视口居中，max-width 对齐导航的 1180px
   - 透明：去掉背景图层(shop-banner-bg)、遮罩层(shop-banner-mask)、底色，保留细描边
   ============================================================ */
.shop-banner{
  width:100%!important;
  max-width:1520px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  transform:none!important;
  background:transparent!important;
  border-color:rgba(255,255,255,0.18)!important;
  box-shadow:none!important;
}
.shop-banner-bg{
  display:block!important;
  position:absolute; inset:0; z-index:0;
  background:url('images/shop-banner-bg.webp') center/cover no-repeat;
}
.shop-banner-mask{ display:none!important; }
/* 背景透出立绘后，用文字阴影兜住可读性 */
.shop-banner-content{ text-shadow:0 2px 14px rgba(0,0,0,0.72); }
.shop-banner-sub{ text-shadow:0 2px 10px rgba(0,0,0,0.85); }
.shop-banner-tag{ background:rgba(8,14,26,0.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

/* ============================================================
   首页横幅下方跑马灯条：黑色毛玻璃半透明
   ============================================================ */
.banner-marquee{
  background:rgba(8,12,22,0.55)!important;
  backdrop-filter:blur(16px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(150%)!important;
  border-color:rgba(255,255,255,0.14)!important;
  box-shadow:0 8px 26px rgba(0,0,0,0.30);
}
.banner-marquee span{
  text-shadow:0 1px 10px rgba(0,0,0,0.75), 0 0 12px rgba(255,190,90,0.30);
}

/* 侧栏分类图标改用站点头像（替代 emoji） */
.sb-ico.sb-ico-img{
  overflow:hidden;
  border-color:rgba(0,229,255,0.35);
  box-shadow:0 2px 10px rgba(0,229,255,0.18);
}
.sb-ico.sb-ico-img img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 22%;   /* 取头像上半部分，避免被裁掉星星下半部 */
  border-radius:10px;
  transition:transform .3s ease;
}
.sb-cat-item:hover .sb-ico-img img{ transform:scale(1.12); }

/* ============================================================
   教程品牌图标（.tut-brand-icon）
   源图为白底 PNG，用 multiply 混合让白底自动融进深色背景，
   只留图标本身；圆角 + 淡描边保持徽章质感。
   ============================================================ */
.tut-brand-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  object-fit:contain;
  mix-blend-mode:multiply;          /* 白底 × 深色底 = 背景色，白底消失 */
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.06);
  padding:3px;
  vertical-align:middle;
  margin:0 12px 0 0;
  flex:0 0 auto;
  box-shadow:0 4px 14px rgba(0,0,0,0.28);
}
/* 深色背景下 multiply 会让整体偏暗，补一层微亮保证图标醒目 */
.ph-title .tut-brand-icon,
.page-header .tut-brand-icon{
  filter:brightness(1.35) saturate(1.15);
}
/* 标题卡里的图标：与标题居中排布 */
.ph-title{ display:flex; align-items:center; justify-content:center; gap:0; }
.ph-title .tut-brand-icon{ width:40px; height:40px; border-radius:11px; }
/* 独立打开页面（非内嵌）时页头是块级排列 */
.page-header .tut-brand-icon{ margin-bottom:6px; }

/* ============================================================
   子文件卡片全局统一：全部对齐 .alpha-card 的网格卡片观感
   背景：此前 .menu-grid/.cards-grid/.index-grid 等被另一组规则压成
   inline-flex 胶囊小药丸，与 .alpha-grid 的独立网格卡片不一致，
   这里统一为同一套外观（自适应网格 + 居中内容 + 淡边框 + hover 青色上浮）
   ============================================================ */
.alpha-grid,
.menu-grid,
.cards-grid,
.index-grid,
.games-grid,
.link-grid,
.card-grid,
.tutorial-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap:14px !important;
}
.alpha-grid > *,
.menu-grid > *,
.cards-grid > *,
.index-grid > *,
.games-grid > *,
.link-grid > *,
.card-grid > *,
.tutorial-grid > *{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  width:auto !important;
  max-width:none !important;
  min-height:96px !important;
  padding:20px 16px !important;
  border-radius:14px !important;
  background:rgba(8,12,22,0.42) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  text-align:center !important;
  text-decoration:none !important;
  box-shadow:none !important;
  transform:none !important;
  transition:background .25s, border-color .25s, transform .25s !important;
}
.alpha-grid > *:hover,
.menu-grid > *:hover,
.cards-grid > *:hover,
.index-grid > *:hover,
.games-grid > *:hover,
.link-grid > *:hover,
.card-grid > *:hover,
.tutorial-grid > *:hover{
  background:rgba(0,229,255,0.07) !important;
  border-color:rgba(0,229,255,0.45) !important;
  transform:translateY(-3px) !important;
}
/* 卡片内文字层级统一 */
.alpha-grid > * > h3, .menu-grid > * > h3, .cards-grid > * > h3,
.index-grid > * > h3, .games-grid > * > h3, .link-grid > * > h3,
.card-grid > * > h3, .tutorial-grid > * > h3,
.alpha-grid > * > .card-title, .menu-grid > * > .card-title, .cards-grid > * > .card-title,
.index-grid > * > .card-title, .games-grid > * > .card-title, .link-grid > * > .card-title,
.card-grid > * > .card-title, .tutorial-grid > * > .card-title,
.alpha-grid > * > .name, .menu-grid > * > .name, .cards-grid > * > .name,
.index-grid > * > .name, .games-grid > * > .name, .link-grid > * > .name,
.card-grid > * > .name, .tutorial-grid > * > .name,
.alpha-grid > * > .tutorial-label, .menu-grid > * > .tutorial-label,
.cards-grid > * > .tutorial-label, .index-grid > * > .tutorial-label,
.games-grid > * > .tutorial-label, .link-grid > * > .tutorial-label,
.card-grid > * > .tutorial-label, .tutorial-grid > * > .tutorial-label,
.alpha-grid > * > .link-name, .menu-grid > * > .link-name, .cards-grid > * > .link-name,
.index-grid > * > .link-name, .games-grid > * > .link-name, .link-grid > * > .link-name,
.card-grid > * > .link-name, .tutorial-grid > * > .link-name{
  font-size:14px !important;
  font-weight:700 !important;
  color:#E6EDF5 !important;
  line-height:1.5 !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  background:none !important;
}
/* 元信息（数量 / 标签 / 外链域名）统一为灰色小字 */
.alpha-grid > * > .card-meta, .menu-grid > * > .card-meta, .cards-grid > * > .card-meta,
.index-grid > * > .card-meta, .games-grid > * > .card-meta, .link-grid > * > .card-meta,
.card-grid > * > .card-meta, .tutorial-grid > * > .card-meta,
.alpha-grid > * > .tag, .menu-grid > * > .tag, .cards-grid > * > .tag,
.index-grid > * > .tag, .games-grid > * > .tag, .link-grid > * > .tag,
.card-grid > * > .tag, .tutorial-grid > * > .tag,
.alpha-grid > * > .tag-script, .menu-grid > * > .tag-script, .cards-grid > * > .tag-script,
.alpha-grid > * > .link-url, .menu-grid > * > .link-url, .cards-grid > * > .link-url,
.index-grid > * > .link-url, .games-grid > * > .link-url, .link-grid > * > .link-url,
.card-grid > * > .link-url, .tutorial-grid > * > .link-url{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  background:none !important;
  border:none !important;
  font-size:12px !important;
  font-weight:500 !important;
  color:#9AA7BD !important;
  text-align:center !important;
}
/* 描述文字 */
.alpha-grid > * > p, .menu-grid > * > p, .cards-grid > * > p,
.index-grid > * > p, .games-grid > * > p, .link-grid > * > p,
.card-grid > * > p, .tutorial-grid > * > p,
.alpha-grid > * > .card-desc, .menu-grid > * > .card-desc, .cards-grid > * > .card-desc,
.index-grid > * > .card-desc, .games-grid > * > .card-desc, .link-grid > * > .card-desc,
.card-grid > * > .card-desc, .tutorial-grid > * > .card-desc{
  margin:0 !important;
  font-size:12px !important;
  line-height:1.6 !important;
  color:#8A93A5 !important;
  text-align:center !important;
}

/* ============================================================
   教程正文页内容卡：与标题卡统一为黑玻璃（此前正文无底，文字直接压立绘）
   - 容器 .container 垫黑玻璃卡
   - 内层 .tutorial-content 去底，避免双层玻璃叠黑
   ============================================================ */
.embed-mode main.page-content > .container{
  background:rgba(8,12,22,0.58)!important;
  backdrop-filter:blur(22px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(150%)!important;
  border:1px solid rgba(255,255,255,0.18)!important;
  border-radius:20px!important;
  padding:24px 22px!important;
  margin:0 6px 0!important;
  box-shadow:0 10px 32px rgba(0,0,0,0.38)!important;
}
.embed-mode .tutorial-content,
.embed-mode .td-section,
.embed-mode .tutorial-step{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:none!important;
  box-shadow:none!important;
}

/* ============================================================
   去双层：内嵌视图中网格容器不再自带卡片底，只保留 .container 一层
   （旧规则给 .alpha-grid 等容器加了 rgba(0,0,0,.20) 卡片，与新容器卡重叠）
   ============================================================ */
.embed-mode .alpha-grid,
.embed-mode .menu-grid,
.embed-mode .cards-grid,
.embed-mode .index-grid,
.embed-mode .games-grid,
.embed-mode .link-grid,
.embed-mode .card-grid,
.embed-mode .tutorial-grid{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:none!important;
  border-radius:0!important;
  padding:0!important;
  box-shadow:none!important;
}

/* ============================================================
   阿尔法子文件改「胶囊行」：一行多个药丸，每颗前面带阿尔法图标
   （覆盖前面统一的网格卡片规则，仅作用于 .alpha-grid）
   ============================================================ */
.embed-mode .alpha-grid{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}
.embed-mode .alpha-grid > *{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:auto!important;
  min-height:0!important;
  padding:8px 16px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,0.06)!important;
  border:1px solid rgba(255,255,255,0.12)!important;
  text-align:left!important;
  transition:background .2s, border-color .2s, transform .2s!important;
}

.embed-mode .alpha-grid > *:hover{
  background:rgba(0,229,255,0.12)!important;
  border-color:rgba(0,229,255,0.45)!important;
  transform:translateY(-2px)!important;
}
.embed-mode .alpha-grid > * > .card-title{
  font-size:14px!important;
  font-weight:600!important;
  color:#E6EDF5!important;
  margin:0!important;
  padding:0!important;
  line-height:1.4!important;
}
.embed-mode .alpha-grid > * > .card-meta{
  font-size:12px!important;
  font-weight:500!important;
  color:#9AA7BD!important;
  margin:0!important;
  padding:0 0 0 2px!important;
  background:none!important;
  border:none!important;
  border-radius:0!important;
}

/* 阿尔法胶囊内的小图标（img 标签实现，比伪元素可靠） */
.alpha-pill-ico{
  width:22px;
  height:22px;
  flex:0 0 auto;
  object-fit:contain;
  border-radius:6px;
  mix-blend-mode:multiply;      /* 白底融进胶囊底 */
  filter:brightness(1.45) saturate(1.1);
}

/* 教程胶囊（.tutorial-list）内的软件真图标
 * 樱桃 / 阿尔法 / 彼岸等子文件胶囊统一用这个类，圆润小图标 + 霓虹描边。
 * 2026-10-18 张总：子文件列表统一胶囊样式，图标随卡片一起进胶囊。
 * 与 .alpha-pill-ico 的差别：这里走 object-fit:cover + 正常混合，
 * 适配各菜单的彩色真图标（255x256 / 256x256 等非正方形源图不拉伸变形）。 */
.tut-pill-ico{
  width:40px;
  height:40px;
  flex:0 0 auto;
  object-fit:cover;
  border-radius:8px;
  border:1.5px solid rgba(0,229,255,0.35);
  box-shadow:0 0 8px rgba(0,229,255,0.18), 0 2px 6px rgba(0,0,0,0.15);
  mix-blend-mode:normal;        /* 彩色真图标不能用 multiply（会压黑） */
  filter:none;
}
/* 胶囊内标题与图标对齐；描述在胶囊形态下默认隐藏（见 .tutorial-list 规则） */
.tutorial-list .tutorial-card .tutorial-body > .tut-pill-ico{
  margin:0;                     /* 覆盖 .card-ico-img 的 margin:0 auto 8px */
  width:30px; height:30px; border-radius:7px;   /* 胶囊内图标从 40px 缩到 30px，给标题腾出宽度 */
}

/* 左栏子项的品牌小图标
 * 2026-10-18 张总：图标换成安装器后端各菜单的真图标（彩色 PNG/JPG），
 * 原来的 mix-blend-mode:multiply + brightness(1.5) 是为「白底文字牌 SVG」调的，
 * 彩色真图标走 multiply 会被压暗发黑 → 改回正常混合 + object-fit:cover 圆形头像。 */
.sb-sub-ico{
  width:20px;
  height:20px;
  flex:0 0 auto;
  object-fit:cover;             /* 源图非正方形（184x256~256x236），裁成圆形不变形 */
  border-radius:50%;
  border:1px solid rgba(0,229,255,0.35);
  box-shadow:0 0 5px rgba(0,229,255,0.18);
  mix-blend-mode:normal;        /* 彩色真图标不能用 multiply（会压黑） */
  filter:none;
  margin-right:8px;
  background:rgba(255,255,255,0.06);
}
.sb-sub-item{
  display:flex;
  align-items:center;
}

/* ============================================================
   功能图按钮：直接内嵌内容缩略图（原为纯文字链接外链大图）
   ============================================================ */
.dl-link-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:10px!important;
  width:240px!important;
  padding:10px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,0.06)!important;
  border:1px solid rgba(255,255,255,0.12)!important;
  text-decoration:none!important;
  transition:border-color .22s, transform .22s, background .22s!important;
  vertical-align:top!important;
}
.dl-link-card .dl-thumb{
  display:block;
  width:100%;
  height:132px;
  object-fit:cover;
  object-position:center top;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background:#0b0f18;
}
.dl-link-card .dl-card-txt{
  display:block;
  text-align:center;
  font-size:14px;
  font-weight:600;
  color:#7FE9FF;
  line-height:1.6;
}
.dl-link-card:hover{
  background:rgba(0,229,255,0.10)!important;
  border-color:rgba(0,229,255,0.45)!important;
  transform:translateY(-3px)!important;
}
.dl-link-card:hover .dl-card-txt{ color:#fff; }
/* 两个卡片并排 */
.tutorial-content .dl-link-card{ margin:0 12px 12px 0; }

/* ============================================================
   图片查看器（灯箱）：全屏放大 + 左右切换 + 滚轮查看长图
   ============================================================ */
.imgbox{
  position:fixed;
  inset:0;
  z-index:2000;
}
.imgbox[hidden]{ display:none; }
.imgbox-mask{
  position:absolute;
  inset:0;
  background:rgba(4,7,13,0.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.imgbox-stage{
  position:absolute;
  inset:64px 84px 78px 84px;
  /* 高清模式下图片按原始像素布局，超出部分统一靠拖拽 + transform 定位，
     不用原生滚动条（避免和滚轮缩放冲突） */
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,229,255,0.35) rgba(255,255,255,0.06);
}
.imgbox-stage::-webkit-scrollbar{ width:9px; }
.imgbox-stage::-webkit-scrollbar-thumb{ background:rgba(0,229,255,0.35); border-radius:5px; }
/* 变换容器：负责缩放/平移（transform-origin 0 0 便于按光标缩放） */
.imgbox-canvas{
  transform-origin:0 0;
  will-change:transform;
  cursor:grab;
  display:inline-block;
  position:relative;
}
.imgbox-canvas.dragging{ cursor:grabbing; }
.imgbox-stage img{
  display:block;
  max-width:100%;
  max-height:100%;
  height:auto;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  user-select:none;
  -webkit-user-drag:none;
}
/* 1:1 原始大小：按图片真实像素渲染，超出部分靠拖拽查看 */
.imgbox-canvas.actual img{ max-width:none; max-height:none; }
.imgbox-btn{
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,229,255,0.28);
  background:rgba(8,12,22,0.80);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#BFEAF5;
  cursor:pointer;
  transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.imgbox-btn:hover{
  background:rgba(0,229,255,0.16);
  border-color:rgba(0,229,255,0.6);
  color:#fff;
}
.imgbox-close{
  top:14px; right:16px;
  width:42px; height:42px;
  border-radius:50%;
  font-size:17px;
}
.imgbox-close:hover{ transform:rotate(90deg); }
.imgbox-nav{
  top:50%;
  margin-top:-28px;
  width:52px; height:56px;
  font-size:26px;
  border-radius:14px;
}
.imgbox-prev{ left:16px; }
.imgbox-next{ right:16px; }
.imgbox-nav[hidden]{ display:none; }
.imgbox-prev:hover{ transform:translateX(-3px); }
.imgbox-next:hover{ transform:translateX(3px); }
.imgbox-foot{
  position:absolute;
  left:0; right:0; bottom:0;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:0 20px;
  background:linear-gradient(0deg, rgba(4,7,13,0.92), transparent);
  color:#8FA3B5;
  font-size:13px;
}
.imgbox-cap{ color:#7FE9FF; font-weight:600; }
.imgbox-idx{
  padding:2px 10px;
  border-radius:999px;
  border:1px solid rgba(0,229,255,0.25);
  color:#9AA7BD;
}
.imgbox-tip{ color:#66727f; font-size:12px; }
@media (max-width:960px){
  .imgbox-nav{ display:none; }
  .imgbox-stage{ inset:56px 12px 70px 12px; }
  .imgbox-tip{ display:none; }
}

/* ============================================================
   灯箱加载进度：转圈 + 进度条 + 百分比
   ============================================================ */
.imgbox-loading{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  width:300px;
  padding:26px 22px;
  border-radius:18px;
  background:rgba(8,12,22,0.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(0,229,255,0.22);
  box-shadow:0 18px 50px rgba(0,0,0,0.5);
}
.imgbox-loading[hidden]{ display:none; }
.imgbox-spinner{
  width:38px; height:38px;
  border-radius:50%;
  border:3px solid rgba(0,229,255,0.18);
  border-top-color:#00E5FF;
  animation:imgboxSpin .85s linear infinite;
}
@keyframes imgboxSpin{ to{ transform:rotate(360deg); } }
.imgbox-progress{
  width:100%;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,0.10);
  overflow:hidden;
}
.imgbox-progress-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#00E5FF,#3B82F6);
  box-shadow:0 0 12px rgba(0,229,255,0.55);
  transition:width .18s ease;
}
.imgbox-progress-txt{
  font-size:12px;
  color:#9AA7BD;
  letter-spacing:1px;
}
.imgbox-loading.error .imgbox-spinner{ display:none; }
.imgbox-loading.error .imgbox-progress{ display:none; }
.imgbox-loading.error .imgbox-progress-txt{ color:#FF7A8A; }

/* 其他游戏分类：用发卡网图标替换 emoji */
.game-card .icon.icon-img{
  width:56px;
  height:56px;
  margin:0 auto 12px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  background:#0b0f18;
  display:block;
}
.game-card .icon.icon-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.game-card:hover .icon.icon-img{ border-color:rgba(0,229,255,0.45); }

/* ===== 教程步骤默认全展开，禁止点击收起（2026-10-19）===== */
details.tutorial-step > summary,
details.step-block > summary,
details.tutorial-detail > summary,
details.tutorial-sub-detail > summary {
  pointer-events: none;
  cursor: default !important;
}

/* ===== 菜单总览面板：胶囊列表（终覆盖，解除全局方块卡压制 2026-10-20） ===== */










/* ============================================================
   菜单总览页终覆盖 v75（2026-10-21）
   ① 胶囊列表区：彻底剥掉 L1010/L529 黑色毛玻璃卡与内联 mobile 面板底，
      只保留透明面板 + 胶囊按钮，杜绝"胶囊外套卡片"重叠；
   ② 内容预览区：毛玻璃保留但明显提亮——容器 rgba(0,0,0,.20) 改白色玻璃
      rgba(255,255,255,.06)；iframe 底 #0b0f1a 提亮为 #141b2e；
      embed 子页 body 由 #0A0E17 提亮为 #141b2e，缓解多层深色叠加。
   ============================================================ */








/* 内容预览区：拍平外层卡（2026-10-21）——外框透明，只留内嵌文档自己的 .container 一张卡，
   杜绝「预览卡套内容卡」的双卡叠加 */
main.page-content .content-preview,
.content-preview {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 22px !important;
}
main.page-content .content-preview .cp-head,
.content-preview .cp-head {
  color: #F0F3FA !important;
}
main.page-content .content-preview .cp-frame,
.content-preview .cp-frame {
  background: transparent !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: none !important;
}
/* iframe 内嵌子页：body 透明，避免在预览卡里再垫一层实底（卡片套娃来源之一） */
.embed-mode body {
  background: transparent !important;
}
@media (max-width:520px){
  
  main.page-content .content-preview,
  .content-preview {
    padding: 12px 12px 16px !important;
    border-radius: 16px !important;
  }
  main.page-content .content-preview .cp-frame,
  .content-preview .cp-frame {
    height: 420px !important;
  }
}

/* ============================================================
   CARD MODE 视觉改造 v1
   —— 全部作用域 .app-shell.card-mode，列表模式零影响
   ============================================================ */

/* ---------- D3 顶栏节奏：紧凑竖间距 ---------- */
.app-shell.card-mode{ gap:16px; }

/* ---------- D2 / D3 顶栏：一条横向 strip ---------- */
.app-shell.card-mode .sidebar{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 16px;
  padding:12px 16px;
  width:100%;
  max-width:1200px;
  margin-inline:auto;
}

/* ---------- D4 标题降级为行内小标签 ---------- */
.app-shell.card-mode .sidebar-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  margin:0;
  border-bottom:none;
}
.app-shell.card-mode .sidebar-eyebrow{ display:none; }
.app-shell.card-mode .sidebar-head-row{ gap:6px; }
.app-shell.card-mode .sidebar-title{
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--text);          /* #c8cdd8 */
  white-space:nowrap;
}

/* ---------- D5 视图切换缩成小胶囊 ---------- */
.app-shell.card-mode .sb-view-btn{
  padding:4px 10px;
  font-size:11px;
  border-radius:999px;
}

/* ---------- D8 胶囊导航占满中间并自然换行 ---------- */
.app-shell.card-mode .sidebar-nav{
  flex:1 1 360px;
  flex-direction:row;
  flex-wrap:wrap;
  gap:8px 10px;
  overflow:visible;
}

/* ---------- D8 分类胶囊主样式 ---------- */
.app-shell.card-mode .sb-cat-item{
  flex:0 0 auto;
  padding:7px 15px;
  gap:8px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  color:var(--text);                    /* #c8cdd8 */
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  transition:background .18s ease, border-color .18s ease,
             color .18s ease, box-shadow .18s ease;
}
.app-shell.card-mode .sb-cat-item:hover{
  color:#fff;
  background:rgba(0,229,255,0.06);
  border-color:rgba(0,229,255,0.40);
}
.app-shell.card-mode .sb-cat-item.active{
  color:#fff;
  background:rgba(0,229,255,0.12);
  border-color:rgba(0,229,255,0.55);
  box-shadow:0 0 0 1px rgba(0,229,255,0.30),
             0 4px 14px rgba(0,229,255,0.16);
}

/* ---------- D6 图标去方块底（消灭双层框） ---------- */
.app-shell.card-mode .sb-ico{
  width:22px;
  height:22px;
  font-size:15px;
  background:transparent !important;
  border:0 !important;
  border-radius:7px;
  box-shadow:none !important;
  overflow:visible;
}
/* D7 图片图标去掉额外的青色外圈 */
.app-shell.card-mode .sb-ico.sb-ico-img{
  border:0 !important;
  box-shadow:none !important;
  overflow:hidden;
  border-radius:6px;
}
.app-shell.card-mode .sb-ico.sb-ico-img img{ border-radius:6px; }

/* ---------- D9 分类名：强制单行省略 ---------- */
.app-shell.card-mode .sb-cat-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------- D10 超长分类名：单行 + 上限宽 ---------- */
.app-shell.card-mode .sb-cat-item.sb-cat-wide .sb-cat-name{
  white-space:nowrap;
  font-size:13px;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------- D11 底部链接：右移 + 竖分隔 + 降级 ---------- */
.app-shell.card-mode .sidebar-foot{
  flex:0 0 auto;
  margin:0;
  padding:0 0 0 14px;
  border-top:none;
  border-left:1px solid rgba(255,255,255,0.12);
  justify-content:flex-end;
  gap:6px;
}
.app-shell.card-mode .sidebar-foot .sb-foot-link{
  padding:5px 10px;
  font-size:12px;
  border-radius:999px;
  background:transparent;
  color:#9AA7BD;                        /* 对深底对比 ≈8:1，正文级可读 */
}
.app-shell.card-mode .sidebar-foot .sb-foot-link:hover{
  color:#fff;
  background:rgba(230,57,118,0.14);
}

/* ---------- D1 内容区收窄居中 ---------- */
.app-shell.card-mode #contentPane{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
}

/* ---------- D12 欢迎面板文案切换 ---------- */
.welcome-panel .for-card{ display:none; }
.app-shell.card-mode .welcome-panel .for-list{ display:none; }
.app-shell.card-mode .welcome-panel .for-card{ display:inline; }

/* ---------- ≤960 窄屏适配（详见第 4 节） ---------- */
@media (max-width:960px){
  .app-shell.card-mode{ gap:12px; }
  .app-shell.card-mode .sidebar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px;
    max-width:100%;
  }
  .app-shell.card-mode .sidebar-head{ width:100%; }
  .app-shell.card-mode .sidebar-head-row{ width:100%; justify-content:space-between; }
  .app-shell.card-mode .sidebar-nav{
    flex:1 1 auto;
    width:100%;
    gap:8px;
  }
  .app-shell.card-mode .sb-cat-item{ font-size:13px; padding:6px 12px; }
  .app-shell.card-mode .sb-cat-item.sb-cat-wide .sb-cat-name{ max-width:100%; }
  .app-shell.card-mode .sidebar-foot{
    width:100%;
    padding:10px 0 0;
    border-left:none;
    border-top:1px solid rgba(255,255,255,0.10);
    justify-content:flex-start;
  }
  .app-shell.card-mode #contentPane{ max-width:100%; }
  .app-shell.card-mode .welcome-panel{ padding:44px 18px; }
}

/* ============================================================
   预览区去叠层 v2（2026-10-21）
   现象：总览页「教程内容」预览里卡片套卡片 4-5 层
   （content-preview → iframe 实底 → body 实底 → container 卡
     → tutorial-section 卡 → tutorial-list 卡）
   原则：外层只留 .content-preview 一张卡，内嵌文档只留 .container 一张卡，
        中间实底与 .tutorial-section / .tutorial-list 的重复卡底全部拍平
   ============================================================ */
.embed-mode .tutorial-section{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:none!important;
  box-shadow:none!important;
  padding:0!important;
  margin-top:18px!important;
}
.embed-mode .tutorial-list{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:none!important;
  border-radius:0!important;
  padding:0!important;
  box-shadow:none!important;
}

/* ============================================================
   标题卡去重叠 v3（2026-10-21）：卡片模式下标题卡不再吸顶
   原因：pane-head-card 基础规则是 sticky top:0 + z-999，列表模式已改 static，
        但卡片模式没改——往下滚时标题卡钉在视口顶，内容卡从底下穿过，视觉叠卡
   改法：与列表模式一致改为随页滚动，物理上不可能再与内容卡重叠
   ============================================================ */
.app-shell.card-mode .pane-head-card{ position:static; }

/* ============================================================
   v4（2026-10-21）：.menu-panel 不再当卡片
   根因：右栏「统一卡片 30% 毛玻璃」清单（1013 行起）把 .menu-panel 也算成卡片，
        且带 !important，压过了 .menu-panel{background:transparent} 的容器透明规则
        → ① 胶囊区平时是一整块大板子；② 一悬停整块加深+青边（.menu-panel:hover），
          胶囊之间的空白处也在面板盒内，所以空白处一碰就"冒出卡片"
   改法：胶囊容器保持透明（与 v2/v3 拍平口径一致），卡片只保留真正的卡片元素
   ============================================================ */


/* ============================================================
   v5（2026-10-21）：消除「悬停时冒出矩形阴影卡片」的合成层残影
   现象：鼠标划过胶囊后，胶囊右侧空地会短暂出现一块带直角的半透明矩形
   成因：hover 态的 transform 位移 + backdrop-filter 毛玻璃 + 全屏大背景层
        叠加时，Chromium 合成层局部重绘会留下矩形残影（无 DOM 元素，扫描为空）
   处理：① 交互元素 hover 位移全部取消（保留青色描边/底色反馈，可用性不变）
        ② 右侧快速定位轨去掉毛玻璃，改纯色半透明底，阻断固定层毛玻璃的局部重绘
   ============================================================ */

.tutorial-list .tutorial-card:hover,
main.page-content .tutorial-list .tutorial-card:hover,
.tutorial-grid .tutorial-card:hover,
main.page-content .tutorial-grid .tutorial-card:hover,
.alpha-grid .alpha-card:hover,
main.page-content .alpha-grid .alpha-card:hover,
.index-grid .index-card:hover,
main.page-content .index-grid .index-card:hover,
.cards-grid .card:hover,
main.page-content .cards-grid .card:hover,
.games-grid .game-card:hover,
link-grid .link-card:hover,
.link-grid .link-card:hover,
.card-grid .card:hover,
.tutorial-list .tutorial-card:hover{ transform:none !important; }
.qj-btn,
.qj-btn:hover,
.qj-btn.active{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.qj-btn{ background:rgba(8,12,22,0.88) !important; }

/* ============================================================
   v6（2026-10-21）：胶囊类元素去掉 backdrop-filter —— 悬停矩形残影的真正根因
   证据：探测悬停胶囊计算样式 backdropFilter = blur(6px)，来自 L95-98 的 .menu-item 基础规则
   原理：backdrop-filter 会创建"背景根"，悬停时底色变化触发矩形区域重新采样，
        在立绘/背景图上留下带直角的半透明矩形（看起来像凭空多出一张阴影卡片）
   处理：胶囊类（胶囊按钮/教程卡/分类卡/链接卡…）一律取消毛玻璃；
        胶囊本身是半透明底 + 1px 描边，不依赖模糊也清晰，同时省掉大量合成层
   ============================================================ */
.menu-item,
.tutorial-list .tutorial-card,
.tutorial-grid .tutorial-card,
.alpha-grid .alpha-card,
.index-grid .index-card,
.cards-grid .card,
.games-grid .game-card,
.link-grid .link-card,
.card-grid .card{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
   v7（2026-10-21）：立绘从 background-attachment:fixed 迁到独立固定层
   根因：body 上 background-attachment:fixed 的整屏大图，是 Chromium 局部重绘
        残影的经典来源——页面任意元素悬停换底色时触发该固定背景重新光栅化，
        在原地留下带直角的半透明矩形（贴着悬停位置出现，形似"多出一张阴影卡片"）
   处理：body 只留底色，立绘交给 body::before 这层 position:fixed 的独立合成层，
        视觉完全一致（依然固定不随页滚动），但不再参与内容层的重绘光栅化
   ============================================================ */
body{
  background: #0A0E17 !important;
  background-image: none !important;
  background-attachment: scroll !important;
}


/* ============================================================
   v8（2026-10-21）：无限动画 × 毛玻璃 组合治理（残影三号嫌疑）
   成因：.banner-marquee（blur16 毛玻璃）内含无限跑马灯动画、.nav（blur22 毛玻璃）
        内含无限字浮动动画 —— 动画每帧都在动，毛玻璃每帧都要重新采样背景，
        Chromium 会因此留下陈旧绘制块（贴着悬停位置出现，形似阴影卡片）
   处理：① 跑马灯条改纯色半透明底（0.72），去掉毛玻璃，视觉仍是深色玻璃条
        ② 两个无限动画元素加 will-change:transform，让动画走 GPU 合成层，
          不再驱动毛玻璃层逐帧重采样
   ============================================================ */
.banner-marquee{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(8,12,22,0.72) !important;
}
.banner-marquee span,
.nav-logo-text .tfloat{
  will-change: transform;
}

/* ------------------------------------------------------------
   诊断开关（定位用，可随时保留）：在网址后加 ?nofx=1
   → 关闭立绘层 + 全部毛玻璃 + 无限动画，二分确认残影来源
   例：http://127.0.0.1:8080/index.html?nofx=1
   ------------------------------------------------------------ */
.nofx body::before{ display:none !important; }
.nofx *,
.nofx *::before,
.nofx *::after{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nofx .banner-marquee span,
.nofx .nav-logo-text .tfloat{ animation: none !important; }

/* ============================================================
   v9（2026-10-21）：固定毛玻璃/背景层锁成独立合成层
   现象：悬停胶囊后，胶囊缝隙间偶发一块比周围更暗的矩形（疑似固定层的陈旧瓦片）
   处理：给两个仍会参与重采样的固定层加 translateZ(0)+will-change，
        锁成不再随内容重绘而重新光栅化的独立合成层；视觉零变化
   ============================================================ */
body::before{
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
.sidebar,
.app-shell.card-mode .sidebar{
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* ============================================================
   v10（2026-10-21）：总览页重构为「两张卡」
   卡片①  软件列表 —— 胶囊清单（带标题栏）
   卡片②  教程内容 —— 内容预览（带标题栏，返回按钮在此卡内）
   原则：整页只有这两张卡；卡片本身无 hover 变化（不再"一碰就亮卡"）；
        预览 iframe 内的子页容器不再另起卡片（.in-preview 由 content-loader 打标）
   ============================================================ */

/* ---------- 卡片通用外观 ---------- */
main.page-content .content-preview, .content-preview{
  background: rgba(8,12,22,0.52) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.34) !important;
}
/* 卡片自身不响应 hover，杜绝"鼠标一扫整块亮起" */
main.page-content .content-preview:hover, .content-preview:hover{
  background: rgba(8,12,22,0.52) !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.34) !important;
}

/* ---------- 卡片①：软件列表 ---------- */



/* ---------- 卡片②：教程内容 ---------- */
main.page-content .content-preview,
.content-preview{
  margin-top: 18px !important;
  padding: 16px 18px 18px !important;
}
main.page-content .content-preview .cp-head,
.content-preview .cp-head{
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #E6EDF5 !important;
  letter-spacing: .6px !important;
}
main.page-content .content-preview .cp-tip,
.content-preview .cp-tip{ color: #8B93A8 !important; font-size: 12px !important; }
main.page-content .content-preview .cp-frame,
.content-preview .cp-frame{
  background: transparent !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  display: block !important;
}

/* ---------- 预览内子页不再另起卡片（.in-preview 由 content-loader 在 cp-frame 内打标） ---------- */
.in-preview main.page-content > .container{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 2px 4px 0 !important;
  margin: 0 !important;
}
.in-preview .tutorial-section,
.in-preview .tutorial-list,
.in-preview .tutorial-content{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---------- v10b：卡片不透明度微调（内容可读性优先） ---------- */
main.page-content .content-preview, .content-preview{
  background: rgba(8,12,22,0.68) !important;
}
main.page-content .content-preview:hover, .content-preview:hover{
  background: rgba(8,12,22,0.68) !important;
}

/* ---------- v10c：两张卡差异化不透明度（列表通透 / 内容可读） ---------- */

main.page-content .content-preview,
.content-preview,
main.page-content .content-preview:hover,
.content-preview:hover{ background: rgba(8,12,22,0.88) !important; }

/* ---------- v10d：两张卡去掉毛玻璃（不透明度已足够，毛玻璃只会拖累合成） ---------- */
main.page-content .content-preview, .content-preview{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
   v11（2026-10-21）：内嵌预览页不再重复绘制立绘层 —— 悬停矩形残影的真正源头
   背景：v7 把立绘迁到 body::body::before（position:fixed 独立层），
        但这条规则对【内嵌在 cp-frame 里的子页】同样生效 —— iframe 于是又画了一层立绘，
        于是同一屏出现两层固定背景层：① 内容卡里的立绘糊住正文、可读性崩掉；
        ② 两层固定层与毛玻璃叠加时产生"悬停时冒出矩形阴影卡片"的合成残影。
   处理：内嵌页（.embed-mode）与预览上下文（.in-preview）一律不画立绘层，
        立绘只由最外层壳页绘制一次。
   ============================================================ */
.embed-mode body::before,
.in-preview body::before{ display: none !important; }

/* ============================================================
   v12（2026-10-21）：内容卡自适应高度（修"滚动到内容时变形"）
   问题：.cp-frame 被写死 height:520px —— 短教程下方留几百像素空白，
        长教程则框内二次滚动，外层页面与内层框两套滚动，视觉上像"变形"
   改法：内容框不再写死高度，改为由子页上报真实内容高度（content-loader 已按消息
        来源把高度套到对应 iframe），并保留最小高度，长短内容都自然撑开
   ============================================================ */
main.page-content .content-preview .cp-frame,
.content-preview .cp-frame{
  /* 初始高度（不加 !important）：子页上报真实高度后由行内高度接管 */
  height: 520px;
  min-height: 300px;
}

/* ---------- v12b：修正自适应高度的优先级 ----------
   v12 用了 height:auto!important，反而把 JS 上报的行内高度一起压掉，
   长教程会被裁到 min-height。改为：CSS 只给"初始高度"（不加 !important），
   子页上报后由行内高度接管，短教程贴合、长教程完整展开。 */
main.page-content .content-preview .cp-frame,
.content-preview .cp-frame{
  height: 520px;
  min-height: 300px;
}

/* ============================================================
   v14（2026-10-21）：总览页取消独立标题卡 —— 整页只剩两张卡
   页面结构：顶部分类条 → ①软件列表卡 → ②教程内容卡
   fetch 模式下标题由 wrapHeadCard 包成 .head-card（面包屑+标题+副标题），
   这里按"含 .menu-panel 的总览页"精确隐藏；子页与独立打开的页面标题卡照旧
   ============================================================ */
.app-shell .page-content:has(.content-preview) .head-card, main.page-content:has(.content-preview) .head-card{
  display: none !important;
}


/* ---------- v15：列表卡对比度微调（亮背景下胶囊更清晰） ---------- */


/* ============================================================
   v16（2026-10-21）总览页收口修复
   用户实拍暴露两个问题：① 顶部还残留一条"覆盖传承版 & 增强版 · 持续更新"页头；
                ② 「← 返回」按钮出现在【软件列表卡】右上角（应为内容卡专用，且不该重复）
   根因：页头可能未被 wrapHeadCard 包成 .head-card（裸 .page-header/.breadcrumb 漏网）；
        返回按钮由内嵌模式注入到"页面容器"，绝对定位落在整页右上角 = 列表卡右上角
   处理（全部 CSS 层，不依赖 JS 版本）：
        - 总览页的 .head-card / .page-header / .breadcrumb 一律隐藏
        - 总览页与内嵌预览里的 .pane-back-btn 一律隐藏（不再出现任何返回按钮）
        - 返回按钮曾给宿主加的 58px 顶部留白（.qi-has-back）同步归零
   ============================================================ */
.app-shell .page-content:has(.content-preview) .head-card, .app-shell .page-content:has(.content-preview) .page-header, .app-shell .page-content:has(.content-preview) .breadcrumb, main.page-content:has(.content-preview) .head-card, main.page-content:has(.content-preview) .page-header, main.page-content:has(.content-preview) .breadcrumb{
  display: none !important;
}

.app-shell .page-content:has(.content-preview) .pane-back-btn, main.page-content:has(.content-preview) .pane-back-btn, .embed-mode .pane-back-btn, .in-preview .pane-back-btn{
  display: none !important;
}

.qi-has-back:has(.content-preview), .embed-mode .qi-has-back:has(.content-preview), .in-preview .qi-has-back:has(.content-preview){
  padding-top: 0 !important;
}

/* ============================================================
   v17（2026-10-21）：取消一切"跟随鼠标"的视觉反馈
   依据用户录屏：① 顶部导航玻璃条上有一团 360px 径向高光跟随指针（--mx/--my），
        鼠标上下移动时高光在条上滑动 —— 观感就是"卡片在变形"；
        ② 右侧固定悬浮轨（顶部/教程/底部）hover 会 translateX(-3px)、整条还会
           translateX(16px) 滑入滑出，同样是"鼠标一动卡片就变形"，且压在内容右侧。
   处理：① 导航高光改为静态渐变（保留玻璃质感，去掉跟手光斑）；
        ② 右侧悬浮轨整条移除（功能上顶部导航与滚动已足够）。
   ============================================================ */
nav:not(.sidebar-nav){
  background: linear-gradient(135deg,
    rgba(10,14,23,0.92) 0%,
    rgba(18,26,48,0.85) 100%) !important;
}


/* ---------- v17b：购买按钮的跟手光点也改为静态（不再随指针滑动） ---------- */
.nav-buy-btn::after{
  content:'' !important;
  position:absolute !important;
  left:50% !important; top:50% !important;
  transform:translate(-50%,-50%) !important;
  background:radial-gradient(circle, rgba(255,255,255,0.30), transparent 62%) !important;
  opacity:0 !important;
  transition:opacity .25s ease !important;
  pointer-events:none !important;
}
.nav-buy-btn:hover::after{ opacity:1 !important; }

/* ============================================================
   v18（2026-10-21）：去掉两张卡的外框 —— 页面变成纯内容、无卡片感
   ① 软件列表卡：去底色/描边/圆角/阴影/内边距，只留「软件列表」标题行 + 胶囊
   ② 教程内容卡：同上，只留「教程内容」标题行 + 正文
   ③ 补偿：正文直接压在立绘上会降低可读性 → 给内嵌正文加文字投影
   ============================================================ */
main.page-content .content-preview, .content-preview, main.page-content .content-preview:hover, .content-preview:hover{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* 两块内容之间用留白分区，不再用卡片 */
main.page-content .content-preview,
.content-preview{
  margin-top: 30px !important;
}
/* 标题行保留（不再是卡片内标题，而是分节标题） */

main.page-content .content-preview .cp-head,
.content-preview .cp-head{
  border-bottom-color: rgba(255,255,255,0.14) !important;
}
/* 正文直接压在立绘上 → 文字投影保证可读 */
.in-preview main.page-content,
.in-preview main.page-content p,
.in-preview main.page-content li,
.in-preview main.page-content h1,
.in-preview main.page-content h2,
.in-preview main.page-content h3,
.in-preview main.page-content .tutorial-title{
  text-shadow: 0 1px 7px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.6) !important;
}

/* ---------- v18b：内容区加"无框暗纱"，去掉卡片后仍可读 ---------- */
.app-shell .page-content{
  position: relative !important;
  isolation: isolate;
}
.app-shell .page-content::before{
  content: '' !important;
  position: absolute !important;
  left: 0; right: 0; top: -18px; bottom: 0;
  background: linear-gradient(180deg,
    rgba(10,14,23,0.42) 0%,
    rgba(10,14,23,0.62) 18%,
    rgba(10,14,23,0.72) 100%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* 胶囊在暗纱上稍微加重，保证清晰 */


/* ---------- v18c：暗纱改为全宽渐隐，左右不出边、顶部柔和过渡 ---------- */
.app-shell .page-content::before{
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  transform: translateX(-50%) !important;
  top: -26px !important;
  background: linear-gradient(180deg,
    rgba(10,14,23,0) 0%,
    rgba(10,14,23,0.34) 10%,
    rgba(10,14,23,0.60) 26%,
    rgba(10,14,23,0.70) 100%) !important;
}

/* ---------- v18d：暗纱上半部再压深一点（立绘亮部仍偏亮） ---------- */
.app-shell .page-content::before{
  background: linear-gradient(180deg,
    rgba(10,14,23,0) 0%,
    rgba(10,14,23,0.52) 8%,
    rgba(10,14,23,0.70) 22%,
    rgba(10,14,23,0.76) 100%) !important;
}

/* ============================================================
   v19：用 JS 打的 .is-overview 类接管总览页规则（不依赖 :has()）
   背景：部分浏览器不支持 CSS :has()，导致总览页的标题卡、返回按钮又冒出来
   ============================================================ */
.is-overview .head-card,
.is-overview .page-header,
.is-overview .breadcrumb,
.is-overview .pane-back-btn{
  display: none !important;
}
.is-overview .qi-has-back{ padding-top: 0 !important; }

/* ============================================================
   v19b：背景立绘处理 —— 画里左侧那台"显示器"是天然长方形，
        缩放后像两张大卡片阴影贴着内容两侧。
   处理：① 轻微高斯模糊，让它退成景深而不是硬边矩形
        ② 焦点右移，把显示器推出画面主要视野
        ③ 整体降亮 4%，进一步压掉两侧暗块的突兀感
   ============================================================ */


/* ---------- v19c：背景景深加强（缩放后图片恰好铺满宽度，移动焦点无效，
              改用更强模糊把"显示器矩形"化成柔光，同时保留人物主体） ---------- */


/* ============================================================
   v20：背景画彻底"退场" —— 强景深 + 两侧暗角
   用户多次圈出左右两条竖向暗块（画中显示器与人物暗部的边界），
   像两张大卡片阴影。处理：
     ① 背景模糊 10px + 降亮降饱和 → 只剩柔和色块，不再有可辨识形状
     ② 新增 body::after 暗角层（左右压暗、中间留亮）→ 竖向暗块直接融进暗部
   ============================================================ */



/* ---------- v20b：背景画彻底化为色雾（形状全无，只留色调） ---------- */


/* ============================================================
   v21（2026-10-21）：页面背景立绘整层移除 —— 换成纯渐变
   起因：用户要删的是"右侧那条竖向阴影"（背景画在内容列右侧露出的暗带），
        我上一版却把整张立绘模糊 → 全局变糊，等于把问题放大了。
   本版做法最直接：① 立绘层 body::before 彻底不画；
                  ② 暗角层 body::after 一并撤掉；
                  ③ 页面底色换成干净的深色渐变 + 顶部青色微光；
                  ④ 内容区那层"暗纱"改成柔和青色辉光（无硬边、无暗块）。
   顶部 Hero 立绘不受影响（站点识别度保留）。
   ============================================================ */




/* 内容区：暗纱 → 柔和青色辉光（没有边界，不会再像阴影块） */
.app-shell .page-content::before{
  background: radial-gradient(900px 420px at 50% 0%,
    rgba(0,229,255,0.10) 0%,
    rgba(0,229,255,0.03) 45%,
    rgba(0,229,255,0) 75%) !important;
}

/* ============================================================
   v22（2026-10-21）：恢复背景立绘 —— 用"均匀压暗"代替"局部模糊/整层删除"
   回顾：
     · v19b~v20b 用逐级加模糊去处理那条竖暗带 → 用户反馈"全局都是阴影模糊"
     · v21 干脆把立绘层删了 → 用户问"我背景图怎么没了"
   根因复盘：
     那条竖暗带不是 CSS 画出来的，是背景画里那台"显示器"本身的轮廓。
     模糊它 = 让整张图变糊；删掉它 = 背景图消失。两条路都不对。
   本版做法：
     ① 立绘层 body::before 原样恢复（cover、居中、不模糊、不放大变形）
     ② 用 body::after 盖一层**均匀无渐变**的深色 → 全图统一压暗，
        没有中间亮/两边暗的落差，竖暗带就不会被"衬"出来（无边界=无暗带感）
     ③ 立绘透明度 0.60，退成景深底色，画面仍能看出人和色调
     ④ 顶部青色辉光保留
   → 想看原始未压暗的图：网址后加 ?bgfull=1
   ============================================================ */
body::before{
  display: block !important;
  content: '' !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  background: url('images/bg.webp') no-repeat center center !important;
  /* v25（15:28）：用户要求"背景改清楚，不要暗黑"
     · 不再压对比度（contrast 0.78 会让画面发灰、不够清楚）→ 恢复 1.0
     · 只做轻微提亮 + 提饱和，让画面更通透鲜亮
     · opacity 拉到 1.0，背景图完整呈现，不透明不压暗 */
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: scroll !important;
  filter: brightness(1.12) saturate(1.08) !important;
  transform: translateZ(0) !important;
  opacity: 1 !important;
  z-index: -2 !important;
  pointer-events: none !important;
}

/* 压暗层：v25 大幅撤掉 —— 只在最顶部留一点（防止 Hero 大图与背景人物重影），
   中下部几乎完全放开，背景原样呈现。
   纵向渐变，不会产生左右竖暗条。 */
body::after{
  display: block !important;
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background: linear-gradient(180deg,
    rgba(8,11,18,0.46) 0%,
    rgba(8,11,18,0.26) 14%,
    rgba(8,11,18,0.12) 28%,
    rgba(8,11,18,0.07) 55%,
    rgba(8,11,18,0.05) 100%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* 底色：垫在立绘更下面，防止图片加载间隙闪白
   ⚠ 关键：body 必须 transparent！
   html 一旦有不透明背景，body 背景就不再"传播"到画布，而是由 body 自己绘制实色，
   这层实色会盖在 z-index 为负的 body::before 立绘【上面】→ 背景图被彻底遮住。
   现象就是"计算样式全对、图片也 200 加载成功，但屏幕纯黑"。 */
html{
  background: #0A0E17 !important;
}
body{
  background: transparent !important;
}

/* 内容区柔和青色辉光（v21 保留） */
.app-shell .page-content::before{
  background: radial-gradient(900px 420px at 50% 0%,
    rgba(0,229,255,0.10) 0%,
    rgba(0,229,255,0.03) 45%,
    rgba(0,229,255,0) 75%) !important;
}

/* 诊断：?bgfull=1 时还原未压暗的原图，方便对比确认压暗程度 */
html.bgfull body::after{ background: transparent !important; }
html.bgfull body::before{ opacity: 1 !important; filter: none !important; }

/* ============================================================
   v23（2026-10-21）：内容列垫底 —— 背景图可见，但正文不能被背景"顶"住
   实测数据（v22 截图）：左侧背景亮度 56.6、右侧 63.5，
   而软件列表内容区只有 44.9 —— 内容比背景还暗，视觉上就被压住了，
   截图里表现成"图标和文字发浮、发糊"。
   处理：给内容列垫一层深色底，让内容区(约24)明确暗于背景(约60)，
        形成"背景 → 内容画布 → 文字"的三层关系。
   关键：底的左右两端做 **6% 羽化到透明**，是一整块无边框、无圆角、
        无阴影的连续画布，边缘柔和渐变进背景 —— 不会变成卡片，也没有硬切线。
   ============================================================ */
/* ============================================================
   v25b（15:29）：内容列底跟着放开
   背景提亮后，内容列原来 0.62 的深色底在亮背景上变成一块硬"黑斑"，
   反而成了页面上最暗的地方（用户说"不要暗黑"，指的就是这种压黑感）。
   处理：① 内容列底 0.62 → 0.34，与背景亮度接近，不再形成黑斑；
        ② 软件列表胶囊自身底色加重(0.10→0.22)，靠胶囊保证图标和文字的对比，
           而不是靠一整块大暗底 —— "局部小暗块"不会显得整页暗。
   ============================================================ */
#contentPane,
main.page-content{
  background: linear-gradient(90deg,
    rgba(8,11,18,0)    0%,
    rgba(8,11,18,0.34) 5%,
    rgba(8,11,18,0.34) 95%,
    rgba(8,11,18,0)    100%) !important;
}

.app-shell.card-mode .sidebar{
  background: linear-gradient(90deg,
    rgba(8,11,18,0)    0%,
    rgba(8,11,18,0.30) 4%,
    rgba(8,11,18,0.30) 96%,
    rgba(8,11,18,0)    100%) !important;
}

/* 胶囊加重：用小块不透明感换回可读性 */


/* ============================================================
   v26（15:36）：删除右栏顶部标题卡
   用户截图要求："标题卡片删掉，不需要"
   该卡 = index.html 里的 #paneHead.pane-head-card（面包屑 ph-crumbs
   + 标题 ph-title + 副标题 ph-sub 三行），由 content-loader.js 动态填充。
   处理：整块 display:none。JS 逻辑保留（它只在类名/属性上做增删，无害），
        这样以后想恢复只需删掉这一条规则，不用改 JS。
   ============================================================ */
.pane-head-card,
#paneHead{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* 子页自带的 page-header 标题块（H1 + 副标题）一并去掉，
   避免标题卡删了以后 iframe 里又冒出一个同样的标题 */
.app-shell .head-card{
  display: none !important;
}

/* ============================================================
   v27（15:41）：软件列表恢复为独立卡片，与下方内容明确分开
   用户截图指令："软件列表单独一个卡片，不和别的卡片重叠和挨着"
   背景：v18 曾按用户要求把「两张卡」外框全去掉；现在只把
        ① 软件列表（.menu-panel）恢复成卡片，② 教程内容保持无框。
   处理：
     · 软件列表：深色底 + 细描边 + 20px 圆角 + 柔和投影 + 内边距
     · 与上方分类胶囊条：留 24px 间距
     · 与下方教程内容：留 32px 间距（明确不挨着、不重叠）
     · 卡片自身不响应 hover（避免又出现"鼠标一扫整块亮"）
     · 不用毛玻璃（v10d 已验证毛玻璃只会拖累合成还容易出残影）
   ============================================================ */


/* 卡片自身不响应 hover，杜绝"鼠标一扫整块亮起" */


/* 卡片内标题行：与卡片左右内边距对齐，分隔线铺满卡内宽度 */


/* 教程内容：与软件列表卡之间留出明确间距（28px），确保不挨着 */
main.page-content .content-preview,
.content-preview{
  margin-top: 32px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ============================================================
   v28（15:46）：教程内容整块先不显示
   用户指令："教程内容先不显示，把教程内容的卡片删掉"
   对象：总览页的 .content-preview（#contentPreview）
        —— 仅出现在 agency.html / gta5.html / rdr2.html 等总览页，
           内含 .cp-head 标题栏 + .cp-frame 内嵌教程预览框。
        详情页（点进具体教程）没有这个块，不受影响。
   处理：整块 display:none，连外框、标题栏、iframe 一并移除，
        软件列表卡片下方不再有任何内容与留白。
   → 想恢复：删掉这一条规则即可，JS 逻辑完全没动。
   ============================================================ */


/* ============================================================
   v29（2026-10-21）：软件列表卡片稳定化（修"鼠标移动时卡片乱抖"）
   用户反馈："软件列表卡片不稳定，鼠标移动时，卡片乱抖"

   【根因（三个叠加）】
   ① 胶囊 hover 带位移动画
      `.menu-item:hover{ transform: translateY(-1px) }`
      + transition 含 transform。鼠标在胶囊之间扫过时，一排胶囊依次
      进入/退出 0.25s 位移动画，整块区域一直在动 → "乱抖"。
   ② 卡片底是半透明 rgba(8,12,22,0.74)
      胶囊每帧位移，卡片就得每帧重新与下层背景图做混合，
      重绘成本高且边缘（圆角+阴影）容易出现亚像素闪动。
   ③ 卡片没有独立合成层
      子元素一动，整块卡片（圆角 + 大范围 box-shadow）跟着重绘。

   【处理】
   ① 胶囊：彻底取消位移动画，transform 恒为 none
      transition 只保留颜色类属性（background-color / border-color / color），
      颜色过渡不会移动任何像素，视觉上只变亮不变位。
   ② 卡片底改**不透明** #0B1220：不透明 = 不参与背景混合 = 重绘不会闪。
   ③ 卡片提升为独立合成层（translateZ(0) + isolation:isolate），
      胶囊内部的任何变化都被限制在卡片层内，不再牵动整页。
   ④ 去掉 v10 那条"卡片自身 :hover 换同色"的规则
      —— 同值覆盖毫无作用，但每次进入都会触发一次整卡重绘，纯负担。
   ⑤ 胶囊加 backface-visibility:hidden，消除圆角胶囊在亚像素下的边缘抖动。
   ============================================================ */

/* ---------- 卡片本体：不透明 + 独立合成层 ---------- */


/* 卡片自身不因鼠标进入而重绘（同值 hover 规则纯属负担，显式压掉） */


/* ---------- 胶囊：取消一切位移，只保留颜色过渡 ---------- */








/* 胶囊内子元素也不参与位移/过渡 */


/* 网格行高固定，避免 hover 时行高微变引起的重排 */


/* ============================================================
   v30（2026-10-21）：彻底修掉"鼠标一碰卡片就塌"（乱抖的真正原因）
   ——— 上一版 v29 只改了胶囊位移，真正的问题是**卡片自身的 hover 态被改了结构**———

   【实测证据（CDP 真实鼠标事件逐帧采样）】
   静止时：卡片 rect = 1188×343，padding = 18px 20px 20px，border 1px，radius 20px
   鼠标进入：卡片 rect = 1188×253（矮了 90px），padding = 0px，border none，radius 0
   鼠标移出：恢复 1188×343
   → 卡片高度在 343 ↔ 253 之间反复跳 90px，内容整体位移 19~21px，
     这就是用户看到的"鼠标移动时卡片乱抖"。

   【根源】
   文件里 v4 与 v18 两块旧规则把 **非 hover 与 hover 合并写在同一个选择器组**里：
     `main.page-content .menu-panel, main.page-content .menu-panel:hover{ padding:0!important; ... }`
   其中 `:hover` 那条多一个伪类，权重高于后来任何"非 hover"的规则，
   于是鼠标一进入卡片，padding/border/border-radius/背景全部被清零，
   移出又恢复 → 每进出一次就重排一次。

   【修法】
   在本文件最末尾，用**同为 :hover 的完整选择器组**把两种状态写成完全相同的值。
   权重相同、位置最后 → 稳定覆盖上述旧规则。此后鼠标进出卡片，
   计算样式中的 padding / border / radius / background / shadow 全部恒定，
   不会再有任何重排或重绘跳变。
   ============================================================ */



/* 未悬停与悬停的间距也锁成一致（旧规则用 :has() 把 margin-top 归零，
   这里同权重覆盖为 24px，且在文件末尾；不支持 :has() 的浏览器本来走 24px，
   两边结果统一，不会出现"我的截图有间距、你那边没有"的差异） */


/* 兜底：即便某条旧规则命中，也保证 hover 前后 padding 不被清零 */


/* ============================================================
   v31（2026-10-21）：软件列表卡片改「透明 + 毛玻璃半透明」，去掉层叠感
   用户截图反馈："这个卡片看着有好多层，卡片背景改成透明，毛玻璃半透明"

   【为什么之前看着像好几层】
   实测像素剖面（对用户截图做横向/纵向扫描）：
     · 卡片内部  rgb(11,18,32)  ← #0B1220 实色底（v29 为防抖改的）
     · 卡片外圈  rgb(8,12,23)   ← 更深的 "第二圈"
     外圈并不是另一个元素（.container 实测 rgba(0,0,0,0) 完全透明），
     而是卡片自己的 box-shadow `0 10px 30px rgba(0,0,0,.34)` 压在深背景上
     形成的暗圈 → 视觉上就是"卡外面还有一层"。

   【本版处理】
   ① 背景改半透明 rgba(10,16,28,0.28)：不再是实心黑块，背景能透上来
   ② 加毛玻璃 backdrop-filter: blur(20px) saturate(150%)：透上来的背景被磨砂化，
      形成高级的玻璃质感，而不是单纯变透看不清
   ③ 去掉 box-shadow：消掉那圈"第二层"暗影，层次感立刻减少
   ④ 边框保留 1px 白色 16%（毛玻璃需要有边，不然边界糊掉）
   ⑤ 不加 transform/will-change：毛玻璃自身就会建立合成层，
      额外加位移类属性反而可能让 backdrop-filter 采样异常
   ⑥ 仍然 transition: none，hover 与常态所有属性完全一致（不抖）

   【抖动防御保留】
   v30 的做法（把 :hover 与非 :hover 写进同一组、值完全相同）继续沿用，
   所以鼠标进出卡片时 padding/border/radius/背景/滤镜全部恒定，
   毛玻璃的采样区域也不会变化 —— 不会重新引入抖动。
   ============================================================ */



/* 标题行的分隔线与青色竖条在半透明底上略加强，保证仍看得清 */


/* 卡片内的胶囊同步减轻：原来是不透明感较强的深色块，
   压在毛玻璃上会显得"卡里又套了一层"，改成更通透的浅色玻璃 */



/* ============================================================
   v32（2026-10-21）：软件列表胶囊对齐顶部「教程分类」胶囊
   用户截图指令：\"改成和上面的教程列表一样效果\"

   【实测对比（CDP getComputedStyle，同为卡片模式 1920 视口）】
   | 属性     | 顶部教程分类 .sb-cat-item | 软件列表 .menu-item | 处理 |
   |----------|--------------------------|---------------------|------|
   | 高度     | 38px                     | 44px                | 对齐 |
   | padding  | 7px 15px                 | 9px 16px            | 对齐 |
   | 底色     | rgba(255,255,255,0.05)   | rgba(255,255,255,0.07) | 对齐 |
   | 边框     | 1px 白 12%               | 1px 白 12%          | 已相同 |
   | 圆角     | 999px                    | 999px               | 已相同 |
   | 名称字号 | 13.5px / 600             | 13px / 700          | 对齐 |
   | 文字色   | rgb(200,205,216)         | #E6EDF5             | 对齐 |
   | 图标     | 22×22 无边框无光晕        | 24×24 青边 + 双光晕  | 对齐尺寸、弱化描边 |
   | hover    | 只变边框为青 35% + 文字白 | 底色变青 + 上浮      | 对齐 |
   | active   | 青底 12% + 青边 55% + 双层发光 | 青底 16% + 单层发光 | 对齐 |
   | 间距     | gap 8px 10px             | gap 10px            | 对齐 |
   | 过渡     | 颜色四项 .18s            | 颜色三项 .18s       | 对齐 |

   原则：只让「胶囊」这一层变成分类条的样子；卡片外壳（透明毛玻璃）
        保持用户上一轮明确要求的效果，不动。
   ============================================================ */

/* ---------- ① 胶囊外壳 ---------- */


/* ---------- ② 名称：字号 / 字重 / 颜色对齐 ---------- */


/* ---------- ③ 图标：对齐 22×22，去掉青色描边与光晕 ---------- */


/* ---------- ④ hover：只变边框与文字，底色不动（与分类完全一致） ---------- */



/* ---------- ⑤ 选中态：青底 + 青边 + 双层发光（照抄分类的 active） ---------- */



/* ---------- ⑥ 「教程 / 下载」小标签：去色块，退成淡灰小字 ----------
   顶部教程分类里没有这种小标签，原来是粉底彩字块（10px 粉色胶囊），
   压在圆角胶囊里会显得"胶囊里又套了个小胶囊"，层次过多。
   改成无底、11px、白色 42% —— 结构上和顶部一样是"图标 + 名称"两段。 */



/* ---------- ⑦ 网格间距对齐分类条（gap 8px 10px） ---------- */


/* ============================================================
   v33（2026-10-21）：教程内容恢复，并成为「软件列表」下方的第二张卡片
   用户指令：「在下面在加一个卡片，用来显示软件教程」

   背景：v28 曾按用户要求把这块整块隐藏（display:none!important，选择器含
        ID `#contentPreview`，权重 1,0,0）。所以本块必须同样带上
        `#contentPreview` 且写在文件最末尾，才能压过 v28。

   对象：总览页（gta5.html / rdr2.html / agency.html）的
        .content-preview = .cp-head 标题行 + .cp-frame 内嵌教程 iframe。
        详情页没有这个块，不受影响。

   设计：与上方软件列表卡完全同规格 —— 同底色、同毛玻璃、同圆角、同描边、
        同标题行（3px 青色竖条 + 底部细线 + 15px/700 字）。
        两卡之间 32px 间距，明确分开不贴合。

   高度：.cp-frame 的 height 一律不加 !important ——
        实际高度由 content-loader.js 按子页上报的消息写行内样式接管
        （v12 踩过坑：加了 !important 反而把长教程裁到固定高度）。
   ============================================================ */

/* ---------- ① 卡片外壳：恢复显示 + 与软件列表卡同款毛玻璃 ---------- */
main.page-content .content-preview,
.content-preview,
#contentPreview{
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 32px 0 0 !important;          /* 与上方软件列表卡拉开 32px，不贴合 */
  padding: 18px 20px 20px !important;   /* 与 .menu-panel 完全一致 */

  background: rgba(10, 16, 28, 0.28) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;

  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  border-radius: 20px !important;
  box-shadow: none !important;          /* 与软件列表卡一致：不用阴影，避免"第二层外壳" */

  position: relative !important;
  z-index: 1 !important;
  transition: none !important;          /* 卡片本身不参与过渡 → 无重绘抖动 */
}

/* hover 与常态锁成完全一致（沿用 v30 防抖做法） */
main.page-content .content-preview:hover,
.content-preview:hover,
#contentPreview:hover{
  background: rgba(10, 16, 28, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
}

/* ---------- ② 标题行：与「软件列表」标题行同规格 ---------- */
main.page-content .content-preview .cp-head,
.content-preview .cp-head,
#contentPreview .cp-head{
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 0 15px !important;
  padding: 0 0 13px 11px !important;    /* 左 11px 对齐竖条，与 .menu-panel::before 一致 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-left: 3px solid var(--cyan) !important;   /* 青色竖条，标题行的统一标识 */
  font: 700 15px/1.2 'Segoe UI','Microsoft YaHei',sans-serif !important;
  letter-spacing: .6px !important;
  color: #E6EDF5 !important;
}

main.page-content .content-preview .cp-tip,
.content-preview .cp-tip,
#contentPreview .cp-tip{
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #8B93A8 !important;
  letter-spacing: 0 !important;
}

/* ---------- ③ 内嵌教程框：透明、无边框，高度交给 JS ---------- */
main.page-content .content-preview .cp-frame,
.content-preview .cp-frame,
#contentPreview .cp-frame{
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  display: block !important;
  /* height 不写 !important —— 由 content-loader.js 写行内高度 */
}

/* ============================================================
   v34（2026-10-21）：内嵌教程页去掉自己的底色，让外层卡片的毛玻璃透上来
   ——— v33 把「教程内容」做成卡片后，卡② 内部是一块死黑，与卡① 的玻璃底不一致 ———

   【实测证据（CDP 读 iframe 内部计算样式）】
     iframe html class = "embed-mode in-preview"
     html.embed-mode.in-preview  →  bg = rgb(10, 14, 23)      ← 元凶
     body / .container           →  rgba(0,0,0,0) 透明
     main.page-content           →  bg 透明但有 background-image（v23 的内容列渐变底）

   【根因】
   v22 为了让背景图不被 body 实色挡住，给 `html` 加过 `background:#0A0E17`。
   这条规则对 iframe 里的子页同样生效 —— 子页 html 铺满深色实底，
   于是卡片② 内部就是一块黑，把外层毛玻璃完全遮住。

   【处理】
   只在「内嵌上下文」（.embed-mode / .in-preview，由 content-loader.js 打标）
   把 html / body / 内容列的背景清空。正常打开的独立页面不受影响，
   html 底色照旧保留（防图片加载间隙闪白）。
   ============================================================ */

/* html：内嵌上下文不要任何底色 */
html.embed-mode,
html.in-preview,
html.embed-mode body,
html.in-preview body{
  background: transparent !important;
  background-image: none !important;
}

/* 内容列：内嵌上下文不要 v23 那层渐变垫底（否则卡内又暗一层） */
html.embed-mode main.page-content,
html.in-preview main.page-content,
html.embed-mode #contentPane,
html.in-preview #contentPane{
  background: transparent !important;
  background-image: none !important;
}

/* 内容列的柔光层也一并去掉，避免卡内出现一圈亮斑 */
html.embed-mode .page-content::before,
html.in-preview .page-content::before{
  display: none !important;
}

/* ============================================================
   v35（2026-10-21）：总览页去掉内容列的「左右向」渐变垫底
   ——— 两张卡改成毛玻璃后，这层渐透过玻璃显形，卡片左半发暗、右半发亮 ———

   【实测证据（截图逐点采样，同一行 y）】
     卡①  x=380 →(29,28,107)   x=1520 →(135,76,99)
     卡②  x=380 →( 6,12,26)    x=1520 →( 99,66,78)
   两张卡内部都是「左极暗 → 右较亮」的一致走向，说明不是卡片自己的问题，
   而是下面垫着的同一层左右渐变。

   【来源】
   v23/v25 给 `#contentPane` 与 `main.page-content` 加过
   `linear-gradient(90deg, 0 → 0.34 → 0.34 → 0)`（左右 5% 羽化的内容列垫底）。
   当时正文直接铺在背景图上，需要这层压暗保证可读；
   现在正文已经装进毛玻璃卡片里，这层反而在卡片内部制造明暗落差。

   【处理】
   总览页（content-loader 已打 .is-overview）把内容列垫底清空；
   详情页没有卡片，正文仍直接铺在背景上，**保留**垫底不影响可读性。
   `#contentPane` 是外壳容器，本身不承载正文，一并清空。
   ============================================================ */

#contentPane{
  background: transparent !important;
  background-image: none !important;
}

main.page-content.is-overview{
  background: transparent !important;
  background-image: none !important;
}

/* 总览页内容列的柔光层也去掉：卡片内部不需要额外辉光 */
main.page-content.is-overview::before{
  display: none !important;
}

/* ============================================================
   v36（2026-10-21）：内嵌教程框贴合内容高度，消掉底部空白
   【证据】.cp-frame 行内高度 = 230px（content-loader 按子页上报写入），
          但实际渲染高度 = 300px，内容真实高度只有 214px → 底部多出 86px 空白。
   【来源】v12 遗留 `min-height:300px`（为防短内容把卡片压塌而加），
          行内 height 无法突破 min-height，于是短教程下方永远留一条空。
   【处理】min-height 归零，让行内高度（JS 上报的真实高度）完全接管；
          长教程由 JS 写成 8000px 之类的大值，不受影响。
   ============================================================ */
main.page-content .content-preview .cp-frame,
.content-preview .cp-frame,
#contentPreview .cp-frame{
  min-height: 0 !important;
}

/* ============================================================
   v37（2026-10-21）：卡片视图下线，全站固定「左侧栏 + 右侧卡片」
   【需求】"把卡片模式删掉吧" → 选「关掉卡片视图」
   【改动来源】
     1) index.html 删掉 #sbViewToggle（☰ 列表 / ▦ 卡片 两个按钮）
     2) sidebar.js 删掉 setView / sbView 存取，强制摘掉 .card-mode，
        并清掉 localStorage 里的 sbView，老用户刷新即回到左侧栏
   【本块作用】
     1) 兜底隐藏视图切换按钮：用户浏览器可能缓存旧 index.html，
        按钮若残留会点出个死开关（setView 已不存在）
     2) 列表模式下内容区宽度 = 壳宽 - 280px 侧栏，比卡片模式窄一截，
        把两张卡的左右内边距收 4px，让胶囊每行装得下同样多的条目
   ============================================================ */
.sb-view-toggle,
#sbViewToggle{
  display: none !important;
}
.app-shell:not(.card-mode) main.page-content .content-preview{
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* ============================================================
   v38（2026-10-21）：列表模式下软件胶囊改「等宽网格」，消掉孤行
   【证据】内容区由卡片模式的 1188px 收窄到 1048px 后，flex-wrap 按自然宽度换行，
          26 个胶囊被排成 6 / 6 / 1 / 7 / 3 / 3 —— 第三行只有 1 个，右半边全空。
   【来源】v31/v32 的 .menu-grid 是 display:flex + flex-wrap:wrap，
          每个胶囊宽度由内容决定，行宽凑不满就断在任意位置。
   【处理】改 flex + 统一 min-width：短的（"镜像""女皇"）也撑到 158px，
          长的按内容自然撑开、名字完整不截断（曾试过 grid 等宽 160px，
          结果 "阿尔法 Alpha教程" 被截成 "阿尔法 Alpha…"，认不出软件，已弃用）。
          每行能稳定放下 6 个，右端不再出现一个孤零零的胶囊。
   ============================================================ */



/* ============================================================
   v39（2026-10-21）：详情页（点开某个教程）也套成一张卡，与总览页两张卡同规格
   【证据】列表模式打开 #alpha.html，青色标题和胶囊直接浮在人物立绘上，
          标题几乎看不清；而总览页有毛玻璃卡片，两者观感割裂。
   【来源】详情页用的是 .tutorial-section（bg rgba(16,20,36,0.10) + blur(6px)），
          浓度只有总览页 .menu-panel（0.28 + blur 20px）的三分之一，等于没有卡；
          里面还套着 .tutorial-list（rgba(0,0,0,0.20) + 自己的边框圆角），
          一层套一层 —— 就是之前"看着好多层"的老毛病。
   【处理】外层 .tutorial-section 提到与卡①卡②完全同规格（0.28 / blur 20 / 20px / 同色边框），
          内层 .tutorial-list 拍平成透明，只留卡片这一层。
   【作用域】限定 .app-shell:not(.card-mode) 与主文档，内嵌 iframe 里的同款元素不受影响。
   ============================================================ */
.app-shell:not(.card-mode) main.page-content .tutorial-section{
  margin-top: 0 !important;
  padding: 18px 18px 20px !important;
  background: rgba(10, 16, 28, 0.28) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  transition: none !important;
}
.app-shell:not(.card-mode) main.page-content .tutorial-section .tutorial-list{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.app-shell:not(.card-mode) main.page-content .tutorial-section .tutorial-header{
  padding: 0 0 13px 11px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-left: 3px solid var(--cyan) !important;
}
.app-shell:not(.card-mode) main.page-content .tutorial-section .tutorial-header h2{
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* ============================================================
   v40（2026-10-21）：总览页删掉「软件列表」卡，只留「教程内容」一张
   【需求】"把红色框子里的删掉，列表左侧已经有了"
   —— 红框 = .menu-panel（软件列表卡 + 22 个软件胶囊），左侧分类栏里已有同一份清单。
   【处理】
     1) .menu-panel 整块隐藏（不删 DOM：页面底部切换 iframe 的脚本、content-loader
        的 .is-overview 判定都还在引用它，删 DOM 会把那两处一起弄坏）
     2) 「教程内容」卡不再需要跟上面那张卡隔 32px，上边距归零，顶边与左侧栏齐平
   【作用域】main.page-content 下，主文档与内嵌 iframe 都适用（内嵌本来也只展示教程内容）
   ============================================================ */

main.page-content .content-preview,
.content-preview,
#contentPreview{
  margin-top: 0 !important;
}

/* ============================================================
   v41（2026-10-21）：内嵌预览里去掉「卡中卡」，只留父页那张「教程内容」卡
   【现象】agency 页的教程内容区，外层一张「教程内容」卡，里面又套一张深色卡，
          两张卡边框错位重叠（截图红框区）。
   【来源】style.css 1528 行 `.embed-mode main.page-content > .container` 给内嵌文档的
          .container 又画了一层黑玻璃（rgba(8,12,22,0.58) + blur22 + 边框 + 阴影）。
          那是「单独打开 embed 页当正文」时代的设计；现在正文一律由父页 .content-preview
          包着，这层就成了多余的第二张卡。
          .tutorial-content / .tutorial-section / .tutorial-list 早已被拍平（1539 / 2575），
          唯独漏了 .container。
   【处理】父页 cp-frame 内嵌上下文（html.in-preview，content-loader.js:283 打的标）
          把 .container 的底、边框、阴影、圆角全清掉，只留 12/14 内边距。
          注意不能归 0：rdr2_nightm_usage.html 这类页面正文直接挂在 .container 下
          （.content-section → .panel，没有 .tutorial-content 包裹层），
          归 0 会让正文紧贴外层卡边框。
   ============================================================ */
html.in-preview main.page-content > .container{
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  margin: 0 !important;
}

/* ============================================================
   v42（2026-10-21）：右栏内容区「单卡化」重构 —— 消灭卡片套卡片
   ────────────────────────────────────────────────────────────
   【张总反馈】"右边内容卡片太丑了，重叠了很多卡片"（附截图）

   【实测层级：右栏同时可见 3~4 层玻璃卡，边框/圆角/阴影层层叠套】
     层①  .pane-head-card            右栏标题卡（父页壳层）      rgba(8,12,22,.58) + blur22 + 1px边 + 20圆角 + 阴影
     层②  .embed-mode .container     内嵌文档容器卡（style.css:1529）同上参数 ← 重复！
     层③  .content-preview           总览页「教程内容」卡（v10）  rgba(8,12,22,.52) + blur18 + 1px边 + 20圆角 + 阴影
     层④  cp-frame 内 .container     已拍平（v41 生效，此处无问题）
   → 层①②③ 参数几乎相同、层层嵌套，肉眼看到的就是"卡片里套卡片"，
     每层都带 box-shadow，叠出三道重影阴影。

   【本版设计原则：整栏只留一张卡】
     · 层② 拍平：内嵌文档的 .container 不再自带底/边/圆角/阴影（它已经是父页卡的一部分）
     · 层③ 降级：.content-preview 去掉自己的玻璃底与边框，只保留标题栏（"教程内容"+返回按钮）
       —— 外层已有卡，它只需要当"分区标题"用
     · 层① 保留：父页标题卡是唯一的实体卡，所有内容落在它里面
     · 分区间用「1px 分隔线 + 间距」区分，而不是再套一层卡
   ============================================================ */

/* ---------- 层②：内嵌文档容器拍平（父页卡已提供底与边） ---------- */
html.embed-mode main.page-content > .container,
html.embed-mode.in-preview main.page-content > .container{
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 6px 0 !important;
  margin: 0 !important;
}

/* ---------- 层③：总览页「教程内容」区降级为分区标题（不再独立成卡） ---------- */
html.embed-mode .content-preview,
html.embed-mode #contentPreview,
html.embed-mode.in-preview .content-preview{
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* 分区标题栏：左侧青色竖条 + 底部细分隔线，替代原来的整卡 */
html.embed-mode .content-preview .cp-head,
html.embed-mode #contentPreview .cp-head{
  margin: 0 0 16px !important;
  padding: 0 0 12px 11px !important;
  border: none !important;
  border-left: 3px solid var(--cyan) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #E6EDF5 !important;
  letter-spacing: .6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

/* ---------- 层①：父页标题卡瘦身，让出更多内容空间 ---------- */
.app-shell .pane-head-card{
  padding: 16px 24px 18px !important;
  margin-bottom: 0 !important;
}
.app-shell .pane-head-card .ph-crumbs{
  font-size: 13px !important;
  margin-bottom: 2px !important;
}
.app-shell .pane-head-card .ph-title{
  font-size: 24px !important;
  margin-top: 6px !important;
  line-height: 1.3 !important;
}
.app-shell .pane-head-card .ph-sub{
  font-size: 13.5px !important;
  margin-top: 5px !important;
}
/* 标题卡与内容之间：一根分隔线，而不是第二张卡的边 */
.app-shell .pane-head-card::after{
  content: '' !important;
  display: block !important;
  margin: 14px -24px -18px !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    rgba(0,229,255,0.42) 0%,
    rgba(255,255,255,0.12) 26%,
    rgba(255,255,255,0.06) 100%) !important;
}

/* ---------- iframe 内容区跟随标题卡内边距，避免文字贴卡边 ---------- */
.app-shell .pane-frame{
  padding: 16px 24px 22px !important;
  box-sizing: border-box !important;
}
/* 高度上报已含 16px 余量，这里抵消新增的内边距，防止底部多出一截空白 */
.app-shell .pane-frame.on{
  margin-bottom: 0 !important;
}

/* ============================================================
   v43（2026-10-21）：单卡化的「卡底」归位到父页容器
   ────────────────────────────────────────────────────────────
   【v42 遗留问题】层② 拍平后内容区失去深色底，正文直接压在背景立绘上，
   「一、这个代理是做什么的」那段白字糊在人脸与亮部上，几乎读不了。

   【为什么不能再加卡底到内层】
     内层容器在 iframe 文档内。iframe 是独立文档，只能用「半透明纯色底」，
     做不出毛玻璃（backdrop-filter 无法跨文档采样父页背景），
     半透明纯色又会让整块底发死灰、与左栏毛玻璃不搭。
     更关键：父页 .pane-head-card 只包住标题条，iframe 在它**外面**，
     原本就没有任何元素给内容区提供卡底。

   【正解：把唯一的卡底放在父页容器上】
     .app-shell .page-content > .container 是 iframe 的父元素（真实 DOM 祖先），
     给它加黑玻璃 + 边框 + 圆角 + 阴影；iframe 保持全透明，
     子页内容即可透出父层已模糊好的背景 —— 这就是真正的单张毛玻璃卡。
     标题卡随之去掉自己的底/边/圆角/阴影，降级为卡内标题区。

   【最终结构：整栏一张卡】
     ┌─ container（唯一实体卡：底 + 边 + 圆角 + 阴影）
     │  ┌ pane-head-card  标题区（面包屑 / 大标题 / 副标题 / 分隔线）无底无边
     │  └ pane-frame      内容区（透明，仅内边距）
     └─
   ============================================================ */

/* ---------- 唯一卡底：父页内容容器 ---------- */
.app-shell .page-content > .container{
  background: rgba(8,12,22,0.62) !important;
  background-image: linear-gradient(180deg,
      rgba(0,229,255,0.045) 0%,
      rgba(0,0,0,0) 220px) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  border: 1px solid rgba(255,255,255,0.17) !important;
  border-radius: 20px !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,0.46),
    0 0 0 1px rgba(0,229,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* ---------- 标题卡降级为卡内标题区（无底、无边、无圆角、无阴影） ---------- */
.app-shell .pane-head-card{
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 20px 28px 18px !important;
  margin: 0 !important;
}
/* 标题区与内容区之间的分隔线：贯穿整卡宽度的渐变细线 */
.app-shell .pane-head-card::after{
  content: '' !important;
  display: block !important;
  margin: 16px -28px 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    rgba(0,229,255,0.55) 0%,
    rgba(255,255,255,0.14) 30%,
    rgba(255,255,255,0.05) 100%) !important;
}

/* ---------- 内容区：透明 + 内边距（不撑破卡底） ---------- */
.app-shell .pane-frame{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 20px 28px 26px !important;
  box-sizing: border-box !important;
}

/* ---------- 欢迎面板（未选分类时）同样落在卡内，需要自己的内边距 ---------- */
.app-shell .page-content > .container > .welcome-panel{
  padding: 40px 28px 44px !important;
}

/* ---------- 转场骨架：改为卡内铺满（不再负边距外扩，会被卡底裁掉） ---------- */
.app-shell .page-content > .container > .pane-skeleton{
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 34px 30px !important;
}

/* ============================================================
   v44（2026-10-21）：恢复右栏标题区 + 「教程内容」分区标题
   ────────────────────────────────────────────────────────────
   【实测证据（CDP 读计算样式）】
     #paneHead → display:none, visibility:hidden, rect 0x0, offsetParent=null
     命中来源：style.css 3055 行 `.pane-head-card,#paneHead{display:none!important;...}`
              style.css 3130 行 `main.page-content .content-preview,...{display:none!important}`
   → 标题区与「教程内容」分区标题**早被整块关掉**，
     所以张总截图里右栏只剩一张无标题的光板卡，"卡片重叠"其实是
     历史遗留的隐藏规则与新样式互相打架留下的半成品。

   【本版】在 v43 单卡骨架上，把这两个区**恢复显示**并按新设计重做：
     · pane-head-card → 卡内标题区（面包屑 / 大标题 / 副标题 / 渐变分隔线）
     · cp-head        → 内容区的分区小标题（青色竖条 + 细线），不再是独立卡
   两处都是"无底无边"的标题层级，唯一的实体卡仍是 container。
   ============================================================ */

/* ---------- 恢复标题区 ---------- */
.app-shell .pane-head-card,
.app-shell #paneHead{
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 22px 30px 18px !important;
  margin: 0 !important;
  overflow: visible !important;
}
/* 标题区底部渐变分隔线：贯穿整卡，取代原本的第二道卡边 */
.app-shell .pane-head-card::after{
  content: '' !important;
  display: block !important;
  margin: 18px -30px 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    rgba(0,229,255,0.60) 0%,
    rgba(0,229,255,0.16) 22%,
    rgba(255,255,255,0.08) 60%,
    rgba(255,255,255,0.03) 100%) !important;
}
/* 标题排版：左对齐比居中更规整，避免长短标题居中跳动 */
.app-shell .pane-head-card .ph-crumbs{
  font-size: 13px !important;
  color: #8A93A6 !important;
  margin-bottom: 8px !important;
}
.app-shell .pane-head-card .ph-title{
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  text-align: left !important;
  margin: 0 !important;
  color: #00E5FF !important;
  text-shadow: 0 0 20px rgba(0,229,255,0.30) !important;
  letter-spacing: .5px !important;
}
.app-shell .pane-head-card .ph-sub{
  font-size: 13.5px !important;
  text-align: left !important;
  color: #9AA7BD !important;
  margin-top: 7px !important;
}
/* 标题左侧的青色装饰竖条 */
.app-shell .pane-head-card .ph-title{
  border-left: 0 !important;
  padding-left: 0 !important;
}
.app-shell .pane-head-card .ph-crumbs::before{
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 26px !important;
  bottom: 18px !important;
  width: 3px !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #00E5FF, rgba(0,229,255,0.05)) !important;
}
.app-shell .pane-head-card{ position: relative !important; }
.app-shell .pane-head-card .ph-crumbs,
.app-shell .pane-head-card .ph-title,
.app-shell .pane-head-card .ph-sub{ padding-left: 16px !important; }

/* ---------- 恢复「教程内容」分区标题（小标题层级，非卡片） ---------- */
html.embed-mode .content-preview,
html.embed-mode #contentPreview{
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html.embed-mode .content-preview .cp-head,
html.embed-mode #contentPreview .cp-head{
  display: flex !important;
  visibility: visible !important;
  height: auto !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 16px !important;
  padding: 0 0 12px 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 3px solid var(--cyan) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #E6EDF5 !important;
  letter-spacing: .6px !important;
}
html.embed-mode .content-preview .cp-tip,
html.embed-mode #contentPreview .cp-tip{
  color: #8B93A8 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* ============================================================
   v45（2026-10-21）：单卡视觉打磨 —— 卡底压暗、正文提亮、标题左对齐
   ────────────────────────────────────────────────────────────
   【CDP 实测确认结构已达标，各层均为「无底无边」】
     L0 container  bg=rgba(8,12,22,.62) blur=24px bd=1px rad=20px shadow=Y  ← 唯一实体卡
     L1 paneHead   bg=透明 bd=0 disp=block 1018x143                          ← 标题区已恢复
     L1 paneFrame  bg=透明 bd=0 1018x587
     L2 container  bg=透明 bd=0                                                ← 已拍平
     L3 preview    bg=透明 bd=0     .cp-head 青色竖条+细线                    ← 已降级
     L4 cp-frame   bg=透明 bd=0 rad=14px（圆角无边框，不构成卡片感）
     L5 container  bg=透明 bd=0   直接子元素带底/边的 = (无)                  ← 已拍平
   → 结构上「卡片套卡片」已彻底消除。

   【本版只做视觉打磨，不动结构】
     ① 卡底 0.62 → 0.74，并叠一层纵向压暗渐变：正文与立绘亮部拉开对比
     ② 卡内正文统一提亮（内层段落/列表文字原本偏灰）
     ③ .ph-title 用 flex:justify-content 真正左对齐（之前被 display:flex 覆盖了 text-align）
     ④ cp-frame 圆角归零：既然无边框，14px 圆角会在内容边缘留下直角切口
   ============================================================ */

/* ---------- ① 卡底压暗 + 顶部青色氛围 ---------- */
.app-shell .page-content > .container{
  background-color: rgba(0, 0, 0, 0.30) !important;
  background-image: none !important;
}
/* 卡内内容区再加一层极淡压暗，进一步吃掉背景亮部 */
.app-shell .pane-frame{
  background-image: linear-gradient(180deg, rgba(4,7,13,0.22) 0%, rgba(4,7,13,0) 120px) !important;
}

/* ---------- ② 卡内正文提亮 ---------- */
html.embed-mode .step-content p,
html.embed-mode .tutorial-step p,
html.in-preview .step-content p,
html.in-preview p,
html.embed-mode .content-section p{
  color: #D6DCE8 !important;
}
html.embed-mode ol,
html.embed-mode ul,
html.in-preview ol,
html.in-preview ul{
  color: #D6DCE8 !important;
}
html.embed-mode .tip,
html.in-preview .tip{ color: #FFD54F !important; }

/* ---------- ③ 标题真正左对齐 ---------- */
.app-shell .pane-head-card .ph-title{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
.app-shell .pane-head-card .ph-sub{
  display: block !important;
  text-align: left !important;
}
/* 标题图标（品牌图）与文字之间的间距 */
.app-shell .pane-head-card .ph-title .tut-brand-icon{
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  margin-right: 12px !important;
  flex: none !important;
  border: 1px solid rgba(0,229,255,0.35) !important;
}

/* ---------- ④ cp-frame 圆角归零 ---------- */
html.embed-mode .content-preview .cp-frame,
html.embed-mode #contentPreview .cp-frame{
  border-radius: 0 !important;
}

/* ============================================================
   v46（2026-10-21）：收尾 —— 分区标题与内容左边线对齐
   ────────────────────────────────────────────────────────────
   【CDP 全量扫描 L5 内所有元素：带底/边/图的只有 8 个】
     NAV / IMG.nav-avatar / A.nav-buy-btn / 3 个 SPAN（标题字的 .tchar）
     A.dl-link ×2（下载按钮，本就该有边框）
   → 内层已无任何多余卡片边框。所谓"方框"其实是
     .cp-head 的 border-bottom 细线 + 两个 iframe 的文档边界。

   【本版】让标题区与内容区左边线严格对齐（视觉更整）
   ============================================================ */
.app-shell .pane-frame{ padding-left: 30px !important; padding-right: 30px !important; }
html.embed-mode .content-preview .cp-head{ padding-left: 0 !important; }

/* ============================================================
   v47（2026-10-21）：右栏标题区右上角「返回」按钮
   ────────────────────────────────────────────────────────────
   【需求】张总："在右边加一个返回"（附截图，标题区右上有大片空白）

   【为什么放在父页而不是沿用 iframe 内那个】
     content-loader.js 287 行 injectBackBtn() 一直在往**子页文档**里插 .pane-back-btn，
     但：① 位置是子页容器右上角（不在标题区，跟着正文流走，位置不准）；
          ② 样式又被 style.css 2694 / 2837 两条 display:none 整块隐藏了
             （v16、v19 为解决"总览页出现两个返回/返回跑到列表卡上"留下的误伤）；
          ③ 报 bug 的截图里右上一个返回都没有，说明隐藏规则仍在生效。
     改法：直接在父页 index.html 的 #paneHead 里放按钮 —— 那是标题区本体，
     位置绝对正确，且不受 iframe 边界与子页样式影响。走父页 history，与原逻辑同一条路径。

   【交互】点击 → history.back()，由 hashchange 恢复上一个界面；
        处于第一层（无历史可退）时按钮自动隐藏，避免点了没反应。
   ============================================================ */

/* ---------- 按钮本体：标题区右上角胶囊 ---------- */
.app-shell .pane-head-card .pane-back-btn{
  position: absolute !important;
  top: 20px !important;
  right: 30px !important;
  z-index: 20 !important;
  display: inline-flex !important;
  visibility: visible !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: rgba(8, 12, 22, 0.72) !important;
  border: 1px solid rgba(0, 229, 255, 0.32) !important;
  color: #E3F1F7 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
  letter-spacing: .5px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.32) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: background .2s, border-color .2s, color .2s !important;
  white-space: nowrap !important;
}
.app-shell .pane-head-card .pane-back-btn:hover{
  background: rgba(0, 229, 255, 0.16) !important;
  border-color: rgba(0, 229, 255, 0.62) !important;
  color: #fff !important;
}
.app-shell .pane-head-card .pane-back-btn:active{
  background: rgba(0, 229, 255, 0.24) !important;
}
.app-shell .pane-head-card .pane-back-btn:focus-visible{
  outline: 2px solid rgba(0,229,255,0.75) !important;
  outline-offset: 2px !important;
}
.app-shell .pane-head-card .pane-back-btn .pbb-ico{
  color: #00E5FF !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}
/* 无历史可退时隐藏 */
.app-shell .pane-head-card .pane-back-btn.no-history{
  display: none !important;
}
/* 标题区需为绝对定位提供参照（v44 已设 position:relative，这里兜底） */
.app-shell .pane-head-card{ position: relative !important; }
/* 标题文字不要顶到按钮：给标题块留出右侧空间 */
.app-shell .pane-head-card .ph-title,
.app-shell .pane-head-card .ph-sub,
.app-shell .pane-head-card .ph-crumbs{
  padding-right: 116px !important;
}

/* ---------- 子页 iframe 里那个旧返回按钮：彻底不注入、不显示 ----------
   父页标题区已有唯一返回按钮，内层再出现就是"两个返回" */
html.embed-mode .pane-back-btn,
html.in-preview .pane-back-btn,
.embed-mode .pane-back-btn,
.in-preview .pane-back-btn,
main.page-content .pane-back-btn,
.app-shell .page-content .pane-back-btn{
  display: none !important;
}
/* 内层曾给宿主加的顶部留白（.qi-has-back）同步归零，否则顶部会莫名空一截 */
.embed-mode .qi-has-back,
.in-preview .qi-has-back,
.qi-has-back.qi-has-back{
  padding-top: 0 !important;
}

/* ---------- 窄屏：按钮缩为纯图标，避免挤掉标题 ---------- */
@media (max-width: 720px){
  .app-shell .pane-head-card .pane-back-btn{
    padding: 7px 11px !important;
    right: 22px !important;
  }
  .app-shell .pane-head-card .pane-back-btn .pbb-txt{ display: none !important; }
  .app-shell .pane-head-card .ph-title,
  .app-shell .pane-head-card .ph-sub,
  .app-shell .pane-head-card .ph-crumbs{
    padding-right: 56px !important;
  }
}

/* ============================================================
   v48（2026-10-21）：修 v47 的选择器误伤
   ────────────────────────────────────────────────────────────
   【症状】返回按钮加了不显示 —— CDP 未跑，截图上标题区右上空着。

   【根因】v47 末尾那条"隐藏子页旧返回按钮"的规则里写了
       .app-shell .page-content .pane-back-btn { display:none !important }
     但父页按钮 #paneBackBtn 就在 .app-shell .page-content > .container >
     .pane-head-card 内 —— **同样被这条选择器匹配**。
     两者特异性都是 (0,3,0)，后写的这条胜出 → 把父页按钮一起干掉了。
     （这是"隐藏内层"却用了父页容器前缀的经典自伤）

   【修法】改用 :where() 把"内层隐藏"那条整体降为 0 特异性，
          并且**排除标题区**：只隐藏 iframe 文档内的，不碰 #paneBackBtn。
          同时把父页按钮规则提权（加 id）确保永远可见。
   ============================================================ */

/* ---------- 父页按钮：提权到 id 级，确保可见（放在最后兜底） ---------- */
#paneBackBtn{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 20px !important;
  right: 30px !important;
  z-index: 20 !important;
}
#paneBackBtn.no-history{ display: none !important; }

/* ---------- 内层旧按钮：仅在 iframe 文档内隐藏（限定 embed/in-preview 类） ---------- */
html.embed-mode .pane-back-btn,
html.in-preview .pane-back-btn,
.embed-mode .pane-back-btn,
.in-preview .pane-back-btn{
  display: none !important;
}

/* ============================================================
   v49（2026-10-21）：恢复右侧悬浮按钮组（顶部 / 教程 / 底部）
   ────────────────────────────────────────────────────────────
   【需求】张总："在右边加一个顶部教程底部，三个悬浮按钮"（附截图，红箭头指向右缘空白）

   【发现】这套按钮**早就存在**，index.html 565~568 行就是这三个（↑顶部 / ≡教程 / ↓底部），
           index.html 629~680 还有完整的滚动定位 + 区段高亮逻辑。
           之所以看不到：style.css 2719 行 `.quick-jump{display:none!important}`
           —— v6（2026-10-21）为消除「悬停矩形残影 / 跟手变形」把整条轨移除了。
           当时判断依据是 translateX(16px) 滑入 + hover 位移，但那些位移本身不是残影的根因
           （真正的根因是 backdrop-filter，已在 v6 同批取消）。

   【本版恢复并重做，口径与 v42~v48 的单卡化一致】
     · 去掉 translate 滑入/hover 位移（残影风险源），改 opacity 淡入
     · 去掉 backdrop-filter（v6 结论：胶囊类一律不毛玻璃），改纯色半透明底 + 1px 描边
     · 图标 + 文字竖排紧凑胶囊，与左栏分类卡同语言
     · 悬停只换底色与描边，不位移
   ============================================================ */

/* ---------- 悬浮轨 ---------- */
.app-shell ~ .quick-jump,
.quick-jump{
  position: fixed !important;
  right: 26px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1300 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .26s ease !important;
}
.quick-jump.visible{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ---------- 单个按钮：竖排（图标在上、文字在下）紧凑胶囊 ---------- */
.quick-jump .qj-btn{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
  padding: 6px 2px !important;
  border-radius: 14px !important;
  background: rgba(8, 12, 22, 0.82) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0, 229, 255, 0.26) !important;
  color: #C8D6E4 !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .5px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.34) !important;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s !important;
  transform: none !important;
  user-select: none !important;
}
.quick-jump .qj-btn:hover{
  background: rgba(0, 229, 255, 0.16) !important;
  border-color: rgba(0, 229, 255, 0.60) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 22px rgba(0, 229, 255, 0.20) !important;
  transform: none !important;
}
.quick-jump .qj-btn:active{
  background: rgba(0, 229, 255, 0.26) !important;
  transform: none !important;
}
.quick-jump .qj-btn:focus-visible{
  outline: 2px solid rgba(0, 229, 255, 0.75) !important;
  outline-offset: 2px !important;
}
.quick-jump .qj-btn.active{
  background: rgba(0, 229, 255, 0.20) !important;
  border-color: rgba(0, 229, 255, 0.72) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(0, 229, 255, 0.24) !important;
}
.quick-jump .qj-btn .qj-ico{
  font-size: 17px !important;
  line-height: 1 !important;
  color: #00E5FF !important;
  font-weight: 700 !important;
}
.quick-jump .qj-btn .qj-txt{
  font-size: 10.5px !important;
  line-height: 1 !important;
  color: inherit !important;
  letter-spacing: .5px !important;
}
/* 悬停/激活时图标更亮 */
.quick-jump .qj-btn:hover .qj-ico,
.quick-jump .qj-btn.active .qj-ico{ color: #7FF6FF !important; }

/* ---------- 窄屏：缩为更小的方钮，避免遮挡正文 ---------- */
@media (max-width: 960px){
  .quick-jump{ display: none !important; }
}
@media (min-width: 961px) and (max-width: 1200px){
  .quick-jump{ right: 12px !important; }
  .quick-jump .qj-btn{ width: 46px !important; height: 46px !important; }
  .quick-jump .qj-btn .qj-ico{ font-size: 15px !important; }
  .quick-jump .qj-btn .qj-txt{ font-size: 9.5px !important; }
}

/* ============================================================
   v50（2026-10-21）：悬浮按钮组微调（依据实测截图）
   ────────────────────────────────────────────────────────────
   【截图观察】三个按钮功能正常（底部态正确高亮），但有两处观感问题：
     ① right:26px 贴着屏幕右缘，与页面内容卡片（右边距约 20~30px）几乎齐平，
        视觉上像"飘在边框外"，显得拥挤 → 内收到 34px，并加一点外发光把它从背景里托出来
     ② 竖排 54×54 里文字仅 10.5px，在 100% 缩放下偏小、层级不清 → 加到 11.5px，
        按钮放大到 56×56，图标提到 18px
   ============================================================ */
.quick-jump{
  right: 34px !important;
  gap: 9px !important;
}
.quick-jump .qj-btn{
  width: 56px !important;
  height: 56px !important;
  border-radius: 15px !important;
  border-color: rgba(0, 229, 255, 0.32) !important;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.42),
    0 0 14px rgba(0, 229, 255, 0.10) !important;
}
.quick-jump .qj-btn .qj-ico{ font-size: 18px !important; }
.quick-jump .qj-btn .qj-txt{
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #DCE8F4 !important;
}
.quick-jump .qj-btn.active .qj-txt,
.quick-jump .qj-btn:hover .qj-txt{ color: #FFFFFF !important; }

/* ============================================================
   v52（2026-10-21）：取消内层「看不见却能滚」的滚动区
   ────────────────────────────────────────────────────────────
   【张总反馈】"这个还是有滚轮滑动效果，不要这个效果"（截图指「教程内容」标题条）

   【实测证据（CDP，鼠标悬在 .cp-head 标题条正中滚轮 deltaY=300）】
     修复前: L1 documentElement.scrollTop  0 → 30   ← 内层文档在滚
             外层 documentElement.scrollTop 0 → 0    ← 页面纹丝不动
             cpFrame.scrollTop / L2 全部 0
     → 用户感知就是「那块能单独滚」，且因为滚动条被藏了，看着像卡住不动。

   【根因】content-loader.js 287~288 行给每个内嵌页注入：
             html{scrollbar-width:none}
             ::-webkit-scrollbar{display:none;width:0;height:0}
         —— 只藏了滚动条，文档仍可滚。那是「iframe 内部自滚」时代的设计；
         现在右栏高度已由父页按内容撑开（v51 级联上报），内层根本不需要自滚。

   【修法】
     ① 注入样式改为 `html,body{overflow:hidden;height:100%;max-height:100%}` —— 彻底不可滚
     ② 本处给 .cp-frame / .content-preview 兜底锁死
     ③ 滚轮一律透传父页 → 整页统一滚动（这才是用户预期的行为）
   ============================================================ */

/* 内嵌预览框：禁止内部滚动，但**不得裁切内容** */
html.embed-mode .cp-frame,
html.embed-mode #contentPreview .cp-frame,
html.embed-mode .content-preview,
html.embed-mode .content-preview main.page-content,
html.embed-mode .content-preview main.page-content > .container{
  overflow: hidden !important;
}
/* 内嵌文档根节点：只禁滚动，高度必须让内容自然撑开
   ⚠ 不要写 max-height:100% —— 那会把内容钳在视口高度里，
     高度上报量到的就是被钳制后的值，底部内容直接被裁（见 v53）。 */
html.embed-mode,
html.embed-mode body,
html.in-preview,
html.in-preview body{
  overflow: hidden !important;
  height: auto !important;
  max-height: none !important;
  scrollbar-width: none !important;
}
html.embed-mode ::-webkit-scrollbar,
html.in-preview ::-webkit-scrollbar{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ============================================================
   v53（2026-10-21）：修 v52 引入的「底部内容被裁」
   ────────────────────────────────────────────────────────────
   【张总反馈】"右边框子显示的软件不完整"（cherax 页，底部 05/06 两条软件被切一半）

   【实测证据（CDP）】
     L0 #paneFrame  高=907
     L1 main.page-content 真实高=890，真实内容底部=890
     L1 html: client=861 scroll=861 ov=hidden height=861px   ← 被钳在视口 861
     L1 body: client=861 scroll=902 height=861px              ← 内容 902 却只能显示 861
     卡内净空 = 907 − iframe 自身上下 padding(20+26=46) = 861
     → 861 < 890，底部 29px（一条软件条目）被切掉。

   【根因】v52 为了禁掉内层滚动，写了 `html,body{height:100%; max-height:100%; overflow:hidden}`。
     `max-height:100%` 把文档高度**钳制在视口高度内**；
     而高度上报（bindEmbedHeightRelay → selfHeight()）量的正是 main 的 bottom，
     量到的自然是**被钳后的小值** → 外层按这个偏小的高度定尺 → 越修越短。

   【修法】
     ① 去掉 max-height:100% 与 height:100%，改为 height:auto + overflow:hidden
        —— 只禁滚动，不动高度，内容自然撑开（禁滚 ≠ 裁内容）
     ② 高度上报改用「真实内容底部」而非 main 的 bottom：
        对 html/body 施加高度约束时 main 的 bottom 仍可能被裁，
        改为遍历 main 的直接子元素取最大 bottom（不依赖任何高度链）

   【教训】"禁滚动"用 overflow:hidden 就够；一旦同时写 max-height，
         就等于给内容设了上限，高度上报链会把它当真值 → 内容被裁。
         高度上报必须取"内容真实底边"，不能信任任何可能被 CSS 钳制过的盒模型值。
   ============================================================ */

/* ---------- ② 高度上报改用真实内容底边 ---------- */

/* ============================================================
   v54（2026-10-21）：消除胶囊图标底部横线（外发光溢出）
   ────────────────────────────────────────────────────────────
   【张总反馈】"这个软件的字底部有一个线，把所有有线的取消掉，保证文字观看清晰度"

   【实测定位（A/B/C 三组对照截图，非猜测）】
     A 现状                    → 每个图标底部有紫色横线，横穿到文字上
     B .tut-pill-ico{border:none;box-shadow:none}
                              → 横线**完全消失**  ✅ 定位到 box-shadow
     C 图标 display:none       → 横线消失（佐证线来自图标元素本身）
     同时 CDP 证实：
       .tutorial-title / .tutorial-body 均 border:0、无伪元素 → 与文字无关
       PIL 逐行采样 alpha.webp 底部区域无横贯条纹 → 与图片内容无关

   【根因】.tut-pill-ico 的 `box-shadow: 0 0 8px rgba(0,229,255,.18), 0 2px 6px rgba(0,0,0,.15)`
     —— **外阴影不裁剪**，8px 模糊半径会溢出 40px 的图标框，
     图标底边那道溢出的光晕在深色胶囊底上被看成一条横线，正好压住文字。

   【修法】不再依赖溢出的外发光：
     ① 去掉 box-shadow，改用 **inset 内阴影**做内描边（不溢出）
     ② 给图标一个深色实心底 + 轻微内发光，保留"有边框"的立体感但不外泄
     ③ 全站同类图标（胶囊图标 / 左栏小图标）一并处理
   ============================================================ */

/* ---------- 胶囊内软件图标：内阴影替代外发光 ---------- */
.tut-pill-ico{
  border: 1px solid rgba(0, 229, 255, 0.34) !important;
  box-shadow:
    inset 0 0 10px rgba(0, 229, 255, 0.20),
    inset 0 0 3px rgba(255, 255, 255, 0.10) !important;
  background: rgba(10, 14, 26, 0.92) !important;
  overflow: hidden !important;
}
/* 注：不要用 clip-path 削底边——它会连同 border-radius 一起切掉圆角，
     反而让图标变方。这里只靠 inset 阴影 + 实心底解决压线问题。 */

/* ---------- 左栏分类小图标：同样取消外发光 ---------- */
.sb-sub-ico{
  border: 1px solid rgba(0, 229, 255, 0.34) !important;
  box-shadow: inset 0 0 6px rgba(0, 229, 255, 0.18) !important;
  background: rgba(10, 14, 26, 0.92) !important;
}

/* ---------- 其他带外发光的小图标类，一并处理（防止同类问题） ---------- */
.alpha-pill-ico,
.card-ico-img,
.sb-ico-img{
  box-shadow: inset 0 0 8px rgba(0, 229, 255, 0.16) !important;
}

/* ============================================================
   v54b：防御性收口 —— 任何小图标都不许用溢出的外发光
   ────────────────────────────────────────────────────────────
   【全站图标 class 使用统计（扫 235 个 html）】
     menu-ico       31 次   → 已是 box-shadow:none，天然无此问题
     link-icon      29 次   → 无阴影/边框规则，无此问题
     tut-pill-ico   17 次   → v54 已修（本张总反馈的那批）
     tut-brand-icon 10 次   → 标题区品牌图标，尺寸大、独占位置，无压字风险
     card-ico-img    4 次   → v54 已改内阴影

   【兜底】给所有 ≤32px 的小图标类统一设 overflow:hidden，
     外发光即便被谁再加回来，也会先被自身圆角裁切，不会横穿到邻近文字。
   ============================================================ */
.tut-pill-ico, .sb-sub-ico, .card-ico-img, .sb-ico-img{
  overflow: hidden !important;
}
/* 图标与文字之间留一点呼吸位，避免光晕/描边贴到字上 */
.tutorial-list .tutorial-card .tutorial-body > .tut-pill-ico{
  margin-right: 2px !important;
}

/* ============================================================
   v55（2026-10-21）：消除教程名文字下方的下划线
   ────────────────────────────────────────────────────────────
   【张总反馈】"文字底部还是有线"（截图：彼岸 Faramita 教程列表，
              01/ 02 / 03 三条教程名下方各有一条横线）

   【实测证据（CDP 读计算样式）】
     .tutorial-title
       text-decoration = underline solid rgb(224,228,240)   ← 就是它
       border-bottom  = 0px                                ← 不是边框
       box-shadow     = none                               ← 不是阴影
       ::before/::after content = none                      ← 不是伪元素
     → 是**文字自带的下划线**，不是任何视觉装饰。

   【根因】`.tutorial-title` 是 <a> 元素，样式表里只写了
         font-size / font-weight / color，**漏了 text-decoration:none**。
         同类的 .sb-cat-item / .sb-sub-item / .mc-title / .nav-links a
         都写了 text-decoration:none，唯独这条漏了
         → 浏览器默认给 <a> 加下划线，于是每个教程名底下都挂一条线。

   【修法】
     ① .tutorial-title 显式 text-decoration:none（治本）
     ② 全局兜底：内容区所有链接一律无下划线，悬停时才给青色提示
   ============================================================ */

/* ---------- ① 治本：教程名去下划线 ---------- */
.tutorial-title{
  text-decoration: none !important;
}
.tutorial-title:hover{
  text-decoration: none !important;
}

/* ---------- ② 全局兜底：深色界面里链接一律无下划线 ---------- */
a{
  text-decoration: none;
}
/* 但正文里需要强调的链接，悬停时仍给出可点击提示 */
.td-section p a:hover,
.step-content a:hover,
.tutorial-content a:hover{
  text-decoration: underline;
}
/* 外链按钮类保持原有虚线下划线的，明确可点 */
a.ext-link,
a.dl-link,
a.dl-btn{
  text-decoration: none;
}
a.ext-link:hover{
  text-decoration: underline;
}

/* v57 桌面双栏偏移对齐已移除（2026-10-22）：导航 / 横幅 / 跑马灯 现统一走 1520 宽度系统
   （见 nav 基础规则、.top-wrap、.shop-banner、.banner-marquee），与 .app-shell 同宽同居中，
   不再按右栏内容卡做 320px 偏移。该 v57 偏移块由另一 AR 添加，按 team-lead Task-20261022-NAV 要求删除。 */



/* ===== v58 桌面导航与右栏卡片对齐（2026-10-22 恢复）=====
   用户需求：顶部导航栏与下方教程卡片左右长度一致。
   此前 v57 对齐规则曾被并发任务删除（改走 1520 全宽系统），
   但该方案下导航比右栏卡片宽 340px（左多 320px、右多 20px），与用户诉求不符，故恢复对齐：
   - 961~1519px：nav 固定左缘 320px（侧栏占位），宽度 = 视口宽 - 340px
   - >=1520px：nav 宽 1180px 居中并对齐右栏卡片（相对视口中心右移 150px） */
@media (min-width: 961px) and (max-width: 1519px){
  nav:not(.sidebar-nav){
    left: 320px;
    transform: none;
    width: calc(100% - 340px);
    max-width: none;
  }
}
@media (min-width: 1520px){
  nav:not(.sidebar-nav){
    left: 50%;
    transform: translateX(calc(-50% + 150px));
    width: 1180px;
    max-width: 1180px;
  }
}

/* ============================================================
   v42（2026-10-23）：导航 / 横幅 / 内容区统一 1360px 容器（修宽度错位）

   【根因】此前是「1520 宽度系统」：nav、.top-wrap、.app-shell 都是 1520 满宽容器，
          但 v58 为了让「导航」去对齐「右栏卡片」，把 nav 单独改成
          961~1519px 时 left:320px + width:calc(100% - 340px)、
          >=1520px 时 translateX(-50% + 150px) + 1180px。
          这等于让导航左移 320px 跳过侧栏、只贴右栏卡片，于是导航与横幅、外壳
          不再同一条左缘上，而且相对视口整体偏右：1920 视口 nav 是 520~1700
          （中心 1110，视口中心 960，偏右 150px），banner / top-wrap / app-shell
          却是 200~1720；1440 视口 nav 320~1420 贴右侧，其余 0~1440 满宽。
          —— 给导航单独打偏移补丁，是错位的直接来源。

   【处理】放弃「让导航迁就某一栏」的思路，改回「所有人都吃同一个容器宽度」：
          1) 引入唯一宽度变量 --page-w = min(1360px, 100% - 48px)，
             nav / .top-wrap / .shop-banner / .app-shell 全部只用这一个值；
          2) nav 恢复真正居中（left:50% + translateX(-50%)），取消 320px / 150px 偏移；
          3) 容器自带宽度后，各级左右 padding 归 0（宽度已算好，再叠 padding 会内缩）；
             上下 padding 一律保留，不影响原有呼吸位；
          4) 侧栏 280 → 260、栏间距 20 → 24，
             右栏卡片宽度 = 1360 - 260 - 24 = 1076，整体收窄且仍居中。
          本文件是 append-only 覆盖体系，v58 的 media query 一行不删，
          靠本块「后写 + !important」取胜（同为 nav:not(.sidebar-nav)，后写者胜）。
   ============================================================ */
:root{ --page-w: min(1360px, calc(100% - 48px)); }

/* ① 顶部导航：固定定位 + 真居中 + 容器宽。圆角 / 毛玻璃 / 0 22px 内边距等视觉全部不动 */
nav:not(.sidebar-nav){
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: var(--page-w) !important;
  max-width: none !important;
}

/* ② 横幅区：与导航同宽同居中；只清左右内边距，上下留白不动
      （上下仍是 calc(var(--nav-h,56px) + 30px) 0，由原有规则提供） */
.top-wrap{
  width: var(--page-w) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.top-wrap > .container{
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.shop-banner{
  width: 100% !important;
  max-width: none !important;
}

/* ③ 双栏外壳：同宽容器；左右 padding 归 0（宽度已算好），栏间距 20 → 24 */
.app-shell{
  width: var(--page-w) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 24px !important;
}

/* ④ 侧栏 280 → 260，把 20px 空间还给内容卡（卡片 = 1360 - 260 - 24 = 1076）
     限定 :not(.card-mode)，卡片模式（顶部通栏）不受影响 */
.app-shell:not(.card-mode) .sidebar{
  flex: 0 0 260px !important;
  width: 260px !important;
}

/* ============ 移动端（<=960）：容器 = 100% - 28px，左右各留 14 ============ */
@media (max-width: 960px){
  :root{ --page-w: calc(100% - 28px); }

  /* 导航：左右内边距 22 → 14。容器只剩 362 宽时，22px 双层留白会把链接挤到换行 */
  nav:not(.sidebar-nav){
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* 外壳：纵向堆叠，上下 padding 与 gap 保持 14，左右归 0（否则 362 再减 28 只剩 334） */
  .app-shell{
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 14px !important;
  }
  /* 侧栏必须恢复满宽堆叠：上面的 260px 是 !important，不覆盖会把手机端侧栏压成 260px */
  .app-shell:not(.card-mode) .sidebar{
    width: 100% !important;
    flex: 0 0 auto !important;
  }
}

/* ============================================================
   v42 补 1（2026-10-23）：手机端右栏未撑满 —— 内容列右缘短 18px
   【证据】改完主块后实测 390 视口：.app-shell / .sidebar 都是 14~376（362），
          但 #contentPane 只有 14~358（344），卡片右缘 357 比容器右缘 376 少 19px。
   【根因】.app-shell 基础规则是 align-items:flex-start（桌面双栏靠它让左栏吸顶不被拉伸）。
          <=960 切成 flex-direction:column 之后，flex-start 作用到「横轴」上，
          右栏于是按内容宽度收缩，而不是撑满容器。该问题在本次改动之前就存在，
          基线数据同样是 344，不是 v42 引入的。
   【处理】纵向堆叠时正确行为是撑满，仅在小屏把横轴对齐改成 stretch；
          桌面 row 布局继续 flex-start，左栏吸顶行为不受影响。
   ============================================================ */
@media (max-width: 960px){
  .app-shell{ align-items: stretch !important; }
}