.color-picker {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

#color-square, #hue-bar {
cursor: crosshair;
border-radius: 4px;
border: 1px solid #aaa;
}

.controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

#selected-color {
width: 120px;
text-align: center;
padding: 5px;
font-weight: bold;
border-radius: 4px;
border: 1px solid #aaa;
}

#add-color {
padding: 6px 12px;
cursor: pointer;
background: #0078ff;
color: white;
border: none;
border-radius: 4px;
font-weight: bold;
}

#color-list {
width: 250px;
padding: 5px;
border-radius: 4px;
border: 1px solid #aaa;
}

#color-text {
width: 100%;
max-width: 500px;
margin-top: 10px;
padding: 8px;
font-size: 14px;
font-family: monospace;
border: 1px solid #aaa;
border-radius: 4px;
}

@font-face {
    font-family: 'Minecraftia';
    src: url('/templates/fonts/minecraftia.ttf') format('truetype');
}

.motd-preview,
#motd-preview {
    font-family: 'Minecraftia', monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    display: inline-block;
    padding: 0.8em 0.8em 0 0.8em;
    margin: 0 auto;
    border-radius: 0.4em;
    background: #11111179;
    font-size: 1em;
    line-height: 1.6;
    border: 1px solid #333;
    max-width: 100%;
    min-height: 1em;
    text-align: center;
    text-underline-offset: -0.4em;
}