/* ===== شاشات public ===== */
@media (max-width: 1022px) {
 .d-wide { display: none !important } }
@media (min-width: 1023px) {
 .d-narrow { display: none !important } }
.block { display: block }
.center { text-align: center }
.h3 {
 font-size: var(--fs-18);
 font-weight: 600 }
.btn-white {
 color: var(--purple-900);
 background: #FFFFFF }
.btn.btn-white:hover {
 color: var(--purple-900);
 background: var(--purple-50) }
.btn-line {
 border-color: rgba(255, 255, 255, 0.6);
 color: #FFFFFF;
 background: transparent }
.btn.btn-line:hover {
 border-color: #FFFFFF;
 color: #FFFFFF;
 background: rgba(255, 255, 255, 0.1) }
.btn-ghost-light {
 color: #FFFFFF;
 background: transparent }
.btn.btn-ghost-light:hover {
 color: #FFFFFF;
 background: rgba(255, 255, 255, 0.1) }
.sq-av {
 display: inline-flex;
 border: 1px solid var(--gold-200);
 border-radius: var(--r-xs);
 width: 40px;
 height: 40px;
 font-weight: 700;
 color: var(--purple-900);
 background: var(--gold-100);
 align-items: center;
 justify-content: center;
 flex: none;
 object-fit: cover }
.more-link {
 display: inline-flex;
 font-size: var(--fs-14);
 font-weight: 600;
 color: var(--link);
 align-items: center;
 gap: var(--s1) }
.sec-head {
 display: flex;
 margin-bottom: var(--s4);
 align-items: flex-end;
 justify-content: space-between;
 gap: var(--s3) }
.sec-head h2 { font-size: var(--fs-20) }
.sec-head p {
 margin-top: var(--s1);
 font-size: var(--fs-14);
 color: var(--muted) }
.sub-head {
 margin-bottom: var(--s3);
 font-size: var(--fs-20);
 font-weight: 600 }
.tint-box {
 display: flex;
 padding: var(--s4);
 border: 1px solid var(--purple-200);
 border-radius: var(--r-md);
 font-size: var(--fs-14);
 color: var(--text);
 background: var(--purple-50);
 align-items: flex-start;
 gap: var(--s3) }
.tint-box .icon {
 color: var(--purple-700);
 flex: none }
a.tint-box:hover { color: var(--text) }
.escrow-box {
 display: flex;
 margin: 0;
 padding: var(--s4);
 border: 1px solid var(--purple-200);
 border-radius: var(--r-md);
 font-size: var(--fs-14);
 background: var(--purple-50);
 align-items: flex-start;
 gap: var(--s3) }
.escrow-box .icon {
 color: var(--purple-700);
 flex: none }
.kv-box {
 display: grid;
 margin: 0;
 padding: 0 var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 background: var(--surface) }
.kv-box > div {
 display: flex;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 justify-content: space-between;
 gap: var(--s3) }
.kv-box > div:last-child { border-bottom: 0 }
.kv-box dt {
 font-size: var(--fs-14);
 color: var(--muted) }
.kv-box dd {
 margin: 0;
 font-weight: 600;
 text-align: left }
.kv-box.flat {
 padding: 0;
 border: 0;
 background: none }
.ok-text { color: var(--success) }
.low-stock {
 font-size: var(--fs-14);
 font-weight: 600;
 color: var(--gold-700) }

/* ===== الرأس والشريط العلوي ===== */
.app-header::before { background: rgba(44, 22, 84, 0.97) }
.app-header .brand {
 display: flex;
 align-items: center;
 flex: none }
.app-header .brand .logo-icon {
 width: auto;
 height: 34px }
.app-header .bar nav a { position: relative }
.app-header .bar nav a.on { background: transparent }
.app-header .bar nav a.on::after {
 position: absolute;
 right: var(--s3);
 bottom: calc((var(--header-h) - 100%) / -2);
 left: var(--s3);
 border-radius: 2px 2px 0 0;
 height: 3px;
 background: var(--gold-500);
 content: '' }
.app-header .search-input {
 color: var(--muted);
 background: #FFFFFF }
.app-header .search-input input { color: var(--text) }
.app-header .search-input input::placeholder { color: var(--muted) }
.app-header .btn-line { min-height: 40px }
/* الشعار الكتابي يظهر على كل المقاسات، والأيقونة المنفردة لم تعد تُستخدم في الرأس */
.app-header .brand .logo-icon { display: none }
@media (max-width: 1022px) {
 .app-header .brand .logo { height: 26px }
 .app-header .hbtn, .app-header .theme-btn, .m-side-head .hbtn {
  padding: 0;
  -webkit-appearance: none;
  appearance: none }
 .app-header .hbtn .icon, .app-header .theme-btn svg, .m-side-head .hbtn .icon {
  display: block;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  max-width: none;
  flex: none }
 .app-header .hbtn .icon, .m-side-head .hbtn .icon { stroke-width: 2 }
 .app-header .theme-btn svg { stroke-width: 2 }
 .app-header .actions { gap: 2px }
 .app-header .actions > .btn-line { min-height: 40px; padding-inline: var(--s3); font-weight: 600 } }
/* حقول البحث: يمنع سفاري من رسم أيقونة بحث ثانية فوق أيقونة الموقع */
.search-input input[type="search"] {
  -webkit-appearance: none;
  appearance: none }
.search-input input[type="search"]::-webkit-search-decoration { display: none }
.profile-banner {
 border-bottom: 1px solid var(--gold-200);
 color: var(--text);
 background: var(--warning-bg) }
.profile-banner .container {
 display: flex;
 padding-block: var(--s2);
 font-size: var(--fs-14);
 align-items: center;
 gap: var(--s3) }
.profile-banner .icon { color: var(--warning) }
.mtop {
 display: flex;
 position: sticky;
 top: 0;
 padding: 0 var(--gutter);
 border-bottom: 1px solid var(--border);
 min-height: 60px;
 background: var(--surface);
 align-items: center;
 gap: var(--s2);
 z-index: 45 }
.mtop-btn {
 display: inline-flex;
 position: relative;
 padding: 0;
 border: 0;
 border-radius: var(--r-sm);
 width: 44px;
 height: 44px;
 color: var(--text);
 background: transparent;
 align-items: center;
 justify-content: center;
 flex: none;
 cursor: pointer }
.mtop-btn .badge-count {
 top: 0;
 left: 0 }
.mtop-title {
 font-size: var(--fs-20);
 font-weight: 600;
 flex: 1 }
.mtop-actions {
 display: flex;
 margin-inline-start: auto;
 align-items: center;
 gap: var(--s1) }
.mtop-search {
 min-height: 44px;
 flex: 1 }
.mtop .fav-top.on { color: var(--accent-ink) }
.mtop .fav-top.on .icon { fill: currentColor }
.clear-q {
 display: inline-flex;
 padding: 0;
 border: 0;
 width: 32px;
 height: 32px;
 color: var(--muted);
 background: none;
 align-items: center;
 justify-content: center;
 cursor: pointer }
@media (min-width: 1023px) {
 .mtop { display: none } }
@media (max-width: 1022px) {
 body:has(#app .mtop) { padding-top: 0 }
 body:has(#app .mtop) .app-header { display: none }
 .mtop .suggest {
  position: fixed;
  top: 60px;
  right: 0;
  bottom: 0;
  left: 0;
  border: 0;
  border-radius: 0;
  max-height: none;
  box-shadow: none } }
.bottom-nav a.on::before {
 position: absolute;
 top: 0;
 right: calc(50% - 12px);
 border-radius: 0 0 2px 2px;
 width: 24px;
 height: 3px;
 background: var(--gold-500);
 content: '' }
.bottom-nav a.on { font-weight: 700 }

/* ===== اقتراحات البحث ===== */
.has-suggest { position: relative }
.suggest {
 position: absolute;
 top: calc(100% + 6px);
 right: 0;
 left: 0;
 padding: var(--s2) 0;
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 max-height: 70vh;
 color: var(--text);
 text-align: right;
 background: var(--surface);
 box-shadow: var(--shadow-3);
 z-index: 70;
 overflow-y: auto }
.sg-sec + .sg-sec {
 margin-top: var(--s1);
 padding-top: var(--s1);
 border-top: 1px solid var(--border) }
.sg-head {
 display: flex;
 padding: var(--s2) var(--s4) var(--s1);
 font-size: var(--fs-12);
 font-weight: 600;
 color: var(--muted);
 align-items: center;
 justify-content: space-between }
.sg-item {
 display: flex;
 padding: var(--s2) var(--s4);
 min-height: 48px;
 font-size: var(--fs-14);
 color: var(--text);
 align-items: center;
 gap: var(--s3) }
.sg-item:hover, .sg-item:focus {
 color: var(--text);
 background: var(--purple-50);
 outline: none;
 text-decoration: none }
.sg-item > .icon {
 color: var(--muted);
 flex: none }
.sg-item b { font-weight: 700 }
.sg-meta {
 font-size: var(--fs-12);
 color: var(--muted) }
.sg-item .verified { flex: none }

/* ===== التذييل ===== */
.app-footer .foot-logo img {
 width: auto;
 height: 36px;
 object-fit: contain }
.app-footer .stack p.foot-about {
 max-width: 46ch;
 font-size: var(--fs-14);
 line-height: 1.9;
 color: var(--purple-200) }
.app-footer.full .pay { margin: var(--s3) 0 0 }
.app-footer.full .pay img {
 padding: 2px 6px;
 height: 26px }

/* ===== الدخول والتسجيل ===== */
body.auth-route { padding-top: 0 }
body.auth-route #hdr { display: none }
body.auth-route main#app { min-height: 100vh }
.auth-page {
 display: flex;
 min-height: 100vh;
 background: var(--ivory);
 flex-direction: column }
.auth-body {
 padding: var(--s5) var(--gutter) var(--s7);
 flex: 1 }
.auth-head {
 border-bottom: 1px solid var(--border);
 background: var(--surface) }
.auth-head.purple {
 border-bottom: 0;
 color: #FFFFFF;
 background: var(--purple-900) }
.auth-head .container {
 display: flex;
 min-height: 72px;
 align-items: center;
 justify-content: space-between }
.auth-head .row { gap: var(--s3) }
.auth-brand { display: inline-flex }
.auth-brand img {
 width: auto;
 height: 36px;
 object-fit: contain }
.auth-foot {
 display: flex;
 padding: var(--s5) max(var(--gutter), calc((100% - 1232px) / 2));
 border-top: 1px solid var(--border);
 font-size: var(--fs-14);
 color: var(--muted);
 background: var(--surface);
 align-items: center;
 justify-content: space-between }
.auth-foot nav {
 display: flex;
 gap: var(--s5) }
.auth-title {
 display: flex;
 margin-bottom: var(--s5);
 flex-direction: column;
 gap: var(--s2) }
.auth-title h1 {
 font-size: 1.75rem;
 font-weight: 600 }
.auth-title p { color: var(--muted) }
.auth-mark {
 display: inline-flex;
 margin-bottom: var(--s5) }
.auth-mark img {
 width: auto;
 height: 44px }
.auth-switch {
 margin-top: var(--s5);
 font-size: var(--fs-14);
 text-align: center }
.auth-switch a { font-weight: 700 }
.auth-row { min-height: 44px }
.auth-escrow {
 display: flex;
 margin-top: var(--s7);
 padding-top: var(--s5);
 border-top: 1px solid var(--border);
 font-size: var(--fs-14);
 color: var(--muted);
 align-items: center;
 justify-content: center;
 gap: var(--s2) }
.auth-escrow .icon { color: var(--purple-700) }
.auth-alert {
 display: flex;
 margin-bottom: var(--s4);
 padding: var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 font-size: var(--fs-14);
 background: var(--surface);
 align-items: flex-start;
 gap: var(--s3) }
.auth-alert > .icon { flex: none }
.auth-alert b {
 display: block;
 margin-bottom: 2px }
.auth-alert p { color: var(--text-2) }
.auth-alert.danger {
 border-color: #E9B9B5;
 background: var(--danger-bg) }
.auth-alert.danger > .icon { color: var(--danger) }
.auth-alert.success {
 border-color: #A9D8C0;
 background: var(--success-bg) }
.auth-alert.success > .icon { color: var(--success) }
.auth-alert.warning {
 border-color: var(--gold-200);
 background: var(--warning-bg) }
.auth-alert.warning > .icon { color: var(--warning) }
.auth-card {
 margin-inline: auto;
 width: 100%;
 max-width: 480px }
.center-card {
 text-align: center;
 align-items: center }
.lbl, .form-sec {
 font-size: var(--fs-14);
 font-weight: 500;
 color: var(--text) }
.form-sec {
 margin: var(--s2) 0 var(--s1);
 font-size: var(--fs-18);
 font-weight: 600 }
.form-sec small {
 font-size: var(--fs-14);
 font-weight: 400;
 color: var(--muted) }
.segmented.wide {
 display: flex;
 width: 100% }
.segmented.wide > * {
 justify-content: center;
 flex: 1 }
.segmented label {
 display: inline-flex;
 position: relative;
 padding: var(--s2) var(--s4);
 border-radius: 9px;
 min-height: 40px;
 font-weight: 600;
 color: var(--text-2);
 align-items: center;
 justify-content: center;
 cursor: pointer }
.segmented label.on {
 color: var(--accent-ink);
 background: var(--surface);
 box-shadow: var(--shadow-1) }
.segmented label input {
 position: absolute;
 opacity: 0;
 pointer-events: none }
@media (max-width: 1022px) {
 .auth-head, .auth-foot { display: none }
 .auth-card.card {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none } }

/* ===== الحقول بعنوان فوقها ===== */
.lbl-top .field .field-box { padding-top: 28px }
.lbl-top .field .field-box label {
 position: absolute;
 top: 0;
 right: 0;
 font-size: var(--fs-14);
 font-weight: 500;
 color: var(--text);
 transform: none }
.lbl-top .field input, .lbl-top .field select {
 padding: 0 var(--s4);
 min-height: 52px }
.lbl-top .field select {
 padding-inline-start: var(--s4);
 padding-inline-end: var(--s7) }
.lbl-top .field textarea { padding: var(--s3) var(--s4) }
.lbl-top .field .chev { top: calc(28px + 18px) }
.lbl-top .field .addon { top: 28px }
.lbl-top .field.invalid .field-box label { color: var(--danger) }
.lbl-top .field.has-prefix .prefix {
 top: 28px;
 margin: 12px 0;
 padding-right: var(--s3);
 border-right: 1px solid var(--border);
 font-weight: 600;
 color: var(--text) }
.lbl-top .field.has-prefix input { padding-left: 80px }
.lead-ic {
 display: flex;
 position: absolute;
 top: 28px;
 right: var(--s4);
 bottom: 0;
 color: var(--muted);
 align-items: center;
 pointer-events: none }
.lbl-top .field.has-lead input { padding-inline-start: 48px }
.field .hint.ok { color: var(--success) }
.lbl-top .hint {
 display: block;
 margin-top: var(--s1);
 font-size: var(--fs-12);
 color: var(--muted) }
.field .error {
 display: flex;
 align-items: center;
 gap: var(--s1) }

/* ===== تسجيل الدخول المقسوم ===== */
.auth-split {
 display: grid;
 min-height: 100vh;
 background: var(--ivory) }
.auth-form-side {
 display: flex;
 padding: var(--s6) var(--gutter);
 flex-direction: column }
.auth-form-wrap {
 display: flex;
 margin: 0 auto;
 width: 100%;
 max-width: 420px;
 flex-direction: column;
 flex: 1 }
.auth-form-wrap > .oauth-or { margin-top: var(--s4) }
.auth-form-wrap [data-phone-login] { margin-top: var(--s3) }
.auth-brand-side { display: none }
@media (min-width: 1023px) {
 .auth-split { grid-template-columns: 1fr 1fr }
 .auth-form-side { padding: var(--s6) var(--s7) 0 }
 .auth-form-side > .auth-brand { align-self: flex-start }
 .auth-form-wrap { justify-content: center }
 .auth-form-side .auth-foot {
  margin: 0 calc(var(--s7) * -1);
  border-top: 0;
  background: transparent }
 .auth-brand-side {
  display: flex;
  padding: var(--s8);
  color: #FFFFFF;
  background: var(--purple-900);
  align-items: center }
 .auth-brand-side > div {
  width: 100%;
  max-width: 520px }
 .auth-brand-side h2 {
  margin-bottom: var(--s7);
  font-size: var(--fs-32);
  line-height: 1.5 }
 .auth-brand-side ol {
  margin: 0;
  padding: 0;
  list-style: none }
 .auth-brand-side li {
  display: flex;
  padding: var(--s5) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--fs-18);
  align-items: center;
  gap: var(--s5) }
 .auth-brand-side li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14) }
 .auth-brand-side li .num {
  font-weight: 700;
  color: var(--gold-500) }
 .auth-title h1 { font-size: var(--fs-32) } }
.suspend-modal .suspend-ic {
 display: block;
 margin-bottom: var(--s2);
 color: var(--danger) }
.suspend-modal .suspend { gap: var(--s4) }
@media (max-width: 1022px) {
 .suspend-modal .modal-head [data-close] { display: none }
 .suspend-modal .suspend-ic { margin-top: var(--s4) } }

/* ===== نوع الحساب ===== */
.type-form {
 margin: 0 auto;
 max-width: 880px }
.type-grid {
 display: grid;
 gap: var(--s4) }
.type-card {
 display: grid;
 position: relative;
 padding: var(--s5);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 background: var(--surface);
 grid-template-columns: auto 1fr;
 gap: var(--s2) var(--s3);
 cursor: pointer;
 transition: border-color var(--t-fast), background-color var(--t-fast) }
.type-card:has(input:checked) {
 border: 2px solid var(--purple-900);
 background: var(--purple-50) }
.type-card input {
 position: absolute;
 opacity: 0;
 pointer-events: none }
.type-card:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--purple-100) }
.type-top {
 display: flex;
 align-items: center;
 gap: var(--s3);
 grid-row: span 2 }
