/* generated from _partials/best-time/{styles-shared,styles-ec} — edit the source blade partials, then rebuild. */

/* ════════════════════════════════════════════════════════════════════
   TIKTOK TOOLS، Shared Design System v5
   namespace: .tt- (للأدوات الإضافية)
   ──────────────────────────────────────────────────────────────────── */

.tt-app {
    --tt-brand:       #2f7fae;
    --tt-brand-hover: #215d87;
    --tt-brand-soft:  rgba(63,199,239,0.14);

    --tt-grad:        linear-gradient(135deg, #2f7fae 0%, #3fc7ef 55%, #57ddd0 110%);
    --tt-grad-text:   linear-gradient(135deg, #2f7fae 0%, #3fc7ef 100%);

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

    --tt-border:      rgba(255,255,255,0.09);
    --tt-border-soft: rgba(255,255,255,0.05);

    --tt-tx-1: #f8fafc;
    --tt-tx-2: #e2e8f0;
    --tt-tx-3: #a3aec1;
    --tt-tx-4: #7e8a9e;

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

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

    --tt-sh-1: 0 1px 2px rgba(0,0,0,0.3);
    --tt-sh-2: 0 4px 12px -2px rgba(0,0,0,0.45), 0 2px 4px -2px rgba(0,0,0,0.35);
    --tt-sh-3: 0 12px 28px -6px rgba(0,0,0,0.55), 0 6px 12px -3px rgba(0,0,0,0.4);
    --tt-sh-brand:    0 8px 20px -4px rgba(0,0,0,0.35), 0 4px 8px -2px rgba(0,0,0,0.25);
    --tt-sh-brand-lg: 0 16px 36px -8px rgba(0,0,0,0.5), 0 8px 16px -4px rgba(0,0,0,0.3);

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

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

.tt-app .tt-num,
.tt-app .tt-score-val,
.tt-app .tt-stat-val,
.tt-app .tt-time-val,
.tt-app .tt-counter,
.tt-app .tt-meta {
    font-feature-settings: "lnum" 1, "tnum" 1;
    direction: ltr;
    unicode-bidi: embed;
}

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

/* ════════════════════ HERO ════════════════════ */
.tt-app .tt-hero {
    position: relative;
    border-radius: var(--tt-r-3xl);
    padding: clamp(48px, 7vw, 80px) clamp(24px, 5vw, 56px);
    margin-bottom: var(--tt-sp-9);
    overflow: hidden;
    background: var(--tt-surface);
    border: 1px solid var(--tt-border);
}
.tt-app .tt-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
}
.tt-app .tt-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin-inline: auto;
}
.tt-app .tt-hero-top { text-align: center; margin-bottom: var(--tt-sp-7); }

.tt-app .tt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-sp-2);
    background: var(--tt-surface);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-r-pill);
    padding: 8px 18px 8px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tt-tx-2);
    margin-bottom: var(--tt-sp-5);
    box-shadow: var(--tt-sh-1);
}
.tt-app .tt-eyebrow-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 4px rgba(16,185,129,0.18);
    animation: tt-pulse 2.4s ease-in-out infinite;
}
@keyframes tt-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); }
}

.tt-app .tt-title {
    font-size: clamp(1.875rem, 5vw, 3.25rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--tt-tx-1);
    margin: 0 0 var(--tt-sp-4);
}
.tt-app .tt-title-grad {
    background: var(--tt-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.tt-app .tt-sub {
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    color: var(--tt-tx-3);
    line-height: 1.7;
    max-width: 580px;
    margin: 0 auto;
}

/* ════════════════════ FORM ════════════════════ */
.tt-app .tt-form-label {
    display: block;
    text-align: start;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--tt-tx-2);
    margin-bottom: var(--tt-sp-2);
    padding-inline-start: var(--tt-sp-1);
}
.tt-app .tt-required { color: var(--tt-brand); margin-inline-start: var(--tt-sp-1); }
.tt-app .tt-optional {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--tt-tx-4);
    background: var(--tt-surface-3);
    padding: 1px 6px;
    border-radius: var(--tt-r-pill);
    margin-inline-start: var(--tt-sp-1);
}

.tt-app .tt-input-wrap,
.tt-app .tt-select-wrap,
.tt-app .tt-textarea-wrap {
    background: var(--tt-surface);
    border: 1.5px solid var(--tt-border);
    border-radius: var(--tt-r-lg);
    transition: all 0.2s var(--tt-ease);
    display: flex;
    align-items: center;
    padding: 0 var(--tt-sp-4);
    height: 56px;
    position: relative;
}
.tt-app .tt-textarea-wrap {
    height: auto;
    min-height: 120px;
    padding: var(--tt-sp-4);
    align-items: flex-start;
}
.tt-app .tt-input-wrap:focus-within,
.tt-app .tt-select-wrap:focus-within,
.tt-app .tt-textarea-wrap:focus-within {
    border-color: var(--tt-brand);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

.tt-app .tt-input-prefix {
    color: var(--tt-tx-3);
    margin-inline-end: var(--tt-sp-2);
    flex-shrink: 0;
    display: inline-flex;
}
.tt-app .tt-input-prefix-text {
    color: var(--tt-tx-3);
    font-weight: 700;
    font-size: 1.0625rem;
    margin-inline-end: var(--tt-sp-2);
    flex-shrink: 0;
}

.tt-app .tt-input,
.tt-app .tt-textarea {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    height: 100%;
    font-family: 'Cairo', sans-serif;
    color: var(--tt-tx-1);
    font-weight: 500;
    min-width: 0;
}
.tt-app .tt-textarea {
    height: auto;
    min-height: 88px;
    line-height: 1.65;
    width: 100%;
    resize: vertical;
}
.tt-app .tt-input-en { direction: ltr; text-align: start; }
.tt-app .tt-input::placeholder,
.tt-app .tt-textarea::placeholder {
    color: var(--tt-tx-4);
    font-weight: 400;
}

/* Hide native spinner arrows on number inputs across all browsers. */
.tt-app input[type="number"]::-webkit-outer-spin-button,
.tt-app input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.tt-app input[type="number"],
.tt-app input.tt-num-input,
.tt-app input[dir="ltr"][inputmode="numeric"] {
    -moz-appearance: textfield;
    appearance: textfield;
    /* Force Latin digit rendering (0-9) regardless of OS/browser locale.
       Combination of overrides needed to defeat:
       1) Cairo's "locl" GSUB substitution in Arabic context
       2) Browser-level national digit shaping (Chrome on ar-SA Windows)
       3) Inherited bidi context from <html dir="rtl" lang="ar"> */
    direction: ltr !important;
    unicode-bidi: bidi-override !important;
    text-align: end;
    font-feature-settings: "lnum" 1, "tnum" 1, "locl" 0 !important;
    font-variant-numeric: lining-nums tabular-nums !important;
    -webkit-locale: "en";
}
.tt-app input[type="number"]::placeholder,
.tt-app input.tt-num-input::placeholder {
    text-align: end;
    direction: ltr;
    unicode-bidi: bidi-override;
    font-feature-settings: "lnum" 1, "tnum" 1, "locl" 0;
}

/* Wrapper containing a number input also forced LTR for digit shaping.
   The browser inherits digit shaping from the parent's direction, so even
   if the input has dir="ltr", a parent with dir="rtl" can re-shape digits. */
.tt-app .tt-input-wrap:has(input.tt-num-input),
.tt-app .tt-input-wrap:has(input[type="number"]) {
    /* Keep visual RTL layout via flex but neutralize digit-shaping inheritance */
    direction: ltr;
}
.tt-app .tt-input-wrap:has(input.tt-num-input) .tt-input-prefix,
.tt-app .tt-input-wrap:has(input.tt-num-input) .tt-input-suffix,
.tt-app .tt-input-wrap:has(input[type="number"]) .tt-input-prefix,
.tt-app .tt-input-wrap:has(input[type="number"]) .tt-input-suffix {
    /* Restore RTL feel for the labels around the input */
    direction: rtl;
}
.tt-app .tt-input-suffix {
    color: var(--tt-tx-4);
    font-size: 0.8125rem;
    margin-inline-start: var(--tt-sp-2);
    flex-shrink: 0;
}

.tt-app .tt-select {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    font-family: 'Cairo', sans-serif;
    color: var(--tt-tx-1);
    font-weight: 500;
    padding: 0;
    padding-inline-end: var(--tt-sp-7);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.tt-app .tt-select-arrow {
    position: absolute;
    inset-inline-end: var(--tt-sp-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--tt-tx-3);
    pointer-events: none;
}

.tt-app .tt-form-row { margin-bottom: var(--tt-sp-4); }
.tt-app .tt-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tt-sp-3);
    margin-bottom: var(--tt-sp-4);
}
@media (min-width: 640px) {
    .tt-app .tt-form-grid { grid-template-columns: 1fr 1fr; }
}

