/* صفحات الدخول — AccMa (لوحة النسخة ولوحة المنصة) */
:root {
    --a-primary: #08A46D;
    --a-primary-rgb: 8, 164, 109;
    --a-grad: linear-gradient(135deg, #0bbf7f 0%, #08A46D 45%, #057a55 100%);
    --a-c1: #34d399;
    --a-c2: #0ea5e9;
    --a-c3: #a3e635;
    --a-bg: #eef5f2;
    --a-card: rgba(255, 255, 255, 0.78);
    --a-line: rgba(15, 23, 42, 0.08);
    --a-text: #0f172a;
    --a-muted: #64748b;
    --a-input: #ffffff;
    --a-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --a-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
html.dark,
.auth-super {
    --a-bg: #070d18;
    --a-card: rgba(17, 26, 44, 0.72);
    --a-line: rgba(148, 163, 184, 0.14);
    --a-text: #e8eef7;
    --a-muted: #8393ab;
    --a-input: rgba(11, 18, 32, 0.7);
    color-scheme: dark;
}
.auth-super {
    --a-primary: #8b5cf6;
    --a-primary-rgb: 139, 92, 246;
    --a-grad: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 45%, #6d28d9 100%);
    --a-c1: #8b5cf6;
    --a-c2: #10b981;
    --a-c3: #ec4899;
}

* { box-sizing: border-box; }

.auth-page {
    min-height: 100vh;
    margin: 0;
    font-family: 'Tajawal', sans-serif;
    background: var(--a-bg);
    color: var(--a-text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* خلفية متحركة ببطء */
.auth-aurora {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.auth-aurora span {
    position: absolute;
    width: 52vmax;
    height: 52vmax;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
    animation: a-drift 22s ease-in-out infinite alternate;
}
.auth-aurora span:nth-child(1) { background: var(--a-c1); top: -18vmax; right: -12vmax; }
.auth-aurora span:nth-child(2) { background: var(--a-c2); bottom: -22vmax; left: -14vmax; animation-duration: 26s; animation-delay: -6s; opacity: 0.32; }
.auth-aurora span:nth-child(3) { background: var(--a-c3); top: 30%; left: 35%; width: 30vmax; height: 30vmax; animation-duration: 30s; animation-delay: -12s; opacity: 0.18; }
html.dark .auth-aurora span,
.auth-super .auth-aurora span { opacity: 0.28; }
.auth-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--a-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--a-line) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}

.auth-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 2.25rem 2rem;
    border-radius: 24px;
    background: var(--a-card);
    border: 1px solid var(--a-line);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    animation: a-rise 700ms var(--a-spring) backwards;
}
.auth-shake {
    animation: a-rise 700ms var(--a-spring) backwards, a-shake 480ms ease 700ms;
}
.auth-head { text-align: center; margin-bottom: 1.75rem; }
.auth-logo {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 20px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--a-grad);
    box-shadow: 0 14px 30px rgba(var(--a-primary-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    animation: a-pop 700ms var(--a-spring) 150ms backwards;
}
.auth-logo::after {
    content: '';
    position: absolute;
    inset: -50%;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%);
    transform: translateX(-100%);
    animation: a-sheen 5s ease infinite 1.2s;
}
.auth-logo .material-symbols-outlined {
    font-size: 2rem;
    font-variation-settings: 'FILL' 1, 'wght' 500;
}
.auth-title { font-size: 1.6rem; font-weight: 800; margin: 0; }
.auth-sub { font-size: 0.92rem; color: var(--a-muted); margin: 0.3rem 0 0; }

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.8rem 0.95rem;
    border-radius: 14px;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    animation: a-fade 400ms ease backwards 300ms;
}
.auth-alert .material-symbols-outlined { font-size: 1.2rem; font-variation-settings: 'FILL' 1; }
.auth-alert-error { background: rgba(244, 63, 94, 0.1); color: #e11d48; border: 1px solid rgba(244, 63, 94, 0.25); }
.auth-alert-success { background: rgba(var(--a-primary-rgb), 0.1); color: var(--a-primary); border: 1px solid rgba(var(--a-primary-rgb), 0.25); }
html.dark .auth-alert-error,
.auth-super .auth-alert-error { color: #fda4af; }

.auth-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--a-muted);
    margin-bottom: 0.4rem;
}
.auth-field {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-field > .material-symbols-outlined {
    position: absolute;
    right: 0.9rem;
    font-size: 1.25rem;
    color: var(--a-muted);
    pointer-events: none;
    transition: color 200ms ease, transform 300ms var(--a-spring);
}
.auth-input {
    width: 100%;
    height: 3.1rem;
    padding: 0 2.9rem 0 2.9rem;
    border-radius: 14px;
    border: 1.5px solid var(--a-line);
    background: var(--a-input);
    color: var(--a-text);
    font-family: inherit;
    font-size: 0.98rem;
    text-align: right;
    outline: none;
    transition: border-color 200ms ease, box-shadow 300ms var(--a-ease), background 200ms;
}
.auth-input::placeholder { color: var(--a-muted); opacity: 0.6; }
.auth-input:hover { border-color: rgba(var(--a-primary-rgb), 0.4); }
.auth-input:focus {
    border-color: var(--a-primary);
    box-shadow: 0 0 0 4px rgba(var(--a-primary-rgb), 0.18);
}
.auth-field:focus-within > .material-symbols-outlined {
    color: var(--a-primary);
    transform: scale(1.12);
}
.auth-eye {
    position: absolute;
    left: 0.5rem;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--a-muted);
    cursor: pointer;
    transition: background 200ms, color 200ms;
}
.auth-eye:hover { background: rgba(var(--a-primary-rgb), 0.1); color: var(--a-primary); }
.auth-eye .material-symbols-outlined { font-size: 1.2rem; }

.auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--a-muted);
    cursor: pointer;
    user-select: none;
}
.auth-remember input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--a-primary);
}

