body{
    margin:0;
    font-family: "Segoe UI", Arial, sans-serif;
    background:#f2f3f7;
}


/* wrapper */

.wrap{
    display:flex;
    justify-content:center;
    padding:50px 0;
}


/* card */

.card{

    width:600px;

    background:white;

    border-radius:16px;

    padding:45px;

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

}


/* title */

.card h2{

    text-align:center;

    font-size:26px;

    font-weight:600;

    margin-bottom:25px;
}


/* form spacing */

form{
    margin-top:10px;
}


/* label */

label{

    font-size:14px;

    font-weight:600;

    display:block;

    margin-bottom:6px;

    margin-top:12px;
}


/* input */

input,
select,
textarea{

    width:100%;

    padding:12px 14px;

    box-sizing:border-box;

    border-radius:10px;

    border:1px solid #ddd;

    font-size:14px;

    background:#fafafa;

    transition:0.25s;
}

/* focus */

input:focus,
select:focus,
textarea:focus{

    outline:none;

    border:1px solid #4b1f7a;

    background:white;

    box-shadow:0 0 0 2px rgba(75,31,122,0.15);
}


/* row */

.row{

    display:flex;

    gap:50px;          /* space between left & right field */

    margin-top:12px;

    margin-bottom:18px;

}


.col{

    flex:1;

}

/* textarea */

textarea{
    height:90px;
}


/* file validation msg */
.file-msg {
    display: block;
    font-size: 12px;
    margin-top: 4px;
}

/* note container */
.note-box {
    margin-top: 8px;
    padding: 10px 12px;
    background: #fff7ed;          /* soft orange */
    border-left: 4px solid #f97316;
    border-radius: 6px;
}

/* title */
.note-title {
    font-size: 12px;
    font-weight: 600;
    color: #c2410c;
    display: block;
    margin-bottom: 4px;
}

/* main text */
.note-box p {
    font-size: 13px;
    color: #7c2d12;
    margin: 2px 0;
    line-height: 1.4;
}

/* sub text */
.note-sub {
    font-size: 12px;
    color: #9a3412;
}


.back-btn {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 14px;
    font-size: 14px;
    color:  #ffffff;;
    border: 1px solid #2d1034;
    background:#4b1f7a;
    font-weight:700;
    border-radius: 6px;
    text-decoration: none;
    transition: 0.2s;
}

.back-btn:hover {
    background:  #2d1034;;
    color: white;
}

/* button */

.btn{

    width:100%;

    margin-top:25px;

    padding:14px;

    border:none;
  
    box-sizing:border-box;

    border-radius:12px;

    background:#4b1f7a;

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:0.25s;
}

.btn:hover{

    background:#36145a;

    transform:translateY(-1px);

}

.password-note{
    margin-top:15px;
}

.password-note ul{
    margin:6px 0 0 12px;
    padding:0;
}

.password-note li{
    margin-bottom:4px;
    font-size:10px;
}


/* gap between sections */

input,
select,
textarea{
    margin-bottom:8px;
}

form > label:first-child{
    margin-top:0;
}

form{
    margin-top:10px;
}

.toast-container{

    position:fixed;

    top:40px;

    left:50%;

    transform:translateX(-50%);

    z-index:9999;

}


.toast{

    min-width:320px;

    padding:14px 20px;

    border-radius:10px;

    color:white;

    font-size:14px;

    text-align:center;

    box-shadow:0 6px 20px rgba(0,0,0,0.2);

    animation:fadeDown 0.3s ease;

}


.toast-success{
    background:#0f7f0b;
}

.toast-error{
    background:#e53935;
}


small{
    display:block;
    font-size:12px;
    margin-top:4px;
}



@keyframes fadeDown{

    from{
        opacity:0;
        transform:translate(-50%,-20px);
    }

    to{
        opacity:1;
        transform:translate(-50%,0);
    }

}