/* checkbox toggle */
.tt-app .tt-check {
    display: flex;
    align-items: center;
    gap: var(--tt-sp-3);
    background: var(--tt-surface);
    border: 1.5px solid var(--tt-border);
    border-radius: var(--tt-r-lg);
    padding: var(--tt-sp-4);
    cursor: pointer;
    transition: all 0.2s var(--tt-ease);
}
.tt-app .tt-check:hover { border-color: var(--tt-brand); background: var(--tt-surface-2); }
.tt-app .tt-check input { display: none; }
.tt-app .tt-check-box {
    width: 22px; height: 22px;
    border-radius: var(--tt-r-sm);
    border: 2px solid var(--tt-border);
    background: var(--tt-surface);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all 0.18s var(--tt-ease);
}
.tt-app .tt-check input:checked ~ .tt-check-box {
    background: var(--tt-brand);
    border-color: var(--tt-brand);
    color: white;
}
.tt-app .tt-check.is-checked { border-color: rgba(47,127,174,0.30); background: var(--tt-brand-soft); }
.tt-app .tt-check-label {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--tt-tx-1);
}
.tt-app .tt-check-cat {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--tt-tx-3);
    background: var(--tt-surface-3);
    padding: 2px 8px;
    border-radius: var(--tt-r-pill);
    margin-inline-start: var(--tt-sp-2);
}

/* ════════════════════ BUTTONS ════════════════════ */
.tt-app .tt-btn-primary {
    background: var(--tt-brand);
    color: white;
    border: none;
    padding: 0 var(--tt-sp-6);
    height: 56px;
    border-radius: var(--tt-r-lg);
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s var(--tt-ease);
    white-space: nowrap;
    font-family: 'Cairo', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tt-sp-2);
    box-shadow: var(--tt-sh-brand);
    width: 100%;
    margin-top: var(--tt-sp-2);
}
.tt-app .tt-btn-primary:hover:not(:disabled) {
    background: var(--tt-brand-hover);
    transform: translateY(-1px);
    box-shadow: var(--tt-sh-brand-lg);
}
.tt-app .tt-btn-primary:disabled { opacity: 0.65; cursor: not-allowed; }

.tt-app .tt-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-sp-2);
    background: var(--tt-surface);
    border: 1px solid var(--tt-border);
    color: var(--tt-tx-2);
    padding: 0 var(--tt-sp-5);
    height: 48px;
    border-radius: var(--tt-r-md);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s var(--tt-ease);
    font-family: 'Cairo', sans-serif;
    box-shadow: var(--tt-sh-1);
}
.tt-app .tt-btn-ghost:hover {
    border-color: rgba(47,127,174,0.30);
    color: var(--tt-tx-1);
    transform: translateY(-1px);
    box-shadow: var(--tt-sh-2);
}
.tt-app .tt-btn-ghost .fs-icon { color: var(--tt-tx-3); }
.tt-app .tt-btn-ghost:hover .fs-icon { color: var(--tt-brand); }

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

/* ════════════════════ LOADING + ERROR ════════════════════ */
.tt-app .tt-loading {
    text-align: center;
    padding: var(--tt-sp-10) var(--tt-sp-6);
    background: var(--tt-surface);
    border-radius: var(--tt-r-2xl);
    border: 1px solid var(--tt-border);
    box-shadow: var(--tt-sh-2);
    margin-bottom: var(--tt-sp-9);
}
.tt-app .tt-loading-orb {
    width: 72px; height: 72px;
    border-radius: 50%;
    margin: 0 auto var(--tt-sp-5);
    background: conic-gradient(from 0deg, #2f7fae, #3fc7ef, #57ddd0, #2f7fae);
    animation: tt-spin 2.4s linear infinite;
    position: relative;
}
.tt-app .tt-loading-orb::after {
    content: '';
    position: absolute;
    inset: 6px;
    background: var(--tt-surface);
    border-radius: 50%;
}
.tt-app .tt-loading-orb-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    color: var(--tt-brand);
}
.tt-app .tt-loading h3 {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--tt-tx-1);
    margin: 0 0 var(--tt-sp-2);
}
.tt-app .tt-loading-sub {
    color: var(--tt-tx-3);
    font-size: 0.9375rem;
    margin: 0;
}

.tt-app .tt-error {
    background: rgba(239,68,68,0.10);
    border: 1px solid rgba(239,68,68,0.30);
    color: #fca5a5;
    padding: var(--tt-sp-6);
    border-radius: var(--tt-r-xl);
    margin: 0 0 var(--tt-sp-6);
    display: flex;
    align-items: center;
    gap: var(--tt-sp-3);
}
.tt-app .tt-error-icon {
    width: 40px; height: 40px;
    background: rgba(239,68,68,0.13);
    color: #f87171;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tt-app .tt-error-msg {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
    line-height: 1.6;
}

