/* ===== 主题框架（皮肤切换，skin-controlled） ===== */

/* 默认（无 data-skin 时）兜底为浅色 */
:root {
  --page-bg: #ffffff; --panel-bg: #ffffff; --border: #d0d7de;
  --fg: #1f2328; --fg-muted: #57606a; --link: #0969da;
  --bar-bg: #ffffff; --hover-bg: #fafbfd;
}

html, body { margin: 0; padding: 0; background: var(--page-bg); color: var(--fg); }

.bar {
  position: sticky; top: 0; z-index: 10;
  background: var(--bar-bg); border-bottom: 1px solid var(--border);
  padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.bar a { color: var(--link); text-decoration: none; white-space: nowrap; }
.bar a:hover { text-decoration: underline; }
.path { color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp { flex: 1; }

.meta {
  max-width: 980px; margin: 12px auto 0; padding: 0 16px;
  font-size: 12px; color: var(--fg-muted); text-align: right;
  font-family: -apple-system, sans-serif;
}
.wrap { max-width: 980px; margin: 0 auto; padding: 20px 16px 80px; }
.markdown-body {
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 32px 40px; box-sizing: border-box;
}

/* 皮肤切换器：下拉 + 网格 */
.skin-wrap { position: relative; }
.skin-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--hover-bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer;
  color: var(--fg-muted); font-family: inherit; line-height: 1.4;
}
.skin-btn:hover { color: var(--fg); }
.skin-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px; min-width: 180px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); display: none;
}
.skin-menu.open { display: block; }
.skin-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: none; background: transparent; cursor: pointer;
  border-radius: 7px; color: var(--fg); font-size: 13px; font-family: inherit; text-align: left;
}
.skin-item:hover { background: var(--hover-bg); }
.skin-item[aria-current="true"] { background: color-mix(in srgb, var(--link) 14%, transparent); }
.skin-swatch { width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; border: 1px solid var(--border); }
.skin-name { flex: 1; }

@media (max-width: 700px) {
  .markdown-body { padding: 16px 14px; }
  .bar { font-size: 13px; flex-wrap: wrap; }
  .path { display: none; }
}
@media print {
  html, body { background: #fff; }
  .bar { display: none; }
}