/* ========================================
   自动生成：network_cable.asp 页面样式
   ======================================== */

.auto-style-1 {
  display:none;
}

.auto-style-2 {
  width:160px;
  height:160px;
  margin:10px auto;
}

.auto-style-3 {
  color:#6b7280;
  margin-bottom:20px;
}

.auto-style-4 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:36px;
  margin-bottom:32px;
}

.auto-style-5 {
  padding:0;
}

.auto-style-6 {
  margin:0 0 18px 0;
  font-size:17px;
  color:#1f2937;
  text-align:center;
  font-weight:600;
  padding:12px 16px;
  border-radius:8px;
}

.auto-style-7 {
  color:#f59e0b;
}

.auto-style-8 {
  background:#fff;
}

.auto-style-9 {
  background:#ff8c00;
}

.auto-style-10 {
  color:#fff;
}

.auto-style-11 {
  background:#0000ff;
}

.auto-style-12 {
  background:#008000;
}

.auto-style-13 {
  background:#8b4513;
}

/* 彩色背景行的线号圆圈优化：白色文字+半透明白色背景 */
.auto-style-9 .wire-num,
.auto-style-11 .wire-num,
.auto-style-12 .wire-num,
.auto-style-13 .wire-num {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* 确保彩色背景行的功能说明文字清晰 */
.auto-style-9 .wire-role,
.auto-style-11 .wire-role,
.auto-style-12 .wire-role,
.auto-style-13 .wire-role {
  color: rgba(255,255,255,0.9);
}

/* 确保彩色背景行的颜色名称文字清晰 */
.auto-style-9 .wire-color,
.auto-style-11 .wire-color,
.auto-style-12 .wire-color,
.auto-style-13 .wire-color {
  color: #fff;
}

.auto-style-14 {
  margin:12px 0 0 0;
  font-size:13px;
  color:#6b7280;
  text-align:center;
}

.auto-style-15 {
  background:#f0f9ff;
  border-radius:8px;
  padding:20px;
  margin-bottom:24px;
  border-left:4px solid #0ea5e9;
}

.auto-style-16 {
  margin:0 0 16px 0;
  font-size:16px;
  color:#0c4a6e;
}

.auto-style-17 {
  margin:0 0 12px 0;
  font-size:13px;
  color:#075985;
  line-height:1.7;
}

.auto-style-18 {
  overflow-x:auto;
}

.auto-style-19 {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.auto-style-20 {
  background:#e0f2fe;
}

.auto-style-21 {
  padding:8px;
  text-align:left;
  border:1px solid #bae6fd;
}

.auto-style-22 {
  padding:8px;
  border:1px solid #e0f2fe;
}

.auto-style-23 {
  background:#f0f9ff;
}

.auto-style-24 {
  margin:12px 0 0 0;
  font-size:12px;
  color:#6b7280;
}

.auto-style-25 {
  background:#f8fafc;
  border-radius:8px;
  padding:20px;
  margin-bottom:24px;
  border:1px solid #e2e8f0;
}

.auto-style-26 {
  margin:0 0 16px 0;
  font-size:16px;
  color:#1f2937;
}

.auto-style-27 {
  color:#3b82f6;
}

.auto-style-28 {
  margin:0 0 16px 0;
  font-size:13px;
  color:#6b7280;
}

.auto-style-29 {
  margin:0 0 8px 0;
  font-size:15px;
  color:#1e40af;
}

.auto-style-30 {
  margin:0;
  font-size:13px;
  color:#4b5563;
  line-height:1.7;
}

.auto-style-31 {
  border-left-color:#10b981;
}

.auto-style-32 {
  margin:0 0 8px 0;
  font-size:15px;
  color:#065f46;
}

.auto-style-33 {
  background:#10b981;
}

.auto-style-34 {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}

.auto-style-35 {
  background:#e2e8f0;
}

.auto-style-36 {
  padding:8px;
  text-align:left;
  border:1px solid #cbd5e1;
}

.auto-style-37 {
  padding:8px;
  border:1px solid #e2e8f0;
}

.auto-style-38 {
  background:#f8fafc;
}

.auto-style-39 {
  padding:8px;
  border:1px solid #e2e8f0;
  font-weight:600;
}

.auto-style-40 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px;
  margin-bottom:24px;
}

.auto-style-41 {
  background:#f0fdf4;
  border-radius:8px;
  padding:20px;
  border-left:4px solid #22c55e;
}

.auto-style-42 {
  margin:0 0 12px 0;
  font-size:15px;
  color:#166534;
}

.auto-style-43 {
  margin:0;
  padding-left:18px;
  font-size:13px;
  color:#15803d;
  line-height:1.8;
}

.auto-style-44 {
  background:#fef3c7;
  border-radius:8px;
  padding:20px;
  border-left:4px solid #f59e0b;
}

.auto-style-45 {
  margin:0 0 12px 0;
  font-size:15px;
  color:#92400e;
}

.auto-style-46 {
  margin:0;
  padding-left:18px;
  font-size:13px;
  color:#78350f;
  line-height:1.8;
}

.auto-style-47 {
  margin-top:12px;
  padding:12px;
  background:#fffbeb;
  border-radius:6px;
}

.auto-style-48 {
  margin:0 0 6px 0;
  font-size:13px;
  color:#92400e;
  font-weight:bold;
}

.auto-style-49 {
  margin:0;
  padding-left:18px;
  font-size:12px;
  color:#78350f;
  line-height:1.7;
}

.auto-style-50 {
  padding:8px;
  border:1px solid #e0f2fe;
  font-weight:600;
}

.auto-style-51 {
  padding:8px;
  border:1px solid #e0f2fe;
  color:#16a34a;
  font-weight:bold;
}

.auto-style-52 {
  padding:8px;
  border:1px solid #e0f2fe;
  color:#f59e0b;
}

.auto-style-53 {
  padding:8px;
  border:1px solid #e0f2fe;
  color:#6b7280;
}

.auto-style-54 {
  background:#fef3c7;
  border-radius:8px;
  padding:20px;
  margin-bottom:24px;
  border-left:4px solid #f59e0b;
}

.auto-style-55 {
  margin:0 0 16px 0;
  font-size:16px;
  color:#92400e;
}

.auto-style-56 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:12px;
  margin-bottom:16px;
}