/* ════════════════════ CARDS ════════════════════ */
.tt-app .tt-results {
    display: flex;
    flex-direction: column;
    gap: var(--tt-sp-5);
}
.tt-app .tt-card {
    background: var(--tt-surface);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-r-2xl);
    padding: var(--tt-sp-7);
    box-shadow: var(--tt-sh-1);
}

/* Summary banner */
.tt-app .tt-summary {
    background: var(--tt-surface);
    color: white;
    border: 1px solid var(--tt-border);
    position: relative;
    overflow: hidden;
}
.tt-app .tt-summary::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 400px 250px at 20% 0%, rgba(255,255,255,0.15), transparent 60%),
        radial-gradient(ellipse 400px 250px at 80% 100%, rgba(255,255,255,0.10), transparent 60%);
    pointer-events: none;
}
.tt-app .tt-summary-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--tt-sp-4);
    flex-wrap: wrap;
    justify-content: space-between;
}
.tt-app .tt-summary-info {
    display: flex;
    align-items: center;
    gap: var(--tt-sp-3);
}
.tt-app .tt-summary-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--tt-r-md);
    background: rgba(255,255,255,0.20);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tt-app .tt-summary-title {
    font-size: 1.25rem;
    font-weight: 900;
    margin: 0;
    letter-spacing: -0.015em;
}
.tt-app .tt-summary-sub {
    font-size: 0.875rem;
    opacity: 0.92;
    margin: 4px 0 0;
}
.tt-app .tt-summary-chips {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-sp-2);
    flex-wrap: wrap;
}
.tt-app .tt-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-sp-1);
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: var(--tt-r-pill);
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 700;
}

