/* generated from _partials/profile-audit/ai-hero-styles + profile-audit.blade inline — edit the source blade partials, then rebuild. */

/* ════════════════════════════════════════════════════════════
   AI-HERO، بطاقة معلومات الحساب (مستخدمة في account-info + live-counter)
   تستخدم متغيرات --ec-* (تتوفر في كل صفحة تحتوي engagement-calc-styles)
   ════════════════════════════════════════════════════════════ */
.ec-app .ai-hero {
    position: relative;
    border-radius: var(--ec-r-2xl, 24px);
    padding: var(--ec-sp-6) var(--ec-sp-5);
    overflow: hidden;
    isolation: isolate;
    color: #FFFFFF;
    background: linear-gradient(135deg, #141b30 0%, #0e1424 100%);
    border: 1px solid var(--ec-border);
    box-shadow: 0 24px 60px -16px rgba(0,0,0,0.55);
}
.ec-app .ai-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: none;
    z-index: -1;
    pointer-events: none;
}
.ec-app .ai-hero-inner {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── الـ Avatar ── */
.ec-app .ai-hero-avatar-wrap {
    position: relative;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(63, 199, 239, 0.80));
    box-shadow:
        0 16px 40px -8px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.40);
    margin-bottom: var(--ec-sp-3);
}
.ec-app .ai-hero-avatar-wrap::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}
.ec-app .ai-hero-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--tt-surface);
}

/* ── الاسم + Verified ── */
.ec-app .ai-hero-nickname {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(1.25rem, 4vw, 1.625rem);
    font-weight: 900;
    margin: 0 0 4px;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}
/* شارة "موثّق"، تشبه شارة TikTok/Twitter الزرقاء */
.ec-app .ai-hero-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #20D5F0 0%, #57ddd0 50%, #06B6D4 100%);
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.40);
    flex-shrink: 0;
    vertical-align: middle;
    margin-inline-start: 6px;
}
.ec-app .ai-hero-verified svg {
    width: 14px;
    height: 14px;
    color: #FFFFFF;
    stroke: #FFFFFF;
    fill: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}
.ec-app .ai-hero-username {
    font-size: 0.9375rem;
    font-weight: 600;
    opacity: 0.90;
    margin-bottom: var(--ec-sp-4);
    direction: ltr;
}

/* ── شريط الإحصائيات الـ 3 ── */
.ec-app .ai-hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    padding: var(--ec-sp-3) var(--ec-sp-2);
    width: 100%;
    max-width: 520px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.ec-app .ai-hero-stat {
    flex: 1 1 0;
    text-align: center;
    padding: 4px 8px;
    min-width: 0;
    display: flex;
    /* الـ label فوق + الرقم تحت، column-reverse يعكس ترتيب الـ DOM بصريا
       بدون كسر الـ JS references (val/label IDs تبقى كما هي) */
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.ec-app .ai-hero-stat-val {
    /* حجم يلائم الأرقام الطويلة (1,560,822) بدون اقتطاع */
    font-size: clamp(0.9375rem, 2.6vw, 1.25rem);
    font-weight: 900;
    line-height: 1.15;
    direction: ltr;
    font-feature-settings: "lnum" 1, "tnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.ec-app .ai-hero-stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.88;
    line-height: 1.2;
}
.ec-app .ai-hero-stat-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(
        180deg,
        transparent 10%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 90%
    );
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── البايو ── */
.ec-app .ai-hero-bio {
    margin: var(--ec-sp-4) 0 0;
    padding: var(--ec-sp-3) var(--ec-sp-4);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
    white-space: pre-line;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ── رابط البايو ── */
.ec-app .ai-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--ec-sp-3);
    background: var(--tt-surface);
    color: #D64463;
    font-size: 0.875rem;
    font-weight: 800;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 9999px;
    transition: all 0.25s ease;
    box-shadow:
        0 8px 20px -4px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ec-app .ai-hero-link:hover {
    background: var(--tt-surface);
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px -4px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}
.ec-app .ai-hero-link-icon { display: inline-flex; align-items: center; font-size: 1rem; line-height: 1; }
.ec-app .ai-hero-link-text { direction: ltr; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }

/* ── Chips ── */
.ec-app .ai-hero-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--ec-sp-3);
}
.ec-app .ai-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #FFFFFF;
    padding: 4px 11px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
}
.ec-app .ai-hero-chip-icon { font-size: 0.875rem; line-height: 1; }

/* ── إضافات live-counter: مباشر + countdown (pills عائمة في الزوايا) ── */
/* الشريط ما يحتاج layout بعد ما صارت العناصر absolute، مجرد placeholder */
.ec-app .ai-hero-live-bar {
    width: 0;
    height: 0;
    pointer-events: none;
}

