/* Sales Hackers Hub
   الهوية من saboelmagd.com: فحمي، كريمي، نحاسي.
   الفكرة البصرية: كل شاشة مبنية حوالين لحظة واحدة، عميل بيتكلم وانت هترد.
   لكل نمط عميل لون ثابت بيظهر في كل مكان، عشان العين تلقطه من غير قراية. */
:root {
  --bg: #161616; --bg-2: #1b1b1b; --card: #212121; --card-2: #282828; --line: #303236; --line-2: #3d4045;
  --text: #fff8ee; --soft: #dfd2c0; --mute: rgba(223, 209, 191, .62); --faint: rgba(223, 209, 191, .34);
  --copper: #c79a7b; --copper-hi: #dcb497; --copper-soft: rgba(199, 154, 123, .12); --copper-line: rgba(199, 154, 123, .4);
  --good: #a9c79a; --bad: #e0968a; --mid: #e0c68a;
  --t-expressive: #e6a66a; --t-amiable: #a9c79a; --t-driver: #e08a78; --t-analytical: #9fb8d0; --t-none: #5a5d63;
  --display: 'Alexandria', 'IBM Plex Sans Arabic', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --wrap: 1200px; --side: 248px; --r: 18px; --r-sm: 12px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; letter-spacing: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; background: var(--bg); }
body { margin: 0; overflow-x: hidden; color: var(--soft); font: 400 16px/1.8 'IBM Plex Sans Arabic', system-ui, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, h4 { color: var(--text); margin: 0; font-family: var(--display); line-height: 1.35; }
h1 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; }
h2 { font-size: clamp(19px, 2vw, 23px); font-weight: 700; }
h3 { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
h4 { font-size: 13px; font-weight: 500; color: var(--mute); font-family: inherit; margin-bottom: 6px; }
h1 em { font-style: normal; color: var(--copper); }
p { margin: 6px 0; }
ul { margin: 6px 0; padding-inline-start: 20px; }
li { margin: 4px 0; }
ul.no li::marker { color: var(--bad); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--copper); color: #161616; }
.qs { list-style: none; padding: 0; }
.qs li { padding: 10px 0; border-bottom: 1px dashed var(--line); color: var(--text); }
.qs li:last-child { border: 0; }
.qs small { display: block; color: var(--mute); }

/* ---------- الهيكل العام ---------- */
.brand { display: flex; flex-direction: column; line-height: 1.25; }
.brand b { font-family: var(--display); font-weight: 800; color: var(--text); font-size: 15px; direction: ltr; text-align: right; }
.brand span { font-size: 12px; color: var(--copper); }
#app { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 40px 28px 90px; flex: 1; }
#app.enter { animation: in .35s var(--ease); }
@keyframes in { from { opacity: 0; transform: translateY(8px); } }
#foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 28px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
#nav { display: none; }

/* الصفحة العامة: شريط علوي */
.is-public #top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0 max(28px, calc((100vw - var(--wrap)) / 2 + 28px)); background: rgba(22, 22, 22, .82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.is-public #foot { padding-inline: max(28px, calc((100vw - var(--wrap)) / 2 + 28px)); }

/* المنصة: شريط جانبي ثابت */
.is-app #top { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--side); z-index: 20; display: flex; flex-direction: column; gap: 28px; padding: 26px 16px 20px; background: var(--bg-2); border-inline-end: 1px solid var(--line); }
.is-app .brand { padding: 0 10px; }
.is-app #app, .is-app #foot { margin-inline: var(--side) 0; width: auto; }
.is-app #app { max-width: none; padding: 40px clamp(24px, 4vw, 56px) 90px; }
.is-app #app > * { max-width: 1120px; }
.top-nav { display: grid; gap: 4px; flex: 1; align-content: start; }
.top-nav button { display: flex; align-items: center; gap: 12px; background: none; border: 0; border-radius: var(--r-sm); color: var(--mute); font-size: 15px; padding: 11px 12px; cursor: pointer; text-align: start; position: relative; transition: background .15s, color .15s; }
.top-nav button:hover { color: var(--text); background: var(--card); }
.top-nav button.on { color: var(--text); background: var(--card); font-weight: 600; }
.top-nav button.on::before { content: ''; position: absolute; inset-inline-start: -16px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--copper); }
.top-nav button.on svg { color: var(--copper); }
.who { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; color: var(--text); font-size: 14px; cursor: pointer; transition: border-color .15s; }
.who:hover { border-color: var(--copper-line); }