.type-top .icon { color: var(--purple-900) }
.radio-dot {
 position: relative;
 border: 2px solid var(--border-strong);
 border-radius: 50%;
 width: 24px;
 height: 24px;
 flex: none }
.type-card:has(input:checked) .radio-dot { border-color: var(--purple-900) }
.type-card:has(input:checked) .radio-dot::after {
 position: absolute;
 border-radius: 50%;
 background: var(--purple-900);
 inset: 4px;
 content: '' }
.type-title {
 display: flex;
 flex-direction: column }
.type-title b {
 font-size: var(--fs-20);
 font-weight: 600 }
.type-title small {
 font-size: var(--fs-14);
 color: var(--muted) }
.type-note {
 display: flex;
 font-size: var(--fs-14);
 font-weight: 500;
 align-items: center;
 gap: var(--s2);
 grid-column: 2 }
.type-note.ok { color: var(--success) }
.type-note.gold { color: var(--gold-700) }
.type-card .sq-list {
 font-size: var(--fs-14);
 grid-column: 1 / -1 }
.type-foot {
 display: flex;
 margin-top: var(--s7);
 flex-direction: column;
 gap: var(--s5) }
.type-foot .btn { width: 100% }
@media (min-width: 1023px) {
 .type-page .auth-body { padding-top: var(--s8) }
 .type-grid {
  grid-template-columns: 1fr 1fr;
  gap: var(--s5) }
 .type-card {
  padding: var(--s6) var(--s6) var(--s5);
  grid-template-columns: 1fr;
  gap: var(--s4) }
 .type-top {
  flex-direction: row-reverse;
  justify-content: space-between;
  grid-row: auto }
 .type-note {
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  grid-column: auto }
 .type-foot {
  margin-top: var(--s6);
  flex-direction: row;
  align-items: center;
  justify-content: space-between }
 .type-foot .escrow-box {
  padding: 0;
  border: 0;
  background: none }
 .type-foot .btn { width: 200px } }

/* ===== تسجيل المشتري والمورد ===== */
.signup-wrap {
 margin: 0 auto;
 max-width: 1040px }
.signup-grid {
 display: grid;
 gap: var(--s5);
 align-items: start }
