:root {
  card-w: min(46rem, 92vw);
  pad: clamp(12px, 2vw, 20px);
  radius: 16px;             /* ← semicolon */
}
body{font-family:system-ui,Arial,sans-serif;
    min-height: 100vh;
    background: linear-gradient(180deg, #f5f9ff 50%, #aec0d2 90%);
    margin:3rem}
form{max-width:520px;padding:1rem;border:1px solid #ddd;border-radius:12px}
.row{margin-bottom:.75rem} label{display:block;font-weight:600;margin-bottom:.25rem}
input{width:100%;padding:.6rem .7rem;border:1px solid #ccc;border-radius:10px}
button{padding:.6rem 1rem;border:none;border-radius:10px;cursor:pointer}
.primary{background:#2563eb;color:#fff} .muted{background:#eee}
.msg{max-width:540px;margin-bottom:1rem}
.err{background:#fee2e2;color:#991b1b;padding:.5rem .75rem;border-radius:8px;margin-bottom:.5rem}
.inf{background:#ecfeff;color:#064e3b;padding:.5rem .75rem;border-radius:8px;margin-bottom:.5rem}
.small{color:#555;font-size:.9rem}



.logo {margin-top: 15px; margin-left: 10px;}

.logo img {width: clamp(3rem, 5vw, 4rem); height: auto;
    display: block;}

.avatar {width: clamp(3rem, 5vw, 4rem); height: 50px;
    border-radius: 50%; /* makes it perfectly round */
    object-fit: cover;  /* ensures it fills the circle without distortion */
    border: 2px solid #ccc; /* optional: adds a thin border */
    margin-top: 10px;
}

.header {
  background: transparent;
  display: flex;
  margin-top: 1px; ;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}


.header img {
    width: clamp(3rem, 6vw, 5rem);
    height: auto;
    border-radius: 50%;
}




.title{
    width: clamp(20rem, 80vw, 55rem); 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: clamp(1.8rem, 4vw, 3rem); 
    font-weight: bold; 
    margin-top: clamp(.8rem, 1vh, 0.5rem);
    z-index: 1;
}


.subtitle{
    width: clamp(20rem, 80vw, 55rem); 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: clamp(1.6rem, 3vw, 1.8rem); 
    font-weight: bold; 
    margin-bottom: 20px;
    z-index: 1;
}