/* Score Card (used in audit/checker) */
.tt-app .tt-score-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--tt-sp-7);
}
.tt-app .tt-score-ring {
    width: 180px;
    height: 180px;
    position: relative;
    margin-bottom: var(--tt-sp-4);
}
.tt-app .tt-score-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.tt-app .tt-score-ring-bg {
    fill: none;
    stroke: var(--tt-surface-3);
    stroke-width: 12;
}
.tt-app .tt-score-ring-fg {
    fill: none;
    stroke: url(#tt-ring-grad);
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s var(--tt-ease);
}
.tt-app .tt-score-ring-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.tt-app .tt-score-val {
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1;
    background: var(--tt-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -0.03em;
}
.tt-app .tt-score-label {
    font-size: 0.8125rem;
    color: var(--tt-tx-3);
    margin-top: 4px;
    font-weight: 600;
}

.tt-app .tt-grade-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-sp-2);
    border-radius: var(--tt-r-pill);
    padding: 8px 18px;
    font-weight: 800;
    font-size: 0.9375rem;
    margin-bottom: var(--tt-sp-3);
}
.tt-app .tt-grade-success  { background: rgba(16,185,129,0.14); color: #34d399; }
.tt-app .tt-grade-info     { background: rgba(59,130,246,0.14); color: #60a5fa; }
.tt-app .tt-grade-primary  { background: rgba(99,102,241,0.14); color: #a5b4fc; }
.tt-app .tt-grade-warning  { background: rgba(245,158,11,0.14); color: #fbbf24; }
.tt-app .tt-grade-danger   { background: rgba(239,68,68,0.13); color: #f87171; }
.tt-app .tt-grade-secondary{ background: rgba(255,255,255,0.05); color: #cbd5e1; }

.tt-app .tt-grade-desc {
    color: var(--tt-tx-3);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0;
    max-width: 480px;
}

/* List items (passes/issues/missing/tips) */
.tt-app .tt-list {
    display: flex;
    flex-direction: column;
    gap: var(--tt-sp-2);
    padding: 0;
    margin: 0;
    list-style: none;
}
.tt-app .tt-list-item {
    background: var(--tt-surface-2);
    border: 1px solid var(--tt-border-soft);
    border-radius: var(--tt-r-lg);
    padding: var(--tt-sp-3) var(--tt-sp-4);
    display: flex;
    align-items: flex-start;
    gap: var(--tt-sp-3);
    font-size: 0.9375rem;
    line-height: 1.7;
}
.tt-app .tt-list-item-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--tt-r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tt-app .tt-item-pass    .tt-list-item-icon { background: rgba(16,185,129,0.16); color: #34d399; }
.tt-app .tt-item-error   .tt-list-item-icon { background: rgba(239,68,68,0.16); color: #f87171; }
.tt-app .tt-item-warning .tt-list-item-icon { background: rgba(245,158,11,0.16); color: #fbbf24; }
.tt-app .tt-item-info    .tt-list-item-icon { background: rgba(59,130,246,0.16); color: #60a5fa; }
.tt-app .tt-item-tip     .tt-list-item-icon { background: var(--tt-grad); color: white; }
.tt-app .tt-list-item-text { flex: 1; color: var(--tt-tx-2); }

/* Section header */
.tt-app .tt-section-header {
    display: flex;
    align-items: center;
    gap: var(--tt-sp-3);
    margin-bottom: var(--tt-sp-4);
}
.tt-app .tt-section-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--tt-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tt-app .tt-section-success { background: rgba(16,185,129,0.14); color: #34d399; }
.tt-app .tt-section-warning { background: rgba(245,158,11,0.14); color: #fbbf24; }
.tt-app .tt-section-info    { background: rgba(59,130,246,0.14); color: #60a5fa; }
.tt-app .tt-section-brand   { background: var(--tt-brand-soft); color: var(--tt-brand); }
.tt-app .tt-section-purple  { background: rgba(99,102,241,0.14); color: #a5b4fc; }

.tt-app .tt-section-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--tt-tx-1);
    margin: 0;
    letter-spacing: -0.01em;
}
.tt-app .tt-section-sub {
    font-size: 0.8125rem;
    color: var(--tt-tx-3);
    margin: 2px 0 0;
}

/* Actions */
.tt-app .tt-actions {
    display: flex;
    gap: var(--tt-sp-3);
    flex-wrap: wrap;
    justify-content: center;
}

/* ════════════════════ ANIMATIONS ════════════════════ */
@keyframes tt-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tt-app .tt-results > * { animation: tt-fade-in 0.5s var(--tt-ease) backwards; }
.tt-app .tt-results > *:nth-child(1) { animation-delay: 0.05s; }
.tt-app .tt-results > *:nth-child(2) { animation-delay: 0.10s; }
.tt-app .tt-results > *:nth-child(3) { animation-delay: 0.15s; }
.tt-app .tt-results > *:nth-child(4) { animation-delay: 0.20s; }
.tt-app .tt-results > *:nth-child(5) { animation-delay: 0.25s; }
.tt-app .tt-results > *:nth-child(6) { animation-delay: 0.30s; }

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

/* ════════════════════ RESPONSIVE ════════════════════ */
@media (max-width: 575.98px) {
    .tt-app .tt-hero { padding: 36px 20px; border-radius: 22px; }
    .tt-app .tt-input-wrap,
    .tt-app .tt-select-wrap { height: 52px; }
    .tt-app .tt-btn-primary { height: 52px; }
    .tt-app .tt-card { padding: 24px 20px; border-radius: 20px; }
    .tt-app .tt-summary-content { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 991.98px) {
    .tt-app .tt-btn-primary, .tt-app .tt-btn-ghost { min-height: 44px; }
}

/* نص مساعد تحت حقول الإدخال (a11y: مربوط بـ aria-describedby) */
.tt-app .tt-form-help {
    display: block;
    margin-top: 6px;
    color: var(--tt-tx-3, #6B7280);
    font-size: 0.78rem;
    line-height: 1.6;
}

/* شارة "النتائج تقديرية"، تستخدم في كل الحاسبات (E-E-A-T: شفافية) */
.tt-app .tt-estimate-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
    padding: 0.4rem 0.875rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.30);
    border-radius: 9999px;
    color: #fbbf24;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
}
.tt-app .tt-estimate-badge svg {
    color: #fbbf24;
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════════
   ENGAGEMENT CALCULATOR، Design System v5
   هوية بصرية كاملة · RTL · Premium · Light Mode · Cohesive
   ──────────────────────────────────────────────────────────────────── */

.ec-app {
    /* ▓▓▓ ALIAS الألوان ▓▓▓ */
    --ec-brand:        #2f7fae;
    --ec-brand-hover:  #215d87;
    --ec-brand-soft:   rgba(239,68,68,0.10);
    --ec-accent:       #57ddd0;
    --ec-accent-soft:  #CFFAFE;

    /* تدرج رئيسي مدروس (3 توقفات للعمق) */
    --ec-grad:         linear-gradient(135deg, #2f7fae 0%, #3fc7ef 55%, #57ddd0 110%);
    --ec-grad-text:    linear-gradient(135deg, #2f7fae 0%, #3fc7ef 100%);

    /* أسطح متدرجة */
    --ec-surface:      #0f1526;
    --ec-surface-2:    var(--tt-surface-2);
    --ec-surface-3:    #161d33;

    /* حدود */
    --ec-border:       rgba(255,255,255,0.09);
    --ec-border-soft:  rgba(255,255,255,0.05);
    --ec-divider:      rgba(255,255,255,0.09);

    /* نص */
    --ec-tx-1: #f8fafc;
    --ec-tx-2: #e2e8f0;
    --ec-tx-3: #a3aec1;
    --ec-tx-4: #7e8a9e;
    --ec-tx-5: #D1D5DB;

    /* Spacing (4pt scale) */
    --ec-sp-1:   4px;
    --ec-sp-2:   8px;
    --ec-sp-3:  12px;
    --ec-sp-4:  16px;
    --ec-sp-5:  20px;
    --ec-sp-6:  24px;
    --ec-sp-7:  32px;
    --ec-sp-8:  40px;
    --ec-sp-9:  48px;
    --ec-sp-10: 64px;
    --ec-sp-11: 80px;

    /* Radius */
    --ec-r-sm:  8px;
    --ec-r-md: 12px;
    --ec-r-lg: 16px;
    --ec-r-xl: 20px;
    --ec-r-2xl:24px;
    --ec-r-3xl:32px;
    --ec-r-pill:9999px;

    /* Shadows، Premium subtle */
    --ec-sh-1:  0 1px 2px rgba(15,23,42,0.04);
    --ec-sh-2:  0 4px 12px -2px rgba(15,23,42,0.06), 0 2px 4px -2px rgba(15,23,42,0.03);
    --ec-sh-3:  0 12px 28px -6px rgba(15,23,42,0.10), 0 6px 12px -3px rgba(15,23,42,0.04);
    --ec-sh-4:  0 24px 48px -12px rgba(15,23,42,0.14), 0 12px 20px -6px rgba(15,23,42,0.06);
    --ec-sh-brand:    0 8px 20px -4px rgba(0,0,0,0.35), 0 4px 8px -2px rgba(0,0,0,0.25);
    --ec-sh-brand-lg: 0 16px 36px -8px rgba(0,0,0,0.5), 0 8px 16px -4px rgba(0,0,0,0.3);

    /* Motion */
    --ec-ease:  cubic-bezier(0.4, 0, 0.2, 1);

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

/* الأرقام Inline LTR + tabular */
.ec-app .ec-num,
.ec-app .ec-er-val,
.ec-app .ec-metric-val,
.ec-app .ec-stat-val,
.ec-app .ec-profile-handle,
.ec-app .ec-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 .ec-hero {
    position: relative;
    border-radius: var(--ec-r-3xl);
    padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 64px);
    margin-bottom: var(--ec-sp-9);
    overflow: hidden;
    background: var(--ec-surface);
    border: 1px solid var(--ec-border);
}

/* خلفية متدرجة هادئة من الأعلى لليسار */
.ec-app .ec-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
}

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

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

.ec-app .ec-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: ec-pulse 2.4s ease-in-out infinite;
}

@keyframes ec-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 .ec-hero-title {
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--ec-tx-1);
    margin: 0 0 var(--ec-sp-4);
}

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

/* النص الفرعي */
.ec-app .ec-hero-sub {
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    color: var(--ec-tx-3);
    line-height: 1.7;
    max-width: 580px;
    margin: 0 auto var(--ec-sp-8);
}

/* ════════════════════════════════════════════════════════════
   HERO v2، هوية الـ Homepage (Big Title + Integrated Search + Trust Pills)
   ════════════════════════════════════════════════════════════ */

.ec-app .ec-hero-v2 {
    background: linear-gradient(180deg, var(--tt-surface) 0%, var(--tt-surface-2) 100%);
    border: 0;
    padding: clamp(20px, 3vw, 36px) clamp(16px, 4vw, 40px);
    margin-bottom: var(--ec-sp-5);
    overflow: hidden;
}

/* خلفية فخمة بـ blobs ملونة + شبكة خفيفة */
.ec-app .ec-hero-v2 .ec-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: transparent;
}
.ec-app .ec-hero-v2 .ec-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(15,23,42,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15,23,42,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 75%);
}

.ec-app .ec-hero-v2 .ec-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ec-sp-3);
}

/* الـ Eyebrow داخل بطاقة الـ CTA */
.ec-app .ec-hero-v2 .ec-hero-eyebrow {
    margin-bottom: 0;
    padding: 5px 12px 5px 10px;
    font-size: 0.75rem;
}

/* عنوان مدمج لكن جذاب */
.ec-app .ec-hero-title-xl {
    font-size: clamp(1.5rem, 3.2vw, 2.125rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: var(--ec-sp-2) 0 var(--ec-sp-3);
}
.ec-app .ec-hero-title-xl .ec-hero-title-grad {
    background: linear-gradient(135deg, #2f7fae 0%, #3fc7ef 50%, #57ddd0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* النموذج العمودي: label + input + button */
.ec-app .ec-stack-form {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: start;
}
.ec-app .ec-stack-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ec-tx-2);
    padding-inline-start: 4px;
    margin-bottom: 2px;
}
.ec-app .ec-stack-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--ec-surface);
    border: 1.5px solid var(--ec-border);
    border-radius: var(--ec-r-lg);
    height: 52px;
    padding: 0 var(--ec-sp-4);
    transition: all 0.2s var(--ec-ease);
    box-shadow: 0 2px 6px -2px rgba(15,23,42,0.04);
    direction: rtl;
}
.ec-app .ec-stack-input-wrap:focus-within {
    border-color: var(--ec-brand);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.ec-app .ec-stack-at {
    flex-shrink: 0;
    color: var(--ec-tx-3);
    font-size: 1.0625rem;
    font-weight: 700;
    margin-inline-end: var(--ec-sp-2);
}
.ec-app .ec-stack-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Cairo', sans-serif;
    font-size: 0.9375rem;
    color: var(--ec-tx-1);
    font-weight: 500;
    height: 100%;
    min-width: 0;
    direction: ltr;
    text-align: start;
}
.ec-app .ec-stack-input::placeholder {
    color: var(--ec-tx-4);
    font-weight: 500;
}

.ec-app .ec-stack-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--ds-primary, #6366f1) 0%, #8b5cf6 60%, #a855f7 100%);
    color: white;
    border: 1px solid rgba(255,255,255,.06);
    height: 52px;
    border-radius: var(--ec-r-lg);
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
    margin-top: 4px;
}
.ec-app .ec-stack-btn::before {
    content: '';
    position: absolute;
    inset-inline-start: -100%;
    top: 0;
    bottom: 0;
    width: 50%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transition: inset-inline-start .6s ease;
}
@media (hover: hover) and (pointer: fine) {
    .ec-app .ec-stack-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
    }
    .ec-app .ec-stack-btn:hover:not(:disabled)::before { inset-inline-start: 100%; }
}
.ec-app .ec-stack-btn:active:not(:disabled) { transform: translateY(0); }
.ec-app .ec-stack-btn:disabled { opacity: 0.7; cursor: not-allowed; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
    .ec-app .ec-stack-btn { transition: none; }
    .ec-app .ec-stack-btn::before { display: none; }
    .ec-app .ec-stack-btn:hover:not(:disabled) { transform: none; }
}

/* شارات الثقة تحت البحث */
.ec-app .ec-trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ec-sp-2);
    margin-top: 0;
}
.ec-app .ec-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--tt-surface);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-r-pill);
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ec-tx-2);
    box-shadow: 0 2px 6px -2px rgba(15,23,42,0.06);
    transition: all 0.2s var(--ec-ease);
}
.ec-app .ec-trust-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(47,127,174,0.20);
    box-shadow: 0 6px 14px -4px rgba(15,23,42,0.12);
}
.ec-app .ec-trust-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
    border-radius: 50%;
    font-size: 0.625rem;
    font-weight: 900;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.35);
}
.ec-app .ec-trust-shield { color: #a5b4fc; font-size: 1rem; line-height: 1; }
.ec-app .ec-trust-tools  { color: var(--ec-tx-3); font-size: 0.875rem; font-weight: 700; }

/* Responsive */
@media (max-width: 575.98px) {
    .ec-app .ec-hero-v2 { padding: 48px 16px; border-radius: 22px; }
    .ec-app .ec-hero-title-xl { font-size: 2rem; }
    .ec-app .ec-search { flex-wrap: wrap; padding: 10px; border-radius: 24px; }
    .ec-app .ec-search-at { width: 36px; height: 40px; }
    .ec-app .ec-search-input { flex: 1 1 calc(100% - 50px); }
    .ec-app .ec-search-btn { width: 100%; margin-top: 8px; height: 48px; }
    .ec-app .ec-trust-row { gap: 8px; }
    .ec-app .ec-trust-pill { padding: 6px 12px; font-size: 0.75rem; }
}

/* صندوق الإدخال، نظيف وفخم */
.ec-app .ec-form {
    max-width: 620px;
    margin-inline: auto;
}

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

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

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

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

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

.ec-app .ec-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(--ec-tx-1);
    font-weight: 500;
    width: 100%;
    min-width: 0;
}

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

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

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

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

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

