/* generated from _partials/best-time/{styles-mc,styles-bt} + best-time.blade inline — edit the source blade partials, then rebuild. */

/* ════════════════════════════════════════════════════════════════════
   MONEY CALCULATOR، Design System v5 (نفس هوية engagement-calculator)
   ──────────────────────────────────────────────────────────────────── */

#ec-app {
    --mc-brand:        #2f7fae;
    --mc-brand-hover:  #215d87;
    --mc-brand-soft:   rgba(47,127,174,0.16);
    --mc-accent:       #57ddd0;

    --mc-grad:         linear-gradient(135deg, #2f7fae 0%, #3fc7ef 55%, #57ddd0 110%);
    --mc-grad-text:    linear-gradient(135deg, #2f7fae 0%, #3fc7ef 100%);
    --mc-grad-money:   linear-gradient(135deg, #059669 0%, #10B981 50%, #34D399 100%);

    --mc-surface:      #0f1526;
    --mc-surface-2:    #0b1020;
    --mc-surface-3:    #161d33;

    --mc-border:       #E5E7EB;
    --mc-border-soft:  #F3F4F6;
    --mc-divider:      #E5E7EB;

    --mc-tx-1: #0F172A;
    --mc-tx-2: #1F2937;
    --mc-tx-3: #6B7280;
    --mc-tx-4: #9CA3AF;
    --mc-tx-5: #D1D5DB;

    --mc-sp-1:   4px;
    --mc-sp-2:   8px;
    --mc-sp-3:  12px;
    --mc-sp-4:  16px;
    --mc-sp-5:  20px;
    --mc-sp-6:  24px;
    --mc-sp-7:  32px;
    --mc-sp-8:  40px;
    --mc-sp-9:  48px;
    --mc-sp-10: 64px;
    --mc-sp-11: 80px;

    --mc-r-sm:  8px;
    --mc-r-md: 12px;
    --mc-r-lg: 16px;
    --mc-r-xl: 20px;
    --mc-r-2xl:24px;
    --mc-r-3xl:32px;
    --mc-r-pill:9999px;

    --mc-sh-1: 0 1px 2px rgba(15,23,42,0.04);
    --mc-sh-2: 0 4px 12px -2px rgba(15,23,42,0.06), 0 2px 4px -2px rgba(15,23,42,0.03);
    --mc-sh-3: 0 12px 28px -6px rgba(15,23,42,0.10), 0 6px 12px -3px rgba(15,23,42,0.04);
    --mc-sh-4: 0 24px 48px -12px rgba(15,23,42,0.14), 0 12px 20px -6px rgba(15,23,42,0.06);
    --mc-sh-brand:    0 8px 20px -4px rgba(0,0,0,0.30), 0 4px 8px -2px rgba(0,0,0,0.15);
    --mc-sh-brand-lg: 0 16px 36px -8px rgba(0,0,0,0.40), 0 8px 16px -4px rgba(0,0,0,0.20);

    --mc-ease: cubic-bezier(0.4, 0, 0.2, 1);

    max-width: 1120px;
    margin-inline: auto;
    direction: rtl;
}

/* الأرقام إنجليزية + LTR + tabular */
#ec-app .mc-num,
#ec-app .mc-total-val,
#ec-app .mc-rev-amount,
#ec-app .mc-metric-val,
#ec-app .mc-stat-val,
#ec-app .mc-profile-handle,
#ec-app .mc-meta {
    font-feature-settings: "lnum" 1, "tnum" 1;
    direction: ltr;
    unicode-bidi: embed;
}

#ec-app .fs-icon { flex-shrink: 0; display: inline-block; vertical-align: middle; }

/* ════════════════════════════════════════════════════════════
   1. HERO
   ════════════════════════════════════════════════════════════ */

#ec-app .mc-hero {
    position: relative;
    border-radius: var(--mc-r-3xl);
    padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 64px);
    margin-bottom: var(--mc-sp-9);
    overflow: hidden;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
}
#ec-app .mc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 600px 400px at 85% -10%, rgba(255,255,255,0.04), transparent 60%),
        radial-gradient(ellipse 500px 350px at 15% 110%, rgba(255,255,255,0.03), transparent 60%);
    pointer-events: none;
}

#ec-app .mc-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
}

#ec-app .mc-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-sp-2);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-r-pill);
    padding: 8px 18px 8px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mc-tx-2);
    margin-bottom: var(--mc-sp-6);
    box-shadow: var(--mc-sh-1);
}

#ec-app .mc-hero-eyebrow-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 4px rgba(16,185,129,0.18);
    animation: mc-pulse 2.4s ease-in-out infinite;
}
@keyframes mc-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(16,185,129,0.18); }
    50%      { box-shadow: 0 0 0 10px rgba(16,185,129,0.04); }
}

#ec-app .mc-hero-title {
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--mc-tx-1);
    margin: 0 0 var(--mc-sp-4);
}

#ec-app .mc-hero-title-grad {
    background: var(--mc-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

#ec-app .mc-hero-sub {
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    color: var(--mc-tx-3);
    line-height: 1.7;
    max-width: 580px;
    margin: 0 auto var(--mc-sp-8);
}

/* الإدخال */
#ec-app .mc-form {
    max-width: 620px;
    margin-inline: auto;
}

#ec-app .mc-form-label {
    display: block;
    text-align: start;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--mc-tx-2);
    margin-bottom: var(--mc-sp-2);
    padding-inline-start: var(--mc-sp-1);
}

#ec-app .mc-input-row {
    display: flex;
    flex-direction: column;
    gap: var(--mc-sp-3);
    align-items: stretch;
}
#ec-app .mc-input-row > .mc-btn-primary {
    width: 100%;
    justify-content: center;
}

#ec-app .mc-input-wrap {
    flex: 1;
    background: var(--mc-surface);
    border: 1.5px solid var(--mc-border);
    border-radius: var(--mc-r-lg);
    transition: all 0.2s var(--mc-ease);
    display: flex;
    align-items: center;
    padding: 0 var(--mc-sp-4) 0 var(--mc-sp-3);
    height: 56px;
}

#ec-app .mc-input-wrap:focus-within {
    border-color: var(--mc-brand);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

#ec-app .mc-input-at {
    color: var(--mc-tx-3);
    font-weight: 700;
    font-size: 1.125rem;
    margin-inline-end: var(--mc-sp-2);
    flex-shrink: 0;
}

#ec-app .mc-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    height: 100%;
    font-family: 'Cairo', sans-serif;
    direction: ltr;
    text-align: start;
    color: var(--mc-tx-1);
    font-weight: 500;
    min-width: 0;
}

#ec-app .mc-input::placeholder {
    color: var(--mc-tx-4);
    direction: ltr;
    font-weight: 400;
}

#ec-app .mc-input-clear {
    border: none;
    background: var(--mc-surface-3);
    color: var(--mc-tx-3);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-inline-start: var(--mc-sp-2);
    transition: all 0.15s var(--mc-ease);
}
#ec-app .mc-input-clear:hover { background: var(--mc-brand-soft); color: var(--mc-brand); }

#ec-app .mc-btn-primary {
    background: var(--mc-brand);
    color: white;
    border: none;
    padding: 0 var(--mc-sp-6);
    height: 56px;
    border-radius: var(--mc-r-lg);
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s var(--mc-ease);
    white-space: nowrap;
    font-family: 'Cairo', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: var(--mc-sp-2);
    box-shadow: var(--mc-sh-brand);
    flex-shrink: 0;
}

#ec-app .mc-btn-primary:hover:not(:disabled) {
    background: var(--mc-brand-hover);
    transform: translateY(-1px);
    box-shadow: var(--mc-sh-brand-lg);
}
#ec-app .mc-btn-primary:disabled { opacity: 0.65; cursor: not-allowed; }

#ec-app .mc-spin {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: mc-spin 0.8s linear infinite;
}
@keyframes mc-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════
   2. LOADING + ERROR
   ════════════════════════════════════════════════════════════ */

#ec-app .mc-loading {
    text-align: center;
    padding: var(--mc-sp-11) var(--mc-sp-6);
    background: var(--mc-surface);
    border-radius: var(--mc-r-2xl);
    border: 1px solid var(--mc-border);
    box-shadow: var(--mc-sh-2);
    margin-bottom: var(--mc-sp-9);
}

#ec-app .mc-loading-orb {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin: 0 auto var(--mc-sp-5);
    background: conic-gradient(from 0deg, #2f7fae, #3fc7ef, #57ddd0, #2f7fae);
    animation: mc-spin 2.4s linear infinite;
    position: relative;
}
#ec-app .mc-loading-orb::after {
    content: '';
    position: absolute;
    inset: 6px;
    background: var(--mc-surface);
    border-radius: 50%;
}
#ec-app .mc-loading-orb-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    color: var(--mc-brand);
    animation: mc-spin-reverse 2.4s linear infinite;
}
@keyframes mc-spin-reverse { to { transform: rotate(-360deg); } }

#ec-app .mc-loading h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--mc-tx-1);
    margin: 0 0 var(--mc-sp-2);
    letter-spacing: -0.01em;
}

#ec-app .mc-loading-sub {
    color: var(--mc-tx-3);
    font-size: 0.9375rem;
    margin: 0 auto var(--mc-sp-6);
    max-width: 420px;
}

