/* preview.css — 通用预览页版式
   一份骨架，228 个风格共用；颜色/字体/圆角全部来自 themes/{slug}.css。
   所以同一个页面在不同 ?style= 下只有「皮」不同，内容完全一致。
   和旧 previews/{slug}.css 的区别：那些是 28 份手写样式，这里是 1 份 + 228 个主题。 */

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page-bg, #fff);
    background-image: var(--page-bg-gradient, none);
    color: var(--text-color, #1a1a1a);
    font-family: var(--base-font, system-ui, sans-serif);
    line-height: 1.6;
}

.pv-wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; }

.pv-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 0; border-bottom: 1px solid var(--border-color, rgba(0,0,0,.12));
}
.pv-brand { font-family: var(--heading-font, inherit); font-size: 15px; letter-spacing: -.01em; color: var(--heading-color, inherit); }
.pv-links { display: flex; gap: 18px; font-size: 13px; }
.pv-links a { color: var(--text-color, inherit); text-decoration: none; opacity: .72; }
.pv-links a:hover { opacity: 1; color: var(--link-color, inherit); }

.pv-hero { padding: 56px 0 40px; }
.pv-eyebrow {
    margin: 0 0 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--link-color, inherit);
}
.pv-hero h1 {
    margin: 0 0 16px; max-width: 18ch;
    font-family: var(--heading-font, inherit); font-size: 40px; line-height: 1.08; letter-spacing: -.025em;
    color: var(--heading-color, inherit);
}
.pv-lede { margin: 0 0 26px; max-width: 56ch; font-size: 15px; opacity: .82; }
.pv-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.pv-btn {
    display: inline-block; padding: 11px 20px; font-size: 13px; text-decoration: none;
    color: var(--button-text-color, #fff); background: var(--button-bg, #111);
    border: var(--button-border, none); border-radius: var(--button-border-radius, 6px);
}
.pv-btn-ghost {
    background: transparent; color: var(--text-color, inherit);
    border: 1px solid var(--border-color, rgba(0,0,0,.2)); border-radius: var(--button-border-radius, 6px);
}

.pv-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
    padding: 8px 0 48px;
}
.pv-card {
    padding: 20px 18px; background: var(--card-bg, rgba(0,0,0,.02));
    border: 1px solid var(--border-color, rgba(0,0,0,.1));
    border-radius: var(--card-border-radius, 8px); box-shadow: var(--card-shadow, none);
}
.pv-card b { display: block; margin-bottom: 8px; font-family: var(--heading-font, inherit); font-size: 15px; color: var(--heading-color, inherit); }
.pv-card p { margin: 0; font-size: 13px; line-height: 1.55; opacity: .78; }
.pv-num { display: block; margin-bottom: 10px; font-size: 11px; letter-spacing: .1em; opacity: .45; }

.pv-quote {
    margin: 0 0 48px; padding: 26px 0; border-top: 1px solid var(--border-color, rgba(0,0,0,.12));
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,.12));
}
.pv-quote p {
    margin: 0; font-family: var(--heading-font, inherit); font-size: 21px; line-height: 1.35;
    letter-spacing: -.015em; color: var(--heading-color, inherit);
}
.pv-quote cite { display: block; margin-top: 12px; font-size: 12px; font-style: normal; opacity: .55; }

.pv-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    padding: 28px 24px; margin-bottom: 48px;
    background: var(--prompt-bg, var(--card-bg, rgba(0,0,0,.03)));
    border-radius: var(--card-border-radius, 10px);
}
.pv-cta h2 { margin: 0; font-family: var(--heading-font, inherit); font-size: 20px; letter-spacing: -.02em; color: var(--heading-color, inherit); }

.pv-foot {
    padding: 20px 0 28px; border-top: 1px solid var(--border-color, rgba(0,0,0,.12));
    font-size: 12px; opacity: .55;
}

@media (max-width: 720px) {
    .pv-hero h1 { font-size: 30px; }
    .pv-grid { grid-template-columns: 1fr; }
    .pv-links { display: none; }
}

/* style.css 里有全局 header / footer 规则（深色横条、居中、3rem 外边距）。
   预览页要的是贴着内容的一条细边，所以在这里把继承来的那一层压掉。 */
.pv-nav, .pv-foot {
    background: none;
    color: inherit;
    text-align: left;
    box-shadow: none;
    margin: 0;
}
.pv-nav { padding: 18px 0; }
.pv-foot { padding: 20px 0 28px; font-size: 12px; }