/* أمثلة سريعة */
.ec-app .ec-examples {
    margin-top: var(--ec-sp-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ec-sp-3);
}

.ec-app .ec-examples-label {
    color: var(--ec-tx-4);
    font-size: 0.8125rem;
    font-weight: 500;
}

.ec-app .ec-examples-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ec-sp-2);
}

.ec-app .ec-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ec-sp-2);
    background: var(--ec-surface);
    border: 1px solid var(--ec-border);
    border-radius: var(--ec-r-pill);
    padding: 8px 16px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.18s var(--ec-ease);
    color: var(--ec-tx-2);
    font-family: 'Cairo', sans-serif;
    font-weight: 500;
}

.ec-app .ec-chip:hover {
    background: var(--ec-brand);
    color: white;
    border-color: var(--ec-brand);
    transform: translateY(-1px);
    box-shadow: var(--ec-sh-brand);
}

.ec-app .ec-chip-handle { direction: ltr; font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   HYBRID HERO، تجربة موحدة للإدخال + التحليل
   ── عند بدء التحليل: تنطوي شارات الثقة، تفتح منطقة التحليل
   ── داخل نفس البطاقة بانتقال سلس بدون انقطاع بصري
   ════════════════════════════════════════════════════════════ */

/* فاصل ناعم بين النموذج ومنطقة التحليل المدمجة */
.ec-app .ec-loading--inline,
.ec-app .ec-error--inline {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    margin: var(--ec-sp-5) auto 0 !important;
    padding: var(--ec-sp-6) 0 var(--ec-sp-2) !important;
    position: relative;
}

/* خط فاصل متدرج فوق منطقة التحليل (يظهر بسلاسة) */
.ec-app .ec-loading--inline::before,
.ec-app .ec-error--inline::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 8%;
    inset-inline-end: 8%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(47, 127, 174, 0.20) 20%,
        rgba(63, 199, 239, 0.25) 50%,
        rgba(63, 199, 239, 0.20) 80%,
        transparent 100%
    );
    z-index: 2;
}

/* خلال التحليل: شارات الثقة تنطوي بسلاسة */
.ec-app .ec-hero-v2 .ec-trust-row {
    transition:
        opacity 0.35s var(--ec-ease),
        max-height 0.45s var(--ec-ease),
        margin 0.35s var(--ec-ease),
        transform 0.35s var(--ec-ease);
    overflow: hidden;
    max-height: 80px;
}
.ec-app .ec-hero-v2:has(.ec-loading--inline:not(.d-none)) .ec-trust-row,
.ec-app .ec-hero-v2:has(.ec-error--inline:not(.d-none)) .ec-trust-row {
    opacity: 0;
    max-height: 0;
    margin: 0;
    transform: translateY(-4px);
    pointer-events: none;
}

