/* لوحة تحكم تزهب — أنماط (RTL، هوية تزهب: أخضر + ذهبي) */
:root {
  --deep: #0b3a2c;
  --grn: #17694f;
  --gold: #c19a5b;
  --gold-d: #a9792f;
  --cream: #faf6ee;
  --card: #fff;
  --line: #e9e2d3;
  --ink: #1b2a24;
  --mut: #6b7a72;
  --bad: #b3261e;
  --ok: #1f9d6b;
  --r: 14px;
  --sh: 0 1px 2px rgba(11, 58, 44, 0.05), 0 6px 20px rgba(11, 58, 44, 0.06);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, 'Noto Sans Arabic', system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
h1,
h2,
h3 {
  margin: 0;
  line-height: 1.3;
}
a {
  color: var(--grn);
}
small {
  color: var(--mut);
}
.grow {
  flex: 1;
  min-width: 0;
}
.row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sm {
  font-size: 13px;
}
.dim {
  opacity: 0.55;
}
.bad {
  color: var(--bad);
}
.warn {
  color: var(--bad);
}
.hint {
  display: block;
  color: var(--mut);
  font-size: 12.5px;
  margin-top: 4px;
}
.empty {
  color: var(--mut);
  text-align: center;
  padding: 22px 10px;
}
.loading {
  padding: 60px;
  text-align: center;
  color: var(--mut);
}
code {
  background: #f1ebdc;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 12.5px;
}

/* ---------- أزرار ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: 0.15s;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.btn:hover {
  border-color: var(--gold);
  background: #fffdf8;
}
.btn.primary {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
}
.btn.primary:hover {
  background: var(--grn);
}
.btn.danger {
  background: #fff;
  border-color: #e8b9b5;
  color: var(--bad);
}
.btn.danger:hover {
  background: #fdf1f0;
}
.btn.ghost {
  background: transparent;
}
.btn.sm {
  padding: 5px 11px;
  font-size: 13px;
}
.btn.block {
  width: 100%;
  margin-top: 10px;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ib {
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  font-size: 15px;
  color: var(--ink);
}
.ib:hover {
  background: #f1ebdc;
}
.ib:disabled {
  opacity: 0.25;
  cursor: default;
}
.link {
  border: 0;
  background: none;
  color: var(--grn);
  cursor: pointer;
  text-decoration: underline;
  font-size: 12.5px;
  padding: 0;
}

/* ---------- الإطار ---------- */
.app {
  display: flex;
  min-height: 100vh;
}
aside {
  width: 248px;
  background: var(--deep);
  color: #e9f1ec;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  flex: none;
}
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  padding: 4px;
}
.brand b {
  display: block;
  font-size: 17px;
  color: #fff;
}
.brand small {
  color: #a9c4b8;
}
#nav {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: auto;
  flex: 1;
}
#nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #cfe0d7;
  text-decoration: none;
  font-weight: 500;
}
#nav a:hover {
  background: rgba(255, 255, 255, 0.07);
}
#nav a.on {
  background: var(--gold);
  color: var(--deep);
  font-weight: 700;
}
#nav a span {
  width: 22px;
  text-align: center;
}
#nav em {
  margin-inline-start: auto;
  background: #e0533d;
  color: #fff;
  font-style: normal;
  font-size: 12px;
  border-radius: 99px;
  padding: 0 8px;
  min-width: 22px;
  text-align: center;
}
.sfoot {
  padding: 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sfoot a {
  color: #cfe0d7;
  font-size: 14px;
  text-decoration: none;
}
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 28px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.burger {
  display: none;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
}
.usr {
  position: relative;
}
#umenu {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: start;
}
#umenu b {
  display: block;
  font-size: 14px;
  line-height: 1.2;
}
#umenu small {
  font-size: 12px;
}
.av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--deep);
  display: grid;
  place-items: center;
  font-weight: 700;
}
.dd {
  position: absolute;
  inset-inline-end: 0;
  top: 46px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--sh);
  min-width: 200px;
  padding: 6px;
  z-index: 30;
}
.dd button {
  display: block;
  width: 100%;
  text-align: start;
  border: 0;
  background: none;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.dd button:hover {
  background: #f6f1e4;
}
#view {
  padding: 26px 28px 60px;
  max-width: 1400px;
  width: 100%;
}
.phead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.phead h2 {
  font-size: 24px;
  color: var(--deep);
}
.phead p {
  margin: 4px 0 0;
  color: var(--mut);
}

