body {
    font-family: Arial, sans-serif;
    background: #f3f5f7;
    padding: 1px;
    min-height: 150vh;
}

.container {
    min-width: 800px;
    max-width: 1100px;
    margin: auto;
    background: white;
    padding: 25px;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

textarea {
    width: 100%;
    height: 80px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Prevents textarea from overflowing container */
}

/* Controls wrapper for the dropdown and labels */
.controls {
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    table-layout: fixed; /* 'fixed' helps control column widths more strictly */
}

th {
    background: #2c4d7c;
    color: white;
    padding: 13px; /* Increased from 5px for better look */
    text-align: left;
}

td {
    border: 1px solid #ddd;
    padding: 8px !important; /* Increased from 2px to give the button breathing room */
    vertical-align: middle;
}

.copyBtn {
    background: #2d6cdf; /* Add this if missing */
    color: white;        /* Add this if missing */
    display: inline-block !important;
    white-space: nowrap !important;
    width: 100px !important;
    text-align: center;
    padding: 5px 0;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Lock 2: Force the table cell to stay wide enough for the button */
td:last-child {
    width: 120px !important; 
    min-width: 120px !important;
    white-space: nowrap !important;
    text-align: center;
    vertical-align: middle;
}

/* Lock 3: Force the long string to wrap inside its own cell */
.encoded {
    white-space: nowrap !important;   /* Prevents text from jumping to next line */
    word-break: normal !important;    /* Disables the breaking you had before */
    font-family: 'Courier New', monospace;
    color: #c2185b;
    display: block;                   /* Allows the cell to handle overflow better */
    overflow-x: auto;                 /* Adds a scrollbar if the string is very long */
    max-width: 600px;                 /* Adjust this based on your preference */
    padding: 5px;
}

.copyBtn:hover {
    background: #1f4ea8;
}

.copied {
    background: #28a745 !important;
}

/* Optional dark mode */
.dark-mode {
    background: #121212;
    color: #eee;
}
.dark-mode .container { background: #1f1f1f; }
.dark-mode td { background: #1f1f1f; border-color: #444; }
.dark-mode textarea, .dark-mode select {
    background: #2a2a2a;
    color: #fff;
    border: 1px solid #555;
}