/* ===== ruancang.net 公共样式 ===== */

/* 重置 */
a,body,div,h1,h2,h3,h4,h5,h6,input,p,span{
    font-family:-apple-system,HarmonyOS_Regular,HarmonyOS_Medium,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji!important;
    box-sizing:border-box;text-decoration:none;margin:0;padding:0;
}
a,a:hover{text-decoration:none}
img{border:0;display:block}
input{outline:0;border:0}

/* 基础 */
html{background:#15181d;color:#333;overflow-y:scroll}
body,html{height:100%}
body{background:#15181d}

.button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:0;margin:0;transition:.1s;font-weight:500;font-size:12px;border-radius:3px;padding:7px 15px}
.button:focus,.button:hover{color:#409eff;border-color:#c6e2ff;background-color:#ecf5ff}
.flex1{flex:1}

/* 容器 */
.container{width:1100px;margin:0 auto;position:relative;display:flex;flex-direction:column}
.container .item-tabs{flex:1;border-radius:6px;margin-top:5px}
.container .item-tabs .tab-content{padding:0 1px}

/* ===== 提示条 ===== */
.xu5-tip-banner{display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.7);padding:5px 16px;font-size:12px;border-bottom:1px solid rgba(255,255,255,0.04)}
.xu5-tip-text{line-height:1.4}
.xu5-tip-close{background:none;border:none;color:rgba(255,255,255,0.5);font-size:18px;cursor:pointer;padding:0 4px;line-height:1;flex-shrink:0}
.xu5-tip-close:hover{color:#fff}

/* ===== 顶部导航栏 ===== */
.xu5-topbar{position:relative;display:flex;align-items:center;padding:12px 16px;gap:16px;border-bottom:none;box-shadow:0 4px 16px rgba(0,0,0,0.3);transition:background 0.3s,box-shadow 0.3s;z-index:1000;background:#000}
.xu5-topbar-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.xu5-topbar-logo{font-size:clamp(18px,4vw,26px);color:#fff;font-weight:700;white-space:nowrap;flex-shrink:0;text-decoration:none;display:inline-flex;align-items:center}
.xu5-topbar-nav{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;overflow-x:auto;flex:1;justify-content:flex-end}

/* 吸顶 */
.xu5-topbar.sticky{position:fixed;top:0;left:0;right:0;width:100%;max-width:100%;border-radius:0;background:rgba(0,0,0,0.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 8px rgba(0,0,0,0.4);padding:6px calc(50% - 550px);border-bottom:1px solid rgba(255,255,255,0.06)}
@media(max-width:1100px){.xu5-topbar.sticky{padding:6px 16px}}
.xu5-topbar.sticky .xu5-topbar-logo{font-size:18px}
.xu5-topbar-placeholder{display:none}
.xu5-topbar-placeholder.active{display:block}

/* 导航链接 */
.nav-link{display:inline-flex;align-items:center;cursor:pointer;text-decoration:none;white-space:nowrap;flex-shrink:0;color:rgba(255,255,255,0.85);font-weight:500;font-size:15px;padding:4px 8px;transition:color 0.2s;letter-spacing:0.5px;border-radius:4px}
.nav-link:hover{color:#fff;background:rgba(255,255,255,0.08)}
.nav-link.active{color:#4da6ff;font-weight:700}
.xu5-topbar.sticky .nav-link{font-size:14px;padding:3px 6px}

.sitename-metal-shine{display:inline-block;color:#fff;-webkit-text-fill-color:#fff;font-weight:800!important;letter-spacing:2px;transition:opacity 0.2s}
.sitename-metal-shine:hover{opacity:0.8}

/* ===== 页脚 ===== */
.rc-footer{text-align:center;padding:24px 20px;background:#15181d;border-top:1px solid rgba(255,255,255,0.06)}
.rc-footer-inner{max-width:1100px;margin:0 auto}
.rc-footer-links{margin-bottom:10px}
.rc-footer-links a{color:rgba(255,255,255,0.5);font-size:13px;text-decoration:none;margin:0 10px;transition:color 0.2s}
.rc-footer-links a:hover{color:rgba(255,255,255,0.8)}
.rc-footer-copyright{color:rgba(255,255,255,0.4);font-size:13px;line-height:1.6}

/* 旧页脚兼容（内页可能用到） */
.footer{text-align:center;padding:24px 20px}
.footer .sitemap{display:none}

/* ===== 面包屑导航 ===== */
.breadcrumb-nav{margin:0;padding:0}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;font-size:14px;background:transparent;border-bottom:none}
.breadcrumb-item{display:flex;align-items:center;line-height:1}
.breadcrumb-item a{color:#409eff;text-decoration:none;font-weight:500;padding:2px 0;transition:color 0.15s}
.breadcrumb-item a:hover{text-decoration:underline;color:#337ecc}
.breadcrumb-item.active{color:#888;font-weight:400;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.breadcrumb-item.active span{color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.breadcrumb-item+.breadcrumb-item::before{content:"/";padding:0 8px;color:#ccc;font-size:13px;font-weight:400}

/* ===== 分页 ===== */
.pagination{position:relative;margin:2rem 0 0}
.pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;width:100%}
.page-numbers,.nav-links a,.nav-links b{display:flex;min-width:32px;height:32px;text-align:center;line-height:32px;margin:.25rem;background-color:transparent;color:#333;border-radius:6px;transition:all 0.25s;align-items:center;justify-content:center;border:1px solid #e0e0e0}
.page-numbers:hover,.page-numbers.current,.nav-links b,.nav-links a:hover{color:#fff!important;background-color:#409eff;border-color:#409eff}

/* ===== 远程协助弹窗 ===== */
.xu5-ra-overlay{display:none !important;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:99999;justify-content:center;align-items:center;opacity:0;transition:opacity .3s}
.xu5-ra-overlay.active{display:flex !important;opacity:1}

/* ===== 响应式 ===== */
@media(max-width:768px){
    .container{width:100%}
    .xu5-topbar{flex-direction:column;align-items:center;padding:8px 10px;gap:6px}
    .xu5-topbar-brand{justify-content:center}
    .xu5-topbar-logo{font-size:18px}
    .xu5-topbar-nav{justify-content:center;flex:none;width:100%;gap:8px;flex-wrap:wrap;overflow-x:visible;-ms-overflow-style:none;scrollbar-width:none}
    .xu5-topbar-nav::-webkit-scrollbar{display:none}
    .nav-link{font-size:14px}
    .xu5-topbar.sticky{flex-direction:row;padding:5px 10px}
    .xu5-topbar.sticky .xu5-topbar-brand{display:none}
    .xu5-topbar.sticky .xu5-topbar-nav{justify-content:center;flex-wrap:nowrap;overflow-x:auto}
    .xu5-tip-banner{font-size:11px;padding:4px 10px}
    .container .item-tabs{margin-left:4px;margin-right:4px}
    .breadcrumb{font-size:11px}
    .breadcrumb-item+.breadcrumb-item::before{padding:0 4px}
    .breadcrumb-item.active{max-width:200px}
    .rc-footer{padding:16px 12px}
}
@media(max-width:480px){
    .breadcrumb{font-size:11px}
    .breadcrumb-item+.breadcrumb-item::before{padding:0 3px}
    .breadcrumb-item.active{max-width:140px}
}
@media screen and (max-width:768px){
    .sitename-metal-shine{letter-spacing:1.5px}
}