#ec-app .mc-progress-wrap {
    max-width: 440px;
    margin: var(--mc-sp-5) auto 0;
}
#ec-app .mc-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mc-sp-2);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mc-tx-3);
}
#ec-app .mc-progress-pct {
    font-size: 1rem;
    font-weight: 900;
    background: var(--mc-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -0.01em;
    font-feature-settings: "lnum" 1, "tnum" 1;
    direction: ltr;
    min-width: 48px;
    text-align: end;
}
#ec-app .mc-progress {
    height: 10px;
    background: var(--mc-surface-3);
    border-radius: var(--mc-r-pill);
    overflow: hidden;
    position: relative;
}
#ec-app .mc-progress-fill {
    height: 100%;
    background: var(--mc-grad);
    width: 0%;
    transition: width 0.6s var(--mc-ease);
    border-radius: var(--mc-r-pill);
    position: relative;
    overflow: hidden;
}
#ec-app .mc-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.45) 50%,
        transparent 100%
    );
    animation: mc-progress-shine 1.6s linear infinite;
}
@keyframes mc-progress-shine {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

#ec-app .mc-error {
    background: rgba(239,68,68,0.10);
    border: 1px solid rgba(239,68,68,0.30);
    color: #fecaca;
    padding: var(--mc-sp-7) var(--mc-sp-6);
    border-radius: var(--mc-r-xl);
    text-align: center;
    margin: 0 auto var(--mc-sp-9);
    max-width: 560px;
}

#ec-app .mc-error-icon {
    width: 56px; height: 56px;
    margin: 0 auto var(--mc-sp-4);
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ec-app .mc-error-msg {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--mc-sp-5);
    line-height: 1.65;
}

/* ════════════════════════════════════════════════════════════
   3. RESULTS GRID
   ════════════════════════════════════════════════════════════ */

#ec-app .mc-results {
    display: grid;
    gap: var(--mc-sp-5);
    grid-template-columns: 1fr;
    grid-template-areas:
        "profile"
        "total"
        "tier"
        "metrics"
        "revenue"
        "notes"
        "actions"
        "meta";
}

@media (min-width: 768px) {
    #ec-app .mc-results {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        grid-template-areas:
            "profile  total"
            "tier     tier"
            "metrics  metrics"
            "revenue  revenue"
            "notes    notes"
            "actions  actions"
            "meta     meta";
    }
}

#ec-app .mc-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-r-2xl);
    padding: var(--mc-sp-7);
    box-shadow: var(--mc-sh-1);
}

#ec-app .mc-area-profile { grid-area: profile; }
#ec-app .mc-area-total   { grid-area: total; }
#ec-app .mc-area-tier    { grid-area: tier; }
#ec-app .mc-area-metrics { grid-area: metrics; padding: var(--mc-sp-5); background: transparent; border: 0; box-shadow: none; }
#ec-app .mc-area-revenue { grid-area: revenue; }
#ec-app .mc-area-notes   { grid-area: notes; }
#ec-app .mc-area-actions { grid-area: actions; padding: 0; background: transparent; border: 0; box-shadow: none; }
#ec-app .mc-area-meta    { grid-area: meta; padding: 0; background: transparent; border: 0; box-shadow: none; }

/* ───── PROFILE ───── */
#ec-app .mc-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#ec-app .mc-avatar-ring {
    position: relative;
    width: 104px;
    height: 104px;
    margin-bottom: var(--mc-sp-4);
}
#ec-app .mc-avatar-ring::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: var(--mc-grad);
    border-radius: 50%;
    z-index: 0;
}

#ec-app .mc-avatar,
#ec-app .mc-avatar-fallback {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid var(--mc-surface);
    background: var(--mc-surface-3);
}
#ec-app .mc-avatar { object-fit: cover; }
#ec-app .mc-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-tx-3);
}

#ec-app .mc-profile-name {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--mc-tx-1);
    line-height: 1.25;
    margin: 0 0 var(--mc-sp-1);
    letter-spacing: -0.015em;
}

#ec-app .mc-profile-handle {
    color: var(--mc-tx-3);
    font-size: 0.9375rem;
    font-weight: 500;
    margin-bottom: var(--mc-sp-5);
}

#ec-app .mc-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    background: var(--mc-surface-2);
    border-radius: var(--mc-r-lg);
    padding: var(--mc-sp-4) 0;
    border: 1px solid var(--mc-border-soft);
}

#ec-app .mc-stat {
    text-align: center;
    padding: 0 var(--mc-sp-3);
    position: relative;
}

#ec-app .mc-stat + .mc-stat::before {
    content: '';
    position: absolute;
    top: 50%;
    inset-inline-end: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 32px;
    background: var(--mc-divider);
}

#ec-app .mc-stat-val {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--mc-tx-1);
    line-height: 1.1;
    letter-spacing: -0.01em;
    display: block;
}

#ec-app .mc-stat-label {
    font-size: 0.75rem;
    color: var(--mc-tx-3);
    margin-top: 4px;
    font-weight: 500;
}

/* ───── TOTAL EARNINGS CARD ───── */
#ec-app .mc-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: var(--mc-sp-4) 0;
}

#ec-app .mc-total-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mc-tx-4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--mc-sp-3);
}

#ec-app .mc-total-val {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 900;
    line-height: 1.05;
    background: var(--mc-grad-money);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -0.025em;
    margin-bottom: var(--mc-sp-2);
}

#ec-app .mc-total-currency {
    color: var(--mc-tx-3);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--mc-sp-4);
}

#ec-app .mc-total-yearly {
    background: var(--mc-surface-2);
    border: 1px solid var(--mc-border-soft);
    border-radius: var(--mc-r-md);
    padding: var(--mc-sp-3) var(--mc-sp-5);
    font-size: 0.8125rem;
    color: var(--mc-tx-3);
    margin-top: var(--mc-sp-1);
}

#ec-app .mc-total-yearly strong {
    color: #34d399;
    font-weight: 800;
}

/* ───── TIER CARD ───── */
#ec-app .mc-tier-card {
    display: flex;
    align-items: center;
    gap: var(--mc-sp-4);
}

#ec-app .mc-tier-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--mc-r-md);
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#ec-app .mc-tier-info { flex: 1; }

#ec-app .mc-tier-label {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--mc-tx-1);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

#ec-app .mc-tier-desc {
    font-size: 0.9375rem;
    color: var(--mc-tx-3);
    line-height: 1.65;
    margin: 0;
}

/* ───── METRICS GRID ───── */
#ec-app .mc-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--mc-sp-4);
}

#ec-app .mc-metric {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-r-xl);
    padding: var(--mc-sp-5);
    transition: all 0.2s var(--mc-ease);
    box-shadow: var(--mc-sh-1);
}

#ec-app .mc-metric:hover {
    transform: translateY(-3px);
    box-shadow: var(--mc-sh-3);
    border-color: var(--mc-border-soft);
}

#ec-app .mc-metric-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--mc-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--mc-sp-4);
}

#ec-app .mc-mi-pink     { background: rgba(255,255,255,0.05); color: #7cc9ec; }
#ec-app .mc-mi-emerald  { background: rgba(16,185,129,0.14); color: #34d399; }
#ec-app .mc-mi-amber    { background: rgba(245,158,11,0.14); color: #fbbf24; }
#ec-app .mc-mi-sky      { background: rgba(59,130,246,0.14); color: #60a5fa; }
#ec-app .mc-mi-purple   { background: rgba(139,92,246,0.14); color: #a5b4fc; }

#ec-app .mc-metric-label {
    font-size: 0.8125rem;
    color: var(--mc-tx-3);
    font-weight: 500;
    margin-bottom: 4px;
}

#ec-app .mc-metric-val {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--mc-tx-1);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* ───── REVENUE SOURCES ───── */
#ec-app .mc-rev-header {
    display: flex;
    align-items: center;
    gap: var(--mc-sp-3);
    margin-bottom: var(--mc-sp-5);
}

#ec-app .mc-rev-header-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--mc-r-md);
    background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
    color: #34d399;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#ec-app .mc-rev-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--mc-tx-1);
    margin: 0;
    letter-spacing: -0.01em;
}

#ec-app .mc-rev-sub {
    font-size: 0.8125rem;
    color: var(--mc-tx-3);
    margin: 2px 0 0;
}

#ec-app .mc-rev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--mc-sp-4);
}

#ec-app .mc-rev {
    background: var(--mc-surface-2);
    border: 1px solid var(--mc-border-soft);
    border-radius: var(--mc-r-lg);
    padding: var(--mc-sp-5);
    transition: all 0.2s var(--mc-ease);
}

#ec-app .mc-rev:hover {
    background: var(--mc-surface);
    border-color: var(--mc-border);
    transform: translateY(-2px);
    box-shadow: var(--mc-sh-2);
}

#ec-app .mc-rev-source {
    display: flex;
    align-items: center;
    gap: var(--mc-sp-3);
    margin-bottom: var(--mc-sp-3);
}

#ec-app .mc-rev-source-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--mc-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#ec-app .mc-rev-rose    { background: rgba(255,255,255,0.05); color: #7cc9ec; }
#ec-app .mc-rev-amber   { background: rgba(245,158,11,0.14); color: #fbbf24; }
#ec-app .mc-rev-emerald { background: rgba(16,185,129,0.14); color: #34d399; }

#ec-app .mc-rev-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mc-tx-1);
    margin: 0;
}

#ec-app .mc-rev-amount {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--mc-tx-1);
    line-height: 1.2;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