.signup-card {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.signup-card .divider { margin: var(--s2) 0 }
.company-sec {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.form-grid.tight { gap: var(--s3) }
.signup-actions {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.signup-actions .btn { width: 100% }
.signup-side {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.side-title {
 margin-bottom: var(--s3);
 font-size: var(--fs-18);
 font-weight: 600 }
.num-list {
 margin: 0;
 padding: 0;
 font-size: var(--fs-14);
 list-style: none }
.num-list li {
 display: flex;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 align-items: flex-start;
 gap: var(--s3) }
.num-list li:last-child { border-bottom: 0 }
.num-list .num {
 font-weight: 700;
 color: var(--gold-600) }
.crumb-back {
 display: inline-flex;
 margin-bottom: var(--s2);
 font-size: var(--fs-14);
 align-items: center;
 gap: var(--s1) }
@media (max-width: 1022px) {
 .signup-card.card {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none } }
@media (min-width: 1023px) {
 .signup-grid { grid-template-columns: minmax(0, 1fr) 324px }
 .signup-card { padding: var(--s6) }
 .signup-actions {
  flex-direction: row;
  align-items: center;
  justify-content: space-between }
 .signup-actions .btn { width: 200px } }
.sup-page .auth-body { padding-top: var(--s5) }
.supplier-grid {
 margin: 0 auto;
 max-width: 1110px }
.supplier-side li.on .n { color: var(--purple-900) }
.seg3 span {
 padding: var(--s3) 0 0;
 border-top: 4px solid var(--border);
 border-bottom: 0;
 text-align: right }
.seg3 span.on, .seg3 span.done { border-top-color: var(--purple-900) }
.seg3 span.on { color: var(--accent-ink) }
.supplier-actions { flex-wrap: wrap }
.supplier-actions .btn-primary { flex: 1 1 200px }
.chip-set {
 margin: 0;
 padding: 0;
 border: 0 }
.chip-set legend { margin-bottom: var(--s2) }
.check-pill {
 position: relative;
 cursor: pointer }
.check-pill input {
 position: absolute;
 opacity: 0;
 pointer-events: none }
.check-pill .icon { display: none }
.check-pill:has(input:checked) {
 border-color: var(--purple-300);
 color: var(--purple-900);
 background: var(--purple-100) }
.check-pill:has(input:checked) .icon { display: block }
.check-pill:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--purple-100) }
.counter {
 display: block;
 margin-top: var(--s1);
 text-align: left }
@media (max-width: 1022px) {
 .supplier-main.card {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none }
 .supplier-actions .btn { min-height: 56px } }
@media (min-width: 1023px) {
 .supplier-main { padding: var(--s6) var(--s6) var(--s5) }
 .supplier-actions .btn-primary { flex: none } }

/* ===== مستندات التوثيق ===== */
.doc-list {
 display: grid;
 gap: var(--s4) }
.doc-row {
 display: grid;
 padding: var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 background: var(--surface);
 grid-template-columns: 1fr auto;
 grid-template-areas: 'info state' 'file file';
 gap: var(--s3) }
.doc-info {
 display: flex;
 flex-direction: column;
 grid-area: info }
.doc-state { grid-area: state }
.doc-file {
 display: flex;
 flex-direction: column;
 gap: var(--s3);
 grid-area: file }
.file-box {
 display: flex;
 padding: var(--s3);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 min-height: 56px;
 align-items: center;
 gap: var(--s3) }
.file-box > .icon { flex: none }
.file-box.error {
 border-color: var(--danger);
 color: var(--danger) }
.file-box .bar-track {
 display: block;
 margin-top: var(--s1);
 height: 4px }
.file-box .spinner {
 color: var(--purple-700);
 flex: none }
.drop-zone {
 display: flex;
 padding: var(--s5) var(--s4);
 border: 1px dashed var(--purple-300);
 border-radius: var(--r-sm);
 width: 100%;
 color: var(--purple-700);
 background: var(--purple-50);
 flex-direction: column;
 align-items: center;
 gap: var(--s1);
 cursor: pointer }
.drop-zone:hover, .drop-zone.drag-on { border-color: var(--purple-700) }
.drop-zone.drag-on { background: var(--purple-100) }
.doc-file .cal-addon {
 display: flex;
 color: var(--muted);
 align-items: center;
 pointer-events: none }
.docs-actions {
 margin-top: var(--s5);
 align-items: center }
.docs-actions p { flex-basis: 100% }
@media (min-width: 1023px) {
 .doc-list {
  border-top: 1px solid var(--border);
  gap: 0 }
 .doc-row {
  padding: var(--s4) 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
  grid-template-columns: 220px minmax(0, 1fr) 120px;
  grid-template-areas: 'info file state';
  align-items: center }
 .doc-state { text-align: left }
 .doc-row .drop-zone {
  padding: var(--s3) var(--s4);
  min-height: 48px;
  flex-direction: row;
  justify-content: center;
  gap: var(--s2) }
 .doc-row .drop-zone b {
  font-size: var(--fs-14);
  font-weight: 500 }
 .doc-row .file-box {
  padding: var(--s2) var(--s3);
  min-height: 48px }
 .doc-row .doc-file:has(.field) {
  flex-direction: row;
  align-items: flex-end }
 .doc-row .doc-file > .drop-zone, .doc-row .doc-file > .file-box { flex: 1 }
 .doc-row .doc-file > .field {
  width: 168px;
  flex: none }
 .doc-row .doc-file:has(.field) .drop-zone {
  padding-inline: var(--s2);
  white-space: nowrap }
 .doc-row .doc-file > .field .hint { display: none }
 .doc-row .doc-file > .field input { height: 48px }
 .docs-actions p {
  margin-inline-start: auto;
  flex-basis: auto } }

/* ===== رمز التحقق ===== */
.otp-card .auth-title p a { margin-inline-start: var(--s1) }
.otp {
 display: grid;
 margin: var(--s2) 0;
 grid-template-columns: repeat(var(--n, 6), minmax(0, 56px));
 justify-content: center;
 gap: var(--s2) }
.otp input {
 width: 100%;
 min-width: 0;
 height: 56px;
 font-size: var(--fs-24) }
.otp input:not(:placeholder-shown) { border-color: var(--purple-900) }
.has-error .otp input, .has-error .otp input:not(:placeholder-shown) { border-color: var(--danger) }
.otp-help { margin-top: var(--s5) }
.otp-msg {
 display: flex;
 font-size: var(--fs-14);
 color: var(--danger);
 align-items: center;
 justify-content: center;
 gap: var(--s1) }
.otp-timer {
 display: flex;
 font-size: var(--fs-14);
 color: var(--muted);
 align-items: center;
 justify-content: center;
 gap: var(--s2) }
.otp-timer b { color: var(--text) }
.otp-resend {
 display: inline-flex;
 margin: 0 auto;
 min-height: 44px;
 font-size: var(--fs-16);
 align-items: center;
 gap: var(--s2) }
.otp-card .btn-primary[disabled] {
 color: var(--muted);
 background: var(--border);
 opacity: 1 }
@media (min-width: 1023px) {
 .otp-card {
  margin-top: var(--s7);
  padding: var(--s6) }
 .otp input { height: 56px } }
.reset-card .segmented { margin-bottom: var(--s2) }
@media (max-width: 1022px) {
 .pin-page .auth-body {
  display: flex;
  flex-direction: column }
 .pin-page .auth-card { flex: 1 }
 .pin-page .auth-card > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s4) }
 .pin-page .auth-card > form > .btn { margin-top: auto }
 .type-main {
  display: flex;
  min-height: calc(100dvh - 61px - var(--s5) - var(--s4));
  flex-direction: column }
 .type-main .type-foot {
  margin-top: auto;
  padding-top: var(--s7) } }
.strength-row { margin-top: var(--s2) }
.strength-row .s3, .strength-row .s4 { color: var(--success) }
.strength-row .s2 { color: var(--warning) }
.strength-row .s1, .strength-row .s0 { color: var(--danger) }
.pw-rules {
 margin-top: var(--s3);
 font-size: var(--fs-14);
 color: var(--text-2) }
.pw-rules li.ok { color: var(--success) }
@media (min-width: 1023px) {
 .reset-card, .auth-card.card {
  margin-top: var(--s7);
  padding: var(--s6) } }

/* ===== حالة التوثيق ===== */
.review-page { padding-block: var(--s6) var(--s7) }
.review-main {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.review-ic { color: var(--gold-600) }
.review-ic.approved { color: var(--success) }
.review-ic.rejected { color: var(--danger) }
.lead-text {
 font-size: var(--fs-18);
 line-height: 1.8 }
.review-card { padding: var(--s5) }
.rv-timeline {
 margin: 0;
 padding: 0;
 list-style: none }
.rv-timeline li {
 display: flex;
 position: relative;
 padding: 0 var(--s6) var(--s5) 0;
 flex-direction: column;
 gap: 2px }
.rv-timeline li::before {
 position: absolute;
 top: 6px;
 right: 0;
 border: 2px solid var(--border-strong);
 border-radius: 3px;
 width: 14px;
 height: 14px;
 background: var(--surface);
 content: '' }
.rv-timeline li::after {
 position: absolute;
 top: 24px;
 right: 7px;
 bottom: 4px;
 width: 1px;
 background: var(--border);
 content: '' }
.rv-timeline li:last-child { padding-bottom: 0 }
.rv-timeline li:last-child::after { display: none }
.rv-timeline li.done::before {
 border-color: var(--success);
 background: var(--success) }
.rv-timeline li.now::before { border-color: var(--gold-500) }
.rv-timeline b { font-size: var(--fs-16) }
.rv-timeline span {
 font-size: var(--fs-14);
 color: var(--muted) }
.review-actions {
 display: flex;
 flex-direction: column;
 gap: var(--s2) }
.review-actions .btn-outline {
 border-color: transparent;
 color: var(--link);
 background: none }
@media (min-width: 1023px) {
 .review-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  column-gap: var(--s8);
  align-items: start }
 .review-main > * { grid-column: 1 }
 .review-main > .review-card {
  grid-row: 1 / span 6;
  grid-column: 2 }
 .review-main h1 { font-size: var(--fs-32) }
 .review-actions { flex-direction: row }
 .review-actions .btn-outline {
  border-color: var(--purple-900);
  color: var(--text);
  background: var(--surface) } }

/* ===== بطاقات المنتج والمورد ===== */
.p-card .fav {
 border-radius: var(--r-sm);
 width: 44px;
 height: 44px }
.p-card .media { display: block }
.p-card .name { color: var(--text) }
.p-card .name:hover { color: var(--link-hover) }
.p-card .store {
 display: flex;
 align-items: center;
 gap: var(--s2) }