.auto-style-57 {
  background:#fffbeb;
  border-radius:6px;
  padding:12px;
}

.auto-style-58 {
  margin:0 0 6px 0;
  font-size:14px;
  color:#92400e;
}

.auto-style-59 {
  margin:0;
  font-size:12px;
  color:#78350f;
  line-height:1.6;
}

.auto-style-60 {
  margin:0 0 8px 0;
  font-size:14px;
  color:#92400e;
}

.auto-style-61 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}

.auto-style-62 {
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:8px;
  padding:16px;
}

.auto-style-63 {
  margin:0 0 8px 0;
  font-size:14px;
  color:#1e40af;
}

.auto-style-64 {
  margin:0;
  padding-left:18px;
  font-size:13px;
  color:#4b5563;
  line-height:1.8;
}

.auto-style-65 {
  background:#f0fdf4;
  border-radius:8px;
  padding:20px;
  margin-bottom:24px;
  border-left:4px solid #22c55e;
}

.auto-style-66 {
  margin:0 0 16px 0;
  font-size:16px;
  color:#166534;
}

.auto-style-67 {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

@media (min-width:768px) {
  .auto-style-67 {
    grid-template-columns:repeat(2,1fr);
  }
}

.auto-style-68 {
  background:#fff;
  border-radius:6px;
  padding:12px;
}

.auto-style-69 {
  margin:0 0 6px 0;
  font-size:14px;
  color:#15803d;
}

.auto-style-70 {
  margin:0;
  font-size:12px;
  color:#166534;
  line-height:1.6;
}

.auto-style-71 {
  background:#fef2f2;
  border-radius:8px;
  padding:20px;
  margin-bottom:24px;
  border-left:4px solid #ef4444;
}

.auto-style-72 {
  margin:0 0 16px 0;
  font-size:16px;
  color:#991b1b;
}

.auto-style-73 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:12px;
}

