/* =========================================================
   002：左侧边栏 + 主体布局联动
   已删除重复规则，仅保留最终生效样式
   ========================================================= */

:root {
  /* 侧边栏位置与尺寸 */
  --sidebar-left: clamp(16px, 1.171vw, 2.083vh);
  --sidebar-width: clamp(244px, 17.862vw, 31.771vh);
  --sidebar-collapsed-width: clamp(56px, 4.100vw, 7.292vh);
  --sidebar-top-fix: -2px;

  /* 侧边栏圆角 */
  --sidebar-radius: 10px;
  --sidebar-top-right-radius: 18px;

  /* 侧边栏内边距 */
  --sidebar-pad-top: clamp(70px, 5.124vw, 9.115vh);
  --sidebar-pad-x: clamp(12px, 0.878vw, 1.562vh);
  --sidebar-pad-bottom: clamp(18px, 1.318vw, 2.344vh);
  --sidebar-collapsed-pad: clamp(8px, 0.586vw, 1.042vh);

  /* 侧边栏项目 */
  --side-item-height: clamp(54px, 3.953vw, 7.031vh);
  --side-item-margin: clamp(4px, 0.293vw, 0.521vh);
  --side-item-pad-y: clamp(8px, 0.586vw, 1.042vh);
  --side-item-pad-x: clamp(10px, 0.732vw, 1.302vh);
  --side-item-gap: clamp(12px, 0.878vw, 1.562vh);
  --side-item-radius: clamp(12px, 0.878vw, 1.562vh);

  /* 项目图标与文字 */
  --side-logo-size: clamp(34px, 2.489vw, 4.427vh);
  --side-logo-font-size: clamp(18px, 1.318vw, 2.344vh);
  --side-logo-svg-size: clamp(24px, 1.757vw, 3.125vh);
  --side-title-size: clamp(14px, 1.025vw, 1.823vh);
  --side-desc-size: clamp(11px, 0.805vw, 1.432vh);
  --side-desc-margin: clamp(2px, 0.146vw, 0.260vh);

  /* 折叠按钮 */
  --sidebar-toggle-inset: clamp(16px, 1.171vw, 2.083vh);
  --sidebar-toggle-size: clamp(42px, 3.075vw, 5.469vh);
  --sidebar-toggle-radius: clamp(12px, 0.878vw, 1.562vh);
  --sidebar-toggle-font-size: clamp(20px, 1.464vw, 2.604vh);
}


/* =========================================================
   主体内容
   ========================================================= */

.main-wrapper {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  container-type: inline-size;

  --feature-size: clamp(96px, 16cqw, 190px);
  --feature-gap: clamp(8px, 1.8cqw, 26px);

  margin-left: calc(
    var(--sidebar-left) +
    var(--sidebar-width)
  );

  padding-top: 72px;
  transition: margin-left 0.25s ease;
}

.main-wrapper.collapsed {
  margin-left: calc(
    var(--sidebar-left) +
    var(--sidebar-collapsed-width)
  );
}


/* =========================================================
   顶部导航
   ========================================================= */

.topic {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  margin: 0;
  padding: 0;
}

.topic .bar {
  width: 100%;
  max-width: 100%;
  border-radius: 0;
}


/* =========================================================
   左侧边栏
   ========================================================= */

.sidebar {
  position: fixed;
  top: calc(88px + var(--sidebar-top-fix));
  bottom: 16px;
  left: var(--sidebar-left);
  z-index: 200;

  width: var(--sidebar-width);
  height: auto;

  padding:
    var(--sidebar-pad-top)
    var(--sidebar-pad-x)
    var(--sidebar-pad-bottom);

  border: 1px solid #eee7df;
  border-radius: var(--sidebar-radius);
  border-top-right-radius: var(--sidebar-top-right-radius);

  background: rgba(255, 253, 250, 0.96);
  box-shadow: 0 10px 30px rgba(76, 55, 34, 0.06);

  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;

  transition:
    width 0.25s ease,
    padding 0.25s ease;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
  padding-right: var(--sidebar-collapsed-pad);
  padding-left: var(--sidebar-collapsed-pad);
}


/* =========================================================
   侧边栏项目
   ========================================================= */

