/* ==========================================================================
   ui-kit.css — طبقة تصميم موحّدة للمنظومة كلها:
   1) خط العناوين (Reem Kufi) لكل الصفحات والقوالب.
   2) هيدر أنيق موحّد (تدرّج العلامة + زوايا دائرية + وهج + خط ذهبي رفيع).
   3) كروت إحصائية ملوّنة (panel + store).
   تُحمَّل آخر ملف في كل layout لتتفوّق على أنماط القوالب.
   ========================================================================== */

/* ---------- 1) خط العناوين الموحّد ---------- */
h1, h2, h3, h4, h5, h6,
.page-kicker, .kicker,
.app-header h1, .app-header__shop,
.block-head h2, .dash-card h3, .dash-hero h1,
.brand strong, .brand-copy strong,
.sx-top__brand b, .f2-logo strong, .t3-mark strong, .ws-brand strong,
.sheet-head h3, .ct-head h3, .pwa-modal__title,
.f2-title, .sx-social h2, .t3-social h2, .f2-social h2,
.ws-head h1, .ws-head h2, .sx-visit__head h2,
.kpi b, .stat-card__value, .tab-count, .sidebar-count, .login-card h2 {
    font-family: var(--font-title, "Cairo", "Tajawal", system-ui, sans-serif);
    letter-spacing: 0;
}

/* ---------- 2) هيدر موحّد ---------- */
.app-header,
.sx-top,
.f2-bar,
.t3-mast,
.ws-top {
    border-radius: 0 0 22px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 14px 34px rgba(18, 10, 24, .22);
    background-color: color-mix(in srgb, var(--brand, #0066cc) 70%, #100a14);
    background-image:
        linear-gradient(90deg, transparent, rgba(232, 197, 107, .85), transparent),
        radial-gradient(120% 160% at 100% 0%, rgba(255, 255, 255, .22), transparent 58%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--brand, #0066cc) 84%, #100a14),
            color-mix(in srgb, var(--brand, #0066cc) 46%, #1b1024));
    background-repeat: no-repeat;
    background-size: 100% 3px, auto, auto;
    background-position: bottom left, top left, top left;
    color: #fff;
}
.f2-bar { border-radius: 20px; }
.t3-mast { border-radius: 0 0 26px 26px; padding-bottom: 12px; }
.ws-top { border-radius: 0 0 20px 20px; }

.app-header h1,
.app-header__shop,
.header-link,
.header-user,
.sx-top__link,
.sx-top__brand b,
.t3-nav a,
.t3-nav button,
.ws-top a,
.ws-top button,
.ws-brand strong,
.ws-brand small { color: #fff; }
.sx-top__link:hover,
.t3-nav a:hover,
.t3-nav button:hover,
.ws-top a:hover,
.header-link:hover { color: #fff; opacity: .92; }

/* شريط التنقل النشط داخل الهيدر الجديد */
.sx-top__link.is-on,
.f2-nav a.is-on { background: rgba(255, 255, 255, .18); }

/* ---------- 3) كروت إحصائية ملوّنة ---------- */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}
.stat-cards--band { max-width: 1000px; margin: 18px auto; padding-inline: 12px; }
.stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 12px 26px rgba(18, 10, 24, .16);
    transition: transform .18s ease, box-shadow .18s ease;
    background: linear-gradient(135deg, #4f8cff, #1f4fd8);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(18, 10, 24, .22); }
.stat-card::after {
    content: "";
    position: absolute;
    inset-inline-start: -20%;
    top: -60%;
    width: 90%;
    height: 180%;
    background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 62%);
    pointer-events: none;
}
.stat-card__ico {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 22px;
    background: rgba(255, 255, 255, .22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.stat-card__body { display: grid; gap: 1px; min-width: 0; }
.stat-card__value { font-size: 24px; font-weight: 700; line-height: 1.15; }
.stat-card__label { font-size: 13px; font-weight: 700; opacity: .96; }
.stat-card__hint { font-size: 11px; font-weight: 600; opacity: .82; }

.stat-card--blue { background: linear-gradient(135deg, #4f8cff, #1f4fd8); }
.stat-card--green { background: linear-gradient(135deg, #34d399, #0f9d6e); }
.stat-card--amber { background: linear-gradient(135deg, #fbbf24, #d97706); }
.stat-card--rose { background: linear-gradient(135deg, #fb7185, #be123c); }
.stat-card--violet { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.stat-card--cyan { background: linear-gradient(135deg, #22d3ee, #0e7490); }
.stat-card--slate { background: linear-gradient(135deg, #94a3b8, #475569); }

@media (max-width: 480px) {
    .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat-card { padding: 12px; gap: 10px; border-radius: 16px; }
    .stat-card__ico { width: 40px; height: 40px; font-size: 19px; }
    .stat-card__value { font-size: 20px; }
    .stat-card__label { font-size: 12px; }
    .app-header, .sx-top, .t3-mast, .ws-top { border-radius: 0 0 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .stat-card { transition: none; }
    .stat-card:hover { transform: none; }
}