/* صفحات المنصة العامة — الألوان كلها من theme.js (مازج الألوان) */
:root {
  --bg: #24122f; --bg2: #170b1f; --panel: #2b1937; --panel2: #352242; --text: #fff; --muted: #b6a9bf; --line-rgb: 255,255,255;
  --glow: #e8c987; --glow-soft: #f3e0b8; --g: 232,201,135; --on-glow: #16101c;
  --line: rgba(var(--line-rgb), .1); --line-2: rgba(var(--line-rgb), .18);
  --f-body: "IBM Plex Sans Arabic", Tajawal, system-ui, sans-serif; --f-display: Tajawal, "IBM Plex Sans Arabic", sans-serif;
  color-scheme: dark;
}
:root[data-light="1"] { color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-body); line-height: 1.75; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left)); }
.muted { color: var(--muted); }
.bg-glow { position: absolute; inset: 0 0 auto; height: 900px; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 50% at 50% 0%, rgba(var(--g), .16), transparent 70%), radial-gradient(30% 30% at 80% 20%, rgba(var(--g), .08), transparent 70%); }

/* الأزرار */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; transition: transform .2s, box-shadow .25s, border-color .2s, background .2s; white-space: nowrap; }
.btn-sm { padding: 8px 15px; font-size: 13.5px; }
.btn-main { background: var(--glow); color: var(--on-glow); box-shadow: 0 10px 30px -8px rgba(var(--g), .55); }
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -8px rgba(var(--g), .7); }
.btn-ghost { border-color: var(--line-2); background: rgba(var(--line-rgb), .03); }
.btn-ghost:hover { border-color: rgba(var(--g), .5); }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* الشريط العلوي */
.nav { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 18px; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-weight: 800; font-size: 20px; }
.brand img { height: 38px; width: auto; max-width: 140px; border-radius: 10px; object-fit: contain; }
.brand-mk { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--on-glow); background: linear-gradient(150deg, var(--glow-soft), var(--glow)); box-shadow: 0 0 22px rgba(var(--g), .45); }
.links { display: flex; gap: 24px; margin-inline-start: 18px; }
.links a { text-decoration: none; color: var(--muted); font-size: 14.5px; transition: color .2s; }
.links a:hover, .links a[aria-current] { color: var(--text); }
.nav-cta { margin-inline-start: auto; display: flex; gap: 8px; }
/* الجوال: القائمة تظهر كاملة تحت الشعار في سطر أفقي (بدون قائمة جانبية) */
@media (max-width: 920px) {
  .nav-in { flex-wrap: wrap; height: auto; padding-block: 10px 0; row-gap: 6px; }
  .links { order: 3; flex-basis: 100%; margin: 0; padding: 2px 0 10px; gap: 6px; flex-wrap: wrap; justify-content: center; }
  .links::-webkit-scrollbar { display: none; }
  .links a { flex-shrink: 0; padding: 6px 12px; border-radius: 99px; background: rgba(var(--line-rgb), .08); border: 1px solid rgba(var(--line-rgb), .12); color: var(--text); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
  .links a[aria-current] { background: var(--glow); border-color: var(--glow); color: var(--on-glow); }
}
@media (max-width: 520px) { .nav-cta .btn-sm { padding-inline: 12px; font-size: 13px; } .brand { font-size: 17px; } }

/* البطل */
section { position: relative; z-index: 1; }
.hero { padding: 70px 0 30px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 999px; font-size: 13px; color: var(--glow); background: rgba(var(--g), .08); border: 1px solid rgba(var(--g), .25); }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.hero h1 { margin: 18px auto 14px; max-width: 900px; font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 5.4vw, 4rem); line-height: 1.22; text-wrap: balance;
  background: linear-gradient(180deg, var(--text) 40%, color-mix(in srgb, var(--text) 55%, var(--glow))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero h1 em { font-style: normal; background: linear-gradient(180deg, var(--glow-soft), var(--glow)); -webkit-background-clip: text; background-clip: text; }
.hero .lede { margin: 0 auto; max-width: 640px; color: var(--muted); font-size: clamp(15px, 1.7vw, 18px); text-wrap: balance; }
.ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.url-demo { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 10px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); direction: ltr; font-family: ui-monospace, Menlo, monospace; font-size: 14px; }
.url-demo .lock { color: #4ade80; }
.url-demo b { color: var(--glow); font-weight: 600; }
.url-demo .caret { width: 2px; height: 18px; background: var(--glow); animation: pulse 1s steps(1) infinite; }

/* صورة البانر أو المجسّم */
.stage { margin: 50px auto 0; max-width: 1080px; perspective: 2000px; }
.stage-in { border-radius: 22px; padding: 1px; background: linear-gradient(180deg, rgba(var(--g), .45), rgba(var(--line-rgb), .05) 35%); box-shadow: 0 50px 120px -30px rgba(0,0,0,.7), 0 0 80px -30px rgba(var(--g), .45);
  transform: rotateX(10deg) scale(.97); transition: transform 1.4s cubic-bezier(.2,.8,.2,1); }
.stage.seen .stage-in { transform: none; }
.stage-in > img { border-radius: 21px; width: 100%; }
.mock { border-radius: 21px; overflow: hidden; background: var(--bg2); display: grid; grid-template-columns: 190px 1fr; min-height: 380px; text-align: start; }
.mock-side { background: rgba(var(--line-rgb), .03); border-inline-end: 1px solid var(--line); padding: 16px 12px; display: grid; gap: 6px; align-content: start; font-size: 12.5px; color: var(--muted); }
.mock-side b { color: var(--text); font-size: 14px; display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.mock-side b i { width: 22px; height: 22px; border-radius: 7px; background: var(--glow); }
.mock-side span { padding: 7px 10px; border-radius: 9px; }
.mock-side span.on { background: rgba(var(--g), .14); color: var(--text); }
.mock-main { padding: 18px; display: grid; gap: 14px; align-content: start; }
.mock-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mock-kpi { padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 2px; }
.mock-kpi small { color: var(--muted); font-size: 11.5px; }
.mock-kpi b { font-size: 18px; font-family: var(--f-display); }
.mock-kpi em { font-style: normal; font-size: 11px; color: #4ade80; }
.mock-chart { height: 150px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: flex-end; gap: 6px; padding: 14px; }
.mock-chart i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--glow), rgba(var(--g), .25)); height: 10%; transition: height 1.2s cubic-bezier(.2,.8,.2,1); }
.mock-orders { display: grid; gap: 6px; }
.mock-orders div { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 11px; background: var(--panel); font-size: 12.5px; }
.mock-orders em { font-style: normal; padding: 2px 9px; border-radius: 99px; font-size: 11px; background: rgba(74,222,128,.14); color: #4ade80; }
@media (max-width: 760px) { .mock { grid-template-columns: 1fr; } .mock-side { display: none; } .mock-kpis { grid-template-columns: repeat(2, 1fr); } }

/* الأرقام */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 60px; }
.stat { text-align: center; padding: 22px 12px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
.stat b { display: block; font-family: var(--f-display); font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: var(--glow); line-height: 1.2; direction: ltr; }
.stat span { color: var(--muted); font-size: 14px; }

/* العناوين */
.sec { padding: 90px 0 10px; }
.sec-h { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.sec-h .eyebrow { margin-bottom: 12px; }
.sec-h h2 { margin: 0 0 10px; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.3; text-wrap: balance; }
.sec-h p { margin: 0; color: var(--muted); }

/* بطاقات المزايا المختصرة */
.feat-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.feat { padding: 22px; border-radius: 22px; background: linear-gradient(180deg, rgba(var(--line-rgb), .04), transparent), var(--panel); border: 1px solid var(--line); transition: transform .35s, border-color .35s; }
.feat:hover { transform: translateY(-4px); border-color: rgba(var(--g), .4); }
.feat .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(var(--g), .1); border: 1px solid rgba(var(--g), .25); color: var(--glow); margin-bottom: 12px; }
.feat .ico svg { width: 23px; height: 23px; }
.feat h3 { margin: 0 0 6px; font-size: 17.5px; font-family: var(--f-display); }
.feat p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* خطوات */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; counter-reset: s; }
.step { padding: 22px; border-radius: 22px; border: 1px dashed var(--line-2); }
.step::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--glow); color: var(--on-glow); font-weight: 800; margin-bottom: 10px; }
.step h3 { margin: 0 0 4px; font-size: 17px; }
.step p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* الباقات */
.period { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); margin: 0 auto 30px; }
.period button { border: 0; background: transparent; padding: 8px 20px; border-radius: 999px; cursor: pointer; color: var(--muted); }
.period button.on { background: var(--glow); color: var(--on-glow); font-weight: 700; }
.period small { font-size: 11px; opacity: .85; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; align-items: stretch; }
.plan { --c: var(--glow); position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 22px; border-radius: 26px; background: var(--panel); border: 1px solid var(--line); transition: transform .35s, box-shadow .35s; }
.plan:hover { transform: translateY(-5px); }
.plan.hl { border-color: rgba(var(--g), .6); box-shadow: 0 0 0 1px rgba(var(--g), .25), 0 30px 80px -30px rgba(var(--g), .55); }
.plan.hl::before { content: "الأكثر طلباً"; position: absolute; top: -13px; inset-inline-start: 22px; padding: 3px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--glow); color: var(--on-glow); }
.plan-name { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 21px; font-weight: 800; }
.plan-name i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px var(--c); }
.plan-tag { margin: 0; color: var(--muted); font-size: 14px; min-height: 44px; }
.plan-price { font-family: var(--f-display); font-size: 40px; font-weight: 800; line-height: 1.1; }
.plan-price small { font-size: 14px; font-weight: 500; color: var(--muted); }
.plan-save { font-size: 12.5px; color: #4ade80; min-height: 20px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; }
.plan li { display: flex; gap: 9px; align-items: flex-start; }
.plan li::before { content: "✓"; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.plan .btn { margin-top: auto; }

/* معرض المتاجر */
.shops { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.shop { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; transition: border-color .3s, transform .3s; }
.shop:hover { border-color: rgba(var(--g), .45); transform: translateY(-3px); }
.shop i { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-style: normal; font-weight: 800; color: var(--on-glow); background: linear-gradient(150deg, var(--glow-soft), var(--glow)); }
.shop span { display: grid; min-width: 0; }
.shop small { color: var(--muted); direction: ltr; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

/* التقييمات */
.revs { columns: 3 280px; column-gap: 14px; }
.rev { break-inside: avoid; margin-bottom: 14px; padding: 20px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); }
.rev .stars { color: var(--glow); letter-spacing: 2px; }
.rev p { margin: 8px 0 12px; }
.rev footer { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.rev footer i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; background: rgba(var(--g), .15); color: var(--glow); }
.rev footer small { display: block; color: var(--muted); }
.rev-form { max-width: 640px; margin: 30px auto 0; padding: 24px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 12px; }
.rev-form h3 { margin: 0; font-family: var(--f-display); }
.in { width: 100%; padding: 12px 15px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(var(--line-rgb), .04); font-size: 16px; }
.in:focus { outline: none; border-color: var(--glow); box-shadow: 0 0 0 3px rgba(var(--g), .2); }
textarea.in { resize: vertical; min-height: 110px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } }
.rate { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rate input { position: absolute; opacity: 0; }
.rate label { font-size: 30px; cursor: pointer; color: rgba(var(--line-rgb), .2); transition: color .15s, transform .15s; }
.rate input:checked ~ label, .rate label:hover, .rate label:hover ~ label { color: var(--glow); }
.rate label:active { transform: scale(.85); }
.note { padding: 12px 16px; border-radius: 14px; font-size: 14px; }
.note.ok { background: rgba(74,222,128,.12); color: #4ade80; }
.note.err { background: rgba(248,113,113,.12); color: #f87171; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }

/* الأسئلة */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { border-radius: 18px; background: var(--panel); border: 1px solid var(--line); padding: 4px 20px; }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::after { content: "+"; color: var(--glow); font-size: 22px; line-height: 1; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 16px; color: var(--muted); }

.cta-band { margin: 90px auto 0; max-width: 1000px; text-align: center; padding: 50px 22px; border-radius: 32px; background: radial-gradient(80% 120% at 50% 0%, rgba(var(--g), .22), transparent 70%), var(--panel); border: 1px solid rgba(var(--g), .3); }
.cta-band h2 { margin: 0 0 10px; font-family: var(--f-display); font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.cta-band p { margin: 0 0 22px; color: var(--muted); }

/* التذييل */
.foot { position: relative; z-index: 1; margin-top: 90px; border-top: 1px solid var(--line); padding: 44px 0 10px; background: var(--bg2); }
.foot-g { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .foot-g { grid-template-columns: 1fr 1fr; } .foot-g > div:first-child { grid-column: 1 / -1; } }
.foot h4 { margin: 0 0 10px; font-size: 15px; }
.foot a:not(.brand) { display: block; text-decoration: none; color: var(--muted); padding: 3px 0; font-size: 14px; }
.foot a:not(.brand):hover { color: var(--glow); }
.soc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.soc a { width: 40px; height: 40px; border-radius: 12px; display: grid !important; place-items: center; padding: 0 !important; background: var(--panel); border: 1px solid var(--line); color: var(--text) !important; }
.soc svg { width: 19px; height: 19px; }
.copy { text-align: center; color: var(--muted); font-size: 13px; padding-block: 22px 12px; border-top: 1px solid var(--line); margin-top: 30px; }
.wa-fab { position: fixed; z-index: 25; bottom: calc(18px + env(safe-area-inset-bottom)); inset-inline-start: 18px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 10px 30px rgba(37,211,102,.4); }
.wa-fab svg { width: 28px; height: 28px; }

/* الظهور عند التمرير */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1); }
.rv.seen { opacity: 1; transform: none; }

/* صفحات النماذج (تسجيل/دخول) */
.auth { min-height: calc(100vh - 70px); display: grid; place-items: center; padding: 40px 0 60px; }
.auth-card { width: min(560px, 100%); padding: 30px 24px; border-radius: 28px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 40px 100px -40px rgba(0,0,0,.6); display: grid; gap: 14px; }
.auth-card h1 { margin: 0; font-family: var(--f-display); font-size: 28px; }
.auth-card label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.slug-in { display: flex; align-items: stretch; direction: ltr; border-radius: 14px; border: 1px solid var(--line-2); overflow: hidden; background: rgba(var(--line-rgb), .04); }
.slug-in input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 14px; font-size: 16px; outline: none; }
.slug-in span { padding: 12px 14px; background: rgba(var(--line-rgb), .06); color: var(--muted); font-size: 14px; display: grid; place-items: center; white-space: nowrap; }
.slug-msg { font-size: 13px; min-height: 20px; }
.slug-msg.ok { color: #4ade80; }
.slug-msg.bad { color: #f87171; }
.plan-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.plan-pick label { position: relative; padding: 12px; border-radius: 16px; border: 1px solid var(--line-2); cursor: pointer; display: grid; gap: 2px; color: var(--text); }
.plan-pick input { position: absolute; opacity: 0; }
.plan-pick label:has(input:checked) { border-color: var(--glow); background: rgba(var(--g), .1); }
.plan-pick b { font-size: 15px; }
.plan-pick small { color: var(--muted); }

/* مازج الألوان (مديرة المنصة فقط) */
.mix { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom)); width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 18px; background: rgba(12, 12, 14, .78); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 14px 50px rgba(0,0,0,.55); color: #f3f4f6; font-family: var(--f-body); }
.mix-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mix-head b { font-weight: 500; font-size: 13px; }
.mix-head small { color: #a6abb4; font-weight: 400; }
.mix-toggle { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #f3f4f6; border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.mix-toggle:disabled { opacity: .6; cursor: default; }
.mix.min .mix-row { display: none; }
.mix-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; }
.mix-row > span { font-size: 12px; color: #a6abb4; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button, .pick { flex: none; display: flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255,255,255,.1); background: transparent; color: #c9ccd2; font-size: 12.5px; white-space: nowrap; }
.chips button:hover { color: #fff; border-color: rgba(255,255,255,.25); }
.chips button[aria-pressed="true"] { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.chips i { width: 15px; height: 15px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.pick { position: relative; border-style: dashed; border-color: rgba(255,255,255,.3); }
.pick[data-on="true"] { background: rgba(255,255,255,.12); color: #fff; border-style: solid; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.pick i { background: conic-gradient(#ff5a5a, #ffd35a, #5aff8c, #5ad7ff, #a35aff, #ff5a5a); }
.pick[data-on="true"] i { background: var(--pick); }
.pick code { font: 11px ui-monospace, monospace; color: #8f949c; direction: ltr; }
.pre .pre-x { margin-inline-start: 2px; padding: 0 4px; color: #8f949c; font-size: 13px; }
.pre .pre-x:hover { color: #ff8080; }
.pre-new { display: flex; gap: 6px; flex: 1 1 200px; min-width: 0; }
.pre-new input { flex: 1; min-width: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #fff; font-size: 16px; }
.pre-new button { flex: none; border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer; background: #f3f4f6; color: #111; font-size: 12.5px; font-weight: 600; }
.pre-new button:disabled { opacity: .45; }
@media (max-width: 520px) { .mix-row { grid-template-columns: 1fr; gap: 6px; } }

/* صفحات الدخول والتسجيل: الشعار كبير فوق المربع، والنصوص والأزرار في الوسط */
.auth-col { inline-size: min(560px, 100%); display: grid; justify-items: center; gap: .3rem; }
.auth-top { display: grid; justify-items: center; text-align: center; gap: .25rem; margin-block-end: 1rem; }
.auth-top img { display: block; max-block-size: 8.5rem; max-inline-size: 15rem; inline-size: auto; object-fit: contain; filter: drop-shadow(0 14px 34px rgba(0,0,0,.35)); }
.auth-mark { display: grid; place-items: center; inline-size: 7rem; block-size: 7rem; border-radius: 2rem; font-size: 3.4rem; font-weight: 800; font-family: var(--f-display); color: var(--on-glow); background: linear-gradient(150deg, var(--glow-soft), var(--glow)); box-shadow: 0 0 40px rgba(var(--g), .45); }
.auth-name { margin: .5rem 0 0; font-family: var(--f-display); font-size: 1.7rem; font-weight: 800; }
.auth-sub { margin: 0; color: var(--muted); }
.auth-card { text-align: center; }
.auth-card label { justify-items: center; text-align: center; }
.auth-card .in { text-align: center; }
.auth-card .slug-in input { text-align: center; }
.auth-card .btn { justify-content: center; }
.auth-card .plan-pick label { justify-items: center; }
/* النص التوضيحي داخل الحقول: واضح على الخلفية الداكنة والفاتحة */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .9; }
select:invalid, select option[value=""] { color: var(--muted); }
.plan-comm { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--glow); }
/* ===== الدخول والتسجيل: بطاقة واحدة بقسمين (النموذج أبيض + قسم ملوّن بأشكال هندسية ولابتوب) ===== */
.auth.is-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0; align-items: stretch; place-items: stretch; max-width: 1120px; padding: 34px 0 60px; }
.auth.is-split > * { min-inline-size: 0; }
.auth.is-split .auth-col { align-self: stretch; justify-self: stretch; inline-size: auto; display: grid; align-content: center; justify-items: stretch; padding: 40px clamp(22px, 5vw, 64px); background: #fff; color: #1d1724; border-radius: 28px 0 0 28px; box-shadow: 0 40px 90px -50px rgba(60, 20, 10, .45); }
.auth.is-split .auth-top { justify-items: start; text-align: start; margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.auth.is-split .auth-top img { max-block-size: 46px; filter: none; }
.auth.is-split .auth-mark { inline-size: 46px; block-size: 46px; border-radius: 14px; font-size: 24px; }
.auth.is-split .auth-name { margin: 0; font-size: 1.3rem; color: #1d1724; }
.auth.is-split .auth-sub { display: none; }
.auth.is-split .auth-card { inline-size: 100%; padding: 0; background: transparent; border: 0; box-shadow: none; text-align: start; color: #1d1724; }
.auth.is-split .auth-card h1 { font-size: 26px; text-align: start; color: #1d1724; }
.auth.is-split .auth-card label { justify-items: stretch; text-align: start; color: #6b6070; font-size: 13.5px; }
.auth.is-split .auth-card .in, .auth.is-split .auth-card .slug-in { text-align: start; background: #fff; color: #1d1724; border: 0; border-bottom: 1.5px solid #e5dcd8; border-radius: 0; padding-inline: 2px; box-shadow: none; }
.auth.is-split .auth-card .in:focus, .auth.is-split .auth-card .slug-in:focus-within { border-bottom-color: var(--glow); outline: 0; }
.auth.is-split .auth-card .slug-in input { text-align: start; color: #1d1724; }
.auth.is-split .auth-card .muted { color: #7a6f7c !important; }
.auth.is-split .auth-card .btn-main { border-radius: 12px; }
.auth.is-split .auth-card .btn { justify-content: center; }
.auth.is-split .auth-card .plan-pick label { justify-items: center; color: #1d1724; }
.auth.is-split .auth-card .note.err { background: #fde8e4; color: #b4321b; }
.auth-promo { position: relative; overflow: hidden; display: grid; align-content: center; justify-items: center; gap: 18px; padding: 44px 30px 30px; text-align: center; color: #fff; background: var(--glow); border-radius: 0 28px 28px 0; min-block-size: 600px; }
.ap-shapes span { position: absolute; display: block; }
.ap-shapes .s1 { inline-size: 210px; block-size: 210px; border-radius: 50%; border: 46px solid rgba(255, 255, 255, .16); inset-block-start: -70px; inset-inline-start: -60px; }
.ap-shapes .s2 { inline-size: 0; block-size: 0; border-inline: 120px solid transparent; border-bottom: 210px solid rgba(255, 210, 200, .35); inset-block-start: 30px; inset-inline-end: 22%; transform: rotate(18deg); }
.ap-shapes .s3 { inline-size: 120px; block-size: 120px; border-radius: 50%; background: rgba(255, 220, 212, .55); inset-block-start: 40px; inset-inline-end: 8%; }
.ap-shapes .s4 { inline-size: 260px; block-size: 130px; border-radius: 0 0 130px 130px; background: rgba(120, 25, 10, .22); inset-block-end: -20px; inset-inline-start: -40px; }
.ap-shapes .s5 { inline-size: 0; block-size: 0; border-inline: 34px solid transparent; border-bottom: 56px solid rgba(255, 255, 255, .5); inset-block-end: 26%; inset-inline-end: 6%; }
.ap-shapes .s6 { inline-size: 90px; block-size: 90px; background: rgba(255, 255, 255, .14); transform: rotate(45deg); inset-block-end: 16%; inset-inline-start: 8%; border-radius: 14px; }
.ap-shapes .dots { inline-size: 92px; block-size: 70px; background-image: radial-gradient(rgba(255, 255, 255, .7) 3.5px, transparent 4px); background-size: 18px 18px; }
.ap-shapes .d1 { inset-block-start: 22px; inset-inline-end: 36%; } .ap-shapes .d2 { inset-block-start: 46%; inset-inline-start: 14px; inline-size: 24px; block-size: 110px; } .ap-shapes .d3 { inset-block-end: 30%; inset-inline-end: 14px; }
.ap-slides { position: relative; z-index: 1; inline-size: min(470px, 100%); min-block-size: 410px; }
.ap-slide { position: absolute; inset: 0; display: grid; justify-items: center; align-content: start; gap: 8px; opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s; pointer-events: none; }
.ap-slide.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ap-slide h2 { margin: 14px 0 0; font-family: var(--f-display); font-size: clamp(1.4rem, 2.4vw, 1.85rem); color: #fff; }
.ap-slide p { margin: 0; max-inline-size: 340px; line-height: 1.9; color: rgba(255, 255, 255, .92); }
/* لابتوب فيه لوحة مصغّرة */
.lp { inline-size: min(400px, 92%); filter: drop-shadow(0 30px 40px rgba(80, 15, 5, .35)); }
.lp-screen { aspect-ratio: 16 / 10.4; border: 9px solid #24171a; border-radius: 14px 14px 4px 4px; background: #fff; overflow: hidden; padding: 8px 10px; display: grid; align-content: start; gap: 6px; direction: rtl; }
.lp-base { block-size: 12px; margin: 0 -7%; border-radius: 0 0 14px 14px; background: linear-gradient(#ece6e4, #cfc6c3); position: relative; }
.lp-base::after { content: ""; position: absolute; inset-inline: 42%; inset-block-start: 0; block-size: 4px; border-radius: 0 0 6px 6px; background: #b9afac; }
.lp-top { display: flex; align-items: center; gap: 6px; padding-bottom: 5px; border-bottom: 1px solid #f1ecea; }
.lp-logo { display: grid; place-items: center; inline-size: 16px; block-size: 16px; border-radius: 5px; background: var(--glow); color: #fff; font-size: 9px; font-weight: 800; }
.lp-search { flex: 1; block-size: 7px; border-radius: 99px; background: #f3eeec; } .lp-av { inline-size: 12px; block-size: 12px; border-radius: 50%; background: #e7dedb; }
.lp-h { display: flex; justify-content: space-between; align-items: center; } .lp-h b { font-size: 10px; color: #1d1724; } .lp-btn { inline-size: 40px; block-size: 9px; border-radius: 4px; background: #1d1724; }
.lp-row { display: grid; grid-template-columns: 16px 1fr 26px 30px; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid #f6f1ef; }
.lp-th { inline-size: 16px; block-size: 12px; border-radius: 3px; background: hsl(calc(var(--h) * 1deg) 70% 62%); }
.lp-l { block-size: 5px; border-radius: 99px; background: #e9e2df; } .lp-s { block-size: 5px; border-radius: 99px; background: #f1ebe9; }
.lp-tag { block-size: 8px; border-radius: 99px; } .lp-tag.is-ok { background: #bfe9cf; } .lp-tag.is-new { background: #ffd8cd; } .lp-tag.is-wait { background: #fbe8b4; }
.lp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .lp-kpis span { block-size: 26px; border-radius: 6px; background: #fbf3f1; border: 1px solid #f1e6e3; }
.lp-bars { display: flex; align-items: flex-end; gap: 5px; block-size: 92px; padding-top: 6px; } .lp-bars i { flex: 1; border-radius: 4px 4px 1px 1px; background: linear-gradient(var(--glow), #ffb3a3); }
.lp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.lp-plans div { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 8px; border: 1px solid #f0e6e3; } .lp-plans .is-hl { border-color: var(--glow); box-shadow: 0 0 0 2px #ffe3dc; }
.lp-plans em { font-style: normal; font-size: 8px; color: #7a6f7c; } .lp-plans strong { font-size: 14px; color: var(--glow); } .lp-plans small { font-size: 7px; color: #9a8f9a; }
.ap-dots { position: relative; z-index: 1; display: flex; gap: 8px; } .ap-dots button { inline-size: 9px; block-size: 9px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: inline-size .3s, background .3s; } .ap-dots button.is-on { inline-size: 26px; background: #fff; }
@media (max-width: 920px) {
  .auth.is-split { grid-template-columns: 1fr; padding: 18px 0 40px; }
  .auth.is-split .auth-col { border-radius: 24px 24px 0 0; }
  .auth-promo { border-radius: 0 0 24px 24px; min-block-size: 0; padding: 28px 16px 22px; }
  .ap-slides { min-block-size: 360px; }
}

/* خلفية زاهية: تداخل ألوان دافئ (برتقالي + مرجاني + خوخي) بدل اللون الواحد الغامق */
:root[data-vivid="1"] body { background: radial-gradient(1200px 700px at 85% -10%, rgba(255, 196, 140, .55), transparent 60%), radial-gradient(900px 600px at 0% 30%, rgba(255, 120, 150, .35), transparent 60%), radial-gradient(900px 700px at 70% 110%, rgba(255, 170, 90, .4), transparent 60%), linear-gradient(160deg, #f0613f 0%, var(--bg) 45%, #ea5536 100%); background-attachment: fixed; }
:root[data-vivid="1"] .muted, :root[data-vivid="1"] .sub { color: rgba(255, 255, 255, .85); }
/* شعار أبيض على الأماكن الفاتحة: داخل مربع بلون المنصة */
.auth.is-split .auth-top img { background: #E1492E; padding: 7px; border-radius: 14px; box-sizing: content-box; max-block-size: 40px; }
.auth.is-split .auth-col { border-radius: 0; border-start-start-radius: 28px; border-end-start-radius: 28px; }
.auth-promo { border-radius: 0; border-start-end-radius: 28px; border-end-end-radius: 28px; background: linear-gradient(150deg, #ff7a52 0%, #E1492E 55%, #c93a22 100%); }
@media (max-width: 920px) { .auth.is-split .auth-col { border-radius: 24px 24px 0 0; } .auth-promo { border-radius: 0 0 24px 24px; } }
/* داخل نموذج الدخول الأبيض: الأزرار والروابط بلون المنصة دائماً */
.auth.is-split .auth-card { --glow: #E1492E; --g: 225, 73, 46; --on-glow: #fff; }
.auth.is-split .auth-card .btn-main { background: #E1492E !important; color: #fff !important; box-shadow: 0 14px 30px -14px rgba(225, 73, 46, .7); }
.auth.is-split .auth-card a { color: #E1492E !important; font-weight: 700; }
.auth.is-split .auth-card .in::placeholder { color: #b9aeb2; }
.auth.is-split .auth-card .plan-pick label:has(input:checked) { border-color: #E1492E; background: #fff1ed; }
.auth-promo { --glow: #E1492E; }
.auth.is-split .auth-col { --text: #1d1724; --muted: #7a6f7c; --line-rgb: 29, 23, 36; --panel: #ffffff; --panel2: #faf6f4; --line: rgba(29, 23, 36, .1); --line-2: rgba(29, 23, 36, .16); }
.auth.is-split .auth-card small { color: #8a7f86 !important; }

/* ===== الموقع كله برتقالي بدون أجزاء بيضاء: الأقسام بدرجات برتقالي متناوبة، والمربعات زجاجية واضحة ===== */
:root[data-vivid="1"] { --text: #ffffff; --muted: rgba(255, 255, 255, .84); --line-rgb: 255, 255, 255; --glow: #fff2e6; --g: 255, 242, 230; --on-glow: #3a160e; }
:root[data-vivid="1"] .sec { position: relative; padding-block: 72px; margin-block: 0; clip-path: inset(0 -100vmax); }
:root[data-vivid="1"] .sec:nth-of-type(odd) { background: #e8553a; box-shadow: 0 0 0 100vmax #e8553a; }
:root[data-vivid="1"] .sec:nth-of-type(even) { background: #d9432a; box-shadow: 0 0 0 100vmax #d9432a; }
:root[data-vivid="1"] .sec h2, :root[data-vivid="1"] .sec h3, :root[data-vivid="1"] .sec b, :root[data-vivid="1"] .sec strong { color: #fff; }
:root[data-vivid="1"] .sec p, :root[data-vivid="1"] .sec .muted, :root[data-vivid="1"] .sec small { color: rgba(255, 255, 255, .86); }
:root[data-vivid="1"] .eyebrow { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .3); }
/* المربعات: زجاج فاتح + حد واضح + ظل عميق — تنفصل عن الخلفية بدون أبيض */
:root[data-vivid="1"] .sec [class*="card"], :root[data-vivid="1"] .sec .plan, :root[data-vivid="1"] .sec article, :root[data-vivid="1"] .sec details, :root[data-vivid="1"] .sec .box, :root[data-vivid="1"] .shop2, :root[data-vivid="1"] .stat, :root[data-vivid="1"] .stats > * {
  background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)); border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: 0 22px 44px -26px rgba(80, 15, 5, .65), inset 0 1px 0 rgba(255, 255, 255, .25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; }
:root[data-vivid="1"] .sec .plan.hl { background: linear-gradient(160deg, rgba(255, 236, 200, .34), rgba(255, 255, 255, .12)); border: 2px solid #ffd59a; box-shadow: 0 30px 60px -28px rgba(80, 15, 5, .8); }
:root[data-vivid="1"] .btn-main { background: #fff2e6 !important; color: #b4321b !important; }
:root[data-vivid="1"] .btn-ghost { border-color: rgba(255, 255, 255, .5) !important; color: #fff !important; background: rgba(255, 255, 255, .08); }
:root[data-vivid="1"] .period { background: rgba(255, 255, 255, .16); } :root[data-vivid="1"] .period button { color: #fff; } :root[data-vivid="1"] .period button.on { background: #fff2e6; color: #b4321b; }
:root[data-vivid="1"] .sec input, :root[data-vivid="1"] .sec textarea, :root[data-vivid="1"] .sec select, :root[data-vivid="1"] .sec .in { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); }
:root[data-vivid="1"] .sec ::placeholder { color: rgba(255, 255, 255, .7); }
:root[data-vivid="1"] .shop2-meta span, :root[data-vivid="1"] .shop2-foot { background: transparent; border-color: rgba(255, 255, 255, .25); }
:root[data-vivid="1"] .shop2-meta span { background: rgba(255, 255, 255, .16); color: #fff; }
:root[data-vivid="1"] .shop2-foot em, :root[data-vivid="1"] .shop2-foot b { color: #fff; }
:root[data-vivid="1"] .shop2-cover { background: linear-gradient(135deg, #ff8a5c, #c93a22); }
:root[data-vivid="1"] .shop2-logo { border-color: rgba(255, 255, 255, .6); }
:root[data-vivid="1"] .cta-band { background: linear-gradient(135deg, #ff8a5c, #c93a22); color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
:root[data-vivid="1"] .foot { background: #b8341d; --text: #fff; --muted: rgba(255, 255, 255, .8); color: #fff; }
/* ===== تجار بدأوا معنا ===== */
.shops2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.shop2 { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: transform .25s, box-shadow .25s, border-color .25s; transition-delay: var(--d, 0ms); }
.shop2:hover { transform: translateY(-6px); border-color: rgba(var(--g), .5); box-shadow: 0 28px 50px -28px rgba(var(--g), .6); }
.shop2-cover { position: relative; display: grid; gap: 3px; block-size: 160px; background: linear-gradient(135deg, rgba(var(--g), .9), rgba(var(--g), .55)); }
.shop2-cover.n2 { grid-template-columns: 1fr 1fr; } .shop2-cover.n3 { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; } .shop2-cover.n3 img:first-child { grid-row: span 2; }
.shop2-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; background: #fff; transition: transform .5s; } .shop2:hover .shop2-cover img { transform: scale(1.06); }
.shop2-cover { overflow: hidden; }
.shop2-big { display: grid; place-items: center; font-family: var(--f-display); font-size: 64px; font-weight: 900; color: rgba(255, 255, 255, .9); }
.shop2-badge { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; padding: 4px 10px; border-radius: 99px; background: #fff; color: var(--c, #b45309); font-size: 12px; font-weight: 800; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .3); }
.shop2-body { position: relative; display: grid; gap: 4px; padding: 34px 16px 16px; }
.shop2-logo { position: absolute; inset-block-start: -28px; inset-inline-start: 16px; display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 16px; background: #fff; border: 3px solid var(--panel); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .35); color: var(--glow); font-weight: 900; font-size: 22px; overflow: hidden; }
.shop2-logo img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.shop2-name { font-size: 17px; } .shop2-host { color: var(--muted); font-size: 12.5px; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop2-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .shop2-meta span { padding: 3px 10px; border-radius: 99px; background: var(--panel2); font-size: 12px; color: var(--muted); }
.shop2-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.shop2-foot b { color: var(--text); } .shop2-foot em { font-style: normal; font-weight: 800; color: var(--glow); }
.shop2-join { align-items: center; justify-content: center; gap: 8px; padding: 30px 20px; text-align: center; border: 2px dashed rgba(var(--g), .45); background: transparent; }
.shop2-plus { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 20px; background: rgba(var(--g), .12); color: var(--glow); font-size: 34px; font-weight: 300; }
.shop2-join b { font-size: 18px; } .shop2-join small { color: var(--muted); max-inline-size: 220px; } .shop2-join .btn { margin-top: 6px; }

/* القسم المتحرك في الدخول والتسجيل بلون مختلف عن الخلفية البرتقالية: بنفسجي داكن دافئ مع أشكال برتقالية */
.auth-promo { background: radial-gradient(circle at 80% 15%, rgba(225, 73, 46, .35), transparent 45%), radial-gradient(circle at 10% 90%, rgba(255, 138, 92, .25), transparent 45%), linear-gradient(160deg, #2c1a2e 0%, #1f1322 100%) !important; }
.ap-shapes .s1 { border-color: rgba(225, 73, 46, .45); } .ap-shapes .s2 { border-bottom-color: rgba(255, 138, 92, .35); } .ap-shapes .s3 { background: rgba(225, 73, 46, .55); }
.ap-shapes .s4 { background: rgba(225, 73, 46, .25); } .ap-shapes .s5 { border-bottom-color: rgba(255, 200, 170, .55); } .ap-shapes .s6 { background: rgba(255, 255, 255, .08); }
.ap-shapes .dots { background-image: radial-gradient(rgba(255, 160, 130, .75) 3.5px, transparent 4px); }
.ap-dots button { background: rgba(255, 255, 255, .3); } .ap-dots button.is-on { background: #E1492E; }

/* التسجيل بخطوات */
.su-steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 6px 0 4px; counter-reset: su; }
.su-steps li { flex: 1; counter-increment: su; display: grid; justify-items: center; gap: 4px; font-size: 12.5px; color: #8a7f86; cursor: pointer; position: relative; }
.su-steps li::before { content: counter(su); display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; border: 2px solid #eadfdb; background: #fff; font-weight: 800; color: #8a7f86; position: relative; z-index: 1; }
.su-steps li:not(:last-child)::after { content: ""; position: absolute; top: 14px; inset-inline-start: calc(50% + 16px); inline-size: calc(100% - 32px); block-size: 2px; background: #eadfdb; }
.su-steps li.is-on { color: #1d1724; font-weight: 700; } .su-steps li.is-on::before { border-color: #E1492E; background: #E1492E; color: #fff; }
.su-steps li.is-done::before { content: "✓"; border-color: #E1492E; color: #E1492E; } .su-steps li.is-done::after { background: #E1492E; }
.su-step { display: grid; gap: 12px; animation: suIn .25s ease; } .su-step[hidden] { display: none; } @keyframes suIn { from { opacity: 0; transform: translateY(6px); } }
.su-nav { display: flex; justify-content: space-between; gap: 10px; } .su-nav [hidden] { display: none; } .su-nav .btn { flex: 1; }
.su-nav .btn-ghost { background: #fff !important; color: #1d1724 !important; border: 1px solid #eadfdb !important; }
.su-err { margin: 0; padding: 9px 12px; border-radius: 12px; background: #fde8e4; color: #b4321b; font-size: 13.5px; }

/* ===== دمج ألوان مشرقة (بدون ألوان غامقة) فوق البرتقالي — مثل أمثلة الرسوم المسطحة ===== */
/* القسم المتحرك: خوخي فاتح مع أشكال وردي وسماوي وأصفر ونعناعي */
.auth-promo { background: linear-gradient(160deg, #fff6ee 0%, #ffe9dc 100%) !important; color: #5b3a30; }
.auth-promo .ap-slide h2 { color: #d23f24; } .auth-promo .ap-slide p { color: #8a6257; }
.ap-shapes .s1 { border-color: rgba(255, 143, 177, .45) !important; } .ap-shapes .s2 { border-bottom-color: rgba(143, 211, 255, .55) !important; }
.ap-shapes .s3 { background: rgba(255, 209, 102, .75) !important; } .ap-shapes .s4 { background: rgba(155, 231, 196, .55) !important; }
.ap-shapes .s5 { border-bottom-color: rgba(225, 73, 46, .45) !important; } .ap-shapes .s6 { background: rgba(255, 143, 177, .35) !important; }
.ap-shapes .dots { background-image: radial-gradient(rgba(225, 73, 46, .45) 3.5px, transparent 4px) !important; }
.ap-dots button { background: rgba(225, 73, 46, .25) !important; } .ap-dots button.is-on { background: #E1492E !important; }
.lp-screen { border-color: #ffffff !important; box-shadow: 0 0 0 1px rgba(225, 73, 46, .15); }
.lp-base { background: linear-gradient(#ffffff, #f3e4de) !important; }
.lp-btn { background: #E1492E !important; } .lp-h b { color: #5b3a30 !important; }
.lp { filter: drop-shadow(0 26px 34px rgba(225, 73, 46, .25)) !important; }
.ap-girl { display: none; position: absolute; z-index: 2; inset-inline-end: 4%; inset-block-end: 18%; animation: apBob 4s ease-in-out infinite; filter: drop-shadow(0 14px 18px rgba(225, 73, 46, .2)); }
.ap-bubble { animation: apPop 2.6s ease-in-out infinite; transform-origin: 134px 26px; } @keyframes apPop { 50% { transform: scale(1.12); } }
@media (max-width: 920px) { .ap-girl { display: none; } }
@keyframes apBob { 50% { transform: translateY(-8px); } }
/* مربعات الموقع فوق البرتقالي: بيضاء مثل المثال، ونص بني دافئ بدل الأسود، ولمسات باستيل */
:root[data-vivid="1"] .sec [class*="card"], :root[data-vivid="1"] .sec .plan, :root[data-vivid="1"] .sec article, :root[data-vivid="1"] .sec details, :root[data-vivid="1"] .sec .box, :root[data-vivid="1"] .shop2, :root[data-vivid="1"] .stats > * {
  background: #ffffff !important; border: 0 !important; box-shadow: 0 24px 46px -28px rgba(110, 25, 8, .55) !important; backdrop-filter: none !important;
  --text: #5b3a30; --muted: #9a776c; --line-rgb: 91, 58, 48; --line: rgba(91, 58, 48, .1); --panel2: #fff3ec; --glow: #E1492E; --g: 225, 73, 46; --on-glow: #fff; color: #5b3a30 !important; }
:root[data-vivid="1"] .sec [class*="card"] :is(h3, h4, b, strong), :root[data-vivid="1"] .sec .plan :is(h3, b, strong, .plan-name, .plan-price), :root[data-vivid="1"] .sec article :is(b, strong, h3), :root[data-vivid="1"] .sec details :is(summary, b), :root[data-vivid="1"] .shop2 :is(b, strong), :root[data-vivid="1"] .stats > * :is(b, strong) { color: #4a2c24 !important; }
:root[data-vivid="1"] .sec [class*="card"] :is(p, small, span, li), :root[data-vivid="1"] .sec .plan :is(p, small, li, .plan-tag), :root[data-vivid="1"] .sec article :is(p, small, li), :root[data-vivid="1"] .sec details :is(p, div), :root[data-vivid="1"] .shop2 :is(small, span), :root[data-vivid="1"] .stats > * :is(span, small) { color: #9a776c !important; }
:root[data-vivid="1"] .sec .plan .plan-price, :root[data-vivid="1"] .stats > * b, :root[data-vivid="1"] .stats > * strong { color: #E1492E !important; }
:root[data-vivid="1"] .sec .plan.hl { box-shadow: 0 0 0 3px #ffd166, 0 30px 60px -28px rgba(110, 25, 8, .7) !important; }
:root[data-vivid="1"] .sec .plan .btn-main, :root[data-vivid="1"] .sec [class*="card"] .btn-main, :root[data-vivid="1"] .shop2 .btn-main { background: #E1492E !important; color: #fff !important; }
:root[data-vivid="1"] .sec .plan .btn-ghost { background: #fff3ec !important; color: #c23a22 !important; border-color: transparent !important; }
:root[data-vivid="1"] .shop2-meta span { background: #fff3ec !important; color: #9a776c !important; }
:root[data-vivid="1"] .shop2-foot em { color: #E1492E !important; } :root[data-vivid="1"] .shop2-foot { border-color: rgba(91, 58, 48, .1) !important; }
:root[data-vivid="1"] .sec [class*="card"] svg, :root[data-vivid="1"] .sec [class*="card"] [class*="ic"] { color: #E1492E; }
/* أيقونات المميزات بألوان باستيل متنوعة */
:root[data-vivid="1"] .sec [class*="card"]:nth-child(4n+1) [class*="ic"] { background: #ffe1ea !important; color: #e0457b !important; }
:root[data-vivid="1"] .sec [class*="card"]:nth-child(4n+2) [class*="ic"] { background: #dff2ff !important; color: #2b8fd6 !important; }
:root[data-vivid="1"] .sec [class*="card"]:nth-child(4n+3) [class*="ic"] { background: #fff3cf !important; color: #c98a00 !important; }
:root[data-vivid="1"] .sec [class*="card"]:nth-child(4n+4) [class*="ic"] { background: #dcf7ea !important; color: #1f9d63 !important; }

/* حقول الدخول والتسجيل: مربعات ناعمة بمسافة داخلية، بدون لون الملء التلقائي الرمادي من المتصفح */
.auth.is-split .auth-card .in, .auth.is-split .auth-card .slug-in { border: 1.5px solid #efe4e0 !important; border-radius: 14px !important; background: #fdf9f7 !important; padding: 13px 16px !important; font-size: 15px; transition: border-color .15s, box-shadow .15s, background .15s; }
.auth.is-split .auth-card .slug-in { padding: 0 !important; overflow: hidden; display: flex; align-items: stretch; }
.auth.is-split .auth-card .slug-in input { padding: 13px 16px; background: transparent; border: 0; flex: 1; min-inline-size: 0; }
.auth.is-split .auth-card .slug-in span { display: grid; place-items: center; padding: 0 14px; background: #f6ece8; color: #9a776c; font-size: 13.5px; }
.auth.is-split .auth-card .in:focus, .auth.is-split .auth-card .slug-in:focus-within { border-color: #E1492E !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(225, 73, 46, .12) !important; outline: 0; }
.auth.is-split .auth-card .pw-wrap > input { padding-left: 3rem !important; }
.auth.is-split .auth-card .pw-eye { left: .6rem; color: #9a776c; }
.auth.is-split .auth-card input:-webkit-autofill, .auth.is-split .auth-card input:-webkit-autofill:hover, .auth.is-split .auth-card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fdf9f7 inset !important; box-shadow: 0 0 0 1000px #fdf9f7 inset !important; -webkit-text-fill-color: #1d1724 !important; caret-color: #1d1724; transition: background-color 9999s ease-out 0s; }
.auth.is-split .auth-card select.in { appearance: none; -webkit-appearance: none; }
/* نفس العلاج لكل حقول الموقع: لون الملء التلقائي لا يغطي التصميم */
input:-webkit-autofill { -webkit-text-fill-color: currentColor; transition: background-color 9999s ease-out 0s; }
/* باقي مربعات الصفحة الرئيسية بنفس الأسلوب (أبيض + نص بني دافئ) */
:root[data-vivid="1"] :is(.step, .rev, .rev-form, .feat, .stat) { background: #ffffff !important; border: 0 !important; box-shadow: 0 24px 46px -28px rgba(110, 25, 8, .55) !important; backdrop-filter: none !important;
  --text: #5b3a30; --muted: #9a776c; --line-rgb: 91, 58, 48; --line: rgba(91, 58, 48, .1); --glow: #E1492E; --g: 225, 73, 46; --on-glow: #fff; color: #5b3a30 !important; }
:root[data-vivid="1"] :is(.step, .rev, .rev-form, .feat, .stat) :is(h3, h4, b, strong, summary) { color: #4a2c24 !important; }
:root[data-vivid="1"] :is(.step, .rev, .rev-form, .feat) :is(p, small, span, li) { color: #9a776c !important; }
:root[data-vivid="1"] .stat b, :root[data-vivid="1"] .stat strong { color: #E1492E !important; }
:root[data-vivid="1"] :is(.rev-form) :is(input, textarea, .in) { background: #fdf9f7 !important; color: #4a2c24 !important; border: 1.5px solid #efe4e0 !important; border-radius: 12px; }
:root[data-vivid="1"] :is(.rev-form) ::placeholder { color: #b9a59e !important; }
:root[data-vivid="1"] .rev-form .btn-main { background: #E1492E !important; color: #fff !important; }
:root[data-vivid="1"] .rev-form .rate label { color: #f0dcd5; } :root[data-vivid="1"] .rev-form .rate input:checked ~ label, :root[data-vivid="1"] .rev-form .rate label:hover, :root[data-vivid="1"] .rev-form .rate label:hover ~ label { color: #f5b301; }
:root[data-vivid="1"] .step :is([class*="num"], i, em) { background: #fff3ec; color: #E1492E; }
:root[data-vivid="1"] .feat:nth-child(4n+1) .ico { background: #ffe1ea !important; color: #e0457b !important; } :root[data-vivid="1"] .feat:nth-child(4n+2) .ico { background: #dff2ff !important; color: #2b8fd6 !important; }
:root[data-vivid="1"] .feat:nth-child(4n+3) .ico { background: #fff3cf !important; color: #c98a00 !important; } :root[data-vivid="1"] .feat:nth-child(4n+4) .ico { background: #dcf7ea !important; color: #1f9d63 !important; }

/* ===== القسم الجانبي في الدخول: تدرّج ناعم + هالة ضوء + بطاقات واجهة تطفو حول الشاشة (بدل الأشكال الهندسية) ===== */
.ap-shapes { display: none !important; }
.auth-promo { background: radial-gradient(120% 90% at 50% 0%, #fff8f3 0%, #ffece2 55%, #ffe0d2 100%) !important; }
.auth-promo::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(225, 73, 46, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(225, 73, 46, .06) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask: radial-gradient(circle at 50% 40%, #000 30%, transparent 75%); mask: radial-gradient(circle at 50% 40%, #000 30%, transparent 75%); }
.ap-glow { position: absolute; inline-size: 420px; block-size: 420px; inset-block-start: 8%; inset-inline-start: 50%; transform: translateX(50%); border-radius: 50%; background: radial-gradient(circle, rgba(225, 73, 46, .28), transparent 65%); filter: blur(10px); }
.ap-float { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.apf { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); box-shadow: 0 18px 36px -16px rgba(150, 40, 15, .35), 0 0 0 1px rgba(225, 73, 46, .08); animation: apfFloat 6s ease-in-out infinite; text-align: start; }
.apf span:last-child { display: grid; line-height: 1.35; } .apf b { font-size: 13px; color: #4a2c24; } .apf small { font-size: 11.5px; color: #9a776c; }
.apf-ic { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 11px; font-size: 16px; }
.apf-ic.is-green { background: #dcf7ea; } .apf-ic.is-orange { background: #ffe3d9; } .apf-ic.is-yellow { background: #fff3cf; color: #e0a400; font-weight: 900; } .apf-ic.is-blue { background: #dff2ff; }
.apf-1 { inset-block-start: 12%; inset-inline-end: 7%; } .apf-2 { inset-block-start: 30%; inset-inline-start: 5%; animation-delay: -1.5s; }
.apf-3 { inset-block-start: 49%; inset-inline-end: 4%; animation-delay: -3s; } .apf-4 { inset-block-start: 6%; inset-inline-start: 14%; animation-delay: -4.5s; }
@keyframes apfFloat { 50% { transform: translateY(-9px); } }
.lp { margin-top: 40px; }
@media (max-width: 920px) { .apf-2, .apf-4 { display: none; } .apf-1 { inset-block-start: 4%; } .apf-3 { inset-block-start: 34%; } }
@media (prefers-reduced-motion: reduce) { .apf { animation: none; } }
.ap-slides { min-block-size: 455px !important; } .ap-dots { margin-top: 6px; }
/* برتقالي أخف وأنعم (أقل فقوعاً) */
:root[data-vivid="1"] body { background: radial-gradient(1200px 700px at 85% -10%, rgba(255, 214, 180, .55), transparent 60%), radial-gradient(900px 600px at 0% 30%, rgba(255, 170, 185, .3), transparent 60%), radial-gradient(900px 700px at 70% 110%, rgba(255, 200, 150, .4), transparent 60%), linear-gradient(160deg, #f4886d 0%, #ee7559 45%, #ec7155 100%) !important; }
:root[data-vivid="1"] .sec:nth-of-type(odd) { background: #f07d62 !important; box-shadow: 0 0 0 100vmax #f07d62 !important; }
:root[data-vivid="1"] .sec:nth-of-type(even) { background: #ea6f53 !important; box-shadow: 0 0 0 100vmax #ea6f53 !important; }
:root[data-vivid="1"] .foot { background: #dc5f44 !important; }
:root[data-vivid="1"] .cta-band { background: linear-gradient(135deg, #ff9a78, #ee7559 55%, #e26247) !important; }
:root[data-vivid="1"] .nav { background: color-mix(in srgb, #ee7559 82%, transparent) !important; }

/* بطاقة المتجر: بدون الرابط الخام — نوع المتجر ومدينته، وثلاثة أرقام مرتبة، وزر زيارة */
.shop2-cat { margin: 0; font-size: 13px; color: #9a776c; }
.shop2-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: 10px; }
.shop2-stats span { display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border-radius: 12px; background: #fff3ec; }
.shop2-stats b { font-size: 16px; color: #E1492E !important; line-height: 1.2; } .shop2-stats small { font-size: 11px; color: #9a776c !important; }
.shop2-foot { justify-content: center !important; gap: 6px !important; margin-top: 12px; padding: 10px; border: 0 !important; border-radius: 12px; background: #E1492E; transition: background .2s; }
.shop2-foot em, .shop2-go { color: #fff !important; font-weight: 800; font-style: normal; } .shop2:hover .shop2-foot { background: #c93a22; }
.shop2-go { transition: transform .2s; } .shop2:hover .shop2-go { transform: translateX(-4px); }

/* ===== صفحة المميزات: كل ميزة بعالم ألوان خاص (بطاقة بيضاء + خلفية ملوّنة بنقش للعرض الحي) ===== */
:root[data-vivid="1"] .bento .fc { background: #ffffff !important; border: 0 !important; box-shadow: 0 26px 50px -30px rgba(110, 25, 8, .6) !important; backdrop-filter: none !important; padding: 12px 12px 16px;
  --text: #4a2c24; --muted: #9a776c; --line-rgb: 74, 44, 36; --line: rgba(74, 44, 36, .1); --panel: #fff; --panel2: #fff6f1; --bg2: #fff; color: #4a2c24 !important; transition: transform .25s, box-shadow .25s; }
:root[data-vivid="1"] .bento .fc:hover { transform: translateY(-6px) rotate(-.3deg); box-shadow: 0 36px 60px -30px rgba(110, 25, 8, .7) !important; }
.fc.t0 { --a: #ff8a65; --b: #ff5f8f; --s: #fff0ea; } .fc.t1 { --a: #4fc3f7; --b: #5b7cfa; --s: #e9f6ff; } .fc.t2 { --a: #ffca3a; --b: #ff8f3a; --s: #fff8e1; }
.fc.t3 { --a: #34d399; --b: #0ea5a4; --s: #e6faf3; } .fc.t4 { --a: #b388ff; --b: #ec6bd3; --s: #f5eeff; } .fc.t5 { --a: #ff7a59; --b: #ffb547; --s: #fff2e8; }
:root[data-vivid="1"] .bento .fc .demo { border: 0 !important; border-radius: 18px; color: #4a2c24;
  background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .55), transparent 40%), radial-gradient(rgba(255, 255, 255, .35) 1.5px, transparent 2px) 0 0 / 16px 16px, linear-gradient(135deg, var(--a), var(--b)) !important; }
:root[data-vivid="1"] .bento .fc .demo > .stagebox > * { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .18)); }
:root[data-vivid="1"] .bento .fc .demo .live { background: rgba(255, 255, 255, .92) !important; color: #16a34a !important; font-weight: 800; }
:root[data-vivid="1"] .bento .fc .fc-body { position: relative; padding: 6px 6px 0; }
.fc-num { position: absolute; inset-block-start: -2px; inset-inline-end: 4px; font-family: var(--f-display); font-size: 30px; font-weight: 900; line-height: 1; background: linear-gradient(135deg, var(--a), var(--b)); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .35; }
:root[data-vivid="1"] .bento .fc h3 { color: #4a2c24 !important; padding-inline-end: 44px; }
:root[data-vivid="1"] .bento .fc p { color: #9a776c !important; }
:root[data-vivid="1"] .bento .fc .badge { background: var(--s) !important; color: var(--b) !important; border: 0 !important; font-weight: 800; }
:root[data-vivid="1"] .bento .fc .replay { color: var(--b) !important; font-weight: 700; }
.fc-num { inset-block-start: auto !important; inset-block-end: -4px; inset-inline-end: auto !important; inset-inline-start: 6px; font-size: 40px; opacity: .22; pointer-events: none; }
:root[data-vivid="1"] .bento .fc h3 { padding-inline-end: 0 !important; }
/* المميزات بأسلوب هادئ واحترافي: لون واحد ناعم بدل الألوان المتعددة */
.fc-num { display: none !important; }
:root[data-vivid="1"] .bento .fc { --a: #E1492E; --b: #E1492E; --s: #fff1ec; }
:root[data-vivid="1"] .bento .fc:hover { transform: translateY(-4px) !important; }
:root[data-vivid="1"] .bento .fc .demo { background: linear-gradient(180deg, #fff8f5 0%, #ffefe8 100%) !important; box-shadow: inset 0 0 0 1px rgba(225, 73, 46, .1); }
:root[data-vivid="1"] .bento .fc .demo > .stagebox > * { filter: drop-shadow(0 10px 18px rgba(150, 40, 15, .12)); }
:root[data-vivid="1"] .bento .fc .demo .live { background: #fff !important; box-shadow: 0 2px 8px rgba(150, 40, 15, .1); }
:root[data-vivid="1"] .bento .fc .badge { background: #fff1ec !important; color: #c23a22 !important; }
:root[data-vivid="1"] .bento .fc .replay { color: #c23a22 !important; }
:root[data-vivid="1"] .bento .fc h3 { font-size: 18px; }
/* داخل العروض الحية: لون الإبراز برتقالي (كان كريمي فيختفي على الخلفية الفاتحة) */
:root[data-vivid="1"] .bento .fc .demo { --glow: #E1492E; --g: 225, 73, 46; --glow-soft: #f6a08f; --on-glow: #fff; --text: #4a2c24; --muted: #9a776c; --panel: #fff; --panel2: #fff6f1; --line-rgb: 74, 44, 36; --line: rgba(74, 44, 36, .1); }
/* ===== المميزات: رجوع للزجاج الشفاف مع تحسين الوضوح ===== */
:root[data-vivid="1"] .bento .fc { background: linear-gradient(160deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1)) !important; border: 1px solid rgba(255, 255, 255, .42) !important;
  box-shadow: 0 24px 48px -26px rgba(110, 25, 8, .55), inset 0 1px 0 rgba(255, 255, 255, .45) !important; backdrop-filter: blur(14px) saturate(1.2) !important; -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  --text: #fff; --muted: rgba(255, 255, 255, .9); --line-rgb: 255, 255, 255; color: #fff !important; padding: 14px 14px 18px; }
:root[data-vivid="1"] .bento .fc:hover { background: linear-gradient(160deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .14)) !important; border-color: rgba(255, 255, 255, .6) !important; }
/* منطقة العرض: زجاج أغمق قليلاً حتى تبرز العناصر البيضاء بداخلها */
:root[data-vivid="1"] .bento .fc .demo { background: linear-gradient(180deg, rgba(120, 30, 10, .16), rgba(120, 30, 10, .08)) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important; border-radius: 16px; }
:root[data-vivid="1"] .bento .fc .demo > .stagebox > * { filter: drop-shadow(0 12px 20px rgba(90, 20, 5, .22)) !important; }
:root[data-vivid="1"] .bento .fc h3 { color: #fff !important; text-shadow: 0 1px 2px rgba(90, 20, 5, .2); }
:root[data-vivid="1"] .bento .fc p { color: rgba(255, 255, 255, .92) !important; }
:root[data-vivid="1"] .bento .fc .badge { background: rgba(255, 255, 255, .92) !important; color: #c23a22 !important; }
:root[data-vivid="1"] .bento .fc .replay { color: #fff !important; opacity: .9; }
:root[data-vivid="1"] .bento .fc .fc-body { border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 12px; margin-top: 2px; }

/* ===== المميزات بأسلوب موقع ملكه: بطاقة بلون الخلفية لكن أغمق درجة، العرض يملأ أعلاها فوق حروف خافتة، والنص والزر بالأسفل ===== */
:root[data-vivid="1"] .bento .fc { padding: 0 !important; gap: 0 !important; overflow: hidden; border-radius: 26px !important;
  background: linear-gradient(180deg, #d85a3f 0%, #cf5238 100%) !important; border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: 0 30px 60px -34px rgba(90, 20, 5, .7), inset 0 1px 0 rgba(255, 255, 255, .18) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  --text: #fff; --muted: rgba(255, 255, 255, .86); color: #fff !important; }
:root[data-vivid="1"] .bento .fc:hover { transform: translateY(-4px) !important; border-color: rgba(255, 230, 210, .55) !important; box-shadow: 0 0 0 1px rgba(255, 230, 210, .25), 0 30px 60px -28px rgba(90, 20, 5, .8), 0 0 60px -24px rgba(255, 210, 170, .7) !important; }
:root[data-vivid="1"] .bento .fc .demo { flex: 1; min-height: 240px; margin: 0; padding: 24px 22px 6px; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent); mask-image: linear-gradient(180deg, #000 74%, transparent); }
:root[data-vivid="1"] .bento .fc .demo > *:not(.mx):not(.live) { position: relative; z-index: 1; }
.mx { position: absolute; inset: -6px; z-index: 0; pointer-events: none; font: 500 14px/32px ui-monospace, Menlo, monospace; letter-spacing: 1.05em; color: rgba(255, 255, 255, .1); white-space: pre; overflow: hidden; text-align: left; direction: ltr; user-select: none;
  -webkit-mask-image: radial-gradient(80% 90% at 50% 30%, #000 40%, transparent 85%); mask-image: radial-gradient(80% 90% at 50% 30%, #000 40%, transparent 85%); }
:root[data-vivid="1"] .bento .fc .demo .live { z-index: 3; }
:root[data-vivid="1"] .bento .fc .fc-body { border: 0 !important; padding: 2px 24px 4px !important; margin: 0 !important; gap: 8px; }
:root[data-vivid="1"] .bento .fc h3 { display: flex; align-items: baseline; gap: 10px; font-size: clamp(19px, 2vw, 23px) !important; color: #fff !important; text-shadow: none !important; }
.fc-n { font-family: ui-monospace, Menlo, monospace; font-size: 15px; font-weight: 700; color: #ffe2c9; padding-inline-end: 10px; border-inline-end: 1px solid rgba(255, 255, 255, .3); }
:root[data-vivid="1"] .bento .fc p { color: rgba(255, 255, 255, .86) !important; }
:root[data-vivid="1"] .bento .fc .badge { background: rgba(255, 255, 255, .14) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .28) !important; }
:root[data-vivid="1"] .bento .fc .replay { align-self: flex-start; margin: 10px 24px 22px; padding: 10px 18px; border-radius: 99px; border: 0; background: linear-gradient(180deg, #fff6ec, #ffe3cc) !important; color: #b4321b !important; font-weight: 800; opacity: 1 !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 10px 24px -10px rgba(90, 20, 5, .6); }

/* خلف كل عرض: نقش أيقونات المتجر (سلة، حقيبة، بطاقة سعر، صندوق، بطاقة دفع، نجمة، شحن، نمو، فاتورة) بدل حروف البرمجة */
.mx { display: none !important; }
:root[data-vivid="1"] .bento .fc .demo::before { content: ""; position: absolute; inset: -40px; z-index: 0; pointer-events: none; opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.55%22%3E%3Cpath%20d%3D%22M10%2014h3l2%2010h12l2-7H14%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2227%22%20r%3D%221.4%22/%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2227%22%20r%3D%221.4%22/%3E%3Cpath%20d%3D%22M73%2014h12l1%2014H72z%20M76%2014a3%203%200%200%201%206%200%22/%3E%3Cpath%20d%3D%22M128%2012h8l8%208-8%208-8-8z%22/%3E%3Ccircle%20cx%3D%22133%22%20cy%3D%2218%22%20r%3D%221.3%22/%3E%3Cpath%20d%3D%22M20%2074l8-4%208%204v9l-8%204-8-4z%20M20%2074l8%204%208-4%20M28%2078v9%22/%3E%3Cpath%20d%3D%22M70%2072h20v12H70z%20M70%2076h20%22/%3E%3Cpath%20d%3D%22M130%2070l2.6%205.3%205.8.8-4.2%204.1%201%205.8-5.2-2.7-5.2%202.7%201-5.8-4.2-4.1%205.8-.8z%22/%3E%3Cpath%20d%3D%22M14%20126h14v10H14z%20M28%20129h5l3%203v4h-8%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22137%22%20r%3D%221.6%22/%3E%3Ccircle%20cx%3D%2231%22%20cy%3D%22137%22%20r%3D%221.6%22/%3E%3Cpath%20d%3D%22M72%20136l6-6%204%204%208-9%20M86%20125h4v4%22/%3E%3Cpath%20d%3D%22M126%20122h14v18h-14z%20M129%20127h8%20M129%20131h8%20M129%20135h5%22/%3E%3C/g%3E%3C/svg%3E"); background-size: 132px 132px; animation: fxDrift 60s linear infinite;
  -webkit-mask-image: radial-gradient(80% 90% at 50% 30%, #000 40%, transparent 85%); mask-image: radial-gradient(80% 90% at 50% 30%, #000 40%, transparent 85%); }
@keyframes fxDrift { to { background-position: 132px -132px; } }
@media (prefers-reduced-motion: reduce) { :root[data-vivid="1"] .bento .fc .demo::before { animation: none; } }
/* رقم الميزة كبير وخافت في زاوية البطاقة، وزر «شاهد مرة أخرى» رابط نصي بسيط (مثل التصميم الأول) */
:root[data-vivid="1"] .bento .fc .fc-num { display: block !important; position: absolute; inset-block-start: -18px !important; inset-block-end: auto !important; inset-inline-start: auto !important; inset-inline-end: 22px !important;
  font-family: var(--f-display); font-size: 56px !important; font-weight: 900; line-height: 1; color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08)); -webkit-background-clip: text; background-clip: text; opacity: 1 !important; pointer-events: none; }
:root[data-vivid="1"] .bento .fc .fc-body { position: relative; padding-top: 18px !important; }
:root[data-vivid="1"] .bento .fc h3 { padding-inline-end: 70px !important; }
:root[data-vivid="1"] .bento .fc .replay { margin: 6px 24px 20px !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0; color: #ffe2c9 !important; font-weight: 700; font-size: 14px; }
:root[data-vivid="1"] .bento .fc .replay:hover { color: #fff !important; text-decoration: none; }
:root[data-vivid="1"] .bento .fc .fc-num { inset-block-start: -40px !important; font-size: 50px !important; }
:root[data-vivid="1"] .bento .fc h3 { padding-inline-end: 0 !important; }
/* لون البطاقة: رجوع للزجاج الشفاف الأول */
:root[data-vivid="1"] .bento .fc { background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)) !important; border: 1px solid rgba(255, 255, 255, .32) !important;
  box-shadow: 0 22px 44px -26px rgba(80, 15, 5, .65), inset 0 1px 0 rgba(255, 255, 255, .25) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }
/* زجاج بلمسة دافئة: أعلى البطاقة كريمي شفاف، وأسفلها (منطقة النص) أدفأ وأعمق قليلاً لوضوح الكلام */
:root[data-vivid="1"] .bento .fc { background: linear-gradient(180deg, rgba(255, 244, 234, .3) 0%, rgba(255, 226, 206, .16) 55%, rgba(170, 45, 20, .14) 100%) !important;
  border: 1px solid rgba(255, 240, 228, .45) !important; box-shadow: 0 24px 46px -26px rgba(110, 25, 8, .6), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -40px 60px -40px rgba(140, 30, 10, .25) !important;
  backdrop-filter: blur(12px) saturate(1.25) !important; -webkit-backdrop-filter: blur(12px) saturate(1.25) !important; }
:root[data-vivid="1"] .bento .fc:hover { border-color: rgba(255, 244, 234, .75) !important; box-shadow: 0 30px 56px -26px rgba(110, 25, 8, .7), 0 0 50px -22px rgba(255, 220, 190, .8), inset 0 1px 0 rgba(255, 255, 255, .5) !important; }
:root[data-vivid="1"] .bento .fc .fc-num { background: linear-gradient(180deg, #fff3e6, rgba(255, 243, 230, .15)) !important; -webkit-background-clip: text !important; background-clip: text !important; }
:root[data-vivid="1"] .bento .fc .badge { background: rgba(255, 244, 234, .9) !important; color: #c23a22 !important; border: 0 !important; }
/* أيقونات الخلفية أوضح */
:root[data-vivid="1"] .bento .fc .demo::before { opacity: .34 !important; background-size: 120px 120px !important;
  -webkit-mask-image: radial-gradient(95% 100% at 50% 35%, #000 55%, transparent 95%) !important; mask-image: radial-gradient(95% 100% at 50% 35%, #000 55%, transparent 95%) !important; }

/* ===== تناسق الألوان: البرتقالي + لونه المكمّل (الزيتي/التركوازي اللي اخترتِه) + كريمي ===== */
:root[data-vivid="1"] { --teal: #246b6a; --teal2: #3a8382; --teal-d: #1d5655; --cream: #fff4e8; --indigo: #454e7d; }
/* بطاقات المميزات: زيتي عميق فوق البرتقالي */
:root[data-vivid="1"] .bento .fc { background: linear-gradient(165deg, #3a8382 0%, #246b6a 55%, #1d5655 100%) !important; border: 1px solid rgba(255, 244, 232, .22) !important;
  box-shadow: 0 28px 56px -30px rgba(20, 50, 50, .75), inset 0 1px 0 rgba(255, 255, 255, .18) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
:root[data-vivid="1"] .bento .fc:hover { border-color: rgba(255, 210, 180, .6) !important; box-shadow: 0 34px 60px -28px rgba(20, 50, 50, .8), 0 0 0 1px rgba(255, 160, 120, .35) !important; }
:root[data-vivid="1"] .bento .fc .fc-num { background: linear-gradient(180deg, #ffb38f, rgba(255, 179, 143, .12)) !important; -webkit-background-clip: text !important; background-clip: text !important; }
:root[data-vivid="1"] .bento .fc h3 { color: #fff4e8 !important; }
:root[data-vivid="1"] .bento .fc p { color: rgba(225, 245, 243, .85) !important; }
:root[data-vivid="1"] .bento .fc .badge { background: rgba(255, 244, 232, .14) !important; color: #ffd2b8 !important; border: 1px solid rgba(255, 210, 184, .35) !important; }
:root[data-vivid="1"] .bento .fc .replay { color: #ffb38f !important; }
:root[data-vivid="1"] .bento .fc .demo::before { opacity: .22 !important; }
/* الأزرار الثانوية والشارات العامة بلمسة زيتية */
:root[data-vivid="1"] .eyebrow { background: rgba(36, 107, 106, .9) !important; color: #fff4e8 !important; border-color: transparent !important; }
:root[data-vivid="1"] .btn-ghost { background: rgba(36, 107, 106, .9) !important; border-color: transparent !important; color: #fff4e8 !important; }
/* الصفحة الرئيسية: مربعات المميزات والخطوات بالزيتي، والإحصاءات والباقات تبقى كريمية */
:root[data-vivid="1"] :is(.feat, .step) { background: linear-gradient(165deg, #3a8382, #246b6a) !important; --text: #fff4e8; --muted: rgba(225, 245, 243, .85); color: #fff4e8 !important; }
:root[data-vivid="1"] :is(.feat, .step) :is(h3, h4, b, strong) { color: #fff4e8 !important; }
:root[data-vivid="1"] :is(.feat, .step) :is(p, small, span, li) { color: rgba(225, 245, 243, .85) !important; }
:root[data-vivid="1"] .feat .ico { background: rgba(255, 179, 143, .18) !important; color: #ffb38f !important; }
:root[data-vivid="1"] .step :is([class*="num"], i, em) { background: #E1492E !important; color: #fff !important; }
:root[data-vivid="1"] .sec .plan.hl { box-shadow: 0 0 0 3px #3a8382, 0 30px 60px -28px rgba(20, 50, 50, .7) !important; }
:root[data-vivid="1"] .foot { background: #1d5655 !important; }
:root[data-vivid="1"] .cta-band { background: linear-gradient(135deg, #3a8382, #246b6a) !important; }
:root[data-vivid="1"] .bento .fc .demo::before { opacity: .45 !important; }

/* ===== استبدال الزيتي بالنيلي (#454e7d) — مكمّل أنعم للبرتقالي ===== */
:root[data-vivid="1"] .bento .fc { background: linear-gradient(165deg, #59629a 0%, #454e7d 55%, #383f68 100%) !important; box-shadow: 0 28px 56px -30px rgba(30, 30, 70, .7), inset 0 1px 0 rgba(255, 255, 255, .18) !important; }
:root[data-vivid="1"] .bento .fc:hover { box-shadow: 0 34px 60px -28px rgba(30, 30, 70, .8), 0 0 0 1px rgba(255, 160, 120, .4) !important; }
:root[data-vivid="1"] .bento .fc p { color: rgba(232, 234, 248, .88) !important; }
:root[data-vivid="1"] .eyebrow, :root[data-vivid="1"] .btn-ghost { background: rgba(69, 78, 125, .92) !important; }
:root[data-vivid="1"] :is(.feat, .step) { background: linear-gradient(165deg, #59629a, #454e7d) !important; }
:root[data-vivid="1"] :is(.feat, .step) :is(p, small, span, li) { color: rgba(232, 234, 248, .88) !important; }
:root[data-vivid="1"] .sec .plan.hl { box-shadow: 0 0 0 3px #454e7d, 0 30px 60px -28px rgba(30, 30, 70, .6) !important; }
:root[data-vivid="1"] .foot { background: #383f68 !important; }
:root[data-vivid="1"] .cta-band { background: linear-gradient(135deg, #59629a, #454e7d) !important; }
:root[data-vivid="1"] .bento .fc .demo { --text: #fff4e8 !important; --muted: rgba(232, 234, 248, .8) !important; color: #fff4e8; }
/* ===== معاينات ألوان البطاقات (pal=1 كريمي، 2 برتقالي أعمق، 3 بني، 4 زجاج) ===== */
:root[data-pal="1"] .bento .fc { background: linear-gradient(180deg, #fff8f1, #ffeedd) !important; border: 0 !important; box-shadow: 0 26px 50px -30px rgba(110, 25, 8, .55) !important; }
:root[data-pal="1"] .bento .fc h3 { color: #4a2c24 !important; } :root[data-pal="1"] .bento .fc p { color: #8a6a60 !important; }
:root[data-pal="1"] .bento .fc .demo { --text: #4a2c24 !important; --muted: #8a6a60 !important; color: #4a2c24; } :root[data-pal="1"] .bento .fc .demo::before { filter: invert(45%) sepia(60%) saturate(800%) hue-rotate(340deg); opacity: .28 !important; }
:root[data-pal="1"] .bento .fc .fc-num { background: linear-gradient(180deg, #E1492E, rgba(225, 73, 46, .1)) !important; -webkit-background-clip: text !important; background-clip: text !important; }
:root[data-pal="1"] .bento .fc .badge { background: #ffe3d6 !important; color: #c23a22 !important; border: 0 !important; } :root[data-pal="1"] .bento .fc .replay { color: #E1492E !important; }
:root[data-pal="2"] .bento .fc { background: linear-gradient(170deg, #d6553a, #c2442b) !important; border: 1px solid rgba(255, 235, 220, .28) !important; box-shadow: 0 26px 50px -28px rgba(90, 20, 5, .75) !important; }
:root[data-pal="2"] .bento .fc .fc-num { background: linear-gradient(180deg, #ffe2c9, rgba(255, 226, 201, .1)) !important; -webkit-background-clip: text !important; background-clip: text !important; } :root[data-pal="2"] .bento .fc .replay { color: #ffe2c9 !important; }
:root[data-pal="2"] .bento .fc .badge { background: rgba(255, 244, 232, .92) !important; color: #c23a22 !important; } :root[data-pal="2"] .bento .fc p { color: rgba(255, 240, 230, .9) !important; }
:root[data-pal="3"] .bento .fc { background: linear-gradient(170deg, #6b4538, #4f3229) !important; border: 1px solid rgba(255, 220, 190, .2) !important; box-shadow: 0 26px 50px -28px rgba(50, 20, 10, .8) !important; }
:root[data-pal="3"] .bento .fc .fc-num { background: linear-gradient(180deg, #ffb38f, rgba(255, 179, 143, .1)) !important; -webkit-background-clip: text !important; background-clip: text !important; } :root[data-pal="3"] .bento .fc .replay { color: #ffb38f !important; }
:root[data-pal="3"] .bento .fc p { color: rgba(255, 236, 222, .85) !important; } :root[data-pal="3"] .bento .fc .badge { background: rgba(255, 179, 143, .18) !important; color: #ffd2b8 !important; }
:root[data-pal="4"] .bento .fc { background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)) !important; border: 1px solid rgba(255, 255, 255, .32) !important; box-shadow: 0 22px 44px -26px rgba(80, 15, 5, .65), inset 0 1px 0 rgba(255, 255, 255, .25) !important; backdrop-filter: blur(10px) !important; }
:root[data-pal="4"] .bento .fc .fc-num { background: linear-gradient(180deg, #fff3e6, rgba(255, 243, 230, .15)) !important; -webkit-background-clip: text !important; background-clip: text !important; } :root[data-pal="4"] .bento .fc .replay { color: #fff !important; }
:root[data-pal="4"] .bento .fc .badge { background: rgba(255, 244, 234, .9) !important; color: #c23a22 !important; } :root[data-pal="4"] .bento .fc p { color: rgba(255, 255, 255, .9) !important; }

/* ===== خلفية الموقع: شبكة خطوط ناعمة (مثل قسم الدخول) + بقع ضوء دافئة تتحرك ببطء ===== */
:root[data-vivid="1"] body { position: relative; isolation: isolate; }
:root[data-vivid="1"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .11) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 35%, rgba(0, 0, 0, .35) 70%, transparent 100%); mask-image: radial-gradient(120% 80% at 50% 0%, #000 35%, rgba(0, 0, 0, .35) 70%, transparent 100%); }
:root[data-vivid="1"] body::after { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(28% 32% at 18% 22%, rgba(255, 220, 190, .45), transparent 70%), radial-gradient(26% 30% at 82% 35%, rgba(255, 190, 200, .32), transparent 70%), radial-gradient(30% 34% at 55% 85%, rgba(255, 210, 160, .35), transparent 70%);
  animation: bgFloat 26s ease-in-out infinite alternate; }
@keyframes bgFloat { to { transform: translate3d(3%, -3%, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { :root[data-vivid="1"] body::after { animation: none; } }
/* الأقسام شفافة حتى تبان الشبكة خلفها (بدل الألوان المصمتة المتناوبة) */
:root[data-vivid="1"] .sec, :root[data-vivid="1"] .sec:nth-of-type(odd), :root[data-vivid="1"] .sec:nth-of-type(even) { background: transparent !important; box-shadow: none !important; }
:root[data-vivid="1"] .sec + .sec { border-top: 1px solid rgba(255, 255, 255, .12); }
/* الأزرار الثانوية والشارات: زجاج أبيض بدل النيلي (حتى نختار لون المربعات) */
:root[data-vivid="1"] .eyebrow { background: rgba(255, 255, 255, .18) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .35) !important; }
:root[data-vivid="1"] .btn-ghost { background: rgba(255, 255, 255, .14) !important; border: 1px solid rgba(255, 255, 255, .55) !important; color: #fff !important; }
:root[data-vivid="1"] :is(.feat, .step):not(.bento .fc) { background: #ffffff !important; --text: #5b3a30; --muted: #9a776c; color: #5b3a30 !important; }
:root[data-vivid="1"] :is(.feat, .step) :is(h3, h4, b, strong) { color: #4a2c24 !important; }
:root[data-vivid="1"] :is(.feat, .step) :is(p, small, span, li) { color: #9a776c !important; }
:root[data-vivid="1"] .foot { background: rgba(160, 45, 22, .55) !important; }
:root[data-vivid="1"] .cta-band { background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)) !important; border: 1px solid rgba(255, 255, 255, .35) !important; }
:root[data-vivid="1"] .sec .plan.hl { box-shadow: 0 0 0 3px #ffd166, 0 30px 60px -28px rgba(110, 25, 8, .7) !important; }
/* المرور بالماوس على البطاقات: بدون تغيير لون الخلفية (رفعة خفيفة فقط) */
:root[data-vivid="1"] .bento .fc:hover { background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)) !important; border-color: rgba(255, 255, 255, .32) !important; }
:root[data-pal="1"] .bento .fc:hover { background: linear-gradient(180deg, #fff8f1, #ffeedd) !important; }
:root[data-pal="2"] .bento .fc:hover { background: linear-gradient(170deg, #d6553a, #c2442b) !important; }
:root[data-pal="3"] .bento .fc:hover { background: linear-gradient(170deg, #6b4538, #4f3229) !important; }
:root:not([data-pal]) .bento .fc:hover { background: linear-gradient(165deg, #59629a 0%, #454e7d 55%, #383f68 100%) !important; }
/* الافتراضي حتى نختار: زجاج شفاف (بدون النيلي) */
:root[data-vivid="1"]:not([data-pal]) .bento .fc, :root[data-vivid="1"]:not([data-pal]) .bento .fc:hover { background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)) !important; border: 1px solid rgba(255, 255, 255, .32) !important;
  box-shadow: 0 22px 44px -26px rgba(80, 15, 5, .65), inset 0 1px 0 rgba(255, 255, 255, .25) !important; backdrop-filter: blur(10px) !important; }
:root[data-vivid="1"]:not([data-pal]) .bento .fc .fc-num { background: linear-gradient(180deg, #fff3e6, rgba(255, 243, 230, .15)) !important; -webkit-background-clip: text !important; background-clip: text !important; }
:root[data-vivid="1"]:not([data-pal]) .bento .fc .badge { background: rgba(255, 244, 234, .9) !important; color: #c23a22 !important; border: 0 !important; }
:root[data-vivid="1"]:not([data-pal]) .bento .fc p { color: rgba(255, 255, 255, .92) !important; }

/* ===== أنماط خلفية للتجربة: ?bg=1 شبكة · ?bg=2 أيقونات متجر · ?bg=3 خطوط موجية · ?bg=4 نقاط ===== */
:root[data-vivid="1"] .nav { background: color-mix(in srgb, var(--bg, #e1492e) 55%, transparent) !important; backdrop-filter: blur(10px); }
:root[data-bg="2"] body::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22210%22%20height%3D%22210%22%20viewBox%3D%220%200%20210%20210%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2018h4l3%2013h15l3-9H19%22/%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%2235%22%20r%3D%221.6%22/%3E%3Ccircle%20cx%3D%2233%22%20cy%3D%2235%22%20r%3D%221.6%22/%3E%3Cpath%20d%3D%22M92%2024h16l1%2018H91z%22/%3E%3Cpath%20d%3D%22M96%2024a4%204%200%200%201%208%200%22/%3E%3Cpath%20d%3D%22M166%2018h10l10%2010-10%2010-10-10z%22/%3E%3Ccircle%20cx%3D%22172%22%20cy%3D%2225%22%20r%3D%221.6%22/%3E%3Cpath%20d%3D%22M24%20100l11-5%2011%205v12l-11%205-11-5z%20M24%20100l11%205%2011-5%20M35%20105v12%22/%3E%3Cpath%20d%3D%22M90%2098h26v16H90z%20M90%20103h26%22/%3E%3Cpath%20d%3D%22M172%2094l3.4%207%207.6%201-5.5%205.3%201.3%207.6-6.8-3.6-6.8%203.6%201.3-7.6-5.5-5.3%207.6-1z%22/%3E%3Cpath%20d%3D%22M14%20172h18v13H14z%20M32%20176h7l4%204v5H32%22/%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%22187%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%22187%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M92%20186l8-8%206%206%2010-12%20M110%20172h6v6%22/%3E%3Cpath%20d%3D%22M166%20166h18v24h-18z%20M170%20172h10%20M170%20177h10%20M170%20182h6%22/%3E%3C/g%3E%3C/svg%3E") !important; background-size: 210px 210px !important; opacity: .2; animation: bgDrift 90s linear infinite; }
:root[data-bg="3"] body::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221440%22%20height%3D%22900%22%20viewBox%3D%220%200%201440%20900%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.2%22%20opacity%3D%22.55%22%3E%3Cpath%20d%3D%22M0%20120%20C%20360%2060%2C%20720%20200%2C%201080%20110%20S%201440%20150%2C%201440%20130%22/%3E%3Cpath%20d%3D%22M0%20190%20C%20360%20130%2C%20720%20270%2C%201080%20180%20S%201440%20220%2C%201440%20200%22/%3E%3Cpath%20d%3D%22M0%20260%20C%20360%20200%2C%20720%20340%2C%201080%20250%20S%201440%20290%2C%201440%20270%22/%3E%3Cpath%20d%3D%22M0%20330%20C%20360%20270%2C%20720%20410%2C%201080%20320%20S%201440%20360%2C%201440%20340%22/%3E%3Cpath%20d%3D%22M0%20400%20C%20360%20340%2C%20720%20480%2C%201080%20390%20S%201440%20430%2C%201440%20410%22/%3E%3Cpath%20d%3D%22M0%20470%20C%20360%20410%2C%20720%20550%2C%201080%20460%20S%201440%20500%2C%201440%20480%22/%3E%3Cpath%20d%3D%22M0%20540%20C%20360%20480%2C%20720%20620%2C%201080%20530%20S%201440%20570%2C%201440%20550%22/%3E%3Cpath%20d%3D%22M0%20610%20C%20360%20550%2C%20720%20690%2C%201080%20600%20S%201440%20640%2C%201440%20620%22/%3E%3Cpath%20d%3D%22M0%20680%20C%20360%20620%2C%20720%20760%2C%201080%20670%20S%201440%20710%2C%201440%20690%22/%3E%3Cpath%20d%3D%22M0%20750%20C%20360%20690%2C%20720%20830%2C%201080%20740%20S%201440%20780%2C%201440%20760%22/%3E%3Cpath%20d%3D%22M0%20820%20C%20360%20760%2C%20720%20900%2C%201080%20810%20S%201440%20850%2C%201440%20830%22/%3E%3C/g%3E%3C/svg%3E") !important; background-size: 100% 100% !important; opacity: .5; }
:root[data-bg="4"] body::before { background-image: radial-gradient(rgba(255, 255, 255, .5) 1.6px, transparent 2px) !important; background-size: 26px 26px !important; }
@keyframes bgDrift { to { background-position: 210px -210px; } }
@media (prefers-reduced-motion: reduce) { :root[data-bg="2"] body::before { animation: none; } }
:root[data-pal="1"] .bento .fc .demo .live { background: #fff !important; }
/* بدون إضاءة في الخلفية: لون برتقالي ثابت ناعم */
:root[data-vivid="1"] body { background: var(--bg, #e1492e) !important; }
:root[data-vivid="1"] body::after { display: none !important; }
:root[data-vivid="1"] .hero::before, :root[data-vivid="1"] .hero::after, :root[data-vivid="1"] .f-hero::before, :root[data-vivid="1"] .f-hero::after, :root[data-vivid="1"] .glow, :root[data-vivid="1"] .orb { display: none !important; }
:root[data-vivid="1"] .f-hero h1 em, :root[data-vivid="1"] .hero h1 em { text-shadow: none !important; }
/* نص الميزة: عنوان أصغر، والوصف قريب من العنوان وبعيد عن حافة البطاقة */
:root[data-vivid="1"] .bento .fc .fc-body { gap: 4px !important; padding: 14px 24px 24px !important; }
:root[data-vivid="1"] .bento .fc .fc-top { margin: 0; }
:root[data-vivid="1"] .bento .fc h3 { font-size: 17px !important; line-height: 1.45; margin: 0 !important; }
:root[data-vivid="1"] .bento .fc p { margin: 0 !important; font-size: 14px; line-height: 1.8; }
:root[data-vivid="1"] .bento .fc .demo { min-height: 220px !important; }
:root[data-vivid="1"][data-pal="1"] .bento .fc .demo { --text: #4a2c24 !important; --muted: #8a6a60 !important; color: #4a2c24 !important; }
:root[data-vivid="1"] .nav { background: color-mix(in srgb, var(--bg, #e1492e) 18%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid rgba(255, 255, 255, .18) !important; }
/* الخطوط تظهر في كل مكان بنفس الوضوح، والفوتر شفاف تبان الخطوط من خلفه */
:root[data-vivid="1"] body::before { -webkit-mask-image: none !important; mask-image: none !important; background-image: linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px) !important; }
:root[data-vivid="1"] .foot { background: transparent !important; border-top: 1px solid rgba(255, 255, 255, .22) !important; }
/* الخطوط على خلفية الصفحة نفسها (تغطي كل شيء: الشريط العلوي، الأقسام، والفوتر) */
:root[data-vivid="1"] { background-color: var(--bg, #e1492e); background-image: linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 44px 44px; background-attachment: fixed; }
:root[data-vivid="1"] body { background: transparent !important; }
:root[data-vivid="1"] body::before { display: none !important; }

/* زر لوحة التاجر مميز في الشريط العلوي */
.nav-dash { display: inline-flex !important; align-items: center; gap: 7px; background: #fff !important; color: #c23a22 !important; border: 0 !important; font-weight: 800 !important; box-shadow: 0 8px 20px -8px rgba(90, 20, 5, .5); }
.nav-dash:hover { transform: translateY(-1px); }
.nav-cta .btn-main { background: rgba(255, 255, 255, .16) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .6) !important; }
/* الجوال: مسافة جانبية مريحة لكل الأقسام */
@media (max-width: 640px) {
  .wrap { padding-inline: 18px !important; box-sizing: border-box; }
  .sec { padding-block: 48px !important; }
  .nav-dash svg { display: none; }
}

/* ===== الدخول والتسجيل بملء الشاشة (بدون الشريط العلوي والفوتر) + زر رجوع ===== */
body:has(.auth.is-split) .nav, body:has(.auth.is-split) .foot, body:has(.auth.is-split) .wa-fab { display: none !important; }
body:has(.auth.is-split) .auth.is-split { max-width: none !important; min-height: 100vh; padding: 0 !important; margin: 0; }
.auth.is-split .auth-col { border-radius: 0 !important; padding-top: 70px !important; position: relative; }
.auth.is-split .auth-promo { border-radius: 0 !important; min-block-size: 100vh; }
.auth-back { position: absolute; inset-block-start: 22px; inset-inline-start: clamp(22px, 5vw, 64px); display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; background: #fff3ec; color: #c23a22 !important; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.auth-back:hover { background: #ffe3d6; }
.auth-col > .auth-top { margin-top: 10px; }
@media (max-width: 920px) { .auth.is-split .auth-col { min-height: 100vh; } .auth.is-split .auth-promo { display: none !important; } }
/* القسم الجانبي: نقش أيقونات المتجر بدل الخطوط */
.auth-promo::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22210%22%20height%3D%22210%22%20viewBox%3D%220%200%20210%20210%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23E1492E%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2018h4l3%2013h15l3-9H19%22/%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%2235%22%20r%3D%221.6%22/%3E%3Ccircle%20cx%3D%2233%22%20cy%3D%2235%22%20r%3D%221.6%22/%3E%3Cpath%20d%3D%22M92%2024h16l1%2018H91z%22/%3E%3Cpath%20d%3D%22M96%2024a4%204%200%200%201%208%200%22/%3E%3Cpath%20d%3D%22M166%2018h10l10%2010-10%2010-10-10z%22/%3E%3Ccircle%20cx%3D%22172%22%20cy%3D%2225%22%20r%3D%221.6%22/%3E%3Cpath%20d%3D%22M24%20100l11-5%2011%205v12l-11%205-11-5z%20M24%20100l11%205%2011-5%20M35%20105v12%22/%3E%3Cpath%20d%3D%22M90%2098h26v16H90z%20M90%20103h26%22/%3E%3Cpath%20d%3D%22M172%2094l3.4%207%207.6%201-5.5%205.3%201.3%207.6-6.8-3.6-6.8%203.6%201.3-7.6-5.5-5.3%207.6-1z%22/%3E%3Cpath%20d%3D%22M14%20172h18v13H14z%20M32%20176h7l4%204v5H32%22/%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%22187%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%22187%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M92%20186l8-8%206%206%2010-12%20M110%20172h6v6%22/%3E%3Cpath%20d%3D%22M166%20166h18v24h-18z%20M170%20172h10%20M170%20177h10%20M170%20182h6%22/%3E%3C/g%3E%3C/svg%3E") !important; background-size: 190px 190px !important; opacity: .22; animation: bgDrift 90s linear infinite;
  -webkit-mask: radial-gradient(circle at 50% 45%, #000 40%, transparent 90%) !important; mask: radial-gradient(circle at 50% 45%, #000 40%, transparent 90%) !important; }
.cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1.5px solid #efe4e0; border-radius: 14px; background: #fdf9f7; }
.cap-btn { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 700; color: #1d1724; cursor: pointer; padding: 0; }
.cap-box { position: relative; display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 8px; border: 2px solid #d9cbc6; background: #fff; transition: all .2s; }
.cap-btn.is-load .cap-box { border-color: #E1492E; border-top-color: transparent; border-radius: 50%; animation: capSpin .7s linear infinite; }
.cap-btn.is-ok .cap-box { background: #16a34a; border-color: #16a34a; } .cap-btn.is-ok .cap-box::after { content: "✓"; color: #fff; font-weight: 900; font-size: 15px; } .cap-btn.is-ok { color: #16a34a; }
@keyframes capSpin { to { transform: rotate(360deg); } }
.cap-brand { font-size: 11px; color: #9a8f96; }
.rev-logo { overflow: hidden; } .rev-logo img { inline-size: 100%; block-size: 100%; object-fit: contain; background: #fff; }
.rev-hint { text-align: center; margin: 22px 0 0; font-size: 14px; opacity: .9; }
.rev-logo { overflow: hidden; } .rev-logo img { inline-size: 100%; block-size: 100%; object-fit: contain; background: #fff; }
.rev-hint { text-align: center; margin: 22px 0 0; font-size: 14px; opacity: .9; }
/* القائمة الكاملة للمزايا */
.allf { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.allf-c { padding: 20px; border-radius: 22px; background: #fff8f1; box-shadow: 0 22px 44px -28px rgba(110, 25, 8, .55); color: #4a2c24; }
.allf-c h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 17px; color: #4a2c24 !important; }
.allf-c h3 span { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 13px; background: #ffe3d6; font-size: 20px; }
.allf-c ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.allf-c li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 11px; background: #fff; font-size: 13.5px; color: #5b3a30 !important; }
.allf-c li span { color: #5b3a30 !important; } .allf-c li em { flex-shrink: 0; font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 99px; }
.allf-c li.ok em { background: #dcfce7; color: #166534; } .allf-c li.soon em { background: #f1ece9; color: #9a8f96; } .allf-c li.soon span { opacity: .7; }
/* الدخول والتسجيل ثابتة بدون تمرير الصفحة */
html:has(.auth.is-split), body:has(.auth.is-split) { height: 100vh; overflow: hidden; }
body:has(.auth.is-split) .auth.is-split { height: 100vh; min-height: 0 !important; }
.auth.is-split .auth-col { height: 100vh; overflow-y: auto; scrollbar-width: none; padding-block: 64px 24px !important; align-content: center; }
.auth.is-split .auth-col::-webkit-scrollbar { display: none; }
.auth.is-split .auth-promo { height: 100vh; min-block-size: 0 !important; }
.auth.is-split .su-step { gap: 10px; } .auth.is-split .auth-card { gap: 10px; }
.auth.is-split .auth-card h1 { font-size: 23px; } .auth.is-split .auth-top { margin-bottom: 8px !important; }

/* ===== من الفكرة إلى أول طلب: بطاقات بخط زمني ===== */
.steps2 { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.steps2::before { content: ""; position: absolute; inset-block-start: 46px; inset-inline: 16%; block-size: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .7) 0 10px, transparent 10px 18px); }
.st2 { position: relative; display: grid; justify-items: center; gap: 8px; padding: 26px 22px 24px; border-radius: 26px; text-align: center; background: #fff8f1; box-shadow: 0 26px 50px -30px rgba(110, 25, 8, .6); color: #4a2c24; transition: transform .25s; }
.st2:hover { transform: translateY(-6px); }
.st2-n { position: absolute; inset-block-start: -14px; inset-inline-start: 18px; display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: #E1492E; color: #fff; font-weight: 900; box-shadow: 0 0 0 5px rgba(255, 255, 255, .5); }
.st2-ic { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 22px; background: #ffe3d6; font-size: 30px; box-shadow: inset 0 -4px 0 rgba(225, 73, 46, .15); }
.st2 h3 { margin: 6px 0 0; font-size: 18px; color: #4a2c24 !important; } .st2 p { margin: 0; color: #8a6a60 !important; font-size: 14px; line-height: 1.8; }
.st2-tag { margin-top: 4px; padding: 5px 12px; border-radius: 99px; background: #fff; color: #c23a22; font-size: 12.5px; font-weight: 800; box-shadow: 0 4px 12px -6px rgba(110, 25, 8, .35); }
@media (max-width: 820px) { .steps2 { grid-template-columns: 1fr; } .steps2::before { display: none; } }

/* ===== الباقات: أفخم وتركّز على أهم المزايا ===== */
.plan-all { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -6px auto 22px; max-width: 900px; }
.plan-all b { color: #fff; } .plan-all span { padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-size: 13px; font-weight: 700; }
:root[data-vivid="1"] .sec .plans { align-items: center; gap: 22px; }
:root[data-vivid="1"] .sec .plan { background: #fff8f1 !important; border-radius: 30px !important; padding: 30px 26px !important; gap: 12px; border-top: 6px solid var(--c) !important; }
:root[data-vivid="1"] .sec .plan.hl { transform: scale(1.05); background: #fff !important; box-shadow: 0 0 0 3px #E1492E, 0 40px 80px -30px rgba(110, 25, 8, .75) !important; border-top-color: #E1492E !important; z-index: 1; }
:root[data-vivid="1"] .sec .plan.hl:hover { transform: scale(1.05) translateY(-5px); }
:root[data-vivid="1"] .sec .plan.hl::before { background: #E1492E !important; color: #fff !important; padding: 5px 16px !important; font-size: 13px !important; box-shadow: 0 8px 18px -8px rgba(225, 73, 46, .8); }
:root[data-vivid="1"] .sec .plan-name { font-size: 23px; } :root[data-vivid="1"] .sec .plan-name i { box-shadow: none; }
:root[data-vivid="1"] .sec .plan-price { font-size: 48px; color: #E1492E !important; }
.plan-top { display: grid; gap: 7px; padding: 12px; border-radius: 18px; background: #ffece3; }
.plan-top span { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 800; color: #4a2c24 !important; }
.plan-top i { display: grid; place-items: center; flex-shrink: 0; inline-size: 28px; block-size: 28px; border-radius: 9px; background: #fff; font-style: normal; font-size: 14px; }
:root[data-vivid="1"] .sec .plan li.more { color: #E1492E !important; font-weight: 800; } :root[data-vivid="1"] .sec .plan li.more::before { content: "+"; }
:root[data-vivid="1"] .sec .plan .btn { padding-block: 14px; font-size: 15.5px; }
@media (max-width: 820px) { :root[data-vivid="1"] .sec .plan.hl { transform: none; } }
/* شعار الشريط العلوي كبير جداً وواضح */
.nav-in { height: 100px; }
.nav .brand { gap: 10px; font-size: 30px; flex-shrink: 0; }
.nav .brand img { height: 92px; max-width: 260px; margin-block: -6px; }
@media (max-width: 900px) { .nav-in { height: auto; } .nav .brand img { height: 70px; } .nav .brand { font-size: 24px; } }
@media (max-width: 520px) { .nav .brand img { height: 58px; } .nav .brand { font-size: 21px; } .nav-in > .brand { order: -1; } }
@media (max-width: 520px) { .nav .brand > span { display: none; } .nav .brand img { height: 54px; } .nav-cta { min-width: 0; } }

/* ===== «تجار بدأوا معنا» — تصميم جديد: البطاقات في الوسط، غلاف أكبر، هوية المتجر بجانب الشعار، وزر زيارة واضح ===== */
.shops2 { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 22px !important; }
.shops2 > .shop2 { flex: 0 1 330px; border-radius: 24px; border: 0; background: #fff; box-shadow: 0 30px 60px -34px rgba(70, 18, 6, .55), 0 0 0 1px rgba(255, 255, 255, .6); }
.shops2 > .shop2:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -30px rgba(70, 18, 6, .65); }
.shop2-cover { block-size: 210px; margin: 10px 10px 0; border-radius: 18px; gap: 4px !important; background: #f6efec; }
.shop2-cover img { border-radius: 0; }
.shop2-badge { inset-block-start: 12px; inset-inline-start: 12px; padding: 5px 12px; font-size: 12px; backdrop-filter: none; }
.shop2-body { display: grid; gap: 14px; padding: 18px 18px 20px !important; }
.shop2-id { display: flex; align-items: center; gap: 12px; }
.shop2-id .shop2-logo { position: static; inline-size: 52px; block-size: 52px; flex: none; border-radius: 14px; border: 1px solid #f0e4df; background: #fff; box-shadow: none; font-weight: 800; font-size: 20px; color: #E1492E; display: grid; place-items: center; overflow: hidden; }
.shop2-id .shop2-name { display: block; font-size: 18px; color: #2b1d1a; }
.shop2-id .shop2-cat { margin: 2px 0 0; font-size: 13px; color: #8a7a75; }
.shop2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.shop2-stats span { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: #fbf5f2; }
.shop2-stats b { font-size: 18px; color: #2b1d1a; } .shop2-stats small { font-size: 11.5px; color: #8a7a75; }
.shop2-go { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 14px; background: #E1492E; color: #fff; font-weight: 700; font-size: 14.5px; transition: background .2s, gap .2s; }
.shop2-go i { font-style: normal; transition: transform .2s; }
.shop2:hover .shop2-go { background: #c93a20; } .shop2:hover .shop2-go i { transform: translateX(-4px); }
.shops2 > .shop2-join { background: rgba(255, 255, 255, .12); border: 2px dashed rgba(255, 255, 255, .55); box-shadow: none; color: #fff; justify-content: center; gap: 10px; min-block-size: 360px; }
.shops2 > .shop2-join:hover { background: rgba(255, 255, 255, .2); box-shadow: none; }
.shop2-join .shop2-plus { background: #fff; color: #E1492E; border-radius: 20px; }
.shop2-join b { color: #fff; font-size: 20px; } .shop2-join small { color: rgba(255, 255, 255, .85) !important; }
.shop2-join .btn { background: #fff !important; color: #c93a20 !important; box-shadow: 0 12px 24px -12px rgba(70, 18, 6, .6) !important; }
@media (max-width: 760px) { .shops2 > .shop2 { flex-basis: 100%; } .shop2-cover { block-size: 190px; } .shops2 > .shop2-join { min-block-size: 240px; } }
/* (أولوية أعلى من ألوان الثيم الملوّن data-vivid) */
html #stores .shop2-cover { background: #f6efec !important; }
html #stores .shop2-id .shop2-logo { color: #E1492E !important; font-size: 20px !important; font-weight: 800 !important; }
html #stores .shop2-id .shop2-name { color: #2b1d1a !important; }
html #stores .shop2-id .shop2-cat { display: block !important; color: #8a7a75 !important; }
html #stores .shop2-stats b { color: #2b1d1a !important; } html #stores .shop2-stats small { color: #8a7a75 !important; }
html #stores .shop2-stats span { background: #fbf5f2 !important; }
html #stores .shop2 .shop2-go, html #stores .shop2 .shop2-go i { color: #fff !important; }
html #stores .shop2 .shop2-go { background: #E1492E !important; }
html #stores .shop2:hover .shop2-go { background: #c93a20 !important; }
html #stores .shops2 > .shop2-join { border: 2px dashed #f1c9bd !important; background: #fffaf8 !important; }
html #stores .shop2-join .shop2-plus { background: #fde9e2 !important; color: #E1492E !important; font-size: 34px !important; }
html #stores .shop2-join b { color: #2b1d1a !important; } html #stores .shop2-join small { color: #8a7a75 !important; }
html #stores .shop2-join .btn { background: #E1492E !important; color: #fff !important; }
html #stores .shop2-id .shop2-logo { position: static !important; inset: auto !important; order: 0; inline-size: 52px !important; block-size: 52px !important; border-radius: 14px !important; border: 1px solid #f0e4df !important; background: #fff !important; box-shadow: 0 6px 14px -10px rgba(70, 18, 6, .5) !important; display: grid !important; place-items: center; overflow: hidden; }
html #stores .shop2-id > div { flex: 1; min-inline-size: 0; text-align: start; }

/* ===== شريط المنصة في الجوال: الشعار + زر واحد، والروابط نص بسيط في سطر واحد ===== */
@media (max-width: 760px) {
  .nav-in { flex-wrap: wrap; gap: 8px 12px !important; padding-block: 10px 6px !important; }
  .nav-in > .brand { order: 0 !important; }
  .nav-cta { order: 1; margin-inline-start: auto; }
  .nav-cta:not(.is-ret) .nav-dash, .nav-cta.is-ret .btn-main { display: none !important; }
  .nav-cta .btn-sm { padding: 9px 18px !important; font-size: 14px !important; }
  .nav-cta .btn-main { background: #fff !important; color: #c23a22 !important; border: 0 !important; font-weight: 800 !important; box-shadow: 0 8px 18px -10px rgba(70, 18, 6, .6) !important; }
  .links { order: 2; flex-basis: 100%; justify-content: center; gap: 22px !important; padding: 2px 0 8px !important; margin: 0 !important; }
  .links a { padding: 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important; color: rgba(255, 255, 255, .88) !important; font-size: 14px !important; font-weight: 600 !important; }
  .links a[aria-current] { color: #fff !important; text-decoration: underline; text-underline-offset: 6px; }
}
html #stores .shop2-id .shop2-logo img { inline-size: 80% !important; block-size: 80% !important; object-fit: contain; }
/* زر واحد في الشريط على كل الشاشات: الزائر الجديد «ابدأ مجاناً»، والتاجر اللي دخل قبل «دخول» */
html .nav-cta:not(.is-ret) .nav-dash, html .nav-cta.is-ret .btn-main { display: none !important; }
/* الجوال: الشعار في سطر، وتحته الروابط والزر في سطر واحد جنب بعض */
@media (max-width: 760px) {
  .nav-in > .brand { flex-basis: 100%; justify-content: center; }
  .links { order: 2 !important; flex: 1 1 auto !important; flex-basis: auto !important; justify-content: flex-start !important; gap: 16px !important; padding: 0 !important; align-items: center; }
  .nav-cta { order: 3 !important; margin-inline-start: auto; }
  .nav-cta .btn-sm { padding: 8px 14px !important; font-size: 13.5px !important; }
  .links a { font-size: 13.5px !important; }
}
@media (max-width: 370px) { .links { gap: 10px !important; } .links a { font-size: 12.5px !important; } }

/* الجوال: خط كل الحقول 16px — أقل من كذا الآيفون يكبّر الصفحة ويحرّكها لما تكتب */
@media (max-width: 1024px) { html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), html body select, html body textarea, html body [contenteditable="true"] { font-size: 16px !important; } }
/* الجوال: في الدخول والتسجيل شعار بليون والعنوان والوصف في الوسط */
@media (max-width: 760px) {
  .auth-top { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 8px !important; margin-inline: auto !important; }
  .auth-top img, .auth-top .auth-mark { margin: 0 auto !important; }
  .auth-card > h1, .auth-card > p.muted { text-align: center !important; }
  .auth-col .auth-back { align-self: flex-start; }
  .su-steps { justify-content: center; }
}