#ec-app .mc-rev-amount-currency {
    font-size: 0.875rem;
    color: var(--mc-tx-3);
    font-weight: 600;
}

#ec-app .mc-rev-desc {
    font-size: 0.8125rem;
    color: var(--mc-tx-3);
    line-height: 1.6;
    margin: var(--mc-sp-2) 0 0;
}

#ec-app .mc-rev.locked .mc-rev-source-icon {
    background: var(--mc-surface-3);
    color: var(--mc-tx-4);
}
#ec-app .mc-rev.locked .mc-rev-amount {
    color: var(--mc-tx-4);
}

/* ───── NOTES ───── */
#ec-app .mc-notes-header {
    display: flex;
    align-items: center;
    gap: var(--mc-sp-3);
    margin-bottom: var(--mc-sp-4);
}

#ec-app .mc-notes-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--mc-r-md);
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#ec-app .mc-notes-title {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--mc-tx-1);
    margin: 0;
    letter-spacing: -0.01em;
}

#ec-app .mc-notes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mc-sp-2);
}

#ec-app .mc-note {
    background: var(--mc-surface-2);
    border-inline-start: 3px solid #F59E0B;
    border-radius: var(--mc-r-sm);
    padding: var(--mc-sp-3) var(--mc-sp-4);
    font-size: 0.875rem;
    color: var(--mc-tx-2);
    line-height: 1.7;
}

/* ───── ACTIONS + META ───── */
#ec-app .mc-actions {
    display: flex;
    gap: var(--mc-sp-3);
    flex-wrap: wrap;
    justify-content: center;
}

#ec-app .mc-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--mc-sp-2);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    color: var(--mc-tx-2);
    padding: 0 var(--mc-sp-5);
    height: 48px;
    border-radius: var(--mc-r-md);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s var(--mc-ease);
    font-family: 'Cairo', sans-serif;
    box-shadow: var(--mc-sh-1);
}

#ec-app .mc-btn-ghost:hover {
    border-color: rgba(47,127,174,0.30);
    color: var(--mc-tx-1);
    transform: translateY(-1px);
    box-shadow: var(--mc-sh-2);
}

#ec-app .mc-btn-ghost .fs-icon { color: var(--mc-tx-3); }
#ec-app .mc-btn-ghost:hover .fs-icon { color: var(--mc-brand); }

#ec-app .mc-meta {
    text-align: center;
    color: var(--mc-tx-4);
    font-size: 0.8125rem;
    line-height: 1.7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--mc-sp-2);
    padding-top: var(--mc-sp-2);
}

#ec-app .mc-meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--mc-tx-4);
    display: inline-block;
}

#ec-app .mc-meta-cache {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #34d399;
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   4. ANIMATIONS
   ════════════════════════════════════════════════════════════ */

@keyframes mc-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

#ec-app .mc-animate { animation: mc-fade-in 0.5s var(--mc-ease) backwards; }

#ec-app .mc-results > * { animation: mc-fade-in 0.5s var(--mc-ease) backwards; }
#ec-app .mc-results > *:nth-child(1) { animation-delay: 0.05s; }
#ec-app .mc-results > *:nth-child(2) { animation-delay: 0.10s; }
#ec-app .mc-results > *:nth-child(3) { animation-delay: 0.15s; }
#ec-app .mc-results > *:nth-child(4) { animation-delay: 0.20s; }
#ec-app .mc-results > *:nth-child(5) { animation-delay: 0.25s; }
#ec-app .mc-results > *:nth-child(6) { animation-delay: 0.30s; }
#ec-app .mc-results > *:nth-child(7) { animation-delay: 0.35s; }
#ec-app .mc-results > *:nth-child(8) { animation-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
    #ec-app *,
    #ec-app *::before,
    #ec-app *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ════════════════════════════════════════════════════════════
   5. RESPONSIVE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    #ec-app .mc-hero { padding: 40px 20px; border-radius: 22px; }

    #ec-app .mc-input-row { flex-direction: column; }
    #ec-app .mc-input-wrap { height: 52px; }
    #ec-app .mc-btn-primary {
        width: 100%;
        height: 52px;
        justify-content: center;
    }

    #ec-app .mc-card { padding: 24px 20px; border-radius: 20px; }
    #ec-app .mc-avatar-ring { width: 88px; height: 88px; }
    #ec-app .mc-profile-name { font-size: 1.25rem; }
    #ec-app .mc-stat { padding: 0 8px; }
    #ec-app .mc-stat-val { font-size: 1.0625rem; }
    #ec-app .mc-stat-label { font-size: 0.6875rem; }
    #ec-app .mc-total-val { font-size: 1.75rem; }
    #ec-app .mc-metric { padding: 18px; }
    #ec-app .mc-metric-val { font-size: 1.375rem; }
    #ec-app .mc-tier-card { flex-direction: column; align-items: flex-start; gap: 12px; }
    #ec-app .mc-rev { padding: 16px; }
    #ec-app .mc-rev-amount { font-size: 1.25rem; }
}

@media (max-width: 991.98px) {
    #ec-app .mc-btn-primary,
    #ec-app .mc-btn-ghost { min-height: 44px; }
}

/* ════════════════════════════════════════════════════════════
   BEST-TIME ANALYZER، Results CSS
   ════════════════════════════════════════════════════════════ */

/* ────────── Container ────────── */
#ec-app .bt-results {
    display: flex;
    flex-direction: column;
    gap: var(--ec-sp-5);
}

/* ────────── HERO Card ────────── */
#ec-app .bt-hero {
    position: relative;
    border-radius: var(--ec-r-2xl);
    padding: var(--ec-sp-6) var(--ec-sp-5);
    color: #FFFFFF;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(63, 199, 239, 0.30) 0%, transparent 55%),
        radial-gradient(100% 80% at 0% 100%, rgba(47, 127, 174, 0.40) 0%, transparent 55%),
        linear-gradient(135deg, #2f7fae 0%, #3fc7ef 50%, #5457E6 100%);
    box-shadow:
        0 20px 50px -12px rgba(0, 0, 0, 0.45),
        0 8px 16px -4px rgba(0, 0, 0, 0.30);
}

#ec-app .bt-hero-bg {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(63, 199, 239, 0.20) 0%, transparent 45%);
    z-index: -1;
}

#ec-app .bt-hero-content {
    position: relative;
    text-align: center;
}

#ec-app .bt-hero-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: var(--ec-sp-3);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

#ec-app .bt-hero-label {
    font-size: 0.9375rem;
    font-weight: 700;
    opacity: 0.95;
    margin-bottom: var(--ec-sp-4);
    letter-spacing: 0.01em;
}

#ec-app .bt-hero-best {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--ec-r-xl);
    padding: var(--ec-sp-4) var(--ec-sp-5);
    margin-bottom: var(--ec-sp-4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

#ec-app .bt-hero-best-label {
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: var(--ec-sp-2);
}

#ec-app .bt-hero-best-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ec-sp-3);
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: var(--ec-sp-2);
    letter-spacing: -0.02em;
}
#ec-app .bt-hero-best-day {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}
#ec-app .bt-hero-best-sep {
    opacity: 0.55;
    font-weight: 400;
}
#ec-app .bt-hero-best-slot {
    direction: ltr;
    font-feature-settings: "lnum" 1, "tnum" 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}

#ec-app .bt-hero-best-score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.95;
}
#ec-app .bt-hero-best-score-icon {
    font-size: 1.125rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.20));
}
#ec-app .bt-hero-best-score strong {
    font-weight: 900;
    direction: ltr;
    margin-inline-start: 4px;
}

/* ═══ أفضل 3 أوقات داخل Hero (Top 3 podium-style) ═══ */
/* الـ "أفضل" eyebrow فوق العنوان الرئيسي، gap صغير ليقرأ كعنوان متماسك */
#ec-app .bt-hero-top3-title {
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: 4px;
    text-align: center;
}
/* لمّا يجي bt-hero-label مباشرة بعد bt-hero-top3-title، نلصق العنوان فوق */
#ec-app .bt-hero-top3-title + .bt-hero-label {
    margin-top: 0;
}

#ec-app .bt-hero-top3-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ec-sp-3);
    margin-bottom: var(--ec-sp-4);
    /* مسافة علوية لاستيعاب أرقام الترتيب العائمة فوق كل بطاقة */
    padding-top: 24px;
}
@media (min-width: 640px) {
    #ec-app .bt-hero-top3-grid {
        grid-template-columns: 1fr 1fr 1fr;   /* بطاقات متساوية بالعرض */
        align-items: stretch;
    }
}

#ec-app .bt-hero-top3-card {
    position: relative;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--ec-r-xl);
    padding: var(--ec-sp-5) var(--ec-sp-4) var(--ec-sp-4);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: all 0.25s var(--ec-ease);
}
#ec-app .bt-hero-top3-card:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
}

/* البطاقة الأفضل (#1)، نفس الحجم لكن أبرز بصرياً (خلفية + إطار أقوى) */
#ec-app .bt-hero-top3-card.is-best {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.50);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 12px 32px -8px rgba(0, 0, 0, 0.25);
    /* نفس الـ padding كباقي البطاقات، لا تكبير */
}

