/* =====================================================================
 * 12 宠物友好场所 · 独立版式「准入卡片堆叠 + 印章」
 * 孔雀青 + 三层卡片 + 旋转准入戳 + 打孔边 + 批量表
 * ===================================================================== */
.pb--py { --pb-a: #197f78; --pb-a-soft: #e0f0ee; }
:root[data-theme="dark"] .pb--py { --pb-a: #7cd0c8; --pb-a-soft: #1a302e; }

.py-hero { padding-top: 32px; }
.py-board { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .78fr); gap: 14px; margin-top: 22px; align-items: start; }
.py-form { border-top: 3px solid var(--pb-a); }
.py-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.py-areas { margin-top: 13px; padding: 11px; border: 1px dashed var(--pb-a); border-radius: var(--pb-r-sm); background: var(--pb-a-soft); }
.py-areas > .pb-hint { display: block; font-size: 11.5px; color: var(--pb-ink2); margin-bottom: 8px; }
.py-area-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.py-area-grid .pb-check { padding: 6px 9px; font-size: 12px; }
.py-area-grid .pb-check b { font-size: 12px; }
.py-flags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }

/* 卡片堆叠 */
.py-cards { position: relative; padding: 16px 10px 24px 10px; min-height: 370px; }
.py-card { position: absolute; left: 10px; right: 10px; top: 18px; height: 318px; border: 1px solid var(--pb-line2); border-radius: var(--pb-r); background: var(--pb-card); box-shadow: var(--pb-shadow); }
.py-card--back { transform: rotate(-5deg) translate(10px, 14px); opacity: .55; }
.py-card--mid { transform: rotate(3deg) translate(4px, 7px); opacity: .78; }
.py-card--front { position: relative; top: 0; padding: 18px; transform: none; }
.py-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--pb-line2); padding-bottom: 9px; }
.py-card-head span { font-family: var(--pb-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--pb-a); }
.py-card-head b { font-size: 15px; }
.py-stamp { display: inline-block; margin: 16px 0 12px; padding: 7px 16px; border: 3px double var(--pb-brand); border-radius: 6px; transform: rotate(-8deg); color: var(--pb-brand); font-size: 18px; font-weight: 800; letter-spacing: .08em; }
.py-stamp.is-ok { border-color: var(--pb-ok); color: var(--pb-ok); }
.py-stamp.is-warn { border-color: var(--pb-warn); color: var(--pb-warn); }
.py-stamp.is-danger { border-color: var(--pb-danger); color: var(--pb-danger); }
.py-card-line { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--pb-line2); font-size: 12.5px; }
.py-card-line span { color: var(--pb-muted); }
.py-card-line b { font-family: var(--pb-mono); font-size: 12px; color: var(--pb-ink); text-align: right; }
.py-punch { display: flex; gap: 5px; justify-content: center; margin: 14px 0 8px; }
.py-punch i { width: 8px; height: 8px; border-radius: 50%; background: var(--pb-bg); border: 1px solid var(--pb-line2); }
.py-card-note { font-size: 11.5px; line-height: 1.8; color: var(--pb-muted); margin: 0; }

.py-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 14px; margin-top: 14px; }
.py-batch { min-width: 940px; }
.py-batch td input[type="text"], .py-batch td input[type="number"] { padding: 5px 7px; font-size: 12px; min-width: 56px; }
.py-prose { font-size: 14.5px; line-height: 2; color: var(--pb-ink2); }
.py-prose b { color: var(--pb-ink); }
.py-prose p { margin-bottom: 11px; }

@media (max-width: 1060px) {
    .py-board, .py-split { grid-template-columns: 1fr; }
    .py-cards { min-height: 340px; max-width: 460px; width: 100%; margin: 0 auto; }
}
@media (max-width: 700px) {
    .py-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .py-area-grid { grid-template-columns: 1fr 1fr; }
    .py-flags { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .py-fields { grid-template-columns: 1fr; } }