.auth-submit {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 3.2rem;
    border: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    background: var(--a-grad);
    background-size: 160% 160%;
    box-shadow: 0 12px 26px rgba(var(--a-primary-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: transform 300ms var(--a-ease), box-shadow 300ms var(--a-ease), filter 200ms;
}
.auth-submit::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.3) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 700ms var(--a-ease);
}
.auth-submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 16px 34px rgba(var(--a-primary-rgb), 0.45);
}
.auth-submit:hover::after { transform: translateX(120%); }
.auth-submit:active { transform: scale(0.98); }
.auth-submit .material-symbols-outlined { transition: transform 300ms var(--a-spring); }
.auth-submit:hover .material-symbols-outlined { transform: translateX(-4px); }
.auth-submit.is-loading { pointer-events: none; filter: saturate(0.8); }
.auth-submit.is-loading .material-symbols-outlined { display: none; }
.auth-submit.is-loading::before {
    content: '';
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.9);
    border-right-color: transparent;
    animation: a-spin 700ms linear infinite;
}

.auth-foot {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--a-muted);
    animation: a-fade 600ms ease backwards 500ms;
}

.auth-page :focus-visible { outline: 2px solid var(--a-primary); outline-offset: 2px; }

@keyframes a-drift {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(6vmax, 4vmax) scale(1.12); }
    100% { transform: translate(-4vmax, 8vmax) scale(0.95); }
}
@keyframes a-rise {
    from { opacity: 0; transform: translateY(26px) scale(0.97); }
    to { opacity: 1; transform: none; }
}
@keyframes a-pop {
    from { opacity: 0; transform: scale(0.5) rotate(-12deg); }
    to { opacity: 1; transform: none; }
}
@keyframes a-sheen {
    0%, 70% { transform: translateX(-100%); }
    90%, 100% { transform: translateX(100%); }
}
@keyframes a-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(3px); }
}
@keyframes a-fade { from { opacity: 0; } }
@keyframes a-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .auth-page *,
    .auth-page *::before,
    .auth-page *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}