.head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.head p { color: var(--mute); margin: 4px 0 0; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.layout.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.layout.flip { grid-template-columns: 360px minmax(0, 1fr); }
.side { display: grid; gap: 16px; position: sticky; top: 32px; }
.side .card, .main > .card:first-child { margin-top: 0; }
.side .sec:first-child, .main .sec:first-child { margin-top: 0; }
.narrow { max-width: 720px; margin: 0 auto; }
.cols2, .cols3, .cols4 { display: grid; gap: 16px; }
.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols2 .card, .cols3 .card { margin: 0; }

/* ---------- عناصر ---------- */
.eyebrow { font-size: 13px; font-weight: 500; color: var(--copper); margin: 0 0 6px; }
.lead { font-size: 18px; color: var(--soft); }
.sec { font-size: 13px; font-weight: 500; color: var(--mute); margin: 32px 0 12px; font-family: inherit; }
.fine { font-size: 12.5px; color: var(--mute); }
.done { color: var(--good); }
.warn { color: var(--mid); }
.en { color: var(--mute); direction: ltr; text-align: right; font-size: 13px; }
.back, .link { background: none; border: 0; color: var(--copper); font-size: 14px; padding: 6px 0; cursor: pointer; }
.back::before { content: '→ '; }
.link:hover, .back:hover { color: var(--copper-hi); text-decoration: underline; }
.link.danger { color: var(--bad); justify-self: start; }
.only-m { display: none; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; margin: 16px 0; }
.card.accent { border-color: var(--copper-line); background: linear-gradient(180deg, var(--copper-soft), transparent 150px), var(--card); }
.card h3:not(:first-child) { margin-top: 16px; }
.foryou { border-inline-start: 2px solid var(--copper); padding-inline-start: 12px; margin-top: 14px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.panel label:first-child { margin-top: 0; }
.blank { border: 1px dashed var(--line-2); border-radius: var(--r); padding: 56px 28px; text-align: center; max-width: 560px; margin: 24px auto; }

.btn { display: inline-block; background: var(--copper); color: #161616; border: 1px solid var(--copper); border-radius: var(--r-sm); padding: 13px 24px; font-weight: 600; font-size: 16px; line-height: 1.3; cursor: pointer; margin-top: 14px; text-align: center; transition: transform .15s var(--ease), background .15s, box-shadow .2s; }
.btn:hover { background: var(--copper-hi); transform: translateY(-1px); box-shadow: 0 10px 28px -12px rgba(199, 154, 123, .7); }
.btn:active { transform: translateY(0); }
.btn.sm { padding: 9px 16px; font-size: 14px; }
.btn.ghost { background: none; color: var(--copper); border-color: var(--copper-line); }
.btn.ghost:hover { background: var(--copper-soft); box-shadow: none; }
.btn.wide, .panel .btn { display: block; width: 100%; }
.row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.row .btn { margin-top: 10px; }
.row.between { justify-content: space-between; }

label { display: block; color: var(--mute); font-size: 13px; margin: 16px 0 0; }
input, textarea { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font: inherit; margin-top: 6px; transition: border-color .15s; }
input:hover, textarea:hover { border-color: var(--line-2); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type=checkbox] { width: auto; margin: 0; }
input[type=range] { padding: 0; accent-color: var(--copper); border: 0; background: none; }
input[type=date] { color-scheme: dark; }
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { background: none; border: 1px solid var(--line-2); color: var(--soft); border-radius: 999px; padding: 8px 16px; font-size: 14px; cursor: pointer; transition: .15s; }
.chip:hover { border-color: var(--copper); color: var(--text); }
.chip.on { background: var(--copper); border-color: var(--copper); color: #161616; font-weight: 600; }
.stagebar { margin: -8px 0 28px; }
.tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 12px; white-space: nowrap; }
.tag.copper { border-color: var(--copper-line); color: var(--copper); }
.tag.muted { color: var(--mute); }
.tag.type { color: var(--text); }
.tag.type i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }
.t-expressive { --tc: var(--t-expressive); } .t-amiable { --tc: var(--t-amiable); } .t-driver { --tc: var(--t-driver); } .t-analytical { --tc: var(--t-analytical); } .t-none { --tc: var(--t-none); }

.stats { display: flex; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.stats div { padding: 12px 26px; text-align: center; border-inline-start: 1px solid var(--line); }
.stats div:first-child { border: 0; }
.stats b { display: block; color: var(--text); font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.4; }
.stats span { font-size: 12px; color: var(--mute); }
.big { font-family: var(--display); font-size: 56px; font-weight: 800; color: var(--copper); line-height: 1.1; direction: ltr; text-align: right; }
.big small { font-size: 20px; color: var(--mute); font-weight: 500; }
.sheet div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.sheet div:last-child { border: 0; }
.sheet b { color: var(--text); }
.meter { display: grid; grid-template-columns: 80px 1fr 24px; gap: 12px; align-items: center; margin: 10px 0; font-size: 14px; }
.meter b, .bar { background: var(--bg); border-radius: 99px; height: 8px; overflow: hidden; display: block; }
.meter i, .bar i { display: block; height: 100%; background: var(--copper); border-radius: 99px; transition: width .4s var(--ease); }
.meter em { font-style: normal; color: var(--mute); font-family: var(--mono); }
.scale { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 14px; align-items: center; font-size: 13px; color: var(--mute); }
.scale span:last-child { color: var(--good); }
.scale input { margin: 0; }
.board-list { padding: 0; margin: 16px 0 0; list-style: none; counter-reset: r; }
.board-list li { counter-increment: r; display: flex; padding: 8px 0; border-bottom: 1px solid var(--line); }
.board-list li::before { content: counter(r); color: var(--mute); width: 28px; font-family: var(--mono); }
.board-list span { flex: 1; }
.board-list .me { color: var(--copper); font-weight: 600; }

/* ---------- لوحة اليوم ---------- */
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; margin-bottom: 28px; }
.dash-head h1 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; }
.dash-head .sub { color: var(--mute); margin: 2px 0 0; }
.figures { display: flex; align-items: center; gap: 28px; }
.figures > div { border-inline-start: 1px solid var(--line); padding-inline-start: 28px; }
.figures b { display: block; font-family: var(--display); font-size: 30px; font-weight: 700; color: var(--text); line-height: 1.2; }
.figures span { font-size: 12px; color: var(--mute); }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 5; }
.ring-fg { fill: none; stroke: var(--copper); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease); }
.ring text { fill: var(--text); font: 500 15px var(--mono); }

.pipe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow: hidden; margin-bottom: 36px; }
.pipe button { background: none; border: 0; border-inline-start: 1px solid var(--line); padding: 16px 18px; text-align: start; color: var(--mute); cursor: pointer; position: relative; transition: background .15s; }
.pipe button:first-child { border: 0; }
.pipe button:hover { background: var(--card-2); }
.pipe b { display: block; font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--faint); line-height: 1.2; }
.pipe span { font-size: 13px; }
.pipe .has b { color: var(--text); }
.pipe .has::after { content: ''; position: absolute; inset-inline: 18px; bottom: 0; height: 2px; background: var(--copper); border-radius: 2px 2px 0 0; }

.steps { display: grid; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 20px; position: relative; padding-bottom: 16px; }
.step::before { content: ''; position: absolute; inset-inline-start: 21px; top: 44px; bottom: 0; width: 2px; background: var(--line); }
.step:last-child::before { display: none; }
.step-n { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line-2); color: var(--mute); display: grid; place-items: center; font-family: var(--mono); font-weight: 500; background: var(--bg); z-index: 1; transition: .2s; }
.step-b { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 26px; transition: border-color .2s; }
.step-b h2 { margin-bottom: 4px; }
.step.is-now .step-n { border-color: var(--copper); color: var(--copper); box-shadow: 0 0 0 6px var(--copper-soft); }
.step.is-now .step-b { border-color: var(--copper-line); background: linear-gradient(180deg, var(--copper-soft), transparent 130px), var(--card); }
.step.is-done .step-n { background: var(--copper); border-color: var(--copper); color: #161616; }
.step.is-done::before { background: var(--copper); }
.step.is-done .step-b { padding: 14px 26px; background: none; }
.step.is-done .step-b h3 { margin: 0; color: var(--soft); font-family: inherit; }
.step.is-done .eyebrow { margin: 0; color: var(--mute); }

.queue { display: grid; gap: 10px; }
.todo { background: var(--card); border: 1px solid var(--line); border-right: 3px solid var(--tc); border-radius: var(--r-sm); padding: 16px 18px; }
.todo h3 { font-family: inherit; font-weight: 600; }
.todo p { font-size: 14.5px; color: var(--soft); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week div { display: grid; gap: 6px; justify-items: center; font-size: 12px; color: var(--mute); }
.week i { width: 100%; height: 34px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); }
.week .on i { background: var(--copper); border-color: var(--copper); }
.week .now i { outline: 2px solid var(--copper-line); outline-offset: 2px; }

/* ---------- المواقف ---------- */
.opts { display: grid; gap: 12px; margin-top: 16px; }
.opts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt { background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 14px; padding: 16px 18px; font-size: 16px; line-height: 1.7; text-align: start; cursor: pointer; width: 100%; transition: border-color .15s, transform .15s var(--ease), background .15s; }
button.opt:hover { border-color: var(--copper); background: var(--card-2); transform: translateX(-4px); }
.opt small { display: block; color: var(--soft); margin-top: 6px; font-size: 14px; }
div.opt { animation: in .3s var(--ease) backwards; }
.opt.good { border-color: var(--good); background: rgba(169, 199, 154, .07); }
.opt.mid { border-color: var(--mid); background: rgba(224, 198, 138, .07); }
.opt.bad { border-color: var(--bad); background: rgba(224, 150, 138, .07); }
.opt.best { border-style: dashed; border-color: var(--good); }
.opt.dim { opacity: .4; }
.opt.check.on { border-color: var(--copper); background: var(--copper-soft); }
.bubble { background: var(--card-2); border: 1px solid var(--line-2); border-radius: 20px 20px 20px 4px; padding: 20px 24px; color: var(--text); font-size: 20px; line-height: 1.7; max-width: 640px; }
.bubble.sm { font-size: 15px; padding: 12px 16px; margin-bottom: 10px; }
.ask-you { margin-top: 28px; }
.say { background: var(--bg); border: 1px dashed var(--copper-line); border-radius: 12px; padding: 14px 16px; color: var(--text); font-size: 17px; }
.dots { display: flex; gap: 6px; margin: 16px 0 6px; }
.dots i { height: 4px; flex: 1; background: var(--line); border-radius: 9px; }
.dots i.on, .dots i.past { background: var(--copper); }
.dots i.past { opacity: .5; }
.stage { padding-top: 4vh; }
.stage h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 8px 0 8px; }
.result-head { text-align: center; margin-bottom: 32px; }
.result-head h1 { font-size: clamp(48px, 8vw, 88px); font-weight: 800; }
.result-head h1 em { color: var(--tc); }
.result .btn.wide { max-width: 360px; margin: 24px auto 0; }

