/* The background art is darkened so text and cards stay readable on it. */
body {
    font-family: system-ui, sans-serif; margin: 0; color: #eee; min-height: 100vh;
    background-color: #1a1a1a;
    background-image: linear-gradient(rgba(10, 10, 10, 0.72), rgba(10, 10, 10, 0.82)), url("/static/img/background.webp");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
header { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.5rem; background: rgba(17, 17, 17, 0.85); backdrop-filter: blur(6px); }
.brand { display: flex; align-items: center; gap: 1rem; flex: 1; color: inherit; text-decoration: none; }
.brand-logo { width: 40px; height: 40px; }
header h1 { font-size: 1.1rem; margin: 0; }
.button-link { padding: 0.4rem 0.8rem; border-radius: 4px; border: 1px solid #444; background: #333; color: #eee; text-decoration: none; }
.button-link:hover { background: #444; }
.inline-form { display: inline; }
main { padding: 1.5rem; max-width: 1000px; margin: 0 auto; }
.server-card { background: rgba(36, 36, 36, 0.88); backdrop-filter: blur(6px); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
.server-card h3 { margin-top: 0; }
.server-title { display: flex; align-items: center; gap: 0.75rem; }
.server-icon { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; }
.login-banner { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto 1rem; border-radius: 16px; }
.actions button { margin-right: 0.5rem; }
.say-form, .op-form, .deop-form, .ban-form, .unban-form { margin-top: 0.75rem; display: flex; gap: 0.5rem; }
.error { color: #ff6b6b; }
.hint { color: #999; font-size: 0.9rem; }
input, button { padding: 0.4rem 0.6rem; border-radius: 4px; border: 1px solid #444; background: #333; color: #eee; }
button { cursor: pointer; }
button:hover { background: #444; }
.say-form input { flex: 1; }
.log-panel { margin-top: 1rem; }
.log-panel summary { cursor: pointer; color: #bbb; }
.log-toolbar { margin-top: 0.5rem; font-size: 0.85rem; color: #bbb; }
.log-source { margin-left: 0.4rem; padding: 0.2rem 0.3rem; border-radius: 4px; border: 1px solid #444; background: #333; color: #eee; font-size: 0.85rem; }
.log-status { color: #999; font-size: 0.85rem; margin-left: 0.5rem; }
.log-view { background: #111; border-radius: 4px; padding: 0.5rem 0.75rem; margin: 0.5rem 0 0; height: 320px; overflow-y: auto; font-size: 0.8rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.player-summary { margin: 0.4rem 0 0; }
/* Player-name fields with a suggestion list: our own arrow replaces
   Chrome's hover-only one, so it's always visible that there's a list. */
.combo { position: relative; display: inline-flex; }
.combo input { padding-right: 1.8rem; }
.combo input::-webkit-calendar-picker-indicator { display: none !important; }
.combo-arrow { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 1.6rem; padding: 0; border: none; border-radius: 0 3px 3px 0; background: transparent; color: #aaa; }
.combo-arrow:hover { background: #444; color: #eee; }
.server-status { font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; background: #444; color: #ddd; }
.server-status[data-state="online"] { background: #1f5f2e; color: #b8f5c4; }
.server-status[data-state="starting"], .server-status[data-state="stopping"] { background: #6b5214; color: #ffe7a3; }
.server-status[data-state="sleeping"] { background: #1f3f66; color: #b9d8ff; }
.server-status[data-state="restarting"], .server-status[data-state="crashed"], .server-status[data-state="failed"] { background: #6e1f1f; color: #ffc2c2; }
.public-card .server-icon { width: 96px; height: 96px; }
.public-card .server-title { font-size: 1.4rem; flex-wrap: wrap; }
.public-meta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin: 0; }
.player-count { font-size: 1.3rem; }
.modpack-link { color: #9cc8ff; }
/* Login: labels in one column, inputs in the next, so the boxes line up. */
.login-form { display: grid; grid-template-columns: max-content minmax(0, 18rem); gap: 0.75rem 1rem; align-items: center; }
.login-form button { grid-column: 2; justify-self: start; }
.server-versions { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0 0 0.6rem; color: #bbb; }
.server-versions strong { color: #eee; }