/* ============================================================
   GridFlow - Master Stylesheet (Layout + Light Mode)
   ============================================================ */

:root {
    --font-family: 'Cairo', 'Inter', 'Segoe UI', system-ui, sans-serif;
    --bg-body: #f1f5f9;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --primary-color: #0f2e5c;
    --secondary-color: #00d2ff;
    --danger-color: #c81e1e;
    --danger-bg: #fde8e8;
    --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.04);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family) !important;
}

body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
}

/* =========================================
   1. هيكل النظام والقائمة الجانبية (App Shell)
   ========================================= */
.app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg-body);
}

.app-sidebar {
    width: 260px;
    background: linear-gradient(180deg, #0f2e5c 0%, #1a4d8c 100%);
    color: white;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-shadow: 4px 0 20px rgba(0,0,0,0.05);
    z-index: 200;
}

.app-brand {
    height: 70px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 24px;
    font-weight: 800;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    gap: 10px;
}

.brand-icon {
    background: var(--secondary-color);
    color: #0a192f;
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    font-size: 18px;
}

.nav-links {
    flex: 1;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.nav-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    padding: 12px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    transition: 0.2s;
}

    .nav-link:hover, .nav-link.active {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }

    .nav-link .icon {
        font-size: 18px;
    }

.sidebar-user {
    padding: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.1);
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    font-size: 16px;
    flex-shrink: 0;
}

.user-info {
    flex: 1;
    overflow: hidden;
}

.user-name {
    font-size: 14px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-college {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================
   2. المحتوى والشريط العلوي (Main & Topbar)
   ========================================= */
.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-topbar {
    height: 70px;
    background: white;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    flex-shrink: 0;
    z-index: 100;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.lang-select {
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-weight: 600;
    background: #f8fafc;
    cursor: pointer;
}

.btn-logout {
    background: var(--danger-bg);
    color: var(--danger-color);
    border: 1px solid #f8b4b4;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-logout:hover {
        background: var(--danger-color);
        color: white;
    }

.app-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* =========================================
   3. الصناديق والحقول (Cards & Forms)
   ========================================= */
.card, .user-form, .glass-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: var(--shadow-sm);
}

    .card h3, .card-title {
        font-size: 18px;
        color: var(--text-primary);
        margin: 0 0 20px 0;
        font-weight: 700;
        border-bottom: 2px solid #f3f4f6;
        padding-bottom: 12px;
    }

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    margin-top: 15px;
}

    .form-row label, .form-group label {
        font-weight: 700;
        color: var(--text-secondary);
        font-size: 13px;
    }

input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], select {
    padding: 9px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    font-size: 13px;
    background-color: #fff;
    transition: 0.2s;
    min-width: 0;
    min-height: 42px;
    color: #0f172a;
}

    input:focus, select:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(15, 46, 92, 0.1);
        background-color: white;
    }

.chk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
    background: #f8fafc;
    padding: 8px 15px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
}

    .chk input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--primary-color);
        cursor: pointer;
    }

/* =========================================
   4. الأزرار (Buttons)
   ========================================= */
button, .btn {
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

    .btn-primary:hover {
        background-color: #0a1f44;
        transform: translateY(-1px);
    }

.btn-secondary {
    background-color: #f1f5f9;
    color: var(--text-primary);
    border: 1px solid #cbd5e1;
}

    .btn-secondary:hover {
        background-color: #e2e8f0;
    }

.btn-danger, .btn-danger-outline {
    background-color: var(--danger-bg);
    color: var(--danger-color);
    border: 1px solid #f8b4b4;
}

.btn-small {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
}

/* =========================================
   5. الجداول (Data Tables)
   ========================================= */
.table-responsive {
    overflow-x: auto;
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    text-align: start;
}

    .users-table th {
        background-color: #f8fafc;
        color: var(--text-secondary);
        padding: 15px;
        font-weight: 700;
        font-size: 14px;
        border-bottom: 2px solid var(--border-color);
        white-space: nowrap;
    }

    .users-table td {
        padding: 15px;
        border-bottom: 1px solid var(--border-color);
        font-size: 14px;
        vertical-align: middle;
    }

    .users-table tbody tr:hover td {
        background-color: #f0f9ff;
    }

.actions {
    white-space: nowrap;
    display: flex;
    gap: 8px;
}

/* =========================================
   6. الشارات والرسائل (Badges & Alerts)
   ========================================= */
.badge, .badge-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
}

.badge-active, .badge-success {
    background: #dcfce7;
    color: #166534;
}

.badge-inactive, .badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.badge-ma3mal {
    background: #e0e7ff;
    color: #1e40af;
}

