/* ===== 像素素材提取器 ===== */

:root {
  --pxe-bg: #0f1017;
  --pxe-fg: #e4e2dd;
  --pxe-muted: #8b8da0;
  --pxe-accent: #e8a025;
  --pxe-accent-hover: #f0b040;
  --pxe-success: #2dd4a0;
  --pxe-info: #4ea8de;
  --pxe-danger: #ef4444;
  --pxe-card: #181924;
  --pxe-card2: #1e2030;
  --pxe-border: #2a2c40;
  --pxe-radius: 8px;
  --pxe-radius-lg: 12px;
  --pxe-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif;
  --pxe-font-mono: 'Courier New', Consolas, monospace;
}

/* ===== 容器 ===== */
.pxe-container {
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: 28px 24px !important;
  font-family: var(--pxe-font) !important;
  color: var(--pxe-fg) !important;
  background: var(--pxe-bg) !important;
  border-radius: 16px !important;
  border: 1px solid var(--pxe-border) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.35) !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}
.pxe-container *, .pxe-container *::before, .pxe-container *::after {
  box-sizing: border-box !important;
}

/* ===== 标题区 ===== */
.pxe-header {
  text-align: center !important;
  margin-bottom: 28px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--pxe-border) !important;
}
.pxe-title {
  font-family: var(--pxe-font-mono) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  color: var(--pxe-accent) !important;
  margin: 0 0 8px !important;
}
.pxe-desc {
  font-size: 14px !important;
  color: var(--pxe-muted) !important;
  margin: 0 !important;
}

/* ===== 上传区 ===== */
.pxe-upload-row {
  display: flex !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}
@media (max-width: 640px) {
  .pxe-upload-row { flex-direction: column !important; }
}

.pxe-drop-zone {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 150px !important;
  padding: 24px !important;
  border: 2px dashed var(--pxe-border) !important;
  border-radius: var(--pxe-radius-lg) !important;
  cursor: pointer !important;
  transition: border-color 0.25s, background 0.25s !important;
  text-align: center !important;
  position: relative !important;
  background: var(--pxe-card) !important;
}
.pxe-drop-zone:hover, .pxe-drop-zone.pxe-dragover {
  border-color: var(--pxe-accent) !important;
  background: rgba(232, 160, 37, 0.06) !important;
}
.pxe-drop-icon {
  font-size: 32px !important;
  color: var(--pxe-accent) !important;
  margin-bottom: 8px !important;
  line-height: 1 !important;
}
.pxe-drop-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 0 4px !important;
  color: var(--pxe-fg) !important;
}
.pxe-drop-hint {
  font-size: 12px !important;
  color: var(--pxe-muted) !important;
  margin: 0 !important;
}

.pxe-url-panel {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--pxe-card) !important;
  border-radius: var(--pxe-radius-lg) !important;
  padding: 18px 20px !important;
  border: 1px solid var(--pxe-border) !important;
}
.pxe-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--pxe-muted) !important;
  margin: 0 0 4px !important;
}
.pxe-hint {
  font-size: 11px !important;
  color: var(--pxe-muted) !important;
  margin: 0 !important;
}
.pxe-url-row {
  display: flex !important;
  gap: 8px !important;
}
.pxe-input {
  flex: 1 1 auto !important;
  width: auto !important;
  padding: 10px 14px !important;
  border-radius: var(--pxe-radius) !important;
  border: 1px solid var(--pxe-border) !important;
  background: var(--pxe-bg) !important;
  color: var(--pxe-fg) !important;
  font-size: 13px !important;
  font-family: var(--pxe-font) !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  line-height: 1.4 !important;
}
.pxe-input::placeholder { color: var(--pxe-muted) !important; opacity: 0.6 !important; }
.pxe-input:focus { border-color: var(--pxe-accent) !important; }

/* ===== 按钮 ===== */
.pxe-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 18px !important;
  border-radius: var(--pxe-radius) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--pxe-font) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  border: none !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  background: transparent !important;
  color: var(--pxe-fg) !important;
}
.pxe-btn-accent { background: var(--pxe-accent) !important; color: #000 !important; }
.pxe-btn-accent:hover { background: var(--pxe-accent-hover) !important; }
.pxe-btn-outline { background: transparent !important; border: 1px solid var(--pxe-border) !important; color: var(--pxe-fg) !important; }
.pxe-btn-outline:hover { border-color: var(--pxe-accent) !important; color: var(--pxe-accent) !important; }
.pxe-btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }

