/* =============================================================
   UniStudy — Auth & Form Pages UI
   نطاق: html body.uni-ui .uni-auth-page
   يُحوّل هياكل .tr-register > .tr-regi-form القديمة إلى تصميم بطاقة
   حديث مع Hero + بطاقة موحّدة + تنسيق حديث للحقول والأزرار.
   يعمل مع: login, register, confirmation, forget_password,
            send_confirmation_code, universities/register,
            universities/show-registeration, profile/edit, وغيرها.
   ============================================================= */

html body.uni-ui .uni-auth-page {
    --ua-primary: #2563eb;
    --ua-primary-dark: #1d4ed8;
    --ua-primary-light: #3b82f6;
    --ua-accent: #10b981;
    --ua-dark: #0f172a;
    --ua-body: #334155;
    --ua-muted: #64748b;
    --ua-muted-2: #94a3b8;
    --ua-border: #e2e8f0;
    --ua-border-strong: #cbd5e1;
    --ua-surface: #ffffff;
    --ua-surface-2: #f8fafc;
    --ua-surface-3: #f1f5f9;
    --ua-danger: #dc2626;
    --ua-danger-bg: #fef2f2;
    --ua-success: #059669;
    --ua-success-bg: #ecfdf5;
    --ua-warning: #d97706;
    --ua-warning-bg: #fffbeb;
    --ua-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
    --ua-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
    --ua-shadow-md: 0 10px 28px -8px rgba(15, 23, 42, 0.15);
    --ua-shadow-lg: 0 18px 48px -12px rgba(15, 23, 42, 0.2);
    --ua-radius: 1rem;
    --ua-radius-sm: 0.65rem;
    --ua-radius-xs: 0.45rem;

    position: relative;
    background: linear-gradient(180deg, #eef2f7 0%, #f8fafc 360px, #ffffff 100%);
}

/* ============================================================
   CUSTOM LOGIN BACKGROUND — تُطبَّق على .uni-auth-body فقط
   ============================================================ */
html body.uni-ui .uni-auth-body {
    background: #ffffff;
}

html body.uni-ui .uni-auth-body[style] {
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* ============================================================
   HERO — خلفيّة متعدّدة الطبقات مع كرات ضوء ناعمة
   ============================================================ */
html body.uni-ui .uni-auth-hero {
    position: relative;
    padding: clamp(1.75rem, 2vw + 1rem, 3.5rem) 0 clamp(2rem, 2.5vw + 1rem, 4rem);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(1200px 420px at 10% -20%, rgba(37, 99, 235, 0.55) 0%, transparent 60%),
        radial-gradient(900px 380px at 90% 0%, rgba(16, 185, 129, 0.35) 0%, transparent 55%),
        linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #0f766e 100%);
    border-bottom: 1px solid rgba(226, 232, 240, 0.4);
}

/* شبكة نقطيّة خفيفة للعمق */
html body.uni-ui .uni-auth-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 38px 38px;
    opacity: 0.55;
    pointer-events: none;
    z-index: -1;
}

/* كرة ضوء ناعمة متحرّكة تعطي إحساسًا نابضًا */
html body.uni-ui .uni-auth-hero::after {
    content: "";
    position: absolute;
    top: -30%;
    inset-inline-end: -8%;
    width: clamp(220px, 28vw, 420px);
    height: clamp(220px, 28vw, 420px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.45) 0%, rgba(34, 211, 238, 0) 60%);
    filter: blur(30px);
    opacity: 0.7;
    pointer-events: none;
    z-index: -1;
    animation: uni-auth-orb 12s ease-in-out infinite alternate;
}

@keyframes uni-auth-orb {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-6%, 6%) scale(1.08); }
}

/* ============================================================
   HERO INNER — التخطيط الاحترافي
   ============================================================ */
html body.uni-ui .uni-auth-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.65rem, 1.2vw, 1rem);
    max-width: 880px;
    padding-block: clamp(0.6rem, 1.5vw, 1.2rem);
    padding-inline-end: clamp(0, 3vw, 3.5rem);
}

[dir="rtl"] html body.uni-ui .uni-auth-hero__inner {
    padding-inline-end: 0;
    padding-inline-start: clamp(0, 3vw, 3.5rem);
}

/* ظهور متتالٍ لعناصر الهيرو */
html body.uni-ui .uni-auth-hero__inner > * {
    animation: uni-auth-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html body.uni-ui .uni-auth-hero__inner > .uni-auth-breadcrumb { animation-delay: 0.02s; }
html body.uni-ui .uni-auth-hero__inner > .uni-auth-eyebrow    { animation-delay: 0.12s; }
html body.uni-ui .uni-auth-hero__inner > .uni-auth-title      { animation-delay: 0.22s; }
html body.uni-ui .uni-auth-hero__inner > .uni-auth-lead       { animation-delay: 0.32s; }

@keyframes uni-auth-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ============================================================
   BREADCRUMB — فتات خبز احترافي نظيف
   - desktop ≥ 576px: مسار "الرئيسية › العنوان"
   - mobile  < 576px: زر رجوع مُدمج فقط
   نستخدم <div class="__trail"> بدل <ol> لتجنّب أي قواعد قديمة على li/ol.
   كلّ الخصائص مُصرَّح بها بـ !important داخل .uni-auth-breadcrumb
   لحماية التصميم من أيّ ميراث من style.css / style-rtl.css.
   ============================================================ */
html body.uni-ui .uni-auth-breadcrumb {
    display: block !important;
    margin: 0 0 clamp(0.25rem, 0.5vw, 0.5rem) !important;
    padding: 0 !important;
    max-width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* حماية من قاعدة Materialize: nav i {display:block; font-size:24px; height:56px; line-height:56px;}
   التي تكسر أيقوناتنا داخل <nav>. إعادة ضبط لأي <i> داخل الفتات (لكن لا نلمس <i> داخل __ico
   و__sep و.uni-auth-back لأن لها تنسيقاتها الخاصة). */
html body.uni-ui .uni-auth-breadcrumb i,
html body.uni-ui nav.uni-auth-breadcrumb i {
    height: auto !important;
    font-size: inherit !important;
    line-height: 1 !important;
}

/* إعادة ضبط أشمل للأيقونات داخل بنية الفتات */
html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__ico i,
html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__sep i {
    display: inline-block !important;
    height: auto !important;
    width: auto !important;
    font-size: inherit !important;
    line-height: 1 !important;
    color: inherit !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    float: none !important;
    vertical-align: middle !important;
    text-shadow: none !important;
}

/* إعادة ضبط أيقونة زرّ الرجوع (الجوّال) لتجاوز materialize
   مع الحفاظ على دائرة الخلفيّة من القواعد الأصليّة لـ .uni-auth-back i */
html body.uni-ui .uni-auth-breadcrumb .uni-auth-back i {
    height: 1.5rem !important;
    line-height: 1 !important;
    font-size: 0.72rem !important;
}

/* المسار الكامل — مخفي على الجوال */
html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__trail {
    display: none !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    margin: 0 !important;
    padding: 0.45rem 0.75rem !important;
    max-width: 100% !important;
    min-width: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    box-shadow:
        0 4px 18px -8px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    font-family: inherit !important;
}

/* الرابط (الرئيسية/تسجيل الدخول…) */
html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin: 0 !important;
    padding: 0.28rem 0.6rem 0.28rem 0.35rem !important;
    color: rgba(241, 245, 249, 0.92) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.005em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-shadow: none !important;
    text-transform: none !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

html body.uni-ui [dir="rtl"] .uni-auth-breadcrumb .uni-auth-breadcrumb__link {
    padding: 0.28rem 0.35rem 0.28rem 0.6rem !important;
}

html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__ico {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.7rem !important;
    height: 1.7rem !important;
    flex: 0 0 1.7rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.7) 0%, rgba(34, 211, 238, 0.5) 100%) !important;
    color: #fff !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 2px 6px rgba(15, 23, 42, 0.3) !important;
    text-shadow: none !important;
    transition:
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.2s ease !important;
}

html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__ico i {
    line-height: 1 !important;
    font-size: inherit !important;
    color: inherit !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-shadow: none !important;
    vertical-align: middle !important;
    float: none !important;
}

html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__text {
    display: inline-block !important;
    max-width: 12rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: inherit !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    line-height: 1.25 !important;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.25) !important;
}

html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__link:hover,
html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__link:focus-visible {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    text-decoration: none !important;
    outline: none !important;
    transform: translateY(-1px) !important;
}

html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__link:hover .uni-auth-breadcrumb__ico,
html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__link:focus-visible .uni-auth-breadcrumb__ico {
    transform: scale(1.08) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 4px 10px rgba(59, 130, 246, 0.45) !important;
}

html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85) !important;
    outline-offset: 2px !important;
}

/* الفاصل chevron */
html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__sep {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__sep i {
    line-height: 1 !important;
    color: inherit !important;
    background: transparent !important;
    text-shadow: none !important;
}

/* العنصر الحالي */
html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__current {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0.32rem 0.85rem !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.35) 0%, rgba(34, 211, 238, 0.22) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    color: #ecfdf5 !important;
    font-family: inherit !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.005em !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 18rem !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 2px 10px rgba(16, 185, 129, 0.3) !important;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35) !important;
}

/* < 576px: إخفاء المسار وإظهار زر الرجوع المدمج */
@media (max-width: 575.98px) {
    html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__trail {
        display: none !important;
    }

    html body.uni-ui .uni-auth-breadcrumb > .uni-auth-back {
        display: inline-flex !important;
    }
}

/* ≥ 576px: إظهار المسار وإخفاء زرّ الرجوع المدمج */
@media (min-width: 576px) {
    html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__trail {
        display: inline-flex !important;
    }

    html body.uni-ui .uni-auth-breadcrumb > .uni-auth-back {
        display: none !important;
    }
}

