/* ===== شاشات admin ===== */
body.admin-route { --header-h: 64px }
body.admin-route main#app { padding-bottom: var(--s7) }
.admin-header { color: #FFFFFF }
.admin-header::before {
 background: var(--purple-900);
 -webkit-backdrop-filter: none;
 backdrop-filter: none }
.admin-header .bar {
 display: flex;
 padding-inline: var(--s4);
 height: var(--header-h);
 align-items: center;
 gap: var(--s2) }
.admin-header .admin-title {
 min-width: 0;
 font-size: var(--fs-20);
 font-weight: 600;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 flex: 1 }
.admin-header .admin-search { display: none }
.admin-header .actions { gap: var(--s2) }
.admin-header .badge-count {
 color: var(--purple-950);
 background: var(--gold-500) }
.admin-acct {
 display: inline-flex;
 padding: 0;
 border: 0;
 min-height: 44px;
 color: inherit;
 background: none;
 align-items: center;
 gap: var(--s2);
 cursor: pointer }
.admin-acct .avatar {
 border: 2px solid var(--purple-300);
 width: 44px;
 height: 44px;
 color: var(--purple-900);
 background: var(--purple-100) }
.admin-acct .who, .admin-acct > .icon { display: none }
.admin-acct .who b {
 display: block;
 font-size: var(--fs-14);
 line-height: 1.3 }
.admin-acct .who small {
 display: block;
 font-size: var(--fs-12);
 color: var(--muted) }
.admin-side {
 display: flex;
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 padding: var(--s5) var(--s3) var(--s6);
 width: min(312px, 82vw);
 color: #FFFFFF;
 background: var(--purple-900);
 flex-direction: column;
 gap: var(--s4);
 overflow-y: auto;
 overscroll-behavior: contain;
 z-index: 70;
 transform: translateX(100%);
 visibility: hidden;
 transition: transform var(--t-mid) var(--ease-out) 0s, visibility 0s linear var(--t-mid) }
body.admin-drawer-open .admin-side {
 transform: none;
 visibility: visible;
 transition: transform var(--t-mid) var(--ease-out) 0s, visibility 0s linear 0s }
.admin-scrim {
 display: none;
 position: fixed;
 padding: 0;
 border: 0;
 background: rgba(28, 20, 48, 0.45);
 inset: 0;
 z-index: 65 }
body.admin-drawer-open .admin-scrim { display: block }
.admin-brand {
 display: flex;
 padding-inline: var(--s3);
 color: var(--purple-300);
 flex-direction: column;
 align-items: flex-start;
 flex: none;
 gap: 2px }
.admin-brand:hover { text-decoration: none }
.admin-brand img {
 width: auto;
 height: 36px;
 object-fit: contain}
.admin-brand small {
 font-size: var(--fs-12);
 color: var(--purple-300) }
.admin-side nav {
 display: flex;
 flex-direction: column;
 flex: none;
 gap: 2px }
.admin-side .group {
 display: flex;
 margin: var(--s4) var(--s3) var(--s1);
 font-size: var(--fs-12);
 color: var(--purple-300);
 align-items: center;
 gap: var(--s1) }
.admin-side nav a {
 display: flex;
 position: relative;
 padding: var(--s2) var(--s3);
 border-radius: var(--r-sm);
 min-height: 44px;
 font-size: var(--fs-16);
 font-weight: 500;
 color: var(--purple-50);
 align-items: center;
 gap: var(--s3);
 transition: background-color var(--t-mid) var(--ease-out) 0s }
.admin-side nav a .icon {
 color: var(--purple-200);
 flex: none }
.admin-side nav a > span:not(.count) {
 min-width: 0;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 flex: 1 }
.admin-side nav a:hover {
 color: #FFFFFF;
 background: rgba(255, 255, 255, 0.08);
 text-decoration: none }
.admin-side nav a.on {
 font-weight: 600;
 color: #FFFFFF;
 background: rgba(255, 255, 255, 0.12) }
.admin-side nav a.on::after {
 position: static;
 margin-inline-start: auto;
 border: 2px solid var(--gold-500);
 border-radius: 2px;
 width: 12px;
 height: 12px;
 background: none;
 content: '';
 inset: auto;
 flex: none }
.admin-side nav a .count {
 margin-inline-start: auto;
 padding: 0 8px;
 border-radius: 999px;
 min-width: 24px;
 font-size: var(--fs-12);
 font-weight: 700;
 color: var(--purple-950);
 text-align: center;
 background: var(--gold-500);
 line-height: 20px }
.admin-side nav a.on:has(.count:not([hidden]))::after { display: none }
.admin-side details.more summary {
 min-height: 32px;
 cursor: pointer;
 list-style: none }
.admin-side details.more summary::-webkit-details-marker { display: none }
.admin-side details.more[open] summary .icon { transform: rotate(180deg) }
.admin-main {
 padding: var(--s4) var(--s4) 0;
 min-width: 0 }
.admin-main > [data-page] {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.admin-title .tw { display: none }
body.admin-route .btn-outline { border-color: var(--accent-ink) }
.admin-main .pager { justify-content: flex-start }
.admin-main .pager > span {
 margin-inline-end: auto;
 order: -1 }
@media (min-width: 1024px) {
 .admin-title .tw { display: inline }
 .admin-title .tm { display: none }
 body.admin-route {
  padding-inline-start: 260px;
  --header-h: 72px }
 .admin-header {
  right: 260px;
  width: auto;
  color: var(--text) }
 .admin-header::before {
  border-bottom: 1px solid var(--border);
  background: var(--surface) }
 .admin-header .bar {
  padding-inline: var(--s6);
  gap: var(--s4) }
 .admin-header .admin-burger { display: none }
 .admin-header .admin-title {
  font-size: var(--fs-24);
  flex: 0 1 auto }
 .admin-header .admin-search {
  display: flex;
  margin-inline-start: auto;
  border-color: var(--border);
  width: 360px;
  max-width: 360px;
  color: var(--text);
  background: var(--surface) }
 .admin-header .admin-search input::placeholder { color: var(--muted) }
 .admin-header .actions { margin-inline-start: 0 }
 .admin-header .hbtn { color: var(--purple-900) }
 .admin-header .hbtn:hover {
  color: var(--purple-900);
  background: var(--purple-50) }
 .admin-me {
  padding-inline-start: var(--s4);
  border-inline-start: 1px solid var(--border) }
 .admin-acct .avatar {
  border-width: 1px;
  width: 36px;
  height: 36px }
 .admin-acct .who, .admin-acct > .icon { display: block }
 .admin-acct > .icon { color: var(--muted) }
 .admin-side nav a { font-size: var(--fs-14) }
 .admin-side {
  padding-top: var(--s6);
  width: 260px;
  transform: none;
  visibility: visible;
  transition: none }
 .admin-scrim, body.admin-drawer-open .admin-scrim { display: none }
 .admin-main { padding: var(--s6) var(--s6) 0 }
 .admin-main > [data-page] { gap: var(--s5) } }

/* ===== H01-H03 نظرة عامة والتوثيق والمستخدمون ===== */
@media (max-width: 1023px) {
 .u-w, .u-wi { display: none !important } }
.u-red { color: var(--danger) }
.u-ava {
 display: inline-flex;
 border: 1px solid var(--purple-200);
 border-radius: 50%;
 width: 40px;
 height: 40px;
 font-size: var(--fs-16);
 font-weight: 600;
 color: var(--purple-900);
 background: var(--purple-100);
 align-items: center;
 justify-content: center;
 flex: none }
.u-ava.sq {
 border-color: var(--gold-200);
 border-radius: var(--r-sm);
 background: var(--gold-100) }
.u-ava.lg {
 width: 48px;
 height: 48px;
 font-size: var(--fs-20) }
.u-title {
 margin-bottom: var(--s3);
 font-size: var(--fs-18);
 font-weight: 600 }
.u-h2 {
 margin-bottom: var(--s3);
 font-size: var(--fs-18);
 font-weight: 600 }
.u-kv {
 display: flex;
 margin: 0;
 flex-direction: column }
.u-kv > div {
 display: flex;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 align-items: center;
 justify-content: space-between;
 gap: var(--s3) }
.u-kv > div:last-child { border-bottom: 0 }
.u-kv dt {
 font-size: var(--fs-14);
 color: var(--text-2) }
.u-kv dd {
 display: flex;
 margin: 0;
 min-width: 0;
 font-size: var(--fs-14);
 font-weight: 500;
 text-align: left;
 align-items: center;
 gap: var(--s1) }
.btn.u-danger {
 border-color: var(--danger);
 color: var(--danger) }
.btn.u-danger:hover {
 color: var(--danger);
 background: var(--danger-bg) }
.btn.u-red:hover { color: var(--danger) }
.u-more {
 display: inline-flex;
 font-size: var(--fs-14);
 font-weight: 600;
 align-items: center;
 gap: var(--s1) }
.u-verified {
 display: inline-flex;
 font-size: var(--fs-14);
 font-weight: 600;
 color: var(--success);
 align-items: center;
 gap: 2px }
.u-tl {
 display: flex;
 flex-direction: column }
.u-tl > div {
 display: flex;
 position: relative;
 padding: 0 var(--s6) var(--s4) 0;
 flex-direction: column;
 gap: 2px }
.u-tl > div::before {
 position: absolute;
 top: 6px;
 right: 0;
 border-radius: 2px;
 width: 12px;
 height: 12px;
 background: var(--success);
 content: '' }
.u-tl > div::after {
 position: absolute;
 top: 24px;
 right: 5px;
 bottom: 4px;
 width: 2px;
 background: var(--border);
 content: '' }
.u-tl > div:last-child::after { display: none }
.u-tl > div.bad::before { background: var(--danger) }
.u-tl > div.wait::before {
 border: 2px solid var(--gold-500);
 background: transparent }
.u-tl b {
 font-size: var(--fs-14);
 font-weight: 500 }
.u-tl small { font-size: var(--fs-12) }
.u-tabs {
 display: flex;
 gap: var(--s2);
 overflow-x: auto;
 scrollbar-width: none }
.u-tabs::-webkit-scrollbar { display: none }
.u-tabs button {
 display: inline-flex;
 padding: 0 var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-full);
 min-height: 44px;
 font-weight: 500;
 color: var(--text);
 background: var(--surface);
 white-space: nowrap;
 align-items: center;
 flex: none;
 gap: var(--s2);
 cursor: pointer }
.u-tabs button.on {
 border-color: var(--purple-300);
 font-weight: 600;
 color: var(--purple-900);
 background: var(--purple-100) }
.u-tabs button b { font-weight: 700 }
.u-tabs button b:empty { display: none }
.u-tabs button.missing { color: var(--muted) }
.u-bar {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.u-tools {
 display: flex;
 align-items: center;
 gap: var(--s2) }
.u-tools .search-input {
 min-width: 0;
 flex: 1 }
.u-select {
 display: inline-flex;
 position: relative;
 padding-inline: var(--s3);
 border: 1px solid var(--border);
 border-radius: var(--r-full);
 min-height: 44px;
 color: var(--text);
 background: var(--surface);
 align-items: center;
 gap: var(--s1) }
.u-select select {
 border: 0;
 min-height: 42px;
 font-weight: 500;
 background: transparent;
 outline: none;
 cursor: pointer;
 appearance: none }
.u-select:focus-within { border-color: var(--purple-700) }
.u-foot {
 display: flex;
 margin-top: var(--s4);
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: var(--s3) }
.u-foot .btn { min-width: 72px }
.u-choices {
 display: flex;
 margin: var(--s4) 0;
 padding: 0;
 border: 0;
 flex-direction: column;
 gap: var(--s2) }
.u-choices legend {
 margin-bottom: var(--s2);
 padding: 0;
 font-weight: 600 }
.u-choices .choice {
 padding: var(--s3) var(--s4);
 min-height: 52px }
.ov-head {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 gap: var(--s4) }
.ov-title {
 font-size: var(--fs-18);
 font-weight: 600 }
.ov-period {
 display: grid;
 border: 1px solid var(--border);
 width: 100%;
 grid-template-columns: repeat(3, 1fr) }
.ov-period button {
 min-height: 44px;
 font-weight: 500 }
.ov-period button.on { font-weight: 700 }
.ov-kpis {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: var(--s3) }
.ov-kpi {
 display: flex;
 padding: var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 min-width: 0;
 background: var(--surface);
 flex-direction: column;
 gap: var(--s1) }
.ov-kpi .label {
 font-size: var(--fs-14);
 color: var(--text-2) }
.ov-kpi .value {
 font-size: var(--fs-20);
 font-weight: 700;
 line-height: 1.3;
 white-space: nowrap }
.ov-kpi .sub {
 font-size: var(--fs-12);
 color: var(--muted) }
.ov-sec {
 display: flex;
 margin-top: var(--s2);
 align-items: center;
 justify-content: space-between;
 gap: var(--s3) }
.u-w > .ov-sec + .card { margin-top: var(--s3) }
.ov-sec h2 {
 font-size: var(--fs-20);
 font-weight: 600 }
.ov-row {
 display: grid;
 gap: var(--s4) }
.ov-row > .card { min-width: 0 }
.ov .card h3 {
 font-size: var(--fs-18);
 font-weight: 600 }
.ov-actions { padding-block: var(--s1) }
.ov-act {
 display: flex;
 padding: var(--s4) 0;
 border-bottom: 1px solid var(--border);
 color: var(--text);
 align-items: center;
 gap: var(--s3) }
.ov-act:last-child { border-bottom: 0 }
.ov-act:hover {
 color: var(--text);
 text-decoration: none }
.ov-act > .icon {
 color: var(--purple-700);
 flex: none }
.ov-act .grow {
 display: flex;
 flex-direction: column;
 gap: 2px }
.ov-act b {
 font-size: var(--fs-16);
 font-weight: 600 }
.ov-act small {
 display: flex;
 font-size: var(--fs-14);
 color: var(--muted);
 flex-wrap: wrap;
 gap: var(--s3) }
.ov-act .n {
 min-width: 32px;
 font-size: var(--fs-20);
 font-weight: 700 }
.ov-act .chev { color: var(--text-2) }
.ov-act .btn {
 min-width: 128px;
 pointer-events: none }
.ov-split {
 display: flex;
 margin: var(--s4) 0;
 border-radius: var(--r-full);
 height: 8px;
 background: var(--border);
 overflow: hidden;
 gap: 2px }
.ov-split span { background: var(--cancelled) }
.ov-split .danger { background: var(--danger) }
.ov-split .success { background: var(--success) }
.ov-split .new { background: var(--purple-500) }
.ov-split .gold { background: var(--gold-500) }
.ov-lines {
 display: flex;
 flex-direction: column }
.ov-lines > div {
 display: flex;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 align-items: center;
 justify-content: space-between;
 gap: var(--s3) }
.ov-lines > div:last-child { border-bottom: 0 }
.ov-lines > div > span:not(.status) {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 2px }
.ov-lines b { font-weight: 600 }
.ov-lines .u-red { color: var(--danger) }
.ov-deadline {
 display: flex;
 flex-direction: column;
 gap: var(--s2) }
.ov-deadline .alert { margin: var(--s2) 0 }
.ov-deadline .btn { margin-top: auto }
.ov-chart-head {
 display: flex;
 margin-bottom: var(--s4);
 align-items: flex-start;
 justify-content: space-between;
 gap: var(--s3) }
.ov-total {
 display: flex;
 font-size: var(--fs-24);
 font-weight: 700;
 flex-direction: column;
 align-items: flex-end;
 gap: 2px }
.ov-total small {
 font-size: var(--fs-12);
 font-weight: 400 }
.ov-line {
 display: grid;
 grid-template-columns: auto minmax(0, 1fr);
 gap: var(--s2) }
.ov-y {
 display: flex;
 padding-bottom: 28px;
 height: 220px;
 font-size: 11px;
 color: var(--muted);
 text-align: right;
 flex-direction: column;
 justify-content: space-between }
.ov-y span {
 line-height: 1;
 transform: translateY(-50%) }
.ov-y span:last-child { transform: translateY(50%) }
.ov-plot {
 position: relative;
 padding-bottom: 28px;
 height: 220px }
.ov-plot svg {
 width: 100%;
 height: 100%;
 overflow: visible }
.ov-plot svg line {
 stroke: var(--border);
 stroke-width: 1 }
.ov-plot svg .ln {
 fill: none;
 stroke: var(--purple-700);
 stroke-width: 2;
 stroke-linejoin: round }
.ov-plot svg .mark {
 stroke: var(--gold-500);
 stroke-dasharray: 3 3 }
.ov-plot .dot {
 position: absolute;
 border-radius: 50%;
 width: 8px;
 height: 8px;
 background: var(--gold-500);
 transform: translate(-50%, -50%) }
.ov-x {
 position: absolute;
 right: 0;
 bottom: 0;
 left: 0;
 height: 20px;
 font-size: 11px;
 color: var(--muted) }
.ov-x span {
 position: absolute;
 transform: translateX(-50%);
 white-space: nowrap }
.ov-x span:first-child { transform: none }
.ov-x span:last-child { transform: translateX(-100%) }
.ov-bars {
 display: flex;
 height: 200px;
 align-items: stretch;
 gap: var(--s3) }
.ov-bars > div {
 display: flex;
 min-width: 0;
 flex-direction: column;
 justify-content: flex-end;
 flex: 1;
 gap: var(--s2) }
.ov-bars span {
 border-radius: 6px 6px 0 0;
 background: var(--purple-200) }
.ov-bars .now span { background: var(--purple-700) }
.ov-bars small {
 padding-top: var(--s2);
 border-top: 1px solid var(--border);
 font-size: var(--fs-12);
 color: var(--muted);
 text-align: center }
.ov-catlist {
 display: flex;
 margin-top: var(--s4);
 flex-direction: column;
 gap: var(--s4) }
.ov-catlist .row { margin-bottom: var(--s2) }
.ov-meter {
 border-radius: var(--r-full);
 height: 6px;
 background: var(--border);
 overflow: hidden }
.ov-meter span {
 display: block;
 border-radius: var(--r-full);
 height: 100%;
 background: var(--purple-700) }
.ov-foot {
 margin-top: var(--s5);
 padding-top: var(--s3);
 border-top: 1px solid var(--border) }
.ov-cats {
 display: flex;
 flex-direction: column }
.ov-cats .ov-foot { margin-top: auto }
.ov-card-head {
 display: flex;
 padding: var(--s5) var(--s5) var(--s3);
 align-items: flex-start;
 justify-content: space-between;
 gap: var(--s3) }
.ov-sellers .table th, .ov-sellers .table td { padding-inline: var(--s3) }
.ov-sellers .table td:nth-child(n+3) { white-space: nowrap }
.ov-mlist {
 display: flex;
 padding: 0 var(--s5) var(--s3);
 flex-direction: column }
.ov-mlist > div {
 display: flex;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 font-size: var(--fs-14);
 justify-content: space-between;
 gap: var(--s3) }
.ov-mlist > div:last-child { border-bottom: 0 }
.vr-cards {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.vr-card {
 display: flex;
 color: var(--text);
 flex-direction: column;
 gap: var(--s3) }
.vr-card:hover {
 color: var(--text);
 text-decoration: none }
.vr-card b { font-weight: 600 }
.vr-card > .row:first-child b { font-size: var(--fs-18) }
.u-trunc {
 max-width: 200px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap }
.vr-recent { margin-top: var(--s4) }
.vr-recent .ov-sec { margin-bottom: var(--s3) }
.vr-page .crumbs { display: none }
.vr-head, .us-head {
 display: flex;
 align-items: center;
 gap: var(--s3) }
.vr-head h1, .us-head h1 {
 font-size: var(--fs-18);
 font-weight: 600;
 line-height: 1.3 }
.vr-grid, .us-grid {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.vr-main {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.vr-main .vr-doctabs { order: 2 }
.vr-side, .us-main, .us-side {
 display: flex;
 min-width: 0;
 flex-direction: column;
 gap: var(--s4) }
.dv {
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 background: var(--surface);
 overflow: hidden }
.dv-bar {
 display: flex;
 padding: var(--s3) var(--s4);
 font-size: var(--fs-14);
 color: #FFFFFF;
 background: var(--purple-950);
 align-items: center;
 justify-content: space-between;
 gap: var(--s3) }
.dv-name {
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap }
.dv-btn {
 display: inline-flex;
 padding: 0;
 border: 0;
 border-radius: var(--r-xs);
 width: 44px;
 height: 44px;
 color: #FFFFFF;
 background: none;
 align-items: center;
 justify-content: center;
 cursor: pointer }
.dv-btn:hover { background: rgba(255, 255, 255, 0.12) }
.dv-z {
 min-width: 48px;
 text-align: center }
.dv-stage {
 display: flex;
 padding: var(--s5);
 height: 220px;
 background: #2B2240;
 align-items: center;
 justify-content: center;
 overflow: auto }
.dv-stage img {
 max-width: 100%;
 max-height: 100%;
 transform-origin: center;
 transition: transform var(--t-fast) }
.dv-stage iframe {
 border: 0;
 width: 100%;
 height: 100%;
 background: #FFFFFF;
 transform-origin: top center }
.dv-stage.empty-doc {
 color: var(--purple-200);
 flex-direction: column;
 gap: var(--s2) }
.dv-page {
 display: flex;
 padding: 12% 10%;
 border-radius: 4px;
 width: auto;
 height: 100%;
 background: #FFFFFF;
 aspect-ratio: 0.71;
 flex-direction: column;
 gap: 6% }
.dv-page i {
 display: block;
 border-radius: 2px;
 height: 6px;
 background: var(--border) }
.dv-page i.t {
 margin-inline: auto;
 width: 40%;
 height: 8px;
 background: var(--purple-200) }
.dv-page i.s { width: 60% }
.dv-foot {
 display: flex;
 padding: var(--s2) var(--s4);
 font-size: var(--fs-14);
 align-items: center;
 gap: var(--s2) }
.vr-check .stack { gap: var(--s3) }
.vr-check .check {
 font-size: var(--fs-14);
 align-items: center }
.vr-check .check input {
 margin: 0;
 width: 22px;
 height: 22px;
 flex: none }
.vr-decide {
 display: flex;
 padding: 0;
 border: 0;
 background: none;
 box-shadow: none;
 flex-direction: column;
 gap: var(--s3) }
.vr-mbar {
 position: sticky;
 bottom: 0;
 margin: var(--s2) calc(var(--s4) * -1) calc(var(--s7) * -1);
 padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
 border-top: 1px solid var(--border);
 background: var(--surface);
 z-index: 20 }
.vr-mbar .btn, .vr-accept .btn { width: 100% }
.vr-mbar .btn:disabled, .vr-accept .btn:disabled {
 color: var(--muted);
 background: var(--border);
 opacity: 1 }
.vr-btns {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--s3) }
.vr-btns .btn {
 font-size: var(--fs-16);
 font-weight: 600 }
.vr-btns .btn-outline:not(.u-danger) {
 border-color: var(--purple-900);
 color: var(--purple-900) }
.us-bar { flex-direction: column-reverse }
.us-mlist {
 display: flex;
 padding-block: var(--s1);
 flex-direction: column }
.us-mlist a {
 display: flex;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 color: var(--text);
 align-items: center;
 gap: var(--s3) }
.us-mlist a:last-child { border-bottom: 0 }
.us-mlist a:hover {
 color: var(--text);
 text-decoration: none }
.us-mlist .grow {
 display: flex;
 flex-direction: column;
 gap: 2px }
.us-mlist b { font-weight: 600 }
.us-mlist small {
 font-size: var(--fs-14);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap }
.us-more {
 position: relative;
 width: 56px }
.us-menu {
 right: auto;
 left: 0;
 min-width: 200px }
.us-menu .u-red { color: var(--danger) }
.us-act {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.us-dur {
 display: flex;
 flex-direction: column;
 gap: var(--s2) }
.us-dur .lbl { font-weight: 600 }
.us-dur .segmented {
 display: grid;
 border: 1px solid var(--border);
 grid-template-columns: repeat(3, 1fr) }
.us-dur .segmented button {
 padding-inline: var(--s1);
 min-height: 44px }
.us-go { width: 100% }
.us-more-btns {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: var(--s3) }
.us-head .grow { min-width: 0 }
.us-name { gap: var(--s3) }
.us-actions .btn { min-height: 44px }
.us-reveal {
 width: 44px;
 min-height: 44px;
 height: 44px }
.us-note {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: var(--s3) }
.us-note .u-title { margin-bottom: 0 }
.us-note textarea {
 padding: var(--s3);
 border: 1px solid var(--border-strong);
 border-radius: var(--r-sm);
 width: 100%;
 min-height: 88px;
 font-size: var(--fs-14);
 background: var(--surface);
 resize: vertical }
.us-note textarea:focus {
 border-color: var(--purple-700);
 box-shadow: 0 0 0 4px var(--purple-100);
 outline: none }
.us-page > .btn.u-m { width: 100% }
.us-page .crumbs { display: none }
.us-oend {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 2px }
.us-act .btn, .us-page > .btn.u-m {
 font-size: var(--fs-16);
 font-weight: 600 }
@media (min-width: 1024px) {
 .u-m, .u-mi { display: none !important }
 .ov-head { align-items: center }
 .ov-period {
  width: 280px;
  min-height: 48px }
 .ov-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4) }
 .ov-kpi {
  padding: var(--s5) var(--s5) var(--s4);
  gap: var(--s2) }
 .ov-kpi .value { font-size: 1.75rem }
 .ov-sec h2 { font-size: var(--fs-24) }
 .ov-row {
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: var(--s5);
  align-items: stretch }
 .ov-row.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) }
 .ov-actions { padding: var(--s1) var(--s5) }
 .ov-act { padding: var(--s5) 0 }
 .ov-act .chev { display: none }
 .ov-act .btn { display: inline-flex }
 .u-bar {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4) }
 .u-tools { flex: none }
 .u-tools .search-input {
  width: 280px;
  flex: none }
 .u-tabs.line {
  border-bottom: 1px solid var(--border);
  gap: var(--s5);
  align-self: stretch }
 .u-tabs.line button {
  position: relative;
  padding: 0 var(--s1);
  border: 0;
  border-radius: 0;
  min-height: 48px;
  color: var(--text-2);
  background: none }
 .u-tabs.line button.on {
  color: var(--purple-900);
  background: none }
 .u-tabs.line button.on::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--purple-900);
  content: '' }
 .vr .u-tabs.line {
  border-bottom: 0;
  align-self: auto }
 .vr-page .crumbs {
  display: flex;
  padding-top: 0 }
 .vr-head h1, .us-head h1 { font-size: var(--fs-24) }
 .vr-head .u-ava.lg, .us-head .u-ava.lg {
  width: 48px;
  height: 48px }
 .vr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 362px;
  gap: var(--s5);
  align-items: start }
 .vr-main .vr-doctabs { order: 0 }
 .dv-stage {
  padding: var(--s6);
  height: 676px }
 .dv-page { height: 620px }
 .vr-decide {
  padding: var(--s5);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-1) }
 .vr-accept p {
  margin-top: var(--s2);
  text-align: center }
 .us-bar { flex-direction: row }
 .us-page .crumbs {
  display: flex;
  padding-top: 0 }
 .us-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 362px;
  gap: var(--s5);
  align-items: start }
 .us-head .us-actions { flex: none } }