.p-card .price {
 display: flex;
 padding-top: var(--s1);
 font-size: var(--fs-14);
 font-weight: 400;
 align-items: baseline;
 flex-wrap: wrap;
 gap: var(--s1) }
.p-card .price .money {
 font-size: var(--fs-20);
 font-weight: 700 }
.p-card .price .unit {
 font-size: var(--fs-14);
 color: var(--text-2) }
.p-card .moq { color: var(--muted) }
.p-card .act { margin-top: var(--s3) }
.p-card .status { font-size: var(--fs-14) }
.p-card.is-out .media img { opacity: 0.55 }
.p-card.is-out .price { color: var(--muted) }
.p-card:hover { transform: none }
.prod-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: var(--s3) }
.prod-grid .p-card .act { display: none }
.prod-grid.one-col { grid-template-columns: 1fr }
.prod-grid.one-col .p-card .act { display: block }
@media (min-width: 767px) {
 .prod-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4) }
 .prod-grid.one-col { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (min-width: 1023px) {
 .prod-grid .p-card .act { display: block }
 .prod-grid.one-col { grid-template-columns: repeat(4, minmax(0, 1fr)) }
 .prod-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
 .prod-grid.two.store-prods { grid-template-columns: repeat(3, minmax(0, 1fr)) }
 .browse:not(.has-side) .prod-grid:not(.one-col) { grid-template-columns: repeat(4, minmax(0, 1fr)) }
 .app-header nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center }
 .app-header .brand { min-height: 44px } }
.p-row {
 display: grid;
 position: relative;
 padding: var(--s3);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 background: var(--surface);
 grid-template-columns: 96px minmax(0, 1fr) auto;
 gap: var(--s3) }
.p-row .media {
 border-radius: var(--r-sm);
 aspect-ratio: 1;
 overflow: hidden }
.p-row .media img {
 width: 100%;
 height: 100%;
 object-fit: cover }
.p-row .body {
 display: flex;
 flex-direction: column;
 gap: 2px }
.p-row .name {
 font-weight: 600;
 color: var(--text) }
.p-row .store, .p-row .moq {
 font-size: var(--fs-12);
 color: var(--muted) }
.p-row .fav {
 padding: 0;
 border: 0;
 width: 44px;
 height: 44px;
 color: var(--text-2);
 background: none;
 cursor: pointer }
.p-row .fav.on { color: var(--accent-ink) }
.p-row .fav.on .icon { fill: currentColor }
.s-card {
 display: flex;
 padding: var(--s5);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 background: var(--surface);
 flex-direction: column;
 gap: var(--s3) }
.s-head {
 display: flex;
 color: var(--text);
 align-items: flex-start;
 gap: var(--s3) }
.s-head:hover { color: var(--text) }
.s-head .grow {
 display: flex;
 flex-direction: column }
.s-head .name {
 font-size: var(--fs-16);
 font-weight: 600 }
.s-head .meta, .s-row .meta {
 display: flex;
 font-size: var(--fs-12);
 color: var(--muted);
 align-items: center;
 gap: 2px }
.s-card .sq-av, .s-row .sq-av {
 width: 48px;
 height: 48px }
.s-stats {
 display: grid;
 padding-top: var(--s3);
 border-top: 1px solid var(--border);
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: var(--s2) }
.s-stats > div {
 display: flex;
 flex-direction: column;
 gap: 2px }
.s-stats b {
 display: inline-flex;
 font-size: var(--fs-16);
 font-weight: 700;
 align-items: center;
 gap: var(--s1) }
.s-stats b .icon {
 color: var(--gold-500);
 fill: currentColor }
.s-stats span {
 font-size: var(--fs-12);
 color: var(--muted) }
.s-row {
 display: flex;
 padding: var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 color: var(--text);
 background: var(--surface);
 align-items: center;
 gap: var(--s3) }
.s-row:hover {
 color: var(--text);
 text-decoration: none }
.s-row .grow {
 display: flex;
 flex-direction: column;
 gap: 2px }
.s-row .name { font-size: var(--fs-16) }
.s-row .rate {
 display: inline-flex;
 font-size: var(--fs-14);
 align-items: center;
 gap: var(--s1);
 flex: none }
.s-row .rate .icon {
 color: var(--gold-500);
 fill: currentColor }
.store-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
 gap: var(--s4) }

/* ===== الرئيسية ===== */
.home-hero {
 position: relative;
 padding: var(--s4) 0 var(--s6);
 color: #FFFFFF;
 background: var(--purple-900);
 overflow: hidden }
.home-hero::before {
 position: absolute;
 background: url('/assets/pattern/pattern.png') center / 320px repeat;
 opacity: 0.35;
 inset: 0;
 content: '';
 pointer-events: none }
.hero-grid {
 display: grid;
 position: relative;
 gap: var(--s6);
 align-items: center }
