/* 排版皮肤选择弹窗样式：骨架照抄 deterministic_demo/index.html:61-83 的 .skin-* 规则；
   2026-08-02 起按钮统一改用主界面 .btn/.btn-sm/.btn-primary 体系（见 style.css 按钮节），此处不再单独定义按钮外观 */
.skin-mask { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 90; }
.skin-mask.show { display: block; }
.skin-modal { display: none; position: fixed; top: 4vh; left: 50%; transform: translateX(-50%); width: min(1400px, 96vw); height: 88vh; max-height: 88vh; background: #f5f6f8; border-radius: 12px; z-index: 91; flex-direction: column; overflow: hidden; box-shadow: 0 12px 48px rgba(0,0,0,.25); }
.skin-modal.show { display: flex; }
.skin-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: #fff; border-bottom: 1px solid #eceef1; flex-wrap: wrap; row-gap: 8px; }
.skin-head h3 { font-size: 15px; color: #1f2329; }
.skin-head .tip { font-size: 12px; color: #8a9099; flex: 1; }
.skin-body { overflow-y: auto; padding: 6px 20px 20px; }
.skin-sec { padding: 14px 0 6px; display: flex; align-items: baseline; gap: 10px; }
.skin-sec h4 { margin: 0; font-size: 14px; color: #1f2329; }
.skin-sec .n { color: #8a9099; font-size: 12px; }
.skin-sec .clear { margin-left: auto; }  /* 外观由 .btn .btn-sm 提供，这里只负责右对齐 */
.skin-sec .line { flex: 1; border-top: 2px solid #e5e8ec; }
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 6px 0 14px; }
.skin-card { position: relative; background: #fff; border: 2px solid #eceef1; border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.skin-card:hover { border-color: #9bb8dd; }
.skin-card.sel { border-color: #2b5ea7; box-shadow: 0 0 0 2px rgba(43,94,167,.18); }
.skin-card.sel::after { content: "✓ 已选"; position: absolute; top: 8px; right: 8px; background: #2b5ea7; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.skin-card .pv { padding: 14px 12px; min-height: 80px; display: flex; align-items: center; justify-content: center; background: #fafbfc; border-bottom: 1px solid #f0f2f5; overflow: hidden; }
.skin-card .pv.pv-col { flex-direction: column; align-items: stretch; }  /* 多块预览（结尾=作者卡+CTA卡、历史文章=多条）上下排列 */
.skin-card .pv > section { max-width: 100%; }
.skin-card .meta { padding: 7px 10px; font-size: 12px; color: #8a9099; }
.skin-card .meta .sid { color: #5b6573; font-weight: 600; margin-right: 6px; }

/* 一期双栏：左选择区 + 右整文预览区 */
.skin-main { display: flex; flex: 1; min-height: 0; }
.skin-main .skin-body { flex: 1; min-width: 0; }
.skin-preview { width: 420px; flex: none; background: #e9ebef; border-left: 1px solid #e0e3e8; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.skin-preview iframe { width: 375px; height: 92%; background: #fff; border: none; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.skin-empty { grid-column: 1 / -1; padding: 22px 0; text-align: center; color: #a8aeb6; font-size: 13px; background: #fafbfc; border: 1px dashed #e0e3e8; border-radius: 10px; }
@media (max-width: 1100px) { .skin-preview { display: none; } }