/* الرقم (#1, #2, #3)، في الوسط أفقياً، يطفو فوق البطاقة */
#ec-app .bt-hero-top3-rank {
    position: absolute;
    top: -16px;
    /* تثبيت أفقي موثوق، يعمل في RTL وLTR بنفس الطريقة */
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mc-surface-3);
    color: #3fc7ef;
    font-size: 1rem;
    font-weight: 900;
    border: 3px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        0 6px 16px -3px rgba(0, 0, 0, 0.30),
        0 2px 4px rgba(0, 0, 0, 0.10);
    direction: ltr;
    line-height: 1;
    z-index: 3;
    transition: transform 0.22s var(--ec-ease);
}
#ec-app .bt-hero-top3-card:hover .bt-hero-top3-rank {
    transform: translateX(-50%) scale(1.08);
}

/* الرقم الأفضل (#1)، أكبر + ذهبي */
#ec-app .bt-hero-top3-card.is-best .bt-hero-top3-rank {
    width: 44px;
    height: 44px;
    top: -22px;
    font-size: 1.25rem;
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    color: #FFFFFF;
    border-color: #FFFFFF;
    box-shadow:
        0 8px 22px -4px rgba(251, 191, 36, 0.65),
        0 2px 4px rgba(0, 0, 0, 0.15);
}
#ec-app .bt-hero-top3-card.is-best:hover .bt-hero-top3-rank {
    transform: translateX(-50%) scale(1.08);
}

/* جوّال: أرقام أصغر */
@media (max-width: 575.98px) {
    #ec-app .bt-hero-top3-rank {
        width: 30px;
        height: 30px;
        top: -14px;
        font-size: 0.875rem;
        border-width: 2.5px;
    }
    #ec-app .bt-hero-top3-card.is-best .bt-hero-top3-rank {
        width: 38px;
        height: 38px;
        top: -19px;
        font-size: 1.0625rem;
    }
}

/* شارة "★ الأفضل"، تطفو فوق رقم #1 (أعلى البطاقة) */
#ec-app .bt-hero-top3-crown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* مُتموضعة فوق رقم #1 (الذي عند top: -22px للبطاقة .is-best)
       بحيث تكون الشارة فوق الرقم مباشرة في وسط البطاقة أفقياً */
    position: absolute;
    top: -52px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 4;
    padding: 3px 12px;
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    color: #FFFFFF;
    border-radius: var(--ec-r-pill);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 3px 10px -2px rgba(251, 191, 36, 0.50);
}
#ec-app .bt-hero-top3-crown svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* البطاقات الـ 3 بنفس الـ margin-top، لا إزاحة عمودية للوقت الأفضل */
/* (margin-top: 14px أُزيلت حسب طلب المستخدم للتوحيد) */

/* جوّال، chip "الأفضل" أصغر + موضع معدَّل ليتماشى مع رقم #1 الأصغر
   (الرقم على الجوّال يكون عند top: -19px وحجمه 38×38) */
@media (max-width: 575.98px) {
    #ec-app .bt-hero-top3-crown {
        top: -44px;          /* فوق الرقم الأصغر على الجوّال */
        padding: 2px 10px;
        font-size: 0.625rem;
        margin: 0;            /* لا حاجة للـ margin-bottom، absolute */
    }
    #ec-app .bt-hero-top3-crown svg {
        width: 10px;
        height: 10px;
    }
}

/* نفس الأحجام في كل البطاقات الـ 3، لا تكبير للبطاقة الأفضل */
#ec-app .bt-hero-top3-day {
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: var(--ec-sp-1);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

#ec-app .bt-hero-top3-time {
    font-size: 0.9375rem;
    font-weight: 700;
    opacity: 0.95;
    direction: ltr;
    unicode-bidi: isolate;
    font-feature-settings: "lnum" 1, "tnum" 1;
    margin-bottom: var(--ec-sp-3);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

#ec-app .bt-hero-top3-score {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    background: rgba(0, 0, 0, 0.15);
    padding: 4px 10px;
    border-radius: var(--ec-r-pill);
    direction: ltr;
}
#ec-app .bt-hero-top3-score-num {
    font-size: 1.25rem;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1;
}
/* نفس حجم النقاط في كل البطاقات */
#ec-app .bt-hero-top3-score-max {
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.65;
    line-height: 1;
}

/* جوّال: 3 بطاقات تحت بعض (بدون عرض جنباً إلى جنب) */
@media (max-width: 639.98px) {
    #ec-app .bt-hero-top3-card {
        padding: var(--ec-sp-4) var(--ec-sp-3) var(--ec-sp-3);
    }
    #ec-app .bt-hero-top3-card.is-best {
        padding-block: var(--ec-sp-5) var(--ec-sp-4);
    }
    #ec-app .bt-hero-top3-day { font-size: 1rem; }
    #ec-app .bt-hero-top3-card.is-best .bt-hero-top3-day { font-size: 1.25rem; }
    #ec-app .bt-hero-top3-time { font-size: 0.8125rem; }
}

#ec-app .bt-hero-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ec-sp-2);
}

/* badge جودة التحليل (good / mid / low) */
#ec-app .bt-quality-good {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
    color: #FFFFFF;
}
#ec-app .bt-quality-mid {
    background: rgba(245, 158, 11, 0.25) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
    color: #FFFFFF;
}
#ec-app .bt-quality-low {
    background: rgba(248, 113, 113, 0.30) !important;
    border-color: rgba(248, 113, 113, 0.55) !important;
    color: #FFFFFF;
}

/* ملاحظة + تحذير تحت chips الـ Hero */
#ec-app .bt-hero-note {
    margin-top: var(--ec-sp-3);
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--ec-r-pill);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #FFFFFF;
    text-align: center;
    line-height: 1.5;
}
#ec-app .bt-hero-note .tt-num {
    font-weight: 900;
    background: rgba(255, 255, 255, 0.25);
    padding: 2px 8px;
    border-radius: var(--ec-r-pill);
    margin: 0 2px;
    direction: ltr;
    unicode-bidi: isolate;
}
#ec-app .bt-hero-warn {
    margin-top: var(--ec-sp-2);
    padding: 8px 14px;
    background: rgba(245, 158, 11, 0.35);
    border: 1px solid rgba(245, 158, 11, 0.60);
    border-radius: var(--ec-r-pill);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #FFFFFF;
    text-align: center;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}

#ec-app .bt-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--ec-r-pill);
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 700;
}

/* ────────── Cards (generic) ────────── */
#ec-app .bt-card {
    background: linear-gradient(180deg, var(--tt-surface) 0%, var(--tt-surface-2) 100%);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-r-2xl);
    padding: var(--ec-sp-5);
    box-shadow:
        0 8px 24px -10px rgba(15, 23, 42, 0.08),
        0 2px 6px -2px rgba(15, 23, 42, 0.04);
    /* منع أي overflow داخلي يولّد scrollbars غير مرغوبة */
    overflow: hidden;
}

#ec-app .bt-card-header {
    display: flex;
    align-items: center;
    gap: var(--ec-sp-3);
    margin-bottom: var(--ec-sp-5);
}

#ec-app .bt-card-header-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--ec-r-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.10);
}

#ec-app .bt-ico-pink {
    background: linear-gradient(135deg, #2f7fae, #3fc7ef);
    color: #FFFFFF;
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.40);
}
#ec-app .bt-ico-sky {
    background: linear-gradient(135deg, #0EA5E9, #0284C7);
    color: #FFFFFF;
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.40);
}
#ec-app .bt-ico-amber {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #FFFFFF;
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.40);
}
#ec-app .bt-ico-emerald {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #FFFFFF;
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.40);
}
#ec-app .bt-ico-purple {
    background: linear-gradient(135deg, #5457E6, #5457E6);
    color: #FFFFFF;
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.40);
}

#ec-app .bt-card-title {
    margin: 0 0 2px;
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--ec-tx-1);
    line-height: 1.3;
    letter-spacing: -0.01em;
}
#ec-app .bt-card-sub {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ec-tx-3);
    font-weight: 500;
    line-height: 1.5;
}

/* ────────── Top 7 Grid ────────── */
#ec-app .bt-top7-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ec-sp-3);
}
@media (min-width: 576px) {
    #ec-app .bt-top7-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    #ec-app .bt-top7-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

#ec-app .bt-top-slot {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ec-sp-3);
    background: var(--ec-surface);
    border: 1.5px solid var(--ec-border);
    border-radius: var(--ec-r-lg);
    padding: var(--ec-sp-3) var(--ec-sp-4);
    transition: all 0.25s var(--ec-ease);
    overflow: hidden;
}
#ec-app .bt-top-slot:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 127, 174, 0.25);
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.4);
}

#ec-app .bt-top-slot.is-best {
    background: linear-gradient(135deg, rgba(47, 127, 174, 0.06), rgba(63, 199, 239, 0.04));
    border-color: rgba(47, 127, 174, 0.40);
    box-shadow:
        0 12px 28px -8px rgba(47, 127, 174, 0.25),
        0 0 0 1px rgba(47, 127, 174, 0.10);
}
/* "الأفضل" badge، أصبح inline chip بجانب اليوم بدل ::before المطلق
   (التغيير يحلّ مشكلة تداخل الـ badge مع رقم الجودة) */
#ec-app .bt-top-best-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #2f7fae, #3fc7ef);
    color: #FFFFFF;
    border-radius: var(--ec-r-pill);
    font-size: 0.625rem;
    font-weight: 800;
    box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin-inline-start: var(--ec-sp-2);
    flex-shrink: 0;
}
#ec-app .bt-top-best-pill svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

