* {font-family: 'PingFang SC', 'HanHei SC', STHeitiSC-Light, Microsoft Yahei, arial, verdana, helvetica, sans-serif !important;}
body, html,#app {background: #f5f7fa; padding: 0px; margin: 0px; height: 100%;}
ul, li, p {margin: 0; padding: 0; border: 0;}
ol, ul {list-style: none;}
a {text-decoration: none; border: none;}
img {border: 0; vertical-align: middle;}

.flex {display: flex;}
.flex.column {flex-direction: column;}
.flex.wrap {flex-wrap: wrap;}
.flex.acenter {align-items: center;}
.flex.jcenter {justify-content: center;}
.flex.jcb {justify-content: space-between;}
.flex.jca {justify-content: space-around;}
.flex.jce {justify-content: flex-end;}
.flex.center {align-items: center; justify-content: center;}
.flex.flex1,
.flex .flex1 {flex: 1;}
.flex .ase {align-self: flex-end;}
.flex .fs {flex-shrink: 0;}

.ellipsis {overflow: hidden; word-break: keep-all; white-space: nowrap; text-overflow: ellipsis;}
.ellipsis1 {text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all;}
.ellipsis2 {text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.ellipsis3 {text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}

.h10 {height: 10px;}
.h20 {height: 20px;}
.h30 {height: 30px;}
.h40 {height: 40px;}
.w10 {width: 10px;}
.w20 {width: 20px;}
.w30 {width: 30px;}
.w40 {width: 40px;}
.w80 {width: 80px;}
.w90 {width: 90px;}
.w100 {width: 100px;}
.w110 {width: 110px;}
.w120 {width: 120px;}
.w130 {width: 130px;}
.w140 {width: 140px;}
.w150 {width: 150px;}
.w160 {width: 160px;}
.w190 {width: 190px;}
.w200 {width: 200px;}
.w270 {width: 270px;}
.w300 {width: 300px;}
.w340 {width: 340px !important;}
.w360 {width: 360px;}
.w380 {width: 380px;}
.w400 {width: 400px !important;}
.w500 {width: 500px;}
.w590 {width: 590px;}
/*---上边距---*/
.mt5 {margin-top: 5px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt100 {margin-top: 100px;}
/*---右边距---*/
.mr5 {margin-right: 5px;}
.mr8 {margin-right: 8px;}
.mr10 {margin-right: 10px;}
.mr15 {margin-right: 15px;}
.mr20 {margin-right: 20px;}
.mr30 {margin-right: 30px;}
.mr40 {margin-right: 40px;}
/*---下边距---*/
.mb5 {margin-bottom: 5px;}
.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
/*---左边距---*/
.ml5 {margin-left: 5px;}
.ml10 {margin-left: 10px;}
.ml15 {margin-left: 15px;}
.ml20 {margin-left: 20px;}
.ml30 {margin-left: 30px;}
.ml40 {margin-left: 40px;}

/* 公共样式 */
:root {
  /* 主色 - 基于 #3468D1 */
  --el-color-primary: #3468D1;
  --el-color-primary-light-3: rgba(52, 104, 209, 0.8);
  --el-color-primary-light-5: rgba(52, 104, 209, 0.6);
  --el-color-primary-light-7: rgba(52, 104, 209, 0.2);
  --el-color-primary-light-8: rgba(52, 104, 209, 0.1);
  --el-color-primary-light-9: rgba(52, 104, 209, 0.05);
  --el-color-primary-dark-2: #2C5BB8;
  --el-fill-color-light: rgba(52, 104, 209, 0.05);
}
[v-cloak]{display: none;}
.el-container{height: 100%;}
.el-upload--picture-card{background-color: #fbfdff; border: 1px dashed #c0ccda; border-radius: 6px; box-sizing: border-box; width: 100px; height: 100px; cursor: pointer; line-height: 98px; vertical-align: top;}
.el-upload{display: inline-block; text-align: center; cursor: pointer; outline: none;}
.el-upload--picture-card img{width: 100%; height: 98px}
a{text-decoration: none; !important;}
.el-upload-button{line-height: 100px; margin-left: 10px; display: inline}

/* ---------- 顶部栏 ---------- */
.el-header{background: #ffffff; border-bottom: 1px solid #e4e7ed; box-shadow: none; padding: 0 16px;}
.el-header .el-dropdown{float: right; line-height: 60px; margin-right: 4px;}
.el-header .el-dropdown > span{padding-right: 0; display: flex; align-items: center; color: #333333; font-size: 14px; cursor: pointer;}
.el-header .el-dropdown > span > i.el-icon-user-solid{font-size: 20px; margin-right: 6px; color: #3468D1;}
.el-header .el-header-arrow{font-size: 12px; margin-left: 4px; color: #999999;}
.el-header .el-right{float: right; line-height: 60px; color: #666666; font-size: 14px; padding: 0 12px; border-left: 1px solid #e4e7ed; cursor: pointer;}
.el-header .el-right:hover{color: #3468D1;}
.el-header{position: relative;}
.el-nav-tabs{position: absolute; left: 16px; right: 210px; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden;}
.el-nav-tabs-scroll{display: flex; align-items: center; width: 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none;}
.el-nav-tabs-scroll::-webkit-scrollbar{display: none;}
.el-nav-tab{display: inline-flex; align-items: center; height: 30px; padding: 0 12px; margin-right: 8px; border-radius: 6px; background: #f5f6fa; border: 1px solid #eceef2; color: #555555; font-size: 13px; user-select: none; flex-shrink: 0; transition: all 0.2s ease;}
.el-nav-tab:hover{background: #e8ecf1; color: #333333;}
.el-nav-tab.active{background: #3468D1; border-color: #3468D1; color: #ffffff; box-shadow: 0 2px 6px rgba(52, 104, 209, 0.35);}
.el-nav-tab .el-icon-close{margin-left: 6px; font-size: 12px; border-radius: 50%; opacity: 0.6; transition: all 0.15s ease;}
.el-nav-tab .el-icon-close:hover{opacity: 1; background: rgba(0, 0, 0, 0.15); color: #ffffff;}
.el-nav-tab.active .el-icon-close{opacity: 0.85;}
.el-nav-tab.active .el-icon-close:hover{background: rgba(255, 255, 255, 0.25);}

/* ---------- 左侧栏 ---------- */
.el-aside{background-color: #1f2229;}
.el-aside .block{height: 68px; box-sizing: border-box; padding: 0 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-align: left; display: flex; align-items: center; gap: 10px;}
.el-aside .block > div{line-height: normal;}
.el-aside .block .el-left{float: none;}
.el-aside .block a{color: #ffffff; font-size: 15px; font-weight: 600; letter-spacing: 0.5px;}
.el-aside .block a:hover{color: #409EFF;}
.el-aside .el-menu{border-right: none; padding: 8px; flex: 1; overflow-y: auto; overflow-x: hidden;}
.el-aside .el-menu .el-menu-item,
.el-aside .el-menu .el-sub-menu__title{height: 44px; line-height: 44px; border-radius: 8px; margin: 3px 0; color: #a7b0c0; font-size: 14px;}
.el-aside .el-menu .el-menu-item:hover,
.el-aside .el-menu .el-sub-menu__title:hover{background: rgba(255, 255, 255, 0.06); color: #ffffff;}
.el-aside .el-menu .el-menu-item.is-active{background: #3468D1; color: #ffffff; box-shadow: 0 4px 10px rgba(52, 104, 209, 0.4);}
.el-aside .el-menu .el-sub-menu .el-menu{padding: 0;}
.el-aside .el-menu .el-sub-menu .el-menu-item{min-width: auto; padding-left: 28px;}
.el-aside .el-menu .el-sub-menu.is-active > .el-sub-menu__title{color: #ffffff;}
.el-aside .el-menu.el-menu--collapse{padding: 8px 4px;}
.el-aside .el-menu.el-menu--collapse .el-menu-item,
.el-aside .el-menu.el-menu--collapse .el-sub-menu__title{border-radius: 8px; padding-left: 16px;}
.el-aside{transition: width 0.25s ease;}
.el-aside .el-menu .el-menu-item,
.el-aside .el-menu .el-sub-menu__title{transition: background-color 0.2s ease, color 0.2s ease, padding 0.25s ease;}
.el-aside .el-menu{transition: padding 0.25s ease;}
.el-aside .el-menu .iconfont,
.el-aside .el-menu .el-icon{transition: transform 0.25s ease, margin 0.25s ease;}
.el-aside .block{transition: padding 0.25s ease;}
.el-aside-footer{display: flex; justify-content: center; gap: 6px; padding: 10px 0; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.08); color: #a7b0c0;}
.el-aside-footer span{display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: 16px; transition: background-color 0.2s ease, color 0.2s ease;}
.el-aside-footer span:hover{background: rgba(255, 255, 255, 0.06); color: #ffffff;}

/* ---------- iframe 多标签内容区（BuildAdmin 风格） ---------- */
.el-main{display: flex; flex-direction: column; padding: 0 !important; box-shadow: none;}
.el-content-frames{flex: 1; position: relative; overflow: hidden;}
.el-content-frame{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; background: #f5f6fa;}
.el-iframe-main{padding: 16px 20px; box-sizing: border-box;}