/* صفحة فحص أمان المواقع (/scan) */
.sc { background: var(--cream); min-height: 100vh; position: relative; overflow-x: hidden; }
.sc::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 560px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(24, 16, 10, .82), rgba(24, 16, 10, .92)), url(/img/studio-1024.webp) center 40% / cover;
}
.sc__top { display: flex; align-items: center; justify-content: space-between; height: 76px; color: #FBF4E6; }
.sc__top .lang { color: #FBF4E6; border-color: rgba(251, 244, 230, .7); background: transparent; }
.sc__main { padding-bottom: 80px; }
.sc__hero { color: #FBF4E6; padding: clamp(40px, 8vw, 90px) 0 clamp(60px, 8vw, 90px); max-width: 760px; }
.sc__hero .eyebrow { color: var(--sun); }
.sc__hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.15; letter-spacing: -.02em; }
.sc__hero h1 .hl { color: var(--sun); }
.sc__lead { margin-top: 16px; font-size: 1.12rem; font-weight: 300; color: rgba(251, 244, 230, .82); max-width: 56ch; }
.sc__form { margin-top: 30px; display: flex; gap: 10px; background: rgba(251, 244, 230, .1); border: 1px solid rgba(251, 244, 230, .25); padding: 8px; border-radius: 999px; backdrop-filter: blur(6px); }
.sc__form input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 1.05rem; padding: 0 18px; outline: none; }
.sc__form input::placeholder { color: rgba(251, 244, 230, .5); }
.sc__form .btn { border: 0; min-height: 50px; padding: 0 30px; }
.sc__err { margin-top: 14px; color: #FFD9C8; }
.sc__loading { display: grid; justify-items: center; gap: 16px; padding: 60px 0; color: var(--ink-soft); }
.sc__spinner { width: 48px; height: 48px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--brick); animation: sc-spin .9s linear infinite; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc__result { margin-top: 28px; display: grid; gap: 22px; }
.sc__card { display: flex; align-items: center; gap: clamp(20px, 4vw, 40px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 4vw, 40px); box-shadow: 0 30px 60px -40px rgba(60, 38, 20, .45); }
.sc__grade { position: relative; width: clamp(110px, 18vw, 150px); flex: none; }
.sc__grade svg { width: 100%; transform: rotate(-90deg); }
.sc__grade circle { fill: none; stroke-width: 10; }
.sc__grade .track { stroke: var(--line); }
.sc__grade .bar { stroke: var(--g, #3E8E5A); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1); }
.sc__grade b { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 700; color: var(--g, #3E8E5A); }
.sc__host { font-size: .95rem; color: var(--ink-soft); }
.sc__sum h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 4px 0 6px; }
.sc__sum p { color: var(--ink-soft); }
.sc__checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.sc__checks li { display: flex; gap: 12px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.sc__checks li i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: .85rem; color: #fff; background: #3E8E5A; }
.sc__checks li.fail i { background: #C2452D; }
.sc__checks strong { display: block; font-weight: 600; }
.sc__checks small { color: var(--ink-soft); font-size: .88rem; line-height: 1.6; display: block; margin-top: 2px; }
.sc__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: var(--olive); color: var(--cream); border-radius: var(--radius); padding: 22px 26px; }
.sc__cta p { font-size: 1.1rem; }
.sc__cta .btn { background: var(--cream-btn); color: #2A1A10; }
.sc__cta .btn:hover { background: #FFF8E8; }
.sc__src { text-align: center; color: var(--ink-soft); font-size: .85rem; }
@media (max-width: 560px) {
  .sc__form { border-radius: 22px; flex-direction: column; }
  .sc__form input { min-height: 48px; }
  .sc__card { flex-direction: column; text-align: center; }
}
.sc__nav { display: flex; align-items: center; gap: 14px; }
.sc__home { display: inline-flex; align-items: center; gap: 8px; color: #FBF4E6; text-decoration: none; font-weight: 500; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(251, 244, 230, .35); transition: background .2s, color .2s; }
.sc__home:hover { background: #FBF4E6; color: var(--ink); }
.sc__home svg { width: 18px; height: 18px; }
html[dir="rtl"] .sc__home svg { transform: scaleX(-1); }
@media (max-width: 480px) { .sc__home span { display: none; } .sc__home { padding: 8px 10px; } }

/* مشاركة النتيجة */
.sc__share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px; }
.sc__share h3 { margin: 0 0 4px; font-size: 1.1rem; }
.sc__share p { margin: 0; color: var(--ink-soft); font-weight: 300; font-size: .95rem; }
.sc__shareBtns { display: flex; flex-wrap: wrap; gap: 8px; }
.shr { font: inherit; font-size: .92rem; font-weight: 500; text-decoration: none; cursor: pointer; border-radius: 999px; padding: 10px 18px; border: 1.5px solid transparent; transition: transform .2s, opacity .2s; }
.shr:hover { transform: translateY(-2px); }
.shr--native { background: var(--sage); color: #FFF8E8; }
.shr--li { background: #0A66C2; color: #fff; }
.shr--wa { background: #25D366; color: #053B1E; }
.shr--x { background: #111; color: #fff; }
.shr--dl { border-color: var(--ink); color: var(--ink); background: transparent; }