/* ===== 面板 ===== */
.pxe-panel {
  background: var(--pxe-card) !important;
  border: 1px solid var(--pxe-border) !important;
  border-radius: var(--pxe-radius-lg) !important;
  padding: 18px !important;
  margin-bottom: 16px !important;
}
.pxe-panel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.pxe-panel-title {
  font-family: var(--pxe-font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: var(--pxe-accent) !important;
}
.pxe-panel-actions { display: flex !important; gap: 8px !important; }

/* ===== 滑块 ===== */
.pxe-sliders {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 14px !important;
}
.pxe-slider-item label {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--pxe-muted) !important;
  margin-bottom: 6px !important;
  font-family: var(--pxe-font) !important;
}
.pxe-slider-item output {
  color: var(--pxe-accent) !important;
  font-family: var(--pxe-font-mono) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}
.pxe-slider-item input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 5px !important;
  background: var(--pxe-border) !important;
  border-radius: 3px !important;
  outline: none !important;
  cursor: pointer !important;
}
.pxe-slider-item input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 16px !important; height: 16px !important;
  border-radius: 50% !important;
  background: var(--pxe-accent) !important;
  border: 2px solid var(--pxe-bg) !important;
  cursor: pointer !important;
}
.pxe-slider-item input[type="range"]::-moz-range-thumb {
  width: 16px !important; height: 16px !important;
  border-radius: 50% !important;
  background: var(--pxe-accent) !important;
  border: 2px solid var(--pxe-bg) !important;
  cursor: pointer !important;
}

.pxe-slider-inline {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: var(--pxe-muted) !important;
  font-family: var(--pxe-font) !important;
}
.pxe-slider-inline input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 80px !important;
  height: 5px !important;
  background: var(--pxe-border) !important;
  border-radius: 3px !important;
  outline: none !important;
  cursor: pointer !important;
}
.pxe-slider-inline input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 14px !important; height: 14px !important;
  border-radius: 50% !important;
  background: var(--pxe-accent) !important;
  border: 2px solid var(--pxe-bg) !important;
  cursor: pointer !important;
}
.pxe-slider-inline input[type="range"]::-moz-range-thumb {
  width: 14px !important; height: 14px !important;
  border-radius: 50% !important;
  background: var(--pxe-accent) !important;
  border: 2px solid var(--pxe-bg) !important;
  cursor: pointer !important;
}
.pxe-slider-inline output {
  color: var(--pxe-accent) !important;
  font-family: var(--pxe-font-mono) !important;
  font-size: 12px !important;
}

/* ===== 显示区 ===== */
.pxe-display {
  display: flex !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}
