body {

    background: #121212;

    color: #d8d8d8;

    margin: 0;

    padding: 0;

    font-family: Georgia, serif;

}

.container {

    width: 95%;

    max-width: 1200px;

    margin: 30px auto;

}

.header {

    background: #1b1b1b;

    color: #eeeeee;

    padding: 20px;

    border: 1px solid #333333;

    border-radius: 8px;

    margin-bottom: 20px;

    text-align: center;

}

.header img {

    max-height: 120px;

}

.header h1 {

    margin: 0;

}

.card {

    background: #1e1e1e;

    border: 1px solid #333333;

    border-radius: 8px;

    padding: 20px;

    margin-bottom: 20px;

}

h1 {

    margin-top: 0;

}

h2 {

    color: #ffffff;

    border-bottom: 1px solid #444444;

    padding-bottom: 8px;

}

a {

    color: #c0392b;

    text-decoration: none;

}

a:hover {

    color: #ff5c4d;

    text-decoration: underline;

}

input[type=text],

input[type=password],

textarea,

select {

    width: 100%;

    box-sizing: border-box;

    padding: 10px;

    border: 1px solid #444444;

    border-radius: 4px;

    background: #2a2a2a;

    color: #e0e0e0;

}

button {

    background: #8b0000;

    color: white;

    border: none;

    padding: 10px 18px;

    border-radius: 4px;

    cursor: pointer;

}

button:hover {

    background: #b30000;

}

table {

    width: 100%;

    border-collapse: collapse;

}

table th {

    background: #2a2a2a;

    color: #ffffff;

    text-align: left;

}

table th,

table td {

    border: 1px solid #444444;

    padding: 8px;

}

.message-success {

    background: #1f3d1f;

    border: 1px solid #2f6f2f;

    color: #b8ffb8;

    padding: 10px;

    border-radius: 4px;

}

.message-error {

    background: #4a1f1f;

    border: 1px solid #8a2f2f;

    color: #ffb8b8;

    padding: 10px;

    border-radius: 4px;

}

.file-list li {

    margin-bottom: 8px;

}

.topnav {

    margin-top: 10px;

}

.topnav a {

    margin-right: 15px;

}

.modal {

    display: none;

    position: fixed;

    z-index: 9999;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.8);

}

.modal-content {

    background: #1e1e1e;

    color: #d8d8d8;

    width: 90%;

    height: 90%;

    margin: 2% auto;

    padding: 20px;

    overflow: auto;

    border-radius: 10px;

    border: 1px solid #444444;

}

.close-modal {

    float: right;

    font-size: 30px;

    cursor: pointer;

}

.modal img {

    max-width: 100%;

}

.modal iframe {

    width: 100%;

    height: 85vh;

    border: none;

}

.card,

.header,

.modal-content,

table,

input,

textarea,

button {

    box-shadow: 0 0 8px rgba(0,0,0,0.35);

}
.world-info {
    font-size: 0.9em;
    color: #bbbbbb;
    background: #181818;
    border-left: 4px solid #8b0000;
    padding: 10px 15px;
    margin-bottom: 15px;
    line-height: 1.8;
}