/* ============================================================
   BRAIN SKILL — Phase 07: public reputation cards (جودة التطبيق، تجربة الشراء، المطوّرون، الزوّار، الأمثلة التوضيحية).
   Additive and scoped to .rv-*: it changes no existing rule. Each category has its own accent and its own card; a page never merges them.
   Light by default (developer portal); dark inside the studio pages (.st-shell), using the site's own palette.
   ============================================================ */
.rv-section { padding: 3rem 0 1.5rem; }
.rv-head { max-width: 760px; margin-bottom: 1.2rem; }
.rv-head p { margin: .35rem 0 0; font-size: .9rem; opacity: .85; }
.rv-group { margin: 1.4rem 0 .4rem; font: 800 1rem Cairo, sans-serif; }
.rv-group small { font-weight: 600; opacity: .75; }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 430px)); justify-content: start; gap: 1rem; }
.rv-card { min-width: 0; background: #fff; color: #0b1a3a; border: 1px solid #dbe4f3; border-radius: 14px; padding: 1rem; }
.rv-axis { border-inline-start: 4px solid #1685DA; }
.rv-axis--external { border-inline-start-color: #e07a1f; }
.rv-axis--purchase { border-inline-start-color: #7a5af8; }
.rv-axis--developer { border-inline-start-color: #0ea5a4; }
.rv-axis--visitor { border-inline-start-color: #8a97ad; }
.rv-axis--example { border-inline-start-color: #F7B844; border-style: dashed; border-inline-start-style: solid; }
.rv-label { font-size: .76rem; color: #5b6b8a; line-height: 1.6; }
.rv-row { display: flex; align-items: center; gap: .8rem; margin: .3rem 0; }
.rv-num { font-size: 2rem; font-weight: 800; line-height: 1; }
.rv-stars { color: #F7B844; letter-spacing: .05em; direction: ltr; display: inline-block; font-size: 1.25rem; }
.rv-badge { display: inline-flex; align-items: center; background: #dcfce7; color: #14532d; border-radius: 999px; padding: .02rem .55rem; font: 700 .7rem Cairo, sans-serif; }
.rv-axis--visitor .rv-badge { background: #e6eaf2; color: #3b4863; }
.rv-dist { margin-top: .5rem; }
.rv-bar { display: grid; grid-template-columns: 2.2rem 1fr 1.6rem; align-items: center; gap: .4rem; font-size: .72rem; margin: .1rem 0; direction: ltr; }
.rv-bar i { display: block; height: 7px; border-radius: 4px; background: #1685DA; min-width: 2px; }
.rv-axis--external .rv-bar i { background: #e07a1f; }
.rv-axis--purchase .rv-bar i { background: #7a5af8; }
.rv-axis--developer .rv-bar i { background: #0ea5a4; }
.rv-axis--visitor .rv-bar i { background: #8a97ad; }
.rv-reasons { margin-top: .45rem; }
.rv-empty { margin: .4rem 0 0; font-size: .82rem; color: #5b6b8a; }
.rv-example { background: #fffaf0; }
.rv-example__tag { display: inline-block; background: #fde8d6; color: #8a4a07; border-radius: 6px; font: 700 .7rem Cairo, sans-serif; padding: .05rem .5rem; margin-bottom: .3rem; }
.rv-example p { margin: .25rem 0 0; font-size: .85rem; line-height: 1.7; }
.rv-note { margin-top: .8rem; font-size: .76rem; color: #5b6b8a; }
.rv-strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.2rem; align-items: center; background: #f3f7fd; color: #0b1a3a; border: 1px solid #d3e0f3; border-radius: 12px; padding: .55rem .8rem; margin: 0 0 1rem; font-size: .86rem; }
.rv-strip .rv-stars { font-size: 1rem; }
.rv-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; margin-top: .35rem; color: #5b6b8a; }
.rv-chip .rv-stars { font-size: .95rem; }

/* studio (dark) pages */
.st-shell .rv-card { background: rgba(255, 255, 255, .05); color: #EAF7FF; border-color: rgba(155, 220, 251, .2); }
.st-shell .rv-label, .st-shell .rv-empty, .st-shell .rv-note, .st-shell .rv-chip { color: rgba(226, 240, 255, .74); }
.st-shell .rv-badge { background: rgba(115, 229, 189, .18); color: #9ef0cf; }
.st-shell .rv-axis--visitor .rv-badge { background: rgba(255, 255, 255, .1); color: #d3deef; }
.st-shell .rv-example { background: rgba(247, 184, 68, .07); }
.st-shell .rv-example__tag { background: rgba(247, 184, 68, .18); color: #ffd48a; }
.st-shell .rv-strip { background: rgba(255, 255, 255, .06); color: #EAF7FF; border-color: rgba(155, 220, 251, .2); }
.st-shell .rv-group, .st-shell .rv-head h2 { color: #fff; }

@media (max-width: 560px) {
    .rv-section { padding: 2rem 0 1rem; }
    .rv-grid { grid-template-columns: 1fr; }
    .rv-num { font-size: 1.7rem; }
}