@media (max-width: 768px) {
  .pxe-display { flex-direction: column !important; }
}
.pxe-canvas-col { flex: 1 !important; min-width: 0 !important; }
.pxe-canvas-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}
.pxe-label-tag {
  font-family: var(--pxe-font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
}
.pxe-label-accent { background: var(--pxe-accent) !important; color: #000 !important; }
.pxe-label-success { background: var(--pxe-success) !important; color: #000 !important; }
.pxe-size-tag {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  background: var(--pxe-card2) !important;
  color: var(--pxe-muted) !important;
  border: 1px solid var(--pxe-border) !important;
}

.pxe-canvas-wrap {
  background: #000 !important;
  border-radius: var(--pxe-radius) !important;
  overflow: hidden !important;
  position: relative !important;
  line-height: 0 !important;
  border: 1px solid var(--pxe-border) !important;
}
.pxe-canvas-checker {
  background: repeating-conic-gradient(#1a1a24 0% 25%, #111118 0% 50%) 0 0 / 16px 16px !important;
}
.pxe-canvas-wrap canvas {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  image-rendering: pixelated !important;
}

/* ===== 放大镜 ===== */
.pxe-magnifier {
  position: fixed !important;
  width: 170px !important;
  height: 170px !important;
  border-radius: 50% !important;
  border: 3px solid var(--pxe-accent) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 4px 20px rgba(0,0,0,0.5), 0 0 30px rgba(232,160,37,0.15) !important;
  pointer-events: none !important;
  display: none;
  overflow: hidden !important;
  z-index: 9990 !important;
  background: #000 !important;
}
.pxe-magnifier canvas { display: block !important; image-rendering: pixelated !important; }
.pxe-mag-info {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-family: var(--pxe-font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: rgba(0,0,0,0.75) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
}

.pxe-canvas-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 6px !important;
  padding: 6px 10px !important;
  background: var(--pxe-card) !important;
  border-radius: 6px !important;
  border: 1px solid var(--pxe-border) !important;
}
.pxe-mag-ctrl {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: var(--pxe-muted) !important;
  font-family: var(--pxe-font) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  cursor: default !important;
}
.pxe-mag-ctrl input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 70px !important;
  height: 4px !important;
  background: var(--pxe-border) !important;
  border-radius: 2px !important;
  outline: none !important;
  cursor: pointer !important;
}
.pxe-mag-ctrl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 14px !important; height: 14px !important;
  border-radius: 50% !important;
  background: var(--pxe-accent) !important;
  border: 2px solid var(--pxe-bg) !important;
  cursor: pointer !important;
}
.pxe-mag-ctrl input[type="range"]::-moz-range-thumb {
  width: 14px !important; height: 14px !important;
  border-radius: 50% !important;
  background: var(--pxe-accent) !important;
  border: 2px solid var(--pxe-bg) !important;
  cursor: pointer !important;
}
.pxe-mag-ctrl output {
  color: var(--pxe-accent) !important;
  font-family: var(--pxe-font-mono) !important;
  font-size: 12px !important;
  min-width: 14px !important;
  text-align: center !important;
}

.pxe-color-info {
  margin-top: 8px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  color: var(--pxe-muted) !important;
  background: var(--pxe-card) !important;
  border-radius: 6px !important;
  border: 1px solid var(--pxe-border) !important;
  font-family: var(--pxe-font) !important;
}
.pxe-color-info .pxe-swatch {
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !important;
  border: 2px solid var(--pxe-border) !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
}

/* ===== 预览区 ===== */
.pxe-preview-box {
  padding: 16px !important;
  background: var(--pxe-bg) !important;
  border: 1px solid var(--pxe-border) !important;
  border-radius: var(--pxe-radius) !important;
  overflow: auto !important;
  max-height: 400px !important;
  line-height: 0 !important;
}
.pxe-pixel-grid {
  display: inline-grid !important;
  gap: 0 !important;
  line-height: 0 !important;
  image-rendering: pixelated !important;
}
.pxe-pixel-grid .pxe-px { display: block !important; }

/* ===== 导出区 ===== */
.pxe-export-btns {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}
.pxe-output {
  width: 100% !important;
  min-height: 120px !important;
  max-height: 300px !important;
  padding: 12px !important;
  background: var(--pxe-bg) !important;
  color: var(--pxe-success) !important;
  border: 1px solid var(--pxe-border) !important;
  border-radius: var(--pxe-radius) !important;
  font-family: var(--pxe-font-mono) !important;
  font-size: 12px !important;
  resize: vertical !important;
  outline: none !important;
  line-height: 1.5 !important;
}

.pxe-text-success { color: var(--pxe-success) !important; }
.pxe-text-info { color: var(--pxe-info) !important; }

/* ===== Toast ===== */
.pxe-toast-box {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  pointer-events: none !important;
}
.pxe-toast {
  padding: 10px 18px !important;
  border-radius: var(--pxe-radius) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #fff !important;
  font-family: var(--pxe-font) !important;
  animation: pxe-toast-in 0.3s ease !important;
  transition: opacity 0.3s, transform 0.3s !important;
  pointer-events: auto !important;
}
.pxe-toast-success { background: rgba(45, 212, 160, 0.92) !important; }
.pxe-toast-error { background: rgba(239, 68, 68, 0.92) !important; }
.pxe-toast-info { background: rgba(78, 168, 222, 0.92) !important; }
@keyframes pxe-toast-in {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

.pxe-spinner {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid var(--pxe-border) !important;
  border-top-color: var(--pxe-accent) !important;
  border-radius: 50% !important;
  animation: pxe-spin 0.6s linear infinite !important;
}
@keyframes pxe-spin { to { transform: rotate(360deg); } }

/* ===================================================
   隐藏类 —— 必须放最后，双 class 提高特异性确保不被覆盖
   =================================================== */
.pxe-hidden.pxe-hidden { display: none !important; }