.side-item {
  display: flex;
  align-items: center;
  gap: var(--side-item-gap);

  width: 100%;
  min-height: var(--side-item-height);
  margin-bottom: var(--side-item-margin);
  padding: var(--side-item-pad-y) var(--side-item-pad-x);

  border: 1px solid transparent;
  border-radius: var(--side-item-radius);
  background: transparent;

  color: #111827;
  text-decoration: none;
  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.side-item:hover,
.side-item.active {
  border-color: #eadfce;
  background: #fff7ec;
  box-shadow: none;
  transform: none;
}

.sidebar.collapsed .side-item {
  justify-content: center;
  padding-inline: 0;
}


/* =========================================================
   项目图标
   ========================================================= */

.side-logo {
  width: var(--side-logo-size);
  height: var(--side-logo-size);
  flex: 0 0 var(--side-logo-size);

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #eee5db;
  border-radius: 50%;
  background: #fffaf4;

  font-size: var(--side-logo-font-size);
}

.side-logo svg {
  width: var(--side-logo-svg-size);
  height: var(--side-logo-svg-size);
}


/* =========================================================
   项目文字
   ========================================================= */

.side-label {
  display: flex;
  flex-direction: column;
}

.side-title {
  color: #1b2d40;
  font-size: var(--side-title-size);
  font-weight: 700;
}

.side-desc {
  margin-top: var(--side-desc-margin);
  color: #728092;
  font-size: var(--side-desc-size);
}

.sidebar.collapsed .side-label {
  display: none;
}


/* =========================================================
   折叠按钮
   ========================================================= */

.sidebar-toggle {
  position: fixed;

  top: calc(
    88px +
    var(--sidebar-top-fix) +
    var(--sidebar-toggle-inset)
  );

  left: calc(
    var(--sidebar-left) +
    var(--sidebar-toggle-inset)
  );

  z-index: 600;

  width: var(--sidebar-toggle-size);
  height: var(--sidebar-toggle-size);

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #eee4da;
  border-radius: var(--sidebar-toggle-radius);
  background: #fffaf4;

  color: #a35f25;
  font-size: var(--sidebar-toggle-font-size);
  cursor: pointer;

  box-shadow: 0 6px 18px rgba(76, 55, 34, 0.08);

  transition:
    left 0.25s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.sidebar-toggle:hover {
  color: #7f4315;
  border-color: #dfc4a4;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(76, 55, 34, 0.10);
  transform: translateY(-1px);
}

.sidebar-toggle:active {
  transform: scale(0.95);
}

.sidebar-toggle.collapsed {
  left: calc(
    var(--sidebar-left) +
    var(--sidebar-collapsed-width) -
    var(--sidebar-toggle-size) -
    var(--sidebar-collapsed-pad)
  );
}


/* =========================================================
   小屏幕适配
   ========================================================= */

@media (max-width: 900px) {
  :root {
    --sidebar-width: 220px;
  }
}


/* =========================================================
   小高度屏幕：整页纵向滚动
   顶部导航保持固定
   其余区域随整页滚动
   小高度时卡片列表自动展开到完整高度
   ========================================================= */

html {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

.main-wrapper {
  overflow: visible;
}

.sidebar {
  position: absolute;
  bottom: auto;
  height: calc(100vh - (88px + var(--sidebar-top-fix)) - 16px);
  height: calc(100dvh - (88px + var(--sidebar-top-fix)) - 16px);
}

.sidebar-toggle {
  position: absolute;
}

@media (max-height: 820px) {
  .main-wrapper {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .cards-scroll-area {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible !important;
  }

  .cards-scroll-area .grid {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible !important;
    overscroll-behavior: auto;
  }
}

/* =========================================================
   Hero 稳定布局
   不再根据浏览器高度拉伸或压缩内部比例
   分类卡片与搜索区保持稳定距离
   ========================================================= */

.hero {
  height: auto !important;
  min-height: 0 !important;
  padding:
    clamp(48px, 4cqw, 72px)
    clamp(16px, 2cqw, 28px)
    calc(var(--feature-size) * 0.61 + 28px) !important;
  align-items: start;
  justify-items: center;
}

.hero-shell {
  justify-content: flex-start;
}

.title-dynamic-wrap {
  height: auto !important;
  min-height: clamp(120px, 9cqw, 154px) !important;
  max-height: none !important;
}

.engine-pills {
  margin-bottom: 20px !important;
}

/* =========================================================
   四区统一布局（最终规则）

   01 顶部导航固定在视口顶部；
   02 左侧边栏与右侧的 03 + 04 共用同一网格行；
   右侧内容超过屏幕高度时，页面整体滚动，不再单独裁切 04。
   ========================================================= */

:root {
  --page-top: 72px;
  --page-gap: clamp(10px, 0.9vw, 16px);
  --page-edge: clamp(10px, 1vw, 20px);
}

html {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
}

body {
  min-width: 720px;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: auto;
  overflow-y: visible;
}

.page-layout {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    calc(var(--page-top) + var(--page-edge))
    var(--page-edge)
    var(--page-edge);
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: minmax(calc(100vh - var(--page-top) - (2 * var(--page-edge))), auto);
  grid-template-rows: minmax(calc(100dvh - var(--page-top) - (2 * var(--page-edge))), auto);
  align-items: stretch;
  gap: var(--page-gap);
  transition: grid-template-columns 0.25s ease;
}

.page-layout.sidebar-collapsed {
  grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
}

.main-wrapper,
.main-wrapper.collapsed {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 100%;
  margin-left: 0;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.sidebar {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
  min-height: 100%;
  max-height: none;
  padding-top: var(--sidebar-pad-top);
  overflow-x: hidden;
  overflow-y: visible;
}

.sidebar.collapsed {
  width: 100%;
}

.sidebar-toggle,
.sidebar-toggle.collapsed {
  position: absolute;
  top: calc(var(--page-top) + var(--page-edge) + var(--sidebar-toggle-inset));
  left: calc(var(--page-edge) + var(--sidebar-toggle-inset));
}

.sidebar-toggle.collapsed {
  left: calc(
    var(--page-edge) +
    var(--sidebar-collapsed-width) -
    var(--sidebar-toggle-size) -
    var(--sidebar-collapsed-pad)
  );
}

.cards-scroll-area {
  flex: 1 0 auto;
  min-height: 0;
  overflow: visible !important;
}

.cards-scroll-area .grid {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  padding-bottom: 0;
  overflow: visible !important;
  overscroll-behavior: auto;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* 分类三卡始终按左—中—右的相对关系排布，不再按断点缩放整组。 */
.rock-list {
  zoom: 1 !important;
}

@media (max-width: 900px) {
  :root {
    --sidebar-width: 210px;
  }

  .page-layout {
    grid-template-columns: var(--sidebar-width) minmax(480px, 1fr);
  }

  .page-layout.sidebar-collapsed {
    grid-template-columns: var(--sidebar-collapsed-width) minmax(480px, 1fr);
  }
}