/* ============ مدرّبون سعوديّون — الهوية البصرية ============ */
:root {
  /* ألوان الهوية مأخوذة من الشعار: الأخضر #005430 والكريمي #EEF3E5 */
  --g950: #001A0E; --g900: #002E1A; --g800: #005430; --g700: #0B6A3E; --g600: #138550; --g500: #23A365; --g300: #86D3AC; --g100: #E2F0E4; --g50: #F2F7EE;
  --gold: #C9DAB4; --gold2: #EEF3E5; --gold-d: #4E6B34; --gold-l: #EEF3E5;
  --paper: #F7F9F3; --card: #FFFFFF; --ink: #0D2418; --ink2: #3A5244; --muted: #6A7F72; --line: #E1E8DC;
  --info: #2F6FB3; --warn: #B7791F; --bad: #C0392B; --ok: #127A4F;
  --r: 18px; --r-lg: 28px;
  --sh1: 0 1px 2px rgba(0,46,26,.06), 0 4px 14px rgba(0,46,26,.06);
  --sh2: 0 12px 40px -12px rgba(0,46,26,.28);
  --sh3: 0 30px 80px -20px rgba(0,26,14,.55);
  --f-display: 'Cairo', 'Noto Sans Arabic', sans-serif;
  --f-ui: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
  --f-body: 'Noto Sans Arabic', 'IBM Plex Sans Arabic', sans-serif;
  --pat-dark: none; --pat-light: none; /* يضبطها js/pattern.js */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-body); color: var(--ink); background: var(--paper); line-height: 1.75; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.3; margin: 0 0 .5em; color: var(--ink); }