/* خلال التحليل: حقل الإدخال يصبح خفيفا (للتركيز على التحليل) */
.ec-app .ec-hero-v2 .ec-stack-form {
    transition: opacity 0.3s var(--ec-ease);
}
.ec-app .ec-hero-v2:has(.ec-loading--inline:not(.d-none)) .ec-stack-form {
    opacity: 0.85;
}

/* خلال الخطأ: تظليل بسيط لحقل الإدخال */
.ec-app .ec-hero-v2:has(.ec-error--inline:not(.d-none)) .ec-stack-form {
    opacity: 0.95;
}

/* انتقال ظهور منطقة التحليل (slide-down + fade-in) */
.ec-app .ec-loading--inline:not(.d-none),
.ec-app .ec-error--inline:not(.d-none) {
    animation: ec-hybrid-reveal 0.5s var(--ec-ease) backwards;
}
@keyframes ec-hybrid-reveal {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        max-height: 800px;
    }
}

/* بطاقة الهيرو تنمو بسلاسة لاستيعاب المحتوى الجديد */
.ec-app .ec-hero-v2 {
    transition: padding 0.4s var(--ec-ease);
}
.ec-app .ec-hero-v2:has(.ec-loading--inline:not(.d-none)) {
    padding-bottom: clamp(24px, 4vw, 40px);
}

/* تعطيل ظهور النقاط العائمة خارج البطاقة في وضع inline */
.ec-app .ec-loading--inline .ec-loading-dots {
    /* النقاط داخل الـ inline ضمن padding البطاقة */
}

/* في الجوال: تقليل التباعد */
@media (max-width: 575.98px) {
    .ec-app .ec-loading--inline,
    .ec-app .ec-error--inline {
        margin-top: var(--ec-sp-4) !important;
        padding-top: var(--ec-sp-5) !important;
    }
}

/* fallback للمتصفحات القديمة التي لا تدعم :has() */
@supports not selector(:has(*)) {
    /* الفولباك: شارات الثقة تبقى ظاهرة لكن منطقة التحليل تظهر بشكل عادي */
    .ec-app .ec-loading--inline:not(.d-none),
    .ec-app .ec-error--inline:not(.d-none) {
        margin-top: var(--ec-sp-6) !important;
    }
}

/* ════════════════════════════════════════════════════════════
   2. LOADING STATE
   ════════════════════════════════════════════════════════════ */

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

.ec-app .ec-loading {
    text-align: center;
    padding: clamp(2rem, 4vw, 3rem) var(--ec-sp-4);
    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);
    box-shadow: 0 8px 24px -10px rgba(15,23,42,0.06);
    max-width: 640px;
    margin: 0 auto var(--ec-sp-6);
}
/* ═══════════════════════════════════════════════════════
   ORB v2، تصميم متعدد الطبقات مع شعار الموقع
   • حلقة خارجية دوارة (conic gradient)
   • مركز أبيض ثابت يحتوي الشعار
   • 3 نقاط مدارية بألوان الهوية
   • هالة نابضة + ظل عميق
   ═══════════════════════════════════════════════════════ */

/* الحلقة الخارجية الدوارة */
.ec-app .ec-loading-orb {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    margin: 0;
    background: conic-gradient(
        from 0deg,
        #2f7fae 0%,
        #3fc7ef 30%,
        #5457E6 50%,
        #57ddd0 75%,
        #2f7fae 100%
    );
    animation: ec-spin 3s linear infinite;
    position: relative;
    z-index: 1;
    box-shadow:
        0 20px 40px -12px rgba(0, 0, 0, 0.45),
        0 8px 20px -6px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.06);
    /* تحسينات الأداء */
    will-change: transform;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* الخلفية البيضاء داخل الحلقة (تظهر الحلقة كـ ring لا قرص) */
.ec-app .ec-loading-orb::after {
    content: '';
    position: absolute;
    inset: 5px;
    background:
        radial-gradient(circle at 30% 25%, var(--tt-surface) 0%, var(--tt-surface-2) 70%);
    border-radius: 50%;
}

/* ──────────────────────────────────────────
   مركز الـ orb: قرص أبيض يحتوي شعار الموقع
   sibling مستقل (لا يدور مع الحلقة)
   ────────────────────────────────────────── */
.ec-app .ec-loading-orb-wrap .ec-loading-orb-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    background: var(--tt-surface);
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 1),
        inset 0 -1px 2px rgba(15, 23, 42, 0.04),
        0 4px 12px -3px rgba(15, 23, 42, 0.08),
        0 1px 3px -1px rgba(0, 0, 0, 0.12);
    animation: none;
}

/* شعار الموقع داخل المركز */
.ec-app .ec-loading-orb-wrap .ec-loading-orb-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: contain;
    display: block;
    animation: ec-logo-breathe 2.4s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(102, 50, 250, 0.20));
}

/* تنفس ناعم للشعار يعطي إحساس بالحياة */
@keyframes ec-logo-breathe {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 2px 4px rgba(102, 50, 250, 0.20));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 3px 8px rgba(102, 50, 250, 0.35));
    }
}

/* ──────────────────────────────────────────
   3 نقاط مدارية تدور حول الـ orb
   كل نقطة بلون من ألوان الهوية + glow
   ────────────────────────────────────────── */
.ec-app .ec-loading-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 2;
    pointer-events: none;
    will-change: transform;
}
.ec-app .ec-loading-orbit::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* نقطة وردية، تدور بالاتجاه العادي */
.ec-app .ec-loading-orbit--1 {
    animation: ec-orbit 4.5s linear infinite;
}
.ec-app .ec-loading-orbit--1::before {
    width: 9px;
    height: 9px;
    background: linear-gradient(135deg, #2f7fae, #215d87);
    box-shadow: none;
    top: -68px;
    left: 0;
}

/* نقطة سماوية، تدور عكسيا */
.ec-app .ec-loading-orbit--2 {
    animation: ec-orbit 5s linear infinite reverse;
    animation-delay: -1.6s;
}
.ec-app .ec-loading-orbit--2::before {
    width: 7px;
    height: 7px;
    background: linear-gradient(135deg, #57ddd0, #06B6D4);
    box-shadow: none;
    top: -68px;
    left: 0;
}

/* نقطة بنفسجية، تدور بسرعة مختلفة */
.ec-app .ec-loading-orbit--3 {
    animation: ec-orbit 5.5s linear infinite;
    animation-delay: -3s;
}
.ec-app .ec-loading-orbit--3::before {
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #3fc7ef, #3fc7ef);
    box-shadow: none;
    top: -68px;
    left: 0;
}

@keyframes ec-orbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

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

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

.ec-app .ec-progress-wrap {
    max-width: 440px;
    margin: var(--ec-sp-5) auto 0;
}
.ec-app .ec-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ec-sp-2);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ec-tx-3);
}
.ec-app .ec-progress-pct {
    font-size: 1rem;
    font-weight: 900;
    background: var(--ec-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 .ec-progress {
    height: 10px;
    background: var(--ec-surface-3);
    border-radius: var(--ec-r-pill);
    overflow: hidden;
    position: relative;
}
.ec-app .ec-progress-fill {
    height: 100%;
    background: var(--ec-grad);
    width: 0%;
    transition: width 0.6s var(--ec-ease);
    border-radius: var(--ec-r-pill);
    position: relative;
    overflow: hidden;
}
.ec-app .ec-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.45) 50%,
        transparent 100%
    );
    animation: ec-progress-shine 1.6s linear infinite;
}
@keyframes ec-progress-shine {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ────────── Inline button spinner (في زر "حلل الآن") ────────── */
.ec-app .ec-stack-btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: ec-spin 0.7s linear infinite;
    margin-inline-end: var(--ec-sp-2);
    flex-shrink: 0;
    display: inline-block;
}
.ec-app .ec-stack-btn-spinner[hidden] { display: none; }

