/* 该文件为 3D 锁控柜的 1:1 复刻样式（基于用户提供的 HTML/CSS）
   为避免全局污染，统一加了 lc3d 前缀命名空间。 */

.lc3dRoot {
  --scene-width: 1000px;
  --scene-height: 1100px;

  --cabinet-width: 600px;
  --cabinet-height: 900px;
  --cabinet-depth: 300px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 3D 场景容器 */
.lc3dScene {
  width: var(--scene-width);
  height: var(--scene-height);
  perspective: 2000px;
  perspective-origin: 50% 50%;
  position: relative;
}

/* 3D 柜体包装器 */
.lc3dCabinetWrapper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* 3D 盒子容器 */
.lc3dCabinet3d {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cabinet-width);
  height: var(--cabinet-height);
  transform-style: preserve-3d;
  transform: translateX(-50%) translateY(-50%);
}

/* ========== 正面 ========== */
.lc3dCabinetFront {
  width: var(--cabinet-width);
  height: var(--cabinet-height);
  background: linear-gradient(180deg, #d8d8d8 0%, #c8c8c8 50%, #b8b8b8 100%);
  border-radius: 8px;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateZ(0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  border: 3px solid #a0a0a0;
}

/* 顶部边框装饰 */
.lc3dCabinetFront::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(180deg, #e0e0e0 0%, #d0d0d0 100%);
  border-radius: 5px 5px 0 0;
}

/* 环境光效果 */
.lc3dCabinetFront::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
  pointer-events: none;
  border-radius: 8px;
}

/* ========== 背面 ========== */
.lc3dCabinetBack {
  width: var(--cabinet-width);
  height: var(--cabinet-height);
  background: linear-gradient(180deg, #808080 0%, #707070 50%, #606060 100%);
  position: absolute;
  left: 0;
  top: 0;
  transform: translateZ(calc(var(--cabinet-depth) * -1));
  border-radius: 8px;
  border: 3px solid #555;
}

/* 背面内部细节 */
.lc3dCabinetBack::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: linear-gradient(180deg, #757575 0%, #656565 100%);
  border-radius: 4px;
  border: 2px solid #555;
}

/* 背面通风孔 */
.lc3dCabinetBack::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 400px;
  background: repeating-linear-gradient(0deg, #444 0px, #444 3px, #666 3px, #666 8px);
  border-radius: 4px;
  opacity: 0.8;
}

/* ========== 左侧面 ========== */
.lc3dCabinetLeft {
  width: var(--cabinet-depth);
  height: var(--cabinet-height);
  background: linear-gradient(90deg, #989898 0%, #a8a8a8 30%, #b8b8b8 70%, #c8c8c8 100%);
  position: absolute;
  left: calc(var(--cabinet-depth) * -1);
  top: 0;
  transform-origin: right center;
  transform: rotateY(-90deg);
  border-top: 3px solid #b0b0b0;
  border-bottom: 3px solid #808080;
  border-left: 3px solid #888;
}

/* 左侧面内部装饰 */
.lc3dCabinetLeft::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 15px;
  right: 15px;
  bottom: 30px;
  background: linear-gradient(90deg, #909090 0%, #a0a0a0 50%, #b0b0b0 100%);
  border-radius: 3px;
  border: 1px solid #888;
}

/* ========== 右侧面 ========== */
.lc3dCabinetRight {
  width: var(--cabinet-depth);
  height: var(--cabinet-height);
  background: linear-gradient(270deg, #888888 0%, #989898 30%, #a8a8a8 70%, #b0b0b0 100%);
  position: absolute;
  left: var(--cabinet-width);
  top: 0;
  transform-origin: left center;
  transform: rotateY(90deg);
  border-top: 3px solid #a0a0a0;
  border-bottom: 3px solid #777;
  border-right: 3px solid #777;
}

/* 右侧面内部装饰 */
.lc3dCabinetRight::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 15px;
  right: 15px;
  bottom: 30px;
  background: linear-gradient(270deg, #808080 0%, #909090 50%, #a0a0a0 100%);
  border-radius: 3px;
  border: 1px solid #777;
}

/* ========== 顶部 ========== */
.lc3dCabinetTop {
  width: var(--cabinet-width);
  height: var(--cabinet-depth);
  background: linear-gradient(180deg, #d0d0d0 0%, #c8c8c8 30%, #c0c0c0 70%, #b8b8b8 100%);
  position: absolute;
  left: 0;
  top: calc(var(--cabinet-depth) * -1);
  transform-origin: center bottom;
  transform: rotateX(90deg);
  border-left: 3px solid #b8b8b8;
  border-right: 3px solid #a8a8a8;
  border-top: 3px solid #909090;
}

/* 顶部装饰 */
.lc3dCabinetTop::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 30px;
  right: 30px;
  bottom: 15px;
  background: linear-gradient(180deg, #c8c8c8 0%, #b8b8b8 100%);
  border-radius: 3px;
  border: 1px solid #a0a0a0;
}

/* ========== 底部 ========== */
.lc3dCabinetBottom {
  width: var(--cabinet-width);
  height: var(--cabinet-depth);
  background: linear-gradient(0deg, #606060 0%, #707070 30%, #787878 70%, #808080 100%);
  position: absolute;
  left: 0;
  top: var(--cabinet-height);
  transform-origin: center top;
  transform: rotateX(-90deg);
  border-left: 3px solid #707070;
  border-right: 3px solid #606060;
  border-bottom: 3px solid #505050;
}

/* 底部装饰 */
.lc3dCabinetBottom::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 30px;
  right: 30px;
  bottom: 15px;
  background: linear-gradient(0deg, #585858 0%, #686868 100%);
  border-radius: 3px;
  border: 1px solid #555;
}

/* 地面阴影 */
.lc3dGroundShadow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(calc(450px + 80px)) rotateX(90deg);
  width: 650px;
  height: 300px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0%, transparent 65%);
  filter: blur(20px);
  pointer-events: none;
}

/* 挂钩 */
.lc3dHook {
  position: absolute;
  top: -15px;
  width: 30px;
  height: 25px;
  background: linear-gradient(180deg, #999 0%, #666 100%);
  border-radius: 50% 50% 0 0;
  transform: translateZ(5px);
}

.lc3dHookLeft {
  left: 30px;
}

.lc3dHookRight {
  right: 30px;
}

.lc3dHook::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 30% 30%, #666, #333);
  border-radius: 50%;
}

/* 头部区域 */
.lc3dHeader {
  position: relative;
  z-index: 1;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lc3dLogo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lc3dLogoIcon {
  width: 50px;
  height: 40px;
  position: relative;
}

.lc3dLogoIcon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

.lc3dLogoText {
  color: #c41e3a;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.lc3dTitle {
  color: #c41e3a;
  font-size: 22px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* 主面板 */
.lc3dMainPanel {
  margin: 10px 15px;
  background: linear-gradient(180deg, #e8e8e8 0%, #d0d0d0 100%);
  border-radius: 4px;
  padding: 15px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateZ(5px);
}

/* 屏幕区域 */
.lc3dScreenSection {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.lc3dMonitorFrame {
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%);
  border-radius: 8px;
  padding: 15px 20px 45px 20px;
  position: relative;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transform: translateZ(8px);
  border: 2px solid #333;
}

.lc3dScreen {
  width: 320px;
  height: 180px;
  background: #1a3a5c;
  border-radius: 4px;
  border: 3px solid #444;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(0, 100, 200, 0.3);
}

.lc3dScreenContent {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0d4a7a 0%, #0a3d66 100%);
  padding: 10px;
}

.lc3dScreenHeader {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 10px;
  margin-bottom: 8px;
}

.lc3dScreenTable {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  padding: 5px;
}

.lc3dScreenRow {
  display: flex;
  justify-content: space-between;
  color: #00ffff;
  font-size: 9px;
  padding: 3px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lc3dScreenRow:last-child {
  border-bottom: none;
}

.lc3dScreenButtons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: center;
}

.lc3dScreenBtn {
  padding: 4px 15px;
  font-size: 10px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
}

.lc3dScreenBtnRed {
  background: linear-gradient(180deg, #ff5555, #cc0000);
  color: white;
  box-shadow: 0 2px 4px rgba(255, 0, 0, 0.4);
}

.lc3dScreenBtnGreen {
  background: linear-gradient(180deg, #55cc55, #009900);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 255, 0, 0.4);
}

.lc3dMonitorBottomArea {
  position: absolute;
  bottom: 8px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lc3dCardReader {
  width: 50px;
  height: 28px;
  background: linear-gradient(180deg, #3a3a3a 0%, #252525 100%);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #444;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.lc3dCardReaderIcon {
  width: 20px;
  height: 16px;
  border: 1px solid #555;
  border-radius: 2px;
  background: linear-gradient(180deg, #444, #333);
  position: relative;
}

.lc3dCardReaderIcon::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 6px;
  background: #555;
  border-radius: 1px;
}

.lc3dFingerprintReader {
  width: 28px;
  height: 28px;
  background: linear-gradient(180deg, #3a3a3a 0%, #252525 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #444;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.lc3dFingerprintIcon {
  width: 18px;
  height: 18px;
  border: 2px solid #555;
  border-radius: 50%;
  position: relative;
}

.lc3dFingerprintIcon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border: 1px solid #555;
  border-radius: 50%;
}

.lc3dFingerprintIcon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  background: #555;
  border-radius: 50%;
}

/* 抽屉 */
.lc3dDrawer {
  background: linear-gradient(180deg, #f8f8f8 0%, #e0e0e0 100%);
  height: 35px;
  margin: 10px 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateZ(12px);
}

.lc3dDrawerHandle {
  width: 40px;
  height: 8px;
  background: linear-gradient(180deg, #bbb, #888);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ========== 钥匙仓区域 ========== */
.lc3dKeySection {
  padding: 15px 0;
  border-bottom: 2px solid #aaa;
  transform: translateZ(5px);
}

.lc3dKeySectionTitle {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
  font-weight: bold;
}

.lc3dKeyRow {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.lc3dKeySlot {
  width: 50px;
  height: 50px;
  background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
  border-radius: 50%;
  border: 3px solid #555;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.5);
  transform: translateZ(10px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lc3dKeySlot::before {
  content: '';
  width: 30px;
  height: 30px;
  background: linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%);
  border-radius: 50%;
  border: 2px solid #444;
}

.lc3dKeyNumber {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: bold;
  color: #555;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.lc3dKeyIndicator {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.lc3dKeyIndicatorRed {
  background: radial-gradient(circle at 30% 30%, #ff6666, #aa0000);
  box-shadow: 0 0 6px #ff0000;
}

.lc3dKeyIndicatorGreen {
  background: radial-gradient(circle at 30% 30%, #66ff66, #00aa00);
  box-shadow: 0 0 6px #00ff00;
}

/* 钥匙仓：在线时显示的钥匙图片（30x30 固定） */
.lc3dKeySlot .lc3dSlotHardwareImg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  object-fit: contain;
  pointer-events: none;
}

/* ========== 锁仓区域 ========== */
.lc3dLockSection {
  padding: 10px 0;
  transform: translateZ(3px);
}

.lc3dLockSectionTitle {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  margin-top: 10px;
  font-weight: bold;
}

.lc3dLockRow {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
  margin-top: 18px;
}

.lc3dLockRow:first-child {
  margin-top: 20px;
}

.lc3dLockSlot {
  width: 38px;
  height: 45px;
  background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  border: 1px solid #555;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: translateZ(8px);
  transition: transform 0.2s;
  position: relative;
}

.lc3dLockSlot:hover {
  transform: translateZ(15px);
}

/* 可点击仓位：鼠标指针 */
.lc3dSlotClickable {
  cursor: pointer;
}

.lc3dLockNumber {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: bold;
  color: #555;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.lc3dLockIndicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-bottom: 3px;
}

.lc3dLockIndicatorRed {
  background: radial-gradient(circle at 30% 30%, #ff6666, #aa0000);
  box-shadow: 0 0 6px #ff0000;
}

.lc3dLockIndicatorOff {
  background: radial-gradient(circle at 30% 30%, #555, #333);
}

.lc3dLockIndicatorGreen {
  background: radial-gradient(circle at 30% 30%, #66ff66, #00aa00);
  box-shadow: 0 0 6px #00ff00;
}

.lc3dLockHole {
  width: 20px;
  height: 25px;
  background: linear-gradient(180deg, #1a1a1a 0%, #050505 100%);
  border-radius: 2px;
  border: 1px solid #444;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 锁仓：在线时显示的挂锁图片（宽 30、高 20），下移 5px 避免挡住状态灯 */
.lc3dLockSlot .lc3dSlotHardwareLockImg {
  position: absolute;
  left: 50%;
  top: calc(50% + 5px);
  transform: translate(-50%, -50%);
  width: 30px;
  height: 20px;
  object-fit: contain;
  pointer-events: none;
}

/* 边框螺丝装饰 */
.lc3dScrew {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 30% 30%, #999, #444);
  border-radius: 50%;
  border: 1px solid #333;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  transform: translateZ(5px);
}

.lc3dScrew::after {
  content: '+';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #333;
  font-size: 8px;
  font-weight: bold;
}

.lc3dScrewsLeft {
  position: absolute;
  left: 8px;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  z-index: 1;
}

.lc3dScrewsRight {
  position: absolute;
  right: 8px;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  z-index: 1;
}

/* 提示 */
.lc3dControlsHint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  text-align: center;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(229, 231, 235, 1);
  padding: 6px 10px;
  border-radius: 9999px;
  backdrop-filter: blur(10px);
}
