/* ============================================================================
 * 主题设置页样式（Theme Settings）
 * ----------------------------------------------------------------------------
 * 【为什么单独一个 CSS 文件而不是塞进 components.css】
 * components.css 是"所有插件共用的组件库"。主题页是**可选模块**，它的样式
 * 应该跟随模块一起被移除。放在自己目录里，模块被删掉时不会留一堆死样式。
 *
 * 【本文件只写"主题页自己的控件"，不写任何颜色主题】
 * 所有颜色都走 var(--c-*)，因此天然跟随用户选的主题，不需要额外联动代码。
 * 唯一硬编码的是色环色块的 `hsl()` —— 那是"候选色的展示"，本来就该是它本身。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 色环
 * ------------------------------------------------------------------------- */
.theme-wheel-wrap {
  display: grid;
  grid-template-columns: 280px minmax(0, 540px);
  gap: var(--sp-5);
  align-items: center;
  margin-top: var(--sp-3);
}
.theme-glass-notice { margin-bottom: var(--sp-3); }
.theme-glass-notice[hidden] { display: none; }

.theme-wheel {
  width: 260px;
  height: 260px;
  justify-self: center;
  overflow: visible;
}

/* 中心预览圆：显示当前主色 + "Aa" 字样，让用户直接看到主色压白字的效果 */
.theme-wheel__hub {
  transition: fill .18s ease;
}
.theme-wheel__hub-text {
  font-size: 26px;
  font-weight: 700;
  fill: #fff;
  pointer-events: none;
  /* 主色深浅差异大，加描边保证任何主题下"锚点字样"都看得见 */
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .18);
  stroke-width: 1.4px;
}

/* 候选色块。halo 是"未选中的描边底"，避免色块直接压在虚线环上显得脏 */
.theme-dot {
  cursor: pointer;
}
.theme-dot__halo {
  fill: var(--c-panel);
  stroke: var(--c-line);
  stroke-width: 2;
  transition: stroke .15s ease, stroke-width .15s ease;
}
.theme-dot__fill {
  transition: r .15s ease;
}
/* 选中态三重表达：外圈描边加粗 + 放大 + 对勾。
   只靠颜色区分选中项对色觉障碍用户不友好，所以必须有形状差异。 */
.theme-dot__check {
  fill: #fff;
  font-size: 15px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .22);
  stroke-width: 1.2px;
}
.theme-dot.is-selected .theme-dot__halo {
  stroke: var(--c-accent);
  stroke-width: 4;
}
.theme-dot.is-selected .theme-dot__fill {
  r: 17;
}
.theme-dot.is-selected .theme-dot__check {
  opacity: 1;
}
.theme-dot:hover .theme-dot__halo,
.theme-dot:focus-visible .theme-dot__halo {
  stroke: var(--c-accent);
  stroke-width: 3;
}
.theme-dot:focus-visible {
  outline: none;
}

/* ---------------------------------------------------------------------------
 * 文字色块行
 * ------------------------------------------------------------------------- */
.theme-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  min-width: 0;
}

.theme-swatch {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-panel);
  color: var(--c-text-2);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.theme-swatch:hover { background: var(--c-panel-2); }
.theme-swatch.is-on {
  background: var(--c-accent-soft);
  color: var(--c-text);
  font-weight: 700;
}
.theme-swatch__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--swatch-color);
  flex: 0 0 auto;
  /* 浅色块压在浅底上会"消失"，加一圈内描边保证边界可见 */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.theme-swatch__label { white-space: nowrap; }

/* ---------------------------------------------------------------------------
 * 玻璃程度滑杆
 * ------------------------------------------------------------------------- */
.theme-slider-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.theme-range {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  accent-color: var(--c-accent);
  cursor: pointer;
}

