.bpg-wrapper{ padding:20px; display:flex; justify-content:center; }
.bpg-card{ width:820px; background:rgba(255,255,255,0.95); border-radius:12px; padding:26px; box-shadow:0 8px 24px rgba(0,0,0,0.06); }
.bpg-title{ text-align:center; font-size:36px; font-weight:700; margin:6px 0 18px; font-family: Georgia, 'Times New Roman', Times, serif; }
.bpg-label{ display:block; margin:10px 0 6px; font-weight:600; color:#333; }
.bpg-input, .bpg-select{ width:100%; padding:12px 14px; border-radius:8px; border:1px solid #ddd; margin-bottom:10px; box-sizing:border-box; font-size:15px; }
.bpg-controls{ display:flex; gap:14px; margin:12px 0; }
.bpg-output{ width:100%; padding:12px; border-radius:8px; border:1px solid #e6e6e6; background:#fff; font-family:monospace; font-size:13px; }

.bpg-btn{ position:relative; overflow:hidden; border:0; padding:12px 22px; border-radius:8px; cursor:pointer; font-weight:700; color:#fff; min-width:160px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); }

.bpg-generate{ background: linear-gradient(90deg, #ffffff, #9fe6a0, #fff08a, #ffb086, #d3a0ff, #ffb7d0, #b99a7a); }
.bpg-copy{ background: linear-gradient(90deg, #b99a7a, #ffb7d0, #d3a0ff, #ffb086, #fff08a, #9fe6a0, #ffffff); }

.bpg-generate::before, .bpg-copy::before{
    content:""; position:absolute; top:-40%; left:-50%; width:50%; height:200%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.45), rgba(255,255,255,0));
    transform: skewX(-20deg); animation: shine-gen 2.2s infinite linear;
}
.bpg-copy::before{ animation-name: shine-copy; }

@keyframes shine-gen {
    0%{ left:-50%; opacity:0; }
    30%{ left:120%; opacity:1; }
    60%{ left:120%; opacity:1; }
    100%{ left:220%; opacity:0; }
}
@keyframes shine-copy {
    0%{ left:220%; opacity:0; }
    30%{ left:120%; opacity:1; }
    60%{ left:120%; opacity:1; }
    100%{ left:-50%; opacity:0; }
}

.bpg-btn{ color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,0.12); }

@media(max-width:900px){ .bpg-card{ width:96%; padding:16px; } .bpg-title{ font-size:28px; } }