.form-error {
    background-color: var(--danger-bg);
    color: var(--danger-color);
    padding: 12px 15px;
    border-radius: 8px;
    margin-top: 15px;
    font-size: 14px;
    border: 1px solid #f8b4b4;
    font-weight: 600;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ============================================================
   GridFlow Web UI System
   ============================================================ */

html, body { min-height: 100%; }
body { margin: 0; }

.app-sidebar {
    width: 272px;
    background: linear-gradient(180deg,#0b1f3a 0%,#123f73 58%,#155b8f 100%);
    color: #fff;
    flex: 0 0 272px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 10px 0 34px rgba(15,23,42,.12);
    z-index: 1100;
    transition: width .2s ease, flex-basis .2s ease;
}
.app-brand { height: 78px; display:flex; align-items:center; gap:12px; padding:0 20px; border-bottom:1px solid rgba(255,255,255,.1); }
.sidebar-collapse-btn { margin-inline-start:auto; flex:0 0 30px; width:30px; height:30px; border:none; border-radius:8px; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center; }
.sidebar-collapse-btn:hover { background:rgba(255,255,255,.22); }

/* القائمة الجانبية مطوية (Desktop فقط) — عرض ضيق يظهر الأيقونات بس، وبيخفي
   كل النصوص (اسم النظام، عناوين الأقسام، أسماء الروابط، بيانات المستخدم)
   عن طريق class واحد "sidebar-collapsed" بيتضاف على .app-sidebar نفسها. */
.app-sidebar.sidebar-collapsed { width:76px; flex:0 0 76px; }
.app-sidebar.sidebar-collapsed .app-brand { padding:0 16px; justify-content:center; }
.app-sidebar.sidebar-collapsed .sidebar-collapse-btn { margin-inline-start:0; }
.app-sidebar.sidebar-collapsed .brand-text,
.app-sidebar.sidebar-collapsed .nav-section-title,
.app-sidebar.sidebar-collapsed .nav-link span:not(.icon),
.app-sidebar.sidebar-collapsed .user-info { display:none; }
.app-sidebar.sidebar-collapsed .nav-link { justify-content:center; padding:11px 6px; gap:0; }
.app-sidebar.sidebar-collapsed .sidebar-user { justify-content:center; }
.app-brand strong { display:block; font-size:19px; letter-spacing:.2px; }
.app-brand small { display:block; color:rgba(255,255,255,.55); font-size:10px; margin-top:2px; }
.brand-icon { width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#38bdf8,#22d3ee); color:#08243e; font-weight:900; box-shadow:0 8px 20px rgba(34,211,238,.18); }
.nav-links { flex:1; padding:18px 12px; overflow:auto; } .nav-links { scrollbar-width:none; -ms-overflow-style:none; } .nav-links::-webkit-scrollbar { display:none; width:0; height:0; }
/* لوجو الجامعة/الكلية في رأس القائمة الجانبية بدل "SA" */
.brand-icon.has-logo { background:#fff; padding:4px; box-shadow:0 6px 16px rgba(0,0,0,.18); flex:0 0 42px; overflow:hidden; }
.brand-icon.has-logo img { width:100%; height:100%; object-fit:contain; display:block; }
/* علامة الوحدة المقفولة (مش ضمن الباقة) */
.nav-lock { margin-inline-start:auto; font-size:11px; opacity:.75; }
/* شريط أعلى: شارة الباقة + ترس إعدادات المؤسسة */
.topbar-plan-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; border:1px solid #fde68a; background:#fffbeb; color:#92400e; font-size:11px; font-weight:800; text-decoration:none; white-space:nowrap; }
.topbar-plan-chip.danger { border-color:#fecaca; background:#fef2f2; color:#b91c1c; }
.topbar-icon-btn { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-color); border-radius:10px; background:#fff; text-decoration:none; font-size:17px; transition:.15s ease; }
.topbar-icon-btn:hover, .topbar-icon-btn.active { border-color:#0284c7; background:#f0f9ff; transform:rotate(30deg); }
/* شاشة "الميزة مش ضمن باقتك" */
.plan-gate { max-width:620px; margin:40px auto; background:#fff; border:1px solid var(--border-color); border-radius:20px; padding:36px 28px; text-align:center; box-shadow:var(--shadow-sm); direction:rtl; }
.plan-gate-icon { font-size:46px; margin-bottom:8px; }
.plan-gate h1 { font-size:20px; font-weight:800; color:#0f172a; margin:0 0 10px; }
.plan-gate p { color:#475569; font-size:13px; margin:0 0 10px; line-height:1.7; }
.plan-gate-hint strong { color:#0f2e5c; }
.plan-gate .ui-btn { margin-top:8px; text-decoration:none; }
.plan-gate-loading { text-align:center; padding:60px 0; font-size:28px; opacity:.5; }

.nav-section-title { padding:16px 13px 7px; color:rgba(255,255,255,.38); font-size:10px; font-weight:800; text-transform:uppercase; }
.nav-link { color:rgba(255,255,255,.7); text-decoration:none; padding:11px 13px; margin:3px 0; border-radius:11px; display:flex; align-items:center; gap:11px; font-weight:600; font-size:13px; transition:.2s ease; }
.nav-link:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-link.active { background:linear-gradient(90deg,rgba(56,189,248,.22),rgba(255,255,255,.08)); color:#fff; box-shadow:inset 3px 0 0 #38bdf8; }
.nav-link .icon { width:26px; text-align:center; font-size:16px; }
.sidebar-user { padding:14px; border-top:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.12); display:flex; gap:10px; align-items:center; }
.user-avatar,.topbar-user-avatar { width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:#e0f2fe; color:#0369a1; font-weight:800; flex:0 0 36px; }
.user-name { font-size:12px; font-weight:700; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.user-college { font-size:10px; color:rgba(255,255,255,.52); margin-top:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.app-shell { display:flex; min-height:100vh; height:100vh; overflow:hidden; background:var(--bg-body); }
.app-main { min-width:0; flex:1; display:flex; flex-direction:column; overflow:hidden; }
.app-topbar { min-height:72px; background:#fff; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 22px; box-shadow:0 2px 14px rgba(15,23,42,.03); z-index:900; }
.topbar-context { min-width:0; flex:1; }
.topbar-title { font-size:16px; font-weight:800; color:#0f172a; }
.topbar-subtitle { color:#94a3b8; font-size:11px; margin-top:2px; }
.topbar-actions { display:flex; align-items:center; gap:9px; }
.topbar-user-chip { display:flex; align-items:center; gap:7px; padding:5px 8px; background:#f8fafc; border:1px solid var(--border-color); border-radius:12px; color:#334155; font-size:11px; font-weight:700; }
.lang-select { min-height:38px; padding:6px 10px; border:1px solid #cbd5e1; background:#fff; border-radius:9px; font:inherit; color:#334155; }
.btn-logout { min-height:38px; border:1px solid #fecaca; background:#fff5f5; color:#b91c1c; border-radius:9px; padding:6px 12px; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
.btn-logout:hover { background:#fee2e2; }
.mobile-menu-button { display:none; width:40px; height:40px; border:1px solid var(--border-color); border-radius:10px; background:#fff; cursor:pointer; font-size:18px; }
.app-content { flex:1; overflow:auto; padding:24px; }
.app-mobile-backdrop { display:none; }

.ui-page { max-width:1560px; margin:0 auto; direction:rtl; }
.ui-page-header { background:#fff; border:1px solid var(--border-color); border-radius:20px; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:18px; box-shadow:var(--shadow-sm); }
.ui-page-header h1 { margin:4px 0 4px; font-size:24px; font-weight:800; color:#0f172a; }
.ui-page-header p { margin:0; color:#64748b; font-size:12px; }
.ui-eyebrow { color:#0284c7; font-size:10px; font-weight:800; }
.ui-status { display:inline-flex; align-items:center; gap:6px; padding:8px 11px; border-radius:999px; font-size:10px; font-weight:800; }
.ui-status.success { background:#ecfdf5; color:#047857; }
.ui-status.warning { background:#fffbeb; color:#a16207; }
.ui-status span { width:7px; height:7px; border-radius:50%; background:currentColor; }
.ui-stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.ui-stat { background:#fff; border:1px solid var(--border-color); border-radius:15px; padding:16px; display:flex; align-items:center; gap:11px; box-shadow:var(--shadow-sm); }
.ui-stat-icon { width:42px; height:42px; border-radius:12px; background:#eff6ff; display:flex; align-items:center; justify-content:center; font-size:19px; }
.ui-stat span { display:block; color:#64748b; font-size:10px; }
.ui-stat strong { display:block; color:#0f172a; font-size:20px; margin-top:1px; }
.ui-card { background:#fff; border:1px solid var(--border-color); border-radius:16px; margin-bottom:16px; box-shadow:var(--shadow-sm); overflow:hidden; }
.ui-card-header { padding:16px 18px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ui-card-header h2 { margin:0; color:#0f172a; font-size:15px; font-weight:800; }
.ui-card-header p { margin:3px 0 0; color:#94a3b8; font-size:10px; }
.ui-card-body { padding:18px; }
.ui-grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.ui-span-2 { grid-column:span 2; }
.ui-field { display:flex; flex-direction:column; gap:6px; }
.ui-field label { color:#475569; font-size:11px; font-weight:800; }
.ui-input { width:100%; min-height:42px; padding:9px 11px; border:1px solid #cbd5e1; border-radius:9px; background:#fff; color:#0f172a; font:inherit; font-size:12px; outline:none; }
.ui-input:focus { border-color:#0284c7; box-shadow:0 0 0 3px rgba(2,132,199,.1); }
.ui-check { display:inline-flex; align-items:center; gap:7px; color:#475569; font-size:11px; font-weight:700; cursor:pointer; }
.ui-action-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.ui-btn { border:1px solid transparent; border-radius:9px; min-height:39px; padding:8px 13px; font:inherit; font-size:11px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:.15s ease; }
.ui-btn:hover:not(:disabled) { transform:translateY(-1px); }
.ui-btn:disabled { opacity:.48; cursor:not-allowed; }
.ui-btn-primary { background:#0f2e5c; color:#fff; }
.ui-btn-success { background:#059669; color:#fff; }
.ui-btn-danger { background:#dc2626; color:#fff; }
.ui-btn-outline { background:#fff; color:#334155; border-color:#cbd5e1; }
.ui-btn-small { min-height:32px; padding:6px 9px; font-size:10px; }
.ui-alert { margin:12px 0 0; padding:11px 13px; border:1px solid #bfdbfe; border-radius:9px; background:#eff6ff; color:#1e3a8a; font-size:11px; }
.ui-empty { padding:30px 10px; text-align:center; color:#94a3b8; font-size:12px; }
.ui-chip-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; }
.ui-chip-check { display:flex; align-items:center; gap:7px; padding:10px; border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; cursor:pointer; }
.ui-chip-check:hover { border-color:#93c5fd; background:#eff6ff; }
.ui-chip-check span { font-size:11px; font-weight:800; color:#334155; flex:1; }
.ui-chip-check small { font-size:9px; color:#94a3b8; }
.ui-table-wrap { width:100%; overflow:auto; }
.ui-table { width:100%; min-width:720px; border-collapse:separate; border-spacing:0; text-align:right; }
.ui-table th { padding:11px 12px; background:#f8fafc; border-bottom:1px solid #e2e8f0; color:#475569; font-size:10px; font-weight:800; white-space:nowrap; }
.ui-table td { padding:11px 12px; border-bottom:1px solid #f1f5f9; color:#0f172a; font-size:11px; vertical-align:middle; }
.ui-table tbody tr:hover td { background:#fbfdff; }
.ui-badge { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:9px; font-weight:800; }
.ui-badge.success { background:#dcfce7; color:#166534; }
.ui-badge.info { background:#dbeafe; color:#1e40af; }
.ui-badge.danger { background:#fee2e2; color:#991b1b; }
.ui-badge.muted { background:#f1f5f9; color:#64748b; }
.ui-total { font-size:11px; color:#64748b; }
.ui-total strong { color:#0f2e5c; font-size:18px; }

@media(max-width:1100px){.ui-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}.ui-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:760px){.app-sidebar{position:fixed;top:0;right:0;bottom:0;transform:translateX(105%);transition:transform .25s ease;box-shadow:-15px 0 40px rgba(0,0,0,.2);width:272px!important;flex:0 0 272px!important;}.app-sidebar.mobile-open{transform:translateX(0)}.app-mobile-backdrop.mobile-open{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1050}.mobile-menu-button{display:block}.sidebar-collapse-btn{display:none}.app-sidebar.sidebar-collapsed .brand-text,.app-sidebar.sidebar-collapsed .nav-section-title,.app-sidebar.sidebar-collapsed .nav-link span:not(.icon),.app-sidebar.sidebar-collapsed .user-info{display:revert;}.app-content{padding:13px}.topbar-actions .topbar-user-chip{display:none}.app-topbar{padding:0 12px}.ui-page-header{padding:16px;align-items:flex-start;flex-direction:column}.ui-grid-4{grid-template-columns:1fr}.ui-span-2{grid-column:auto}.ui-stats-grid{grid-template-columns:1fr 1fr}.ui-action-row{width:100%}.ui-btn{flex:1}.ui-chip-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.ui-stats-grid{grid-template-columns:1fr}.ui-chip-grid{grid-template-columns:1fr}.lang-select{display:none}.btn-logout{padding:6px 9px;}}

/* ============================================================
   GridFlow - Professional Login Experience
   ============================================================ */

.login-layout {
    min-height: 100vh;
    width: 100%;
}

.login-shell {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: #f4f7fb;
    color: #0f172a;
}

.login-background,
.login-grid,
.login-orb {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.login-background {
    overflow: hidden;
}

.login-grid {
    opacity: .34;
    background-image:
        linear-gradient(rgba(15, 46, 92, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 46, 92, .04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 90%);
}

.login-orb {
    width: 420px;
    height: 420px;
    inset: auto;
    border-radius: 50%;
    filter: blur(10px);
}

.login-orb-one {
    top: -180px;
    right: -120px;
    background: rgba(37, 99, 235, .13);
}

.login-orb-two {
    bottom: -220px;
    left: -130px;
    background: rgba(6, 182, 212, .09);
}

.login-topbar {
    min-height: 78px;
    padding: 18px clamp(20px, 4vw, 52px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    z-index: 5;
}

.login-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.login-mini-logo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f2e5c, #2563eb);
    color: #fff;
    font-size: 19px;
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(15, 46, 92, .20);
}

.login-topbar-brand strong {
    display: block;
    color: #0f2e5c;
    font-size: 15px;
    line-height: 1.2;
}

.login-topbar-brand small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
}

.login-language-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid #dbe3ee;
    border-radius: 11px;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(15,23,42,.05);
}

.login-language-box span {
    font-size: 14px;
}

.login-language-box select {
    border: 0;
    outline: 0;
    background: transparent;
    color: #334155;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.login-main {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 40px));
    min-height: calc(100vh - 96px);
    margin: 0 auto;
    padding: 12px 0 36px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    align-items: center;
    gap: clamp(24px, 5vw, 72px);
}

.login-brand-panel {
    padding: 30px clamp(12px, 2vw, 22px) 30px 0;
}

.login-brand-inner {
    max-width: 590px;
}

.login-logo-card {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    padding: 4px;
    background: linear-gradient(145deg, #0f2e5c, #2563eb);
    box-shadow: 0 22px 48px rgba(15, 46, 92, .22);
}

.login-logo-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.login-brand-copy {
    margin-top: 26px;
}

.login-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: 11px;
    font-weight: 800;
}

.login-brand-copy h1 {
    margin: 12px 0 0;
    font-size: clamp(42px, 6vw, 64px);
    line-height: .95;
    font-weight: 900;
    letter-spacing: -.03em;
    color: #0f2e5c;
}

.login-brand-copy p {
    max-width: 540px;
    margin: 18px 0 0;
    color: #64748b;
    font-size: 16px;
    line-height: 1.95;
}

.login-feature-list {
    margin-top: 28px;
    display: grid;
    gap: 11px;
}

.login-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 0;
}

.login-feature-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    border-radius: 9px;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    font-size: 13px;
    font-weight: 900;
}

.login-feature-item strong,
.login-feature-item span {
    display: block;
}

.login-feature-item strong {
    color: #1e293b;
    font-size: 13px;
    font-weight: 800;
}

.login-feature-item div > span {
    margin-top: 2px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
}

.login-brand-footer {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.login-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16,185,129,.12);
}

.login-form-panel {
    display: flex;
    justify-content: center;
    padding: 18px 0 18px clamp(0px, 1.5vw, 16px);
}

.login-card {
    width: min(100%, 470px);
    padding: clamp(26px, 4vw, 38px);
    border: 1px solid #e2e8f0;
    border-radius: 26px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 26px 80px rgba(15,23,42,.10);
    backdrop-filter: blur(18px);
}

.login-form-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.login-form-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    font-size: 20px;
}

.login-form-badge {
    padding: 7px 11px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
}

.login-form-header {
    margin-top: 20px;
}

.login-form-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 29px;
    line-height: 1.25;
    font-weight: 900;
}

.login-form-header p {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.8;
}

.login-form {
    margin-top: 28px;
}

.login-field {
    margin-top: 18px;
}

.login-field:first-child {
    margin-top: 0;
}

.login-field label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.login-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.login-field-hint {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
}

.login-input-wrap {
    position: relative;
}

.login-input {
    width: 100%;
    min-height: 52px;
    padding: 13px 46px 13px 15px;
    border: 1.5px solid #d7e0ea;
    border-radius: 13px;
    outline: 0;
    background: #f8fafc;
    color: #0f172a;
    font-family: inherit;
    font-size: 13px;
    transition: .2s ease;
}

.login-input::placeholder {
    color: #94a3b8;
}

.login-input:hover {
    border-color: #bfd0e2;
    background: #fff;
}

.login-input:focus {
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}

.login-password-input {
    padding-left: 48px;
}

.login-input-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 15px;
    pointer-events: none;
}

.login-password-toggle {
    position: absolute;
    left: 11px;
    top: 50%;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 15px;
}

.login-password-toggle:hover {
    background: #eef2f7;
}

.login-submit {
    width: 100%;
    min-height: 54px;
    margin-top: 24px;
    padding: 13px 16px;
    border: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    background: linear-gradient(135deg, #0f2e5c, #2563eb);
    box-shadow: 0 13px 30px rgba(15,46,92,.20);
    font-family: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .2s ease, opacity .2s ease;
}

.login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 17px 34px rgba(15,46,92,.25);
}

.login-submit:active {
    transform: translateY(0);
}

.login-submit.is-loading {
    opacity: .8;
    cursor: wait;
}

.login-forgot-link { color:#1d4ed8; font-size:11px; font-weight:800; text-decoration:none; }
.login-forgot-link:hover { text-decoration:underline; }
.export-menu { position:relative; display:inline-block; }
.export-menu-list { position:absolute; z-index:30; top:calc(100% + 6px); min-width:150px; padding:6px; border:1px solid #dbe3ee; border-radius:10px; background:#fff; box-shadow:0 12px 28px rgba(15,23,42,.14); }
.export-menu-list button { display:block; width:100%; border:0; border-radius:7px; padding:8px 10px; background:transparent; color:#334155; font:inherit; text-align:start; cursor:pointer; }
.export-menu-list button:hover { background:#eff6ff; color:#0f2e5c; }

.login-submit-status {
    min-height: 18px;
    margin: 10px 0 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.login-submit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(255,255,255,.16);
    font-size: 14px;
}

.login-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 13px 14px;
    border-radius: 13px;
}

.login-alert-error {
    color: #991b1b;
    background: #fff1f2;
    border: 1px solid #fecdd3;
}

.login-alert-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: #e11d48;
    font-size: 11px;
    font-weight: 900;
}

.login-alert strong,
.login-alert span:not(.login-alert-icon) {
    display: block;
}

.login-alert strong {
    font-size: 11px;
    font-weight: 900;
}

.login-alert div span {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.6;
}

.login-security-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px;
    padding: 11px 12px;
    border-radius: 11px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    color: #64748b;
    font-size: 10px;
    line-height: 1.7;
}

.login-footer-note {
    margin-top: 19px;
    padding-top: 16px;
    border-top: 1px solid #eef2f7;
    color: #94a3b8;
    font-size: 9px;
    text-align: center;
}

.login-ltr .login-brand-panel {
    padding-right: 22px;
    padding-left: 0;
}

.login-ltr .login-form-panel {
    padding-left: 0;
    padding-right: 16px;
}

.login-ltr .login-input {
    padding-right: 15px;
    padding-left: 46px;
}

.login-ltr .login-input-icon {
    right: auto;
    left: 15px;
}

.login-ltr .login-password-input {
    padding-right: 48px;
    padding-left: 46px;
}

.login-ltr .login-password-toggle {
    left: auto;
    right: 11px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 980px) {
    .login-main {
        grid-template-columns: 1fr;
        width: min(680px, calc(100% - 28px));
        min-height: auto;
        padding-bottom: 36px;
    }

    .login-brand-panel {
        padding: 22px 0 0;
    }

    .login-brand-copy p {
        max-width: 680px;
    }

    .login-feature-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .login-form-panel,
    .login-ltr .login-form-panel {
        padding: 0;
    }
}

@media (max-width: 700px) {
    .login-topbar {
        min-height: 66px;
        padding: 13px 16px;
    }

    .login-main {
        width: min(100% - 20px, 520px);
        padding-top: 6px;
    }

    .login-brand-panel {
        padding-top: 16px;
    }

    .login-logo-card {
        width: 72px;
        height: 72px;
        border-radius: 20px;
    }

    .login-brand-copy {
        margin-top: 18px;
    }

    .login-brand-copy h1 {
        font-size: 42px;
    }

    .login-brand-copy p {
        margin-top: 11px;
        font-size: 13px;
        line-height: 1.8;
    }

    .login-feature-list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .login-feature-item {
        padding: 8px 0;
    }

    .login-brand-footer {
        margin-top: 11px;
    }

    .login-card {
        padding: 22px 18px;
        border-radius: 21px;
    }

    .login-form-header h2 {
        font-size: 24px;
    }
}

@media (max-width: 420px) {
    .login-topbar-brand small {
        display: none;
    }

    .login-language-box {
        padding: 7px 9px;
    }

    .login-brand-copy h1 {
        font-size: 37px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-submit,
    .login-input,
    .login-grid {
        transition: none !important;
    }
}

/* ============================================================
   Global Export Toolbar
   ============================================================ */
.global-export-toolbar{position:relative;display:inline-flex;align-items:center}
.global-export-button{min-height:40px;border:1px solid #dbe3ef;background:#fff;color:#0f2e5c;border-radius:10px;padding:8px 12px;display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-weight:800;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.05);transition:.18s ease}
.global-export-button:hover{border-color:#93c5fd;background:#f8fbff;transform:translateY(-1px)}
.global-export-icon{font-size:16px}.global-export-chevron{font-size:12px;color:#64748b}
.global-export-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:3000;min-width:190px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:6px;box-shadow:0 18px 45px rgba(15,23,42,.16)}
.global-export-menu button{width:100%;border:0;background:transparent;text-align:right;padding:10px 12px;border-radius:8px;font-family:inherit;font-weight:700;color:#334155;cursor:pointer}
.global-export-menu button:hover{background:#f1f5f9;color:#0f2e5c}
@media(max-width:760px){.global-export-toolbar{width:auto}.global-export-button span:not(.global-export-icon):not(.global-export-chevron){display:none}.global-export-menu{right:auto;left:0}}

.login-submit.is-loading .login-submit-icon{font-size:0;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:gridflow-login-spin .7s linear infinite}
@keyframes gridflow-login-spin{to{transform:rotate(360deg)}}


.login-options-row{display:flex;align-items:center;justify-content:flex-start;margin-top:13px}
.login-remember{display:inline-flex;align-items:center;gap:8px;color:#64748b;font-size:11px;font-weight:700;cursor:pointer}
.login-remember input{width:16px;height:16px;accent-color:#2563eb;cursor:pointer}
.login-help-note{margin-top:14px;text-align:center;color:#64748b;font-size:10px;line-height:1.7}

/* ============================================================
   Platform polish: generic university branding + registration/admin
   ============================================================ */
.login-register-link,.login-language-link{display:flex;justify-content:center;align-items:center;text-decoration:none;font-weight:800;color:#2563eb;margin:14px 0}.login-language-link{margin:0;color:#fff}.login-alert-success{background:#ecfdf5!important;border-color:#a7f3d0!important;color:#065f46!important}.register-main{align-items:center}.register-panel{max-width:620px}.trial-box{margin-top:18px;padding:14px 16px;border:1px solid #bfdbfe;background:#eff6ff;border-radius:14px;display:flex;flex-direction:column;gap:5px;color:#1e3a8a}.trial-box span{font-size:13px;color:#475569}.admin-command-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:24px}.admin-command-card{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;text-decoration:none;color:#0f172a;transition:.2s}.admin-command-card:hover{transform:translateY(-2px);border-color:#93c5fd;box-shadow:0 10px 25px rgba(15,23,42,.08)}.admin-command-card strong{font-size:16px}.admin-command-card span{font-size:12px;color:#64748b}.policy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:24px}.policy-grid>div{padding:16px;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0;display:flex;flex-direction:column;gap:6px}.policy-grid span{font-size:13px;color:#64748b}.global-export-toolbar{position:relative;display:inline-flex}.global-export-button{min-height:38px;border:1px solid #cbd5e1;background:#fff;border-radius:10px;padding:8px 13px;display:inline-flex;gap:7px;align-items:center;font:inherit;font-size:13px;font-weight:800;color:#334155;cursor:pointer}.global-export-button:hover{background:#f8fafc;border-color:#94a3b8}.global-export-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:1000;min-width:170px;padding:6px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 14px 35px rgba(15,23,42,.14)}.global-export-menu button{width:100%;border:0;background:transparent;text-align:right;padding:10px 12px;border-radius:8px;font:inherit;cursor:pointer}.global-export-menu button:hover{background:#f1f5f9}
@media(max-width:800px){.admin-command-grid,.policy-grid{grid-template-columns:1fr}.register-panel{width:100%}}


/* Universal Export Framework */
.global-export-toolbar{position:relative;display:inline-flex;align-items:center;z-index:50}.global-export-button{display:inline-flex;align-items:center;gap:7px;border:1px solid #dbe3ef;background:#fff;color:#0f2e5c;border-radius:10px;padding:9px 12px;font-weight:800;cursor:pointer;min-height:40px}.global-export-button:hover{background:#f8fafc}.global-export-button:disabled{opacity:.6;cursor:wait}.global-export-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:185px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 16px 40px rgba(15,23,42,.16);padding:6px}.global-export-menu button{display:block;width:100%;border:0;background:transparent;text-align:start;padding:10px 12px;border-radius:8px;cursor:pointer;font:inherit;color:#0f172a}.global-export-menu button:hover{background:#f1f5f9}


/* ============================================================
   ITEM 7 — Unified Cascading Search & Filters
   ============================================================ */
.academic-filters { margin-bottom: 18px; }
.academic-filter-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.academic-filter-title { font-size:17px; font-weight:800; color:var(--text-primary,#0f172a); }
.academic-filter-subtitle { margin-top:4px; color:var(--text-muted,#64748b); font-size:12px; }
.academic-filter-status { font-size:12px; font-weight:700; color:var(--primary,#1d4ed8); white-space:nowrap; }
.academic-filter-grid { align-items:end; }
.academic-filter-actions { display:flex; align-items:center; gap:8px; min-height:42px; }
.academic-filters select:disabled { opacity:.6; cursor:not-allowed; }
@media (max-width:700px) {
  .academic-filter-header { align-items:flex-start; flex-direction:column; }
  .academic-filter-actions { width:100%; }
  .academic-filter-actions .ui-btn { flex:1; }
}


/* ================================================================
   ITEM 9 — Public Marketing Website / SEO UI
   ================================================================ */
.public-site{min-height:100vh;background:#f7f9fc;color:#0f172a;direction:rtl}
.public-header{height:76px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:28px;padding:0 clamp(18px,4vw,64px);position:sticky;top:0;z-index:50;direction:inherit;transition:box-shadow .25s,background .25s}.public-header.is-scrolled{box-shadow:0 8px 30px rgba(11,35,66,.10);background:rgba(255,255,255,.98)}
.public-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#0f2e5c;min-width:max-content}.public-brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#0f2e5c,#1d78c8);color:white;display:grid;place-items:center;font-weight:900}.public-brand strong{display:block;font-size:17px}.public-brand small{display:block;color:#64748b;font-size:10px;margin-top:2px}
.public-nav{display:flex;justify-content:center;gap:24px;flex:1}.public-nav a,.public-footer a{color:#334155;text-decoration:none;font-weight:700;font-size:14px}.public-nav a:hover,.public-footer a:hover{color:#0f2e5c}.public-actions{display:flex;align-items:center;gap:10px}.public-lang{border:1px solid #dbe3ed;background:white;border-radius:9px;padding:9px 10px}.public-login{padding:10px 16px;border-radius:10px;background:#0f2e5c;color:#fff;text-decoration:none;font-weight:800;font-size:14px}
.public-hero{max-width:1240px;margin:auto;padding:80px 24px 72px;display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;direction:ltr}.public-hero-copy{direction:rtl}.public-eyebrow{display:inline-flex;padding:7px 12px;border-radius:999px;background:#e7f3ff;color:#0b63a5;font-weight:800;font-size:12px}.public-hero h1{font-size:clamp(36px,5vw,62px);line-height:1.15;margin:18px 0 18px;color:#0b2342;letter-spacing:-1px}.public-hero p,.public-lead{font-size:18px;line-height:1.9;color:#526176;max-width:680px}.public-hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}.public-btn{display:inline-flex;justify-content:center;align-items:center;padding:12px 20px;border-radius:11px;text-decoration:none;font-weight:800;transition:.2s}.public-btn-primary{background:#0f2e5c;color:#fff}.public-btn-primary:hover{transform:translateY(-2px);background:#123c76}.public-btn-secondary{background:white;color:#0f2e5c;border:1px solid #d8e1ec}.public-btn-light{background:white;color:#0f2e5c}.public-trust{display:flex;gap:15px;flex-wrap:wrap;margin-top:22px;color:#64748b;font-size:12px;font-weight:700}
.public-hero-panel{direction:ltr}.public-dashboard-window{background:#fff;border:1px solid #dbe4ef;border-radius:20px;overflow:hidden;box-shadow:0 25px 70px rgba(15,46,92,.16);transform:rotate(1deg)}.window-top{height:38px;border-bottom:1px solid #e8edf3;display:flex;align-items:center;gap:6px;padding:0 14px}.window-top span{width:8px;height:8px;border-radius:50%;background:#cbd5e1}.window-body{height:340px;display:flex}.fake-sidebar{width:64px;background:#0f2e5c;padding:18px 12px;display:flex;flex-direction:column;gap:20px;color:white;align-items:center}.fake-sidebar b{font-size:13px}.fake-sidebar i{width:24px;height:7px;border-radius:5px;background:rgba(255,255,255,.35)}.fake-content{flex:1;padding:28px}.fake-title{height:18px;width:45%;background:#dbe7f3;border-radius:6px}.fake-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}.fake-cards b{height:74px;background:#eef5fb;border:1px solid #dbe6f1;border-radius:12px}.fake-table{display:flex;flex-direction:column;gap:9px}.fake-table i{height:13px;background:#edf1f5;border-radius:4px;width:100%}.fake-table i:nth-child(2){width:85%}.fake-table i:nth-child(4){width:72%}
.public-section{padding:78px 24px}.public-section-soft{background:#eef5fb}.public-section-heading{max-width:850px;margin:0 auto 38px;text-align:center}.public-section-heading h2,.public-inner h1{font-size:38px;margin:15px 0 10px;color:#0b2342}.public-section-heading p{color:#64748b}.public-feature-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.public-feature-card{background:#fff;border:1px solid #dfe7f0;border-radius:16px;padding:25px;box-shadow:0 7px 25px rgba(15,23,42,.04)}.public-feature-icon{font-size:30px}.public-feature-card h2,.public-feature-card h3{margin:12px 0 7px;color:#0f2e5c}.public-feature-card p{color:#64748b;line-height:1.8;margin:0}.public-cta{max-width:1180px;margin:60px auto;padding:38px 42px;border-radius:20px;background:linear-gradient(135deg,#0f2e5c,#195e9d);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:25px}.public-cta h2{margin:10px 0 5px;font-size:30px}.public-cta p{margin:0;opacity:.88}.public-inner{max-width:1180px;margin:auto;padding:78px 24px}.public-inner>h1{max-width:850px}.public-narrow{max-width:900px}.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}.pricing-card{background:#fff;border:1px solid #dfe7f0;border-radius:16px;padding:25px;box-shadow:0 8px 25px rgba(15,23,42,.04);display:flex;flex-direction:column}.pricing-card.highlight{border:2px solid #1d78c8;transform:translateY(-8px)}.pricing-card h2{color:#0f2e5c}.pricing-label{height:22px;color:#0b63a5;font-size:12px;font-weight:800}.pricing-card ul{padding-right:20px;line-height:2;color:#64748b;min-height:150px}.public-info-card,.public-contact-card{background:#fff;border:1px solid #dfe7f0;border-radius:18px;padding:30px;margin-top:35px}.public-info-card p{line-height:2;color:#64748b}.public-contact-card{display:flex;gap:12px;flex-wrap:wrap}.public-footer{border-top:1px solid #e1e7ef;background:#fff;padding:30px clamp(18px,4vw,64px);display:flex;align-items:center;justify-content:space-between;gap:20px;color:#64748b;direction:rtl}.public-footer strong{display:block;color:#0f2e5c}.public-footer span{display:block;font-size:12px}.public-footer-links{display:flex;gap:18px}
@media(max-width:900px){.public-header{height:auto;min-height:72px;flex-wrap:wrap;padding:12px 18px}.public-nav{order:3;flex-basis:100%;overflow:auto;justify-content:flex-start;padding-bottom:4px}.public-hero{grid-template-columns:1fr;padding-top:52px}.public-feature-grid{grid-template-columns:repeat(2,1fr)}.pricing-grid{grid-template-columns:repeat(2,1fr)}.public-cta{margin:30px 18px}.public-footer{flex-direction:column;align-items:flex-start}}
@media(max-width:600px){.public-feature-grid,.pricing-grid{grid-template-columns:1fr}.public-hero h1{font-size:38px}.public-hero p,.public-lead{font-size:16px}.public-hero-panel{display:none}.public-cta{flex-direction:column;align-items:flex-start}.public-actions{margin-right:auto}.public-nav{gap:16px}}

/* ============================================================
   Layout safety (2026-09): مفيش صفحة تتسحب بالعرض كلها.
   - أي جدول عريض بيتلف في .tbl-scroll (أو table-responsive / ui-table-wrap)
     فبيتسحب لوحده جوه الكارت بدل ما يوسّع الصفحة ويخبي جزء منها تحت
     القائمة الجانبية.
   - الكروت والصفوف والحقول مابتكبرش عن عرض الحاوية.
   - المودالات العريضة (900/1100px) بتتقفل على عرض الشاشة.
   ============================================================ */
.tbl-scroll { width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-scroll + .tbl-scroll { margin-top:12px; }
.table-responsive, .ui-table-wrap { max-width:100%; }
.app-content > * { max-width:100%; }
.card, .user-form, .glass-card, .ui-card, .ui-page-header { max-width:100%; min-width:0; box-sizing:border-box; }
.form-row > *, .ui-action-row > *, .ui-grid-4 > *, .ui-stats-grid > * { min-width:0; max-width:100%; }
.app-content input, .app-content select, .app-content textarea { max-width:100%; box-sizing:border-box; }
.modal-content, .hs-dialog { max-width:calc(100vw - 32px); box-sizing:border-box; }
.app-content img { max-width:100%; height:auto; }
@media (max-width:760px) {
    .app-content input[type="text"], .app-content input[type="password"], .app-content input[type="number"],
    .app-content input[type="date"], .app-content input[type="time"], .app-content select { min-width:0; }
    .card, .user-form, .glass-card { padding:16px; }
}


/* مسار الجدولة في القائمة: أرقام الخطوات بدل الأيقونات + تمييز رابط البداية. */
.nav-link .icon.nav-num { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:11px; font-weight:900; font-style:normal; flex:0 0 22px; }
.nav-link.active .icon.nav-num { background:#fff; color:#0f2e5c; }
.nav-link.nav-path { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); }

/* ============================================================
   إضافات نظام التصميم (.ui-*) — شبكات ناقصة كانت مستخدمة في الشاشات من
   غير تعريف (ui-grid-2)، وصندوق "إزاي تستخدم الشاشة دي"، ومقاسات أوضح
   للخطوط والأدوات (كانت 10-11px وده صغير على شاشات الإدخال).
   ============================================================ */
.ui-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ui-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.ui-hint { color:#64748b; font-size:12px; }
.ui-page-header p { font-size:13px; }
.ui-card-header h2 { font-size:16px; }
.ui-card-header p { font-size:12px; color:#64748b; }
.ui-field label { font-size:12px; }
.ui-input { font-size:13px; }
.ui-btn { font-size:12px; }
.ui-btn-small { font-size:11px; }
.ui-table th { font-size:12px; }
.ui-table td { font-size:13px; }
.ui-badge { font-size:11px; }
.ui-stat span { font-size:12px; }
.ui-alert { font-size:13px; }
.ui-empty { font-size:13px; }

.ui-guide { display:flex; gap:14px; align-items:flex-start; background:linear-gradient(135deg,#eff6ff,#f8fafc); border:1px solid #bfdbfe; border-radius:16px; padding:14px 16px; margin-bottom:16px; }
.ui-guide-icon { font-size:26px; line-height:1; }
.ui-guide h3 { margin:0 0 6px; font-size:14px; font-weight:800; color:#0f2e5c; }
.ui-guide ol, .ui-guide ul { margin:0; padding-inline-start:20px; color:#334155; font-size:13px; line-height:1.9; }
.ui-guide p { margin:0; color:#334155; font-size:13px; }
.ui-guide-close { margin-inline-start:auto; border:0; background:transparent; cursor:pointer; color:#64748b; font-size:16px; }

.ui-steps { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.ui-step { display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:12px; border:1px solid #e2e8f0; background:#fff; color:#334155; font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.ui-step b { width:24px; height:24px; border-radius:50%; background:#e2e8f0; color:#334155; display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.ui-step.on { background:#0f2e5c; border-color:#0f2e5c; color:#fff; }
.ui-step.on b { background:#fff; color:#0f2e5c; }
.ui-step.done b { background:#dcfce7; color:#166534; }
.ui-step small { font-weight:700; opacity:.75; font-size:11px; }

@media(max-width:760px){ .ui-grid-2, .ui-grid-3 { grid-template-columns:1fr; } }
.global-export-denied{padding:10px 12px;font-size:12px;font-weight:700;color:#991b1b;background:#fef2f2;border-radius:8px;line-height:1.6}

/* ============================================================
   القائمة الجانبية — أقسام بتتفتح وتتقفل + بحث
   ============================================================ */
.nav-search { padding: 0 2px 10px; }
.nav-search input { width: 100%; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); color: #fff; padding: 0 12px; font: inherit; font-size: 12.5px; outline: none; }
.nav-search input::placeholder { color: rgba(255,255,255,.45); }
.nav-search input:focus { border-color: #38bdf8; background: rgba(255,255,255,.1); }
.nav-section { margin-bottom: 4px; border-radius: 12px; }
.nav-section.open { background: rgba(255,255,255,.035); }
.nav-section-head { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: 0; background: transparent; color: rgba(255,255,255,.62); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; border-radius: 12px; text-align: start; transition: .15s ease; }
.nav-section-head:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-section.has-active > .nav-section-head { color: #fff; }
.nav-section-head .sec-icon { width: 24px; text-align: center; font-size: 15px; }
.nav-section-head .sec-title { flex: 1; }
.nav-section-head .sec-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); font-size: 10.5px; display: inline-flex; align-items: center; justify-content: center; }
.nav-section-head .sec-chev { font-size: 11px; opacity: .7; }
.nav-section-body { padding: 0 6px 6px; }
.nav-section-body .nav-link { margin: 2px 0; padding: 9px 11px; font-size: 12.5px; }
.nav-section-sep { height: 1px; margin: 8px 10px; background: rgba(255,255,255,.12); }
.nav-empty { padding: 14px; text-align: center; color: rgba(255,255,255,.5); font-size: 12px; }
.app-sidebar.sidebar-collapsed .nav-section.open { background: transparent; }
.app-sidebar.sidebar-collapsed .nav-section-body { padding: 0; }

/* ============================================================
   توحيد الشكل — جسر بين الـ classes القديمة ونظام التصميم .ui-*
   الشاشات القديمة (user-form / users-table / btn-primary / form-control ...)
   بتاخد نفس المقاسات والألوان والزوايا بتاعة الشاشات الجديدة، من غير ما
   نلمس منطقها. أي شاشة جديدة تستخدم .ui-* مباشرة.
   ============================================================ */

/* الحقل العام (input[type=text]...) كان بيغلب على .ui-input لأن الـ specificity
   بتاعته أعلى، فكان بيفرض min-width:160px وخلفية رمادي على حقول الشاشات
   الجديدة — ده سبب إن مقاسات بعض الأدوات كانت مش مظبوطة. */
input.ui-input, select.ui-input, textarea.ui-input { min-width: 0; padding: 9px 11px; background: #fff; font-size: 13px; border-radius: 9px; min-height: 42px; }

/* الصناديق */
.card, .user-form { border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; }
.card h3, .card-title, .user-form > h3 { font-size: 15px; font-weight: 800; color: #0f172a; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9; }
.form-row { gap: 12px; margin-top: 12px; }
.form-row label, .form-group label { font-size: 12px; font-weight: 800; color: #475569; }

/* الحقول (القاعدة العامة للحقول اتعدّلت في مكانها فوق عشان ترتيب الأولوية يفضل زي ما هو) */
.form-control { width: 100%; min-height: 42px; padding: 9px 11px; border-radius: 9px; font-size: 13px; background-color: #fff; border: 1px solid #cbd5e1; color: #0f172a; font-family: inherit; }
.form-control:focus { border-color: #0284c7; box-shadow: 0 0 0 3px rgba(2,132,199,.1); outline: none; }
.chk { padding: 8px 12px; border-radius: 9px; font-size: 12.5px; background: #fff; }

/* الأزرار */
button, .btn { border-radius: 9px; font-size: 12.5px; font-family: inherit; }
.btn-primary, .btn-secondary, .btn-danger, .btn-danger-outline { min-height: 39px; padding: 8px 14px; font-weight: 800; }
.btn-secondary { background: #fff; color: #334155; border: 1px solid #cbd5e1; }
.btn-secondary:hover { background: #f8fafc; }
.btn-small { min-height: 32px; padding: 6px 10px; font-size: 11.5px; border-radius: 8px; }
a.btn-primary, a.btn-secondary { text-decoration: none; }

/* الجداول */
.table-responsive, .tbl-scroll { border-radius: 14px; border: 1px solid var(--border-color); background: #fff; overflow-x: auto; }
.users-table, .data-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.users-table th, .data-table th { padding: 11px 12px; font-size: 12px; font-weight: 800; color: #475569; background: #f8fafc; border-bottom: 1px solid #e2e8f0; text-align: start; }
.users-table td, .data-table td { padding: 11px 12px; font-size: 13px; border-bottom: 1px solid #f1f5f9; }
.users-table tbody tr:hover td, .data-table tbody tr:hover td { background: #fbfdff; }

/* الرسائل */
.form-error { border-radius: 12px; font-size: 13px; }
.form-success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; padding: 11px 14px; border-radius: 12px; font-size: 13px; font-weight: 700; margin-top: 12px; }

/* ============================================================
   الحركة (Animation) — خفيفة وسريعة (أقل من 250ms)، ولها هدف: توضّح إن
   حاجة ظهرت/اتقفلت. كلها بتتلغي لو المستخدم مفعّل «تقليل الحركة».
   ============================================================ */
@keyframes gf-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gf-rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes gf-pop-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes gf-slide-in-start { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes gf-spin { to { transform: rotate(360deg); } }
@keyframes gf-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

/* دخول الشاشة: fill-mode = backwards عشان مايفضلش transform على .ui-page بعد
   الحركة (transform على الأب بيكسر position:fixed للنوافذ والـ drawers جواه). */
.ui-page { animation: gf-rise-in .22s ease-out backwards; }
.modal-overlay, .pa-drawer-backdrop, .hs-overlay { animation: gf-fade-in .18s ease-out; }
.modal-content, .hs-dialog { animation: gf-pop-in .2s ease-out; }
.pa-drawer { animation: gf-slide-in-start .24s cubic-bezier(.2,.8,.2,1); }
.nav-section-body { animation: gf-rise-in .16s ease-out; }
.gf-skeleton { background: linear-gradient(90deg, #f1f5f9 0, #e2e8f0 40px, #f1f5f9 80px) #f1f5f9; background-size: 800px 100%; animation: gf-shimmer 1.2s linear infinite; border-radius: 8px; color: transparent !important; }

/* ---------------- Toast ---------------- */
#gf-toasts { position: fixed; bottom: 18px; inset-inline-start: 18px; z-index: 12000; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 36px)); pointer-events: none; }
.gf-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: #0f172a; color: #fff; box-shadow: 0 12px 30px rgba(15,23,42,.25); font-size: 13px; font-weight: 700; opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; }
.gf-toast.gf-in { opacity: 1; transform: none; }
.gf-toast.gf-out { opacity: 0; transform: translateY(6px); }
.gf-toast-icon { flex: 0 0 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; background: rgba(255,255,255,.18); }
.gf-toast-text { flex: 1; line-height: 1.55; white-space: pre-line; }
.gf-toast-close { border: 0; background: transparent; color: inherit; opacity: .7; cursor: pointer; min-height: 0; padding: 2px 6px; font-size: 12px; }
.gf-toast-close:hover { opacity: 1; }
.gf-toast-success { background: #065f46; }
.gf-toast-error, .gf-toast-danger { background: #991b1b; }
.gf-toast-warning { background: #92400e; }
.gf-toast-info { background: #1e3a8a; }

/* ---------------- نوافذ التأكيد/التنبيه ---------------- */
.gf-dialog-overlay { position: fixed; inset: 0; z-index: 11000; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(15,23,42,.5); opacity: 0; transition: opacity .16s ease; }
.gf-dialog-overlay.gf-in { opacity: 1; }
.gf-dialog { width: min(440px, 100%); background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 24px 60px rgba(15,23,42,.3); display: flex; flex-direction: column; gap: 12px; transform: translateY(8px) scale(.97); transition: transform .18s ease; }
.gf-dialog-overlay.gf-in .gf-dialog { transform: none; }
.gf-dialog-icon { width: 44px; height: 44px; border-radius: 12px; background: #eff6ff; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.gf-dialog-danger .gf-dialog-icon { background: #fef2f2; }
.gf-dialog-text { font-size: 14px; line-height: 1.8; color: #0f172a; white-space: pre-line; max-height: 50vh; overflow: auto; }
.gf-dialog-input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 9px; font: inherit; font-size: 14px; }
.gf-dialog-input:focus { outline: none; border-color: #0284c7; box-shadow: 0 0 0 3px rgba(2,132,199,.12); }
.gf-dialog-actions { display: flex; gap: 8px; justify-content: flex-start; }
.gf-dialog-actions button { min-height: 40px; padding: 8px 16px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.gf-dialog-ok { background: #0f2e5c; color: #fff; border: 1px solid #0f2e5c; }
.gf-dialog-ok.danger { background: #b91c1c; border-color: #b91c1c; }
.gf-dialog-cancel { background: #fff; color: #334155; border: 1px solid #cbd5e1; }
.gf-dialog-actions button:focus-visible { outline: 3px solid rgba(2,132,199,.35); outline-offset: 2px; }

/* ---------------- انقطاع الاتصال بالسيرفر (Blazor Server) ---------------- */
.gf-reconnect { display: none; position: fixed; inset: 0; z-index: 13000; background: rgba(15,23,42,.35); align-items: flex-start; justify-content: center; padding-top: 80px; }
.gf-reconnect.components-reconnect-show, .gf-reconnect.components-reconnect-retrying,
.gf-reconnect.components-reconnect-failed, .gf-reconnect.components-reconnect-rejected,
.gf-reconnect.components-reconnect-paused, .gf-reconnect.components-reconnect-resume-failed { display: flex; animation: gf-fade-in .2s ease-out; }
.gf-reconnect-box { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: 0 16px 40px rgba(15,23,42,.25); font-size: 14px; font-weight: 700; color: #0f172a; max-width: calc(100vw - 32px); }
.gf-reconnect-box button { border: 0; background: #0f2e5c; color: #fff; border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.gf-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #cbd5e1; border-top-color: #0f2e5c; animation: gf-spin .8s linear infinite; flex: 0 0 22px; }
.gf-reconnect .r-failed, .gf-reconnect .r-rejected, .gf-reconnect .r-show { display: none; }
.gf-reconnect.components-reconnect-show .r-show, .gf-reconnect.components-reconnect-retrying .r-show, .gf-reconnect.components-reconnect-paused .r-show { display: inline; }
.gf-reconnect.components-reconnect-failed .r-failed, .gf-reconnect.components-reconnect-resume-failed .r-failed { display: inline-flex; gap: 10px; align-items: center; }
.gf-reconnect.components-reconnect-rejected .r-rejected { display: inline-flex; gap: 10px; align-items: center; }
.gf-reconnect.components-reconnect-failed .gf-spinner, .gf-reconnect.components-reconnect-rejected .gf-spinner, .gf-reconnect.components-reconnect-resume-failed .gf-spinner { display: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ===================== Landing page (lp-) ===================== */
.lp{--navy:#0b2342;--navy2:#0f2e5c;--blue:#1d78c8;--sky:#e7f3ff;--gold:#c9a24b;--gold2:#e2c176;--ink:#0f172a;--mut:#5b6b80;--line:#dfe7f0;--bg:#f4f7fb;--ok:#0e9f6e;color:var(--ink);overflow-x:clip}
.lp *{box-sizing:border-box}
.lp-wrap{max-width:1200px;margin:auto;padding:0 24px}.lp-narrow{max-width:860px}
.lp-ico{width:1.15em;height:1.15em;flex:none}.lp-flip{transform:scaleX(-1)}
.lp-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--sky);color:#0b63a5;font-weight:800;font-size:12px;letter-spacing:.2px}
.lp-eyebrow-dark{background:rgba(255,255,255,.1);color:var(--gold2);border:1px solid rgba(226,193,118,.35)}
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;border-radius:11px;font-weight:800;font-size:15px;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer;border:1px solid transparent}
.lp-btn:hover{transform:translateY(-2px)}
.lp-btn-gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#2a1f05;box-shadow:0 10px 26px rgba(201,162,75,.35)}.lp-btn-gold:hover{box-shadow:0 14px 34px rgba(201,162,75,.5)}
.lp-btn-outline{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.06)}.lp-btn-outline:hover{background:rgba(255,255,255,.16)}

/* hero */
.lp-hero{position:relative;background:linear-gradient(160deg,#08182f 0%,var(--navy) 45%,#123e73 100%);color:#fff;padding:84px 0 110px;overflow:hidden;--mx:50%;--my:40%}
.lp-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(226,193,118,.13),transparent 60%);pointer-events:none}
.lp-hero-bg{position:absolute;inset:0;pointer-events:none}
.lp-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 78%)}
.lp-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:lpFloat 14s ease-in-out infinite}
.lp-orb-1{width:380px;height:380px;background:#1d78c8;top:-120px;inset-inline-start:-80px}
.lp-orb-2{width:320px;height:320px;background:#c9a24b;opacity:.28;bottom:-140px;inset-inline-end:8%;animation-delay:-6s}
@keyframes lpFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(28px,-22px)}}
.lp-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center}
.lp-hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.22;margin:20px 0 18px;font-weight:900;letter-spacing:-.5px}
.lp-hero-pre{display:block;color:#dbe8f7}
.lp-rotor{display:inline-flex;align-items:center;min-height:1.3em;background:linear-gradient(90deg,var(--gold2),#fff3cf);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-caret{display:inline-block;width:3px;height:.95em;margin-inline-start:6px;background:var(--gold2);animation:lpBlink 1s steps(2) infinite;border-radius:2px}
@keyframes lpBlink{50%{opacity:0}}
.lp-hero p{font-size:18px;line-height:1.95;color:#c3d3e8;max-width:600px;margin:0}
.lp-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.lp-trust{list-style:none;padding:0;margin:26px 0 0;display:flex;gap:18px;flex-wrap:wrap;color:#a9bdd6;font-size:13px;font-weight:700}
.lp-trust li{display:inline-flex;align-items:center;gap:7px}.lp-trust .lp-ico{color:var(--gold2)}
.lp-hero-visual{position:relative;perspective:1400px}
.lp-hero-mock{position:relative;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out;transform-style:preserve-3d}
.lp-float{position:absolute;display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.96);color:var(--ink);border-radius:14px;padding:11px 16px 11px 14px;box-shadow:0 18px 44px rgba(3,12,28,.35);animation:lpBob 6s ease-in-out infinite;z-index:3}
.lp-float small{display:block;color:var(--mut);font-size:11px;font-weight:700}.lp-float b{font-size:16px;color:var(--navy2);direction:ltr;display:inline-block}
.lp-float-ico{width:38px;height:38px;border-radius:11px;background:var(--sky);color:#0b63a5;display:grid;place-items:center;font-size:19px}.lp-float-ico.lp-ok{background:#dcf5ea;color:var(--ok)}.lp-float-ico.lp-gold{background:#fbf0d6;color:#9a7420}
.lp-float-1{top:-22px;inset-inline-start:-26px}.lp-float-2{bottom:-22px;inset-inline-start:34px;animation-delay:-2s}.lp-float-3{bottom:-24px;inset-inline-end:26px;animation-delay:-4s}
@keyframes lpBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* browser frame */
.lp-frame{background:#fff;border:1px solid #d6e0ec;border-radius:16px;overflow:hidden;box-shadow:0 34px 80px rgba(3,12,28,.42);color:var(--ink)}
.lp-frame-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#f1f5fa;border-bottom:1px solid #e2e9f2;direction:ltr}
.lp-frame-bar span{width:9px;height:9px;border-radius:50%;background:#cbd5e1}.lp-frame-bar span:nth-child(1){background:#f0a3a3}.lp-frame-bar span:nth-child(2){background:#f0d79a}.lp-frame-bar span:nth-child(3){background:#a9dcb9}
.lp-frame-bar em{margin-inline-start:14px;flex:1;max-width:260px;background:#fff;border:1px solid #e2e9f2;border-radius:7px;padding:3px 10px;font-style:normal;font-size:11px;color:#7b8ba0;direction:inherit}
.lp-frame-body{padding:16px;min-height:340px}

/* timetable mock */
.lp-tt{display:grid;grid-template-columns:46px repeat(5,minmax(0,1fr));gap:6px}
.lp-tt-h{font-size:11px;font-weight:800;color:#64748b;text-align:center;padding:4px 0}
.lp-tt-t{font-size:10px;font-weight:700;color:#94a3b8;display:grid;place-items:center;direction:ltr}
.lp-tt-c{min-height:58px;border-radius:9px;padding:7px 8px;display:flex;flex-direction:column;justify-content:space-between;font-size:11px;border:1px solid transparent;position:relative}
.lp-tt-c b{font-weight:800;font-size:11.5px;line-height:1.3}.lp-tt-c em{font-style:normal;font-size:10px;opacity:.85;font-weight:700}
.lp-tt-empty{background:repeating-linear-gradient(135deg,#f6f8fb,#f6f8fb 6px,#f0f4f9 6px,#f0f4f9 12px);border-color:#eef2f7}
.lp-k-lec{background:#e4f0fc;color:#0b4f8a;border-color:#c8def5}.lp-k-prac{background:#dcf4ee;color:#0a6b5c;border-color:#bfe8de}.lp-k-pbl{background:#fbf0d6;color:#7d5c12;border-color:#f0dcaa}.lp-k-clin{background:#ece7fa;color:#4d37a0;border-color:#d8cff3}

/* students mock */
.lp-imp{display:flex;align-items:center;gap:9px;background:#eefaf4;border:1px solid #c9ecd9;color:#0b7a55;border-radius:10px;padding:10px 14px;font-size:12px;font-weight:700;margin-bottom:12px}
.lp-imp-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(14,159,110,.18)}
.lp-tbl{width:100%;border-collapse:collapse;font-size:12px}.lp-tbl th{background:#f1f5fa;color:#5b6b80;font-weight:800;text-align:start;padding:9px 10px;border-bottom:1px solid #e2e9f2}.lp-tbl td{padding:10px;border-bottom:1px solid #eef2f7;color:#334155}
.lp-pill{display:inline-block;padding:3px 10px;border-radius:999px;background:#e4f0fc;color:#0b4f8a;font-weight:800;font-size:11px}.lp-pill-new{background:#fbf0d6;color:#7d5c12}

/* block mock */
.lp-blk-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px}.lp-blk-top b{display:block;font-size:16px;color:var(--navy2)}.lp-blk-top small{color:var(--mut);font-weight:700}
.lp-donut{width:132px;height:132px;flex:none;transform:rotate(-90deg)}
.lp-donut circle{fill:none;stroke-width:12}.lp-donut-bg{stroke:#e6ebf2}.lp-donut-a{stroke:var(--blue);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 1.1s cubic-bezier(.2,.8,.2,1)}
.lp-donut text{transform:rotate(90deg);transform-origin:50px 50px}.lp-donut-n{font-size:22px;font-weight:900;fill:var(--navy2)}.lp-donut-s{font-size:7px;font-weight:700;fill:#64748b}
.lp-blk-legend{display:flex;gap:18px;font-size:12px;font-weight:700;color:#475569;margin-bottom:14px}.lp-blk-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:6px}.lp-lg-a{background:var(--blue)}.lp-lg-b{background:#dbe4ef}
.lp-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}.lp-bars li{display:grid;grid-template-columns:110px 1fr 40px;gap:12px;align-items:center;font-size:12px;font-weight:700;color:#334155}
.lp-bars em,.lp-dept-track{display:block;height:9px;background:#e8eef5;border-radius:99px;overflow:hidden}.lp-bars em i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),#4aa3e8);border-radius:99px;transition:width 1s cubic-bezier(.2,.8,.2,1) calc(var(--i)*90ms)}
.lp-bars b{text-align:end;color:var(--navy2)}

/* report mock */
.lp-rep{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start}
.lp-paper{background:#fff;border:1px solid #dbe3ed;border-radius:6px;padding:20px 22px;box-shadow:0 10px 30px rgba(15,23,42,.10);min-height:300px}
.lp-paper-head{display:flex;align-items:center;gap:12px}.lp-paper-logo{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,var(--navy2),var(--blue));color:#fff;display:grid;place-items:center;font-weight:900;font-size:13px}.lp-paper-head b{display:block;color:var(--navy2);font-size:13px}.lp-paper-head small{color:var(--mut);font-weight:700;font-size:11px}
.lp-paper-rule{height:2px;background:linear-gradient(90deg,var(--navy2),var(--gold),transparent);margin:14px 0}
.lp-paper-rows{display:flex;flex-direction:column;gap:8px}.lp-paper-rows span{display:grid;grid-template-columns:1.6fr 1fr 1fr .8fr;gap:8px}.lp-paper-rows i{height:11px;border-radius:3px;background:#e9eef5}.lp-paper-rows span:first-child i{background:#cfdbea;height:13px}
.lp-paper-sign{display:flex;justify-content:space-between;margin-top:34px;font-size:11px;font-weight:700;color:#64748b}.lp-paper-sign span{border-top:1px solid #b8c4d4;padding-top:6px;min-width:110px;text-align:center}
.lp-chips{display:flex;flex-direction:column;gap:9px}.lp-chips span{padding:9px 16px;border-radius:9px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:800;color:var(--navy2);text-align:center;box-shadow:0 4px 12px rgba(15,23,42,.05)}

/* stats */
.lp-stats{background:#fff;border-bottom:1px solid var(--line);margin-top:-46px;position:relative;z-index:4}
.lp-stats-in{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 22px 50px rgba(11,35,66,.12);transform:translateY(-46px);margin-bottom:-46px;padding:6px 0}
.lp-stat{padding:24px 18px;text-align:center;border-inline-start:1px solid var(--line)}.lp-stat:first-child{border-inline-start:0}
.lp-stat b{display:block;font-size:40px;line-height:1.1;font-weight:900;color:var(--navy2);direction:ltr}.lp-stat>span{display:block;margin-top:6px;color:var(--mut);font-size:13px;font-weight:700}

/* sections */
.lp-section{padding:96px 0}.lp-soft{background:var(--bg)}
.lp-head{text-align:center;max-width:760px;margin:0 auto 46px}.lp-head h2{font-size:clamp(28px,3.4vw,40px);line-height:1.3;margin:16px 0 10px;color:var(--navy);font-weight:900}.lp-head p{color:var(--mut);font-size:16px;line-height:1.9;margin:0}
.lp-stats + .lp-section{padding-top:110px}

/* tour */
.lp-tour{display:grid;grid-template-columns:340px 1fr;gap:34px;align-items:start}
.lp-tabs{display:flex;flex-direction:column;gap:10px}
.lp-tab{position:relative;display:flex;gap:14px;align-items:flex-start;text-align:start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;cursor:pointer;font:inherit;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s;overflow:hidden}
.lp-tab:hover{transform:translateX(0) translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.07)}
.lp-tab.is-active{border-color:#9cc8ee;box-shadow:0 14px 34px rgba(29,120,200,.14)}
.lp-tab-ico{width:40px;height:40px;border-radius:11px;background:var(--sky);color:#0b63a5;display:grid;place-items:center;font-size:20px;flex:none;transition:background .2s,color .2s}.lp-tab.is-active .lp-tab-ico{background:var(--navy2);color:#fff}
.lp-tab-txt b{display:block;color:var(--navy2);font-size:15px;margin-bottom:3px}.lp-tab-txt small{display:block;color:var(--mut);font-size:12.5px;line-height:1.7;font-weight:600}
.lp-tab-bar{position:absolute;bottom:0;inset-inline-start:0;height:3px;width:0;background:linear-gradient(90deg,var(--blue),var(--gold))}
.lp-tab.is-active .lp-tab-bar{width:100%}.lp-tab.is-run .lp-tab-bar{width:0;animation:lpBar var(--dur,7000ms) linear forwards}.lp-tab.is-paused .lp-tab-bar{animation-play-state:paused}
@keyframes lpBar{to{width:100%}}
.lp-stage{position:relative;min-height:400px}
.lp-panel{display:none}.lp-panel.is-active{display:block;animation:lpPanel .5s ease both}
@keyframes lpPanel{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.lp-stage .lp-frame,.lp-hero-mock .lp-frame{box-shadow:0 30px 70px rgba(11,35,66,.2)}
.lp-hero-mock .lp-frame{box-shadow:0 40px 90px rgba(3,12,28,.5)}

/* mock entrance animations (JS toggles .lp-in / .lp-replay) */
.lp-js .lp-hero-mock .lp-tt-c,.lp-js .lp-panel .lp-tt-c,.lp-js .lp-panel .lp-tbl tbody tr,.lp-js .lp-panel .lp-paper-rows span{opacity:0}
.lp-js .lp-hero-mock.lp-in .lp-tt-c:not(.lp-tt-empty){animation:lpPop .5s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i)*70ms + 250ms)}
.lp-js .lp-hero-mock.lp-in .lp-tt-empty{opacity:1}
.lp-js .lp-panel.lp-replay .lp-tt-c:not(.lp-tt-empty){animation:lpPop .5s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i)*60ms + 100ms)}
.lp-js .lp-panel .lp-tt-empty{opacity:1}
.lp-js .lp-panel.lp-replay .lp-tbl tbody tr{animation:lpRow .45s ease both;animation-delay:calc(var(--i)*80ms + 100ms)}
.lp-js .lp-panel.lp-replay .lp-paper-rows span{animation:lpRow .45s ease both;animation-delay:calc(var(--i)*70ms + 150ms)}
.lp-panel.lp-replay .lp-donut-a{stroke-dasharray:50 100}.lp-panel.lp-replay .lp-bars em i{width:var(--w)}
.lp-js .lp-panel:not(.lp-replay) .lp-bars em i{width:0}
@keyframes lpPop{from{opacity:0;transform:scale(.7) translateY(8px)}to{opacity:1;transform:none}}
@keyframes lpRow{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
/* no-JS fallback: show final state */
.lp:not(.lp-js) .lp-donut-a{stroke-dasharray:50 100}.lp:not(.lp-js) .lp-bars em i{width:var(--w)}

/* scroll reveal */
.lp-js .lp-reveal:not(.lp-hero-mock){opacity:0;transform:translateY(26px);transition:opacity .7s ease var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.lp-js .lp-reveal.lp-in:not(.lp-hero-mock){opacity:1;transform:none}
.lp-js .lp-hero-mock.lp-reveal{opacity:0;transition:opacity .8s ease}.lp-js .lp-hero-mock.lp-reveal.lp-in{opacity:1}

/* calculator */
.lp-dark{background:linear-gradient(160deg,#08182f,var(--navy) 60%,#123e73);color:#fff;position:relative;overflow:hidden}
.lp-dark::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(29,120,200,.35),transparent 65%);top:-160px;inset-inline-end:-120px;pointer-events:none}
.lp-calc{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;position:relative}
.lp-calc-copy h2{font-size:clamp(28px,3.4vw,40px);line-height:1.3;margin:16px 0 12px;font-weight:900}.lp-calc-copy p{color:#c3d3e8;line-height:1.95;font-size:16px}
.lp-checks{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:12px}.lp-checks li{display:flex;align-items:center;gap:12px;color:#e3edf8;font-weight:700;font-size:14.5px}.lp-checks .lp-ico{width:26px;height:26px;padding:5px;border-radius:50%;background:rgba(226,193,118,.16);color:var(--gold2)}
.lp-calc-card{background:#fff;color:var(--ink);border-radius:20px;padding:28px;box-shadow:0 34px 80px rgba(3,12,28,.5)}
.lp-range{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;font-weight:800;color:var(--navy2)}.lp-range b{font-size:26px;direction:ltr;min-width:2ch;text-align:end}.lp-range input{grid-column:1/-1}
.lp-range input{-webkit-appearance:none;appearance:none;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--blue) var(--pct,15%),#e2e8f0 var(--pct,15%));outline:none;direction:ltr;cursor:pointer}
.lp-range input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid var(--navy2);box-shadow:0 4px 12px rgba(11,35,66,.35);cursor:grab}
.lp-range input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--navy2);box-shadow:0 4px 12px rgba(11,35,66,.35);cursor:grab}
.lp-calc-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 14px}.lp-calc-figs div{background:var(--bg);border:1px solid var(--line);border-radius:13px;padding:14px;text-align:center}
.lp-calc-figs small{display:block;color:var(--mut);font-size:11.5px;font-weight:800;margin-bottom:4px}.lp-calc-figs b{font-size:28px;color:var(--navy2);direction:ltr;display:inline-block}
.lp-calc-figs .lp-fig-accent{background:var(--navy2);border-color:var(--navy2)}.lp-fig-accent small{color:#b9cde6}.lp-fig-accent b{color:var(--gold2)}
.lp-calc-bar{display:flex;height:12px;border-radius:99px;overflow:hidden;background:#e2e8f0;margin-bottom:22px;direction:ltr}.lp-calc-bar i{display:block;width:50%;background:linear-gradient(90deg,var(--blue),#4aa3e8)}.lp-calc-bar .lp-self{background:#cfdbe9}
.lp-calc-card h4{margin:0 0 12px;font-size:13px;color:var(--mut);font-weight:800}
.lp-dept{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.lp-dept li{display:grid;grid-template-columns:120px 1fr 96px;gap:12px;align-items:center;font-size:13px;font-weight:700;color:#334155}
.lp-dept-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:99px;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.lp-dept b{white-space:nowrap;text-align:end;color:var(--navy2);direction:ltr}.lp-dept b small{color:var(--mut);font-weight:700}
.lp-note{margin:18px 0 0;padding:12px 14px;border-radius:11px;background:#fbf6e8;border:1px solid #f0e3bd;color:#6b5514;font-size:12.5px;line-height:1.8;font-weight:600}

/* cards */
.lp-cards{display:grid;gap:18px}.lp-cards-4{grid-template-columns:repeat(4,1fr)}
.lp-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.lp-card::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--gold));transform:scaleX(0);transform-origin:inline-start;transition:transform .35s}
.lp-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(11,35,66,.12);border-color:#c7dcf1}.lp-card:hover::before{transform:scaleX(1)}
.lp-card-ico{width:50px;height:50px;border-radius:14px;background:linear-gradient(135deg,var(--navy2),var(--blue));color:#fff;display:grid;place-items:center;font-size:24px;box-shadow:0 10px 22px rgba(29,120,200,.28)}
.lp-card h3{margin:18px 0 8px;color:var(--navy2);font-size:17px}.lp-card p{margin:0;color:var(--mut);line-height:1.85;font-size:14px}
.lp-card-aud .lp-card-ico{background:var(--sky);color:#0b63a5;box-shadow:none}

/* steps */
.lp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;--prog:0%}
.lp-steps::before{content:"";position:absolute;top:26px;inset-inline:6%;height:3px;background:#dbe4ef;border-radius:2px}
.lp-steps::after{content:"";position:absolute;top:26px;inset-inline-start:6%;height:3px;width:calc(88% * var(--prog) / 100%);background:linear-gradient(90deg,var(--blue),var(--gold));border-radius:2px;transition:width .15s linear}
.lp-steps li{position:relative;text-align:center;padding:0 8px}.lp-step-n{position:relative;z-index:1;width:54px;height:54px;border-radius:50%;background:#fff;border:3px solid var(--navy2);color:var(--navy2);display:grid;place-items:center;margin:0 auto 16px;font-size:20px;font-weight:900;box-shadow:0 8px 22px rgba(11,35,66,.14)}
.lp-steps h3{margin:0 0 8px;color:var(--navy2);font-size:17px}.lp-steps p{margin:0;color:var(--mut);line-height:1.85;font-size:14px}

/* faq */
.lp-faq{display:flex;flex-direction:column;gap:12px}
.lp-faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 20px;transition:box-shadow .2s,border-color .2s}
.lp-faq details[open]{border-color:#9cc8ee;box-shadow:0 12px 30px rgba(29,120,200,.10)}
.lp-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:800;color:var(--navy2);font-size:15.5px}
.lp-faq summary::-webkit-details-marker{display:none}.lp-faq summary i{width:30px;height:30px;border-radius:50%;background:var(--sky);color:#0b63a5;display:grid;place-items:center;flex:none;transition:transform .3s,background .3s}
.lp-faq details[open] summary i{transform:rotate(45deg);background:var(--navy2);color:#fff}
.lp-faq p{margin:0;padding:0 0 20px;color:var(--mut);line-height:1.95;font-size:14.5px;animation:lpFade .35s ease}
@keyframes lpFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* cta */
.lp-cta-wrap{padding:0 0 96px;background:var(--bg)}
.lp-cta{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding:46px 50px;border-radius:24px;background:linear-gradient(135deg,var(--navy),#155ea3);color:#fff;box-shadow:0 30px 70px rgba(11,35,66,.3)}
.lp-cta-orb{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(226,193,118,.35),transparent 65%);top:-140px;inset-inline-start:-80px;pointer-events:none}
.lp-cta>div{position:relative}.lp-cta h2{margin:0 0 8px;font-size:32px;font-weight:900}.lp-cta p{margin:0;color:#cfe0f3;max-width:520px;line-height:1.9}
.lp-cta-btns{display:flex;gap:10px;flex-wrap:wrap}

/* responsive */
@media(max-width:1000px){
 .lp-hero-in,.lp-calc,.lp-tour{grid-template-columns:1fr}.lp-hero{padding:60px 0 96px}.lp-hero-visual{max-width:640px;margin:10px auto 0;width:100%}
 .lp-tabs{display:grid;grid-template-columns:repeat(2,1fr)}.lp-tab-txt small{display:none}
 .lp-cards-4{grid-template-columns:repeat(2,1fr)}.lp-steps{grid-template-columns:repeat(2,1fr);row-gap:34px}.lp-steps::before,.lp-steps::after{display:none}
 .lp-stats-in{grid-template-columns:repeat(2,1fr)}.lp-stat:nth-child(3){border-inline-start:0}.lp-stat:nth-child(n+3){border-top:1px solid var(--line)}
 .lp-float-1{inset-inline-start:-8px}.lp-float-2{inset-inline-start:8px}
}
@media(max-width:640px){
 .lp-wrap{padding:0 16px}.lp-section{padding:68px 0}.lp-cards-4,.lp-steps{grid-template-columns:1fr}.lp-tabs{grid-template-columns:1fr 1fr}
 .lp-frame-body{padding:10px;min-height:0}.lp-tt{grid-template-columns:34px repeat(5,minmax(0,1fr));gap:4px}.lp-tt-c{min-height:46px;padding:5px}.lp-tt-c b{font-size:9.5px}.lp-tt-c em{display:none}.lp-tt-h{font-size:9.5px}
 .lp-tbl th:nth-child(1),.lp-tbl td:nth-child(1),.lp-tbl th:nth-child(3),.lp-tbl td:nth-child(3){display:none}
 .lp-rep{grid-template-columns:1fr}.lp-chips{flex-direction:row;flex-wrap:wrap}.lp-bars li{grid-template-columns:86px 1fr 36px}.lp-dept li{grid-template-columns:90px 1fr 62px}
 .lp-calc-figs b{font-size:22px}.lp-cta{padding:32px 24px}.lp-float{display:none}.lp-stat b{font-size:32px}
}
@media(prefers-reduced-motion:reduce){.lp *,.lp *::before,.lp *::after{animation:none!important;transition:none!important}.lp-js .lp-reveal,.lp-js .lp-tt-c,.lp-js .lp-tbl tbody tr,.lp-js .lp-paper-rows span{opacity:1!important;transform:none!important}}

/* Auth screens: brand link back to the public home + register polish */
a.login-topbar-brand{text-decoration:none;color:inherit;transition:transform .2s,opacity .2s}a.login-topbar-brand:hover{transform:translateY(-1px);opacity:.92}
a.login-logo-card{display:block;text-decoration:none;transition:transform .25s,box-shadow .25s}a.login-logo-card:hover{transform:translateY(-3px) scale(1.03)}
.login-topbar .login-language-link{color:#0f2e5c;padding:10px 18px;border:1px solid #dbe3ee;border-radius:11px;background:rgba(255,255,255,.88);font-size:13px;box-shadow:0 8px 24px rgba(15,23,42,.05);transition:background .2s,transform .2s}.login-topbar .login-language-link:hover{background:#fff;transform:translateY(-1px)}
.register-main .register-panel{max-width:none}

.register-main .login-brand-panel{align-self:start;position:sticky;top:24px}@media(max-width:900px){.register-main .login-brand-panel{position:static}}

/* ===== Login screen polish (overrides the generic input[type] rule + legibility) ===== */
.login-shell .login-input{padding-block:13px;padding-inline-start:48px;padding-inline-end:16px;font-size:14px;min-height:52px}
.login-shell .login-password-input{padding-inline-end:52px}
.login-shell .login-input-icon{inset-inline-start:16px;inset-inline-end:auto;font-size:0;display:grid;place-items:center;width:20px;height:20px}
.login-shell .login-password-toggle{inset-inline-end:10px;inset-inline-start:auto;font-size:0;display:grid;place-items:center}
.login-shell .login-input-icon .lg-ico,.login-shell .login-password-toggle .lg-ico{width:20px;height:20px}
.login-shell .login-form-icon .lg-ico{width:24px;height:24px;color:#0f2e5c}
#toggle-icon{display:grid;place-items:center}#toggle-icon .eye-off{display:none}#toggle-icon[data-on] .eye{display:none}#toggle-icon[data-on] .eye-off{display:block}
.login-shell .login-field label{font-size:13px}
.login-shell .login-field-hint{font-size:11px}
.login-shell .login-options-row{justify-content:space-between;gap:14px;margin-top:16px}
.login-shell .login-remember{font-size:13px}
.login-shell .login-forgot-link{font-size:13px}
.login-shell .login-submit{font-size:15px}
.login-shell .login-help-note{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;margin-top:18px}.login-shell .login-help-note .lg-ico{width:16px;height:16px;flex:none}
.login-shell .login-security-note{font-size:12px;align-items:center}.login-security-ico{display:grid;place-items:center;color:#0e9f6e}.login-security-ico .lg-ico{width:18px;height:18px}
.login-shell .login-register-link{margin:16px 0 0;padding:13px 16px;border:1.5px solid #cfe0f5;border-radius:13px;background:#f3f8ff;gap:10px;font-size:14px;color:#0f2e5c;transition:background .2s,border-color .2s,transform .2s}
.login-shell .login-register-link:hover{background:#e6f1ff;border-color:#9cc8ee;transform:translateY(-1px)}.login-register-link .lg-ico{width:18px;height:18px}
.login-shell .login-footer-note{font-size:11.5px}
.login-language-box select{width:auto;min-width:0;padding:0 4px;min-height:0;border:0;background:transparent;font-size:13px}
.login-ltr .login-register-link .lg-ico{transform:scaleX(-1)}

/* Blazor بيدّي الـ h1 تركيز بعد كل تنقّل (FocusOnNavigate) — نخفي إطار التركيز حوالين العنوان. */
h1:focus,h1:focus-visible,h2:focus,h2:focus-visible,[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none!important}

/* ===== inner public pages (features / pricing / about / contact) ===== */
.lp-page-hero{position:relative;background:linear-gradient(160deg,#08182f 0%,var(--navy) 50%,#123e73 100%);color:#fff;padding:78px 0 84px;overflow:hidden}
.lp-page-hero-in{position:relative;z-index:1;text-align:center;max-width:820px}
.lp-page-hero h1{font-size:clamp(30px,4vw,48px);line-height:1.25;margin:20px 0 14px;font-weight:900}
.lp-page-hero p{font-size:17px;line-height:1.95;color:#c3d3e8;margin:0 auto;max-width:680px}
.lp-cards-3{grid-template-columns:repeat(3,1fr)}
.lp-split{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.lp-check{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;transition:transform .2s,box-shadow .2s}
.lp-check:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,35,66,.09)}
.lp-check i{width:30px;height:30px;border-radius:50%;background:var(--sky);color:#0b63a5;display:grid;place-items:center;flex:none}
.lp-check b{display:block;color:var(--navy2);margin-bottom:4px}.lp-check span{color:var(--mut);font-size:14px;line-height:1.85}
.lp-cta-solo{padding-top:96px;background:#fff}
.lp-stat-card{text-align:center}.lp-stat-card b{display:block;font-size:44px;font-weight:900;color:var(--navy2);line-height:1.1}.lp-stat-card span{color:var(--mut);font-size:14px}
.lp-note{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px}
.lp-note h2{margin:0 0 8px;color:var(--navy2);font-size:20px}.lp-note p{margin:0;color:var(--mut);line-height:1.95}
.lp-action{display:block;text-decoration:none;color:inherit}
.lp-action em{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-style:normal;font-weight:800;color:#0b63a5}
.lp-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;align-items:stretch}
.lp-plan{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 24px;transition:transform .25s,box-shadow .25s}
.lp-plan:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(11,35,66,.12)}
.lp-plan.is-hot{border:2px solid var(--gold);box-shadow:0 22px 50px rgba(201,162,75,.22)}
.lp-plan-badge{position:absolute;top:-13px;inset-inline-start:24px;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#2a1f05;font-size:12px;font-weight:900;padding:5px 14px;border-radius:999px}
.lp-plan h2{margin:0 0 8px;color:var(--navy2);font-size:22px}
.lp-plan-desc{color:var(--mut);font-size:13.5px;line-height:1.85;margin:0 0 16px;min-height:74px}
.lp-plan-price{padding:14px 0;border-block:1px dashed var(--line);margin-bottom:16px}
.lp-plan-price strong{display:block;font-size:32px;color:var(--navy);font-weight:900}.lp-plan-price strong small{font-size:13px;color:var(--mut);font-weight:600}.lp-plan-price span{font-size:12.5px;color:var(--mut)}
.lp-plan ul{list-style:none;margin:0 0 22px;padding:0;flex:1;display:flex;flex-direction:column;gap:10px}
.lp-plan li{display:flex;gap:10px;align-items:center;font-size:14px;color:#1f3552}
.lp-plan li i{width:22px;height:22px;border-radius:50%;background:var(--sky);color:#0b63a5;display:grid;place-items:center;flex:none;font-size:12px}
.lp-btn-navy{background:var(--navy);color:#fff}.lp-btn-navy:hover{background:var(--navy2)}
.lp-fine{text-align:center;color:var(--mut);font-size:13px;margin:26px 0 0}
/* footer */
.public-footer{background:#08182f;color:#c3d3e8;padding:44px clamp(18px,4vw,64px) 22px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;align-items:start}
.public-footer strong{color:#fff;font-size:18px;display:block;margin-bottom:8px}.public-footer span{font-size:13.5px;line-height:1.9;color:#9fb6d1}
.public-footer a{color:#c3d3e8}.public-footer a:hover{color:var(--gold2)}
.public-footer-links{display:flex;flex-direction:column;gap:10px}
.public-footer small{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:16px;color:#7f97b5;text-align:center}
@media(max-width:1000px){.lp-cards-3{grid-template-columns:1fr 1fr}.public-footer{grid-template-columns:1fr}}
@media(max-width:640px){.lp-cards-3,.lp-split{grid-template-columns:1fr}.lp-page-hero{padding:56px 0 60px}.lp-note{flex-direction:column}}

/* topbar: منع تكسير العنوان وقص اسم النظام على الشاشات المتوسطة */
.topbar-context{min-width:150px;flex:1 1 150px}
.topbar-title,.topbar-subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-actions{flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.topbar-user-chip span:last-child{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lang-select{max-width:130px}
@media(max-width:1200px){.topbar-user-chip span:last-child{max-width:110px}}
/* كل الطباعة من شاشات النظام على A4 */
@page{size:A4;margin:10mm}

/* ===== صفحة حضور المستشفى (عامة) ===== */
.att-page{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:18px 14px;background:linear-gradient(160deg,#08182f,#0f2e5c 60%,#155ea3)}
.att-card{width:100%;max-width:520px;background:#fff;border-radius:22px;padding:26px 22px;box-shadow:0 25px 60px rgba(0,0,0,.3);text-align:center;font-family:inherit}
.att-head{margin-bottom:16px}.att-logo{max-width:110px;max-height:90px;object-fit:contain;margin-bottom:10px}
.att-title{margin:0;color:#0f2e5c;font-size:22px;font-weight:900}.att-sub{margin:4px 0 0;color:#64748b;font-size:14px;font-weight:700}
.att-tabs{display:flex;border:2px solid #e2e8f0;border-radius:14px;overflow:hidden;margin:18px 0}
.att-tabs button{flex:1;padding:12px;border:0;background:#f8fafc;color:#64748b;font:inherit;font-weight:800;cursor:pointer;transition:.2s}.att-tabs button.on{background:#0f2e5c;color:#fff}
.att-field{text-align:start;margin-bottom:16px}.att-field label{display:block;color:#0f2e5c;font-weight:800;margin-bottom:6px;font-size:14px}
.att-input{width:100%;padding:14px;border:2px solid #e2e8f0;border-radius:14px;font:inherit;font-size:17px;font-weight:700;text-align:center;background:#f1f5f9;outline:none;box-sizing:border-box}.att-input:focus{border-color:#1d78c8;background:#fff}
.att-btn{display:block;width:100%;padding:15px;margin-top:10px;border:0;border-radius:14px;background:#0f2e5c;color:#fff;font:inherit;font-size:16px;font-weight:900;cursor:pointer;transition:.2s}.att-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px rgba(15,46,92,.25)}.att-btn:disabled{opacity:.6;cursor:wait}
.att-btn-green{background:#16a34a}.att-btn-red{background:#dc2626}.att-btn-orange{background:#ea580c}.att-btn-gray{background:#64748b}
.att-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.att-welcome{background:#f8fafc;border-radius:14px;padding:14px;text-align:start;margin-bottom:6px;line-height:1.9}
.att-alert{margin:12px 0;padding:12px 14px;border-radius:12px;font-weight:700;font-size:14px;text-align:start}.att-ok{background:#dcfce7;color:#166534}.att-bad{background:#fee2e2;color:#991b1b}
.att-muted{color:#64748b}.att-dash{margin:14px 0 6px;color:#0f2e5c}
.att-status{font-weight:800;margin:0 0 8px}.att-status.active{color:#16a34a}.att-status.ended{color:#dc2626}.att-summary{font-size:13px;color:#475569;margin-bottom:8px}
.att-list{max-height:340px;overflow-y:auto;border:1px solid #e2e8f0;border-radius:12px;text-align:start}
.att-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e2e8f0;font-size:14px}.att-row:last-child{border-bottom:0}
.att-row-act{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.att-badge{padding:4px 10px;border-radius:999px;color:#fff;font-size:12px;font-weight:800}.att-badge.green{background:#16a34a}.att-badge.gray{background:#94a3b8}
.att-mini{border:0;border-radius:8px;padding:6px 10px;color:#fff;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.att-mini.green{background:#16a34a}.att-mini.red{background:#dc2626}

.att-card.att-wide{max-width:980px}
.att-dash-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}.att-dash-head .att-dash,.att-dash-head .att-status{margin:0}
.att-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:10px 0}
.att-stat{border:2px solid #e2e8f0;background:#f8fafc;border-radius:12px;padding:8px 4px;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;color:#334155}
.att-stat b{font-size:20px}.att-stat span{font-size:11px;font-weight:800}.att-stat.on{border-color:#0f2e5c;background:#eef5fb}
.att-stat.ok b{color:#15803d}.att-stat.warn b{color:#c2410c}.att-stat.bad b{color:#b91c1c}
.att-warn{background:#ffedd5;color:#9a3412}
.att-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}.att-search{flex:1;min-width:180px;padding:10px;font-size:14px;text-align:start}
.att-who{display:flex;flex-direction:column;text-align:start;min-width:0}.att-who small{color:#64748b}
.att-badge.red{background:#dc2626}.att-badge.orange{background:#ea580c}.att-mini.gray{background:#64748b}.att-mini.orange{background:#ea580c}
.att-mini:disabled{opacity:.5;cursor:not-allowed}
.att-wide .att-list{max-height:none}
@media(max-width:640px){
  .att-card{padding:20px 14px;border-radius:18px}.att-stats{gap:4px}.att-stat{padding:6px 2px}.att-stat b{font-size:17px}.att-stat span{font-size:9.5px}
  .att-row{flex-direction:column;align-items:stretch}.att-row-act{justify-content:flex-start}
  .att-mini{padding:9px 12px;font-size:13px}
}
@media(min-width:900px){.att-wide .att-row{padding:12px 16px}.att-wide .att-list{border-radius:14px}}
.att-logos{display:flex;justify-content:center;align-items:center;gap:18px;margin-bottom:10px}.att-logos .att-logo{margin:0;max-width:96px;max-height:80px}
.att-welcome-sup{background:linear-gradient(135deg,#0f766e,#0e7490);color:#fff;border-radius:14px;padding:16px 18px;margin-bottom:14px}
.att-hello{font-size:1.25rem;font-weight:800}.att-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.att-meta span{background:rgba(255,255,255,.18);border-radius:999px;padding:3px 12px;font-size:.82rem}
.att-far{color:#b91c1c;font-weight:700}
.att-check{display:inline-flex;align-items:center;gap:6px;font-weight:700;background:#ecfdf5;border:1px solid #6ee7b7;border-radius:999px;padding:4px 12px;cursor:pointer}.att-check input{width:20px;height:20px;accent-color:#059669}

/* ============================================================
   توحيد شكل كل حقول الإدخال في المشروع (input / select / textarea)
   :where = specificity صفر، فأي كلاس أخصّ (.ui-input, .form-control, ...) يفضل يغلب عليه.
   ============================================================ */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=color]):not([type=submit]):not([type=button]):not([type=image]), select, textarea) {
    font-family: inherit; font-size: 13px; line-height: 1.4;
    padding: 9px 12px; min-height: 42px; max-width: 100%; box-sizing: border-box;
    border: 1px solid #cbd5e1; border-radius: 10px; background-color: #fff; color: #0f172a;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
:where(textarea) { min-height: 92px; line-height: 1.6; resize: vertical; }
:where(select) { padding-inline-end: 30px; cursor: pointer; }
:where(input, select, textarea)::placeholder { color: #94a3b8; }
:where(input:not([type=checkbox]):not([type=radio]), select, textarea):hover:not(:disabled) { border-color: #94a3b8; }
:where(input:not([type=checkbox]):not([type=radio]), select, textarea):focus { outline: none; border-color: var(--primary-color, #0f2e5c); box-shadow: 0 0 0 3px rgba(15, 46, 92, .12); }
:where(input, select, textarea):disabled, :where(input[readonly]) { background-color: #f1f5f9; color: #64748b; cursor: not-allowed; }
:where(input[type=checkbox], input[type=radio]) { width: 17px; height: 17px; accent-color: var(--primary-color, #0f2e5c); cursor: pointer; vertical-align: middle; }
:where(input[type=number]) { text-align: center; }
.form-row > input:where([type=text], [type=password], [type=date], [type=time], [type=email], [type=search], [type=tel], :not([type])), .form-row > select { min-width: 160px; }
td > input:where(:not([type=checkbox]):not([type=radio])), td > select { min-width: 0; }

/* ===== ترتيب الهيدر العلوي: صف واحد منظم بدل ما الأزرار تنزل سطرين ===== */
.app-topbar { height: auto; min-height: 64px; padding: 8px 20px; gap: 14px; flex-wrap: nowrap; }
.topbar-context { flex: 1 1 auto; min-width: 0; }
.topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { flex: 0 1 auto; flex-wrap: nowrap; gap: 8px; min-width: 0; }
.topbar-actions > * { flex: 0 0 auto; }
.topbar-actions .lang-select, .topbar-actions .btn-logout, .topbar-actions .topbar-plan-chip { height: 38px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
.topbar-actions .btn-logout { padding-inline: 14px; white-space: nowrap; }
.topbar-actions .topbar-user-chip { height: 38px; padding-block: 0; max-width: 200px; }
.topbar-actions .topbar-user-chip span:last-child { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
@media (max-width: 1400px) { .topbar-actions .topbar-user-chip span:last-child { display: none; } .topbar-actions .sup-label { display: none; } }
@media (max-width: 980px) { .topbar-actions .topbar-plan-chip { display: none; } .topbar-actions .lang-select { max-width: 92px; } }