/*!
 * 项目名称: 星瀚元图书馆集群管理系统
 * Copyright (c) 2026 广州星瀚元计算机科技有限公司. All rights reserved.
 * 
 * 本源代码为商业专有软件，未经授权禁止复制、分发、反编译。
 * 公司官网:http://www.xinghy.cn
 * 授权咨询电话:18922497946
 * 授权咨询邮箱:wuxing2722@qq.com
 * @version 1.0
 * @date 2026-09-21
 */
/* ============ 全局重置与基础 ============ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif;
    background: linear-gradient(180deg, #041773 0%, #070848 100%);
    color: #fff;
}

/* ============ 科技背景图案 ============ */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 20% 50%, rgba(0, 150, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0, 200, 255, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 60% 80%, rgba(0, 100, 255, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(0, 150, 255, 0.03) 80px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(0, 150, 255, 0.03) 80px);
    pointer-events: none;
    z-index: 0;
}

@keyframes panelTopLine {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
}

/* 网格线动画 */
.tech-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.tech-grid .line-h, .tech-grid .line-v {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(0, 150, 255, 0.15), transparent);
}

.tech-grid .line-h {
    width: 100%;
    height: 1px;
    animation: gridScanH 8s linear infinite;
}

.tech-grid .line-v {
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(0, 150, 255, 0.15), transparent);
    animation: gridScanV 10s linear infinite;
}

@keyframes gridScanH {
    0% {
        top: -2%;
    }
    100% {
        top: 102%;
    }
}

@keyframes gridScanV {
    0% {
        left: -2%;
    }
    100% {
        left: 102%;
    }
}

/* 波纹动画 */
.ripple-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 0;
}

.ripple {
    position: absolute;
    border: 1px solid rgba(0, 150, 255, 0.08);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: rippleExpand 6s ease-out infinite;
}

.ripple:nth-child(2) {
    animation-delay: 2s;
}

.ripple:nth-child(3) {
    animation-delay: 4s;
}

@keyframes rippleExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.6;
    }
    100% {
        width: 120vw;
        height: 120vw;
        opacity: 0;
    }
}

/* ============ 主布局 ============ */
.main-container {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100vw;
    height: 100vh;
}

.col-left-warp {
    flex: 0 0 28%;
    padding: 0.5rem;
}

.col-center-warp {
    flex: 0 0 44%;
    padding: 0.5rem 0;
}

.col-right-warp {
    flex: 0 0 28%;
    padding: 0.5rem;
}

.col-left, .col-center, .col-right {
    display: flex;
    flex-direction: column;
    gap: 0.5vh;
    height: 100%;
}

.col-center, .col-right {
    gap: 0.65vh;
}

/* ============ 区块通用 ============ */
.block {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 150, 255, 0.2);
    border-radius: 4px;
    background: rgba(6, 13, 104, 0.35);
    backdrop-filter: blur(2px);
    overflow: hidden;
}

.block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #0099ff, transparent);
    opacity: 0;
    animation: panelTopLine 4s ease-in-out infinite;
}

/* ============ 标题栏 ============ */
.block-title {
    height: 5vh;
    min-height: clamp(24px, 3.5vh, 42px);
    display: flex;
    align-items: center;
    padding: 0 clamp(6px, 1vw, 16px);
    position: relative;
    flex-shrink: 0;
    justify-content: center;
}

.block-title-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.5vw, 10px);
    padding: clamp(2px, 0.4vh, 6px) clamp(10px, 1.5vw, 24px);
    background: linear-gradient(136deg, #2930A7, #343BB6, #04167A);
    clip-path: polygon(1% 0%, 99% 0%, 100% 8%, 92% 100%, 8% 100%, 0% 8%);
    width: 65%;
    justify-content: center;
}

.block-title-inner::before,
.block-title-inner::after {
    content: '';
    position: absolute;
    width: clamp(4px, 0.5vw, 8px);
    height: clamp(4px, 0.5vw, 8px);
    background: #00d4ff;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    top: 50%;
    transform: translateY(-50%);
    animation: titleDiamondPulse 2s ease-in-out infinite;
}

.block-title-inner::before {
    left: 0;
}

.block-title-inner::after {
    right: 0;
}

@keyframes titleDiamondPulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

.block-title i {
    color: #00d4ff;
    font-size: clamp(12px, 1.4vw, 20px);
}

.block-title span {
    font-size: clamp(12px, 1.2vw, 18px);
    font-weight: 600;
    letter-spacing: 2px;
    color: #e0f0ff;
    text-shadow: 0 0 10px rgba(0, 150, 255, 0.5);
}

.block-body {
    flex: 1 1 auto;
    padding: 0.4rem 0.2rem 0.4rem 0.2rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 0;
}

/* ============ 发光信息块 ============ */
.glow-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 180, 255, 0.3);
    border-radius: 15px;
    background: rgba(0, 100, 255, 0.05);
    position: relative;
    padding: clamp(4px, 0.5vh, 8px);
}


