* {
    box-sizing: border-box;
}


body {
    margin: 0;
    font-family:
        Arial,
        "Yu Gothic",
        "Meiryo",
        sans-serif;

    background: #f5f5f5;
    color: #222;
}


.login-container {
    width: 360px;
    margin: 100px auto;
    padding: 30px;

    background: white;

    border-radius: 8px;

    box-shadow:
        0 2px 10px
        rgba(0, 0, 0, 0.15);
}


.main-container {
    width: 900px;
    max-width: calc(100% - 40px);

    margin: 40px auto;
    padding: 30px;

    background: white;

    border-radius: 8px;
}


h1 {
    margin-top: 0;
}


label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
}


input {
    width: 100%;

    padding: 10px;

    border:
        1px solid #bbb;

    border-radius: 4px;
}


button,
.button-link {
    display: inline-block;

    margin-top: 20px;
    padding: 10px 20px;

    border: none;
    border-radius: 4px;

    background: #333;
    color: white;

    text-decoration: none;

    cursor: pointer;
}


button:hover,
.button-link:hover {
    opacity: 0.8;
}


.message {
    margin: 15px 0;
    padding: 10px;

    background: #fff2cc;

    border-radius: 4px;
}


.user-form {
    display: flex;
    gap: 10px;

    margin-bottom: 30px;
}


.user-form input {
    width: auto;
    flex: 1;
}


.user-form button {
    margin-top: 0;
}


table {
    width: 100%;
    border-collapse: collapse;
}


th,
td {
    padding: 10px;

    border-bottom:
        1px solid #ddd;

    text-align: left;
}


td form {
    margin: 0;
}


.delete-button {
    margin: 0;

    background: #a33;
}


.development-info {
    margin: 30px 0;
    padding: 20px;

    background: #f0f0f0;

    border-radius: 6px;
}


.admin-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 30px;
}


.inline-form {
    margin: 0;
}


.logout-button {
    margin-top: 0;
}