/* شاشات صغيرة 576-767px: مقاسات مضغوطة */
@media (min-width: 576px) and (max-width: 767.98px) {
    html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__trail {
        padding: 0.4rem 0.6rem !important;
        gap: 0.3rem !important;
    }

    html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__link {
        font-size: 0.78rem !important;
        padding: 0.25rem 0.5rem 0.25rem 0.3rem !important;
    }

    html body.uni-ui [dir="rtl"] .uni-auth-breadcrumb .uni-auth-breadcrumb__link {
        padding: 0.25rem 0.3rem 0.25rem 0.5rem !important;
    }

    html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__ico {
        width: 1.5rem !important;
        height: 1.5rem !important;
        flex: 0 0 1.5rem !important;
        font-size: 0.74rem !important;
    }

    html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__text {
        max-width: 8rem !important;
    }

    html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__current {
        padding: 0.28rem 0.7rem !important;
        font-size: 0.76rem !important;
        max-width: 12rem !important;
    }
}

/* تابلت 768-991px: أحجام متوسّطة */
@media (min-width: 768px) and (max-width: 991.98px) {
    html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__text {
        max-width: 12rem !important;
    }

    html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__current {
        max-width: 18rem !important;
    }
}

/* ≥ 992px: أحجام أكبر للشاشات الكبيرة */
@media (min-width: 992px) {
    html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__trail {
        padding: 0.5rem 0.9rem !important;
        gap: 0.45rem !important;
    }

    html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__link {
        font-size: 0.86rem !important;
        padding: 0.3rem 0.7rem 0.3rem 0.4rem !important;
    }

    html body.uni-ui [dir="rtl"] .uni-auth-breadcrumb .uni-auth-breadcrumb__link {
        padding: 0.3rem 0.4rem 0.3rem 0.7rem !important;
    }

    html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__ico {
        width: 1.85rem !important;
        height: 1.85rem !important;
        flex: 0 0 1.85rem !important;
        font-size: 0.9rem !important;
    }

    html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__text {
        max-width: 14rem !important;
    }

    html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__current {
        padding: 0.4rem 1rem !important;
        font-size: 0.86rem !important;
        max-width: 22rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__link,
    html body.uni-ui .uni-auth-breadcrumb .uni-auth-breadcrumb__ico {
        transition: none !important;
    }
}

html body.uni-ui .uni-auth-back {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem 0.45rem 0.55rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.01em;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease,
        padding 0.22s ease;
}

[dir="rtl"] html body.uni-ui .uni-auth-back {
    padding: 0.45rem 0.55rem 0.45rem 0.95rem;
}

html body.uni-ui .uni-auth-back i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: 0.72rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    transition: background 0.22s ease, transform 0.22s ease;
}

html body.uni-ui .uni-auth-back:hover,
html body.uni-ui .uni-auth-back:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
    outline: none;
}

html body.uni-ui .uni-auth-back:hover i,
html body.uni-ui .uni-auth-back:focus-visible i {
    background: rgba(255, 255, 255, 0.32);
}

html body.uni-ui [dir="ltr"] .uni-auth-back:hover i,
html body.uni-ui [dir="ltr"] .uni-auth-back:focus-visible i {
    transform: translateX(-2px);
}

html body.uni-ui [dir="rtl"] .uni-auth-back:hover i,
html body.uni-ui [dir="rtl"] .uni-auth-back:focus-visible i {
    transform: translateX(2px);
}

html body.uni-ui .uni-auth-back:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
}

/* ============================================================
   EYEBROW — شارة فوق العنوان
   ============================================================ */
html body.uni-ui .uni-auth-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.3rem 0.9rem 0.3rem 0.55rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(34, 211, 238, 0.14) 100%);
    border: 1px solid rgba(16, 185, 129, 0.45);
    border-radius: 999px;
    color: #d1fae5;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px -6px rgba(16, 185, 129, 0.35);
}

html body.uni-ui .uni-auth-eyebrow::before {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.8);
    flex-shrink: 0;
    animation: uni-auth-dot-pulse 2.2s ease-in-out infinite;
}

@keyframes uni-auth-dot-pulse {
    0%, 100% { transform: scale(1);   opacity: 1;   }
    50%      { transform: scale(1.3); opacity: 0.7; }
}

[dir="rtl"] html body.uni-ui .uni-auth-eyebrow {
    padding: 0.3rem 0.55rem 0.3rem 0.9rem;
    text-transform: none;
    letter-spacing: normal;
}

/* ============================================================
   TITLE — العنوان الرئيسي
   ============================================================ */
html body.uni-ui .uni-auth-title {
    position: relative;
    margin: 0;
    font-size: clamp(1.65rem, 1.2rem + 2.2vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.18;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
    text-wrap: balance;
}

/* خطّ تسطير متدرّج أسفل العنوان */
html body.uni-ui .uni-auth-title::after {
    content: "";
    display: block;
    width: clamp(48px, 6vw, 72px);
    height: 3px;
    margin-top: 0.75rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #22d3ee 0%, #10b981 55%, #facc15 100%);
    box-shadow: 0 2px 10px rgba(34, 211, 238, 0.5);
}

/* ============================================================
   LEAD — نص تعريفي
   ============================================================ */
html body.uni-ui .uni-auth-lead {
    margin: 0.35rem 0 0;
    max-width: 52rem;
    font-size: clamp(0.9rem, 0.3vw + 0.85rem, 1.05rem);
    line-height: 1.75;
    color: rgba(241, 245, 249, 0.94);
    text-wrap: pretty;
}

/* ============================================================
   استجابة دقيقة
   ============================================================ */
@media (min-width: 1400px) {
    html body.uni-ui .uni-auth-hero__inner {
        max-width: 960px;
    }
}

@media (max-width: 767.98px) {
    html body.uni-ui .uni-auth-hero__inner {
        gap: 0.6rem;
        padding-inline-end: 0;
    }

    [dir="rtl"] html body.uni-ui .uni-auth-hero__inner {
        padding-inline-start: 0;
    }

    html body.uni-ui .uni-auth-back {
        padding: 0.4rem 0.85rem 0.4rem 0.45rem;
        font-size: 0.82rem;
    }

    [dir="rtl"] html body.uni-ui .uni-auth-back {
        padding: 0.4rem 0.45rem 0.4rem 0.85rem;
    }

    html body.uni-ui .uni-auth-back i {
        width: 1.35rem;
        height: 1.35rem;
        font-size: 0.68rem;
    }

    html body.uni-ui .uni-auth-eyebrow {
        font-size: 0.7rem;
        padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    }

    [dir="rtl"] html body.uni-ui .uni-auth-eyebrow {
        padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    }

    html body.uni-ui .uni-auth-title::after {
        margin-top: 0.55rem;
    }
}

@media (max-width: 575.98px) {
    html body.uni-ui .uni-auth-hero__inner {
        gap: 0.5rem;
    }
}

/* ============================================================
   احترام تقليل الحركة
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html body.uni-ui .uni-auth-hero::after,
    html body.uni-ui .uni-auth-hero__inner > *,
    html body.uni-ui .uni-auth-eyebrow::before {
        animation: none !important;
    }
}

/* ============================================================
   BODY + CARD
   ============================================================ */
html body.uni-ui .uni-auth-body {
    padding: 1.75rem 0 3rem;
}

@media (min-width: 768px) {
    html body.uni-ui .uni-auth-body {
        padding: 2.5rem 0 4rem;
    }
}

html body.uni-ui .uni-auth-card {
    max-width: 720px;
    margin: 0 auto;
    background: var(--ua-surface);
    border: 1px solid var(--ua-border);
    border-radius: var(--ua-radius);
    box-shadow: var(--ua-shadow-md);
    overflow: hidden;
    position: relative;
}

html body.uni-ui .uni-auth-card--wide {
    max-width: 960px;
}

html body.uni-ui .uni-auth-card--narrow {
    max-width: 520px;
}

html body.uni-ui .uni-auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ua-primary) 0%, var(--ua-primary-light) 50%, var(--ua-accent) 100%);
    z-index: 1;
}

/* ============================================================
   OVERRIDE OLD .tr-register / .tr-regi-form INSIDE uni-auth-page
   ============================================================ */
html body.uni-ui .uni-auth-page .tr-register {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    width: auto !important;
    display: block !important;
}

html body.uni-ui .uni-auth-page .tr-register::before,
html body.uni-ui .uni-auth-page .tr-register::after {
    display: none !important;
    content: none !important;
}

html body.uni-ui .uni-auth-page .tr-regi-form {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 1.75rem 1.75rem 2rem !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    display: block !important;
}

@media (min-width: 768px) {
    html body.uni-ui .uni-auth-page .tr-regi-form {
        padding: 2.25rem 2.25rem 2.5rem !important;
    }
}

@media (max-width: 575.98px) {
    html body.uni-ui .uni-auth-page .tr-regi-form {
        padding: 1.25rem 1.25rem 1.5rem !important;
    }
}

html body.uni-ui .uni-auth-page .tr-regi-form > h4,
html body.uni-ui .uni-auth-page .tr-regi-form > h5 {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ua-dark);
    letter-spacing: -0.01em;
    text-align: start;
    position: relative;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ua-border);
}

html body.uni-ui .uni-auth-page .tr-regi-form > h4::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    background: linear-gradient(90deg, var(--ua-primary) 0%, var(--ua-accent) 100%);
    border-radius: 999px;
    margin-top: 0.75rem;
}

html body.uni-ui .uni-auth-page .tr-regi-form form {
    margin-top: 1.25rem;
}

html body.uni-ui .uni-auth-page .tr-regi-form > p {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px dashed var(--ua-border);
    color: var(--ua-muted);
    font-size: 0.9375rem;
    text-align: center;
    line-height: 1.8;
}

html body.uni-ui .uni-auth-page .tr-regi-form > p a {
    color: var(--ua-primary);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed rgba(37, 99, 235, 0.45);
    transition: color 0.18s ease, border-color 0.18s ease;
}

html body.uni-ui .uni-auth-page .tr-regi-form > p a:hover {
    color: var(--ua-primary-dark);
    border-bottom-color: var(--ua-primary);
    text-decoration: none;
}

/* ============================================================
   ALERTS
   ============================================================ */
html body.uni-ui .uni-auth-page .alert {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--ua-radius-sm);
    border: 1px solid transparent;
    font-size: 0.9rem;
    line-height: 1.55;
}

html body.uni-ui .uni-auth-page .alert ul {
    margin: 0;
    padding-inline-start: 1.25rem;
}

html body.uni-ui .uni-auth-page .alert-success {
    background: var(--ua-success-bg);
    border-color: rgba(5, 150, 105, 0.25);
    color: #065f46;
}

