@charset "UTF-8";
/* ===================================
   Theme Toggle Button Styles
   =================================== */

/* Desktop: button inside header */
#theme-toggle-li {
  width: 40px;
  height: 40px;
  list-style: none;
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 6px;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#toolbar-wrap>li.wechats {
  display: none;
}

/* ===================================
   Toolbar Capsule (header right side)
   Wraps search / wechat / theme-toggle in a pill-shaped container
   =================================== */
#toolbar-wrap {
  list-style: none;
  float: right;
  display: flex !important;
  align-items: center;
  height: 44px;
  margin-top: 44px;
  margin-left: 0 !important;
  padding: 0 1px;
  border-radius: 22px;
  background: linear-gradient(157.87deg, hsl(0deg 0% 100% / 24%), hsl(0deg 0% 100% / 24%));
  box-shadow: 0 0 5px rgb(0 0 0 / 4%) !important;
  border: 1px solid #ffffffeb !important;
}

#toolbar-wrap>li {
  float: none !important;
  list-style: none;
  padding: 0 !important;
  margin-left: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* Search li inside the capsule */
#toolbar-wrap>li.search {
  flex-shrink: 0;
}

#toolbar-wrap>li.search .bar8 {
  margin-top: 3px !important;
  width: 22px;
  margin: auto;
}

#toolbar-wrap>li.search .icon-sousuo2 {
  font-size: 22px !important;
  color: #9ea2a9 !important;
  cursor: pointer;
  flex-shrink: 0;
}

header h1#logoqj {
  font-size: 11px !important;
  font-size: 0.8em !important;
  font-weight: 400;
}

#toolbar-wrap>li.search .icon-sousuo {
  font-size: 18px !important;
  color: #9ea2a9 !important;
  cursor: pointer;
  flex-shrink: 0;
}

#toolbar-wrap>li.search .icon-sousuo2:hover {
  color: #435265 !important;
}

#toolbar-wrap>li.search .icon-sousuo:hover {
  color: #435265 !important;
}

#toolbar-wrap>li.search input {}

#toolbar-wrap>li.search input::placeholder {
  color: #aab0b8;
}

#toolbar-wrap>li.search input:focus {
  background: #ffffff4f !important;
  z-index: 0;
  border: 1px solid #ffffff !important;
  margin-top: -4px;
}

/* Wechat li */
#toolbar-wrap #xinlang {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #07c160 !important;
  font-size: 22px;
  text-decoration: none !important;
  border-radius: 50%;
  line-height: 1;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

#toolbar-wrap #xinlang i {
  font-size: 29px !important;
  color: #9ea2a9 !important;
  line-height: 1;
  margin-left: 0px;
}

#toolbar-wrap #xinlang i:hover {
  color: #2cb318 !important;
}

#toolbar-wrap #xinlang:hover {
  background: rgba(7, 193, 96, 0.08);
  transform: translate(0, 0px);

}

.bar8 form:hover {
  height: 40px;
  width: 40px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 22px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Dashed divider */
.tb-divider {
  display: inline-block;
  width: 0;
  height: 18px;
  margin: 0 6px;
  border-left: 1px dashed #c8ccd1;
}

/* Theme toggle li inside the capsule */
#toolbar-wrap #theme-toggle-li {
  width: 40px;
  height: 40px;
  margin-right: 0 !important;
}

#toolbar-wrap #theme-toggle-li:hover {
  background: rgba(0, 0, 0, 0.06);
}

#theme-toggle-li:hover {
  background: rgba(0, 0, 0, 0.06);
}

#theme-toggle-li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none !important;
}

/* Sun icon - visible in dark mode (click to switch to light) */
#theme-toggle-li .theme-icon-sun {
  display: none;
  color: #f1c40f;
}

/* Moon icon - visible in light mode (click to switch to dark) */
#theme-toggle-li .theme-icon-moon {
  display: block;
  color: #9ea2a9 !important;
}

#theme-toggle-li .theme-icon-moon:hover {
  color: #2f3c53 !important;
}

/* Dark mode: show sun, hide moon */
html[data-theme="dark"] #theme-toggle-li .theme-icon-sun {
  display: block;
}

