/* ================================================================
   Tattoo Checker — tattoo-checker/index.html
   Checker form, result card, score, bars, paywall, pricing,
   testimonials, inline report preview (rpt- prefix)
   ================================================================ */

/* ===== Hero (light — overrides common) ===== */
.hero{padding:56px 0 26px}
.kicker{display:inline-block;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--red-deep,#9c0c23);background:#fbeaec;border:1px solid #f3ccd2;padding:5px 14px;border-radius:20px;font-weight:700;margin-bottom:18px}
.hero h1{font-size:43px;line-height:1.12;letter-spacing:-.7px}
.hero p.lead{font-size:18px;color:var(--muted);max-width:680px;margin:0 auto}
.counter{font-family:-apple-system,"Segoe UI",sans-serif;font-size:13px;color:var(--muted);text-align:center;margin-top:14px}
.counter b{color:var(--ink);font-size:16px}

/* ===== Checker form ===== */
.checker{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:26px;margin-top:34px;text-align:left}
.checker label{display:block;font-size:13px;font-weight:700;letter-spacing:.4px;color:var(--muted);margin-bottom:8px;text-transform:uppercase}
.search-row{display:flex;gap:10px}
.search-row input{flex:1;font-size:24px;padding:16px 18px;border:2px solid var(--line);border-radius:12px;background:var(--paper);font-family:"Songti SC","Kaiti SC",Georgia,serif;color:var(--ink);outline:none;transition:.2s;min-width:0}
.search-row input:focus{border-color:var(--red);background:#fff}
.samples{margin-top:14px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip.zh{font-family:"Songti SC",serif;font-size:16px}

/* Upload */
.upload-box{margin-top:18px;border:1px dashed var(--gold);border-radius:14px;background:#fffaf0;padding:16px;display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap}
.upload-copy{font-family:-apple-system,"Segoe UI",sans-serif;color:var(--muted);font-size:14px;flex:1;min-width:220px}
.upload-copy b{color:var(--ink)}
.upload-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;border-radius:12px;padding:11px 16px;font-family:-apple-system,"Segoe UI",sans-serif;font-weight:700;cursor:pointer;overflow:hidden}
.upload-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.upload-preview{display:none;margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;font-family:-apple-system,"Segoe UI",sans-serif;color:var(--muted);font-size:13.5px}
.upload-preview img{display:block;max-width:180px;max-height:120px;border-radius:8px;margin-top:8px;border:1px solid var(--line)}

/* ===== Result card ===== */
#result{margin-top:26px;text-align:left}
.result-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rc-head{display:flex;gap:22px;padding:26px;border-bottom:1px solid var(--line);align-items:center;background:linear-gradient(135deg,#fffdf9,#fbf3e7)}
.glyph{font-family:"Kaiti SC","Songti SC",serif;font-size:72px;line-height:1;color:var(--ink);min-width:112px;max-width:220px;text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 10px;word-break:break-word}
.rc-head .meta{flex:1;min-width:0}
.input-label{display:inline-block;font-family:-apple-system,"Segoe UI",sans-serif;font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 9px;margin-bottom:8px}
.rc-head .pinyin{font-size:20px;color:var(--gold);font-style:italic;margin-bottom:4px}
.rc-head .mean{font-size:25px;font-weight:700;line-height:1.25}
.rc-head .literal{font-size:14px;color:var(--muted);margin-top:4px}

/* Score */
.score-wrap{display:grid;grid-template-columns:150px 1fr;gap:22px;padding:22px 26px;border-bottom:1px solid var(--line);align-items:center}
.score-circle{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;margin:auto;background:conic-gradient(var(--green) calc(var(--score)*1%),#eadfce 0);position:relative}
.score-circle:before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--card)}
.score-num{position:relative;text-align:center;font-family:-apple-system,"Segoe UI",sans-serif;font-weight:800;font-size:32px;line-height:1}
.score-num small{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:5px}
.risk{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;font-family:-apple-system,"Segoe UI",sans-serif;font-weight:700;font-size:15px;margin-bottom:12px}
.risk .dot{width:10px;height:10px;border-radius:50%}
.risk.safe{background:#e7f5ec;color:var(--green)} .risk.safe .dot{background:var(--green)}
.risk.odd{background:#fdf1dd;color:var(--amber)} .risk.odd .dot{background:var(--amber)}
.risk.risky{background:#fbe7ea;color:var(--red-deep,#9c0c23)} .risk.risky .dot{background:var(--red-deep,#9c0c23)}
.bars{display:grid;gap:9px;font-family:-apple-system,"Segoe UI",sans-serif}
.bar-row{display:grid;grid-template-columns:116px 1fr 38px;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.bar{height:8px;background:var(--paper2,#efe8dc);border-radius:999px;overflow:hidden}
.fill{height:100%;border-radius:999px;background:var(--green)}
.fill.amber{background:var(--amber)}
.fill.red{background:var(--red)}
.bar-reason{font-size:11.5px;color:var(--muted);font-style:italic;margin-top:-4px;padding-left:2px;font-family:-apple-system,"Segoe UI",sans-serif}

/* Verdict & alternatives */
.verdict{padding:20px 26px 4px;font-size:16px;color:var(--ink)}
.verdict b{color:var(--red-deep,#9c0c23)}
.alternatives{padding:14px 26px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-family:-apple-system,"Segoe UI",sans-serif;color:var(--muted);font-size:13.5px}
.alt{background:var(--paper2,#efe8dc);border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--ink);font-family:"Songti SC",serif;font-size:16px}

/* Copy button */
.copy-btn{display:inline-flex;align-items:center;gap:6px;background:var(--paper2,#efe8dc);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-family:-apple-system,"Segoe UI",sans-serif;font-size:13px;color:var(--ink);cursor:pointer;transition:.15s;margin-top:12px}
.copy-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Recent checks */
.recent-checks{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;font-family:-apple-system,"Segoe UI",sans-serif;font-size:13px;color:var(--muted)}
.recent-checks:empty{display:none}
.rch{background:var(--paper2,#efe8dc);border:1px solid var(--line);border-radius:12px;padding:4px 10px;cursor:pointer;font-family:"Songti SC",serif;font-size:15px;color:var(--ink);transition:.15s}
.rch:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* ===== Paywall ===== */
.paywall{margin:22px 26px 26px;background:var(--paper);border:1px dashed var(--gold);border-radius:14px;padding:22px}
.paywall h3{font-size:19px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.paywall .sub{font-size:14px;color:var(--muted);margin-bottom:16px}
.features{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-bottom:18px}
.features li{display:flex;gap:9px;font-size:14.5px;align-items:flex-start}
.features li .ic{color:var(--red);font-weight:700;flex-shrink:0}
.pay-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.price{font-size:30px;font-weight:800;font-family:-apple-system,sans-serif}
.price small{font-size:14px;color:var(--muted);font-weight:400}
.btn-buy{background:var(--gold);color:#fff;padding:14px 30px;font-size:16px;border-radius:12px;border:none;cursor:pointer;font-family:inherit;font-weight:700;box-shadow:0 4px 14px rgba(184,137,58,.4)}
.btn-buy:hover{filter:brightness(.95)}
.guarantee{font-size:12.5px;color:var(--muted)}

/* ===== Pricing ===== */
.pricing{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:760px;margin:auto}
.plan{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;position:relative}
.plan.hot{border-color:var(--gold);box-shadow:var(--shadow)}
.badge{position:absolute;right:16px;top:14px;font-family:-apple-system,"Segoe UI",sans-serif;font-size:11px;font-weight:800;color:#fff;background:var(--red);border-radius:999px;padding:4px 8px}
.plan h3{font-size:18px;margin-bottom:6px}
.plan .money{font-family:-apple-system,"Segoe UI",sans-serif;font-size:32px;font-weight:900;margin:10px 0}
.plan ul{list-style:none;display:grid;gap:8px;font-family:-apple-system,"Segoe UI",sans-serif;font-size:13.5px;color:var(--muted)}
.plan li:before{content:"✓";color:var(--red);font-weight:900;margin-right:7px}
.plan .plan-buy{margin-top:18px;width:100%;background:var(--gold);color:#fff;border:none;border-radius:10px;padding:12px 16px;font-family:-apple-system,"Segoe UI",sans-serif;font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 4px 14px rgba(184,137,58,.35);transition:.15s;letter-spacing:.2px}
.plan .plan-buy:hover{filter:brightness(.95);transform:translateY(-1px)}
.plan .plan-buy:active{transform:translateY(0)}

/* ===== Testimonials ===== */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.testi .stars{color:var(--gold);font-size:14px;margin-bottom:8px;letter-spacing:2px}
.testi p{font-size:14px;color:var(--muted);font-style:italic;margin-bottom:12px;line-height:1.5}
.testi .who{font-family:-apple-system,"Segoe UI",sans-serif;font-size:13px;font-weight:700;color:var(--ink)}

/* ===== Fail list ===== */
.fails{background:var(--paper2,#efe8dc);border-radius:16px;padding:26px;margin-top:8px}
.fails h3{text-align:center;font-size:20px;margin-bottom:18px}
.fail-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fail{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:14px}
.fail .zh{font-family:"Songti SC",serif;font-size:22px;color:var(--red);margin-bottom:4px}
.fail .cap{color:var(--muted)}

/* ===== Inline Report Preview (rpt- prefix) ===== */
.report-demo{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.report-top{padding:22px 24px;background:linear-gradient(135deg,#2b211a,#8b0d22);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px}
.report-top h3{font-size:22px}
.report-body{display:grid;grid-template-columns:1.05fr 1fr;gap:0}
.report-col{padding:24px;border-right:1px solid var(--line)}
.report-col:last-child{border-right:none}
.report-line{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-family:-apple-system,"Segoe UI",sans-serif;font-size:14px}
.report-line b{color:var(--ink)}
.blurred{filter:blur(3px);user-select:none;opacity:.72}

.rpt-cover{background:linear-gradient(135deg,#1a1410,#3a1520,#8b0d22);border-radius:18px 18px 0 0;padding:28px 24px;color:#fff;text-align:center;position:relative;overflow:hidden}
.rpt-cover::before{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(184,137,58,.12),transparent 70%);pointer-events:none}
.rpt-badge{display:inline-flex;align-items:center;gap:6px;font-family:-apple-system,"Segoe UI",sans-serif;font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-light,#d4b06a);background:rgba(184,137,58,.15);border:1px solid rgba(184,137,58,.25);border-radius:999px;padding:4px 12px;margin-bottom:14px}
.rpt-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
.rpt-char{font-family:"Kaiti SC","Songti SC",serif;font-size:72px;line-height:1;margin:8px 0 4px;text-shadow:0 3px 16px rgba(0,0,0,.3)}
.rpt-py{font-family:Georgia,serif;font-size:18px;color:var(--gold-light,#d4b06a);font-style:italic}
.rpt-controls{display:flex;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.rpt-speak{display:inline-flex;align-items:center;gap:6px;font-family:-apple-system,"Segoe UI",sans-serif;font-size:12px;font-weight:700;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 16px;cursor:pointer;transition:.2s}
.rpt-speak:hover{background:rgba(255,255,255,.18)}
.rpt-speak .wv{display:inline-block;width:14px;height:14px;position:relative}
.rpt-speak .wv::before,.rpt-speak .wv::after{content:"";position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.5)}
.rpt-speak .wv::before{width:7px;height:7px;top:3.5px;left:3.5px;animation:pulse-wave 1.5s ease-in-out infinite}
.rpt-speak .wv::after{width:13px;height:13px;top:.5px;left:.5px;animation:pulse-wave 1.5s ease-in-out infinite .3s}
@keyframes pulse-wave{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.rpt-speak.speaking{background:rgba(200,16,46,.3);border-color:rgba(200,16,46,.45)}

.rpt-section{padding:20px 24px;border-bottom:1px solid var(--line)}
.rpt-section:last-child{border-bottom:none}
.rpt-label{font-family:-apple-system,"Segoe UI",sans-serif;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--red2,#9c0c23);margin-bottom:10px}
.rpt-dims{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rpt-dim{background:var(--paper);border-radius:10px;padding:10px 12px}
.rpt-dim-name{font-family:-apple-system,"Segoe UI",sans-serif;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px}
.rpt-dim-bar{height:6px;background:var(--paper2,#efe8dc);border-radius:999px;overflow:hidden;margin-bottom:4px}
.rpt-dim-fill{height:100%;border-radius:999px;background:var(--green)}
.rpt-dim-score{font-family:-apple-system,"Segoe UI",sans-serif;font-size:18px;font-weight:900;color:var(--ink)}

.rpt-calli{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rpt-calli-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 8px 10px;text-align:center}
.rpt-calli-char{font-family:"Kaiti SC","Songti SC",serif;font-size:36px;color:var(--ink);line-height:1.1;margin-bottom:6px}
.rpt-calli-card.xing .rpt-calli-char{letter-spacing:3px;filter:blur(.3px)}
.rpt-calli-card.cao .rpt-calli-char{letter-spacing:5px;filter:blur(.5px);opacity:.85}
.rpt-calli-card.jin .rpt-calli-char{font-family:-apple-system,sans-serif;font-weight:900;color:var(--gold);text-shadow:0 1px 0 rgba(184,137,58,.3)}
.rpt-calli-name{font-family:-apple-system,"Segoe UI",sans-serif;font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px}

.rpt-body-wrap{display:grid;grid-template-columns:100px 1fr;gap:16px;align-items:start}
.rpt-body-svg svg{width:100%;height:auto}
.rpt-body-dot{cursor:pointer;transition:.2s}
.rpt-body-dot:hover{opacity:1!important}
.rpt-body-dot.active{opacity:1!important}
.rpt-body-info{background:var(--paper);border-radius:12px;padding:14px;text-align:center}
.rpt-body-info .bi-char{font-family:"Kaiti SC","Songti SC",serif;font-size:48px;color:var(--ink);line-height:1;margin:6px 0}
.rpt-body-info .bi-loc{font-family:-apple-system,"Segoe UI",sans-serif;font-size:13px;color:var(--muted)}
.rpt-body-info .bi-size{font-family:-apple-system,"Segoe UI",sans-serif;font-size:11px;color:var(--gold);font-weight:700;margin-top:4px}
.rpt-locs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;justify-content:center}
.rpt-loc{font-family:-apple-system,"Segoe UI",sans-serif;font-size:11px;background:var(--paper2,#efe8dc);border:1px solid var(--line);border-radius:8px;padding:3px 8px;cursor:pointer;transition:.15s;color:var(--muted)}
.rpt-loc:hover,.rpt-loc.active{background:var(--red);color:#fff;border-color:var(--red)}

.rpt-blur-section{position:relative;overflow:hidden;max-height:180px}
.rpt-blur-section .rpt-blur-content{filter:blur(4px);user-select:none;pointer-events:none}
.rpt-blur-section::after{content:"";position:absolute;bottom:0;left:0;right:0;height:70%;background:linear-gradient(to top,var(--card) 5%,transparent)}

.rpt-includes{padding:24px 24px 8px;font-family:-apple-system,"Segoe UI",sans-serif}
.rpt-includes-title{font-size:15px;font-weight:800;color:var(--ink);text-align:center;margin-bottom:18px;letter-spacing:.3px}
.rpt-feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rpt-feat{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px}
.rpt-feat-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#fbeaec,#f7e8d0);display:grid;place-items:center;font-size:18px;color:var(--red);flex-shrink:0;font-family:"Songti SC",serif;font-weight:700}
.rpt-feat-text{display:flex;flex-direction:column;gap:3px}
.rpt-feat-text b{font-size:13.5px;color:var(--ink)}
.rpt-feat-text span{font-size:12.5px;color:var(--muted);line-height:1.5}
.rpt-cta{text-align:center;padding:12px 24px 24px;font-family:-apple-system,"Segoe UI",sans-serif}
.rpt-cta .btn-gold{display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:#fff;border:none;border-radius:12px;padding:12px 28px;font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 4px 14px rgba(184,137,58,.35);transition:.15s}
.rpt-cta .btn-gold:hover{filter:brightness(.95)}

/* ===== Tattoo responsive ===== */
@media(max-width:760px){
  body{line-height:1.55;overflow-x:hidden}
  .hero{padding:34px 0 18px}
  .kicker{font-size:10px;letter-spacing:1.2px;padding:5px 10px;margin-bottom:14px}
  .hero h1{font-size:30px;letter-spacing:-.3px}
  .hero p.lead{font-size:15.5px}
  .trust-row{gap:7px;margin-top:14px}
  .trust{font-size:11.5px;padding:5px 8px}
  .checker{padding:16px;border-radius:16px;margin-top:22px}
  .checker label{font-size:12px}
  .search-row{flex-direction:column}
  .search-row input{width:100%;font-size:20px;padding:14px 15px;border-radius:11px}
  .btn{width:100%;min-height:48px;padding:13px 14px}
  .samples{gap:6px;font-size:12px}
  .chip{font-size:13px;padding:6px 10px;touch-action:manipulation}
  .chip.zh{font-size:15px}
  .upload-box{padding:14px;gap:12px;align-items:stretch}
  .upload-copy{min-width:0;font-size:13px}
  .upload-btn{width:100%;min-height:46px;touch-action:manipulation}
  .upload-preview img{max-width:100%;max-height:220px}
  .features,.cards3,.pricing,.testi-grid{grid-template-columns:1fr}
  .report-body{grid-template-columns:1fr}
  .rpt-calli{grid-template-columns:repeat(2,1fr)}
  .rpt-dims{grid-template-columns:1fr 1fr}
  .rpt-body-wrap{grid-template-columns:80px 1fr}
  .rpt-char{font-size:56px}
  .fail-list{grid-template-columns:1fr}
  .rc-head{flex-direction:column;text-align:center;gap:14px;padding:18px}
  .glyph{font-size:58px;min-width:0;max-width:100%;width:100%;padding:14px 8px}
  .rc-head .pinyin{font-size:18px}
  .rc-head .mean{font-size:21px}
  .rc-head .literal{font-size:13px}
  .score-wrap{grid-template-columns:1fr;text-align:center;padding:18px}
  .score-circle{width:116px;height:116px}
  .score-num{font-size:28px}
  .bar-row{grid-template-columns:96px 1fr 34px;text-align:left;gap:8px;font-size:12.5px}
  .verdict{padding:18px 18px 4px;font-size:15px}
  /* ===== API result extras ===== */
.api-extras{padding:0 26px 14px;font-family:-apple-system,"Segoe UI",sans-serif;font-size:13px}
.api-issues{margin-bottom:10px}
.api-issues .sans{font-size:11px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;font-weight:700;margin-right:6px}
.issue-tag{display:inline-block;padding:3px 9px;margin:3px 5px 3px 0;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--ink)}
.api-cached,.api-offline{text-align:center;color:var(--muted);font-size:12px;margin-top:6px}
.api-offline{color:#b45309}

.alternatives{padding:12px 18px 0}
  .paywall{margin:18px;padding:16px}
  .paywall h3{font-size:18px}
  .features{gap:8px}
  .pay-row{align-items:stretch}
  .price{font-size:26px}
  .btn-buy{width:100%;min-height:48px;padding:13px 16px;touch-action:manipulation}
  .report-top{padding:18px;align-items:flex-start;flex-direction:column}
  .report-top h3{font-size:20px}
  .report-col{border-right:none;border-bottom:1px solid var(--line);padding:18px}
  .report-col:last-child{border-bottom:none}
}
@media(max-width:420px){
  .hero h1{font-size:27px}
  .hero p.lead{font-size:14.5px}
  .search-row input{font-size:18px}
  .glyph{font-size:48px}
  .bar-row{grid-template-columns:1fr 36px;gap:5px 8px}
  .bar-row span{grid-column:1/-1}
  .paywall{margin:14px 12px}
  .report-line{font-size:13px;flex-direction:column;gap:3px}
}