html body.uni-ui .uni-auth-page .alert-danger {
    background: var(--ua-danger-bg);
    border-color: rgba(220, 38, 38, 0.25);
    color: #991b1b;
}

/* ============================================================
   ROW / COL OVERRIDES (materialize uses s12, m6...)
   ============================================================ */
html body.uni-ui .uni-auth-page .tr-regi-form .row {
    margin-bottom: 1rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

html body.uni-ui .uni-auth-page .tr-regi-form .row:last-child {
    margin-bottom: 0;
}

html body.uni-ui .uni-auth-page .tr-regi-form .row > [class*="col"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* ============================================================
   INPUTS (Modern)
   ============================================================ */
html body.uni-ui .uni-auth-page .input-field {
    position: relative;
    margin: 0.25rem 0 0.5rem;
    display: block;
}

html body.uni-ui .uni-auth-page .input-field.col {
    padding-top: 0;
    padding-bottom: 0;
}

/* Label — promote materialize's absolute label to a visible block label */
html body.uni-ui .uni-auth-page .input-field > label,
html body.uni-ui .uni-auth-page .form-group-clear,
html body.uni-ui .uni-regform-page .form-group-clear.uni-regform-col {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

html body.uni-ui .uni-regform-page .uni-regform-section__body .row {
    margin-bottom: 0.25rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

html body.uni-ui .uni-regform-page .uni-regform-section__body .row > [class*="col"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    min-width: 0;
}

html body.uni-ui .uni-auth-page .form-group-clear > label,
html body.uni-ui .uni-auth-page .form-group-clear > label.form-label {
    position: static !important;
    display: block;
    margin: 0 0 0.45rem;
    padding: 0;
    color: var(--ua-dark) !important;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    transform: none !important;
    pointer-events: auto;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    text-align: start;
}

/* Hide pure-placeholder labels that materialize puts below the input */
html body.uni-ui .uni-auth-page .input-field > input[placeholder] + label:empty {
    display: none;
}

/* Inputs */
html body.uni-ui .uni-auth-page .input-field input:not([type=button]):not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]),
html body.uni-ui .uni-auth-page .input-field select,
html body.uni-ui .uni-auth-page .input-field textarea,
html body.uni-ui .uni-auth-page .form-group-clear input[type=text],
html body.uni-ui .uni-auth-page .form-group-clear input[type=email],
html body.uni-ui .uni-auth-page .form-group-clear input[type=tel],
html body.uni-ui .uni-auth-page .form-group-clear input[type=url],
html body.uni-ui .uni-auth-page .form-group-clear input[type=number],
html body.uni-ui .uni-auth-page .form-group-clear input[type=password],
html body.uni-ui .uni-auth-page .form-group-clear select,
html body.uni-ui .uni-auth-page .form-group-clear textarea,
html body.uni-ui .uni-auth-page .form-group-clear input[type=file] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: auto;
    min-height: 44px;
    padding: 0.65rem 0.9rem;
    background: var(--ua-surface-2);
    border: 1.5px solid var(--ua-border);
    border-radius: var(--ua-radius-xs);
    color: var(--ua-dark);
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    text-align: start;
}

html body.uni-ui .uni-auth-page .input-field input:focus,
html body.uni-ui .uni-auth-page .input-field select:focus,
html body.uni-ui .uni-auth-page .input-field textarea:focus,
html body.uni-ui .uni-auth-page .form-group-clear input:focus,
html body.uni-ui .uni-auth-page .form-group-clear select:focus,
html body.uni-ui .uni-auth-page .form-group-clear textarea:focus {
    background: #fff;
    border-color: var(--ua-primary) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
    outline: none;
}

html body.uni-ui .uni-auth-page .input-field input::placeholder,
html body.uni-ui .uni-auth-page .form-group-clear input::placeholder {
    color: var(--ua-muted-2);
    opacity: 1;
}

/* Disable materialize's border-bottom-only styling */
html body.uni-ui .uni-auth-page .input-field input.validate,
html body.uni-ui .uni-auth-page .input-field input.form-control,
html body.uni-ui .uni-auth-page .input-field input[type=text],
html body.uni-ui .uni-auth-page .input-field input[type=password],
html body.uni-ui .uni-auth-page .input-field input[type=email],
html body.uni-ui .uni-auth-page .input-field input[type=tel],
html body.uni-ui .uni-auth-page .input-field input[type=number] {
    border-bottom: 1.5px solid var(--ua-border);
}

html body.uni-ui .uni-auth-page .input-field input.validate:focus,
html body.uni-ui .uni-auth-page .input-field input.form-control:focus {
    border-bottom-color: var(--ua-primary);
}

/* Textarea */
html body.uni-ui .uni-auth-page .input-field textarea,
html body.uni-ui .uni-auth-page .form-group-clear textarea {
    min-height: 96px;
    resize: vertical;
}

/* Native select — browser-default مع خصائص منطقية لـ RTL/LTR */
html body.uni-ui .uni-auth-page select.browser-default:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 7 7 13 1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 12px 8px;
    background-position: inset-inline-end 0.9rem center;
    padding-inline-end: 2.5rem;
    padding-inline-start: 0.9rem;
    text-align: start;
}

/* Native select styling */
html body.uni-ui .uni-auth-page select:not(.browser-default):not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 7 7 13 1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 12px 8px;
    padding-right: 2.5rem;
}

[dir="rtl"] html body.uni-ui .uni-auth-page select:not(.browser-default):not([multiple]) {
    background-position: inset-inline-end 0.9rem center;
    padding-inline-end: 2.5rem;
    padding-inline-start: 0.9rem;
}

/* Materialize enhanced select wrapper */
html body.uni-ui .uni-auth-page .select-wrapper {
    width: 100%;
}

/* منع تكرار الحقل: Materialize يُبقي <select> داخل .select-wrapper بينما uni-auth يُظهره كحقل كامل */
html body.uni-ui .uni-auth-page .select-wrapper > select {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip: rect(0, 0, 0, 0) !important;
}

html body.uni-ui .uni-auth-page .select-wrapper input.select-dropdown {
    box-sizing: border-box;
    height: auto;
    min-height: 44px;
    padding: 0.65rem 2.5rem 0.65rem 0.9rem;
    background-color: var(--ua-surface-2);
    border: 1.5px solid var(--ua-border) !important;
    border-radius: var(--ua-radius-xs);
    color: var(--ua-dark);
    font-size: 0.95rem;
    margin-bottom: 0;
}

[dir="rtl"] html body.uni-ui .uni-auth-page .select-wrapper input.select-dropdown {
    padding: 0.65rem 0.9rem 0.65rem 2.5rem;
}

html body.uni-ui .uni-auth-page .select-wrapper input.select-dropdown:focus {
    border-color: var(--ua-primary) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
    background-color: #fff;
}

html body.uni-ui .uni-auth-page .select-wrapper .caret {
    color: var(--ua-muted);
    fill: var(--ua-muted);
    right: 0.85rem;
}

[dir="rtl"] html body.uni-ui .uni-auth-page .select-wrapper .caret {
    right: auto;
    left: 0.85rem;
}

html body.uni-ui .uni-auth-page .dropdown-content {
    border-radius: var(--ua-radius-sm);
    box-shadow: var(--ua-shadow-lg);
    border: 1px solid var(--ua-border);
    background: #fff;
    overflow: hidden;
    margin-top: 0.25rem;
}

html body.uni-ui .uni-auth-page .dropdown-content li > a,
html body.uni-ui .uni-auth-page .dropdown-content li > span {
    color: var(--ua-dark);
    padding: 0.55rem 0.9rem;
    font-size: 0.925rem;
}

html body.uni-ui .uni-auth-page .dropdown-content li.selected,
html body.uni-ui .uni-auth-page .dropdown-content li.active {
    background: rgba(37, 99, 235, 0.09);
}

html body.uni-ui .uni-auth-page .dropdown-content li:hover {
    background: var(--ua-surface-3);
}

/* File input */
html body.uni-ui .uni-auth-page .file-field .btn,
html body.uni-ui .uni-auth-page .file-field .db-up-btn {
    background: linear-gradient(135deg, var(--ua-primary) 0%, var(--ua-primary-light) 100%);
    color: #fff;
    padding: 0 1rem;
    height: 44px;
    line-height: 44px;
    border-radius: var(--ua-radius-xs);
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.5);
}

html body.uni-ui .uni-auth-page .file-field .file-path-wrapper {
    padding-inline-start: 0.65rem;
}

/* ============================================================
   SUBMIT BUTTON (override btn-large / full-btn)
   ============================================================ */
html body.uni-ui .uni-auth-page .btn-large.full-btn,
html body.uni-ui .uni-auth-page .full-btn,
html body.uni-ui .uni-auth-page input[type=submit].full-btn,
html body.uni-ui .uni-auth-page button[type=submit].full-btn,
html body.uni-ui .uni-auth-page button.full-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.9rem 1.25rem;
    height: auto;
    min-height: 52px;
    line-height: 1.3;
    background: linear-gradient(135deg, var(--ua-primary) 0%, var(--ua-primary-light) 100%);
    color: #fff !important;
    border: 0;
    border-radius: var(--ua-radius-sm);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    cursor: pointer;
    box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.55);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

html body.uni-ui .uni-auth-page .btn-large.full-btn:hover,
html body.uni-ui .uni-auth-page .full-btn:hover,
html body.uni-ui .uni-auth-page input[type=submit].full-btn:hover,
html body.uni-ui .uni-auth-page button.full-btn:hover,
html body.uni-ui .uni-auth-page .btn-large.full-btn:focus-visible,
html body.uni-ui .uni-auth-page .full-btn:focus-visible {
    background: linear-gradient(135deg, var(--ua-primary-dark) 0%, var(--ua-primary) 100%);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -6px rgba(37, 99, 235, 0.6);
    outline: none;
}

/* ============================================================
   CHECKBOX (Materialize + native)
   ============================================================ */
html body.uni-ui .uni-auth-page [type=checkbox] + label {
    color: var(--ua-body);
    font-size: 0.925rem;
    font-weight: 500;
    position: relative;
    padding-inline-start: 2rem;
    padding-inline-end: 0;
    line-height: 1.65;
}

