/**
 * 跨浏览器兼容样式
 * Chrome / Edge / Firefox / Safari / 360 / QQ / UC / 微信内置浏览器
 */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
}

*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* position: sticky */
.topbar,
.portal-sidebar,
.portal-main-widgets,
.site-page-aside,
.category-page-aside,
.search-page-aside,
.submit-aside,
.m-header,
.m-cat-tabs {
  position: -webkit-sticky;
  position: sticky;
}

/* inset 降级（旧版 Safari / 部分国产浏览器） */
.hero-banner-bg,
.page-banner-bg,
.site-detail-banner-bg,
.m-site-banner-bg,
.hero-banner-bg::after,
.page-banner-bg::after,
.site-detail-banner-bg::after,
.m-site-banner-bg::after {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.hero-banner-bg,
.page-banner-bg,
.site-detail-banner-bg,
.m-site-banner-bg {
  width: 100%;
  height: 100%;
}

/* 全高视口：配合 compat.js 的 --vh */
@supports (height: 100dvh) {
  body.m-body {
    min-height: 100dvh;
  }
}

body.m-body {
  min-height: calc(var(--vh, 1vh) * 100);
}

.m-main {
  min-height: calc(var(--vh, 1vh) * 100 - var(--m-header-h) - var(--m-tabbar-h));
}

/* iOS 安全区：constant 旧语法 + env 新语法 */
.m-header {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top, 0px);
}

.m-tabbar {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: calc(var(--m-tabbar-h) + constant(safe-area-inset-bottom));
  height: calc(var(--m-tabbar-h) + env(safe-area-inset-bottom, 0px));
}

body.m-body {
  padding-bottom: calc(var(--m-tabbar-h) + constant(safe-area-inset-bottom));
  padding-bottom: calc(var(--m-tabbar-h) + env(safe-area-inset-bottom, 0px));
}

