@charset "UTF-8";
/**
 * 5x10.cn 扁平现代风格覆盖层（在 fui_blog style.css 之后加载）
 */

:root {
  --fui-bg: #eceff3;
  --fui-surface: #fff;
  --fui-border: #d8dee8;
  --fui-border-soft: #e4e8ef;
  --fui-hover-bg: #f3f6fb;
  --fui-cat-head-bg: #eef2f8;
  --fui-radius: 4px;
  --fui-radius-lg: 6px;
  --fui-page-x: 12px;
  --fui-block-gap: 10px;
  --fui-card-pad-y: 14px;
  --fui-card-pad-x: 18px;
  --fui-list-inset: 0;
  --fui-shell-max: 1320px;
  --fui-shell-pad: 16px;
  --fui-sidebar-w: 210px;
  --fui-shell-gap: 12px;
  --fui-aside-w: 300px;
  --fui-header-h: 60px;
  --fui-header-bg: #ffffff;
  --fui-shell-inset: max(var(--fui-shell-pad), calc((100vw - var(--fui-shell-max)) / 2));
  --fui-card-shadow: none;
}

body {
  background: var(--fui-bg) !important;
}

/* ---------- 页头：白底简洁条 + 与壳层对齐 ---------- */
header {
  background: var(--fui-header-bg) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--fui-border) !important;
  height: var(--fui-header-h);
  padding: 0 var(--fui-shell-inset) !important;
  max-width: 100%;
  box-sizing: border-box;
  gap: 24px;
}

header::before,
header::after {
  display: none !important;
  content: none !important;
}

.main {
  padding-top: var(--fui-header-h);
  min-height: calc(100vh - var(--fui-header-h));
}

.sidebar-nav {
  top: var(--fui-header-h);
}

.brand .logo::after {
  display: none !important;
}

.brand .logo a {
  display: flex;
  align-items: center;
  line-height: 0;
}

/* 覆盖主题 mobile 规则里的 background:#fff */
.brand .logo img {
  height: 32px !important;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: opacity 0.2s ease;
}

.brand:hover .logo img {
  transform: none !important;
  opacity: 0.88;
}

/* logo 与站点名重复时只保留 logo */
.brand .logo + .name {
  display: none;
}

.brand .name {
  line-height: var(--fui-header-h);
  font-size: 21px;
  font-weight: 700;
}

.brand .name a {
  background: none !important;
  -webkit-text-fill-color: var(--fui-text) !important;
  color: var(--fui-text) !important;
  letter-spacing: -0.02em;
}

.brand .name a:hover {
  color: var(--fui-accent-deep) !important;
}

/* 主导航：统一蓝色下划线，取消彩虹频道色 */
.nav > ul > li {
  line-height: var(--fui-header-h);
}

.nav li a {
  font-size: 15px;
  padding: 0 16px;
  color: var(--fui-text-secondary) !important;
}

.nav > ul > li.current-li > a,
.nav > ul > li:nth-child(n).current-li > a {
  color: var(--fui-accent-deep) !important;
  background: transparent !important;
  font-weight: 600;
}

.nav > ul > li::before {
  bottom: 0;
  height: 2px !important;
  border-radius: 0 !important;
  background: var(--fui-accent-deep) !important;
  box-shadow: none !important;
}

.nav > ul > li.current-li::before,
.nav > ul > li:hover::before,
.nav > ul > li:nth-child(n).current-li::before,
.nav > ul > li:nth-child(n):hover::before {
  background: var(--fui-accent-deep) !important;
  box-shadow: none !important;
}

.nav > ul > li > a:hover {
  color: var(--fui-accent-deep) !important;
  background: var(--fui-hover-bg) !important;
}

.nav > ul > li.current-li > a {
  background: transparent !important;
}

/* 顶栏搜索：浅灰底胶囊，与白顶栏协调 */
.search form {
  box-shadow: none !important;
  border: 1px solid var(--fui-border) !important;
  background: var(--fui-bg) !important;
  border-radius: 999px !important;
  overflow: hidden;
}

.search input {
  font-size: 14px;
}

.search button {
  border-radius: 0 999px 999px 0 !important;
}

