/* ===== هوية "ركن" — نظام إدارة شركات المقاولات والمشاريع ===== */
:root {
    --brand-primary: #2f6fed;
    --brand-primary-dark: #1d4fc4;
    --brand-primary-light: #eaf1ff;
    --brand-accent-green: #16a34a;
    --brand-accent-green-light: #e9f9ee;
    --brand-accent-blue: #2f6fed;
    --brand-accent-blue-light: #eaf1ff;
    --brand-accent-orange: #f59e0b;
    --brand-accent-orange-light: #fef3e2;
    --brand-accent-purple: #8b5cf6;
    --brand-accent-purple-light: #f1ebfe;
    --brand-danger: #e23e3e;
    --brand-danger-light: #fdeceb;
    --brand-bg: #f5f6fa;
    --brand-surface: #ffffff;
    --brand-text: #1e2530;
    --brand-text-muted: #8a94a6;
    --brand-border: #e9ebf1;
    --sidebar-width: 268px;
    --bottom-nav-height: 64px;
    --font-main: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    --bs-body-font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-card: 0 2px 10px rgba(30, 41, 59, .05);
}

* { box-sizing: border-box; }

html, body {
    background: var(--brand-bg);
    color: var(--brand-text);
    font-family: var(--font-main);
    overflow-x: hidden;
    min-height: 100%;
}

input, button, select, textarea, optgroup {
    font-family: var(--font-main);
}

a { color: var(--brand-primary); text-decoration: none; }

/* ===== شعار ركن ===== */
.rukn-logo { display: block; object-fit: contain; }

/* ===== Layout ===== */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: var(--sidebar-width);
    background: var(--brand-surface);
    border-left: 1px solid var(--brand-border);
    color: var(--brand-text);
    flex-shrink: 0;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    overflow-y: auto;
    z-index: 1030;
    transition: transform .25s ease;
    padding: 1rem .9rem;
}

.app-sidebar .brand {
    padding: .25rem .25rem 1.1rem;
    border-bottom: 1px solid var(--brand-border);
    margin-bottom: .75rem;
}

.app-sidebar .nav-section-title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--brand-text-muted);
    padding: .9rem .6rem .3rem;
}

.app-sidebar .nav-link {
    color: var(--brand-text);
    padding: .65rem .8rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    border-radius: var(--radius-sm);
    font-size: .92rem;
    font-weight: 600;
    margin-bottom: .2rem;
}

.app-sidebar .nav-link .ic { font-size: 1.05rem; opacity: .85; }

.app-sidebar .nav-link:hover { background: var(--brand-primary-light); color: var(--brand-primary); }

.app-sidebar .nav-link.active {
    background: var(--brand-primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(47, 111, 237, .3);
}
.app-sidebar .nav-link.active .ic { opacity: 1; }

/* ===== أقسام القائمة الجانبية القابلة للطي ===== */
.nav-section { margin-bottom: .15rem; }

.nav-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .8rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: .92rem;
    font-weight: 600;
    color: var(--brand-text);
    user-select: none;
}
.nav-section-header:hover { background: var(--brand-primary-light); color: var(--brand-primary); }
.nav-section-header .arrow { font-size: .6rem; transition: transform .2s ease; color: var(--brand-text-muted); }
.nav-section.open .nav-section-header .arrow { transform: rotate(180deg); }
.nav-section.open .nav-section-header { color: var(--brand-primary); }

.nav-section-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    padding-right: 1.2rem;
}
.nav-section.open .nav-section-items { max-height: 500px; }

.nav-section-items .nav-link {
    font-size: .85rem;
    padding: .5rem .8rem;
    margin-bottom: .1rem;
    font-weight: 500;
}
.nav-section-items .nav-link::before {
    content: "•";
    margin-left: .4rem;
    color: var(--brand-text-muted);
}

.app-main {
    flex: 1;
    margin-right: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    background: var(--brand-surface);
    border-bottom: 1px solid var(--brand-border);
    padding: .75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.topbar-search {
    flex: 1;
    max-width: 420px;
    position: relative;
}
.topbar-search input {
    width: 100%;
    background: var(--brand-bg);
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    padding: .5rem 1rem .5rem 2.2rem;
    font-size: .85rem;
}
.topbar-search .icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--brand-text-muted); }

.topbar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.topbar-user .avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.topbar-user .meta { line-height: 1.15; }
.topbar-user .meta .name { font-weight: 700; font-size: .85rem; }
.topbar-user .meta .role { font-size: .72rem; color: var(--brand-text-muted); }

.notif-bell { position: relative; font-size: 1.15rem; color: var(--brand-text-muted); }
.notif-bell .dot {
    position: absolute; top: -4px; left: -4px;
    background: var(--brand-danger); color: #fff;
    font-size: .6rem; border-radius: 999px;
    padding: 0 4px; min-width: 15px; text-align: center;
}

.app-content {
    padding: 1.5rem;
    flex: 1;
    width: 100%;
    max-width: 1400px;
}

.sidebar-toggle-btn { display: none; }
.sidebar-backdrop { display: none; }