@media (max-width: 1023px) {
 .us-bar .u-tabs button[data-tab="banned"], .us-bar .u-tabs button[data-tab="deleted"] { display: none } }

/* ===== H04-H07 المتاجر والمنتجات والطلبات ===== */
.adm-feat {
 display: inline-flex;
 min-width: 44px;
 min-height: 44px;
 align-items: center;
 justify-content: center;
 cursor: pointer }
.adm-tiles {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: var(--s3) }
.adm-tile {
 display: flex;
 padding: var(--s4);
 min-width: 0;
 flex-direction: column;
 gap: var(--s1) }
.adm-tile .label {
 font-size: var(--fs-14);
 color: var(--text-2) }
.adm-tile .value {
 font-size: var(--fs-24);
 font-weight: 700;
 line-height: 1.2 }
.adm-tile .sub {
 font-size: var(--fs-12);
 color: var(--muted);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap }
.adm-list {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--s3) }
.adm-list > .tabs {
 margin-bottom: 0;
 min-width: 0;
 flex: 1 1 100% }
.adm-list > .toolbar {
 margin-bottom: 0;
 order: -1;
 flex: 1 1 100% }
.adm-list > [data-list] {
 min-width: 0;
 flex: 1 1 100% }
.adm-list .toolbar select { min-height: 44px }
.adm-list.chips > .tabs {
 padding-bottom: 2px;
 border-bottom: 0;
 gap: var(--s2) }
