/* صفحة الاختيار: مقارنة ثلاث هويات فوق تطبيق واحد. */
:root{
  --ink:#12100E; --muted:#6A625A; --faint:#9A9089; --paper:#F7F5F1; --line:#E2DDD5;
  --font-body:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --font-head:'Noto Kufi Arabic',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body);
  font-size:15px; line-height:1.75; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 480px at 88% -6%, #EDF3EC 0%, transparent 60%),
    radial-gradient(700px 400px at 4% 4%, #F6EDE4 0%, transparent 55%);
}
h1,h2,h3{margin:0; font-family:var(--font-head); line-height:1.35; letter-spacing:-.01em}
p{margin:0}
a{color:inherit; text-decoration:none}
.mono{font-family:var(--font-mono); font-size:12px}
.ltr{direction:ltr; unicode-bidi:embed}

.hero{max-width:1120px; margin:0 auto; padding:64px 28px 34px}
.badge{
  display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  color:#3F6B54; background:#E4EFE7; border:1px solid #CFE2D5; border-radius:999px; padding:3px 11px;
}
.hero h1{font-size:clamp(30px,4.4vw,52px); margin:16px 0 14px; font-weight:700}
.lede{max-width:62ch; color:var(--muted); font-size:16px}

.grid{
  max-width:1120px; margin:0 auto; padding:8px 28px 20px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;
}
.card{
  display:block; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 28px 50px -34px rgba(18,16,14,.45); border-color:#D2CCC2}
.card:focus-visible{outline:2px solid #2F6B52; outline-offset:3px}

/* المعاينات المصغّرة */
.preview{height:186px; display:flex; gap:9px; padding:14px; overflow:hidden}
.pv-rail{
  width:46px; flex:0 0 46px; border-radius:9px; padding:8px 6px;
  display:flex; flex-direction:column; gap:6px; align-items:stretch;
}
.pv-mark{width:16px; height:16px; border-radius:5px; display:block; margin-bottom:3px}
.pv-line{display:block; height:4px; border-radius:3px; background:currentColor; opacity:.22}
.w20{width:20%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}
.w55{width:55%}.w60{width:60%}.w70{width:70%}
.pv-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px}
.pv-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.pv-pill{width:34px; height:10px; border-radius:5px; display:block}
.pv-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:5px}
.pv-stats span{height:22px; border-radius:6px; display:block}
.pv-body{display:grid; grid-template-columns:1.25fr 1fr; gap:6px; flex:1}
.pv-list{display:flex; flex-direction:column; gap:5px; justify-content:center}
.pv-list i{display:block; height:7px; border-radius:3px}
.pv-list i:nth-child(2){margin-inline-start:10px; width:82%}
.pv-list i:nth-child(3){margin-inline-start:10px; width:68%}
.pv-list i:nth-child(4){margin-inline-start:20px; width:74%}
.pv-list i:nth-child(5){width:88%}
.pv-side{border-radius:8px; display:block}

/* 1 · مرج */
.p1{background:#F5F8F5}
.p1 .pv-rail{background:#fff; box-shadow:0 4px 12px -8px rgba(15,35,28,.4)}
.p1 .pv-mark{background:linear-gradient(145deg,#159A70,#0E7C5A)}
.p1 .pv-line{color:#0F231C}
.p1 .pv-pill{background:#0E7C5A}
.p1 .pv-stats span{background:#fff; border:1px solid #E2EAE4}
.p1 .pv-list i{background:#DCE9E1}
.p1 .pv-list i:nth-child(1){background:#CDE7DA}
.p1 .pv-side{background:#fff; border:1px solid #E2EAE4}

/* 2 · ليل */
.p2{background:#05070A; flex-direction:column; gap:7px}
.p2 .pv-rail{width:auto; flex:0 0 auto; flex-direction:row; align-items:center; gap:6px; background:#0B1017; border:1px solid #1B2632; padding:5px 7px; border-radius:7px}
.p2 .pv-mark{background:linear-gradient(150deg,#A3E635,#4ADE80); margin:0; width:12px; height:12px}
.p2 .pv-line{color:#E9F2ED; opacity:.35}
.p2 .pv-pill{background:#4ADE80}
.p2 .pv-stats span{background:#0F1620; border:1px solid #1B2632}
.p2 .pv-list i{background:#1B2632}
.p2 .pv-list i:nth-child(2){background:#2A3F33}
.p2 .pv-side{background:#0F1620; border:1px solid #1B2632}

/* 3 · ورق */
.p3{background:#F6F1E6}
.p3 .pv-rail{background:transparent; border-inline-start:1px solid #DCD1BE; border-radius:0; padding:0 8px 0 0}
.p3 .pv-word{display:block; width:26px; height:9px; background:#221D18; border-radius:0; margin-bottom:6px}
.p3 .pv-line{color:#221D18; opacity:.35}
.p3 .pv-pill{background:#A64B2A; border-radius:0; height:8px}
.p3 .pv-stats-flat{grid-template-columns:repeat(3,1fr); gap:9px}
.p3 .pv-stats span{background:transparent; border:0; border-top:1px solid #221D18; border-radius:0; height:16px}
.p3 .pv-list i{background:#DCD1BE; border-radius:0; height:1px}
.p3 .pv-list i:nth-child(1){background:#A64B2A; height:1.5px}
.p3 .pv-side{background:#FBF7EF; border:1px solid #DCD1BE; border-radius:0}

/* نص البطاقة */
.meta{padding:16px 18px 20px; border-top:1px solid var(--line)}
.meta-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.meta h2{font-size:19px; font-weight:700}
.tag{font-size:10.5px; padding:2px 8px; border-radius:999px; border:1px solid; white-space:nowrap}
.t1{color:#0E7C5A; background:#E6F4EC; border-color:#CDE7DA}
.t2{color:#8FE3AE; background:#0B1017; border-color:#26333F}
.t3{color:#A64B2A; background:#F4E6DC; border-color:#E4CDBC}
.meta p{font-size:13px; color:var(--muted); line-height:1.85}
.open{display:inline-block; margin-top:12px; font-size:12.5px; font-weight:600; color:#2F6B52}
.card:hover .open{text-decoration:underline; text-underline-offset:4px}

/* الشرح */
.what{max-width:1120px; margin:34px auto 0; padding:0 28px}
.what h2{font-size:22px; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--line)}
.cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px}
.cols h3{font-size:14px; font-family:var(--font-body); font-weight:600; color:#2F6B52; margin-bottom:4px}
.cols p{font-size:13.5px; color:var(--muted); line-height:1.95; margin-top:6px}

.foot{
  max-width:1120px; margin:44px auto 0; padding:18px 28px 34px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:11.5px; color:var(--faint);
}

@media (max-width:960px){
  .grid{grid-template-columns:minmax(0,1fr); max-width:620px}
  .cols{grid-template-columns:minmax(0,1fr); gap:16px}
  .hero{padding:44px 22px 24px}
  .grid{padding:8px 22px 20px}
  .what,.foot{padding-inline:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}