html[data-theme="dark"] #theme-toggle-li .theme-icon-moon {
  display: none;
}

html[data-theme="dark"] #theme-toggle-li:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Mobile: fixed button (visible when header is hidden) */
#theme-toggle-mobile {
  position: fixed;
  top: 7px;
  right: 52px;
  z-index: 1001;
  width: 30px;
  height: 30px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#theme-toggle-mobile .theme-icon-sun {
  display: none;
  color: #f1c40f;
  width: 18px;
  height: 18px;
}

#theme-toggle-mobile .theme-icon-moon {
  display: block;
  color: #666;
  width: 16px;
  height: 16px;
}

html[data-theme="dark"] #theme-toggle-mobile .theme-icon-sun {
  display: block;
}

html[data-theme="dark"] #theme-toggle-mobile .theme-icon-moon {
  display: none;
}

/* ---- Responsive ---- */
@media screen and (max-width: 951px) {
  #toolbar-wrap {
    display: none !important;
  }

  #theme-toggle-mobile {
    display: flex;
  }
}

/* ===================================
   Dark Mode Style Override Layer
   Uses [data-theme="dark"] attribute selector + !important
   to override any other styles regardless of CSS load order.
   =================================== */

/* ----- Left sidebar (.moquu_listscr) ----- */
html[data-theme="dark"] .moquu_listscr {
  border: 1px solid #62626238 !important;
  background: linear-gradient(157.87deg, #1e1e1e73, #1e1e1e73) !important;
  box-shadow: 0 0 5px #1e1e1e !important;
}

html[data-theme="dark"] .moquu_listscrnh {
  background: linear-gradient(157.87deg, #1e1e1e73, #1e1e1e73) !important;
  box-shadow: 0 0 5px #1e1e1e !important;
  /*    border: 1px solid #62626238 !important;*/
}

html[data-theme="dark"] .moquu_listscr a {
  color: #565656 !important;
  border-bottom: 1px solid #7575753b !important;
}

html[data-theme="dark"] .moquu_listscr a:hover {
  color: #13e0bc !important;
  background-color: #121212 !important;
}

/*html[data-theme="dark"] .moquu_listscr .moquu_listscrnh a {
    background: #121212 !important;
    color: #afafaf !important;
    -webkit-text-fill-color: #afafaf !important;
}*/

html[data-theme="dark"] .moquu_listscr .moquu_listscrnh a:hover {
  background-color: #000 !important;
}

/* ----- Header container (.container) ----- */
html[data-theme="dark"] header,
html[data-theme="dark"] header .top,
html[data-theme="dark"] .top {
  background-color: #0000008f !important;
  border-bottom: 1px solid #ffffff00;
}

html[data-theme="dark"] header .container {}

/* ----- Search bar ----- */
html[data-theme="dark"] .bar8 input,
html[data-theme="dark"] .bar8 input:focus {
  color: #ffffff !important;

}

/* ----- Footer / copyright ----- */
html[data-theme="dark"] .copyright,
html[data-theme="dark"] .copyrights,
html[data-theme="dark"] footer {
  background-color: #000 !important;
  color: #afafaf !important;
}

html[data-theme="dark"] .copyrights_c {
  background-color: #000000 !important;
  border-top: 1px solid rgb(234 234 234 / 7%) !important;
}

html[data-theme="dark"] .copyrights_z dd.copyrights_wz a {
  color: #666666 !important;
}

html[data-theme="dark"] .copyrights_z dd.about_logo a {
  color: #414141 !important;
}

html[data-theme="dark"] .m_icon a {
  color: #474646 !important;
}

html[data-theme="dark"] .copyrights_certificate a {
  color: #474646 !important;
}

html[data-theme="dark"] .copyrights_certificate {
  color: #474646 !important;
}

/* ----- Panel titles, headings ----- */
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .titleBar h1,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
  color: #afafaf !important;
  background: transparent !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .post-content p,
html[data-theme="dark"] .post-excerpt p {
  color: #afafaf !important;
}

/* ----- Links default to gray-ish ----- */
html[data-theme="dark"] a:link,
html[data-theme="dark"] a:visited {
  color: #ffffff7d;
}

html[data-theme="dark"] a:hover {
  color: #13e0bc;
}

html[data-theme="dark"] .design_studio a:hover {
  opacity: 1 !important;
  color: #13e0bc !important;
  background: linear-gradient(157.87deg, #1e1e1e73, #1e1e1e73);
  box-shadow: 0 0 5px #1e1e1e !important;
}

/* ----- Body baseline ----- */
html[data-theme="dark"] body {
  background-color: #000 !important;
  color: #d0d0d0 !important;
}

/* ----- Cards / panels / wrappers ----- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .wrap,
html[data-theme="dark"] .titleBar,
html[data-theme="dark"] .c-flex__item,
html[data-theme="dark"] .c-flex__itemm,
html[data-theme="dark"] .main-wrap,
html[data-theme="dark"] #ss-app-card {
  background: linear-gradient(157.87deg, #1e1e1e73, #1e1e1e73) !important;
  color: #afafaf !important;
  border: 1px solid #62626238 !important;
}

html[data-theme="dark"] #slider-wrapper {
  background-color: #171717 !important;
}

html[data-theme="dark"] #page,
html[data-theme="dark"] #preload,
html[data-theme="dark"] .site-wrapper {
  background: #000 !important;
}

html[data-theme="dark"] .central {
  background-color: #101010 !important;
  background-image: linear-gradient(359deg, #0b0b0b, #181818) !important;
}

html[data-theme="dark"] .contents {
  background-color: #0e0e0e !important;
}

/* ----- Tool cards (.tool .tool-img / .tool-title / .tool-body) ----- */
html[data-theme="dark"] .tool .tool-img,
html[data-theme="dark"] .tool .tool-imgb,
html[data-theme="dark"] .tool-imgb,
html[data-theme="dark"] #tool-color {
  border: 1px solid #2e2e2e73 !important;
}

html[data-theme="dark"] #tool-color:hover {
  filter: grayscale(100%);
  opacity: 0.4;
  box-shadow: 0 0px 17px -18px rgba(0, 0, 0, 1.26) !important;
  transform: translate(0, -4px);
  background-color: #1212124f !important;
}

html[data-theme="dark"] .tool .tool-img img,
html[data-theme="dark"] .tool .tool-imgb img {
  border: 0 !important;
  outline: none !important;
}

html[data-theme="dark"] header h1#logoqj {
  background: #1a1a1a !important;
  border: 1px solid #2e2e2e !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] header h1#logoqj:hover {
  background: #13e0bc;
  background-image: -webkit-linear-gradient(50deg, #13e0bc, #13e0bc) !important;
}

html[data-theme="dark"] #logoqj a {
  color: #6d6d6d !important;
  font-weight: 400;
}

