/* ============================================================
   Layout.css - 网站框架布局样式
   结构:
     ┌─────────────────────────────────────────────┐
     │  Header (fixed top, z-index 200)            │
     │  [☰][Logo]    [Search........]    [🔔][👤] │
     ├──────────┬──────────────────────────────────┤
     │ Sidebar  │  Content (main area)             │
     │ (scroll) │  (scroll)                        │
     │ 240px    │  flex:1                          │
     ├──────────┴──────────────────────────────────┤
     │  Footer                                      │
     └──────────────────────────────────────────────┘
   兼容: PC / 平板 / 手机 (完美适配)
   ============================================================ */

/* ===== CSS 变量 (全部使用 rem | 1rem = 10px = html 62.5%) ===== */
:root {
  /* ── 颜色 ── */
  --layout-bg: #0f0f0f;
  --layout-bg-secondary: #1a1a1a;
  --layout-bg-tertiary: #272727;
  --layout-text-primary: #f1f1f1;
  --layout-text-secondary: #aaaaaa;
  --layout-border: #303030;
  --layout-accent: #ff4d4f;
  --layout-hover: #3a3a3a;
  --layout-header-bg: #0f0f0f;

  /* ── 尺寸 (rem) ── */
  --sidebar-width: 24rem;
  --sidebar-collapsed-width: 7.2rem;
  --header-height: 5.6rem;
  --header-height-mobile: 4.8rem;
  --footer-min-height: 6rem;
  --mobile-bottom-nav-height: 5rem;
  --chips-height: 5.2rem;

  /* ── 字体 ── */
  --layout-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --layout-font-size-xs: 1.1rem;
  --layout-font-size-sm: 1.2rem;
  --layout-font-size-base: 1.4rem;
  --layout-font-size-md: 1.6rem;
  --layout-font-size-lg: 1.8rem;
  --layout-font-size-xl: 2rem;
  --layout-font-size-xxl: 2.4rem;

  /* ── 间距 ── */
  --layout-spacing-xs: 0.4rem;
  --layout-spacing-sm: 0.8rem;
  --layout-spacing-md: 1.2rem;
  --layout-spacing-lg: 1.6rem;
  --layout-spacing-xl: 2.4rem;
  --layout-spacing-xxl: 3.2rem;

  /* ── 圆角 (完全圆形用 50%) ── */
  --layout-radius-sm: 0.4rem;
  --layout-radius-md: 0.8rem;
  --layout-radius-lg: 1.2rem;
  --layout-radius-xl: 1.6rem;
  --layout-radius-full: 50%;

  /* ── 过渡 ── */
  --layout-transition-fast: 0.15s ease;
  --layout-transition-normal: 0.2s ease;
  --layout-transition-slow: 0.35s ease;

  /* ── 层级 ── */
  --z-sidebar: 100;
  --z-header: 200;
  --z-mobile-nav: 300;
  --z-overlay: 400;
  --z-modal: 500;
}

/* ===== 基础重置 & 全局 ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* 62.5% → 1rem = 10px (基于浏览器默认 16px) */
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--layout-font-family);
  /* body 自身使用 rem 以便被 html 的 62.5% 缩放 */
  font-size: var(--layout-font-size-base);
  line-height: 1.5;
  color: var(--layout-text-primary);
  background-color: var(--layout-bg);
  overflow-x: hidden;
  min-height: 100vh;
  padding-top: var(--header-height);
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: none;
}
ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   顶部导航栏 (Header) - 固定顶部
   参考 YouTube: Logo + 搜索 + 用户操作 都在 header 中
   ============================================================ */
.layout-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background-color: var(--layout-header-bg);
  display: flex;
  align-items: center;
  padding: 0 var(--layout-spacing-lg);
  gap: var(--layout-spacing-sm);
  z-index: var(--z-header);
  border-bottom: 1px solid var(--layout-border);
}

/* ----- Header 左侧：菜单按钮 + Logo ----- */
.header-left {
  display: flex;
  align-items: center;
  gap: var(--layout-spacing-lg);
  flex-shrink: 0;
}

.header-menu-toggle {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--layout-radius-full);
  transition: background-color var(--layout-transition-fast);
  border: none;
  background: transparent;
  color: var(--layout-text-primary);
  font-size: var(--layout-font-size-xl);
  flex-shrink: 0;
}

.header-menu-toggle:hover {
  background-color: var(--layout-hover);
}

/* Logo (在 header 中，不在 sidebar 里)
   参考 YouTube: 左侧汉堡菜单 + YouTube 图标 */
.header-logo {
  display: flex;
  align-items: center;
  gap: var(--layout-spacing-xs);
  font-size: var(--layout-font-size-xl);
  font-weight: 700;
  color: var(--layout-text-primary);
  white-space: nowrap;
  text-decoration: none;
}

.header-logo-icon {
  height: 2.8rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo-text {
  font-size: var(--layout-font-size-lg);
  font-weight: 700;
  letter-spacing: -0.05em;
}

/* ----- Header 中间：搜索框 ----- */
.header-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 64rem;
  margin: 0 auto;
}

.header-search {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 60rem;
}

.header-search-input {
  flex: 1;
  height: 4rem;
  padding: 0 var(--layout-spacing-lg);
  background-color: var(--layout-bg);
  border: 1px solid var(--layout-border);
  border-right: none;
  border-radius: var(--layout-radius-sm) 0 0 var(--layout-radius-sm);
  color: var(--layout-text-primary);
  font-size: var(--layout-font-size-md);
  font-family: var(--layout-font-family);
  outline: none;
  transition: border-color var(--layout-transition-fast);
}

.header-search-input:focus {
  border-color: #1c62b9;
}

