/* =====================================================================
   MEGAGEN — Commerce / account redesign layer (rd-commerce.css).
   Loads AFTER enhance.css + redesign.css and ONLY refines the commerce
   surfaces: auth (.mg-auth*), dashboard (.mg-dash*/.mg-dcard*), dealer
   ordering (.mg-order*, .mg-imp*), payment (.mg-pay*), proforma/invoice
   (.mg-proforma*/.mg-inv*), dealer pricing (.mg-offers/.mg-terms) and
   the Telegram app (.mg-tgapp*, forced LIGHT).
   Principles: calm B2B-medical confidence, tabular data, logical
   (RTL-safe) properties, kit-token driven with literal fallbacks.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Shared account shell + form hygiene
   --------------------------------------------------------------------- */

/* Restore the native dropdown indicator that redesign.css stripped with
   appearance:none (RTL-safe: the browser places the arrow per direction). */
.mg-form select,
.mg-field select {
  -webkit-appearance: auto;
  appearance: auto;
}

/* Persian is a joined script — tracking/uppercase on it reads broken.
   Neutralise the latin-style kicker treatment on the auth eyebrow. */
.mg-auth__eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

/* Checkbox rows: honest tap target + aligned control. */
.mg-check {
  min-height: 44px;
  align-content: center;
  cursor: pointer;
}
.mg-check input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--mg-accent, #0067b1);
}