#ec-app .bt-top-rank {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ec-surface-3);
    color: var(--ec-tx-3);
    font-size: 0.9375rem;
    font-weight: 900;
    direction: ltr;
}
#ec-app .bt-top-slot.is-best .bt-top-rank {
    background: linear-gradient(135deg, #2f7fae, #3fc7ef);
    color: #FFFFFF;
    box-shadow: 0 6px 14px -3px rgba(0, 0, 0, 0.4);
}

#ec-app .bt-top-info {
    flex: 1;
    min-width: 0;
}
#ec-app .bt-top-day {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--ec-tx-1);
    line-height: 1.2;
    margin-bottom: 2px;
}
#ec-app .bt-top-time {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ec-tx-3);
    direction: ltr;
    text-align: start;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

#ec-app .bt-top-score {
    text-align: center;
    flex-shrink: 0;
    padding-inline-start: var(--ec-sp-3);
    border-inline-start: 1px solid var(--ec-border-soft);
}
#ec-app .bt-top-score-num {
    font-size: 1.375rem;
    font-weight: 900;
    line-height: 1;
    color: var(--ec-brand);
    direction: ltr;
    font-feature-settings: "lnum" 1, "tnum" 1;
    margin-bottom: 2px;
}
#ec-app .bt-top-slot.is-best .bt-top-score-num {
    background: var(--ec-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#ec-app .bt-top-score-label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ec-tx-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ────────── Heatmap ────────── */
#ec-app .bt-heatmap {
    display: grid;
    grid-template-columns: minmax(64px, 88px) repeat(6, minmax(64px, 1fr));
    gap: 4px;
    margin-bottom: var(--ec-sp-3);
    /* لا scroll أفقي/رأسي، الجدول يتأقلم مع المساحة المتاحة */
    overflow: visible;
    width: 100%;
    max-width: 100%;
}

#ec-app .bt-heatmap-corner {
    background: transparent;
}

#ec-app .bt-heatmap-col-label {
    /* ⭐ display: grid + place-items: center = أكثر طريقة توسيط موثوقة في CSS
       تتجاوز أي تضارب مع unicode-bidi أو direction أو flex */
    display: grid;
    place-items: center;
    text-align: center;
    /* تأكيد أن العنوان يأخذ كامل عرض خلية الـ grid الأم
       (justify-self/align-self: stretch ضمان إضافي) */
    width: 100%;
    min-width: 0;
    justify-self: stretch;
    box-sizing: border-box;
    padding: 6px 2px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ec-tx-3);
    font-feature-settings: "lnum" 1, "tnum" 1;
    line-height: 1.3;
    /* السماح بسطر ثاني للنص الطويل "من 06 إلى 09 م" بدون قطع */
    white-space: normal;
    overflow-wrap: anywhere;
    /* unicode-bidi: isolate يضمن أن النص الداخلي (Arabic + LTR numbers)
       لا يؤثر على موقع العنصر داخل grid الأم، يبقى مُتوسَّطاً */
    unicode-bidi: isolate;
}

#ec-app .bt-heatmap-row-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-inline-end: var(--ec-sp-2);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ec-tx-2);
}

#ec-app .bt-heatmap-cell {
    /* arrr aspect-ratio: 1 كانت تجعل الخلايا ضخمة عندما الـ grid عريض → مشكلة overflow */
    aspect-ratio: 1.1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 800;
    transition: all 0.2s var(--ec-ease);
    border: 1px solid transparent;
    min-height: 52px;
    max-height: 88px;
    min-width: 0;
    cursor: default;
    position: relative;
    overflow: hidden;
}
#ec-app .bt-heatmap-cell:hover {
    transform: scale(1.08);
    z-index: 1;
    box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.20);
}

#ec-app .bt-heatmap-cell {
    flex-direction: column;
    gap: 1px;
}

#ec-app .bt-heatmap-cell-num {
    font-size: 0.9375rem;
    font-weight: 900;
    direction: ltr;
    font-feature-settings: "lnum" 1, "tnum" 1;
    line-height: 1;
}

/* وحدة القياس داخل الخلية للمستخدم (فيديو / فيديوهات)، تظهر تحت الرقم */
#ec-app .bt-heatmap-cell-unit {
    font-size: 0.5625rem;
    font-weight: 700;
    opacity: 0.82;
    line-height: 1;
    margin-top: 1px;
    letter-spacing: 0;
    white-space: nowrap;
}

/* الـ score في الجدول الذهبي: "X/100" على سطر واحد inline */
#ec-app .bt-heatmap-cell-score {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-size: 0.9375rem;
    font-weight: 900;
    direction: ltr;
    font-feature-settings: "lnum" 1, "tnum" 1;
    line-height: 1;
    white-space: nowrap;
}
#ec-app .bt-heatmap-cell-score-max {
    font-size: 0.5625rem;
    font-weight: 700;
    opacity: 0.7;
    letter-spacing: 0;
    line-height: 1;
}

/* علامة "-" في الخلية الفارغة (بدلاً من فراغ تام) */
#ec-app .bt-heatmap-cell-empty-mark {
    font-size: 0.875rem;
    font-weight: 700;
    color: #CBD5E1;
    line-height: 1;
}

/* ══════════════ دليل قراءة الجدول (Heatmap Guide) ══════════════ */
#ec-app .bt-heatmap-guide {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ec-sp-2);
    padding: var(--ec-sp-3) var(--ec-sp-4);
    background: var(--ec-surface-2);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-r-md);
    margin-bottom: var(--ec-sp-4);
}
@media (min-width: 768px) {
    #ec-app .bt-heatmap-guide { grid-template-columns: repeat(3, 1fr); }
}

#ec-app .bt-heatmap-guide-item {
    display: flex;
    align-items: center;
    gap: var(--ec-sp-3);
}

#ec-app .bt-heatmap-guide-demo {
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
    color: #FFFFFF;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
}
#ec-app .bt-heatmap-guide-num {
    font-size: 0.9375rem;
    font-weight: 900;
    line-height: 1;
    direction: ltr;
    font-feature-settings: "lnum" 1, "tnum" 1;
}
#ec-app .bt-heatmap-guide-unit {
    font-size: 0.5rem;
    font-weight: 700;
    opacity: 0.85;
    line-height: 1;
    margin-top: 1px;
}

#ec-app .bt-heatmap-guide-scale {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}
#ec-app .bt-heatmap-guide-scale-cell {
    width: 14px;
    height: 22px;
    border-radius: 4px;
}

#ec-app .bt-heatmap-guide-star {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FBBF24, #F59E0B);
    color: #FFFFFF;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 3px 8px -1px rgba(251, 191, 36, 0.55);
}

#ec-app .bt-heatmap-guide-text {
    font-size: 0.8125rem;
    color: var(--ec-tx-2);
    line-height: 1.4;
}
#ec-app .bt-heatmap-guide-text strong {
    color: var(--ec-tx-1);
    font-weight: 800;
}

/* جوّال، مساحة أقل + خطوط أصغر */
@media (max-width: 575.98px) {
    #ec-app .bt-heatmap-guide { padding: var(--ec-sp-3); }
    #ec-app .bt-heatmap-guide-demo { width: 42px; height: 42px; }
    #ec-app .bt-heatmap-guide-text { font-size: 0.75rem; }
}

#ec-app .bt-heat-0 { background: var(--ec-surface-3); color: var(--ec-tx-4); border-color: var(--ec-border-soft); }
#ec-app .bt-heat-1 { background: rgba(47,127,174,0.20); color: #7cc9ec; }
#ec-app .bt-heat-2 { background: rgba(47,127,174,0.35); color: #7cc9ec; }
#ec-app .bt-heat-3 { background: #7FC9EC; color: #0F3D5A; }
#ec-app .bt-heat-4 { background: linear-gradient(135deg, #3f8fc4, #2f7fae); color: #FFFFFF; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.4); }
#ec-app .bt-heat-5 { background: linear-gradient(135deg, #2f7fae 0%, #154a6d 100%); color: #FFFFFF; box-shadow: 0 6px 14px -2px rgba(0, 0, 0, 0.4); }

/* ── خلية فارغة (لم تنشر هنا)، تصميم لطيف بدل نقطة وحيدة ── */
#ec-app .bt-heatmap-cell.is-empty {
    background-image:
        linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.08) 49%, rgba(255,255,255,0.08) 51%, transparent 52%);
    background-color: var(--ec-surface-2);
    background-size: 8px 8px;
    border: 1px dashed rgba(255,255,255,0.09);
    opacity: 0.6;
}
#ec-app .bt-heatmap-cell.is-empty:hover {
    opacity: 1;
    background-color: var(--ec-surface-3);
}

/* ── خلية الذروة (peak)، تاج/نجمة + glow ── */
#ec-app .bt-heatmap-cell.is-peak {
    box-shadow:
        0 0 0 2.5px #FFFFFF,
        0 0 0 4px #FBBF24,
        0 8px 20px -4px rgba(251, 191, 36, 0.45);
    z-index: 2;
    transform: scale(1.02);
}
#ec-app .bt-heatmap-cell.is-peak:hover {
    transform: scale(1.12);
}
/* ⭐ شارة الذروة (Peak Star)، داخل الخلية بدون قطع، مع pulse animation */
#ec-app .bt-heatmap-cell-crown {
    position: absolute;
    top: 4px;
    inset-inline-start: 4px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    color: #FFFFFF;
    border-radius: 50%;
    border: 1.5px solid #FFFFFF;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.40),
        0 3px 10px -1px rgba(251, 191, 36, 0.65),
        0 1px 3px rgba(217, 119, 6, 0.40);
    z-index: 3;
    animation: btCrownPulse 2.4s ease-in-out infinite;
    pointer-events: none;
}
#ec-app .bt-heatmap-cell-crown svg {
    width: 14px !important;
    height: 14px !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.20));
    stroke-width: 2.2;
}