html body.uni-ui .uni-auth-page .rules .rules-label a {
    color: var(--ua-primary);
    font-weight: 700;
    text-decoration: underline;
}

/* ============================================================
   HELP / FEEDBACK
   ============================================================ */
html body.uni-ui .uni-auth-page .invalid-feedback {
    display: block;
    margin-top: 0.35rem;
    color: var(--ua-danger);
    font-size: 0.825rem;
    font-weight: 500;
    line-height: 1.5;
}

html body.uni-ui .uni-auth-page .help-block,
html body.uni-ui .uni-auth-page small.help-block {
    display: block;
    margin-top: 0.35rem;
    color: var(--ua-muted);
    font-size: 0.8125rem;
    line-height: 1.55;
}

/* ============================================================
   CAPTCHA polish (used in login/register)
   ============================================================ */
html body.uni-ui .uni-auth-page .captcha-label {
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin-bottom: 0.45rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--ua-dark) !important;
}

html body.uni-ui .uni-auth-page .captcha-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
}

html body.uni-ui .uni-auth-page .captcha-box {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--ua-surface-2);
    border: 1.5px solid var(--ua-border);
    border-radius: var(--ua-radius-xs);
}

html body.uni-ui .uni-auth-page .captcha-img {
    display: block;
    border: none;
    border-radius: 4px;
}

html body.uni-ui .uni-auth-page .captcha-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--ua-primary);
    background: rgba(37, 99, 235, 0.1);
    border-radius: 50%;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease;
}

html body.uni-ui .uni-auth-page .captcha-refresh:hover {
    background: rgba(37, 99, 235, 0.2);
    color: var(--ua-primary-dark);
    transform: rotate(90deg);
    text-decoration: none;
}

html body.uni-ui .uni-auth-page .captcha-input {
    min-width: 140px;
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
}

/* ============================================================
   COUNTRY + DIAL CODE PICKER — see end of file (global .tr-country-picker)
   ============================================================ */

/* ============================================================
   INFO TABLE (used in show-registeration)
   ============================================================ */
html body.uni-ui .uni-auth-page .tr-regi-form .row > .col label {
    font-weight: 700;
    color: var(--ua-muted);
    font-size: 0.875rem;
}

html body.uni-ui .uni-auth-page .tr-regi-form .row > .col p {
    margin: 0;
    padding: 0.55rem 0.9rem;
    background: var(--ua-surface-2);
    border: 1px solid var(--ua-border);
    border-radius: var(--ua-radius-xs);
    color: var(--ua-dark);
    font-size: 0.95rem;
    min-height: 44px;
    display: flex;
    align-items: center;
}

html body.uni-ui .uni-auth-page .tr-regi-form hr {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px dashed var(--ua-border);
}

html body.uni-ui .uni-auth-page .tr-regi-form h5 {
    margin: 0.5rem 0 1rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ua-dark);
    text-align: start;
}

/* ============================================================
   SUPPORT ROW (links below form)
   ============================================================ */
html body.uni-ui .uni-auth-page .uni-auth-extra {
    max-width: 720px;
    margin: 1rem auto 0;
    text-align: center;
    color: var(--ua-muted);
    font-size: 0.875rem;
}

html body.uni-ui .uni-auth-page .uni-auth-extra a {
    color: var(--ua-primary);
    font-weight: 600;
    text-decoration: none;
}

html body.uni-ui .uni-auth-page .uni-auth-extra a:hover {
    text-decoration: underline;
}

/* ============================================================
   LIST-LIKE PROFILE FIELDS (edit-profile)
   ============================================================ */
html body.uni-ui .uni-auth-page .db-2-com.db-2-main {
    background: transparent;
    padding: 0;
    box-shadow: none;
    border: 0;
}

html body.uni-ui .uni-auth-page .db-2-main-com.db2-form-pay.db2-form-com {
    background: transparent;
    padding: 0;
    box-shadow: none;
    border: 0;
}

html body.uni-ui .uni-auth-page .db-2-com > h4 {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ua-dark);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--ua-border);
    text-align: start;
}

html body.uni-ui .uni-auth-page .db-2-com > h4::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    background: linear-gradient(90deg, var(--ua-primary) 0%, var(--ua-accent) 100%);
    border-radius: 999px;
    margin-top: 0.75rem;
}

html body.uni-ui .uni-auth-page .db-2-main-com .col-form-label {
    color: var(--ua-dark);
    font-weight: 600;
    font-size: 0.9rem;
    padding-top: 0.55rem;
    display: block;
    margin-bottom: 0.35rem;
}

/* ============================================================
   RESPONSIVE FINE-TUNING
   ============================================================ */