/* Notices: give the status strip a leading edge so tone reads instantly. */
.mg-note {
  border-inline-start-width: 3px;
  border-inline-start-style: solid;
}
.mg-note--ok { border-inline-start-color: var(--mg-success, #1f9d63); }
.mg-note--err { border-inline-start-color: var(--mg-danger, #d0392b); }

/* ---------------------------------------------------------------------
   1. Auth — focused login / register
   --------------------------------------------------------------------- */
.mg-auth__intro h1 {
  color: var(--mg-heading, #0a1626);
  line-height: 1.25;
}

/* Perks: quiet divided list instead of floating bullets — editorial calm. */
.mg-auth__perks {
  gap: 0;
  border-block: 1px solid var(--mg-border, #e5eaf1);
}
.mg-auth__perks li {
  padding-block: 13px;
  border-block-end: 1px solid var(--mg-border, #e5eaf1);
}
.mg-auth__perks li:last-child { border-block-end: 0; }
.mg-auth__perks li::before {
  top: 15px;
  box-shadow: 0 0 0 4px var(--mg-accent-soft, #e9f1fa);
}

.mg-auth__cards { gap: 22px; }

.mg-auth__card {
  border-radius: var(--mg-r-lg, 22px);
  padding: clamp(24px, 4vw, 34px) clamp(20px, 3.4vw, 30px);
}
.mg-auth__card h2 {
  font-size: var(--mg-fs-lg, 1.375rem);
  color: var(--mg-heading, #0a1626);
}

/* The register card recedes a step so "ورود" reads as the primary path. */
.mg-auth__cards > section:nth-of-type(2) {
  background: linear-gradient(180deg, var(--mg-surface, #f5f8fc), var(--mg-bg, #fff) 42%);
}

/* Full-width submit inside the focused cards = one clear action. */
.mg-auth__card .mg-form .mg-btn--primary,
.mg-tgpane .mg-btn--primary,
.mg-tgapp .mg-form .mg-btn--primary {
  width: 100%;
  margin-block-start: 4px;
}

.mg-auth__forgot {
  padding-block: 8px;
  min-height: 40px;
}

/* ---------------------------------------------------------------------
   2. Dashboard — control panel
   --------------------------------------------------------------------- */
.mg-dash__head {
  padding-block-end: 18px;
  border-block-end: 1px solid var(--mg-border, #e5eaf1);
  margin-block-end: 26px;
}
.mg-dash__hi { font-size: var(--mg-fs-sm, .9375rem); }
.mg-dash__head h1 { color: var(--mg-heading, #0a1626); }

.mg-dcard {
  border-radius: var(--mg-r-lg, 22px);
  padding: 24px 26px;
}
.mg-dcard__lbl {
  font-size: var(--mg-fs-xs, .8125rem);
  font-weight: 700;
  color: var(--mg-muted, #56677b);
}
.mg-dcard__val {
  color: var(--mg-heading, #0a1626);
  font-variant-numeric: tabular-nums;
}

/* Credit = the hero stat. */
.mg-dcard--credit .mg-dcard__val { font-size: clamp(30px, 3.6vw, 42px); }
.mg-dcard--credit .mg-dcard__unit { font-size: var(--mg-fs-sm, .9375rem); }

.mg-badge {
  line-height: 1.7;
  padding: 5px 13px;
}

.mg-dash__link {
  min-height: 44px;
  border-radius: var(--mg-r, 14px);
}

/* ---------------------------------------------------------------------
   3. Access gate
   --------------------------------------------------------------------- */
.mg-order__gate {
  padding: clamp(40px, 6vw, 56px) clamp(24px, 5vw, 38px);
  border-radius: var(--mg-r-lg, 22px);
}
.mg-order__gate .mg-btn { min-width: 200px; }
.mg-order__gate p { max-width: 42ch; margin-inline: auto; }

/* ---------------------------------------------------------------------
   4. Order form — structured, multi-step feel
   --------------------------------------------------------------------- */

/* Guidance strip instead of a floating paragraph. */
.mg-order__lead {
  max-width: none;
  background: var(--mg-accent-soft, #e9f1fa);
  border: 1px solid rgba(0, 103, 177, .16);
  border-inline-start: 3px solid var(--mg-accent, #0067b1);
  border-radius: var(--mg-r, 14px);
  padding: 14px 18px;
  font-size: var(--mg-fs-sm, .9375rem);
  line-height: 1.95;
  color: var(--mg-text, #0b1320);
  margin-block-end: 22px;
}

/* Line items live inside a real panel — step 1 of the form. */
.mg-order__lines {
  background: var(--mg-bg, #fff);
  border: 1px solid var(--mg-border, #e5eaf1);
  border-radius: var(--mg-r-lg, 22px);
  padding: clamp(14px, 2.5vw, 20px);
  box-shadow: var(--mg-shadow-xs, 0 1px 2px rgba(11, 19, 32, .06));
  margin-block-end: 22px;
}
.mg-order__lines-head {
  padding: 2px 4px 10px;
  border-block-end: 1px solid var(--mg-border, #e5eaf1);
  margin-block-end: 14px;
  font-size: var(--mg-fs-xs, .8125rem);
  color: var(--mg-muted, #56677b);
}
@media (min-width: 641px) {
  .mg-order__line-row {
    padding-block-end: 12px;
    margin-block-end: 12px;
    border-block-end: 1px dashed var(--mg-border, #e5eaf1);
  }
  .mg-order__line-row:last-of-type {
    border-block-end: 0;
    margin-block-end: 6px;
    padding-block-end: 0;
  }
}
.mg-ol-price { font-variant-numeric: tabular-nums; }
.mg-ol-del { transition: background-color var(--mg-dur, .24s) ease, border-color var(--mg-dur, .24s) ease; }

/* "Add row" affordances read as inviting slots, not buttons fighting the CTA. */
#mg-order-add,
#mg-imp-add {
  width: 100%;
  height: auto;
  min-height: 48px;
  border: 1.5px dashed var(--mg-border-strong, #d4dce7);
  border-radius: var(--mg-r, 14px);
  background: transparent;
  color: var(--mg-accent, #0067b1);
  font-size: var(--mg-fs-sm, .9375rem);
  transition: border-color var(--mg-dur, .24s) ease, background-color var(--mg-dur, .24s) ease, color var(--mg-dur, .24s) ease;
}
#mg-order-add:hover,
#mg-imp-add:hover {
  border-color: var(--mg-accent, #0067b1);
  background: var(--mg-accent-soft, #e9f1fa);
  color: var(--mg-accent-deep, #024e86);
}

/* --- Implant-parts configurator: step 2 panel. --- */
.mg-imp {
  background: var(--mg-bg, #fff);
  border: 1px solid var(--mg-border, #e5eaf1);
  border-radius: var(--mg-r-lg, 22px);
  padding: clamp(14px, 2.5vw, 20px);
  box-shadow: var(--mg-shadow-xs, 0 1px 2px rgba(11, 19, 32, .06));
  margin: 0 0 22px;
}
.mg-imp__lead { margin-block-end: 14px; }
.mg-imp-card {
  background: var(--mg-surface, #f5f8fc);
  border-radius: var(--mg-r, 14px);
  padding: 16px 18px;
  transition: border-color var(--mg-dur, .24s) ease, box-shadow var(--mg-dur, .24s) ease;
}
.mg-imp-card:focus-within {
  border-color: var(--mg-border-strong, #d4dce7);
  box-shadow: var(--mg-shadow-xs, 0 1px 2px rgba(11, 19, 32, .06));
}
.mg-imp-card__head {
  padding-block-end: 10px;
  border-block-end: 1px solid var(--mg-border, #e5eaf1);
  margin-block-end: 12px;
}
.mg-imp-card__head b {
  font-size: var(--mg-fs-sm, .9375rem);
  color: var(--mg-heading, #0a1626);
}
/* Inputs sit on the tinted card — lift them to white for depth. */
.mg-imp-f select,
.mg-imp-f input {
  background: var(--mg-bg, #fff);
}
.mg-imp-del { border-radius: var(--mg-r-sm, 8px); }

/* --- Step 3: delivery / invoice details + submission. --- */
.mg-order__foot {
  border-radius: var(--mg-r-lg, 22px);
  padding: clamp(18px, 3vw, 26px);
}
.mg-order__subh {
  font-size: var(--mg-fs-md, 1.125rem);
  color: var(--mg-heading, #0a1626);
}
.mg-order__fields { gap: 16px; }
.mg-order__fields .mg-field { max-width: none; }

/* Clear, self-announcing submit bar: sticks to the viewport edge while
   the long detail section scrolls, so the action is never lost. */
.mg-order__submit {
  position: sticky;
  inset-block-end: 10px;
  z-index: 5;
  margin-block-start: 4px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .93);
  background: color-mix(in srgb, var(--mg-bg, #fff) 93%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--mg-border, #e5eaf1);
  border-radius: var(--mg-r, 14px);
  box-shadow: var(--mg-shadow, 0 10px 34px -14px rgba(11, 19, 32, .16));
}
.mg-order__submit .mg-btn--primary {
  flex: 1 1 auto;
  min-width: 200px;
}

/* ---------------------------------------------------------------------
   5. Orders table + search + status language
   --------------------------------------------------------------------- */
.mg-order__search { margin: 6px 0 14px; }
.mg-order__search input {
  height: 48px;
  max-width: 460px;
  border: 1px solid var(--mg-border-strong, #d4dce7);
  border-radius: var(--mg-r, 14px);
  background: var(--mg-bg, #fff);
  transition: border-color var(--mg-dur, .24s) ease, box-shadow var(--mg-dur, .24s) ease;
}
.mg-order__search input:focus {
  outline: none;
  border-color: var(--mg-accent, #0067b1);
  box-shadow: var(--mg-ring, 0 0 0 3px rgba(0, 103, 177, .30));
}

/* Row actions breathe on desktop (mobile keeps the stacked card layout). */
@media (min-width: 681px) {
  .mg-order__table td:last-child { text-align: end; }
}
.mg-order__table td .mg-btn--sm { margin-block: 3px; }

/* Tracking code as a quiet monospace-feel chip. */
.mg-order__track {
  background: var(--mg-surface-2, #eef3f9);
  border-radius: 6px;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.mg-order__await { color: var(--mg-warn, #b5760a); }

/* Status pills: leading dot = scannable state language; complete the map. */
.mg-ostatus::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-inline-end: 6px;
  vertical-align: 1px;
  opacity: .8;
}
.mg-ostatus--draft {
  background: var(--mg-surface-2, #eef3f9);
  color: var(--mg-muted, #56677b);
  border: 1px dashed var(--mg-border-strong, #d4dce7);
}
.mg-ostatus--confirmed,
.mg-ostatus--processing,
.mg-ostatus--ready,
.mg-ostatus--shipped {
  background: var(--mg-accent-soft, #e9f1fa);
  color: var(--mg-accent-deep, #024e86);
}

/* ---------------------------------------------------------------------
   6. Order detail — summary + conversation
   --------------------------------------------------------------------- */
.mg-order__total {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--mg-surface, #f5f8fc);
  border: 1px solid var(--mg-border, #e5eaf1);
  border-radius: var(--mg-r, 14px);
  padding: 14px 18px;
  margin-block: 4px 6px;
}

.mg-thread { gap: 12px; }
.mg-msg {
  padding: 11px 16px;
  box-shadow: var(--mg-shadow-xs, 0 1px 2px rgba(11, 19, 32, .06));
}
.mg-msg__meta b { color: var(--mg-heading, #0a1626); }

/* ---------------------------------------------------------------------
   7. Payment — receipt-like clarity
   --------------------------------------------------------------------- */
.mg-pay__card {
  padding: 20px 24px;
  border-radius: var(--mg-r-lg, 22px);
}
.mg-pay__row {
  padding-block: 12px;
  border-block-end: 1px dashed var(--mg-border, #e5eaf1);
  font-variant-numeric: tabular-nums;
}
.mg-pay__row:last-child { border-block-end: 0; }
.mg-pay__row--total {
  border-block-start: 0;
  border-block-end: 0;
  margin-block-start: 10px;
  padding: 14px 16px;
  background: var(--mg-accent-soft, #e9f1fa);
  border-radius: var(--mg-r, 14px);
}

.mg-pay__form {
  background: var(--mg-bg, #fff);
  border: 1px solid var(--mg-border, #e5eaf1);
  border-radius: var(--mg-r-lg, 22px);
  padding: 20px 24px;
  box-shadow: var(--mg-shadow-xs, 0 1px 2px rgba(11, 19, 32, .06));
}
.mg-pay__form .mg-btn--primary { width: 100%; }
.mg-pay .mg-hint { text-align: center; }

/* ---------------------------------------------------------------------
   8. Proforma — document-like, print-safe
   --------------------------------------------------------------------- */
.mg-proforma { line-height: 1.9; }
.mg-proforma__brand { letter-spacing: -0.02em; }
.mg-proforma__meta b { font-variant-numeric: tabular-nums; }
.mg-proforma__table { font-variant-numeric: tabular-nums; }
.mg-proforma__table thead th {
  background: var(--mg-surface-2, #eef3f9);
  color: var(--mg-heading, #0a1626);
  font-size: var(--mg-fs-xs, .8125rem);
}
.mg-proforma__table tbody tr:nth-child(even) td {
  background: var(--mg-surface, #f5f8fc);
}
.mg-proforma__total {
  background: var(--mg-accent-soft, #e9f1fa);
  border: 1px solid rgba(0, 103, 177, .18);
}
.mg-proforma__total b { font-variant-numeric: tabular-nums; }

@media print {
  .mg-proforma__table tbody tr:nth-child(even) td { background: #fff; }
  .mg-proforma__table th,
  .mg-proforma__table td { border-color: #8a94a0; }
  .mg-proforma__total {
    background: #fff;
    border: 1.5px solid #111;
  }
  .mg-proforma__table tr,
  .mg-proforma__total,
  .mg-proforma__foot { break-inside: avoid; }
  .mg-order__submit,
  .mg-order__search { display: none; }
}

/* ---------------------------------------------------------------------
   9. Invoice (.mg-inv*) — consistency rules; the standalone document
   carries its own inline CSS, these keep any theme-rendered use aligned.
   --------------------------------------------------------------------- */
.mg-inv__table,
.mg-inv__srow,
.mg-inv__meta { font-variant-numeric: tabular-nums; }
.mg-inv__srow--due b { color: var(--mg-warn, #b5760a); }
.mg-inv__srow--paid b { color: var(--mg-success, #1f9d63); }
@media print {
  .mg-inv-bar { display: none; }
  .mg-inv__table tr,
  .mg-inv__srow,
  .mg-inv__foot { break-inside: avoid; }
}

/* ---------------------------------------------------------------------
   10. Dealer pricing — offers, terms, price list
   --------------------------------------------------------------------- */
.mg-offers,
.mg-terms { border-radius: var(--mg-r-lg, 22px); }
.mg-offers__body li::marker,
.mg-terms__body li::marker { color: var(--mg-accent, #0067b1); }
.mg-offers__body li,
.mg-terms__body li { margin-block-end: 4px; }
.mg-price-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--mg-r-sm, 8px);
  background: var(--mg-bg, #fff);
  box-shadow: var(--mg-shadow-xs, 0 1px 2px rgba(11, 19, 32, .06));
}

/* ---------------------------------------------------------------------
   11. Telegram app — tight, native-feeling, ALWAYS light
   (literal light values on purpose: this surface never goes dark)
   --------------------------------------------------------------------- */
.mg-tgapp { padding: 26px 16px 44px; }
.mg-tgapp__wrap { max-width: 460px; }
.mg-tgapp__auth {
  background: #fff;
  border-color: #e5eaf1;
  border-radius: 22px;
  padding: 30px 24px 26px;
  box-shadow: 0 1px 2px rgba(11, 19, 32, .05), 0 18px 44px -20px rgba(11, 19, 32, .18);
}
.mg-tgapp__brand {
  font-size: 24px;
  letter-spacing: -0.02em;
  color: #0067b1;
}
.mg-tgapp__brand::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 99px;
  margin: 9px auto 0;
  background: linear-gradient(90deg, #0067b1, rgba(0, 103, 177, .25));
}
.mg-tgapp__sub {
  margin: 10px 0 20px;
  color: #56677b;
}

/* Segmented login/register switch. */
.mg-tgtabs {
  background: #eef3f9;
  border: 1px solid #e5eaf1;
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
}
.mg-tgtab {
  min-height: 44px;
  border-radius: 10px;
  font-size: .9375rem;
  color: #56677b;
}
.mg-tgtab.is-active {
  background: #fff;
  color: #024e86;
  box-shadow: 0 1px 2px rgba(11, 19, 32, .08), 0 4px 14px -6px rgba(11, 19, 32, .16);
}
.mg-tgpane { padding-block-start: 2px; }
.mg-tgapp__forgot {
  padding-block: 10px;
  min-height: 40px;
  color: #0067b1;
  font-weight: 600;
}
.mg-tgapp__hint { color: #56677b; }

/* Belt-and-braces: panels rendered inside the app keep light chrome even
   if a theme attribute ever leaks in. */
html.mg-tgapp-html .mg-order__lines,
html.mg-tgapp-html .mg-imp,
html.mg-tgapp-html .mg-order__foot,
html.mg-tgapp-html .mg-order__gate,
html.mg-tgapp-html .mg-order__table,
html.mg-tgapp-html .mg-pay__card,
html.mg-tgapp-html .mg-pay__form,
html.mg-tgapp-html .mg-proforma {
  background: #fff;
  border-color: #e5eaf1;
  color: #0b1320;
}
html.mg-tgapp-html .mg-order__submit {
  background: rgba(255, 255, 255, .93);
  border-color: #e5eaf1;
}
html.mg-tgapp-html .mg-order__lead {
  background: #e9f1fa;
  color: #0b1320;
}
html.mg-tgapp-html .mg-imp-card { background: #f5f8fc; }

/* ---------------------------------------------------------------------
   12. Dark mode ([data-theme="dark"]) — account/order surfaces only.
   (--mg-surface-2 / --mg-accent-soft do not flip, so they are replaced
   with translucent equivalents here.)
   --------------------------------------------------------------------- */
[data-theme="dark"] .mg-auth__cards > section:nth-of-type(2) {
  background: var(--mg-surface, #131d2c);
}
[data-theme="dark"] .mg-auth__perks,
[data-theme="dark"] .mg-auth__perks li,
[data-theme="dark"] .mg-dash__head,
[data-theme="dark"] .mg-order__lines-head,
[data-theme="dark"] .mg-imp-card__head,
[data-theme="dark"] .mg-pay__row { border-color: var(--mg-border, #22304a); }
[data-theme="dark"] .mg-auth__perks li::before { box-shadow: 0 0 0 4px rgba(84, 170, 230, .14); }

[data-theme="dark"] .mg-order__lead {
  background: rgba(84, 170, 230, .09);
  border-color: rgba(84, 170, 230, .22);
  border-inline-start-color: rgba(120, 187, 235, .9);
  color: var(--mg-text, #dbe6f3);
}
[data-theme="dark"] .mg-order__lines,
[data-theme="dark"] .mg-imp,
[data-theme="dark"] .mg-pay__form { background: var(--mg-surface, #131d2c); border-color: var(--mg-border, #22304a); }
[data-theme="dark"] .mg-imp-card {
  background: rgba(255, 255, 255, .04);
  border-color: var(--mg-border, #22304a);
}
[data-theme="dark"] .mg-imp-f select,
[data-theme="dark"] .mg-imp-f input { background: #0e1826; border-color: var(--mg-border, #22304a); }

[data-theme="dark"] #mg-order-add,
[data-theme="dark"] #mg-imp-add {
  border-color: var(--mg-border, #22304a);
  color: #63b7ef;
}
[data-theme="dark"] #mg-order-add:hover,
[data-theme="dark"] #mg-imp-add:hover {
  background: rgba(84, 170, 230, .1);
  border-color: rgba(84, 170, 230, .45);
}

[data-theme="dark"] .mg-order__submit {
  background: rgba(19, 29, 44, .9);
  border-color: var(--mg-border, #22304a);
}
[data-theme="dark"] .mg-order__search input {
  background: var(--mg-surface, #131d2c);
  border-color: var(--mg-border, #22304a);
  color: var(--mg-text, #dbe6f3);
}
[data-theme="dark"] .mg-order__track { background: rgba(255, 255, 255, .07); }
[data-theme="dark"] .mg-order__total {
  background: var(--mg-surface, #131d2c);
  border-color: var(--mg-border, #22304a);
}
[data-theme="dark"] .mg-msg__meta b { color: var(--mg-text, #dbe6f3); }

[data-theme="dark"] .mg-pay__row--total { background: rgba(84, 170, 230, .12); }

[data-theme="dark"] .mg-note--ok {
  background: rgba(62, 161, 105, .16);
  border-color: rgba(62, 161, 105, .35);
  border-inline-start-color: #4fbe88;
  color: #9fe2bf;
}
[data-theme="dark"] .mg-note--err {
  background: rgba(224, 92, 92, .14);
  border-color: rgba(224, 92, 92, .35);
  border-inline-start-color: #e88a80;
  color: #f4b6ae;
}

[data-theme="dark"] .mg-ostatus { background: rgba(255, 255, 255, .07); color: #c4d2e2; }
[data-theme="dark"] .mg-ostatus--draft {
  background: rgba(255, 255, 255, .05);
  color: var(--mg-muted, #93a5ba);
  border-color: var(--mg-border, #22304a);
}
[data-theme="dark"] .mg-ostatus--paid,
[data-theme="dark"] .mg-ostatus--delivered { background: rgba(62, 161, 105, .18); color: #9fe2bf; }
[data-theme="dark"] .mg-ostatus--canceled { background: rgba(224, 92, 92, .16); color: #f4b6ae; }
[data-theme="dark"] .mg-ostatus--pending,
[data-theme="dark"] .mg-ostatus--submitted { background: rgba(240, 169, 46, .16); color: #f0c46a; }
[data-theme="dark"] .mg-ostatus--confirmed,
[data-theme="dark"] .mg-ostatus--processing,
[data-theme="dark"] .mg-ostatus--ready,
[data-theme="dark"] .mg-ostatus--shipped { background: rgba(84, 170, 230, .16); color: #8fc7ef; }
[data-theme="dark"] .mg-order__await { color: #f0c46a; }

[data-theme="dark"] .mg-dcard__val,
[data-theme="dark"] .mg-dash__head h1,
[data-theme="dark"] .mg-auth__intro h1,
[data-theme="dark"] .mg-auth__card h2,
[data-theme="dark"] .mg-order__subh,
[data-theme="dark"] .mg-imp-card__head b { color: var(--mg-text, #dbe6f3); }
[data-theme="dark"] .mg-dcard--credit .mg-dcard__val { color: #fff; }

[data-theme="dark"] .mg-proforma__table thead th { background: rgba(255, 255, 255, .05); color: var(--mg-text, #dbe6f3); }
[data-theme="dark"] .mg-proforma__table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .mg-proforma__total {
  background: rgba(84, 170, 230, .12);
  border-color: rgba(84, 170, 230, .25);
}

/* ---------------------------------------------------------------------
   13. Touch ergonomics — honest 44px+ targets on coarse pointers
   --------------------------------------------------------------------- */
@media (pointer: coarse) {
  .mg-btn--sm {
    height: auto;
    min-height: 44px;
  }
  .mg-ol-del,
  .mg-imp-del {
    width: 44px;
    height: 44px;
  }
  .mg-tgtab { min-height: 48px; }
}

/* ---------------------------------------------------------------------
   14. Motion discipline
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mg-ol-del,
  .mg-imp-card,
  .mg-order__search input,
  #mg-order-add,
  #mg-imp-add { transition: none; }
}