:root {
    --meqyas-purple:       var(--clr-primary);
    --meqyas-purple-light: var(--clr-primary-2);
    --meqyas-purple-dark:  #4A3DB5;
    --meqyas-bg:           var(--clr-bg);
    --meqyas-card:         var(--clr-card);
    --meqyas-border:       var(--clr-border);
    --meqyas-text:         var(--clr-text);
    --meqyas-muted:        var(--clr-muted);
    --score-color:         #F59E0B;
    --target-color:        #10B981;
}
* { font-family: 'Cairo', sans-serif; }
body { background-color: var(--meqyas-bg); color: var(--meqyas-text); min-height: 100vh; }

/* ── Header ─────────────────────────────────── */
.page-header {
    background: linear-gradient(135deg, var(--meqyas-card) 0%, var(--meqyas-bg) 60%);
    border-bottom: 1px solid var(--meqyas-border);
    padding: 2rem 0 1.5rem;
}
.page-header .badge-tag {
    background: rgba(107,92,231,0.15);
    border: 1px solid rgba(107,92,231,0.4);
    color: var(--meqyas-purple-light);
    font-size: 0.78rem;
    padding: 0.3rem 0.9rem;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 0.75rem;
}
.page-header h1 { font-size: 1.9rem; font-weight: 900; margin-bottom: 0.4rem; }
.page-header h1 span { color: var(--meqyas-purple-light); }
.page-header p { color: var(--meqyas-muted); font-size: 0.95rem; }

/* ── Cards ───────────────────────────────────── */
.meq-card {
    background: var(--meqyas-card);
    border: 1px solid var(--meqyas-border);
    border-radius: 16px;
    padding: 1.5rem;
}
.meq-card .card-label { font-size: 0.78rem; color: var(--meqyas-muted); margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.05em; }
.meq-card .card-value { font-size: 1.8rem; font-weight: 900; }
.meq-card .card-sub   { font-size: 0.82rem; color: var(--meqyas-muted); margin-top: 0.2rem; }

/* ── Score Ring ──────────────────────────────── */
.score-ring-wrap { position: relative; width: 130px; height: 130px; margin: 0 auto; }
.score-ring-wrap canvas { position: absolute; top: 0; right: 0; }
.score-ring-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; line-height: 1.2; }
.score-ring-center .val { font-size: 1.6rem; font-weight: 900; color: var(--score-color); }
.score-ring-center .lbl { font-size: 0.7rem; color: var(--meqyas-muted); }

/* ── Scenario Banner ─────────────────────────── */
.scenario-banner { border-radius: 14px; padding: 1.25rem 1.5rem; border-right: 4px solid; }
.scenario-banner.warn    { background: rgba(245,158,11,0.08); border-color: var(--score-color); }
.scenario-banner.success { background: rgba(16,185,129,0.08); border-color: var(--target-color); }
.scenario-banner .icon-wrap { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.scenario-banner.warn    .icon-wrap { background: rgba(245,158,11,0.15); color: var(--score-color); }
.scenario-banner.success .icon-wrap { background: rgba(16,185,129,0.15); color: var(--target-color); }
.scenario-banner h5 { font-size: 1rem; font-weight: 700; margin-bottom: 0.3rem; }
.scenario-banner p  { font-size: 0.88rem; color: var(--meqyas-muted); margin: 0; line-height: 1.7; }

/* ── Salary Track ────────────────────────────── */
.salary-track { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.salary-box { flex: 1; min-width: 130px; background: rgba(255,255,255,0.04); border: 1px solid var(--meqyas-border); border-radius: 12px; padding: 1rem; text-align: center; }
.salary-box .s-label  { font-size: 0.75rem; color: var(--meqyas-muted); margin-bottom: 0.3rem; }
.salary-box .s-amount { font-size: 1.45rem; font-weight: 900; }
.salary-box .s-sub    { font-size: 0.75rem; color: var(--meqyas-muted); margin-top: 0.2rem; }
.salary-arrow { font-size: 1.5rem; color: var(--meqyas-purple-light); flex-shrink: 0; }
.salary-box.current  .s-amount { color: var(--meqyas-text); }
.salary-box.target   .s-amount { color: var(--target-color); }
.salary-box.potential .s-amount { color: var(--meqyas-purple-light); }

/* ── Score Steps ─────────────────────────────── */
.score-step { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--meqyas-border); }
.score-step:last-child { border-bottom: none; }
.step-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; }
.step-dot.active { background: rgba(245,158,11,0.2); color: var(--score-color); border: 2px solid var(--score-color); }
.step-dot.next   { background: rgba(107,92,231,0.2); color: var(--meqyas-purple-light); border: 2px solid var(--meqyas-purple); }
.step-dot.goal   { background: rgba(16,185,129,0.2); color: var(--target-color); border: 2px solid var(--target-color); }
.step-info h6 { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.2rem; }
.step-info p  { font-size: 0.82rem; color: var(--meqyas-muted); margin: 0; }
.step-badge { margin-right: auto; font-size: 0.78rem; font-weight: 700; padding: 0.2rem 0.7rem; border-radius: 20px; }