@media (max-width: 575.98px) {
    html body.uni-ui .uni-auth-hero {
        padding: 1.75rem 0 2rem;
    }

    html body.uni-ui .uni-auth-title {
        font-size: clamp(1.35rem, 6vw, 1.75rem);
    }

    html body.uni-ui .uni-auth-body {
        padding: 1.25rem 0 2rem;
    }

    html body.uni-ui .uni-auth-page .captcha-inline {
        flex-direction: column;
        align-items: stretch;
    }

    html body.uni-ui .uni-auth-page .captcha-input {
        width: 100%;
    }

    html body.uni-ui .uni-auth-page .btn-large.full-btn,
    html body.uni-ui .uni-auth-page .full-btn {
        min-height: 48px;
        padding: 0.8rem 1rem;
        font-size: 0.95rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html body.uni-ui .uni-auth-page * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* =============================================================
   UNIVERSITY REGISTRATION FORM — refined professional layout
   Scope: html body.uni-ui .uni-auth-page.uni-regform-page
   ============================================================= */

html body.uni-ui .uni-regform-page .uni-regform-card {
    padding: clamp(1.1rem, 1.2vw + 0.6rem, 2.25rem);
}

/* Header with badge + title + hint */
html body.uni-ui .uni-regform-page .uni-regform-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0 0 1rem;
    margin: 0 0 1.25rem;
    border-bottom: 1px dashed var(--ua-border);
}

html body.uni-ui .uni-regform-page .uni-regform-head__ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    color: #fff;
    font-size: 1.25rem;
    background: linear-gradient(135deg, var(--ua-primary) 0%, #0ea5e9 100%);
    box-shadow: 0 8px 20px -8px rgba(37, 99, 235, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

html body.uni-ui .uni-regform-page .uni-regform-head__meta {
    flex: 1 1 auto;
    min-width: 0;
}

html body.uni-ui .uni-regform-page .uni-regform-head__title {
    margin: 0 0 0.25rem !important;
    font-size: clamp(1.1rem, 1vw + 0.85rem, 1.45rem);
    font-weight: 800;
    color: var(--ua-dark);
    letter-spacing: -0.01em;
    padding: 0 !important;
}

html body.uni-ui .uni-regform-page .uni-regform .uni-regform-head__title::after {
    display: none;
}

html body.uni-ui .uni-regform-page .uni-regform-head__hint {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ua-muted);
    line-height: 1.6;
}

/* Alerts — modernized */
html body.uni-ui .uni-regform-page .uni-regform-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border-radius: var(--ua-radius-sm);
    border: 1px solid transparent;
    margin: 0 0 1rem;
    font-size: 0.92rem;
    line-height: 1.55;
}

html body.uni-ui .uni-regform-page .uni-regform-alert > i {
    font-size: 1.05rem;
    line-height: 1.5;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

html body.uni-ui .uni-regform-page .uni-regform-alert.alert-success {
    background: var(--ua-success-bg);
    border-color: rgba(5, 150, 105, 0.3);
    color: var(--ua-success);
}

html body.uni-ui .uni-regform-page .uni-regform-alert.alert-danger {
    background: var(--ua-danger-bg);
    border-color: rgba(220, 38, 38, 0.3);
    color: var(--ua-danger);
}

html body.uni-ui .uni-regform-page .uni-regform-alert ul {
    margin: 0.15rem 0 0 1rem;
    padding: 0;
}

html body.uni-ui .uni-regform-page .uni-regform-alert li {
    margin-bottom: 0.2rem;
}

/* Section / fieldset */
html body.uni-ui .uni-regform-page .uni-regform-section {
    position: relative;
    border: 1px solid var(--ua-border);
    border-radius: 1rem;
    padding: 0.85rem 1.1rem 1.1rem;
    margin: 0 0 1.1rem;
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: var(--ua-shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html body.uni-ui .uni-regform-page .uni-regform-section:hover {
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: var(--ua-shadow);
}

html body.uni-ui .uni-regform-page .uni-regform-section__legend {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.35rem 0.9rem 0.35rem 0.5rem;
    margin: 0 0 0.85rem;
    background: linear-gradient(135deg, var(--ua-primary) 0%, var(--ua-primary-dark) 100%);
    color: #fff;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    box-shadow: 0 6px 16px -8px rgba(37, 99, 235, 0.6);
    width: auto;
    float: none;
    line-height: 1.2;
}

[dir="rtl"] html body.uni-ui .uni-regform-page .uni-regform-section__legend {
    padding: 0.35rem 0.5rem 0.35rem 0.9rem;
}

html body.uni-ui .uni-regform-page .uni-regform-section__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

html body.uni-ui .uni-regform-page .uni-regform-section__ico {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

html body.uni-ui .uni-regform-page .uni-regform-section__title {
    white-space: nowrap;
}

html body.uni-ui .uni-regform-page .uni-regform-section__optional {
    margin-inline-start: 0.4rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Optional field badge next to a .form-label (not inside section legend) */
html body.uni-ui .uni-regform-page .uni-regform-label-optional {
    display: inline-block;
    margin-inline-start: 0.35rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--ua-surface-3);
    color: var(--ua-muted);
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: middle;
}

html body.uni-ui .uni-regform-page .uni-regform-section__body {
    padding: 0;
}

html body.uni-ui .uni-regform-page .uni-regform-section__body .row:last-child {
    margin-bottom: 0;
}

/* Section variants */
html body.uni-ui .uni-regform-page .uni-regform-section--verify {
    background:
        radial-gradient(120% 60% at 100% 0%, rgba(16, 185, 129, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f8fffd 100%);
    border-color: rgba(16, 185, 129, 0.28);
}

html body.uni-ui .uni-regform-page .uni-regform-section--verify:hover {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 10px 28px -14px rgba(16, 185, 129, 0.35);
}

html body.uni-ui .uni-regform-page .uni-regform-section--verify .uni-regform-section__legend {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 6px 16px -8px rgba(16, 185, 129, 0.6);
}

/* Required marker */
html body.uni-ui .uni-regform-page .uni-regform-required {
    color: var(--ua-danger);
    font-weight: 800;
    margin-inline-start: 0.15rem;
}

/* Input with leading icon */
html body.uni-ui .uni-regform-page .uni-regform-ifield {
    position: relative;
    width: 100%;
}

html body.uni-ui .uni-regform-page .uni-regform-ifield__ico {
    position: absolute;
    top: 50%;
    inset-inline-start: 0.9rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    color: var(--ua-muted);
    font-size: 0.95rem;
    pointer-events: none;
    transition: color 0.18s ease;
    z-index: 1;
}

html body.uni-ui .uni-regform-page .uni-regform-ifield:focus-within .uni-regform-ifield__ico {
    color: var(--ua-primary);
}

html body.uni-ui .uni-regform-page .uni-regform-ifield .uni-regform-input,
html body.uni-ui .uni-regform-page .form-group-clear .uni-regform-ifield input.form-control,
html body.uni-ui .uni-regform-page .form-group-clear .uni-regform-ifield select.form-control {
    padding-inline-start: 2.6rem;
}

/* Social media branded focus */
html body.uni-ui .uni-regform-page .uni-regform-ifield--facebook:focus-within .uni-regform-ifield__ico { color: #1877f2; }
html body.uni-ui .uni-regform-page .uni-regform-ifield--twitter:focus-within .uni-regform-ifield__ico { color: #0f172a; }
html body.uni-ui .uni-regform-page .uni-regform-ifield--linkedin:focus-within .uni-regform-ifield__ico { color: #0a66c2; }
html body.uni-ui .uni-regform-page .uni-regform-ifield--whatsapp:focus-within .uni-regform-ifield__ico { color: #25d366; }

html body.uni-ui .uni-regform-page .uni-regform-ifield--facebook .uni-regform-ifield__ico,
html body.uni-ui .uni-regform-page .uni-regform-ifield--twitter .uni-regform-ifield__ico,
html body.uni-ui .uni-regform-page .uni-regform-ifield--linkedin .uni-regform-ifield__ico,
html body.uni-ui .uni-regform-page .uni-regform-ifield--whatsapp .uni-regform-ifield__ico {
    color: var(--ua-muted-2);
}

/* Select with icon — keep native caret padding */
html body.uni-ui .uni-regform-page .uni-regform-ifield--select .uni-regform-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 7 7 13 1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 12px 8px;
    padding-inline-end: 2.5rem;
}

[dir="rtl"] html body.uni-ui .uni-regform-page .uni-regform-ifield--select .uni-regform-select {
    background-position: left 0.9rem center;
}

/* Helper error messages */
html body.uni-ui .uni-regform-page .uni-regform-error {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.45rem;
    color: var(--ua-danger);
    font-size: 0.82rem;
    font-weight: 600;
}

html body.uni-ui .uni-regform-page .uni-regform-help {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    color: var(--ua-muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

html body.uni-ui .uni-regform-page .uni-regform-help > i {
    color: var(--ua-primary);
    font-size: 0.85rem;
}

/* Social media 2-col grid on md+ */
@media (min-width: 768px) {
    html body.uni-ui .uni-regform-page .uni-regform-grid {
        display: flex;
        flex-wrap: wrap;
    }
}

/* =========== License files drop zone =========== */
html body.uni-ui .uni-regform-page .uni-regform-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.5rem 1rem;
    border: 2px dashed var(--ua-border-strong);
    border-radius: 0.85rem;
    background:
        linear-gradient(180deg, rgba(37, 99, 235, 0.04) 0%, rgba(14, 165, 233, 0.03) 100%);
    color: var(--ua-body);
    cursor: pointer;
    text-align: center;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
    margin: 0;
}

html body.uni-ui .uni-regform-page .uni-regform-dropzone:hover {
    border-color: var(--ua-primary);
    background:
        linear-gradient(180deg, rgba(37, 99, 235, 0.07) 0%, rgba(14, 165, 233, 0.05) 100%);
    box-shadow: 0 4px 18px -8px rgba(37, 99, 235, 0.3);
}

html body.uni-ui .uni-regform-page .uni-regform-dropzone.is-dragover {
    border-color: var(--ua-primary);
    background: rgba(37, 99, 235, 0.1);
    transform: scale(1.005);
    box-shadow: 0 6px 22px -8px rgba(37, 99, 235, 0.4);
}

html body.uni-ui .uni-regform-page .uni-regform-dropzone.is-filled {
    border-style: solid;
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.05);
}

html body.uni-ui .uni-regform-page .uni-regform-dropzone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    background: #fff;
    color: var(--ua-primary);
    font-size: 1.35rem;
    box-shadow: 0 6px 18px -6px rgba(37, 99, 235, 0.35);
    margin-bottom: 0.35rem;
}

html body.uni-ui .uni-regform-page .uni-regform-dropzone.is-filled .uni-regform-dropzone__icon {
    color: var(--ua-success);
    box-shadow: 0 6px 18px -6px rgba(16, 185, 129, 0.45);
}

html body.uni-ui .uni-regform-page .uni-regform-dropzone__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ua-dark);
}

html body.uni-ui .uni-regform-page .uni-regform-dropzone__hint {
    font-size: 0.8rem;
    color: var(--ua-muted);
}

html body.uni-ui .uni-regform-page .uni-regform-dropzone__input {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

html body.uni-ui .uni-regform-page .uni-regform-dropzone__list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
}

@media (min-width: 576px) {
    html body.uni-ui .uni-regform-page .uni-regform-dropzone__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

html body.uni-ui .uni-regform-page .uni-regform-dropzone__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--ua-border);
    border-radius: 0.6rem;
    background: #fff;
    font-size: 0.85rem;
    min-width: 0;
}

html body.uni-ui .uni-regform-page .uni-regform-dropzone__fileico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
    background: var(--ua-surface-3);
    color: var(--ua-primary);
    font-size: 0.95rem;
    flex-shrink: 0;
}

html body.uni-ui .uni-regform-page .uni-regform-dropzone__filemeta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

html body.uni-ui .uni-regform-page .uni-regform-dropzone__filename {
    color: var(--ua-dark);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html body.uni-ui .uni-regform-page .uni-regform-dropzone__filesize {
    color: var(--ua-muted);
    font-size: 0.75rem;
}

/* =========== Terms block — custom pill checkbox =========== */
html body.uni-ui .uni-regform-page .uni-regform-terms-row {
    margin-top: 0.5rem;
}

html body.uni-ui .uni-regform-page .uni-regform-terms {
    position: relative;
    display: block;
    padding: 0;
    margin: 0.25rem 0 0;
    background: transparent;
    border: 0;
}

/* Visually hide native checkbox but keep it accessible */
html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__cb {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: -1 !important;
}

/* Neutralize Materialize-only styling that might leak */
html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__cb + label::before,
html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__cb + label::after {
    content: none !important;
    display: none !important;
}

/* Label = full clickable card (checkbox + text) */
html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    margin: 0;
    padding: 0.9rem 1.05rem !important;
    padding-inline-start: 1.05rem !important;
    padding-inline-end: 1.05rem !important;
    background: #ffffff;
    border: 1.5px solid var(--ua-border);
    border-radius: 0.85rem;
    color: var(--ua-body);
    font-size: 0.925rem;
    line-height: 1.6;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    text-align: start;
    box-shadow: var(--ua-shadow-sm);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.15s ease;
}

html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__label:hover {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.03);
    box-shadow: 0 6px 18px -10px rgba(16, 185, 129, 0.35);
}

/* The box indicator — rendered as a pseudo-span */
html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__box {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--ua-border-strong);
    border-radius: 0.4rem;
    background: #fff;
    color: transparent;
    font-size: 0.78rem;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.15s ease,
        box-shadow 0.18s ease;
}

html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__box > i {
    transform: scale(0.6);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

/* Text */
html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ua-dark);
    padding: 0 !important;
}

/* The rules file link inside terms */
html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__text a,
html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__rules {
    color: var(--ua-primary);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(37, 99, 235, 0.45);
    margin-inline-start: 0.2rem;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__text a:hover,
html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__text a:focus {
    color: var(--ua-primary-dark);
    text-decoration-color: var(--ua-primary-dark);
}

/* ===== Checked state (emerald) ===== */
html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__cb:checked + .uni-regform-terms__label {
    border-color: #10b981;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%);
    box-shadow: 0 6px 20px -10px rgba(16, 185, 129, 0.45);
}

html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__cb:checked + .uni-regform-terms__label .uni-regform-terms__box {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #059669;
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(16, 185, 129, 0.55);
    transform: scale(1.02);
}

html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__cb:checked + .uni-regform-terms__label .uni-regform-terms__box > i {
    transform: scale(1);
    opacity: 1;
}

/* ===== Focus ring (keyboard navigation) ===== */
html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__cb:focus-visible + .uni-regform-terms__label {
    border-color: var(--ua-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__cb:focus-visible + .uni-regform-terms__label .uni-regform-terms__box {
    border-color: var(--ua-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
}

/* ===== Invalid (required) state — only after first submit attempt ===== */
html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__cb:invalid:not(:focus) ~ .uni-regform-terms__label {
    color: inherit;
}

/* ========= Captcha refinement inside verify section ========= */
html body.uni-ui .uni-regform-page .uni-regform-section--verify .captcha-row {
    margin-bottom: 1rem !important;
}

html body.uni-ui .uni-regform-page .uni-regform-section--verify .captcha-label {
    display: inline-flex !important;
    align-items: center;
    gap: 0.45rem;
    width: auto !important;
}

html body.uni-ui .uni-regform-page .uni-regform-section--verify .captcha-label > i {
    color: #10b981;
    font-size: 0.95rem;
}

/* RTL — flex reversal already handles direction; explicit nudge for box */
[dir="rtl"] html body.uni-ui .uni-regform-page .uni-regform-terms .uni-regform-terms__label {
    text-align: right;
}

/* =========== Submit button polish =========== */
html body.uni-ui .uni-regform-page .uni-regform-submit {
    gap: 0.55rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.005em;
}

html body.uni-ui .uni-regform-page .uni-regform-submit i {
    font-size: 1rem;
}

html body.uni-ui .uni-regform-page .uni-regform-actions {
    margin-top: 0.5rem !important;
}

/* =========== Footer link =========== */
html body.uni-ui .uni-regform-page .uni-regform-footer {
    text-align: center;
    margin: 1.15rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--ua-border);
    color: var(--ua-muted);
    font-size: 0.92rem;
}

html body.uni-ui .uni-regform-page .uni-regform-footer a {
    color: var(--ua-primary);
    font-weight: 700;
    margin-inline-start: 0.3rem;
}

/* Login / compact footers: two actions + separator */
html body.uni-ui .uni-regform-page .uni-regform-footer--login {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.6rem;
    line-height: 1.55;
}

html body.uni-ui .uni-regform-page .uni-regform-footer--login .uni-regform-footer__sep {
    color: var(--ua-border-strong);
    font-weight: 800;
    user-select: none;
}

@media (max-width: 400px) {
    html body.uni-ui .uni-regform-page .uni-regform-footer--login {
        flex-direction: column;
        gap: 0.35rem;
    }

    html body.uni-ui .uni-regform-page .uni-regform-footer--login .uni-regform-footer__sep {
        display: none;
    }
}

/* =========== Responsive tightening =========== */
@media (max-width: 767.98px) {
    html body.uni-ui .uni-regform-page .uni-regform-head {
        gap: 0.75rem;
        padding-bottom: 0.85rem;
        margin-bottom: 1rem;
    }

    html body.uni-ui .uni-regform-page .uni-regform-head__ico {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.05rem;
    }

    html body.uni-ui .uni-regform-page .uni-regform-section {
        padding: 0.75rem 0.9rem 0.9rem;
        border-radius: 0.85rem;
    }

    html body.uni-ui .uni-regform-page .uni-regform-section__legend {
        font-size: 0.85rem;
        padding: 0.3rem 0.75rem 0.3rem 0.4rem;
    }

    [dir="rtl"] html body.uni-ui .uni-regform-page .uni-regform-section__legend {
        padding: 0.3rem 0.4rem 0.3rem 0.75rem;
    }

    html body.uni-ui .uni-regform-page .uni-regform-section__num {
        width: 1.4rem;
        height: 1.4rem;
        font-size: 0.78rem;
    }

    html body.uni-ui .uni-regform-page .uni-regform-dropzone {
        padding: 1.15rem 0.85rem;
    }

    html body.uni-ui .uni-regform-page .uni-regform-dropzone__icon {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.15rem;
    }

    html body.uni-ui .uni-regform-page .uni-regform-dropzone__title {
        font-size: 0.9rem;
    }
}

/* =============================================================
   Admin dashboard logins (/login, university-admin, organization-admin)
   Scope: html body.uni-ui .admin-uni-login-page
   ============================================================= */
html body.uni-ui .admin-uni-login-page .admin-uni-login-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.35rem;
}

[dir="rtl"] html body.uni-ui .admin-uni-login-page .admin-uni-login-toolbar {
    justify-content: flex-start;
}

html body.uni-ui .admin-uni-login-page .admin-uni-login-lang a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: var(--ua-surface-2);
    border: 1px solid var(--ua-border);
    color: var(--ua-dark);
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

html body.uni-ui .admin-uni-login-page .admin-uni-login-lang a:hover {
    background: #fff;
    border-color: var(--ua-primary);
    color: var(--ua-primary);
    text-decoration: none;
}

html body.uni-ui .admin-uni-login-page .admin-uni-login-brand,
html body.uni-ui .uni-auth-card .admin-uni-login-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 0.65rem;
    padding: 0 clamp(0.35rem, 2vw, 0.75rem);
    box-sizing: border-box;
    text-align: center;
    overflow: visible;
}

html body.uni-ui .admin-uni-login-page .admin-uni-login-brand .uni-brand-logo--admin-auth,
html body.uni-ui .uni-auth-card .admin-uni-login-brand .uni-brand-logo--admin-auth {
    margin-inline: auto;
}

html body.uni-ui .admin-uni-login-page .admin-uni-login-brand img:not(.uni-brand-logo__img) {
    display: block;
    max-width: min(260px, 82vw);
    max-height: clamp(2.75rem, 11vw, 4.25rem);
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

/* Narrow auth card — logo must fit inside padded form */
html body.uni-ui .uni-auth-card--narrow .admin-uni-login-brand {
    margin-bottom: 0.5rem;
}

@media (max-width: 575.98px) {
    html body.uni-ui .uni-auth-card--narrow {
        margin-inline: clamp(0.5rem, 3vw, 1rem);
    }

    html body.uni-ui .admin-uni-login-page .admin-uni-login-toolbar {
        margin-bottom: 0.25rem;
    }

    html body.uni-ui .uni-regform-page .uni-regform-card.admin-uni-login-card {
        padding: clamp(0.85rem, 3vw, 1.1rem);
    }

    html body.uni-ui .admin-uni-login-page .tr-regi-form.uni-regform {
        padding: 1rem 1rem 1.25rem !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    html body.uni-ui .uni-auth-card--narrow .admin-uni-login-brand {
        padding-inline: 0.5rem;
    }
}

html body.uni-ui .admin-uni-login-page .admin-uni-login-messages {
    margin-bottom: 1rem;
}

html body.uni-ui .admin-uni-login-page .admin-uni-login-messages .alert {
    border-radius: var(--ua-radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.92rem;
    border: 1px solid transparent;
}

html body.uni-ui .admin-uni-login-page .admin-uni-login-messages .alert-danger {
    background: var(--ua-danger-bg);
    border-color: rgba(220, 38, 38, 0.28);
    color: var(--ua-danger);
}

html body.uni-ui .admin-uni-login-page .admin-uni-login-messages .alert-success {
    background: var(--ua-success-bg);
    border-color: rgba(5, 150, 105, 0.28);
    color: var(--ua-success);
}

html body.uni-ui .admin-uni-login-page .admin-uni-login-messages .w3-panel {
    border-radius: var(--ua-radius-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.92rem;
}

html body.uni-ui .admin-uni-login-page .uni-regform-ifield .form-control.is-invalid {
    border-color: var(--ua-danger) !important;
}

html body.uni-ui .admin-uni-login-page .invalid-feedback {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
}

html body.uni-ui .admin-uni-login-page .uni-regform-submit.admin-uni-login-submit {
    background: var(--admin-portal-accent, var(--ua-primary));
    border-color: var(--admin-portal-accent, var(--ua-primary));
}

html body.uni-ui .admin-uni-login-page .uni-regform-submit.admin-uni-login-submit:hover:not(:disabled) {
    filter: brightness(1.06);
}

html body.uni-ui .admin-uni-login-page .uni-regform-submit.admin-uni-login-submit.is-loading {
    opacity: 0.85;
    pointer-events: none;
}

html body.uni-ui .admin-uni-login-page .uni-regform-head__ico {
    color: var(--admin-portal-accent, var(--ua-primary));
    border-color: color-mix(in srgb, var(--admin-portal-accent, var(--ua-primary)) 25%, transparent);
    background: color-mix(in srgb, var(--admin-portal-accent, var(--ua-primary)) 10%, #fff);
}

html body.uni-ui .admin-uni-login-page .admin-pw-ifield {
    position: relative;
}

html body.uni-ui .admin-uni-login-page .admin-pw-ifield .uni-regform-input {
    padding-inline-end: 2.75rem;
}

html body.uni-ui .admin-uni-login-page .admin-pw-toggle {
    position: absolute;
    top: 50%;
    inset-inline-end: 0.65rem;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--ua-radius-xs);
    background: transparent;
    color: var(--ua-muted-2);
    cursor: pointer;
}

html body.uni-ui .admin-uni-login-page .admin-uni-login-remember-row {
    margin-top: 0.25rem;
}

html body.uni-ui .admin-uni-login-page .admin-uni-login-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--ua-muted);
    cursor: pointer;
    margin: 0;
}

html body.uni-ui .admin-uni-login-page .admin-uni-login-remember input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--admin-portal-accent, var(--ua-primary));
}

html body.uni-ui .admin-uni-login-page .admin-uni-login-footer {
    margin-top: 1rem;
    text-align: center;
}

html body.uni-ui .admin-uni-login-page .uni-regform-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    border-radius: var(--ua-radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.92rem;
}

html body.uni-ui .admin-uni-login-page .uni-regform-alert--list ul {
    margin: 0;
    padding-inline-start: 1.1rem;
}

/* =============================================================
   Admin password reset (/reset-password, university/org equivalents)
   Scope: html body.uni-ui .admin-password-reset-page
   ============================================================= */
html body.uni-ui .admin-password-reset-page .admin-password-reset-card {
    animation: uni-auth-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes uni-auth-card-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Password field with visibility toggle */
html body.uni-ui .admin-password-reset-page .admin-pw-ifield {
    position: relative;
}

html body.uni-ui .admin-password-reset-page .admin-pw-ifield .uni-regform-input {
    padding-inline-end: 2.75rem;
}

html body.uni-ui .admin-password-reset-page .admin-pw-toggle {
    position: absolute;
    top: 50%;
    inset-inline-end: 0.65rem;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--ua-radius-xs);
    background: transparent;
    color: var(--ua-muted-2);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

html body.uni-ui .admin-password-reset-page .admin-pw-toggle:hover,
html body.uni-ui .admin-password-reset-page .admin-pw-toggle:focus-visible {
    color: var(--ua-primary);
    background: rgba(37, 99, 235, 0.08);
    outline: none;
}

/* Strength meter */
html body.uni-ui .admin-password-reset-page .admin-pw-strength {
    margin-top: 0.65rem;
}

html body.uni-ui .admin-password-reset-page .admin-pw-strength__bars {
    display: flex;
    gap: 4px;
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.35rem;
}

html body.uni-ui .admin-password-reset-page .admin-pw-strength__bar {
    flex: 1;
    background: var(--ua-border);
    border-radius: 999px;
    transition: background 0.25s ease;
}

html body.uni-ui .admin-password-reset-page .admin-pw-strength__bar.is-active.is-weak   { background: #ef4444; }
html body.uni-ui .admin-password-reset-page .admin-pw-strength__bar.is-active.is-fair   { background: #f59e0b; }
html body.uni-ui .admin-password-reset-page .admin-pw-strength__bar.is-active.is-good   { background: var(--ua-primary); }
html body.uni-ui .admin-password-reset-page .admin-pw-strength__bar.is-active.is-strong { background: var(--ua-accent); }

html body.uni-ui .admin-password-reset-page .admin-pw-strength__label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ua-muted);
}

html body.uni-ui .admin-password-reset-page .admin-pw-strength.is-weak   .admin-pw-strength__label { color: #ef4444; }
html body.uni-ui .admin-password-reset-page .admin-pw-strength.is-fair   .admin-pw-strength__label { color: #d97706; }
html body.uni-ui .admin-password-reset-page .admin-pw-strength.is-good   .admin-pw-strength__label { color: var(--ua-primary); }
html body.uni-ui .admin-password-reset-page .admin-pw-strength.is-strong .admin-pw-strength__label { color: var(--ua-accent); }

/* Requirements checklist */
html body.uni-ui .admin-password-reset-page .admin-pw-requirements {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0.65rem 0.85rem;
    background: var(--ua-surface-2);
    border: 1px solid var(--ua-border);
    border-radius: var(--ua-radius-sm);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.75rem;
}

html body.uni-ui .admin-password-reset-page .admin-pw-requirements li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    color: var(--ua-muted);
    transition: color 0.2s ease;
}

html body.uni-ui .admin-password-reset-page .admin-pw-requirements li i {
    font-size: 0.55rem;
    color: var(--ua-muted-2);
    flex-shrink: 0;
    transition: color 0.2s ease;
}

html body.uni-ui .admin-password-reset-page .admin-pw-requirements li.is-met {
    color: var(--ua-success);
}

html body.uni-ui .admin-password-reset-page .admin-pw-requirements li.is-met i {
    color: var(--ua-success);
    font-size: 0.72rem;
}

/* Password match indicator */
html body.uni-ui .admin-password-reset-page .admin-pw-match {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
}

html body.uni-ui .admin-password-reset-page .admin-pw-match.is-ok  { color: var(--ua-success); }
html body.uni-ui .admin-password-reset-page .admin-pw-match.is-bad { color: var(--ua-danger); }

/* Security tip */
html body.uni-ui .admin-password-reset-page .admin-pw-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.25rem 0 0.5rem;
    padding: 0.8rem 0.95rem;
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: var(--ua-radius-sm);
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--ua-body);
}

html body.uni-ui .admin-password-reset-page .admin-pw-tip > i {
    color: var(--ua-primary);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

/* Back link */
html body.uni-ui .admin-password-reset-page .admin-pw-back-wrap {
    text-align: center;
    margin-top: 0.85rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--ua-border);
}

html body.uni-ui .admin-password-reset-page .admin-pw-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ua-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

html body.uni-ui .admin-password-reset-page .admin-pw-back:hover {
    color: var(--ua-primary);
    text-decoration: none;
}

/* Submit loading */
html body.uni-ui .admin-password-reset-page .uni-regform-submit.is-loading {
    opacity: 0.88;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    html body.uni-ui .admin-password-reset-page .admin-pw-requirements {
        grid-template-columns: 1fr;
    }

    html body.uni-ui .admin-password-reset-page .uni-regform-section__legend {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
}

/* =============================================================
   TR-COUNTRY PICKER — global (student, dashboards; no .uni-ui required)
   Markup: .tr-country-picker.country-wrap.tr-country-addon
   ============================================================= */
html body .tr-country-picker,
html body .country-wrap.tr-country-addon {
    position: relative;
    width: 100%;
    max-width: 100%;
    --tcp-primary: #2563eb;
    --tcp-border: #e2e8f0;
    --tcp-surface: #ffffff;
    --tcp-muted: #64748b;
    --tcp-dark: #0f172a;
    --tcp-body: #334155;
}

html body .tr-country-picker select.tr-country-select-hidden,
html body .country-wrap.tr-country-addon select.tr-country-select-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

html body .tr-country-picker .tr-country-search-wrap,
html body .country-wrap.tr-country-addon .tr-country-search-wrap {
    position: relative;
    width: 100%;
}

/* Chevron (dropdown affordance) */
html body .tr-country-picker .tr-country-search-wrap::after,
html body .country-wrap.tr-country-addon .tr-country-search-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-end: 0.85rem;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-inline-start: 5px solid transparent;
    border-inline-end: 5px solid transparent;
    border-top: 6px solid var(--tcp-muted);
    pointer-events: none;
    opacity: 0.85;
}

html body .tr-country-picker .tr-country-search-input,
html body .country-wrap.tr-country-addon .tr-country-search-input {
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 2.35rem 0.65rem 0.9rem !important;
    background: var(--tcp-surface) !important;
    border: 1.5px solid var(--tcp-border) !important;
    border-radius: 0.65rem !important;
    font-size: 0.95rem;
    color: var(--tcp-dark);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

html body.uni-ui .uni-auth-page .tr-country-picker .tr-country-search-input,
html body.uni-ui .uni-auth-page .country-wrap.tr-country-addon .tr-country-search-input {
    background: var(--ua-surface-2) !important;
    border-color: var(--ua-border) !important;
    color: var(--ua-dark);
}

html body .tr-country-picker .tr-country-search-input:focus,
html body .country-wrap.tr-country-addon .tr-country-search-input:focus {
    background: #fff !important;
    border-color: var(--tcp-primary) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
    outline: none;
}

html body.uni-ui .uni-auth-page .tr-country-picker .tr-country-search-input:focus,
html body.uni-ui .uni-auth-page .country-wrap.tr-country-addon .tr-country-search-input:focus {
    border-color: var(--ua-primary) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
}

html body .tr-country-picker .tr-country-dropdown,
html body .country-wrap.tr-country-addon .tr-country-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    width: max-content;
    min-width: 300px;
    z-index: 1060;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--tcp-surface);
    border: 1px solid var(--tcp-border);
    border-top: none;
    border-radius: 0 0 0.65rem 0.65rem;
    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.28);
    max-height: min(60vh, 360px);
}

