
/* Profile.tokyo - decorative badge gallery + homepage templates */
.pt-showcase{max-width:1220px;margin:70px auto;padding:0 22px;}
.pt-showcase-head{text-align:center;max-width:690px;margin:0 auto 28px}
.pt-showcase-head h2{font-size:clamp(26px,4vw,42px);letter-spacing:-.045em;margin:10px 0 8px}
.pt-showcase-head p{opacity:.78;line-height:1.6}
.pt-theme-showcase{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pt-theme-product{background:var(--surface,#fff);border:1px solid rgba(124,136,170,.20);border-radius:24px;overflow:hidden;padding:13px 13px 20px;box-shadow:0 14px 40px rgba(32,45,90,.07);transition:transform .2s,box-shadow .2s}
.pt-theme-product:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(34,44,83,.14)}
.pt-theme-product h3{font-size:18px;margin:16px 7px 4px}.pt-theme-product p{font-size:13px;margin:4px 7px 14px;opacity:.7}
.pt-theme-product .btn{display:block;text-align:center;margin:0 7px}
.pt-theme-demo{height:240px;border-radius:15px;padding:16px 18px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #fff2}
.pt-demo-minimal{background:linear-gradient(145deg,#f6f8fc,#fff);color:#14233d}
.pt-demo-luxury{background:linear-gradient(145deg,#141515,#29231a);color:#eadab9}
.pt-demo-gradient{background:linear-gradient(135deg,#6b3ff3,#24aad3);color:white}
.pt-demo-neon{background:linear-gradient(145deg,#14162b,#092e32);color:#d4fbfc}
.pt-demo-cover{height:64px;background:#8883;border-radius:10px}.pt-demo-avatar{height:45px;width:45px;background:#fff8;border:3px solid #fff;position:relative;top:-18px;border-radius:100%}.pt-demo-name{margin-top:-10px;font-weight:800;font-size:15px}.pt-demo-dot{font-size:12px;color:#31c6cf}
.pt-demo-bank{height:27px;border-radius:9px;background:#8883;margin-top:10px}.pt-demo-bank.small{width:82%}
.pt-badge-gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.pt-gallery-badge{display:flex;flex-direction:column;align-items:center;gap:8px;padding:15px 8px;background:var(--surface,#fff);border:1px solid rgba(124,136,170,.23);border-radius:16px;text-align:center}
.pt-gallery-badge img{width:44px;height:44px}.pt-gallery-badge small{font-size:11px;line-height:1.3}
.pt-home-note,.pt-badge-note{font-size:12px;line-height:1.6;opacity:.74}
.pt-badge-picker{border:1px solid rgba(120,130,160,.25);border-radius:20px;padding:16px;margin:18px 0;min-width:0}
.pt-badge-picker legend{font-weight:800;padding:0 8px}
.pt-badge-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.pt-badge-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;position:relative;border-radius:15px;padding:14px 8px;border:2px solid rgba(127,142,179,.2);cursor:pointer;background:rgba(130,150,185,.045);transition:transform .2s,border-color .2s,background .2s;min-width:0}
.pt-badge-tile:has(input:checked){border-color:#7056ed;background:rgba(112,86,237,.095);box-shadow:0 0 0 2px rgba(112,86,237,.07)}
.pt-badge-tile:hover{transform:translateY(-2px);border-color:#9a8ce9}.pt-badge-tile input{position:absolute;opacity:0;width:1px;height:1px}
.pt-badge-tile:has(input:focus-visible){outline:3px solid #806ae6;outline-offset:2px}
.pt-badge-icon img{width:50px;height:50px;display:block;filter:drop-shadow(0 6px 10px rgba(63,88,170,.12))}.pt-badge-caption{font-size:11px;font-weight:700;line-height:1.35}.pt-none{width:50px;height:50px;display:grid;place-items:center;border-radius:50%;background:#eee;color:#556;font-size:12px}
.pt-badge{display:inline-flex;vertical-align:middle;margin-left:4px}.pt-badge img{height:23px;width:23px;object-fit:contain}
.pt-badge-disclaimer{color:var(--muted,#68758a);font-size:11px;margin:2px 0 9px;opacity:.8}.pt-preview-tag{font-size:10px;color:#6472ac;border:1px solid #6472ac66;border-radius:9px;padding:2px 6px;vertical-align:middle}
@media(max-width:900px){.pt-theme-showcase{grid-template-columns:repeat(2,minmax(0,1fr))}.pt-badge-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:550px){.pt-showcase{padding:0 14px;margin:44px auto}.pt-theme-showcase{gap:10px}.pt-theme-product{padding:8px 8px 15px;border-radius:18px}.pt-theme-demo{height:160px;padding:10px}.pt-theme-product h3{font-size:14px}.pt-theme-product .btn{font-size:12px;padding:9px 5px}.pt-badge-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pt-badge-gallery{gap:8px}.pt-gallery-badge small{font-size:10px}}

.pt-static-qr-grid{display:flex;flex-wrap:wrap;gap:12px}.pt-static-qr-grid>div{max-width:155px;padding:12px;border:1px solid #8884;border-radius:12px;display:flex;flex-direction:column;gap:5px}.pt-static-qr-grid img{width:125px;height:125px;object-fit:contain}.pt-static-qr-grid small{overflow-wrap:anywhere}

/* Bank selector preview / automatic payment choice */
.selected-bank-preview{display:flex;align-items:center;gap:12px;margin:10px 0 4px;padding:10px 12px;background:rgba(120,130,200,.07);border:1px solid rgba(110,110,150,.14);border-radius:14px;font-size:13px;font-weight:750}
.selected-bank-logo{width:44px;height:44px;object-fit:contain;background:white;padding:5px;border-radius:10px}
.pt-automatic-toggle{display:flex!important;align-items:flex-start;gap:12px;padding:15px;border-radius:14px;border:1px solid rgba(110,105,185,.22);background:rgba(110,105,185,.055)}
.pt-automatic-toggle input{width:21px;height:21px;flex:0 0 auto;margin:3px 0 0}
.pt-automatic-toggle span{display:flex;flex-direction:column;gap:6px}.pt-automatic-toggle small{font-size:12px;line-height:1.45;opacity:.8}
.bank-logo img{max-width:100%;max-height:100%;width:36px;height:36px;object-fit:contain}

/* Six premium decorative badges: generous touch targets on mobile */
.pt-badge-tile{min-height:112px;justify-content:center;box-shadow:0 2px 12px rgba(24,42,87,.025)}
.pt-badge-tile:has(input:checked){border-color:#6157e8;background:rgba(104,94,229,.09);box-shadow:0 0 0 3px rgba(100,85,230,.09)}
.pt-gallery-badge{min-height:118px;justify-content:center}
@media(min-width:650px){.pt-badge-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:400px){.pt-badge-grid{gap:6px}.pt-badge-tile{padding:12px 4px}.pt-badge-caption{font-size:10px}}