.glow-box-f50 {
    flex: 0 0 50%;
}

.glow-box::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 4px;
    background: linear-gradient(45deg, #00d4ff, transparent, #0066ff, transparent, #00d4ff);
    background-size: 300% 300%;
    animation: glowBorderMove 4s linear infinite;
    z-index: -1;
    opacity: 0.5;
}

@keyframes glowBorderMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.glow-box .label {
    font-size: 1.15rem;
    color: rgba(180, 210, 255, 0.8);
    margin-bottom: clamp(2px, 0.3vh, 6px);
}

.glow-box .value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #00d4ff;
    text-shadow: 0 0 15px rgba(0, 180, 255, 0.6);
}

/* ============ 左侧区 ============ */
.left-block-1-warp {
    flex: 0 0 20%;
}

.left-block-2-warp {
    flex: 0 0 30%;
}

.left-block-3-warp {
    flex: 0 0 20%;
}

.left-block-4-warp {
    flex: 0 0 30%;
    padding-bottom: 1rem;
}

.info-row {
    display: flex;
    gap: clamp(4px, 0.5vw, 8px);
    flex: 1;
}


/* 仪表盘区域 */
.gauge-row {
    display: flex;
    flex: 1;
    gap: clamp(4px, 0.5vw, 8px);
}

.gauge-chart-wrap {
    width: 50%;
    position: relative;
}

.gauge-chart-wrap .chart-box {
    width: 100%;
    height: 100%;
}

.gauge-info-wrap {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.5vh, 8px);
}

/* 漏斗图区域 */
.funnel-row {
    display: flex;
    height: 100%;
}

.funnel-chart-wrap {
    flex: 0 0 50%;
}

.funnel-chart-wrap .chart-box {
    width: 100%;
    height: 100%;
}

.funnel-info-wrap {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.4vh, 6px);
}

/* ============ 中间区 ============ */

/* 顶部标题 */
.center-title-block {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.center-title {
    width: 100%;
    text-align: center;
    position: relative;
    padding: clamp(6px, 1vh, 16px) clamp(30px, 5vw, 80px);
    border-top: 0px solid rgba(0, 180, 255, 0.6);
    border-bottom: 0px solid rgba(0, 180, 255, 0.6);
    background: url("/static/image/bdata_title_bg.png") no-repeat;
    background-size: 100% 100%;
}

.center-title11::before,
.center-title11::after {
    content: '';
    position: absolute;
    top: -2px;
    width: clamp(16px, 2vw, 30px);
    height: calc(100% + 4px);
    border: 2px solid rgba(0, 180, 255, 0.6);
}

.center-title11::before {
    left: -1px;
    border-right: none;
    clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%);
}

.center-title11::after {
    right: -1px;
    border-left: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30% 50%);
}

.center-title h1 {
    font-size: clamp(18px, 2.8vw, 40px);
    font-weight: 700;
    letter-spacing: 6px;
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 150, 255, 0.8), 0 0 40px rgba(0, 100, 255, 0.4);
    margin: 0;
}

.center-title .sub {
    font-size: clamp(10px, 1vw, 14px);
    color: rgba(180, 210, 255, 0.7);
    letter-spacing: 4px;
    margin-top: clamp(2px, 0.3vh, 4px);
}

/* 主信息块 */
.center-main-block {
    height: 100%;
    position: relative;
    border: 1px solid rgba(0, 150, 255, 0.3);
    border-radius: 6px;
    background: rgba(6, 13, 104, 0.3);
    overflow: hidden;
}

.center-main-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #0099ff, transparent);
    opacity: 0;
    animation: panelTopLine 4s ease-in-out infinite;
}

/* 科技圆圈底座 */
.center-main-block11:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 80%;
    border: 1px solid rgba(0, 150, 255, 0.08);
    border-radius: 50%;
    animation: techCircleRotate 30s linear infinite;
}

.center-main-block::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55%;
    height: 70%;
    border: 1px dashed rgba(0, 150, 255, 0.06);
    border-radius: 50%;
    animation: techCircleRotate 20s linear infinite reverse;
}

@keyframes techCircleRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 菱形炫丽边框 */
.diamond-border {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 2;
}

.diamond-border .corner {
    position: absolute;
    width: clamp(12px, 1.5vw, 20px);
    height: clamp(12px, 1.5vw, 20px);
}

.diamond-border .corner-tl {
    top: 0;
    left: 0;
    border-top: 2px solid #00d4ff;
    border-left: 2px solid #00d4ff;
}

.diamond-border .corner-tr {
    top: 0;
    right: 0;
    border-top: 2px solid #00d4ff;
    border-right: 2px solid #00d4ff;
}

.diamond-border .corner-bl {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #00d4ff;
    border-left: 2px solid #00d4ff;
}

.diamond-border .corner-br {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid #00d4ff;
    border-right: 2px solid #00d4ff;
}