.header-search-input::placeholder {
  color: var(--layout-text-secondary);
}

.header-search-btn {
  width: 6.4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--layout-bg-tertiary);
  border: 1px solid var(--layout-border);
  border-radius: 0 var(--layout-radius-sm) var(--layout-radius-sm) 0;
  cursor: pointer;
  color: var(--layout-text-primary);
  font-size: var(--layout-font-size-lg);
  transition: background-color var(--layout-transition-fast);
  flex-shrink: 0;
}

.header-search-btn:hover {
  background-color: var(--layout-hover);
}

/* 搜索语音按钮 (YouTube 风格) */
.header-search-voice {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--layout-radius-full);
  background-color: var(--layout-bg-tertiary);
  border: none;
  color: var(--layout-text-primary);
  font-size: var(--layout-font-size-lg);
  margin-left: var(--layout-spacing-md);
  flex-shrink: 0;
  transition: background-color var(--layout-transition-fast);
}

.header-search-voice:hover {
  background-color: var(--layout-hover);
}

/* ----- Header 右侧：操作按钮 ----- */
.header-right {
  display: flex;
  align-items: center;
  gap: var(--layout-spacing-sm);
  flex-shrink: 0;
}

.header-icon-btn {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--layout-radius-full);
  transition: background-color var(--layout-transition-fast);
  border: none;
  background: transparent;
  color: var(--layout-text-primary);
  font-size: var(--layout-font-size-xxl);
  position: relative;
}

.header-icon-btn:hover {
  background-color: var(--layout-hover);
}

.header-icon-btn .badge {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  background-color: var(--layout-accent);
  color: #fff;
  font-size: var(--layout-font-size-xs);
  font-weight: 600;
  padding: 0 0.5rem;
  min-width: 1.6rem;
  height: 1.6rem;
  line-height: 1.6rem;
  text-align: center;
  border-radius: var(--layout-radius-full);
}

.header-avatar {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: var(--layout-radius-full);
  object-fit: cover;
  cursor: pointer;
  margin-left: var(--layout-spacing-sm);
}

/* ============================================================
   左侧边栏 (Sidebar) - 从 header 下方开始
   参考 YouTube: 固定左侧, 与 header 独立滚动
   ============================================================ */
.layout-sidebar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--header-height));
  background-color: var(--layout-bg-secondary);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--z-sidebar);
  border-right: 1px solid var(--layout-border);
  transition: transform var(--layout-transition-normal), width var(--layout-transition-normal);
  scrollbar-width: thin;
  scrollbar-color: var(--layout-border) transparent;
}

.layout-sidebar::-webkit-scrollbar {
  width: 0.4rem;
}

.layout-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--layout-border);
  border-radius: var(--layout-radius-full);
}

/* 侧边栏顶部（无 Logo，只有间距） */
.sidebar-top {
  padding: var(--layout-spacing-md) 0 0;
  border-bottom: 0.1rem solid var(--layout-border);
}

/* 边栏菜单 */
.sidebar-menu {
  padding: var(--layout-spacing-md) 0;
}

/* 菜单分组标题 */
.sidebar-section-title {
  padding: var(--layout-spacing-sm) var(--layout-spacing-xl) var(--layout-spacing-sm);
  font-size: var(--layout-font-size-xs);
  font-weight: 600;
  color: var(--layout-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 单个菜单项 */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--layout-spacing-xl);
  padding: 0 var(--layout-spacing-lg);
  height: 4rem;
  font-size: var(--layout-font-size-base);
  color: var(--layout-text-primary);
  cursor: pointer;
  border-radius: var(--layout-radius-md);
  margin: 0.1rem var(--layout-spacing-sm);
  white-space: nowrap;
  transition: background-color var(--layout-transition-fast);
  position: relative;
  border: none;
  background: transparent;
  font-family: var(--layout-font-family);
  width: calc(100% - 1.6rem);
  text-align: left;
}

.sidebar-item:hover {
  background-color: var(--layout-hover);
}

.sidebar-item.active {
  background-color: var(--layout-hover);
  /*font-weight: 600;*/
}

.sidebar-item-icon {
  width:2.4rem;
  height:2.4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--layout-font-size-lg);

}
/*.sidebar-item-icon img {*/
/*  filter:*/
/*          saturate(0)        !* 去色 *!*/
/*          brightness(0)      !* 亮度归零 → 全黑 *!*/
/*          contrast(1000%);   !* 增强对比度，清除灰色过渡 *!*/
/*}*/


/*body.dark-theme .sidebar-item-icon img {*/

/*  filter:*/
/*          saturate(0)*/
/*          brightness(0)*/
/*          contrast(1000%)*/
/*          invert(1);        !* 黑 → 白 *!*/
/*  }*/

.sidebar-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--layout-transition-fast);
  flex: 1;
}

/* 徽章 */
.sidebar-item-badge {
  background-color: var(--layout-accent);
  color: #fff;
  font-size: var(--layout-font-size-xs);
  padding: 0 0.6rem;
  border-radius: var(--layout-radius-full);
  line-height: 1.8rem;
  flex-shrink: 0;
  font-weight: 600;
}

/* 侧边栏分隔线 */
.sidebar-divider {
  height: 0.1rem;
  background-color: var(--layout-border);
  margin: var(--layout-spacing-md) var(--layout-spacing-lg);
}

/* 侧边栏底部信息 */
.sidebar-footer-info {
  padding: var(--layout-spacing-lg);
  font-size: var(--layout-font-size-xs);
  color: #717171;
  line-height: 1.6;
}

