* {

    box-sizing:border-box;

}



body {

    margin:0;

    min-height:100vh;

    font-family:Arial, Helvetica, sans-serif;

    background:
    radial-gradient(circle at top,#3b145f,#090912 55%);

    color:white;

}



.register-page {

    min-height:100vh;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:30px;

}



.logo {

    text-align:center;

    margin-bottom:25px;

}



.logo img {

    width:280px;

    max-width:80vw;

    height:auto;

    display:block;

    margin:0 auto;

    filter:
    drop-shadow(
        0 0 15px rgba(216,108,255,0.6)
    );

}



.logo p {

    margin-top:8px;

    color:#aaa;

    letter-spacing:3px;

}



.register-box {

    width:100%;

    max-width:500px;

    background:#151522;

    border:1px solid #30204a;

    border-radius:18px;

    padding:35px;

    box-shadow:
    0 0 35px rgba(216,108,255,0.2);

}



.register-box h2 {

    text-align:center;

    margin-top:0;

    color:#ffffff;

}



.intro {

    text-align:center;

    color:#aaa;

    line-height:1.5;

    margin-bottom:25px;

}



form {

    display:flex;

    flex-direction:column;

    gap:10px;

}



label {

    font-size:14px;

    color:#ddd;

    margin-top:10px;

}



input[type="text"],
input[type="date"] {

    width:100%;

    padding:13px;

    border-radius:10px;

    border:1px solid #333;

    background:#0d0d16;

    color:white;

    font-size:15px;

}



input[type="file"] {

    background:#0d0d16;

    padding:12px;

    border-radius:10px;

    color:white;

}



.options {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;

}



.options label {

    background:#0d0d16;

    padding:10px;

    border-radius:10px;

    cursor:pointer;

}



.options input {

    margin-right:8px;

}



.photo-info {

    font-size:12px;

    color:#999;

    line-height:1.4;

}



#photo-preview {

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}



#photo-preview img {

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:12px;

    border:2px solid #d86cff;

}



.rules {

    display:flex;

    gap:8px;

    align-items:flex-start;

    font-size:12px;

}



button {

    margin-top:20px;

    padding:15px;

    border:0;

    border-radius:12px;

    background:
    linear-gradient(
        90deg,
        #9b3cff,
        #e36cff
    );

    color:white;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;

}



button:hover {

    transform:scale(1.03);

    box-shadow:
    0 0 20px #d86cff;

}