/* ---------- العملاء ---------- */
.board { display: grid; grid-template-columns: repeat(6, minmax(170px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.col { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; min-height: 240px; align-content: start; display: grid; gap: 10px; }
.col header { display: flex; justify-content: space-between; font-size: 13px; color: var(--soft); padding: 2px 4px 8px; border-bottom: 1px solid var(--line); }
.col header em { font-style: normal; color: var(--mute); font-family: var(--mono); }
.col .fine { text-align: center; margin: 20px 0; color: var(--faint); }
.deal { display: grid; gap: 6px; justify-items: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px; color: var(--text); font-size: 15px; text-align: start; cursor: pointer; width: 100%; transition: border-color .15s, transform .15s var(--ease); }
.deal:hover { border-color: var(--copper-line); transform: translateY(-2px); }
.deal small { color: var(--mute); font-size: 12px; }

/* ---------- اسأل صلاح ---------- */
.split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px; align-items: start; }
.split-list { display: grid; gap: 4px; position: sticky; top: 32px; }
.split-list input { margin: 0 0 10px; }
.split-pane { min-height: 360px; }
.split-pane .card { margin-top: 12px; }
.item { display: block; width: 100%; background: none; border: 1px solid transparent; border-radius: var(--r-sm); padding: 12px 16px; color: var(--soft); font-size: 15px; text-align: start; cursor: pointer; transition: .15s; }
.item:hover { background: var(--card); color: var(--text); }
.item.on { background: var(--card); border-color: var(--copper-line); color: var(--text); font-weight: 600; }


/* ---------- شرح القسم ---------- */
.intro { border: 1px solid var(--copper-line); border-top: 3px solid var(--copper); border-radius: var(--r); background: var(--card); padding: 24px 28px; margin-bottom: 32px; animation: in .35s var(--ease); }
.intro-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.intro-head .btn { margin: 0; flex: none; }
.intro h2 { font-size: clamp(18px, 1.9vw, 22px); }
.intro ol { list-style: none; counter-reset: i; padding: 0; margin: 20px 0 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.intro li { counter-increment: i; margin: 0; padding: 16px 20px 4px 0; color: var(--text); font-size: 15px; line-height: 1.7; border-inline-start: 1px solid var(--line); padding-inline-start: 20px; }
.intro li:first-child { border: 0; padding-inline-start: 0; }
.intro li::before { content: counter(i); display: block; font: 500 12px var(--mono); color: var(--copper); margin-bottom: 4px; }
.intro .fine { margin: 0; }
.helpbar { margin: 40px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- الخريطة ---------- */
.moments { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.moment { display: grid; grid-template-columns: 220px minmax(0, 1fr); background: var(--card); border-top: 1px solid var(--line); }
.moment:first-child { border-top: 0; }
.moment-when { padding: 22px 24px; border-inline-end: 1px solid var(--line); display: grid; gap: 2px; align-content: center; }
.moment-when b { font-family: var(--display); font-weight: 700; color: var(--text); font-size: 17px; line-height: 1.5; }
.moment-when span { font-size: 12.5px; color: var(--copper); }
.moment-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.moment-tools button { background: none; border: 0; border-inline-start: 1px solid var(--line); padding: 22px 24px; text-align: start; color: var(--soft); cursor: pointer; display: grid; gap: 2px; transition: background .15s; }
.moment-tools button:first-child { border-inline-start: 0; }
.moment-tools button:hover { background: var(--card-2); }
.moment-tools b { color: var(--text); font-size: 16px; }
.moment-tools b::after { content: ' ←'; color: var(--copper); }
.moment-tools span { font-size: 14px; color: var(--mute); }
.plan { list-style: none; counter-reset: p; padding: 0; margin: 0; display: grid; }
.plan li { counter-increment: p; position: relative; margin: 0; padding: 0 44px 18px 0; display: grid; gap: 6px; color: var(--mute); }
.plan li::before { content: counter(p); position: absolute; inset-inline-start: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font: 500 12px var(--mono); background: var(--bg); z-index: 1; }
.plan li::after { content: ''; position: absolute; inset-inline-start: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
.plan li:last-child::after { display: none; }
.plan li b { font-weight: 500; line-height: 28px; }
.plan li.done { color: var(--soft); }
.plan li.done::before { content: '✓'; background: var(--copper); border-color: var(--copper); color: #161616; }
.plan li.done::after { background: var(--copper); }
.plan li.now b { color: var(--text); font-weight: 600; }
.plan li.now::before { border-color: var(--copper); color: var(--copper); box-shadow: 0 0 0 5px var(--copper-soft); }
.plan li span { font-size: 14.5px; color: var(--soft); }
.plan li .btn { justify-self: start; margin-top: 4px; }
.nextstep h3 { font-family: var(--display); font-weight: 700; font-size: 18px; }

/* ---------- المعرض ---------- */
.xbar { display: grid; grid-template-columns: auto 1fr auto auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); margin-bottom: 28px; overflow: hidden; }
.xbar > div { padding: 14px 22px; border-inline-start: 1px solid var(--line); }
.xbar > div:first-child { border: 0; }
.xbar span { display: block; font-size: 12px; color: var(--mute); }
.xbar b { font-family: var(--display); font-size: 18px; color: var(--text); }
.xtime i { display: block; height: 4px; background: var(--bg); border-radius: 9px; margin-top: 6px; overflow: hidden; }
.xtime u { display: block; height: 100%; background: var(--copper); border-radius: 9px; transition: width .4s var(--ease); }
.xqueue { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.xclient { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: grid; gap: 6px; align-content: start; }
.xclient.hot { border-color: var(--bad); }
.xclient.hot .fine { color: var(--bad); }
.xclient h3 { font-size: 19px; font-weight: 700; margin: 0; }
.xclient ul { font-size: 14.5px; color: var(--soft); margin: 2px 0; }
.xrow { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.xrow:last-child { border: 0; padding-bottom: 0; }
.xrow small { display: block; color: var(--mute); }
.xrow b { color: var(--text); }
.xrow > span { font-family: var(--mono); color: var(--text); }
.xrow .btn { margin: 0; }
.xlog { list-style: none; padding: 0; margin: 0; font-size: 14.5px; color: var(--mute); }
.xlog li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.xrules { padding-inline-start: 20px; margin: 8px 0 4px; }
.xrules li { margin: 8px 0; }
.xrules b { color: var(--text); }
.xfact { font-size: 14.5px; }
.trust { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.trust i { height: 8px; border-radius: 3px; background: var(--bg); border: 1px solid var(--line); }
.trust i.on { background: var(--copper); border-color: var(--copper); }
.opt em { float: inline-end; font: 500 12px var(--mono); color: var(--mute); font-style: normal; margin-inline-start: 12px; margin-top: 4px; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.side h4 { margin-top: 16px; }

/* ---------- الصفحة الرئيسية ---------- */
.is-public #app { padding-top: 0; }
.landing { display: grid; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; min-height: calc(100vh - 68px); padding: 56px 0 72px; position: relative; }
body.is-public { background: radial-gradient(760px 520px at 22% 300px, rgba(199, 154, 123, .15), transparent 70%) no-repeat; }
.hero h1 { font-size: clamp(36px, 4.5vw, 62px); white-space: nowrap; font-weight: 800; line-height: 1.2; margin: 8px 0 22px; }
.hero-copy > * { animation: in .6s var(--ease) backwards; }
.hero-copy > :nth-child(2) { animation-delay: .08s; } .hero-copy > :nth-child(3) { animation-delay: .16s; } .hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero .lead { max-width: 500px; color: var(--soft); }
.hero .row { margin-top: 14px; }
.demo { background: var(--card); border: 1px solid var(--line-2); border-radius: 24px; padding: 28px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 248, 238, .02) inset; animation: in .7s var(--ease) .2s backwards; }
.demo-top { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mute); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 0 rgba(199, 154, 123, .6); animation: pulse 2s infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 10px rgba(199, 154, 123, 0); } }
.demo-intro { color: var(--mute); margin: 16px 0 12px; font-size: 15px; }
.demo .bubble { font-size: 22px; }
.demo .ask-you { margin-top: 22px; }
.demo-end { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); animation: in .4s var(--ease) .15s backwards; }
.demo-end p { font-size: 14px; margin: 0; max-width: 320px; }
.demo-end .btn { margin: 0; }

.statement { padding: 96px 0; border-top: 1px solid var(--line); }
.statement p { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.6vw, 48px); line-height: 1.5; color: var(--mute); margin: 0; max-width: 900px; }
.statement em { font-style: normal; color: var(--text); }
.band { padding: 80px 0; border-top: 1px solid var(--line); }
.band-head { margin-bottom: 36px; max-width: 640px; }
.band-head h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; }
.band-head .lead { color: var(--mute); margin-top: 8px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

.journey { display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.journey button { display: grid; gap: 14px; justify-items: center; background: none; border: 0; color: var(--mute); font-size: 15px; padding: 0 4px; cursor: pointer; position: relative; transition: color .15s; }
.journey button::before { content: ''; position: absolute; top: 9px; inset-inline-start: -50%; width: 100%; height: 2px; background: var(--line-2); }
.journey button:first-child::before { display: none; }
.journey i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--bg); z-index: 1; transition: .2s var(--ease); }
.journey button:hover { color: var(--text); }
.journey button:hover i { border-color: var(--copper); }
.journey .past i, .journey .on i { border-color: var(--copper); }
.journey .past i { background: var(--copper); transform: scale(.6); }
.journey .on i { background: var(--copper); box-shadow: 0 0 0 7px var(--copper-soft); }
.journey .past::before, .journey .on::before { background: var(--copper); }
.journey .on { color: var(--text); font-weight: 600; }
.jr-card { margin-top: 36px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 32px; display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: center; animation: in .3s var(--ease); }
.jr-card .tag { grid-row: span 2; align-self: center; font-size: 13px; padding: 6px 16px; }
.jr-card h3 { font-size: 22px; font-weight: 700; margin: 0; }
.jr-card p { margin: 0; color: var(--soft); }

.types { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: stretch; }
.ty-list { display: grid; gap: 8px; align-content: start; }
.ty-list button { display: grid; grid-template-columns: 12px 1fr auto; gap: 14px; align-items: center; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px 20px; color: var(--mute); cursor: pointer; text-align: start; transition: .15s; }
.ty-list i { width: 12px; height: 12px; border-radius: 50%; background: var(--tc); }
.ty-list span { font-family: var(--display); font-weight: 700; font-size: 20px; }
.ty-list small { font-size: 12px; color: var(--faint); direction: ltr; }
.ty-list button:hover { color: var(--text); border-color: var(--line-2); }
.ty-list button.on { color: var(--text); background: var(--card); border-color: var(--tc); }
.ty-pane { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--tc); border-radius: var(--r); padding: 32px; animation: in .3s var(--ease); }
.ty-pane h3 { font-size: 26px; font-weight: 700; margin-bottom: 24px; }
.ty-pane .eyebrow { color: var(--tc); }
.ty-cols ul { font-size: 15px; padding-inline-start: 18px; }

.daylist { list-style: none; counter-reset: d; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.daylist li { counter-increment: d; margin: 0; padding: 28px; background: var(--card); border-inline-start: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.daylist li:first-child { border: 0; }
.daylist li::before { content: counter(d); font: 500 13px var(--mono); color: var(--copper); }
.daylist b { font-family: var(--display); font-size: 19px; color: var(--text); }
.daylist span { font-size: 15px; color: var(--soft); }
.start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.start .band-head { margin: 0; }

/* ---------- تابلت وموبايل ---------- */
@media (max-width: 1100px) { .layout, .layout.flip { grid-template-columns: minmax(0, 1fr); } .side { position: static; } .side.first { order: -1; } }
@media (max-width: 900px) {
  .is-app #top { position: sticky; top: 0; inset: auto; width: auto; flex-direction: row; align-items: center; justify-content: space-between; height: 60px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line); background: rgba(22, 22, 22, .9); backdrop-filter: blur(12px); }
  .is-app .brand { padding: 0; }
  .top-nav, .who-n { display: none; }
  .who { padding: 5px; border-radius: 999px; }
  .is-app #app, .is-app #foot { margin-inline: 0; }
  .is-app #nav { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 20; background: rgba(22, 22, 22, .96); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); backdrop-filter: blur(10px); }
  #nav button { flex: 1; display: grid; gap: 2px; justify-items: center; background: none; border: 0; color: var(--mute); font-size: 11.5px; padding: 10px 2px 9px; cursor: pointer; }
  #nav button.on { color: var(--copper); font-weight: 600; }
  #app, .is-app #app { padding: 24px 16px 110px; }
  .is-public #top, .is-public #foot { padding-inline: 16px; }
  #foot { padding: 22px 16px 96px; }
  .is-public #foot { padding-bottom: 22px; }
  .layout.even, .split, .hero, .start, .types, .cols2, .cols3, .opts.two { grid-template-columns: minmax(0, 1fr); }
  .cols4, .daylist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daylist li:nth-child(3) { border-inline-start: 0; } .daylist li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hero { gap: 32px; min-height: 0; padding: 36px 0 56px; }
  .statement { padding: 56px 0; } .band { padding: 52px 0; }
  .split-list { position: static; }
  .head, .dash-head { align-items: start; flex-direction: column; gap: 16px; }
  .figures { gap: 18px; width: 100%; } .figures > div { padding-inline-start: 18px; }
  .stats { width: 100%; } .stats div { flex: 1; padding: 10px 6px; }
  .pipe { grid-template-columns: repeat(3, 1fr); }
  .intro { padding: 20px; } .intro ol { grid-template-columns: minmax(0, 1fr); } .intro li { border-inline-start: 0; padding: 12px 0 0; border-top: 1px solid var(--line); } .intro li:first-child { border-top: 0; }
  .moment { grid-template-columns: minmax(0, 1fr); } .moment-when { border-inline-end: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; } .moment-tools button { padding: 16px 18px; border-inline-start: 0; border-top: 1px solid var(--line); } .moment-tools button:first-child { border-top: 0; }
  #nav button span { font-size: 10.5px; }
  .xbar { grid-template-columns: 1fr 1fr; } .xbar > div:nth-child(3) { border-inline-start: 0; } .xbar > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .xqueue { grid-template-columns: minmax(0, 1fr); }
  .pipe button:nth-child(4) { border-inline-start: 0; } .pipe button:nth-child(n+4) { border-top: 1px solid var(--line); }
  .board { grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .col { min-height: 0; } .col.empty { display: none; }
  .split.has-pane .split-list { display: none; }
  .only-m { display: inline-block; }
  .step { grid-template-columns: 36px 1fr; gap: 12px; }
  .step-n { width: 36px; height: 36px; } .step::before { inset-inline-start: 17px; top: 36px; }
  .step-b { padding: 18px; } .step.is-done .step-b { padding: 8px 18px; }
  .bubble, .demo .bubble { font-size: 18px; }
  .demo { padding: 20px; border-radius: 20px; }
  .scale { grid-template-columns: 1fr; gap: 4px; }
  .journey { grid-template-columns: 1fr; gap: 0; }
  .journey button { grid-template-columns: 20px 1fr; justify-items: start; align-items: center; padding: 9px 0; gap: 14px; }
  .journey button::before { top: -50%; inset-inline-start: 9px; width: 2px; height: 100%; }
  .jr-card { grid-template-columns: 1fr; padding: 22px; margin-top: 20px; } .jr-card .tag { grid-row: auto; justify-self: start; }
  .ty-list { grid-template-columns: repeat(2, 1fr); } .ty-list button { grid-template-columns: 10px 1fr; padding: 12px 14px; } .ty-list small { display: none; } .ty-list span { font-size: 16px; }
  .ty-pane { padding: 22px; }
}
@media (max-width: 520px) { .cols4, .daylist { grid-template-columns: minmax(0, 1fr); } .daylist li { border-inline-start: 0; border-top: 1px solid var(--line); } .daylist li:first-child { border-top: 0; } .figures .ring { width: 60px; height: 60px; } }
#toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--text); color: #161616; padding: 10px 20px; border-radius: 99px; font-size: 14px; opacity: 0; pointer-events: none; transition: .25s var(--ease); z-index: 30; }
#toast.on { opacity: 1; transform: translateX(-50%); }
@media (max-width: 900px) { #toast { bottom: 84px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } }

/* مراجعة: مكتبة المواقف، وما بعد برنامج اليوم، ودخول صاحب الحساب */
.top-end { display: flex; align-items: center; gap: 16px; }
.card.more { margin-top: 20px; border-style: dashed; }
.lib { margin-bottom: 8px; }

/* مراجعة المحتوى: البلوكات، ومترجم الضغط، والتأطير */
.block { margin-top: 16px; }
.block h2 { font-size: 20px; margin: 2px 0; }
.commit { margin-top: 16px; padding: 12px 14px; border-inline-start: 3px solid var(--copper); background: var(--copper-soft); border-radius: 0 10px 10px 0; font-size: 14px; display: grid; gap: 4px; }
.commit b { color: var(--copper); font-weight: 600; }
.commit span { color: var(--text); }
.opt.check small { display: block; color: var(--mute); font-size: 12px; margin-top: 4px; }
.say.sm { font-size: 14px; padding: 10px 12px; max-width: 46%; }
.xrow > .say.sm { flex: 0 0 auto; font-family: inherit; direction: rtl; text-align: start; }
.dict { width: 100%; border-collapse: collapse; font-size: 13px; }
.dict th { text-align: start; color: var(--mute); font-weight: 500; padding: 6px 0; border-bottom: 1px solid var(--line); }
.dict td { padding: 8px 0; border-bottom: 1px dashed var(--line); vertical-align: top; color: var(--text); }
.dict td:first-child { color: var(--bad); white-space: nowrap; padding-inline-end: 12px; }
.bad-line { color: var(--bad); }
details summary.link { cursor: pointer; margin: 8px 0; }
@media (max-width: 720px) { .say.sm { max-width: 100%; } .xrow { flex-wrap: wrap; } }

/* تحسينات الفلو: سطر العملاء، وقايمة العملاء، ونهاية اليوم، وزرار الشرح */
.dayend { margin-bottom: 8px; }
.dayend .ring { flex: none; }
.dayend h2 { font-size: 22px; }
.filt { margin-bottom: 16px; }
.clist { display: grid; gap: 8px; }
.crow { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; background: var(--card); border: 1px solid var(--line); border-inline-start: 3px solid transparent; border-radius: var(--r-sm); padding: 14px 18px; color: var(--text); text-align: start; cursor: pointer; transition: border-color .15s, transform .15s var(--ease); }
.crow:hover { border-color: var(--copper-line); transform: translateY(-1px); }
.crow.urgent { border-inline-start-color: var(--copper); }
.crow.dim { opacity: .7; }
.crow-main { display: grid; gap: 6px; }
.crow-main b { font-size: 16px; font-weight: 600; }
.crow-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.crow-side { display: grid; gap: 4px; text-align: end; font-size: 13px; }
.crow-side small { color: var(--mute); }
#app { position: relative; }
.help { position: fixed; bottom: 24px; inset-inline-end: 24px; width: 36px; height: 36px; box-shadow: 0 6px 20px rgba(0,0,0,.35); border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--mute); font-family: var(--display); font-weight: 700; cursor: pointer; z-index: 2; transition: color .15s, border-color .15s; }
.help:hover { color: var(--copper); border-color: var(--copper-line); }
.me .bar { margin: 10px 0 14px; }
@media (max-width: 720px) {
  .crow { flex-direction: column; align-items: start; }
  .crow-side { text-align: start; }
  .help { bottom: 84px; inset-inline-end: 14px; }
  .is-app #nav button { font-size: 11px; }
}

.weekgoal .meter { margin: 10px 0; grid-template-columns: minmax(0, 1fr) 110px 40px; }
.weekgoal .meter em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--mute); text-align: end; }
.weekgoal .meter span { font-size: 13px; }

/* ============================================================
   الاتجاه: "صلاح في ودنك"
   المنصة محادثة: عميل قدامك، وانت بترد، وصلاح بيعلّق.
   ============================================================ */
body::after { content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
.face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #2b2622; border: 1px solid var(--copper-line); flex: none; }
.brand { flex-direction: row; align-items: center; gap: 10px; }
.brand-t { display: flex; flex-direction: column; line-height: 1.25; }
.brand .brand-t span { font-size: 12px; color: var(--copper); }

/* المحادثة */
.chat { display: grid; gap: 14px; align-content: start; }
.msg { display: flex; gap: 10px; align-items: end; animation: in .35s var(--ease) backwards; }
.msg .av { width: 36px; height: 36px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--line-2); display: grid; place-items: center; font-style: normal; font-family: var(--display); font-weight: 700; color: var(--mute); flex: none; }
.msg.me { justify-content: flex-end; }
.msg.me .bubble { background: var(--copper-soft); border-color: var(--copper-line); border-radius: 20px 20px 4px 20px; font-size: 17px; max-width: 520px; }
.msg.me.good .bubble { border-color: var(--good); background: rgba(169, 199, 154, .08); }
.msg.me.mid .bubble { border-color: var(--mid); background: rgba(224, 198, 138, .08); }
.msg.me.bad .bubble { border-color: var(--bad); background: rgba(224, 150, 138, .08); }
.coach { display: flex; gap: 12px; align-items: start; animation: in .4s var(--ease) .12s backwards; }
.coach-b { background: linear-gradient(180deg, rgba(199, 154, 123, .1), rgba(199, 154, 123, .03)); border: 1px solid var(--copper-line); border-radius: 4px 18px 18px 18px; padding: 14px 18px; color: var(--text); font-size: 15.5px; min-width: 0; flex: 1; max-width: 640px; }
.coach-b p { margin: 0 0 6px; } .coach-b p:last-of-type { margin: 0; }
.coach-b .best { color: var(--good); font-size: 14.5px; }
.coach-b .q { font-family: var(--display); font-weight: 700; font-size: 19px; }
.coach-b .fine { display: block; margin-top: 8px; }
.coach-b h3 { color: var(--copper); font-size: 13px; font-family: inherit; margin: 14px 0 4px; } .coach-b h3:first-child { margin-top: 0; }
.reply { margin-top: 10px; padding-top: 18px; border-top: 1px dashed var(--line-2); animation: in .35s var(--ease) .2s backwards; }
.reply .opts { margin-top: 8px; }
.story { margin: 16px 0; padding: 14px 18px; border-inline-start: 3px solid var(--copper); background: var(--bg); border-radius: 0 12px 12px 0; }
.story span { font-size: 12px; color: var(--copper); font-weight: 600; }
.story p { margin: 4px 0 0; color: var(--text); font-size: 15.5px; line-height: 1.85; }
.step-b .coach { margin-top: 14px; } .step-b .coach .face { width: 32px; height: 32px; }

/* ---------- الصفحة الرئيسية: مشاهد ---------- */
body.is-public { background: none; }
.hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; min-height: calc(100vh - 68px); padding: 40px 0 0; align-items: center; }
.hero h1 { font-size: clamp(44px, 5.7vw, 92px); line-height: 1.14; letter-spacing: 0; white-space: normal; margin: 10px 0 26px; }
.hero h1 span, .hero h1 em { display: block; white-space: nowrap; }
.hero h1 em { color: var(--copper); }
.hero .lead { font-size: 18px; max-width: 520px; }
a.btn, .btn.big { color: #161616; }
.btn.big { padding: 17px 32px; font-size: 18px; border-radius: 14px; }
a.btn.ghost { color: var(--copper); }
.hero-stage { position: relative; align-self: stretch; min-height: 640px; display: flex; align-items: flex-end; padding-bottom: 48px; }
.halo { position: absolute; inset-inline-end: -18%; bottom: 2%; width: 92%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(199, 154, 123, .55), rgba(199, 154, 123, .16) 55%, transparent 72%); filter: blur(8px); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.06); opacity: .8; } }
.salah { position: absolute; bottom: 0; inset-inline-end: -16%; height: 106%; width: auto; max-width: none; filter: drop-shadow(0 0 28px rgba(199, 154, 123, .22)); -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); animation: rise .9s var(--ease) backwards; pointer-events: none; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }
.hero-stage .demo { position: relative; z-index: 2; width: min(390px, 100%); padding: 22px; background: rgba(30, 30, 30, .88); backdrop-filter: blur(14px); border-radius: 22px; }
.demo .bubble { font-size: 19px; padding: 14px 18px; }
.demo .msg.me .bubble { font-size: 15.5px; }
.demo .opt { padding: 12px 14px; font-size: 15px; }
.demo .ask-you { margin-top: 16px; }
.demo .coach { margin-top: 12px; } .demo .msg { margin-top: 12px; }
.demo-end { border: 0; padding-top: 4px; }