/* "مباشر"، pill عائم في الزاوية العليا (end = يسار في RTL) */
.ec-app .ai-hero-live-indicator {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 71, 87, 0.95);
    color: #FFFFFF;
    padding: 5px 11px;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    pointer-events: auto;
    z-index: 2;
    box-shadow:
        0 6px 16px -3px rgba(255, 71, 87, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.ec-app .ai-hero-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tt-surface);
    animation: ai-live-pulse 1.4s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}
@keyframes ai-live-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    50%      { opacity: 0.6; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

/* "تحديث بعد X ثانية"، pill شفاف في الزاوية المقابلة (start = يمين في RTL) */
.ec-app .ai-hero-next-update {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.95);
    padding: 5px 11px;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    pointer-events: auto;
    z-index: 2;
    white-space: nowrap;
}
.ec-app .ai-hero-next-update strong {
    color: #FFFFFF;
    font-weight: 900;
    direction: ltr;
    font-feature-settings: "lnum" 1, "tnum" 1;
    min-width: 14px;
    display: inline-block;
    text-align: center;
}

/* مساحة علوية إضافية في الـ Hero عشان الـ pills العائمة لا تتداخل مع الـ avatar */
/* مساحة سفلية لزر الـ fullscreen */
.ec-app .ai-hero {
    padding-top: calc(var(--ec-sp-6) + 18px);
    padding-bottom: calc(var(--ec-sp-6) + 22px);
}

/* Mobile صغير: pills أصغر + قريبة من الزوايا */
@media (max-width: 575.98px) {
    .ec-app .ai-hero { padding-top: calc(var(--ec-sp-5) + 14px); }
    .ec-app .ai-hero-live-indicator {
        top: 10px;
        inset-inline-end: 10px;
        padding: 3px 8px;
        font-size: 0.625rem;
    }
    .ec-app .ai-hero-live-dot { width: 6px; height: 6px; }
    .ec-app .ai-hero-next-update {
        top: 10px;
        inset-inline-start: 10px;
        padding: 3px 8px;
        font-size: 0.625rem;
    }
}

/* Mobile جدا صغير (< 360px): اخفاء النص وعرض الـ countdown كرقم فقط */
@media (max-width: 359.98px) {
    .ec-app .ai-hero-next-update .ai-hero-next-update-text { display: none; }
}

/* ════════════════════════════════════════════════════
   زر ملء الشاشة (Fullscreen Toggle)
   تصميم زجاجي premium مع gradient + glow + ripple
   يظهر في الزاوية أسفل-يمين (start في RTL)
   ════════════════════════════════════════════════════ */
.ec-app .ai-hero-fs-btn {
    position: absolute;
    bottom: 16px;
    inset-inline-start: 16px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.14) 100%);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
    padding: 0;
    font-family: inherit;
    box-shadow:
        0 6px 16px -4px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.40),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
    isolation: isolate;
}

/* لمعان داخلي علوي (highlight) */
.ec-app .ai-hero-fs-btn::before {
    content: '';
    position: absolute;
    top: 1px;
    inset-inline: 1px;
    height: 45%;
    border-radius: 11px 11px 50% 50% / 11px 11px 100% 100%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.30),
        rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: 0;
}

/* halo glow خلف الزر، يظهر تدريجيا على hover */
.ec-app .ai-hero-fs-btn::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.30),
        rgba(255, 255, 255, 0.10));
    opacity: 0;
    transition: opacity 0.28s ease;
    z-index: -1;
    filter: blur(8px);
}

.ec-app .ai-hero-fs-btn:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.24) 100%);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 12px 28px -6px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.ec-app .ai-hero-fs-btn:hover::after {
    opacity: 1;
}
.ec-app .ai-hero-fs-btn:active {
    transform: translateY(-1px) scale(0.98);
    transition-duration: 0.12s;
}
.ec-app .ai-hero-fs-btn:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

.ec-app .ai-hero-fs-icon-expand,
.ec-app .ai-hero-fs-icon-collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    position: relative;
    z-index: 1;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.ec-app .ai-hero-fs-btn:hover .ai-hero-fs-icon-expand,
.ec-app .ai-hero-fs-btn:hover .ai-hero-fs-icon-collapse {
    transform: scale(1.12);
}
.ec-app .ai-hero-fs-icon-expand[hidden],
.ec-app .ai-hero-fs-icon-collapse[hidden] {
    display: none;
}
.ec-app .ai-hero-fs-icon-expand svg,
.ec-app .ai-hero-fs-icon-collapse svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* ════════════════════════════════════════════════════
   شريط ملء الشاشة (Topbar)، يظهر فقط في fullscreen
   يحتوي على شعار الموقع + الـ pills (مباشر + countdown)
   ════════════════════════════════════════════════════ */
