/* =========================================================
   IRANKINO MOBILE ADMIN
   Scoped administration UI for the public WebApp.
========================================================= */

:root {
  --ma-bg: rgba(2, 6, 23, 0.72);
  --ma-surface: rgba(15, 23, 42, 0.82);
  --ma-surface-strong: rgba(15, 23, 42, 0.96);
  --ma-soft: rgba(30, 41, 59, 0.68);
  --ma-border: rgba(148, 163, 184, 0.14);
  --ma-border-strong: rgba(148, 163, 184, 0.24);
  --ma-text: #f8fafc;
  --ma-muted: #94a3b8;
  --ma-subtle: #64748b;
  --ma-primary: #818cf8;
  --ma-primary-strong: #6366f1;
  --ma-cyan: #22d3ee;
  --ma-success: #34d399;
  --ma-warning: #fbbf24;
  --ma-danger: #fb7185;
  --ma-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
  --ma-readable-title: clamp(1rem, .96rem + .2vw, 1.125rem);
  --ma-readable-value: clamp(.9375rem, .9rem + .15vw, 1.0625rem);
  --ma-readable-body: clamp(.875rem, .84rem + .12vw, 1rem);
  --ma-readable-label: clamp(.8125rem, .78rem + .1vw, .875rem);
  --ma-readable-meta: clamp(.75rem, .72rem + .1vw, .8125rem);
  --ik-dialog-kicker-size: clamp(.75rem, .72rem + .1vw, .8125rem);
  --ik-dialog-title-size: clamp(1.125rem, 1.06rem + .25vw, 1.25rem);
  --ik-dialog-body-size: clamp(.875rem, .83rem + .18vw, 1rem);
  --ik-dialog-meta-size: clamp(.8125rem, .78rem + .12vw, .9375rem);
  --ik-dialog-button-size: clamp(.875rem, .84rem + .1vw, .9375rem);
  --ik-toast-title-size: clamp(.875rem, .84rem + .1vw, .9375rem);
  --ik-toast-body-size: clamp(.8125rem, .78rem + .1vw, .875rem);
}

html[data-theme="light"] {
  --ma-bg: rgba(241, 245, 249, 0.88);
  --ma-surface: rgba(255, 255, 255, 0.94);
  --ma-surface-strong: #ffffff;
  --ma-soft: rgba(241, 245, 249, 0.95);
  --ma-border: rgba(71, 85, 105, 0.14);
  --ma-border-strong: rgba(71, 85, 105, 0.24);
  --ma-text: #0f172a;
  --ma-muted: #64748b;
  --ma-subtle: #94a3b8;
  --ma-primary: #6366f1;
  --ma-primary-strong: #4f46e5;
  --ma-cyan: #0891b2;
  --ma-success: #059669;
  --ma-warning: #d97706;
  --ma-danger: #e11d48;
  --ma-shadow: 0 22px 55px rgba(15, 23, 42, 0.10);
}

#main-tabs.admin-mode {
  max-width: 940px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-tab-badge {
  min-width: 18px;
  height: 18px;
  margin-inline-start: 5px;
  padding: 0 5px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f43f5e;
  color: #fff;
  font-size: 9px;
  line-height: 18px;
  vertical-align: middle;
}

.admin-tab-badge:not(.hidden) { display: inline-flex; }

.admin-mobile-section {
  width: 100%;
  color: var(--ma-text);
}

.ma-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ma-header {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--ma-border);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% -30%, rgba(99, 102, 241, 0.20), transparent 48%),
    radial-gradient(circle at -10% 120%, rgba(34, 211, 238, 0.12), transparent 40%),
    var(--ma-surface);
  box-shadow: var(--ma-shadow);
  backdrop-filter: blur(16px);
}

.ma-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  color: var(--ma-primary);
  font-size: var(--ma-readable-label);
  font-weight: 850;
  letter-spacing: .04em;
}

.ma-header h2 {
  margin: 0;
  color: var(--ma-text);
  font-size: clamp(17px, 3vw, 23px);
  font-weight: 900;
}

.ma-header p {
  max-width: 650px;
  margin: 5px 0 0;
  color: var(--ma-muted);
  font-size: var(--ma-readable-body);
  line-height: 1.75;
}

.ma-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 7px 10px;
  border: 1px solid rgba(52, 211, 153, 0.20);
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.08);
  color: var(--ma-success);
  font-size: var(--ma-readable-label);
  font-weight: 850;
  direction: ltr;
}

.ma-live-dot,
.ma-presence-dot {
  position: relative;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}

.ma-live-dot::after,
.ma-presence-online .ma-presence-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid currentColor;
  border-radius: inherit;
  opacity: .35;
  animation: maPulse 1.7s ease-out infinite;
}

@keyframes maPulse {
  0% { transform: scale(.55); opacity: .55; }
  75%, 100% { transform: scale(1.65); opacity: 0; }
}

.ma-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.ma-metric {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--ma-border);
  border-radius: 16px;
  background: var(--ma-surface);
  box-shadow: 0 8px 30px rgba(0,0,0,.07);
}

.ma-metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ma-muted);
  font-size: var(--ma-readable-label);
}

.ma-metric-top i { color: var(--ma-primary); }
.ma-metric strong {
  display: block;
  margin-top: 7px;
  color: var(--ma-text);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}
.ma-metric small {
  display: block;
  margin-top: 5px;
  color: var(--ma-subtle);
  font-size: var(--ma-readable-meta);
  line-height: 1.55;
}

.ma-panel {
  overflow: hidden;
  border: 1px solid var(--ma-border);
  border-radius: 20px;
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow);
  backdrop-filter: blur(16px);
}

.ma-toolbar {
  display: grid;
  grid-template-columns: minmax(170px, 1.4fr) repeat(4, minmax(105px, .7fr)) auto;
  gap: 8px;
  padding: 11px;
  border-bottom: 1px solid var(--ma-border);
  background: color-mix(in srgb, var(--ma-soft) 75%, transparent);
}

.ma-search,
.ma-select {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.ma-search > i {
  position: absolute;
  inset-inline-start: 11px;
  color: var(--ma-subtle);
  font-size: 10px;
  pointer-events: none;
}

.ma-input,
.ma-select select,
.ma-textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--ma-border);
  border-radius: 11px;
  outline: none;
  background: var(--ma-bg);
  color: var(--ma-text);
  font-family: inherit;
  font-size: var(--ma-readable-body);
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.ma-input { height: 38px; padding: 0 10px 0 30px; }
[dir="rtl"] .ma-input { padding: 0 30px 0 10px; }
.ma-select select { height: 38px; padding: 0 9px; cursor: pointer; }
.ma-textarea { min-height: 92px; padding: 10px 11px; resize: vertical; line-height: 1.7; }

.ma-input:focus,
.ma-select select:focus,
.ma-textarea:focus {
  border-color: rgba(99, 102, 241, .55);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .10);
}

.ma-refresh {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ma-border);
  border-radius: 11px;
  background: var(--ma-bg);
  color: var(--ma-muted);
  cursor: pointer;
  transition: all 150ms ease;
}
.ma-refresh:hover { color: var(--ma-primary); border-color: rgba(99,102,241,.35); }
.ma-refresh.is-loading i { animation: maSpin .75s linear infinite; }
@keyframes maSpin { to { transform: rotate(360deg); } }

.ma-filter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--ma-border);
  color: var(--ma-muted);
  font-size: var(--ma-readable-label);
  line-height: 1.5;
}

.ma-filter-meta .ma-meta-live { color: var(--ma-success); }

.ma-list { display: flex; flex-direction: column; }
.ma-row {
  display: grid;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ma-border);
  transition: background 140ms ease, border-color 140ms ease;
}
.ma-row:last-child { border-bottom: 0; }
.ma-row:hover { background: rgba(99, 102, 241, 0.035); }
.ma-order-row {
  grid-template-columns:
    minmax(160px, 1.05fr)
    minmax(130px, 1.1fr)
    minmax(120px, 1fr)
    minmax(92px, .72fr)
    minmax(86px, .66fr)
    minmax(82px, .62fr)
    minmax(164px, auto);
  gap: 12px;
}
.ma-service-row { grid-template-columns: minmax(150px,1.2fr) minmax(140px,1fr) 105px minmax(120px,1fr) 85px 110px 126px; }

.ma-order-results { min-width: 0; }

.ma-table-head {
  padding-top: 8px;
  padding-bottom: 8px;
  background: color-mix(in srgb, var(--ma-soft) 58%, transparent);
  color: var(--ma-subtle);
  font-size: var(--ma-readable-label);
  font-weight: 800;
}

.ma-cell { min-width: 0; }
.ma-cell-label { display: none; }
.ma-order-link {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ma-primary);
  font: inherit;
  font-size: var(--ma-readable-value);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.ma-order-key,
.ma-order-key-copy,
.ma-order-customer-copy,
.ma-order-datetime {
  min-width: 0;
  display: flex;
}

.ma-order-key {
  align-items: center;
  gap: 10px;
}

.ma-order-key .ma-source-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  flex: 0 0 36px;
}

