/* ===== رأس الصفحة ===== */
.page-head {
    margin: 0 0 var(--space-10)
}

.page-head h1 {
    font-size: var(--fs-3xl);
    color: var(--primary-blue-dark)
}

.page-head p {
    max-width: 640px;
    margin-top: var(--space-4)
}

/* ===== منطقة السحب والإفلات ===== */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    text-align: center;
    background: var(--surface-0, #FFFFFF);
    transition: var(--transition-fast);
    cursor: pointer
}

.dropzone:hover {
    border-color: var(--neutral-gray);
    background: var(--gray-50)
}

.dropzone.dragover {
    border-color: var(--primary-blue);
    background: var(--gray-50)
}

.dropzone i {
    font-size: var(--fs-4xl);
    color: var(--primary-blue)
}

.dropzone-icon {
    width: 44px;
    height: 44px;
    color: var(--accent)
}

.dropzone strong {
    font-size: var(--fs-md);
    color: var(--text-dark)
}

.dropzone-file {
    margin-top: var(--space-4);
    font-weight: 600;
    color: var(--primary-blue-dark)
}

/* ===== شريط مراحل التقدم ===== */
.analysis-loading {
    display: none;
    margin-top: var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-0, #FFFFFF);
    box-shadow: var(--shadow-static)
}

.analysis-loading.show {
    display: block
}

.analysis-loading-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0 0 var(--space-5)
}

.analysis-loading-head strong {
    display: block;
    font-size: var(--fs-lg);
    color: var(--primary-blue-dark)
}

.analysis-loading-head p {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-sm)
}

.analysis-loading-spinner {
    display: inline-flex;
    width: 40px;
    height: 40px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary-blue);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    animation: contract-spin 0.8s linear infinite
}

@keyframes contract-spin {
    to { transform: rotate(360deg) }
}

.analysis-result-panel {
    display: none;
    margin-top: var(--space-6)
}

.analysis-result-panel.show {
    display: block
}

.progress-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-4)
}

.progress-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--neutral-gray)
}

.progress-step .dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    color: var(--background);
    background: var(--neutral-gray);
    font-size: var(--fs-sm)
}

.progress-step.active {
    color: var(--text-dark);
    font-weight: 600
}

.progress-step.active .dot {
    background: var(--primary-blue)
}

.progress-step.done .dot {
    background: var(--success-green)
}

/* ===== بطاقة الملخص ===== */
.summary-card {
    margin: 0 0 var(--space-6)
}

.summary-card h2 {
    font-size: var(--fs-xl);
    margin: 0 0 var(--space-3)
}

.summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0 0 var(--space-4)
}

/* ===== تقرير التحليل ===== */
.analysis-report {
    display: flex;
    flex-direction: column;
    gap: var(--space-6)
}

.report-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.9) 100%)
}

.report-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary-blue)
}

.report-title {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-2xl);
    color: var(--ink-900)
}

.report-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3)
}

.report-date {
    font-size: var(--fs-sm);
    color: var(--text-muted)
}

.report-risk-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 148px;
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-md);
    text-align: center
}

.report-risk-score__label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted)
}

.report-risk-score__value {
    font-size: var(--fs-xl);
    font-weight: 700
}

.report-risk-score--high {
    color: #8a2c2f;
    background: #fdecec
}

.report-risk-score--medium {
    color: #8a5a06;
    background: #fdf3e0
}

.report-risk-score--low {
    color: #0c6b47;
    background: #e7f8f1
}

.report-risk-score--unknown {
    color: var(--gray-700);
    background: var(--gray-100)
}

.report-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3)
}

.report-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-0)
}

.report-stat strong {
    font-size: var(--fs-2xl);
    line-height: 1;
    color: var(--ink-900)
}

.report-stat span {
    font-size: var(--fs-sm);
    color: var(--text-muted)
}

.report-stat--high strong {
    color: #c93b40
}

.report-stat--medium strong {
    color: #b7791f
}

.report-stat--low strong {
    color: #0c6b47
}

.report-summary {
    padding: var(--space-6)
}

.report-panel {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-0, #FFFFFF)
}

/* ===== سجل المخاطر ===== */
.risk-dossier {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-0, #FFFFFF);
    overflow: hidden
}

.risk-dossier-empty {
    margin: 0;
    padding: var(--space-6);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--text-muted)
}

.risk-entry {
    border-bottom: 1px solid var(--border-color)
}

.risk-entry:last-child {
    border-bottom: none
}

.risk-entry-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--gray-50)
}