/* ── Source Tags ─────────────────────────────── */
.source-note { background: rgba(255,255,255,0.03); border: 1px solid var(--meqyas-border); border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.78rem; color: var(--meqyas-muted); }
.source-note a { color: var(--meqyas-purple-light); text-decoration: none; }
.src-tag { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--meqyas-muted); background: rgba(255,255,255,0.04); border: 1px solid var(--meqyas-border); border-radius: 6px; padding: 0.15rem 0.5rem; margin-top: 0.4rem; text-decoration: none; transition: border-color 0.2s; }
.src-tag:hover { border-color: var(--meqyas-purple-light); color: var(--meqyas-purple-light); }
.src-tag i { font-size: 0.65rem; }

/* ── CTA ─────────────────────────────────────── */
.cta-section { background: linear-gradient(135deg, rgba(107,92,231,0.15) 0%, rgba(107,92,231,0.05) 100%); border: 1px solid rgba(107,92,231,0.3); border-radius: 16px; padding: 2rem; text-align: center; }
.cta-section h3 { font-weight: 900; margin-bottom: 0.5rem; }
.cta-section p  { color: var(--meqyas-muted); font-size: 0.92rem; margin-bottom: 1.5rem; }
.btn-meqyas { background: var(--meqyas-purple); color: #fff; border: none; border-radius: 10px; padding: 0.75rem 2rem; font-size: 1rem; font-weight: 700; transition: background 0.2s; }
.btn-meqyas:hover { background: var(--meqyas-purple-dark); color: #fff; }
.btn-meqyas-outline { background: transparent; color: var(--meqyas-purple-light); border: 1px solid var(--meqyas-purple); border-radius: 10px; padding: 0.75rem 2rem; font-size: 1rem; font-weight: 700; transition: all 0.2s; }
.btn-meqyas-outline:hover { background: rgba(107,92,231,0.1); color: var(--meqyas-purple-light); }

/* ── Chart & Progress ────────────────────────── */
.chart-wrap { position: relative; height: 220px; }
.meq-progress { height: 10px; background: var(--clr-border); border-radius: 10px; overflow: hidden; }
.meq-progress-bar { height: 100%; border-radius: 10px; transition: width 1s ease; }

/* ── Risk Badge ──────────────────────────────── */
.risk-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.9rem; border-radius: 20px; font-size: 0.82rem; font-weight: 700; }
.risk-medium { background: rgba(245,158,11,0.15); color: var(--score-color); border: 1px solid rgba(245,158,11,0.3); }
.risk-low    { background: rgba(16,185,129,0.15); color: var(--target-color); border: 1px solid rgba(16,185,129,0.3); }
.risk-high   { background: rgba(239,68,68,0.15); color: #EF4444; border: 1px solid rgba(239,68,68,0.3); }

hr.meq { border-color: var(--meqyas-border); opacity: 1; }