html[data-theme="dark"] .tool .tool-title,
html[data-theme="dark"] .tool .tool-body {
  /*    color: #afafaf !important;*/
  background: transparent !important;
}

/*html[data-theme="dark"] .tool:hover .tool-title {
    color: #13e0bc !important;
}*/

html[data-theme="dark"] .tool .tool-imgs {
  background-color: #181818 !important;
  background-image: none !important;
  border: 1px solid #2e2e2e !important;
}

/* Panel container holding tool cards */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-body {
  background: transparent !important;
  border: none !important;
}

html[data-theme="dark"] .panel-body .card {
  background: linear-gradient(157.87deg, #1e1e1e73, #1e1e1e73) !important;
  border: 1px solid #62626238 !important;
}

/* Floating right-side menu (#menu) */
html[data-theme="dark"] #menu,
html[data-theme="dark"] .menu {
  background-color: #111111c4 !important;
  border-top: 1px solid #252525 !important;
}

html[data-theme="dark"] .subMenu,
html[data-theme="dark"] #menu .subMenu {
  background: transparent !important;
}

html[data-theme="dark"] .menu_name {
  color: #afafaf !important;
}

/* Side floating buttons (.side .sidebox) — used to be covered by night.css */
/* Re-affirm here with [data-theme] selector as fallback */
html[data-theme="dark"] .side ul li .sidebox,
html[data-theme="dark"] .side ul li .sidetop {
  background: linear-gradient(157.87deg, #242424, #151515) !important;
  border: 1px solid #62626238 !important;
  color: #a6a6a6 !important;
}

html[data-theme="dark"] .side ul li .sidebox:hover {
  background: #1e1e1e !important;
  color: #13e0bc !important;
}

/* ----- Toolbar capsule (header right side) ----- */
html[data-theme="dark"] #toolbar-wrap {
  background: #1a1a1a !important;
  border: 1px solid #2e2e2e !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] #toolbar-wrap>li.search input {
  color: #d0d0d0 !important;
  background: transparent;
}

