      /* --- 全局重置 --- */
        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            width: 1080px;
            height: 1920px;
         /*   overflow: hidden;*/
            background-color: #050a14;
            background-image: 
                radial-gradient(circle at 50% 30%, rgba(20, 40, 80, 0.6) 0%, #020408 80%),
                linear-gradient(rgba(0, 210, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 210, 255, 0.05) 1px, transparent 1px);
            background-size: 100% 100%, 50px 50px, 50px 50px;
            font-family: "Microsoft YaHei", sans-serif;
            color: #fff;
            display: flex;
            flex-direction: column;
            padding: 25px;
        }

        /* --- 头部 --- */
        header {
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #00d2ff;
            margin-bottom: 20px;
            padding: 0 20px;
            background: rgba(0, 20, 40, 0.5);
            border-radius: 0 0 15px 15px;
            flex-shrink: 0;
        }
        h1 { font-size: 45px;  font-family: 'Consolas', monospace;  color: #00d2ff; text-shadow: 0 0 10px rgba(0, 210, 255, 0.5); }
        .header-time { font-size: 36px; color: #00d2ff; font-family: 'Consolas', monospace; }

        /* --- 主体容器 --- */
        .main-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
            height: calc(1920px - 145px);
            min-height: 0;
        }

        /* --- 上方区域 (左右结构) --- */
        .top-section {
            flex: 55;
            display: flex;
            gap: 20px;
            min-height: 0;
        }

        /* --- 下方区域 (打通结构) --- */
        .bottom-section {
            flex: 45;
            position: relative;
            background: rgba(12, 20, 35, 0.7);
            border: 1px solid rgba(0, 210, 255, 0.25);
            border-radius: 12px;
            backdrop-filter: blur(10px);
            padding: 10px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* 通用面板与装饰 */
        .panel {
            background: rgba(12, 20, 35, 0.7);
            border: 1px solid rgba(0, 210, 255, 0.25);
            border-radius: 12px;
            padding: 25px;
            position: relative;
            backdrop-filter: blur(10px);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .corner { position: absolute; width: 12px; height: 12px; border: 2px solid #00d2ff; z-index: 2; pointer-events: none;}
        .tl { top: -1px; left: -1px; border-right: none; border-bottom: none; border-radius: 12px 0 0 0; }
        .tr { top: -1px; right: -1px; border-left: none; border-bottom: none; border-radius: 0 12px 0 0; }
        .bl { bottom: -1px; left: -1px; border-right: none; border-top: none; border-radius: 0 0 0 12px; }
        .br { bottom: -1px; right: -1px; border-left: none; border-top: none; border-radius: 0 0 12px 0; }

        /* --- 左侧面板细节 --- */
        .left-panel { flex: 2; align-items: center; text-align: center; padding: 20px; }
        .qr-box { background: #fff; padding: 12px; border-radius: 8px; margin-bottom: 15px; }
        .qr-img { width: 120px; height: 120px; background-image: url('https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=<?php echo $JA001?>'); background-size: cover; }
        
        .info-area { width: 100%; flex: 1; display: flex; flex-direction: column; gap: 15px; margin-bottom: 10px; }
        .info-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 10px; width: 100%; }
        .label { font-size: 18px; color: #aaa; display: block; margin-bottom: 5px; }
        .value { font-size: 24px; color: #fff; font-weight: bold; word-break: break-all; }
        .value.highlight { font-family: 'Consolas', "Microsoft YaHei", sans-serif, monospace; color: #00d2ff;  font-size: 34px;}
        .value.producttext, .value.usertext { font-size: 16px; text-align: left; color: #fff; overflow: hidden; }
        .value.producttext { height: 100px; }
        .value.usertext { height: 185px; }

       /* 人员列表 */
        .staff-container {
            width: 100%;
            text-align: left;
            background: rgba(0,0,0,0.2);
            border-radius: 8px;
            padding: 10px;
			
			}
        .staff-title {
            text-align: center;
            color: #00d2ff;
            font-size: 20px;
            margin-bottom: 10px;
            border-bottom: 1px dashed rgba(255,255,255,0.2);
            padding-bottom: 8px;
			gap:10px;
        }
        .staff-item {
			float: left;
			width:165px;
            display: flex;
            align-items: center;
            margin-bottom: 8px;
			margin-right: 8px;
            background: rgba(255,255,255,0.05);
            padding: 8px;
            border-radius: 6px;
			
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #00d2ff;
            color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 18px;
            margin-right: 12px;
            flex-shrink: 0;
        }
        .staff-info { display: flex; flex-direction: column; }
        .s-name { font-size: 17px; font-weight: bold; color: #fff; }
        .s-id { font-size: 16px; color: #aaa; }


        .btn-group { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: auto; }
		 .bigbtn-group { width: 100%; display: grid; grid-template-columns: 1fr 1fr  1fr  1fr; gap: 15px; padding-top:15px }
        .btn { padding: 10px 5px; border-radius: 8px; text-decoration: none; font-size: 16px; font-weight: bold; text-align: center; border: 2px solid; transition: all 0.3s; color: white; cursor: pointer; }
        .btn-sop { background: rgba(0, 210, 255, 0.15); border-color: #00d2ff; color: #00d2ff; }
        .btn-sop:hover { background: #00d2ff; color: #000; }
        .btn-alert { background: rgba(255, 77, 77, 0.15); border-color: #ff4d4d; color: #ff4d4d; }
        .btn-alert:hover { background: #ff4d4d; color: #fff; }

        /* --- 右侧面板细节 --- */
        .right-panel { flex: 3; padding: 20px; }
        .text-header { font-size: 28px; color: #00d2ff; border-left: 5px solid #00d2ff; padding-left: 15px; margin-bottom: 20px; font-weight: bold; }
        .scroll-wrapper { flex: 1; overflow: hidden; position: relative; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); padding: 5px; }
        .scroll-track { display: flex; flex-direction: column; gap: 10px; }
        .text-line { font-size: 18px; line-height: 1.8; color: #eee; padding: 4px 9px; }
        .text-line.highlight { color: #fff; background: rgba(0, 210, 255, 0.1); }
        .scroll-mask { position: absolute; left: 0; width: 100%; height: 50px; pointer-events: none; z-index: 5; }
        .scroll-mask.top { top: 0; background: linear-gradient(to bottom, rgba(12, 20, 35, 0.95), transparent); }
        .scroll-mask.bottom { bottom: 0; background: linear-gradient(to top, rgba(12, 20, 35, 0.95), transparent); }

		.bottom-title {
            font-size: 20px;
            font-weight: 700;
            color: #38bdf8;

        }













        /* --- 单个工单卡片样式 --- */
        .work-order-card {
			height:730px;
            background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
            border: 1px solid #334155;
            border-radius: 12px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 
                        0 0 15px rgba(56, 189, 248, 0.05);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            position: relative;
            flex-shrink: 0; /* 防止被压缩 */
        }

 /* 头部 */
        .card-header {
            padding: 16px 20px;
            border-bottom: 1px solid #334155;
            display: flex;
            justify-content: space-between;
            align-items: flex-start; /* 垂直居中 */
            background: rgba(30, 41, 59, 0.4);
			
        }

        .header-main {
            display: flex;
            flex-direction: column;
            gap: 12px;
            overflow: hidden; /* 防止文字溢出 */
        }

        .order-id-row {
            display: flex;
            align-items: baseline;
            gap: 12px;
        }

        .order-id-label {
            font-size: 11px;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .order-id {
            font-size: 20px;
            font-weight: 700;
            color: #38bdf8;
            font-family: 'Consolas', monospace;
        }

        .product-line {
            display: flex;
            align-items: center;
            gap: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .product-name {
            font-size: 18px;
            font-weight: 600;
            color: #f1f5f9;
        }

        /* 产品规格：小字体，跟在名称后 */
        .product-spec {
            font-size: 16px;
            color: #94a3b8;
            background: rgba(255, 255, 255, 0.03);
           
            border-radius: 4px;
            border: 0px solid rgba(255,255,255,0.05);
            font-weight: 400;
        }
		
		
		 .product-spec-inline {
            font-size: 14px;
            color: #94a3b8;
            background: rgba(255, 255, 255, 0.03);
            padding: 2px 6px;
            border-radius: 4px;
            border: 1px solid rgba(255,255,255,0.05);
            font-weight: 400;
        }

        .status-badge-green {
            background: rgba(16, 185, 129, 0.1);
            color: #34d399;
            border: 1px solid rgba(16, 185, 129, 0.2);
            padding: 6px 13px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
		
		
		 .status-badge-red {
            background: rgba(255, 77, 77, 0.1);
            color: #ff4d4d;
            border: 1px solid rgba(255, 77, 77, 0.2);
            padding: 6px 13px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
  

        /* 主体信息区 */
        .card-body {
            padding: 16px 20px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            flex: 1;
        }

        /* 关键数据一行显示 */
        .key-metrics-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);/*每个区域每行显示的数量*/
            gap: 10px;
            background: rgba(0, 0, 0, 0.2);
            padding: 12px 16px;
            border-radius: 8px;
            border: 1px solid #334155;
            align-items: center;
        }

        .metric-item {
            display: flex;
            flex-direction: column;
            border-right: 1px solid rgba(255,255,255,0.05);
            padding-right: 15px;
        }
        .metric-item:last-child {
            border-right: none;
            padding-right: 0;
        }

        .metric-label {
            font-size: 14px;
            color: #94a3b8;
            margin-bottom: 4px;
        }

        .metric-value {
            font-size: 16px;
            font-weight: 600;
            color: #e2e8f0;
        }
        .metric-value.highlight { color: #fbbf24; }
        .metric-value.date-start { color: #38bdf8; }
        .metric-value.date-end { color: #fbbf24; }
		.metric-value.date-green { color: #34d399; }
		

        /* 备注区域 */
        .remarks-section {
            background: rgba(30, 41, 59, 0.2);
            padding: 12px 16px;
            border-radius: 8px;
            border: 1px solid #475569;
            flex: 1; /* 占据剩余空间 */
            display: flex;
            flex-direction: column;
        }

        .remarks-label {
            font-size: 12px;
            color: #64748b;
            margin-bottom: 6px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .remarks-content {
            font-size: 14px;
            color: #cbd5e1;
            line-height: 1.5;
            white-space: pre-wrap;
            overflow-y: auto;
            max-height: 80px; /* 限制高度，适应双列布局 */
            scrollbar-width: thin;
            scrollbar-color: #475569 #1e293b;
        }
        .remarks-content::-webkit-scrollbar { width: 4px; }
        .remarks-content::-webkit-scrollbar-track { background: #1e293b; }
        .remarks-content::-webkit-scrollbar-thumb { background-color: #475569; border-radius: 2px; }

        /* 底部按钮 */
        .card-footer {
			 flex-direction: row; 
			flex-wrap: wrap; 
			justify-content: flex-end; 
			height:90px;
            padding: 12px 20px;
            background: rgba(15, 23, 42, 0.6);
            border-top: 1px solid #334155;
            display: flex;
            gap: 10px;
        }

        .action-btn {
			height:30px;
            padding: 6px 14px;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            color: white;
            font-family: inherit;
        }
        .btn-sec { background: #ff4d4d; border: 1px solid ##ff4d4d; color: ##ff4d4d; }
        .btn-sec:hover { background: rgba(255,255,255,0.1); color: #ff4d4d; }
        .btn-info { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); }
        .btn-info:hover { background: rgba(56, 189, 248, 0.25); }
        .btn-warn { background: linear-gradient(135deg, #f59e0b, #d97706); }
        .btn-warn:hover { filter: brightness(1.1); transform: translateY(-1px); }
        .btn-pri { background: linear-gradient(135deg, #3b82f6, #2563eb); }
        .btn-pri:hover { filter: brightness(1.1); transform: translateY(-1px); }
        .btn-suc { background: linear-gradient(135deg, #10b981, #059669); }
        .btn-suc:hover { filter: brightness(1.1); transform: translateY(-1px); }





.slide-item {
	width: 810px;
	height: 720px;
	position: relative;
	margin: 0 auto;/* overflow: hidden; */
}
.slide-item-box {
	padding: 10px 0px;
}

.slide-item-body {
	/* padding-top:20px; */
	margin-left: -120px;
	margin-right: -120px;
}



.slide-item-body ul {
	padding-top: 10px;
	overflow: visible;
}


.slide-item-body ul li {
	width: 500px;
	float: left;
	display: block;
	list-style: none;
	
	padding-top: 10px;
	margin-bottom: 30px;
	border: none;
	border-radius: 8px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	height: inherit;
	border-radius: 0;

	color: #000;
	margin-left: 17px;
	margin-right: 0px;
	padding-top: 10px;

}


.next {
	position: absolute;
	top: -30px;
	right:-40px;
	z-index: 10;
	cursor: pointer;
	-moz-background-size: 60px;
	-webkit-background-size: 60px;
	background-size: 40px;
	background-position: center;
	background-repeat: no-repeat;


	height: 40px;
	width: 40px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.next-bg {
	background-image: url("../images/btn-fl1.png");
}
.next:hover {
	background-image: url("../images/btn-fl2.png");
}
.prev {
	position: absolute;
	top: -30px;
	z-index: 10;
	cursor: pointer;
	-moz-background-size: 40px;
	-webkit-background-size: 40px;
	background-size: 40px;
	background-position: center;
	background-repeat: no-repeat;
	right: -105px;
	height: 40px;
	width: 40px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.prev-bg {
	background-image: url("../images/btn-fr1.png");
}
.prev-bg:hover {
	background-image: url("../images/btn-fr2.png");
}



        /* --- 进度条组件专用 CSS (前缀 d- 代表 Dark) --- */
        
        /* 行容器 */

          .d-chart-row {
            display: block;
            width: 100%;
			 margin-top: 5px; 
            margin-bottom: 5px; 
            position: relative;
        }

        .d-chart-track {
            width: 100%;
            /* 高度根据新的间距重新计算：
               上留白(5) + 计划字高(~12) + 计划到条(8) + 条高(10) + 条到实际条(12) + 实际条高(10) + 实际条到字(2, 减少后) + 实际字高(~12) + 下留白(5) 
               总计约 76px，设为 80px 保证宽松
            */
            height: 80px; 
            position: relative;
           background: rgba(12, 20, 35, 0.7);
            border-radius: 6px;
            border: 1px solid #333;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
            /* 移除 padding，改用绝对定位精确控制每个元素的 top/bottom */
            padding: 0; 
            box-sizing: border-box;
            overflow: visible; /* 允许文字稍微溢出一点如果有必要，但这里主要靠定位 */
        }

        .d-bar {
            position: absolute;
            height: 10px;
            border-radius: 4px;
            transition: all 0.4s ease;
            cursor: pointer;
        }

        /* 【计划条位置】
           上留白 5px + 字体约 12px + 额外间隙 8px = Top 25px
        */
        .d-bar-plan {
            top: 25px; 
            background: rgba(255, 255, 255, 0.15);
            border: 1px dashed rgba(255, 255, 255, 0.3);
            z-index: 1;
        }

        /* 【实际条位置】
           为了错位，放在计划条下方。
           计划条Top(25) + 计划条高(10) + 中间间隙(12) = Top 47px
        */
        .d-bar-actual {
            top: 47px;
            z-index: 2;
            background: #60a5fa;
            opacity: 0.95;
            box-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
        }

        .d-status-delayed { 
            background: #f87171 !important;
            box-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
        }
        .d-status-early { 
            background: #34d399 !important;
            box-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
        }

        .d-date-label {
            position: absolute;
            font-size: 11px;
            color: #9ca3af;
            white-space: nowrap;
            transform: translateX(-50%);
            pointer-events: none;
            font-family: monospace;
            text-shadow: 0 1px 2px rgba(0,0,0,0.8);
            line-height: 1.2;
        }
        
        /* 【计划日期】距离上边界 5px */
        .d-date-label.plan { 
            top: 5px; 
        }

        /* 【实际日期】
           距离下边界 5px。
           同时因为它紧贴在实际条下方，我们需要确保它和条的间距变小。
           实际条在 Top 47px, 高度 10px -> 底部在 57px。
           容器总高 80px。
           如果 bottom: 5px，那么它的 top 大约是 80 - 5 - 12(字高) = 63px。
           57px (条底) 到 63px (字顶) = 6px 间距。
           如果需要再减少 2px (变成 4px)，我们可以微调 actual bar 的位置或者直接用 bottom 定位。
           
           策略：直接使用 bottom: 5px 定位文字。
           然后调整 actual bar 的 top 值，让它离文字更近。
           
           目标：文字 bottom=5px。文字高~12px -> 文字顶部在 63px (80-5-12)。
           目标间距：4px (原间距假设是6px，减2px)。
           那么实际条的底部应该在 63 - 4 = 59px。
           实际条高 10px -> 实际条 Top = 59 - 10 = 49px。
           
           让我们重新计算一下坐标以完美匹配：
           1. 计划字: top: 5px.
           2. 计划条: top: 25px (距字约8px).
           3. 实际条: top: 48px (距计划条适中).
           4. 实际字: bottom: 5px.
           
           检查实际条与实际字的间距：
           容器 80px.
           实际字 bottom 5px -> 字占据 75px~63px (假设字高12).
           实际条 top 48px, 高 10px -> 条占据 48px~58px.
           间距 = 63px (字顶) - 58px (条底) = 5px.
           
           用户要求：减少 2px 空白。假设原来是 7px，现在要 5px。
           上面的计算已经是 5px 了。如果需要更紧，可以把 actual bar 的 top 改为 50px? 
           不，为了视觉平衡，我们固定：
           - 计划字 top: 5px
           - 实际字 bottom: 5px
           - 调整条形位置来优化中间间距。
        */
        
        .d-date-label.actual { 
            bottom: 5px; 
            color: #d1d5db; 
            font-weight: 600; 
        }

        .d-today-line {
            position: absolute;
            top: 0; bottom: 0;
            width: 1px;
            background: #f87171;
            z-index: 10;
            border-left: 1px dashed #f87171;
            height: 100%;
        }
        .d-today-line::after {
            content: '今日';
            position: absolute;
            top: -18px;
            left: -10px;
            font-size: 10px;
            color: #f87171;
            background: #121212;
            padding: 2px 4px;
            border-radius: 4px;
            border: 1px solid #f87171;
            font-weight: bold;
        }

        .d-tooltip {
            position: fixed;
            background: #2d2d2d;
            color: #fff;
            padding: 10px 14px;
            border-radius: 6px;
            font-size: 12px;
            pointer-events: none;
            display: none;
            z-index: 9999;
            box-shadow: 0 8px 16px rgba(0,0,0,0.4);
            border: 1px solid #444;
        }
        .d-tooltip strong { color: #60a5fa; display: block; margin-bottom: 5px; }
        .d-tooltip div { margin: 3px 0; color: #ccc; }
		
		
		
		
		
		    /* 图片滚动轮播容器设置 */
        .slider-container {
            width: 554px;   /* 设定宽度 */
            height: 312px;  /* 设定高度 */
            position: relative;
            overflow: hidden; /* 隐藏超出部分的图片 */
            border-radius: 8px; /* 可选：圆角 */
            box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* 可选：阴影 */
            background-color: #ddd;
        }

        /* 图片通用样式 */
        .slider-container img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 关键：保持比例填满容器，裁剪多余部分 */
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0; /* 默认隐藏 */
            transition: opacity 1s ease-in-out; /* 淡入淡出过渡效果 */
        }

        /* 当前显示的图片类名 */
        .slider-container img.active {
            opacity: 1;
        }
		
		
		