.adm-list.chips > .tabs button {
 display: inline-flex;
 padding: 0 var(--s4);
 border: 1px solid var(--border-strong);
 border-radius: var(--r-full);
 min-height: 44px;
 font-weight: 500;
 color: var(--text);
 background: var(--surface);
 align-items: center }
.adm-list.chips > .tabs button.on {
 border-color: var(--purple-300);
 color: var(--purple-900);
 background: var(--purple-100) }
.adm-list.chips > .tabs button.on::after { display: none }
.adm-list .tabs .count:empty { display: none }
.adm-list .tabs .count { margin: 0 }
.adm-list .tabs button { gap: var(--s2) }
.adm-kv dd a { color: var(--text) }
.adm-list .table th {
 padding-block: var(--s4);
 font-size: var(--fs-14);
 font-weight: 500;
 background: var(--purple-50) }
.adm-list .table td { padding-block: var(--s4) }
.adm-list .table td.adm-act {
 width: 1%;
 white-space: nowrap }
.adm-list .avatar {
 color: var(--purple-900);
 background: var(--purple-100) }
.adm-list .avatar.sq {
 border-radius: var(--r-xs);
 background: var(--gold-100) }
.adm-list .stars b {
 font-weight: 500;
 color: var(--text) }
.adm-list td a.num { color: var(--text) }
.adm-list.orders .table td { white-space: nowrap }
.adm-list.orders .table td:nth-child(4) { white-space: normal }
.adm-list.orders .tabs button:not([data-tab=""]) .count { display: none }
.adm-list .nowrap { flex-wrap: nowrap }
.adm-list .nowrap .bold { min-width: 0 }
.adm-table { overflow: visible }
.adm-table .table thead th:first-child { border-top-right-radius: var(--r-md) }
.adm-table .table thead th:last-child { border-top-left-radius: var(--r-md) }
.adm-thumb {
 display: inline-flex;
 border-radius: var(--r-xs);
 width: 40px;
 height: 40px;
 background: var(--surface-2);
 flex: none;
 overflow: hidden }
.adm-thumb.lg {
 width: 56px;
 height: 56px }
.adm-thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover }
.adm-acts .btn-ghost { color: var(--link) }
.adm-acts .btn-icon { color: var(--text-2) }
.row-menu { position: relative }
.row-menu .menu {
 min-width: 220px;
 background: var(--surface) }