.marquee { direction: ltr; overflow: hidden; border-block: 1px solid var(--line); margin-inline: calc((100vw - 100%) / -2); padding: 18px 0; }
.marquee > div { display: flex; gap: 0; width: max-content; animation: marq 46s linear infinite; }
.marquee span { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--mute); white-space: nowrap; direction: rtl; padding: 0 26px; position: relative; }
.marquee span::after { content: ''; position: absolute; inset-inline-start: -4px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); transform: translateY(-50%); }
@keyframes marq { to { transform: translateX(-50%); } }

.seven { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding: 110px 0; }
.seven-clock { position: relative; width: min(440px, 100%); aspect-ratio: 1; display: grid; place-items: center; justify-self: center; }
.seven-clock svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.seven-clock circle { fill: none; stroke-width: 2.5; }
.sc-bg { stroke: var(--line); }
.sc-fg { stroke: var(--copper); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.seven-clock.run .sc-fg { animation: drain 7s linear forwards; }
.seven-clock.out .sc-fg { stroke-dashoffset: 100; stroke: var(--bad); }
.seven-clock.out b { color: var(--bad); }
.seven-clock.run b { animation: tick 1s steps(1) infinite; }
@keyframes tick { 50% { opacity: .75; } }
@keyframes drain { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100; } }
.seven-clock b { font: 800 clamp(170px, 22vw, 300px)/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.seven h2 { font-size: clamp(34px, 4.6vw, 64px); font-weight: 800; line-height: 1.25; }
.seven h2 em { font-style: normal; color: var(--mute); font-size: .62em; display: block; margin-top: 8px; }
.seven .lead { color: var(--soft); max-width: 520px; margin: 18px 0 26px; }
.seven-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); counter-reset: s; }
.seven-list li { counter-increment: s; margin: 0; padding: 16px 16px 0 0; display: grid; gap: 2px; }
.seven-list li::before { content: counter(s); font: 500 12px var(--mono); color: var(--copper); }
.seven-list b { color: var(--text); font-family: var(--display); }
.seven-list span { font-size: 14px; color: var(--mute); }

