/* ========== 模块 04-06 专属样式 ========== */

/* 全站通用高级图片蒙版 */
.masked-media {
  position: relative; overflow: hidden; border-radius: 8px; border: 1px solid rgba(0, 240, 255, 0.18);
}

.masked-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.86) saturate(1.08);
}

.masked-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(7, 8, 10,0.72) 0%, rgba(14, 16, 21,0.25) 50%, rgba(7, 8, 10,0.88) 100%);
  box-shadow: inset 0 0 24px rgba(7, 8, 10,0.85);
}

#page-water .card, #page-workorder .card, #page-sandbox .card {
  background: rgba(22, 25, 34, 0.72);
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 8px;
  padding: 16px;
}

#page-water .card-title, #page-workorder .card-title, #page-sandbox .card-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #00F0FF 0%, #00F0FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#page-workorder table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

#page-workorder th {
  background: rgba(0, 240, 255, 0.1);
  padding: 8px;
  text-align: left;
  color: #00F0FF;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  font-weight: 600;
}

#page-workorder td {
  padding: 8px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.1);
  color: #F4F4F5;
}

#mobilePreview {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 280px;
  height: 500px;
  background: #07080A;
  border: 8px solid #161922;
  border-radius: 24px;
  padding: 0;
  color: #A1A1AA;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

#mobilePreview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 24px;
  background: #07080A;
  border-radius: 0 0 20px 20px;
  z-index: 10;
  border: 3px solid #161922;
  border-top: none;
}

.phase-btn.active {
  background: rgba(0, 240, 255, 0.25) !important;
  color: #00F0FF !important;
  border: 2px solid #00F0FF !important;
}

#page-sandbox input[type="range"] {
  accent-color: #00F0FF;
}

#page-sandbox input[type="number"],
#page-sandbox select {
  color: #00F0FF;
}

@media (max-width: 1366px) {
  #mobilePreview {
    width: 240px;
    height: 420px;
    right: 12px;
    bottom: 12px;
  }
}

@media (max-width: 1024px) {
  #mobilePreview {
    position: static;
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 12px;
  }
}