/* ===== 侧边栏折叠状态 (collapsed - 图标模式) ===== */
.layout-sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}
.layout-sidebar.collapsed .sidebar-top{
  display: none;
}
/*.layout-sidebar.collapsed .sidebar-item-label,*/
.layout-sidebar.collapsed .sidebar-section-title,
.layout-sidebar.collapsed .sidebar-item-badge,
/*.layout-sidebar.collapsed .sidebar-divider,*/
.layout-sidebar.collapsed .sidebar-footer-info {
  opacity: 0;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: none;
}

.layout-sidebar.collapsed .sidebar-item {
  justify-content: center;
  display: flex;
  padding: 0;
  width: 4rem;
  height:5rem;
  margin: 0.3rem auto;
  gap: 0;
  flex-direction: column;
}
.layout-sidebar.collapsed .sidebar-item .sidebar-item-label{
  font-size: var(--layout-font-size-xs);
}
.layout-sidebar.collapsed .sidebar-menu {
  padding: var(--layout-spacing-xs) 0;
}

/* ============================================================
   分类标签栏 (Chips / Categories Bar)
   参考 YouTube: 内容上方可水平滚动的分类标签
   ============================================================ */
.layout-chips {
  display: flex;
  align-items: center;
  height: var(--chips-height);
  /*padding: 0 var(--layout-spacing-xl);*/
  background-color: var(--layout-bg);
  /*border-bottom: 1px solid var(--layout-border);*/
  overflow-x: auto;
  overflow-y: hidden;
  gap: var(--layout-spacing-sm);
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: sticky;
  top: var(--header-height);
  z-index: calc(var(--z-header) - 1);
}

.layout-chips::-webkit-scrollbar {
  display: none;
}

.chip-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.2rem;
  padding: 0 var(--layout-spacing-md);
  background-color: var(--layout-bg-tertiary);
  border: 1px solid var(--layout-border);
  border-radius: var(--layout-radius-md);
  color: var(--layout-text-primary);
  font-size: var(--layout-font-size-base);
  font-family: var(--layout-font-family);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--layout-transition-fast);
  flex-shrink: 0;
}

.chip-item:hover {
  background-color: var(--layout-hover);
}

.chip-item.active {
  background-color: var(--layout-text-primary);
  color: var(--layout-bg);
  border-color: var(--layout-text-primary);
  font-weight: 600;
}

/* ============================================================
   右部 - 主区域 (Main)
   包含: chips + content + footer
   ============================================================ */
.layout-main {
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-height));
  transition: margin-left var(--layout-transition-normal);
}

.layout-sidebar.collapsed ~ .layout-main,
body:has(.layout-sidebar.collapsed) .layout-main {
  margin-left: var(--sidebar-collapsed-width);
}

/* 通用内容区域 */
.layout-content {
  padding: var(--layout-spacing-xl);
  flex: 1;
}

/* 内容容器 - 网格布局 (YouTube 视频流) */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  gap: var(--layout-spacing-lg) var(--layout-spacing-md);
}

/* 内容卡片 (视频卡片) */
.content-card {
  background-color: transparent;
  border-radius: var(--layout-radius-lg);
  overflow: hidden;
  cursor: pointer;
}

.content-card-thumb-wrap {
  position: relative;
  border-radius: var(--layout-radius-lg);
  overflow: hidden;
  background-color: var(--layout-bg-tertiary);
  margin-bottom: var(--layout-spacing-md);
}

.content-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* 视频时长标签 */
.content-card-duration {
  position: absolute;
  bottom: 0.4rem;
  right: 0.4rem;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: var(--layout-font-size-xs);
  font-weight: 500;
  padding: 0.2rem 0.4rem;
  border-radius: var(--layout-radius-sm);
  line-height: 1.2;
}

/* 卡片主体（头像 + 文字） */
.content-card-body {
  display: flex;
  gap: var(--layout-spacing-md);
  padding: 0;
}

.content-card-avatar {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: var(--layout-radius-full);
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.content-card-info {
  flex: 1;
  min-width: 0;
}

.content-card-title {
  font-size: var(--layout-font-size-base);
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--layout-spacing-xs);
  color: var(--layout-text-primary);
}

.content-card-meta {
  font-size: var(--layout-font-size-sm);
  color: var(--layout-text-secondary);
  line-height: 1.5;
}

.content-card-meta .dot::before {
  content: "·";
  margin: 0 var(--layout-spacing-xs);
}

/* 内容列表布局 (搜索结果/播放列表) */
.content-list {
  display: flex;
  flex-direction: column;
  gap: var(--layout-spacing-lg);
}

.content-list-item {
  display: flex;
  gap: var(--layout-spacing-lg);
  border-radius: var(--layout-radius-lg);
  transition: background-color var(--layout-transition-fast);
  cursor: pointer;
  padding: var(--layout-spacing-sm);
}

.content-list-item:hover {
  background-color: var(--layout-bg-secondary);
}

.content-list-thumb-wrap {
  width: 20rem;
  flex-shrink: 0;
  position: relative;
  border-radius: var(--layout-radius-lg);
  overflow: hidden;
  background-color: var(--layout-bg-tertiary);
}

.content-list-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.content-list-duration {
  position: absolute;
  bottom: 0.4rem;
  right: 0.4rem;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: var(--layout-font-size-xs);
  font-weight: 500;
  padding: 0.2rem 0.4rem;
  border-radius: var(--layout-radius-sm);
}

.content-list-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--layout-spacing-sm);
  min-width: 0;
  padding-top: var(--layout-spacing-xs);
}

/* 页面标题 */
.page-title {
  font-size: var(--layout-font-size-xxl);
  font-weight: 700;
  margin-bottom: var(--layout-spacing-xl);
}

.page-subtitle {
  font-size: var(--layout-font-size-md);
  color: var(--layout-text-secondary);
  margin-bottom: var(--layout-spacing-lg);
}

