/* ============================================================
   appearance.css — 外观设置面板（#ap-pop）
   ------------------------------------------------------------
   入口按钮是 #theme-toggle（与「登录」并排；站点级设置只留这一个入口）。
   ⚠️ HELIX 皮肤（helix.html / index.html）不加载 appearance.js——它用 el.style.setProperty
   往 :root 写内联变量，会压过皮肤令牌（night.html 教训），故本面板在 HELIX 下不启用；
   HELIX 的亮暗走 <head> 的 data-theme + 设置面板 #hx-theme-seg（键 pxgf.helix-theme.v1）。
   面板用 fixed 定位 + JS 摆放：入口在侧栏时贴侧栏右缘、底部对齐；否则落在按钮正下方。
   全部色值走站点 token（--surface / --border / --text / --icon-bg），
   亮暗自动跟随，不写死颜色。
   ============================================================ */

#ap-pop {
  position: fixed;
  z-index: 90;
  width: 272px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
  color: var(--text);
  font-size: var(--hx-t13);
  line-height: 1.5;
}

#ap-pop .ap-sec + .ap-sec {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

/* 小节标题 + 右侧用途说明 */
#ap-pop .ap-lab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: var(--hx-t11-5);
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0.2px;
}
#ap-pop .ap-sub { font-size: var(--hx-t11); font-weight: 400; color: var(--text-3); }

/* ---------- 亮 / 暗 分段 ----------
   圆角口径（全站 tab/分段统一）：内部块圆角 = 外框圆角 − 边框 − 内边距（同心内缩）。
   外框 6px + 1px 边框 + 2px 内边距 → 内部块 3px（明显小于外框）。
   ⚠️ 不能用 overflow:hidden 裁切：外框 6px 弧会把子项自己的 3px 圆角切没，
   视觉上又变成「内部圆角 = 外框圆角」，正是要避免的情况。 */
#ap-pop .ap-seg {
  display: flex;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
}
#ap-pop .ap-seg-b {
  flex: 1;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: max(0px, var(--r-btn) - 3px);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--hx-t12-5);
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
#ap-pop .ap-seg-b + .ap-seg-b { border-left: 1px solid var(--border); }
#ap-pop .ap-seg-b:hover { background: var(--icon-bg); color: var(--text); }
#ap-pop .ap-seg-b.on { background: var(--text); color: var(--bg); font-weight: 600; }

/* ---------- 主题色色块 ----------
   与图标工坊 #ic-color-pop 同一套：22px 方角块 + 5px 圆角 + hover 放大 1.15。
   不再用圆形色球——两处取色器长得不一样，用户会以为功能也不同。 */
#ap-pop .ap-swatches {
  display: grid;
  grid-template-columns: repeat(9, 22px);
  justify-content: space-between;
}
#ap-pop .ap-sw {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--sw);
  cursor: pointer;
  transition: transform 0.1s var(--ease);
}
#ap-pop .ap-sw:hover { transform: scale(1.15); z-index: 1; }
/* 选中环：贴着色块外侧的 1.5px 细环（亮色主题深色环、暗色主题白环），外侧一层淡阴影把它托起来。
   旧写法是「2px 面板底缝隙 + 3.5px 文字色」的双层环，暗色下整颗看起来像多了一枚白色色块。 */
#ap-pop .ap-sw.on {
  position: relative; z-index: 2;
  box-shadow: 0 0 0 1.5px var(--text), 0 2px 6px rgba(0, 0, 0, 0.22);
}

/* 自定义入口：用低饱和色相环（与 8 个预设同族色相），不用高饱和彩虹 */
#ap-pop .ap-custom {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  background: conic-gradient(from 0deg,
    #a54c57, #a6663d, #938948, #4f8563, #3e6a8b, #3e5b8d, #765c96, #a54c57);
}
#ap-pop .ap-custom:hover { transform: scale(1.15); z-index: 1; }
#ap-pop .ap-custom.on {
  position: relative; z-index: 2;
  box-shadow: 0 0 0 1.5px var(--text), 0 2px 6px rgba(0, 0, 0, 0.22);
}

/* ---------- 无级取色（同图标工坊：SV 方块 + 色相条 + hex） ----------
   默认收起：常驻会把面板顶到 550px 以上，像取色工具而不像设置面板。 */
#ap-pop .ap-picker { margin-top: 10px; }
#ap-pop .ap-picker[hidden] { display: none; }
#ap-pop .ap-sv {
  position: relative;
  height: 148px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: crosshair;
  touch-action: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0), #000),
    linear-gradient(to right, #fff, rgba(255, 255, 255, 0)),
    hsl(var(--sv-h, 0) 100% 50%);
}
#ap-pop .ap-sv-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
}
#ap-pop .ap-hue {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  margin: 9px 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: linear-gradient(to right, #ff0000, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000);
  outline: 0;
  cursor: pointer;
}
#ap-pop .ap-hue::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
}
#ap-pop .ap-hue::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* hex 直填：和工坊一样放在取色区底部，不必再反复点色块微调 */
#ap-pop .ap-hexrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}
#ap-pop .ap-hex-t { flex: 0 0 auto; font-size: var(--hx-t11-5); color: var(--text-3); }
#ap-pop .ap-hex {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  color: var(--text);
  font: inherit;
  font-size: var(--hx-t12-5);
  font-variant-numeric: tabular-nums;
}
/* 输入框聚焦＝中性灰（全站统一，不是强调色） */
#ap-pop .ap-hex:focus {
  outline: 0;
  border-color: var(--text-3);
  box-shadow: 0 0 0 3px var(--overlay-dim);
}

/* ---------- 辅助色方案 ---------- */
#ap-pop .ap-schemes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
#ap-pop .ap-scheme {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  color: var(--text-2);
  font-size: var(--hx-t12);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s var(--ease), background 0.12s var(--ease), color 0.12s var(--ease);
}
#ap-pop .ap-scheme:hover { border-color: var(--border-strong); color: var(--text); }
#ap-pop .ap-scheme.on {
  border-color: var(--text);
  background: var(--icon-bg);
  color: var(--text);
  font-weight: 600;
}
#ap-pop .ap-dots { display: inline-flex; gap: 2px; flex: none; }
#ap-pop .ap-dots i { display: block; width: 9px; height: 9px; border-radius: 50%; }
#ap-pop .ap-scheme-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 实时预览（实心点 / 软底 / 文字色三档同框） ---------- */
#ap-pop .ap-prev {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--accent-soft-bg);
  border: 1px solid var(--accent-soft-border);
  border-radius: 8px;
}
#ap-pop .ap-prev-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}
#ap-pop .ap-prev-txt {
  flex: 1;
  min-width: 0;
  font-size: var(--hx-t11-5);
  color: var(--accent-text);
}
#ap-pop .ap-prev-badge {
  flex: none;
  padding: 1px 6px;
  font-size: var(--hx-t11);
  line-height: calc(16px * var(--hx-fsk, 1));
  border-radius: 4px;
  background: var(--surface);
  color: var(--accent-text);
  border: 1px solid var(--accent-soft-border);
}

/* ---------- 底部 ---------- */
#ap-pop .ap-foot {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  text-align: right;
}
#ap-pop .ap-reset {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--text-3);
  font-size: var(--hx-t12);
  cursor: pointer;
  transition: color 0.12s var(--ease), border-color 0.12s var(--ease);
}
#ap-pop .ap-reset:hover { color: var(--text); border-color: var(--border-strong); }

/* 窄屏：面板贴边不溢出 */
@media (max-width: 420px) {
  #ap-pop { width: calc(100vw - 16px); }
}