.main-info-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    padding: clamp(8px, 1.5vh, 20px);
}

.main-info-content .bgimg {
    position: absolute;
    bottom: 0.4rem;
    width: 100%;
    left: 0;
    opacity: 0.7;
}

.main-info-row {
    display: flex;
    justify-content: center;
    gap: clamp(10px, 2vw, 30px);
    flex: 0 0 13vh;
    width: 20vw;
}

.main-info-left {
    flex: 0 0 30%;
    padding-left: 1rem;
}

.main-info-right {
    flex: 0 0 30%;
    padding-right: 1rem;
}

.main-info-card {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(6px, 1vh, 14px) clamp(8px, 1vw, 16px);
    background: rgba(0, 100, 255, 0.05);
}

.main-info-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 4px;
    background: linear-gradient(45deg, #00d4ff, transparent, #0066ff, transparent, #00d4ff);
    background-size: 300% 300%;
    animation: glowBorderMove 4s linear infinite;
    z-index: -1;
    opacity: 0.5;
}

.main-info-card.border-style {
    border: 1px solid rgba(0, 180, 255, 0.5);
    border-radius: 1rem;
    background: rgba(0, 100, 200, 0.08);
    box-shadow: 0 0 10px rgba(0, 150, 255, 0.15), inset 0 0 10px rgba(0, 100, 200, 0.05);
}

.main-info-card.diamond-style {
    position: relative;
    clip-path: polygon(6% 0%, 94% 0%, 100% 50%, 94% 100%, 6% 100%, 0% 50%);
    background: linear-gradient(180deg, rgba(0, 100, 200, 0.15), rgba(0, 150, 255, 0.08));
    border: none;
}

.main-info-card.diamond-style::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(6% 0%, 94% 0%, 100% 50%, 94% 100%, 6% 100%, 0% 50%);
    border: 1px solid rgba(0, 180, 255, 0.4);
    pointer-events: none;
}

.main-info-card .card-icon {
    font-size: 1.3rem;
    color: #00d4ff;
    margin-bottom: clamp(2px, 0.3vh, 4px);
}

.main-info-card .card-label {
    font-size: 1.3rem;
    color: rgba(180, 210, 255, 0.7);
    margin-bottom: clamp(2px, 0.3vh, 6px);
}

.main-info-card .card-value {
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 15px rgba(0, 180, 255, 0.6);
}

.main-info-card .card-unit {
    font-size: 1.3rem;
    color: rgba(150, 200, 255, 0.6);
}

.table-wrap {
    flex: 1;
    overflow: hidden;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.4rem;
}

.data-table thead th {
    padding: clamp(4px, 0.5vh, 8px) clamp(6px, 0.8vw, 12px);
    text-align: center;
    color: #00d4ff;
    border-bottom: 1px solid rgba(0, 150, 255, 0.3);
    font-weight: 600;
    font-size: clamp(10px, 0.9vw, 14px);
    position: sticky;
    top: 0;
    background: rgba(6, 13, 104, 0.95);
}

.data-table tbody td {
    padding: clamp(3px, 0.4vh, 7px) clamp(6px, 0.8vw, 12px);
    text-align: center;
    color: rgba(200, 220, 255, 0.85);
    border-bottom: 1px solid rgba(0, 100, 255, 0.1);
}

.data-table tbody tr:hover {
    background: rgba(0, 150, 255, 0.08);
}

.data-table tbody tr:nth-child(even) {
    background: rgba(0, 80, 200, 0.04);
}

.table-scroll-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.table-scroll-inner {
    animation: tableScroll 20s linear infinite;
}

@keyframes tableScroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

/* ============ 右侧区 ============ */
.right-block-1-warp {
    flex: 0 0 35%;
}

.right-block-2-warp {
    flex: 0 0 35%;
}

.right-block-3-warp {
    flex: 0 0 30%;
    padding-bottom: 1rem;
}

.chart-box {
    width: 100%;
    height: 100%;
}

/* ============ 呼吸灯效果 ============ */
.breath {
    animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* ============ 数字滚动动画 ============ */
.num-animate {
    display: inline-block;
    transition: all 0.3s;
}

/* ============ 装饰线条 ============ */
.deco-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 150, 255, 0.4), transparent);
    margin: clamp(2px, 0.3vh, 4px) 0;
}

/* 列表滚动 */
.scroll-list {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.scroll-list-inner {
    animation: listScroll 12s linear infinite;
}

@keyframes listScroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

.center-main-block-warp {
    flex: 0 0 63%;
}

.center-table-block-warp {
    flex: 0 0 30%;
    padding-bottom: 1rem;
}

.center-title-block-warp {
    flex: 0 0 7%;
}

.left-block-3 .glow-box {
    flex: 0 0 23.5%;
}

.left-block-1 .glow-box {
    flex: 0 0 32%;
}

.lend-table-head thead th{
    font-size: 1.4rem;
    text-align: center;
}