.row-menu .menu-title {
 padding: var(--s1) var(--s3) var(--s2);
 font-size: var(--fs-12);
 color: var(--muted) }
.row-menu .menu a, .row-menu .menu button { color: var(--link) }
.row-menu .menu .danger { color: var(--danger) }
.adm-cards {
 display: none;
 flex-direction: column;
 gap: var(--s3) }
.adm-card {
 display: flex;
 padding: var(--s4);
 color: var(--text);
 align-items: flex-start;
 gap: var(--s3) }
.adm-card .grow {
 min-width: 0;
 flex: 1 }
.adm-card a.bold, .adm-list td a.bold { color: var(--text) }
.adm-card.order {
 flex-direction: column;
 align-items: stretch;
 gap: var(--s2) }
.adm-card.order:hover {
 border-color: var(--purple-300);
 text-decoration: none }
.flow {
 display: inline-flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--s1) }
.flow .icon { color: var(--muted) }
.btn.danger-outline {
 border-color: var(--danger);
 color: var(--danger) }
.adm-reasons {
 margin: 0;
 padding: 0;
 border: 0 }
.adm-reasons legend {
 margin-bottom: var(--s2);
 padding: 0 }
.adm-h {
 margin-bottom: var(--s4);
 font-size: var(--fs-18);
 font-weight: 600 }
.adm-order-head {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: var(--s3) }
.adm-order-head h1 {
 display: none;
 font-size: var(--fs-24) }
.adm-escrow-steps {
 display: grid;
 margin: 0;
 padding: 0;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 list-style: none;
 gap: var(--s2) }
.adm-escrow-steps li {
 display: flex;
 padding-top: var(--s3);
 border-top: 4px solid var(--border);
 min-width: 0;
 flex-direction: column;
 gap: var(--s1) }
.adm-escrow-steps li b {
 font-size: var(--fs-14);
 font-weight: 500;
 color: var(--muted) }
.adm-escrow-steps li.done { border-top-color: var(--success) }
.adm-escrow-steps li.done b {
 font-weight: 600;
 color: var(--success) }
.adm-escrow-steps li.now { border-top-color: var(--gold-200) }
.adm-escrow-steps li.now b {
 font-weight: 600;
 color: var(--gold-700) }
.adm-escrow-steps li.alert { border-top-color: var(--danger) }
.adm-escrow-steps li.alert b { color: var(--danger) }
.adm-order {
 display: grid;
 gap: var(--s4) }
.adm-order > .stack { min-width: 0 }
.adm-kv {
 display: grid;
 margin: 0;
 grid-template-columns: minmax(0, 1fr) auto }
.adm-kv dt, .adm-kv dd {
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border) }
.adm-kv dt { color: var(--text-2) }
.adm-kv dd {
 margin: 0;
 padding-inline-start: var(--s4);
 font-weight: 600;
 text-align: left }
.adm-kv dt:nth-last-child(2), .adm-kv dd:last-child { border-bottom: 0 }
.adm-kv .total {
 font-weight: 700;
 color: var(--text) }
.adm-timeline {
 margin: 0;
 padding: 0;
 list-style: none }
.adm-timeline li {
 position: relative;
 padding: 0 var(--s6) var(--s4) 0 }
.adm-timeline li::before {
 position: absolute;
 top: 6px;
 right: 0;
 border: 2px solid var(--border-strong);
 border-radius: 3px;
 width: 12px;
 height: 12px;
 content: '' }
.adm-timeline li::after {
 position: absolute;
 top: 24px;
 right: 7px;
 bottom: 4px;
 width: 1px;
 background: var(--border);
 content: '' }
.adm-timeline li:last-child::after { display: none }
.adm-timeline li.done::before {
 border-color: var(--success);
 background: var(--success) }
.adm-timeline li.now::before { border-color: var(--gold-500) }
.adm-sticky {
 position: sticky;
 bottom: 0;
 margin: 0 calc(-1 * var(--s4));
 padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
 border-top: 1px solid var(--border);
 background: var(--surface);
 z-index: 40 }
.adm-intervene { display: none }
.adm-more-info .rows { margin-bottom: var(--s4) }
body.admin-route main#app:has(.adm-sticky) { padding-bottom: 0 }
@media (max-width: 766px) {
 .adm-list.chips > .toolbar > :not(.search) { display: none } }
@media (max-width: 1023px) {
 .adm-desk { display: none }
 .adm-list .adm-table { display: none }
 .adm-cards { display: flex }
 .adm-list.products > .tabs button[data-tab="published"], .adm-list.products > .tabs .count { display: none }
 .adm-list.orders > .tabs button { order: 4 }
 .adm-list.orders > .tabs button[data-tab=""] { order: 0 }
 .adm-list.orders > .tabs button[data-tab="disputed"] { order: 1 }
 .adm-list.orders > .tabs button[data-tab="awaiting_payment"] { order: 2 }
 .adm-list.orders > .tabs button[data-tab="preparing"] { order: 3 } }
@media (min-width: 767px) and (max-width: 1023px) {
 .adm-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 767px) {
 .adm-tiles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4) }
 .adm-tile { padding: var(--s5) }
 .adm-tile .value { font-size: var(--fs-32) } }