@keyframes btCrownPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 0.40),
            0 3px 10px -1px rgba(251, 191, 36, 0.65),
            0 1px 3px rgba(217, 119, 6, 0.40);
    }
    50% {
        transform: scale(1.10);
        box-shadow:
            0 0 0 3px rgba(255, 255, 255, 0.55),
            0 5px 16px -1px rgba(251, 191, 36, 0.85),
            0 2px 4px rgba(217, 119, 6, 0.50);
    }
}

/* جوّال، نجمة أصغر */
@media (max-width: 575.98px) {
    #ec-app .bt-heatmap-cell-crown {
        width: 18px;
        height: 18px;
        top: 3px;
        inset-inline-start: 3px;
        border-width: 1.5px;
    }
    #ec-app .bt-heatmap-cell-crown svg {
        width: 11px !important;
        height: 11px !important;
    }
}

/* legend labels variation */
#ec-app .bt-heatmap-legend-label--end {
    font-size: 0.6875rem;
    color: var(--ec-tx-4);
}

/* ══════════════ ملخّص الـ heatmap (4 إحصاءات تحت الجدول) ══════════════ */
#ec-app .bt-insights {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ec-sp-2);
    margin-top: var(--ec-sp-4);
}
@media (min-width: 576px) {
    #ec-app .bt-insights { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px) {
    #ec-app .bt-insights { grid-template-columns: repeat(4, 1fr); }
}

#ec-app .bt-insight {
    display: flex;
    align-items: center;
    gap: var(--ec-sp-3);
    padding: var(--ec-sp-3) var(--ec-sp-4);
    background: var(--ec-surface-2);
    border: 1px solid var(--ec-border-soft);
    border-radius: var(--ec-r-md);
    transition: all 0.22s var(--ec-ease);
}
#ec-app .bt-insight:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.30);
    background: var(--ec-surface-3);
    border-color: rgba(47, 127, 174, 0.20);
}

#ec-app .bt-insight-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ec-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.10);
}

#ec-app .bt-insight-body {
    flex: 1;
    min-width: 0;
}
#ec-app .bt-insight-label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ec-tx-4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
#ec-app .bt-insight-value {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--ec-tx-1);
    line-height: 1.3;
}
#ec-app .bt-insight-value .tt-num {
    direction: ltr;
    unicode-bidi: isolate;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ══════════════════════════════════════════════════════════════════════
   فواصل المراحل (Phase Dividers)، مرحلة 1 / 2 / 3
   ══════════════════════════════════════════════════════════════════════ */
#ec-app .bt-phase-divider {
    display: flex;
    align-items: center;
    gap: var(--ec-sp-3);
    margin: var(--ec-sp-8) 0 var(--ec-sp-5);
    position: relative;
}
#ec-app .bt-phase-divider-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ec-border), transparent);
    border-radius: 2px;
}
#ec-app .bt-phase-divider-label {
    display: inline-flex;
    align-items: center;
    gap: var(--ec-sp-2);
    padding: 10px 22px 10px 14px;
    background: linear-gradient(180deg, var(--tt-surface) 0%, var(--tt-surface-2) 100%);
    border: 1.5px solid var(--ec-border);
    border-radius: var(--ec-r-pill);
    font-size: 0.9375rem;
    font-weight: 900;
    color: var(--ec-tx-1);
    box-shadow:
        0 8px 20px -6px rgba(15, 23, 42, 0.10),
        0 2px 4px -1px rgba(15, 23, 42, 0.04);
    white-space: nowrap;
    transition: all 0.3s var(--ec-ease);
}
#ec-app .bt-phase-divider-label:hover {
    transform: translateY(-1px);
    box-shadow:
        0 12px 28px -8px rgba(15, 23, 42, 0.15),
        0 4px 8px -2px rgba(15, 23, 42, 0.06);
}

/* رقم المرحلة (badge دائري ملوّن) */
#ec-app .bt-phase-divider-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 900;
    direction: ltr;
    flex-shrink: 0;
}

/* المرحلة 1، خطّتك الأسبوعية (وردي/بنفسجي) */
#ec-app .bt-phase-1 .bt-phase-divider-num {
    background: linear-gradient(135deg, #2f7fae, #3fc7ef);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
}
#ec-app .bt-phase-1 .bt-phase-divider-label {
    border-color: rgba(47, 127, 174, 0.20);
}

/* المرحلة 2، تحليل وضعك (سماوي) */
#ec-app .bt-phase-2 .bt-phase-divider-num {
    background: linear-gradient(135deg, #0EA5E9, #0284C7);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
}
#ec-app .bt-phase-2 .bt-phase-divider-label {
    border-color: rgba(14, 165, 233, 0.20);
}

/* المرحلة 3، معلومات مرجعية (كهرماني/أصفر) */
#ec-app .bt-phase-3 .bt-phase-divider-num {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
}
#ec-app .bt-phase-3 .bt-phase-divider-label {
    border-color: rgba(245, 158, 11, 0.20);
}

@media (max-width: 575.98px) {
    #ec-app .bt-phase-divider { margin: var(--ec-sp-6) 0 var(--ec-sp-4); }
    #ec-app .bt-phase-divider-label { padding: 8px 16px 8px 10px; font-size: 0.8125rem; }
    #ec-app .bt-phase-divider-num { width: 26px; height: 26px; font-size: 0.875rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   أقسام جديدة: تحليل الأيام · المجالات · الأوقات السيئة · المدن · المناسبات · النافذة
   ══════════════════════════════════════════════════════════════════════ */

/* ═══════════════ أفضل 7 أوقات (Compact List، مطابق لتحليل الأيام) ═══════════════ */
#ec-app .bt-top7-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* صفّ مدمج، 5 أعمدة في 44px ارتفاع */
#ec-app .bt-top-item {
    display: grid;
    grid-template-columns: 28px auto minmax(120px, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: var(--ec-surface-2);
    border: 1px solid var(--ec-border-soft);
    border-radius: 10px;
    transition: all 0.22s var(--ec-ease);
    min-height: 44px;
}
#ec-app .bt-top-item:hover {
    background: var(--ec-surface-3);
    border-color: rgba(47, 127, 174, 0.20);
    transform: translateX(-2px);
}

/* الأفضل (#1)، gradient وردي/بنفسجي */
#ec-app .bt-top-item.is-top {
    background: linear-gradient(135deg, rgba(47, 127, 174, 0.07), rgba(63, 199, 239, 0.04));
    border-color: rgba(47, 127, 174, 0.30);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.3);
}
#ec-app .bt-top-item.is-good { border-color: rgba(16, 185, 129, 0.22); }
#ec-app .bt-top-item.is-mid  { border-color: rgba(245, 158, 11, 0.18); }

/* رقم الترتيب */
#ec-app .bt-top-rank {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ec-surface-3);
    color: var(--ec-tx-3);
    font-size: 0.75rem;
    font-weight: 900;
    direction: ltr;
    flex-shrink: 0;
}
#ec-app .bt-top-item.is-top .bt-top-rank {
    background: linear-gradient(135deg, #2f7fae, #3fc7ef);
    color: #FFFFFF;
    box-shadow: 0 3px 8px -2px rgba(0, 0, 0, 0.4);
    width: 28px;
    height: 28px;
    font-size: 0.8125rem;
}
#ec-app .bt-top-item.is-good .bt-top-rank {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #FFFFFF;
}

/* اسم اليوم */
#ec-app .bt-top-day {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--ec-tx-1);
    min-width: 56px;
}

/* شريط التقدّم، يحتوي على الـ score داخله */
#ec-app .bt-top-bar-inline {
    position: relative;
    height: 22px;
    background: var(--ec-surface-3);
    border-radius: 11px;
    overflow: hidden;
    min-width: 0;
}
#ec-app .bt-top-bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    background: linear-gradient(90deg, #2f7fae, #3fc7ef, #57ddd0);
    border-radius: 11px;
    transition: width 0.6s var(--ec-ease);
}
#ec-app .bt-top-bar-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-end: 8px;
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    direction: ltr;
    z-index: 1;
}

/* pill الوقت، مع أيقونة الساعة */
#ec-app .bt-top-time-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--ec-tx-2);
    font-weight: 700;
    white-space: nowrap;
    background: var(--ec-surface-3);
    border: 1px solid var(--ec-border-soft);
    padding: 4px 10px;
    border-radius: var(--ec-r-pill);
    direction: ltr;
    unicode-bidi: isolate;
}
#ec-app .bt-top-time-pill svg {
    color: var(--ec-tx-4);
    flex-shrink: 0;
}

/* status pill، التصنيف الذكي */
#ec-app .bt-top-status {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: var(--ec-r-pill);
    font-size: 0.6875rem;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
