/*调整全局字体大小*/
body,html{font-size:14px;}

/* 左导航悬浮子菜单：使用更合理宽度，避免中文菜单被截断 */
.sidebar-popup.sidebar-menu-inner > div > ul > li.sidebar-item>ul{
    position:absolute;
    top:0;
    left:10px;
    min-width:116px;
    width:fit-content;
    max-width:180px;
    z-index:99;
}
.sidebar-popup.sidebar-menu-inner ul{
    min-width:116px;
    width:fit-content;
    max-width:180px;
}
.sidebar-popup.sidebar-menu-inner ul li{
    min-width:116px;
    width:100%;
}
.sidebar-popup.sidebar-menu-inner ul li a{
    white-space:nowrap;
    padding-right:12px;
}

/*隐藏左导航scrollbar*/
.sidebar-menu.flex-fill::-webkit-scrollbar{display:none}

/*搜索框搜索图标颜色*/
#search button i{color:#6C757D;font-size:18px}

/*顶部导航栏字体+图标颜色*/
.big-header-banner .page-header{color:#ffffff;background:rgba(255,255,255,0);box-shadow:none;transition:color .3s,background-color .3s}
.big-header-banner:not(.header-bg) .page-header .navbar-nav>li>a,.big-header-banner:not(.header-bg) .navbar-menu a:not(.dropdown-item){color:#ffffff;}
.big-header-banner:not(.header-bg) .page-header .navbar-nav>li>a:hover,.big-header-banner:not(.header-bg) .navbar-menu a:not(.dropdown-item):hover{color:#dc3545;}
.big-header-banner:not(.header-bg) .header-mini-btn path{stroke:#ffffff;}
.big-header-banner:not(.header-bg) .header-mini-btn label:hover path{stroke:#ffffff;}

/*搜索栏字体+背景*/
.header-big #search-text{color:#6C757D;}
.io-black-mode .header-big #search-text{color:#fff;}

/*搜索activate图标颜色*/
.header-big .search-type input:checked+label:before{content:'';border-width:8px 8px 0px 8px;border-style:solid;border-color:#ffffff transparent transparent;position:absolute;left:50%;top:0;margin-left:-8px}

/*主页搜索搜索框(头+底部)字体颜色*/
.header-big:not(.no-bg) .s-type-list{color:#20c997}
.header-big:not(.no-bg) .text-muted,.header-big:not(.no-bg) .search-type .menu-item a,.header-big:not(.no-bg) .big-title .h1{color:#ffffff!important}

/*主页header-banner底部宽度*/
.post-top{padding-bottom:50px}

/*左导航二级导航标题左侧距离*/
.sidebar-menu-inner ul li ul li a{margin-left:30px;}

/*头部导航二级导航iconfont图标*/
.navbar-collapse ul li.menu-item-has-children:after{content:'\e612';}

/*搜索部分背景样式*/
.header-big.css-color{background-size:unset;background-position:unset;animation:unset;}

/*搜索热词样式调整*/
.search-hot-text{
    position: absolute;
    z-index: 100;
    width: 100%;
    border-radius: 0 0 10px 10px;
    background: #FFF;
    box-shadow: 0px 4px 5px 0px #cccccc94;
    overflow: hidden;
}
.search-hot-text ul{
    margin: 0;
    padding: 5px 0;
}
.search-hot-text ul li{
    line-height: 30px;
    font-size: 14px;
    padding: 0px 25px;
    color: #777;
    cursor: pointer;
}
.io-black-mode .search-hot-text ul li{
    color: #fff;
}    
.search-hot-text ul li.current{
    background: #f1f1f1;
    color: #2196f3;
}
.search-hot-text ul li:hover{
    background: #f1f1f1;
    color: #2196f3;
    cursor: pointer;
}
.search-hot-text ul li span{
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    background: #e5e5e5;
    margin-right: 10px;
    border-radius: 10px;
    color: #999;
}

footer.main-footer .footer-text {
    text-align: center;
}
footer.main-footer .footer-text a {
    color: #007bff;
}
footer.main-footer .footer-text a:hover {
    color: red;
}

/*About页面*/
.panel .panel-body a {color: #007bff;}
.panel .panel-body a:hover {color: #979898;}

/*网格背景*/
.io-grey-mode .page-container .grid-bg {
    background-image: linear-gradient(rgba(50, 0, 0, 0.05) 1px, transparent 0), linear-gradient(90deg, rgba(50, 0, 0, 0.05) 1px, transparent 0); 
    background-size: 15px 15px;
    background-color: #d8d8d8;
}

/*导航 Logo 图标裁剪边角*/
.url-card .url-img > img {
    border-radius: 20%;
}

/* AI0003 高级视觉层 */
:root {
    --ai-ink: #111827;
    --ai-muted: #64748b;
    --ai-surface: rgba(255, 255, 255, 0.78);
    --ai-surface-strong: rgba(255, 255, 255, 0.92);
    --ai-line: rgba(15, 23, 42, 0.08);
    --ai-cyan: #20d9b6;
    --ai-blue: #4c7dff;
    --ai-rose: #ff735e;
    --ai-amber: #ffb84d;
}

body,
html {
    letter-spacing: 0;
}

.page-container {
    background:
        linear-gradient(135deg, rgba(32, 217, 182, 0.08), transparent 30%),
        linear-gradient(225deg, rgba(255, 115, 94, 0.07), transparent 34%),
        #f4f7fb;
}

.io-black-mode .page-container {
    background:
        linear-gradient(135deg, rgba(32, 217, 182, 0.12), transparent 32%),
        linear-gradient(225deg, rgba(255, 184, 77, 0.08), transparent 36%),
        #10141f;
}

.io-grey-mode .page-container .grid-bg,
.io-black-mode .page-container .grid-bg {
    position: relative;
    background-image:
        linear-gradient(rgba(17, 24, 39, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 24, 39, 0.045) 1px, transparent 1px),
        linear-gradient(135deg, rgba(32, 217, 182, 0.08), transparent 28%),
        linear-gradient(225deg, rgba(255, 115, 94, 0.07), transparent 35%);
    background-size: 28px 28px, 28px 28px, 100% 100%, 100% 100%;
    background-color: transparent;
}

.io-black-mode .page-container .grid-bg {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(135deg, rgba(32, 217, 182, 0.12), transparent 28%),
        linear-gradient(225deg, rgba(255, 184, 77, 0.08), transparent 36%);
}

.sidebar-nav-inner {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(240, 246, 252, 0.82)) !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 12px 0 40px rgba(16, 24, 39, 0.08);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.io-black-mode .sidebar-nav-inner {
    background:
        linear-gradient(180deg, rgba(16, 24, 39, 0.92), rgba(8, 12, 22, 0.88)) !important;
    border-right-color: rgba(255, 255, 255, 0.08);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.32);
}

.sidebar-logo {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

.sidebar-nav .logo img {
    max-width: 82%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.12));
}

.sidebar-nav.mini-sidebar .logo img {
    max-width: 42px;
}

.sidebar-menu-inner a,
.sidebar-nav .flex-bottom a {
    margin: 4px 8px;
    border-radius: 8px;
}

.sidebar-menu-inner a:hover,
.sidebar-menu-inner .active > a,
.sidebar-nav .flex-bottom a:hover {
    color: #0f172a !important;
    background: linear-gradient(135deg, rgba(32, 217, 182, 0.16), rgba(255, 184, 77, 0.16));
    transform: translateX(2px);
}

.io-black-mode .sidebar-menu-inner a:hover,
.io-black-mode .sidebar-menu-inner .active > a,
.io-black-mode .sidebar-nav .flex-bottom a:hover {
    color: #f8fbff !important;
    background: linear-gradient(135deg, rgba(32, 217, 182, 0.18), rgba(255, 115, 94, 0.14));
}

.big-header-banner .page-header {
    background: rgba(8, 12, 22, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.big-header-banner.header-bg .page-header,
.io-grey-mode .big-header-banner.header-bg .page-header {
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.io-black-mode .big-header-banner.header-bg .page-header {
    background: rgba(12, 18, 31, 0.88);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.page-header,
.big-header-banner .page-header,
.big-header-banner.header-bg .page-header,
.io-grey-mode .page-header,
.io-grey-mode .big-header-banner.header-bg .page-header,
.io-black-mode .page-header,
.io-black-mode .big-header-banner.header-bg .page-header {
    box-shadow: none !important;
}

#search-bg {
    --hero-x: 0;
    --hero-y: 0;
    isolation: isolate;
    overflow: hidden;
    min-height: 330px;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-shadow: inset 0 -80px 100px rgba(244, 247, 251, 0.92);
}

.io-black-mode #search-bg {
    box-shadow: inset 0 -90px 110px rgba(16, 20, 31, 0.92);
}

#search-bg::before,
#search-bg::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

#search-bg::before {
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 12, 24, 0.38), rgba(7, 12, 24, 0.12) 42%, rgba(244, 247, 251, 0.72)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 64px);
    transform: translate3d(calc(var(--hero-x) * -18px), calc(var(--hero-y) * -12px), 0) scale(1.04);
    transition: transform 0.22s ease-out;
}

.io-black-mode #search-bg::before {
    background:
        linear-gradient(180deg, rgba(4, 8, 18, 0.22), rgba(4, 8, 18, 0.2) 42%, rgba(16, 20, 31, 0.78)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 64px);
}

#search-bg::after {
    left: -12%;
    right: -12%;
    bottom: -52%;
    height: 82%;
    background:
        linear-gradient(90deg, transparent, rgba(32, 217, 182, 0.28), rgba(255, 184, 77, 0.2), transparent),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 58px);
    transform: perspective(900px) rotateX(62deg) translate3d(calc(var(--hero-x) * 24px), calc(var(--hero-y) * 18px), 0);
    transform-origin: center bottom;
    animation: aiGridDrift 14s ease-in-out infinite alternate;
    opacity: 0.7;
}

#search-bg .s-search {
    position: relative;
    z-index: 2;
    transform: translate3d(calc(var(--hero-x) * 7px), calc(var(--hero-y) * 5px), 0);
    transition: transform 0.22s ease-out;
}

.header-big.css-color {
    animation: none;
}

.header-big #search {
    max-width: 760px;
    perspective: 1000px;
}

.header-big .s-type-list.big {
    margin-bottom: 12px;
    color: rgba(15, 23, 42, 0.88);
}

.io-grey-mode .header-big:not(.no-bg) .s-type-list,
.io-grey-mode .header-big .s-type-list label span,
.io-grey-mode .header-big:not(.no-bg) .text-muted,
.io-grey-mode .header-big:not(.no-bg) .search-type .menu-item a {
    color: rgba(15, 23, 42, 0.86) !important;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.55);
}

.io-black-mode .header-big .s-type-list.big,
.io-black-mode .header-big:not(.no-bg) .s-type-list,
.io-black-mode .header-big:not(.no-bg) .text-muted,
.io-black-mode .header-big:not(.no-bg) .search-type .menu-item a {
    color: rgba(255, 255, 255, 0.86) !important;
    text-shadow: none;
}

.header-big .s-type-list label span,
.header-big .search-type li label {
    border-radius: 8px;
}

.header-big .s-type-list label span {
    font-weight: 700;
    letter-spacing: 0;
}

.header-big .s-type-list label.active span,
.header-big .s-type-list label:hover span {
    background: rgba(15, 23, 42, 0.08);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
}

.io-black-mode .header-big .s-type-list label.active span,
.io-black-mode .header-big .s-type-list label:hover span {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.header-big #search-text {
    height: 58px;
    border-radius: 8px;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.io-black-mode .header-big #search-text {
    color: #f8fbff;
    background: rgba(12, 18, 31, 0.74) !important;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.header-big #search button {
    height: 58px;
    line-height: 58px;
    right: 8px;
    color: var(--ai-blue);
}

#search button i {
    color: var(--ai-blue);
}