a { color: var(--g600); text-decoration: none; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.muted { color: var(--muted); } .small { font-size: .86rem; } .center { text-align: center; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row.end { justify-content: flex-end; } .row.between { justify-content: space-between; }
.grow { flex: 1; }
.hidden { display: none !important; }
::selection { background: var(--gold2); color: var(--g900); }

/* ===== شاشة التحميل ===== */
.boot { position: fixed; inset: 0; display: grid; place-content: center; gap: 18px; justify-items: center; background: radial-gradient(circle at 50% 40%, var(--g700), var(--g950)); color: #fff; z-index: 100; transition: opacity .5s; font-family: var(--f-ui); text-align: center; }
.boot img { width: 180px; height: auto; animation: bootPulse 1.8s ease-in-out infinite; }
@keyframes bootPulse { 50% { opacity: .55; transform: scale(.97); } }
.boot.out { opacity: 0; pointer-events: none; }
@keyframes bootSpin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(.86); } 100% { transform: rotate(360deg) scale(1); } }

/* ===== الأزرار والحقول ===== */
.btn { --bg: var(--card); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-family: var(--f-ui); font-weight: 600; font-size: .95rem; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s; color: var(--ink); white-space: nowrap; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh1); }
.btn:active { transform: translateY(0); }
.btn.primary { background: linear-gradient(135deg, var(--g600), var(--g800)); color: #fff; border-color: transparent; box-shadow: 0 8px 24px -8px rgba(18,122,79,.65); }
.btn.gold { background: linear-gradient(135deg, #FBFDF7, var(--gold2) 50%, #DCE7CC); color: var(--g800); border-color: rgba(0,84,48,.16); box-shadow: 0 8px 26px -10px rgba(0,46,26,.45); }
.btn.ghost { background: transparent; }
.btn.glass { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); backdrop-filter: blur(8px); }
.btn.danger { background: var(--bad); color: #fff; border-color: transparent; }
.btn.sm { padding: 7px 14px; font-size: .85rem; } .btn.lg { padding: 15px 28px; font-size: 1.05rem; }
.btn.icon { padding: 9px; width: 40px; height: 40px; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.field { display: flex; flex-direction: column; gap: 6px; font-family: var(--f-ui); font-size: .92rem; font-weight: 600; color: var(--ink2); }
.field small { font-weight: 400; color: var(--muted); font-size: .8rem; }
.field.full { grid-column: 1 / -1; }
input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=search], input[type=password], select, textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font-family: var(--f-body); font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--g500); box-shadow: 0 0 0 4px rgba(26,154,99,.14); }
textarea { min-height: 110px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.chk { position: relative; }
.chk input { position: absolute; opacity: 0; pointer-events: none; }
.chk > span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font-family: var(--f-ui); font-weight: 500; font-size: .88rem; transition: all .15s; }
.chk > span i { color: var(--g600); }
.chk > input:checked + span { background: var(--g800); color: #fff; border-color: var(--g800); box-shadow: 0 6px 16px -6px rgba(0,84,48,.6); }
.chk > input:checked + span i { color: var(--gold2); }
.chk > input:focus-visible + span { box-shadow: 0 0 0 4px rgba(26,154,99,.2); }

/* ===== الشارات ===== */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-family: var(--f-ui); font-size: .8rem; font-weight: 600; background: var(--g100); color: var(--g700); }
.pill.info { background: #E6EFF9; color: var(--info); } .pill.warn { background: #FDF3E1; color: var(--warn); } .pill.bad { background: #FBE9E7; color: var(--bad); } .pill.ok { background: var(--g100); color: var(--ok); } .pill.gold { background: var(--gold-l); color: var(--gold-d); } .pill.gray { background: #EEF1EF; color: var(--muted); }

/* ===== الترويسة ===== */
.topbar { position: sticky; top: 0; z-index: 40; transition: background .3s, box-shadow .3s, color .3s; background: rgba(247,249,243,.82); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid rgba(15,36,25,.06); }
.topbar .wrap { display: flex; align-items: center; gap: 18px; height: 70px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--f-display); font-weight: 900; font-size: 1.15rem; line-height: 1.1; }
.logo small { display: block; margin-top: 4px; font-family: var(--f-ui); font-weight: 500; font-size: .66rem; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.logo .mark { width: 38px; height: 38px; filter: drop-shadow(0 4px 10px rgba(201,218,180,.45)); transition: transform .6s; }
.logo:hover .mark { transform: rotate(45deg); }
.nav { display: flex; gap: 4px; margin-inline-start: auto; font-family: var(--f-ui); }
.nav a { padding: 8px 14px; border-radius: 999px; color: var(--ink2); font-weight: 500; font-size: .93rem; transition: background .2s, color .2s; }
.nav a:hover, .nav a.on { background: rgba(0,84,48,.08); color: var(--g700); }
.nav-cta { display: flex; gap: 8px; }
.burger { display: none; }
.nav .mob-only { display: none; }
.topbar.dark { background: transparent; border-color: transparent; backdrop-filter: none; }
.topbar.dark .logo, .topbar.dark .nav a { color: #fff; }
.topbar.dark .logo small { color: rgba(255,255,255,.6); }
.topbar.dark .nav a:hover, .topbar.dark .nav a.on { background: rgba(255,255,255,.1); color: var(--gold2); }
.topbar.dark .btn.ghost { color: #fff; border-color: rgba(255,255,255,.25); }
.topbar.dark.scrolled { background: rgba(0,46,26,.95); backdrop-filter: blur(14px); border-color: rgba(238,243,229,.12); }
@media (max-width: 980px) {
  .nav { position: fixed; inset: 70px 12px auto 12px; flex-direction: column; background: var(--g950); padding: 12px; border-radius: 22px; box-shadow: var(--sh3); transform: translateY(-12px) scale(.98); opacity: 0; pointer-events: none; transition: all .25s; }
  .nav a { color: #fff !important; padding: 12px 16px; }
  .nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .burger { display: inline-flex; margin-inline-start: auto; }
  .nav .mob-only { display: block; }
  .nav-cta .btn.ghost { display: none; }
  .topbar.dark .burger { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
}
@media (max-width: 520px) { .nav-cta .btn.ghost span { display: none; } .nav-cta .btn.gold { padding: 8px 12px; font-size: .8rem; gap: 6px; white-space: nowrap; } .logo small { display: none; } }

/* ===== الواجهة الرئيسية ===== */
.hero { position: relative; margin-top: -70px; padding: 130px 0 90px; color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(1100px 700px at 15% 20%, rgba(31,163,106,.45), transparent 60%), radial-gradient(900px 600px at 90% 90%, rgba(201,218,180,.28), transparent 60%), linear-gradient(160deg, var(--g800), var(--g950) 70%); }
.hero::before { content: ''; position: absolute; inset: 0; background: var(--pat-dark); background-size: 400px; mask: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%); -webkit-mask: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%); z-index: -1; }
.hero::after { content: ''; position: absolute; inset: auto 0 -1px 0; height: 120px; background: linear-gradient(to bottom, transparent, var(--paper)); z-index: -1; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 40px; align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 999px; background: rgba(238,243,229,.1); border: 1px solid rgba(238,243,229,.28); color: var(--gold2); font-family: var(--f-ui); font-weight: 600; font-size: .86rem; }
.kicker b { background: var(--gold); color: var(--g950); border-radius: 999px; padding: 2px 10px; font-size: .75rem; }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.8rem); font-weight: 900; line-height: 1.15; margin: 22px 0 14px; letter-spacing: -.01em; }
.hero h1 .acc { display: block; line-height: 1.5; padding-bottom: .15em; margin-bottom: -.1em; background: linear-gradient(100deg, var(--gold2), #ffffff 40%, var(--gold) 70%, var(--gold2)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; }
@keyframes shine { to { background-position: -200% center; } }
.hero .sub { color: rgba(255,255,255,.78); font-size: 1.1rem; max-width: 560px; }
.rotator { display: inline-grid; vertical-align: bottom; color: var(--gold2); font-weight: 700; }
.rotator span { grid-area: 1 / 1; opacity: 0; transform: translateY(60%); transition: opacity .5s, transform .5s; white-space: nowrap; }
.rotator span.on { opacity: 1; transform: none; }
.rotator span.off { opacity: 0; transform: translateY(-60%); }
.hsearch { position: relative; margin-top: 28px; max-width: 600px; }
.hsearch form { display: flex; align-items: center; gap: 6px; padding: 7px; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 20px 60px -15px rgba(0,0,0,.55), 0 0 0 6px rgba(255,255,255,.07); }
.hsearch i.fa-magnifying-glass { color: var(--g600); margin-inline: 14px 4px; font-size: 1.1rem; }
.hsearch input { border: 0; box-shadow: none !important; background: transparent; padding: 10px 4px; color: var(--ink); font-size: 1.05rem; min-width: 0; }
.hsearch select { width: auto; border: 0; border-inline-start: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink2); font-family: var(--f-ui); font-size: .9rem; padding: 8px 10px; }
.hsearch .btn { padding: 12px 22px; }
.suggest { position: absolute; inset-inline: 16px; top: calc(100% + 8px); background: #fff; color: var(--ink); border-radius: 20px; box-shadow: var(--sh3); padding: 8px; z-index: 5; display: none; max-height: 360px; overflow: auto; }
.suggest.open { display: block; animation: pop .18s ease-out; }
.suggest a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; color: var(--ink); }
.suggest a:hover, .suggest a.act { background: var(--g50); }
.suggest .s-av { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex: none; display: grid; place-content: center; background: var(--g100); color: var(--g700); font-weight: 800; font-family: var(--f-display); font-size: .9rem; }
.suggest small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.suggest .s-h { font-family: var(--f-ui); font-size: .75rem; color: var(--muted); padding: 6px 10px 2px; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-family: var(--f-ui); font-size: .85rem; color: rgba(255,255,255,.6); align-items: center; }
.quick a { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 4px 12px; border-radius: 999px; transition: background .2s; }
.quick a:hover { background: rgba(238,243,229,.2); }
.hstats { display: flex; gap: 34px; margin-top: 36px; flex-wrap: wrap; }
.hstats div { display: flex; flex-direction: column; }
.hstats b { font-family: var(--f-display); font-weight: 900; font-size: 2.3rem; line-height: 1; color: #fff; }
.hstats b::after { content: '+'; color: var(--gold); margin-inline-start: 2px; }
.hstats span { color: rgba(255,255,255,.6); font-family: var(--f-ui); font-size: .85rem; margin-top: 6px; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-top: 110px; } .hsearch select { display: none; } }

/* خريطة المملكة النقطية */
.mapbox { position: relative; aspect-ratio: 1.22 / 1; margin-inline-end: -40px; }
@media (max-width: 980px) { .mapbox { margin: 0; } }
.mapbox svg { width: 100%; height: 100%; overflow: visible; }
.map-dot { fill: rgba(238,243,229,.3); }
.map-dot.hot { fill: rgba(238,243,229,.7); }
.map-outline { fill: rgba(255,255,255,.025); stroke: rgba(238,243,229,.35); stroke-width: 1.2; stroke-dasharray: 3 5; }
.map-arc { fill: none; stroke: url(#arcG); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 6 10; animation: flow 3s linear infinite; opacity: .8; }
@keyframes flow { to { stroke-dashoffset: -64; } }
.map-node { cursor: pointer; }
.map-node .pulse { fill: var(--gold); opacity: .35; transform-origin: center; transform-box: fill-box; animation: pulse 2.6s ease-out infinite; }
.map-node .core { fill: var(--gold2); stroke: var(--g950); stroke-width: 2; transition: r .2s; }
.map-node:hover .core, .map-node.on .core { fill: #fff; }
.map-node text { font-family: var(--f-ui); font-size: 13px; fill: rgba(255,255,255,.85); font-weight: 600; paint-order: stroke; stroke: rgba(0,26,14,.85); stroke-width: 4px; pointer-events: none; }
.map-node text.n { font-family: var(--f-display); font-weight: 900; fill: var(--g950); stroke: none; font-size: 11px; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }
.map-tip { position: absolute; pointer-events: none; background: #fff; color: var(--ink); padding: 10px 14px; border-radius: 14px; box-shadow: var(--sh3); font-family: var(--f-ui); font-size: .85rem; transform: translate(50%, -120%); opacity: 0; transition: opacity .15s; white-space: nowrap; z-index: 3; }
.map-tip.on { opacity: 1; }
.map-tip b { font-family: var(--f-display); display: block; font-size: 1rem; }
.map-legend { position: absolute; bottom: 4%; inset-inline-end: 0; font-family: var(--f-ui); font-size: .78rem; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 8px; }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--gold2); box-shadow: 0 0 12px var(--gold); }
.floaty { position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(12px); border-radius: 18px; padding: 10px 14px; color: #fff; font-family: var(--f-ui); font-size: .82rem; display: flex; gap: 10px; align-items: center; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); animation: float 6s ease-in-out infinite; }
.floaty i { width: 34px; height: 34px; display: grid; place-content: center; border-radius: 11px; background: linear-gradient(135deg, var(--gold2), var(--gold)); color: var(--g950); }
.floaty b { display: block; font-family: var(--f-display); font-size: .95rem; }
.floaty.f1 { top: 4%; inset-inline-start: 2%; } .floaty.f2 { bottom: 16%; inset-inline-start: -4%; animation-delay: -3s; }
@keyframes float { 50% { transform: translateY(-10px); } }
@media (max-width: 560px) { .floaty { display: none; } .map-node text:not(.n) { display: none; } }

/* شريط التخصصات المتحرك */
.marquee { position: relative; overflow: hidden; padding: 18px 0; mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marq 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-family: var(--f-ui); font-weight: 600; color: var(--ink2); font-size: .92rem; box-shadow: var(--sh1); white-space: nowrap; transition: all .2s; }
.marquee a i { color: var(--gold-d); }
.marquee a:hover { background: var(--g800); color: #fff; }
@keyframes marq { to { transform: translateX(50%); } }

/* الأقسام */
.sec { padding: 90px 0; position: relative; }
.sec-h { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-weight: 700; font-size: .82rem; color: var(--gold-d); letter-spacing: .04em; }
.eyebrow::before, .eyebrow::after { content: ''; width: 22px; height: 1.5px; background: currentColor; opacity: .6; }
.sec-h h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 900; margin-top: 8px; }
.sec-h p { color: var(--muted); font-size: 1.05rem; }
.sec.dark { background: linear-gradient(170deg, var(--g900), var(--g950)); color: #fff; overflow: hidden; }
.sec.dark::before { content: ''; position: absolute; inset: 0; background: var(--pat-dark); background-size: 400px; opacity: .8; }
.sec.dark h2, .sec.dark h3 { color: #fff; } .sec.dark .sec-h p { color: rgba(255,255,255,.65); }
.sec.pattern::before { content: ''; position: absolute; inset: 0; background: var(--pat-light); background-size: 400px; mask: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); -webkit-mask: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); pointer-events: none; }
.sec > .wrap { position: relative; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }

/* كيف تعمل: مسارات */
.tracks { display: flex; justify-content: center; gap: 6px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 999px; width: max-content; margin: 0 auto 36px; box-shadow: var(--sh1); max-width: 100%; }
.tracks button { border: 0; background: transparent; padding: 10px 22px; border-radius: 999px; font-family: var(--f-ui); font-weight: 700; cursor: pointer; color: var(--muted); transition: all .25s; }
.tracks button.on { background: var(--g800); color: #fff; box-shadow: 0 8px 20px -8px rgba(0,84,48,.7); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: st; position: relative; }
.steps::before { content: ''; position: absolute; top: 44px; inset-inline: 16%; height: 2px; background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px); opacity: .5; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 26px 26px; box-shadow: var(--sh1); text-align: center; transition: transform .3s, box-shadow .3s; }
.step:hover { transform: translateY(-6px); box-shadow: var(--sh2); }
.step .ic { position: relative; width: 70px; height: 70px; margin: -2px auto 16px; display: grid; place-content: center; font-size: 1.5rem; color: var(--gold2); background: linear-gradient(145deg, var(--g700), var(--g900)); border-radius: 22px; transform: rotate(45deg); box-shadow: 0 14px 30px -12px rgba(0,46,26,.8); }
.step .ic i { transform: rotate(-45deg); }
.step .ic::after { counter-increment: st; content: counter(st); position: absolute; top: -8px; right: -8px; transform: rotate(-45deg); width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--g950); font-family: var(--f-display); font-weight: 900; font-size: .8rem; display: grid; place-content: center; }
.step h3 { font-size: 1.15rem; } .step p { color: var(--muted); margin: 0; font-size: .95rem; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } .steps::before { display: none; } }

/* شبكة التخصصات */
.specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.spec { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); color: var(--ink); transition: all .25s; overflow: hidden; }
.spec::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--g700), var(--g900)); opacity: 0; transition: opacity .3s; z-index: 0; }
.spec > * { position: relative; z-index: 1; }
.spec .ic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-content: center; background: var(--g50); color: var(--g600); font-size: 1.15rem; transition: all .3s; }
.spec b { display: block; font-family: var(--f-ui); font-weight: 700; font-size: .93rem; line-height: 1.4; }
.spec small { color: var(--muted); font-family: var(--f-ui); }
.spec:hover { transform: translateY(-4px); box-shadow: var(--sh2); border-color: transparent; color: #fff; }
.spec:hover::after { opacity: 1; }
.spec:hover .ic { background: rgba(238,243,229,.15); color: var(--gold2); transform: rotate(-8deg) scale(1.08); }
.spec:hover small { color: rgba(255,255,255,.65); }

/* المناطق */
.regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.region { position: relative; padding: 18px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(238,243,229,.18); color: #fff; transition: all .25s; overflow: hidden; }
.region::before { content: ''; position: absolute; width: 120px; height: 120px; inset-inline-end: -40px; top: -40px; background: radial-gradient(circle, rgba(238,243,229,.35), transparent 70%); transition: transform .4s; }
.region b { display: block; font-family: var(--f-display); font-size: 1.1rem; }
.region small { color: rgba(255,255,255,.55); font-family: var(--f-ui); }
.region .cnt { position: absolute; inset-inline-end: 16px; bottom: 12px; font-family: var(--f-display); font-weight: 900; font-size: 1.8rem; color: var(--gold2); opacity: .9; }
.region:hover { background: rgba(238,243,229,.1); transform: translateY(-4px); border-color: rgba(238,243,229,.5); }
.region:hover::before { transform: scale(1.6); }

/* ===== البطاقة التعريفية الكاملة ===== */
.tcard { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%; --fg: #fff; position: relative; isolation: isolate; width: 100%; max-width: 420px; margin-inline: auto; padding: 20px 24px 0; border-radius: var(--cf-radius, 30px); color: var(--fg); text-align: center; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 22%, color-mix(in srgb, var(--c) 70%, transparent), transparent 70%), linear-gradient(160deg, var(--a), var(--b) 55%, var(--a));
  box-shadow: 0 40px 80px -30px rgba(0,26,14,.55), inset 0 0 0 1.5px color-mix(in srgb, var(--acc) 55%, transparent), inset 0 0 0 9px color-mix(in srgb, var(--a) 60%, transparent), inset 0 0 0 10px color-mix(in srgb, var(--acc) 20%, transparent);
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.tcard.tilting { transition: transform .08s linear; }
.tcard::before { content: ''; position: absolute; inset: 0; background: var(--pat); background-size: 300px; opacity: var(--cf-pat, 1); z-index: -1; pointer-events: none; -webkit-mask: linear-gradient(to bottom, #000 0, #000 22%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.18) 100%); mask: linear-gradient(to bottom, #000 0, #000 22%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.18) 100%); }
.tc-holo { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.35), transparent 40%), linear-gradient(115deg, transparent 30%, rgba(238,243,229,.28) 45%, rgba(170,255,230,.18) 52%, transparent 65%); background-size: 100% 100%, 250% 250%; background-position: 0 0, var(--mx) var(--my); }
.tcard.tilting .tc-holo { opacity: .9; }
.tc-glow { position: absolute; inset: -30% -10% auto; height: 60%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 26%, transparent), transparent); z-index: -1; filter: blur(10px); }
.tc-top { display: flex; justify-content: space-between; align-items: center; min-height: 46px; }
.tc-logo { height: 46px; width: auto; }
.tc-code { font-family: var(--f-ui); font-size: .8rem; font-weight: 700; color: var(--acc); border: 1.5px solid color-mix(in srgb, var(--acc) 65%, transparent); border-radius: 999px; padding: 2px 12px; }
.tc-code:empty { display: none; }
.tc-ring { position: relative; width: 58%; max-width: 100%; aspect-ratio: 1; margin: 14px auto 6px; padding: 7px; border-radius: 50%; background: conic-gradient(from 210deg, var(--acc), color-mix(in srgb, var(--acc) 45%, var(--a)), var(--acc)); box-shadow: 0 24px 40px -18px rgba(0,0,0,.6); transform: translateZ(40px); }
.tc-photo { width: 100%; height: 100%; border-radius: 50%; border: 4px solid var(--b); background: linear-gradient(160deg, var(--c), var(--a)); font-family: var(--f-display); font-weight: 900; font-size: 3.2rem; color: var(--fg); }
.avw { display: grid; place-content: center; overflow: hidden; position: relative; }
.avw img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
.tc-verified { position: absolute; bottom: 4%; inset-inline-start: 4%; width: 50px; height: 50px; display: grid; place-content: center; }
.tc-verified i { grid-area: 1/1; } .tc-verified .fa-certificate { font-size: 50px; color: var(--acc); filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); } .tc-verified .fa-check { color: var(--b); font-size: 19px; text-align: center; }
.tc-name { color: var(--fg); font-family: var(--cf-name, var(--f-display)); font-size: calc(1.75rem * var(--cf-scale, 1)); font-weight: 900; margin: 16px 0 2px; transform: translateZ(30px); text-wrap: balance; }
.tc-title { font-family: var(--cf-body, var(--f-body)); color: var(--acc); font-weight: 600; margin: 0 0 8px; font-size: 1rem; line-height: 1.6; text-wrap: balance; }
.tc-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; font-family: var(--cf-body, var(--f-ui)); font-size: .82rem; color: color-mix(in srgb, var(--fg) 80%, transparent); }
.tc-meta i { color: var(--acc); margin-inline-end: 5px; }
.tc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin: 18px 0 4px; }
.tc-stat { padding: 10px 4px; border-radius: 16px; background: color-mix(in srgb, var(--fg) 8%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); }
.tc-stat b { display: block; font-family: var(--f-display); font-size: 1.45rem; font-weight: 900; line-height: 1.1; }
.tc-stat span { font-family: var(--cf-body, var(--f-ui)); font-size: .72rem; color: color-mix(in srgb, var(--fg) 72%, transparent); }
.tc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 4px; }
.tc-chips span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cf-body, var(--f-ui)); font-size: .78rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); }
.tc-chips i { color: var(--acc); font-size: .75rem; }
.tc-foot { display: grid; justify-items: center; gap: 2px; margin: 18px -24px 0; padding: 14px 24px; background: color-mix(in srgb, #000 20%, transparent); font-family: var(--cf-body, var(--f-ui)); font-size: .8rem; line-height: 1.7; color: color-mix(in srgb, var(--fg) 78%, transparent); text-align: center; }
.tc-foot b { font-family: var(--cf-brand, var(--f-display)); font-size: 1.05rem; font-weight: 900; color: var(--acc); }
.tc-brandline { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.tc-brandline i { font-style: normal; opacity: .55; font-size: 1.1rem; }
.tc-brandline em { font-style: normal; font-family: var(--cf-brand, var(--f-display)); font-weight: 700; font-size: .95rem; letter-spacing: .02em; color: color-mix(in srgb, var(--fg) 85%, transparent); }
.tcard.light .tc-foot { background: color-mix(in srgb, var(--acc) 7%, transparent); }
.tcard.light { box-shadow: 0 40px 80px -30px rgba(0,46,26,.35), inset 0 0 0 1.5px color-mix(in srgb, var(--acc) 40%, transparent), inset 0 0 0 10px color-mix(in srgb, var(--acc) 8%, transparent); }

/* ===== البطاقة المصغّرة (الدليل) ===== */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.tmini { --rx: 0deg; --ry: 0deg; --fg: #fff; position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 26px; border: 1px solid var(--line); color: var(--ink); overflow: hidden; box-shadow: var(--sh1); transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .3s, opacity .7s; }
.tmini.reveal { transform: perspective(900px) translateY(26px); }
.tmini.reveal.in { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); }
.tmini.tilting { transition: transform .08s linear, box-shadow .3s; }
.tmini:hover { box-shadow: 0 30px 60px -24px rgba(0,46,26,.45); }
.tm-head { position: relative; height: 92px; background: radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--c) 70%, transparent), transparent 70%), linear-gradient(135deg, var(--a), var(--b)); overflow: hidden; }
.tm-head::before { content: ''; position: absolute; inset: 0; background: var(--pat); background-size: 230px; }
.tm-code { position: absolute; top: 12px; left: 14px; font-family: var(--f-ui); font-size: .72rem; font-weight: 700; color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 60%, transparent); border-radius: 999px; padding: 1px 10px; }
.tm-star { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-content: center; background: var(--acc); color: var(--a); font-size: .8rem; }
.tm-ring { width: 108px; aspect-ratio: 1; margin: -62px auto 0; padding: 4px; border-radius: 50%; background: conic-gradient(from 210deg, var(--acc), color-mix(in srgb, var(--acc) 45%, var(--a)), var(--acc)); position: relative; box-shadow: 0 14px 28px -12px rgba(0,0,0,.5); transition: transform .4s; }
.tmini.light .tm-ring { background: var(--b); box-shadow: 0 0 0 1px var(--line), 0 14px 28px -14px rgba(0,46,26,.4); }
.tmini:hover .tm-ring { transform: translateY(-4px) scale(1.04); }
.tm-photo { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(160deg, var(--c), var(--a)); color: var(--fg); font-family: var(--f-display); font-weight: 900; font-size: 1.6rem; }
.tm-body { padding: 12px 18px 8px; text-align: center; flex: 1; }
.tm-body h3 { font-size: 1.1rem; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.tm-ok { color: var(--g500); font-size: .9rem; }
.tm-title { color: var(--muted); font-size: .88rem; margin: 2px 0 8px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.tm-meta { display: flex; justify-content: center; gap: 12px; font-family: var(--f-ui); font-size: .78rem; color: var(--ink2); }
.tm-meta i { color: var(--g600); margin-inline-end: 4px; }
.tm-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 10px; }
.tm-chips span { font-family: var(--f-ui); font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--g50); color: var(--g700); border: 1px solid var(--g100); }
.tm-chips .more { background: var(--gold-l); color: var(--gold-d); border-color: transparent; }
.tm-go { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 12px 14px 16px; padding: 13px 16px; border-radius: 16px; background: linear-gradient(135deg, var(--g600), var(--g800)); font-family: var(--f-ui); font-weight: 800; font-size: 1rem; color: #fff; box-shadow: 0 10px 22px -10px rgba(0,84,48,.7); transition: all .25s; }
.tm-go i { color: var(--gold2); }
.tmini:hover .tm-go { transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(0,84,48,.85); background: linear-gradient(135deg, var(--g500), var(--g700)); }
.tmini:hover .tm-go i { transform: translateX(-4px); }
.tm-go i { transition: transform .25s; }

/* الشعار */
.brand-logo { display: block; height: 46px; width: auto; }
.logo .brand-logo { height: 48px; transition: transform .3s; }
.logo:hover .brand-logo { transform: scale(1.04); }
.logo .on-dark { display: none; }
.topbar.dark .logo .on-dark, .footer .logo .on-dark { display: block; }
.topbar.dark .logo .on-light, .footer .logo .on-light { display: none; }
.footer .logo .brand-logo { height: 64px; }

/* ===== الدليل والفلاتر ===== */
.page-head { position: relative; margin-top: -70px; padding: 120px 0 60px; color: #fff; background: radial-gradient(800px 400px at 80% 0%, rgba(201,218,180,.25), transparent 60%), linear-gradient(160deg, var(--g800), var(--g950)); overflow: hidden; }
.page-head::before { content: ''; position: absolute; inset: 0; background: var(--pat-dark); background-size: 400px; opacity: .9; }
.page-head .wrap { position: relative; }
.page-head h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900; margin: 8px 0 6px; }
.page-head p { color: rgba(255,255,255,.72); max-width: 640px; margin: 0; }
.crumbs { font-family: var(--f-ui); font-size: .85rem; color: rgba(255,255,255,.55); }
.crumbs a { color: var(--gold2); }
.filters { position: sticky; top: 78px; z-index: 20; margin-top: -30px; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 24px; padding: 10px; box-shadow: var(--sh2); display: grid; grid-template-columns: 1.6fr repeat(4, 1fr) auto; gap: 8px; }
.filters .srch { position: relative; }
.filters .srch i { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--g600); }
.filters .srch input { padding-inline-start: 40px; }
.filters select, .filters input { border-radius: 16px; background: var(--g50); border-color: transparent; }
@media (max-width: 980px) { .filters { grid-template-columns: 1fr 1fr; position: static; } .filters .srch { grid-column: 1 / -1; } }
.dir-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 18px; flex-wrap: wrap; font-family: var(--f-ui); }
.dir-bar b { font-family: var(--f-display); font-size: 1.3rem; }
.active-f { display: flex; gap: 6px; flex-wrap: wrap; }
.active-f button { border: 0; background: var(--g800); color: #fff; border-radius: 999px; padding: 4px 12px; font-family: var(--f-ui); font-size: .8rem; cursor: pointer; }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty i { font-size: 2.6rem; color: var(--gold); margin-bottom: 12px; display: block; }

/* ===== صفحة المدرب ===== */
.profile { display: grid; grid-template-columns: 420px 1fr; gap: 40px; align-items: start; margin-top: -70px; padding-top: 100px; }
.profile-side { position: sticky; top: 90px; }
.profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.profile-actions .btn { width: 100%; }
.profile-actions .wide { grid-column: 1 / -1; }
.pbox { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh1); margin-bottom: 18px; }
.pbox h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.pbox h3 i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-content: center; background: var(--g50); color: var(--g600); font-size: .95rem; }
.pbox p { margin: 0; color: var(--ink2); }
.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topics span { padding: 7px 14px; border-radius: 12px; background: var(--g50); border: 1px solid var(--g100); font-family: var(--f-ui); font-size: .88rem; color: var(--g800); }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kv div { padding: 14px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.kv small { display: block; color: var(--muted); font-family: var(--f-ui); font-size: .78rem; }
.kv b { font-family: var(--f-ui); }
.profile-hero-bg { position: absolute; inset: 0 0 auto; height: 420px; background: radial-gradient(700px 300px at 70% 0%, rgba(201,218,180,.22), transparent 60%), linear-gradient(170deg, var(--g800), var(--g950)); z-index: -1; }
.profile-hero-bg::before { content: ''; position: absolute; inset: 0; background: var(--pat-dark); background-size: 400px; }
.profile-hero-bg::after { content: ''; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(transparent, var(--paper)); }
.p-intro { color: #fff; padding-top: 30px; min-height: 250px; }
.p-intro h1 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 900; margin: 6px 0; }
.p-intro .t { color: var(--gold2); font-weight: 600; font-size: 1.1rem; }
@media (max-width: 960px) { .profile { grid-template-columns: 1fr; } .profile-side { position: static; } .p-intro { min-height: 0; padding-top: 0; }
  /* على الجوال تأتي البطاقة أولاً فيقع العنوان على خلفية فاتحة: ألوان داكنة مقروءة */
  .p-intro { color: var(--ink); margin: 8px 0 16px; }
  .p-intro h1 { color: var(--g900); }
  .p-intro .t { color: var(--g700); }
  .p-intro .crumbs, .p-intro .crumbs a { color: var(--ink2); }
  .p-intro .crumbs a:hover { color: var(--g700); }
}

/* ===== نموذج التسجيل (معالج بخطوات) ===== */
.wizard { display: grid; grid-template-columns: 1fr 380px; gap: 30px; align-items: start; }
.wiz-main { scroll-margin-top: 90px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh2); overflow: hidden; }
.wiz-steps { display: flex; padding: 18px 22px; gap: 4px; background: linear-gradient(135deg, var(--g800), var(--g950)); overflow-x: auto; }
.wiz-steps button { flex: 1; min-width: 92px; border: 0; background: transparent; color: rgba(255,255,255,.55); font-family: var(--f-ui); font-size: .78rem; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.wiz-steps button i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: .95rem; transition: all .3s; }
.wiz-steps button.on { color: #fff; } .wiz-steps button.on i { background: linear-gradient(135deg, var(--gold2), var(--gold)); color: var(--g950); border-color: transparent; box-shadow: 0 0 24px rgba(238,243,229,.5); transform: rotate(45deg); }
.wiz-steps button.on i::before { display: inline-block; transform: rotate(-45deg); }
.wiz-steps button.done i { background: var(--g600); color: #fff; border-color: transparent; }
.wiz-prog { height: 4px; background: rgba(0,84,48,.1); } .wiz-prog span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--g500)); transition: width .5s; }
.wiz-body { padding: 28px; }
.wiz-body h2 { font-size: 1.4rem; } .wiz-body > p.muted { margin-top: -6px; }
.wiz-pane { display: none; animation: paneIn .4s ease-out; } .wiz-pane.on { display: grid; gap: 16px; }
@keyframes paneIn { from { opacity: 0; transform: translateX(-18px); } }
.wiz-nav { display: flex; justify-content: space-between; padding: 18px 28px; border-top: 1px solid var(--line); background: var(--paper); }
.wiz-side { position: sticky; top: 90px; }
.wiz-side .lbl { text-align: center; font-family: var(--f-ui); font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.photo-drop { display: flex; align-items: center; gap: 16px; padding: 16px; border: 2px dashed var(--line); border-radius: 20px; cursor: pointer; transition: all .2s; background: var(--paper); }
.photo-drop:hover, .photo-drop.drag { border-color: var(--g500); background: var(--g50); }
.photo-drop .pv { width: 84px; height: 96px; border-radius: 999px 999px 12px 12px; object-fit: cover; background: var(--g100); display: grid; place-content: center; color: var(--g600); font-size: 1.6rem; flex: none; }
.req-box { border-radius: 20px; padding: 18px; background: var(--gold-l); border: 1px solid #D6E3C3; }
.req-box li { margin: 4px 0; }
.error-msg { color: var(--bad); font-family: var(--f-ui); font-size: .85rem; }
.inv { border-color: var(--bad) !important; box-shadow: 0 0 0 4px rgba(192,57,43,.1) !important; }
.done-card { text-align: center; padding: 40px 26px; }
.done-card .big { width: 96px; height: 96px; margin: 0 auto 18px; display: grid; place-content: center; border-radius: 30px; background: linear-gradient(135deg, var(--g500), var(--g800)); color: #fff; font-size: 2.4rem; transform: rotate(45deg); box-shadow: 0 20px 40px -14px rgba(18,122,79,.7); }
.done-card .big i { transform: rotate(-45deg); }
.ticket { display: inline-flex; flex-direction: column; gap: 4px; padding: 14px 28px; border-radius: 18px; border: 2px dashed var(--gold); background: var(--gold-l); margin: 14px 0; }
.ticket b { font-family: var(--f-display); font-size: 1.8rem; color: var(--g800); letter-spacing: .08em; }
@media (max-width: 1000px) { .wizard { grid-template-columns: 1fr; } .wiz-side { position: static; order: -1; } .wiz-side .tcard { max-width: 330px; } }

/* خط زمني لحالة الطلب */
.timeline { display: grid; gap: 0; margin: 20px 0; }
.tl { display: grid; grid-template-columns: 44px 1fr; gap: 14px; position: relative; padding-bottom: 20px; }
.tl::before { content: ''; position: absolute; inset-inline-start: 21px; top: 40px; bottom: 0; width: 2px; background: var(--line); }
.tl:last-child::before { display: none; }
.tl i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-content: center; background: #EEF1EF; color: var(--muted); }
.tl.done i { background: var(--g600); color: #fff; } .tl.cur i { background: linear-gradient(135deg, var(--gold2), var(--gold)); color: var(--g950); box-shadow: 0 0 0 6px var(--gold-l); }
.tl.bad i { background: var(--bad); color: #fff; }
.tl b { font-family: var(--f-ui); display: block; } .tl small { color: var(--muted); }

/* ===== الانضمام (بطاقة السعر) ===== */
.join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.price { position: relative; border-radius: 32px; padding: 34px; background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 1px solid rgba(238,243,229,.35); backdrop-filter: blur(10px); box-shadow: var(--sh3); }
.price .amt { font-family: var(--f-display); font-weight: 900; font-size: 4rem; line-height: 1; color: #fff; }
.price .amt small { font-size: 1.1rem; color: var(--gold2); margin-inline-start: 6px; }
.price ul { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
.price li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255,255,255,.85); }
.price li i { color: var(--gold2); margin-top: 6px; }
.price .ribbon { position: absolute; top: 18px; inset-inline-end: -8px; background: linear-gradient(135deg, var(--gold2), var(--gold)); color: var(--g950); font-family: var(--f-ui); font-weight: 700; font-size: .78rem; padding: 6px 16px; border-radius: 10px 0 0 10px; }
.join-cards { position: relative; height: 520px; }
.join-cards .tcard { position: absolute; max-width: 300px; font-size: .85em; }
.join-cards .tcard:nth-child(1) { inset-inline-start: 0; top: 40px; transform: perspective(1000px) rotate(-8deg); opacity: .8; }
.join-cards .tcard:nth-child(2) { inset-inline-end: 0; top: 60px; transform: perspective(1000px) rotate(7deg); opacity: .8; }
.join-cards .tcard:nth-child(3) { inset-inline: 0; margin: auto; top: 0; z-index: 2; }
@media (max-width: 900px) { .join-grid { grid-template-columns: 1fr; } .join-cards { height: 480px; } }
@media (max-width: 560px) { .join-cards .tcard:nth-child(1), .join-cards .tcard:nth-child(2) { display: none; } }

/* ===== الأسئلة الشائعة ===== */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 0 22px; transition: box-shadow .2s; }
.faq details[open] { box-shadow: var(--sh2); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-content: center; background: var(--g50); color: var(--g600); font-size: 1.2rem; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--g800); color: var(--gold2); }
.faq details p { margin: 0 0 18px; color: var(--ink2); }

/* شريط الدعوة */
.cta-band { position: relative; border-radius: 36px; padding: 50px; overflow: hidden; color: #fff; background: radial-gradient(600px 300px at 10% 0%, rgba(238,243,229,.35), transparent 60%), linear-gradient(135deg, var(--g700), var(--g950)); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; box-shadow: var(--sh3); }
.cta-band::before { content: ''; position: absolute; inset: 0; background: var(--pat-dark); background-size: 400px; }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.cta-band p { color: rgba(255,255,255,.75); margin: 0; }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; padding: 32px 24px; } }

/* بطاقات عامة */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .cards3 { grid-template-columns: 1fr; } }
.icard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh1); position: relative; overflow: hidden; }
.icard .ic { width: 54px; height: 54px; border-radius: 17px; display: grid; place-content: center; background: linear-gradient(145deg, var(--g700), var(--g900)); color: var(--gold2); font-size: 1.3rem; margin-bottom: 14px; }
.icard p { color: var(--ink2); margin: 0; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh2); }
.match-list { display: grid; gap: 10px; margin-top: 14px; }
.match { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: #fff; color: var(--ink); transition: all .2s; }
.match:hover { border-color: var(--g300); box-shadow: var(--sh1); }
.match .av { width: 54px; height: 62px; border-radius: 999px 999px 10px 10px; object-fit: cover; display: grid; place-content: center; background: var(--g100); color: var(--g700); font-weight: 900; font-family: var(--f-display); }
.match .score { font-family: var(--f-display); font-weight: 900; color: var(--g600); font-size: 1.2rem; text-align: center; }
.match .score small { display: block; font-family: var(--f-ui); font-size: .68rem; color: var(--muted); font-weight: 500; }

/* ===== التذييل ===== */
.footer { margin-top: 60px; background: var(--g950); color: rgba(255,255,255,.7); padding: 60px 0 26px; position: relative; overflow: hidden; }
.footer::before { content: ''; position: absolute; inset: 0; background: var(--pat-dark); background-size: 400px; opacity: .6; }
.footer .wrap { position: relative; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.footer h4 { color: #fff; font-size: 1rem; }
.footer a { color: rgba(255,255,255,.7); display: block; padding: 3px 0; font-family: var(--f-ui); font-size: .92rem; }
.footer a:hover { color: var(--gold2); }
.footer .logo { color: #fff; }
.socials { display: flex; gap: 8px; margin-top: 14px; }
.socials a { width: 40px; height: 40px; display: grid; place-content: center; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.socials a:hover { background: var(--gold); color: var(--g950); }
.copy { border-top: 1px solid rgba(255,255,255,.08); margin-top: 36px; padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-family: var(--f-ui); font-size: .82rem; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ===== النوافذ والتنبيهات ===== */
.modal-back { position: fixed; inset: 0; z-index: 90; background: rgba(0,26,14,.55); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .25s; overflow-y: auto; }
.modal-back.in { opacity: 1; }
.modal { position: relative; background: #fff; border-radius: 28px; padding: 28px; width: min(520px, 100%); box-shadow: var(--sh3); transform: translateY(16px) scale(.97); transition: transform .3s cubic-bezier(.2,.7,.2,1); max-height: calc(100vh - 32px); overflow-y: auto; }
.modal.wide { width: min(880px, 100%); }
.modal-back.in .modal { transform: none; }
.modal-x { position: absolute; top: 14px; inset-inline-end: 14px; width: 36px; height: 36px; border-radius: 12px; border: 0; background: var(--paper); cursor: pointer; }
.modal h3 { padding-inline-end: 40px; display: flex; gap: 10px; align-items: center; }
.modal h3 i { color: var(--gold-d); }
.modal form { display: grid; gap: 14px; }
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.sh { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); font-family: var(--f-ui); font-weight: 600; font-size: .85rem; color: var(--ink); cursor: pointer; transition: all .2s; }
.sh i { font-size: 1.4rem; }
.sh:hover { transform: translateY(-3px); box-shadow: var(--sh1); }
.sh.wa i { color: #25D366; } .sh.x i { color: #000; } .sh.li i { color: #0A66C2; } .sh.tg i { color: #229ED9; } .sh.im i, .sh.st i, .sh.wd i { color: var(--gold-d); } .sh.cp i { color: var(--g600); }
#toasts { position: fixed; bottom: 20px; inset-inline: 0; z-index: 120; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--g950); color: #fff; padding: 12px 20px; border-radius: 999px; font-family: var(--f-ui); font-size: .92rem; box-shadow: var(--sh3); transform: translateY(20px); opacity: 0; transition: all .35s cubic-bezier(.2,.7,.2,1); max-width: 100%; }
.toast.in { transform: none; opacity: 1; }
.toast i { color: var(--gold2); } .toast.error { background: var(--bad); } .toast.error i { color: #fff; }

/* ===== صفحات الدخول ===== */
.auth-wrap { min-height: calc(100vh - 70px); display: grid; place-items: center; padding: 40px 16px; margin-top: -70px; padding-top: 110px; background: radial-gradient(700px 400px at 80% 10%, rgba(201,218,180,.25), transparent 60%), linear-gradient(160deg, var(--g800), var(--g950)); position: relative; }
.auth-wrap::before { content: ''; position: absolute; inset: 0; background: var(--pat-dark); background-size: 400px; }
.auth-card { position: relative; width: min(440px, 100%); background: #fff; border-radius: 32px; padding: 34px; box-shadow: var(--sh3); text-align: center; }
.auth-card .auth-logo { height: 72px; margin: 0 auto 14px; }
.auth-card form { display: grid; gap: 14px; text-align: start; margin-top: 18px; }
.code-in { min-width: 0; text-align: center !important; font-family: var(--f-ui) !important; font-weight: 700; letter-spacing: .14em; font-size: 1.2rem !important; direction: ltr; text-transform: uppercase; }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 13px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; font-family: var(--f-ui); font-weight: 700; cursor: pointer; transition: all .2s; }
.gbtn:hover { box-shadow: var(--sh1); border-color: #c9d3cc; }
.gbtn svg { width: 22px; height: 22px; }
.note { background: var(--gold-l); border: 1px solid #D6E3C3; color: #3F5A2A; border-radius: 16px; padding: 12px 14px; font-size: .88rem; text-align: start; }

/* ===== اللوحات (المدرب والإدارة) ===== */
.dash > * { min-width: 0; }
.dash { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; padding: 26px 0 40px; align-items: start; }
.side { position: sticky; top: 86px; background: var(--g950); border-radius: 26px; padding: 14px; color: #fff; box-shadow: var(--sh2); overflow: hidden; }
.side::before { content: ''; position: absolute; inset: 0; background: var(--pat-dark); background-size: 400px; opacity: .6; }
.side > * { position: relative; }
.side .who { display: flex; gap: 10px; align-items: center; padding: 8px 8px 14px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 8px; }
.side .who .av { width: 44px; height: 50px; border-radius: 999px 999px 8px 8px; object-fit: cover; background: var(--g700); display: grid; place-content: center; font-weight: 900; font-family: var(--f-display); flex: none; }
.side .who b { display: block; font-family: var(--f-display); line-height: 1.3; } .side .who small { color: var(--gold2); font-family: var(--f-ui); font-size: .75rem; }
.side button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 11px 12px; border: 0; background: transparent; color: rgba(255,255,255,.72); border-radius: 14px; font-family: var(--f-ui); font-weight: 600; font-size: .92rem; cursor: pointer; text-align: start; transition: all .2s; }
.side button i { width: 20px; text-align: center; color: var(--gold2); opacity: .8; }
.side button:hover { background: rgba(255,255,255,.06); color: #fff; }
.side button.on { background: linear-gradient(135deg, rgba(238,243,229,.2), rgba(238,243,229,.05)); color: #fff; box-shadow: inset 0 0 0 1px rgba(238,243,229,.25); }
.side .badge { margin-inline-start: auto; background: var(--gold); color: var(--g950); border-radius: 999px; font-size: .72rem; padding: 0 8px; font-weight: 800; }
@media (max-width: 900px) {
  .dash { grid-template-columns: 1fr; }
  .side { position: static; display: flex; overflow-x: auto; gap: 4px; padding: 8px; border-radius: 20px; }
  .side .who, .side hr { display: none; }
  .side button { white-space: nowrap; width: auto; flex: none; }
}
.dash-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.dash-h h2 { margin: 0; font-size: 1.6rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 18px; overflow: hidden; box-shadow: var(--sh1); }
.kpi::after { content: ''; position: absolute; inset-inline-end: -24px; top: -24px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(201,218,180,.18), transparent 70%); }
.kpi i { width: 40px; height: 40px; border-radius: 13px; display: grid; place-content: center; background: var(--g50); color: var(--g600); margin-bottom: 10px; }
.kpi b { display: block; font-family: var(--f-display); font-weight: 900; font-size: 2rem; line-height: 1.1; }
.kpi span { color: var(--muted); font-family: var(--f-ui); font-size: .85rem; }
.kpi.dark { background: linear-gradient(145deg, var(--g800), var(--g950)); color: #fff; border: 0; } .kpi.dark i { background: rgba(238,243,229,.14); color: var(--gold2); } .kpi.dark span { color: rgba(255,255,255,.6); }
.tbl-wrap { background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: auto; box-shadow: var(--sh1); }
table.tbl { width: 100%; border-collapse: collapse; font-family: var(--f-ui); font-size: .9rem; }
.tbl th { text-align: start; padding: 12px 14px; background: var(--paper); color: var(--muted); font-weight: 600; font-size: .8rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: var(--g50); }
.tbl .who { display: flex; align-items: center; gap: 10px; }
.tbl .who .av { width: 38px; height: 44px; border-radius: 999px 999px 8px 8px; object-fit: cover; display: grid; place-content: center; background: var(--g100); color: var(--g700); font-weight: 900; font-family: var(--f-display); font-size: .8rem; flex: none; }
.tbl .who b { display: block; font-family: var(--f-body); } .tbl .who small { color: var(--muted); }
.acts { display: flex; gap: 6px; justify-content: flex-end; }
.board { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 10px; }
.col { background: #EEF2EF; border-radius: 22px; padding: 10px; min-height: 200px; }
.col.drop { background: var(--g100); box-shadow: inset 0 0 0 2px var(--g300); }
.col h4 { display: flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-size: .88rem; padding: 6px 8px 10px; margin: 0; }
.col h4 .c { margin-inline-start: auto; background: #fff; border-radius: 999px; padding: 0 10px; font-size: .78rem; }
.appc { background: #fff; border-radius: 16px; padding: 12px; margin-bottom: 8px; box-shadow: var(--sh1); cursor: grab; border: 1px solid transparent; transition: all .2s; }
.appc:hover { border-color: var(--g300); transform: translateY(-2px); }
.appc .who { display: flex; gap: 10px; align-items: center; }
.appc .av { width: 38px; height: 44px; border-radius: 999px 999px 8px 8px; object-fit: cover; background: var(--g100); display: grid; place-content: center; font-weight: 900; color: var(--g700); font-family: var(--f-display); font-size: .8rem; flex: none; }
.appc b { font-size: .92rem; display: block; line-height: 1.4; } .appc small { color: var(--muted); font-family: var(--f-ui); font-size: .75rem; }
.appc .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.appc .tags span { font-family: var(--f-ui); font-size: .7rem; background: var(--g50); color: var(--g700); padding: 1px 8px; border-radius: 999px; }
.appc.dragging { opacity: .5; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar input[type=search] { max-width: 280px; min-width: 160px; flex: 1; border-radius: 999px; padding: 9px 16px; }
.toolbar select { width: auto; border-radius: 999px; padding: 9px 14px; }
.editor { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.editor .preview { position: sticky; top: 86px; }
@media (max-width: 1100px) { .editor { grid-template-columns: 1fr; } .editor .preview { position: static; } }
.themes { display: flex; gap: 8px; flex-wrap: wrap; }
.themes label { cursor: pointer; }
.themes input { position: absolute; opacity: 0; }
.themes span { display: block; width: 46px; height: 46px; border-radius: 14px; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--line); transition: all .2s; }
.themes input:checked + span { box-shadow: 0 0 0 3px var(--gold); transform: scale(1.08); }
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 130px 1fr 40px; gap: 10px; align-items: center; font-family: var(--f-ui); font-size: .85rem; }
.bar .t { height: 12px; border-radius: 6px; background: var(--g50); overflow: hidden; }
.bar .t span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--g500), var(--gold)); }
.lead { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: #fff; margin-bottom: 10px; }
.lead .ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-content: center; background: var(--gold-l); color: var(--gold-d); }
.lead p { margin: 4px 0 0; color: var(--ink2); font-size: .92rem; }
.banner { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 18px; margin-bottom: 16px; font-family: var(--f-ui); font-size: .9rem; }
.banner.warn { background: #FDF3E1; color: #7A5210; } .banner.info { background: #E6EFF9; color: #1D4C80; } .banner.ok { background: var(--g100); color: var(--g800); }
.banner i { font-size: 1.2rem; }
.secret { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-radius: 16px; background: var(--g950); color: var(--gold2); font-family: var(--f-ui); font-weight: 700; letter-spacing: .12em; direction: ltr; font-size: 1.15rem; }
.log { font-family: var(--f-ui); font-size: .86rem; }
.log div { padding: 10px 0; border-bottom: 1px dashed var(--line); display: flex; gap: 10px; }
.log small { color: var(--muted); white-space: nowrap; }
.detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; }
@media (max-width: 800px) { .detail-grid { grid-template-columns: 1fr; } }
.dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; font-size: .92rem; }
.dl dt { color: var(--muted); font-family: var(--f-ui); font-size: .82rem; } .dl dd { margin: 0; word-break: break-word; }
.local-flag { pointer-events: none; position: fixed; bottom: 14px; inset-inline-start: 14px; z-index: 50; background: var(--gold-l); color: #3F5A2A; border: 1px solid #D6E3C3; border-radius: 999px; padding: 6px 14px; font-family: var(--f-ui); font-size: .78rem; box-shadow: var(--sh1); }

/* ===================================================================== */
/* ===== الإصدار الثاني: الهوية، النماذج المرنة، الأقسام، النشر ===== */
/* ===================================================================== */
.sec.tint { background: var(--gold-l); }
.sec.tint::after { content: ''; position: absolute; inset: 0; background: var(--pat-light); background-size: 400px; opacity: .7; pointer-events: none; }
.hsec:not(:first-child) .hero { margin-top: 0; padding-top: 80px; }
.hero::after { background: linear-gradient(to bottom, transparent, var(--paper)); }

/* حقل الصورة من Google Drive مع تنسيق الإطار */
.photo-field { display: grid; gap: 12px; padding: 16px; border: 1.5px dashed var(--line); border-radius: 20px; background: var(--paper); }
.pf-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.pf-circle { width: 120px; height: 120px; flex: none; border-radius: 50%; background: var(--g100); color: var(--g600); font-size: 2rem; font-family: var(--f-display); font-weight: 900; box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--g300); }
.pf-ranges { flex: 1; min-width: 200px; display: grid; gap: 8px; }
.pf-ranges label { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; font-family: var(--f-ui); font-size: .82rem; color: var(--ink2); }
.pf-ranges i { color: var(--g600); width: 16px; }
input[type=range] { accent-color: var(--g700); width: 100%; }
.pf-msg { margin: 0; min-height: 1.2em; }
.drive-help { font-family: var(--f-ui); font-size: .85rem; color: var(--ink2); }
.drive-help summary { cursor: pointer; color: var(--g700); font-weight: 600; }
.drive-help ol { margin: 8px 0 0; padding-inline-start: 20px; }
.themes { display: flex; gap: 10px; flex-wrap: wrap; }
.themes label { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.themes em { font-style: normal; font-family: var(--f-ui); font-size: .72rem; color: var(--muted); }
.chk.consent > span { white-space: normal; border-radius: 14px; }
.form-sec { display: flex; gap: 8px; align-items: center; margin: 6px 0 -4px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 1rem; color: var(--g800); }
.form-sec:first-child { border: 0; padding-top: 0; }

/* منشئ النماذج */
.fb { display: grid; gap: 16px; }
.fb-step { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 16px; box-shadow: var(--sh1); display: grid; gap: 10px; }
.fb-step header { display: flex; align-items: center; gap: 12px; }
.fb-step header small { display: block; color: var(--muted); font-family: var(--f-ui); }
.fb-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-content: center; background: var(--g800); color: var(--gold2); flex: none; }
.fb-fields { display: grid; gap: 6px; }
.fb-field { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.fb-field.off { opacity: .55; }
.fb-t { width: 34px; height: 34px; border-radius: 10px; display: grid; place-content: center; background: var(--g50); color: var(--g600); flex: none; }
.fb-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.fb-badges .pill { font-size: .68rem; padding: 1px 8px; }
.icon-pick, .type-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-pick input, .type-pick input { position: absolute; opacity: 0; }
.icon-pick span { width: 42px; height: 42px; display: grid; place-content: center; border-radius: 12px; border: 1.5px solid var(--line); cursor: pointer; color: var(--g700); }
.type-pick span { display: inline-flex; gap: 6px; align-items: center; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line); cursor: pointer; font-family: var(--f-ui); font-size: .85rem; }
.icon-pick input:checked + span, .type-pick input:checked + span { background: var(--g800); color: var(--gold2); border-color: var(--g800); }
@media (max-width: 640px) { .fb-field { flex-wrap: wrap; } .fb-field .acts { width: 100%; justify-content: flex-start; } }

/* منشئ الصفحة الرئيسية */
.hb { display: grid; gap: 8px; }
.hb-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh1); transition: box-shadow .2s, opacity .2s; }
.hb-row.off { opacity: .55; }
.hb-row.drop { box-shadow: 0 0 0 2px var(--g500); }
.hb-row.dragging { opacity: .4; }
.hb-row small { display: block; color: var(--muted); font-family: var(--f-ui); font-size: .78rem; }
.hb-row b i { color: var(--g600); margin-inline-end: 4px; }
.hb-grip { color: var(--muted); cursor: grab; }
.hb-thumb { width: 84px; flex: none; color: var(--g800); background: var(--g50); border-radius: 10px; overflow: hidden; display: block; }
.tpl-thumb { display: block; width: 100%; height: auto; }
.tg { display: grid; gap: 16px; max-height: 65vh; overflow: auto; padding-inline-end: 4px; }
.tg-type b { font-family: var(--f-ui); display: block; margin-bottom: 8px; }
.tg-type b i { color: var(--g600); }
.tg-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.tg-tpl { position: relative; display: grid; gap: 6px; padding: 8px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font-family: var(--f-ui); font-size: .8rem; color: var(--g800); text-align: center; transition: all .15s; }
.tg-tpl input { position: absolute; opacity: 0; }
.tg-tpl svg { background: var(--g50); border-radius: 8px; }
.tg-tpl:hover, .tg-tpl:has(input:checked) { border-color: var(--g600); box-shadow: 0 0 0 3px rgba(19,133,80,.15); }
.sf-level { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sf-level > .full, .sf-level > .sf-list-wrap, .sf-level > .chk { grid-column: 1 / -1; }
.sf-list-wrap { border: 1px dashed var(--line); border-radius: 16px; padding: 10px; display: grid; gap: 8px; }
.sf-lh { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-ui); }
.sf-list { display: grid; gap: 8px; }
.sf-item { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: grid; gap: 8px; }
.sf-ctl { display: flex; gap: 4px; justify-content: flex-end; }
.icon-sel { display: flex; align-items: center; gap: 8px; }
.icon-sel i { width: 38px; height: 38px; display: grid; place-content: center; border-radius: 10px; background: var(--g50); color: var(--g700); flex: none; }
@media (max-width: 640px) { .sf-level { grid-template-columns: 1fr; } }

/* بطاقات «من طلبات هذا الشهر» */
.ord-slider { overflow: hidden; padding: 6px 0 20px; mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ord-track { display: flex; gap: 14px; width: max-content; animation: marq var(--dur, 40s) linear infinite; }
.ord-slider:hover .ord-track { animation-play-state: paused; }
.ord-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.ord { position: relative; isolation: isolate; width: 220px; aspect-ratio: 1; flex: none; border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 85% 0%, rgba(35,163,101,.55), transparent 60%), linear-gradient(150deg, var(--g800), var(--g950)); box-shadow: 0 18px 40px -20px rgba(0,26,14,.6); }
.ord-grid .ord { width: auto; }
.ord::before { content: ''; position: absolute; inset: 0; background: var(--pat); background-size: 260px; z-index: -1; }
.ord-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-content: center; background: var(--gold2); color: var(--g800); font-size: 1.15rem; margin-bottom: 4px; }
.ord b { font-family: var(--f-display); font-size: 1.05rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ord small { color: var(--gold); font-family: var(--f-ui); font-size: .82rem; }
.ord-tr { font-family: var(--f-ui); font-size: .76rem; color: rgba(255,255,255,.8); }
.ord-tr i, .ord-meta i { color: var(--gold); margin-inline-end: 4px; }
.ord-meta { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; font-family: var(--f-ui); font-size: .74rem; color: rgba(255,255,255,.75); }
.sc-admin { display: grid; gap: 8px; margin-top: 10px; }
.sc-mini { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.sc-mini b { flex: 1; } .sc-mini small { color: var(--muted); font-family: var(--f-ui); }
@media (prefers-reduced-motion: reduce) { .ord-slider { overflow-x: auto; } }

/* قوالب الأقسام */
.hero-center { text-align: center; padding-bottom: 110px; }
.hero-center .wrap { max-width: 860px; display: flex; flex-direction: column; align-items: center; }
.hero-center .sub { margin-inline: auto; }
.hero-center .hsearch { width: 100%; }
.hero-center .quick, .hero-center .hstats { justify-content: center; }
.hs-carousel { position: relative; }
.cr-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 270px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 4px 24px; scrollbar-width: thin; }
.cr-track > * { scroll-snap-align: start; }
.cr-btn { position: absolute; top: 40%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; box-shadow: var(--sh2); cursor: pointer; color: var(--g800); }
.cr-btn.prev { right: -10px; } .cr-btn.next { left: -10px; }
@media (max-width: 700px) { .cr-btn { display: none; } }
.hs-list { display: grid; gap: 8px; max-width: 900px; margin: 0 auto; }
.hl-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line); color: var(--ink); transition: all .2s; }
.hl-row:hover { border-color: var(--g300); box-shadow: var(--sh1); transform: translateX(-3px); }
.hl-av { width: 52px; height: 52px; border-radius: 50%; flex: none; background: var(--g100); color: var(--g700); font-family: var(--f-display); font-weight: 900; }
.hl-row small { display: block; color: var(--muted); font-size: .85rem; }
.hl-meta { font-family: var(--f-ui); font-size: .8rem; color: var(--ink2); white-space: nowrap; } .hl-meta i { color: var(--g600); margin-inline-end: 4px; }
.hl-chips { display: flex; gap: 4px; } .hl-chips span { font-family: var(--f-ui); font-size: .72rem; padding: 2px 10px; border-radius: 999px; background: var(--g50); color: var(--g700); white-space: nowrap; }
.hl-go { color: var(--g600); }
@media (max-width: 700px) { .hl-chips, .hl-meta { display: none; } }
.spec-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.spec-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-family: var(--f-ui); font-weight: 600; font-size: .9rem; transition: all .2s; }
.spec-chips a i { color: var(--g600); }
.spec-chips a b { background: var(--g50); color: var(--g700); border-radius: 999px; padding: 0 8px; font-size: .75rem; }
.spec-chips a:hover { background: var(--g800); color: #fff; border-color: var(--g800); }
.sec.dark .spec-chips a { background: rgba(255,255,255,.06); border-color: rgba(238,243,229,.2); color: #fff; }
.track-h { text-align: center; margin: 26px 0 16px; color: var(--g800); } .track-h i { color: var(--g600); }
.marquee .mq-word { display: inline-flex; align-items: center; gap: 14px; font-family: var(--f-display); font-weight: 900; font-size: 1.6rem; color: var(--g800); white-space: nowrap; padding-inline: 10px; }
.marquee .mq-word i { color: var(--g300); font-size: .9rem; }
.cardsx { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cardsx.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cardsx.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cardsx.list { grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; }
.cardsx.list .icard { display: flex; gap: 18px; align-items: flex-start; padding: 20px; }
.cardsx.list .icard .ic { margin: 0; flex: none; }
.icard-btn { display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; font-family: var(--f-ui); font-weight: 700; color: var(--g700); }
@media (max-width: 900px) { .cardsx, .cardsx.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cardsx, .cardsx.c2, .cardsx.c4 { grid-template-columns: 1fr; } }
.center-text { max-width: 760px; text-align: center; }
.hs-text p { color: var(--ink2); font-size: 1.05rem; } .sec.dark .hs-text p { color: rgba(255,255,255,.75); }
.hs-text h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 900; }
.hs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hs-split.rev .hs-img { order: 2; }
.hs-img img { width: 100%; border-radius: 28px; box-shadow: var(--sh2); aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 800px) { .hs-split { grid-template-columns: 1fr; } .hs-split.rev .hs-img { order: 0; } }
.hs-quote { position: relative; max-width: 820px; margin: 0 auto; text-align: center; padding: 40px 30px; border-radius: 32px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh2); }
.hs-quote > i { font-size: 2rem; color: var(--g300); }
.hs-quote p { font-family: var(--f-display); font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 700; color: var(--g800); line-height: 1.7; }
.hs-quote cite { font-style: normal; font-family: var(--f-ui); color: var(--muted); display: block; margin-bottom: 14px; }
.hs-stats { display: flex; justify-content: center; gap: 20px 50px; flex-wrap: wrap; text-align: center; }
.hs-stats > div { display: grid; justify-items: center; gap: 4px; }
.hs-stats i { color: var(--g600); font-size: 1.3rem; }
.hs-stats b { font-family: var(--f-display); font-weight: 900; font-size: 2.6rem; line-height: 1; color: var(--g800); }
.hs-stats span { color: var(--muted); font-family: var(--f-ui); }
.hs-stats.tiles > div { min-width: 180px; padding: 22px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh1); }
.sec.dark .hs-stats b { color: #fff; } .sec.dark .hs-stats i { color: var(--gold); } .sec.dark .hs-stats.tiles > div { background: rgba(255,255,255,.06); border-color: rgba(238,243,229,.18); }
.cta-band.cream { background: var(--gold-l); color: var(--ink); box-shadow: var(--sh2); }
.cta-band.cream::before { background: var(--pat-light); background-size: 400px; }
.cta-band.cream h2 { color: var(--g800); } .cta-band.cream p { color: var(--ink2); }
.amt-inline { font-family: var(--f-ui); color: var(--gold2); } .amt-inline b { font-family: var(--f-display); font-size: 1.6rem; }
.faq.two { max-width: 1100px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 800px) { .faq.two { grid-template-columns: 1fr; } }
.join-h { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 900; }
.join-p { color: rgba(255,255,255,.72); }
.price-note { color: rgba(255,255,255,.6); font-family: var(--f-ui); }
.sec.dark .eyebrow { color: var(--gold); }

/* النشر الاجتماعي */
.cal { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; margin-bottom: 18px; }
.cal-d { position: relative; display: grid; justify-items: center; padding: 8px 2px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-family: var(--f-ui); }
.cal-d small { font-size: .65rem; color: var(--muted); } .cal-d b { font-size: 1rem; }
.cal-d.has { background: var(--g800); border-color: var(--g800); color: #fff; } .cal-d.has small { color: var(--gold); }
.cal-d span { position: absolute; top: -6px; left: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--gold2); color: var(--g800); font-size: .7rem; font-weight: 800; display: grid; place-content: center; box-shadow: 0 0 0 2px #fff; }
@media (max-width: 760px) { .cal { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.sp-h { margin: 22px 0 10px; font-size: 1.1rem; }
.sp-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: #fff; border: 1px solid var(--line); margin-bottom: 8px; }
.sp-row .av { width: 46px; height: 46px; border-radius: 50%; flex: none; background: var(--g100); color: var(--g700); font-family: var(--f-display); font-weight: 900; }
.sp-row .grow { min-width: 0; }
.sp-plats { display: flex; gap: 6px; margin-top: 6px; }
.sp-pl { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-family: var(--f-ui); font-size: .75rem; color: var(--muted); }
.sp-pl.ok { background: var(--g100); color: var(--ok); border-color: transparent; } .sp-pl.bad { background: #FBE9E7; color: var(--bad); border-color: transparent; }
@media (max-width: 700px) { .sp-row { flex-wrap: wrap; } .sp-row .acts { width: 100%; justify-content: flex-start; } }
.pe { display: grid; grid-template-columns: 1fr 300px; gap: 20px; }
.pe-main { display: grid; gap: 14px; min-width: 0; }
.pe-side { position: sticky; top: 0; align-self: start; }
.pe-img { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 8px; min-height: 200px; display: grid; place-items: center; }
.pe-foot { grid-column: 1 / -1; position: sticky; bottom: -28px; background: #fff; padding: 12px 0; border-top: 1px solid var(--line); }
.pe-cap > span { display: flex; align-items: center; gap: 8px; }
.pe-cap .cnt { font-style: normal; margin-inline-start: auto; font-size: .78rem; color: var(--muted); } .pe-cap .cnt.over { color: var(--bad); font-weight: 700; }
@media (max-width: 800px) { .pe { grid-template-columns: 1fr; } .pe-side { position: static; } }
.mp-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mp-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-content: center; background: var(--g800); color: var(--gold2); flex: none; }
.mp-text { white-space: pre-wrap; font-family: var(--f-body); font-size: .85rem; background: var(--paper); border-radius: 12px; padding: 10px; margin: 6px 0 0; max-height: 160px; overflow: auto; }
.bk-list { max-height: 300px; overflow: auto; display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 16px; padding: 8px; }
.bk-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; cursor: pointer; }
.bk-item:hover { background: var(--g50); }
.bk-item .av { width: 36px; height: 36px; border-radius: 50%; background: var(--g100); color: var(--g700); font-weight: 900; font-size: .8rem; flex: none; }
.bk-item small { display: block; color: var(--muted); font-family: var(--f-ui); font-size: .75rem; }
.side .who .av, .tbl .who .av, .appc .av, .match .av, .suggest .s-av { border-radius: 50%; }
.hb-row .grow, .fb-field .grow { min-width: 0; }
@media (max-width: 700px) { .hb-row { flex-wrap: wrap; } .hb-row .acts { width: 100%; justify-content: flex-start; flex-wrap: wrap; } .hb-thumb { width: 64px; } }

/* ترتيب القائمة الجانبية للإدارة */
.side .who .grow { min-width: 0; }
.side .who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .side-sort { width: 34px; height: 34px; flex: none; padding: 0; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.06); }
.side .side-sort i { width: auto; }
.side .side-sort.on { background: var(--gold2); color: var(--g800); }
.side .side-sort.on i { color: var(--g800); opacity: 1; }
.side-item { position: relative; display: flex; align-items: center; border-radius: 14px; transition: background .15s, box-shadow .15s; }
.side-item > button[data-tab] { flex: 1; min-width: 0; }
.side-item.edit { background: rgba(255,255,255,.04); margin-bottom: 4px; cursor: grab; }
.side-item.edit > button[data-tab] { cursor: grab; }
.side-item.dragging { opacity: .4; }
.side-item.drop { box-shadow: inset 0 0 0 2px var(--gold); }
.side .side-grip { color: rgba(255,255,255,.4) !important; width: 12px !important; }
.side-mv { display: flex; gap: 2px; padding-inline-end: 6px; }
.side .side-mv button { width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 8px; background: rgba(255,255,255,.08); }
.side .side-mv button i { width: auto; opacity: 1; }
.side .side-mv button:hover:not([disabled]) { background: var(--gold2); }
.side .side-mv button:hover:not([disabled]) i { color: var(--g800); }
.side .side-mv button[disabled] { opacity: .25; pointer-events: none; }
.side-edit-bar { display: flex; gap: 6px; margin-top: 8px; }
.side .side-edit-bar button { justify-content: center; background: rgba(255,255,255,.06); }
.side .side-edit-bar .side-done { background: var(--gold2); color: var(--g800); }
.side .side-edit-bar .side-done i { color: var(--g800); }
.side.editing { box-shadow: 0 0 0 2px var(--gold), var(--sh2); }
.side .side-sort-m { display: none; }
.side .side-sort-m.on { background: var(--gold2); color: var(--g800); }
@media (max-width: 900px) {
  .side .side-nav { display: flex; gap: 4px; }
  .side.editing { flex-wrap: wrap; }
  .side.editing .side-nav { flex-direction: column; width: 100%; }
  .side .who { display: none; }
  .side .side-sort-m { display: inline-flex; flex: none; }
  .side.editing .side-sort-m { display: none; }
}
.side-item.edit > button[data-tab] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: 8px; gap: 8px; }
.side-item.edit > button[data-tab].on { background: transparent; box-shadow: none; }
.side-item.edit:has(button.on) { box-shadow: inset 0 0 0 1px rgba(238,243,229,.25); }
.side-mv { flex-direction: column; gap: 2px; padding-inline-end: 6px; }
.side .side-mv button { width: 30px; height: 18px; border-radius: 6px; font-size: .7rem; }
@media (max-width: 900px) { .side-mv { flex-direction: row; } .side .side-mv button { height: 28px; } }

/* مراحل طلب التسجيل والقوالب */
.stagebar { display: flex; gap: 8px; margin: 4px 0 16px; }
.stagebar span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font-family: var(--f-ui); font-size: .85rem; color: var(--muted); }
.stagebar span.done { background: var(--g100); color: var(--g700); border-color: transparent; }
.stagebar span.cur { background: var(--g800); color: #fff; border-color: var(--g800); }
.stagebar.rej span.cur { background: var(--bad); border-color: var(--bad); }
.stage-actions { display: grid; gap: 8px; margin-top: 14px; }
.notice-box { padding: 12px; border-radius: 16px; background: var(--g50); border: 1px solid var(--g100); display: grid; gap: 8px; font-family: var(--f-ui); }
.notice-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tvars { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tvar { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-family: monospace; font-size: .8rem; direction: ltr; color: var(--g700); }
.tvar small { font-family: var(--f-ui); font-size: .68rem; color: var(--muted); direction: rtl; }
.tvar:hover { background: var(--g800); color: #fff; } .tvar:hover small { color: var(--gold2); }
.tpl-box .field { margin-bottom: 10px; }
.tpl-box textarea { font-size: .92rem; line-height: 1.8; }
.pv-mail, .pv-wa { border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 12px; background: #fff; }
.pv-wa { background: #E7F6E9; }
.pv-mail pre, .pv-wa pre { white-space: pre-wrap; font-family: var(--f-body); margin: 8px 0 0; line-height: 1.9; }
@media (max-width: 640px) { .stagebar span { font-size: .72rem; padding: 6px 2px; flex-direction: column; gap: 2px; } }

/* دليل ربط النشر الاجتماعي */
.gd { border: 1px solid var(--line); border-radius: 18px; margin-bottom: 10px; background: #fff; }
.gd summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; font-family: var(--f-ui); }
.gd summary::-webkit-details-marker { display: none; }
.gd summary i:first-child { width: 34px; height: 34px; border-radius: 10px; display: grid; place-content: center; background: var(--g800); color: var(--gold2); flex: none; }
.gd summary b { flex: 1; }
.gd summary::after { content: '▾'; color: var(--muted); transition: transform .2s; } .gd[open] summary::after { transform: rotate(180deg); }
.gd[open] { box-shadow: var(--sh1); }
.gd-body { padding: 0 18px 16px; font-size: .92rem; }
.gd-steps { padding-inline-start: 22px; display: grid; gap: 8px; line-height: 1.9; }
.gd-steps li::marker { color: var(--g600); font-weight: 800; }
.gd code, .gd-props code { direction: ltr; unicode-bidi: isolate; font-size: .8rem; background: var(--g50); border: 1px solid var(--g100); border-radius: 8px; padding: 1px 7px; color: var(--g800); }
.gd code.cp { cursor: pointer; } .gd code.cp:hover { background: var(--g800); color: #fff; }
.gd-props { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: var(--paper); border: 1px dashed var(--line); margin-top: 8px; }
.gd-props div { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .gd-props span { color: var(--muted); font-size: .82rem; }
.gd-list { display: grid; gap: 8px; padding-inline-start: 20px; line-height: 1.9; }
.gd a { color: var(--g700); font-weight: 600; }

/* شريط الإعلانات المتحرك */
.ticker { position: relative; z-index: 45; overflow: hidden; display: flex; align-items: center; height: 38px; font-family: var(--f-ui); font-size: .88rem; font-weight: 600; background: var(--g800); color: var(--gold2); }
.ticker.cream { background: var(--gold-l); color: var(--g800); border-bottom: 1px solid var(--g100); }
.ticker.dark { background: var(--g950); color: var(--gold2); }
.tk-track { display: flex; width: max-content; animation: tkmove var(--dur, 40s) linear infinite; }
.ticker:hover .tk-track { animation-play-state: paused; }
.tk-set { display: flex; align-items: center; white-space: nowrap; flex: none; }
.tk-set a, .tk-set span { color: inherit; padding-inline: 4px; }
.tk-set a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.tk-sep { font-size: .55rem; opacity: .6; margin-inline: 22px; }
.tk-x { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 44px; border: 0; cursor: pointer; color: inherit; background: linear-gradient(to right, var(--tkbg, var(--g800)) 55%, transparent); }
.ticker.cream .tk-x { --tkbg: var(--gold-l); } .ticker.dark .tk-x { --tkbg: var(--g950); }
@keyframes tkmove { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .tk-track { animation: none; overflow-x: auto; } }
.nav-ed { display: grid; gap: 8px; }
.set-panel { background: #fff; border: 1px solid var(--line); border-radius: 22px; margin-bottom: 14px; box-shadow: var(--sh1); }
.set-panel > summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; font-family: var(--f-ui); font-weight: 700; }
.set-panel > summary::-webkit-details-marker { display: none; }
.set-panel > summary i { width: 34px; height: 34px; display: grid; place-content: center; border-radius: 10px; background: var(--g800); color: var(--gold2); }
.set-panel > summary::after { content: '▾'; margin-inline-start: auto; color: var(--muted); }
.set-panel[open] > summary::after { transform: rotate(180deg); }
.set-body { padding: 0 18px 18px; display: grid; gap: 12px; }
.preset-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-family: var(--f-ui); font-size: .82rem; color: var(--muted); }
.preset-row button { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 3px 12px; cursor: pointer; font-family: var(--f-ui); font-size: .8rem; }
.preset-row button:hover { background: var(--g800); color: #fff; }

/* صورة رمزية بلا ملامح (لمن لا ترغب بنشر صورتها) */
.avw.sym { background: linear-gradient(160deg, var(--c, #1D8E5B), var(--a, #003A21)); }
.avw.sym svg { width: 100%; height: 100%; display: block; }
.pf-np { display: grid; gap: 4px; justify-items: start; }
.photo-field.np [name=photoUrl], .photo-field.np .pf-ranges, .photo-field.np .drive-help { opacity: .35; pointer-events: none; }
.pf-circle.sym { box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--g300); }
.photo-field.np .pf-np small { display: none; }

/* التخصصات والإقرار */
.specs-box { display: grid; gap: 12px; }
.specs-box .checks { max-height: 260px; overflow: auto; padding: 4px; }
.specs-box .hidden, .card-specs .hidden, .spec-add.hidden, .lang-other.hidden { display: none !important; }
.card-specs { background: var(--cream, #EEF3E5); border-radius: 14px; padding: 12px; display: grid; gap: 8px; }
.tot-box { display: grid; gap: 8px; }
.ack-box { display: flex; gap: 10px; align-items: flex-start; background: var(--cream, #EEF3E5); border-radius: 12px; padding: 12px 14px; color: var(--ink2); font-size: .92rem; }
.ack-box p { margin: 0; }
.ack-note { margin: 18px 0 0; font-size: .8rem; color: var(--ink2); opacity: .75; display: flex; gap: 8px; align-items: flex-start; }

/* بحث القوائم الطويلة */
.list-search { width: 100%; padding: 9px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font: inherit; font-size: .88rem; }
.list-search:focus { outline: none; border-color: var(--g600); box-shadow: 0 0 0 4px rgba(26,154,99,.15); }
.checks > .ls-in { flex: 1 0 100%; position: sticky; top: 0; z-index: 2; margin-bottom: 2px; }
.ls-off { display: none !important; }
select[data-ls] { cursor: pointer; }
.ls-panel { position: fixed; z-index: 10000; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px -12px rgba(0,40,20,.35); }
.ls-opts { overflow: auto; display: grid; gap: 2px; }
.ls-opt { padding: 8px 12px; border-radius: 10px; cursor: pointer; font-size: .9rem; color: var(--ink); }
.ls-opt:hover { background: var(--g50); }
.ls-opt.on { background: var(--g800); color: #fff; }
.ls-none { padding: 10px; color: var(--ink2); font-size: .85rem; text-align: center; }

/* مزايا الانضمام */
.perks { margin: 8px 0 34px; padding: 30px 26px; border-radius: 28px; background: linear-gradient(160deg, var(--g900), var(--g800)); color: #fff; position: relative; overflow: hidden; }
.perks-h { text-align: center; max-width: 640px; margin: 0 auto 24px; }
.perks-h .eyebrow { color: var(--gold2); }
.perks-h h2 { margin: 6px 0; font-family: var(--f-head); color: #fff; }
.perks-h p { margin: 0; color: rgba(238,243,229,.8); }
.perks-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.perk { grid-column: span 2; }
.perk:nth-child(4):nth-last-child(2), .perk:nth-child(5):last-child { grid-column: span 3; }
@media (max-width: 900px) { .perks-grid { grid-template-columns: 1fr; } .perk, .perk:nth-child(4):nth-last-child(2), .perk:nth-child(5):last-child { grid-column: auto; } }
.perk { position: relative; padding: 22px 20px; border-radius: 20px; background: rgba(238,243,229,.08); border: 1px solid rgba(238,243,229,.16); transition: transform .25s, background .25s; }
.perk:hover { transform: translateY(-4px); background: rgba(238,243,229,.14); }
.perk-n { position: absolute; top: 14px; left: 16px; font-size: 2rem; font-weight: 800; color: rgba(238,243,229,.12); line-height: 1; }
.perk-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--cream, #EEF3E5); color: var(--g800); font-size: 1.1rem; margin-bottom: 12px; }
.perk h3 { margin: 0 0 6px; font-size: 1.05rem; color: #fff; }
.perk p { margin: 0; font-size: .9rem; line-height: 1.8; color: rgba(238,243,229,.82); }

/* إضافة تخصص جديد («أخرى») */
.spec-add { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--g50); border: 1px dashed var(--g300); }
.spec-hint { margin: 0; font-size: .85rem; color: var(--g800); line-height: 1.8; }
.spec-hint i { color: var(--g600); margin-inline-end: 4px; }
.spec-add .row { display: flex; gap: 8px; }
.spec-add .row input { flex: 1; min-width: 0; }

.field .opt { font-style: normal; font-weight: 500; font-size: .78rem; color: var(--muted); }

.cdot { display: block; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); }
input:checked + .cdot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--g600); }
.cpick input[type=color] { width: 100%; height: 40px; padding: 2px; border-radius: 10px; cursor: pointer; }

/* مربع الإقرار: دائرة فارغة تمتلئ بعلامة ✓ خضراء عند الاختيار */
.chk.consent > span > i:first-child { font-size: 0; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--g300); background: #fff; display: inline-grid; place-items: center; transition: all .15s; }
.chk.consent > span > i:first-child::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; color: #fff; opacity: 0; transition: opacity .15s; }
.chk.consent > input:checked + span > i:first-child { background: var(--g500); border-color: #fff; }
.chk.consent > input:checked + span > i:first-child::before { opacity: 1; }

/* خيار «حاصل على شهادة تدريب المدربين»: دائرة فارغة يظهر فيها مربع أخضر عند الاختيار */
.chk.tot > span { gap: 10px; }
.chk.tot > span .tot-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--g300); background: #fff; display: inline-grid; place-items: center; transition: border-color .15s; }
.chk.tot > span .tot-dot::after { content: ''; width: 12px; height: 12px; border-radius: 3px; background: var(--g500); transform: scale(0); transition: transform .15s; }
.chk.tot > input:checked + span { background: #fff; color: var(--ink); border-color: var(--g500); box-shadow: 0 0 0 3px rgba(26,154,99,.15); }
.chk.tot > input:checked + span .tot-dot { border-color: var(--g500); }
.chk.tot > input:checked + span .tot-dot::after { transform: scale(1); }
.tot-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 14px; border-radius: 999px; font-family: var(--f-ui); font-size: .85rem; font-weight: 700; background: rgba(238,243,229,.14); color: var(--gold2); border: 1px solid rgba(238,243,229,.3); }
@media (max-width: 960px) { .tot-badge { background: var(--g50); color: var(--g800); border-color: var(--g100); } }

/* شهادات احترافية: «نعم» تُظهر مربع الكتابة */
.pro-box { display: grid; gap: 10px; }
.pro-list.hidden { display: none; }
.pro-list textarea { min-height: 90px; }

/* أزرار قسم نخبة المدربين */
.fx-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 26px; }
.fx-tabs .btn { padding: 12px 26px; font-weight: 700; }

/* صفحة المدرب: الأزرار أولاً، وقسم «مدربون في تخصصات مشابهة» منفصل بشريط واحد قابل للسحب */
.profile-actions { margin: 18px 0 0; }
.similar { margin-top: 56px; padding: 34px 0 44px; background: linear-gradient(var(--g50), #fff); border-top: 1px solid var(--line); }
.similar h3 { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; margin: 0 0 6px; }
.similar h3 i { color: var(--g600); }
.similar .cr-track { grid-auto-columns: 215px; gap: 14px; cursor: grab; scroll-snap-type: x proximity; user-select: none; }
.similar .cr-track.drag { cursor: grabbing; scroll-snap-type: none; }
.similar .tmini { font-size: .92em; }
.similar .tm-ring { transform: scale(.88); }
@media (max-width: 700px) { .similar .cr-track { grid-auto-columns: 190px; } }
.similar .tm-chips span:nth-child(n+3):not(.more) { display: none; }
.similar .tm-title { min-height: 0; }

/* لابتوب: الأزرار تلتصق بأسفل الشاشة إن لم تتسع الشاشة للبطاقة وأزرارها، وتُضغط على الشاشات القصيرة */
@media (min-width: 961px) {
  .profile-actions { position: sticky; bottom: 10px; z-index: 5; }
}
@media (min-width: 961px) and (max-height: 760px) {
  .profile-actions { gap: 6px; margin-top: 10px; }
  .profile-actions p { display: none; }
  .profile-actions .btn.lg { padding: 10px 18px; font-size: .95rem; }
  .profile-actions .btn { padding-block: 9px; }
}