/* ---------- بطاقات وجداول ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--sh);
  margin-bottom: 16px;
}
.card h3 {
  font-size: 16px;
  margin-bottom: 14px;
  color: var(--deep);
}
.card.tools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
}
.card.tools input,
.card.tools select {
  flex: 1;
  min-width: 160px;
}
input:not([type='checkbox']):not([type='color']):not([type='file']),
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  background: #fff;
  outline: none;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(193, 154, 91, 0.18);
}
textarea {
  resize: vertical;
  line-height: 1.7;
}
.note {
  background: #fff8e6;
  border: 1px solid #f0dcaa;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.tablewrap {
  padding: 0;
  overflow-x: auto;
}
.tbl {
  width: 100%;
  border-collapse: collapse;
}
.tbl th {
  background: #f7f2e6;
  text-align: start;
  font-size: 13px;
  color: var(--mut);
  padding: 11px 14px;
  font-weight: 600;
  white-space: nowrap;
}
.tbl td {
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.tbl tbody tr:hover {
  background: #fffdf7;
}
.tbl.mini td,
.tbl.mini th {
  padding: 7px 8px;
}
.tbl small {
  display: block;
}
.acts {
  white-space: nowrap;
  text-align: end;
}
.chip {
  display: inline-block;
  background: #eef5f1;
  color: var(--grn);
  border-radius: 99px;
  padding: 1px 10px;
  font-size: 12.5px;
  margin: 1px 0;
}
.chip.role-owner {
  background: #fbefd6;
  color: var(--gold-d);
}
.chip.role-admin {
  background: #e8e3f4;
  color: #5a3d99;
}
.chip.role-analyst {
  background: #e3f0f7;
  color: #216b8e;
}
.vcell {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 220px;
}
.th {
  width: 54px;
  height: 40px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
}
.th img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.th.dk {
  background: var(--deep);
}
.th.big {
  width: 130px;
  height: 84px;
}
.noimg {
  color: var(--gold-d);
  font-weight: 700;
  font-size: 14px;
}
.pager {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 14px 0;
}
.pager button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  cursor: pointer;
}
.pager .on {
  background: var(--deep);
  color: #fff;
  border-color: var(--deep);
}
.bulk {
  position: sticky;
  top: 64px;
  z-index: 10;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--deep);
  color: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.bulk .btn {
  color: var(--ink);
}
.seg {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 3px;
  gap: 2px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.seg button {
  border: 0;
  background: none;
  padding: 7px 16px;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 600;
  color: var(--mut);
}
.seg button.on {
  background: var(--deep);
  color: #fff;
}
.phead .seg {
  margin: 0;
}
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 18px;
}
.tabs button {
  border: 0;
  background: none;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 600;
  color: var(--mut);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.tabs button.on {
  color: var(--deep);
  border-color: var(--gold);
}

/* مفتاح تشغيل */
.sw {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
}
.sw input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.sw i {
  position: absolute;
  inset: 0;
  background: #cfd6d2;
  border-radius: 99px;
  transition: 0.2s;
  cursor: pointer;
}
.sw i:before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  inset-inline-start: 3px;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.sw input:checked + i {
  background: var(--ok);
}
.sw input:checked + i:before {
  inset-inline-start: 21px;
}
.sw input:focus-visible + i {
  outline: 3px solid rgba(193, 154, 91, 0.5);
}