.header-big .search-type {
    margin-top: 12px;
}

.header-big .search-type li label {
    color: rgba(15, 23, 42, 0.82);
}

.io-black-mode .header-big .search-type li label {
    color: rgba(255, 255, 255, 0.82);
}

.header-big .search-type input:checked + label,
.header-big .search-type input:hover + label {
    background: rgba(15, 23, 42, 0.08) !important;
    opacity: 1;
}

.io-black-mode .header-big .search-type input:checked + label,
.io-black-mode .header-big .search-type input:hover + label {
    background: rgba(255, 255, 255, 0.15) !important;
}

.header-big .search-type input:checked + label:before {
    border-color: rgba(15, 23, 42, 0.45) transparent transparent;
}

.io-black-mode .header-big .search-type input:checked + label:before {
    border-color: rgba(255, 255, 255, 0.72) transparent transparent;
}

.content-site {
    padding-top: 8px;
}

.content-site h4.text-gray {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #162033 !important;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.io-black-mode .content-site h4.text-gray {
    color: #f8fbff !important;
    background: rgba(18, 26, 42, 0.68);
    border-color: rgba(255, 255, 255, 0.08);
}

.site-tag {
    color: var(--ai-cyan);
    text-shadow: 0 0 16px rgba(32, 217, 182, 0.34);
}