.risk-entry-num {
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1;
    color: var(--gray-300);
    flex-shrink: 0
}

.risk-entry--high .risk-entry-num {
    color: #e8b4b6
}

.risk-entry--medium .risk-entry-num {
    color: #e8d4a8
}

.risk-entry--low .risk-entry-num {
    color: #b8e0ce
}

.risk-entry-title-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex: 1;
    min-width: 0
}

.risk-entry-title-wrap h3 {
    margin: 0;
    font-size: var(--fs-md);
    color: var(--ink-900)
}

.risk-level-tag {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    line-height: 1.5
}

.risk-entry--high .risk-level-tag {
    color: #8a2c2f;
    background: #fdecec
}

.risk-entry--medium .risk-level-tag {
    color: #8a5a06;
    background: #fdf3e0
}

.risk-entry--low .risk-level-tag {
    color: #0c6b47;
    background: #e7f8f1
}

.risk-entry-body {
    padding: var(--space-5) var(--space-6) var(--space-6)
}

.risk-entry-ref {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    background: var(--gray-50)
}

.risk-entry-ref i {
    color: var(--primary-blue);
    font-size: var(--fs-xs)
}

.risk-entry-text {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--text-body)
}

.risk-entry-advice {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px dashed var(--border-color)
}

.risk-entry-advice-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--primary-blue-dark)
}

.risk-entry-advice-text {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--text-body)
}

.report-section-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    font-size: var(--fs-lg);
    color: var(--ink-900)
}

.report-section-head--spaced {
    margin-top: var(--space-2)
}

.report-section-head h3 {
    margin: 0;
    font-size: var(--fs-lg)
}

.report-section-head i {
    color: var(--primary-blue)
}

.report-count {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-muted)
}

.report-summary-text p, .risk-entry-text p, .risk-entry-advice-text p, .risk-recommendation-text p {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--text-body)
}

.report-summary-text p:last-child, .risk-entry-text p:last-child, .risk-entry-advice-text p:last-child, .risk-recommendation-text p:last-child {
    margin-bottom: 0
}

.rich-list {
    margin: 0 0 var(--space-3);
    padding: 0 var(--space-5) 0 0;
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--text-body)
}

.rich-list li {
    margin: 0 0 var(--space-2)
}

.risk-recommendation {
    display: none;
    margin-top: var(--space-5);
    padding: var(--space-5) var(--space-6);
    border: 1px solid #c5dcf5;
    border-radius: var(--radius-md);
    background: #e6f1fb
}

.risk-recommendation.show {
    display: block
}

.risk-recommendation-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--primary-blue-dark)
}

.risk-recommendation-label i {
    color: var(--primary-blue)
}

.risk-recommendation-text {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--text-body)
}

.risk-recommendation-text p {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--text-body)
}

.risk-recommendation-text p:last-child {
    margin-bottom: 0
}

.report-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid #dbe4f0;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--gray-700);
    background: #f5f8fc
}

.report-disclaimer i {
    margin-top: 2px;
    color: var(--primary-blue)
}

.report-disclaimer p {
    margin: 0
}

.report-actions {
    margin-top: 0
}

/* ===== كاشف الاحتيال ===== */
.fraud-result {
    display: none;
    margin-top: var(--space-6)
}

.fraud-result.show {
    display: block
}

.fraud-level {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--fs-md)
}

.reasons-list li {
    position: relative;
    padding: var(--space-2) var(--space-5) var(--space-2) 0;
    color: var(--text-body)
}

.reasons-list li::before {
    content: '';
    position: absolute;
    top: 15px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--primary-blue)
}

/* ===== شبكة روابط سريعة ===== */
.tab-switch {
    display: flex;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    flex-wrap: wrap
}

@media screen and (max-width: 767px) {
    .report-header {
        padding: var(--space-5)
    }

    .report-risk-score {
        width: 100%;
        min-width: 0
    }

    .report-summary {
        padding: var(--space-5)
    }

    .risk-entry-head {
        padding: var(--space-4) var(--space-5)
    }

    .risk-entry-body {
        padding: var(--space-4) var(--space-5) var(--space-5)
    }

    .risk-dossier-empty {
        padding: var(--space-5)
    }

    .report-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3)
    }

    .report-actions .btn {
        display: flex;
        justify-content: center;
        width: 100%;
        flex: none
    }
}

@media screen and (max-width: 394px) {
    .report-stats {
        grid-template-columns: 1fr
    }

    .report-title {
        font-size: var(--fs-xl)
    }
}