/* ---------- التحليلات ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.stat {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  box-shadow: var(--sh);
}
.si {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #f3ecd9;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: none;
}
.stat small {
  display: block;
  font-size: 13px;
}
.stat b {
  font-size: 26px;
  color: var(--deep);
  line-height: 1.15;
}
.delta {
  font-size: 12.5px;
  margin-inline-start: 8px;
  color: var(--mut);
  font-weight: 600;
}
.delta.up {
  color: var(--ok);
}
.delta.down {
  color: var(--bad);
}
.stat em {
  display: block;
  font-style: normal;
  color: var(--mut);
  font-size: 12.5px;
}
.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.grid2 .card {
  margin: 0;
}
.span2 {
  grid-column: 1/-1;
}
.chart {
  width: 100%;
  height: auto;
  display: block;
}
.chart .gl {
  stroke: #eee6d4;
  stroke-width: 1;
}
.chart .ax {
  fill: #8a968f;
  font-size: 11px;
}
.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 13px;
}
.lg i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-inline-end: 6px;
}
.bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.bl {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 4px;
}
.bl span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bl b small {
  font-weight: 400;
  margin-inline-start: 4px;
}
.bt {
  height: 8px;
  background: #f1ebdc;
  border-radius: 9px;
  overflow: hidden;
}
.bt i {
  display: block;
  height: 100%;
  border-radius: 9px;
}
.donut {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.donut ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  flex: 1;
  min-width: 130px;
}
.donut li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.donut li i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
}
.donut li b {
  margin-inline-start: auto;
}
.dn {
  font-size: 20px;
  font-weight: 700;
  fill: var(--deep);
}
.funnel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.funnel li {
  display: grid;
  grid-template-columns: 120px 1fr 42px 46px;
  gap: 10px;
  align-items: center;
  font-size: 13.5px;
}
.ft {
  height: 14px;
  background: #f1ebdc;
  border-radius: 7px;
  overflow: hidden;
}
.ft i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--grn), var(--gold));
  border-radius: 7px;
}
.funnel small {
  font-size: 12px;
  text-align: end;
}
.health {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.health div {
  background: #faf6ee;
  border-radius: 12px;
  padding: 14px;
}
.health b {
  display: block;
  font-size: 26px;
  color: var(--deep);
}
.health .warn b {
  color: var(--bad);
}

/* ---------- نماذج ونوافذ ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 33, 26, 0.55);
  display: grid;
  place-items: start center;
  overflow: auto;
  padding: 40px 14px;
  z-index: 100;
  backdrop-filter: blur(2px);
}
.modal {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.modal.wide {
  max-width: 780px;
}
.mh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.mh h3 {
  font-size: 18px;
  color: var(--deep);
}
.x {
  border: 0;
  background: #f4efe2;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.mb {
  padding: 22px;
}
.mf {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.cmsg {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
}
.fgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.full {
  grid-column: 1/-1;
}
.fld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.fld > span {
  font-weight: 600;
  font-size: 14px;
}
.fld > span small {
  font-weight: 400;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.chk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 5px 13px;
  cursor: pointer;
  font-size: 14px;
  background: #fff;
  user-select: none;
}
.chk:has(input:checked) {
  background: #eef5f1;
  border-color: var(--grn);
  color: var(--grn);
  font-weight: 600;
}
.chk input {
  accent-color: var(--grn);
}
.inline {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.inline input {
  max-width: 220px;
}
.prow {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.logobox {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.mgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.mgrid.big {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.mi {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  cursor: pointer;
}
.mi img {
  width: 100%;
  height: 84px;
  object-fit: contain;
  background: #fafafa;
  border-radius: 8px;
}
.mi b {
  font-size: 13px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mi small {
  font-size: 12px;
}
.mi em {
  color: var(--ok);
  font-style: normal;
}
.mgrid.big .mi {
  cursor: default;
  box-shadow: var(--sh);
}
.srt {
  list-style: none;
  margin: 0;
  padding: 0;
}
.srt li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--line);
}
.srt li:last-child {
  border: 0;
}
.srt .em {
  font-size: 26px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f3ecd9;
  display: grid;
  place-items: center;
}
.srt b {
  display: block;
}
.emojis {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.emojis button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  width: 38px;
  height: 38px;
  font-size: 20px;
  cursor: pointer;
}
.emojis button:hover {
  background: #f6f1e4;
}
.emin {
  max-width: 100px;
  font-size: 22px;
  text-align: center;
}

/* محرر النصوص */
.editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.ed-list {
  min-width: 0;
}
.fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 330px);
  overflow: auto;
  padding: 2px 4px 2px 2px;
}
.field {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
}
.field.chg {
  border-color: var(--gold);
  background: #fffdf6;
}
.field textarea {
  border: 0;
  padding: 4px 6px;
  box-shadow: none !important;
  background: transparent;
}
.fm {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 18px;
  padding: 0 6px;
}
.fm small {
  font-size: 12px;
}
.fm .orig {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.glob {
  background: #f7f2e6;
  border-radius: 12px;
  padding: 10px;
}
.glob summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--deep);
  margin-bottom: 8px;
}
.glob .field {
  margin-top: 8px;
}
.savebar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 4px 0;
  position: sticky;
  bottom: 0;
  background: var(--cream);
}
.savebar span {
  flex: 1;
  color: var(--gold-d);
  font-weight: 700;
}
.ed-prev {
  position: sticky;
  top: 78px;
}
.prevhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
#fr {
  width: 100%;
  height: calc(100vh - 170px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--sh);
}
.colors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.colr {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}
.colr input {
  width: 46px;
  height: 46px;
  padding: 2px;
  border-radius: 10px;
  cursor: pointer;
  flex: none;
}
.colr div {
  flex: 1;
  min-width: 0;
}
.colr b {
  display: block;
  font-size: 14px;
}