/* Section 区块 */
.section {
  margin-bottom: var(--layout-spacing-xxl);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--layout-spacing-lg);
}

.section-title {
  font-size: var(--layout-font-size-xl);
  font-weight: 700;
}

.section-more {
  font-size: var(--layout-font-size-sm);
  color: var(--layout-text-secondary);
  cursor: pointer;
  transition: color var(--layout-transition-fast);
}

.section-more:hover {
  color: var(--layout-text-primary);
}

/* ============================================================
   右下部 - 底部 (Footer)
   ============================================================ */
.layout-footer {
  background-color: var(--layout-bg);
  border-top: 1px solid var(--layout-border);
  padding: var(--layout-spacing-xl) var(--layout-spacing-xl);
  min-height: var(--footer-min-height);
  flex-shrink: 0;
  /*margin-top: var(--layout-spacing-xl);*/
}

.footer-inner {
  max-width: 120rem;
  margin: 0 auto;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-spacing-sm) var(--layout-spacing-lg);
  margin-bottom: var(--layout-spacing-md);
}

.footer-link {
  font-size: var(--layout-font-size-sm);
  color: var(--layout-text-secondary);
  transition: color var(--layout-transition-fast);
  cursor: pointer;
  white-space: nowrap;
}

.footer-copyright {
  font-size: var(--layout-font-size-sm);
  color: var(--layout-text-secondary);
  line-height: 1.6;
}



/* ============================================================
   下部 - 移动端底部导航栏 (Mobile Bottom Nav)
   ============================================================ */
.layout-mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mobile-bottom-nav-height);
  background-color: var(--layout-bg-secondary);
  border-top: 1px solid var(--layout-border);
  z-index: var(--z-mobile-nav);
  justify-content: space-around;
  align-items: center;
  padding: 0 var(--layout-spacing-sm);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  cursor: pointer;
  color: var(--layout-text-secondary);
  transition: color var(--layout-transition-fast);
  padding: var(--layout-spacing-xs) var(--layout-spacing-sm);
  border: none;
  background: transparent;
  font-family: var(--layout-font-family);
  min-width: 5.6rem;
}

.mobile-nav-item.active {
  color: var(--layout-text-primary);
}

.mobile-nav-item-icon {
  font-size: 2rem;
  line-height: 1;
}

.mobile-nav-item-label {
  font-size: var(--layout-font-size-xs);
  line-height: 1;
  white-space: nowrap;
}

/* ============================================================
   侧边栏遮罩层 (移动端)
   ============================================================ */
.layout-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-sidebar) - 1);
  opacity: 0;
  transition: opacity var(--layout-transition-normal);
  pointer-events: none;
}

.layout-sidebar-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   响应式 - 平板 (Tablet: 768px ~ 1280px)
   ============================================================ */
@media (max-width: 1280px) {
  .content-grid {
    grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  }
}

@media (max-width: 1024px) {
  :root {
    --sidebar-width: 7.2rem;
  }

  /*.layout-sidebar .sidebar-item-label,*/
  .layout-sidebar .sidebar-section-title,
  .layout-sidebar .sidebar-item-badge,
  /*.layout-sidebar .sidebar-divider,*/
  .layout-sidebar .sidebar-footer-info {
    opacity: 0;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: none;
  }

  .layout-sidebar .sidebar-item {
    justify-content: center;
    padding: 0;
    width: 4rem;
    margin: 0.1rem auto;
    gap: 0;
  }

  .layout-sidebar .sidebar-menu {
    padding: var(--layout-spacing-xs) 0;
  }

  .layout-main {
    margin-left: var(--sidebar-collapsed-width);
  }

  .content-grid {
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    gap: var(--layout-spacing-md);
  }

  .content-list-thumb-wrap {
    width: 16rem;
  }

  .layout-content {
    padding: var(--layout-spacing-lg);
  }
}

/* ============================================================
   响应式 - 手机横屏 & 小平板 (640px ~ 768px)
   ============================================================ */
@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  }

  .content-list-item {
    flex-direction: column;
  }

  .content-list-thumb-wrap {
    width: 100%;
  }

  .header-search-voice {
    display: none;
  }
}

/* ============================================================
   响应式 - 手机竖屏 (Mobile: < 640px)
   ============================================================ */