.ma-order-key-copy,
.ma-order-customer-copy,
.ma-order-datetime {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.ma-order-key-copy { flex: 1 1 auto; }
.ma-order-key-copy small {
  color: var(--ma-muted);
  font-size: var(--ma-readable-meta);
  line-height: 1.45;
}

.ma-order-customer-copy strong {
  max-width: 100%;
  color: var(--ma-text);
  font-size: var(--ma-readable-body);
  font-weight: 850;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ma-order-customer-copy small {
  max-width: 100%;
  color: var(--ma-muted);
  font-size: var(--ma-readable-meta);
  line-height: 1.55;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
  overflow-wrap: anywhere;
}

.ma-order-cell-service .ma-panel-copy strong,
.ma-order-cell-service .ma-panel-copy small {
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ma-order-cell-service .ma-panel-copy small {
  direction: inherit;
  unicode-bidi: plaintext;
  text-align: start;
}

.ma-order-datetime {
  color: var(--ma-muted);
  font-size: var(--ma-readable-label);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

.ma-order-datetime strong {
  color: var(--ma-text);
  font-size: var(--ma-readable-body);
  font-weight: 800;
}

.ma-order-cell-actions .ma-row-actions {
  min-width: 0;
  flex-wrap: wrap;
}

.ma-order-row .ma-action {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}

.ma-identity,
.ma-service-main,
.ma-panel-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ma-source-icon,
.ma-panel-icon {
  width: 31px;
  height: 31px;
  min-width: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--ma-border);
  background: var(--ma-soft);
  color: var(--ma-primary);
  font-size: 11px;
}
.ma-source-telegram { color: #38bdf8; background: rgba(14,165,233,.08); border-color: rgba(14,165,233,.18); }
.ma-source-email { color: #a78bfa; background: rgba(139,92,246,.08); border-color: rgba(139,92,246,.18); }
.ma-source-web { color: #34d399; background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.18); }

.ma-identity-copy,
.ma-service-copy,
.ma-panel-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ma-identity-copy strong,
.ma-service-copy strong,
.ma-panel-copy strong {
  overflow: hidden;
  color: var(--ma-text);
  font-size: var(--ma-readable-body);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ma-identity-copy small,
.ma-service-copy small,
.ma-panel-copy small {
  overflow: hidden;
  color: var(--ma-muted);
  font-size: var(--ma-readable-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: start;
}

.ma-service-copy strong { direction: ltr; text-align: start; }
.ma-panel-copy small { font-size: var(--ma-readable-label); line-height: 1.5; }

.ma-money { color: var(--ma-text); font-size: var(--ma-readable-value); font-weight: 850; line-height: 1.4; overflow-wrap: anywhere; }
.ma-money small { color: var(--ma-muted); font-size: var(--ma-readable-meta); font-weight: 500; }
.ma-date { color: var(--ma-muted); font-size: var(--ma-readable-label); line-height: 1.6; }
.ma-date strong { font-size: var(--ma-readable-value); line-height: 1.35; }

.ma-badge,
.ma-presence {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--ma-border);
  border-radius: 999px;
  background: var(--ma-soft);
  color: var(--ma-muted);
  font-size: var(--ma-readable-label);
  font-weight: 850;
  white-space: nowrap;
}
.ma-badge.pending { color: var(--ma-warning); border-color: rgba(251,191,36,.20); background: rgba(251,191,36,.07); }
.ma-badge.active { color: var(--ma-success); border-color: rgba(52,211,153,.20); background: rgba(52,211,153,.07); }
.ma-badge.rejected,
.ma-badge.deleted { color: var(--ma-danger); border-color: rgba(251,113,133,.20); background: rgba(251,113,133,.07); }
.ma-badge.disabled,
.ma-badge.expired { color: var(--ma-warning); border-color: rgba(251,191,36,.20); background: rgba(251,191,36,.07); }
.ma-presence-online { color: var(--ma-success); border-color: rgba(52,211,153,.20); background: rgba(52,211,153,.07); }

.ma-row-actions { display: flex; justify-content: flex-end; gap: 5px; }
.ma-action {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ma-border);
  border-radius: 9px;
  background: var(--ma-bg);
  color: var(--ma-muted);
  cursor: pointer;
  transition: all 150ms ease;
}
.ma-action:hover { transform: translateY(-1px); color: var(--ma-primary); border-color: rgba(99,102,241,.35); }
.ma-action.approve:hover { color: var(--ma-success); border-color: rgba(52,211,153,.30); }
.ma-action.reject:hover,
.ma-action.delete:hover { color: var(--ma-danger); border-color: rgba(251,113,133,.30); }
.ma-action[disabled] { opacity: .4; cursor: not-allowed; transform: none; }

.ma-usage { min-width: 0; }
.ma-usage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; color: var(--ma-muted); font-size: var(--ma-readable-label); line-height: 1.5; direction: ltr; }
.ma-usage-head strong,
.ma-usage-percent { color: var(--ma-text); font-size: var(--ma-readable-value); line-height: 1.35; }
.ma-usage-values { max-width: 100%; direction: ltr; unicode-bidi: isolate; white-space: normal; font-variant-numeric: tabular-nums; }
.ma-usage-percent { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ma-usage-separator { display: inline-block; padding: 0 2px; }
.ma-progress { width: 100%; height: 4px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: var(--ma-soft); }
.ma-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ma-primary-strong), var(--ma-cyan)); }
.ma-progress.warning > span { background: linear-gradient(90deg, #f59e0b, #f97316); }
.ma-progress.danger > span { background: linear-gradient(90deg, #f43f5e, #ef4444); }

.ma-empty,
.ma-loading {
  padding: 46px 16px;
  text-align: center;
  color: var(--ma-muted);
  font-size: var(--ma-readable-body);
  line-height: 1.7;
}
.ma-empty i,
.ma-loading i { display: block; margin-bottom: 10px; color: var(--ma-primary); font-size: 24px; }
.ma-empty strong { display: block; color: var(--ma-text); font-size: var(--ma-readable-body); }
.ma-empty p { margin: 4px 0 0; font-size: var(--ma-readable-meta); line-height: 1.55; }

.ma-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--ma-border);
}
.ma-page-button {
  min-width: 34px;
  height: 30px;
  border: 1px solid var(--ma-border);
  border-radius: 9px;
  background: var(--ma-bg);
  color: var(--ma-muted);
  font-family: inherit;
  font-size: var(--ma-readable-label);
  cursor: pointer;
}
.ma-page-button:disabled { opacity: .35; cursor: default; }
.ma-page-current { color: var(--ma-text); font-size: var(--ma-readable-label); }

.ma-toast-line {
  margin: 0 12px 10px;
  padding: 8px 10px;
  border: 1px solid rgba(251,191,36,.18);
  border-radius: 10px;
  background: rgba(251,191,36,.06);
  color: var(--ma-warning);
  font-size: var(--ma-readable-label);
  line-height: 1.5;
}

/* Modal / drawer */
.ma-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(2, 6, 23, .70);
  backdrop-filter: blur(8px);
}
.ma-modal {
  width: min(100%, 620px);
  max-height: min(90vh, 820px);
  overflow: auto;
  border: 1px solid var(--ma-border-strong);
  border-radius: 22px;
  background: var(--ma-surface-strong);
  color: var(--ma-text);
  box-shadow: 0 35px 100px rgba(0,0,0,.38);
}
.ma-modal.ma-modal-small { width: min(100%, 440px); }
.ma-modal-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ma-border);
  background: color-mix(in srgb, var(--ma-surface-strong) 92%, transparent);
  backdrop-filter: blur(12px);
}
.ma-modal-header small {
  display:block;
  color:var(--ma-muted);
  font-size:var(--ik-dialog-kicker-size);
  line-height:1.5;
}
.ma-modal-header h3 {
  margin:2px 0 0;
  font-size:var(--ik-dialog-title-size);
  font-weight:900;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.ma-close {
  width: 38px; height: 38px; flex:0 0 38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--ma-border); border-radius:10px; background:var(--ma-soft); color:var(--ma-muted); cursor:pointer;
}
.ma-modal-body {
  padding: 18px 20px 20px;
  font-size:var(--ik-dialog-body-size);
  line-height:1.75;
}
.ma-modal-body > p { font-size:inherit; line-height:inherit; }
.ma-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.ma-detail {
  min-width:0; padding:12px; border:1px solid var(--ma-border); border-radius:12px; background:var(--ma-bg);
}
.ma-detail.wide { grid-column:1/-1; }
.ma-detail span { display:block; color:var(--ma-muted); font-size:var(--ik-dialog-meta-size); line-height:1.5; margin-bottom:5px; }
.ma-detail strong,
.ma-detail code { display:block; color:var(--ma-text); font-size:var(--ik-dialog-body-size); line-height:1.6; font-weight:750; overflow-wrap:anywhere; white-space:normal; }
.ma-detail code { direction:ltr; text-align:start; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.ma-divider { height:1px; margin:16px 0; background:var(--ma-border); }
.ma-section-title { margin:0 0 10px; color:var(--ma-text); font-size:var(--ik-dialog-title-size); line-height:1.45; font-weight:900; }
.ma-event-list { display:flex; flex-direction:column; gap:7px; }
.ma-event { display:flex; align-items:flex-start; gap:8px; padding:10px 11px; border:1px solid var(--ma-border); border-radius:11px; background:var(--ma-bg); }
.ma-event > i { width:7px; height:7px; margin-top:4px; border-radius:50%; background:var(--ma-primary); }
.ma-event strong { display:block; font-size:var(--ik-dialog-body-size); line-height:1.55; }
.ma-event small { display:block; margin-top:2px; color:var(--ma-muted); font-size:var(--ik-dialog-meta-size); line-height:1.5; }

.ma-modal-actions { display:flex; gap:10px; margin-top:18px; }
.ma-button {
  flex:1; min-height:44px; padding-inline:14px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--ma-border); border-radius:12px; background:var(--ma-soft); color:var(--ma-text);
  font-family:inherit; font-size:var(--ik-dialog-button-size); line-height:1.45; font-weight:850; cursor:pointer; transition:all 150ms ease;
}
.ma-button.primary { border-color:rgba(99,102,241,.38); background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; }
.ma-button.success { border-color:rgba(16,185,129,.35); background:linear-gradient(135deg,#10b981,#059669); color:#fff; }
.ma-button.danger { border-color:rgba(244,63,94,.35); background:rgba(244,63,94,.10); color:var(--ma-danger); }
.ma-button:disabled { opacity:.45; cursor:not-allowed; }

.ma-connection { display:grid; grid-template-columns:160px minmax(0,1fr); gap:14px; align-items:start; }
.ma-qr {
  display:flex; flex-direction:column; align-items:center; gap:7px; padding:10px; border-radius:14px; background:#fff; color:#334155;
}
.ma-qr img { width:140px; height:140px; object-fit:contain; }
.ma-qr small { font-size:var(--ik-dialog-meta-size); line-height:1.5; font-weight:800; }
.ma-link-box { min-width:0; }
.ma-link-value { width:100%; min-height:80px; padding:12px; border:1px solid var(--ma-border); border-radius:12px; background:var(--ma-bg); color:var(--ma-text); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:var(--ik-dialog-meta-size); line-height:1.6; direction:ltr; text-align:left; overflow-wrap:anywhere; }

.ma-form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.ma-form-group label { color:var(--ma-muted); font-size:var(--ik-dialog-meta-size); line-height:1.5; font-weight:750; }
.ma-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }

/* Orders/services dialogs are mounted on <body>, so scope them by active tab. */
body:is([data-active-section="admin-orders"], [data-active-section="admin-services"]) .ma-modal-header small,
body:is([data-active-section="admin-orders"], [data-active-section="admin-services"]) .ma-detail span,
body:is([data-active-section="admin-orders"], [data-active-section="admin-services"]) .ma-event small,
body:is([data-active-section="admin-orders"], [data-active-section="admin-services"]) .ma-qr small,
body:is([data-active-section="admin-orders"], [data-active-section="admin-services"]) .ma-link-value {
  font-size: var(--ik-dialog-meta-size);
  line-height: 1.55;
}

body:is([data-active-section="admin-orders"], [data-active-section="admin-services"]) .ma-form-group label {
  font-size: var(--ik-dialog-meta-size);
  line-height: 1.5;
}

body:is([data-active-section="admin-orders"], [data-active-section="admin-services"]) .ma-modal-header h3,
body:is([data-active-section="admin-orders"], [data-active-section="admin-services"]) .ma-section-title {
  font-size: var(--ik-dialog-title-size);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

body:is([data-active-section="admin-orders"], [data-active-section="admin-services"]) .ma-detail strong,
body:is([data-active-section="admin-orders"], [data-active-section="admin-services"]) .ma-detail code,
body:is([data-active-section="admin-orders"], [data-active-section="admin-services"]) .ma-event strong,
body:is([data-active-section="admin-orders"], [data-active-section="admin-services"]) .ma-button {
  font-size: var(--ik-dialog-body-size);
  line-height: 1.5;
}

body:is([data-active-section="admin-orders"], [data-active-section="admin-services"]) .ma-modal-body > p {
  font-size: var(--ik-dialog-body-size) !important;
  line-height: 1.75 !important;
}

@media (max-width: 900px) {
  #main-tabs.admin-mode { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:760px; }
  .ma-toolbar { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ma-search { grid-column: span 2; }
  .ma-service-row { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .ma-table-head { display:none; }
  .ma-service-row:not(.ma-table-head) { margin:9px; padding:12px; border:1px solid var(--ma-border); border-radius:15px; background:var(--ma-bg); }
  .ma-service-row:not(.ma-table-head) + .ma-service-row:not(.ma-table-head) { margin-top:0; }
  .ma-service-row .ma-cell { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:34px; }
  .ma-service-row .ma-cell::before { content:attr(data-label); color:var(--ma-subtle); font-size:var(--ma-readable-meta); line-height:1.55; font-weight:750; flex-shrink:0; }
  .ma-service-row .ma-cell:nth-child(1), .ma-service-row .ma-cell:nth-child(2) { grid-column: span 2; }
  .ma-service-row .ma-row-actions { justify-content:flex-end; width:100%; }
}

@media (max-width: 640px) {
  #main-tabs.admin-mode { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:100%; }
  #main-tabs.admin-mode #tab-admin-notifications { grid-column:1/-1; }
  .ma-header { padding:14px; border-radius:17px; }
  .ma-live { padding:6px 8px; }
  .ma-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ma-metric { padding:10px; }
  .ma-metric strong { font-size:15px; }
  .ma-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); padding:9px; }
  .ma-search { grid-column:1/-1; }
  .ma-refresh { width:100%; }
  .ma-panel { border-radius:17px; }
  .ma-service-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 10px; }
  .ma-service-row .ma-cell:nth-child(1), .ma-service-row .ma-cell:nth-child(2), .ma-service-row .ma-cell:nth-child(4), .ma-service-row .ma-cell:last-child { grid-column:1/-1; }
  .ma-service-row:not(.ma-table-head) { margin:8px; padding:10px; }
  .ma-service-row .ma-cell { min-height:31px; }
  .ma-modal-backdrop { align-items:flex-end; padding:12px; }
  .ma-modal, .ma-modal.ma-modal-small { width:100%; max-height:calc(100svh - 24px); border-radius:20px; }
  .ma-detail-grid { grid-template-columns:1fr; }
  .ma-detail.wide { grid-column:auto; }
  .ma-connection { grid-template-columns:1fr; }
  .ma-qr { width:min(190px,100%); margin:0 auto; }
  .ma-form-grid { grid-template-columns:1fr; }
  .ma-modal-actions { flex-direction:column-reverse; }
}

@media (max-width: 390px) {
  .ma-metrics { gap:6px; }
  .ma-toolbar { grid-template-columns:1fr 1fr; gap:6px; }
  .ma-header { flex-direction:column; }
  .ma-live { align-self:flex-start; }
}

/* Orders keep their toolbar mounted while live data updates independently. */
.ma-orders-toolbar :is(.ma-input, .ma-select select),
.ma-orders-toolbar .ma-refresh {
  height: 42px;
}

.ma-orders-toolbar .ma-refresh { width: 42px; }

@media (max-width: 1180px) {
  .ma-orders-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ma-orders-toolbar .ma-search { grid-column: span 2; }
  .ma-orders-list > .ma-table-head { display: none; }
  .ma-order-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }

  .ma-order-row:not(.ma-table-head) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "order customer customer"
      "service amount status"
      "service time actions";
    align-items: stretch;
    gap: 12px 16px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--ma-border);
    border-radius: 16px;
    background: var(--ma-bg);
    box-shadow: 0 8px 24px rgba(2, 6, 23, .08);
  }

  .ma-order-cell {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
  }

  .ma-order-cell::before {
    content: attr(data-label);
    display: block;
    color: var(--ma-subtle);
    font-size: var(--ma-readable-meta);
    font-weight: 750;
    line-height: 1.4;
  }

  .ma-order-cell-key { grid-area: order; }
  .ma-order-cell-customer { grid-area: customer; }
  .ma-order-cell-service { grid-area: service; }
  .ma-order-cell-amount { grid-area: amount; }
  .ma-order-cell-status { grid-area: status; }
  .ma-order-cell-time { grid-area: time; }
  .ma-order-cell-actions { grid-area: actions; }

  .ma-order-cell-actions .ma-row-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .ma-orders-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
  }

  .ma-orders-toolbar .ma-search { grid-column: 1 / -1; }
  .ma-orders-toolbar .ma-refresh { width: 100%; }

  .ma-order-row:not(.ma-table-head) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "order customer"
      "service service"
      "amount status"
      "time actions";
  }
}