html body .tr-country-picker .tr-country-dropdown.is-open,
html body .country-wrap.tr-country-addon .tr-country-dropdown.is-open {
    display: block;
}

html body .tr-country-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.35rem 0.75rem;
    font-size: 0.88rem;
    color: var(--tcp-dark);
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s ease;
}

html body .tr-country-option:last-child {
    border-bottom: none;
}

html body .tr-country-option:hover,
html body .tr-country-option:focus {
    background: #f8fafc;
}

html body .tr-country-flag {
    flex: 0 0 auto;
    width: 28px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
    background: #f1f5f9;
}

html body .tr-country-flag img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    background: #f1f5f9;
}

html body .tr-country-flag--empty {
    min-width: 28px;
    background: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%);
}

html body .tr-country-key {
    flex: 0 0 auto;
    min-width: 3.8rem;
    font-weight: 600;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--tcp-primary);
}

html body.uni-ui .uni-auth-page .tr-country-key {
    color: var(--ua-primary);
}

html body .tr-country-name {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--tcp-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Legacy markup (img.flag + .key + .name) */
html body .tr-country-option .key {
    flex: 0 0 auto;
    min-width: 3.5rem;
    font-weight: 600;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: var(--tcp-primary);
}

html body .tr-country-option .name {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--tcp-body);
}