@media (max-width: 640px) {
  :root {
    --header-height: 4.8rem;
    --chips-height: 4.4rem;
    --layout-spacing-xl: 1.6rem;
    --layout-spacing-lg: 1.2rem;
    --layout-spacing-md: 1rem;
  }

  body {
    padding-top: var(--header-height);
    padding-bottom: var(--mobile-bottom-nav-height);
  }

  /* 侧边栏：隐藏 → 改为抽屉式 (从左侧滑入) */
  .layout-sidebar {
    transform: translateX(-110%);
    width: 26rem;
    top: 0;
    height: 100vh;
    z-index: calc(var(--z-sidebar) + 10);
    box-shadow: 0.4rem 0 1.6rem rgba(0, 0, 0, 0.5);
  }

  .layout-sidebar.open {
    transform: translateX(0);
  }
  .layout-sidebar.open .sidebar-top{
      margin-top:var(--header-height);
  }

  /* 抽屉模式下侧边栏显示完整内容 */
  .layout-sidebar .sidebar-item-label,
  .layout-sidebar .sidebar-section-title,
  .layout-sidebar .sidebar-item-badge,
  .layout-sidebar .sidebar-divider,
  .layout-sidebar .sidebar-footer-info {
    opacity: 1;
    width: auto;
    height: auto;
    padding: revert;
    margin: revert;
    overflow: visible;
    border: revert;
  }

  .layout-sidebar .sidebar-item {
    justify-content: flex-start;
    padding: 0 var(--layout-spacing-lg);
    width: calc(100% - 0.8rem);
    margin: 0.1rem var(--layout-spacing-sm);
    gap: var(--layout-spacing-xl);
  }

  .layout-sidebar .sidebar-menu {
    padding: var(--layout-spacing-md) 0;
  }

  .layout-sidebar-overlay {
    display: block;
  }

  .layout-main {
    margin-left: 0 !important;
  }

  .layout-header {
    padding: 0 var(--layout-spacing-md);
    gap: var(--layout-spacing-xs);
    justify-content: space-between;
  }

  /* 手机端 header 右侧只保留关键按钮 */
  .header-icon-btn:nth-child(n+3) {
    display: none;
  }

  .header-search-btn {
    width: 4rem;
  }

  .header-search-voice {
    display: none;
  }

  /* chips 标签栏滚动适配 */
  .layout-chips {
    padding: 0 var(--layout-spacing-md);
    height: var(--chips-height);
    top: var(--header-height);
  }

  .chip-item {
    font-size: var(--layout-font-size-sm);
    height: 3rem;
    padding: 0 var(--layout-spacing-md);
  }

  /* 内容区域适配手机 */
  .layout-content {
    padding: var(--layout-spacing-md);
    padding-bottom: 0;
  }

  .layout-footer {
    padding: var(--layout-spacing-md);
    padding-bottom: calc(var(--mobile-bottom-nav-height) + var(--layout-spacing-md));
  }

  /* 显示移动端底部导航 */
  .layout-mobile-bottom-nav {
    display: flex;
  }

  /* 手机端：视频卡片全宽 */
  .content-grid {
    grid-template-columns: 1fr;
    gap: var(--layout-spacing-lg) 0;
  }

  .content-list-item {
    flex-direction: column;
  }

  .content-list-thumb-wrap {
    width: 100%;
  }

  .page-title {
    font-size: var(--layout-font-size-xl);
    margin-bottom: var(--layout-spacing-lg);
  }

  .section-title {
    font-size: var(--layout-font-size-md);
  }

  .footer-links {
    justify-content: center;
  }

  .footer-copyright {
    text-align: center;
  }
}

/* ============================================================
   响应式 - 超小屏 (Small Mobile: < 360px)
   ============================================================ */
@media (max-width: 359px) {
  .header-icon-btn {
    width: 3.2rem;
    height: 3.2rem;
    font-size: var(--layout-font-size-md);
  }

  .header-avatar {
    width: 2.8rem;
    height: 2.8rem;
  }

  .mobile-nav-item {
    min-width: 4.4rem;
  }

  .header-search-input {
    font-size: var(--layout-font-size-base);
  }
}

/* ============================================================
   暗色/亮色模式 (默认暗色，body.light-theme 切换亮色)
   配合 JS 自动检测系统偏好 + 支持手动切换
   ============================================================ */

/* ── 默认：暗色主题 (Dark Mode) ── */
:root {
  --layout-bg: #0f0f0f;
  --layout-bg-secondary: #1a1a1a;
  --layout-bg-tertiary: #272727;
  --layout-text-primary: #f1f1f1;
  --layout-text-secondary: #aaaaaa;
  --layout-border: #303030;
  --layout-hover: #3a3a3a;
  --layout-header-bg: #0f0f0f;
}

/* ── 亮色主题 (Light Mode)：body 添加 .light-theme 类时触发 ── */
body.light-theme {
  --layout-bg: #ffffff;
  --layout-bg-secondary: #f9f9f9;
  --layout-bg-tertiary: #f0f0f0;
  --layout-text-primary: #0f0f0f;
  --layout-text-secondary: #606060;
  --layout-border: #e5e5e5;
  --layout-hover: #e5e5e5;
  --layout-header-bg: #ffffff;
}

/* ── 自动检测系统偏好 (备选：当 body 无 .light-theme 或 .dark-theme 时) ── */
@media (prefers-color-scheme: light) {
  body:not(.light-theme):not(.dark-theme) {
    --layout-bg: #ffffff;
    --layout-bg-secondary: #f9f9f9;
    --layout-bg-tertiary: #f0f0f0;
    --layout-text-primary: #0f0f0f;
    --layout-text-secondary: #606060;
    --layout-border: #e5e5e5;
    --layout-hover: #e5e5e5;
    --layout-header-bg: #ffffff;
  }
}

/* ── 亮色模式下卡片不需要阴影 ── */
body.light-theme .content-card:hover,
body:not(.light-theme):not(.dark-theme) .content-card:hover {
  box-shadow: none;
}

@media (prefers-color-scheme: light) {
  body:not(.light-theme):not(.dark-theme) .content-card:hover {
    box-shadow: none;
  }
}

/* ============================================================
   工具类
   ============================================================ */

/* 滚动条美化 */
.custom-scrollbar::-webkit-scrollbar {
  width: 0.6rem;
  height: 0.6rem;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--layout-border);
  border-radius: var(--layout-radius-full);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--layout-text-secondary);
}

/* 文本截断 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 间距辅助 */
.mt-sm { margin-top: var(--layout-spacing-sm); }
.mt-md { margin-top: var(--layout-spacing-md); }
.mt-lg { margin-top: var(--layout-spacing-lg); }
.mt-xl { margin-top: var(--layout-spacing-xl); }
.mb-sm { margin-bottom: var(--layout-spacing-sm); }
.mb-md { margin-bottom: var(--layout-spacing-md); }
.mb-lg { margin-bottom: var(--layout-spacing-lg); }
.mb-xl { margin-bottom: var(--layout-spacing-xl); }

/* Flex 辅助 */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 响应式显示/隐藏 */
.hide-pc {
  display: none !important;
}