/* 表单：iOS 输入框样式与防缩放（小于 16px 会放大） */
input[type="text"],
input[type="search"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea {
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select,
button {
  font-family: inherit;
}

input[type="search"] {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.m-search-form input,
.m-field input,
.m-field select,
.m-field textarea,
.search-form input,
.search-list-form input,
.search-list-field input,
.hero-search-form input,
.submit-panel input,
.submit-panel select,
.submit-panel textarea,
.admin-form input,
.admin-form select,
.admin-form textarea {
  font-size: 16px;
}

@media (min-width: 768px) {
  .search-form input,
  .search-list-form input,
  .search-list-field input,
  .hero-search-form input {
    font-size: 14px;
  }
}

/* 多行截断 */
.site-item-text em,
.site-detail-desc,
.site-detail-banner-desc,
.site-detail-banner-title,
.site-detail-url,
.site-detail-url a,
.site-detail-banner-url a,
.search-result-desc,
.search-result-title,
.search-list-title,
.category-list-desc,
.wsl-text em,
.wh-name,
.m-icon-name,
.m-list-body em,
.m-news-body strong,
.m-news-body em,
.m-site-banner-desc,
.m-site-banner-title,
.m-site-banner-url,
.news-feed-body p,
.footer-brand-desc,
.site-breadcrumb-current {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.site-item-text em,
.search-result-desc,
.wsl-text em,
.m-list-body em { -webkit-line-clamp: 2; }
.site-detail-desc,
.site-detail-banner-desc,
.m-site-banner-desc,
.footer-brand-desc { -webkit-line-clamp: 3; }
.site-detail-banner-title,
.search-list-title,
.m-site-banner-title { -webkit-line-clamp: 2; }
.site-breadcrumb-current { -webkit-line-clamp: 1; }
.wh-name,
.m-icon-name { -webkit-line-clamp: 1; }

/* Flex gap 不支持时的降级（保留 margin: 0 auto 居中，仅用子元素间距模拟 gap） */
html.no-flex-gap .topbar-inner > * {
  margin-right: 24px;
}
html.no-flex-gap .topbar-inner > *:last-child {
  margin-right: 0;
}
html.no-flex-gap .topbar-nav-link,
html.no-flex-gap .topbar-nav-trigger {
  margin-right: 2px;
}
html.no-flex-gap .topbar-actions > * + * {
  margin-left: 8px;
}
html.no-flex-gap .site-grid-4 .site-item {
  margin-bottom: 0;
}
html.no-flex-gap .m-icon-grid {
  margin: -6px -4px;
}
html.no-flex-gap .m-icon-item {
  padding: 6px 4px;
}
html.no-flex-gap .portal-footer-inner > .footer-col {
  margin-bottom: 36px;
}
html.no-flex-gap .portal-footer-inner > .footer-col:last-child {
  margin-bottom: 0;
}
html.no-flex-gap .footer-links-inner > * {
  margin-right: 16px;
  margin-bottom: 8px;
}
html.no-flex-gap .footer-links-inner > *:last-child {
  margin-right: 0;
}
html.no-flex-gap .site-page-layout > * + *,
html.no-flex-gap .category-page-layout > * + *,
html.no-flex-gap .search-page-layout > * + *,
html.no-flex-gap .news-page-layout > * + *,
html.no-flex-gap .submit-layout > * + * {
  margin-top: 24px;
}
html.no-flex-gap .site-detail-banner-main > * + *,
html.no-flex-gap .category-list-main > * + *,
html.no-flex-gap .search-list-head > * + * {
  margin-top: 12px;
}
html.no-flex-gap .site-detail-banner-meta > *,
html.no-flex-gap .site-detail-actions > *,
html.no-flex-gap .site-detail-stats > *,
html.no-flex-gap .m-site-quick > * {
  margin-right: 8px;
  margin-bottom: 8px;
}
html.no-flex-gap .site-detail-stats > * {
  margin-bottom: 0;
}
html.no-flex-gap .m-site-quick > *:last-child {
  margin-right: 0;
}

/* Grid 不支持时的降级 */
html.no-grid .site-grid,
html.no-grid .site-grid-4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
html.no-grid .site-grid-4 .site-item {
  width: 25%;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
}
html.no-grid .m-icon-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
html.no-grid .m-icon-item {
  width: 25%;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
}
html.no-grid .portal-container {
  display: block;
}
html.no-grid .portal-sidebar {
  width: 100%;
  margin-bottom: 16px;
}
html.no-grid .portal-footer-inner {
  display: block;
}
html.no-grid .portal-footer-inner > .footer-col + .footer-col {
  margin-top: 24px;
}
html.no-grid .site-page-layout,
html.no-grid .category-page-layout,
html.no-grid .search-page-layout,
html.no-grid .news-page-layout,
html.no-grid .submit-layout,
html.no-grid .site-detail-stats,
html.no-grid .submit-grid,
html.no-grid .form-row {
  display: block;
}
html.no-grid .site-page-aside,
html.no-grid .category-page-aside,
html.no-grid .search-page-aside,
html.no-grid .news-page-aside,
html.no-grid .submit-aside {
  width: 100%;
  margin-top: 24px;
  position: static;
}
html.no-grid .site-detail-stats .site-detail-stat + .site-detail-stat {
  margin-top: 1px;
}
html.no-grid .submit-grid .form-group + .form-group,
html.no-grid .form-row .form-group + .form-group {
  margin-top: 16px;
}

@media (max-width: 992px) {
  html.no-grid .site-grid-4 .site-item {
    width: 33.333%;
    -ms-flex: 0 0 33.333%;
    flex: 0 0 33.333%;
  }
}

@media (max-width: 640px) {
  html.no-grid .site-grid-4 .site-item,
  html.no-grid .m-icon-item {
    width: 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
  }
}

/* sticky 不支持：顶栏改为 fixed */
html.no-sticky .topbar,
html.no-sticky .m-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
html.no-sticky body {
  padding-top: var(--topbar-h, 52px);
}
html.no-sticky body.m-body {
  padding-top: var(--m-header-h, 48px);
}
html.no-sticky .site-page-aside,
html.no-sticky .category-page-aside,
html.no-sticky .search-page-aside,
html.no-sticky .submit-aside,
html.no-sticky .portal-sidebar,
html.no-sticky .portal-main-widgets {
  position: static;
}

/* smooth scroll 降级 */
html.no-smooth-scroll {
  scroll-behavior: auto !important;
}

/* CSS 变量不支持时的基础色值兜底 */
html.no-css-vars body {
  background: #f5f6f7;
  color: #333333;
}
html.no-css-vars .topbar,
html.no-css-vars .m-header {
  background: #ffffff;
  border-bottom: 1px solid #e8eaed;
}
html.no-css-vars .btn-site-visit,
html.no-css-vars .btn-portal-primary,
html.no-css-vars .m-btn-primary,
html.no-css-vars .topbar-btn:not(.ghost) {
  background: #00a870;
  color: #ffffff;
}
html.no-css-vars .page-banner-bg,
html.no-css-vars .site-detail-banner-bg,
html.no-css-vars .hero-banner-bg,
html.no-css-vars .m-site-banner-bg {
  background: #008f58;
}

/* object-fit 不支持 */
html.no-object-fit .site-favicon img,
html.no-object-fit .site-detail-icon img,
html.no-object-fit .site-detail-banner-icon img,
html.no-object-fit .m-icon-box img,
html.no-object-fit .m-list-icon img,
html.no-object-fit .m-site-banner-icon img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* 滚动条（Firefox + WebKit） */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 168, 112, 0.35) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 168, 112, 0.35);
  border-radius: 999px;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* 图片与媒体 */
img,
video {
  max-width: 100%;
  height: auto;
}
img {
  -ms-interpolation-mode: bicubic;
}
@supports (object-fit: cover) {
  .site-favicon img,
  .m-icon-box img,
  .m-list-icon img {
    object-fit: cover;
  }
}

/* 触摸目标最小尺寸 */
.nav-toggle,
.topbar-btn,
.back-top,
.m-tabbar-item,
.m-header-back,
.m-header-pc,
.pagination.front-pagination a,
.m-pagination a {
  min-height: 44px;
  min-width: 44px;
}

/* 减少动画（系统偏好） */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-transition-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* UC / QQ 浏览器滚动优化 */
html.is-uc .m-cat-tabs,
html.is-qq .m-cat-tabs {
  -webkit-overflow-scrolling: touch;
}

.m-cat-tabs {
  -webkit-overflow-scrolling: touch;
}

/* 横向滚动区域 */
.category-sub-tabs,
.footer-links-list,
.m-cat-tabs,
.topbar-nav.open {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.category-sub-tabs::-webkit-scrollbar,
.footer-links-list::-webkit-scrollbar,
.m-cat-tabs::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

/* 长网址换行 */
.site-detail-url,
.site-detail-url a,
.site-detail-banner-url,
.site-detail-banner-url a,
.search-result-url,
.m-site-url,
.m-site-banner-url {
  word-break: break-all;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* 消除移动端 300ms 点击延迟 */
a,
button,
input,
select,
textarea,
label,
.topbar-nav-link,
.topbar-nav-trigger,
.m-tabbar-item,
.m-header-back,
.nav-toggle,
.back-top {
  touch-action: manipulation;
}

/* 顶栏 / 页脚与主内容同宽居中（防止 compat 降级破坏 margin:auto） */
.topbar-inner,
.portal-footer-inner,
.footer-links-inner,
.footer-copy-inner,
.site-detail-banner-inner {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  max-width: var(--maxw, 1200px);
  box-sizing: border-box;
}

/* iOS 固定定位层优化 */
html.is-ios .topbar,
html.is-ios .m-header,
html.is-ios .m-tabbar,
html.is-ios .back-top {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* 微信 / QQ / UC 内置浏览器底部留白 */
html.is-wechat body.m-body,
html.is-qq body.m-body,
html.is-uc body.m-body {
  padding-bottom: calc(var(--m-tabbar-h) + env(safe-area-inset-bottom, 0px) + 4px);
}

/* 360 / 百度浏览器字体渲染 */
html.is-360 body,
html.is-baidu body {
  text-rendering: auto;
}

/* 表单按钮在 iOS 上的默认样式 */
button,
input[type="submit"],
input[type="button"] {
  -webkit-appearance: none;
  appearance: none;
}

/* 打印 */
@media print {
  .topbar,
  .back-top,
  .m-tabbar,
  .m-header,
  .nav-toggle,
  .topbar-actions {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
}
