/* ManhTool — popup giới thiệu & chương trình mở miễn phí (mt-promo.js). Cùng một file ở mọi dự án ManhTool.
   --mp: màu chủ đạo (admin chọn, mặc định xanh ManhTool); các sắc khác suy ra từ đó. Có nền sáng + nền tối. */
.mp-card, .mp-pv, .mp-bar, .mp-chip {
  --mp: #0e7c5a; --mp-d: color-mix(in srgb, var(--mp) 72%, #000); --mp-l: color-mix(in srgb, var(--mp) 62%, #fff); --mp-on: #fff;
  --mp-bg: #fff; --mp-text: #1f2a26; --mp-strong: #12251d; --mp-text-2: #5b6a64; --mp-text-3: #8a9a93;
  --mp-soft: color-mix(in srgb, var(--mp) 9%, #fff); --mp-line: color-mix(in srgb, var(--mp) 22%, #fff); --mp-item: #fff; --mp-accent: var(--mp-d);
}
.mp-card.mp-lt { --mp-d: color-mix(in srgb, var(--mp) 55%, #000); --mp-on: #1b1b1b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mp-card, :root:not([data-theme="light"]) .mp-pv, :root:not([data-theme="light"]) .mp-chip {
    --mp-bg: #121e1a; --mp-text: #dfe9e4; --mp-strong: #f1f7f4; --mp-text-2: #a8bab2; --mp-text-3: #7d918a;
    --mp-soft: color-mix(in srgb, var(--mp) 18%, #121e1a); --mp-line: color-mix(in srgb, var(--mp) 34%, #121e1a); --mp-item: #17251f; --mp-accent: color-mix(in srgb, var(--mp) 55%, #fff);
  }
}
:root[data-theme="dark"] .mp-card, :root[data-theme="dark"] .mp-pv, :root[data-theme="dark"] .mp-chip {
  --mp-bg: #121e1a; --mp-text: #dfe9e4; --mp-strong: #f1f7f4; --mp-text-2: #a8bab2; --mp-text-3: #7d918a;
  --mp-soft: color-mix(in srgb, var(--mp) 18%, #121e1a); --mp-line: color-mix(in srgb, var(--mp) 34%, #121e1a); --mp-item: #17251f; --mp-accent: color-mix(in srgb, var(--mp) 55%, #fff);
}
.mp-i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.14em; }
html.mp-open { overflow: hidden; }
.mp-hide { display: none !important; }

/* ---------- khung hộp thoại ---------- */
.mp-bd { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px; background: rgba(8, 14, 12, .62);
  backdrop-filter: blur(7px) saturate(1.1); -webkit-backdrop-filter: blur(7px) saturate(1.1); opacity: 0; transition: opacity .3s ease;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
.mp-bd.in { opacity: 1; }
.mp-bd.out { opacity: 0; }
.mp-bd *, .mp-bd *::before, .mp-bd *::after { box-sizing: border-box; }
.mp-card { position: relative; width: min(430px, 100%); max-height: min(88vh, 800px); overflow: auto; overscroll-behavior: contain; padding: 0; border-radius: 24px;
  background: var(--mp-bg); color: var(--mp-text); text-align: left; scrollbar-width: thin; font-size: 15px; line-height: 1.5;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 7px color-mix(in srgb, var(--mp) 22%, transparent), 0 34px 90px rgba(0, 0, 0, .45);
  transform: translateY(26px) scale(.92); transition: transform .5s cubic-bezier(.2, 1.35, .35, 1); }
.mp-bd.in .mp-card { transform: none; }
.mp-pad { padding: 20px 20px 16px; }
.mp-card a { text-decoration: none; }
.mp-card :focus-visible { outline: 3px solid color-mix(in srgb, var(--mp) 55%, #fff); outline-offset: 2px; }

/* nút đóng — khi đang khoá là vòng đếm ngược */
.mp-x { position: absolute; z-index: 4; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; margin: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .24); color: var(--mp-on); font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); transition: background .2s, transform .2s; }
.mp-x:hover { background: rgba(255, 255, 255, .38); }
.mp-x > .mp-i { font-size: 20px; }
.mp-x .mp-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mp-x circle { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 3; }
.mp-lt .mp-x circle { stroke: rgba(0, 0, 0, .15); }
.mp-x circle.p { stroke: var(--mp-on); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.mp-x b { position: relative; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.locked .mp-x { cursor: not-allowed; }
.mp-x.mp-nudge { animation: mp-nudge .45s ease; }
@keyframes mp-nudge { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.unlocked .mp-x { animation: mp-pop .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mp-pop { from { transform: scale(.4); } }
.mp-x .mp-down { animation: mp-downk 1.2s ease-in-out infinite; }

/* dải đầu màu thương hiệu: chấm lấp lánh, hộp quà, pháo giấy */
.mp-hero { position: relative; overflow: hidden; padding: 24px 22px 20px; color: var(--mp-on); border-radius: 24px 24px 0 0;
  background: radial-gradient(circle at 88% -10%, rgba(255, 255, 255, .32), transparent 42%), radial-gradient(circle at 0 120%, color-mix(in srgb, var(--mp-l) 70%, transparent), transparent 55%), linear-gradient(135deg, var(--mp-d), var(--mp) 55%, var(--mp-l)); }
.mp-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .9) 0 1.2px, transparent 1.6px), radial-gradient(circle, rgba(255, 240, 180, .9) 0 1px, transparent 1.4px);
  background-size: 46px 46px, 31px 31px; background-position: 0 0, 14px 20px; }
.mp-hero::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); animation: mp-sweep 4.5s 1s ease-in-out infinite; }
@keyframes mp-sweep { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.mp-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mp-confetti i { position: absolute; top: -12px; width: 6px; height: 10px; border-radius: 2px; background: hsl(var(--h) 85% 70%); opacity: .85; animation: mp-fall 3.6s linear infinite; }
@keyframes mp-fall { to { transform: translateY(260px) rotate(540deg); } }
.mp-gift { position: absolute; right: 58px; top: 14px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 8px 18px rgba(0, 0, 0, .18); animation: mp-bob 2.6s ease-in-out infinite; }
.mp-gift .mp-i { font-size: 30px; }
@keyframes mp-bob { 50% { transform: translateY(-6px) rotate(-6deg); } }
.mp-tag { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 56px); padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); font-size: 12px; font-weight: 800; letter-spacing: .02em; line-height: 1.35; text-wrap: balance; }
.mp-tag .mp-i { font-size: 14px; }
.mp-ann .mp-tag { max-width: calc(100% - 120px); }
.mp-lt .mp-tag { background: rgba(255, 255, 255, .45); }
.mp-hero h2 { position: relative; margin: 12px 0 6px; padding-right: 64px; font-size: 24px; font-weight: 800; line-height: 1.22; color: inherit; text-wrap: balance; text-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
.mp-hero p { position: relative; margin: 0; font-size: 14px; line-height: 1.5; opacity: .94; }
.mp-clock { position: relative; display: flex; gap: 8px; margin-top: 16px; }
.mp-clock span { flex: 1; max-width: 72px; padding: 8px 4px 6px; border-radius: 12px; background: rgba(0, 0, 0, .22); text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.mp-lt .mp-clock span { background: rgba(255, 255, 255, .5); }
.mp-clock b { display: block; font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.mp-clock small { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 600; opacity: .8; }
.mp-until { position: relative; margin-top: 10px; font-size: 12.5px; font-weight: 600; opacity: .9; }
/* dải đầu của popup giới thiệu: logo lớn viền trắng, tên thương hiệu nổi bật */
.mp-hero-b { padding: 22px; }
.mp-brand { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.mp-brand .mp-logo { width: 68px; height: 68px; border-radius: 20px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 10px 24px rgba(0, 0, 0, .25); background: #fff; }
.mp-brand b { display: block; font-size: 23px; font-weight: 800; line-height: 1.15; text-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
.mp-brand small { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; opacity: .92; }

/* quyền lợi, nút chính */
.mp-perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; }
.mp-perks li { display: flex; gap: 7px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--mp-text); }
.mp-perks li > .mp-i { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--mp-soft); color: var(--mp-accent); stroke-width: 3; }
.mp-go, .mp-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 14px 16px; border-radius: 14px;
  color: var(--mp-on) !important; font-size: 16px; font-weight: 800; text-decoration: none; line-height: 1.3; text-align: center;
  background: linear-gradient(135deg, var(--mp-d), var(--mp) 55%, var(--mp-l)); box-shadow: 0 10px 24px color-mix(in srgb, var(--mp) 40%, transparent); animation: mp-glow 2.4s ease-in-out infinite; }
.mp-cta { font-size: 15px; }
.mp-go::after, .mp-cta::after { content: ''; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); animation: mp-sweep 3.2s .6s ease-in-out infinite; }
.mp-go > *, .mp-cta > * { position: relative; }
.mp-go .mp-i { transition: transform .2s; } .mp-go:hover .mp-i { transform: translateX(4px); }
.mp-go:hover, .mp-cta:hover { filter: brightness(1.06); }
@keyframes mp-glow { 50% { box-shadow: 0 10px 24px color-mix(in srgb, var(--mp) 40%, transparent), 0 0 0 6px color-mix(in srgb, var(--mp) 16%, transparent); } }
.mp-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mp-text-2); text-align: center; }
.mp-sep { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; color: var(--mp-accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mp-sep::before, .mp-sep::after { content: ''; flex: 1; height: 1px; background: var(--mp-line); }
.mp-sponsor { padding: 14px; border-radius: 18px; background: linear-gradient(180deg, var(--mp-soft), var(--mp-bg) 70%); border: 1px solid var(--mp-line); }
.mp-sponsor .mp-about { margin-top: 12px; }

/* nội dung giới thiệu */
.mp-shead { display: flex; align-items: center; gap: 12px; }
.mp-logo { flex: none; width: 56px; height: 56px; border-radius: 16px; object-fit: cover; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.mp-logo-i { display: grid; place-items: center; color: var(--mp); font-size: 28px; }
.mp-shead b { display: block; font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--mp-strong); }
.mp-shead small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--mp-text-2); }
.mp-about { margin: 0 0 2px; font-size: 15px; line-height: 1.7; color: var(--mp-text); }
.mp-about p, .mp-about ul { margin: 0 0 12px; text-wrap: pretty; }
.mp-about > :last-child { margin-bottom: 0; }
/* đoạn đầu: lời mở lớn hơn, đậm hơn để mắt dừng lại ngay */
.mp-about p:first-child { font-size: 16.5px; font-weight: 600; line-height: 1.5; color: var(--mp-strong); text-wrap: balance; }
/* **chữ** → tô nổi bật kiểu bút dạ quang màu thương hiệu */
.mp-about mark { padding: 0 .15em; border-radius: .25em; color: var(--mp-accent); font-weight: 800; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(transparent 55%, color-mix(in srgb, var(--mp) 24%, transparent) 55%); }
.mp-about .mp-inl { color: var(--mp-accent); font-size: 1.1em; margin-right: .15em; }
/* dòng "- …" → danh sách dấu ✓ tròn màu thương hiệu */
.mp-about ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.mp-about p + ul { margin-top: -4px; }
.mp-about li { position: relative; padding-left: 28px; line-height: 1.55; }
.mp-about li::before { content: ''; position: absolute; left: 0; top: .15em; width: 19px; height: 19px; border-radius: 50%; background: var(--mp-soft); box-shadow: inset 0 0 0 1px var(--mp-line); }
.mp-about li::after { content: ''; position: absolute; left: 7px; top: calc(.15em + 4px); width: 5px; height: 9px; border: solid var(--mp-accent); border-width: 0 2.2px 2.2px 0; transform: rotate(40deg); }
/* nhắc cuộn xuống hết mới đóng được: dải dính ở đáy khung, mũi tên nhún */
.mp-scrollhint { display: none; position: sticky; bottom: 0; z-index: 3; align-items: center; justify-content: center; gap: 8px; padding: 22px 12px 12px; margin-top: -40px; pointer-events: none;
  background: linear-gradient(transparent, var(--mp-bg) 55%); color: var(--mp-accent); font-size: 13px; font-weight: 800; }