html body .tr-country-option img.flag {
    width: 28px;
    height: 20px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

html body .tr-country-no-results {
    padding: 0.85rem 1rem;
    color: var(--tcp-muted);
    font-size: 0.9rem;
    text-align: center;
}

/* Phone + country row (register, edit-profile, …) — dial code beside number (global pattern) */
html body .row-phone-country {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: stretch;
    /* Keep +code | number left-to-right even on RTL pages */
    direction: ltr;
}

html body .row-phone-country .phone-wrap {
    flex: 1 1 0;
    min-width: 0;
}

html body .row-phone-country .country-wrap,
html body .row-phone-country .tr-country-picker {
    flex: 0 1 16rem;
    min-width: 10rem;
    max-width: min(55vw, 18rem);
    position: relative;
}

@media (max-width: 575.98px) {
    html body .row-phone-country {
        gap: 0.4rem;
    }

    html body .row-phone-country .country-wrap,
    html body .row-phone-country .tr-country-picker {
        min-width: 8rem;
        max-width: 48%;
    }
}

/* Materialize input-group + country (login, legacy) */
html body.uni-ui .uni-auth-page .input-group:has(> .tr-country-addon) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}

html body.uni-ui .uni-auth-page .input-group .tr-country-addon {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 340px;
    display: inline-block !important;
}

@media (max-width: 575.98px) {
    html body.uni-ui .uni-auth-page .input-group:has(> .tr-country-addon) > input[type="number"],
    html body.uni-ui .uni-auth-page .input-group:has(> .tr-country-addon) > input[type="text"] {
        flex: 1 1 100%;
    }

    html body.uni-ui .uni-auth-page .input-group .tr-country-addon {
        max-width: none;
    }
}

/* Admin forms: country column beside phone */
html body .tab-inn .tr-country-picker,
html body .university-create-form .tr-country-picker,
html body .university-edit-form .tr-country-picker,
html body .university-edit-wrapper .tr-country-picker {
    max-width: 100%;
}

/* ============================================================
   Auth form feedback — errors & success (login, register)
   ============================================================ */
@keyframes uni-form-feedback-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes uni-form-field-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

html body.uni-ui .uni-form-feedback {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    margin: 0 0 1.15rem;
    border-radius: var(--ua-radius-sm, 0.65rem);
    border: 1px solid transparent;
    font-size: 0.9rem;
    line-height: 1.55;
    animation: uni-form-feedback-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    box-shadow: var(--ua-shadow-sm, 0 2px 8px rgba(15, 23, 42, 0.06));
}

html body.uni-ui .uni-form-feedback__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    font-size: 1.05rem;
}

html body.uni-ui .uni-form-feedback__content {
    flex: 1;
    min-width: 0;
    padding-top: 0.1rem;
}

