/* 壁纸切换 + 云端同步 */
#web_bg { background-attachment: fixed !important; background-image: url(/img/p1.jpg) !important; }
#web_bg:before { background-color: rgba(0,0,0,0.25) !important; }
[data-theme='dark'] #web_bg:before { background-color: rgba(0,0,0,0.45) !important; }
/* 让页头/页脚透明，露出壁纸（去掉原本浮在背景上的那张默认图） */
#page-header, #footer { background-color: transparent !important; background-image: none !important; }
/* 页头遮罩浓度可用变量调节（设置面板里拖动滑块即时生效） */
#page-header:not(.not-top-img):before { background-color: rgba(0,0,0, var(--header-mask, 0.35)) !important; }
[data-theme='dark'] #page-header:not(.not-top-img):before { background-color: rgba(0,0,0, var(--header-mask-dark, 0.55)) !important; }
/* 遮罩浓度拉到 0 时，直接移除 :before 叠加层，确保页头完全透明 */
#page-header.no-mask:before { display: none !important; }
/* 页脚遮罩浓度与页头同步：拉滑块时蓝底/透明底一起变暗；0% 时移除叠加层 */
#footer:before { background-color: rgba(0,0,0, var(--header-mask, 0.35)) !important; }
#footer.no-mask:before { display: none !important; }
/* 保留页脚蓝底时恢复 */
body.keep-footer #footer { background-color: #49b1f5 !important; }
#wp-btn i { font-size: 18px; }
.wp-panel, .ap-panel { position: fixed; right: 22px; bottom: 112px; z-index: 9999; width: 284px; max-height: 72vh; overflow-y: auto;
  background: rgba(20,20,22,0.92); color: #eee; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.45);
  padding: 14px 16px; font-size: 13px; line-height: 1.6; display: none; backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.08); }
.wp-panel.wp-open { display: block; }
.wp-panel h4 { margin: 0 0 10px; font-size: 14px; color: #fff; }
.wp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.wp-thumb { width: 100%; height: 42px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; }
.wp-thumb:hover, .wp-thumb.wp-active { border-color: #4da3ff; }
.wp-row { display: flex; gap: 6px; margin: 6px 0; }
.wp-row input { flex: 1; min-width: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: #fff; border-radius: 6px; padding: 6px 8px; font-size: 12px; }
.wp-row button, .wp-btn2 { background: #4da3ff; color: #fff; border: 0; border-radius: 6px; padding: 6px 10px;
  cursor: pointer; font-size: 12px; white-space: nowrap; }
.wp-hr { border: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 12px 0; }
.wp-note { font-size: 11px; color: #9aa; margin: 6px 0; }
.wp-status { font-size: 12px; color: #7fd17f; min-height: 16px; margin-top: 6px; word-break: break-all; }
#ap-btn i { font-size: 18px; }
.ap-sec { margin: 10px 0 4px; font-size: 12px; color: #cdd; }
.ap-val { float: right; color: #4da3ff; font-weight: 600; }
.ap-slider { width: 100%; margin: 6px 0 2px; accent-color: #4da3ff; }
.ap-presets, .ap-seg { display: flex; gap: 6px; margin: 8px 0; }
.ap-presets button, .ap-seg button { flex: 1; background: rgba(255,255,255,.08); color: #eee; border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; padding: 6px 8px; cursor: pointer; font-size: 12px; }
.ap-presets button:hover, .ap-seg button:hover { background: rgba(255,255,255,.16); }
.ap-seg button.ap-on { background: #4da3ff; color: #fff; border-color: #4da3ff; }