.hero-copy {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.hero-copy h1 {
 font-size: clamp(1.75rem, 7vw, 3.25rem);
 line-height: 1.3 }
.hero-copy .lead { color: var(--purple-200) }
.hero-search {
 border-color: transparent;
 min-height: 52px;
 background: #FFFFFF }
.hero-search input { color: var(--text) }
.hero-search > span { color: var(--purple-700) }
.hero-cta {
 display: grid;
 grid-template-columns: 2fr 1fr;
 gap: var(--s3) }
.hero-tags {
 display: flex;
 color: var(--purple-200);
 align-items: center;
 flex-wrap: wrap;
 gap: var(--s2) }
.pill-light {
 border-color: rgba(255, 255, 255, 0.3);
 color: #FFFFFF;
 background: transparent }
.pill-light:hover {
 border-color: #FFFFFF;
 color: #FFFFFF }
@media (max-width: 1022px) {
 .wide-search { display: none } }
@media (min-width: 1023px) {
 .home-hero { padding: var(--s8) 0 }
 .hero-grid { grid-template-columns: minmax(0, 1fr) 420px }
 .narrow-search { display: none }
 .hero-search {
  min-height: 60px;
  max-width: 600px }
 .hero-cta { display: flex } }
.demo-card {
 display: flex;
 color: var(--text);
 flex-direction: column;
 gap: var(--s4) }
.demo-prod b { font-size: var(--fs-16) }
.demo-rows { margin: 0 }
.demo-rows > div {
 display: flex;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 font-size: var(--fs-14);
 justify-content: space-between }
.demo-rows dt { color: var(--muted) }
.demo-rows dd {
 margin: 0;
 font-weight: 600 }
.demo-total {
 display: flex;
 align-items: flex-end;
 justify-content: space-between }
.demo-total b {
 display: block;
 font-size: var(--fs-24) }
.demo-total .icon { color: var(--purple-700) }
.mini-steps {
 display: grid;
 margin: 0;
 padding: 0;
 font-size: var(--fs-12);
 color: var(--muted);
 list-style: none;
 grid-template-columns: repeat(4, 1fr);
 gap: var(--s2) }
.mini-steps li {
 padding-top: var(--s2);
 border-top: 4px solid var(--border) }
.mini-steps li.done {
 border-top-color: var(--success);
 font-weight: 600;
 color: var(--success) }
.mini-steps li.now {
 border-top-color: var(--gold-500);
 font-weight: 600;
 color: var(--gold-700) }
.trust-band {
 border-bottom: 1px solid var(--border);
 background: var(--surface) }
.trust-row {
 display: grid;
 grid-template-columns: repeat(3, 1fr) }
.trust-row > div {
 display: flex;
 padding: var(--s5);
 align-items: flex-start;
 gap: var(--s4) }
.trust-row > div + div { border-right: 1px solid var(--border) }
.trust-row h3 {
 font-size: var(--fs-16);
 font-weight: 600 }
.trust-row p {
 font-size: var(--fs-14);
 color: var(--muted) }
.trust-row .icon {
 color: var(--purple-700);
 flex: none }
.home-body { padding-top: var(--s5) }
.home-sec { margin-top: var(--s7) }
.banner-list { margin-bottom: var(--s5) }
.banner-list[hidden] { display: none }
[data-feature] > .stack { margin-top: var(--s4) }
.feature-card {
 display: grid;
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 color: var(--text);
 background: var(--surface);
 overflow: hidden }
.feature-card:hover {
 color: var(--text);
 text-decoration: none }
.feature-card .pic {
 background: var(--surface-2);
 order: -1;
 aspect-ratio: 16 / 7 }
.feature-card .pic img, .feature-card .pic .ph {
 width: 100%;
 height: 100%;
 object-fit: cover }
.feature-card .txt {
 display: flex;
 padding: var(--s5);
 flex-direction: column;
 align-items: flex-start;
 gap: var(--s3) }
.feature-card .txt p { color: var(--text-2) }
.feature-card.only-pic .pic { order: 0 }
@media (max-width: 1022px) {
 .feature-card .txt { display: none } }
@media (min-width: 1023px) {
 .feature-card { grid-template-columns: 1fr 1fr }
 .feature-card .pic {
  height: 265px;
  order: 0;
  aspect-ratio: auto }
 .feature-card .txt {
  padding: var(--s6);
  justify-content: center }
 .feature-card .txt h2 { font-size: var(--fs-24) } }
.hscroll {
 display: flex;
 margin-inline: calc(var(--gutter) * -1);
 padding: var(--s1) var(--gutter);
 gap: var(--s3);
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 scrollbar-width: none }
.hscroll::-webkit-scrollbar { display: none }
.hscroll > * {
 scroll-snap-align: start;
 flex: 0 0 min(76%, 300px) }
.hscroll.prod-row > * { flex-basis: min(62%, 240px) }
.hscroll > .empty, .hscroll > .stack { flex: 1 0 100% }
@media (min-width: 1023px) {
 .hscroll {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  overflow: visible }
 .hscroll.prod-row { grid-template-columns: repeat(4, minmax(0, 1fr)) }
 .hscroll > .empty { grid-column: 1 / -1 } }
.cat-tile {
 display: flex;
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 color: var(--text);
 background: var(--surface);
 flex-direction: column;
 overflow: hidden }
.cat-tile:hover {
 color: var(--text);
 text-decoration: none }
.cat-tile .pic {
 display: block;
 background: var(--surface-2);
 aspect-ratio: 4 / 3 }
.cat-tile .pic img, .cat-tile .pic .ph {
 width: 100%;
 height: 100%;
 object-fit: cover }
.cat-tile .cap {
 display: flex;
 padding: var(--s4);
 align-items: flex-start;
 gap: var(--s3) }
.cat-tile .cap b {
 display: block;
 font-size: var(--fs-16);
 font-weight: 600 }
.cat-tile .cap small {
 font-size: var(--fs-12);
 color: var(--muted) }
.cat-tile .cnt { flex: none }
@media (max-width: 1022px) {
 .cat-tile .cap {
  flex-direction: column;
  gap: 0 } }
.escrow-card {
 display: grid;
 gap: var(--s4) }
.escrow-intro .sec-head { margin-bottom: var(--s2) }
.escrow-intro p { margin-bottom: var(--s3) }
.home-steps {
 margin: 0;
 padding: 0;
 list-style: none }
.home-steps li {
 display: grid;
 padding: var(--s4) 0;
 border-bottom: 1px solid var(--border);
 grid-template-columns: auto auto 1fr;
 column-gap: var(--s2);
 align-items: center }
.home-steps li:last-child { border-bottom: 0 }
.home-steps li::before {
 border: 2px solid var(--gold-500);
 border-radius: 3px;
 width: 14px;
 height: 14px;
 content: '' }
.home-steps li.last::before { background: var(--gold-500) }
.home-steps .n {
 font-weight: 700;
 color: var(--gold-700) }
.home-steps b { font-size: var(--fs-16) }
.home-steps p {
 font-size: var(--fs-14);
 color: var(--muted);
 grid-column: 1 / -1 }
@media (max-width: 1022px) {
 .home-steps .n { font-size: var(--fs-16) }
 .home-steps .n::before { content: '' } }
@media (min-width: 1023px) {
 .escrow-card {
  padding: var(--s6);
  grid-template-columns: 340px minmax(0, 1fr);
  gap: var(--s7) }
 .home-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5) }
 .home-steps li {
  padding: 0;
  border: 0;
  grid-template-columns: auto 1fr;
  row-gap: var(--s2) }
 .home-steps li::before { order: 2 }
 .home-steps .n { order: 1 }
 .home-steps b {
  font-size: var(--fs-18);
  order: 3;
  grid-column: 1 / -1 }
 .home-steps p { order: 4 } }
.join-banner {
 display: grid;
 position: relative;
 border-radius: var(--r-lg);
 color: #FFFFFF;
 background: var(--purple-900);
 overflow: hidden }
.join-banner::before {
 position: absolute;
 background: url('/assets/pattern/pattern.png') center / 320px repeat;
 opacity: 0.25;
 inset: 0;
 content: '';
 pointer-events: none }
.join-banner .txt {
 display: flex;
 position: relative;
 padding: var(--s6) var(--s5);
 flex-direction: column;
 gap: var(--s4) }
.join-banner .txt p { color: var(--purple-200) }
.join-banner .media {
 position: relative;
 padding: var(--s6) }
.join-banner .media img {
 border-radius: var(--r-md);
 width: 100%;
 height: 100%;
 object-fit: cover }
.sq-list.light li::before { border-color: var(--gold-500) }
@media (min-width: 1023px) {
 .join-banner { grid-template-columns: 1fr 1fr }
 .join-banner .txt {
  padding: var(--s7) var(--s7) var(--s7) 0;
  justify-content: center;
  order: 0 }
 .join-banner .txt { padding-inline-start: var(--s7) }
 .join-banner h2 { font-size: var(--fs-32) } }

/* ===== التصفح والتصفية ===== */
.browse { padding-bottom: var(--s7) }
.browse-layout {
 display: grid;
 gap: var(--s5);
 align-items: start }
.browse-head {
 display: flex;
 padding: var(--s4) 0 var(--s3);
 align-items: flex-end;
 justify-content: space-between;
 gap: var(--s3) }
.browse-head h1 { font-size: var(--fs-24) }
.browse-tools {
 display: grid;
 margin-bottom: var(--s3);
 grid-template-columns: 1fr 1fr;
 gap: var(--s3) }
.browse-tools .btn {
 border-color: var(--purple-900);
 border-radius: var(--r-sm);
 min-height: 48px }
.browse-tools .badge-count {
 position: static;
 border: 1px solid var(--purple-300);
 color: var(--purple-900);
 background: var(--surface) }
.browse-tools.cat-tools {
 display: flex;
 align-items: center;
 justify-content: space-between }
.browse-tools.cat-tools .btn {
 border: 0;
 color: var(--link) }
.applied { margin-bottom: var(--s4) }
.applied:empty { display: none }
.pill.on-soft {
 border-color: var(--purple-300);
 color: var(--purple-900);
 background: var(--purple-100) }
.sort-select {
 display: inline-flex;
 position: relative;
 padding: 0 var(--s3);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 min-height: 44px;
 background: var(--surface);
 align-items: center;
 gap: var(--s2) }
.sort-select > span {
 display: inline-flex;
 align-items: center;
 gap: var(--s1) }
.sort-select select {
 padding: 0 var(--s1) 0 var(--s5);
 border: 0;
 font-weight: 700;
 background: transparent;
 appearance: none;
 cursor: pointer }
.sort-select > .icon {
 position: absolute;
 left: var(--s3);
 pointer-events: none }
.all-shown {
 margin: var(--s5) 0;
 font-size: var(--fs-14);
 color: var(--muted);
 text-align: center }
.result-tabs {
 margin-inline: calc(var(--gutter) * -1);
 padding-inline: var(--gutter) }
.filter-side {
 position: sticky;
 top: calc(var(--header-h) + var(--s4));
 padding: var(--s5) var(--s5) var(--s3) }
.filter-form fieldset {
 margin: 0;
 padding: var(--s4) 0;
 border: 0;
 border-top: 1px solid var(--border) }
.filter-form legend {
 margin-bottom: var(--s3);
 width: 100%;
 font-size: var(--fs-14);
 font-weight: 700;
 float: right }
.filter-form fieldset > :not(legend) { clear: both }
.filter-form .check {
 min-height: 40px;
 align-items: center }
.filter-form .check.radio input { border-radius: 50% }
.range-row {
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 align-items: center;
 gap: var(--s2) }
.range-row .field-box { padding: 0 }
.range {
 width: 100%;
 accent-color: var(--purple-900) }
.tog { min-height: 44px }
.filter-sheet .modal-head [data-close] { display: none }
.filter-sheet .modal-foot .btn { width: 100% }
.sort-list {
 display: flex;
 flex-direction: column }
.sort-opt {
 display: flex;
 padding: var(--s3) 0;
 border: 0;
 border-bottom: 1px solid var(--border);
 min-height: 52px;
 color: var(--text);
 background: none;
 align-items: center;
 justify-content: space-between;
 cursor: pointer }
.sort-opt .icon {
 color: var(--purple-900);
 visibility: hidden }
.sort-opt.on { font-weight: 700 }
.sort-opt.on .icon { visibility: visible }
.empty-block {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.empty.slim { padding: var(--s7) var(--s4) var(--s4) }
.empty.slim > .icon { color: var(--purple-500) }
.empty.slim h3 { font-size: var(--fs-20) }
.hint-card {
 display: flex;
 margin-top: var(--s4);
 flex-direction: column;
 gap: var(--s2) }
.hint-card h3 {
 font-size: var(--fs-18);
 font-weight: 600 }
@media (min-width: 1023px) {
 .browse-layout.has-side, .has-side .browse-layout { grid-template-columns: 300px minmax(0, 1fr) }
 .browse-tools {
  display: flex;
  justify-content: flex-end }
 .browse-tools .btn { min-height: 44px }
 .browse-head h1 { font-size: var(--fs-32) }
 .result-tabs {
  margin-inline: 0;
  padding-inline: 0 }
 .empty-block {
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface) }
 .empty-block .hint-card {
  padding: 0;
  border: 0;
  text-align: center;
  box-shadow: none;
  align-items: center } }
.cat-hero { padding-top: var(--s4) }
.cat-hero-in {
 display: grid;
 gap: var(--s5);
 align-items: center }
.cat-pic {
 position: relative;
 border-radius: var(--r-md);
 aspect-ratio: 2 / 1;
 overflow: hidden }
.cat-pic img, .cat-pic .ph {
 width: 100%;
 height: 100%;
 object-fit: cover }
.cat-badge {
 display: flex;
 position: absolute;
 bottom: var(--s3);
 left: var(--s3);
 padding: var(--s2) var(--s4);
 border-radius: var(--r-sm);
 color: #FFFFFF;
 background: rgba(44, 22, 84, 0.86);
 flex-direction: column }
.cat-badge b { font-size: var(--fs-18) }
.cat-badge small {
 font-size: var(--fs-14);
 color: var(--purple-200) }
.cat-copy {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.cat-copy h1 { font-size: var(--fs-32) }
.cat-counts {
 display: flex;
 gap: var(--s5) }
.sub-chips {
 margin-top: var(--s4);
 margin-bottom: var(--s3) }
.sub-chips .pill .num {
 font-size: var(--fs-12);
 color: var(--muted) }
.sub-chips .pill.on {
 border-color: var(--purple-300);
 color: var(--purple-900);
 background: var(--purple-100) }
@media (min-width: 1023px) {
 .cat-hero {
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface) }
 .cat-hero-in { grid-template-columns: minmax(0, 1fr) 420px }
 .cat-pic { aspect-ratio: 16 / 9 }
 .sub-chips { margin-top: var(--s5) } }

/* ===== صفحة المنتج ===== */
.product-page { padding-bottom: calc(var(--s8) + var(--s6)) }
.pd-grid {
 display: grid;
 gap: var(--s4) }
.pd-gallery { margin-inline: calc(var(--gutter) * -1) }
.gallery-main {
 display: flex;
 background: var(--surface-2);
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 scrollbar-width: none }
.gallery-main::-webkit-scrollbar { display: none }
.gallery-main .slide {
 aspect-ratio: 1;
 flex: 0 0 100%;
 scroll-snap-align: start }
.gallery-main img, .gallery-main .ph {
 width: 100%;
 height: 100%;
 object-fit: cover }
.dots {
 display: flex;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 background: var(--surface);
 justify-content: center;
 gap: 6px }
.dots span {
 border-radius: 2px;
 width: 8px;
 height: 8px;
 background: var(--border) }
.dots span.on { background: var(--purple-900) }
.thumbs {
 display: flex;
 margin-top: var(--s3);
 gap: var(--s2) }
.thumbs button {
 padding: 0;
 border: 2px solid transparent;
 border-radius: var(--r-sm);
 width: 80px;
 height: 80px;
 background: var(--surface-2);
 cursor: pointer;
 overflow: hidden }
.thumbs button.on { border-color: var(--purple-900) }
.thumbs img {
 width: 100%;
 height: 100%;
 object-fit: cover }
.pd-info {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.pd-info h1 { font-size: var(--fs-24) }
.pd-store-inline {
 display: flex;
 margin-top: calc(var(--s2) * -1);
 font-size: var(--fs-14);
 color: var(--text-2);
 align-items: center;
 gap: var(--s2) }
.pd-price {
 display: flex;
 font-size: var(--fs-14);
 align-items: baseline;
 flex-wrap: wrap;
 gap: var(--s2) }
.pd-price .money {
 font-size: var(--fs-32);
 font-weight: 700 }
.pd-flags {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: var(--s3) }
.store-strip {
 display: flex;
 padding: var(--s4);
 color: var(--text);
 align-items: center;
 gap: var(--s3) }
.store-strip:hover { color: var(--text) }
.store-strip .grow {
 display: flex;
 flex-direction: column;
 gap: 2px }
.spec-grid {
 display: grid;
 padding: 0;
 grid-template-columns: 1fr 1fr;
 overflow: hidden }
.spec-grid > div {
 display: flex;
 padding: var(--s3) var(--s4);
 border-bottom: 1px solid var(--border);
 flex-direction: column;
 gap: 2px }
.spec-grid > div:nth-child(odd) { border-left: 1px solid var(--border) }
.spec-grid > div:nth-last-child(-n+2) { border-bottom: 0 }
.spec-grid span {
 font-size: var(--fs-12);
 color: var(--muted) }
.spec-grid b { font-size: var(--fs-16) }
.tier-list {
 display: grid;
 padding: var(--s1);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 background: var(--surface) }
.tier {
 display: flex;
 padding: var(--s3);
 border: 1px solid transparent;
 border-radius: var(--r-sm);
 align-items: center;
 justify-content: space-between;
 gap: var(--s2) }
.tier + .tier { border-top-color: var(--border) }
.tier .rng {
 font-size: var(--fs-14);
 color: var(--muted) }
.tier .applied-tag { display: none }
.tier.on {
 border: 2px solid var(--purple-900);
 background: var(--purple-50) }
.tier.on .rng {
 font-weight: 700;
 color: var(--accent-ink) }
.tier.on .applied-tag { display: inline }
.tier.on + .tier { border-top-color: transparent }
.tier-meta {
 display: flex;
 color: var(--muted);
 flex-wrap: wrap;
 gap: var(--s5) }
.tier-meta b { color: var(--text) }
.pd-buy .card {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.qty-block {
 display: flex;
 flex-direction: column;
 gap: var(--s2) }
.qty-row { flex-wrap: wrap }
.qty-block .qty { border-color: var(--border) }
.qty-block .qty button {
 width: 52px;
 height: 52px;
 background: var(--surface) }
.qty-block .qty input {
 border-inline: 1px solid var(--border);
 width: 88px;
 height: 52px;
 font-size: var(--fs-18) }
.qty-block.invalid .lbl { color: var(--danger) }
.qty-block.invalid .qty { border-color: var(--danger) }
.qty-err {
 display: flex;
 font-size: var(--fs-14);
 color: var(--danger);
 align-items: center;
 gap: var(--s1) }
.tier-hint {
 display: flex;
 padding: var(--s3);
 border: 1px solid #A9D8C0;
 border-radius: var(--r-sm);
 font-size: var(--fs-14);
 color: var(--success);
 background: var(--success-bg);
 align-items: flex-start;
 gap: var(--s2) }
.calc { margin: 0 }
.calc > div {
 display: flex;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 justify-content: space-between }
.calc > div:last-child { border-bottom: 0 }
.calc dt {
 font-size: var(--fs-14);
 color: var(--muted) }
.calc dd {
 margin: 0;
 font-weight: 600 }
.calc .total dt {
 font-weight: 700;
 color: var(--text) }
.calc .total dd { font-size: var(--fs-24) }
.buy-actions {
 display: flex;
 flex-direction: column-reverse;
 gap: var(--s3) }
.buy-actions [data-fix] {
 border-color: var(--purple-900);
 width: 100% }
.buy-card .btn-primary[disabled], .sticky-buy .btn-primary[disabled] {
 color: var(--muted);
 background: var(--border);
 opacity: 1 }
.fav-link {
 display: inline-flex;
 margin: 0 auto;
 min-height: 44px;
 align-items: center;
 gap: var(--s2) }
.fav-link.on .icon {
 color: var(--danger);
 fill: currentColor }
.out-card .out-head { align-items: flex-start }
.out-card .out-head .grow {
 display: flex;
 flex-direction: column;
 gap: var(--s1) }
.lock-card {
 display: flex;
 margin: var(--s6) auto;
 padding: var(--s6) var(--s5);
 max-width: 480px;
 text-align: center;
 flex-direction: column;
 align-items: center;
 gap: var(--s3) }
.lock-ic { color: var(--purple-500) }
.narrow-page { padding-bottom: var(--s7) }
.pd-more {
 display: flex;
 margin-top: var(--s6);
 flex-direction: column;
 gap: var(--s6) }
.spec-table { margin: 0 }
.spec-table > div {
 display: flex;
 padding: var(--s3) var(--s4);
 border-bottom: 1px solid var(--border);
 justify-content: space-between;
 gap: var(--s4) }
.spec-table > div:last-child { border-bottom: 0 }
.spec-table dt { color: var(--muted) }
.spec-table dd {
 margin: 0;
 font-weight: 600;
 text-align: left }
.pd-desc {
 line-height: 1.9;
 white-space: pre-line }
.rating-card {
 display: grid;
 margin-bottom: var(--s3);
 gap: var(--s4) }
.rating-big {
 display: flex;
 align-items: baseline;
 flex-wrap: wrap;
 gap: var(--s2) }
.rating-big > b {
 font-size: var(--fs-40);
 font-weight: 700;
 line-height: 1 }
.rating-bars { margin: 0 }
.rating-bars > div {
 display: flex;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 align-items: center;
 justify-content: space-between;
 gap: var(--s3) }
.rating-bars > div:last-child { border-bottom: 0 }
.rating-bars dt { color: var(--muted) }
.rating-bars dd {
 display: flex;
 margin: 0;
 align-items: center;
 gap: var(--s3);
 flex: 1;
 justify-content: flex-end }
.rating-bars .bar {
 border-radius: 2px;
 height: 4px;
 background: var(--border);
 flex: 1;
 overflow: hidden }
.rating-bars .bar > span {
 display: block;
 height: 100%;
 background: var(--purple-900) }
.review-list .review {
 display: flex;
 padding: var(--s4);
 border-bottom: 1px solid var(--border);
 flex-direction: column;
 gap: var(--s2) }
.review-list .review:last-child { border-bottom: 0 }
.sticky-buy {
 display: flex;
 position: fixed;
 right: 0;
 bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom));
 left: 0;
 padding: var(--s3) var(--gutter);
 border-top: 1px solid var(--border);
 background: var(--surface);
 align-items: center;
 gap: var(--s4);
 z-index: 40 }
.sticky-buy > div {
 display: flex;
 flex-direction: column }
.sticky-buy > div b .money {
 font-size: var(--fs-24);
 font-weight: 700 }
.sticky-buy .btn-primary { flex: 1 }
.sticky-buy .btn-icon-lg {
 padding: 0;
 width: 64px }
.sticky-buy .fav.on .icon {
 color: var(--danger);
 fill: currentColor }
@media (max-width: 1022px) {
 .pd-buy [data-add] { display: none }
 .pd-buy .card { padding: var(--s4) } }
@media (min-width: 1023px) {
 .product-page { padding-bottom: var(--s7) }
 .pd-grid {
  margin-top: var(--s4);
  grid-template-columns: 420px minmax(0, 1fr) 340px;
  gap: var(--s5);
  align-items: start }
 .pd-gallery { margin: 0 }
 .gallery-main { border-radius: var(--r-md) }
 .pd-info h1 { font-size: var(--fs-32) }
 .pd-buy {
  position: sticky;
  top: calc(var(--header-h) + var(--s4)) }
 .pd-buy .card { padding: var(--s5) }
 .pd-more { margin-inline-start: calc(420px + var(--s5)) }
 .pd-more #similar { margin-inline-start: calc((420px + var(--s5)) * -1) }
 .pd-grid.tiered { grid-template-columns: 360px minmax(0, 1fr) }
 .pd-grid.tiered .pd-buy {
  position: static;
  grid-column: 2 }
 .pd-grid.tiered .buy-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s5);
  align-items: start }
 .pd-grid.tiered .buy-card > * { grid-column: 1 / -1 }
 .pd-grid.tiered .buy-card > h2, .pd-grid.tiered .buy-card > .escrow-box, .pd-grid.tiered .buy-card > .fav-link { display: none }
 .pd-grid.tiered .buy-card > .qty-block, .pd-grid.tiered .buy-card > .buy-actions { grid-column: 1 }
 .pd-grid.tiered .buy-card > .tier-hint, .pd-grid.tiered .buy-card > .buy-actions + .btn { grid-column: 2 }
 .pd-grid.tiered + .pd-more { margin-inline-start: calc(360px + var(--s5)) }
 .pd-grid.tiered + .pd-more #similar { margin-inline-start: calc((360px + var(--s5)) * -1) }
 .tier-list {
  padding: 0;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden }
 .tier {
  padding: var(--s4);
  border: 0;
  border-radius: 0;
  flex-direction: column;
  align-items: flex-start }
 .tier + .tier {
  border-top: 0;
  border-right: 1px solid var(--border) }
 .tier.on { border: 2px solid var(--purple-900) }
 .tier b .money { font-size: var(--fs-24) }
 .rating-card {
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center }
 .rating-big {
  flex-direction: column;
  align-items: flex-start }
 .rating-bars > div {
  padding: var(--s1) 0;
  border: 0 } }