@media (min-width: 1024px) {
 .adm-list { gap: var(--s4) }
 .adm-list > .tabs { flex: 1 1 auto }
 .adm-list > .toolbar {
  order: 0;
  flex: 0 1 auto }
 .adm-list > .toolbar .search {
  width: 280px;
  min-width: 0;
  flex: none }
 .adm-list.orders > .tabs {
  gap: 6px;
  flex: 1 1 0 }
 .adm-list.orders > .tabs button { padding: 0 var(--s3) }
 .adm-list.orders > .toolbar .search { width: 220px }
 .adm-list .table-wrap { overflow: visible }
 .adm-list:not(.chips) > .tabs { flex: 1 1 auto }
 .adm-order-head h1 { display: block }
 .adm-order {
  grid-template-columns: minmax(0, 1fr) 364px;
  align-items: start;
  gap: var(--s5) }
 .adm-intervene { display: flex }
 .adm-mob, .adm-sticky.adm-mob { display: none }
 body.admin-route main#app:has(.adm-sticky) { padding-bottom: var(--s7) } }

/* ===== I01 I02 I04 J01 المالية والنزاعات والتقارير ===== */
.af-mob-flex { display: flex }
.af-hide-m { display: none !important }
.af-head {
 display: flex;
 align-items: center;
 justify-content: flex-end }
.af-tools, .af-bar {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: var(--s2) }
.af-head .af-tools:empty { display: none }
.af-bar { justify-content: space-between }
.af-kpis {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: var(--s3) }
.af-kpi {
 display: flex;
 padding: var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 min-width: 0;
 background: var(--surface);
 flex-direction: column;
 gap: var(--s2) }
.af-kpi .lbl {
 font-size: var(--fs-14);
 color: var(--text-2) }
.af-kpi .val {
 font-size: var(--fs-24);
 font-weight: 700;
 line-height: 1.25;
 overflow-wrap: anywhere }
.af-kpi .sub {
 font-size: var(--fs-12);
 color: var(--muted) }
.af-alert:empty { display: none }
.af-alert .alert {
 display: flex;
 border: 1px solid var(--danger);
 width: 100%;
 align-items: center }
.af-ok { color: var(--success) }
.af-bad { color: var(--danger) }
.af-section, .af-stack {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.af-stack { gap: var(--s4) }
.af-list {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.af-table a.num { color: var(--text) }
.af-sec-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: var(--s3) }
.af-sec-head h2 {
 font-size: var(--fs-20);
 font-weight: 600 }
.af-pills, .af-tabs {
 display: flex;
 flex-wrap: wrap;
 gap: var(--s2) }
.af-pills button, .af-tabs button {
 display: inline-flex;
 padding: 0 var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-full);
 min-height: 44px;
 font-size: var(--fs-14);
 font-weight: 500;
 color: var(--text);
 background: var(--surface);
 align-items: center;
 gap: var(--s1);
 cursor: pointer }
.af-pills button.on, .af-tabs button.on {
 border-color: var(--purple-300);
 font-weight: 600;
 color: var(--purple-900);
 background: var(--purple-100) }
.af-chip { border-radius: var(--r-full) }
.af-drop { position: relative }
.af-drop .menu { min-width: 200px }
.af-drop .menu button[aria-checked="true"] {
 font-weight: 700;
 color: var(--purple-900) }
.af-drop .menu .danger { color: var(--danger) }
.af-table th {
 background: var(--purple-50);
 white-space: nowrap }
.card.af-web-block, .af-web-block .table-wrap { overflow: visible }
.af-table th:first-child { border-start-start-radius: var(--r-md) }
.af-table th:last-child { border-start-end-radius: var(--r-md) }
.af-table td { padding-block: var(--s4) }
.af-table .end { text-align: left }
.af-table tr.af-late { background: var(--danger-bg) }
.af-acts {
 justify-content: flex-end;
 flex-wrap: nowrap }
.af-pay {
 display: inline-block;
 padding: 2px 4px;
 border: 1px solid var(--border);
 border-radius: 6px;
 width: 40px;
 height: 24px;
 background: #FFFFFF;
 object-fit: contain }
.admin-main .avatar.sm {
 width: 32px;
 height: 32px;
 font-size: var(--fs-12);
 color: var(--purple-900);
 background: var(--gold-100) }
.af-qcard, .af-pcard {
 display: flex;
 padding: var(--s4);
 color: var(--text);
 flex-direction: column;
 gap: var(--s2) }
.af-qcard:hover { text-decoration: none }
.af-qcard b { font-size: var(--fs-16) }
.af-lines {
 display: flex;
 padding-block: var(--s1);
 flex-direction: column }
.af-lines > .row {
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 min-height: 48px }
.af-lines > .row:last-child { border-bottom: 0 }
.card.af-lines { padding-inline: var(--s4) }
.af-empty-line {
 display: flex;
 color: var(--text-2);
 align-items: center;
 gap: var(--s2) }
.af-empty-line .icon { color: var(--success) }
.af-pager {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: var(--s3) }
.af-card {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.af-card-title {
 font-size: var(--fs-18);
 font-weight: 600 }
.af-pad { padding: var(--s4) var(--s4) 0 }
.af-sum {
 display: flex;
 margin: 0;
 flex-direction: column }
.af-sum > .r {
 display: flex;
 padding: var(--s3) 0;
 border-top: 1px solid var(--border);
 min-height: 48px;
 align-items: center;
 justify-content: space-between;
 gap: var(--s3) }
.af-sum > .r:first-child, .af-sum > .af-web-block:first-child + .r { border-top: 0 }
.af-sum dt {
 min-width: 0;
 font-size: var(--fs-14);
 color: var(--text-2) }
.af-sum dd {
 margin: 0;
 min-width: 0;
 font-weight: 600;
 text-align: left;
 overflow-wrap: anywhere }
.af-desc {
 display: block;
 font-size: var(--fs-14);
 font-weight: 400;
 color: var(--text-2) }
.af-amount {
 padding: var(--s1) var(--s2);
 border: 1px solid var(--border-strong);
 border-radius: var(--r-xs);
 width: 140px;
 min-height: 44px;
 font-weight: 700;
 text-align: left;
 background: var(--surface) }
.af-amount-box {
 display: inline-flex;
 align-items: center;
 gap: var(--s1) }
.af-amount-box .riyal {
 padding: 0;
 height: auto }
.af-amount-box .riyal svg {
 width: 14px;
 height: 16px;
 fill: currentColor }
.af-amount:focus {
 border-color: var(--purple-700);
 box-shadow: 0 0 0 4px var(--purple-100);
 outline: none }
.af-detail-head {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: var(--s2) var(--s3) }
.af-detail-head h1 .num { white-space: nowrap }
.af-detail-head > div:first-child { min-width: 0 }
.af-detail-head > .row {
 padding-top: var(--s1);
 flex: none }
.af-detail-head h1 { font-size: var(--fs-20) }
.af-receipt {
 display: flex;
 padding: var(--s5);
 border-radius: var(--r-md);
 min-height: 320px;
 background: var(--purple-950);
 align-items: center;
 justify-content: center }
.af-receipt img {
 border-radius: var(--r-xs);
 max-height: 520px;
 background: #FFFFFF;
 object-fit: contain }
.af-receipt iframe {
 border: 0;
 border-radius: var(--r-xs);
 width: 100%;
 height: 520px;
 background: #FFFFFF }
.af-receipt.empty-r { color: var(--purple-200) }
.af-receipt-acts { justify-content: flex-end }
.af-checks .check {
 min-height: 44px;
 align-items: center }
.af-checks .check input { margin: 0 }
.af-decide { gap: var(--s3) }
.btn.af-danger {
 border-color: var(--danger);
 color: var(--danger) }
.btn.af-danger:hover {
 color: #FFFFFF;
 background: var(--danger) }
.af-dock {
 position: fixed;
 right: 0;
 bottom: 0;
 left: 0;
 padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
 border-top: 1px solid var(--border);
 background: var(--surface);
 z-index: 40 }
.af-dock-twin { display: none }
.af-review, .af-dispute { padding-bottom: 88px }
.af-reasons {
 display: flex;
 margin: 0;
 padding: 0;
 border: 0;
 flex-direction: column;
 gap: var(--s2) }
.af-reasons .check {
 min-height: 40px;
 align-items: center }
.af-reasons .check input { margin: 0 }
.af-escrow {
 display: grid;
 padding: var(--s4);
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: var(--s2) }
.af-escrow .step {
 display: flex;
 min-width: 0;
 font-size: var(--fs-12);
 color: var(--muted);
 flex-direction: column;
 gap: var(--s1) }
.af-escrow .step b {
 font-size: var(--fs-14);
 font-weight: 600 }
.af-escrow .bar {
 display: block;
 border-radius: var(--r-full);
 height: 4px;
 background: var(--border) }
.af-escrow .step.done, .af-escrow .step.done b { color: var(--success) }
.af-escrow .step.done .bar { background: var(--success) }
.af-escrow .step.bad, .af-escrow .step.bad b { color: var(--danger) }
.af-escrow .step.bad .bar { background: var(--danger) }
.af-evidence {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: var(--s2) }
.af-ev {
 display: flex;
 padding: 0;
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 color: var(--text);
 background: var(--surface-2);
 aspect-ratio: 1.3;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: var(--s1);
 overflow: hidden;
 cursor: pointer }
.af-ev img {
 width: 100%;
 height: 100%;
 object-fit: cover }
.af-ev.file {
 padding: var(--s2);
 text-align: center }
.af-ev.file span { overflow-wrap: anywhere }
.af-thread {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.af-msg {
 display: flex;
 padding: var(--s3) var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 max-width: 85%;
 background: var(--surface);
 flex-direction: column;
 align-self: flex-start;
 gap: var(--s1) }
.af-msg p {
 white-space: pre-wrap;
 overflow-wrap: anywhere }
.af-msg .who { color: var(--muted) }
.af-msg.buyer {
 border-color: transparent;
 background: var(--purple-50);
 align-self: flex-end }
.af-msg.admin { border-color: var(--purple-900) }
.af-msg.admin .who {
 font-weight: 600;
 color: var(--purple-700) }
.af-msg.sys {
 padding: var(--s2);
 border: 0;
 max-width: 100%;
 font-size: var(--fs-12);
 color: var(--text-2);
 text-align: center;
 background: none;
 align-self: center }
.af-reply {
 display: flex;
 gap: var(--s2) }
.af-reply input {
 padding: 0 var(--s4);
 border: 1px solid var(--border-strong);
 border-radius: var(--r-sm);
 min-width: 0;
 min-height: 48px;
 background: var(--surface);
 flex: 1 }
.af-reply input:focus {
 border-color: var(--purple-700);
 box-shadow: 0 0 0 4px var(--purple-100);
 outline: none }
.af-chat { display: none }
.af-chat-open .af-chat { display: flex }
.af-opts {
 display: grid;
 position: relative;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 row-gap: var(--s3) }
.af-opts::before {
 content: '';
 border-radius: var(--r-sm);
 background: var(--purple-50);
 grid-row: 1;
 grid-column: 1 / -1 }
.af-opt-wrap { display: contents }
.af-opts > .af-opt, .af-opt-wrap > .af-opt {
 margin: var(--s1) 2px;
 grid-row: 1 }
.af-opts > .af-opt:first-child {
 margin-inline-start: var(--s1);
 grid-column: 1 }
.af-opt-wrap > .af-opt { grid-column: 2 }
.af-opts > .af-opt:last-child {
 margin-inline-end: var(--s1);
 grid-column: 3 }
.af-opts .af-partial {
 grid-row: 2;
 grid-column: 1 / -1 }
.af-note {
 display: flex;
 flex-direction: column;
 gap: var(--s2) }
.af-note label {
 font-size: var(--fs-14);
 font-weight: 500 }
.af-note textarea {
 padding: var(--s3) var(--s4);
 border: 1px solid var(--border-strong);
 border-radius: var(--r-sm);
 width: 100%;
 min-height: 96px;
 background: var(--surface);
 resize: vertical }
.af-note textarea:focus {
 border-color: var(--purple-700);
 box-shadow: 0 0 0 4px var(--purple-100);
 outline: none }
.af-opt {
 display: flex;
 position: relative;
 padding: var(--s2);
 border-radius: 9px;
 min-height: 44px;
 font-size: var(--fs-14);
 font-weight: 500;
 color: var(--text-2);
 text-align: center;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 cursor: pointer }
.af-opt input {
 position: absolute;
 opacity: 0;
 pointer-events: none }
.af-opt:has(input:checked) {
 font-weight: 700;
 color: var(--purple-900);
 background: var(--surface);
 box-shadow: var(--shadow-1) }
.af-opt:has(input:focus-visible) {
 outline: 2px solid var(--purple-700);
 outline-offset: 2px }
.af-opt .s {
 font-size: var(--fs-12);
 color: var(--muted) }
.af-partial {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: var(--s2) }
.af-partial .field { width: 100% }
.af-qty {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: var(--s3) }
.af-qty label {
 font-size: var(--fs-14);
 font-weight: 500 }
.af-qty input {
 padding: 0 var(--s3);
 border: 1px solid var(--border-strong);
 border-radius: var(--r-sm);
 width: 96px;
 min-height: 48px;
 font-size: var(--fs-16);
 font-weight: 600;
 text-align: center;
 background: var(--surface) }
.af-qty input:focus {
 border-color: var(--purple-700);
 box-shadow: 0 0 0 4px var(--purple-100);
 outline: none }
.af-rtools {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: var(--s2) }
.af-periods {
 display: grid;
 width: 100%;
 grid-auto-columns: minmax(0, 1fr);
 grid-auto-flow: column }
.af-periods button { min-height: 44px }
.af-range-form {
 display: flex;
 padding: var(--s3);
 width: 280px;
 flex-direction: column;
 gap: var(--s3) }
.af-range-form[hidden] { display: none }
.af-rtabs {
 overflow-x: auto;
 scrollbar-width: none }
.af-exports {
 flex-wrap: wrap;
 gap: var(--s2) }
.af-mob-flex.af-exports {
 display: grid;
 grid-template-columns: 1fr 1fr }
.af-mob-flex.af-exports .btn { min-height: 56px }
.af-chart-card { gap: var(--s4) }
.af-bars {
 display: flex;
 border-bottom: 1px solid var(--border);
 height: 180px;
 align-items: flex-end;
 gap: 6px }
.af-bars .b {
 border-radius: 6px 6px 0 0;
 min-width: 0;
 background: var(--purple-200);
 flex: 1 }
.af-bars .b.cur { background: var(--purple-700) }
.af-bars-x {
 display: flex;
 justify-content: space-between }
.af-blocks {
 display: grid;
 gap: var(--s4) }
.af-hbars {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.af-hbars .hb {
 display: flex;
 flex-direction: column;
 gap: var(--s2) }
.af-hbars .track {
 display: flex;
 border-radius: var(--r-full);
 height: 6px;
 background: var(--border);
 overflow: hidden }
.af-hbars .track span {
 display: block;
 border-radius: inherit;
 height: 100%;
 background: var(--purple-900) }
@media (max-width: 1023px) {
 .af-web, .af-web-block, .af-web-flex, .af-web-inline { display: none !important }
 .af-alert, .af-bar > [data-sort], .af-pills [data-view="waiting"], .af-rtabs, .af-range, .af-block:not(.af-stores) { display: none }
 .af-stores .af-card-title { display: none }
 .af-stores .af-lines { padding-inline: var(--s4) }
 .af-detail-head h1.af-m-hide {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0) } }
@media (min-width: 1024px) {
 .af-web-flex { display: flex !important }
 .af-web-inline { display: inline-flex !important }
 .af-mob, .af-mob-block, .af-mob-flex { display: none !important }
 .af-hide-m { display: flex !important }
 .af-kpis.af-hide-m { display: grid !important }
 .af-stack { gap: var(--s5) }
 .af-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4) }
 .af-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
 .af-kpi { padding: var(--s5) var(--s5) var(--s4) }
 .af-kpi .val { font-size: var(--fs-32) }
 .af-detail-head { flex-wrap: nowrap }
 .af-detail-head h1 { font-size: var(--fs-24) }
 .af-sum > .af-web-block:first-child + .r { border-top: 1px solid var(--border) }
 .af-tabs {
  border-bottom: 1px solid var(--border);
  gap: var(--s5) }
 .af-tabs button {
  margin-bottom: -1px;
  padding: 0 var(--s1);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none }
 .af-tabs button.on {
  border-color: var(--purple-900);
  background: none }
 .af-dock { display: none }
 .af-dock-twin { display: flex }
 .af-review, .af-dispute { padding-bottom: 0 }
 .af-chat { display: flex }
 .af-opts {
  grid-template-columns: 1fr;
  gap: var(--s3) }
 .af-opts::before { display: none }
 .af-opts > .af-opt, .af-opts > .af-opt:first-child, .af-opts > .af-opt:last-child, .af-opt-wrap > .af-opt, .af-opts .af-partial {
  margin: 0;
  grid-row: auto;
  grid-column: auto }
 .af-opt-wrap {
  display: block;
  border: 1px solid var(--border);
  border-radius: 9px }
 .af-opt-wrap:has(input:checked) {
  border: 2px solid var(--purple-900);
  background: var(--purple-50) }
 .af-opt-wrap > .af-opt, .af-opt-wrap > .af-opt:has(input:checked) {
  border: 0;
  background: none }
 .af-opts .af-partial { padding: 0 48px var(--s4) var(--s4) }
 .af-opt {
  padding-block: var(--s4);
  padding-inline: 48px var(--s4);
  border: 1px solid var(--border);
  font-size: var(--fs-16);
  text-align: right;
  align-items: flex-start;
  justify-content: center;
  gap: 2px }
 .af-opt::before {
  position: absolute;
  top: 50%;
  right: var(--s4);
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  content: '';
  transform: translateY(-50%) }
 .af-opt:has(input:checked) {
  border: 2px solid var(--purple-900);
  background: var(--purple-50);
  box-shadow: none }
 .af-opt:has(input:checked)::before { border: 6px solid var(--purple-900) }
 .af-rtools { justify-content: space-between }
 .af-periods {
  width: auto;
  min-width: 360px }
 .af-blocks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start }
 .af-bars {
  height: 200px;
  gap: var(--s4) }
 .af-receipt { min-height: 300px } }

/* ===== I03 I05-I09 المحادثات والبلاغات والإعداد ===== */
@media (max-width: 1023px) {
 .cfg-bar .cfg-pills { display: none } }
.admin-main .pill.on {
 border-color: var(--purple-300);
 color: var(--accent-ink);
 background: var(--purple-100) }
.cfg-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: var(--s3) }
.cfg-bar .tabs {
 margin-bottom: 0;
 border-bottom: 0 }
