/* css/components.css */


.pill{
    padding:8px 12px;
    border-radius:999px;
    font-weight:700;
    background:#fff;
    border:1px solid rgba(0,0,0,0.05);
}

#go{
    background: linear-gradient(90deg,#ff7bd8,#ffb86b,#7fffb3,#7fbfff,#c58bff);
    background-size:200% 100%;
    color:#fff;
    border:none;
    padding:22px 34px;
    border-radius:28px;
    font-size:20px;
    font-weight:900;
    letter-spacing:1px;
    cursor:pointer;

    box-shadow:0 18px 40px rgba(200,60,160,0.18);

    transition:
        transform .12s ease,
        box-shadow .12s ease,
        background-position .8s linear;
}

#go:hover{
    transform:translateY(-6px) scale(1.02);
    background-position:100% 0;
    box-shadow:0 26px 50px rgba(200,60,160,0.22);
}

#go:active{
    transform:translateY(-2px) scale(0.98);
}

#go:disabled{
    opacity:0.6;
    transform:none;
}

/* selectors layout */
.selectors{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
}

label.opt{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,0.6);
    border:1px solid rgba(0,0,0,0.05);
    cursor:pointer;
    user-select:none;
}

/* HARD RESET: hide real checkbox completely */
label.opt input[type="checkbox"]{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

/* dot stays visual */
label.opt .dot{
    width:14px;
    height:14px;
    border-radius:50%;
    border:2px solid rgba(120,80,140,0.4);
    background:#fff;
}

/* checked state */
label.opt input[type="checkbox"]:checked + .dot{
    background:#ff7bd8;
    border-color:#ff7bd8;
}

.actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.hint{
    font-size:13px;
    color:var(--muted);
    text-align:center;
}

.tagline{
    margin:4px 0 0;
    font-size:14px;
    color:#7a5a7a;
}

#final-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width: 100%;
}

/* number inputs (restore styling) */
.num{
    border:none;
    padding:6px 10px;
    border-radius:999px;
    width:56px;
    margin-left:6px;
    background:rgba(255,255,255,0.9);
    text-align:center;
    font-weight:700;
    color:#6b3b6b;
    border:1px solid rgba(0,0,0,0.08);
}

.num:focus{
    outline:2px solid rgba(246,166,255,0.4);
}

#finalPrompt{
    background:linear-gradient(180deg,#0b091a,#1b192a);
    border-radius:10px;
    padding:14px;
    font-family:monospace;
    border:1px solid rgba(160,130,200,0.2);
    color:#ffffff;
    white-space:pre-wrap;
    width:100%;
    font-family: ui-monospace, monospace;
    background: linear-gradient(180deg, #0b0b12, #151522);
    color: #f3f3f3;
}

#finalPrompt::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;

    background: radial-gradient(
        circle at top,
        rgba(255, 120, 120, 0.08),
        transparent 60%
    );
}

#copyBtn{
    padding:6px 12px;
    border-radius:999px;
    border:none;
    cursor:pointer;
    font-weight:700;

    background:linear-gradient(90deg,#ffd9f9,#ffd9b8);
    box-shadow:0 6px 14px rgba(200,100,180,0.15);

    transition:transform .1s ease;
}

#copyBtn:hover{
    transform:scale(1.05);
}

#copyBtn:active{
    transform:scale(0.95);
}