body {
background: #f5f7f9;
}
/*顶部*/
#indextop{
clear:both;
width:100%;
display:flex;
flex-wrap:wrap;
margin:0;
padding:0;
list-style:none;
}

#indextop li{   

flex:1 1 0;         /* 每个 li 平均分 */
min-width:0;        /* 防止内容撑破 */
box-sizing:border-box;
list-style:none;
text-align:left;
}

#indextop li div{
box-sizing:border-box;
padding:10px 20px;
color:#fff;
border-radius:6px;
margin-right:20px;
position:relative;
overflow:hidden;
height:auto;
padding-left:20px;
padding-right:60px; /* 给右侧图标留位置 */
}

#indextop li:last-of-type div{
margin-right:0;
}

#indextop li div p{
margin:0;
position:relative;
z-index:999;
line-height:1.4;
}

#indextop li div p:nth-of-type(1){
font-size:14px;
}

#indextop li div p:nth-of-type(2){
font-size:24px;
margin-top:8px;
}

#indextop li div label,
#indextop li div span,
#indextop li div em,
#indextop li div i{
position:absolute;
z-index:0;
}

#indextop li div label{
width:80px;
height:80px;
border-radius:50%;
bottom:-40px;
right:60px;
}

#indextop li div span{
width:120px;
height:120px;
border-radius:50%;
bottom:-60px;
right:-40px;
}

#indextop li div em{
width:80px;
height:80px;
border-radius:50%;
top:-30px;
left:-30px;
}

#indextop li div i{
right:20px;
top:50%;
margin-top:-18px;
display:inline-block;
z-index:999;
}

#indextop li div i:before{
font-family:'iconfont';
content:'\e60a';
font-size:36px;
}
#indextop li a{color:#fff;}
/* 颜色 */
#indextop li:nth-of-type(1) div{background:#1962ec;}
#indextop li:nth-of-type(1) div label,
#indextop li:nth-of-type(1) div span,
#indextop li:nth-of-type(1) div em{background:#2a6eed;}

#indextop li:nth-of-type(2) div{background:#fc9131;}
#indextop li:nth-of-type(2) div label,
#indextop li:nth-of-type(2) div span,
#indextop li:nth-of-type(2) div em{background:#fd9943;}

#indextop li:nth-of-type(3) div{background:#eb1918;}
#indextop li:nth-of-type(3) div label,
#indextop li:nth-of-type(3) div span,
#indextop li:nth-of-type(3) div em{background:#ed2b2b;}

#indextop li:nth-of-type(4) div{background:#11d1aa;}
#indextop li:nth-of-type(4) div label,
#indextop li:nth-of-type(4) div span,
#indextop li:nth-of-type(4) div em{background:#3fdaba;}

#indextop li:nth-of-type(5) div{background:#4f19eb;}
#indextop li:nth-of-type(5) div label,
#indextop li:nth-of-type(5) div span,
#indextop li:nth-of-type(5) div em{background:#5d2bee;}

#indextop li:nth-of-type(6) div{background:#21aafa;}
#indextop li:nth-of-type(6) div label,
#indextop li:nth-of-type(6) div span,
#indextop li:nth-of-type(6) div em{background:#32b0fa;}

#indextop li:nth-of-type(7) div{background:#ff9500;}
#indextop li:nth-of-type(7) div label,
#indextop li:nth-of-type(7) div span,
#indextop li:nth-of-type(7) div em{background:#ffa500;}

