html, body {
    margin:0;
    padding:0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    background:#f5f7fb;
}

.wrapper {
    display:flex;
    width:100%;
    max-width:100%;
    margin:20px auto;
    padding:0 10px;
    gap:10px;
    box-sizing:border-box;
    flex:1; /* makes wrapper take remaining space */
}

.left,.right {
    width:200px;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.main {
    flex:1;
    background:#fff;
    padding:28px;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.left img,.right img { max-width:100%; border-radius:6px; }

h2{ margin-top:0;color:#333; }

form{ display:flex; flex-direction:column; gap:12px; }

input{ padding:12px; border:1px solid #e5e7eb; border-radius:10px; width:100%; outline:none; font-size:14px; background:#fafafa; }

button{ padding:12px 16px; border:0; border-radius:12px; background:#2563eb; color:#fff; font-weight:700; font-size:15px; cursor:pointer; transition:.2s; }
button:hover{ background:#1d4ed8; }

.msg{ color:red; margin-top:10px; }

footer {
    margin:0;
    padding:0;
}

@media(max-width:1200px){ 
    .wrapper{ flex-direction:column } 
    .left,.right{ width:100%; } 
}