/* ===================================================================
   Design Tokens - ???? ??????? ??????? ???????
   ===================================================================*/
:root {
    /* ??????? ???????? - ????? ????? ????? */
    --bg-base: #0F1419;
    --bg-elevated: #161D26;
    --bg-card: #1B2430;
    --bg-card-hover: #212C3A;
    --border-subtle: #2A3441;
    --border-strong: #3A4654;
    /* ????? ???? */
    --text-primary: #EDF1F5;
    --text-secondary: #9AABBD;
    --text-muted: #647389;
    /* ????? ?????? - ????? (???? ?????/?????) */
    --accent-emerald: #2EC4B6;
    --accent-emerald-dim: rgba(46, 196, 182, 0.15);
    --accent-emerald-bright: #3DDBCB;
    /* ???? ?????? ?????????? ??????? */
    --accent-red: #E85D5D;
    --accent-red-dim: rgba(232, 93, 93, 0.15);
    /* ??????? ????????? ???????? */
    --accent-amber: #F2A03D;
    --accent-amber-dim: rgba(242, 160, 61, 0.15);
    /* ???? ????????? ?????? */
    --accent-blue: #4F8FE8;
    --accent-blue-dim: rgba(79, 143, 232, 0.15);
    /* ?????? ??????? ???????? */
    --accent-purple: #6C5CE7;
    --accent-purple-dim: rgba(108, 92, 231, 0.15);
    /* ?????? */
    --font-arabic: 'Cairo', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    /* ?????? ??????????? */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-full: 999px;
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.25);
    --shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.35);
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: var(--font-arabic);
    background: var(--bg-base);
    color: var(--text-primary);
    min-height: 100vh;
    direction: rtl;
    color-scheme: dark;
}

body {
    background-image: radial-gradient(circle at 20% 0%, rgba(46, 196, 182, 0.06) 0%, transparent 40%), radial-gradient(circle at 100% 100%, rgba(108, 92, 231, 0.05) 0%, transparent 40%);
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, select, textarea {
    font-family: inherit;
}

/* ===================================================================
   ????? ??? Auth (Login / Register)
   ===================================================================*/
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-wrapper {
    width: 100%;
    max-width: 440px;
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
}

.auth-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent-emerald), var(--accent-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 16px var(--accent-emerald-dim);
}

.auth-brand-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    box-shadow: var(--shadow-elevated);
}

.auth-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 6px;
    text-align: center;
}

.auth-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 28px;
}

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

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    font-size: 15px;
    color: var(--text-primary);
    transition: border-color var(--transition-fast), background var(--transition-fast);
    color-scheme: dark;
}

    .form-control::placeholder {
        color: var(--text-muted);
    }

    .form-control:focus {
        outline: none;
        border-color: var(--accent-emerald);
        background: var(--bg-card-hover);
    }

    /* ????? ??? ??? Autofill ?? ??????? (Chrome/Edge) ?????? ??????? ??????
   ??? ?? ???? ??????? ????? ????? ???? ?? ???? ???????? */
    .form-control:-webkit-autofill,
    .form-control:-webkit-autofill:hover,
    .form-control:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--text-primary);
        -webkit-box-shadow: 0 0 0px 1000px var(--bg-elevated) inset;
        box-shadow: 0 0 0px 1000px var(--bg-elevated) inset;
        transition: background-color 5000s ease-in-out 0s;
    }

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}

    .form-check input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--accent-emerald);
        cursor: pointer;
    }

    .form-check label {
        font-size: 14px;
        color: var(--text-secondary);
        cursor: pointer;
    }

.field-error {
    color: var(--accent-red);
    font-size: 12.5px;
    margin-top: 6px;
    display: block;
}

.alert-error {
    background: var(--accent-red-dim);
    border: 1px solid rgba(232, 93, 93, 0.3);
    color: #FF9B9B;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 20px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-sm);
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.btn-primary {
    width: 100%;
    background: linear-gradient(135deg, var(--accent-emerald), #25A99D);
    color: #06201D;
    box-shadow: 0 4px 16px var(--accent-emerald-dim);
}

    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(46, 196, 182, 0.3);
    }

    .btn-primary:active {
        transform: translateY(0);
    }

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--text-secondary);
}

    .auth-footer a {
        color: var(--accent-emerald-bright);
        font-weight: 700;
    }

        .auth-footer a:hover {
            text-decoration: underline;
        }
.form-control {
    color: #fff !important;
    caret-color: #fff;
}