#custom-characters {
    box-sizing: border-box;
    width: min(540px, calc(100vw - 32px));
    max-height: calc(100dvh - 40px);
    overflow: auto;
    padding: 24px;
    border: 1px solid #7358a5;
    border-radius: 14px;
    background: #171323;
    color: #f6f1ff;
    font: 15px/1.5 sans-serif;
}
#custom-characters::backdrop {background: #000b;}
#custom-characters .custom-heading {display: flex; align-items: center; gap: 20px; justify-content: space-between;}
#custom-characters h2 {margin: 0; font-size: 20px;}
#custom-characters label {display: grid; gap: 6px; margin: 14px 0;}
#custom-characters input, #custom-characters select, #custom-characters button {
    box-sizing: border-box; max-width: 100%; font: inherit; color: inherit;
    border: 1px solid #73658b; border-radius: 7px; padding: 9px; background: #2d233e;
}
#custom-characters button {cursor: pointer;}
#custom-characters :disabled {opacity: .6; cursor: default;}
#custom-characters input:focus-visible, #custom-characters select:focus-visible, #custom-characters button:focus-visible {outline: 2px solid #c1a0ff; outline-offset: 2px;}
#custom-character-preview {object-fit: cover; border-radius: 12px;}
#custom-character-status {min-height: 1.5em;}
#custom-characters [hidden] {display: none;}