@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../assets/fonts/IBMPlexSansArabic-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal }

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../assets/fonts/IBMPlexSansArabic-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal }

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../assets/fonts/IBMPlexSansArabic-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal }

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../assets/fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal }

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../assets/fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal }

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../assets/fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal }

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../assets/fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal }

* {
    margin: 0; padding: 0;
    font-family: 'IBM Plex Sans Arabic', sans-serif }

span { color: #FF92ea }

/* تغيير لون الخلفية للنصوص التي يتم تحديدها */
::selection {
    background-color: #FF92ea;
    color: #F2F2F2 }

/* شريط التمرير */
::-webkit-scrollbar {
    height: 0.5rem; width: 0.5rem;
    background-color: transparent }
::-webkit-scrollbar-thumb {
    background: #FF92ea;
    border-radius: .625rem }
/* شريط التمرير في  FireFox */
* {
    scrollbar-width: thin;
    scrollbar-color: #FF92ea transparent }

.home {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: 
        radial-gradient(circle at bottom right, #FF92EA 20%, transparent 50%),
        radial-gradient(circle at bottom left, #8BA7C3 20%, transparent 50%),
        linear-gradient(to bottom, #12102E 0%, #1F1C51 50%, transparent 80%);
    padding: 20px }

#message {
    position: fixed;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border-radius: 5px;
    color: #F2F2F2;
    opacity: 1;
    transition: opacity 0.5s ease;
    z-index: 1000;
    display: none }

#message.success { background: #28a745; }
#message.error { background: #dc3545; }
#message.info  { 
    background: #ffc107; 
    color: #000 }

#auth-container {
    width: 100%;
    max-width: 400px;
    margin: 0;
    padding: 30px;
    
    background: transparent;
    
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) }

#auth-container h2 { 
    text-align: center; 
    margin-bottom: 20px; 
    color: #F2F2F2 }

.form-group { margin-bottom: 15px }

.form-group label { 
    display: block; 
    margin-bottom: 5px; 
    color: #F2F2F2 }
    
.form-group input {
    width: 95%;
    padding: 8px; 
    border-radius: 4px;
    border: 1px solid #CCC }

#password-strength { font-size: 0.9rem }

#password-strength.weak   { color: #dc3545 }
#password-strength.medium { color: #ffc107 }
#password-strength.strong { color: #28a745 }

button {
    padding: 10px; 
    border: none;
    background-color: #2E6EF7;
    border-radius: 6px;
    color: #F2F2F2;
    cursor:pointer }

#toggle-text { 
    text-align: center;
    margin-top: 15px; 
    color: #F2F2F2 }

#toggle-link { 
    color: #4fc3f7; 
    cursor: pointer; 
    text-decoration: underline }