.cfg-pills {
 flex-wrap: wrap;
 gap: var(--s2) }
.cfg-pills .pill { min-height: 44px }
.cfg-h {
 font-size: var(--fs-20);
 font-weight: 600 }
.cfg-tag {
 display: inline-flex;
 padding: 2px var(--s2);
 border: 1px solid var(--purple-300);
 border-radius: var(--r-xs);
 font-size: var(--fs-12);
 font-weight: 600;
 color: var(--link);
 background: var(--surface);
 align-items: center;
 white-space: nowrap }
.cfg-tag.gold {
 border-color: var(--gold-200);
 color: var(--gold-700) }
.cfg-wide-only { display: none }
.cfg-table td { padding: var(--s4) }
.cfg-table tbody tr.on { background: var(--purple-50) }
.cfg-report-card, .cfg-code-card {
 display: flex;
 width: 100%;
 font: inherit;
 color: inherit;
 text-align: right;
 flex-direction: column;
 gap: var(--s2);
 cursor: pointer }
.cfg-code-card.on { border-color: var(--purple-700) }
.cfg-kv {
 display: grid;
 margin: 0 }
.cfg-kv > div {
 display: flex;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 align-items: center;
 justify-content: space-between;
 gap: var(--s3) }
.cfg-kv dt {
 font-size: var(--fs-14);
 color: var(--muted) }
.cfg-kv dd {
 margin: 0;
 font-weight: 600;
 text-align: left }
.cfg-quote {
 margin: 0;
 padding: var(--s3) var(--s4);
 border-radius: var(--r-sm);
 background: var(--surface-2);
 white-space: pre-wrap }
.cfg-choices { gap: var(--s3) }
.cfg-help { display: none }
.cfg-pad { padding: var(--s4) }
.cfg-danger, .cfg-danger:hover { color: var(--danger) }
.cfg-link {
 font-weight: 600;
 color: var(--link);
 align-self: flex-start }
.cfg-link-btn {
 padding: 0;
 border: 0;
 min-height: 44px;
 font: inherit;
 color: inherit;
 text-align: right;
 background: none;
 cursor: pointer }
.cfg-link-btn:hover { color: var(--link) }
.cfg-handle {
 display: inline-flex;
 padding: 0;
 border: 0;
 border-radius: var(--r-xs);
 width: 44px;
 height: 44px;
 color: var(--muted);
 background: none;
 align-items: center;
 justify-content: center;
 flex: none;
 cursor: grab }
.cfg-handle:hover { color: var(--text) }
.dragging { opacity: 0.5 }
.drop-over { box-shadow: inset 0 0 0 2px var(--purple-300) }
.cfg-unit {
 display: flex;
 padding-inline: var(--s2);
 color: var(--muted);
 align-items: center }
.cfg-unit .riyal svg {
 width: auto;
 height: 14px;
 fill: currentColor }
.cfg-code-form .form-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
.cfg-more summary {
 display: flex;
 min-height: 44px;
 font-weight: 600;
 color: var(--link);
 align-items: center;
 cursor: pointer }
.cfg-more[open] summary { margin-bottom: var(--s3) }
.cfg-line {
 margin-bottom: var(--s2);
 align-items: flex-end;
 gap: var(--s3) }
.cfg-rows {
 display: flex;
 margin: 0;
 padding: 0;
 list-style: none;
 flex-direction: column }
.cfg-rows li {
 display: flex;
 padding: var(--s3) 0;
 border-bottom: 1px solid var(--border);
 align-items: center;
 gap: var(--s3) }
.cfg-rows li:last-child { border-bottom: 0 }
.cfg-chats {
 display: grid;
 gap: var(--s4) }
.cfg-conv-view {
 display: none;
 min-height: 70vh;
 flex-direction: column }
.cfg-chats.has-conv .cfg-conv-list { display: none }
.cfg-chats.has-conv .cfg-conv-view { display: flex }
.cfg-conv-tools {
 display: flex;
 padding: var(--s4);
 border-bottom: 1px solid var(--border);
 flex-direction: column;
 gap: var(--s3) }
.cfg-conv-items {
 display: flex;
 flex-direction: column }
.cfg-conv-item {
 display: flex;
 padding: var(--s4);
 border-bottom: 1px solid var(--border);
 color: var(--text);
 align-items: flex-start;
 gap: var(--s3) }
.cfg-conv-item:hover {
 color: var(--text);
 background: var(--purple-50);
 text-decoration: none }
.cfg-conv-item.on { background: var(--purple-50) }
.cfg-conv-item .grow {
 display: flex;
 min-width: 0;
 flex-direction: column;
 gap: var(--s1) }
.cfg-conv-item .grow > span { display: block }
.cfg-conv-head {
 display: flex;
 padding: var(--s4);
 border-bottom: 1px solid var(--border);
 align-items: center;
 gap: var(--s2) }
.cfg-conv-head .grow { min-width: 0 }
.cfg-conv-head .btn.on { color: var(--danger) }
.cfg-conv-title {
 font-size: var(--fs-16);
 font-weight: 600 }
.cfg-readonly {
 display: flex;
 margin: var(--s4) var(--s4) 0;
 padding: var(--s3) var(--s4);
 border: 1px solid var(--purple-300);
 border-radius: var(--r-sm);
 font-size: var(--fs-14);
 background: var(--purple-50);
 align-items: center;
 gap: var(--s2) }
.cfg-readonly .icon {
 color: var(--purple-700);
 flex: none }
.cfg-msgs {
 display: flex;
 padding: var(--s4);
 flex-direction: column;
 flex: 1;
 gap: var(--s3);
 overflow-y: auto }
.cfg-day {
 padding: var(--s1) var(--s4);
 border-radius: var(--r-full);
 font-size: var(--fs-12);
 color: var(--muted);
 text-align: center;
 background: var(--surface-2);
 align-self: center }
.cfg-msg {
 display: flex;
 padding: var(--s3) var(--s4);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 max-width: min(560px, 88%);
 font-size: var(--fs-14);
 background: var(--surface);
 flex-direction: column;
 gap: var(--s1);
 align-self: flex-start }
.cfg-msg.buyer {
 border-color: var(--purple-200);
 background: var(--purple-50);
 align-self: flex-end }
.cfg-msg.admin {
 border-color: var(--gold-200);
 background: var(--gold-100);
 align-self: center }
.cfg-msg.hidden-msg { opacity: 0.6 }
.cfg-msg .body {
 white-space: pre-wrap;
 overflow-wrap: anywhere }
.cfg-msg img {
 border-radius: var(--r-xs);
 max-height: 240px }
.cfg-warn {
 display: inline-flex;
 color: var(--warning);
 align-items: center;
 gap: var(--s1) }
.cfg-view-empty {
 display: flex;
 padding: var(--s6);
 flex: 1;
 align-items: center;
 justify-content: center }
.cfg-plans {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
 gap: var(--s4) }
.cfg-plan {
 display: flex;
 flex-direction: column;
 gap: var(--s3) }
.cfg-plan.on { border-color: var(--purple-700) }
.cfg-plan-top {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: var(--s2) }
.cfg-plan-top .row {
 flex-wrap: wrap;
 justify-content: flex-end;
 gap: var(--s2) }
.cfg-plan-name {
 font-size: var(--fs-18);
 font-weight: 600 }
.cfg-plan-price {
 display: flex;
 font-size: var(--fs-32);
 font-weight: 700;
 line-height: 1.2;
 align-items: baseline;
 gap: var(--s2) }