@media (max-width: 520px) {
  .ma-orders-toolbar { grid-template-columns: minmax(0, 1fr); }
  .ma-orders-toolbar .ma-search { grid-column: auto; }
  .ma-orders-toolbar :is(.ma-input, .ma-select select),
  .ma-orders-toolbar .ma-refresh { min-height: 44px; }
  .ma-order-results { gap: 8px; padding: 8px; }

  .ma-order-row:not(.ma-table-head) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "order"
      "customer"
      "service"
      "amount"
      "status"
      "time"
      "actions";
    gap: 11px;
    padding: 13px;
  }

  .ma-order-cell {
    padding-block-end: 10px;
    border-block-end: 1px solid color-mix(in srgb, var(--ma-border) 72%, transparent);
  }

  .ma-order-cell-actions {
    padding-block: 2px 0;
    border-block-end: 0;
  }

  .ma-order-cell-actions .ma-row-actions {
    gap: 8px;
  }

  .ma-order-row .ma-action {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 11px;
  }
}

.ma-service-toolbar {
  grid-template-columns: minmax(190px, 1.4fr) repeat(3, minmax(110px, .75fr)) auto;
}

@media (max-width: 900px) {
  .ma-service-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ma-service-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ma-service-toolbar .ma-search { grid-column: 1 / -1; }
}

/* =========================================================
   GLOBAL INVISIBLE SCROLLBARS
   Scrolling remains enabled with wheel/touch/keyboard, but no track/thumb
   is rendered anywhere in the WebApp.
========================================================= */
html,
body,
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

html.ik-dialog-open,
body.ik-dialog-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.mn-detail-open,
body.mn-detail-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* =========================================================
   PROFESSIONAL GLOBAL DIALOG
========================================================= */
.ik-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2, 6, 23, .70);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  animation: ikDialogBackdropIn .18s ease-out both;
}