/* ────────── Loading section enhancements ────────── */
.ec-app .ec-loading {
    position: relative;
    overflow: hidden;
}

/* خلفية متدرجة هادئة داخل صندوق التحميل */
.ec-app .ec-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 420px 280px at 50% -10%, rgba(47, 127, 174, 0.07), transparent 65%),
        radial-gradient(ellipse 360px 240px at 50% 110%, rgba(63, 199, 239, 0.06), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.ec-app .ec-loading > * { position: relative; z-index: 1; }

/* النقاط العائمة في الأعلى */
.ec-app .ec-loading-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.ec-app .ec-loading-dots span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2f7fae, #3fc7ef);
    opacity: 0.35;
    animation: ec-float 4.5s ease-in-out infinite;
    box-shadow: none;
}
.ec-app .ec-loading-dots span:nth-child(1) { top: 18%; inset-inline-start: 12%; animation-delay: 0s;   width: 5px; height: 5px; }
.ec-app .ec-loading-dots span:nth-child(2) { top: 26%; inset-inline-end:  16%; animation-delay: 0.6s; width: 7px; height: 7px; background: linear-gradient(135deg, #57ddd0, #2563EB); box-shadow: none; }
.ec-app .ec-loading-dots span:nth-child(3) { top: 62%; inset-inline-start:  8%; animation-delay: 1.2s; width: 6px; height: 6px; background: linear-gradient(135deg, #3fc7ef, #5457E6); box-shadow: none; }
.ec-app .ec-loading-dots span:nth-child(4) { top: 72%; inset-inline-end:  10%; animation-delay: 1.8s; width: 5px; height: 5px; }
.ec-app .ec-loading-dots span:nth-child(5) { top: 44%; inset-inline-start: 92%; animation-delay: 2.4s; width: 4px; height: 4px; background: linear-gradient(135deg, #57ddd0, #10B981); box-shadow: none; }

@keyframes ec-float {
    0%, 100% { transform: translateY(0) scale(1);    opacity: 0.35; }
    50%      { transform: translateY(-14px) scale(1.15); opacity: 0.65; }
}

/* غلاف الـ orb، أكبر ليستوعب النقاط المدارية */
.ec-app .ec-loading-orb-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto var(--ec-sp-5);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* الهالة المتوهجة خلف كل شيء */
.ec-app .ec-loading-orb-halo {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgba(255, 255, 255, 0.05) 0%,
        transparent 70%);
    filter: blur(16px);
    animation: ec-halo-pulse 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes ec-halo-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.75; }
    50%      { transform: scale(1.20); opacity: 1; }
}

/* ────────── مراحل التحليل (Stage indicator) ────────── */
.ec-app .ec-stages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ec-sp-2);
    margin: var(--ec-sp-6) auto 0;
    max-width: 520px;
    direction: rtl;
}
.ec-app .ec-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 84px;
    text-align: center;
    transition: all 0.25s var(--ec-ease);
}
.ec-app .ec-stage-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ec-surface);
    border: 1.5px solid var(--ec-border);
    color: var(--ec-tx-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 800;
    transition: all 0.3s var(--ec-ease);
    position: relative;
    box-shadow: var(--ec-sh-1);
}
.ec-app .ec-stage-num {
    line-height: 1;
    font-feature-settings: "lnum" 1, "tnum" 1;
    direction: ltr;
}
.ec-app .ec-stage-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ec-tx-4);
    line-height: 1.3;
    transition: color 0.25s var(--ec-ease);
}

/* الخط الواصل بين المراحل */
.ec-app .ec-stage-line {
    flex: 1 1 auto;
    height: 2px;
    background: var(--ec-border);
    border-radius: 2px;
    min-width: 18px;
    max-width: 56px;
    margin-bottom: 22px; /* محاذاة مع منتصف الأيقونة */
    position: relative;
    overflow: hidden;
}
.ec-app .ec-stage-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #10B981, #059669);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.5s var(--ec-ease);
}
.ec-app .ec-stage.is-done + .ec-stage-line::after { transform: scaleX(1); }