.auto-style-74 {
  margin:0 0 6px 0;
  font-size:14px;
  color:#991b1b;
  display:flex;
  align-items:center;
  gap:8px;
}

.auto-style-74 i {
  font-size:14px;
  color:#dc2626;
  flex-shrink:0;
}

.auto-style-75 {
  margin:0;
  padding-left:18px;
  font-size:12px;
  color:#7f1d1d;
  line-height:1.7;
  list-style-type:disc;
}

.auto-style-76 {
  background:#eff6ff;
  border-radius:8px;
  padding:20px;
  margin-bottom:24px;
  border-left:4px solid #3b82f6;
}

.auto-style-77 {
  margin:0 0 16px 0;
  font-size:16px;
  color:#1e40af;
}

.auto-style-78 {
  color:#22c55e;
}

.auto-style-79 {
  margin:0;
  padding-left:18px;
  font-size:13px;
  color:#1e40af;
  line-height:1.8;
  list-style-type:disc;
}

.auto-style-80 {
  margin:0 0 8px 0;
  font-size:14px;
  color:#991b1b;
}

.auto-style-81 {
  color:#ef4444;
}

.auto-style-82 {
  margin:0;
  padding-left:18px;
  font-size:13px;
  color:#991b1b;
  line-height:1.8;
  list-style-type:disc;
}

.auto-style-83 {
  margin-top:16px;
  padding:12px;
  background:#fff;
  border-radius:6px;
}

.auto-style-84 {
  margin:0;
  font-size:13px;
  color:#4b5563;
  line-height:1.8;
}