.leads {
  display: grid;
  gap: 12px;
}
.lead {
  margin: 0;
  border-inline-start: 5px solid var(--line);
}
.lead.new {
  border-inline-start-color: var(--gold);
}
.lead.done {
  border-inline-start-color: var(--ok);
}
.lead.spam {
  opacity: 0.6;
}
.lh {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
}
.lead p {
  margin: 8px 0 12px;
  white-space: pre-wrap;
}
.lf {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lf select {
  max-width: 150px;
}
.roles {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 16px;
  margin: 0;
}
.roles dt {
  font-weight: 700;
  color: var(--deep);
}
.roles dd {
  margin: 0;
  color: var(--mut);
}

/* ---------- الدخول ---------- */
.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(1000px 500px at 80% -10%, #d9eadf, transparent), var(--cream);
}
.authbox {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 34px 30px;
  width: 100%;
  max-width: 410px;
  box-shadow: 0 30px 70px rgba(11, 58, 44, 0.14);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.authbox img {
  height: 60px;
  object-fit: contain;
  align-self: center;
}
.authbox h1 {
  text-align: center;
  color: var(--deep);
  font-size: 23px;
}
.authbox > p {
  text-align: center;
  color: var(--mut);
  margin: -8px 0 4px;
}
.alert {
  background: #fdf1f0;
  border: 1px solid #efc3bf;
  color: var(--bad);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
}

#toasts {
  position: fixed;
  bottom: 22px;
  inset-inline-start: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
}
.toast {
  background: var(--deep);
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  animation: in 0.25s;
  max-width: 360px;
}
.toast.err {
  background: var(--bad);
}
@keyframes in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ---------- الجوال ---------- */
@media (max-width: 980px) {
  .editor {
    grid-template-columns: 1fr;
  }
  .ed-prev {
    display: none;
  }
  .fields {
    max-height: none;
  }
  .grid2 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  aside {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 60;
    transform: translateX(100%);
    transition: 0.25s;
  }
  aside.open {
    transform: none;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
  }
  .burger {
    display: block;
  }
  header {
    padding: 10px 14px;
  }
  #view {
    padding: 18px 14px 50px;
  }
  .fgrid {
    grid-template-columns: 1fr;
  }
  .funnel li {
    grid-template-columns: 90px 1fr 36px 40px;
  }
  #umenu span:last-child {
    display: none;
  }
  .bulk {
    top: 58px;
  }
}