#ec-app .bt-top-status svg {
    flex-shrink: 0;
}
#ec-app .bt-top-status--best        { background: linear-gradient(135deg, #FBBF24, #F59E0B); color: #FFFFFF; border: 1px solid rgba(217, 119, 6, 0.40); box-shadow: 0 2px 6px -1px rgba(251, 191, 36, 0.45); }
#ec-app .bt-top-status--optimal     { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.35); }
#ec-app .bt-top-status--opportunity { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.35); }
#ec-app .bt-top-status--good        { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.35); }
#ec-app .bt-top-status--ok          { background: rgba(255,255,255,0.06); color: #cbd5e1; border: 1px solid rgba(255,255,255,0.12); }

/* جوّال: تقليل الأعمدة + إخفاء الـ time pill (الـ status يحتوي الـ slot ضمنياً) */
@media (max-width: 767.98px) {
    #ec-app .bt-top-item {
        grid-template-columns: 24px auto 1fr auto;
        gap: 8px;
        padding: 6px 10px;
        min-height: 40px;
    }
    #ec-app .bt-top-time-pill { display: none; }
    #ec-app .bt-top-day { font-size: 0.875rem; }
    #ec-app .bt-top-rank { width: 22px; height: 22px; font-size: 0.6875rem; }
    #ec-app .bt-top-item.is-top .bt-top-rank { width: 24px; height: 24px; }
}

/* ═══════════════ تحليل أيام الأسبوع (Compact Days Analysis) ═══════════════ */
#ec-app .bt-days-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* الصفّ المدمج: 5 أعمدة في 44px ارتفاع فقط */
#ec-app .bt-day-item {
    display: grid;
    grid-template-columns: 28px auto minmax(120px, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: var(--ec-surface-2);
    border: 1px solid var(--ec-border-soft);
    border-radius: 10px;
    transition: all 0.22s var(--ec-ease);
    min-height: 44px;
}
#ec-app .bt-day-item:hover {
    background: var(--ec-surface-3);
    border-color: rgba(47, 127, 174, 0.20);
    transform: translateX(-2px);
}

/* الأول (#1)، gradient وردي/بنفسجي مع border أبرز */
#ec-app .bt-day-item.is-top {
    background: linear-gradient(135deg, rgba(47, 127, 174, 0.07), rgba(63, 199, 239, 0.04));
    border-color: rgba(47, 127, 174, 0.30);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.3);
}
#ec-app .bt-day-item.is-good { border-color: rgba(16, 185, 129, 0.22); }
#ec-app .bt-day-item.is-mid  { border-color: rgba(245, 158, 11, 0.18); }

/* رقم الترتيب، دائري صغير */
#ec-app .bt-day-rank {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ec-surface-3);
    color: var(--ec-tx-3);
    font-size: 0.75rem;
    font-weight: 900;
    direction: ltr;
    flex-shrink: 0;
}
#ec-app .bt-day-item.is-top .bt-day-rank {
    background: linear-gradient(135deg, #2f7fae, #3fc7ef);
    color: #FFFFFF;
    box-shadow: 0 3px 8px -2px rgba(0, 0, 0, 0.4);
    width: 28px;
    height: 28px;
    font-size: 0.8125rem;
}
#ec-app .bt-day-item.is-good .bt-day-rank {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #FFFFFF;
}

/* اسم اليوم */
#ec-app .bt-day-name {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--ec-tx-1);
    min-width: 56px;
}

/* شريط التقدّم inline، يحتوي على الـ score داخله */
#ec-app .bt-day-bar-inline {
    position: relative;
    height: 22px;
    background: var(--ec-surface-3);
    border-radius: 11px;
    overflow: hidden;
    min-width: 0;
}
#ec-app .bt-day-bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    background: linear-gradient(90deg, #2f7fae, #3fc7ef, #57ddd0);
    border-radius: 11px;
    transition: width 0.6s var(--ec-ease);
}
#ec-app .bt-day-bar-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-end: 8px;
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    direction: ltr;
    z-index: 1;
}

/* عدد الفيديوهات في هذا اليوم */
#ec-app .bt-day-posts {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--ec-tx-3);
    font-weight: 700;
    white-space: nowrap;
    background: var(--ec-surface-3);
    border: 1px solid var(--ec-border-soft);
    padding: 4px 10px;
    border-radius: var(--ec-r-pill);
}
#ec-app .bt-day-posts strong {
    color: var(--ec-tx-1);
    font-weight: 900;
}
#ec-app .bt-day-posts svg {
    color: var(--ec-tx-4);
    flex-shrink: 0;
}

/* الـ status pill، التحليل الذكي (فرصة/مثالي/زائد/...) */
#ec-app .bt-day-status {
    padding: 3px 10px;
    border-radius: var(--ec-r-pill);
    font-size: 0.6875rem;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: 0.01em;
    line-height: 1.3;
}
#ec-app .bt-day-status--optimal     { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.35); }
#ec-app .bt-day-status--opportunity { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.35); }
#ec-app .bt-day-status--under       { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.35); }
#ec-app .bt-day-status--over        { background: rgba(139,92,246,0.15); color: #a5b4fc; border: 1px solid rgba(139,92,246,0.35); }
#ec-app .bt-day-status--ok          { background: rgba(255,255,255,0.06); color: #cbd5e1; border: 1px solid rgba(255,255,255,0.12); }
#ec-app .bt-day-status--weak        { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.35); }

/* جوّال: عمودَين بدل 5 أعمدة + إخفاء status (موجود في الـ desc) */
@media (max-width: 575.98px) {
    #ec-app .bt-day-item {
        grid-template-columns: 24px auto 1fr auto;
        gap: 8px;
        padding: 6px 10px;
        min-height: 40px;
    }
    #ec-app .bt-day-status { display: none; } /* مخفي على الجوّال، التركيز على البار + العدد */
    #ec-app .bt-day-name { font-size: 0.875rem; }
    #ec-app .bt-day-rank { width: 22px; height: 22px; font-size: 0.6875rem; }
    #ec-app .bt-day-item.is-top .bt-day-rank { width: 24px; height: 24px; }
}

/*
 * ─── حُذفت أقسام CSS الميتة:
 *     .bt-niches-grid / .bt-niche-* (المجالات)
 *     .bt-worst-list / .bt-worst-* (أوقات يجب تجنّبها)
 *     .bt-cities-grid / .bt-city-* (مقارنة المدن)
 *     .bt-holidays-grid / .bt-holiday-* (المناسبات)
 * كانت تخدم أقسامًا أُزيلت من renderResults، تنظيف لتقليل حجم CSS.
 * ───
 */

/* ─── نافذة التفاعل + معدل النشر (Engagement Window) ─── */
#ec-app .bt-window-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ec-sp-3);
}
@media (min-width: 576px) { #ec-app .bt-window-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { #ec-app .bt-window-grid { grid-template-columns: repeat(4, 1fr); } }

#ec-app .bt-window-card {
    padding: var(--ec-sp-4);
    background: linear-gradient(180deg, var(--tt-surface) 0%, var(--tt-surface-2) 100%);
    border: 1px solid var(--ec-border-soft);
    border-radius: var(--ec-r-md);
    text-align: center;
    transition: all 0.22s var(--ec-ease);
}
#ec-app .bt-window-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px -8px rgba(15, 23, 42, 0.12);
}
#ec-app .bt-window-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    margin-bottom: var(--ec-sp-2);
}
#ec-app .bt-window-label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ec-tx-4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--ec-sp-1);
}
#ec-app .bt-window-value {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--ec-tx-1);
    margin-bottom: var(--ec-sp-2);
    line-height: 1.3;
}
#ec-app .bt-window-value strong {
    font-weight: 900;
    color: var(--ec-brand);
    background: var(--ec-grad-text, linear-gradient(135deg, #2f7fae, #3fc7ef));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#ec-app .bt-window-desc {
    font-size: 0.75rem;
    color: var(--ec-tx-3);
    line-height: 1.5;
}
/* تقييم ذكي للوصف، أخضر (جيد) / كهرماني (متوسط) / أحمر (يحتاج تحسين) */
#ec-app .bt-window-desc--good {
    color: #34d399;
    background: rgba(16,185,129,0.14);
    padding: 6px 10px;
    border-radius: var(--ec-r-md);
    border: 1px solid rgba(16,185,129,0.30);
    font-weight: 600;
}
#ec-app .bt-window-desc--mid {
    color: #fbbf24;
    background: rgba(245,158,11,0.14);
    padding: 6px 10px;
    border-radius: var(--ec-r-md);
    border: 1px solid rgba(245,158,11,0.30);
    font-weight: 600;
}
#ec-app .bt-window-desc--low {
    color: #f87171;
    background: rgba(239,68,68,0.14);
    padding: 6px 10px;
    border-radius: var(--ec-r-md);
    border: 1px solid rgba(239,68,68,0.30);
    font-weight: 600;
}

/* tag صغير بجانب القيمة (للتطابق مع الأوقات الذهبية) */
#ec-app .bt-insight-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--ec-r-pill);
    font-size: 0.6875rem;
    font-weight: 800;
    margin-inline-start: 4px;
    line-height: 1.4;
}
#ec-app .bt-insight-tag--is-good {
    background: rgba(16,185,129,0.15);
    color: #34d399;
}
#ec-app .bt-insight-tag--is-mid {
    background: rgba(245,158,11,0.15);
    color: #fbbf24;
}
#ec-app .bt-insight-tag--is-low {
    background: rgba(239,68,68,0.15);
    color: #f87171;
}

