:root{
  --header-height:60px;
  --footer-height:40px;
  --sidebar-width:200px;
  --peek:0;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif}
html,body{height:100%;overflow:hidden}
body{display:flex;flex-direction:column}

.navbar{height:var(--header-height);flex-shrink:0;background:#000;color:#fff}
.footer{height:var(--footer-height);flex-shrink:0;background:#000;color:#888;text-align:center;line-height:var(--footer-height);font-size:13px}

/* ===== 侧边栏主容器 ===== */
.sd-sidebar{
  position:fixed;
  top:var(--header-height);
  left:0;
  width:var(--sidebar-width);
  height:calc(100dvh - var(--header-height) - var(--footer-height));
  background:#fff;
  border-right:1px solid #dee2e6;
  display:flex;
  flex-direction:column;
  z-index:10;
  overflow:hidden;
  transition:transform .3s ease;
}
.sd-sidebar.collapsed{transform:translateX(-100%)}

.sd-sidebar-scroll{flex:1;overflow-y:auto}

/* ===== 顶部标题区 ===== */
.sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 20px 15px;
  font-weight:bold;
  font-size:18px;
  border-bottom:1px solid #dee2e6;
}
.hamburger{
  background:none;border:none;font-size:26px;cursor:pointer;color:#333;line-height:1;margin-right:-5px;
}

/* 侧边栏标题文字链接样式 */
.sidebar-title-link{
  color:#000;
  text-decoration:none;
  font-weight:bold;
  font-size:18px;
}
.sidebar-title-link:hover{opacity:.8}

/* 收起时隐藏标题文字与箭头 */
.sd-sidebar.collapsed #sidebarTitle,
.sd-sidebar.collapsed .arrow{display:none}

/* ===== 导航区 ===== */
.sd-nav a{display:flex;align-items:center;padding:10px 20px;color:#000;text-decoration:none;font-size:15px}
.sd-nav a:hover{background:#e9ecef}
.sd-nav .parent{justify-content:space-between}
.sd-nav .arrow{
  cursor:pointer;
  padding:4px 6px;
  margin-left:auto;
  transition:transform .3s;
}
.sd-nav .open .arrow{transform:rotate(180deg)}
.sd-nav .sub-menu{display:none;padding-left:20px;background:#fff}
.sd-nav .sub-menu a{padding:6px 10px;font-size:14px}

/* ===== 底部链接区 ===== */
.sd-sidebar-foot{flex-shrink:0;border-top:1px solid #dee2e6}
.sd-sidebar-foot a{display:flex;align-items:center;justify-content:center;padding:10px 20px;color:#000;text-decoration:none;font-size:15px}
.sd-sidebar-foot a:hover{background:#e9ecef}
.sd-sidebar-foot a i{position:absolute;right:22px}

/* ===== 主内容区过渡 ===== */
.container{
  margin-left:var(--sidebar-width);
  height:calc(100dvh - var(--header-height) - var(--footer-height));
  overflow-y:auto;
  padding:20px 20px 100px;
  background:#fff;
  transition:margin-left .3s ease;
  overflow-x: hidden;
}

/* ===== 独立悬浮按钮 ===== */
#floatToggleBtn{
  position:fixed;
  top:calc(var(--header-height) + 8px);
  left:12px;
  z-index:20;
  width:36px;height:36px;
  background:#fff;border:1px solid #dee2e6;border-radius:6px;font-size:20px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.1);transition:opacity .2s;
}
body:not(.sidebar-hidden) #floatToggleBtn{opacity:0;pointer-events:none}
body.sidebar-hidden #floatToggleBtn{opacity:1;pointer-events:auto}

/* ===== 卡片基础 ===== */
.card{width:100%;max-width:1500px;
  overflow: hidden;
  box-sizing: border-box;
  background:#fff;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.08);padding:40px;margin:0 auto 40px}
.card-link .card{display:flex;align-items:center;justify-content:space-between;padding-right:16px;flex-wrap:wrap;position:relative;overflow:hidden}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
h1{font-size:34px;font-weight:300;margin-bottom:30px;text-align:center;    white-space: nowrap;     }
h2{font-size:28px;font-weight:200;margin-bottom:6px}
h3{font-size:22px;font-weight:200;margin-bottom:4px;color:#555}
h4{font-size:12px;font-weight:200;margin-bottom:3px}
.mini-card{width:80px;height:32px;background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;font-size:12px;color:#888}
.card-link{display:block;text-decoration:none;color:inherit}
.card-link:hover .card{box-shadow:0 6px 22px rgba(0,0,0,.12)}
.back{margin-top:32px;text-align:center;font-size:15px}
.back a{color:var(--text);text-decoration:none;font-weight:600}
.back a:hover{color:#555}

/* ===== SD 侧边入口 ===== */
.sd-cta{--sd-img:url('/static/images/placeholder.jpg');display:block;position:relative;height:120px;margin:10px 12px 8px;border-radius:10px;overflow:hidden;border:1px solid #e6e6e6;box-shadow:0 2px 10px rgba(0,0,0,.06);text-decoration:none}
.sd-cta::before{content:"";position:absolute;inset:0;background-image:var(--sd-img);background-size:cover;background-position:center 60%;transform:scale(1.03);transition:transform .25s ease}
.sd-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(255,255,255,.7),rgba(255,255,255,.1) 70%)}
.sd-cta .sd-cta-glass{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.32);-webkit-backdrop-filter:blur(6px) saturate(130%);backdrop-filter:blur(6px) saturate(130%);border:1px solid rgba(255,255,255,.55);color:#1f1f1f;font-weight:600;line-height:1}
.sd-cta .sd-cta-glass i{font-size:16px;color:#333}
.sd-cta:hover::before{transform:scale(1.05)}
.sd-cta:hover .sd-cta-glass{background:rgba(255,255,255,.38)}

/* 横条版本 */
.sd-cta-strip{height:72px;margin:8px 0;padding:0 20px;border-top:1px solid #e9ecef;border-bottom:1px solid #e9ecef;border-radius:0;display:flex;align-items:center;overflow:hidden}
.sd-cta-strip .sd-cta-title{position:relative;z-index:1;display:flex;align-items:center;gap:8px;font-weight:600;color:#1a1a1a;font-size:15px;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.sd-cta-strip .sd-cta-title i{font-size:15px;color:#333}
.sd-sidebar.collapsed .sd-cta-strip{display:none}

/* 顶部大卡片入口 */
.card.sd-hero{position:relative;overflow:hidden;min-height:160px;display:flex;align-items:flex-end;padding:28px;color:#1a1a1a;text-decoration:none}
.card.sd-hero::before{content:"";position:absolute;inset:0;background-image:var(--sd-hero,url('/static/images/placeholder.jpg'));background-size:cover;background-position:center 60%;transform:scale(1.04);transition:transform .25s ease;z-index:0}
.card.sd-hero::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.36);-webkit-backdrop-filter:blur(8px) saturate(125%);backdrop-filter:blur(8px) saturate(125%);z-index:0}
.sd-hero .sd-hero-title{position:relative;z-index:1;font-size:22px;font-weight:700;letter-spacing:.2px;text-shadow:0 1px 0 rgba(255,255,255,.55);display:flex;align-items:center;gap:10px}
.sd-hero .sd-hero-title {font-size:20px;color:#333;}
.card.sd-hero:hover{box-shadow:0 6px 22px rgba(0,0,0,.12)}
@media (max-width:640px){.card.sd-hero{min-height:130px;padding:22px}.sd-hero .sd-hero-title{font-size:19px}}

/* 内容区宽度扩展 */
:root{--content-max:980px}
.container .doc{max-width:var(--content-max);margin:0 auto;max-width: 100%;overflow-x: hidden;transition:max-width .25s ease}
.container .doc .card{max-width:none}
body.sidebar-hidden{--content-max:1180px}
@media (min-width:1640px){:root{--content-max:1100px}body.sidebar-hidden{--content-max:1280px}}
@media (min-width:1800px){:root{--content-max:1180px}body.sidebar-hidden{--content-max:1420px}}
@media (min-width:1920px){:root{--content-max:1240px}body.sidebar-hidden{--content-max:1560px}}

/* 小屏标签垂直堆叠（浏览器宽度极端小时） */
@media (max-width:530px){
  .tag-row{flex-wrap: wrap;transform: none;}
  .tag-row .mini-card{width:100%;flex:none;height:32px}
  .card h1 {font-size: 22px;line-height: 1.3;white-space: normal !important;overflow: visible !important;}
}