/* ===== Demo banner (كان للنظام الأصلي فقط، غير مستخدم هنا) ===== */
.demo-banner {
    background: var(--brand-accent-orange);
    color: #fff;
    padding: .5rem 1rem;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ===== Stat cards (مطابقة لبطاقات لوحة التحكم في الهوية) ===== */
.stat-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 1.1rem;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.stat-card .top-row { display: flex; align-items: center; justify-content: space-between; }
.stat-card .icon-badge {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.stat-card .label { font-size: .8rem; color: var(--brand-text-muted); font-weight: 600; }
.stat-card .value { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.stat-card .trend { font-size: .72rem; font-weight: 700; }
.stat-card .trend.up { color: var(--brand-accent-green); }
.stat-card .trend.down { color: var(--brand-danger); }

.stat-card.success .icon-badge { background: var(--brand-accent-green-light); color: var(--brand-accent-green); }
.stat-card.info .icon-badge { background: var(--brand-accent-blue-light); color: var(--brand-accent-blue); }
.stat-card.warning .icon-badge { background: var(--brand-accent-orange-light); color: var(--brand-accent-orange); }
.stat-card.purple .icon-badge { background: var(--brand-accent-purple-light); color: var(--brand-accent-purple); }
.stat-card.danger { border-color: var(--brand-danger); }
.stat-card.danger .icon-badge { background: var(--brand-danger-light); color: var(--brand-danger); }

/* توافق قديم مع أسماء الأصناف المستخدمة سابقاً في بعض الصفحات */
.stat-card.success { } /* أخضر */
.stat-card.accent .icon-badge { background: var(--brand-accent-orange-light); color: var(--brand-accent-orange); }

.card-panel {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-card);
}

.btn-brand {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    font-weight: 700;
    border-radius: var(--radius-sm);
}
.btn-brand:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); color: #fff; }

.btn-brand-outline {
    border: 1px solid var(--brand-primary);
    color: var(--brand-primary);
    background: transparent;
    font-weight: 700;
    border-radius: var(--radius-sm);
}
.btn-brand-outline:hover { background: var(--brand-primary-light); color: var(--brand-primary); }

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== شارات الحالة (مطابقة لألوان الهوية) ===== */
.badge-status-planned { background: #eef0f4; color: #5b6472; }
.badge-status-inprogress { background: var(--brand-accent-blue-light); color: var(--brand-accent-blue); }
.badge-status-onhold { background: var(--brand-accent-orange-light); color: var(--brand-accent-orange); }
.badge-status-finished { background: var(--brand-accent-green-light); color: var(--brand-accent-green); }

.progress-track {
    height: 7px;
    background: var(--brand-border);
    border-radius: 999px;
    overflow: hidden;
}
.progress-track .fill { height: 100%; background: var(--brand-primary); border-radius: 999px; }

/* ===== Bottom nav (mobile) ===== */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; right: 0; left: 0;
    height: var(--bottom-nav-height);
    background: var(--brand-surface);
    border-top: 1px solid var(--brand-border);
    z-index: 1040;
}
.bottom-nav .nav-items {
    display: flex;
    height: 100%;
}
.bottom-nav .nav-items a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    font-size: .68rem;
    color: var(--brand-text-muted);
    font-weight: 600;
}
.bottom-nav .nav-items a.active { color: var(--brand-primary); }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    .app-sidebar {
        transform: translateX(100%);
        box-shadow: -10px 0 30px rgba(0,0,0,.15);
    }
    .app-sidebar.open { transform: translateX(0); }
    .app-main { margin-right: 0; }
    .sidebar-toggle-btn { display: inline-flex; }
    .topbar-search { display: none; }
    .sidebar-backdrop.show {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 1025;
    }
    .app-content { padding: 1rem .85rem; }
    .has-bottomnav .app-content { padding-bottom: calc(var(--bottom-nav-height) + 1rem); }
    .has-bottomnav .bottom-nav { display: block; }
}

@media (max-width: 575.98px) {
    .stat-card .value { font-size: 1.1rem; }
    .app-content { padding: .75rem .6rem; }
    .has-bottomnav .app-content { padding-bottom: calc(var(--bottom-nav-height) + 1rem); }
    .topbar-user .meta { display: none; }

    /* ===== الجداول تتحول لبطاقات على الهاتف (أضف .table-keep-scroll على .table-wrap للإبقاء على التمرير) ===== */
    .table-wrap:not(.table-keep-scroll) { overflow-x: visible; }
    .table-wrap:not(.table-keep-scroll) table { min-width: 0 !important; width: 100%; }
    .table-wrap:not(.table-keep-scroll) thead { display: none; }
    .table-wrap:not(.table-keep-scroll) table,
    .table-wrap:not(.table-keep-scroll) tbody { display: block; width: 100%; }
    .table-wrap:not(.table-keep-scroll) tbody tr {
        display: block;
        margin: 0 .75rem .7rem;
        border: 1px solid var(--brand-border);
        border-radius: 12px;
        overflow: hidden;
    }
    .table-wrap:not(.table-keep-scroll) tbody td,
    .table-wrap:not(.table-keep-scroll) tbody tr > th {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        width: 100%;
        padding: .55rem .85rem;
        border-bottom: 1px solid var(--brand-border);
    }
    .table-wrap:not(.table-keep-scroll) tbody tr > :last-child { border-bottom: 0; }
    .table-wrap:not(.table-keep-scroll) tbody tr > [data-label]:not([data-label=""])::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: .76rem;
        color: var(--brand-text-muted);
        flex-shrink: 0;
    }
    .table-wrap:not(.table-keep-scroll) tbody tr > :not([data-label]),
    .table-wrap:not(.table-keep-scroll) tbody tr > [data-label=""] { justify-content: flex-end; }
    .table-wrap:not(.table-keep-scroll) tbody tr > [colspan] { display: block; text-align: center; }
    .table-wrap:not(.table-keep-scroll) tbody td .progress-track { flex: 1; }
    .table-wrap:not(.table-keep-scroll) tbody tr > * > * { min-width: 0; }
}