.ai-polish-ready .url-card {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.ai-polish-ready .url-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.url-card .url-body {
    --glow-x: 50%;
    --glow-y: 0%;
    position: relative;
}

.url-card .card {
    overflow: hidden;
    border-radius: 8px;
    background: var(--ai-surface-strong);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.io-black-mode .url-card .card {
    background: rgba(18, 26, 42, 0.82);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.url-card .card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(32, 217, 182, 0.2), transparent 28%),
        linear-gradient(135deg, rgba(76, 125, 255, 0.08), transparent 45%, rgba(255, 184, 77, 0.1));
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}

.url-card .card-body {
    position: relative;
    z-index: 1;
}

.url-card a.card,
.url-card a.togo {
    pointer-events: auto;
}

.url-card .url-body:hover {
    transform: none;
    box-shadow: none;
}

.url-card .url-body:hover .card {
    border-color: rgba(32, 217, 182, 0.42);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
}

.io-black-mode .url-card .url-body:hover .card {
    box-shadow: 0 28px 78px rgba(0, 0, 0, 0.42);
}

.url-card .url-body:hover .card::before {
    opacity: 1;
}

.url-card .url-img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(32, 217, 182, 0.16), rgba(76, 125, 255, 0.12), rgba(255, 184, 77, 0.12));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.io-black-mode .url-card .url-img {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.url-card .url-img > img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 6px;
}