.ec-app .ai-hero-fs-topbar {
    display: none;
}
.ec-app .ai-hero:fullscreen .ai-hero-fs-topbar,
.ec-app .ai-hero.is-fullscreen .ai-hero-fs-topbar {
    display: flex;
    position: absolute;
    top: 0;
    inset-inline: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(14px, 1.8vw, 22px) clamp(18px, 2.5vw, 32px);
    z-index: 5;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.18) 0%,
        rgba(0, 0, 0, 0.06) 60%,
        rgba(0, 0, 0, 0) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ec-app .ai-hero-fs-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #FFFFFF;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.ec-app .ai-hero-fs-brand:hover {
    color: #FFFFFF;
    text-decoration: none;
    opacity: 0.90;
    transform: translateY(-1px);
}
.ec-app .ai-hero-fs-logo {
    width: clamp(28px, 3vw, 38px);
    height: clamp(28px, 3vw, 38px);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
    flex-shrink: 0;
}
.ec-app .ai-hero-fs-name {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    font-size: clamp(1rem, 1.6vw, 1.375rem);
    letter-spacing: -0.01em;
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.ec-app .ai-hero-fs-pills {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ════════════════════════════════════════════════════
   حالة ملء الشاشة، الـ Hero يملأ الشاشة كاملة
   ════════════════════════════════════════════════════ */
.ec-app .ai-hero:fullscreen,
.ec-app .ai-hero.is-fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    border-radius: 0;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: clamp(5rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3rem) clamp(3rem, 5vw, 5rem);
}

/* الحاوية الداخلية تكبر بشكل متناسق */
.ec-app .ai-hero:fullscreen .ai-hero-inner,
.ec-app .ai-hero.is-fullscreen .ai-hero-inner {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

/* تكبير الـ avatar */
.ec-app .ai-hero:fullscreen .ai-hero-avatar-wrap,
.ec-app .ai-hero.is-fullscreen .ai-hero-avatar-wrap {
    width: clamp(140px, 18vw, 220px);
    height: clamp(140px, 18vw, 220px);
}

/* تكبير الاسم */
.ec-app .ai-hero:fullscreen .ai-hero-nickname,
.ec-app .ai-hero.is-fullscreen .ai-hero-nickname {
    font-size: clamp(1.75rem, 4vw, 3rem);
}

/* تكبير الأرقام في وضع ملء الشاشة، موحد وبدون اقتطاع */
.ec-app .ai-hero:fullscreen .ai-hero-stats,
.ec-app .ai-hero.is-fullscreen .ai-hero-stats {
    max-width: clamp(560px, 60vw, 760px);
}
.ec-app .ai-hero:fullscreen .ai-hero-stat-val,
.ec-app .ai-hero.is-fullscreen .ai-hero-stat-val {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
}
.ec-app .ai-hero:fullscreen .ai-hero-stat-label,
.ec-app .ai-hero.is-fullscreen .ai-hero-stat-label {
    font-size: clamp(0.875rem, 1.4vw, 1.125rem);
}

/* تكبير username + bio + link */
.ec-app .ai-hero:fullscreen .ai-hero-username,
.ec-app .ai-hero.is-fullscreen .ai-hero-username {
    font-size: clamp(1rem, 1.6vw, 1.25rem);
}
.ec-app .ai-hero:fullscreen .ai-hero-bio,
.ec-app .ai-hero.is-fullscreen .ai-hero-bio {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.8;
}

/* مساحة أكبر بين العناصر */
.ec-app .ai-hero:fullscreen .ai-hero-stats,
.ec-app .ai-hero.is-fullscreen .ai-hero-stats {
    margin: clamp(1.25rem, 2.5vw, 2rem) 0;
}

/* في fullscreen: الـ pills تنتقل للـ topbar (JS)، نزيل الـ absolute positioning */
.ec-app .ai-hero-fs-pills .ai-hero-live-indicator,
.ec-app .ai-hero-fs-pills .ai-hero-next-update {
    position: static;
    top: auto;
    inset-inline-start: auto;
    inset-inline-end: auto;
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    padding: 6px 12px;
}

/* زر الـ fullscreen أكبر في وضع fullscreen */
.ec-app .ai-hero:fullscreen .ai-hero-fs-btn,
.ec-app .ai-hero.is-fullscreen .ai-hero-fs-btn {
    width: 52px;
    height: 52px;
    bottom: clamp(16px, 2.5vw, 32px);
    inset-inline-start: clamp(16px, 2.5vw, 32px);
    border-radius: 14px;
}
.ec-app .ai-hero:fullscreen .ai-hero-fs-icon-expand svg,
.ec-app .ai-hero:fullscreen .ai-hero-fs-icon-collapse svg,
.ec-app .ai-hero.is-fullscreen .ai-hero-fs-icon-expand svg,
.ec-app .ai-hero.is-fullscreen .ai-hero-fs-icon-collapse svg {
    width: 22px;
    height: 22px;
}

/* الجوال: زر أصغر شوي مع الحفاظ على الـ touch target */
@media (max-width: 575.98px) {
    .ec-app .ai-hero-fs-btn {
        width: 38px;
        height: 38px;
        bottom: 12px;
        inset-inline-start: 12px;
        border-radius: 10px;
    }
    .ec-app .ai-hero-fs-icon-expand svg,
    .ec-app .ai-hero-fs-icon-collapse svg {
        width: 16px;
        height: 16px;
    }
}

/* ── العداد المباشر داخل الـ 3-stat bar (بدون نقطة وامضة وسط الأرقام) ── */
.ec-app .ai-hero-stat.is-live {
    position: relative;
}

/* ── نقطة حمراء وامضة بجانب countdown "بعد X ث" ── */
.ec-app .ai-hero-next-update::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #EF4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.70);
    flex-shrink: 0;
    animation: ai-live-pulse-red 1.4s ease-in-out infinite;
}
@keyframes ai-live-pulse-red {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.70); }
    50%      { opacity: 0.65; box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* الجوال: النقطة أصغر شوي */
@media (max-width: 575.98px) {
    .ec-app .ai-hero-next-update::before { width: 6px; height: 6px; }
}

/* ── Change indicator (+5 منذ آخر تحديث) ── */
.ec-app .ai-hero-change {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--ec-sp-3);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9999px;
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #FFFFFF;
    transition: all 0.3s ease;
}
.ec-app .ai-hero-change.is-up {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.45), rgba(5, 150, 105, 0.55));
    border-color: rgba(16, 185, 129, 0.50);
    box-shadow: 0 6px 16px -4px rgba(16, 185, 129, 0.45);
}
.ec-app .ai-hero-change.is-down {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.45), rgba(225, 29, 72, 0.55));
    border-color: rgba(244, 63, 94, 0.50);
    box-shadow: 0 6px 16px -4px rgba(244, 63, 94, 0.45);
}
.ec-app .ai-hero-change-icon { font-size: 0.9375rem; line-height: 1; }

