/* ===== 皮肤：背景图 + 遮罩 ===== */
body { --skin-bg: none; --skin-veil: .32; --skin-veil-c: 255,255,255; }
body[data-skin-bg] { background-image: var(--skin-bg); background-size: cover;
  background-position: center; background-attachment: fixed; background-repeat: no-repeat; }
body[data-skin-bg]::before { content: ""; position: fixed; inset: 0; z-index: -1;
  background: rgba(var(--skin-veil-c), var(--skin-veil)); pointer-events: none; }
:root[data-theme="midnight"] body[data-skin-bg] { --skin-veil-c: 0,0,0; --skin-veil: .45; }

#skin-btn { position: fixed; right: 18px; bottom: 18px; width: 46px; height: 46px;
  border: 0; border-radius: 50%; background: var(--grad); color: #fff; font-size: 20px;
  cursor: pointer; z-index: 9000; box-shadow: var(--shadow-m);
  display: flex; align-items: center; justify-content: center; }
#skin-panel { position: fixed; right: 18px; bottom: 74px; width: 300px; max-height: 62vh;
  overflow-y: auto; padding: 14px; border-radius: 14px; background: var(--panel-solid);
  border: 1px solid var(--border); box-shadow: var(--shadow-l); z-index: 9001; display: none; }
#skin-panel.on { display: block; }
#skin-panel h4 { margin: 0 0 10px; font-size: 14px; }
.skin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.skin-item { padding: 8px 4px; border: 1px solid var(--border); border-radius: 10px;
  text-align: center; cursor: pointer; font-size: 11px; background: var(--bg); }
.skin-item:hover { border-color: var(--primary); }
.skin-item.on { border: 2px solid var(--primary); font-weight: 700; }
.skin-sw { height: 26px; border-radius: 6px; margin-bottom: 5px; }
.skin-bg { height: 46px; border-radius: 6px; margin-bottom: 5px;
  background-size: cover; background-position: center; }
.skin-sec { margin-top: 12px; font-size: 12px; color: var(--text-2); }