/* ================================================================
   Personal Name Checker — name-specific styles
   Sound-alike card, sample report demo
   ================================================================ */

/* ===== Sound-alike card ===== */
.name-card.sa{background:linear-gradient(135deg,#fffdf8,#faefe0);border-color:#f1c9d0}
.name-card.sa .hanzi{font-size:50px;color:var(--red)}
.sa-label{display:inline-flex;align-items:center;gap:5px;font-family:-apple-system,"Segoe UI",sans-serif;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--red2);background:#fbeaec;border:1px solid #f1c9d0;border-radius:999px;padding:3px 9px;margin-bottom:6px}
.sa-label::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red)}
.sa-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.sa-chips span{font-family:-apple-system,"Segoe UI",sans-serif;font-size:11px;background:#faefe0;color:var(--red2);border-radius:999px;padding:2px 7px;font-weight:600;border:1px solid #f1c9d0}
.sa-chips span.unk{background:#fff;color:var(--muted);border-color:var(--line);border-style:dashed}

/* ===== Sample report demo ===== */
.sample-report{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.report-top{background:linear-gradient(135deg,#2b211a,#8b0d22);color:#fff;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.report-body{display:grid;grid-template-columns:1fr 1fr;gap:0}
.report-col{padding:22px;border-right:1px solid var(--line)}
.report-col:last-child{border-right:none}
.report-line{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-family:-apple-system,"Segoe UI",sans-serif;font-size:14px}
.calligraphy{font-family:"Kaiti SC","Songti SC",serif;font-size:56px;text-align:center;color:var(--red2);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:12px}
.blur{filter:blur(3px);opacity:.72;user-select:none}

/* ===== Name-page responsive overrides ===== */
@media(max-width:780px){
  .report-top{flex-direction:column;align-items:flex-start}
  .report-col{border-right:none;border-bottom:1px solid var(--line)}
  .report-col:last-child{border-bottom:none}
  .calligraphy{font-size:44px}
}
@media(max-width:420px){
  .report-line{flex-direction:column;gap:3px;font-size:13px}
}