/* =========================================================
   探知 · 定向脉冲按钮
   文件：modules/detect.css
   ---------------------------------------------------------
   机加工触发键：拉丝面板 + 沉槽 + 凸起键帽，按下去键帽下沉。
   只服务探知页的 #btn-detect；页面骨架与其它模块样式在 style.css。
   ========================================================= */

.detect-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 8px;
  border: 1px solid #05070a;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, #1d2128 0%, #14171c 50%, #0b0d11 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.8),
    0 9px 20px -9px rgba(0, 0, 0, 0.95);
  cursor: pointer;
  font: inherit;
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

/* 拉丝纹理 */
.detect-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.022) 0 1px,
    rgba(0, 0, 0, 0.055) 1px 2px
  );
}

/* 沉槽：键帽陷进去的那圈凹坑 */
.db-well {
  position: relative;
  display: block;
  padding: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #04060a 0%, #0c0f13 100%);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.045);
  transition: box-shadow 0.12s ease;
}

/* 键帽：凸起的实体键 */
.db-cap {
  position: relative;
  display: block;
  padding: 22px 10px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-indent: 4px;
  text-align: center;
  color: #e9eef6;
  text-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.85),
    0 1px 0 rgba(255, 255, 255, 0.13);
  background:
    radial-gradient(140% 100% at 50% -30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, #3b414b 0%, #2a2f38 36%, #1c2027 70%, #15181d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -2px 3px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 2px 0 #0b0e12,
    0 3px 1px rgba(0, 0, 0, 0.72),
    0 7px 14px rgba(0, 0, 0, 0.7);
  transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.12s ease;
}

/* 按下：键帽下沉，槽口亮一圈 */
.detect-btn:active .db-well {
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 0 16px rgba(255, 255, 255, 0.09);
}

.detect-btn:active .db-cap {
  transform: translateY(3px);
  color: #c9d1dd;
  text-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(140% 100% at 50% -30%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, #1b1f25 0%, #161a20 44%, #111419 100%);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

@media (hover: hover) {
  .detect-btn:hover .db-cap {
    filter: brightness(1.07);
  }
}

.detect-btn:focus-visible {
  outline: 1px solid #4a525f;
  outline-offset: 2px;
}