html body.uni-ui .uni-form-feedback__title {
    margin: 0 0 0.2rem;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

html body.uni-ui .uni-form-feedback__message {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.6;
}

html body.uni-ui .uni-form-feedback__list {
    margin: 0.15rem 0 0;
    padding: 0;
    padding-inline-start: 1.15rem;
    list-style: none;
}

html body.uni-ui .uni-form-feedback__list li {
    position: relative;
    margin-bottom: 0.35rem;
    font-weight: 500;
    line-height: 1.55;
}

html body.uni-ui .uni-form-feedback__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: -0.85rem;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}

html body.uni-ui .uni-form-feedback--error {
    background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 48%, #fff 100%);
    border-color: rgba(220, 38, 38, 0.22);
    border-inline-start: 4px solid var(--ua-danger, #dc2626);
    color: #7f1d1d;
}

html body.uni-ui .uni-form-feedback--error .uni-form-feedback__badge {
    background: rgba(220, 38, 38, 0.12);
    color: var(--ua-danger, #dc2626);
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08);
}

html body.uni-ui .uni-form-feedback--error .uni-form-feedback__title {
    color: var(--ua-danger, #dc2626);
}

html body.uni-ui .uni-form-feedback--success {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 48%, #fff 100%);
    border-color: rgba(5, 150, 105, 0.22);
    border-inline-start: 4px solid var(--ua-success, #059669);
    color: #065f46;
}

html body.uni-ui .uni-form-feedback--success .uni-form-feedback__badge {
    background: rgba(5, 150, 105, 0.12);
    color: var(--ua-success, #059669);
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.08);
}

/* Inline field errors */
html body.uni-ui .uni-form-field-error {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.45rem;
    padding: 0.4rem 0.65rem;
    border-radius: 0.45rem;
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.14);
    color: var(--ua-danger, #dc2626);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;
    animation: uni-form-feedback-in 0.28s ease both;
}

html body.uni-ui .uni-form-field-error > i {
    flex-shrink: 0;
    margin-top: 0.12rem;
    font-size: 0.82rem;
}

/* Invalid inputs — regform + admin login */
html body.uni-ui .uni-regform-page .uni-regform-ifield .form-control.is-invalid,
html body.uni-ui .uni-auth-page .uni-regform-ifield .form-control.is-invalid,
html body.uni-ui .admin-uni-login-page .uni-regform-ifield .form-control.is-invalid {
    border-color: var(--ua-danger, #dc2626) !important;
    background-color: color-mix(in srgb, var(--ua-danger, #dc2626) 3%, #fff) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
    animation: uni-form-field-shake 0.45s ease;
}

html body.uni-ui .uni-regform-page .uni-regform-ifield:has(.is-invalid) .uni-regform-ifield__ico,
html body.uni-ui .uni-auth-page .uni-regform-ifield:has(.is-invalid) .uni-regform-ifield__ico,
html body.uni-ui .admin-uni-login-page .uni-regform-ifield:has(.is-invalid) .uni-regform-ifield__ico {
    color: var(--ua-danger, #dc2626);
    background: rgba(220, 38, 38, 0.08);
}

html body.uni-ui .uni-regform-page .form-label:has(+ .uni-regform-ifield .is-invalid),
html body.uni-ui .admin-uni-login-page .form-label:has(+ .uni-regform-ifield .is-invalid) {
    color: var(--ua-danger, #dc2626);
}

/* Legacy alerts — align with new feedback when still used */
html body.uni-ui .uni-regform-page .uni-regform-alert.alert-danger,
html body.uni-ui .admin-uni-login-page .uni-regform-alert.alert-danger {
    border-inline-start: 4px solid var(--ua-danger, #dc2626);
}

@media (prefers-reduced-motion: reduce) {
    html body.uni-ui .uni-form-feedback,
    html body.uni-ui .uni-form-field-error,
    html body.uni-ui .uni-regform-ifield .form-control.is-invalid {
        animation: none;
    }
}

/* ===== Country Code Professional Styling ===== */
.tr-country-key {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-weight: 600;
    font-size: 0.82rem;
    margin-inline-end: 6px;
}

.tr-country-key-prefix {
    font-weight: 600;
    color: #d97706;
    font-size: 0.8rem;
    margin-inline-end: 1px;
}

.tr-country-key-digits {
    color: #1f2937;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.2px;
    margin-inline-start: 1px;
}

/* Input field styling for country picker */
.tr-country-picker .tr-country-search-input {
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* Dropdown option hover */
.tr-country-option {
    transition: background-color 0.15s ease;
}

/* Responsive: ensure dropdown fits on small screens */
@media (max-width: 575.98px) {
    html body .tr-country-picker .tr-country-dropdown,
    html body .country-wrap.tr-country-addon .tr-country-dropdown {
        min-width: 260px;
        max-width: calc(100vw - 20px);
        left: 0;
    }

    html body .tr-country-key {
        min-width: 3.2rem;
        font-size: 0.78rem;
    }

    html body .tr-country-name {
        font-size: 0.8rem;
    }
}

/* Dark mode support */
[data-theme="dark"] .tr-country-key-digits {
    color: #f3f4f6;
}

[data-theme="dark"] .tr-country-key-prefix {
    color: #f59e0b;
}

/* ============================================================
   STUDENT LOGIN ENHANCEMENTS
   Split layout, password toggle, remember me, math captcha
   ============================================================ */

/* ---- Split layout ---- */
html body.uni-ui .uni-auth-split {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 992px) {
    html body.uni-ui .uni-auth-split {
        grid-template-columns: 1fr 1.15fr;
        gap: 2rem;
        align-items: center;
        min-height: 420px;
    }
}

/* ---- Visual card (left side) ---- */
html body.uni-ui .uni-auth-split__visual {
    display: none;
}

@media (min-width: 992px) {
    html body.uni-ui .uni-auth-split__visual {
        display: block;
    }
}

html body.uni-ui .uni-auth-visual-card {
    position: relative;
    padding: 2rem;
    border-radius: var(--ua-radius, 1rem);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(37, 99, 235, 0.12);
    overflow: hidden;
    isolation: isolate;
}

html body.uni-ui .uni-auth-visual-card__orb {
    position: absolute;
    top: -40%;
    inset-inline-end: -15%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.35) 0%, rgba(34, 211, 238, 0) 60%);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
    animation: uni-auth-orb 12s ease-in-out infinite alternate;
}

html body.uni-ui .uni-auth-visual-card__content {
    position: relative;
    z-index: 1;
}

html body.uni-ui .uni-auth-visual-card__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ua-dark, #0f172a);
    margin-bottom: 0.5rem;
}

html body.uni-ui .uni-auth-visual-card__lead {
    font-size: 0.9rem;
    color: var(--ua-muted, #64748b);
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

html body.uni-ui .uni-auth-visual-card__stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

html body.uni-ui .uni-auth-stat {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(37, 99, 235, 0.1);
    border-radius: var(--ua-radius-sm, 0.65rem);
    padding: 0.75rem 1rem;
    min-width: 120px;
}

html body.uni-ui .uni-auth-stat__value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ua-primary, #2563eb);
    line-height: 1.2;
}

html body.uni-ui .uni-auth-stat__label {
    display: block;
    font-size: 0.78rem;
    color: var(--ua-muted-2, #94a3b8);
    margin-top: 0.15rem;
}

/* ---- Glassmorphism card enhancement ---- */
html body.uni-ui .uni-auth-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 4px 24px -6px rgba(15, 23, 42, 0.08),
        0 1px 3px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ---- Password visibility toggle ---- */
html body.uni-ui .uni-regform-ifield--password {
    position: relative;
}

html body.uni-ui .uni-regform-ifield--password .uni-regform-input {
    padding-inline-end: 3rem;
}

html body.uni-ui .uni-password-toggle {
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0.45rem;
    color: var(--ua-muted-2, #94a3b8);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

html body.uni-ui .uni-password-toggle:hover,
html body.uni-ui .uni-password-toggle:focus-visible {
    background: rgba(37, 99, 235, 0.08);
    color: var(--ua-primary, #2563eb);
}

html body.uni-ui .uni-password-toggle:focus-visible {
    outline: 2px solid var(--ua-primary, #2563eb);
    outline-offset: 2px;
}

/* ---- Remember me checkbox ---- */
html body.uni-ui .uni-remember-me {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--ua-body, #334155);
    user-select: none;
    margin-top: 0.25rem;
}

html body.uni-ui .uni-remember-me input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

html body.uni-ui .uni-remember-me__check {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 0.3rem;
    border: 2px solid var(--ua-border-strong, #cbd5e1);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

html body.uni-ui .uni-remember-me input[type="checkbox"]:checked + .uni-remember-me__check {
    border-color: var(--ua-primary, #2563eb);
    background: var(--ua-primary, #2563eb);
}

html body.uni-ui .uni-remember-me input[type="checkbox"]:checked + .uni-remember-me__check::after {
    content: "";
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

html body.uni-ui .uni-remember-me input[type="checkbox"]:focus-visible + .uni-remember-me__check {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

html body.uni-ui .uni-remember-me__label {
    font-weight: 500;
    line-height: 1.4;
}

/* ---- Math captcha ---- */
html body.uni-ui .captcha-inline--math {
    align-items: center;
}

html body.uni-ui .captcha-box--math {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border: 1px solid var(--ua-border-strong, #cbd5e1);
    border-radius: var(--ua-radius-sm, 0.65rem);
    padding: 0.55rem 1rem;
    min-width: 120px;
    justify-content: center;
}

html body.uni-ui .captcha-math-question {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ua-dark, #0f172a);
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

html body.uni-ui .captcha-refresh--spinning i {
    animation: uni-captcha-spin 0.6s linear infinite;
}

@keyframes uni-captcha-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---- Submit button spinner ---- */
html body.uni-ui .uni-regform-submit {
    position: relative;
    min-height: 3.25rem;
}

html body.uni-ui .uni-regform-submit__text,
html body.uni-ui .uni-regform-submit__spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

html body.uni-ui .uni-regform-submit:disabled {
    opacity: 0.85;
    cursor: wait;
}

/* ---- Floating labels (subtle enhancement) ---- */
html body.uni-ui .uni-regform-ifield .uni-regform-input:focus {
    border-color: var(--ua-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    html body.uni-ui .uni-auth-visual-card__orb {
        animation: none;
    }
    html body.uni-ui .captcha-refresh--spinning i {
        animation: none;
    }
}