html[data-theme="dark"] #toolbar-wrap>li.search input:focus {
  background: #3333334f !important;
  z-index: 0;
  border: 1px solid #2e2e2e !important;
  margin-top: -3px;
}

html[data-theme="dark"] #toolbar-wrap>li.search input::placeholder {
  color: #6a6e75 !important;
}

html[data-theme="dark"] #toolbar-wrap>li.bar8 form:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] #toolbar-wrap>li.search .icon-sousuo {
  color: #9ea2a9 !important;
}

html[data-theme="dark"] #toolbar-wrap>li.search .icon-sousuo2 {
  color: #555 !important;
}

html[data-theme="dark"] .tb-divider {
  border-left-color: #3a3e44 !important;
}

html[data-theme="dark"] #toolbar-wrap #xinlang {
  color: #07c160 !important;
}

html[data-theme="dark"] #toolbar-wrap #xinlang:hover {
  background: rgba(7, 193, 96, 0.12) !important;
}

html[data-theme="dark"] #toolbar-wrap #theme-toggle-li:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .resources-detail {
  background: linear-gradient(157.87deg, #1e1e1e73, #1e1e1e73);
  box-shadow: 0 0 5px #1e1e1e !important;
  border: 1px solid #62626238 !important;
}

html[data-theme="dark"] .detail-download {
  border-radius: 10px;
  border: 1px solid #2e2e2e5e !important;
  background: linear-gradient(157.87deg, #1e1e1e73, #1e1e1e73);
  box-shadow: 0 0 5px #1e1e1e !important;
  border: 1px solid #62626238 !important;
}

html[data-theme="dark"] #tianyi {
  border-radius: 10px;
  border: 1px solid #2e2e2e5e !important;
  background: linear-gradient(157.87deg, #1e1e1e73, #1e1e1e73);
  box-shadow: 0 0 5px #1e1e1e !important;
  border: 1px solid #62626238 !important;
}

/* ===================================
   Header shrink-on-scroll behavior
   When scrolling down > 300px, the <header> gets class "smaller" (added by commonn.js).
   Mirror the existing header.smaller h1#logobag / h1#logoqj shrink on the toolbar capsule.
   =================================== */

/* Add transition to all internal pieces so they animate smoothly */
#toolbar-wrap,
#toolbar-wrap>li,
#toolbar-wrap>li.search,
#toolbar-wrap>li.search input,
#toolbar-wrap #xinlang,
#toolbar-wrap #xinlang i,
#toolbar-wrap #theme-toggle-li,
#toolbar-wrap #theme-toggle-li a svg,
.tb-divider {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Shrink the capsule container */
header.smaller #toolbar-wrap {
  height: 34px;
  margin-top: 18px;
}

/* Shrink every inner li */
header.smaller #toolbar-wrap>li {
  height: 30px;
  min-width: 30px;
}

/* Shrink the wechat icon */
header.smaller #toolbar-wrap #xinlang {
  width: 30px;
  height: 30px;
  font-size: 16px;
}

header.smaller #toolbar-wrap #xinlang i {
  font-size: 18px !important;
}

/* Shorten the dashed divider */
header.smaller .tb-divider {
  height: 14px;
  margin: 0 4px;
}

/* Narrow the search li and its input */
header.smaller #toolbar-wrap>li.search bar8 {
  height: 30px;
  width: 30px;
}

header.smaller #toolbar-wrap>li.bar8 form {
  height: 30px;
  width: 30px;
}