@media (max-width: 640px) {
  .hide-mobile {
    display: none !important;
  }
  .hide-pc {
    display: initial !important;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .hide-tablet {
    display: none !important;
  }
}
.shicheng_actions{height: 2.5rem;font-size: var(--layout-font-size-sm); overflow: hidden;}
.shicheng_actions .swiper-slide {
  white-space: nowrap;      /* 强制文字不换行 */
  overflow: hidden;         /* 超出部分隐藏 */
  text-overflow: ellipsis;  /* 超出后显示省略号（可选） */
}
.shicheng_actions  .do { color: #6bbf73; }     /* 柔绿 */
.shicheng_actions  .avoid { color: #e6a23c; }  /* 柔橙 */
.shicheng_actions  .risk { color: #d46a6a; }   /* 柔红 */
.shicheng_actions  .tip { color: #5aa4e6; }    /* 柔蓝 */

.moon {
  background-repeat: no-repeat;
  background-position:0.5rem center;
  background-size:4rem;
}
.moon-0 {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M127.658667 492.885333c0 69.632 17.066667 134.144 51.541333 192.853334s80.896 105.813333 139.946667 139.946666S442.368 877.226667 512 877.226667s133.802667-17.066667 192.853333-51.541334 105.472-80.896 139.605334-139.946666 51.541333-123.221333 51.541333-192.853334-17.066667-133.802667-51.541333-192.853333-80.896-105.472-139.605334-139.605333S581.632 108.885333 512 108.885333s-133.802667 17.408-192.853333 51.541334-105.813333 80.896-139.946667 139.605333-51.541333 123.221333-51.541333 192.853333z" style="fill: rgb(100, 108, 119);"></path></svg>');
}
.moon-1 {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><ellipse style="stroke: rgb(0, 0, 0); fill: rgb(245, 186, 69);" cx="511.394" cy="512.303" rx="383.796" ry="382.991"/><path d="M 128.06 511.829 C 128.06 459.946 138.3 410.111 158.439 362.666 C 178.578 315.221 206.226 274.602 240.359 240.127 C 274.492 205.653 315.452 178.346 362.898 158.207 C 410.343 138.069 459.836 127.829 512.06 127.829 C 564.284 127.829 613.778 138.069 661.223 158.207 C 708.668 178.346 749.628 205.994 784.103 240.127 C 818.578 274.261 845.884 315.221 866.023 362.666 C 886.162 410.111 896.402 459.605 896.402 511.829 C 896.402 564.053 886.162 613.546 866.023 660.991 C 845.884 708.437 818.236 749.397 784.103 783.871 C 749.97 818.346 709.01 845.653 661.223 865.791 C 613.436 885.93 563.943 896.17 512.06 896.17 C 460.178 896.17 410.343 885.93 362.898 865.791 C 315.452 845.653 274.834 818.005 240.359 783.871 C 205.884 749.738 178.578 708.778 158.439 660.991 C 138.3 613.205 128.06 564.053 128.06 511.829 Z M 559.506 171.861 C 615.484 202.581 661.564 246.954 697.404 304.981 C 733.244 363.007 750.994 431.957 750.994 511.829 C 750.994 679.082 692.284 791.722 574.866 849.407 C 655.079 834.389 721.98 795.135 775.228 731.989 C 828.476 668.842 855.1 595.455 855.1 511.829 C 855.1 455.167 842.13 402.261 816.188 352.767 C 790.247 303.274 754.748 262.997 709.351 230.911 C 663.954 198.826 614.802 179.711 559.506 171.861 Z" style="fill: rgb(100, 108, 119);"/></svg>');
}
.moon-2 {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><ellipse style="stroke: rgb(0, 0, 0); fill: rgb(245, 186, 69);" cx="511.394" cy="512.303" rx="383.796" ry="382.991"/><path d="M 127.83 511.829 C 127.83 459.947 138.07 410.112 158.208 362.667 C 178.347 315.221 205.995 274.603 240.128 240.128 C 274.262 205.653 315.222 178.347 362.667 158.208 C 410.112 138.069 459.606 127.829 511.83 127.829 C 564.054 127.829 613.547 138.069 660.992 158.208 C 708.438 178.347 749.398 205.995 783.872 240.128 C 818.347 274.261 845.654 315.221 865.792 362.667 C 885.931 410.112 896.171 459.605 896.171 511.829 C 896.171 564.053 885.931 613.547 865.792 660.992 C 845.654 708.437 818.006 749.397 783.872 783.872 C 749.739 818.347 708.779 845.653 660.992 865.792 C 613.206 885.931 563.712 896.171 511.83 896.171 C 459.947 896.171 410.112 885.931 362.667 865.792 C 315.222 845.653 274.603 818.005 240.128 783.872 C 205.654 749.739 178.347 708.779 158.208 660.992 C 138.07 613.205 127.83 564.053 127.83 511.829 Z M 505.344 855.552 L 511.83 855.552 C 558.592 855.552 602.966 846.336 645.291 828.245 C 687.616 810.155 724.139 785.579 754.859 754.859 C 785.579 724.139 809.814 687.616 828.246 645.291 C 846.678 602.965 855.552 558.592 855.552 511.829 C 855.552 465.408 846.336 421.035 828.246 378.709 C 810.155 336.384 785.579 299.861 754.859 269.141 C 724.139 238.421 687.616 214.187 645.291 195.755 C 602.966 177.323 558.592 168.448 511.83 168.448 L 505.344 168.448 L 505.344 855.552 Z" style="fill: rgb(100, 108, 119);"/></svg>');
}
.moon-3 {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><ellipse style="stroke: rgb(0, 0, 0); fill: rgb(245, 186, 69);" cx="511.394" cy="512.303" rx="383.796" ry="382.991"/><path d="M 127.829 511.829 C 127.829 442.538 144.895 378.368 179.37 319.317 C 213.845 260.266 260.266 213.504 319.317 179.37 C 378.367 145.237 442.538 127.829 511.829 127.829 C 563.711 127.829 613.546 138.069 660.991 158.208 C 708.437 178.346 749.397 205.994 783.871 240.128 C 818.346 274.261 845.653 315.221 865.791 362.666 C 885.93 410.112 896.17 459.605 896.17 511.829 C 896.17 564.053 885.93 613.546 865.791 660.992 C 845.653 708.437 818.005 749.397 783.871 783.872 C 749.738 818.346 708.778 845.653 660.991 865.792 C 613.205 885.93 563.711 896.17 511.829 896.17 C 459.946 896.17 410.111 885.93 362.666 865.792 C 315.221 845.653 274.261 818.005 240.127 783.872 C 205.994 749.738 178.687 708.778 158.207 660.992 C 137.727 613.205 127.829 564.053 127.829 511.829 Z M 359.935 511.829 C 359.935 663.381 399.871 777.386 479.402 853.845 C 481.791 853.845 485.205 853.845 489.642 854.186 C 494.079 854.528 498.175 854.869 501.589 854.869 C 505.002 854.869 508.415 855.21 511.829 855.21 C 558.25 855.21 602.623 845.994 644.949 827.904 C 687.274 809.813 724.138 785.237 754.858 754.517 C 785.578 723.797 809.813 687.274 828.245 644.949 C 846.677 602.624 855.551 558.25 855.551 511.488 C 855.551 465.066 846.335 420.693 828.245 378.368 C 810.154 336.042 785.578 299.52 754.858 268.8 C 724.138 238.08 687.615 213.845 644.949 195.413 C 602.282 176.981 557.909 168.106 511.829 168.106 C 499.541 168.106 490.325 168.448 484.181 169.13 C 447.317 210.773 417.279 260.949 394.069 320 C 370.858 379.05 359.935 443.221 359.935 511.829 Z" style="fill: rgb(100, 108, 119);"/></svg>');
}
.moon-4 {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><ellipse style="stroke: rgb(0, 0, 0); fill: rgb(245, 186, 69);" cx="511.394" cy="512.303" rx="383.796" ry="382.991"/><path d="M 127.318 512.341 C 127.318 460.117 137.558 409.941 157.696 362.496 C 177.835 315.051 205.483 274.091 239.616 239.616 C 273.75 205.141 314.71 177.835 362.496 157.696 C 410.283 137.557 459.776 127.317 511.659 127.317 C 563.883 127.317 614.059 137.557 661.504 157.696 C 708.95 177.835 749.91 205.483 784.384 239.616 C 818.859 273.749 846.166 314.709 866.304 362.496 C 886.443 410.283 896.683 459.776 896.683 512.341 C 896.683 564.224 886.443 614.059 866.304 661.504 C 846.166 708.949 818.518 749.909 784.384 784.384 C 750.251 818.859 709.291 846.165 661.504 866.304 C 613.718 886.443 564.224 896.683 511.659 896.683 C 459.776 896.683 409.942 886.443 362.496 866.304 C 315.051 846.165 274.091 818.517 239.616 784.384 C 205.142 750.251 177.835 709.291 157.696 661.504 C 137.558 613.717 127.318 564.565 127.318 512.341 Z M 168.278 512.341 C 168.278 558.763 177.494 603.136 195.584 645.461 C 213.675 687.787 238.251 724.651 268.971 755.371 C 299.691 786.091 336.214 810.325 378.88 828.757 C 421.547 847.189 465.92 856.064 512 856.064 C 558.763 856.064 603.136 846.848 645.462 828.757 C 687.787 810.667 724.31 786.091 755.371 755.371 C 786.432 724.651 810.667 688.128 828.758 645.461 C 846.848 602.795 856.064 558.421 856.064 512.341 C 856.064 450.219 840.704 392.875 809.984 339.968 C 779.264 287.061 737.28 245.419 684.374 214.357 C 631.467 183.296 574.123 168.277 512 168.277 C 465.579 168.277 421.206 177.493 378.88 195.584 C 336.555 213.675 299.691 238.251 268.971 269.312 C 238.251 300.373 214.016 336.896 195.584 379.221 C 177.152 421.547 168.278 465.92 168.278 512.341 Z" style="fill: rgb(100, 108, 119);"/></svg>');
}
.moon-5 {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><ellipse style="stroke: rgb(0, 0, 0); fill: rgb(245, 186, 69);" cx="511.394" cy="512.303" rx="383.796" ry="382.991"/><path d="M 127.829 511.829 C 127.829 459.947 138.069 410.112 158.207 362.667 C 178.346 315.221 205.994 274.603 240.127 240.128 C 274.261 205.653 315.221 178.347 362.666 158.208 C 410.111 138.069 459.605 127.829 511.829 127.829 C 564.053 127.829 613.546 138.069 660.991 158.208 C 708.437 178.347 749.397 205.995 783.871 240.128 C 818.346 274.261 845.653 315.221 865.791 362.667 C 885.93 410.112 896.17 459.605 896.17 511.829 C 896.17 564.053 885.93 613.547 865.791 660.992 C 845.653 708.437 818.005 749.397 783.871 783.872 C 749.738 818.347 708.778 845.653 660.991 865.792 C 613.205 885.931 563.711 896.171 511.829 896.171 C 459.946 896.171 410.111 885.931 362.666 865.792 C 315.221 845.653 274.602 818.005 240.127 783.872 C 205.653 749.739 178.346 708.779 158.207 660.992 C 138.069 613.205 127.829 564.053 127.829 511.829 Z M 168.789 511.829 C 168.789 558.592 178.005 602.965 196.095 645.291 C 214.186 687.616 238.762 724.139 269.482 754.859 C 300.202 785.579 336.725 809.813 379.05 828.245 C 421.375 846.677 465.749 855.552 512.17 855.552 C 523.434 855.552 531.967 855.552 537.087 855.211 C 563.711 834.389 586.239 810.496 603.989 783.189 C 621.738 755.883 635.391 726.528 644.266 695.467 C 653.141 664.405 659.285 634.368 662.698 605.696 C 666.111 577.024 667.818 545.963 667.818 512.171 C 667.818 446.976 656.895 383.829 634.709 323.072 C 612.522 262.315 578.389 211.115 531.626 169.813 C 527.189 169.472 520.703 169.472 511.487 169.472 C 465.066 169.472 420.693 178.688 378.367 196.779 C 336.042 214.869 300.202 238.763 269.482 269.483 C 238.762 300.203 214.527 336.725 196.095 379.051 C 177.663 421.376 168.789 465.749 168.789 511.829 Z" style="fill: rgb(100, 108, 119);"/></svg>');
}
.moon-6 {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><ellipse style="stroke: rgb(0, 0, 0); fill: rgb(245, 186, 69);" cx="511.394" cy="512.303" rx="383.796" ry="382.991"/><path d="M 127.829 511.829 C 127.829 459.947 138.069 410.112 158.207 362.667 C 178.346 315.221 205.994 274.603 240.127 240.128 C 274.261 205.653 315.221 178.347 362.666 158.208 C 410.111 138.069 459.605 127.829 511.829 127.829 C 564.053 127.829 613.546 138.069 660.991 158.208 C 708.437 178.347 749.397 205.995 783.871 240.128 C 818.346 274.261 845.653 315.221 865.791 362.667 C 885.93 410.112 896.17 459.605 896.17 511.829 C 896.17 564.053 885.93 613.547 865.791 660.992 C 845.653 708.437 818.005 749.397 783.871 783.872 C 749.738 818.347 708.778 845.653 660.991 865.792 C 613.205 885.931 563.711 896.171 511.829 896.171 C 459.946 896.171 410.111 885.931 362.666 865.792 C 315.221 845.653 274.602 818.005 240.127 783.872 C 205.653 749.739 178.346 708.779 158.207 660.992 C 138.069 613.205 127.829 564.053 127.829 511.829 Z M 168.789 511.829 C 168.789 558.592 178.005 602.965 196.095 645.291 C 214.186 687.616 238.762 724.139 269.482 754.859 C 300.202 785.579 336.725 809.813 379.05 828.245 C 421.375 846.677 465.749 855.552 512.17 855.552 L 519.338 855.552 L 519.338 168.789 L 512.17 168.789 C 465.749 168.789 421.375 178.005 379.05 196.096 C 336.725 214.187 300.202 238.763 269.482 269.483 C 238.762 300.203 214.527 336.725 196.095 379.051 C 177.663 421.376 168.789 465.749 168.789 511.829 Z" style="fill: rgb(100, 108, 119);"/></svg>');
}
.moon-7 {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><ellipse style="stroke: rgb(0, 0, 0); fill: rgb(245, 186, 69);" cx="511.394" cy="512.303" rx="383.796" ry="382.991"/><path d="M 127.829 511.829 C 127.829 459.947 138.069 410.112 158.207 362.667 C 178.346 315.221 205.994 274.603 240.127 240.128 C 274.261 205.653 315.221 178.347 362.666 158.208 C 410.111 138.069 459.605 127.829 511.829 127.829 C 564.053 127.829 613.546 138.069 660.991 158.208 C 708.437 178.347 749.397 205.995 783.871 240.128 C 818.346 274.261 845.653 315.221 865.791 362.667 C 885.93 410.112 896.17 459.605 896.17 511.829 C 896.17 564.053 885.93 613.547 865.791 660.992 C 845.653 708.437 818.005 749.397 783.871 783.872 C 749.738 818.347 708.778 845.653 660.991 865.792 C 613.205 885.931 563.711 896.171 511.829 896.171 C 459.946 896.171 410.111 885.931 362.666 865.792 C 315.221 845.653 274.602 818.005 240.127 783.872 C 205.653 749.739 178.346 708.779 158.207 660.992 C 138.069 613.205 127.829 564.053 127.829 511.829 Z M 168.789 511.829 C 168.789 596.48 196.095 670.891 251.05 734.72 C 306.005 798.549 374.613 837.461 456.874 851.115 C 422.399 834.048 393.386 813.568 369.493 788.992 C 345.599 764.416 326.826 737.792 313.855 708.096 C 300.885 678.4 291.327 647.68 285.525 615.936 C 279.722 584.192 276.65 549.376 276.65 511.488 C 276.65 439.467 293.717 372.907 327.509 312.149 C 361.301 251.392 408.405 204.288 468.138 171.52 C 412.501 178.688 361.983 197.803 316.245 229.547 C 270.506 261.291 234.666 302.251 208.383 352.085 C 182.101 401.92 168.789 454.827 168.789 511.829 Z" style="fill: rgb(100, 108, 119);"/></svg>');
}
.caret {
    border: 0 !important;
    width:10px;
    height:10px;
    vertical-align: middle;
    background: transparent;
    position: relative;
}
.caret::before {
        content: '';
        position: absolute;
        top: 30%;
        left: 50%;
        width:8px;
        height:8px;
        border-right: 2px solid #888; 
        border-bottom: 2px solid #888;
        transform: translate(-50%, -70%) rotate(45deg);
    }