.auto-style-85 {
  background:linear-gradient(135deg,#eff6ff,#dbeafe);
  border-left:4px solid #3b82f6;
}

.auto-style-86 {
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.auto-style-87 {
  font-size:24px;
  color:#3b82f6;
  margin-top:2px;
}

.auto-style-88 {
  margin:0 0 8px 0;
  font-size:16px;
  color:#1e40af;
}

.auto-style-89 {
  margin:0 0 10px 0;
  font-size:14px;
  color:#374151;
  line-height:1.6;
}

.auto-style-90 {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.auto-style-91 {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  background:#3b82f6;
  color:#fff;
  text-decoration:none;
  border-radius:6px;
  font-size:13px;
  font-weight:500;
}

.auto-style-92 {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  background:#10b981;
  color:#fff;
  text-decoration:none;
  border-radius:6px;
  font-size:13px;
  font-weight:500;
}




/* ========================================
   网线长度估算计算器样式
   ======================================== */

.cable-calc-1 {
  margin-bottom:20px;
}

.cable-calc-2 {
  max-width:100%;
}

.cable-calc-3 {
  font-size:12px;
  color:#6b7280;
  margin-top:4px;
}

.cable-calc-4 {
  display:none;
}

.cable-calc-5 {
  overflow-x:auto;
}

.cable-calc-6 {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.cable-calc-7 {
  background:#f8fafc;
}

.cable-calc-8 {
  padding:10px 12px;
  text-align:left;
  border-bottom:2px solid #e2e8f0;
  color:#374151;
}

.cable-calc-9 {
  padding:10px 12px;
  border-bottom:1px solid #f1f5f9;
}

.cable-calc-10 {
  padding:10px 12px;
  border-bottom:1px solid #f1f5f9;
  color:#f59e0b;
}

.cable-calc-11 {
  background:#f0fdf4;
}

.cable-calc-12 {
  padding:10px 12px;
  border-bottom:1px solid #f1f5f9;
  color:#10b981;
}

.cable-calc-13 {
  padding:10px 12px;
  border-bottom:1px solid #f1f5f9;
  color:#3b82f6;
}

.cable-calc-14 {
  padding:10px 12px;
  border-bottom:1px solid #f1f5f9;
  color:#6b7280;
}

.cable-calc-15 {
  margin-top:16px;
  padding:12px 16px;
  background:#f0f9ff;
  border-radius:8px;
  border-left:4px solid #3b82f6;
}

.cable-calc-16 {
  margin:0;
  font-size:13px;
  color:#1e40af;
  line-height:1.7;
}

.cable-calc-17 {
  margin-right:6px;
}

.cable-calc-18 {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.cable-calc-19 {
  padding:16px;
  background:#f8fafc;
  border-radius:8px;
}

.cable-calc-20 {
  margin:0 0 8px 0;
  font-size:14px;
  color:#1f2937;
}

.cable-calc-21 {
  color:#2563eb;
  margin-right:6px;
}

.cable-calc-22 {
  margin:0;
  font-size:13px;
  color:#4b5563;
  line-height:1.7;
}

.cable-calc-23 {
  color:#f59e0b;
  margin-right:6px;
}

.cable-calc-24 {
  color:#10b981;
  margin-right:6px;
}

.cable-calc-25 {
  color:#8b5cf6;
  margin-right:6px;
}

.cable-calc-26 {
  margin-top:16px;
  padding:12px 16px;
  background:#fffbeb;
  border-radius:8px;
  border-left:4px solid #f59e0b;
}

.cable-calc-27 {
  margin:0;
  font-size:13px;
  color:#92400e;
  line-height:1.7;
}

.cable-calc-28 {
  color:#2563eb;
  text-decoration:underline;
}

.cable-calc-29 {
  color:#2563eb;
}

.cable-calc-30 {
  grid-column:1/-1;
  background:#fef2f2;
  border:1px solid #fecaca;
  border-radius:8px;
  padding:10px 14px;
  margin-top:8px;
}

.cable-calc-31 {
  color:#ef4444;
  margin-right:6px;
}

.cable-calc-32 {
  font-size:12px;
  color:#991b1b;
}

.cable-calc-33 {
  font-size:20px;
  color:#fff;
  font-weight:700;
}

.cable-calc-34 {
  font-weight:700;
  color:#1f2937;
}

.cable-calc-35 {
  font-weight:700;
  color:#2563eb;
  font-size:16px;
}

.cable-calc-36 {
  padding:12px 16px;
  background:#f0f9ff;
  border-radius:8px;
  border-left:4px solid #3b82f6;
  margin-top:12px;
}

.cable-calc-37 {
  margin:0;
  font-size:12px;
  color:#1e40af;
  line-height:1.7;
}

/* 计算器响应式 */
@media (max-width: 768px) {
  .cable-calc-18 {
    grid-template-columns: 1fr !important;
  }
}


/* 网线长度估算计算器 - 去掉外面的框，100%版心显示 */
.calc-section {
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 32px 0;
  box-shadow: none;
}

.calc-section .cable-calc-26 {
  margin-bottom: 12px;
}

.calc-section .tool-desc {
  margin-bottom: 20px;
}

.calc-section .estimate-form-container {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
}

.calc-section .estimate-form-grid {
  gap: 20px;
}

.calc-section .estimate-form-group {
  margin-bottom: 0;
}


/* ========================================
   从ASP文件迁移的内联样式（网线图和步骤卡片）
   ======================================== */

.cable-diagram { display:flex; flex-direction:column; gap:3px; }
  .cable-wire { display:flex; align-items:center; padding:8px 14px; border-radius:5px; border:1px solid #e2e8f0; }
  .wire-num { display:inline-block; width:28px; height:28px; line-height:28px; text-align:center; background:rgba(0,0,0,0.1); border-radius:50%; font-size:13px; font-weight:700; margin-right:14px; flex-shrink:0; }
  .wire-color { font-size:15px; font-weight:600; width:55px; flex-shrink:0; }
  .wire-role { font-size:12px; color:#6b7280; margin-left:auto; }
  .step-card { background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:16px; margin-bottom:12px; border-left:4px solid #3b82f6; }
  .step-num { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; background:#3b82f6; color:#fff; border-radius:50%; font-weight:bold; font-size:16px; margin-right:10px; }

/* 线序标题背景色区分 */
.auto-style-5:first-child .auto-style-6 {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.auto-style-5:last-child .auto-style-6 {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}