header.smaller #toolbar-wrap>li.search .bar8 {
  margin-top: -2px !important;
  width: 18px;
  margin: auto;
  margin-left: 8px !important;
}

header.smaller #toolbar-wrap>li.search .icon-sousuo {
  font-size: 14px !important;
}

header.smaller #toolbar-wrap>li.search .icon-sousuo2 {
  font-size: 14px !important;
}

header.smaller #toolbar-wrap>li.search input {
  height: 34px;
  font-size: 13px;
  min-width: 0px;
  padding: 0 14px;
}

/* Shrink the theme toggle button + its SVG icons */
header.smaller #toolbar-wrap #theme-toggle-li {
  width: 30px;
  height: 30px;
}

header.smaller #toolbar-wrap #theme-toggle-li .theme-icon-sun {
  width: 16px;
  height: 16px;
}

header.smaller #toolbar-wrap #theme-toggle-li .theme-icon-moon {
  width: 14px;
  height: 14px;
}

/* Dark mode: same shrink behavior; nothing extra needed because the base
   selector `#toolbar-wrap` (without html[data-theme="dark"]) is overridden by
   the html[data-theme="dark"] #toolbar-wrap { background/border } block above.
   We just need to override the dark bg/border/shadow values when smaller so the
   capsule keeps its dark identity while shrunk. */
header.smaller html[data-theme="dark"] #toolbar-wrap,
html[data-theme="dark"] header.smaller #toolbar-wrap {
  background: #1a1a1a !important;
  border: 1px solid #2e2e2e !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .zw_z_01 dd.eng {
  font-family: "微软雅黑";
  font-size: 12px;
  color: #424242;
}

html[data-theme="dark"] .colors .color .hex {
  color: #000000 !important;
}

html[data-theme="dark"] .c-flex__itemm:hover {
  box-shadow: 0 36px 48px -46px #13e0bcd9 !important;
}

html[data-theme="dark"] .qijishow-search-result {
  border-color: rgb(38 38 38) !important;
  background: rgb(14 14 14);
  box-sizing: content-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html[data-theme="dark"] .qijishow-search-result a {
  border-bottom: 1px dashed #e8e8e833;
}

html[data-theme="dark"] .zw_z_01 dd.zh a {
  color: #555555 !important;
}

html[data-theme="dark"] .zw_z_01 dd.zh a:hover {
  color: #0edcbc !important;
}

html[data-theme="dark"] #Selectkiss {
  color: #0edcbc !important;
}

html[data-theme="dark"] #text a {
  color: #0edcbc !important;
}

html[data-theme="dark"] .pavilion-container .pavilion-inner .tabs dd a {
  color: #ffffff7d !important;
}

html[data-theme="dark"] .pavilion-container .pavilion-inner .tabs dd a:hover {
  color: #ffffff !important;
}

html[data-theme="dark"] .pavilion-container .pavilion-inner .tabs dd:hover {
  color: #ffffff !important;
}

html[data-theme="dark"] .colors .color {
  background-color: #8e8f9d !important;
}

html[data-theme="dark"] .index_nav_icon {
  background: #1a1a1a !important;
  border: 1px solid #2e2e2e !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] {
  ::-webkit-scrollbar {
    width: 6px;
    height: 8px
  }

  ::-webkit-scrollbar-button:vertical {
    display: none
  }

  ::-webkit-scrollbar-track:vertical {
    background-color: black
  }

  ::-webkit-scrollbar-track-piece {
    background: #0e0e0e;
  }

  ::-webkit-scrollbar-corner {
    background: #0e0e0e;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #424141;
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb:vertical {
    background-color: #424141;
    border-radius: 50px
  }

  ::-webkit-scrollbar-thumb:vertical:hover {
    background-color: #424141
  }

  ::-webkit-scrollbar-corner:vertical {
    background-color: #535353
  }

  ::-webkit-scrollbar-resizer:vertical {
    background-color: #FF6E00
  }
}

.qijishow-search-result::-webkit-scrollbar {
  display: none;
}

.qijishow-search-result a:last-child {
  border-bottom: none;
}