/* ── Mobile ── */
@media (max-width: 575.98px) {
    .ec-app .ai-hero { padding: var(--ec-sp-5) var(--ec-sp-3); }
    .ec-app .ai-hero-avatar-wrap { width: 96px; height: 96px; }
    .ec-app .ai-hero-stats { padding: var(--ec-sp-2); max-width: 100%; }
    .ec-app .ai-hero-stat-val { font-size: 1.0625rem; }
    .ec-app .ai-hero-stat-label { font-size: 0.6875rem; }
    .ec-app .ai-hero-bio { font-size: 0.875rem; padding: var(--ec-sp-2) var(--ec-sp-3); }
    .ec-app .ai-hero-link { font-size: 0.8125rem; padding: 8px 14px; }
    .ec-app .ai-hero-live-bar { max-width: 100%; }
}

    /* حاوية أداة «تدقيق الملف الشخصي» على wwep — تُبقي تصميم الأداة الأصلي معزولاً وموسّطاً. */
    .pa-tool-page { padding-block: var(--ds-crumb-top, 1.5rem) 5rem; background: var(--ds-background); position: relative; }
    .pa-tool-page .ec-app { max-width: 920px; margin-inline: auto; }
    /* قسم المعلومات (وصف + أسئلة) أسفل الأداة — بثيم wwep الداكن للاتساق مع بقية صفحات الواجهة. */
    .bt-info { max-width: 920px; margin: 2.5rem auto 0; }
    .bt-info-block { background: rgba(15,23,42,.55); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: clamp(1.1rem,3vw,1.75rem); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); margin-block-start: 1.25rem; }
    .bt-info-title { color:#fff; font-size:1.1rem; font-weight:800; margin:0 0 1rem; padding-block-end:.75rem; border-bottom:1px solid rgba(255,255,255,.09); display:flex; align-items:center; gap:8px; }
    .bt-info-title i { color:#818cf8; }
    .bt-info-body { color:#cbd5e1; font-size:.95rem; line-height:1.9; overflow-wrap:anywhere; }
    .bt-info-body > :first-child { margin-top:0; } .bt-info-body > :last-child { margin-bottom:0; }
    .bt-info-body :where(h1,h2,h3,h4){ color:#fff; font-weight:800; }
    .bt-info-body a { color:#818cf8; text-decoration:underline; text-underline-offset:3px; }
    .bt-info-body strong,.bt-info-body b { color:#e2e8f0; }
    .bt-faq details { background: rgba(2,6,23,.4); border:1px solid rgba(255,255,255,.09); border-radius:12px; margin-block-end:10px; overflow:hidden; }
    .bt-faq details:last-child { margin-block-end:0; }
    .bt-faq summary { cursor:pointer; padding:14px 16px; font-weight:800; color:#fff; font-size:.95rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; }
    .bt-faq summary::-webkit-details-marker{ display:none; }
    .bt-faq summary i { color:#a5b4fc; font-size:.8rem; flex-shrink:0; transition:transform .25s; }
    .bt-faq details[open] summary i { transform: rotate(180deg); }
    .bt-faq-a { padding:0 16px 14px; color:#cbd5e1; font-size:.9rem; line-height:1.9; }
    .bt-faq-a p:first-child{ margin-top:0; } .bt-faq-a p:last-child{ margin-bottom:0; }
    
        /* ════════════════════════════════════════════════════════════
           PROFILE AUDIT v3، Comprehensive Redesign
           ════════════════════════════════════════════════════════════ */

        /* ───── 1. VERDICT CARD (Score + Stats) ───── */
        .tt-app .pa-verdict {
            background: linear-gradient(135deg, rgba(47,127,174,0.04) 0%, rgba(63,199,239,0.04) 100%), var(--tt-surface);
            position: relative;
            overflow: hidden;
        }
        .tt-app .pa-verdict::before {
            content: '';
            position: absolute;
            top: -100px;
            inset-inline-end: -80px;
            width: 280px; height: 280px;
            background: none;
            border-radius: 50%;
            filter: blur(40px);
            pointer-events: none;
        }
        .tt-app .pa-verdict::after {
            content: '';
            position: absolute;
            bottom: -100px;
            inset-inline-start: -80px;
            width: 240px; height: 240px;
            background: none;
            border-radius: 50%;
            filter: blur(40px);
            pointer-events: none;
        }
        .tt-app .pa-verdict-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: var(--tt-sp-5, 32px);
            align-items: center;
        }
        @media (max-width: 640px) {
            .tt-app .pa-verdict-grid {
                grid-template-columns: 1fr;
                justify-items: center;
                text-align: center;
            }
        }
        .tt-app .pa-verdict-ring {
            position: relative;
            width: 200px; height: 200px;
            flex-shrink: 0;
        }
        .tt-app .pa-verdict-ring svg {
            width: 100%; height: 100%;
            transform: rotate(-90deg);
        }
        .tt-app .pa-verdict-ring .tt-score-ring-bg { stroke: rgba(255,255,255,0.10); stroke-width: 12; fill: none; }
        .tt-app .pa-verdict-ring .tt-score-ring-fg {
            stroke: url(#tt-ring-grad); stroke-width: 12;
            fill: none; stroke-linecap: round;
            transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .tt-app .pa-verdict-ring-inner {
            position: absolute; inset: 0;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            gap: 2px;
        }
        .tt-app .pa-verdict-score {
            font-size: 3.5rem;
            font-weight: 900;
            line-height: 1;
            color: var(--tt-tx-1, #0F172A);
            font-feature-settings: "lnum" 1;
            letter-spacing: -0.03em;
        }
        .tt-app .pa-verdict-out-of {
            font-size: 0.75rem;
            color: var(--tt-tx-4, #94A3B8);
            font-weight: 600;
            font-feature-settings: "lnum" 1;
        }
        .tt-app .pa-verdict-body {
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-width: 0;
        }
        .tt-app .pa-verdict-eyebrow {
            font-size: 0.8125rem;
            font-weight: 700;
            color: var(--tt-tx-3, #64748B);
            letter-spacing: 0.02em;
        }
        .tt-app .pa-verdict-desc {
            font-size: 0.9375rem;
            color: var(--tt-tx-2, #334155);
            line-height: 1.6;
            margin: 0;
        }
        .tt-app .pa-verdict-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 8px;
        }
        .tt-app .pa-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            background: var(--tt-surface);
            border: 1px solid var(--tt-br, #E2E8F0);
            border-radius: 12px;
            font-size: 0.8125rem;
            font-weight: 600;
            color: var(--tt-tx-2, #334155);
        }
        .tt-app .pa-chip svg {
            width: 16px; height: 16px;
            padding: 3px;
            border-radius: 50%;
        }
        .tt-app .pa-chip--success svg { background: rgba(16,185,129,0.14); color: #34d399; }
        .tt-app .pa-chip--danger  svg { background: rgba(239,68,68,0.13); color: #f87171; }
        .tt-app .pa-chip--info    svg { background: rgba(59,130,246,0.14); color: #60a5fa; padding: 2px; }
        .tt-app .pa-chip-num { font-weight: 800; font-size: 1rem; color: var(--tt-tx-1, #0F172A); }
        .tt-app .pa-chip-lbl { color: var(--tt-tx-3, #64748B); }

        /* ───── 2. CATEGORIES GRID (5 cards) ───── */
        .tt-app .pa-cats-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
        }
        @media (min-width: 640px)  { .tt-app .pa-cats-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .tt-app .pa-cats-grid { grid-template-columns: repeat(5, 1fr); } }

        .tt-app .pa-cat {
            position: relative;
            padding: 18px 14px;
            background: var(--tt-surface);
            border: 1px solid var(--tt-br, #E2E8F0);
            border-radius: 14px;
            overflow: hidden;
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }
        .tt-app .pa-cat::before {
            content: '';
            position: absolute;
            top: 0; inset-inline: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--cat-c) 0%, var(--cat-c2) 100%);
        }
        .tt-app .pa-cat:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 24px -8px rgba(15,23,42,0.10),
                        0 0 0 1px var(--cat-c, var(--tt-br));
            border-color: transparent;
        }
        .tt-app .pa-cat-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        .tt-app .pa-cat-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px; height: 36px;
            background: linear-gradient(135deg, var(--cat-c) 0%, var(--cat-c2) 100%);
            color: white;
            border-radius: 10px;
            box-shadow: 0 4px 10px -2px rgba(0,0,0,0.45);
        }
        .tt-app .pa-cat-pct {
            font-size: 1.5rem;
            font-weight: 900;
            color: color-mix(in srgb, var(--cat-c) 70%, #ffffff);
            line-height: 1;
            letter-spacing: -0.02em;
        }
        .tt-app .pa-cat-pct small { font-size: 0.8125rem; font-weight: 700; }
        .tt-app .pa-cat-name {
            font-size: 0.9375rem;
            font-weight: 700;
            color: var(--tt-tx-1, #0F172A);
            margin-bottom: 4px;
        }
        .tt-app .pa-cat-meta {
            font-size: 0.75rem;
            color: var(--tt-tx-3, #64748B);
            margin-bottom: 10px;
        }
        .tt-app .pa-cat-bar {
            height: 6px;
            background: rgba(255,255,255,0.05);
            border-radius: 999px;
            overflow: hidden;
        }
        .tt-app .pa-cat-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--cat-c) 0%, var(--cat-c2) 100%);
            border-radius: 999px;
            transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .tt-app .pa-cat--weak .pa-cat-pct { opacity: 0.85; }

        /* ───── 3. PERFORMANCE INSIGHTS GRID (existing-ish) ───── */
        .tt-app .pa-insights-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        @media (min-width: 640px)  { .tt-app .pa-insights-grid { grid-template-columns: repeat(4, 1fr); } }
        .tt-app .pa-insight {
            padding: 14px;
            background: linear-gradient(135deg, var(--tt-surface) 0%, var(--tt-surface-2) 100%);
            border: 1px solid var(--tt-br, #E2E8F0);
            border-radius: 12px;
            text-align: center;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .tt-app .pa-insight:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px -6px rgba(15,23,42,0.08);
        }
        .tt-app .pa-insight-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px; height: 36px;
            background: linear-gradient(135deg, #5457E6, #3fc7ef);
            color: white;
            border-radius: 10px;
            margin-bottom: 8px;
            box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.35);
        }
        .tt-app .pa-insight-val {
            font-size: 1.375rem;
            font-weight: 800;
            color: var(--tt-tx-1, #0F172A);
            line-height: 1.1;
            font-feature-settings: "lnum" 1;
            margin-bottom: 2px;
        }
        .tt-app .pa-insight-label {
            font-size: 0.75rem;
            color: var(--tt-tx-3, #64748B);
            font-weight: 600;
        }

        /* ───── 4. DETAILED AUDIT SECTIONS ───── */
        .tt-app .pa-section {
            margin-top: var(--tt-sp-4, 24px);
        }
        .tt-app .pa-section-head {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
        }
        .tt-app .pa-section-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px; height: 44px;
            background: linear-gradient(135deg, var(--cat-c) 0%, var(--cat-c2) 100%);
            color: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px -2px rgba(0,0,0,0.45);
            flex-shrink: 0;
        }
        .tt-app .pa-section-meta-wrap { flex: 1; min-width: 0; }
        /* العنوان الفرعي (عدد الفحوص/النقاط) أوضح وأثقل قليلاً — أرقام مقروءة. */
        .tt-app .pa-section-meta-wrap .tt-section-sub { color: #b8c4d6; font-weight: 600; }
        .tt-app .pa-section-pct {
            font-size: 1.625rem;
            font-weight: 900;
            color: var(--cat-c);
            line-height: 1;
            font-feature-settings: "lnum" 1;
        }
        .tt-app .pa-section-pct small { font-size: 0.875rem; font-weight: 700; }
        .tt-app .pa-section-bar {
            height: 5px;
            background: rgba(255,255,255,0.05);
            border-radius: 999px;
            overflow: hidden;
            margin-bottom: 16px;
        }
        .tt-app .pa-section-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--cat-c) 0%, var(--cat-c2) 100%);
            border-radius: 999px;
            transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* ── Check rows ── */
        .tt-app .pa-checks {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .tt-app .pa-check-row {
            display: grid;
            grid-template-columns: 28px 1fr auto;
            align-items: start;
            gap: 12px;
            padding: 12px;
            background: var(--tt-surface-2);
            border: 1px solid var(--tt-border, rgba(255,255,255,0.09));
            border-radius: 10px;
            transition: border-color 0.2s, background 0.2s;
        }
        .tt-app .pa-check-row.is-failed {
            background: rgba(239, 68, 68, 0.06);
            border-color: rgba(239, 68, 68, 0.26);
            border-inline-start: 3px solid #ef4444;
        }
        .tt-app .pa-check-row.is-passed {
            background: rgba(16, 185, 129, 0.055);
            border-color: rgba(16, 185, 129, 0.26);
            border-inline-start: 3px solid #10b981;
        }
        .tt-app .pa-check-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px; height: 28px;
            border-radius: 50%;
        }
        .tt-app .pa-check-icon.is-passed { background: rgba(16,185,129,0.16); color: #34d399; }
        .tt-app .pa-check-icon.is-failed { background: rgba(239,68,68,0.16); color: #f87171; }
        .tt-app .pa-check-body { min-width: 0; }
        .tt-app .pa-check-head {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 3px;
        }
        .tt-app .pa-check-label {
            font-size: 0.9375rem;
            font-weight: 700;
            color: var(--tt-tx-1, #0F172A);
        }
        .tt-app .pa-priority-badge {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 0.6875rem;
            font-weight: 700;
        }
        .tt-app .pa-priority-badge.priority--high { background: rgba(239,68,68,0.16); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }
        .tt-app .pa-priority-badge.priority--mid  { background: rgba(245,158,11,0.16); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.3); }
        .tt-app .pa-priority-badge.priority--low  { background: rgba(255,255,255,0.06); color: #cbd5e1; border: 1px solid rgba(255, 255, 255, 0.15); }

        .tt-app .pa-check-value {
            font-size: 0.8125rem;
            color: #b8c4d6;
            line-height: 1.55;
            margin-top: 2px;
        }
        .tt-app .pa-check-fix {
            font-size: 0.8125rem;
            color: var(--tt-tx-2, #334155);
            line-height: 1.6;
            margin-top: 6px;
            padding: 8px 10px;
            background: var(--tt-surface);
            border-radius: 8px;
            border-inline-start: 3px solid #F59E0B;
        }
        .tt-app .pa-check-weight {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 46px;
            padding: 5px 10px;
            background: rgba(148, 163, 184, 0.16);
            border: 1px solid rgba(148, 163, 184, 0.28);
            border-radius: 9px;
            font-size: 0.82rem;
            font-weight: 800;
            color: #e2e8f0;
            font-feature-settings: "lnum" 1, "tnum" 1;
            white-space: nowrap;
        }
        /* ترميز لوني للنقاط: أخضر = نقاط محقّقة (نجح) · أصفر = نقاط متاحة للكسب (فشل). */
        .tt-app .pa-check-row.is-passed .pa-check-weight {
            background: rgba(16, 185, 129, 0.16);
            border-color: rgba(16, 185, 129, 0.42);
            color: #6ee7b7;
        }
        .tt-app .pa-check-row.is-failed .pa-check-weight {
            background: rgba(245, 158, 11, 0.15);
            border-color: rgba(245, 158, 11, 0.42);
            color: #fcd34d;
        }

        /* ───── 5. ACTION CTA (Bottom) ───── */
        .tt-app .pa-action-card {
            margin-top: var(--tt-sp-5, 32px);
            padding: var(--tt-sp-5, 32px);
            background: var(--tt-surface-3);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 20px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
            box-shadow: none;
        }
        .tt-app .pa-action-card-text h3 {
            font-size: 1.25rem;
            font-weight: 800;
            margin: 0 0 6px;
            color: white;
        }
        .tt-app .pa-action-card-text p {
            margin: 0;
            font-size: 0.9375rem;
            color: rgba(255, 255, 255, 0.92);
            line-height: 1.6;
        }
        .tt-app .pa-action-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 13px 26px;
            background: var(--tt-surface);
            color: #7cc9ec;
            border: 0;
            border-radius: 999px;
            font-size: 0.9375rem;
            font-weight: 800;
            cursor: pointer;
            text-decoration: none;
            box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.18);
            transition: transform 0.2s, box-shadow 0.2s;
            flex-shrink: 0;
        }
        .tt-app .pa-action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 28px -4px rgba(15, 23, 42, 0.25);
        }
        @media (max-width: 575.98px) {
            .tt-app .pa-action-card { padding: 24px; flex-direction: column; text-align: center; }
            .tt-app .pa-action-btn { width: 100%; justify-content: center; }
        }

        @media (prefers-reduced-motion: reduce) {
            .tt-app .pa-cat, .tt-app .pa-insight, .tt-app .pa-action-btn { transition: none !important; }
            .tt-app .pa-cat:hover, .tt-app .pa-insight:hover, .tt-app .pa-action-btn:hover { transform: none !important; }
        }

        @supports not (background: color-mix(in srgb, red, blue)) {
            .tt-app .pa-cat-icon, .tt-app .pa-section-icon {
                box-shadow: 0 4px 10px -2px rgba(15, 23, 42, 0.15);
            }
            .tt-app .pa-cat:hover { border-color: var(--cat-c); }
        }

        /* ════ Card Expandable + Chevron + Inline Panel ════ */
        .tt-app .pa-cat, .tt-app .pa-insight { position: relative; }

        /* البطاقات القابلة للضغط */
        .tt-app .pa-cat.is-expandable,
        .tt-app .pa-insight.is-expandable {
            cursor: pointer;
        }
        .tt-app .pa-cat.is-expandable:focus-visible,
        .tt-app .pa-insight.is-expandable:focus-visible {
            outline: 2px solid #2f7fae;
            outline-offset: 2px;
        }

        /* البطاقات flex لإفساح مجال طبيعي للـ pill */
        .tt-app .pa-cat,
        .tt-app .pa-insight {
            display: flex;
            flex-direction: column;
        }
        .tt-app .pa-insight { align-items: center; }

        /* زرّ "اضغط للتفاصيل"، Pill أنيق في تدفّق طبيعي */
        .tt-app .pa-card-toggle {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 12px;
            margin-top: 12px;
            align-self: center;
            background: linear-gradient(135deg, rgba(47, 127, 174, 0.08), rgba(99, 102, 241, 0.08));
            border: 1px solid rgba(47, 127, 174, 0.18);
            border-radius: 999px;
            font-size: 0.6875rem;
            font-weight: 700;
            color: #D64463;
            font-family: 'Cairo', sans-serif;
            white-space: nowrap;
            pointer-events: none;
            transition: all 0.25s ease;
            width: fit-content;
        }
        .tt-app .pa-card-toggle-text { line-height: 1; }
        .tt-app .pa-card-toggle-arrow {
            width: 11px; height: 11px;
            transition: transform 0.3s ease;
            flex-shrink: 0;
        }

        /* Hover → الـ pill يبرز بـ gradient كامل */
        .tt-app .pa-cat.is-expandable:hover .pa-card-toggle,
        .tt-app .pa-insight.is-expandable:hover .pa-card-toggle {
            background: linear-gradient(135deg, #2f7fae, #3fc7ef);
            border-color: transparent;
            color: white;
            box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.35);
            transform: translateY(-1px);
        }

        /* مفتوح → gradient + السهم يدور */
        .tt-app .pa-cat.is-open .pa-card-toggle,
        .tt-app .pa-insight.is-open .pa-card-toggle {
            background: linear-gradient(135deg, #2f7fae, #3fc7ef);
            border-color: transparent;
            color: white;
            box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.35);
        }
        .tt-app .pa-cat.is-open .pa-card-toggle-arrow,
        .tt-app .pa-insight.is-open .pa-card-toggle-arrow {
            transform: rotate(180deg);
        }

        /* النص يتغيّر "اضغط للتفاصيل" ↔ "إخفاء التفاصيل" */
        .tt-app .pa-cat.is-open .pa-card-toggle-text,
        .tt-app .pa-insight.is-open .pa-card-toggle-text {
            font-size: 0;
        }
        .tt-app .pa-cat.is-open .pa-card-toggle-text::before,
        .tt-app .pa-insight.is-open .pa-card-toggle-text::before {
            content: 'إخفاء التفاصيل';
            font-size: 0.6875rem;
        }

        /* لوحة الشرح inline */
        .tt-app .pa-info-panel {
            margin-top: 12px;
            padding: 12px 14px;
            background: linear-gradient(135deg, rgba(47,127,174,0.04) 0%, rgba(63,199,239,0.04) 100%);
            border: 1px solid rgba(47, 127, 174, 0.15);
            border-radius: 10px;
            animation: pa-info-slide 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            text-align: start;
        }
        @keyframes pa-info-slide {
            from { opacity: 0; transform: translateY(-6px); max-height: 0; }
            to { opacity: 1; transform: translateY(0); max-height: 500px; }
        }
        .tt-app .pa-info-panel-desc {
            margin: 0 0 8px;
            font-size: 0.8125rem;
            line-height: 1.6;
            color: #cbd5e1;
            font-weight: 600;
        }
        .tt-app .pa-info-panel-why {
            margin: 0;
            font-size: 0.75rem;
            line-height: 1.6;
            color: #94a3b8;
        }
        .tt-app .pa-info-panel-why strong {
            color: #D64463;
            font-weight: 800;
        }