.need-scroll .mp-scrollhint { display: flex; }
.mp-scrollhint i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mp); color: var(--mp-on); font-style: normal; animation: mp-downk 1.2s ease-in-out infinite; }
@keyframes mp-downk { 50% { transform: translateY(4px); } }
.mp-sub { margin: 16px 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mp-accent); }
.mp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mp-list a, .mp-list li > div { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--mp-item); border: 1px solid var(--mp-line); color: inherit; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04); transition: border-color .2s, transform .15s, box-shadow .2s; }
.mp-list a:hover { border-color: var(--mp); transform: translateY(-1px); box-shadow: 0 8px 18px color-mix(in srgb, var(--mp) 18%, transparent); }
.mp-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--mp-accent);
  background: linear-gradient(135deg, var(--mp-soft), color-mix(in srgb, var(--mp) 18%, var(--mp-bg))); }
.mp-ic .mp-i { font-size: 21px; }
.mp-tx { min-width: 0; flex: 1; }
.mp-tx b { display: block; font-size: 14.5px; font-weight: 700; color: var(--mp-strong); }
.mp-tx small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.45; color: var(--mp-text-2); }
.mp-go-i { font-size: 20px; color: var(--mp-accent); }
.mp-contacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.mp-contacts a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--mp-line); background: var(--mp-item); color: var(--mp-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.mp-contacts a .mp-i { color: var(--mp-accent); }
.mp-contacts a:hover { border-color: var(--mp); color: var(--mp-accent); }
.mp-cta .mp-i { font-size: 18px; }
.mp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 13px; }
.mp-foot a { display: inline-flex; align-items: center; gap: 4px; color: var(--mp-accent); font-weight: 700; text-decoration: none; }
/* xem xong mới tiếp tục: nút chính rộng hết, mờ khi đang đếm giờ */
.mp-foot-gate { position: sticky; bottom: 0; z-index: 3; display: block; margin: 12px -20px -16px; padding: 22px 20px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--mp-bg) 34%); }
.mp-continue { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, var(--mp-d), var(--mp) 55%, var(--mp-l)); color: var(--mp-on); font-family: inherit; font-size: 16px; font-weight: 800; line-height: 1.3; box-shadow: 0 10px 24px color-mix(in srgb, var(--mp) 40%, transparent); transition: filter .2s, opacity .2s; }
.mp-continue:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; font-variant-numeric: tabular-nums; }
.mp-continue:not(:disabled):hover { filter: brightness(1.06); }
.mp-continue .mp-i { font-size: 18px; }
.mp-later { border: 0; background: none; color: var(--mp-text-2); font: inherit; font-weight: 600; cursor: pointer; padding: 6px 4px; white-space: nowrap; }
.locked .mp-later { color: var(--mp-text-3); cursor: not-allowed; font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .mp-perks { grid-template-columns: minmax(0, 1fr); } .mp-hero h2 { font-size: 21px; } .mp-brand b { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .mp-gift, .mp-confetti i, .mp-hero::after, .mp-go, .mp-cta, .mp-go::after, .mp-cta::after, .mp-scrollhint i, .mp-x .mp-down { animation: none; } }
/* điện thoại: tấm trượt lên từ đáy màn hình */
@media (max-width: 560px) {
  .mp-bd { align-items: end; padding: 0; }
  .mp-card { width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; transform: translateY(100%); box-shadow: 0 -10px 40px rgba(0, 0, 0, .35); }
  .mp-card > .mp-pad:last-of-type { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .mp-card::before { content: ''; position: absolute; z-index: 5; left: 50%; top: 7px; width: 42px; height: 4px; margin-left: -21px; border-radius: 4px; background: rgba(255, 255, 255, .55); }
  .mp-hero { padding-top: 28px; }
}

/* ---------- dải thông báo đầu trang (đang mở miễn phí) ---------- */
.mp-bar { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; width: 100%; margin: 0; padding: 9px 16px; border: 0;
  background: linear-gradient(90deg, var(--mp-d), color-mix(in srgb, var(--mp) 80%, #3ddc84) 55%, var(--mp-d)); color: #fff; cursor: pointer;
  font: 600 13.5px/1.35 "Be Vietnam Pro", system-ui, sans-serif; text-align: center; }
.mp-bar > .mp-i { font-size: 17px; }
.mp-bar-t { font-weight: 800; }
.mp-bar-c { font-variant-numeric: tabular-nums; opacity: .92; }
.mp-bar-go { display: inline-flex; align-items: center; gap: 2px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-weight: 700; }
.mp-bar:hover .mp-bar-go { background: rgba(255, 255, 255, .32); }
.mp-bar:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }

/* ---------- dòng nhỏ "Bản miễn phí bởi …" — bấm để mở lại lời giới thiệu ---------- */
.mp-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px 5px 5px; border: 1px solid var(--mp-line); border-radius: 999px; background: var(--mp-item);
  color: var(--mp-text); font: 600 12.5px/1.3 "Be Vietnam Pro", system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); transition: border-color .2s; }
.mp-chip:hover { border-color: var(--mp); }
.mp-chip img { width: 24px; height: 24px; border-radius: 50%; background: #fff; object-fit: cover; }
.mp-chip > .mp-i { font-size: 16px; color: var(--mp-text-3); }
.mp-chip b { color: var(--mp-accent); }
[data-mp-chip] { display: flex; justify-content: center; padding: 2px 16px 18px; }
[data-mp-chip]:empty { display: none; }

/* ---------- quản trị: tab "Miễn phí & giới thiệu" (mt-promo-admin.js) — màu chữ/nền theo khung của trang ---------- */
.mpa { --mpa-line: color-mix(in srgb, currentColor 16%, transparent); --mpa-soft: color-mix(in srgb, currentColor 5%, transparent); --mpa-mute: color-mix(in srgb, currentColor 62%, transparent);
  display: grid; gap: 18px; font-size: 14px; line-height: 1.5; }
.mpa *, .mpa *::before, .mpa *::after { box-sizing: border-box; }
.mpa-sec { padding: 18px; border: 1px solid var(--mpa-line); border-radius: 16px; }
.mpa-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.mpa-h h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 800; }
.mpa-h h3 .mp-i { color: #0e7c5a; font-size: 20px; }
.mpa-desc { margin: 6px 0 12px; color: var(--mpa-mute); }
.mpa-pill { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--mpa-soft); border: 1px solid var(--mpa-line); font-size: 12.5px; font-weight: 700; }
.mpa-pill.mpa-on { background: #e3f6ec; border-color: #b7e4cb; color: #0b6a4a; }
.mpa-pill.mpa-wait { background: #fff4e0; border-color: #f2d49b; color: #8a5a00; }
.mpa-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.mpa-stats div { padding: 10px 12px; border-radius: 12px; background: var(--mpa-soft); border: 1px solid var(--mpa-line); }
.mpa-stats b { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mpa-stats small { color: var(--mpa-mute); font-size: 12.5px; }
.mpa-form { display: grid; gap: 12px; }
.mpa-feat { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.mpa-feat legend { padding: 0; margin-bottom: 6px; font-weight: 700; }
.mpa-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--mpa-line); border-radius: 12px; cursor: pointer; }
.mpa-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #0e7c5a; }
.mpa-check b { display: block; font-weight: 700; }
.mpa-check small { display: block; color: var(--mpa-mute); font-size: 12.5px; }
.mpa-field { display: grid; gap: 5px; min-width: 0; }
.mpa-field > span { font-weight: 700; font-size: 13px; }
.mpa-field > span small { font-weight: 500; color: var(--mpa-mute); }
.mpa input:not([type="checkbox"]):not([type="color"]), .mpa select, .mpa textarea { width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--mpa-line); border-radius: 10px;
  background: var(--mpa-soft); color: inherit; font: inherit; }
.mpa input[type="color"] { width: 100%; height: 40px; padding: 3px; border: 1px solid var(--mpa-line); border-radius: 10px; background: transparent; cursor: pointer; }
.mpa input:focus, .mpa select:focus, .mpa textarea:focus { outline: 2px solid #12b886; outline-offset: 1px; }
.mpa select option { color: #13241f; background: #fff; }
.mpa-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mpa-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mpa-row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mpa-quick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--mpa-mute); font-size: 13px; }
.mpa-err { margin: 0; padding: 8px 12px; border-radius: 10px; background: #fdecec; color: #a61b1b; font-weight: 600; }
.mpa-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mpa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--mpa-line); border-radius: 10px; background: transparent; color: inherit;
  font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mpa-btn:hover { background: var(--mpa-soft); }
.mpa-btn[hidden] { display: none; }
.mpa-sm { padding: 6px 10px; font-size: 13px; }
.mpa-primary { background: #0e7c5a; border-color: #0e7c5a; color: #fff; }
.mpa-primary:hover { background: #0a5c44; }
.mpa-danger { color: #c2410c; }
.mpa-where { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--mpa-soft); border: 1px solid var(--mpa-line); font-size: 13.5px; }
.mpa-where ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 3px; }
.mpa-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.mpa-edit textarea { min-height: 220px; resize: vertical; line-height: 1.6; }
.mpa-pv { padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--mp-line); background: var(--mp-bg); color: var(--mp-text); max-height: 460px; overflow: auto; }
.mpa-pv > small { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mp-text-3); }
.mpa-help { color: var(--mpa-mute); font-size: 12.5px; }
.mpa-count { float: right; font-variant-numeric: tabular-nums; }
.mpa-count.warn { color: #b45309; font-weight: 700; }
.mpa-prods { display: grid; gap: 8px; }
.mpa-prow { display: grid; grid-template-columns: 196px minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 6px; align-items: center; padding: 8px; border: 1px solid var(--mpa-line); border-radius: 12px; }
.mpa-prow [data-k="desc"] { grid-column: 2 / 4; }
.mpa-icsel { position: relative; display: flex; align-items: center; gap: 6px; }
.mpa-icv { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #e3f6ec; color: #0e7c5a; font-size: 18px; }
@media (max-width: 760px) {
  .mpa-row, .mpa-row3, .mpa-edit { grid-template-columns: minmax(0, 1fr); }
  .mpa-row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mpa-prow { grid-template-columns: minmax(0, 1fr) auto; }
  .mpa-prow > * { grid-column: 1 / -1 !important; }
  .mpa-prow [data-del] { grid-column: 2 !important; grid-row: 1; }
  .mpa-prow .mpa-icsel { grid-column: 1 !important; grid-row: 1; }
}