/* ALOKE — «مسوّقو ألوكي» (mrkt.hwe.sa). The portal's own shapes on top of
   verify.css + crm.css. Tokens from console-theme.css. */

.mk-narrow { max-width: 620px; }
.mk-narrow .vf-input, .mk-narrow .vf-select { width: 100%; box-sizing: border-box; }
.mk-how { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); }

.mk-codes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mk-code { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mk-code p { margin: 0; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.mk-code-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mk-code-text { font-family: "Inter", monospace; font-size: var(--t-lg); letter-spacing: .06em; unicode-bidi: isolate; margin-inline-end: auto; }
.mk-code .vf-actions { margin-top: 4px; }

.mk-preview { background: var(--surface-2); border-radius: var(--r-btn); padding: 10px 12px; font-size: var(--t-sm); margin-bottom: 10px; }
.mk-preview:empty { display: none; }
.mk-preview ul { margin: 6px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; }

.mk-inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.mk-inline .vf-field { flex: 1 1 180px; margin-bottom: 0; }
.mk-pos { color: var(--ok); font-variant-numeric: tabular-nums; }
.mk-neg { color: var(--danger); font-variant-numeric: tabular-nums; }

/* super console: the pool grid */
.mk-pools td .vf-input, .mk-pools td .vf-select { min-width: 90px; }
.mk-pools td.prod { font-weight: 600; }
.mk-iban { font-family: "Inter", monospace; direction: ltr; unicode-bidi: isolate; letter-spacing: .03em; }
.mk-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

@media (max-width: 560px) {
  .mk-codes { grid-template-columns: 1fr; }
  .mk-inline .vf-btn { width: 100%; }
}