/* ----------------------------------------------------
MEMBERS AREA — RESPONSIVE CSS
Mobile‑first, dark UI, clean layout
---------------------------------------------------- */

/* GLOBAL */
body {
        background: #111;
        color: #eee;
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 40px;
    }
    .container {
        max-width: 600px;
        margin: auto;
        background: #1a1a1a;
        padding: 30px;
        border-radius: 8px;
        border: 1px solid #333;
    }
    h1 {
        margin-top: 0;
        color: #4ea3ff;
    }
    .menu a {
        display: block;
        padding: 12px;
        background: #222;
        border: 1px solid #333;
        border-radius: 6px;
        margin-bottom: 10px;
        color: #eee;
        text-decoration: none;
        text-align: center;
    }
    .menu a:hover {
        background: #2a2a2a;
    }
    .logout {
        background: #f44 !important;
        color: #000 !important;
    }
    .logout:hover {
        background: #ff6666 !important;
        }

h1, h2, h3 {
color: #4ea3ff;
margin-top: 0;
}

p {
line-height: 1.6;
}

/* BUTTONS & LINKS */
a,
button {
display: inline-block;
padding: 12px 18px;
background: #222;
border: 1px solid #333;
border-radius: 6px;
color: #eee;
text-decoration: none;
cursor: pointer;
transition: 0.2s;
}

a:hover,
button:hover {
background: #2a2a2a;
}

.logout {
background: #f44 !important;
color: #000 !important;
}

.logout:hover {
background: #ff6666 !important;
}

/* FORMS */
form label {
display: block;
margin-top: 15px;
font-weight: bold;
max-width: 320px;
margin: 0 auto;
}

input[type=text],
input[type=password],
input[type=email] {
width: 100%;
padding: 12px;
margin-top: 6px;
background: #222;
border: 1px solid #333;
border-radius: 6px;
color: #eee;
}

/* MENU GRID */
.menu {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-top: 20px;
}

/* PROFILE BOX */
.info {
background: #222;
padding: 15px;
border-radius: 6px;
border: 1px solid #333;
}

.info p {
margin: 8px 0;
}

/* MESSAGES */
.success {
background: #1f4;
color: #000;
padding: 12px;
border-radius: 6px;
margin-bottom: 15px;
}

.error {
background: #f44;
color: #000;
padding: 12px;
border-radius: 6px;
margin-bottom: 15px;
}

/* ----------------------------------------------------
RESPONSIVE BREAKPOINTS
---------------------------------------------------- */

/* TABLET */
@media (min-width: 600px) {
.container {
    max-width: 700px;
    padding: 40px;
}

.menu {
    grid-template-columns: repeat(2, 1fr);
}
}

/* DESKTOP */
@media (min-width: 900px) {
.container {
    max-width: 900px;
}

.menu {
    grid-template-columns: repeat(3, 1fr);
}
}