/* ===== منطقة الخطر — زر الضغط المطول لحذف الشركة ===== */
.delete-zone { border: 1.5px solid rgba(220, 53, 69, .3); background: linear-gradient(180deg, var(--brand-surface) 0%, #fff6f7 100%); }
.btn-hold-delete {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1.5px dashed #dc3545;
    border-radius: 12px;
    background: var(--brand-surface);
    color: #dc3545;
    padding: 1rem;
    font-weight: 800;
    font-size: .95rem;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: color .15s, border-color .15s, transform .1s;
}
.btn-hold-delete:active { transform: scale(.99); }
.btn-hold-delete .hold-fill {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 0;
    background: linear-gradient(270deg, #e4606d, #b02a37);
    transition: width .25s ease;
}
.btn-hold-delete.holding { color: #fff; border-style: solid; }
.btn-hold-delete.holding .hold-fill { width: 100%; transition-duration: 1.8s; }
.btn-hold-delete .hold-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; }

/* ===== الحاسبات الإنشائية ===== */
.calc-card { transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.calc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(30, 41, 59, .12); }
.calc-icon {
    width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
    background: var(--brand-primary-light); color: var(--brand-primary);
}
.calc-icon-sm { width: 38px; height: 38px; font-size: 1.1rem; border-radius: 10px; }
.calc-empty-ic {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto;
    display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
    background: var(--brand-bg); color: var(--brand-text-muted); opacity: .7;
}
.calc-result-primary { background: var(--brand-primary-light); color: var(--brand-primary-dark); border: 1px solid rgba(47, 111, 237, .25); }
.calc-result-primary .fs-3 { color: var(--brand-primary); font-variant-numeric: tabular-nums; }
input.calc-inp { text-align: left; font-variant-numeric: tabular-nums; }
#resultsList { animation: calcFadeIn .3s ease; }
@keyframes calcFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ترويسة فهرس الحاسبات */
.calc-hub-hero {
    border-radius: var(--radius); padding: 1.4rem 1.5rem; color: #fff;
    background: linear-gradient(135deg, #16307e 0%, #1d4fc4 55%, #2f6fed 100%);
    box-shadow: 0 10px 26px rgba(29, 79, 196, .28);
}
.calc-hub-icon {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); color: #fff;
}
.calc-hub-count {
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px; padding: .3rem .9rem; font-size: .78rem; font-weight: 700; white-space: nowrap;
}

/* درجات لونية لكل حاسبة — تلوّن الأيقونة والزر والنتيجة الرئيسية */
.calc-tone-blue   .calc-icon { background: var(--brand-accent-blue-light);   color: var(--brand-accent-blue); }
.calc-tone-green  .calc-icon { background: var(--brand-accent-green-light);  color: var(--brand-accent-green); }
.calc-tone-orange .calc-icon { background: var(--brand-accent-orange-light); color: var(--brand-accent-orange); }
.calc-tone-purple .calc-icon { background: var(--brand-accent-purple-light); color: var(--brand-accent-purple); }
.calc-tone-red    .calc-icon { background: var(--brand-danger-light);        color: var(--brand-danger); }
.calc-icon.calc-tone-blue   { background: var(--brand-accent-blue-light);   color: var(--brand-accent-blue); }
.calc-icon.calc-tone-green  { background: var(--brand-accent-green-light);  color: var(--brand-accent-green); }
.calc-icon.calc-tone-orange { background: var(--brand-accent-orange-light); color: var(--brand-accent-orange); }
.calc-icon.calc-tone-purple { background: var(--brand-accent-purple-light); color: var(--brand-accent-purple); }
.calc-icon.calc-tone-red    { background: var(--brand-danger-light);        color: var(--brand-danger); }

.calc-tone-blue   .calc-go { border: 1px solid var(--brand-accent-blue);   color: var(--brand-accent-blue); }
.calc-tone-green  .calc-go { border: 1px solid var(--brand-accent-green);  color: var(--brand-accent-green); }
.calc-tone-orange .calc-go { border: 1px solid var(--brand-accent-orange); color: var(--brand-accent-orange); }
.calc-tone-purple .calc-go { border: 1px solid var(--brand-accent-purple); color: var(--brand-accent-purple); }
.calc-tone-red    .calc-go { border: 1px solid var(--brand-danger);        color: var(--brand-danger); }
.calc-tone-blue   .calc-go:hover { background: var(--brand-accent-blue-light);   color: var(--brand-accent-blue); }
.calc-tone-green  .calc-go:hover { background: var(--brand-accent-green-light);  color: var(--brand-accent-green); }
.calc-tone-orange .calc-go:hover { background: var(--brand-accent-orange-light); color: var(--brand-accent-orange); }
.calc-tone-purple .calc-go:hover { background: var(--brand-accent-purple-light); color: var(--brand-accent-purple); }
.calc-tone-red    .calc-go:hover { background: var(--brand-danger-light);        color: var(--brand-danger); }

.calc-tone-blue   .calc-result-primary { background: var(--brand-accent-blue-light);   color: var(--brand-accent-blue);   border-color: rgba(47,111,237,.25); }
.calc-tone-green  .calc-result-primary { background: var(--brand-accent-green-light);  color: var(--brand-accent-green);  border-color: rgba(22,163,74,.25); }
.calc-tone-orange .calc-result-primary { background: var(--brand-accent-orange-light); color: #b45309;                    border-color: rgba(245,158,11,.3); }
.calc-tone-purple .calc-result-primary { background: var(--brand-accent-purple-light); color: var(--brand-accent-purple); border-color: rgba(139,92,246,.25); }
.calc-tone-red    .calc-result-primary { background: var(--brand-danger-light);        color: var(--brand-danger);        border-color: rgba(226,62,62,.25); }
.calc-tone-blue   .calc-result-primary .fs-3 { color: var(--brand-accent-blue); }
.calc-tone-green  .calc-result-primary .fs-3 { color: var(--brand-accent-green); }
.calc-tone-orange .calc-result-primary .fs-3 { color: var(--brand-accent-orange); }
.calc-tone-purple .calc-result-primary .fs-3 { color: var(--brand-accent-purple); }
.calc-tone-red    .calc-result-primary .fs-3 { color: var(--brand-danger); }

/* زر «احسب» بلون الحاسبة */
.calc-submit { font-weight: 700; color: #fff; border-radius: var(--radius-sm); }
.calc-tone-blue   .calc-submit { background: var(--brand-accent-blue); }
.calc-tone-green  .calc-submit { background: var(--brand-accent-green); }
.calc-tone-orange .calc-submit { background: var(--brand-accent-orange); }
.calc-tone-purple .calc-submit { background: var(--brand-accent-purple); }
.calc-tone-red    .calc-submit { background: var(--brand-danger); }
.calc-submit:hover { color: #fff; filter: brightness(.92); }

/* الحاسبات على القالب العام — حاوية وسطية؛ width:100% لازم لأن auto-margin على ابن flex يكبّسه لمحتواه */
.public-body .pub-calc-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 2rem 1rem 3rem; }

/* ===== Donut / Bar charts بدون مكتبات خارجية (CSS فقط) ===== */
.donut-chart {
    width: 152px; height: 152px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    box-shadow: 0 3px 10px rgba(30, 41, 59, .08);
}
.donut-chart::before {
    content: "";
    position: absolute; inset: 24%;
    background: var(--brand-surface);
    border-radius: 50%;
    box-shadow: inset 0 1px 4px rgba(30, 41, 59, .07);
}
.donut-chart .center-label { position: absolute; z-index: 1; text-align: center; }
.donut-chart .center-label .pct {
    font-size: 1.8rem; font-weight: 800; line-height: 1.1;
    color: var(--brand-primary);
    font-variant-numeric: tabular-nums;
}
.donut-chart .center-label .txt { font-size: .68rem; font-weight: 600; color: var(--brand-text-muted); }

.simple-bar-chart { display: flex; align-items: flex-end; gap: 1rem; height: 160px; padding-top: 1rem; }
.simple-bar-chart .bar-col { display: flex; flex-direction: column; align-items: center; flex: 1; gap: .4rem; }
.simple-bar-chart .bar-track { width: 100%; max-width: 48px; background: var(--brand-bg); border-radius: 6px 6px 0 0; display: flex; align-items: flex-end; flex: 1; }
.simple-bar-chart .bar-fill { width: 100%; border-radius: 6px 6px 0 0; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: .35rem; }

@media print {
    .app-sidebar, .app-topbar, .bottom-nav, .demo-banner, .no-print { display: none !important; }
    .app-main { margin-right: 0 !important; }
}

/* ===== أيقونات Tabler ===== */
.bottom-nav .nav-items a .ti { font-size: 1.35rem; }
.nav-section-items .nav-link .ti { font-size: .9rem; margin-inline-end: .35rem; opacity: .75; vertical-align: -0.1em; }
.nav-section-header .arrow .ti { font-size: .8rem; }
.stat-card .icon-badge .ti { font-size: 1.35rem; }
.topbar-search .icon .ti, .notif-bell .ti { font-size: 1.1rem; }
.btn .ti, h4 .ti, h5 .ti, h6 .ti { vertical-align: -0.125em; }

.bg-brand { background-color: var(--brand-primary) !important; }
.text-brand { color: var(--brand-primary) !important; }

/* ===== صفحة اشتراكي ===== */
.sub-hero { display: flex; align-items: center; gap: .9rem; }
.sub-hero .plan-icon {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    background: var(--brand-primary-light); color: var(--brand-primary);
}
.sub-hero .plan-name { font-size: 1.25rem; font-weight: 800; }
.sub-hero .plan-meta { font-size: .8rem; color: var(--brand-text-muted); }

.sub-days-remaining { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sub-days-label { font-size: .75rem; color: var(--brand-text-muted); }

.wallet-balance { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand-primary); line-height: 1.1; }
.wallet-balance small { font-size: .9rem; font-weight: 600; color: var(--brand-text-muted); }

.wallet-txn { display: flex; justify-content: space-between; align-items: center; padding: .4rem 0; border-bottom: 1px dashed var(--brand-border); font-size: .8rem; }
.wallet-txn:last-child { border-bottom: none; }
.wallet-txn .desc { color: var(--brand-text); }
.wallet-txn .date { color: var(--brand-text-muted); font-size: .72rem; }
.wallet-txn .amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.wallet-txn .amt.pos { color: var(--brand-accent-green); }
.wallet-txn .amt.neg { color: var(--brand-danger); }

/* بطاقات الباقات */
.plan-card {
    position: relative; height: 100%;
    border: 1.5px solid var(--brand-border); border-radius: 14px;
    padding: 1.1rem 1rem; background: var(--brand-surface);
    display: flex; flex-direction: column; gap: .55rem;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.plan-card:hover { border-color: var(--brand-primary); box-shadow: 0 6px 18px rgba(47,111,237,.08); transform: translateY(-2px); }
.plan-card.current { border-color: var(--brand-primary); background: linear-gradient(180deg, var(--brand-primary-light) 0%, var(--brand-surface) 55%); }
.plan-card .plan-title { font-weight: 800; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.plan-card .plan-price { font-size: 1.55rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand-text); line-height: 1.1; }
.plan-card .plan-price .dur { font-size: .78rem; font-weight: 600; color: var(--brand-text-muted); }
.plan-card .plan-specs { font-size: .78rem; color: var(--brand-text-muted); display: flex; flex-direction: column; gap: .2rem; }
.plan-card .plan-specs .ti { color: var(--brand-accent-green); }
.plan-card .plan-actions { margin-top: auto; display: flex; flex-direction: column; gap: .4rem; padding-top: .4rem; }
.plan-card .current-badge {
    position: absolute; top: -10px; inset-inline-start: 12px;
    background: var(--brand-primary); color: #fff; font-size: .68rem; font-weight: 700;
    padding: .15rem .6rem; border-radius: 999px;
}

/* تبويبات سجلات الاشتراك */
.sub-tabs .nav-link { color: var(--brand-text-muted); font-weight: 700; font-size: .85rem; border: none; border-bottom: 2px solid transparent; }
.sub-tabs .nav-link.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); background: none; }

@media (max-width: 767.98px) {
    .wallet-balance { font-size: 1.5rem; }
    .sub-days-remaining { font-size: 1.35rem; }
}

/* ===== صفحة الهبوط العامة ===== */
.public-body { background: var(--brand-bg); min-height: 100vh; display: flex; flex-direction: column; }
.public-nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--brand-border); padding: .6rem 0;
}
.public-footer { margin-top: auto; border-top: 1px solid var(--brand-border); background: var(--brand-surface); padding: 1rem 0; }
.pub-nav-link {
    color: var(--brand-text); font-weight: 600; font-size: .85rem;
    padding: .4rem .55rem; border-radius: 8px; white-space: nowrap;
}
.pub-nav-link:hover { color: var(--brand-primary); background: var(--brand-primary-light); }
.pub-nav-link .ti { color: var(--brand-primary); vertical-align: -0.1em; }

/* ===== زر الحاسبات العائم — حاسبة مصغرة بـCSS خالص على جنب الشاشة ===== */
.calc-fab {
    position: fixed; bottom: 1.4rem; left: .9rem; z-index: 1050; /* الافتراضي أسفل يسار */
    display: flex; align-items: center; gap: .55rem; text-decoration: none;
    cursor: grab; touch-action: none; /* سحب حر للمستخدم */
    user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.calc-fab.dragging { cursor: grabbing; }
.calc-fab.dragging .calc-fab-body { animation: none; }
.calc-fab-body {
    position: relative; width: 54px; height: 68px; border-radius: 11px;
    background: linear-gradient(160deg, #2a4a9e 0%, #16307e 60%, #102553 100%);
    padding: 6px 7px 7px; display: flex; flex-direction: column; gap: 5px;
    box-shadow: 0 12px 26px rgba(16,42,120,.42), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.25);
    animation: calcFabFloat 3.2s ease-in-out infinite;
    transition: transform .18s ease;
}
.calc-fab-body::before { /* حلقة نبض حول الحاسبة */
    content: ""; position: absolute; inset: -6px; border-radius: 16px;
    border: 2px solid rgba(47,111,237,.45); animation: calcFabPulse 2.4s ease-out infinite;
    pointer-events: none;
}
.calc-fab:hover .calc-fab-body { transform: scale(1.1) rotate(-4deg); }
.calc-fab-screen {
    height: 15px; border-radius: 3px; overflow: hidden;
    background: linear-gradient(180deg, #d9f7c4, #b8ec97);
    box-shadow: inset 0 1px 3px rgba(30,70,20,.35);
    display: flex; align-items: center; justify-content: flex-end; padding: 0 4px;
}
.calc-fab-num { font: 700 8px/1 "Courier New", monospace; color: #2c5e1a; direction: ltr; }
.calc-fab-keys { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.calc-fab-keys i { border-radius: 2.5px; background: rgba(255,255,255,.2); box-shadow: inset 0 -1px 0 rgba(0,0,0,.2); }
.calc-fab-keys i.k-op { background: rgba(255,255,255,.38); }
.calc-fab-keys i.k-eq { background: var(--brand-accent-orange); box-shadow: inset 0 -1px 0 rgba(0,0,0,.3); }
.calc-fab:active .calc-fab-keys i.k-eq { filter: brightness(1.3); }
.calc-fab-label {
    position: absolute; top: 50%; inset-inline-end: calc(100% + .55rem);
    background: var(--brand-surface); color: var(--brand-text); border: 1px solid var(--brand-border);
    border-radius: 999px; padding: .42rem .9rem; font-size: .82rem; font-weight: 700; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(30,37,48,.16);
    opacity: 0; transform: translate(8px, -50%); transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.calc-fab-label .ti { color: var(--brand-accent-orange); }
.calc-fab:hover .calc-fab-label, .calc-fab:focus-visible .calc-fab-label { opacity: 1; transform: translate(0, -50%); }
/* الزر قرب الحافة اليسرى — الليبل ينقلب للجهة الداخلية حتى لا يخرج عن الشاشة */
.calc-fab.label-flip .calc-fab-label { inset-inline-end: auto; inset-inline-start: calc(100% + .55rem); transform: translate(-8px, -50%); }
.calc-fab.label-flip:hover .calc-fab-label, .calc-fab.label-flip:focus-visible .calc-fab-label { transform: translate(0, -50%); }
@keyframes calcFabFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes calcFabPulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .calc-fab-body, .calc-fab-body::before { animation: none; }
}
@media (max-width: 575.98px) {
    .calc-fab { left: .6rem; bottom: 1rem; }
    .calc-fab-body { width: 46px; height: 58px; padding: 5px 6px 6px; }
    .calc-fab-label { font-size: .75rem; padding: .35rem .7rem; }
}

/* أبعاد صفحة الهبوط على الجوال — قراءة مريحة */
@media (max-width: 575.98px) {
    /* مساحة أمان جانبية — النص لا يلتصق بحواف الشاشة */
    .landing-hero .container,
    .landing-stats .container,
    .landing-cta .container,
    .landing-section.container,
    .landing-section .container,
    .public-footer .container { padding-inline: 1.15rem; }
    .landing-hero { padding: 2.2rem 0 1.9rem; }
    .landing-title { font-size: 1.6rem; }
    .landing-sub { font-size: .9rem; line-height: 1.7; }
    .landing-h2 { font-size: 1.25rem; }
    .landing-section { padding: 1.9rem 0; }
    .landing-trust { gap: .7rem; font-size: .75rem; }
    .split-img { margin: 1rem auto 0; max-width: 290px; }
    .split-img img { max-height: 120px; object-fit: cover; }
    .split-chip { font-size: .7rem; padding: .3rem .7rem; bottom: 10px; }
    .check-list { gap: .55rem; margin-top: .8rem; }
    .check-list li { gap: .5rem; }
    .check-list li .ti { font-size: 1.15rem; }
    .check-list div { flex: 1; min-width: 0; font-size: .92rem; line-height: 1.6; }
    .stat-num { font-size: 1.6rem; }
    .landing-cta .btn-lg { font-size: .95rem; }
    .pub-nav-link { font-size: .78rem; padding: .3rem .35rem; }
    .public-nav .btn-sm { padding-left: .55rem; padding-right: .55rem; }
}

/* ظهور تدريجي عند التمرير */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* الترويسة بخلفية صورة */
.landing-hero { position: relative; overflow: hidden; color: #fff; padding: 4.5rem 0 4rem; }
.hero-bg {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    transform: scale(1.06); animation: heroZoom 18s ease-in-out infinite alternate;
}
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(16,42,120,.96) 0%, rgba(29,79,196,.88) 50%, rgba(47,111,237,.78) 100%);
}
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1.14); } }

/* أشكال عائمة زخرفية */
.float-shape { position: absolute; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.float-shape.s1 { width: 220px; height: 220px; top: -70px; inset-inline-start: -60px; animation: floaty 9s ease-in-out infinite; }
.float-shape.s2 { width: 130px; height: 130px; bottom: -40px; inset-inline-start: 38%; animation: floaty 7s ease-in-out 1.2s infinite; }
.float-shape.s3 { width: 90px; height: 90px; top: 22%; inset-inline-end: 6%; animation: floaty 11s ease-in-out .6s infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-22px) rotate(8deg); } }

.landing-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px; padding: .3rem .9rem; font-size: .8rem; font-weight: 600; margin-bottom: 1.2rem;
}
.landing-title { font-size: 2.4rem; font-weight: 800; line-height: 1.35; margin-bottom: 1rem; text-shadow: 0 2px 14px rgba(0,0,0,.25); }
.landing-sub { font-size: 1.02rem; color: rgba(255,255,255,.85); line-height: 1.9; margin-bottom: 1.6rem; }
.landing-trust { display: flex; justify-content: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.6rem; font-size: .82rem; color: rgba(255,255,255,.78); }
.landing-credit { margin-top: 1rem; font-size: .8rem; color: rgba(255,255,255,.55); text-align: center; }
@media (min-width: 992px) { .landing-credit { text-align: start; } }
.landing-credit strong { color: rgba(255,255,255,.85); }
.landing-trust .ti { color: #7ef0a8; }

/* مجسم الداشبورد داخل إطار متصفح */
.mock-browser {
    border-radius: 14px; overflow: hidden; background: #fff;
    box-shadow: 0 24px 60px rgba(6,20,60,.45); transform: perspective(1200px) rotateY(-7deg) rotateX(2deg);
    transition: transform .4s ease;
}
.mock-browser:hover { transform: perspective(1200px) rotateY(-2deg) rotateX(0); }
.mock-chrome { display: flex; align-items: center; gap: .35rem; background: #eef1f6; padding: .55rem .8rem; }
.mock-chrome .dot { width: 9px; height: 9px; border-radius: 50%; }
.mock-chrome .dot.r { background: #ff5f57; } .mock-chrome .dot.y { background: #febc2e; } .mock-chrome .dot.g { background: #28c840; }
.mock-url {
    margin-inline-start: .6rem; flex: 1; background: #fff; border-radius: 6px;
    font-size: .68rem; color: #8a94a6; padding: .18rem .6rem; direction: ltr; text-align: left;
}
.mock-body { padding: .9rem; background: #f5f6fa; }
.mock-stats { display: flex; gap: .5rem; margin-bottom: .7rem; }
.mock-stat {
    flex: 1; display: flex; align-items: center; gap: .5rem; background: #fff;
    border: 1px solid #e9ebf1; border-radius: 10px; padding: .55rem .6rem;
}
.mock-stat .ms-icon { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0; }
.mock-stat b { display: block; font-size: .82rem; font-variant-numeric: tabular-nums; color: #1e2530; line-height: 1.2; }
.mock-stat small { font-size: .62rem; color: #8a94a6; }
.mock-charts { display: flex; gap: .8rem; align-items: center; background: #fff; border: 1px solid #e9ebf1; border-radius: 10px; padding: .9rem; }
.mock-donut {
    width: 110px; height: 110px; border-radius: 50%; flex-shrink: 0; position: relative;
    background: conic-gradient(#16a34a 0% 64%, #2f6fed 64% 82%, #f59e0b 82% 92%, #e9ebf1 92% 100%);
    display: flex; align-items: center; justify-content: center;
}
.mock-donut::after { content: ""; position: absolute; inset: 20%; background: #fff; border-radius: 50%; }
.mock-donut span { position: relative; z-index: 1; font-weight: 800; color: #2f6fed; font-size: 1.05rem; }
.mock-bars { flex: 1; display: flex; align-items: flex-end; gap: .5rem; height: 110px; }
.mock-bars span {
    flex: 1; height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #4c86ff, #1d4fc4);
    animation: barGrow 1.1s cubic-bezier(.2,.8,.3,1) both; transform-origin: bottom;
}
.mock-bars span:nth-child(2) { animation-delay: .1s; } .mock-bars span:nth-child(3) { animation-delay: .2s; }
.mock-bars span:nth-child(4) { animation-delay: .3s; } .mock-bars span:nth-child(5) { animation-delay: .4s; }
.mock-bars span:nth-child(6) { animation-delay: .5s; }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* شريط العدادات */
.landing-stats { background: var(--brand-surface); border-bottom: 1px solid var(--brand-border); padding: 1.8rem 0; }
.stat-num { font-size: 2rem; font-weight: 800; color: var(--brand-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-lbl { font-size: .8rem; color: var(--brand-text-muted); font-weight: 600; }

.landing-section { padding: 3.5rem 0; }
.landing-alt { background: var(--brand-surface); border-block: 1px solid var(--brand-border); }
.landing-h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: .4rem; }

/* صورة جانبية بشريحة عائمة */
.split-img { position: relative; }
.split-img img { width: 100%; max-height: 400px; object-fit: cover; border-radius: 16px; box-shadow: 0 18px 44px rgba(30,37,48,.16); display: block; }
.split-chip {
    position: absolute; bottom: 16px; inset-inline-start: 16px;
    background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
    border-radius: 999px; padding: .45rem 1rem; font-size: .8rem; font-weight: 700; color: var(--brand-text);
    box-shadow: 0 6px 18px rgba(30,37,48,.18); display: inline-flex; align-items: center; gap: .4rem;
    animation: floaty 6s ease-in-out infinite;
}
.split-chip .ti { color: var(--brand-primary); font-size: 1rem; }

.check-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: .9rem; }
.check-list li { display: flex; gap: .7rem; align-items: flex-start; }
.check-list .ti { color: var(--brand-accent-green); font-size: 1.3rem; flex-shrink: 0; margin-top: .1rem; }
.check-list div { font-size: .95rem; color: var(--brand-text-muted); line-height: 1.75; }
.check-list b { color: var(--brand-text); }

.feature-card {
    height: 100%; background: var(--brand-surface); border: 1px solid var(--brand-border);
    border-radius: 14px; padding: 1.3rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(30,37,48,.07); }
.feature-card p { font-size: .85rem; color: var(--brand-text-muted); margin-bottom: 0; line-height: 1.8; }
.feature-icon {
    display: inline-flex; width: 46px; height: 46px; border-radius: 12px;
    align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: .8rem;
}

/* خطوات عمودية بخط واصل */
.steps-v { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 1.4rem; position: relative; }
.steps-v::before {
    content: ""; position: absolute; top: 22px; bottom: 22px; inset-inline-start: 21px;
    width: 2px; background: var(--brand-border);
}
.step-v { display: flex; gap: .9rem; align-items: flex-start; position: relative; }
.step-num {
    display: inline-flex; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: var(--brand-primary); color: #fff; border: 4px solid var(--brand-bg);
    align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 800;
    box-shadow: 0 4px 12px rgba(47,111,237,.3);
}

/* دعوة أخيرة بخلفية مخطط */
.landing-cta { position: relative; overflow: hidden; padding: 4rem 0; }
.cta-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cta-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(29,79,196,.93), rgba(47,111,237,.88)); }

@media (max-width: 767.98px) {
    .landing-hero { padding: 3rem 0 2.6rem; }
    .landing-title { font-size: 1.65rem; }
    .landing-sub { font-size: .92rem; }
    .landing-trust { gap: .8rem; }
    .stat-num { font-size: 1.5rem; }
    .float-shape { display: none; }
}

/* ===== صفحات المصادقة — تصميم منقسم حي ===== */
.auth-shell { display: flex; min-height: 100vh; }
.auth-form-side {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 2.5rem 1.2rem; background: var(--brand-surface);
    animation: authIn .5s ease both;
}
.auth-card { width: 100%; max-width: 420px; }
@keyframes authIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* تنبيه انتهاء الجلسة — مؤقت وحي */
.session-notice {
    position: relative; overflow: hidden;
    display: flex; gap: .55rem; align-items: flex-start;
    background: #fff9ec; border: 1px solid #f2d99b;
    border-inline-start: 4px solid #eba617;
    color: #7c5d10; border-radius: .7rem;
    padding: .65rem .85rem .95rem; font-size: .8rem; line-height: 1.6;
    margin-bottom: 1.1rem;
    animation: snIn .5s cubic-bezier(.2,.9,.3,1.15) both;
}
.session-notice > .ti-shield-lock { font-size: 1.2rem; color: #eba617; margin-top: .1rem; animation: snPulse 2s ease infinite; }
.session-notice .sn-close {
    border: none; background: none; color: #b89445; padding: 0;
    margin-inline-start: auto; font-size: .95rem; line-height: 1; flex-shrink: 0;
}
.session-notice .sn-close:hover { color: #7c5d10; }
.session-notice .sn-timer {
    position: absolute; bottom: 0; inset-inline-start: 0;
    height: 3px; width: 100%;
    background: linear-gradient(90deg, #f5c451, #eba617);
    transform-origin: right;
    animation: snTimer 9s linear forwards;
}
/* حركة الخروج تحل محل حركة الدخول — الخصائص المتحركة تتغلب على انتقالات opacity العادية */
.session-notice.sn-out { animation: snOut .45s ease forwards; pointer-events: none; }
@keyframes snIn { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes snOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes snTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes snPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* مبدّل صفة الدخول — مدير النظام / مستخدم */
.login-as-toggle {
    display: flex; gap: .35rem; padding: .3rem;
    background: var(--brand-bg); border: 1px solid var(--brand-border);
    border-radius: .75rem;
}
.login-as-btn {
    flex: 1; border: none; background: transparent;
    padding: .55rem .5rem; border-radius: .55rem;
    font-weight: 600; font-size: .88rem; color: var(--brand-text-muted);
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    transition: all .18s ease;
}
.login-as-btn:hover:not(.active) { color: var(--brand-primary); }
.login-as-btn.active {
    background: #fff; color: var(--brand-primary);
    box-shadow: 0 2px 10px rgba(47,111,237,.16);
}

.auth-form-side .input-group-text { background: var(--brand-bg); border-color: var(--brand-border); color: var(--brand-text-muted); }
.auth-form-side .form-control:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(47,111,237,.14); }
.auth-form-side .pass-toggle { border-color: var(--brand-border); color: var(--brand-text-muted); padding-inline: .6rem; }
.auth-form-side .pass-toggle:hover { color: var(--brand-primary); background: var(--brand-primary-light); }

/* اللوحة البصرية — عرض شرائح */
.auth-visual {
    position: relative; width: 47%; overflow: hidden;
    flex-direction: column; justify-content: flex-end;
    color: #fff; padding: 3rem 3rem 3.5rem;
}
.av-slide {
    position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0;
    animation: avFade 18s infinite, avZoom 18s linear infinite;
}
.av-slide.s2 { animation-delay: 6s, 6s; }
.av-slide.s3 { animation-delay: 12s, 12s; }
@keyframes avFade { 0% { opacity: 0; } 6% { opacity: 1; } 36% { opacity: 1; } 46% { opacity: 0; } 100% { opacity: 0; } }
@keyframes avZoom { from { transform: scale(1); } to { transform: scale(1.16); } }
.av-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(200deg, rgba(10,30,55,.55) 0%, rgba(10,30,55,.9) 100%);
}
.av-content { position: relative; z-index: 2; }
.av-logo-chip {
    background: #fff; border-radius: 12px; padding: .45rem .8rem; height: 54px; width: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.25); margin-bottom: 1.6rem;
}
.av-title { font-size: 1.8rem; font-weight: 800; line-height: 1.5; margin-bottom: 1.2rem; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.av-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.av-points li {
    display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: rgba(255,255,255,.9);
    animation: avPoint .55s ease both; animation-delay: var(--d);
}
.av-points .ti { color: #7ef0a8; font-size: 1.15rem; }
@keyframes avPoint { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.av-credit { margin-top: 1.8rem; font-size: .78rem; color: rgba(255,255,255,.55); }
.av-credit strong { color: rgba(255,255,255,.85); }

/* نسبة التطوير أسفل القائمة الجانبية */
.sidebar-credit {
    margin-top: 1.5rem; padding-top: .8rem;
    border-top: 1px solid var(--brand-border);
    font-size: .72rem; color: var(--brand-text-muted);
    text-align: center;
}