#indextop li:nth-of-type(8) div{background:#d32f2f;}
#indextop li:nth-of-type(8) div label,
#indextop li:nth-of-type(8) div span,
#indextop li:nth-of-type(8) div em{background:#e53935;}
.bordius10{border-radius:10px;}
.mytit{padding:16px 0 10px 30px;position:relative;border-bottom:1px solid #f2f2f2;}
.mytit:before{content:'';position:absolute;left:20px;top:16px;z-index:9;width:3px;height:14px;background:#1962ec;}
#sale{padding:10px;height:180px;}
/* 订单列表 */
.order-list {
margin: 0;
padding: 0;
list-style: none;
}
.order-list:before{
content:'';clear:both;
}
.order-list li {
display: flex;
align-items: center;
padding: 12px 20px;
border-bottom: 1px solid #f7f7f7;
transition: background .2s;
}

.order-list li:last-child {
border-bottom: none;
}

.order-list li:hover {
background: #fafcff;
}

/* 左侧：订单名称 + 订单号时间 */
.order-main {
flex: 1;
min-width: 0;
}

.order-title {
margin: 0;
font-size: 14px;
color: #333;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.order-sn {
margin: 4px 0 0;
font-size: 12px;
color: #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* 中间：收货人 */
.order-buyer {
flex: 0 0 200px;
display: flex;
align-items: center;
font-size: 13px;
color: #666;
margin-right: 16px;
white-space: nowrap;
}

.buyer-label {
color: #999;
margin-right: 6px;
}

.buyer-name {
color: #333;
font-weight: 500;
margin-right: 8px;
}

.buyer-phone {
color: #999;
font-size: 12px;
}

/* 金额 */
.order-amount {
flex: 0 0 100px;
text-align: right;
font-size: 15px;
font-weight: 600;
color: #eb1918;
margin-right: 16px;
}

/* 状态标签 */
.order-status {
flex: 0 0 64px;
text-align: center;
font-size: 12px;
line-height: 22px;
border-radius: 11px;
padding: 0 8px;
white-space: nowrap;
}

.status-pending { color: #fc9131; background: #fff4e8; }
.status-done    { color: #11d1aa; background: #e6faf5; }
.status-cancel  { color: #999;    background: #f2f2f2; }
.status-pay     { color: #1962ec; background: #e8f0fe; }

/* ========== 热销商品 Top 10 ========== */

/* 列表 */
.goods-list {
margin: 0;
padding: 0;
list-style: none;
}

.goods-list li {
display: flex;
align-items: center;
padding: 12px 20px;
border-bottom: 1px solid #f7f7f7;
transition: background .2s;
}

.goods-list li:last-child {
border-bottom: none;
}

.goods-list li:hover {
background: #fffaf5;
}

/* 排名 */
.goods-rank {
flex: 0 0 24px;
height: 24px;
line-height: 24px;
text-align: center;
font-size: 12px;
font-weight: 600;
color: #999;
background: #f2f2f2;
border-radius: 6px;
margin-right: 12px;
}

.goods-rank.rank-1 {
color: #fff;
background: #eb1918;
}

.goods-rank.rank-2 {
color: #fff;
background: #fc9131;
}

.goods-rank.rank-3 {
color: #fff;
background: #ffb800;
}

/* 商品信息 */
.goods-info {
flex: 1;
min-width: 0;
}

.goods-name {
margin: 0;
font-size: 14px;
color: #333;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.goods-meta {
margin: 4px 0 0;
font-size: 12px;
color: #999;
}

/* 销量进度条 */
.goods-bar {
flex: 0 0 160px;
height: 6px;
background: #f2f2f2;
border-radius: 3px;
margin: 0 16px;
overflow: hidden;
}

.goods-bar span {
display: block;
height: 100%;
border-radius: 3px;
background: linear-gradient(90deg, #fc9131, #ffb800);
}

/* 销量数字 */
.goods-sales {
flex: 0 0 70px;
text-align: right;
font-size: 14px;
font-weight: 600;
color: #fc9131;
}

/* 响应式 */
@media (max-width: 768px) {
.goods-list li {
padding: 10px 12px;
}
.goods-bar {
display: none;
}
.goods-name {
font-size: 13px;
}
.goods-meta {
font-size: 11px;
}
.goods-sales {
flex: 0 0 56px;
font-size: 13px;
}
.goods-tabs span {
padding: 2px 8px;
font-size: 11px;
}
}

.chart-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;padding-top:10px;
}
.dc-card{
width:100%;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:18px;
font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
user-select:none;box-sizing:border-box;}
.dc-title{width:100%;text-align:center;font-size:15px;font-weight:600;
color:#1f2430;letter-spacing:.5px;}
.dc-wrap{position:relative;}
.dc-ring{display:block;overflow:visible;}
.dc-ring .dc-slice{cursor:pointer;transition:transform .18s ease,opacity .18s ease,filter .18s ease;
transform-origin:50% 50%;}
.dc-ring .dc-slice:hover{transform:scale(1.045);filter:brightness(1.1);}
.dc-ring.dim .dc-slice{opacity:.4;}
.dc-ring.dim .dc-slice.dc-hovered{opacity:1;}
.dc-ring.animate .dc-slice{animation:dcIn .6s cubic-bezier(.25,.8,.35,1) backwards;}
@keyframes dcIn{from{opacity:0;transform:scale(.55);}to{opacity:1;transform:scale(1);}}
.dc-label{pointer-events:none;}
.dc-center{position:absolute;top:50%; left:50%; transform:translate(-50%,-50%);text-align:center;}
.dc-center .dc-clabel,
.dc-center .dc-cvalue{}
.dc-center .dc-cvalue{font-size:18px;font-weight:700;color:#1f2430;line-height:1.1;}
.dc-center .dc-clabel{top:calc(50% - 1.6em);font-size:12px;color:#8a90a0;display:block;}
.dc-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-top:3px;}
.dc-legend-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#1f2430;
cursor:pointer;transition:opacity .15s;margin-right:6px;}
.dc-legend-item:last-of-type{margin-right:0;}
.dc-legend-item:hover{opacity:.85;}
.dc-legend-item .dc-swatch{width:12px;height:12px;border-radius:4px;flex:none;margin-right:1px;}
.dc-legend-item .dc-pct{color:#8a90a0;font-size:12px;}
.dc-tooltip{position:fixed;padding:8px 14px;background:#2b3040;color:#fff;font-size:13px;
border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;
transform:translate(-50%,-130%);transition:opacity .12s ease;
box-shadow:0 6px 16px rgba(0,0,0,.18);z-index:9999;}
.dc-tooltip.dc-show{opacity:1;}
.dc-tooltip .dc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;}

/* 用户卡片 */
.user-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius:20px;
background: #fff;
border: 1px solid #eef2f7;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
margin-right: 22px;
padding-right:10px;
}

.user-info:hover {
background: #f1f5f9;
border-color: #dbe3ee;
}

/* 头像 */
.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
/* 渐变背景，chrome79 支持 */
background: #f59e0b;
background: -webkit-linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #ffffff;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
flex-shrink: 0;
-ms-flex-negative: 0;
position: relative;
box-shadow: 0 3px 8px rgba(239, 68, 68, 0.25);
margin-right: 12px;
}

.user-detail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
line-height: 1.3;
}

.user-account {
font-size: 13.5px;
font-weight: 700;
color: #1e293b;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
white-space: nowrap;
margin-bottom: 2px;
}

.user-account .badge-admin {
background: #f59e0b;
background: -webkit-linear-gradient(135deg, #f59e0b, #f97316);
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
font-size:12px;
font-weight: 700;
padding: 2px 8px;
border-radius: 6px;
letter-spacing: 0.3px;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
margin-left: 8px;
display: inline-block;
vertical-align: middle;
}

.user-role {
font-size: 11.5px;
color: #94a3b8;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
white-space: nowrap;
}

.user-role .role-tag {
color: #6366f1;
font-weight: 600;
font-size: 11px;
background: #eef2ff;
padding: 1px 8px;
border-radius: 20px;
margin-left: 6px;
display: inline-block;
vertical-align: middle;
}

/* 退出按钮 */
#logout {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 13px;
font-weight: 600;
color: #64748b;
text-decoration: none;
padding: 9px 18px;
border-radius: 10px;
border: 1px solid #e2e8f0;
background: #ffffff;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

#logout:hover {
background: #fef2f2;
border-color: #fecaca;
color: #ef4444;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
}

#logout i {
font-style: normal;
font-size: 15px;
line-height: 1;
margin-right: 7px;
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
}

#logout:hover i {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}

/* ===== 响应式（使用媒体查询，Chrome 79 支持） ===== */
@media (max-width: 820px) {
.super-toolbar {
padding: 14px 18px;
}

.flex-1.tr {
width: 100%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-left: 0;
margin-top: 8px;
}

.user-info {
margin-right: 12px;
}
}

@media (max-width: 560px) {
.mytabs .site-name,
.mytabs .divider {
display: none;
}

.user-role {
display: none;
}

.user-info {
padding: 4px 10px 4px 4px;
}

.user-avatar {
width: 32px;
height: 32px;
font-size: 13px;
margin-right: 8px;
}

#logout {
padding: 7px 14px;
font-size: 12px;
}
}