.cfg-plan-price small {
 font-size: var(--fs-14);
 font-weight: 400;
 color: var(--muted) }
.cfg-plan-edit { align-self: flex-end }
.cfg-plan-editor { gap: var(--s5) }
.cfg-feats {
 margin: 0;
 padding: 0;
 border: 0 }
.cfg-feats legend {
 margin-bottom: var(--s3);
 padding: 0;
 font-size: var(--fs-14);
 font-weight: 600 }
.cfg-feat-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
 gap: var(--s3) }
.cfg-ctable {
 border: 1px solid var(--border);
 border-radius: var(--r-sm) }
.cfg-ctable .field { min-width: 120px }
.cfg-cats, .cfg-codes {
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 align-items: start;
 gap: var(--s4) }
.cfg-table .nowrap { white-space: nowrap }
.cfg-cat {
 display: flex;
 padding: var(--s1) var(--s3);
 border-bottom: 1px solid var(--border);
 min-height: 52px;
 background: var(--surface);
 align-items: center;
 gap: var(--s2) }
.cfg-cat:last-child { border-bottom: 0 }
.cfg-cat.root { background: var(--surface-2) }
.cfg-cat.child { padding-inline-start: var(--s6) }
.cfg-cat.on { background: var(--purple-50) }
.cfg-cat-name {
 padding: 0;
 border: 0;
 min-height: 44px;
 font: inherit;
 color: var(--text);
 text-align: right;
 background: none;
 flex: 1;
 cursor: pointer }
.cfg-cat.root .cfg-cat-name { font-weight: 600 }
.cfg-cat.on .cfg-cat-name {
 font-weight: 700;
 color: var(--accent-ink) }
.cfg-spec { gap: var(--s4) }
.cfg-spec-table {
 border: 1px solid var(--border);
 border-radius: var(--r-sm) }
.cfg-spec-table td:first-child, .cfg-spec-table th:first-child { width: 56px }
.cfg-thumb {
 display: inline-block;
 border-radius: 6px;
 width: 96px;
 height: 32px;
 background: var(--surface-2);
 flex: none;
 overflow: hidden }
.cfg-thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover }
.cfg-thumb.sm {
 border-radius: var(--r-xs);
 width: 48px;
 height: 48px }
.cfg-banner-cell {
 display: flex;
 padding: 0;
 border: 0;
 min-height: 44px;
 font: inherit;
 color: inherit;
 text-align: right;
 background: none;
 align-items: center;
 gap: var(--s3);
 cursor: pointer }
.cfg-banner-editor, .cfg-featured { gap: var(--s4) }
.cfg-slots {
 display: grid;
 gap: var(--s4) }
.cfg-slot { align-items: flex-start }
.cfg-slot-img {
 display: flex;
 border-radius: var(--r-sm);
 width: 100%;
 background: var(--surface-2);
 align-items: center;
 justify-content: center;
 overflow: hidden;
 aspect-ratio: 4 / 1 }
.cfg-slot-img.image_mobile { aspect-ratio: 2 / 1 }
.cfg-slot-img img {
 width: 100%;
 height: 100%;
 object-fit: cover }
.cfg-codes-main { gap: var(--s5) }
.cfg-code-form { gap: var(--s4) }
.cfg-seg {
 display: flex;
 width: 100% }
.cfg-seg button {
 padding-inline: var(--s2);
 min-height: 44px;
 flex: 1 }
.cfg-code-actions {
 display: flex;
 position: sticky;
 bottom: 0;
 margin: 0 calc(var(--s5) * -1) calc(var(--s5) * -1);
 padding: var(--s3) var(--s5);
 border-top: 1px solid var(--border);
 background: var(--surface);
 flex-direction: column;
 gap: var(--s2) }
@media (max-width: 767px) {
 .cfg-type-tabs { gap: var(--s2) }
 .cfg-type-tabs a, .cfg-type-tabs button {
  padding: var(--s2) var(--s4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  min-height: 44px;
  color: var(--text-2);
  background: var(--surface) }
 .cfg-type-tabs .on {
  border-color: var(--purple-300);
  color: var(--accent-ink);
  background: var(--purple-100) }
 .cfg-type-tabs .on::after { display: none } }
@media (min-width: 768px) {
 .cfg-wide-only { display: block }
 .cfg-narrow-only { display: none }
 .cfg-help { display: block }
 .admin-main .form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
 .admin-main .form-grid.three .full { grid-column: 1 / -1 }
 .cfg-slots { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) } }
@media (min-width: 1024px) {
 .cfg-chats {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  height: calc(100vh - var(--header-h) - 64px);
  min-height: 560px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 0;
  overflow: hidden }
 .cfg-chats .card {
  border: 0;
  border-radius: 0;
  box-shadow: none }
 .cfg-chats .cfg-conv-list, .cfg-chats.has-conv .cfg-conv-list {
  display: flex;
  border-inline-end: 1px solid var(--border);
  flex-direction: column;
  overflow-y: auto }
 .cfg-chats .cfg-conv-view {
  display: flex;
  min-height: 0 }
 .cfg-back { display: none }
 .cfg-cats { grid-template-columns: minmax(0, 455fr) minmax(0, 636fr) }
 .cfg-codes { grid-template-columns: minmax(0, 1fr) 455px }
 .cfg-code-actions {
  position: static;
  margin: 0;
  padding: 0;
  border-top: 0 } }
.cfg-nowrap { white-space: nowrap }
@media (max-width: 1023px) {
 .cfg-conv-head { flex-wrap: wrap }
 .cfg-conv-head .grow { flex: 1 1 calc(100% - 56px) } }
.cfg-plan-editor .segmented { align-self: flex-start }
.cfg-rate-holder:empty { display: none }
.cfg-gap { gap: var(--s5) }
@media (max-width: 479px) {
 .cfg-seg {
  display: grid;
  grid-template-columns: 1fr 1fr } }
@media (max-width: 767px) {
 .cfg-hide-sm { display: none } }
.cfg-banner-cell span:last-child { min-width: 120px }
@media (max-width: 1023px) {
 .cfg-hide-md { display: none } }

/* ===== J02-J06 الإشعارات والمحتوى والإعدادات والفريق والسجل ===== */
.audit-note { margin-top: var(--s3) }
@media (max-width: 1023px) {
 .bc-log, .bc-actions [data-act="draft"] { display: none } }
.bc-h {
 font-size: var(--fs-20);
 font-weight: 600 }
.bc-grid, .bc-side {
 display: grid;
 min-width: 0;
 gap: var(--s4) }
.bc-form {
 padding: 0;
 border: 0;
 background: none;
 box-shadow: none;
 gap: var(--s4) }
.bc-form > .row:first-child .bc-h { display: none }
.bc-set {
 display: flex;
 margin: 0;
 padding: 0;
 border: 0;
 min-width: 0;
 flex-direction: column;
 gap: var(--s2) }
.bc-set legend, .set-lbl {
 margin-bottom: var(--s2);
 padding: 0;
 font-size: var(--fs-14);
 font-weight: 600;
 color: var(--text) }
.fchips {
 display: flex;
 flex-wrap: wrap;
 gap: var(--s2) }
.fchip {
 display: inline-flex;
 padding: 0 var(--s4);
 border: 1px solid var(--border-strong);
 border-radius: var(--r-full);
 min-height: 44px;
 font-size: var(--fs-14);
 font-weight: 500;
 color: var(--text);
 background: var(--surface);
 align-items: center;
 cursor: pointer;
 transition: border-color var(--t-fast), background-color var(--t-fast) }
.fchip:hover { border-color: var(--purple-500) }
.fchip.on, .fchip:has(input:checked) {
 border-color: var(--purple-300);
 font-weight: 600;
 color: var(--accent-ink);
 background: var(--purple-100) }
.fchip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--purple-200) }
.bc-chans {
 column-gap: var(--s4);
 row-gap: 0 }
.bc-chans .check {
 min-height: 44px;
 align-items: center }
.bc-chans .check input { margin: 0 }
.bc-count { margin-top: var(--s1) }
.bc-when {
 display: flex;
 width: 100% }
.bc-when button {
 min-height: 44px;
 flex: 1 }
.bc-actions {
 position: sticky;
 bottom: 0;
 margin-inline: calc(var(--s4) * -1);
 padding: var(--s3) var(--s4);
 border-top: 1px solid var(--border);
 background: var(--surface);
 flex-wrap: nowrap;
 gap: var(--s4);
 z-index: 5 }
.bc-actions .btn { flex: 1 }
.bc-push {
 display: flex;
 padding: var(--s4);
 border: 1px solid var(--purple-100);
 border-radius: var(--r-md);
 background: var(--purple-50);
 flex-direction: column;
 gap: var(--s3) }
.bc-push-card {
 display: flex;
 padding: var(--s3);
 border-radius: var(--r-sm);
 background: var(--surface);
 box-shadow: var(--shadow-1);
 align-items: flex-start;
 gap: var(--s3) }
.bc-push-card img {
 border-radius: 10px;
 width: 40px;
 height: 40px;
 flex: none }
.bc-push-card p {
 display: -webkit-box;
 margin-top: 2px;
 color: var(--text-2);
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden }
.bc-log .bc-h { padding: var(--s5) var(--s5) var(--s3) }
.bc-row-act {
 padding-block: 0;
 width: 44px;
 white-space: nowrap }
.bc-edit {
 min-height: 44px;
 font-weight: 500;
 text-align: start }
.bc-row-act .btn { min-height: 44px }
.cms {
 display: grid;
 gap: var(--s4) }
.cms-list {
 display: flex;
 flex-direction: column }
.cms-list a {
 display: flex;
 padding: var(--s3) var(--s4);
 border-bottom: 1px solid var(--border);
 min-height: 52px;
 font-size: var(--fs-14);
 color: var(--text);
 align-items: center;
 justify-content: space-between;
 gap: var(--s2) }
.cms-list a:last-child { border-bottom: 0 }
.cms-list a:hover {
 background: var(--purple-50);
 text-decoration: none }
.cms-list a.on {
 font-weight: 600;
 color: var(--accent-ink);
 background: var(--purple-50) }
.cms-list .cms-new {
 color: var(--link);
 justify-content: flex-start }
.cms-ed {
 min-width: 0;
 gap: var(--s4) }
.cms-head {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: var(--s3) }
.cms-head .segmented button {
 min-height: 44px;
 min-width: 88px }