.band-head h2 { font-size: clamp(30px, 4.2vw, 56px); line-height: 1.25; }
.trows { border-top: 1px solid var(--line); }
.trow { border-bottom: 1px solid var(--line); transition: background .3s; }
.trow.on { background: linear-gradient(270deg, color-mix(in srgb, var(--tc) 13%, transparent), transparent 70%); }
.trow-h { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; background: none; border: 0; padding: 26px 8px; cursor: pointer; text-align: start; color: inherit; }
.trow-q { font: 800 clamp(24px, 4.4vw, 58px)/1.3 var(--display); color: var(--faint); transition: color .25s, transform .35s var(--ease); }
.trow-h:hover .trow-q { color: var(--soft); transform: translateX(-10px); }
.trow.on .trow-q { color: var(--tc); }
.trow-n { display: grid; justify-items: end; flex: none; }
.trow-n b { font-family: var(--display); font-size: 20px; color: var(--text); }
.trow-n small { font: 500 12px var(--mono); color: var(--tc); }
.trow-b { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; padding: 0 8px 30px; animation: in .35s var(--ease); }
.trow-b h3 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.trow-b .eyebrow { color: var(--tc); }
.trow-b ul { font-size: 15px; padding-inline-start: 18px; }

.morph { font: 700 clamp(24px, 3.5vw, 46px)/1.75 var(--display); color: var(--text); margin: 0 0 20px; max-width: 1000px; }
.sw s { color: var(--bad); text-decoration-thickness: 3px; text-decoration-color: rgba(224, 150, 138, .0); transition: text-decoration-color .4s; }
.words.in .sw s { text-decoration-color: var(--bad); }
.sw b { display: none; font-weight: 700; color: var(--good); }
.sw.done s { display: none; }
.sw.done b { display: inline; animation: swap .5s var(--ease); }
@keyframes swap { from { opacity: 0; filter: blur(6px); } }