.url-card .url-info strong {
    color: #101827;
    font-weight: 800;
}

.io-black-mode .url-card .url-info strong {
    color: #f8fbff;
}

.url-card .url-info p {
    color: #667085 !important;
}

.io-black-mode .url-card .url-info p {
    color: #a9b7cc !important;
}

.url-card .default a.togo {
    right: 6px;
    top: 18px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.62);
}

.io-black-mode .url-card .default a.togo {
    background: rgba(15, 23, 42, 0.6);
}

.nav-collapsed:not(.is-expanded) .nav-extra-site {
    display: none;
}

.nav-expand-wrap {
    display: flex;
    justify-content: center;
    margin: -2px 0 28px;
}

.nav-expand-btn {
    min-width: 148px;
    height: 36px;
    padding: 0 18px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 8px;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    line-height: 34px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.nav-expand-btn:hover {
    border-color: rgba(32, 217, 182, 0.45);
    background: rgba(255, 255, 255, 0.92);
    transform: translateY(-1px);
}

.io-black-mode .nav-expand-btn {
    color: #f8fbff;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(18, 26, 42, 0.78);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.io-black-mode .nav-expand-btn:hover {
    border-color: rgba(32, 217, 182, 0.42);
    background: rgba(24, 34, 54, 0.9);
}

#footer-tools .btn {
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.io-black-mode #footer-tools .btn {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(18, 26, 42, 0.78);
}

@keyframes aiGridDrift {
    0% {
        background-position: 0 0, 0 0;
    }
    100% {
        background-position: 90px 0, 58px 0;
    }
}

@media (max-width: 767.98px) {
    #search-bg {
        min-height: 300px;
    }

    .header-big #search-text {
        height: 52px;
    }

    .header-big #search button {
        height: 52px;
        line-height: 52px;
    }

    .content-site h4.text-gray {
        max-width: 100%;
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #search-bg::after,
    .url-card,
    .url-card .card,
    .url-card .url-body {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}