.register-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
}

.register-card {
width: 100%;
max-width: 480px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 18px;
padding: 40px;
box-shadow: var(--shadow);
}

.register-header {
text-align: center;
margin-bottom: 30px;
}

.logo-placeholder {
width: 58px;
height: 58px;
margin: 0 auto 18px;


display: flex;
align-items: center;
justify-content: center;

border-radius: 14px;

background: var(--primary);
color: white;

font-size: 20px;
font-weight: 700;


}

.register-header h1 {
margin: 0 0 10px;
color: var(--text);
font-size: 28px;
}

.register-header p {
margin: 0;
color: var(--muted);
line-height: 1.6;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 8px;


color: var(--text);
font-size: 14px;
font-weight: 600;


}

.form-group input {
width: 100%;
box-sizing: border-box;


padding: 13px 14px;

border: 1px solid var(--border);
border-radius: 10px;

background: var(--panel);
color: var(--text);

font-size: 15px;

outline: none;

transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;


}

.form-group input:focus {
border-color: var(--primary);


box-shadow:
    0 0 0 3px var(--primary-soft);


}

.form-group small {
display: block;
margin-top: 6px;


color: var(--muted);
font-size: 12px;


}

#registerButton {
width: 100%;


padding: 14px;

border: none;
border-radius: 10px;

background: var(--primary);
color: white;

font-size: 15px;
font-weight: 600;

cursor: pointer;

transition:
    background 0.2s ease,
    transform 0.1s ease;


}

#registerButton:hover {
background: var(--primary-deep);
}

#registerButton:active {
transform: translateY(1px);
}

.register-message {
display: none;


margin-bottom: 18px;
padding: 12px 14px;

border-radius: 10px;

font-size: 14px;
line-height: 1.5;


}

.register-message.error {
display: block;


background: #fee2e2;
color: #991b1b;


}

.register-message.success {
display: block;


background: #d1fae5;
color: #065f46;


}

.register-footer {
margin-top: 25px;
text-align: center;
}

.register-footer p {
margin: 0;


color: var(--muted);
font-size: 14px;


}

.register-footer a {
color: var(--primary);
font-weight: 600;
text-decoration: none;
}

.register-footer a:hover {
text-decoration: underline;
}

.success-message-link{
    text-decoration: none;
    color: var(--primary-deep);
    font-size: smaller;
    font-style: italic
}

.success-message-link:hover{
    text-decoration: underline;
    transform: scaleX(3);
    transition: 0.3s ease-in-out;
}

@media (max-width: 520px) {


.register-page {
    padding: 20px 15px;
}

.register-card {
    padding: 28px 22px;
}

.register-header h1 {
    font-size: 24px;
}


}