/* ===== صفحة المتجر ===== */
.store-page { padding-bottom: calc(var(--s8) + var(--s6)) }
.store-cover {
 display: grid;
 position: relative;
 border-radius: 0;
 height: 180px;
 background: var(--border);
 place-items: center;
 overflow: hidden }
.store-cover > img {
 position: absolute;
 width: 100%;
 height: 100%;
 inset: 0;
 object-fit: cover }
.cover-btns {
 display: flex;
 position: absolute;
 top: var(--s3);
 right: var(--gutter);
 left: var(--gutter);
 justify-content: space-between }
.glass-btn {
 display: inline-flex;
 padding: 0;
 border: 0;
 border-radius: var(--r-sm);
 width: 44px;
 height: 44px;
 color: var(--text);
 background: var(--glass);
 -webkit-backdrop-filter: blur(10px);
 backdrop-filter: blur(10px);
 align-items: center;
 justify-content: center;
 cursor: pointer }
.store-card {
 display: grid;
 position: relative;
 margin-top: -40px;
 padding: 0;
 border: 0;
 background: none;
 box-shadow: none;
 gap: var(--s3) }
.store-card .store-logo {
 margin: 0;
 border: 4px solid var(--ivory);
 border-radius: var(--r-md);
 width: 80px;
 height: 80px;
 font-size: var(--fs-32) }