.ik-dialog {
  position: relative;
  width: min(100%, 480px);
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--ma-border-strong, rgba(148,163,184,.24));
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% -10%, color-mix(in srgb, var(--ik-dialog-accent, #818cf8) 18%, transparent), transparent 42%),
    var(--ma-surface-strong, #0f172a);
  color: var(--ma-text, #f8fafc);
  box-shadow: 0 34px 100px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.02) inset;
  animation: ikDialogCardIn .2s cubic-bezier(.2,.8,.2,1) both;
}

.ik-dialog-info { --ik-dialog-accent: var(--ma-cyan, #38bdf8); }
.ik-dialog-warning { --ik-dialog-accent: var(--ma-warning, #fbbf24); }
.ik-dialog-danger { --ik-dialog-accent: var(--ma-danger, #fb7185); }
.ik-dialog-success { --ik-dialog-accent: var(--ma-success, #34d399); }

.ik-dialog-accent {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ik-dialog-accent), transparent);
  opacity: .9;
}

.ik-dialog-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--ik-dialog-accent) 35%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--ik-dialog-accent) 12%, transparent);
  color: var(--ik-dialog-accent);
  font-size: 17px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ik-dialog-accent) 12%, transparent);
}

.ik-dialog-copy {
  min-width: 0;
}

.ik-dialog-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--ik-dialog-accent);
  font-size: var(--ik-dialog-kicker-size);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ik-dialog h3 {
  margin: 0;
  color: var(--ma-text, #f8fafc);
  font-size: var(--ik-dialog-title-size);
  font-weight: 950;
  line-height: 1.45;
}

.ik-dialog p {
  margin: 10px 0 0;
  color: var(--ma-muted, #94a3b8);
  font-size: var(--ik-dialog-body-size);
  font-weight: 550;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.ik-dialog-reference {
  display: inline-flex;
  align-items: center;
  margin-inline: .18rem;
  padding: .1rem .4rem;
  border: 1px solid var(--ma-border, rgba(148,163,184,.15));
  border-radius: .45rem;
  background: var(--ma-bg, rgba(2,6,23,.72));
  color: var(--ma-text, #f8fafc);
  font: 700 var(--ik-dialog-meta-size)/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  direction: ltr;
  unicode-bidi: isolate;
}

.ik-dialog-input-wrap {
  margin-top: 16px;
}

.ik-dialog-input {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--ma-border-strong, rgba(148,163,184,.22));
  border-radius: 12px;
  outline: none;
  background: var(--ma-bg, rgba(2,6,23,.72));
  color: var(--ma-text, #f8fafc);
  font: 600 var(--ik-dialog-meta-size)/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  direction: ltr;
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.ik-dialog-input:focus {
  border-color: color-mix(in srgb, var(--ik-dialog-accent) 65%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ik-dialog-accent) 11%, transparent);
}

.ik-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.ik-dialog-button {
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid var(--ma-border, rgba(148,163,184,.15));
  border-radius: 12px;
  background: var(--ma-soft, rgba(30,41,59,.68));
  color: var(--ma-text, #f8fafc);
  font-family: inherit;
  font-size: var(--ik-dialog-button-size);
  line-height: 1.45;
  font-weight: 850;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}

.ik-dialog-button:hover { filter: brightness(1.07); }
.ik-dialog-button:active { transform: scale(.98); }
.ik-dialog-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ik-dialog-accent) 15%, transparent);
}
.ik-dialog-button.primary {
  border-color: color-mix(in srgb, #6366f1 45%, transparent);
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  box-shadow: 0 8px 24px rgba(79,70,229,.22);
}
.ik-dialog-button.danger {
  border-color: color-mix(in srgb, #fb7185 45%, transparent);
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #fff;
  box-shadow: 0 8px 24px rgba(225,29,72,.22);
}

html[data-theme="light"] .ik-dialog-backdrop {
  background: rgba(15, 23, 42, .38);
}

html[data-theme="light"] .ik-dialog {
  box-shadow: 0 30px 80px rgba(15,23,42,.18), 0 0 0 1px rgba(255,255,255,.7) inset;
}

/* Theme-aware web toast with shared typography and semantic tones. */
.ik-toast-region {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  left: 50%;
  z-index: 100600;
  width: min(24rem, calc(100vw - 2rem));
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  pointer-events: none;
  transform: translateX(-50%);
}

.ik-toast {
  --ik-toast-tone: #38bdf8;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-width: 0;
  padding: .875rem;
  border: 1px solid color-mix(in srgb, var(--ik-toast-tone) 38%, transparent);
  border-inline-start-width: 3px;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--ma-surface-strong, #0f172a) 96%, transparent);
  color: var(--ma-text, #f8fafc);
  box-shadow: 0 20px 55px rgba(0,0,0,.28);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  text-align: start;
  opacity: 0;
  transform: translateY(-.75rem);
  transition: opacity .22s ease, transform .22s ease;
}

.ik-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ik-toast[data-toast-tone="success"] { --ik-toast-tone: var(--ma-success, #34d399); }
.ik-toast[data-toast-tone="warning"] { --ik-toast-tone: var(--ma-warning, #fbbf24); }
.ik-toast[data-toast-tone="error"] { --ik-toast-tone: var(--ma-danger, #fb7185); }
.ik-toast[data-toast-tone="info"] { --ik-toast-tone: var(--ma-cyan, #38bdf8); }

.ik-toast-icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ik-toast-tone) 35%, transparent);
  border-radius: .75rem;
  background: color-mix(in srgb, var(--ik-toast-tone) 13%, transparent);
  color: var(--ik-toast-tone);
  font-size: .9375rem;
}

.ik-toast-copy { min-width: 0; flex: 1; }

.ik-toast-title {
  margin: 0;
  color: var(--ik-toast-tone);
  font-size: var(--ik-toast-title-size);
  font-weight: 850;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ik-toast-message {
  margin: .2rem 0 0;
  color: var(--ma-text, #f8fafc);
  font-size: var(--ik-toast-body-size);
  font-weight: 550;
  line-height: 1.65;
  opacity: .86;
  overflow-wrap: anywhere;
}

html[data-theme="light"] .ik-toast {
  box-shadow: 0 18px 44px rgba(15,23,42,.14);
}

@media (max-width: 520px) {
  .ik-dialog-backdrop {
    align-items: flex-end;
    padding: 12px;
  }
  .ik-dialog {
    width: 100%;
    max-height: calc(100svh - 24px);
    overflow-y: auto;
    border-radius: 20px;
    padding: 18px 16px max(18px, env(safe-area-inset-bottom));
  }
  .ik-dialog-actions {
    flex-direction: column-reverse;
  }
  .ik-dialog-button {
    width: 100%;
  }
  .ik-toast-region {
    top: max(.75rem, env(safe-area-inset-top));
    width: calc(100vw - 1.5rem);
  }
}

@keyframes ikDialogBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ikDialogCardIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ik-dialog-backdrop,
  .ik-dialog { animation: none !important; }
  .ik-toast { transition: none !important; }
}

/* به صورت پیش‌فرض نمایش داده شود */
.brand-title-desktop {
    display: block;
}

/* فقط موبایل */
/* به صورت پیش‌فرض نمایش داده شود */
.brand-title-desktop {
    display: block;
}

/* فقط موبایل */
@media (max-width: 639px) {
    .brand-title-desktop {
        display: none !important;
    }
}

/* =========================================================
   MOBILE ADMIN — BROADCAST CENTER
========================================================= */

.mn-shell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  direction: rtl;
  color: var(--ma-text);
}

.mn-header {
  position: relative;
  overflow: hidden;
  padding: 17px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--ma-border);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% -35%, rgba(99,102,241,.25), transparent 48%),
    radial-gradient(circle at -8% 125%, rgba(34,211,238,.13), transparent 42%),
    var(--ma-surface);
  box-shadow: var(--ma-shadow);
  backdrop-filter: blur(18px);
}

.mn-eyebrow {
  margin-bottom: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ma-primary);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .045em;
  direction: ltr;
}

.mn-header h2 {
  margin: 0;
  color: var(--ma-text);
  font-size: clamp(18px,3vw,24px);
  font-weight: 950;
}

.mn-header p {
  max-width: 650px;
  margin: 5px 0 0;
  color: var(--ma-muted);
  font-size: 10px;
  line-height: 1.8;
}

.mn-refresh {
  min-height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1px solid var(--ma-border-strong);
  border-radius: 10px;
  background: var(--ma-soft);
  color: var(--ma-text);
  font-family: inherit;
  font-size: 8px;
  font-weight: 850;
  cursor: pointer;
}

.mn-metrics {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 9px;
}

.mn-metrics article {
  min-width: 0;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ma-border);
  border-radius: 16px;
  background: var(--ma-surface);
  box-shadow: 0 8px 28px rgba(0,0,0,.07);
}

.mn-metrics article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  font-size: 13px;
}

.mn-metrics article > span.violet { color:#a5b4fc; background:rgba(99,102,241,.14); }
.mn-metrics article > span.blue { color:#38bdf8; background:rgba(14,165,233,.13); }
.mn-metrics article > span.teal { color:#2dd4bf; background:rgba(20,184,166,.13); }
.mn-metrics article > span.orange { color:#fbbf24; background:rgba(245,158,11,.13); }
.mn-metrics article > div { min-width:0; display:grid; gap:1px; }
.mn-metrics small { overflow:hidden; color:var(--ma-muted); font-size:7px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.mn-metrics strong { color:var(--ma-text); font-size:17px; font-weight:950; line-height:1.25; }
.mn-metrics em { overflow:hidden; color:var(--ma-subtle); font-size:6.5px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }

.mn-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(300px,.68fr);
  gap: 12px;
  align-items: start;
}

.mn-side {
  min-width: 0;
  position: sticky;
  top: 12px;
  display: grid;
  gap: 12px;
}

.mn-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ma-border);
  border-radius: 19px;
  background: var(--ma-surface);
  box-shadow: 0 12px 36px rgba(0,0,0,.09);
  backdrop-filter: blur(16px);
}

.mn-composer { padding: 15px; }
.mn-card-title { display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.mn-card-title > span {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:11px;
  color:#a5b4fc;
  background:rgba(99,102,241,.14);
}
.mn-card-title > div { min-width:0; }
.mn-card-title h3 { margin:0; color:var(--ma-text); font-size:11px; font-weight:950; }
.mn-card-title p { margin:3px 0 0; color:var(--ma-muted); font-size:7.5px; line-height:1.6; }
.mn-card-title.compact { margin:0; }
.mn-card-title.compact > span { width:31px; height:31px; font-size:11px; }

.mn-section { margin-bottom:13px; }
.mn-label { display:block; margin-bottom:7px; color:var(--ma-muted); font-size:8px; font-weight:800; }
.mn-categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.mn-category {
  min-width:0;
  min-height:52px;
  padding:8px;
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--ma-border);
  border-radius:12px;
  background:var(--ma-bg);
  color:var(--ma-muted);
  text-align:right;
  font-family:inherit;
  cursor:pointer;
  transition:border-color 150ms ease,background 150ms ease,transform 150ms ease;
}
.mn-category:hover { transform:translateY(-1px); border-color:var(--ma-border-strong); }
.mn-category.active { border-color:rgba(99,102,241,.55); color:var(--ma-primary); background:rgba(99,102,241,.11); box-shadow:0 0 0 2px rgba(99,102,241,.06) inset; }
.mn-category > i { width:21px; flex:0 0 auto; text-align:center; font-size:11px; }
.mn-category > span { min-width:0; display:grid; gap:2px; }
.mn-category strong { overflow:hidden; color:var(--ma-text); font-size:7.5px; text-overflow:ellipsis; white-space:nowrap; }
.mn-category small { overflow:hidden; color:var(--ma-subtle); font-size:6px; text-overflow:ellipsis; white-space:nowrap; }

.mn-consent,
.mn-validation,
.mn-link-help {
  margin:8px 0 0;
  padding:8px 9px;
  display:flex;
  align-items:flex-start;
  gap:7px;
  border:1px solid rgba(245,158,11,.2);
  border-radius:10px;
  background:rgba(245,158,11,.07);
  color:var(--ma-warning);
  font-size:7px;
  font-style:normal;
  line-height:1.7;
}
.mn-validation { border-color:rgba(244,63,94,.2); background:rgba(244,63,94,.07); color:var(--ma-danger); }
.mn-link-help { border:0; background:transparent; color:var(--ma-subtle); padding:0; }
.mn-consent i,.mn-validation i,.mn-link-help i { margin-top:2px; flex:0 0 auto; }

.mn-form-grid {
  margin-bottom:10px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.mn-form-grid label { min-width:0; display:grid; gap:5px; }
.mn-form-grid label > span { color:var(--ma-muted); font-size:7.5px; font-weight:800; }
.mn-form-grid input,
.mn-form-grid select,
.mn-schedule input {
  width:100%;
  min-height:38px;
  padding:0 10px;
  border:1px solid var(--ma-border);
  border-radius:10px;
  outline:0;
  background:var(--ma-bg);
  color:var(--ma-text);
  font-family:inherit;
  font-size:8px;
  transition:border-color 150ms ease,box-shadow 150ms ease;
}
.mn-form-grid input:focus,
.mn-form-grid select:focus,
.mn-schedule input:focus,
.mn-message-wrap textarea:focus {
  border-color:rgba(99,102,241,.7);
  box-shadow:0 0 0 3px rgba(99,102,241,.10);
}
.mn-form-grid input.ltr { direction:ltr; text-align:left; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

.mn-message-wrap { position:relative; margin-bottom:10px; }
.mn-message-label { margin-bottom:5px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mn-message-label span { color:var(--ma-muted); font-size:7.5px; font-weight:800; }
.mn-message-label em { color:var(--ma-success); font-size:6px; font-style:normal; }
.mn-format-toolbar {
  padding:5px;
  display:flex;
  align-items:center;
  gap:4px;
  border:1px solid var(--ma-border);
  border-bottom:0;
  border-radius:11px 11px 0 0;
  background:var(--ma-soft);
}
.mn-format-toolbar button {
  width:27px;
  height:25px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--ma-muted);
  font-family:inherit;
  font-size:8px;
  cursor:pointer;
}
.mn-format-toolbar button:hover { color:var(--ma-text); background:rgba(99,102,241,.12); }
.mn-message-wrap textarea {
  width:100%;
  min-height:150px;
  padding:11px;
  display:block;
  resize:vertical;
  border:1px solid var(--ma-border);
  border-radius:0 0 11px 11px;
  outline:0;
  background:var(--ma-bg);
  color:var(--ma-text);
  font-family:inherit;
  font-size:8.5px;
  line-height:1.9;
}
.mn-message-wrap > small { position:absolute; bottom:7px; left:8px; color:var(--ma-subtle); font-size:6px; pointer-events:none; }

.mn-channels { margin:4px 0 10px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.mn-channels button {
  min-width:0;
  min-height:52px;
  padding:9px 10px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--ma-border);
  border-radius:12px;
  background:var(--ma-bg);
  color:var(--ma-subtle);
  font-family:inherit;
  text-align:right;
  cursor:pointer;
}
.mn-channels button > i { width:26px; font-size:16px; text-align:center; }
.mn-channels button > span { min-width:0; flex:1; display:grid; gap:2px; }
.mn-channels button strong { color:var(--ma-text); font-size:8px; }
.mn-channels button small { color:var(--ma-subtle); font-size:6.5px; }
.mn-channels button em { padding:3px 6px; border-radius:99px; background:var(--ma-soft); color:var(--ma-subtle); font-size:6px; font-style:normal; font-weight:850; }
.mn-channels button.telegram.active { border-color:rgba(14,165,233,.45); color:#38bdf8; background:rgba(14,165,233,.08); }
.mn-channels button.email.active { border-color:rgba(20,184,166,.45); color:#2dd4bf; background:rgba(20,184,166,.08); }
.mn-channels button.active em { color:currentColor; background:rgba(255,255,255,.07); }

.mn-advanced { margin-bottom:10px; overflow:hidden; border:1px solid var(--ma-border); border-radius:12px; background:rgba(15,23,42,.12); }
.mn-advanced summary {
  min-height:38px;
  padding:0 11px;
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--ma-muted);
  font-size:8px;
  font-weight:850;
  cursor:pointer;
  list-style:none;
}
.mn-advanced summary::-webkit-details-marker { display:none; }
.mn-advanced summary::after { content:"⌄"; margin-right:auto; color:var(--ma-subtle); transition:transform 150ms ease; }
.mn-advanced[open] summary::after { transform:rotate(180deg); }
.mn-advanced[open] summary { border-bottom:1px solid var(--ma-border); color:var(--ma-text); }
.mn-advanced > .mn-form-grid { margin:0; padding:10px 10px 7px; }
.mn-advanced > .mn-link-help { margin:0 10px 10px; }

.mn-media-upload {
  margin:2px 10px 8px;
  padding:10px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px dashed rgba(99,102,241,.38);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(14,165,233,.05));
}
.mn-media-upload.has-file { border-style:solid; border-color:rgba(16,185,129,.34); background:rgba(16,185,129,.06); }
.mn-media-upload-icon { width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto; border-radius:11px; color:#a5b4fc; background:rgba(99,102,241,.16); font-size:14px; }
.mn-media-upload.has-file .mn-media-upload-icon { color:var(--ma-success); background:rgba(16,185,129,.13); }
.mn-media-upload > div:nth-of-type(2) { min-width:0; flex:1; display:grid; gap:3px; }
.mn-media-upload strong { overflow:hidden; color:var(--ma-text); font-size:var(--mn-type-body,12.5px); text-overflow:ellipsis; white-space:nowrap; }
.mn-media-upload small { overflow:hidden; color:var(--ma-muted); font-size:var(--mn-type-caption,10px); line-height:1.5; text-overflow:ellipsis; white-space:nowrap; }
.mn-media-upload button { min-height:32px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:0 0 auto; border:1px solid rgba(99,102,241,.34); border-radius:9px; color:#c7d2fe; background:rgba(99,102,241,.14); font-family:inherit; font-size:var(--mn-type-caption,10px); font-weight:850; cursor:pointer; }
.mn-media-upload button:hover { border-color:rgba(99,102,241,.62); background:rgba(99,102,241,.21); }
.mn-media-upload button:disabled { opacity:.5; cursor:wait; }
.mn-media-upload button.remove { width:32px; padding:0; border-color:rgba(244,63,94,.25); color:var(--ma-danger); background:rgba(244,63,94,.08); }
.mn-upload-note { margin:0 10px 8px; padding:8px 9px; display:flex; align-items:flex-start; gap:7px; border:1px solid rgba(14,165,233,.18); border-radius:9px; color:var(--ma-muted); background:rgba(14,165,233,.06); font-size:var(--mn-type-caption,10px); line-height:1.7; }
.mn-upload-note i { margin-top:2px; flex:0 0 auto; color:#38bdf8; }

.mn-schedule {
  min-height:44px;
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  border:1px solid var(--ma-border);
  border-radius:12px;
  background:var(--ma-bg);
}
.mn-schedule > div { display:flex; gap:4px; }
.mn-schedule button {
  min-height:30px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--ma-subtle);
  font-family:inherit;
  font-size:7px;
  font-weight:850;
  cursor:pointer;
}
.mn-schedule button.active { color:#fff; background:var(--ma-primary-strong); box-shadow:0 5px 15px rgba(79,70,229,.2); }
.mn-schedule > span { padding-left:6px; color:var(--ma-subtle); font-size:6.5px; }
.mn-schedule input { max-width:190px; min-height:32px; direction:ltr; text-align:left; }

.mn-actions { margin-top:11px; display:flex; gap:8px; }
.mn-actions button {
  min-height:40px;
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--ma-border);
  border-radius:11px;
  font-family:inherit;
  font-size:8px;
  font-weight:900;
  cursor:pointer;
}
.mn-actions button.secondary { background:var(--ma-soft); color:var(--ma-text); }
.mn-actions button.primary { border-color:rgba(99,102,241,.5); background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; box-shadow:0 8px 24px rgba(79,70,229,.2); }
.mn-actions button:disabled { opacity:.42; cursor:not-allowed; box-shadow:none; }

.mn-preview-card { padding:13px 0 14px; }
.mn-preview-card > .mn-card-title { padding:0 13px; }
.mn-preview-tabs { margin:11px 13px; padding:5px; display:grid; grid-template-columns:1fr 1fr; gap:6px; border:1px solid var(--ma-border); border-radius:13px; background:var(--ma-bg); }
.mn-preview-tabs button {
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid transparent;
  border-radius:9px;
  background:var(--ma-soft);
  color:var(--ma-subtle);
  font-family:inherit;
  font-size:7px;
  font-weight:850;
  cursor:pointer;
  transition:transform 150ms ease,box-shadow 150ms ease,border-color 150ms ease,background 150ms ease;
}
.mn-preview-tabs button:hover { transform:translateY(-1px); border-color:var(--ma-border-strong); color:var(--ma-text); }
.mn-preview-tabs button i { width:23px; height:23px; display:grid; place-items:center; border-radius:8px; font-size:11px; background:rgba(148,163,184,.10); }
.mn-preview-tabs button.telegram i { color:#38bdf8; }
.mn-preview-tabs button.email i { color:#2dd4bf; }
.mn-preview-tabs button.active { color:#fff; transform:translateY(-1px); }
.mn-preview-tabs button.telegram.active { border-color:rgba(56,189,248,.52); background:linear-gradient(135deg,#0284c7,#38bdf8); box-shadow:0 8px 20px rgba(14,165,233,.25); }
.mn-preview-tabs button.email.active { border-color:rgba(45,212,191,.5); background:linear-gradient(135deg,#0f766e,#2dd4bf); box-shadow:0 8px 20px rgba(20,184,166,.22); }
.mn-preview-tabs button.active i { color:#fff; background:rgba(255,255,255,.16); }

.mn-telegram-device {
  margin:0 13px;
  overflow:hidden;
  border:1px solid #253646;
  border-radius:15px;
  background:#0e1621;
  box-shadow:0 14px 30px rgba(4,9,16,.22);
  direction:rtl;
}
.mn-telegram-device > header { min-height:42px; padding:7px 10px; display:flex; align-items:center; gap:8px; background:#17212b; }
.mn-telegram-device > header > i { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#5b6df7,#8b5cf6); }
.mn-telegram-device > header > div { display:grid; gap:1px; }
.mn-telegram-device > header strong { color:#fff; font-size:8px; }
.mn-telegram-device > header small { color:#8ca1b3; font-size:6px; }
.mn-telegram-device > main { min-height:245px; padding:18px 8px 10px; display:flex; align-items:flex-end; background:radial-gradient(circle at 35% 15%,rgba(40,94,126,.14),transparent 38%),#0e1621; }
.mn-telegram-device article { position:relative; width:min(90%,260px); padding:7px 7px 14px; border-radius:11px 11px 3px 11px; background:#182533; color:#d5e2ed; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.mn-telegram-device article h4 { margin:7px 2px 4px; color:#fff; font-size:8px; font-weight:900; }
.mn-telegram-device article time { position:absolute; left:7px; bottom:4px; color:#55b6e8; font-size:5.5px; direction:ltr; }

.mn-email-device {
  margin:0 13px;
  overflow:hidden;
  border:1px solid #e2e8f0;
  border-radius:13px;
  background:#f1f5f9;
  box-shadow:0 12px 28px rgba(15,23,42,.13);
  text-align:start;
}
.mn-email-device > header { padding:16px; display:grid; place-items:center; gap:4px; color:#fff; background:linear-gradient(135deg,#111827,#312e81); }
.mn-email-device > header > i { font-size:18px; color:#a5b4fc; }
.mn-email-device > header strong { font-size:9px; }
.mn-email-device > header small { color:#c7d2fe; font-size:6px; }
.mn-email-device > main { min-height:220px; padding:15px; color:#1e293b; background:#fff; direction:inherit; text-align:start; }
.mn-email-device > main h4 { margin:0 0 9px; color:#1e293b; font-size:9px; font-weight:900; direction:inherit; text-align:start; }
.mn-email-device > footer { padding:9px; color:#94a3b8; background:#f8fafc; text-align:center; font-size:5.5px; }

.mn-placeholder { min-height:45px; margin:0; color:var(--ma-subtle); font-size:7px; line-height:1.8; }
.mn-email-device .mn-placeholder { color:#64748b; }
.mn-rich-message { min-height:42px; overflow-wrap:anywhere; white-space:pre-wrap; font-size:7px; line-height:1.85; direction:inherit; text-align:start; unicode-bidi:plaintext; }
.mn-telegram-device .mn-rich-message { color:#d5e2ed; }
.mn-email-device .mn-rich-message { color:#475569; }
.mn-rich-message strong { font-weight:900; }
.mn-rich-message em { font-style:italic; }
.mn-rich-message u { text-decoration:underline; }
.mn-rich-message s { text-decoration:line-through; }
.mn-rich-message a { color:#38bdf8; text-decoration:underline; }
.mn-email-device .mn-rich-message a { color:#4f46e5; }
.mn-rich-message code { padding:1px 3px; border-radius:4px; direction:ltr; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:rgba(255,255,255,.1); }
.mn-email-device .mn-rich-message code { color:#3730a3; background:#eef2ff; }
.mn-rich-message pre { margin:6px 0; padding:7px; overflow:auto; border-radius:7px; white-space:pre-wrap; direction:ltr; text-align:left; color:#e5e7eb; background:#111827; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.mn-rich-message blockquote { margin:6px 0; padding:5px 7px; border-right:3px solid #6366f1; border-radius:5px; background:rgba(99,102,241,.10); }
.mn-rich-spoiler { padding:1px 3px; border-radius:3px; color:transparent; background:#8ca1b3; text-shadow:0 0 5px rgba(0,0,0,.5); cursor:pointer; }
.mn-rich-spoiler:active,.mn-rich-spoiler:hover { color:inherit; text-shadow:none; }
.mn-email-device .mn-rich-spoiler { color:#334155; background:#e2e8f0; text-shadow:none; }

.mn-preview-button { margin:9px auto 2px; min-height:27px; padding:0 12px; display:flex; align-items:center; justify-content:center; width:max-content; max-width:100%; border-radius:7px; color:#fff; background:#4f46e5; font-size:6.5px; font-weight:900; }
.mn-telegram-device .mn-preview-button { width:100%; background:#26394b; color:#5fc7f7; }
.mn-media-preview { width:100%; margin-bottom:6px; overflow:hidden; border-radius:8px; background:#0b1220; }
.mn-media-preview img,.mn-media-preview video { width:100%; max-height:190px; display:block; object-fit:contain; background:#0b1220; }
.mn-media-preview.email { margin-bottom:10px; border:1px solid #e2e8f0; background:#f8fafc; }
.mn-media-preview.email img,.mn-media-preview.email video { max-height:210px; background:#f8fafc; }
.mn-file-preview { min-width:0; margin-bottom:6px; padding:8px; display:flex; align-items:center; gap:7px; border:1px solid #2e4152; border-radius:8px; color:#d5e2ed; background:#111c28; text-decoration:none; }
.mn-file-preview > span { width:29px; height:29px; display:grid; place-items:center; flex:0 0 auto; border-radius:8px; color:#5fc7f7; background:rgba(95,199,247,.10); }
.mn-file-preview > div { min-width:0; flex:1; display:grid; gap:2px; }
.mn-file-preview strong { overflow:hidden; color:inherit; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.mn-file-preview small { color:#94a3b8; font-size:5.5px; }
.mn-file-preview > i { flex:0 0 auto; color:#5fc7f7; font-size:7px; }
.mn-file-preview.email { margin-bottom:10px; border-color:#e2e8f0; color:#334155; background:#f8fafc; }
.mn-file-preview.email > span { color:#4f46e5; background:#eef2ff; }
.mn-file-preview.email > i { color:#4f46e5; }
.mn-media-error { min-height:68px; margin-bottom:8px; padding:10px; display:grid; place-items:center; gap:5px; border:1px dashed var(--ma-border-strong); border-radius:8px; color:var(--ma-danger); background:rgba(244,63,94,.05); text-align:center; font-size:6.5px; }

.mn-estimate { padding:13px; }
.mn-estimate-total { display:flex; align-items:center; gap:9px; }
.mn-estimate-total > span { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:#a5b4fc; background:rgba(99,102,241,.14); }
.mn-estimate-total > div { display:grid; gap:1px; }
.mn-estimate-total small { color:var(--ma-muted); font-size:6.5px; }
.mn-estimate-total strong { color:var(--ma-text); font-size:18px; line-height:1.1; }
.mn-estimate ul { margin:11px 0 8px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:7px; list-style:none; }
.mn-estimate li { padding:7px 8px; display:flex; align-items:center; gap:6px; border:1px solid var(--ma-border); border-radius:9px; background:var(--ma-bg); color:var(--ma-muted); font-size:6.5px; }
.mn-estimate li span { flex:1; }
.mn-estimate li b { color:var(--ma-text); font-size:8px; }
.mn-estimate li:first-child > i { color:#38bdf8; }
.mn-estimate li:last-child > i { color:#2dd4bf; }
.mn-estimate > p { margin:0; color:var(--ma-subtle); font-size:6px; line-height:1.7; }

.mn-history { padding:14px; }
.mn-history-head { margin-bottom:11px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mn-history-head > button { width:31px; height:31px; display:grid; place-items:center; border:1px solid var(--ma-border); border-radius:9px; background:var(--ma-bg); color:var(--ma-muted); cursor:pointer; }
.mn-campaign-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.mn-campaign { min-width:0; padding:11px; border:1px solid var(--ma-border); border-radius:13px; background:var(--ma-bg); cursor:pointer; transition:border-color 150ms ease,transform 150ms ease,box-shadow 150ms ease; }
.mn-campaign:hover { border-color:var(--ma-border-strong); transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.mn-campaign-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.mn-campaign-head > div { min-width:0; }
.mn-campaign-head > div > span { color:var(--ma-primary); font-size:6px; direction:ltr; }
.mn-campaign-head h4 { margin:2px 0; overflow:hidden; color:var(--ma-text); font-size:8.5px; text-overflow:ellipsis; white-space:nowrap; }
.mn-campaign-head small { color:var(--ma-subtle); font-size:6px; }
.mn-campaign-head > em { padding:4px 7px; flex:0 0 auto; border-radius:999px; font-size:5.5px; font-style:normal; font-weight:850; }
.mn-campaign-head > em.success { color:var(--ma-success); background:rgba(16,185,129,.10); }
.mn-campaign-head > em.info { color:#38bdf8; background:rgba(14,165,233,.10); }
.mn-campaign-head > em.warning { color:var(--ma-warning); background:rgba(245,158,11,.10); }
.mn-campaign-head > em.danger { color:var(--ma-danger); background:rgba(244,63,94,.10); }
.mn-campaign-head > em.neutral { color:var(--ma-muted); background:var(--ma-soft); }
.mn-campaign-stats { margin-top:9px; display:grid; grid-template-columns:auto repeat(3,1fr); gap:6px; align-items:center; }
.mn-campaign-stats > span { min-width:0; display:grid; gap:1px; color:var(--ma-muted); }
.mn-campaign-stats > span:first-child { display:flex; gap:5px; color:var(--ma-primary); }
.mn-campaign-stats small { color:var(--ma-subtle); font-size:5.5px; }
.mn-campaign-stats b { color:var(--ma-text); font-size:7px; }
.mn-campaign-stats .success b { color:var(--ma-success); }
.mn-campaign-stats .danger b { color:var(--ma-danger); }
.mn-progress { height:3px; margin-top:9px; overflow:hidden; border-radius:99px; background:var(--ma-soft); }
.mn-progress i { height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#4f46e5,#22d3ee); transition:width 250ms ease; }
.mn-cancel { margin-top:8px; min-height:27px; padding:0 8px; display:inline-flex; align-items:center; gap:5px; border:1px solid rgba(244,63,94,.22); border-radius:8px; color:var(--ma-danger); background:rgba(244,63,94,.07); font-family:inherit; font-size:6px; font-weight:850; cursor:pointer; }
.mn-campaign-actions { margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:7px; }
.mn-campaign-actions .mn-cancel { margin-top:0; }
.mn-delete { min-height:27px; padding:0 8px; display:inline-flex; align-items:center; gap:5px; border:1px solid rgba(244,63,94,.22); border-radius:8px; color:var(--ma-danger); background:rgba(244,63,94,.07); font-family:inherit; font-size:6px; font-weight:850; cursor:pointer; }
.mn-delete:disabled { opacity:.35; cursor:not-allowed; }
.mn-pagination { margin-top:12px; padding-top:11px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; border-top:1px solid var(--ma-border); }
.mn-pagination > button,.mn-pagination > div button { min-width:31px; height:29px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; gap:4px; border:1px solid var(--ma-border); border-radius:8px; color:var(--ma-muted); background:var(--ma-bg); font-family:inherit; font-size:6.5px; cursor:pointer; }
.mn-pagination > button:disabled { opacity:.35; cursor:default; }
.mn-pagination > div { display:flex; gap:4px; direction:rtl; }
.mn-pagination > div button { width:29px; min-width:29px; padding:0; }
.mn-pagination > div button.active { border-color:var(--ma-primary); color:#fff; background:var(--ma-primary); }
.mn-pagination > em { width:100%; color:var(--ma-subtle); font-size:6px; font-style:normal; text-align:center; }
.mn-empty { grid-column:1/-1; min-height:90px; display:flex; align-items:center; justify-content:center; gap:7px; color:var(--ma-subtle); font-size:8px; }

.mn-detail-backdrop {
  position:fixed !important;
  inset:0 !important;
  width:100vw;
  width:100dvw;
  height:100vh;
  height:100dvh;
  z-index:100600;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  overscroll-behavior:contain;
  isolation:isolate;
}
.mn-campaign-detail {
  width:min(100%,700px);
  max-height:calc(100vh - 28px);
  max-height:calc(100dvh - 28px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.mn-campaign-detail > .ma-modal-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.mn-detail-loading { min-height:260px; display:flex; align-items:center; justify-content:center; gap:7px; color:var(--ma-muted); font-size:9px; }
.mn-detail-summary { margin-bottom:12px; display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.mn-detail-summary > em,.mn-detail-summary > span { padding:5px 8px; border-radius:999px; font-size:6.5px; font-style:normal; }
.mn-detail-summary > span { border:1px solid var(--ma-border); color:var(--ma-muted); background:var(--ma-bg); }
.mn-detail-summary > em.success { color:var(--ma-success); background:rgba(16,185,129,.10); }
.mn-detail-summary > em.info { color:#38bdf8; background:rgba(14,165,233,.10); }
.mn-detail-summary > em.warning { color:var(--ma-warning); background:rgba(245,158,11,.10); }
.mn-detail-summary > em.danger { color:var(--ma-danger); background:rgba(244,63,94,.10); }
.mn-detail-summary > em.neutral { color:var(--ma-muted); background:var(--ma-soft); }
.mn-campaign-detail .mn-media-preview,.mn-campaign-detail .mn-file-preview { max-width:480px; margin-right:auto; margin-left:auto; }
.mn-sent-message { padding:13px; border:1px solid var(--ma-border); border-radius:13px; color:var(--ma-text); background:var(--ma-bg); text-align:start; }
.mn-sent-message > small { color:var(--ma-muted); font-size:6.5px; }
.mn-sent-message h4 { margin:5px 0 9px; color:var(--ma-text); font-size:11px; }
.mn-sent-message .mn-rich-message { white-space:pre-wrap; overflow-wrap:anywhere; font-size:8.5px; line-height:1.95; }
.mn-sent-message > a { width:max-content; max-width:100%; margin:12px auto 0; padding:8px 11px; display:flex; align-items:center; gap:6px; border-radius:8px; color:#fff; background:var(--ma-primary); font-size:7px; font-weight:850; text-decoration:none; }
.mn-detail-grid { margin-top:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.mn-detail-grid > span { min-width:0; padding:9px; display:grid; gap:3px; border:1px solid var(--ma-border); border-radius:10px; background:var(--ma-bg); }
.mn-detail-grid small,.mn-detail-tags > small { color:var(--ma-muted); font-size:6.5px; }
.mn-detail-grid strong { overflow-wrap:anywhere; color:var(--ma-text); font-size:8px; }
.mn-detail-tags { margin-top:10px; padding:10px; display:flex; align-items:center; flex-wrap:wrap; gap:6px; border:1px solid var(--ma-border); border-radius:10px; background:var(--ma-bg); }
.mn-detail-tags > small { width:100%; }
.mn-detail-tags > span { padding:5px 7px; display:flex; align-items:center; gap:6px; border-radius:7px; background:var(--ma-soft); font-size:6.5px; }
.mn-detail-tags b { color:var(--ma-muted); }.mn-detail-tags em { color:var(--ma-text); font-style:normal; }

html[data-theme="light"] .mn-advanced { background:rgba(241,245,249,.55); }
html[data-theme="light"] .mn-channels button.active em { background:rgba(255,255,255,.7); }
html[data-theme="light"] .mn-media-upload button { color:#4338ca; background:rgba(99,102,241,.09); }
html[data-theme="light"] .mn-preview-tabs button { background:#fff; }
html[data-theme="light"] .mn-preview-tabs button.active { color:#fff; }
html[data-theme="light"] .mn-telegram-device { border-color:#cbd5e1; background:#e8f1f7; box-shadow:0 14px 30px rgba(15,23,42,.12); }
html[data-theme="light"] .mn-telegram-device > header { border-bottom:1px solid #dbe5ec; background:rgba(255,255,255,.96); }
html[data-theme="light"] .mn-telegram-device > header strong { color:#17212b; }
html[data-theme="light"] .mn-telegram-device > header small { color:#6b7f8f; }
html[data-theme="light"] .mn-telegram-device > main { background:radial-gradient(circle at 30% 12%,rgba(14,165,233,.11),transparent 40%),linear-gradient(160deg,#dceaf2,#edf5f8); }
html[data-theme="light"] .mn-telegram-device article { color:#334155; background:#fff; box-shadow:0 7px 22px rgba(51,65,85,.14); }
html[data-theme="light"] .mn-telegram-device article h4 { color:#0f172a; }
html[data-theme="light"] .mn-telegram-device .mn-rich-message { color:#334155; }
html[data-theme="light"] .mn-telegram-device .mn-placeholder { color:#64748b; }
html[data-theme="light"] .mn-telegram-device article time { color:#168acd; }
html[data-theme="light"] .mn-telegram-device .mn-preview-button { color:#168acd; background:#e8f4fb; }
html[data-theme="light"] .mn-telegram-device .mn-file-preview { border-color:#dbe5ec; color:#334155; background:#f8fafc; }
html[data-theme="light"] .mn-telegram-device .mn-media-preview,
html[data-theme="light"] .mn-telegram-device .mn-media-preview img,
html[data-theme="light"] .mn-telegram-device .mn-media-preview video { background:#f1f5f9; }

html[data-language="en"] .mn-shell { direction:ltr; }
html[data-language="en"] .mn-category,
html[data-language="en"] .mn-channels button { text-align:left; }
html[data-language="en"] .mn-advanced summary::after { margin-right:0; margin-left:auto; }
html[data-language="en"] .mn-message-wrap > small { left:auto; right:8px; }

@media (max-width: 980px) {
  .mn-layout { grid-template-columns:1fr; }
  .mn-side { position:static; grid-template-columns:minmax(0,1fr) minmax(220px,.55fr); align-items:start; }
  .mn-categories { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .mn-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mn-side { grid-template-columns:1fr; }
  .mn-campaign-list { grid-template-columns:1fr; }
  .mn-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mn-detail-backdrop { align-items:flex-end; padding:0; }
  .mn-campaign-detail { max-height:92vh; max-height:92dvh; border-radius:22px 22px 0 0; }
}

@media (max-width: 520px) {
  .mn-shell { gap:10px; }
  .mn-header { padding:14px; border-radius:17px; }
  .mn-header p { font-size:8.5px; }
  .mn-refresh { width:34px; padding:0; }
  .mn-refresh span { display:none; }
  .mn-metrics { gap:6px; }
  .mn-metrics article { padding:9px; gap:7px; border-radius:13px; }
  .mn-metrics article > span { width:29px; height:29px; border-radius:9px; font-size:11px; }
  .mn-metrics strong { font-size:14px; }
  .mn-composer,.mn-history { padding:11px; }
  .mn-card { border-radius:16px; }
  .mn-categories,.mn-form-grid,.mn-channels { grid-template-columns:1fr; }
  .mn-category { min-height:46px; }
  .mn-form-grid { gap:8px; }
  .mn-message-wrap textarea { min-height:175px; font-size:9px; }
  .mn-format-toolbar { overflow-x:auto; }
  .mn-format-toolbar button { flex:0 0 auto; }
  .mn-schedule { align-items:stretch; flex-direction:column; }
  .mn-schedule > div { display:grid; grid-template-columns:1fr 1fr; }
  .mn-schedule button { justify-content:center; }
  .mn-schedule input { max-width:none; }
  .mn-schedule > span { padding:3px 5px 4px; text-align:center; }
  .mn-actions { flex-direction:column-reverse; }
  .mn-actions button { width:100%; flex:auto; }
  .mn-media-upload { align-items:flex-start; flex-wrap:wrap; }
  .mn-media-upload > div:nth-of-type(2) { min-width:calc(100% - 52px); }
  .mn-media-upload > button { width:100%; }
  .mn-media-upload > button.remove { width:32px; margin-inline-start:auto; }
  .mn-preview-card { padding-top:11px; }
  .mn-telegram-device,.mn-email-device { margin:0 10px; }
  .mn-telegram-device > main { min-height:230px; }
  .mn-campaign-stats { grid-template-columns:auto repeat(3,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .mn-category,.mn-progress i { transition:none !important; }
}

/* =========================================================
   BROADCAST CENTER — ACCESSIBLE TYPOGRAPHY
   Change these variables to tune the entire broadcasts UI.
========================================================= */
:root {
  --mn-type-caption: 10px;
  --mn-type-small: 11px;
  --mn-type-body: 12.5px;
  --mn-type-title: 15px;
  --mn-type-heading: 17px;
}

.mn-eyebrow { font-size:var(--mn-type-caption); }
.mn-header p { font-size:var(--mn-type-body); line-height:1.9; }
.mn-refresh { min-height:40px; font-size:var(--mn-type-small); }

.mn-metrics small { font-size:var(--mn-type-small); }
.mn-metrics strong { font-size:20px; }
.mn-metrics em { font-size:var(--mn-type-caption); line-height:1.55; }

.mn-card-title h3 { font-size:var(--mn-type-title); }
.mn-card-title p { font-size:var(--mn-type-small); line-height:1.75; }
.mn-label { font-size:var(--mn-type-small); }
.mn-category { min-height:62px; padding:10px; }
.mn-category strong { font-size:var(--mn-type-body); }
.mn-category small { font-size:var(--mn-type-caption); line-height:1.55; }
.mn-consent,
.mn-validation,
.mn-link-help { font-size:var(--mn-type-small); line-height:1.8; }

.mn-form-grid label > span,
.mn-message-label span { font-size:var(--mn-type-small); }
.mn-message-label em { font-size:var(--mn-type-caption); }
.mn-form-grid input,
.mn-form-grid select,
.mn-schedule input { min-height:44px; font-size:var(--mn-type-body); }
.mn-format-toolbar button { width:31px; height:29px; font-size:var(--mn-type-small); }
.mn-message-wrap textarea { min-height:180px; font-size:13px; line-height:2; }
.mn-message-wrap > small { font-size:var(--mn-type-caption); }

.mn-channels button { min-height:62px; }
.mn-channels button strong { font-size:var(--mn-type-body); }
.mn-channels button small { font-size:var(--mn-type-caption); }
.mn-channels button em { font-size:9.5px; }
.mn-advanced summary { min-height:44px; font-size:var(--mn-type-body); }
.mn-schedule { min-height:50px; }
.mn-schedule button { min-height:36px; font-size:var(--mn-type-small); }
.mn-schedule > span { font-size:var(--mn-type-caption); line-height:1.7; }
.mn-actions button { min-height:46px; font-size:var(--mn-type-body); }

.mn-preview-tabs button { min-height:36px; font-size:var(--mn-type-small); }
.mn-telegram-device > header strong { font-size:var(--mn-type-small); }
.mn-telegram-device > header small { font-size:var(--mn-type-caption); }
.mn-telegram-device article h4 { font-size:var(--mn-type-body); }
.mn-telegram-device article time { font-size:var(--mn-type-caption); }
.mn-email-device > header strong { font-size:var(--mn-type-body); }
.mn-email-device > header small { font-size:var(--mn-type-caption); }
.mn-email-device > main h4 { font-size:13px; }
.mn-email-device > footer { font-size:var(--mn-type-caption); }
.mn-placeholder,
.mn-rich-message { font-size:11.5px; line-height:1.95; }
.mn-preview-button { min-height:34px; font-size:var(--mn-type-small); }
.mn-file-preview strong { font-size:var(--mn-type-small); }
.mn-file-preview small { font-size:var(--mn-type-caption); }
.mn-file-preview > i { font-size:10px; }
.mn-media-error { font-size:var(--mn-type-caption); }

.mn-estimate-total small { font-size:var(--mn-type-small); }
.mn-estimate-total strong { font-size:22px; }
.mn-estimate li { font-size:var(--mn-type-small); }
.mn-estimate li b { font-size:var(--mn-type-body); }
.mn-estimate > p { font-size:var(--mn-type-caption); line-height:1.85; }

.mn-campaign-head > div > span { font-size:var(--mn-type-caption); }
.mn-campaign-head h4 { font-size:var(--mn-type-body); }
.mn-campaign-head small { font-size:var(--mn-type-caption); line-height:1.6; }
.mn-campaign-head > em { font-size:var(--mn-type-caption); }
.mn-campaign-stats small { font-size:var(--mn-type-caption); }
.mn-campaign-stats b { font-size:var(--mn-type-small); }
.mn-cancel,
.mn-delete { min-height:34px; font-size:var(--mn-type-caption); }
.mn-pagination > button,
.mn-pagination > div button { min-width:36px; height:35px; font-size:var(--mn-type-caption); }
.mn-pagination > em { font-size:var(--mn-type-caption); }
.mn-empty { font-size:var(--mn-type-small); }

.mn-detail-backdrop .ma-modal-header small { font-size:var(--mn-type-caption); }
.mn-detail-backdrop .ma-modal-header h3 { font-size:var(--mn-type-heading); }
.mn-detail-backdrop .ma-button { min-height:44px; font-size:var(--mn-type-body); }
.mn-detail-loading { font-size:var(--mn-type-small); }
.mn-detail-summary > em,
.mn-detail-summary > span { font-size:var(--mn-type-caption); }
.mn-sent-message > small { font-size:var(--mn-type-caption); }
.mn-sent-message h4 { font-size:var(--mn-type-title); }
.mn-sent-message .mn-rich-message { font-size:13px; line-height:2; }
.mn-sent-message > a { min-height:36px; font-size:var(--mn-type-small); }
.mn-detail-grid small,
.mn-detail-tags > small { font-size:var(--mn-type-caption); }
.mn-detail-grid strong { font-size:var(--mn-type-body); line-height:1.65; }
.mn-detail-tags > span { font-size:var(--mn-type-caption); }

@media (max-width: 520px) {
  :root {
    --mn-type-caption: 9.5px;
    --mn-type-small: 10.5px;
    --mn-type-body: 12px;
    --mn-type-title: 14px;
    --mn-type-heading: 16px;
  }

  .mn-message-wrap textarea { font-size:12.5px; }
  .mn-metrics strong { font-size:18px; }
}