/* Updated styles with animated gradient buttons as requested */
.bpg-wrapper{ padding:20px; display:flex; justify-content:center; }
.bpg-card{ width:820px; background:transparent; border-radius:12px; padding:26px; box-shadow:0 8px 24px rgba(0,0,0,0.06); }
.bpg-title{ text-align:center; font-size:28px; font-weight:700; margin-bottom:6px; font-family: Arial, Helvetica, sans-serif; color:#222; }
.bpg-desc{ text-align:center; margin-bottom:18px; color:#555; font-size:14px; }

.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 #e6e6e6; margin-bottom:10px; box-sizing:border-box; font-size:15px; background:rgba(255,255,255,0.9); }

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

/* Gradient colors mixed from: white, blue, green, yellow, orange, purple, pink */
.bpg-generate{
    background: linear-gradient(90deg, #ffffff, #bfefff, #9fe6a0, #fff08a, #ffb086, #d3a0ff, #ffb7d0);
    color: #fff;
}
.bpg-copy{
    background: linear-gradient(90deg, #ffb7d0, #d3a0ff, #ffb086, #fff08a, #9fe6a0, #bfefff, #ffffff);
    color: #fff;
}

/* Animated sheen effect: Generate -> right-to-left, Copy -> left-to-right (opposites) */
.bpg-generate::before, .bpg-copy::before{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    transform: rotate(25deg);
    opacity: 0.18;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.0) 100%);
    transition: transform 2.6s linear;
}

/* Generate: sheen moves right -> left */
.bpg-generate:hover::before{ transform: translateX(-60%) rotate(25deg); transition: transform 1.6s linear; }

/* Copy: sheen moves left -> right (opposite) */
.bpg-copy:hover::before{ transform: translateX(60%) rotate(25deg); transition: transform 1.6s linear; }

.bpg-output{ width:100%; min-height:260px; padding:14px; border-radius:8px; border:1px solid #e6e6e6; margin-top:10px; box-sizing:border-box; font-family:monospace; font-size:13px; background:#fff; white-space:pre-wrap; }

/* small flash on generate for UX */
.bpg-flash{ box-shadow:0 0 0 4px rgba(158,230,160,0.12) inset; transition: box-shadow 0.6s ease; }

/* Responsive */
@media(max-width:900px){
    .bpg-card{ width:100%; padding:18px; }
    .bpg-controls{ flex-direction:column; }
}