/* ════════════════════════════════════════════════════════════════════════
PSC Theme — Main Stylesheet
Design: Legal Navy B2 · DM Sans 500wt · DM Mono · Heroicons
════════════════════════════════════════════════════════════════════════ */
/* ── Design Tokens ───────────────────────────────────────────────────── */
:root {
/* Brand palette — Legal Navy B2 */
--psc-brand: #1B3F6E;
--psc-brand-hover: #152f55;
--psc-brand-soft: #e5ecf5;
--psc-navy: #1B3F6E;
--psc-gold: #C8962A;
--psc-accent-gold: #C8962A;
--psc-teal: #2C7A5F;
--psc-error: #dc2626;
--psc-success: #16a34a;
/* Text */
--psc-text-primary: #0f1a2e;
--psc-text-base: #1e2d3d;
--psc-text-secondary: #4a6080;
--psc-text-muted: #7a92a8;
/* Backgrounds */
--psc-bg-base: #ffffff;
--psc-bg-elevated: #ffffff;
--psc-bg-card: #ffffff;
--psc-bg-muted: #f4f7fa;
--psc-bg-subtle: #eef2f7;
/* Borders */
--psc-border-base: #cfd8e3;
--psc-border-subtle: #e4eaf0;
/* Spacing */
--psc-space-xs: 4px;
--psc-space-sm: 8px;
--psc-space-md: 16px;
--psc-space-lg: 24px;
--psc-space-xl: 48px;
--psc-space-2xl: 80px;
/* Radii */
--psc-radius-sm: 6px;
--psc-radius-md: 10px;
--psc-radius-lg: 16px;
--psc-radius-xl: 24px;
/* Shadows */
--psc-shadow-sm: 0 1px 3px rgba(15,26,46,.07);
--psc-shadow-md: 0 4px 16px rgba(15,26,46,.10);
--psc-shadow-lg: 0 8px 32px rgba(15,26,46,.13);
/* Typography */
--psc-font-sans: 'DM Sans', system-ui, -apple-system, 'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei', 'Malgun Gothic', sans-serif;
/* DM Mono 仅含拉丁字符；CJK 字符回退到各系统的无衬线字体（避免回退到难看的系统等宽字体）*/
--psc-font-mono: 'DM Mono', 'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei', 'Malgun Gothic', 'Courier New', monospace;
/* Transition */
--psc-transition: 150ms ease;
}
/* ── Reset / base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0; font-family: var(--psc-font-sans);
background: var(--psc-bg-base); color: var(--psc-text-base);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
/* ── Layout helpers ──────────────────────────────────────────────────── */
.psc-container { max-width: 1200px; margin-inline: auto; padding-inline: var(--psc-space-lg); }
.psc-section { padding-block: var(--psc-space-xl); }
.psc-section--tight-top { padding-top: 0; } /* 紧贴上方 section（如 Lawyer CTA 接计算结果）*/
.psc-section--tight-bottom { padding-bottom: 0; } /* 紧贴下方 */
.psc-main { min-height: 60vh; }
/* 锚点跳转补偿 sticky header（.psc-nav 高 60px + 留 30px 视觉气）
:target 处理 hash 链接，[id] section/anchor 处理 JS scrollIntoView */
:target,
.psc-section[id],
[id^="psc-"] { scroll-margin-top: 90px; }
html { scroll-behavior: smooth; }
/* 移动端容器收紧 padding（375px 屏 24×2=48px 边距太挤，改 16×2=32px） */
@media (max-width: 640px) {
.psc-container { padding-inline: var(--psc-space-md); }
}
/* ── Mono utility class ──────────────────────────────────────────────── */
.psc-mono,
.psc-label,
.psc-value,
.psc-amount,
.psc-stat {
font-family: var(--psc-font-mono);
font-weight: 500;
letter-spacing: 0;
}
/* ── Typography scale ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--psc-font-sans);
font-weight: 800;
letter-spacing: -0.5px;
line-height: 1.15;
color: var(--psc-text-primary);
}
h1 { font-size: clamp(28px, 5vw, 44px); letter-spacing: -1.5px; }
h2 { font-size: clamp(22px, 3.5vw, 32px); letter-spacing: -1px; }
h3 { font-size: clamp(18px, 2.5vw, 24px); letter-spacing: -0.5px; }
h4 { font-size: 17px; }
h5 { font-size: 15px; }
h6 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }
p { margin-bottom: var(--psc-space-md); line-height: 1.7; }
a { color: var(--psc-brand); text-decoration: none; transition: color var(--psc-transition); }
a:hover { color: var(--psc-brand-hover); }
/* ── Buttons ─────────────────────────────────────────────────────────── */
.psc-btn {
display: inline-flex; align-items: center; gap: var(--psc-space-sm);
padding: 10px 20px;
border-radius: var(--psc-radius-md);
font-family: var(--psc-font-sans);
font-weight: 700; font-size: 14px; letter-spacing: -0.3px;
text-decoration: none; cursor: pointer;
border: none; transition: all var(--psc-transition);
white-space: nowrap;
}
.psc-btn-primary {
background: var(--psc-brand); color: #fff;
}
.psc-btn-primary:hover { background: var(--psc-brand-hover); color: #fff; }
.psc-btn-secondary {
background: var(--psc-bg-muted); color: var(--psc-text-primary);
border: 1px solid var(--psc-border-base);
}
.psc-btn-secondary:hover { background: var(--psc-bg-subtle); color: var(--psc-text-primary); }
.psc-btn-gold {
background: var(--psc-accent-gold); color: #fff;
}
.psc-btn-gold:hover { background: #a87a20; color: #fff; }
.psc-btn-lg { padding: 13px 28px; font-size: 15px; }
.psc-btn-sm { padding: 6px 14px; font-size: 13px; }
.psc-btn-full { width: 100%; justify-content: center; }
/* ── Header / Nav ────────────────────────────────────────────────────── */
.psc-header {
position: sticky; top: 0; z-index: 100;
background: var(--psc-bg-elevated);
border-bottom: 1px solid var(--psc-border-subtle);
box-shadow: var(--psc-shadow-sm);
}
.psc-nav {
display: flex; align-items: center; justify-content: space-between;
height: 60px; gap: var(--psc-space-lg);
}
/* Logo */
.psc-logo { display: flex; align-items: center; gap: var(--psc-space-sm); text-decoration: none; }
.psc-logo-text { font-family: var(--psc-font-mono); font-weight: 500; font-size: 17px; letter-spacing: -0.5px; }
.psc-logo-prefix { color: var(--psc-text-primary); }
.psc-logo-suffix { color: var(--psc-brand); }
/* Nav links */
.psc-nav-links { display: flex; align-items: center; gap: 6px; }
.psc-nav-link {
display: flex; align-items: center; gap: 5px;
padding: 6px 10px; border-radius: var(--psc-radius-sm);
color: var(--psc-text-secondary); font-size: 14px; font-weight: 500;
text-decoration: none; transition: all var(--psc-transition);
}
.psc-nav-link:hover { background: var(--psc-bg-muted); color: var(--psc-text-primary); }
.psc-nav-link svg { flex-shrink: 0; }
.psc-nav-cta { margin-left: var(--psc-space-sm); }
/* Mobile menu */
.psc-nav-toggle {
display: none; background: none; border: none;
cursor: pointer; padding: 6px; border-radius: var(--psc-radius-sm);
color: var(--psc-text-primary);
}
@media (max-width: 768px) {
.psc-nav-links { display: none; }
.psc-nav-toggle { display: flex; align-items: center; }
.psc-nav-links.is-open {
display: flex; flex-direction: column; align-items: flex-start;
position: absolute; top: 60px; left: 0; right: 0;
background: var(--psc-bg-elevated); border-bottom: 1px solid var(--psc-border-base);
padding: var(--psc-space-md); gap: 4px; z-index: 99;
box-shadow: var(--psc-shadow-md);
}
.psc-nav-link { width: 100%; padding: 10px 14px; }
.psc-nav-cta { display: none; }
}
/* Language switcher */
.psc-lang-switcher {
position: relative; margin-left: var(--psc-space-sm);
}
.psc-lang-btn {
display: flex; align-items: center; gap: 5px;
padding: 6px 10px; border-radius: var(--psc-radius-sm);
background: var(--psc-bg-muted); border: 1px solid var(--psc-border-subtle);
font-size: 13px; font-weight: 500; color: var(--psc-text-secondary);
cursor: pointer; transition: all var(--psc-transition);
}
.psc-lang-btn:hover { border-color: var(--psc-border-base); }
/* .psc-lang-dropdown 完整规则在文件后部（含 ::before bridge 防 hover 丢失），此处已清理重复 */
.psc-lang-option {
display: flex; align-items: center; gap: 8px;
padding: 9px 14px; font-size: 13px; font-weight: 500;
color: var(--psc-text-secondary); text-decoration: none;
transition: background var(--psc-transition);
}
.psc-lang-option:hover { background: var(--psc-bg-muted); color: var(--psc-text-primary); }
.psc-lang-option.active { color: var(--psc-brand); font-weight: 700; }
/* ── Hero section ────────────────────────────────────────────────────── */
.psc-hero {
background-color: var(--psc-bg-muted);
background-image:
linear-gradient(to right, rgba(13, 27, 46, 0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(13, 27, 46, 0.04) 1px, transparent 1px);
background-size: 56px 56px;
border-bottom: 1px solid var(--psc-border-subtle);
padding: 56px var(--psc-space-lg) 48px;
text-align: center;
position: relative;
overflow: hidden;
}
.psc-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 60% at 25% 45%, rgba(30, 64, 138, 0.10), transparent 70%),
radial-gradient(ellipse 40% 50% at 85% 70%, rgba(202, 138, 4, 0.06), transparent 70%);
pointer-events: none;
z-index: 0;
}
.psc-hero > * { position: relative; z-index: 1; }
.psc-hero-badge {
display: inline-flex; align-items: center; gap: 7px;
background: var(--psc-brand-soft); color: var(--psc-brand);
border: 1px solid #bdd4f0; border-radius: var(--psc-radius-xl);
padding: 5px 14px; margin-bottom: var(--psc-space-lg);
font-size: 12px; font-weight: 700; letter-spacing: 0.1px; text-transform: uppercase;
}
.psc-hero-title {
margin-bottom: var(--psc-space-md);
font-family: var(--psc-font-mono); font-weight: 500; letter-spacing: -1.5px;
}
.psc-hero-title em { color: var(--psc-brand); font-style: normal; }
.psc-hero-sub {
font-size: 16px; color: var(--psc-text-secondary);
max-width: 520px; margin-inline: auto; margin-bottom: var(--psc-space-xl);
}
.psc-trust-row { display: flex; gap: var(--psc-space-lg); justify-content: center; flex-wrap: wrap; }
.psc-trust-item {
display: flex; align-items: center; gap: 7px;
font-size: 13px; color: var(--psc-text-muted); font-weight: 500;
}
/* ── Cards ───────────────────────────────────────────────────────────── */
.psc-card {
background: var(--psc-bg-elevated);
border: 1px solid var(--psc-border-base);
border-radius: var(--psc-radius-lg);
box-shadow: var(--psc-shadow-md);
/* v1.6.1：默认 padding——之前裸 .psc-card 让标题/链接顶到边框，多个页面（state.php 侧栏 /
contact.php / lawyer.php / accident.php / injuries-index.php / injury.php / affiliate-dashboard）
都受影响。带 inline padding 或专属子元素（content-card）的 card 用下面的 reset 撤销。 */
padding: var(--psc-space-md);
}
/* Blog/列表卡：图片在顶部边对边，body 在内自带 padding → 外层不要 padding */
.psc-content-card { padding: 0; }
.psc-card-header {
display: flex; align-items: center; gap: var(--psc-space-md);
padding: 18px 24px;
background: var(--psc-bg-muted);
border-bottom: 1px solid var(--psc-border-subtle);
border-radius: var(--psc-radius-lg) var(--psc-radius-lg) 0 0;
}
.psc-card-icon {
width: 38px; height: 38px; border-radius: var(--psc-radius-md);
background: var(--psc-brand);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.psc-card-icon svg { color: #fff; }
.psc-card-title { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; }
.psc-card-subtitle { font-size: 12px; color: var(--psc-text-muted); margin-top: 2px; }
.psc-card-body { padding: 24px; }
/* ── Form elements ───────────────────────────────────────────────────── */
.psc-form-group { display: flex; flex-direction: column; gap: 5px; }
.psc-label {
font-family: var(--psc-font-mono);
font-size: 11px; font-weight: 500; letter-spacing: 0;
color: var(--psc-text-muted); text-transform: uppercase;
display: flex; align-items: center; gap: 5px;
}
.psc-input,
.psc-select {
padding: 9px 12px;
border: 1.5px solid var(--psc-border-base);
border-radius: var(--psc-radius-md);
font-family: var(--psc-font-sans); font-weight: 500; font-size: 14px;
background: var(--psc-bg-base); color: var(--psc-text-primary);
outline: none; transition: border-color var(--psc-transition);
width: 100%;
}
.psc-input:focus, .psc-select:focus { border-color: var(--psc-brand); }
.psc-input-mono { font-family: var(--psc-font-mono); }
/* Input with leading icon */
.psc-input-wrap { position: relative; }
.psc-input-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--psc-text-muted); pointer-events: none; }
.psc-input-wrap .psc-input { padding-left: 32px; }
/* ── Severity selector ───────────────────────────────────────────────── */
.psc-severity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.psc-sev-btn {
padding: 10px 6px; border: 1.5px solid var(--psc-border-base);
border-radius: var(--psc-radius-md); text-align: center; cursor: pointer;
font-size: 13px; font-weight: 500; color: var(--psc-text-secondary);
background: var(--psc-bg-base); transition: all var(--psc-transition);
}
.psc-sev-btn:hover { border-color: var(--psc-brand); color: var(--psc-brand); }
.psc-sev-btn.active {
border-color: var(--psc-brand); background: var(--psc-brand-soft);
color: var(--psc-brand); font-weight: 700;
}
@media (max-width: 480px) {
.psc-severity-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── Result card ─────────────────────────────────────────────────────── */
.psc-result-card {
background: var(--psc-bg-muted); border: 1px solid var(--psc-border-subtle);
border-radius: var(--psc-radius-md); padding: var(--psc-space-lg); margin-top: var(--psc-space-md);
}
.psc-result-eyebrow {
font-family: var(--psc-font-mono); font-size: 11px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.5px; color: var(--psc-text-muted);
display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.psc-result-range {
font-family: var(--psc-font-mono); font-size: 28px; font-weight: 500;
letter-spacing: -1px; color: var(--psc-brand);
}
.psc-result-note {
font-size: 12px; color: var(--psc-text-muted);
margin-top: 5px; display: flex; align-items: center; gap: 5px;
}
.psc-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: var(--psc-space-md); }
@media (max-width: 540px) { .psc-result-grid { grid-template-columns: 1fr; } }
.psc-result-item {
background: var(--psc-bg-elevated); border: 1px solid var(--psc-border-subtle);
border-radius: var(--psc-radius-sm); padding: 12px;
}
.psc-result-item-label {
font-family: var(--psc-font-mono); font-size: 10px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.2px; color: var(--psc-text-muted);
}
.psc-result-item-val {
font-family: var(--psc-font-mono); font-size: 16px; font-weight: 500;
letter-spacing: -0.5px; color: var(--psc-text-primary); margin-top: 3px;
}
/* ── AI CTA card ─────────────────────────────────────────────────────── */
.psc-ai-cta {
background: linear-gradient(145deg, #0D1B2E 0%, #1B3F6E 100%);
border-radius: var(--psc-radius-md); padding: var(--psc-space-lg); margin-top: var(--psc-space-md);
color: #fff;
}
.psc-ai-cta-badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(200,150,42,0.25); border: 1px solid rgba(200,150,42,0.4);
color: #e8b84b; padding: 4px 12px; border-radius: var(--psc-radius-xl);
font-family: var(--psc-font-mono); font-size: 11px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.2px; margin-bottom: var(--psc-space-md);
}
.psc-ai-cta h3 { font-size: 16px; letter-spacing: -0.8px; margin-bottom: 6px; color: #fff; }
.psc-ai-cta p { font-size: 13px; opacity: 0.8; margin-bottom: var(--psc-space-md); }
.psc-ai-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--psc-space-md); }
.psc-ai-feature { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: 0.9; }
/* ── State info card (sidebar) ───────────────────────────────────────── */
.psc-state-card { background: var(--psc-bg-elevated); border: 1px solid var(--psc-border-base); border-radius: var(--psc-radius-md); }
.psc-state-card-header {
padding: 14px 18px; border-bottom: 1px solid var(--psc-border-subtle);
font-family: var(--psc-font-mono); font-size: 11px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.3px; color: var(--psc-text-secondary);
display: flex; align-items: center; gap: 7px;
}
.psc-state-stat {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 18px; border-bottom: 1px solid var(--psc-border-subtle);
}
.psc-state-stat:last-child { border-bottom: none; }
.psc-state-stat-label {
font-size: 12px; color: var(--psc-text-muted);
display: flex; align-items: center; gap: 6px; font-weight: 500;
}
.psc-state-stat-val {
font-family: var(--psc-font-mono); font-size: 12px; font-weight: 500;
color: var(--psc-text-primary);
}
/* ── Disclaimer strip ────────────────────────────────────────────────── */
.psc-disclaimer-strip {
background: var(--psc-bg-subtle); border-top: 1px solid var(--psc-border-subtle);
padding: 12px var(--psc-space-lg);
display: flex; gap: 10px; align-items: flex-start;
}
.psc-disclaimer-strip p { font-size: 12px; color: var(--psc-text-muted); line-height: 1.65; margin: 0; }
.psc-disclaimer-icon { flex-shrink: 0; margin-top: 1px; color: var(--psc-text-muted); }
/* ── Footer ──────────────────────────────────────────────────────────── */
.psc-footer { background: #0D1B2E; color: rgba(255,255,255,0.65); padding: var(--psc-space-xl) 0 var(--psc-space-lg); }
.psc-footer-inner { }
.psc-footer-top { display: flex; justify-content: space-between; gap: var(--psc-space-xl); margin-bottom: var(--psc-space-xl); flex-wrap: wrap; }
.psc-footer-brand { flex: 1; min-width: 200px; }
.psc-footer-brand .psc-logo-text { font-size: 16px; color: #fff; }
.psc-footer-brand .psc-logo-suffix { color: var(--psc-accent-gold); }
.psc-footer-desc { font-size: 13px; line-height: 1.65; margin-top: var(--psc-space-sm); max-width: 240px; }
.psc-footer-col { min-width: 130px; }
.psc-footer-col h4 {
font-family: var(--psc-font-mono); font-size: 11px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.3px; color: #fff;
margin-bottom: var(--psc-space-md);
}
.psc-footer-col a { display: block; font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: var(--psc-space-sm); text-decoration: none; transition: color var(--psc-transition); }
.psc-footer-col a:hover { color: rgba(255,255,255,0.9); }
.psc-footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: var(--psc-space-md);
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.psc-footer-copy { font-family: var(--psc-font-mono); font-size: 11px; }
.psc-footer-badges { font-family: var(--psc-font-mono); font-size: 11px; }
/* ── Cookie consent banner ───────────────────────────────────────────── */
.psc-cookie-banner {
position: fixed; bottom: var(--psc-space-lg); left: var(--psc-space-lg); right: var(--psc-space-lg);
max-width: 520px; z-index: 9999;
background: var(--psc-bg-elevated); border: 1px solid var(--psc-border-base);
border-radius: var(--psc-radius-lg); box-shadow: var(--psc-shadow-lg);
padding: var(--psc-space-lg);
}
.psc-cookie-title { font-size: 15px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: var(--psc-space-sm); display: flex; align-items: center; gap: 8px; }
.psc-cookie-text { font-size: 13px; color: var(--psc-text-secondary); line-height: 1.6; margin-bottom: var(--psc-space-md); }
.psc-cookie-text a { color: var(--psc-brand); }
.psc-cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ── Ads ─────────────────────────────────────────────────────────────── */
.psc-ad-wrapper { text-align: center; padding: var(--psc-space-md) 0; }
.psc-ad-label { display: block; font-family: var(--psc-font-mono); font-size: 10px; color: var(--psc-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
/* ── Blog post ───────────────────────────────────────────────────────── */
.psc-post-title { margin-bottom: var(--psc-space-md); }
.psc-post-content { max-width: 72ch; }
.psc-post-content p,
.psc-post-content ul,
.psc-post-content ol { margin-bottom: var(--psc-space-md); line-height: 1.8; }
.psc-post-content ul, .psc-post-content ol { padding-left: var(--psc-space-xl); }
/* ── 404 ─────────────────────────────────────────────────────────────── */
.psc-404-wrap { padding: var(--psc-space-2xl) 0; text-align: center; }
.psc-404-icon { margin-bottom: var(--psc-space-lg); }
.psc-404-title { font-size: 32px; margin-bottom: var(--psc-space-md); }
.psc-404-desc { color: var(--psc-text-muted); margin-bottom: var(--psc-space-xl); }
.psc-404-actions { display: flex; gap: var(--psc-space-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--psc-space-xl); }
.psc-404-search { max-width: 500px; margin-inline: auto; }
/* ── Utility ─────────────────────────────────────────────────────────── */
.psc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.psc-divider { border: none; border-top: 1px solid var(--psc-border-subtle); margin: var(--psc-space-xl) 0; }
.psc-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px; border-radius: var(--psc-radius-xl);
font-family: var(--psc-font-mono); font-size: 11px; font-weight: 500;
}
.psc-badge-green { background: #d1fae5; color: #065f46; }
.psc-badge-red { background: #fee2e2; color: #991b1b; }
.psc-badge-blue { background: var(--psc-brand-soft); color: var(--psc-brand); }
.psc-badge-gold { background: #fef3c7; color: #92400e; }
/* ── Search form ─────────────────────────────────────────────────────── */
.psc-search-form { width: 100%; }
.psc-search-wrap { position: relative; display: flex; }
.psc-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--psc-text-muted); pointer-events: none; }
.psc-search-field {
flex: 1; padding: 10px 12px 10px 38px;
border: 1.5px solid var(--psc-border-base); border-right: none;
border-radius: var(--psc-radius-md) 0 0 var(--psc-radius-md);
font-family: var(--psc-font-sans); font-size: 14px; font-weight: 500;
background: var(--psc-bg-elevated); color: var(--psc-text-primary);
outline: none;
}
.psc-search-field:focus { border-color: var(--psc-brand); }
.psc-search-submit {
padding: 10px 18px;
background: var(--psc-brand); color: #fff; border: none;
border-radius: 0 var(--psc-radius-md) var(--psc-radius-md) 0;
font-family: var(--psc-font-sans); font-weight: 700; font-size: 14px;
cursor: pointer; transition: background var(--psc-transition);
}
.psc-search-submit:hover { background: var(--psc-brand-hover); }
/* ── Responsive grid helpers ─────────────────────────────────────────── */
.psc-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--psc-space-lg); }
.psc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--psc-space-lg); }
.psc-calc-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--psc-space-lg); }
@media (max-width: 900px) {
.psc-grid-3, .psc-calc-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.psc-grid-2 { grid-template-columns: 1fr; }
}
/* ── Pricing cards ───────────────────────────────────────────────────── */
.psc-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--psc-space-lg); }
.psc-pricing-card { position: relative; border-radius: var(--psc-radius-lg); overflow: hidden; }
.psc-pricing-card.featured { border: 2px solid var(--psc-brand); }
.psc-pricing-featured-badge {
position: absolute; top: 14px; right: 14px;
background: var(--psc-brand); color: #fff;
font-family: var(--psc-font-mono); font-size: 10px; font-weight: 500;
padding: 3px 10px; border-radius: var(--psc-radius-xl); text-transform: uppercase;
}
.psc-pricing-price {
font-family: var(--psc-font-mono); font-size: 36px; font-weight: 500;
color: var(--psc-brand); letter-spacing: -1.5px;
}
.psc-pricing-period { font-family: var(--psc-font-mono); font-size: 13px; color: var(--psc-text-muted); }
/* ── Account / user ──────────────────────────────────────────────────── */
.psc-account-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--psc-border-subtle); margin-bottom: var(--psc-space-lg); }
.psc-account-nav-item {
padding: 10px 16px; font-size: 14px; font-weight: 600;
color: var(--psc-text-muted); text-decoration: none;
border-bottom: 2px solid transparent; transition: all var(--psc-transition);
}
.psc-account-nav-item.active,
.psc-account-nav-item:hover { color: var(--psc-brand); border-bottom-color: var(--psc-brand); }
/* ── Alert / notice ──────────────────────────────────────────────────── */
.psc-notice { display: flex; gap: 10px; padding: var(--psc-space-md); border-radius: var(--psc-radius-md); font-size: 14px; }
.psc-notice-info { background: var(--psc-brand-soft); color: var(--psc-brand); border-left: 3px solid var(--psc-brand); }
.psc-notice-success { background: #d1fae5; color: #065f46; border-left: 3px solid #10b981; }
.psc-notice-error { background: #fee2e2; color: #991b1b; border-left: 3px solid #ef4444; }
.psc-notice-warning { background: #fef3c7; color: #92400e; border-left: 3px solid var(--psc-accent-gold); }
/* ── Skeleton loader ─────────────────────────────────────────────────── */
.psc-skeleton { background: var(--psc-bg-subtle); border-radius: var(--psc-radius-sm); animation: psc-pulse 1.5s ease-in-out infinite; }
@keyframes psc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* ── Spinner ─────────────────────────────────────────────────────────── */
.psc-spinner {
width: 20px; height: 20px; border-radius: 50%;
border: 2px solid var(--psc-border-base);
border-top-color: var(--psc-brand);
animation: psc-spin 0.6s linear infinite;
}
@keyframes psc-spin { to { transform: rotate(360deg); } }
/* v1.7.67：内联小 spinner（按钮内文本前的圆环）— 用 currentColor 自动跟随按钮文字色 */
.psc-spinner-dot {
display: inline-block;
width: 12px; height: 12px;
border-radius: 50%;
border: 2px solid currentColor;
border-top-color: transparent;
animation: psc-spin 0.7s linear infinite;
vertical-align: -2px;
margin-right: 6px;
opacity: 0.85;
}
/* ══════════════════════════════════════════════════════════════════
Auth pages — login / register / reset-password
══════════════════════════════════════════════════════════════════ */
/* Full-page centered wrapper */
.psc-auth-wrap {
min-height: calc(100vh - 160px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--psc-space-xl) var(--psc-space-md);
background: var(--psc-bg-subtle);
}
/* Card */
.psc-auth-card {
width: 100%;
max-width: 420px;
background: var(--psc-bg-card);
border: 1px solid var(--psc-border-base);
border-radius: var(--psc-radius-lg);
padding: 36px 32px;
box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
/* Brand logo inside card */
.psc-auth-brand {
display: flex;
justify-content: center;
margin-bottom: 24px;
}
.psc-auth-title {
font-size: 22px;
font-weight: 700;
color: var(--psc-text-base);
margin: 0 0 6px;
text-align: center;
}
.psc-auth-subtitle {
font-size: 14px;
color: var(--psc-text-muted);
margin: 0 0 24px;
text-align: center;
line-height: 1.5;
}
/* Form */
.psc-auth-form { display: flex; flex-direction: column; gap: 16px; }
.psc-form-label {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
font-weight: 600;
color: var(--psc-text-base);
}
.psc-form-label-action {
font-weight: 400;
font-size: 12px;
}
.psc-form-input {
width: 100%;
height: 40px;
padding: 0 12px;
border: 1px solid var(--psc-border-base);
border-radius: var(--psc-radius-md);
background: var(--psc-bg-base);
color: var(--psc-text-base);
font-size: 14px;
font-family: inherit;
transition: border-color var(--psc-transition), box-shadow var(--psc-transition);
box-sizing: border-box;
}
.psc-form-input:focus {
outline: none;
border-color: var(--psc-brand);
box-shadow: 0 0 0 3px rgba(27,63,110,.12);
}
.psc-form-hint {
font-size: 12px;
color: var(--psc-text-muted);
margin: 2px 0 0;
}
/* Password reveal wrapper */
.psc-input-wrap {
position: relative;
}
.psc-input-wrap .psc-form-input {
padding-right: 40px;
}
.psc-input-eye {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: var(--psc-text-muted);
padding: 4px;
display: flex;
align-items: center;
}
.psc-input-eye:hover { color: var(--psc-brand); }
/* Two-column name row */
.psc-form-row-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* Checkbox */
.psc-checkbox-label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: var(--psc-text-base);
cursor: pointer;
line-height: 1.5;
}
.psc-checkbox-label input[type="checkbox"] {
margin-top: 2px;
accent-color: var(--psc-brand);
flex-shrink: 0;
}
.psc-form-group--inline { margin-top: -4px; }
/* Required asterisk */
.psc-required { color: #ef4444; margin-left: 2px; }
/* Submit button spacing */
.psc-auth-submit { margin-top: 4px; height: 44px; font-size: 15px; }
/* Links */
.psc-auth-link {
color: var(--psc-brand);
text-decoration: none;
font-weight: 500;
}
.psc-auth-link:hover { text-decoration: underline; }
/* What you get perks (register page) */
.psc-auth-perks {
display: flex;
flex-direction: column;
gap: 6px;
margin: 20px 0 0;
padding: 16px;
background: var(--psc-bg-subtle);
border-radius: var(--psc-radius-md);
}
.psc-auth-perk {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--psc-teal);
}
/* Footer text beneath card */
.psc-auth-footer-text {
font-size: 13px;
color: var(--psc-text-muted);
text-align: center;
margin: 20px 0 0;
}
/* Trust strip below card */
.psc-auth-trust {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--psc-text-muted);
margin-top: 20px;
}
/* ── OAuth (Google/Facebook) login buttons ──────────────────────────── */
.psc-oauth-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 24px 0 16px;
color: var(--psc-text-muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
.psc-oauth-divider::before,
.psc-oauth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--psc-border);
}
.psc-oauth-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
.psc-oauth-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 11px 16px;
border: 1.5px solid var(--psc-border);
border-radius: 8px;
background: #fff;
color: var(--psc-text);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: border-color .15s, box-shadow .15s, transform .05s;
}
.psc-oauth-btn:hover {
border-color: var(--psc-text);
box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.psc-oauth-btn:active {
transform: translateY(1px);
}
.psc-oauth-btn--facebook {
color: #fff;
background: #1877F2;
border-color: #1877F2;
}
.psc-oauth-btn--facebook:hover {
background: #166fe0;
border-color: #166fe0;
}
.psc-oauth-btn--facebook svg path { fill: #fff; }
/* Mobile */
@media (max-width: 480px) {
.psc-auth-card { padding: 28px 20px; }
.psc-form-row-2col { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════
Layout corrections — HTML 模板用的 class 名与上方 CSS 不符，在此补全
═══════════════════════════════════════════════════════════════════════ */
/* ── Header inner（3 列 grid：1fr / auto / 1fr，让 nav 在页面正中而不只是"剩余空间"中）── */
.psc-header-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: 60px;
gap: var(--psc-space-lg);
}
.psc-logo { justify-self: start; }
.psc-nav { justify-self: center; }
.psc-header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
/* v1.7.68：顶部导航 credits / Pro 徽章 */
.psc-nav-credits-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px;
border: 1px solid var(--psc-border-base);
border-radius: 14px;
font-family: var(--psc-font-mono);
font-size: 12px; font-weight: 600;
color: var(--psc-text-secondary);
background: var(--psc-bg-elevated);
text-decoration: none;
transition: all 150ms ease;
}
.psc-nav-credits-badge:hover {
border-color: var(--psc-brand);
color: var(--psc-brand);
background: var(--psc-brand-soft);
}
.psc-nav-credits-badge svg { color: var(--psc-accent-gold); }
@media (max-width: 768px) { .psc-nav-credits-badge { display: none; } }
/* ── Desktop nav list (.psc-nav-list 对应旧 .psc-nav-links) ────── */
.psc-nav-list {
display: flex; align-items: center; justify-content: center; gap: 2px;
list-style: none; margin: 0; padding: 0;
}
/* ── Dropdown ─────────────────────────────────────────────────── */
.psc-nav-has-sub { position: relative; }
.psc-nav-sub {
display: none; position: absolute; top: 100%; left: 0;
margin-top: 6px;
background: var(--psc-bg-elevated); border: 1px solid var(--psc-border-base);
border-radius: var(--psc-radius-md); box-shadow: var(--psc-shadow-md);
list-style: none; padding: 6px; min-width: 210px; z-index: 200;
}
/* 账户下拉位于右侧 .psc-header-actions 内，左对齐会溢出右视口边缘 */
.psc-account-dropdown .psc-nav-sub { left: auto; right: 0; }
/* Invisible bridge — extends hover area into the visual gap so dropdown stays open */
.psc-nav-sub::before {
content: ''; position: absolute; top: -10px; left: 0; right: 0;
height: 10px; background: transparent;
}
.psc-nav-has-sub:hover .psc-nav-sub,
.psc-nav-has-sub:focus-within .psc-nav-sub,
.psc-nav-has-sub.is-open .psc-nav-sub { display: block; }
.psc-nav-sub a {
display: block; padding: 8px 12px; border-radius: var(--psc-radius-sm);
font-size: 13px; color: var(--psc-text-secondary); text-decoration: none;
transition: background var(--psc-transition), color var(--psc-transition);
}
.psc-nav-sub a:hover { background: var(--psc-bg-muted); color: var(--psc-brand); }
/* ── Mobile toggle (.psc-mobile-toggle 对应旧 .psc-nav-toggle) ── */
.psc-mobile-toggle {
display: none; background: none; border: none;
cursor: pointer; padding: 6px; border-radius: var(--psc-radius-sm);
color: var(--psc-text-primary); align-items: center;
}
/* ── Mobile nav overlay ───────────────────────────────────────── */
.psc-mobile-nav {
background: var(--psc-bg-elevated); border-bottom: 1px solid var(--psc-border-base);
box-shadow: var(--psc-shadow-md);
}
.psc-mobile-nav-inner { padding: var(--psc-space-sm) var(--psc-space-lg); }
.psc-mobile-nav-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 2px;
}
.psc-mobile-nav-list a {
display: block; padding: 10px 12px; border-radius: var(--psc-radius-sm);
font-size: 15px; font-weight: 500; color: var(--psc-text-base); text-decoration: none;
transition: background var(--psc-transition);
}
.psc-mobile-nav-list a:hover { background: var(--psc-bg-muted); }
.psc-mobile-sub-toggle {
display: flex; align-items: center; justify-content: space-between; width: 100%;
padding: 10px 12px; background: none; border: none; border-radius: var(--psc-radius-sm);
font-size: 15px; font-weight: 500; color: var(--psc-text-base); cursor: pointer;
transition: background var(--psc-transition);
}
.psc-mobile-sub-toggle:hover { background: var(--psc-bg-muted); }
.psc-mobile-sub { list-style: none; margin: 0; padding: 0 0 0 16px; }
.psc-mobile-sub a { font-size: 14px; }
/* ── Hero 2-column grid ───────────────────────────────────────── */
.psc-hero { text-align: left; padding-block: 0; }
.psc-hero-inner {
display: grid; grid-template-columns: 1.1fr 0.9fr;
gap: 40px; align-items: center;
padding: 56px 0 48px;
}
.psc-hero-content h1 { font-size: clamp(24px, 3.5vw, 38px); font-family: var(--psc-font-mono); font-weight: 500; letter-spacing: -1.5px; }
.psc-hero-badge { white-space: nowrap; }
.psc-hero-subtitle {
font-size: 15px; line-height: 1.65;
color: var(--psc-text-secondary); margin-bottom: var(--psc-space-lg);
}
.psc-hero-stats {
display: flex; gap: 28px; flex-wrap: wrap;
margin-top: var(--psc-space-lg);
}
.psc-hero-stat { display: flex; flex-direction: column; }
.psc-hero-stat strong { font-size: 20px; font-weight: 800; color: var(--psc-brand); display: block; }
.psc-hero-stat span { font-size: 11px; color: var(--psc-text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.psc-hero-calculator {
min-width: 0;
position: relative;
}
.psc-hero-calculator::before,
.psc-hero-calculator::after {
content: '';
position: absolute;
width: 14px; height: 14px;
border-color: var(--psc-brand);
border-style: solid;
pointer-events: none;
z-index: 2;
}
.psc-hero-calculator::before {
top: -8px; left: -8px;
border-width: 2px 0 0 2px;
}
.psc-hero-calculator::after {
bottom: -8px; right: -8px;
border-width: 0 2px 2px 0;
}
.psc-hero-content { min-width: 0; }
/* ── Trust bar ────────────────────────────────────────────────── */
.psc-trust-bar { background: var(--psc-navy); padding: 9px 0; }
.psc-trust-bar__inner {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: nowrap;
}
.psc-trust-bar .psc-trust-item { color: rgba(255,255,255,.85); font-size: 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.psc-trust-bar .psc-trust-item svg { color: rgba(255,255,255,.7); }
/* ── Mobile overrides ─────────────────────────────────────────── */
@media (max-width: 768px) {
.psc-mobile-toggle { display: flex; }
.psc-nav-list { display: none; }
.psc-hero-inner { grid-template-columns: 1fr; gap: 24px; padding: var(--psc-space-xl) 0 var(--psc-space-lg); }
.psc-hero { text-align: center; }
.psc-hero-badge { white-space: normal; }
.psc-hero-content h1 { font-size: clamp(22px, 6vw, 32px); }
.psc-hero-subtitle { text-align: center; }
.psc-hero-stats { justify-content: center; gap: var(--psc-space-md); }
.psc-trust-bar__inner { gap: 12px; flex-wrap: wrap; justify-content: center; }
.psc-trust-bar .psc-trust-item { font-size: 11px; }
.psc-header-actions .psc-btn:not(.psc-mobile-toggle) { display: none; }
/* 账户下拉触发器在移动端必须可见（汉堡菜单旁边显示头像入口） */
.psc-account-dropdown { display: flex; }
.psc-account-dropdown .psc-btn { display: inline-flex !important; padding: 6px 8px; }
/* 移动端下拉打开时贴在屏幕右边；位置改为 fixed 兼容窄屏 */
.psc-account-dropdown .psc-nav-sub { right: 0; min-width: 180px; }
}
/* ═══════════════════════════════════════════════════════════════════════
Body / page wrapper — force white background
═══════════════════════════════════════════════════════════════════════ */
html, body.psc-body {
background: var(--psc-bg-base) !important;
margin: 0;
}
body.psc-body { min-height: 100vh; }
/* ═══════════════════════════════════════════════════════════════════════
Calculator form — comprehensive missing styles
═══════════════════════════════════════════════════════════════════════ */
.psc-calc-form {
width: 100%;
background: var(--psc-bg-elevated);
border: 1px solid var(--psc-border-base);
border-radius: var(--psc-radius-lg);
padding: var(--psc-space-lg);
box-shadow: var(--psc-shadow-md);
box-sizing: border-box;
overflow: hidden;
}
.psc-form-section { margin-bottom: var(--psc-space-lg); }
.psc-form-section:last-of-type { margin-bottom: var(--psc-space-md); }
.psc-form-section-title {
font-size: 14px !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--psc-text-primary);
margin: 0 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--psc-border-subtle);
}
.psc-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.psc-form-row:last-child { margin-bottom: 0; }
.psc-form-row > .psc-form-group:only-child { grid-column: 1 / -1; }
.psc-form-group { display: flex; flex-direction: column; min-width: 0; }
/* v1.7.41：多列 form-row 里 label 强制预留 2 行高度，避免某一列 label 折行导致下方 input 错位
单列布局（移动端 / only-child）跳过这个规则——单字段不会有对齐问题 */
@media (min-width: 561px) {
.psc-form-row:not(:has(> .psc-form-group:only-child)) > .psc-form-group > .psc-label {
min-height: 36px;
}
}
.psc-label {
display: block;
font-size: 11px !important;
font-weight: 500;
color: var(--psc-text-secondary);
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.psc-label-hint { font-weight: 400; opacity: 0.7; text-transform: none; }
.psc-label-value {
float: right;
font-family: var(--psc-font-mono);
color: var(--psc-brand);
font-weight: 700;
}
.psc-admin-input,
.psc-form-input {
width: 100%;
height: 38px;
padding: 0 10px;
border: 1px solid var(--psc-border-base);
border-radius: var(--psc-radius-sm);
background: var(--psc-bg-base);
color: var(--psc-text-base);
font-size: 14px;
font-family: inherit;
box-sizing: border-box;
transition: border-color var(--psc-transition), box-shadow var(--psc-transition);
}
.psc-admin-input:focus {
outline: none;
border-color: var(--psc-brand);
box-shadow: 0 0 0 3px rgba(27,63,110,.10);
}
select.psc-admin-input {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 28px;
}
/* $ prefix input */
.psc-input-prefix {
position: relative;
display: flex;
align-items: stretch;
}
.psc-prefix {
display: inline-flex;
align-items: center;
padding: 0 10px;
background: var(--psc-bg-muted);
border: 1px solid var(--psc-border-base);
border-right: none;
border-radius: var(--psc-radius-sm) 0 0 var(--psc-radius-sm);
font-family: var(--psc-font-mono);
font-weight: 700;
color: var(--psc-text-secondary);
font-size: 13px;
}
.psc-input-prefix .psc-admin-input {
border-radius: 0 var(--psc-radius-sm) var(--psc-radius-sm) 0;
}
/* Method toggle radio cards */
.psc-method-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 14px;
}
.psc-method-option {
display: block;
cursor: pointer;
position: relative;
}
.psc-method-option input[type="radio"] {
position: absolute; opacity: 0; pointer-events: none;
}
.psc-method-label {
display: block;
padding: 10px 12px;
border: 1px solid var(--psc-border-base);
border-radius: var(--psc-radius-sm);
background: var(--psc-bg-base);
transition: all var(--psc-transition);
}
.psc-method-label strong {
display: block;
font-size: 13px;
color: var(--psc-text-primary);
margin-bottom: 2px;
}
.psc-method-label small {
display: block;
font-size: 11px;
color: var(--psc-text-muted);
line-height: 1.3;
}
.psc-method-option input:checked + .psc-method-label {
border-color: var(--psc-brand);
background: var(--psc-brand-soft);
box-shadow: 0 0 0 1px var(--psc-brand) inset;
}
.psc-method-panel { padding-top: 4px; }
/* Range slider */
.psc-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--psc-bg-subtle);
border-radius: 3px;
outline: none;
margin: 8px 0;
}
.psc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--psc-brand);
cursor: pointer;
border: 2px solid #fff;
box-shadow: var(--psc-shadow-sm);
}
.psc-slider::-moz-range-thumb {
width: 18px; height: 18px;
border-radius: 50%;
background: var(--psc-brand);
cursor: pointer;
border: 2px solid #fff;
}
/* Recovery preset chips */
.psc-rec-chips {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 10px;
}
.psc-rec-btn {
padding: 5px 10px;
border: 1px solid var(--psc-border-base);
background: var(--psc-bg-base);
border-radius: var(--psc-radius-sm);
font-size: 12px;
color: var(--psc-text-secondary);
cursor: pointer;
transition: all var(--psc-transition);
}
.psc-rec-btn:hover { background: var(--psc-bg-muted); border-color: var(--psc-brand); color: var(--psc-brand); }
/* Live preview */
.psc-live-preview {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 14px;
background: var(--psc-bg-muted);
border: 1px solid var(--psc-border-subtle);
border-radius: var(--psc-radius-sm);
margin: 14px 0;
}
.psc-live-preview-label { font-size: 12px; color: var(--psc-text-secondary); text-transform: uppercase; letter-spacing: 0.3px; }
.psc-live-preview-value {
font-family: var(--psc-font-mono);
font-size: 18px;
font-weight: 700;
color: var(--psc-brand);
}
/* Notice messages */
.psc-notice {
padding: 10px 12px;
border-radius: var(--psc-radius-sm);
font-size: 13px;
margin: 10px 0;
border-left: 3px solid;
}
.psc-notice--info { background: #eff6ff; border-color: #3b82f6; color: #1e3a8a; }
.psc-notice--warning { background: #fef3c7; border-color: #f59e0b; color: #78350f; }
.psc-notice--error { background: #fee2e2; border-color: var(--psc-error); color: #7f1d1d; }
/* Button modifiers */
.psc-btn-full { width: 100%; justify-content: center; }
.psc-btn-lg { padding: 12px 22px; font-size: 15px; }
.psc-btn-sm { padding: 6px 12px; font-size: 12px; }
.psc-btn-outline {
background: transparent;
color: var(--psc-brand);
border: 1px solid var(--psc-brand);
}
.psc-btn-outline:hover { background: var(--psc-brand-soft); }
.psc-btn-ghost {
background: transparent;
color: var(--psc-text-secondary);
border: 1px solid var(--psc-border-base);
}
.psc-btn-ghost:hover { background: var(--psc-bg-muted); }
.psc-btn-link {
background: none;
border: none;
color: var(--psc-brand);
cursor: pointer;
text-decoration: underline;
padding: 0;
}
/* Hero calculator: tighten form on small viewports */
@media (max-width: 600px) {
.psc-form-row { grid-template-columns: 1fr; }
.psc-method-toggle { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════
Defensive: respect HTML [hidden] attribute (overrides any flex/grid display)
═══════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }
/* ═══════════════════════════════════════════════════════════════════════
Logo — header/footer brand mark
═══════════════════════════════════════════════════════════════════════ */
.psc-logo-icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.psc-logo-icon svg { display: block; }
.psc-logo-img { display: block; height: auto; max-height: 40px; width: auto; }
.psc-logo .psc-logo-text {
display: inline-flex;
flex-direction: column;
line-height: 1.05;
font-family: var(--psc-font-sans);
font-weight: 800;
letter-spacing: -0.5px;
}
.psc-logo-primary {
font-size: 15px;
color: var(--psc-text-primary);
}
.psc-logo-amp {
color: var(--psc-gold);
margin: 0 1px;
font-weight: 700;
}
.psc-logo-calc {
font-size: 11px;
color: var(--psc-text-muted);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
margin-top: 2px;
}
/* Footer logo overrides — light text on navy bg */
.psc-footer-brand .psc-logo-primary { color: #fff; }
.psc-footer-brand .psc-logo-calc { color: rgba(255,255,255,.6); }
/* ═══════════════════════════════════════════════════════════════════════
Lawyer CTA block
═══════════════════════════════════════════════════════════════════════ */
.psc-lawyer-cta-block {
display: flex;
align-items: center;
gap: var(--psc-space-lg);
padding: 20px 24px;
background: linear-gradient(135deg, var(--psc-bg-elevated) 0%, var(--psc-brand-soft) 100%);
border: 1px solid var(--psc-border-subtle);
border-left: 4px solid var(--psc-brand);
border-radius: var(--psc-radius-md);
box-shadow: var(--psc-shadow-sm);
flex-wrap: wrap;
}
.psc-lawyer-cta-block__icon {
flex-shrink: 0;
width: 48px; height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--psc-brand);
color: #fff;
border-radius: var(--psc-radius-md);
}
.psc-lawyer-cta-block__icon svg { color: #fff; }
.psc-lawyer-cta-block__body { flex: 1; min-width: 240px; }
.psc-lawyer-cta-block__heading {
font-size: 16px;
font-weight: 700;
margin: 0 0 4px;
color: var(--psc-text-primary);
}
.psc-lawyer-cta-block__sub {
font-size: 13px;
color: var(--psc-text-secondary);
margin: 0;
line-height: 1.5;
}
.psc-lawyer-cta-block .psc-btn { flex-shrink: 0; }
@media (max-width: 600px) {
.psc-lawyer-cta-block { padding: 16px; gap: 12px; }
.psc-lawyer-cta-block__icon { width: 40px; height: 40px; }
.psc-lawyer-cta-block__heading { font-size: 14px; }
}
/* ═══════════════════════════════════════════════════════════════════════
Page wrapper / page header (used by most page-templates)
═══════════════════════════════════════════════════════════════════════ */
.psc-page-wrap {
padding-top: var(--psc-space-xl);
padding-bottom: var(--psc-space-2xl);
min-height: 50vh;
}
.psc-page-hero {
text-align: center;
margin-bottom: var(--psc-space-xl);
}
.psc-page-title {
font-size: clamp(28px, 4vw, 40px);
font-family: var(--psc-font-mono); font-weight: 500;
margin: 0 0 8px;
color: var(--psc-text-primary);
letter-spacing: -1.5px;
}
.psc-page-subtitle {
font-size: 16px;
color: var(--psc-text-secondary);
max-width: 640px;
margin: 0 auto;
line-height: 1.6;
}
.psc-page-header { margin-bottom: var(--psc-space-lg); }
.psc-content { line-height: 1.7; }
/* ═══════════════════════════════════════════════════════════════════════
Breadcrumb
═══════════════════════════════════════════════════════════════════════ */
.psc-breadcrumb {
font-size: 13px;
color: var(--psc-text-muted);
margin-bottom: var(--psc-space-lg);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.psc-breadcrumb a {
color: var(--psc-brand);
text-decoration: none;
}
.psc-breadcrumb a:hover { text-decoration: underline; }
.psc-breadcrumb .sep,
.psc-breadcrumb-sep { color: var(--psc-text-muted); margin: 0 4px; }
.psc-breadcrumb [aria-current="page"] { color: var(--psc-text-secondary); }
/* ═══════════════════════════════════════════════════════════════════════
AI Tool wrapper (case evaluator, document analyzer, letter generator)
═══════════════════════════════════════════════════════════════════════ */
.psc-ai-tool-wrap {
max-width: 760px;
margin: 0 auto;
}
.psc-ai-tool-header {
text-align: center;
margin-bottom: var(--psc-space-lg);
}
.psc-ai-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: linear-gradient(135deg, var(--psc-brand-soft), #f5e9d0);
color: var(--psc-brand);
border: 1px solid #d8c8a8;
border-radius: var(--psc-radius-xl);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--psc-space-md);
}
.psc-ai-tool-title {
font-size: clamp(24px, 3.5vw, 36px);
font-weight: 800;
margin: 0 0 12px;
letter-spacing: -1px;
}
.psc-ai-tool-desc {
font-size: 15px;
color: var(--psc-text-secondary);
max-width: 580px;
margin: 0 auto var(--psc-space-lg);
line-height: 1.6;
}
/* AI form (card with padding) */
.psc-ai-form {
padding: var(--psc-space-xl) var(--psc-space-lg);
}
.psc-ai-form .psc-form-group { margin-bottom: var(--psc-space-md); }
.psc-ai-form .psc-form-row { margin-bottom: var(--psc-space-md); }
/* Textarea (extends .psc-admin-input height) */
textarea.psc-admin-input,
.psc-textarea {
height: auto;
min-height: 120px;
padding: 10px 12px;
line-height: 1.5;
resize: vertical;
font-family: inherit;
}
/* Required asterisk */
.psc-label-required {
color: var(--psc-error);
font-weight: 700;
margin-left: 2px;
}
/* Field hint */
.psc-field-hint {
display: block;
font-size: 12px;
color: var(--psc-text-muted);
margin-top: 4px;
line-height: 1.4;
}
/* Spinner wrap (used inline below forms) */
.psc-spinner-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: var(--psc-space-xl) 0;
}
.psc-spinner-text {
font-size: 13px;
color: var(--psc-text-secondary);
margin: 0;
}
/* AI result card */
.psc-ai-result {
padding: var(--psc-space-lg);
margin-top: var(--psc-space-lg);
}
/* Locked / login required state */
.psc-locked-state {
border-style: dashed;
}
/* ═══════════════════════════════════════════════════════════════════════
Prose / typography for content blocks
═══════════════════════════════════════════════════════════════════════ */
.psc-prose { line-height: 1.75; color: var(--psc-text-base); }
.psc-prose h1,
.psc-prose h2,
.psc-prose h3,
.psc-prose h4 {
margin-top: 1.4em;
margin-bottom: 0.5em;
}
.psc-prose h2 { font-size: 22px; }
.psc-prose h3 { font-size: 18px; }
.psc-prose p { margin: 0 0 1em; }
.psc-prose ul,
.psc-prose ol {
list-style: revert;
padding-left: 1.4em;
margin: 0 0 1em;
}
.psc-prose li { margin-bottom: 0.4em; }
.psc-prose a:not(.psc-btn) { color: var(--psc-brand); text-decoration: underline; }
.psc-prose .psc-btn { text-decoration: none; }
.psc-prose .psc-btn-primary,
.psc-prose .psc-btn-gold { color: #fff; }
.psc-prose .psc-btn-outline { color: var(--psc-brand); }
.psc-prose .psc-btn-ghost { color: var(--psc-text-secondary); }
.psc-prose strong { color: var(--psc-text-primary); }
.psc-prose blockquote {
border-left: 3px solid var(--psc-brand);
padding: 8px 16px;
margin: 1em 0;
color: var(--psc-text-secondary);
background: var(--psc-bg-muted);
}
.psc-prose code {
background: var(--psc-bg-muted);
padding: 2px 6px;
border-radius: var(--psc-radius-sm);
font-family: var(--psc-font-mono);
font-size: 0.9em;
}
/* ═══════════════════════════════════════════════════════════════════════
Section titles (used on home + landing pages)
═══════════════════════════════════════════════════════════════════════ */
.psc-section-title {
text-align: center;
font-size: clamp(22px, 3vw, 30px);
font-family: var(--psc-font-mono); font-weight: 500;
margin: 0 0 8px;
letter-spacing: -1px;
}
.psc-section-subtitle {
text-align: center;
font-size: 15px;
color: var(--psc-text-secondary);
max-width: 560px;
margin: 0 auto var(--psc-space-xl);
line-height: 1.6;
}
/* ═══════════════════════════════════════════════════════════════════════
Tools grid (home AI strip)
═══════════════════════════════════════════════════════════════════════ */
.psc-tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--psc-space-lg);
}
.psc-tool-card {
background: var(--psc-bg-elevated);
border: 1px solid var(--psc-border-base);
border-radius: var(--psc-radius-lg);
padding: var(--psc-space-lg);
box-shadow: var(--psc-shadow-sm);
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
position: relative;
overflow: hidden;
}
/* v1.7.40：hover lift + 边框过渡到品牌色 + 顶部金色细线滑入 */
.psc-tool-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--psc-brand), var(--psc-accent-gold));
transform: scaleX(0);
transform-origin: left;
transition: transform 320ms ease;
}
.psc-tool-card:hover {
transform: translateY(-4px);
box-shadow: var(--psc-shadow-lg);
border-color: var(--psc-brand-soft);
}
.psc-tool-card:hover::after { transform: scaleX(1); }
.psc-tool-card h3 { font-size: 17px; margin: 12px 0 6px; }
.psc-tool-card p { font-size: 14px; color: var(--psc-text-secondary); margin: 0 0 16px; line-height: 1.55; }
.psc-tool-icon {
width: 44px; height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--psc-radius-md);
color: #fff;
transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1);
}
.psc-tool-card:hover .psc-tool-icon { transform: rotate(-8deg) scale(1.08); }
.psc-tool-icon--blue { background: var(--psc-brand); }
.psc-tool-icon--teal { background: var(--psc-teal); }
.psc-tool-icon--gold { background: var(--psc-gold); }
/* ═══════════════════════════════════════════════════════════════════════
States grid (chips)
═══════════════════════════════════════════════════════════════════════ */
.psc-states-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.psc-state-chip {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: var(--psc-bg-elevated);
border: 1px solid var(--psc-border-base);
border-radius: var(--psc-radius-md);
font-size: 14px;
font-weight: 600;
color: var(--psc-text-primary);
text-decoration: none;
transition: all var(--psc-transition);
}
.psc-state-chip:hover {
border-color: var(--psc-brand);
background: var(--psc-brand-soft);
color: var(--psc-brand);
}
.psc-state-chip-cap {
font-size: 10px;
font-weight: 700;
background: var(--psc-gold);
color: #fff;
padding: 2px 6px;
border-radius: var(--psc-radius-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ═══════════════════════════════════════════════════════════════════════
Steps (How It Works)
═══════════════════════════════════════════════════════════════════════ */
.psc-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--psc-space-xl);
}
.psc-step {
text-align: center;
padding: var(--psc-space-lg);
}
.psc-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
background: var(--psc-brand);
color: #fff;
border-radius: 50%;
font-family: var(--psc-font-mono);
font-weight: 700;
font-size: 18px;
margin-bottom: var(--psc-space-md);
}
.psc-step h3 { font-size: 17px; margin: 0 0 8px; }
.psc-step p { font-size: 14px; color: var(--psc-text-secondary); margin: 0; }
/* ═══════════════════════════════════════════════════════════════════════
Section spacing tweaks
═══════════════════════════════════════════════════════════════════════ */
.psc-result-section { padding-block: 0; }
.psc-result-section:has(#psc-result-panel[hidden]) { display: none; }
.psc-ai-strip,
.psc-states-strip,
.psc-how { background: var(--psc-bg-base); }
.psc-states-strip {
background-color: var(--psc-bg-muted);
background-image:
linear-gradient(to right, rgba(13, 27, 46, 0.025) 1px, transparent 1px),
linear-gradient(to bottom, rgba(13, 27, 46, 0.025) 1px, transparent 1px);
background-size: 56px 56px;
border-top: 1px solid var(--psc-border-subtle);
border-bottom: 1px solid var(--psc-border-subtle);
position: relative;
overflow: hidden;
}
.psc-states-strip::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 50% 50% at 50% 0%, rgba(30, 64, 138, 0.06), transparent 70%);
pointer-events: none;
z-index: 0;
}
.psc-states-strip > * { position: relative; z-index: 1; }
/* ═══════════════════════════════════════════════════════════════════════
Skip link (a11y)
═══════════════════════════════════════════════════════════════════════ */
.psc-skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; background: var(--psc-brand); color: #fff; padding: 8px 16px; }
.psc-skip-link:focus { left: 8px; top: 8px; }
/* ═══════════════════════════════════════════════════════════════════════
Result panel (calculator output)
═══════════════════════════════════════════════════════════════════════ */
.psc-result-container { max-width: 720px; margin: 0 auto; }
.psc-result-panel { padding: var(--psc-space-lg); margin-top: var(--psc-space-lg); }
.psc-result-header { text-align: center; margin-bottom: var(--psc-space-lg); padding-bottom: var(--psc-space-md); border-bottom: 1px solid var(--psc-border-subtle); }
.psc-result-title { font-size: 20px; margin: 0 0 6px; }
.psc-result-subtitle { font-size: 13px; color: var(--psc-text-muted); margin: 0; }
.psc-result-hero {
text-align: center;
padding: var(--psc-space-lg) var(--psc-space-md);
position: relative;
border-radius: var(--psc-radius-lg);
background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(16, 185, 129, 0.08), transparent 70%);
}
.psc-result-range { display: inline-flex; align-items: baseline; gap: 8px; }
.psc-result-total { font-family: var(--psc-font-mono); font-size: clamp(28px, 4vw, 40px); font-weight: 500; color: var(--psc-brand); letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.psc-result-sep { font-size: 24px; color: var(--psc-text-muted); }
.psc-result-range-label { font-size: 12px; color: var(--psc-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 6px; }
.psc-result-breakdown,
.psc-result-state-info { padding: var(--psc-space-md) 0; border-top: 1px solid var(--psc-border-subtle); }
.psc-result-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; }
.psc-result-row-label { color: var(--psc-text-secondary); }
.psc-result-row-value { font-family: var(--psc-font-mono); font-weight: 600; color: var(--psc-text-primary); }
.psc-result-row-value--muted { color: var(--psc-text-muted); font-weight: 400; font-family: var(--psc-font-sans); font-size: 12px; font-style: italic; }
.psc-result-row--net { border-top: 1px dashed var(--psc-border-base); margin-top: 6px; padding-top: 12px; font-weight: 700; }
.psc-result-row--net .psc-result-row-value { color: var(--psc-brand); font-size: 16px; }
.psc-result-cta { margin-top: var(--psc-space-lg); padding: var(--psc-space-md); background: var(--psc-bg-muted); border-radius: var(--psc-radius-md); text-align: center; }
.psc-result-cta-text { font-size: 13px; color: var(--psc-text-secondary); margin: 0 0 12px; }
.psc-result-ai-prompt { text-align: center; margin-top: var(--psc-space-md); }
.psc-result-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: var(--psc-space-md);
padding-top: var(--psc-space-md);
border-top: 1px dashed var(--psc-border-subtle);
}
.psc-result-email-form {
display: none;
width: 100%;
margin-top: 8px;
padding: var(--psc-space-md);
background: var(--psc-bg-muted);
border-radius: var(--psc-radius-md);
}
.psc-result-email-form.is-open { display: block; }
/* ═══════════════════════════════════════════════════════════════════════
Pricing
═══════════════════════════════════════════════════════════════════════ */
.psc-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--psc-space-lg); margin-top: var(--psc-space-lg); align-items: stretch; }
.psc-pricing-card { background: var(--psc-bg-elevated); border: 1px solid var(--psc-border-base); border-radius: var(--psc-radius-lg); padding: var(--psc-space-lg); display: flex; flex-direction: column; box-shadow: var(--psc-shadow-sm); transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; position: relative; }
.psc-pricing-card:hover { transform: translateY(-4px); box-shadow: var(--psc-shadow-lg); border-color: var(--psc-brand-soft); }
/* v1.7.40：推荐订阅卡片（Pro Subscription）— 金色光晕 + 微抬升 + 顶部 ribbon */
.psc-pricing-card--premium {
border-color: var(--psc-accent-gold);
border-width: 2px;
box-shadow: 0 8px 32px rgba(200, 150, 42, 0.15), var(--psc-shadow-md);
transform: translateY(-6px);
background:
radial-gradient(ellipse 80% 40% at 50% 0%, rgba(200, 150, 42, 0.06), transparent 70%),
var(--psc-bg-elevated);
}
/* 推荐卡片的 plan-badge 升级为金色金属感：放大 + mono 字体 + 阴影 */
.psc-pricing-card--premium .psc-plan-badge,
.psc-pricing-card--premium .psc-plan-badge--purple {
background: var(--psc-accent-gold);
color: #fff;
font-family: var(--psc-font-mono);
font-size: 11px; font-weight: 500; letter-spacing: 1px;
padding: 5px 14px;
box-shadow: 0 2px 8px rgba(200, 150, 42, 0.35);
}
.psc-pricing-card--premium:hover { transform: translateY(-10px); box-shadow: 0 12px 40px rgba(200, 150, 42, 0.22), var(--psc-shadow-lg); }
.psc-pricing-header { text-align: center; margin-bottom: var(--psc-space-md); padding-bottom: var(--psc-space-md); border-bottom: 1px solid var(--psc-border-subtle); }
.psc-plan-name { font-size: 18px; margin: 0 0 8px; }
.psc-plan-price { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 12px 0; }
.psc-price-amount { font-size: 40px; font-weight: 500; color: var(--psc-text-primary); letter-spacing: -2px; font-family: var(--psc-font-mono); font-variant-numeric: tabular-nums; }
.psc-price-period { font-size: 14px; color: var(--psc-text-muted); font-family: var(--psc-font-mono); }
.psc-plan-desc { font-size: 13px; color: var(--psc-text-muted); margin: 0; }
.psc-plan-features { list-style: none; margin: 0 0 var(--psc-space-md); padding: 0; flex: 1; }
.psc-plan-features li { font-size: 13px; padding: 6px 0; color: var(--psc-text-base); line-height: 1.4; }
.psc-plan-badge { display: inline-block; background: var(--psc-gold); color: #fff; padding: 3px 10px; border-radius: var(--psc-radius-xl); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.psc-plan-badge--purple { background: #6b46c1; }
.psc-plan-badge--premium { background: var(--psc-brand); }
.psc-plan-badge--free { background: var(--psc-text-muted); }
.psc-btn-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
/* v1.7.42：付费按钮下方的"看样本 PDF"链接 — 低视觉权重不抢主 CTA，但给犹豫用户出口 */
.psc-sample-link {
display: block;
text-align: center;
margin-top: 10px;
padding: 6px 12px;
font-size: 12px;
font-family: var(--psc-font-mono);
color: var(--psc-text-secondary);
text-decoration: none;
border: 1px dashed var(--psc-border-base);
border-radius: var(--psc-radius-sm);
transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.psc-sample-link:hover {
color: var(--psc-brand);
border-color: var(--psc-brand-soft);
background: var(--psc-brand-soft);
}
/* ═══════════════════════════════════════════════════════════════════════
FAQ + Accordion
═══════════════════════════════════════════════════════════════════════ */
.psc-faq-block { margin: var(--psc-space-xl) auto; max-width: 720px; }
.psc-faq-block__title { font-size: 22px; margin: 0 0 var(--psc-space-md); text-align: center; }
.psc-faq-list { display: flex; flex-direction: column; gap: 8px; }
.psc-faq-item { background: var(--psc-bg-elevated); border: 1px solid var(--psc-border-base); border-radius: var(--psc-radius-md); overflow: hidden; }
.psc-faq-question { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; background: none; border: none; font-size: 14px; font-weight: 600; color: var(--psc-text-primary); cursor: pointer; text-align: left; transition: background var(--psc-transition); }
.psc-faq-question:hover { background: var(--psc-bg-muted); }
.psc-faq-icon { color: var(--psc-text-muted); transition: transform var(--psc-transition); flex-shrink: 0; }
.psc-faq-item.is-open .psc-faq-icon { transform: rotate(180deg); }
.psc-faq-answer { padding: 0 16px 16px; font-size: 14px; color: var(--psc-text-secondary); line-height: 1.65; }
/* Native accordion (used by pricing page) */
.psc-accordion-item { background: var(--psc-bg-elevated); border: 1px solid var(--psc-border-base); border-radius: var(--psc-radius-md); margin-bottom: 8px; padding: 0; }
.psc-accordion-q { padding: 14px 16px; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; color: var(--psc-text-primary); }
.psc-accordion-q::-webkit-details-marker { display: none; }
.psc-accordion-q::after { content: '+'; float: right; font-size: 18px; color: var(--psc-text-muted); line-height: 1; }
.psc-accordion-item[open] .psc-accordion-q::after { content: '−'; }
.psc-accordion-a { padding: 0 16px 16px; font-size: 14px; color: var(--psc-text-secondary); line-height: 1.65; }
.psc-faq.psc-prose details { margin-bottom: 8px; }
/* ═══════════════════════════════════════════════════════════════════════
Related posts
═══════════════════════════════════════════════════════════════════════ */
.psc-related-posts { margin: var(--psc-space-2xl) 0; }
.psc-related-posts__title { font-size: 22px; margin: 0 0 var(--psc-space-md); }
.psc-related-posts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--psc-space-md); }
.psc-related-card { background: var(--psc-bg-elevated); border: 1px solid var(--psc-border-base); border-radius: var(--psc-radius-md); overflow: hidden; transition: transform var(--psc-transition), box-shadow var(--psc-transition); }
.psc-related-card:hover { transform: translateY(-2px); box-shadow: var(--psc-shadow-sm); }
.psc-related-card__img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; }
.psc-related-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.psc-related-card__body { padding: 14px 16px; }
.psc-related-card__cat { display: inline-block; font-size: 10px; font-weight: 700; color: var(--psc-brand); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.psc-related-card__title { font-size: 15px; margin: 0 0 6px; line-height: 1.35; }
.psc-related-card__title a { color: var(--psc-text-primary); }
.psc-related-card__excerpt { font-size: 13px; color: var(--psc-text-secondary); margin: 0 0 8px; line-height: 1.5; }
.psc-related-card__date { font-size: 11px; color: var(--psc-text-muted); }
/* v1.6.1 — sidebar 列表式相关链接（Nearby States 等）。
旧版用 padding:6px 0 + 每行 border-bottom，过于密集且 border 顶到 card 边缘很丑。
新版改为 list 间隔 + hover 浅底，无 per-row border。 */
.psc-related-heading {
font-size: 13px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.6px;
color: var(--psc-text-muted);
margin: 0 0 var(--psc-space-md);
padding-bottom: var(--psc-space-sm);
border-bottom: 1px solid var(--psc-border-base);
}
.psc-related-list {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 2px;
}
.psc-related-link {
display: flex; justify-content: space-between; align-items: center; gap: 8px;
padding: 10px var(--psc-space-sm);
margin: 0 calc( var(--psc-space-sm) * -1 ); /* 让 hover 背景延伸到 card padding 边 */
font-size: 13px;
color: var(--psc-brand);
text-decoration: none;
border-radius: var(--psc-radius-sm);
transition: background var(--psc-transition), color var(--psc-transition);
}
.psc-related-link:hover {
background: var(--psc-brand-soft);
color: var(--psc-brand-hover);
}
.psc-related-arrow {
color: var(--psc-text-muted);
font-size: 14px;
flex-shrink: 0;
transition: transform var(--psc-transition);
}
.psc-related-link:hover .psc-related-arrow {
color: var(--psc-brand);
transform: translateX(3px);
}
/* ═══════════════════════════════════════════════════════════════════════
Paid report CTA block
═══════════════════════════════════════════════════════════════════════ */
.psc-paid-cta-block { padding: var(--psc-space-lg); margin: var(--psc-space-lg) 0; position: relative; background: linear-gradient(135deg, var(--psc-bg-elevated), var(--psc-brand-soft)); border-color: var(--psc-brand); }
.psc-paid-cta-block__badge { display: inline-block; background: var(--psc-gold); color: #fff; padding: 3px 10px; border-radius: var(--psc-radius-xl); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.psc-paid-cta-block__heading { font-size: 18px; margin: 0 0 8px; }
.psc-paid-cta-block__sub { font-size: 13px; color: var(--psc-text-secondary); margin: 0 0 var(--psc-space-md); line-height: 1.5; }
.psc-paid-cta-block__features { list-style: none; margin: 0 0 var(--psc-space-md); padding: 0; }
.psc-paid-cta-block__features li { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; color: var(--psc-text-base); }
.psc-paid-cta-block__features li svg { color: var(--psc-success); flex-shrink: 0; }
.psc-paid-cta-block__reassure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--psc-text-muted); margin: 12px 0 0; }
/* ═══════════════════════════════════════════════════════════════════════
Cookie banner
═══════════════════════════════════════════════════════════════════════ */
.psc-cookie-banner { position: fixed; bottom: 16px; left: 16px; right: 16px; max-width: 560px; background: var(--psc-bg-elevated); border: 1px solid var(--psc-border-base); border-radius: var(--psc-radius-lg); box-shadow: var(--psc-shadow-lg); padding: 18px; z-index: 9000; }
.psc-cookie-inner { display: flex; flex-direction: column; gap: 12px; }
.psc-cookie-text { font-size: 13px; color: var(--psc-text-secondary); }
.psc-cookie-title { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--psc-text-primary); margin-bottom: 6px; }
.psc-cookie-desc { font-size: 13px; color: var(--psc-text-secondary); margin: 0; line-height: 1.55; }
.psc-cookie-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.psc-cookie-btn { padding: 7px 12px; border-radius: var(--psc-radius-sm); font-size: 12px; font-weight: 600; border: 1px solid var(--psc-border-base); background: var(--psc-bg-base); color: var(--psc-text-secondary); cursor: pointer; transition: all var(--psc-transition); }
.psc-cookie-btn:hover { background: var(--psc-bg-muted); }
.psc-cookie-btn-accept { background: var(--psc-brand); color: #fff; border-color: var(--psc-brand); }
.psc-cookie-btn-accept:hover { background: var(--psc-brand-hover); }
.psc-cookie-btn-save { background: var(--psc-success); color: #fff; border-color: var(--psc-success); }
.psc-cookie-toggle-group { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--psc-border-subtle); }
.psc-cookie-cat { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--psc-text-secondary); padding: 4px 0; }
.psc-cookie-cat input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
@media (max-width: 480px) {
.psc-cookie-banner { left: 8px; right: 8px; bottom: 8px; padding: 14px; }
}
/* ═══════════════════════════════════════════════════════════════════════
Language switcher
═══════════════════════════════════════════════════════════════════════ */
.psc-lang-switcher { position: relative; }
.psc-lang-current { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: none; border: 1px solid var(--psc-border-base); border-radius: var(--psc-radius-sm); font-size: 12px; font-weight: 600; color: var(--psc-text-secondary); cursor: pointer; transition: all var(--psc-transition); }
.psc-lang-current:hover { background: var(--psc-bg-muted); color: var(--psc-text-primary); }
.psc-lang-flag { font-size: 14px; line-height: 1; }
.psc-lang-code { font-family: var(--psc-font-mono); }
.psc-lang-dropdown {
position: absolute; top: 100%; right: 0; margin-top: 6px;
min-width: 160px; list-style: none; padding: 6px;
background: var(--psc-bg-elevated); border: 1px solid var(--psc-border-base);
border-radius: var(--psc-radius-md); box-shadow: var(--psc-shadow-md);
z-index: 200; display: none;
}
/* v1.7.33 fix：透明 bridge 改为完整覆盖 trigger + dropdown 之间的间隙 +
trigger 横向延伸，确保鼠标从 trigger 任意位置移到 dropdown 都不丢 hover。
原来只有 ::before 6px 高，trigger 比 dropdown 窄时鼠标横向偏移就会掉出。 */
.psc-lang-dropdown::before {
content: '';
position: absolute;
top: -12px; /* 覆盖 6px margin + 6px 缓冲 */
left: -200px; /* 横向远超 trigger 宽度，鼠标对角线移动也不会丢 */
right: -50px;
height: 14px;
background: transparent;
}
.psc-lang-switcher:hover .psc-lang-dropdown,
.psc-lang-switcher:focus-within .psc-lang-dropdown,
.psc-lang-switcher.is-open .psc-lang-dropdown { display: block; }
.psc-lang-dropdown a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--psc-radius-sm); font-size: 13px; color: var(--psc-text-base); text-decoration: none; }
.psc-lang-dropdown a:hover { background: var(--psc-bg-muted); }
.psc-lang-dropdown [aria-current="true"] a { background: var(--psc-brand-soft); color: var(--psc-brand); font-weight: 600; }
/* ═══════════════════════════════════════════════════════════════════════
Two-column layout (state / injury / accident pages)
═══════════════════════════════════════════════════════════════════════ */
.psc-two-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--psc-space-lg); align-items: start; }
.psc-col-main { min-width: 0; }
.psc-col-side { min-width: 0; position: sticky; top: 80px; }
@media (max-width: 900px) {
.psc-two-col { grid-template-columns: 1fr; }
.psc-col-side { position: static; }
}
.psc-side-cta { padding: var(--psc-space-md); }
.psc-side-cta-title { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.psc-page-hero--state { text-align: left; margin-bottom: var(--psc-space-lg); }
/* ═══════════════════════════════════════════════════════════════════════
State / Injury / Accident index cards
═══════════════════════════════════════════════════════════════════════ */
.psc-states-index-grid,
/* v1.7.4：injury 列表保持紧凑（卡片内容简单）；
accident 列表卡片有 description + key_facts + multiplier + button → 内容更多，需要更宽列。
旧版 200px minmax 在 7 个 accident card 上让每张过窄 → row 2 卡片视觉上挤进 row 1。
现在 accident grid 加宽到 280px minmax + 显式 align-items:stretch + grid-auto-rows 让每行规整。 */
.psc-injuries-index-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
}
.psc-accidents-index-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-auto-rows: 1fr; /* 同一行内卡片等高 */
gap: var(--psc-space-md);
align-items: stretch;
}
.psc-state-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; background: var(--psc-bg-elevated); border: 1px solid var(--psc-border-base); border-radius: var(--psc-radius-md); text-decoration: none; transition: all var(--psc-transition); }
.psc-state-card:hover { border-color: var(--psc-brand); background: var(--psc-brand-soft); transform: translateY(-1px); }
.psc-state-card__abbr { font-family: var(--psc-font-mono); font-size: 11px; font-weight: 700; color: var(--psc-brand); letter-spacing: 0.5px; }
.psc-state-card__name { font-size: 15px; font-weight: 700; color: var(--psc-text-primary); }
.psc-state-card__meta { font-size: 11px; color: var(--psc-text-muted); }
.psc-state-card__cap { display: inline-block; font-size: 10px; padding: 2px 6px; border-radius: var(--psc-radius-sm); background: var(--psc-bg-muted); color: var(--psc-text-secondary); margin-top: 4px; width: fit-content; }
.psc-state-caps-card { padding: var(--psc-space-md); }
/* Injury/Accident cards (BEM) */
.psc-injury-card,
.psc-accident-card {
display: flex; flex-direction: column; gap: 6px;
padding: var(--psc-space-md);
background: var(--psc-bg-elevated);
border: 1px solid var(--psc-border-base);
border-radius: var(--psc-radius-md);
text-decoration: none;
transition: all var(--psc-transition);
/* v1.7.4：grid 容器用 grid-auto-rows:1fr 做等高，卡片内 stretch 占满；
min-width:0 防止 flex/grid item 无法收缩到 minmax 的下限 */
height: 100%;
min-width: 0;
}
.psc-accident-card .psc-btn { margin-top: auto; } /* 按钮永远贴底，多内容卡片不挤压它 */
.psc-injury-card:hover,
.psc-accident-card:hover { border-color: var(--psc-brand); transform: translateY(-1px); box-shadow: var(--psc-shadow-sm); }
.psc-injury-card__icon,
.psc-accident-card__icon { width: 36px; height: 36px; border-radius: var(--psc-radius-sm); background: var(--psc-brand-soft); color: var(--psc-brand); display: inline-flex; align-items: center; justify-content: center; }
.psc-injury-card__name,
.psc-accident-card__title { font-size: 15px; font-weight: 700; color: var(--psc-text-primary); margin: 0; }
.psc-injury-card__range,
.psc-accident-card__range { font-family: var(--psc-font-mono); font-size: 12px; color: var(--psc-text-secondary); }
.psc-injury-card__severity { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--psc-text-muted); }
.psc-injury-card__severity--low { color: var(--psc-success); }
.psc-injury-card__severity--mid { color: var(--psc-gold); }
.psc-injury-card__severity--high { color: var(--psc-error); }
.psc-injury-cat-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: var(--psc-radius-xl); background: var(--psc-bg-muted); color: var(--psc-text-secondary); }
.psc-injury-stats-bar { display: flex; gap: var(--psc-space-md); padding: var(--psc-space-md); background: var(--psc-bg-muted); border-radius: var(--psc-radius-md); flex-wrap: wrap; }
.psc-accident-card__header { display: flex; align-items: center; gap: 10px; }
.psc-accident-card__desc { font-size: 13px; color: var(--psc-text-secondary); margin: 0; line-height: 1.5; }
.psc-accident-card__facts { display: flex; gap: 8px; font-size: 11px; color: var(--psc-text-muted); flex-wrap: wrap; }
.psc-accident-card__mult { font-family: var(--psc-font-mono); color: var(--psc-brand); font-weight: 700; }
/* ═══════════════════════════════════════════════════════════════════════
Account page (scoped under .psc-account-page — 不影响其他用了 .psc-card 的页面)
═══════════════════════════════════════════════════════════════════════ */
.psc-account-page { max-width: 880px; margin: 0 auto; }
/* Hero — 个人面板用左对齐，比营销页 hero 更克制 */
.psc-account-hero { margin-bottom: 28px; }
.psc-account-title {
font-size: clamp(24px, 3vw, 32px);
font-weight: 800;
margin: 0 0 6px;
color: var(--psc-text-primary);
letter-spacing: -0.5px;
}
.psc-account-welcome { font-size: 15px; color: var(--psc-text-secondary); margin: 0; }
/* 卡片：自带 padding，避免依赖每个内部元素的 inline style */
.psc-account-card {
background: var(--psc-bg-elevated);
border: 1px solid var(--psc-border-base);
border-radius: var(--psc-radius-lg);
box-shadow: var(--psc-shadow-sm);
padding: 22px 24px;
margin-bottom: 18px;
}
.psc-account-card-header {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--psc-border-subtle);
}
.psc-account-card-title {
font-size: 15px;
font-weight: 700;
margin: 0;
color: var(--psc-text-primary);
letter-spacing: -0.2px;
}
.psc-account-card-footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--psc-border-subtle); }
/* Plan 卡片 */
.psc-account-card--plan {
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
background: linear-gradient(135deg, var(--psc-bg-elevated) 0%, var(--psc-brand-soft) 100%);
border-color: var(--psc-brand);
}
.psc-account-plan-info { flex: 1; min-width: 200px; }
.psc-account-plan-info .psc-plan-badge { margin-bottom: 6px; }
.psc-account-plan-meta { font-size: 13px; color: var(--psc-text-secondary); margin: 0; line-height: 1.5; }
.psc-account-plan-meta a { color: var(--psc-brand); font-weight: 600; }
.psc-account-plan-cta { flex-shrink: 0; }
/* 空态文本 */
.psc-account-empty { color: var(--psc-text-muted); font-size: 13px; margin: 0; }
/* My Calculations 表格 — 替代 JS 里散落的 inline padding:8px 4px */
.psc-calcs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.psc-calcs-table th,
.psc-calcs-table td { padding: var(--psc-space-sm) var(--psc-space-xs); }
.psc-calcs-table thead tr { color: var(--psc-text-muted); text-align: left; border-bottom: 1px solid var(--psc-border-base); }
.psc-calcs-table tbody td { vertical-align: middle; }
/* GDPR section */
.psc-account-gdpr-desc { font-size: 13px; color: var(--psc-text-muted); margin: 0 0 14px; line-height: 1.6; }
.psc-account-gdpr-msg { font-size: 13px; margin-bottom: 12px; padding: 10px 14px; border-radius: 6px; background: var(--psc-bg-muted); }
.psc-account-gdpr-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.psc-account-gdpr-delete { color: var(--psc-error) !important; }
/* Data list（设置项，KV 对照）*/
.psc-data-list { margin: 0; padding: 0; }
.psc-data-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--psc-border-subtle); font-size: 14px; }
.psc-data-row:last-child { border-bottom: none; }
.psc-data-row dt { color: var(--psc-text-muted); font-size: 13px; }
.psc-data-row dd { margin: 0; color: var(--psc-text-primary); font-weight: 600; }
/* 移动端：hero 和 plan 卡片更紧凑 */
@media (max-width: 600px) {
.psc-account-card { padding: 18px 18px; }
.psc-account-card--plan { flex-direction: column; align-items: stretch; text-align: center; }
.psc-account-plan-cta { width: 100%; }
}
.psc-data-note { font-size: 12px; color: var(--psc-text-muted); margin-top: 8px; }
.psc-status-badge { display: inline-block; padding: 2px 8px; border-radius: var(--psc-radius-xl); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; background: var(--psc-bg-muted); color: var(--psc-text-secondary); }
.psc-status-pending { background: #fef3c7; color: #78350f; }
.psc-status-completed,
.psc-status-paid { background: #d1fae5; color: #065f46; }
.psc-status-failed,
.psc-status-refunded { background: #fee2e2; color: #7f1d1d; }
.psc-status-active { background: var(--psc-brand-soft); color: var(--psc-brand); }
.psc-status-approved { background: #ddd6fe; color: #4c1d95; }
.psc-status-suspended { background: #f3f4f6; color: #374151; }
.psc-stat-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--psc-bg-muted); border-radius: var(--psc-radius-xl); font-size: 12px; }
.psc-stat-label { color: var(--psc-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
.psc-stat-value { font-family: var(--psc-font-mono); font-weight: 700; color: var(--psc-text-primary); }
/* ═══════════════════════════════════════════════════════════════════════
Pagination
═══════════════════════════════════════════════════════════════════════ */
.psc-pagination { margin: var(--psc-space-xl) 0; }
.psc-pagination-list { display: flex; justify-content: center; gap: 4px; list-style: none; padding: 0; margin: 0; }
.psc-pagination-item { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--psc-border-base); border-radius: var(--psc-radius-sm); background: var(--psc-bg-base); font-size: 13px; color: var(--psc-text-secondary); text-decoration: none; transition: all var(--psc-transition); }
.psc-pagination-item:hover { border-color: var(--psc-brand); color: var(--psc-brand); }
.psc-pagination-item[aria-current="page"],
.psc-pagination-item.is-current { background: var(--psc-brand); color: #fff; border-color: var(--psc-brand); }
/* ═══════════════════════════════════════════════════════════════════════
404 / archive / search / no-results
═══════════════════════════════════════════════════════════════════════ */
.psc-404 { padding: var(--psc-space-2xl) var(--psc-space-lg); text-align: center; max-width: 600px; margin: 0 auto; }
.psc-no-results { padding: var(--psc-space-xl); text-align: center; color: var(--psc-text-muted); }
.psc-archive-header,
.psc-search-header { text-align: center; margin-bottom: var(--psc-space-lg); padding: var(--psc-space-lg) 0; border-bottom: 1px solid var(--psc-border-subtle); }
.psc-archive-desc { font-size: 14px; color: var(--psc-text-secondary); max-width: 600px; margin: 8px auto 0; }
/* ═══════════════════════════════════════════════════════════════════════
Post / loop cards (single & archive)
═══════════════════════════════════════════════════════════════════════ */
.psc-post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--psc-space-lg); margin-bottom: var(--psc-space-xl); }
.psc-post-header { margin-bottom: var(--psc-space-md); }
.psc-post-meta-top,
.psc-post-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--psc-text-muted); margin-bottom: 6px; }
.psc-post-cat { display: inline-block; padding: 2px 8px; background: var(--psc-brand-soft); color: var(--psc-brand); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; border-radius: var(--psc-radius-sm); }
.psc-post-read-time::before { content: '·'; margin-right: 4px; }
.psc-post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--psc-space-md); }
.psc-post-featured-img { width: 100%; height: auto; border-radius: var(--psc-radius-md); margin-bottom: var(--psc-space-md); }
.psc-post-footer { padding-top: var(--psc-space-md); margin-top: var(--psc-space-lg); border-top: 1px solid var(--psc-border-subtle); }
.psc-post-cta { padding: var(--psc-space-md); background: var(--psc-bg-muted); border-radius: var(--psc-radius-md); text-align: center; margin: var(--psc-space-lg) 0; }
.psc-card-cat { display: inline-block; font-size: 10px; font-weight: 700; color: var(--psc-brand); text-transform: uppercase; letter-spacing: 0.4px; }
.psc-card-date { font-size: 11px; color: var(--psc-text-muted); }
.psc-card-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--psc-text-muted); margin-bottom: 8px; }
.psc-card-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--psc-radius-md); margin-bottom: 12px; }
.psc-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.psc-card-excerpt { font-size: 13px; color: var(--psc-text-secondary); line-height: 1.55; margin: 0 0 12px; }
.psc-card-read-more { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--psc-brand); }
/* ═══════════════════════════════════════════════════════════════════════
Misc: tags, notices, badges, dropzone
═══════════════════════════════════════════════════════════════════════ */
.psc-tag-chip { display: inline-block; padding: 3px 8px; background: var(--psc-bg-muted); color: var(--psc-text-secondary); border-radius: var(--psc-radius-xl); font-size: 11px; }
.psc-notice--success { background: #d1fae5; border-color: var(--psc-success); color: #065f46; }
/* ═══════════════════════════════════════════════════════════════════════
v1.5.7 — 用户帮助度升级组件
═══════════════════════════════════════════════════════════════════════ */
/* 计算结果区数字含义解释（折叠面板）*/
.psc-result-explainer {
background: var(--psc-bg-muted);
border-radius: var(--psc-radius-md);
padding: var(--psc-space-md);
margin-top: var(--psc-space-md);
margin-bottom: var(--psc-space-md);
font-size: 13px;
}
.psc-result-explainer summary {
cursor: pointer; font-weight: 700; color: var(--psc-text-primary);
padding: 4px 0;
}
.psc-result-explain-list {
margin-top: var(--psc-space-sm); display: flex; flex-direction: column; gap: 8px;
}
.psc-result-explain-list li { line-height: 1.55; color: var(--psc-text-secondary); }
.psc-result-explain-list strong { color: var(--psc-brand); display: inline-block; margin-right: 4px; }
/* 30 秒决策工具 */
.psc-decision-tool {
margin-top: var(--psc-space-lg);
padding: var(--psc-space-md);
background: linear-gradient(135deg, var(--psc-bg-elevated) 0%, var(--psc-brand-soft) 100%);
border: 1px solid var(--psc-brand);
border-radius: var(--psc-radius-md);
}
.psc-decision-title { font-size: 15px; font-weight: 800; margin: 0 0 4px; color: var(--psc-brand); }
.psc-decision-sub { font-size: 12px; color: var(--psc-text-muted); margin: 0 0 var(--psc-space-md); }
.psc-decision-questions { display: flex; flex-direction: column; gap: 10px; }
.psc-decision-q {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding: 8px 0; border-bottom: 1px dashed var(--psc-border-subtle);
}
.psc-decision-q-text { font-size: 13px; color: var(--psc-text-primary); flex: 1; }
.psc-decision-q-btns { display: flex; gap: 6px; flex-shrink: 0; }
.psc-decision-btn {
padding: 4px 12px; font-size: 12px; font-weight: 600;
background: var(--psc-bg-paper); border: 1px solid var(--psc-border-base);
border-radius: var(--psc-radius-sm); cursor: pointer; color: var(--psc-text-primary);
transition: all 0.15s;
}
.psc-decision-btn:hover { border-color: var(--psc-brand); }
.psc-decision-btn.is-active { background: var(--psc-brand); color: #fff; border-color: var(--psc-brand); }
.psc-decision-result {
margin-top: var(--psc-space-md); padding: var(--psc-space-md);
border-radius: var(--psc-radius-md);
display: flex; gap: 12px; align-items: flex-start;
}
.psc-decision-result--diy { background: #d1fae5; border-left: 3px solid #10b981; }
.psc-decision-result--consult { background: #fef3c7; border-left: 3px solid var(--psc-accent-gold); }
.psc-decision-result--hire { background: #fee2e2; border-left: 3px solid #ef4444; }
.psc-decision-rec-title { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.psc-decision-rec-text { font-size: 13px; line-height: 1.55; color: var(--psc-text-secondary); }
/* 谈判要点折叠面板 */
.psc-negotiation-tips {
margin-top: var(--psc-space-md);
background: var(--psc-bg-paper);
border: 1px solid var(--psc-border-base);
border-radius: var(--psc-radius-md);
padding: var(--psc-space-md);
}
.psc-negotiation-tips summary {
cursor: pointer; font-weight: 700; font-size: 14px;
display: flex; align-items: center; gap: 8px;
}
.psc-neg-tip-list {
margin-top: var(--psc-space-md);
padding-left: var(--psc-space-lg);
display: flex; flex-direction: column; gap: 10px;
list-style: decimal;
}
.psc-neg-tip-list li { font-size: 13px; line-height: 1.6; color: var(--psc-text-secondary); }
.psc-neg-tip-list strong { color: var(--psc-text-primary); display: block; margin-bottom: 2px; }
.psc-neg-tip-cta { margin-top: var(--psc-space-md); text-align: center; }
/* Pain Severity 参考表 */
.psc-severity-guide {
margin-top: var(--psc-space-sm);
background: var(--psc-bg-muted); border-radius: var(--psc-radius-sm);
padding: 8px var(--psc-space-md); font-size: 12px;
}
.psc-severity-guide summary { cursor: pointer; font-weight: 600; color: var(--psc-text-secondary); }
.psc-severity-table {
margin-top: 8px; border-collapse: collapse; width: 100%;
}
.psc-severity-table td {
padding: 6px 8px; vertical-align: top; line-height: 1.5;
border-bottom: 1px dashed var(--psc-border-subtle);
}
.psc-severity-table tr:last-child td { border-bottom: none; }
.psc-sev-num {
font-family: var(--psc-font-mono); font-weight: 700; color: var(--psc-brand);
width: 50px; white-space: nowrap;
}
/* 表单底部特殊情况 details（minor / 政府 / 重伤）*/
.psc-special-cases {
margin-top: var(--psc-space-sm);
padding: 8px var(--psc-space-md);
background: var(--psc-bg-muted); border-radius: var(--psc-radius-sm);
font-size: 12px;
}
.psc-special-cases summary { cursor: pointer; font-weight: 600; color: var(--psc-text-secondary); }
.psc-special-cases-list {
margin-top: 10px; padding-left: var(--psc-space-md);
display: flex; flex-direction: column; gap: 8px;
list-style: disc;
}
.psc-special-cases-list li { line-height: 1.55; color: var(--psc-text-secondary); }
.psc-special-cases-list strong { color: var(--psc-text-primary); display: block; }
/* Methodology page reviewer byline */
.psc-reviewer-byline {
display: inline-flex; align-items: center; gap: 6px;
margin-top: var(--psc-space-sm);
padding: 4px 12px; background: var(--psc-bg-muted);
border-radius: var(--psc-radius-xl);
font-size: 13px; color: var(--psc-text-secondary);
}
.psc-reviewer-byline svg { color: var(--psc-success); }
.psc-page-meta { font-size: 12px; color: var(--psc-text-muted); margin-top: 8px; }
.psc-reviewer-bio { background: var(--psc-bg-muted); padding: var(--psc-space-md); border-radius: var(--psc-radius-md); }
/* v1.7.0 — 服务临时禁用通知卡（auth/billing toggle）*/
.psc-service-disabled {
text-align: center;
padding: var(--psc-space-2xl) var(--psc-space-lg);
background: var(--psc-bg-elevated);
border: 1px solid var(--psc-border-base);
border-radius: var(--psc-radius-lg);
box-shadow: var(--psc-shadow-md);
}
.psc-service-disabled__icon {
display: inline-flex; justify-content: center; align-items: center;
width: 72px; height: 72px;
margin-bottom: var(--psc-space-md);
background: var(--psc-brand-soft);
color: var(--psc-brand);
border-radius: 50%;
}
.psc-service-disabled__title {
font-size: 22px; font-weight: 800;
margin: 0 0 var(--psc-space-md);
color: var(--psc-text-primary);
letter-spacing: -0.5px;
}
.psc-service-disabled__msg {
font-size: 15px; line-height: 1.65;
color: var(--psc-text-secondary);
margin: 0 0 var(--psc-space-md);
max-width: 480px; margin-left: auto; margin-right: auto;
}
.psc-service-disabled__hint {
font-size: 13px; color: var(--psc-text-muted); margin: 0;
}
.psc-service-disabled__hint a { color: var(--psc-brand); text-decoration: underline; }
/* v1.7.3 — admin 兜底登录链接（小字，与正文有视觉分隔）*/
.psc-service-disabled__admin-link {
font-size: 12px; color: var(--psc-text-muted);
margin: var(--psc-space-md) 0 0;
padding-top: var(--psc-space-md);
border-top: 1px dashed var(--psc-border-subtle);
}
.psc-service-disabled__admin-link a { color: var(--psc-text-muted); text-decoration: underline; }
.psc-service-disabled__admin-link a:hover { color: var(--psc-brand); }
/* nav 顶部"已暂停"灰色徽章 */
.psc-nav-paused-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px;
background: var(--psc-bg-muted);
color: var(--psc-text-muted);
border: 1px dashed var(--psc-border-base);
border-radius: var(--psc-radius-xl);
cursor: not-allowed;
}
.psc-nav-paused-badge::before {
content: '⏸';
font-size: 10px;
}
/* 州 / 伤害页正文顶部多语言提示（内容固定英文，避免法律术语翻译风险）*/
.psc-translation-notice {
display: flex; align-items: flex-start; gap: 8px;
padding: 10px var(--psc-space-md);
margin-bottom: var(--psc-space-lg);
background: var(--psc-bg-muted);
border-left: 3px solid var(--psc-text-muted);
border-radius: var(--psc-radius-sm);
font-size: 12px;
color: var(--psc-text-muted);
line-height: 1.5;
}
.psc-translation-notice svg { flex-shrink: 0; margin-top: 2px; }
.psc-state-intro { font-size: 15px; line-height: 1.7; color: var(--psc-text-secondary); }
/* AI 表单顶部配额徽章 — 用户提交前知道还能用几次 */
.psc-quota-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px var(--psc-space-md);
border-radius: var(--psc-radius-xl);
font-size: 12px; font-weight: 600;
margin-bottom: var(--psc-space-md);
}
.psc-quota-badge::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
}
.psc-quota-badge--ok { background: var(--psc-brand-soft); color: var(--psc-brand); }
.psc-quota-badge--empty { background: #fef3c7; color: #92400e; }
.psc-quota-badge--locked { background: #fee2e2; color: #991b1b; }
.psc-quota-badge--unlimited { background: #d1fae5; color: #065f46; }
.psc-input-num { font-variant-numeric: tabular-nums; }
/* CTA strip 默认 navy 底白字。模板若覆盖 background，h2 颜色应继承默认 dark text */
.psc-cta-strip { padding: var(--psc-space-lg); background: var(--psc-brand); color: #fff; border-radius: var(--psc-radius-lg); text-align: center; }
.psc-cta-strip > * { color: inherit; } /* 文字跟着 strip 自身的 color 走，bg 被覆盖时不会撞色 */
.psc-trust-grid,
.psc-trust-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--psc-space-md); }
.psc-prose-page { max-width: 760px; margin-inline: auto; }
.psc-page-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--psc-space-md); }
.psc-page-group { margin-bottom: var(--psc-space-xl); }
.psc-page-group-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--psc-text-muted); margin-bottom: 12px; }
.psc-page-badge { display: inline-block; padding: 3px 10px; background: var(--psc-bg-muted); color: var(--psc-text-secondary); border-radius: var(--psc-radius-xl); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.psc-legal-disclaimer {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
background: var(--psc-bg-muted);
border: 1px solid var(--psc-border-subtle);
border-left: 3px solid var(--psc-text-muted);
border-radius: var(--psc-radius-md);
margin: var(--psc-space-lg) 0;
}
.psc-legal-disclaimer__icon {
flex-shrink: 0;
color: var(--psc-text-muted);
margin-top: 1px;
}
.psc-legal-disclaimer__body {
flex: 1;
font-size: 12px;
line-height: 1.55;
color: var(--psc-text-secondary);
}
.psc-legal-disclaimer__label {
color: var(--psc-text-primary);
font-weight: 700;
margin-right: 4px;
}
.psc-legal-disclaimer__state {
display: block;
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed var(--psc-border-base);
font-size: 11px;
color: var(--psc-text-muted);
}
.psc-save-bar { position: sticky; bottom: 0; padding: 12px 16px; background: var(--psc-bg-elevated); border-top: 1px solid var(--psc-border-base); display: flex; justify-content: space-between; align-items: center; gap: 12px; box-shadow: var(--psc-shadow-md); }
.psc-save-bar-info { font-size: 13px; color: var(--psc-text-secondary); }
.psc-page-links { margin: var(--psc-space-md) 0; font-size: 13px; }
.psc-value--success { color: var(--psc-success); }
.psc-value--warning { color: #d97706; }
/* Doc analyzer dropzone */
.psc-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: var(--psc-space-xl); border: 2px dashed var(--psc-border-base); border-radius: var(--psc-radius-lg); background: var(--psc-bg-muted); cursor: pointer; transition: all var(--psc-transition); }
.psc-dropzone:hover,
.psc-dropzone.is-dragover { border-color: var(--psc-brand); background: var(--psc-brand-soft); }
.psc-dropzone-label { font-size: 15px; font-weight: 700; color: var(--psc-text-primary); }
.psc-dropzone-hint { font-size: 12px; color: var(--psc-text-muted); }
.psc-dropzone-link { color: var(--psc-brand); text-decoration: underline; cursor: pointer; }
.psc-dropzone-filename { font-family: var(--psc-font-mono); font-size: 12px; color: var(--psc-text-secondary); }
/* Provider card (find-a-lawyer / contact?) */
.psc-provider-card { padding: var(--psc-space-md); background: var(--psc-bg-elevated); border: 1px solid var(--psc-border-base); border-radius: var(--psc-radius-md); }
.psc-provider-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.psc-provider-card-title { font-size: 15px; font-weight: 700; margin: 0; }
/* Footer extras (already partially in main CSS) */
.psc-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--psc-space-lg); }
@media (max-width: 768px) { .psc-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .psc-footer-grid { grid-template-columns: 1fr; } }
.psc-footer-heading { font-size: 13px; font-weight: 700; color: #fff; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.psc-footer-links { list-style: none; margin: 0; padding: 0; }
.psc-footer-links li { margin-bottom: 8px; }
.psc-footer-links a { font-size: 13px; color: rgba(255,255,255,.7); text-decoration: none; }
.psc-footer-links a:hover { color: #fff; }
.psc-footer-tagline { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.6; margin: 8px 0 0; }
.psc-footer-legal-nav { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; }
.psc-footer-legal-nav a { color: rgba(255,255,255,.6); }
/* Nav modifier (CTA pill) */
.psc-nav-link--cta { background: var(--psc-brand); color: #fff !important; padding: 6px 14px !important; border-radius: var(--psc-radius-sm); font-weight: 700; }
.psc-nav-link--cta:hover { background: var(--psc-brand-hover); color: #fff !important; }
.psc-nav-link--sub-trigger { display: inline-flex; align-items: center; gap: 4px; }
/* Mobile: subnav has-sub */
.psc-mobile-has-sub { position: relative; }
/* Breadcrumb structured list (microdata version) — 分隔符由 PHP 输出 .psc-breadcrumb-sep，CSS 不再用 ::before 加 */
.psc-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0 0 var(--psc-space-lg); font-size: 13px; color: var(--psc-text-muted); }
.psc-breadcrumb-item { display: inline-flex; align-items: center; gap: 4px; }
.psc-breadcrumb-item a { color: var(--psc-brand); text-decoration: none; }
.psc-breadcrumb-item a:hover { text-decoration: underline; }
.psc-breadcrumb-item[aria-current="page"] { color: var(--psc-text-secondary); }
.psc-breadcrumb-sep { color: var(--psc-text-muted); margin: 0 6px; }
/* Cookie banner: customize / reject button accents (specifics on top of .psc-cookie-btn base) */
.psc-cookie-btn-reject { color: var(--psc-text-muted); }
.psc-cookie-btn-customize { color: var(--psc-brand); border-color: var(--psc-brand); background: transparent; }
.psc-cookie-btn-customize:hover { background: var(--psc-brand-soft); }
/* Footer logo wrapper (used inside .psc-footer-brand for alignment) */
.psc-footer-logo { display: inline-flex; align-items: center; gap: 8px; }
.psc-footer-logo .psc-logo-text { color: #fff; }
/* Lang switcher alternate / verbose markup */
.psc-lang-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: none; border: 1px solid var(--psc-border-base); border-radius: var(--psc-radius-sm); font-size: 12px; color: var(--psc-text-secondary); cursor: pointer; }
.psc-lang-trigger:hover { background: var(--psc-bg-muted); }
.psc-lang-label { font-weight: 600; }
.psc-lang-chevron { transition: transform var(--psc-transition); }
.psc-lang-switcher.is-open .psc-lang-chevron,
[aria-expanded="true"] .psc-lang-chevron { transform: rotate(180deg); }
/* Lawyer CTA section wrapper (the ) */
.psc-lawyer-cta-section { padding-block: var(--psc-space-lg); }
/* Ad slots (placeholders + responsive containers) */
.psc-ad-slot { display: block; margin: var(--psc-space-md) 0; min-height: 90px; text-align: center; }
.psc-ad-unit { display: block; max-width: 100%; margin-inline: auto; }
.psc-ad-placeholder { padding: var(--psc-space-md); border: 1px dashed var(--psc-border-base); background: var(--psc-bg-muted); color: var(--psc-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-radius: var(--psc-radius-sm); }
.psc-ad-slot--sidebar_top,
.psc-ad-slot--sidebar { max-width: 320px; }
.psc-ad-slot--in_content,
.psc-ad-slot--after_result { max-width: 728px; margin-inline: auto; }
/* ═══════════════════════════════════════════════════════════════════════
Shared result page (/r/{uuid}/) + Print styles
═══════════════════════════════════════════════════════════════════════ */
.psc-shared-result { max-width: 720px; margin: 0 auto; }
.psc-shared-result__card { padding: var(--psc-space-xl) var(--psc-space-lg); }
.psc-shared-result__inputs { margin-top: var(--psc-space-lg); padding-top: var(--psc-space-md); border-top: 1px solid var(--psc-border-subtle); }
.psc-shared-result__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: var(--psc-space-lg);
padding-top: var(--psc-space-md);
border-top: 1px solid var(--psc-border-subtle);
}
.psc-shared-result__email {
display: none;
margin-top: var(--psc-space-md);
padding: var(--psc-space-md);
background: var(--psc-bg-muted);
border-radius: var(--psc-radius-md);
}
.psc-shared-result__email.is-open { display: block; }
/* Print stylesheet — clean A4-friendly output */
@media print {
body { background: #fff; color: #000; font-size: 11pt; }
.psc-no-print,
.psc-header,
.psc-trust-bar,
.psc-mobile-nav,
.psc-cookie-banner,
.psc-footer,
#wpadminbar { display: none !important; }
.psc-shared-result { max-width: none; padding: 0; }
.psc-shared-result__card {
border: 1px solid #999;
box-shadow: none;
page-break-inside: avoid;
}
.psc-result-total { color: #000 !important; }
.psc-page-title { color: #000; }
.psc-legal-disclaimer {
background: none;
border: 1px solid #ccc;
page-break-inside: avoid;
}
a { color: #000; text-decoration: none; }
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 9pt;
color: #666;
}
}