:root {
    --wj-blue: #2563ff;
    --wj-cyan: #22d3ee;
    --wj-green: #22c55e;
    --wj-purple: #8b5cf6;
    --wj-dark: #071b3b;
    --wj-surface: #0f274e;
    --wj-white: #ffffff;
    --wj-muted: #aab4c5;
    --wj-line: rgba(255, 255, 255, .12);
    --wj-gradient: linear-gradient(135deg, #2563ff 0%, #22d3ee 100%);
    --wj-shadow: 0 18px 60px rgba(0, 0, 0, .22);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Alexandria", "IBM Plex Sans Arabic", "Cairo", Tahoma, Arial, sans-serif;
    font-weight: 400;
}

.wj-en {
    font-family: Inter, "Plus Jakarta Sans", system-ui, sans-serif;
}

.wj-gradient {
    background: var(--wj-gradient);
}

.wj-gradient-text {
    background: var(--wj-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.wj-dark {
    background:
        radial-gradient(circle at 18% 0%, rgba(37, 99, 255, .32), transparent 28rem),
        radial-gradient(circle at 86% 20%, rgba(34, 211, 238, .14), transparent 24rem),
        linear-gradient(180deg, var(--wj-dark) 0%, var(--wj-surface) 100%);
}

.wj-card {
    border: 1px solid var(--wj-line);
    background: rgba(255, 255, 255, .075);
    box-shadow: var(--wj-shadow);
    backdrop-filter: blur(20px);
}

.wj-light-card {
    border: 1px solid rgba(13, 23, 40, .08);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 18px 50px rgba(7, 17, 32, .12);
}

.wj-btn {
    border-radius: 16px;
    background: var(--wj-gradient);
    color: white;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    box-shadow: 0 12px 34px rgba(37, 99, 255, .26);
}

.wj-btn:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 18px 44px rgba(34, 211, 238, .26);
}

.wj-input,
.select2-container .select2-selection--single {
    border-radius: 16px !important;
    border: 1px solid rgba(13, 23, 40, .12) !important;
}

.wj-float {
    animation: wj-float 6s ease-in-out infinite;
}

@keyframes wj-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}