@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: -1px;
}

/* 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: #000000cf !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: #111 !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: -1px;
}

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: 32px;
    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);
    background: rgb(14 14 14);
    box-sizing: content-box;
}



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
}
}