.theme-slider-value {
  flex: 0 0 auto;
  min-width: 150px;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.theme-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.theme-tick {
  min-height: 36px;
  padding: 5px 12px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-panel);
  color: var(--c-text-2);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.theme-tick:hover { background: var(--c-panel-2); }
.theme-tick.is-on {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: #fff;
  font-weight: 700;
}

/* A small, self-contained demonstration keeps the Glass slider understandable
   without making data cards or tables translucent. */
.theme-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 176px;
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(125deg, #dbe8ef 0%, #e3e4ec 48%, #eadfdf 100%);
}
.theme-showcase::before,
.theme-showcase::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.theme-showcase::before {
  width: 260px;
  height: 260px;
  left: 9%;
  top: -100px;
  background: color-mix(in srgb, var(--c-accent) 42%, #fff);
}
.theme-showcase::after {
  width: 190px;
  height: 190px;
  right: 8%;
  bottom: -100px;
  background: #d6adbf;
}
.theme-showcase__pane {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  max-width: 520px;
  min-height: 142px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  color: var(--c-text);
}
.theme-showcase__eyebrow {
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
}
.theme-showcase__title { font-size: var(--fs-lg); }
.theme-showcase__copy { color: var(--c-text-2); font-size: var(--fs-sm); }
.theme-showcase__action {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-top: 2px;
  padding: 3px 11px;
  border-radius: var(--radius-sm);
  background: var(--c-accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * 当前主题数据
 * ------------------------------------------------------------------------- */
.theme-info { margin-top: var(--sp-2); }
.theme-info__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-2) var(--sp-4);
}
.theme-info__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 7px 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: var(--fs-sm);
}
.theme-info__label { color: var(--c-muted); }
.theme-info__value {
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}
/* 达标/不达标用"颜色 + 前缀符号"双通道表达，不单靠颜色 */
.theme-info__value.is-ok { color: var(--c-ok); }
.theme-info__value.is-ok::before { content: '✓ '; }
.theme-info__value.is-bad { color: var(--c-danger); font-weight: 700; }
.theme-info__value.is-bad::before { content: '✕ '; }

/* ---------------------------------------------------------------------------
 * 窄屏
 * ------------------------------------------------------------------------- */
@media (max-width: 650px) {
  .theme-wheel-wrap { grid-template-columns: minmax(0, 1fr); }
  .theme-wheel { width: 220px; height: 220px; }
  .theme-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-slider-value { min-width: 0; }
  .theme-slider-row { flex-direction: column; align-items: stretch; }
  .theme-tick { min-height: 44px; }
  .theme-showcase { padding: var(--sp-3); }
}
/* V1.10: a compact editor beside an honest, theme-aware preview. */
.theme-view { max-width: 1220px; }
.theme-layout { display: grid; grid-template-columns: minmax(370px, 1.05fr) minmax(330px, .95fr);
  gap: 24px; align-items: start; }
.theme-controls { min-width: 0; }
.theme-controls .card { padding: 24px; }
.theme-wheel-wrap { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
.theme-wheel { width: 194px; height: 194px; }
.theme-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.theme-swatch { min-height: 42px; padding: 7px 9px; }
.theme-swatch__dot { width: 16px; height: 16px; }
.theme-slider-row { flex-wrap: wrap; }
.theme-slider-value { min-width: 100px; }
.theme-ticks { gap: 6px; }
.theme-tick { padding-inline: 12px; }
.theme-live { position: sticky; top: 82px; min-width: 0; }
.theme-live__heading { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 12px; padding: 0 4px; }
.theme-showcase { margin-top: 0; padding: 20px; min-height: 410px;
  background: var(--c-accent-soft); border-color: var(--c-line); border-radius: 24px;
  box-shadow: var(--shadow); }
.theme-showcase::before, .theme-showcase::after { content: none; }
.theme-demo-aura { position: absolute; width: 240px; height: 240px; border-radius: 50%;
  background: var(--c-accent); opacity: .3; top: -100px; left: 26%; }
.theme-showcase__pane { min-height: 56px; padding: 14px 16px; gap: 10px; border-radius: 15px;
  flex-direction: row; align-items: center; width: 100%; }
.theme-showcase__pane .ui-icon { color: var(--c-accent); }
.theme-demo-status { font-size: 11px; margin-left: auto; color: var(--c-ok); white-space: nowrap; }
.theme-demo-content { position: relative; z-index: 1; padding: 30px 5px 8px; }
.theme-demo-kicker { font-size: 11px; color: var(--c-accent); letter-spacing: .1em; }
.theme-demo-content h3 { font-size: 21px; margin: 8px 0; line-height: 1.6; letter-spacing: -.04em; }
.theme-demo-content p { font-size: 12px; color: var(--c-muted); }
.theme-demo-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 12px; }
.theme-demo-stats > div { background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: 14px; padding: 14px 16px; }
.theme-demo-stats small { display: block; color: var(--c-muted); font-size: 12px; }
.theme-demo-stats strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.theme-demo-pigeon { display: flex; align-items: center; gap: 10px; background: var(--c-panel);
  border: 1px solid var(--c-line); border-radius: 14px; padding: 12px; }
.theme-demo-pigeon > div { min-width: 0; flex: 1; }
.theme-demo-pigeon strong { display: block; font-size: 11px; font-family: var(--font-mono); overflow-wrap: anywhere; }
.theme-demo-pigeon small { display: block; font-size: 11px; color: var(--c-muted); margin-top: 4px; }
.theme-demo-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 11px;
  background: var(--c-accent-soft); color: var(--c-accent); }
.theme-showcase__action { min-height: 40px; margin-top: 20px; padding: 8px 16px; font-size: 12px; }
.theme-live__caption { color: var(--c-muted); font-size: 12px; margin: 12px 4px 0; }
.theme-diagnostics { margin-top: 8px; }
.theme-diagnostics summary { cursor: pointer; color: var(--c-muted); font-size: var(--fs-sm); }
.theme-diagnostics[open] summary { margin-bottom: 16px; }
@media (max-width: 1200px) {
  .theme-wheel-wrap { grid-template-columns: minmax(0, 1fr); }
  .theme-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .theme-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .theme-live { position: static; margin: 8px 0 24px; }
  .theme-wheel-wrap { grid-template-columns: 200px minmax(0, 1fr); }
  .theme-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .theme-controls .card { padding: 18px; }
  .theme-wheel-wrap { grid-template-columns: minmax(0, 1fr); }
  .theme-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .theme-swatch { flex-direction: column; gap: 6px; font-size: 12px; }
  .theme-info__grid { grid-template-columns: minmax(0, 1fr); }
  .theme-showcase { padding: 16px; }
}
body.simple-mode .theme-swatch { min-height: 48px; font-size: var(--fs-sm); }
body.simple-mode .theme-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.simple-mode .theme-live__caption { font-size: var(--fs-sm); }