/* Shared NFC card renderer styles — used by index, print and dashboards. */
/* Tokens the renderer needs, in case the host page has not defined them. */
:root{--stage:#0F1418;--gold:#F2B01E;--line:#DDE1E2;--paper:#FFFFFF;--ink:#151A1F;--muted:#69737D;--accent:#3A34D2}

/* ---------- card preview ---------- */
.stage{background:var(--stage);border-radius:18px;padding:26px 20px;display:grid;place-items:center}
#stage2.pinned{position:sticky;top:calc(var(--topH,104px) + 6px);z-index:20;padding:12px;border-radius:14px;
  box-shadow:0 10px 26px rgba(15,20,24,.22)}
#stage2.pinned .cardbox{max-width:190px}
#stage2.pinned .card{transition:none}
.pinbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.pinbar span{font-size:12.5px;color:var(--muted)}
.stage.light{background:#E4E7E7}
.cardbox{width:100%;max-width:330px;container-type:inline-size;perspective:900px}
.card{
  position:relative;width:100%;aspect-ratio:1.586;border-radius:4.2cqw;overflow:hidden;
  background:#fff;color:#111;box-shadow:0 18px 40px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.35) inset;
  font-family:Inter,sans-serif;transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.card.settle{animation:settle .7s cubic-bezier(.2,.8,.2,1)}
@keyframes settle{from{transform:rotateX(14deg) translateY(10px);opacity:.4}to{transform:none;opacity:1}}
.card .lay{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.card .lay-rich{padding:0}

.card .rtop{flex:none;display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:3.8cqw 4.6cqw 0;min-height:0}
.card .rlogo{height:8cqw;max-width:40cqw;object-fit:contain;object-position:left center;display:block}
.card .rname{font-size:3.9cqw;font-weight:800;letter-spacing:-.01em;line-height:1.12;max-width:52cqw;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .rstars{font-size:4.2cqw;letter-spacing:.45cqw;flex:none;line-height:1}

.card .rmid{flex:1;min-height:0;display:flex;align-items:center;gap:3cqw;padding:2.4cqw 4.6cqw;overflow:hidden}
.card .rtext{flex:1;min-width:0;overflow:hidden}
.card .rhead{font-size:5.6cqw;font-weight:800;line-height:1.05;letter-spacing:-.02em;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .rhead.scr{font-family:"Dancing Script",cursive;font-size:8.6cqw;font-weight:700;line-height:1}
.card .rsub{font-size:2.5cqw;font-weight:700;letter-spacing:.11em;margin-top:1cqw;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .rtap{font-size:3.2cqw;font-weight:700;margin-top:1.8cqw;line-height:1.2}
.card .rnote{font-size:2.5cqw;line-height:1.3;margin-top:.7cqw;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.card .rside{flex:none;display:flex;flex-direction:column;align-items:center;gap:1.1cqw}
.card .rqr{padding:1.1cqw;border-radius:1.6cqw;display:grid;place-items:center}
.card .rqr.rd{border-radius:50%;padding:1.7cqw}
.card .rqr .qr{width:15cqw;height:15cqw;background:#fff;display:grid;place-items:center;overflow:hidden}
.card .rqr.rd .qr{border-radius:50%}
.card .rqr .qr canvas,.card .rqr .qr img{width:100% !important;height:100% !important;display:block}
.card .qr.stub{background:
  repeating-linear-gradient(90deg,#111 0 11%,#fff 11% 22%),
  repeating-linear-gradient(0deg,#111 0 11%,#fff 11% 22%);background-blend-mode:multiply}

.card .badge{display:flex;flex-direction:column;align-items:center;gap:.4cqw}
.card .badge .ring{width:6.8cqw;height:6.8cqw;border:.45cqw solid currentColor;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0}
.card .badge .ring.rd{border-radius:50%}
.card .badge .ring.sq{border-radius:1.6cqw}
.card .badge .ring svg{width:2.7cqw;height:2.7cqw}
.card .badge .ring b{font-size:1.6cqw;font-weight:800;letter-spacing:.04em;line-height:1}
.card .badge em{font-style:normal;font-size:1.8cqw;font-weight:700;letter-spacing:.09em;line-height:1}

.card .rband{flex:none;padding:2.1cqw 4.6cqw;display:flex;align-items:center;justify-content:space-between;gap:2cqw;overflow:hidden}
.card .rband .bname{font-size:2.7cqw;font-weight:700;line-height:1.15;max-width:50cqw;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .rband .bgo{font-size:2.3cqw;font-weight:800;letter-spacing:.08em;flex:none;opacity:.92}
.card .rband.ic{justify-content:space-around;padding:1.8cqw 2.6cqw}
.card .rband .bi{display:flex;flex-direction:column;align-items:center;gap:.5cqw;text-align:center}
.card .rband .bi i{width:3.2cqw;height:3.2cqw;display:block}
.card .rband .bi i svg{width:100%;height:100%}
.card .rband .bi u{text-decoration:none;font-size:1.7cqw;font-weight:700;letter-spacing:.04em;line-height:1.2}
.card .lay-rich.nobar .rmid{padding-bottom:4.4cqw}

