/* ========== 全局变量 ========== */
:root{
    --tag-font:8px;--tag-padding:1px 4px;--tag-radius:2px;--tag-gap:2px;--tag-opacity:.9;
    --corner-size:20px;--corner-opacity:.78;
    --bookmark-radius:8px;--bookmark-padding:10px;--bookmark-gap:8px;
    --color-site:#059669;--color-site-bg:rgba(5,150,105,.12);
    --color-app:#3b82f6;--color-app-bg:rgba(59,130,246,.12);
    --color-official:#8b5cf6;--color-official-bg:rgba(139,92,246,.12);
    --color-hot:#ef4444;--color-hot-bg:rgba(239,68,68,.12)
}
.io-black-mode{
    --color-site:#34d399;--color-site-bg:rgba(52,211,153,.18);
    --color-app:#60a5fa;--color-app-bg:rgba(96,165,250,.18);
    --color-official:#a78bfa;--color-official-bg:rgba(167,139,250,.18);
    --color-hot:#f87171;--color-hot-bg:rgba(248,113,113,.18)
}

/* ========== 卡片标签系统 ========== */
.tag-group-left-top,.tag-group-right-top,.tag-group-right-bottom,.tag-bottom-scroll{position:absolute;display:flex;gap:var(--tag-gap);z-index:2}
.tag-group-left-top{top:2px;left:2px}
.tag-group-right-top{top:2px;right:2px}
.tag-group-right-bottom{bottom:2px;right:2px}
.tag-bottom-scroll{bottom:2px;left:2px;right:2px;padding:0;overflow-x:auto;scrollbar-width:none}
.tag-bottom-scroll::-webkit-scrollbar{display:none}

[class*="recommend-tag"]{
    padding:var(--tag-padding);border-radius:var(--tag-radius);font-size:var(--tag-font);
    font-weight:500;white-space:nowrap;opacity:var(--tag-opacity);
    transition:all .2s ease;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    border:.5px solid rgba(255,255,255,.18);line-height:1.2
}
.recommend-tag{background:rgba(230,57,70,.15);color:#D62828}
.recommend-tag1{background:rgba(251,191,36,.15);color:#E08E0B}
.recommend-tag2{background:rgba(59,130,246,.15);color:#2563EB}
.recommend-tag3{background:rgba(75,85,99,.15);color:#4B5563}
.recommend-tag4{background:rgba(255,149,0,.15);color:#EA580C}
.recommend-tag6{background:rgba(139,92,246,.15);color:#7C3AED}
.recommend-tag7{background:rgba(16,185,129,.15);color:#059669}
.recommend-tag8{background:rgba(96,165,250,.15);color:#3B82F6}
.recommend-tag9{background:rgba(251,146,60,.15);color:#F97316}
.recommend-tag10{background:rgba(99,102,241,.15);color:#4F46E5}
.recommend-tag10{display:inline-flex;align-items:center;justify-content:center}
.recommend-tag10 i{font-size:var(--tag-font);margin-right:1.5px}
[class*="recommend-tag"]:hover{opacity:1;transform:translateY(-.5px);box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* ========== 左上角推广角标 ========== */
.corner-push-tag{position:absolute;top:0;left:0;width:var(--corner-size);height:var(--corner-size);z-index:800;pointer-events:none;overflow:hidden}
.corner-push-tag::before{
    content:"";position:absolute;top:0;left:0;border-style:solid;
    border-width:var(--corner-size) var(--corner-size) 0 0;
    border-color:rgba(241,64,75,var(--corner-opacity)) transparent transparent transparent;
    transition:all .2s ease;
}
.corner-push-tag::after{
    content:"推";position:absolute;top:1px;left:0;font-size:8px;font-weight:700;
    color:#fff;transform:rotate(-45deg);text-shadow:0 0 1px rgba(0,0,0,.15);
}
.url-body:hover .corner-push-tag::before{
    border-width:calc(var(--corner-size) + 2px) calc(var(--corner-size) + 2px) 0 0;
    top:-1px;left:-1px;
    border-color:rgba(241,64,75,.95) transparent transparent transparent;
}
.io-black-mode .corner-push-tag::before{
    border-color: rgba(180, 60, 60, var(--corner-opacity)) transparent transparent transparent;
}
.io-black-mode .url-body:hover .corner-push-tag::before{
    border-color: rgba(200, 70, 70, .85) transparent transparent transparent;
}

/* 标签响应式 */
@media (max-width:991px){
    :root{--tag-font:7.5px;--tag-padding:1px 3.5px}
    .corner-push-tag{width:18px;height:18px}
    .corner-push-tag::before{border-width:18px 18px 0 0}
    .corner-push-tag::after{font-size:7.5px}
}
@media (max-width:767px){
    :root{--tag-font:7px;--tag-padding:1px 3px}
    .corner-push-tag{width:16px;height:16px}
    .corner-push-tag::before{border-width:16px 16px 0 0}
    .corner-push-tag::after{font-size:7px}
}
@media (max-width:480px){
    :root{--tag-font:6.5px;--tag-padding:.5px 2.5px}
    .corner-push-tag{width:14px;height:14px}
    .corner-push-tag::before{border-width:14px 14px 0 0}
    .corner-push-tag::after{font-size:6px}
}

/* ========== 全局兼容优化 ========== */
button,a,input,select,textarea,[class*="-btn"],[class*="-tab"],.nav-link {
    outline: none !important;-webkit-tap-highlight-color: transparent;
}
*:focus,*:focus-visible {
    outline: none !important;box-shadow: none !important;
}
.url-card {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
}
[class*="recommend-tag"] {
    will-change: contents;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}
/* 修复移动端侧边栏撑宽页面 */
@media (max-width: 767px) {
    .sidebar-nav {
        width: 0 !important;
        overflow: hidden;
        transition: width .3s ease;
    }
    .sidebar-nav.show {
        width: 17.5rem !important;
        overflow: visible;
    }
    .sidebar-nav > div {
        width: 17.5rem;
    }
}