<style>
body { font-family: Arial, sans-serif; background: #f7f7f7; margin:0; }
.container { width: 90%; max-width: 600px; margin: 40px auto; background:#fff; padding:20px; border-radius:8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
textarea { width:100%; padding:10px; border:1px solid #ccc; border-radius:4px; }
.row { display:flex; gap:10px; margin:10px 0; }
select, button { padding:10px; border-radius:4px; border:1px solid #ccc; }
button { background:#0077ff; color:#fff; cursor:pointer; border:none; }
button:hover { background:#005bb5; }
.results { margin-top:20px; }
.copy-btn {
    font-size: 12px;
    padding: 4px 8px;
    background-color: #f1f1f1;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;        /* prevent wrap */
    width: 70px;                /* fixed width to handle "Copied ✓" */
    text-align: center;
    transition: all 0.2s ease;
    display: inline-block;
    box-sizing: border-box;
}

.copy-btn:hover {
    background-color: #e2e2e2;
}

.copy-btn.copied {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

</style>