/* ===== العملاء والمالية والتصنيف ===== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.kpis.small{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:2px;text-align:right;box-shadow:var(--sh);font:inherit;color:inherit}
.kpi small{color:var(--mut);font-size:13px}
.kpi b{font-size:21px;color:var(--deep);line-height:1.35}
.kpi em{font-style:normal;color:var(--mut);font-size:12.5px}
.kpi.bad{border-color:#e8b9b3;background:#fdf3f1}.kpi.bad b{color:var(--bad)}
.kpi.wal{background:linear-gradient(135deg,var(--deep),var(--grn));border:0}.kpi.wal small,.kpi.wal b{color:#fff}
.kpi.tier{cursor:pointer;transition:.2s}.kpi.tier:hover,.kpi.tier.on{border-color:var(--gold);transform:translateY(-2px)}
.kpi .delta{font-size:12.5px;font-weight:600}.kpi .delta.up{color:var(--ok)}.kpi .delta.down{color:var(--bad)}
.badge{display:inline-block;padding:2px 11px;border-radius:999px;font-size:12.5px;font-weight:600;background:#eef1ee;color:#4a5a52;white-space:nowrap}
.badge.active,.badge.paid{background:#dff1e8;color:#0f5a40}
.badge.frozen,.badge.due{background:#e8eefb;color:#2a4f9c}
.badge.late{background:#fbe3df;color:#a02c20}
.badge.closed,.badge.cancelled{background:#eee;color:#777}
tr.clk{cursor:pointer}tr.clk:hover td{background:#faf6ee}
.av.big{width:54px;height:54px;font-size:22px;flex:none}
.cph{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.cph h3{margin:0;font-size:20px}.cph p{margin:2px 0 0}
.pbar{position:relative;height:26px;border-radius:999px;background:#eee7d8;overflow:hidden;margin:4px 0 12px}
.pbar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--grn),#37a07b);border-radius:999px}
.pbar{direction:ltr}.pbar span{position:relative;display:block;text-align:center;font-size:12.5px;line-height:26px;color:#173f31;mix-blend-mode:normal;font-weight:600}
.wact{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--cream);border-radius:14px;padding:10px 14px;margin:10px 0 14px}
.btn.gold{background:var(--gold);color:#2a1d07;border-color:var(--gold)}
.pos{color:var(--ok)}.neg{color:var(--bad)}
.est{font-size:18px;color:var(--deep)}
.dl{display:grid;grid-template-columns:140px 1fr;gap:8px 14px}.dl dt{color:var(--mut)}.dl dd{margin:0}
.row.spread{justify-content:space-between;align-items:center}.row.wrap{flex-wrap:wrap}
.mut{color:#b4b8b2}
.dots{display:inline-flex;gap:4px}.dots i{width:10px;height:10px;border-radius:50%;background:#e4ded0}.dots i.on{background:var(--grn)}
.tsel{padding:5px 8px;border-radius:10px;border:1px solid var(--line);font:inherit;background:#fff}
.tsel.t-plat{border-color:#8a6dd0;background:#f3eefc}.tsel.t-gold{border-color:var(--gold);background:#fbf3e3}.tsel.t-silver{background:#f0f2f3}
.vcell{display:flex;align-items:center;gap:10px}
.matrix td,.matrix th{text-align:center}.matrix td:first-child,.matrix th:first-child{text-align:right}
.weakbar{background:#fff4d6;border-bottom:1px solid #ecd48c;color:#6b4e00;padding:10px 24px;font-size:14px}
.card.tools.sticky{position:sticky;top:0;z-index:5}
.ctwrap{display:grid;grid-template-columns:230px 1fr;gap:16px;align-items:start}
.cgroups{display:flex;flex-direction:column;gap:4px;position:sticky;top:70px}
.cgroups button{display:flex;justify-content:space-between;text-align:right;padding:9px 12px;border-radius:10px;font:inherit;background:transparent;border:0;cursor:pointer}
.cgroups button.on,.cgroups button:hover{background:#efe7d4}.cgroups small{color:var(--gold-d);font-weight:700}
.cfields{display:grid;gap:10px}
.field{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.field.chg{border-color:var(--gold);background:#fffaf0}
.field .orig{display:block;color:var(--mut);margin-bottom:4px}.field .gt{display:block;color:var(--gold-d);font-weight:600}
.field textarea{width:100%;font:inherit;border:1px solid var(--line);border-radius:10px;padding:8px 10px;resize:vertical}
@media(max-width:860px){.ctwrap{grid-template-columns:1fr}.cgroups{position:static;flex-direction:row;flex-wrap:wrap}}
.kpis.small{grid-template-columns:repeat(5,1fr)}
.tbl td b,.tbl td .badge{white-space:nowrap}
@media(max-width:900px){.kpis.small{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}