.search form:focus-within {
  border-color: var(--fui-accent) !important;
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.12) !important;
}

.search button {
  background: var(--fui-accent-deep) !important;
  box-shadow: none !important;
}

.search button:hover {
  transform: none !important;
  background: var(--fui-accent-hover) !important;
}

/* ---------- 左侧分类：圆角卡片 + 与主内容同壳居中（宽屏） ---------- */
@media screen and (min-width: 1537px) {
  .main.is-sidebar-nav,
  footer.is-sidebar-nav {
    margin-left: 0 !important;
    padding-left: calc(var(--fui-shell-inset) + var(--fui-sidebar-w) + var(--fui-shell-gap)) !important;
    padding-right: var(--fui-shell-inset) !important;
    box-sizing: border-box;
  }

  footer.is-sidebar-nav .main-width {
    max-width: none !important;
    width: 100%;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .sidebar-nav {
    position: fixed;
    top: calc(var(--fui-header-h) + var(--fui-block-gap));
    left: var(--fui-shell-inset);
    width: var(--fui-sidebar-w) !important;
    bottom: auto;
    max-height: calc(100vh - var(--fui-header-h) - var(--fui-block-gap) * 2);
    margin: 0;
    padding: 0;
    border-radius: var(--fui-radius-lg);
    border: 1px solid var(--fui-border) !important;
    border-right: 1px solid var(--fui-border) !important;
    background: var(--fui-surface);
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .sidebar-nav > ul {
    padding: 14px 14px 18px !important;
    width: 100% !important;
  }

  .sidebar-nav li.level-0 > a {
    margin-top: 6px;
    padding: 8px 12px !important;
    line-height: 1.35;
    border-radius: var(--fui-radius);
    background: var(--fui-cat-head-bg);
    font-size: 14px;
    font-weight: 600;
  }

  .sidebar-nav li.level-0:first-child > a {
    margin-top: 0;
  }

  .sidebar-nav li.level-1 > a,
  .sidebar-nav > ul > li > ul > li > a {
    padding-left: 12px !important;
    line-height: 32px;
  }

  .main.is-sidebar-nav .main-width,
  .is-sidebar .main-width {
    max-width: none !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 中+右栏总宽 = shell - 左栏 - 间距，与参考站比例接近 */
  .main.is-sidebar-nav .main-width-flex,
  .is-sidebar .main-width-flex {
    max-width: calc(var(--fui-shell-max) - var(--fui-sidebar-w) - var(--fui-shell-gap));
    margin-left: 0;
    margin-right: auto;
  }
}

@media screen and (min-width: 1025px) {
  .main-width-flex {
    gap: var(--fui-shell-gap) !important;
  }

  .main-width-flex .main-right {
    flex: 0 0 var(--fui-aside-w) !important;
    width: var(--fui-aside-w) !important;
  }
}

@media screen and (min-width: 1025px) {
  .main:not(.is-sidebar-nav) {
    padding-left: var(--fui-shell-inset) !important;
    padding-right: var(--fui-shell-inset) !important;
    box-sizing: border-box;
  }

  .main:not(.is-sidebar-nav) .main-width {
    max-width: var(--fui-shell-max) !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 无左侧分类时：双栏也限制在壳宽内 */
  .main:not(.is-sidebar-nav) .main-width-flex {
    max-width: var(--fui-shell-max);
    margin-left: auto;
    margin-right: auto;
  }

  footer:not(.is-sidebar-nav) .main-width {
    max-width: var(--fui-shell-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  footer:not(.is-sidebar-nav) {
    padding-left: var(--fui-shell-inset);
    padding-right: var(--fui-shell-inset);
    box-sizing: border-box;
  }
}

/* 窄屏仍用主题抽屉侧栏，不强制壳层 */
@media screen and (max-width: 1536px) {
  .sidebar-nav {
    border-radius: 0;
  }

  .main.is-sidebar-nav,
  footer.is-sidebar-nav {
    margin-left: 0 !important;
    padding-left: var(--fui-shell-inset) !important;
    padding-right: var(--fui-shell-inset) !important;
    box-sizing: border-box;
  }

  .main.is-sidebar-nav .main-width {
    max-width: var(--fui-shell-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------- 左侧分类导航（通用） ---------- */
.sidebar-nav {
  background: var(--fui-surface);
  border-right: 1px solid var(--fui-border);
}

.sidebar-nav > ul {
  padding: 4px 0 8px !important;
}

.sidebar-nav ul li a {
  border-radius: 6px;
  margin: 0 6px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 32px;
}

.sidebar-nav li.level-0 > a {
  font-weight: 600;
  color: var(--fui-text);
}

.sidebar-nav li.level-1 > a::before,
.sidebar-nav > ul > li > ul > li > a::before,
.sidebar-nav li.level-2 > a::before,
.sidebar-nav li.level-3 > a::before {
  background: var(--fui-text-muted) !important;
  opacity: 0.35 !important;
}

.sidebar-nav ul li.current-li > a {
  background: var(--fui-hover-bg);
  color: var(--fui-accent-deep);
}

/* ---------- 紧凑间距 + 统一内边距（避免贴边/顶头） ---------- */
.main-width {
  padding-left: 0;
  padding-right: 0;
}

@media screen and (max-width: 1024px) {
  .main-width {
    padding-left: var(--fui-page-x);
    padding-right: var(--fui-page-x);
  }

  .main.is-sidebar-nav,
  .main:not(.is-sidebar-nav) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.main-width section {
  margin: var(--fui-block-gap) 0 !important;
}

.breadcrumb {
  margin: var(--fui-block-gap) 0 0 !important;
  padding: 6px 0 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  line-height: 1.45;
  font-size: 13px;
  color: var(--fui-text-muted);
}

.breadcrumb a {
  color: var(--fui-accent-deep);
  font-weight: 500;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb + .main-width-flex {
  margin-top: var(--fui-block-gap);
}

@media screen and (min-width: 1025px) {
  .main > .main-width-flex {
    padding-top: var(--fui-block-gap) !important;
    gap: var(--fui-shell-gap) !important;
  }

  .main > .main-width-header + .main-width-flex {
    padding-top: 0 !important;
  }

  .main-width-flex .main-left > section,
  .main-width-flex .main-right .function {
    margin-top: 0 !important;
    margin-bottom: var(--fui-block-gap) !important;
  }

  .main-width-flex .main-left > section:first-child {
    margin-top: 0 !important;
  }
}

/* 卡片：四边留白（覆盖主题 padding-top:0） */
.main-left > section:not(.slides-wrapper):not(.booth),
.main > div.main-width > section:not(.slides-wrapper):not(.booth) {
  border: 1px solid var(--fui-border) !important;
  border-radius: var(--fui-radius-lg) !important;
  box-shadow: var(--fui-card-shadow) !important;
  padding: var(--fui-card-pad-y) var(--fui-card-pad-x) !important;
  background: var(--fui-surface);
}

.main-left > section.filter-section.filter-section {
  padding: var(--fui-card-pad-y) var(--fui-card-pad-x) 10px !important;
}

.main-left > section.filter-section .filter-group {
  padding-bottom: 10px !important;
  gap: 10px 14px !important;
}

.main-left > section.filter-section .filter-group:last-child {
  padding-bottom: 0 !important;
}

.filter-section .filter-group > label {
  flex: 0 0 3em;
  text-align: left;
  font-size: 13px;
  color: var(--fui-text-secondary);
}

.filter-section .filter-group > div {
  gap: 8px 12px !important;
}

.filter-section a {
  padding: 0 12px !important;
  line-height: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
}

.filter-section a.current {
  box-shadow: none !important;
}

.columnintro {
  margin: 0 0 var(--fui-block-gap) !important;
  padding: 10px 14px 10px 42px !important;
  background: var(--fui-hover-bg);
  border: 1px solid var(--fui-border-soft);
  border-radius: var(--fui-radius);
  line-height: 1.65;
  font-size: 13px;
}

.columnintro::before {
  left: 14px !important;
  top: 8px !important;
  font-size: 18px !important;
}

.section-header {
  margin-bottom: 10px !important;
  line-height: 38px !important;
}

.section-header h3::before,
.section-header-bar h3::before {
  background: var(--fui-accent-deep) !important;
  height: 2px !important;
}

.section-header::before {
  border-bottom-color: var(--fui-border-soft) !important;
}

/* Tab */
.tab-nav {
  margin-bottom: 10px !important;
  height: 38px;
  padding: 0 2px;
}

.tab-nav::before {
  border-bottom-color: var(--fui-border) !important;
}

.tab-nav li {
  font-size: 15px;
  line-height: 36px;
}

.tab-nav li::before {
  background: var(--fui-accent-deep) !important;
  height: 2px !important;
}

.main-width-flex .main-left > section > .tab-nav:first-child {
  margin-top: 0 !important;
}

/* 列表行：左右留白 */
.list-it.list-it-one li {
  border: 0 !important;
  border-bottom: 1px solid var(--fui-border-soft) !important;
  border-radius: 0 !important;
  padding: 9px 0 !important;
  gap: 12px;
  box-shadow: none !important;
}

.list-it.list-it-one li:last-child {
  border-bottom: 0 !important;
  padding-bottom: 4px !important;
}

.list-it.list-it-one li:first-child {
  padding-top: 4px !important;
}

.list-it.list-it-one li:hover {
  box-shadow: none !important;
  background: var(--fui-hover-bg);
  border-radius: 8px !important;
}

.list-it-content .intro {
  margin-top: 6px !important;
  font-size: 13px;
  color: var(--fui-text-muted);
}

.list-it-content .info {
  padding-top: 6px !important;
  font-size: 12px;
}

.list-it-content h2 {
  font-weight: 600;
  font-size: 16px;
}

.pagebar {
  margin: 8px 0 4px !important;
}

/* ---------- 右侧模块 ---------- */
.main-right .function {
  margin-bottom: var(--fui-block-gap) !important;
  border: 1px solid var(--fui-border);
  border-radius: var(--fui-radius-lg);
  overflow: hidden;
  background: var(--fui-surface);
  box-shadow: var(--fui-card-shadow);
}

.main-right .function_t {
  line-height: 36px !important;
  padding: 0 var(--fui-card-pad-x) !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.main-right .function_t::before,
.main > div.main-width > section:nth-child(4n+1) .function_t::before,
.main > div.main-width > section:nth-child(4n+2) .function_t::before,
.main > div.main-width > section:nth-child(4n+3) .function_t::before,
.main > div.main-width > section:nth-child(4n) .function_t::before,
.main-right .function:nth-child(4n+1) .function_t::before,
.main-right .function:nth-child(4n+2) .function_t::before,
.main-right .function:nth-child(4n+3) .function_t::before,
.main-right .function:nth-child(4n) .function_t::before {
  width: 3px !important;
  height: 16px !important;
  border-radius: 2px !important;
  background: var(--fui-accent) !important;
}

.main-right .function_c {
  border: 0 !important;
  border-top: 1px solid var(--fui-border-soft) !important;
}

.main-right .function_c > ul {
  padding: 8px var(--fui-card-pad-x) 12px !important;
  gap: 8px !important;
}

.function_c ul li.li-title {
  gap: 8px;
}

.function_c ul li.li-title h2 {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.function_c ul li.li-title small {
  border-radius: 4px !important;
}

/* 热门标签区若存在 */
.main-right .function_c .tag-list a,
.main-right .function_c a.tag {
  border-radius: 6px;
}

/* finchui2 会把 filter 做成独立白块；在 section 内时只保留内边距 */
.main-left > section.filter-section.filter-section {
  margin: 0 !important;
}

body .main-left > section.filter-section:not(.subcategorys) {
  margin: 0 !important;
  padding: var(--fui-card-pad-y) var(--fui-card-pad-x) 10px !important;
  border: 1px solid var(--fui-border) !important;
  background: var(--fui-surface) !important;
}

/* 网站分类等侧栏模块内容区 */
.main-right .function_c > div,
#divCatalog .function_c > ul {
  padding: 8px var(--fui-card-pad-x) 12px !important;
}

#divCatalog .function_c {
  border-top: 1px solid var(--fui-border-soft) !important;
}

/* ---------- 页脚 ---------- */
.footer {
  border-top: 1px solid var(--fui-border) !important;
  background: var(--fui-surface) !important;
}

/* ---------- 深色模式 ---------- */
.fui-dark header {
  background: #1a1d24 !important;
  border-bottom: 1px solid #2d323c !important;
  box-shadow: none !important;
}

.fui-dark .brand .logo img {
  background: transparent !important;
}

.fui-dark .brand .name a {
  -webkit-text-fill-color: #f3f4f6 !important;
  color: #f3f4f6 !important;
}

.fui-dark .sidebar-nav {
  background: #1a1d24;
  border-right-color: #2d323c;
}

.fui-dark .breadcrumb {
  background: #22262e !important;
  border-color: #2d323c !important;
  box-shadow: none;
}

.fui-dark .main-left > section:not(.slides-wrapper),
.fui-dark .main-right .function {
  border-color: #2d323c !important;
  background: #22262e !important;
}

.fui-dark .list-it.list-it-one li {
  border-bottom-color: #2d323c !important;
}

.fui-dark .list-it.list-it-one li:hover {
  background: #2a2f38;
}

@media screen and (max-width: 1280px) {
  .nav {
    top: var(--fui-header-h);
    height: calc(100vh - var(--fui-header-h));
  }

  .member,
  .language,
  .search {
    top: var(--fui-header-h);
  }
}

/* ---------- 文章页：左对齐标题 + 紧凑正文（参考 wikiHow / 扁平内容站） ---------- */
.main-left > section.content {
  padding-top: var(--fui-card-pad-y) !important;
}

.content h1 {
  text-align: left !important;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
  line-height: 1.3 !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.02em !important;
}

.article-meta {
  justify-content: flex-start !important;
  margin: 0 0 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--fui-border-soft);
  gap: 4px 14px !important;
}

.article-meta span {
  font-size: 13px !important;
}

.content article {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fui-text-body);
}

.content article p {
  margin: 0 0 0.85em;
}

.content article h2,
.content article h3,
.content article h4 {
  margin: 1.15em 0 0.45em;
  line-height: 1.35;
  font-weight: 700;
  color: var(--fui-text);
}

.content .tags {
  justify-content: flex-start !important;
  margin: 14px 0 0 !important;
  gap: 6px 8px !important;
  padding-top: 12px;
  border-top: 1px solid var(--fui-border-soft);
}

.content .tags a {
  box-shadow: none !important;
  border-radius: 4px !important;
  padding: 2px 9px !important;
  font-size: 12px !important;
  font-weight: 500;
}

.content .tags a:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: brightness(1.05);
}

/* 上下篇：扁平分隔，无悬浮阴影 */
.turn {
  gap: 12px !important;
}

.turn li {
  padding: 10px 12px !important;
  border-color: var(--fui-border-soft) !important;
  border-radius: var(--fui-radius) !important;
  box-shadow: none !important;
}

.turn li:hover {
  box-shadow: none !important;
  background: var(--fui-hover-bg);
}

/* 侧栏标签云：更密的两列 */
.main-right .function_c #divTags ul,
.main-right .function_c #hottag ul,
.main-right .function_c #randtag ul {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px 10px !important;
  font-size: 13px;
  line-height: 1.45;
}

.main-right .function_c #divTags ul li a,
.main-right .function_c #hottag ul li a,
.main-right .function_c #randtag ul li a {
  color: var(--fui-text-body);
}

.main-right .function_c #divTags ul li span,
.main-right .function_c #hottag ul li span,
.main-right .function_c #randtag ul li span {
  font-size: 11px;
}

/* 全局压制主题层叠阴影（保持扁平） */
.main-left > section:not(.slides-wrapper):not(.booth),
.main > div.main-width > section:not(.slides-wrapper):not(.booth),
.main-right .function,
.breadcrumb {
  box-shadow: none !important;
}

.list-it.list-it-one li:hover,
.list-it li:hover,
.list-card li:hover,
.list-website li:hover {
  box-shadow: none !important;
}

.fui-dark .content h1 {
  color: #f3f4f6 !important;
}

.fui-dark .article-meta {
  border-bottom-color: #2d323c;
}

.fui-dark .content .tags {
  border-top-color: #2d323c;
}

.fui-dark .turn li:hover {
  background: #2a2f38;
}