.start { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.start-side { display: flex; align-items: end; gap: 8px; }
.salah.sm { position: static; height: 300px; animation: none; margin-inline-start: -30px; flex: none; }

/* ---------- كارت النمط ---------- */
.idwrap { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 64px; align-items: center; max-width: 1000px; margin: 0 auto; }
.idcard { aspect-ratio: 4 / 5; border: 2px solid var(--tc); border-radius: 26px; padding: 26px 28px; display: grid; grid-template-rows: auto 1fr auto; background: radial-gradient(120% 80% at 85% 20%, color-mix(in srgb, var(--tc) 32%, transparent), transparent 70%), #151515; box-shadow: 0 50px 100px -40px color-mix(in srgb, var(--tc) 45%, transparent), 0 30px 60px -30px #000; transform: rotate(-2.5deg); transition: transform .5s var(--ease); animation: deal .9s var(--ease) backwards; }
.idcard:hover { transform: rotate(0) scale(1.02); }
@keyframes deal { from { opacity: 0; transform: rotate(-14deg) translateY(60px) scale(.9); } }
.id-top, .id-foot { display: flex; justify-content: space-between; font-size: 13px; color: var(--mute); }
.id-top span:first-child { font-family: var(--display); font-weight: 800; color: var(--text); direction: ltr; }
.id-top span:last-child { color: var(--tc); }
.id-mid { align-self: center; }
.id-mid small { font: 500 14px var(--mono); color: var(--mute); }
.id-mid b { display: block; font: 800 clamp(50px, 5.4vw, 74px)/1.2 var(--display); color: var(--tc); white-space: nowrap; }
.idcard > * { min-width: 0; }
.id-top, .id-foot { gap: 12px; white-space: nowrap; }
.msg.note { color: var(--mute); font-size: 15px; padding-inline-start: 46px; font-style: normal; }
.id-mid p { font-size: 18px; color: var(--text); margin: 4px 0 0; }
.id-bot > p { font-size: 14.5px; color: var(--soft); margin: 0 0 16px; }
.id-foot span:first-child { font-family: var(--display); font-weight: 700; color: var(--text); }
.idside h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 800; margin-bottom: 8px; }
.idside .coach { margin: 20px 0; }
.idside .meter i { background: var(--tc); }
.idside .btn { margin-top: 18px; }

@media (max-width: 900px) {
  .hero, .start { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 28px; gap: 0; min-height: 0; }
  .hero h1 span, .hero h1 em { white-space: normal; }
  .hero h1 { font-size: clamp(44px, 13vw, 72px); }
  .hero-stage { min-height: 0; display: block; padding: 0 0 40px; margin-top: 8px; }
  .salah { position: relative; display: block; height: 300px; inset: auto; margin: 0 auto -84px 0; }
  .halo { width: 300px; inset-inline-end: -40px; bottom: auto; top: 10px; }
  .hero-stage .demo { width: 100%; }
  .seven { grid-template-columns: minmax(0, 1fr); padding: 64px 0; gap: 28px; }
  .seven-clock { width: 240px; } .seven-clock b { font-size: 150px; }
  .seven-list { grid-template-columns: minmax(0, 1fr); }
  .trow-h { flex-direction: column; align-items: start; gap: 8px; padding: 20px 4px; }
  .trow-n { justify-items: start; grid-auto-flow: column; gap: 10px; align-items: baseline; }
  .trow-b { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 4px 24px; }
  .marquee span { font-size: 17px; padding: 0 18px; }
  .salah.sm { display: none; }
  .idwrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .idcard { max-width: 340px; margin: 0 auto; }
  .coach-b { font-size: 15px; padding: 12px 14px; }
  .msg.me .bubble { font-size: 15.5px; }
}

/* بوابة الدخول ولوحة الأدمن */
.gate .btn { margin-top: 8px; }
.gate .panel .row { margin-top: 4px; }
.adstats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow: hidden; margin-bottom: 28px; }
.adstats div { padding: 18px 16px; border-inline-start: 1px solid var(--line); }
.adstats div:first-child { border: 0; }
.adstats b { display: block; font-family: var(--display); font-size: 28px; font-weight: 700; color: var(--text); line-height: 1.2; font-variant-numeric: tabular-nums; }
.adstats span { font-size: 12.5px; color: var(--mute); }
.adq { max-width: 280px; margin: 0; }
.tablewrap { overflow-x: auto; margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.adtable { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 980px; }
.adtable th { text-align: start; font-weight: 500; font-size: 12.5px; color: var(--mute); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adtable td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.adtable tr:last-child td { border-bottom: 0; }
.adtable td:first-child { white-space: normal; min-width: 200px; }
.adtable td b { display: block; color: var(--text); font-weight: 600; }
.adtable td small { display: block; color: var(--mute); font-size: 12px; text-align: start; }
.adact .link { display: inline; margin-inline-end: 14px; }
.tag.st-active { color: var(--good); border-color: rgba(169, 199, 154, .4); }
.tag.st-pending { color: var(--mid); border-color: rgba(224, 198, 138, .4); }
.tag.st-suspended { color: var(--bad); border-color: rgba(224, 150, 138, .4); }
@media (max-width: 900px) { .adstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adstats div { border-inline-start: 0; border-top: 1px solid var(--line); } .adstats div:nth-child(-n+2) { border-top: 0; } .adstats div:nth-child(even) { border-inline-start: 1px solid var(--line); } .adq { max-width: 100%; } }

/* ---------- خريطة المنصة: 4 أماكن ---------- */
.places { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0 14px; }
.place { display: grid; align-content: start; gap: 4px; text-align: start; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px; color: var(--soft); font: inherit; font-size: 14px; line-height: 1.65; cursor: pointer; transition: border-color .15s; }
.place:hover { border-color: var(--copper-line); }
.place.on { border-color: var(--copper); }
.place svg { color: var(--copper); margin-bottom: 4px; }
.place b { font-family: var(--display); font-weight: 700; color: var(--text); font-size: 16px; }
.place em { font-style: normal; font-size: 12.5px; color: var(--copper); }
.places-intro .fine { margin: 0; }
/* خطوات بعد عمل الحساب */
.next-steps { list-style: none; counter-reset: n; padding: 0; margin: 20px 0 8px; display: grid; gap: 10px; }
.next-steps li { counter-increment: n; position: relative; padding-inline-start: 34px; font-size: 14.5px; color: var(--soft); line-height: 1.7; margin: 0; }
.next-steps li::before { content: counter(n); position: absolute; inset-inline-start: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--copper-line); color: var(--copper); font: 500 12px/20px var(--mono); text-align: center; }
/* لوحة الأدمن: الشرح وصندوق اللي مستنيين */
.admin-how ol { margin-bottom: 0; }
.admin-how li b { display: block; }
.waitbox { margin-bottom: 28px; }
.waitbox .xrow .row { margin: 0; flex: none; }
@media (max-width: 900px) { .places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .places { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 16px 0 12px; }
  .place { grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; row-gap: 0; padding: 12px 14px; }
  .place svg { grid-row: span 3; margin: 2px 0 0; }
  .place > :not(svg) { grid-column: 2; }
}

/* ---------- بيع مع صلاح ---------- */
.sws-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; align-items: stretch; border: 1px solid var(--copper-line); border-radius: var(--r); padding: 28px 32px; background: radial-gradient(60% 120% at 0% 50%, rgba(199, 154, 123, .22), transparent 70%), var(--card); overflow: hidden; margin-bottom: 8px; min-height: 230px; }
.sws-hero .salah { position: absolute; inset-inline-end: -40px; bottom: -40px; height: 300px; width: auto; max-width: none; opacity: .9; pointer-events: none; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.sws-rank h2 { font-size: 32px; font-weight: 800; }
.sws-rank .bar { margin: 12px 0 8px; max-width: 320px; }
.sws-how { padding-inline-end: 150px; }
.sws-how ul { font-size: 15px; color: var(--soft); }
.sws-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sws-card { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--tc); border-radius: var(--r); padding: 20px 22px; display: grid; gap: 10px; align-content: start; }
.sws-card h3 { font-size: 19px; font-weight: 700; }
.sws-card p { font-size: 14.5px; color: var(--soft); margin: 0; }
.sws-card .btn { margin: 0; }
.sws-file h2 { font-size: 24px; }
.sws-trust { height: 10px; }
.sws-trust i { background: linear-gradient(90deg, var(--copper), var(--copper-hi)); }
.blocks { list-style: none; padding: 0; margin: 6px 0 14px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.blocks li { margin: 0; font-size: 11.5px; color: var(--faint); text-align: center; padding-top: 8px; border-top: 3px solid var(--line); }
.blocks li.past { border-top-color: var(--copper-line); color: var(--mute); }
.blocks li.on { border-top-color: var(--copper); color: var(--text); font-weight: 600; }
.sws-timer { position: relative; width: 56px; height: 56px; flex: none; }
.sws-timer svg { position: absolute; inset: 0; }
.sws-timer .ring-fg { transition: stroke-dashoffset .25s linear, stroke .3s; }
.sws-timer .ring-fg.hot { stroke: var(--bad); }
.sws-timer b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 18px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.sws-text textarea { margin: 0 0 10px; }
.sws-words { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sws-slide { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; display: grid; gap: 12px; }
.sws-slide .row span { font-size: 13.5px; color: var(--mute); }
.sws-slide .row b { font: 700 24px var(--display); color: var(--copper); }
.sws-slide input[type=range] { width: 100%; accent-color: var(--copper); direction: ltr; }
.sws-slide .btn { justify-self: start; margin: 0; }
.sws-range { position: relative; height: 10px; overflow: visible; }
.sws-range i { position: relative; z-index: 1; }
.sws-range i.ok { background: var(--good); } .sws-range i.low, .sws-range i.high { background: var(--bad); }
.sws-range u { position: absolute; top: -4px; bottom: -4px; background: rgba(169, 199, 154, .18); border: 1px dashed var(--good); border-radius: 6px; }
.sws-order { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; counter-reset: o; }
.sws-order li { counter-increment: o; margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 16px; color: var(--text); }
.sws-order li::before { content: counter(o); font: 500 13px var(--mono); color: var(--copper); margin-inline-end: 6px; }
.sws-order li span:first-of-type { flex: 1; }
.sws-order .mv { display: flex; gap: 4px; }
.sws-order .mv .link { padding: 2px 8px; font-size: 16px; border: 1px solid var(--line); border-radius: 8px; }
.sws-order.done li.good { border-color: var(--good); } .sws-order.done li.bad { border-color: var(--bad); }
@media (max-width: 900px) { .sws-hero { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; } .sws-hero .salah { height: 190px; inset-inline-end: -30px; bottom: auto; top: -10px; opacity: .35; } .sws-how { padding-inline-end: 0; } .sws-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .sws-file { padding: 16px 18px; }
  .sws-file h2 { font-size: 20px; }
  .sws-file .sws-who, .sws-file .sws-pmf, .sws-file h4, .sws-file .fine, .sws-file .link { display: none; }
  .sws-file .sws-type { margin: 4px 0 10px; }
  .sws-file .blocks { margin: 10px 0 0; }
}
/* كارت بيع مع صلاح فوق الأدوات */
.sws-banner { position: relative; display: flex; align-items: center; width: 100%; min-height: 190px; margin: 0 0 8px; padding: 26px 32px; padding-inline-end: 240px; background: radial-gradient(70% 140% at 100% 50%, rgba(199, 154, 123, .28), transparent 70%), var(--card); border: 1px solid var(--copper); border-radius: var(--r); color: var(--soft); text-align: start; cursor: pointer; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s; }
.sws-banner:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -30px rgba(199, 154, 123, .5); }
.sws-banner .salah { position: absolute; inset-inline-end: -30px; bottom: -70px; height: 290px; width: auto; max-width: none; pointer-events: none; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.sws-banner-b { position: relative; max-width: 620px; display: grid; gap: 6px; }
.sws-banner h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; }
.sws-banner p { margin: 0; font-size: 15.5px; }
.sws-banner .row { margin-top: 10px; }
.sws-banner .btn { margin: 0; }
@media (max-width: 900px) { .sws-banner { padding: 20px; padding-inline-end: 20px; min-height: 0; } .sws-banner .salah { height: 170px; inset-inline-end: -40px; bottom: auto; top: -20px; opacity: .3; } }

/* ---------- الليد والأداة العامة ---------- */
.leadbox { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 56px; padding: 36px clamp(20px, 4vw, 44px); border: 1px solid var(--copper); border-radius: var(--r); background: radial-gradient(70% 120% at 100% 0%, rgba(199, 154, 123, .22), transparent 70%), var(--card); }
.lead-copy h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; margin-bottom: 10px; }
.lead-copy p { color: var(--soft); }
.lead-form input { direction: ltr; text-align: left; }
.report { margin-top: 56px; display: grid; gap: 20px; }
.report .band-head { margin-bottom: 0; }
.report .qs li b { color: var(--copper); }
.course-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 28px 32px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); }
.course-cta h3 { font-size: 22px; font-weight: 700; margin: 2px 0 6px; }
.course-cta p { margin: 0; color: var(--soft); max-width: 560px; }
.course-cta .btn { margin: 0; }
.check-hero { padding-top: 48px; border-top: 0; }
.check-panel { margin-top: 8px; }
.check .card.accent { margin-top: 20px; }
.check .xrow > .say.sm { flex: 0 0 auto; font-family: inherit; direction: rtl; text-align: start; }
@media (max-width: 900px) { .leadbox { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 18px; } .course-cta { padding: 22px 18px; } }

