* {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: "微软雅黑", "Microsoft Yahei", SimHei, sans-serif;
            }
    
            html, body {
                width: 100%;
                height: 100%;
                overflow: hidden;
                background: #001118;
                color: #00e0e0;
            }
    
            /* 顶部头部 */
            .head {
                height: 80px;
                background: linear-gradient(90deg, #001a24, #00222e);
                border-bottom: 1px solid #008888;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
    
            /* 主容器 - 25%:50%:25% 布局 */
            .conter {
                display: grid;
                grid-template-columns: 25% 50% 25%;
                grid-template-rows: 1fr;
                grid-gap: 10px;
                height: calc(100vh - 80px);
                padding: 10px;
            }
    
            /* 通用卡片样式 */
            .c-left1, .c-left2, .c-left3, .c-right, .c-right1, .c-right2, .a_map, .shuju > div {
                background: rgba(0, 20, 30, 0.9);
                border: 1px solid #007777;
                border-radius: 4px;
                padding: 8px;
                position: relative;
            }
    
            /* 标题背景图 + 文字 - 通用样式 */
            .c-left1 > img, .c-left2 > img, .c-left3 > img, .c-right > img, .c-right1 > img, .c-right2 > img {
                width: 100%;
                height: 32px;
                display: block;
                border-radius: 2px;
                margin-bottom: 10px;
            }
    
            .c-left1 h5, .c-left2 h5, .c-left3 h5, .c-right h5, .c-right1 h5, .c-right2 h5 {
                position: absolute;
                top: 15px;
                left: 15px;
                color: #00ffff;
                font-size: 13px;
                font-weight: bold;
                z-index: 2;
                margin: 0;
            }
    
            /* 左侧面板 */
            .conter-left {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
    
            /* 左侧1 - 全国总数据 */
            .c-left1 {
                height: 200px;
            }
    
            .c-conter {
                display: flex;
                justify-content: space-around;
                align-items: center;
                height: calc(100% - 35px);
            }
    
            .c-conter > div {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 12px;
                color: #00cccc;
                position: relative;
            }
            
            .c-conter > div .icon-group {
                position: relative;
                width: 80px;
                height: 48px;
            }
            
            .c-conter > div .icon-bg {
                width: 100%;
                height: 100%;
                border-radius: 4px;
                display: block;
            }
            
            .c-conter > div .icon {
                width: 35px;
                height: 26px;
                position: absolute;
                top: 14%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 1;
            }
            
            .c-conter > div .num {
                font-size: 24px;
                font-weight: bold;
                color: #00ffff;
            }
    
            /* 左侧2 - 用户数据分析 */
            .c-left2 {
                flex: 0.8;
                min-height: 240px;
                background: rgba(0, 20, 30, 0.9);
                border: 1px solid #007777;
                border-radius: 4px;
                padding: 12px;
                position: relative;
            }
    
            .c-left2 > img {
                width: 100%;
                height: 36px;
                display: block;
                border-radius: 2px;
                margin-bottom: 15px;
            }
    
            .c-left2 h5 {
                position: absolute;
                top: 18px;
                left: 18px;
                color: #00ffff;
                font-size: 14px;
                font-weight: bold;
                z-index: 2;
                margin: 0;
            }
    
            .c2-conter {
                display: flex;
                justify-content: space-between;
                gap: 12px;
                margin-top: 18px;
            }
    
            .c2-conter > div {
                position: relative;
                width: 48%;
                height: 32px;
                background: rgba(0, 70, 80, 0.4);
                border: 1px solid #009999;
                border-radius: 2px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }
            
            .c2-conter > div.active {
                background: rgba(0, 120, 130, 0.6);
                border-color: #00ffff;
            }
    
            .c2-conter > div h5 {
                position: static;
                transform: none;
                font-size: 12px;
                color: #00e0e0;
                font-weight: normal;
            }
            
            .c2-conter > div.active h5 {
                color: #00ffff;
                font-weight: bold;
            }
    
            /* 用户分析内容容器：包含性别和设备模块 */
            .user-analysis-content {
                height: calc(100% - 80px);
                position: relative;
            }
    
            .user-sex-analysis {
                display: flex;
                height: 100%;
                gap: 20px;
                display: flex;
            }
    
            .progress-box {
                flex: 2;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
    
            .progress-item {
                display: flex;
                align-items: center;
                margin-bottom: 50px;
                font-size: 12px;
            }
    
            .progress-item .percent-circle {
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: rgba(0, 70, 80, 0.6);
                border: 2px solid #007777;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #00ffff;
                font-weight: bold;
                margin-right: 12px;
            }
    
            .progress-item .label {
                width: 45px;
                color: #00cccc;
            }
    
            .progress-item .progress-bar {
                flex: 1;
                height: 8px;
                background: rgba(0, 30, 46, 0.8);
                border-radius: 4px;
                margin: 0 12px;
                overflow: hidden;
                border: 1px solid #005555;
            }
    
            .progress-item .progress-bar .bar {
                height: 100%;
                border-radius: 3px;
            }
    
            .progress-item .progress-bar .bar.male {
                background: #00ffff;
            }
    
            .progress-item .progress-bar .bar.female {
                background: #ffcc00;
            }
    
            .progress-item .progress-bar .bar.other {
                background: #666666;
            }
    
            .progress-item .value {
                width: 65px;
                color: #00ffff;
                text-align: right;
            }
    
            .user-device-analysis {
                display: flex;
                height: 100%;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                display: none;
            }
    
            .pie-box {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
    
            #user-pie {
                width: 180px;
                height: 180px;
            }
    
            /* 设备图例 */
            .device-legend {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 18px;
                margin-top: 12px;
                font-size: 11px;
            }
    
            .device-legend .legend-item {
                display: flex;
                align-items: center;
                gap: 5px;
            }
    
            .device-legend .legend-item .dot {
                width: 9px;
                height: 9px;
                border-radius: 50%;
            }
    
            .device-legend .legend-item .dot.ios {
                background: #00ffff;
            }
    
            .device-legend .legend-item .dot.android {
                background: #ffcc00;
            }
    
            .device-legend .legend-item .dot.other {
                background: #666666;
            }
    
            /* 左侧3 - 用户年龄分析 */
            .c-left3 {
                flex: 1;
                min-height: 150px;
            }
    
            .c3-conter {
                width: 100%;
                height: calc(100% - 35px);
            }
    
            #age-chart {
                width: 100%;
                height: 100%;
            }
    
            /* 中间地图面板 */
            .conter-center {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
    
            .a_map {
                flex: 1;
                min-height: 400px;
                padding-top: 40px;
            }
    
            /* 地图控制按钮组 */
            .map-control {
                position: absolute;
                top: 10px;
                left: 10px;
                z-index: 10;
                display: flex;
                align-items: center;
                gap: 10px;
            }
    
            .back-btn {
                padding: 6px 12px;
                background: rgba(0, 20, 30, 0.9);
                border: 1px solid #007777;
                border-radius: 4px;
                color: #00ffff;
                font-size: 12px;
                outline: none;
                cursor: pointer;
                display: none;
            }
    
            .back-btn:hover {
                background: rgba(0, 50, 60, 0.9);
                border-color: #00cccc;
            }
    
            .current-area-title {
                padding: 6px 12px;
                background: rgba(0, 20, 30, 0.9);
                border: 1px solid #007777;
                border-radius: 4px;
                color: #00ffff;
                font-size: 12px;
            }
    
            /* 城市详情提示框 */
            .city-detail-tip {
                position: absolute;
                top: 45px;
                right: 10px;
                padding: 8px 16px;
                background: rgba(0, 20, 30, 0.95);
                border: 1px solid #009999;
                border-radius: 4px;
                color: #00cccc;
                font-size: 12px;
                z-index: 10;
                display: none;
            }
    
            .city-detail-tip .city-name {
                color: #00ffff;
                font-size: 14px;
                font-weight: bold;
                margin-bottom: 4px;
            }
    
            .city-detail-tip .city-data {
                display: flex;
                gap: 20px;
                margin-top: 6px;
            }
    
            #china-map {
                width: 100%;
                height: 100%;
                margin-top: 10px;
            }
    
            .shuju {
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                gap: 5px;
            }
    
            .shuju > div {
                text-align: center;
                font-size: 11px;
                color: #00cccc;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 2px;
            }
    
            .shuju > div img:first-child {
                width: 14px;
                height: 14px;
                display: block;
                border-radius: 50%;
            }
    
            .shuju > div img:last-of-type {
                width: 8px;
                height: 8px;
                position: relative;
                top: -11px;
                z-index: 1;
            }
    
            .shuju > div span:nth-child(3) {
                font-size: 10px;
                margin-top: -5px;
            }
    
            .shuju > div span:nth-child(4) {
                font-size: 13px;
                font-weight: bold;
                color: #00ffff;
            }
    
            .shuju > div span:nth-child(4)::after {
                content: "+12%";
                display: block;
                font-size: 9px;
                color: #ff4444;
                font-weight: normal;
                margin-top: 1px;
            }
    
            /* 右侧面板 */
            .conter-right {
                display: flex;
                flex-direction: column;
                gap: 10px;
                height: 100%;
            }
    
            .right-top-group {
                flex: 2;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
    
            .c-right, .c-right1 {
                flex: 1;
                min-height: 180px;
            }
    
            .c-right2 {
                flex: 1;
                min-height: 100px;
            }
    
            /* 右侧1 - 景点统计 */
            .c-right-box {
                height: calc(100% - 35px);
                position: relative;
            }
    
            .sight-stats-wrapper {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
            }
    
            .sight-stats-wrapper img {
                width: 100%;
                height: 100%;
                display: block;
                border-radius: 4px;
                object-fit: cover;
                z-index: 1;
            }
    
            .sight-stats-grid {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: grid;
                grid-template-columns: 32% 36% 32%;
                grid-template-rows: repeat(3, 1fr);
                z-index: 2;
                padding: 15px 20px;
            }
    
            .stat-cell {
                display: flex;
                align-items: center;
                gap: 6px;
            }
    
           .stat-cell.left {
                justify-content: flex-start;
            }
    
            .stat-cell.right {
                justify-content: flex-end;
            }
    
            .stat-cell.center {
                grid-column: 2;
                grid-row: 1 / span 3;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
    
            .stat-cell .num {
                font-size: 16px;
                font-weight: bold;
                color: #00ffff;
            }
    
            .stat-cell .label {
                font-size: 12px;
                color: #00cccc;
            }
    
            .stat-cell.center .num {
                font-size: 24px;
                margin-bottom: 8px;
            }
    
            .stat-cell.center .label {
                font-size: 14px;
            }
    
            /* 右侧2 - 营地统计 */
            .c-right-box1 {
                height: calc(100% - 35px);
                position: relative;
            }
    
            .camp-stats-wrapper {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
            }
    
            .camp-stats-wrapper img {
                width: 100%;
                height: 100%;
                display: block;
                border-radius: 4px;
                object-fit: cover;
                z-index: 1;
            }
    
            .camp-stats-grid {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: grid;
                grid-template-columns: 10% 80% 10%;
                grid-template-rows: 1fr;
                z-index: 2;
            }
    
            .camp-stat-cell {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
    
            .camp-stat-cell.left{
                float: left;
            }
    
            .camp-stat-cell .num {
                font-size: 18px;
                font-weight: bold;
                color: #00ffff;
                margin-bottom: 6px;
            }
    
            .camp-stat-cell .label {
                font-size: 12px;
                color: #00cccc;
            }
    
            .camp-stat-cell.center .num {
                font-size: 26px;
            }
    
            .camp-stat-cell.center .label {
                font-size: 14px;
            }
    
            /* 右侧3 - 商城特产销售额 */
            .c-right-box2 {
                width: 100%;
                height: calc(100% - 35px);
            }
    
            #sales-chart {
                width: 100%;
                height: 100%;
            }
            .head-right img{
                width: 100%;
                display: block;
                height: 100%;
            }
            .head-left{
                width: 20%;
                float: left;
                height: 80px;
            }
            .head-right{
                width: 80%;
                float: left;
                height: 80px;
                position: relative;
            }
            .head-left img {
                width: 100%;
                display: block;
                height: 100%;
            }
            .muen-list{
                position: absolute;
                left: 5%;
                top: 50%;
    
            }
            .muen-list span {
                display: inline-block;
                position: relative;
                font-size: 14px;
                color: #fff;
                padding: 0 25px;
                text-align: center;
                line-height: 32px;
                height: 32px;
                margin: 0 2px;
                z-index: 2;
                margin-left: 30px;
                font-size: 16px;
            }
            
            .muen-list span::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-bottom: 32px solid #093536;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                z-index: -1;
                margin-left: -8px;
                margin-right: -8px;
                margin-bottom: 0;
            }
            
            .muen-list span.active::before {
                border-bottom-color: #165dff;
            }
            
            .user-box{
                position: absolute;
                right: 20px;
                top: 50%;
                transform: translateY(-50%);
                display: flex;
                align-items: center;
                gap: 30px;
            }
            .user-box div{
                margin: 0;
            }
            .user_name img{
                width: 30px;
                float: left;
                margin-right: 10px;
            }
            .time_{
            }
            .time_ span{
                display: block;
                text-align: center;
            }