/* المرحلة المكتملة */
.ec-app .ec-stage.is-done .ec-stage-icon {
    background: linear-gradient(135deg, #10B981, #059669);
    border-color: transparent;
    color: #FFFFFF;
    box-shadow: 0 4px 12px -3px rgba(16, 185, 129, 0.45);
}
.ec-app .ec-stage.is-done .ec-stage-num { display: none; }
/* علامة الصح، borders فيزيائية لأن الـ checkmark رمز بصري لا يتبع اتجاه النص */
.ec-app .ec-stage.is-done .ec-stage-icon::after {
    content: '';
    width: 14px;
    height: 8px;
    border-bottom: 2.5px solid #FFFFFF;
    border-left: 2.5px solid #FFFFFF;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg) translate(1px, -2px);
}
.ec-app .ec-stage.is-done .ec-stage-label { color: #34d399; }

/* المرحلة الفعالة */
.ec-app .ec-stage.is-active .ec-stage-icon {
    background: linear-gradient(135deg, #2f7fae, #3fc7ef);
    border-color: transparent;
    color: #FFFFFF;
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.4);
    animation: ec-stage-pulse 1.6s ease-in-out infinite;
}
.ec-app .ec-stage.is-active .ec-stage-label {
    color: var(--ec-tx-1);
    font-weight: 800;
}
.ec-app .ec-stage.is-active .ec-stage-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    animation: ec-stage-ring 1.6s ease-out infinite;
}
@keyframes ec-stage-pulse {
    0%, 100% { box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.4); }
    50%      { box-shadow: 0 6px 24px -2px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(255, 255, 255, 0.06); }
}
@keyframes ec-stage-ring {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* استجابة الجوال */
@media (max-width: 575.98px) {
    .ec-app .ec-loading-dots span { width: 4px !important; height: 4px !important; }
    .ec-app .ec-stages { gap: 4px; max-width: 100%; }
    .ec-app .ec-stage { min-width: 0; flex: 1 1 0; }
    .ec-app .ec-stage-line { min-width: 8px; max-width: 28px; }
    .ec-app .ec-stage-icon { width: 32px; height: 32px; font-size: 0.8125rem; }
    .ec-app .ec-stage-label { font-size: 0.6875rem; }
    .ec-app .ec-loading-orb-wrap { width: 140px; height: 140px; }
    .ec-app .ec-loading-orb { width: 88px; height: 88px; }
    .ec-app .ec-loading-orb-wrap .ec-loading-orb-icon { width: 62px; height: 62px; }
    .ec-app .ec-loading-orb-wrap .ec-loading-orb-logo { width: 40px; height: 40px; border-radius: 10px; }
    .ec-app .ec-loading-orbit--1::before,
    .ec-app .ec-loading-orbit--2::before,
    .ec-app .ec-loading-orbit--3::before { top: -58px; }
}

/* ════════════════════════════════════════════════════════════
   3. ERROR STATE
   ════════════════════════════════════════════════════════════ */

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

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

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

/* ════════════════════════════════════════════════════════════
   4. RESULT GRID، منظومة البطاقات
   ════════════════════════════════════════════════════════════ */

.ec-app .ec-results {
    display: grid;
    gap: var(--ec-sp-5);
    grid-template-columns: 1fr;
    grid-template-areas:
        "profile"
        "score"
        "grade"
        "metrics"
        "recs"
        "actions"
        "meta";
}

@media (min-width: 768px) {
    .ec-app .ec-results {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        grid-template-areas:
            "profile  score"
            "grade    grade"
            "metrics  metrics"
            "recs     recs"
            "actions  actions"
            "meta     meta";
    }
}

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

.ec-app .ec-card-area-profile  { grid-area: profile; }
.ec-app .ec-card-area-score    { grid-area: score; }
.ec-app .ec-card-area-grade    { grid-area: grade; }
.ec-app .ec-card-area-metrics  { grid-area: metrics; padding: var(--ec-sp-5); background: transparent; border: 0; box-shadow: none; }
.ec-app .ec-card-area-recs     { grid-area: recs; }
.ec-app .ec-card-area-actions  { grid-area: actions; padding: 0; background: transparent; border: 0; box-shadow: none; }
.ec-app .ec-card-area-meta     { grid-area: meta; padding: 0; background: transparent; border: 0; box-shadow: none; }

/* ────────────────── PROFILE CARD ────────────────── */

.ec-app .ec-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

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

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

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

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

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

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

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

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

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

/* ────────────────── SCORE CARD ────────────────── */

.ec-app .ec-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

.ec-app .ec-ring {
    width: 200px;
    height: 200px;
    position: relative;
    margin-bottom: var(--ec-sp-4);
}
.ec-app .ec-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.ec-app .ec-ring-bg {
    fill: none;
    stroke: var(--ec-surface-3);
    stroke-width: 12;
}
.ec-app .ec-ring-fg {
    fill: none;
    stroke: url(#ec-ring-grad);
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s var(--ec-ease);
}

.ec-app .ec-ring-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

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

.ec-app .ec-er-val {
    font-size: clamp(2.5rem, 6vw, 3.25rem);
    font-weight: 900;
    line-height: 1;
    background: var(--ec-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -0.03em;
    display: inline-block;
}

.ec-app .ec-ring-sub {
    font-size: 0.8125rem;
    color: var(--ec-tx-3);
    margin-top: 4px;
    font-weight: 500;
}

.ec-app .ec-score-meta {
    font-size: 0.8125rem;
    color: var(--ec-tx-3);
    margin: 0;
    text-align: center;
}

/* ────────────────── GRADE CARD ────────────────── */

.ec-app .ec-grade {
    display: flex;
    align-items: center;
    gap: var(--ec-sp-4);
}

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

.ec-app .ec-grade-info { flex: 1; }

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

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

.ec-app .ec-grade-success  .ec-grade-icon { background: rgba(16,185,129,0.14); color: #34d399; }
.ec-app .ec-grade-info     .ec-grade-icon { background: rgba(59,130,246,0.14); color: #60a5fa; }
.ec-app .ec-grade-warning  .ec-grade-icon { background: rgba(245,158,11,0.14); color: #fbbf24; }
.ec-app .ec-grade-danger   .ec-grade-icon { background: rgba(239,68,68,0.13); color: #f87171; }
.ec-app .ec-grade-secondary .ec-grade-icon { background: var(--ec-surface-3); color: var(--ec-tx-3); }

/* ────────────────── METRICS GRID ────────────────── */

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

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

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

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

.ec-app .ec-mi-pink    { background: rgba(239,68,68,0.10); color: #7cc9ec; }
.ec-app .ec-mi-rose    { background: rgba(239,68,68,0.13); color: #7cc9ec; }
.ec-app .ec-mi-sky     { background: rgba(59,130,246,0.14); color: #60a5fa; }
.ec-app .ec-mi-purple  { background: rgba(99,102,241,0.14); color: #a5b4fc; }
.ec-app .ec-mi-amber   { background: rgba(245,158,11,0.14); color: #fbbf24; }
.ec-app .ec-mi-emerald { background: rgba(16,185,129,0.14); color: #34d399; }

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

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

/* ────────────────── RECOMMENDATIONS ────────────────── */

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

.ec-app .ec-recs-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--ec-r-md);
    background: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(245,158,11,0.2));
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

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

.ec-app .ec-recs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ec-sp-3);
}

.ec-app .ec-rec {
    background: var(--ec-surface-2);
    border: 1px solid var(--ec-border-soft);
    border-radius: var(--ec-r-lg);
    padding: var(--ec-sp-4) var(--ec-sp-5);
    display: flex;
    align-items: flex-start;
    gap: var(--ec-sp-4);
    transition: all 0.2s var(--ec-ease);
}

.ec-app .ec-rec:hover {
    background: var(--ec-surface);
    border-color: var(--ec-border);
    transform: translateX(-3px);
    box-shadow: var(--ec-sh-1);
}

.ec-app .ec-rec-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--ec-r-sm);
    background: var(--ec-grad);
    color: white;
    font-weight: 800;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    box-shadow: var(--ec-sh-brand);
}

.ec-app .ec-rec-text {
    flex: 1;
    color: var(--ec-tx-2);
    font-size: 0.9375rem;
    line-height: 1.75;
}

/* ────────────────── ACTIONS + META ────────────────── */

.ec-app .ec-actions {
    display: flex;
    gap: var(--ec-sp-3);
    flex-wrap: wrap;
    justify-content: center;
}

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

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

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

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

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

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

/* ════════════════════════════════════════════════════════════
   5. ANIMATIONS
   ════════════════════════════════════════════════════════════ */

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

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

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

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

/* ════════════════════════════════════════════════════════════
   6. RESPONSIVE
   ════════════════════════════════════════════════════════════ */

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

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

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

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