/* الصفحة الرئيسية: لعبة الـ 7 ثواني، والفحص الحي، ومعاينة المنصة، وحركة الرسمة */
.seven .opts { margin-top: 18px; max-width: 620px; }
.seven .opt { font-size: 16px; }
.seven .coach { margin-top: 18px; max-width: 620px; }
.seven .btn { margin-top: 6px; }
.seven .row .btn { margin-top: 0; }
.livecheck { margin: 28px 0 14px; max-width: 760px; display: grid; gap: 8px; }
.livecheck label { font-weight: 600; color: var(--text); }
.livecheck textarea { margin: 0; font-size: 17px; }
.live-out { min-height: 28px; }
.live-out p { margin: 8px 0 0; font-size: 15px; }
.live-out .sws-words { margin-top: 6px; }
.preview .band-head { margin-bottom: 24px; }
.landing { grid-template-columns: minmax(0, 1fr); }
.landing > * { min-width: 0; }
.fan { display: flex; gap: 20px; overflow-x: auto; min-width: 0; width: 100%; scroll-snap-type: x mandatory; padding: 24px 8px 28px; margin: 0 -8px; perspective: 1400px; scrollbar-width: none; }
.fan::-webkit-scrollbar { display: none; }
.fan figure { flex: 0 0 min(520px, 82vw); margin: 0; scroll-snap-align: center; transform: rotateY(-8deg); transform-origin: center; transition: transform .45s var(--ease); }
.fan figure:nth-child(even) { transform: rotateY(8deg); }
.fan figure:hover { transform: rotateY(0) translateY(-6px); }
.fan .shot { aspect-ratio: 16 / 10; border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: 0 40px 80px -40px #000; }
.fan .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.fan figcaption { margin-top: 12px; font-size: 14.5px; color: var(--soft); }
.hero { --mx: 0; --my: 0; }
.hero .salah { transform: translate(calc(var(--mx) * -14px), calc(var(--my) * -10px)); transition: transform .25s ease-out; }
.hero-stage .demo { transform: translate(calc(var(--mx) * 8px), calc(var(--my) * 6px)); transition: transform .25s ease-out; }
.hero h1 span { animation: in .7s var(--ease) .05s backwards; }
.hero h1 em { animation: in .7s var(--ease) .22s backwards; }
@media (max-width: 900px) { .seven-clock.run b, .seven-clock b { font-size: 120px; } .seven-clock { width: 200px; } .fan figure { flex-basis: 84vw; transform: none; } .fan figure:nth-child(even) { transform: none; } }
@media (prefers-reduced-motion: reduce) { .seven-clock.run .sc-fg { animation: none; } .fan figure, .fan figure:nth-child(even) { transform: none; } }