.store-id h1 {
 display: flex;
 font-size: var(--fs-24);
 align-items: center;
 flex-wrap: wrap;
 gap: var(--s2) }
.store-id h1 .verified { font-size: var(--fs-14) }
.store-id p {
 display: flex;
 align-items: center;
 gap: var(--s1) }
.store-stats.card { padding: var(--s4) }
.store-stats .s-stats {
 padding: 0;
 border: 0;
 text-align: center }
.store-stats .s-stats > div { align-items: center }
.store-stats .s-stats > div + div { border-right: 1px solid var(--border) }
.store-btns {
 display: flex;
 align-items: center;
 gap: var(--s3) }
.store-tabs { margin-top: var(--s4) }
.store-body {
 display: grid;
 gap: var(--s5) }
.about-card {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.center-row {
 display: flex;
 margin-top: var(--s4);
 justify-content: center }
.report-link { margin-top: var(--s5) }
.store-page.limited .store-card {
 margin-top: var(--s4);
 grid-template-columns: auto minmax(0, 1fr);
 align-items: center }
.limited-empty {
 display: flex;
 margin-top: var(--s4);
 padding: var(--s6) var(--s5);
 text-align: center;
 flex-direction: column;
 align-items: center;
 gap: var(--s3) }
.limited-empty > .icon { color: var(--purple-500) }
.store-page.limited .auth-alert, .store-page.limited .store-stats { margin-top: var(--s4) }
.empty-cover { border-radius: 0 }
@media (min-width: 1023px) {
 .store-page { padding-bottom: var(--s7) }
 .store-cover { height: 300px }
 .store-card {
  margin-top: -64px;
  padding: var(--s5);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s5) }
 .store-card .store-logo { border-color: var(--surface) }
 .store-card .store-stats.card {
  padding: 0;
  border: 0;
  min-width: 300px;
  box-shadow: none }
 .store-id h1 { font-size: var(--fs-32) }
 .store-body {
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start }
 .store-page.limited .store-card {
  margin-top: -64px;
  grid-template-columns: auto minmax(0, 1fr) auto }
 .store-page.limited .empty-cover { height: 220px } }

/* ===== الموردون ===== */
.suppliers-page { padding-block: var(--s4) var(--s7) }
.page-title { padding: var(--s5) 0 }
.page-title h1 { font-size: var(--fs-32) }
.cat-chips .pill.on {
 border-color: var(--purple-300);
 color: var(--purple-900);
 background: var(--purple-100) }
.list-tools { margin: var(--s3) 0 }
.list-tools .btn { color: var(--link) }
@media (min-width: 1023px) {
 .suppliers-page .browse-layout { grid-template-columns: 240px minmax(0, 1fr) }
 .suppliers-page .store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) } }

/* ===== صفحات المحتوى ===== */
.cms-page {
 padding-bottom: var(--s7);
 max-width: 860px }
.cms-page article { margin-top: var(--s4) }
.how-hero {
 position: relative;
 padding: var(--s6) 0;
 color: #FFFFFF;
 background: var(--purple-900);
 overflow: hidden }
.how-hero::before {
 position: absolute;
 background: url('/assets/pattern/pattern.png') center / 320px repeat;
 opacity: 0.3;
 inset: 0;
 content: '';
 pointer-events: none }
.how-hero .container {
 display: flex;
 position: relative;
 flex-direction: column;
 gap: var(--s3) }
.how-hero h1 { font-size: 1.75rem }
.how-hero p { color: var(--purple-200) }
.segmented.on-dark {
 display: flex;
 margin-top: var(--s3);
 border: 1px solid rgba(255, 255, 255, 0.3);
 background: rgba(255, 255, 255, 0.08) }
.segmented.on-dark button {
 color: #FFFFFF;
 flex: 1 }
.segmented.on-dark button.on {
 color: var(--purple-900);
 background: #FFFFFF }
.how-body { padding-block: var(--s5) var(--s7) }
.how-grid {
 display: grid;
 gap: var(--s6) }
.how-cta { margin-top: var(--s4) }
.stage-list {
 margin: 0;
 padding: 0;
 list-style: none }
.stage-list li {
 display: flex;
 padding: var(--s4) 0;
 border-bottom: 1px solid var(--border);
 gap: var(--s4) }
.stage-list li:first-child { padding-top: 0 }
.stage-list li:last-child {
 padding-bottom: 0;
 border-bottom: 0 }
.stage-list .n {
 font-size: var(--fs-24);
 font-weight: 700;
 color: var(--gold-700);
 flex: none }
.stage-list b { font-size: var(--fs-18) }
.stage-list p {
 margin-top: 2px;
 color: var(--muted) }
.pic-row {
 display: grid;
 margin-top: var(--s5);
 gap: var(--s4) }
.pic-row .pic img {
 border-radius: var(--r-md);
 width: 100%;
 aspect-ratio: 16 / 9;
 object-fit: cover }
@media (max-width: 1022px) {
 .how-col[data-off] { display: none }
 .how-cta .btn { width: 100% } }
@media (min-width: 1023px) {
 .how-hero {
  padding: var(--s8) 0;
  text-align: center }
 .how-hero .container { align-items: center }
 .how-hero h1 { font-size: 2.75rem }
 .how-hero .segmented {
  margin-top: var(--s5);
  width: 360px }
 .how-grid { grid-template-columns: 1fr 1fr }
 .pic-row { grid-template-columns: repeat(3, 1fr) } }
.faq-page {
 padding-block: var(--s4) var(--s7);
 max-width: 912px }
.faq-page h1 {
 margin: var(--s5) 0 var(--s4);
 font-size: var(--fs-32) }
.faq-search {
 margin-bottom: var(--s4);
 min-height: 52px;
 max-width: 520px }
.faq-cats {
 display: flex;
 margin-bottom: var(--s4);
 padding: var(--s1) 0;
 gap: var(--s2);
 overflow-x: auto;
 scrollbar-width: none }
.faq-cats button {
 padding: var(--s2) var(--s4);
 border: 1px solid var(--border-strong);
 border-radius: var(--r-full);
 min-height: 44px;
 font-weight: 500;
 color: var(--text-2);
 background: var(--surface);
 white-space: nowrap;
 cursor: pointer }
.faq-cats button.on {
 border-color: var(--purple-300);
 font-weight: 700;
 color: var(--purple-900);
 background: var(--purple-100) }
.faq-list { padding: var(--s2) var(--s5) }
.faq-item { border-bottom: 1px solid var(--border) }
.faq-item:last-of-type { border-bottom: 0 }
.faq-item summary {
 display: flex;
 padding: var(--s4) 0;
 min-height: 56px;
 font-weight: 600;
 align-items: center;
 justify-content: space-between;
 gap: var(--s3);
 list-style: none;
 cursor: pointer }
.faq-item summary::-webkit-details-marker { display: none }
.faq-item summary .icon {
 flex: none;
 transition: transform var(--t-mid) var(--ease-out) }
.faq-item[open] summary .icon { transform: rotate(180deg) }
.faq-a {
 padding-bottom: var(--s4);
 color: var(--muted) }
.faq-none { margin: var(--s4) 0 }
.faq-contact {
 display: flex;
 margin-top: var(--s4);
 padding: var(--s3);
 align-items: center;
 justify-content: space-between }
@media (max-width: 1022px) {
 .faq-contact {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none }
 .faq-contact .btn { width: 100% } }
@media (min-width: 1023px) {
 .faq-cats {
  border-bottom: 1px solid var(--border);
  gap: var(--s5) }
 .faq-cats button {
  padding: var(--s2) 0;
  border: 0;
  border-radius: 0;
  background: none }
 .faq-cats button.on {
  background: none;
  box-shadow: inset 0 -2px 0 var(--purple-900) }
 .faq-contact { padding: var(--s4) var(--s5) } }
.about-page {
 display: flex;
 padding-block: var(--s5) var(--s7);
 flex-direction: column;
 gap: var(--s6) }
.about-intro {
 display: grid;
 gap: var(--s5);
 align-items: center }
.about-intro h1 {
 margin-bottom: var(--s4);
 font-size: var(--fs-32) }
.lead-prose p {
 font-size: var(--fs-18);
 line-height: 1.9 }
.lead-prose p + p { margin-top: var(--s4) }
.about-intro .pic img {
 border-radius: var(--r-md);
 width: 100%;
 aspect-ratio: 16 / 10;
 object-fit: cover }
.vm-card {
 display: grid;
 padding: var(--s5);
 border-radius: var(--r-lg);
 color: #FFFFFF;
 background: var(--purple-900);
 gap: var(--s5) }
.vm-card h2 {
 margin-bottom: var(--s2);
 font-size: var(--fs-20) }
.vm-card .prose { color: var(--purple-200) }
.values-grid {
 display: grid;
 margin: 0;
 padding: 0;
 list-style: none;
 gap: var(--s4) }
.values-grid li {
 display: flex;
 padding-top: var(--s4);
 border-top: 1px solid var(--border);
 flex-direction: column;
 gap: var(--s1) }
.values-grid .n {
 font-size: var(--fs-14);
 font-weight: 700;
 color: var(--gold-700) }
.values-grid p {
 font-size: var(--fs-14);
 color: var(--muted) }
.promise-card {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.promise-card h2 { margin-bottom: var(--s4) }
@media (min-width: 1023px) {
 .about-intro {
  grid-template-columns: 1fr 1fr;
  gap: var(--s7) }
 .about-intro h1 { font-size: 2.75rem }
 .vm-card {
  padding: var(--s6);
  grid-template-columns: 1fr 1fr;
  gap: var(--s7) }
 .values-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5) }
 .promise-card {
  padding: var(--s5) var(--s6);
  flex-direction: row;
  align-items: center;
  justify-content: space-between } }
