.wa-panel { display: grid; gap: 20px; }
.wa-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wa-heading h2 { font-size: 22px; margin: 0 0 6px; }
.wa-heading h3 { margin: 0; }
.wa-heading p { font-size: 14px; color: var(--mute); }
.wa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wa-box { padding: 24px; display: grid; align-content: start; gap: 16px; }
.wa-box h3 { font-size: 17px; }
.wa-box select { width: 100%; min-width: 0; }
.wa-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wa-hint { font-size: 13px; line-height: 1.6; color: var(--mute); }
.wa-qr { width: 250px; max-width: 100%; aspect-ratio: 1; justify-self: center; }
.wa-notice { padding: 14px 16px; background: #fff1e4; border: 1px solid #e8c49b; border-radius: var(--r-md); color: #874e20; font-size: 14px; line-height: 1.5; }
.wa-notice--ok { background: #e9f7ec; border-color: #b1dabb; color: #286c3b; }
.wa-preview { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; }
.wa-preview > img { width: 180px; height: 180px; border-radius: var(--r-md); object-fit: contain; background: #fafaf7; }
.wa-preview pre { font-family: inherit; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 16px; }
.wa-preview .btn { margin-top: 12px; }
.wa-history { list-style: none; margin: 0; padding: 0; }
.wa-history li { display: flex; justify-content: space-between; gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.wa-history b { font-size: 14px; font-weight: 600; }
.wa-history small { display: block; font-size: 12px; color: var(--mute); line-height: 1.5; margin-top: 6px; }
.wa-history .achip { flex-shrink: 0; }
.wa-panel [hidden] { display: none !important; }
@media (max-width: 700px) {
  .wa-grid { grid-template-columns: 1fr; }
  .wa-heading { align-items: start; flex-wrap: wrap; }
  .wa-box { padding: 18px; }
  .wa-preview { grid-template-columns: 1fr; gap: 16px; }
  .wa-preview > img { justify-self: center; }
  .wa-history li { flex-direction: column; }
}