.cms-draft {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: var(--s2) }
.cms-tools {
 display: flex;
 padding: var(--s1) var(--s2);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 gap: var(--s1) }
.cms-area {
 padding: var(--s4) var(--s5);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 min-height: 280px;
 background: var(--surface);
 line-height: 1.9;
 outline: none }
.cms-area:focus {
 border-color: var(--purple-700);
 box-shadow: 0 0 0 4px var(--purple-100) }
.cms-area h2, .cms-preview h2 {
 font-size: var(--fs-18);
 font-weight: 600 }
.cms-area ul, .cms-preview ul {
 margin: 0;
 padding-inline-start: var(--s5) }
.cms-preview {
 padding: var(--s4) 0;
 min-height: 280px }
.cms-preview h1 { font-size: var(--fs-24) }
.cms-actions { gap: var(--s5) }
.set-sec {
 display: flex;
 flex-direction: column;
 gap: var(--s4) }
.set-grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 gap: var(--s4) }
.set-grid > *, .cfg-cats > *, .cfg-codes > * { min-width: 0 }
.set-fs {
 margin: 0;
 padding: 0;
 border: 0;
 min-width: 0 }
.set-full, .set-list, .set-grid > .field.full { grid-column: 1 / -1 }
.field.has-addon:has(.set-unit) input { padding-left: 88px }
.field .set-unit {
 display: inline-flex;
 left: var(--s4);
 font-size: var(--fs-14);
 color: var(--muted);
 align-items: center;
 pointer-events: none }
.set-toggle {
 padding-bottom: var(--s3);
 border-bottom: 1px solid var(--border);
 grid-column: 1 / -1 }
.set-toggle label {
 min-height: 44px;
 color: var(--text-2) }
.set-cell p { margin-top: var(--s1) }
.set-pay {
 margin: 0;
 padding: 0;
 border: 0 }
.set-pay .row { gap: var(--s4) }
.set-paym {
 min-height: 44px;
 align-items: center;
 gap: var(--s2) }
.set-paym input { margin: 0 }
.set-paym img {
 padding: 2px 4px;
 border: 1px solid var(--border);
 border-radius: 6px;
 width: 36px;
 height: 22px;
 background: #FFFFFF;
 object-fit: contain }
.echips {
 display: flex;
 flex-wrap: wrap;
 gap: var(--s2) }
.echip {
 display: inline-flex;
 padding: 0 var(--s2) 0 var(--s3);
 border: 1px solid var(--purple-300);
 border-radius: var(--r-full);
 min-height: 40px;
 font-size: var(--fs-14);
 font-weight: 500;
 color: var(--accent-ink);
 background: var(--purple-50);
 align-items: center;
 gap: var(--s1) }
.echip button {
 display: inline-flex;
 position: relative;
 padding: 0;
 border: 0;
 border-radius: 50%;
 width: 32px;
 height: 32px;
 color: inherit;
 background: none;
 align-items: center;
 justify-content: center;
 cursor: pointer }
.echip button::after {
 position: absolute;
 inset: -6px;
 content: '' }
.echip button:hover { background: var(--purple-100) }
.echip.add {
 padding: 0 var(--s3);
 border-color: var(--border-strong);
 min-height: 44px;
 color: var(--text);
 background: var(--surface);
 cursor: pointer }
.echip.editing {
 padding: 0 var(--s2);
 border-color: var(--purple-700);
 background: var(--surface) }
.echip.editing input {
 border: 0;
 width: 140px;
 height: 38px;
 background: transparent;
 outline: none }
.set-save {
 position: sticky;
 bottom: 0;
 margin-inline: calc(var(--s4) * -1);
 padding: var(--s3) var(--s4);
 border-top: 1px solid var(--border);
 background: var(--surface);
 z-index: 5 }
.set-save .btn { width: 100% }
.team-head { margin-bottom: var(--s3) }
.rchip {
 display: inline-flex;
 padding: 2px var(--s2);
 border: 1px solid var(--purple-300);
 border-radius: 8px;
 font-size: var(--fs-12);
 font-weight: 600;
 color: var(--accent-ink);
 background: var(--surface) }
.perm-card { margin-top: var(--s5) }
.perm-head {
 padding: var(--s5) var(--s5) var(--s3);
 flex-wrap: wrap }
.perm-table td:not(:first-child), .perm-table th:not(:first-child) { white-space: nowrap }
.perm-sel {
 padding: 0 var(--s2);
 border: 1px solid var(--border-strong);
 border-radius: 10px;
 min-height: 40px;
 background: var(--surface) }
.perm-foot {
 padding: var(--s4) var(--s5);
 border-top: 1px solid var(--border) }
.audit-tabs {
 margin-bottom: var(--s3);
 flex-wrap: nowrap;
 overflow-x: auto;
 scrollbar-width: none }
.audit-tabs .fchip { flex: none }
.audit-bar { display: none }
.fsel {
 display: inline-flex;
 position: relative;
 align-items: center }
.fsel select {
 padding-inline: var(--s4) var(--s7);
 border: 1px solid var(--border-strong);
 border-radius: var(--r-full);
 min-height: 44px;
 font-size: var(--fs-14);
 font-weight: 500;
 color: var(--text);
 background: var(--surface);
 appearance: none;
 cursor: pointer }
.fsel .icon {
 position: absolute;
 color: var(--muted);
 inset-inline-end: var(--s3);
 pointer-events: none }
.fsel.on select {
 border-color: var(--purple-300);
 color: var(--accent-ink);
 background: var(--purple-100) }
.fdates {
 display: inline-flex;
 padding: 0 var(--s3);
 border: 1px solid var(--border-strong);
 border-radius: var(--r-sm);
 min-height: 44px;
 color: var(--muted);
 background: var(--surface);
 align-items: center;
 gap: var(--s2) }
.fdates input {
 border: 0;
 width: 96px;
 min-height: 40px;
 color: var(--text);
 background: transparent;
 outline: none }
.fdates label { font-size: var(--fs-14) }
.audit-csv { margin-inline-start: auto }
.audit-table { display: none }
.audit-cards {
 margin: 0;
 padding: 0;
 list-style: none }
.audit-cards li {
 display: flex;
 padding: var(--s4);
 border-bottom: 1px solid var(--border);
 flex-direction: column;
 gap: var(--s1);
 cursor: pointer }
.audit-cards li:last-child { border-bottom: 0 }
.audit-json {
 max-height: 280px;
 font-size: var(--fs-12);
 white-space: pre-wrap;
 overflow: auto }
.audit-page tr[data-row] { cursor: pointer }
.nowrap { white-space: nowrap }
@media (min-width: 1024px) {
 .bc-grid {
  grid-template-columns: minmax(0, 1fr) 456px;
  align-items: start }
 .bc-form {
  padding: var(--s6);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-1) }
 .bc-form > .row:first-child .bc-h { display: block }
 .bc-actions {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  gap: var(--s5) }
 .bc-when {
  display: inline-flex;
  width: auto;
  min-width: 320px;
  align-self: flex-start }
 .bc-actions .btn {
  min-width: 140px;
  flex: none }
 .cms {
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start }
 .cms-ed { padding: var(--s6) }
 .set-sec { padding: var(--s6) }
 .set-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) }
 .set-grid > .field { min-width: 0 }
 .set-save {
  display: flex;
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: none }
 .set-save .btn {
  width: auto;
  min-width: 160px }
 .audit-tabs { display: none }
 .audit-bar { display: flex }
 .audit-table { display: block }
 .audit-cards { display: none } }

/* ===== J09 تثبيت التطبيق ===== */
.install-wrap { max-width: 720px }
.install-ways { text-align: right }
.install-page {
 margin-top: var(--s5);
 text-align: center }
.install-page > img {
 margin: 0 auto;
 border-radius: 22px }
.install-page > .btn { align-self: center }
.install-scrim {
 position: fixed;
 padding: 0;
 border: 0;
 background: rgba(28, 20, 48, 0.45);
 inset: 0;
 z-index: 90 }
.install-sheet {
 display: flex;
 position: fixed;
 right: 0;
 bottom: 0;
 left: 0;
 padding: var(--s3) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
 border-radius: var(--r-lg) var(--r-lg) 0 0;
 max-height: 90vh;
 background: var(--surface);
 box-shadow: var(--shadow-3);
 flex-direction: column;
 gap: var(--s4);
 overflow-y: auto;
 z-index: 91;
 animation: rise var(--t-mid) var(--ease-out) }
.install-sheet .sheet-handle {
 display: block;
 margin: 0 auto var(--s2) }
.install-head {
 display: flex;
 align-items: center;
 gap: var(--s4) }
.install-head img {
 border-radius: var(--r-md);
 flex: none }
.install-head h2 {
 font-size: var(--fs-20);
 font-weight: 600 }
.install-head p {
 font-size: var(--fs-14);
 text-align: right }
.install-points {
 display: grid;
 margin: 0;
 padding: 0;
 list-style: none;
 gap: var(--s3) }
.install-points li {
 display: flex;
 font-size: var(--fs-16);
 align-items: flex-start;
 gap: var(--s3) }
.install-points li::before {
 margin-top: 6px;
 border: 2px solid var(--gold-500);
 border-radius: 3px;
 width: 16px;
 height: 16px;
 content: '';
 flex: none }
.install-sheet .btn {
 font-size: var(--fs-16);
 font-weight: 600 }
.install-sheet:focus, .install-pop:focus { outline: none }
.install-later {
 margin-top: calc(var(--s2) * -1);
 color: var(--purple-700) }
.install-ios {
 font-size: var(--fs-14);
 color: var(--muted);
 text-align: center }
.install-pop {
 display: flex;
 position: fixed;
 top: var(--s3);
 left: var(--s4);
 padding: var(--s5);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 width: 360px;
 font-size: var(--fs-14);
 background: var(--surface);
 box-shadow: var(--shadow-3);
 flex-direction: column;
 gap: var(--s3);
 z-index: 91;
 animation: rise var(--t-mid) var(--ease-out) }
.install-pop .install-head { gap: var(--s3) }
.install-pop .install-head img { border-radius: 12px }
.install-pop .install-head h2 {
 font-size: var(--fs-16);
 font-weight: 600 }
.install-pop .install-head p { font-size: var(--fs-12) }
.install-acts {
 display: flex;
 align-items: center;
 gap: var(--s3) }
.install-acts .btn-ghost { color: var(--purple-700) }
@media (min-width: 600px) {
 .install-sheet {
  margin-inline: auto;
  max-width: 560px } }