/* Heatmap legend */
#ec-app .bt-heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ec-sp-2);
    padding: var(--ec-sp-3) var(--ec-sp-2);
    background: var(--ec-surface-2);
    border-radius: var(--ec-r-md);
    margin-top: var(--ec-sp-2);
}
#ec-app .bt-heatmap-legend-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ec-tx-3);
}
#ec-app .bt-heatmap-legend-bar {
    width: 28px;
    height: 12px;
    border-radius: 4px;
    border: 1px solid transparent;
}

/* ────────── Forecast ────────── */
#ec-app .bt-forecast {
    background: var(--ec-surface);
    border-color: rgba(16, 185, 129, 0.20);
}

#ec-app .bt-forecast-rate {
    background: rgba(16,185,129,0.10);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: var(--ec-r-xl);
    padding: var(--ec-sp-5);
    margin-bottom: var(--ec-sp-4);
    text-align: center;
}
#ec-app .bt-forecast-rate-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #34d399;
    margin-bottom: var(--ec-sp-2);
}
#ec-app .bt-forecast-rate-val {
    display: inline-flex;
    align-items: baseline;
    gap: var(--ec-sp-2);
    margin-bottom: var(--ec-sp-2);
    direction: ltr;
}
#ec-app .bt-forecast-rate-val .tt-num {
    font-size: clamp(2rem, 6vw, 2.75rem);
    font-weight: 900;
    background: linear-gradient(135deg, #10B981, #059669);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
    line-height: 1;
}
#ec-app .bt-forecast-rate-unit {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #6ee7b7;
}
#ec-app .bt-forecast-rate-diff {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6ee7b7;
}
#ec-app .bt-forecast-rate-diff strong {
    font-weight: 900;
    color: #34d399;
    direction: ltr;
}

#ec-app .bt-forecast-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ec-sp-3);
}
@media (min-width: 576px) {
    #ec-app .bt-forecast-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

#ec-app .bt-forecast-item {
    background: var(--ec-surface);
    border: 1.5px solid var(--ec-border);
    border-radius: var(--ec-r-lg);
    padding: var(--ec-sp-4);
    text-align: center;
    transition: all 0.25s var(--ec-ease);
}
#ec-app .bt-forecast-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4);
}

#ec-app .bt-forecast--4w { border-color: rgba(14, 165, 233, 0.25); }
#ec-app .bt-forecast--8w { border-color: rgba(124, 58, 237, 0.30); background: var(--ec-surface); }
#ec-app .bt-forecast--12w { border-color: rgba(16, 185, 129, 0.35); background: var(--ec-surface); }

#ec-app .bt-forecast-item-period {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ec-tx-3);
    margin-bottom: var(--ec-sp-2);
}
#ec-app .bt-forecast-item-val {
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 4px;
    direction: ltr;
    letter-spacing: -0.02em;
    font-feature-settings: "lnum" 1, "tnum" 1;
}
#ec-app .bt-forecast--4w .bt-forecast-item-val {
    background: linear-gradient(135deg, #0EA5E9, #0284C7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#ec-app .bt-forecast--8w .bt-forecast-item-val {
    background: linear-gradient(135deg, #5457E6, #6D28D9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#ec-app .bt-forecast--12w .bt-forecast-item-val {
    background: linear-gradient(135deg, #10B981, #059669);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#ec-app .bt-forecast-item-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ec-tx-3);
}

/* ════════════════════════════════════════════════════════════
   أزرار الإجراءات النهائية، Gradient Pills بألوان الهوية
   كل زر له gradient + shadow ملوّن + hover lift
   ════════════════════════════════════════════════════════════ */
#ec-app .bt-action-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 0;
}

#ec-app .bt-action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px 14px 22px;
    border: 0;
    border-radius: 999px;
    color: #FFFFFF;
    font-family: 'Cairo', sans-serif;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s var(--ec-ease),
                box-shadow 0.25s var(--ec-ease),
                filter 0.25s var(--ec-ease);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* تأثير لمعة (sheen) على hover */
#ec-app .bt-action-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 50%, rgba(0,0,0,0.05) 100%);
    pointer-events: none;
    z-index: 1;
}

#ec-app .bt-action-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

#ec-app .bt-action-btn:active {
    transform: translateY(0);
    filter: brightness(0.96);
}

#ec-app .bt-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

#ec-app .bt-action-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(4px);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

#ec-app .bt-action-btn-icon svg {
    width: 16px;
    height: 16px;
    color: #FFFFFF;
    stroke: #FFFFFF;
}

#ec-app .bt-action-btn-text {
    position: relative;
    z-index: 2;
    white-space: nowrap;
}

/* ─── الزر 1: تنزيل صورة الخطة، Magenta/Purple Gradient ─── */
#ec-app .bt-action-btn--image {
    background: linear-gradient(135deg, #3fc7ef 0%, #3fc7ef 50%, #5457E6 100%);
    box-shadow:
        0 8px 20px -6px rgba(63, 199, 239, 0.55),
        0 4px 8px -2px rgba(124, 58, 237, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
#ec-app .bt-action-btn--image:hover {
    box-shadow:
        0 12px 28px -6px rgba(63, 199, 239, 0.70),
        0 6px 12px -2px rgba(124, 58, 237, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ─── الزر 2: مشاركة الخطة، Pink/Magenta Gradient ─── */
#ec-app .bt-action-btn--share {
    background: linear-gradient(135deg, #2f7fae 0%, #3fc7ef 50%, #3fc7ef 100%);
    box-shadow:
        0 8px 20px -6px rgba(47, 127, 174, 0.55),
        0 4px 8px -2px rgba(63, 199, 239, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
#ec-app .bt-action-btn--share:hover {
    box-shadow:
        0 12px 28px -6px rgba(47, 127, 174, 0.70),
        0 6px 12px -2px rgba(63, 199, 239, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ─── الزر 3: تحليل حساب آخر، Sky/Cyan Gradient ─── */
#ec-app .bt-action-btn--new {
    background: linear-gradient(135deg, #0EA5E9 0%, #06B6D4 50%, #57ddd0 100%);
    box-shadow:
        0 8px 20px -6px rgba(14, 165, 233, 0.55),
        0 4px 8px -2px rgba(63, 199, 239, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
#ec-app .bt-action-btn--new:hover {
    box-shadow:
        0 12px 28px -6px rgba(14, 165, 233, 0.70),
        0 6px 12px -2px rgba(63, 199, 239, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ─── جوّال: أزرار أصغر قليلاً + كاملة العرض في الأسطر ─── */
@media (max-width: 575.98px) {
    #ec-app .bt-action-btns {
        gap: 10px;
        flex-direction: column;
        align-items: stretch;
    }
    #ec-app .bt-action-btn {
        justify-content: center;
        padding: 13px 20px 13px 16px;
        font-size: 0.875rem;
    }
    #ec-app .bt-action-btn-icon {
        width: 26px;
        height: 26px;
    }
}

/* ────────── Mobile tweaks ────────── */
@media (max-width: 575.98px) {
    #ec-app .bt-hero { padding: var(--ec-sp-5) var(--ec-sp-4); }
    #ec-app .bt-hero-icon { font-size: 2rem; }
    #ec-app .bt-hero-best { padding: var(--ec-sp-3) var(--ec-sp-4); }
    #ec-app .bt-hero-best-time { gap: var(--ec-sp-2); flex-wrap: wrap; }
    #ec-app .bt-card { padding: var(--ec-sp-4); }
    #ec-app .bt-card-header { gap: var(--ec-sp-2); margin-bottom: var(--ec-sp-4); }
    #ec-app .bt-card-header-icon { width: 44px; height: 44px; font-size: 1.25rem; }
    #ec-app .bt-card-title { font-size: 0.9375rem; }
    #ec-app .bt-card-sub { font-size: 0.75rem; }
    #ec-app .bt-top-slot { padding: var(--ec-sp-2) var(--ec-sp-3); }
    #ec-app .bt-top-rank { width: 32px; height: 32px; font-size: 0.875rem; }
    #ec-app .bt-top-day { font-size: 0.875rem; }
    #ec-app .bt-top-time { font-size: 0.75rem; }
    #ec-app .bt-top-score-num { font-size: 1.125rem; }
    #ec-app .bt-heatmap {
        grid-template-columns: minmax(50px, 70px) repeat(6, minmax(0, 1fr));
        font-size: 0.625rem;
    }
    #ec-app .bt-heatmap-cell {
        min-height: 44px;
        max-height: 64px;
        aspect-ratio: 1 / 1;
    }
    #ec-app .bt-heatmap-cell-num { font-size: 0.75rem; }
    #ec-app .bt-heatmap-cell-unit { font-size: 0.5rem; }
    #ec-app .bt-heatmap-cell-score { font-size: 0.75rem; }
    #ec-app .bt-heatmap-cell-score-max { font-size: 0.5rem; }
    #ec-app .bt-heatmap-row-label { font-size: 0.6875rem; }
    #ec-app .bt-heatmap-col-label {
        font-size: 0.5625rem;
        /* إزالة الـ horizontal padding على الجوّال أيضاً لضمان التوسيط الدقيق */
        padding: 4px 0;
        line-height: 1.25;
    }
    #ec-app .bt-forecast-rate { padding: var(--ec-sp-4); }
}

    /* حاوية أداة «أفضل وقت للنشر» على wwep — تُبقي تصميم الأداة الأصلي معزولاً وموسّطاً داخل الصفحة. */
    .bt-tool-page { padding-block: var(--ds-crumb-top, 1.5rem) 5rem; background: var(--ds-background); position: relative; }
    .bt-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; }