.legal-page {
 display: grid;
 padding-block: var(--s4) var(--s7);
 gap: var(--s5);
 align-items: start }
.legal-main {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.legal-main h1 { font-size: var(--fs-32) }
.legal-sec {
 padding-top: var(--s3);
 scroll-margin-top: calc(var(--header-h) + var(--s4)) }
.legal-sec h2 {
 margin-bottom: var(--s2);
 font-size: var(--fs-20) }
.legal-sec .prose {
 color: var(--text-2);
 line-height: 1.9 }
.toc-mobile { padding: 0 }
.toc-mobile summary {
 display: flex;
 padding: var(--s4);
 min-height: 56px;
 align-items: center;
 gap: var(--s3);
 list-style: none;
 cursor: pointer }
.toc-mobile summary::-webkit-details-marker { display: none }
.toc-mobile[open] summary .icon:last-child { transform: rotate(180deg) }
.toc-mobile nav {
 display: flex;
 padding: 0 var(--s4) var(--s3);
 flex-direction: column }
.toc-mobile nav a {
 padding: var(--s2) 0;
 min-height: 40px;
 color: var(--text) }
.legal-side {
 display: flex;
 position: sticky;
 top: calc(var(--header-h) + var(--s4));
 flex-direction: column;
 gap: var(--s3) }
.legal-pages {
 display: flex;
 padding: var(--s1);
 background: var(--purple-50);
 flex-direction: column }
.legal-pages a {
 padding: var(--s2) var(--s3);
 border-radius: var(--r-xs);
 font-size: var(--fs-14);
 color: var(--text-2);
 text-align: center }
.legal-pages a.on {
 font-weight: 700;
 color: var(--purple-900);
 background: var(--surface) }
.legal-toc {
 display: flex;
 padding: var(--s2);
 flex-direction: column;
 gap: var(--s1) }
.legal-toc a {
 padding: var(--s2) var(--s3);
 border-radius: var(--r-xs);
 font-size: var(--fs-14);
 color: var(--text-2) }
.legal-toc a.on {
 font-weight: 700;
 color: var(--purple-900);
 background: var(--purple-100) }
@media (min-width: 1023px) {
 .legal-page {
  padding-top: var(--s6);
  grid-template-columns: 260px minmax(0, 660px);
  gap: var(--s7) }
 .legal-main h1 { margin-bottom: var(--s3) } }
.contact-page {
 display: grid;
 padding-block: var(--s4) var(--s7);
 gap: var(--s5);
 align-items: start }
.contact-side {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.contact-side h1 { font-size: var(--fs-32) }
.channels {
 display: flex;
 padding: var(--s2) var(--s4);
 flex-direction: column }
.channels .ch {
 display: flex;
 padding: var(--s3) 0;
 min-height: 52px;
 color: var(--text);
 align-items: center;
 gap: var(--s3) }
.channels .ch + .ch { border-top: 1px solid var(--border) }
.channels .ch > .icon {
 color: var(--purple-700);
 flex: none }
.channels .ch span {
 display: flex;
 flex-direction: column }
.channels small {
 font-size: var(--fs-12);
 color: var(--muted) }
.contact-actions { display: flex }
@media (max-width: 1022px) {
 .contact-form.card {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none }
 .contact-actions .btn { width: 100% } }
@media (min-width: 1023px) {
 .contact-page {
  margin-top: var(--s5);
  max-width: 1072px;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--s7) }
 .contact-form { padding: var(--s6) } }

/* ===== الصفحة غير الموجودة ===== */
.nf-page {
 display: grid;
 padding: var(--s7) var(--gutter);
 min-height: calc(100vh - var(--header-h) - var(--bottom-h));
 place-items: center }
.nf-box {
 display: flex;
 max-width: 440px;
 text-align: center;
 flex-direction: column;
 align-items: center;
 gap: var(--s3) }
.nf-box img {
 width: auto;
 height: 72px }
.nf-code {
 font-size: var(--fs-14);
 color: var(--muted);
 letter-spacing: 0.4em }
.nf-box h1 { font-size: var(--fs-32) }
.nf-actions {
 display: flex;
 margin-top: var(--s3);
 width: 100%;
 flex-direction: column;
 gap: var(--s3) }
.nf-actions .btn { width: 100% }
.nf-alt {
 border-color: transparent;
 color: var(--link);
 background: none }
@media (min-width: 1023px) {
 .nf-actions {
  flex-direction: row;
  justify-content: center }
 .nf-actions .btn { width: auto }
 .nf-alt {
  border-color: var(--purple-900);
  color: var(--text);
  background: var(--surface) } }

/* ===== شاشة الافتتاح والصفحات الثابتة ===== */
.splash { background: var(--purple-900) }
.splash-in {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: var(--s4) }
.splash .splash-logo {
 display: block;
 width: 280px;
 height: auto;
 object-fit: contain;
 animation: splash-logo 700ms var(--ease-out) both }
html[data-theme="dark"] .splash .splash-logo { display: block }
.splash-tag {
 margin: 0;
 font-size: var(--fs-16);
 color: var(--purple-200);
 animation: splash-tag 500ms var(--ease-out) 350ms both }
@keyframes splash-logo {
 from {
  opacity: 0;
  transform: translateY(8px) scale(0.94) } }
@keyframes splash-tag {
 from { opacity: 0 } }
.static-page { padding-top: 0 }
.static-page .app-header { position: relative }
.static-page .app-header .brand img {
 width: auto;
 height: 36px;
 object-fit: contain}
.static-page .nf-page { min-height: calc(100vh - var(--header-h)) }
.maint-page {
 display: grid;
 position: relative;
 margin: 0;
 padding: var(--s6) var(--gutter);
 min-height: 100vh;
 color: #FFFFFF;
 text-align: center;
 background: var(--purple-900);
 place-items: center }
.maint-page::before {
 position: absolute;
 background: url('/assets/pattern/pattern.png') center / 1200px repeat;
 opacity: 0.9;
 inset: 0;
 content: '';
 pointer-events: none }
.maint-box {
 display: flex;
 position: relative;
 max-width: 460px;
 flex-direction: column;
 align-items: center;
 gap: var(--s4) }
.maint-box img {
 width: auto;
 height: 64px;
 object-fit: contain }
.maint-box .full-logo {
 height: 60px}
.maint-box h1 { font-size: var(--fs-32) }
.maint-box p {
 color: var(--purple-200);
 line-height: 1.8 }
.maint-box .btn {
 min-width: 140px;
 font-weight: 600 }
@media (max-width: 1022px) {
 .splash .splash-logo { width: 200px }
 .splash-tag { font-size: var(--fs-14) }
 .static-page .app-header { display: none }
 .maint-page { padding-inline: 44px }
 .maint-box .icon-logo { height: 104px }
 .maint-box .full-logo { display: none }
 .maint-box .btn { width: 100% } }
@media (min-width: 1023px) {
 .maint-box .icon-logo { display: none } }

/* ===== قص هوامش ملفات الشعار ===== */
.app-header .brand .logo-icon, .auth-mark img, .nf-box img, .maint-box .icon-logo {
 object-fit: contain}
.suspend-modal .suspend-ic { align-self: flex-start }
.about-card .btn {
 padding-block: var(--s2);
 text-align: center;
 white-space: normal }
.store-btns .btn[disabled] {
 color: var(--muted);
 background: var(--border);
 opacity: 1 }
@media (max-width: 1022px) {
 body:has(#app .hide-hdr) { padding-top: 0 }
 body:has(#app .hide-hdr) .app-header { display: none }
 body:has(#app .sticky-buy) .app-footer { padding-bottom: calc(var(--bottom-h) + 112px) } }
.msg-banner {
 display: flex;
 position: fixed;
 top: var(--s3);
 right: 0;
 left: 0;
 margin-inline: auto;
 padding: var(--s2) var(--s4) var(--s2) var(--s2);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 width: min(calc(100% - var(--s5)), 480px);
 color: var(--text);
 background: var(--surface);
 box-shadow: var(--shadow-3);
 align-items: center;
 gap: var(--s2);
 z-index: 320;
 animation: rise var(--t-mid) var(--ease-out) }
.msg-banner-link {
 display: flex;
 min-width: 0;
 min-height: 44px;
 color: inherit;
 align-items: center;
 gap: var(--s3);
 flex: 1 }
.msg-banner-link > .icon { color: var(--gold-600) }
.msg-banner-link .grow {
 display: flex;
 min-width: 0;
 flex-direction: column }
.msg-banner-link .truncate {
 font-size: var(--fs-14);
 color: var(--muted) }
.msg-banner .mtop-btn {
 display: inline-grid;
 width: 44px;
 height: 44px;
 color: var(--text-2);
 background: none;
 place-items: center }

/* ===== مناطق اللمس ===== */
.auth-brand, .auth-row a, .auth-head .row a, .auth-foot nav a, .app-footer .foot-logo, .more-link {
 display: inline-flex;
 min-height: 44px;
 align-items: center }
.auth-body a.center {
 display: flex;
 min-height: 44px;
 align-items: center;
 justify-content: center }
.auth-body p a:not(.btn), .auth-body .check a, .auth-switch a, .app-footer ul a, .app-footer .stack .row a, .app-footer a[href="/versions"] {
 display: inline-block;
 margin-block: -14px;
 padding-block: 14px }
.link-btn {
 margin-block: -13px;
 padding-block: 13px }
.segmented label { min-height: 44px }
.clear-q {
 margin-block: -6px;
 width: 44px;
 height: 44px;
 flex: none }
.range { height: 44px }
.app-header .brand {
 min-width: 44px;
 min-height: 44px;
 justify-content: center }

/* ===== صفحات بلا تنقل سفلي ===== */
body.no-bnav { --bottom-h: 0px }
body.no-bnav #bnav { display: none }