/* Meta Ads page — core styles (FE-core). Everything scoped under body.ma-page, classes prefixed ma-. */

body.ma-page { --purple: #a45ce7; --purple-soft: #f3e9ff; --ma-grid: #edf0f4; }
body.ma-page .nav-children a.active { color: var(--blue); font-weight: 600; }

/* ---------- Topbar ---------- */
body.ma-page .topbar-left h1 { margin-right: 12px; }
.ma-mode-pill { flex: 0 0 auto; margin-right: 14px; border-radius: 5px; background: linear-gradient(90deg, #a45ce7, #ca57e5); color: #fff; padding: 1px 7px 0; font-size: 9px; font-weight: 700; letter-spacing: .3px; }
.ma-account-switch .select-btn { width: 190px; gap: 8px; }
.ma-acc-label { display: flex; min-width: 0; align-items: center; gap: 7px; }
.ma-acc-label .meta-logo { width: 16px; height: 16px; flex-basis: 16px; font-size: 12px; }
.ma-acc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-acc-name.ma-skeleton { display: inline-block; width: 110px; height: 12px; }
.ma-account-switch.ma-single .select-btn > svg { display: none; }
.ma-account-switch.ma-single .select-btn { cursor: default; }
.ma-account-switch .select-menu { min-width: 250px; }
.ma-account-switch .select-menu button { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; }
.ma-account-switch .select-menu button small { display: block; color: var(--muted); font-size: 9px; }
.ma-account-switch .select-menu button.ma-selected { color: var(--blue); background: var(--blue-soft); }
.ma-account-switch .ma-menu-divider { height: 1px; margin: 4px 0; background: var(--line-soft); }
.ma-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #9aa3b5; }
.ma-status-dot.green { background: var(--green); }
.ma-status-dot.orange { background: var(--orange); }
.ma-status-dot.red { background: var(--red); }
body.ma-page .topbar-left time:empty { display: inline-block; width: 110px; height: 12px; }

/* ---------- Greeting / controls ---------- */
.ma-conn-pill { display: flex; align-items: center; gap: 6px; height: 34px; border: 1px solid transparent; border-radius: 8px; background: transparent; padding: 0 8px; font-size: 11px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ma-conn-pill:hover { border-color: var(--line); background: #fff; }
.ma-conn-pill[data-tone="ok"] .ma-conn-dot, .ma-conn-pill[data-tone="ok"] .ma-conn-text { color: var(--green); }
.ma-conn-pill[data-tone="warn"] .ma-conn-dot, .ma-conn-pill[data-tone="warn"] .ma-conn-text { color: var(--orange); }
.ma-conn-pill[data-tone="bad"] .ma-conn-dot, .ma-conn-pill[data-tone="bad"] .ma-conn-text { color: var(--red); }
.ma-conn-pill[data-tone="off"] .ma-conn-dot, .ma-conn-pill[data-tone="off"] .ma-conn-text { color: #7a8394; }
.ma-conn-pill[data-tone="demo"] .ma-conn-dot, .ma-conn-pill[data-tone="demo"] .ma-conn-text { color: var(--purple); }
.ma-sync { color: var(--muted); font-size: 10px; font-weight: 400; }
.ma-sync:empty { display: none; }
.ma-sync.ma-old { color: var(--orange); }
.compare-btn.ma-toggle { display: flex; align-items: center; gap: 6px; }
.compare-btn.ma-toggle svg { display: none; width: 14px; height: 14px; }
.compare-btn.ma-toggle[aria-pressed="true"] { background: var(--blue-soft); color: var(--blue); }
.ma-refresh svg { transition: transform .2s ease; }
.ma-refresh.spinning svg { animation: ma-spin 1s linear infinite; }
.ma-refresh:disabled, .icon-btn:disabled, .select-btn:disabled, .compare-btn:disabled, .download-btn:disabled { opacity: .55; cursor: not-allowed; }
@keyframes ma-spin { to { transform: rotate(360deg); } }
body.ma-page[data-compare="off"] .ma-delta { display: none !important; }
.dashboard[data-state="booting"] .filter-actions button, .dashboard[data-state="booting"] .filter-actions .select-btn { pointer-events: none; }

/* ---------- Banner ---------- */
.ma-banner { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; border: 1px solid; border-radius: 10px; padding: 8px 12px; font-size: 11px; }
.ma-banner[hidden] { display: none; }
.ma-banner-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.ma-banner-text { flex: 1; min-width: 0; }
.ma-banner-actions { display: flex; align-items: center; gap: 6px; }
.ma-banner-actions .secondary-btn { width: auto; height: 26px; padding: 0 10px; font-size: 10.5px; }
.ma-banner-actions .ma-link-btn { font-size: 10.5px; }
.ma-banner-actions .ma-banner-x { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.ma-banner-actions .ma-banner-x svg { width: 13px; height: 13px; }
.ma-banner.red { border-color: #f9c9cc; background: #fff2f2; color: #a01c25; }
.ma-banner.orange { border-color: #ffd9b8; background: #fff6ec; color: #9a4f0a; }
.ma-banner.blue { border-color: #c9d9ff; background: var(--blue-soft); color: #1d4fc4; }
.ma-banner.purple { border-color: #e2ccff; background: var(--purple-soft); color: #6b2fb3; }
.ma-banner.green { border-color: #bfe8cf; background: #eaf8f1; color: #1b7a48; }
.ma-banner code { font-size: 10px; }

/* ---------- KPI ---------- */
.kpi-card[role="button"] { cursor: pointer; transition: border-color .15s ease; }
.kpi-card[role="button"]:hover { border-color: #c9d3e6; }
.kpi-card.ma-kpi--selected { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.kpi-card.ma-kpi--error .ma-kpi-small { color: var(--red); }
.kpi-card.ma-kpi--red .ma-kpi-value { color: var(--red); }
.ma-kpi-value { font-variant-numeric: tabular-nums; }
.ma-kpi-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.ma-kpi-col { display: flex; min-width: 0; flex-direction: column; }
.ma-kpi-col small { color: #5b6578; font-size: 9.5px; white-space: nowrap; }
.ma-kpi-col strong { font-size: 18px; line-height: 1.2; letter-spacing: -.3px; white-space: nowrap; }
.ma-kpi-col .trend { font-size: 9.5px; }
.ma-kpi-multi .kpi-label { white-space: normal; }
/* The template's labels never wrap and its cards have a fixed height, which holds at 1440
   where every label fits on one line. Narrower, "ต้นทุนต่อการทักแชท (บาท)" is wider than its
   own card, and a label that cannot wrap inside a `1fr` track pushes the grid — and with it
   the whole page — sideways. The overview page settled this the same way. */
body.ma-page .kpi-label { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; white-space: normal; }
body.ma-page .kpi-card { height: auto; min-height: 106px; }
/* The line under a KPI is a sentence, not a figure: "รวมผลลัพธ์หลายแบบเข้าด้วยกัน เทียบข้าม
   แคมเปญไม่ได้" is 298px of text in a 275px card, and nowrap made it push the page instead. */
body.ma-page .kpi-content > small { display: block; line-height: 1.35; white-space: normal; }
.ma-skel-val { display: inline-block; width: 80px; height: 22px; }
.ma-skel-small { display: inline-block; width: 60px; height: 10px; }
.ma-skel-line { display: inline-block; height: 11px; }
.ma-kpi-cols .ma-skel-val { width: 44px; height: 18px; }

/* ---------- Metric strip ---------- */
/* Stands in for the sales and money cards when there is nothing entered to put in them.
   One quiet line, and the only thing on it that can be acted on is the link. */
.ma-sales-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 9px 0 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #fbfcfe;
  padding: 9px 13px;
  color: #4b5468;
  font-size: 11px;
}
.ma-sales-prompt svg { width: 14px; height: 14px; color: var(--muted); }
.ma-sales-prompt-why { color: var(--muted); }
.ma-sales-prompt a { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--blue); font-weight: 600; white-space: nowrap; }
.ma-sales-prompt a svg { width: 12px; height: 12px; color: inherit; }
/* With the pair hidden the row is three cards, and the fifth column reserved for the wide
   money card would otherwise leave a gap where it used to be. */
.kpi-grid[data-no-sales] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid[data-no-sales] [data-kpi="sales"], .kpi-grid[data-no-sales] [data-kpi="money"] { display: none; }

.ma-metric-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); height: 46px; margin-top: 9px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.ma-chip { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 1px; border: 0; border-left: 1px solid var(--line-soft); background: transparent; padding: 0 12px; text-align: left; cursor: pointer; }
.ma-chip:first-child { border-left: 0; }
.ma-chip:hover { background: #f7f9fd; }
.ma-chip.ma-chip--selected { background: var(--blue-soft); }
.ma-chip .ma-chip-label { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.ma-chip .ma-chip-value { display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ma-chip .ma-delta { font-size: 9px; font-weight: 500; }
.ma-chip.ma-hot .ma-chip-value { color: var(--orange); }
.ma-chip .ma-skel-chip { display: inline-block; width: 44px; height: 13px; }
.ma-strip-error { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--red); font-size: 10.5px; }
.ma-strip-error .secondary-btn { width: auto; height: 24px; padding: 0 10px; font-size: 10px; }
/* generic chip (non-strip) */
span.ma-chip, .ma-chip--tag { display: inline-flex; align-items: center; height: 16px; border: 1px solid var(--line); border-radius: 5px; background: #f7f9fc; padding: 0 5px; color: #4d5669; font-size: 8.5px; font-weight: 500; white-space: nowrap; cursor: default; }
.ma-chip--rec { border-color: #bfe8cf; background: #eaf8f1; color: #1b7a48; }

/* ---------- Deltas / goodness ---------- */
.ma-good { color: var(--green) !important; }
.ma-bad { color: var(--red) !important; }
.ma-flat { color: #7a8394 !important; }
.ma-delta:empty { display: none; }
.status-pill.ma-bad { background: #fff0f0; color: var(--red); }
.status-pill.ma-flat { background: #f0f2f6; color: #6b7386; }
.status-pill.ma-good { background: #eaf8f1; color: #289364; }
.status-pill.ma-pill--warn { background: #fff3e5; color: #b9601a; }
.status-pill.ma-pill--issue { background: #fff0f0; color: var(--red); }
.status-pill.ma-pill--off { background: #f0f2f6; color: #6b7386; }
.status-pill.ma-pill--demo { background: var(--purple-soft); color: #7b3bc4; }
.status-pill.ma-pill--busy { background: var(--blue-soft); color: var(--blue); }

/* ---------- Info tooltip ---------- */
.ma-info { display: inline-grid; place-items: center; width: 12px; height: 12px; margin-left: 2px; border: 1px solid #c3cbd9; border-radius: 50%; background: #fff; padding: 0; color: #7a8394; font-size: 8px; font-weight: 700; line-height: 1; cursor: help; vertical-align: 1px; }
.ma-info:hover, .ma-info:focus-visible { border-color: var(--blue); color: var(--blue); outline: none; }
.ma-tooltip { position: fixed; z-index: 120; max-width: 220px; border-radius: 7px; background: #101725; color: #fff; padding: 6px 9px; font-size: 10px; line-height: 1.45; box-shadow: 0 8px 20px rgba(10, 18, 34, .25); pointer-events: none; }
.ma-charttip { position: fixed; z-index: 120; max-width: 260px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 7px 10px; font-size: 10px; line-height: 1.5; box-shadow: 0 10px 28px rgba(20, 36, 63, .16); pointer-events: none; white-space: nowrap; }
.ma-charttip strong { font-weight: 600; }
.ma-charttip .ma-tip-row { display: flex; align-items: center; gap: 6px; }
.ma-charttip .ma-tip-key { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }

/* ---------- Panel states / skeleton ---------- */
.ma-skeleton { background: linear-gradient(90deg, #eef1f5 25%, #f6f8fb 50%, #eef1f5 75%); background-size: 200% 100%; border-radius: 6px; color: transparent !important; animation: ma-shimmer 1.2s linear infinite; }
@keyframes ma-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ma-skeleton { animation: none; } .ma-refresh.spinning svg { animation: none; } }
.ma-panel-state { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; padding: 18px 16px; color: #5b6578; font-size: 10.5px; text-align: center; }
.ma-panel-state svg { width: 22px; height: 22px; }
.ma-panel-state.error svg { color: var(--red); }
.ma-panel-state.empty svg { color: #9aa3b5; }
.ma-panel-state .secondary-btn { width: auto; height: 26px; padding: 0 12px; font-size: 10.5px; }
.ma-panel-state details { font-size: 9.5px; color: var(--muted); }
.ma-panel-state details summary { cursor: pointer; }
.ma-panel-state code { font-size: 9.5px; }
.ma-panel-state.loading { align-items: stretch; }
.ma-skeleton-lines { display: grid; gap: 9px; width: 100%; }
.ma-skeleton-lines i { display: block; height: 11px; border-radius: 6px; }
.ma-skeleton-lines i:nth-child(2n) { width: 82%; }
.ma-skeleton-lines i:nth-child(3n) { width: 64%; }
.ma-skeleton-chart { width: 100%; height: 150px; }
.ma-skeleton-ring { width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; mask: radial-gradient(circle, transparent 52px, #000 53px); -webkit-mask: radial-gradient(circle, transparent 52px, #000 53px); }
.ma-skeleton-bars { display: grid; gap: 10px; width: 100%; }
.ma-skeleton-bars i { display: block; height: 14px; }
.ma-skeleton-bars i:nth-child(1) { width: 92%; } .ma-skeleton-bars i:nth-child(2) { width: 74%; } .ma-skeleton-bars i:nth-child(3) { width: 60%; } .ma-skeleton-bars i:nth-child(4) { width: 48%; } .ma-skeleton-bars i:nth-child(5) { width: 35%; } .ma-skeleton-bars i:nth-child(6) { width: 22%; }
[data-state="loading"] > .ma-panel-state, [data-state="empty"] > .ma-panel-state, [data-state="error"] > .ma-panel-state { display: flex; }
[data-state="loading"] > [data-panel-body], [data-state="empty"] > [data-panel-body], [data-state="error"] > [data-panel-body] { display: none !important; }
[data-state="empty"] > .panel-link, [data-state="error"] > .panel-link, [data-state="loading"] > .panel-link { visibility: hidden; }

.ma-stale { opacity: .88; }
.ma-updating { opacity: .6; transition: opacity .3s ease; }
.ma-muted { color: #8a93a6; }
/* In the page for anything that reads it, out of the way of anything that looks at it.
   Not `display:none`, which would take it out of the accessibility tree as well. */
.ma-sr-only { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; clip-path: inset(50%); white-space: nowrap; }
.ma-divider { height: 1px; margin: 8px 17px; background: var(--line-soft); }
.ma-link-btn { border: 0; background: transparent; padding: 0; color: var(--blue); font-weight: 600; cursor: pointer; }
.ma-link-btn:hover { text-decoration: underline; }
.ma-hint { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.ma-hint.ma-warn, .ma-warn { color: #b9601a; }
.ma-hint.ma-ok { color: #1b7a48; }
.ma-hint svg, .ma-error svg { width: 12px; height: 12px; vertical-align: -2px; }
.ma-error { margin: 4px 0 0; color: var(--red); font-size: 10.5px; }
.ma-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; border: 0; border-radius: 8px; background: #101725; color: #fff; padding: 0 16px; font-weight: 500; cursor: pointer; }
.ma-btn-primary:hover { background: #1c2638; }
.ma-btn-primary:disabled, .ma-btn-danger:disabled, .secondary-btn:disabled { opacity: .5; cursor: not-allowed; }
.ma-btn-danger { height: 34px; border: 0; border-radius: 8px; background: var(--red); color: #fff; padding: 0 16px; font-weight: 500; cursor: pointer; }
.ma-btn-fb { background: #1877f2; }
.ma-btn-fb:hover { background: #166fe0; }
.ma-btn-fb .meta-logo { width: 18px; height: 18px; flex-basis: 18px; background: #fff; color: #1877f2; font-size: 14px; }

/* ---------- Tabs (core, reused) ---------- */
.ma-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-soft); }
.ma-tabs [role="tab"] { position: relative; height: 30px; border: 0; background: transparent; padding: 0 10px; color: #5b6578; font-size: 11px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ma-tabs [role="tab"]:hover { color: var(--ink); }
.ma-tabs [role="tab"][aria-selected="true"] { color: var(--blue); font-weight: 600; }
.ma-tabs [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; border-radius: 2px; background: var(--blue); }
.ma-tabs [role="tab"]:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 6px; }

/* ---------- Combo chart panel ---------- */
#maComboPanel .chart-legend { margin: 8px 0 0 33px; }
.ma-line-key { width: 14px; height: 0; border-top: 2px solid var(--green); position: relative; }
.ma-line-key::after { content: ""; position: absolute; top: -4px; left: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
#maComboPanel .dash-key { border-top-color: #b6c2d6; }
#maComboPanel .line-chart-wrap { height: 148px; margin-top: 2px; }
/* The panel height is fixed, so the "Meta still adjusts the last days" note takes its room
   from the chart rather than falling off the bottom. */
#maComboPanel[data-note="on"] .line-chart-wrap { height: 130px; }
#maComboPanel canvas:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.ma-chart-note { margin: 1px 0 0; color: #8a93a6; font-size: 9px; line-height: 1.3; }
#maComboPanel .ma-panel-state { min-height: 170px; }
.ma-legend-none { color: var(--muted); }

/* ---------- Donut ---------- */
.ma-donut-controls { display: flex; gap: 6px; }
.ma-select-sm { width: 100px; min-width: 0; }
.ma-select-xs { width: 90px; min-width: 0; padding: 0 9px; }
/* Five rows, each two lines, inside a panel of a fixed height: the gap is what gives. */
.ma-legend-2col { gap: 4px; align-content: start; }
.ma-legend-2col li { grid-template-columns: 9px 1fr auto; cursor: pointer; border-radius: 5px; padding: 1px 3px; margin: -1px -3px; }
.ma-legend-2col li:hover, .ma-legend-2col li.ma-hl { background: #f3f6fc; }
.ma-legend-2col li:focus-visible { outline: 2px solid var(--blue); outline-offset: -1px; }
/* The middle track is `1fr`, which still means "at least as wide as the text" until the item
   is told otherwise — so a long campaign name pushed the whole legend past the panel and off
   the right of the page. Capping the label at a fixed 150px only moved the width it broke at. */
.ma-legend-2col li > span:nth-child(2) { min-width: 0; }
.ma-legend-2col li > span:nth-child(2) > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
#maDonutPanel .ma-panel-state { min-height: 180px; }
#maDonutTotal { font-variant-numeric: tabular-nums; }

/* ---------- Result cards ---------- */
.ma-result-logo { color: #3164c9; background: #eef3ff; }
#maResultCards { grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); }
/* Content decides the height. The fixed 201px was cutting the daily line off the bottom of
   every card the moment a title needed two lines. */
.channel-card.ma-result-card { height: auto; min-height: 201px; }
.channel-card.ma-result-card { position: relative; }
/* The title used to be clipped to make room for the chip beside it, which turned
   "ยอดสั่งซื้อ" into "ยอดสั่ง" — a heading that no longer says what it counts. It is smaller
   now and allowed two lines, and the chip has a column of its own so it never pushes. */
.channel-card.ma-result-card header {
  display: grid;
  grid-template-columns: 23px 1fr auto;
  align-items: start;
  gap: 8px;
}
.channel-card.ma-result-card header > strong {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  align-self: center;
}
.channel-card.ma-result-card header .ma-info { margin-left: 4px; }
.channel-card.ma-result-card .status-pill { margin: 0; align-self: center; }

/* One number the eye lands on, then the two that explain it. Three equal columns made all
   three look equally important, and at 240px wide none of them fitted. */
.ma-result-count { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.ma-result-count strong { font-size: 27px; line-height: 1; letter-spacing: -.5px; }
.ma-result-count small { color: #737c90; font-size: 12px; }

.ma-result-rows { display: grid; gap: 3px; margin: 9px 0 0; }
.ma-result-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ma-result-rows dt {
  color: #737c90;
  font-size: 11.5px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ma-result-rows dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ma-result-rows em { color: #697488; font-size: 11px; font-style: normal; font-weight: 400; margin-left: 3px; }
.ma-result-card.ma-muted .ma-result-count strong,
.ma-result-card.ma-muted .ma-result-rows dd { color: #8a93a6; }

/* Wider than the template's 1.2 / .9 / .5: two of these three columns are money. */
.channel-card.ma-result-card .channel-metrics.three-col { grid-template-columns: .75fr 1.1fr 1.15fr; }
.channel-card.ma-result-card.ma-muted .channel-metrics strong { color: #8a93a6; }
.channel-card.ma-result-card .ma-card-empty { margin: 4px 0 0; color: #8a93a6; font-size: 9px; }
.channel-card.ma-result-card .channel-bottom.ma-hidden { visibility: hidden; }
.channel-card.ma-result-card .ma-skeleton-lines { margin-top: 14px; }
.ma-all-actions { width: 100%; margin-top: -4px; }
.ma-result-card .status-pill:empty { display: none; }

/* ---------- Plugin container chrome ---------- */
.ma-table-panel { padding: 13px 17px 11px; }
.ma-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ma-table-toolbar h2 span { color: #737d91; font-weight: 400; }
.ma-table-panel > .ma-panel-state { min-height: 160px; }
#maBreakdownLeft > .ma-panel-state, #maTop5 > .ma-panel-state { min-height: 160px; }
.ma-panel-pad { padding: 14px 17px 0; }
.ma-funnel-panel > .ma-panel-state, .ma-allmetrics-panel > .ma-panel-state { min-height: 150px; }
/* The CSV button lost its panel header when this panel became one that opens on demand;
   the summary row belongs to the title and the chevron. */
.ma-allmetrics-tools { display: flex; justify-content: flex-end; padding: 10px 17px 0; }
details.panel > summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; list-style: none; cursor: pointer; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary h2 { margin: 0; font-size: 13px; }
details.panel > summary h2 span { color: #737d91; font-weight: 400; }
details.panel > summary svg { width: 15px; height: 15px; color: var(--muted); transition: transform .2s ease; }
details.panel[open] > summary svg { transform: rotate(180deg); }
details.panel > .ma-panel-state { min-height: 100px; }

/* ---------- Right rail ---------- */
.ma-conn-panel { height: auto; }
.ma-conn-panel .rail-heading { justify-content: space-between; }
.ma-conn-body { padding: 4px 17px 12px; }
.ma-conn-row { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line-soft); padding: 5px 0; }
.ma-conn-row:last-of-type { border-bottom: 0; }
.ma-conn-row > span:first-child { flex: 0 0 auto; color: #737c90; font-size: 9px; }
.ma-conn-row > div, .ma-conn-row > strong { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 11px; font-weight: 600; }
.ma-conn-row small { color: var(--muted); font-size: 9px; font-weight: 400; }
.ma-conn-row .ma-acc-line { display: flex; align-items: center; gap: 6px; }
.ma-conn-row .ma-acc-line .meta-logo { width: 16px; height: 16px; flex-basis: 16px; font-size: 12px; }
.ma-conn-row .ma-link-btn { font-size: 9.5px; }
.ma-conn-row .ma-warn { color: #b9601a; }
.ma-conn-row .ma-bad { color: var(--red); }
.ma-scope-list { display: flex; flex-direction: column; gap: 2px; font-size: 10px; font-weight: 500; }
.ma-scope-list span.no { color: #9aa3b5; }
.ma-scope-list span.req-missing { color: var(--red); }
.ma-usage-bar, .ma-cap-bar { position: relative; width: 110px; height: 6px; border-radius: 4px; background: #eef1f5; overflow: hidden; }
.ma-usage-bar i, .ma-cap-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--blue); }
.ma-usage-bar.orange i, .ma-cap-bar.orange i { background: var(--orange); }
.ma-usage-bar.red i, .ma-cap-bar.red i { background: var(--red); }
.ma-conn-actions { display: flex; gap: 8px; margin-top: 10px; }
.ma-conn-panel .panel-link { width: 100%; margin-top: 6px; }
.ma-conn-disconnected { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 0 6px; color: #5b6578; font-size: 11px; text-align: center; }
.ma-conn-disconnected svg { width: 26px; height: 26px; color: #9aa3b5; }
.ma-conn-disconnected .ma-btn-primary { margin-top: 4px; }
.ma-conn-panel .ma-skeleton-lines { padding: 12px 0; }
.ma-conn-panel .ma-change-account { display: none; }

.alerts-panel .alert-list { max-height: 255px; overflow-y: auto; }
.alerts-panel .alert-item button.ma-alert-btn { background: #fff0f0; color: var(--red); }
.alerts-panel .alert-item.orange .alert-top strong { color: var(--orange); }
.alerts-panel .alert-item.orange button { background: #fff3e5; color: #b9601a; }
.alerts-panel .alert-item p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.alerts-panel .ma-panel-state.empty svg { color: var(--green); }
.alerts-panel > .ma-panel-state { min-height: 200px; }

.ma-recs-panel { height: auto; min-height: 150px; }
.ma-recs-panel .rail-heading { justify-content: space-between; }
.ma-copy-summary { width: 28px; height: 28px; color: var(--muted); }
.ma-copy-summary svg { width: 15px; height: 15px; }
.ma-recs-panel .recommendation-list li { white-space: normal; }
.ma-recs-panel .recommendation-list li button { border: 0; background: transparent; padding: 0; text-align: left; font: inherit; cursor: pointer; }
.ma-recs-panel .recommendation-list li button:hover { color: var(--blue); }
.ma-recs-empty { margin: 9px 17px 4px; color: var(--muted); font-size: 9.5px; }
.ma-summary { margin: 0 17px 8px; color: #3c4557; font-size: 10.5px; line-height: 1.6; }
.ma-summary strong { font-weight: 700; }
.ma-summary .ma-good, .ma-summary .ma-bad { font-weight: 700; }
.ma-summary:empty { display: none; }
/* No paragraph yet (still loading, or /summary failed) means no rule above it either. */
.ma-recs-panel .ma-divider:has(+ .ma-summary:empty) { display: none; }

/* The template sized this column for "08:02". Rows here are often days old, so the column
   sizes to whatever it holds — "เมื่อวาน 18:10" or "28 ส.ค." — instead of wrapping. */
.activity-panel .activity-list li { grid-template-columns: 12px auto 1fr; }
.activity-panel .activity-list time { white-space: nowrap; }
.activity-panel .activity-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-panel .activity-icon.blue { color: var(--blue); }
.activity-panel .activity-icon.grey { color: #9aa3b5; }
.activity-panel li.ma-act-fail { cursor: pointer; }
.activity-panel > .ma-panel-state { min-height: 120px; }

/* ---------- Campaign table ---------- */
/* The panel is a grid item, and a grid item is "at least as wide as its content" unless it
   is told otherwise — without this the table pushes the whole column out over the rail
   instead of scrolling inside itself. */
.ma-table-panel { min-width: 0; }
.ma-table-toolbar { row-gap: 6px; }
.ma-table-toolbar h2 { margin-right: 2px; }
.ma-level-tabs { border-bottom: 0; }
.ma-level-tabs [role="tab"] span { color: #99a2b4; font-weight: 400; }
.ma-level-tabs [role="tab"][aria-selected="true"] span { color: var(--blue); }
.ma-level-tabs [role="tab"][aria-selected="true"]::after { bottom: 2px; }
/* Wraps rather than pushing the page sideways: the row holds a search box, two dropdowns and
   the gear, which is more than 420px of toolbar. */
.ma-table-tools { display: flex; flex-wrap: wrap; margin-left: auto; align-items: center; gap: 6px; }
.ma-table-search { width: 168px; min-width: 0; height: 28px; font-size: 10.5px; }
.ma-crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--muted); font-size: 10px; }
.ma-crumbs[hidden] { display: none; }
.ma-crumbs button { max-width: 150px; overflow: hidden; border: 0; background: transparent; padding: 0; color: var(--blue); font: inherit; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ma-crumbs button:hover { text-decoration: underline; }
.ma-crumbs button[disabled] { color: var(--ink); cursor: default; }
.ma-crumbs button[disabled]:hover { text-decoration: none; }
.ma-table-note { margin: 8px 0 0; color: #9a5c17; font-size: 10px; }
.ma-table-note[hidden] { display: none; }

.ma-table-scroll { overflow-x: auto; margin-top: 2px; }
.ma-table { margin-top: 8px; font-size: 11.5px; }
.ma-table th { position: sticky; top: 0; z-index: 2; background: #fff; padding-bottom: 4px; box-shadow: inset 0 -1px 0 var(--line-soft); }
.ma-table th button { display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.ma-table th button:hover { color: var(--ink); }
.ma-table th[aria-sort] button { color: var(--ink); font-weight: 600; }
.ma-table th .ma-caret { font-size: 8px; }
.ma-table th:first-child, .ma-table td:first-child { position: sticky; z-index: 1; left: 0; background: #fff; box-shadow: 1px 0 0 var(--line-soft); }
.ma-table th:first-child { z-index: 3; }
.ma-table tbody tr { border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.ma-table tbody tr:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.ma-table tbody tr:hover td { background: #f7f9fd; }
.ma-table tbody tr:hover td:first-child { background: #f7f9fd; }
.ma-table td { height: 34px; padding: 3px 6px 3px 2px; vertical-align: middle; }
.ma-table td:first-child { min-width: 250px; max-width: 340px; padding-right: 12px; }

.ma-name-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ma-name-text { min-width: 0; }
.ma-name-text strong { display: block; overflow: hidden; font-size: 11.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ma-name-text small { display: block; overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.ma-expand { display: grid; width: 16px; height: 16px; flex: 0 0 16px; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #8b95a8; cursor: pointer; }
.ma-expand:hover { background: #eef1f7; color: var(--ink); }
.ma-expand svg { width: 12px; height: 12px; transition: transform .15s ease; }
.ma-expand[aria-expanded="true"] svg { transform: rotate(90deg); }
.ma-expand-spacer { width: 16px; flex: 0 0 16px; }
.ma-row-lvl2 td:first-child { padding-left: 18px; }
.ma-row-lvl3 td:first-child { padding-left: 34px; }
.ma-thumb { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 5px; background: #eef1f5; object-fit: cover; }
.ma-thumb-blank { display: grid; place-items: center; color: #a8b1c2; }
.ma-thumb-blank svg { width: 13px; height: 13px; }
.ma-row-actions { display: none; gap: 2px; margin-left: auto; }
.ma-table tbody tr:hover .ma-row-actions, .ma-table tbody tr:focus-within .ma-row-actions { display: flex; }
.ma-row-actions button, .ma-row-actions a { display: grid; width: 22px; height: 22px; place-items: center; border: 0; border-radius: 5px; background: #eef1f7; color: #5b6578; cursor: pointer; }
.ma-row-actions button:hover, .ma-row-actions a:hover { background: var(--blue-soft); color: var(--blue); }
.ma-row-actions svg { width: 12px; height: 12px; }
.ma-flag { color: var(--red); }
.ma-flag svg { width: 12px; height: 12px; }

.ma-table .status-pill { display: inline-block; margin-left: 0; font-size: 10px; }
.status-pill.ma-pill--paused { background: #f0f2f6; color: #6b7386; }
.status-pill.ma-pill--review { background: #fff3e5; color: #b9601a; }
.status-pill.ma-pill--archived { border: 1px solid var(--line); background: #fff; color: #8b95a8; }
.ma-table .ma-delta { display: block; font-size: 9.5px; font-weight: 500; }
.ma-table .ma-chip-mini { display: inline-block; border-radius: 5px; background: #f2f5fa; color: #5b6578; padding: 1px 5px; font-size: 9.5px; font-weight: 500; }
.ma-row--nodelivery td { color: #9aa3b5; }
.ma-row--selected td, .ma-row--selected:hover td { background: var(--blue-soft) !important; }
.ma-table tbody td.ma-num-bad { color: var(--red); }
.ma-table canvas.ma-spark { display: block; width: 60px; height: 24px; margin-left: auto; }

.ma-table-foot { display: flex; align-items: center; gap: 10px; margin-top: 9px; color: var(--muted); font-size: 10px; }
.ma-table-foot .ma-more { width: auto; height: 24px; padding: 0 10px; font-size: 10px; }
.ma-table-foot-right { display: flex; margin-left: auto; align-items: center; gap: 10px; }
.ma-table-foot-right .ma-link-btn { font-size: 10px; }
.ma-table tfoot td { border-top: 1px solid var(--line); color: #3c4557; font-weight: 700; }

/* ---------- Drawer contents ---------- */
.ma-drawer-sub { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.ma-drawer-hero { display: flex; gap: 12px; margin-bottom: 12px; }
.ma-drawer-hero img { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 8px; background: #eef1f5; object-fit: cover; }
.ma-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.ma-stat { border: 1px solid var(--line-soft); border-radius: 9px; padding: 8px 10px; }
.ma-stat span { display: block; color: #737c90; font-size: 9.5px; }
.ma-stat strong { display: block; margin-top: 2px; font-size: 14px; }
.ma-stat .ma-delta { font-size: 9.5px; }
.ma-drawer h3 { margin: 14px 0 6px; font-size: 11px; }
.ma-drawer h3:first-child { margin-top: 0; }
.ma-def { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: 3px 10px; }
.ma-def dt { color: #737c90; font-size: 10px; }
.ma-def dd { margin: 0; font-size: 10.5px; font-weight: 500; overflow-wrap: anywhere; }
.ma-drawer-spark { display: block; width: 100%; height: 46px; margin: 4px 0 10px; }
.ma-drawer pre { max-height: 340px; overflow: auto; border: 1px solid var(--line-soft); border-radius: 8px; background: #fafbfe; padding: 10px; font-size: 10px; line-height: 1.5; }
.ma-copy-row { display: flex; align-items: center; gap: 6px; }
/* Bars for the drawer's audience tab. Plain elements, not the canvas the big panel uses: the
   drawer is not on screen when its tab is built, and a canvas measured at zero draws nothing. */
.ma-hbar-list { display: grid; gap: 9px; margin: 4px 0 14px; }
.ma-hbar-row { display: grid; gap: 3px; }
.ma-hbar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 11px; }
.ma-hbar-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-hbar-head strong { flex: none; font-variant-numeric: tabular-nums; }
.ma-hbar-track { overflow: hidden; height: 6px; border-radius: 3px; background: #eef1f5; }
.ma-hbar-track i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.ma-hbar-row small { color: var(--muted); font-size: 9.5px; }
/* The drawer shows the same 36 tiles as the panel, in a column a third of the width. */
.ma-drawer-body .ma-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
.ma-drawer-body .ma-stat { padding: 6px 8px; }
.ma-drawer-body .ma-stat strong { font-size: 12.5px; }
.ma-drawer-body .ma-stat.ma-warn-tile { border-color: #ffd9b8; background: #fff9f3; }
.ma-drawer-body .ma-stat.ma-warn-tile strong { color: #b9601a; }
.ma-drawer-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.ma-drawer-list li { display: grid; grid-template-columns: 12px auto 1fr; align-items: center; gap: 7px; font-size: 11px; }
.ma-drawer-list li time { color: #748097; white-space: nowrap; }
.ma-drawer-list.ma-drawer-recs li { display: flex; align-items: flex-start; gap: 6px; }
.ma-drawer-list svg { width: 12px; height: 12px; flex: 0 0 12px; }

/* ---------- The chart row above them ----------
   Same starvation, one row up. `.overview-row` is 1.46fr beside `minmax(335px, 1fr)`, and
   that floor binds until the row itself is about 824px — which, behind a 244px sidebar and a
   330px rail, needs a window near 1450px. Below that the donut takes its 335 and the combo
   chart, the wider of the two by design, is left with about 305: its header overflowed the
   panel by 53px and its line chart was drawn in half the room the donut had. So the two-up
   layout stays where there is room for it, and stacks where there is not. */
@media (max-width: 1449px) {
  body.ma-page .overview-row { grid-template-columns: minmax(0, 1fr); }
}
/* And the header wraps instead of overflowing, wherever it ends up narrow: a title with a
   filter beside it had neither a gap nor anywhere to go. */
body.ma-page .panel-header { flex-wrap: wrap; gap: 4px 10px; }

/* ---------- Breakdown, and Top 5 ---------- */
/* Two panels, not two halves of one. The overview page's `.bottom-overview` puts a 1.56fr
   column beside a `minmax(380px, 1fr)` one, and that floor wins whenever the row is tight:
   at a 1280px window the primary column is 640px, the right half took its 380, and the left
   half — the wider of the two by design — was left with 258px for eight tabs, two dropdowns
   and a chart. Side by side was never worth that; each one is a panel now, full width, and
   `.primary-column` already puts 10px between them. */
#maBreakdownLeft, #maTop5 { display: flex; min-width: 0; flex-direction: column; padding: 14px 17px 12px; }
#maBreakdownLeft > [data-panel-body], #maTop5 > [data-panel-body] { flex: 1; min-height: 0; }
.ma-bd-tools { display: flex; align-items: center; gap: 6px; }
/* Eight of them, and they wrap rather than scroll. Full width they fit on one line with
   nothing to spare, so the first window narrower than this turned them back into the
   sideways scrollbar that was reported — a second line is always readable and a scrollbar
   over eight short words never was. */
.ma-bd-tabs { flex-wrap: wrap; margin-top: 6px; }
.ma-bd-tabs [role="tab"] { padding: 0 8px; font-size: 10.5px; }
.ma-hbar-wrap { height: 178px; margin-top: 8px; }
.ma-insight { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; color: #5b6578; font-size: 10px; line-height: 1.5; }
.ma-insight[hidden] { display: none; }
.ma-insight svg { width: 12px; height: 12px; flex: 0 0 12px; margin-top: 1px; color: var(--orange); }
#maBreakdownLeft > .panel-link, #maTop5 > .panel-link { width: 100%; margin-top: 6px; }
.ma-bd-legend { display: flex; gap: 12px; margin-top: 4px; color: #5b6578; font-size: 9.5px; }
.ma-bd-legend span { display: flex; align-items: center; gap: 4px; }
.ma-bd-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }

.ma-top5-table { margin-top: 8px; font-size: 11.5px; }
.ma-top5-table td { height: 44px; padding: 3px 2px; vertical-align: middle; }
.ma-top5-table tr { border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.ma-top5-table tr:hover td { background: #f7f9fd; }
.ma-top5-table td:first-child { text-align: left; }
.ma-top5-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ma-top5-name .ma-thumb { width: 36px; height: 36px; flex-basis: 36px; }
.ma-top5-name div { min-width: 0; }
.ma-top5-name strong { display: block; overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.ma-top5-name small { display: block; overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.ma-top5-table td small { display: block; color: var(--muted); font-size: 9px; font-weight: 400; }

/* ---------- Customer path ---------- */
.ma-funnel { padding: 10px 17px 14px; }
.ma-funnel-step { margin-bottom: 9px; }
.ma-funnel-step:last-child { margin-bottom: 0; }
.ma-funnel-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 10.5px; }
.ma-funnel-top span { color: #5b6578; }
.ma-funnel-top strong { font-size: 12.5px; }
.ma-funnel-bar { height: 16px; margin-top: 3px; border-radius: 5px; background: #eef1f7; }
.ma-funnel-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #4b7bec, #6f9dfb); }
.ma-funnel-rate { margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.ma-funnel-step.ma-drop .ma-funnel-rate { color: #b9601a; font-weight: 600; }
.ma-funnel-step.ma-drop .ma-funnel-bar i { background: linear-gradient(90deg, #e8892f, #f5ae63); }
.ma-funnel-step.ma-missing { opacity: .62; }
.ma-funnel-step.ma-missing .ma-funnel-bar i { background: #c9d0dd; }
.ma-funnel-note { margin: 8px 0 0; color: var(--muted); font-size: 9.5px; }

/* ---------- All the numbers ---------- */
.ma-metric-groups { padding: 8px 17px 14px; }
.ma-metric-groups h3 { margin: 10px 0 6px; color: #737c90; font-size: 10px; font-weight: 600; }
.ma-metric-groups h3:first-child { margin-top: 2px; }
.ma-metric-groups .ma-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 0; }
.ma-metric-groups .ma-stat { padding: 6px 8px; }
.ma-metric-groups .ma-stat strong { font-size: 12.5px; }
.ma-metric-groups .ma-stat.ma-warn-tile { border-color: #ffd9b8; background: #fff9f3; }
.ma-metric-groups .ma-stat.ma-warn-tile strong { color: #b9601a; }

@media (max-width: 1180px) {
  .ma-metric-groups .ma-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ma-metric-groups .ma-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Creatives gallery ---------- */
.ma-creatives-panel[open] > summary, .ma-raw-panel[open] > summary,
.ma-allmetrics-panel[open] > summary { box-shadow: inset 0 -1px 0 var(--line-soft); }
.ma-creatives-head { display: flex; align-items: center; gap: 10px; padding: 8px 17px 0; }
.ma-format-tabs { flex: 1; border-bottom: 0; }
.ma-creatives-panel .ma-table-note { margin: 8px 17px 0; }
.ma-creatives-panel .ma-table-foot { margin: 0; padding: 10px 17px 13px; }
/* Column count from the width there actually is, not from the window: this grid sits inside
   the primary column, which is 764px next to the rail and half as wide again without it. Four
   fixed columns squeezed a label like "ลูกค้าเป้าหมาย (Leads)" into 46px. */
.ma-creatives-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; padding: 11px 17px 0; }
.ma-creative-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ma-creative-thumb { position: relative; aspect-ratio: 16 / 9; background: #eef1f5; }
.ma-creative-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ma-creative-thumb.ma-thumb-small { display: grid; place-items: center; }
.ma-creative-thumb.ma-thumb-small img { width: auto; height: 84px; max-width: 60%; object-fit: contain; border-radius: 5px; box-shadow: 0 1px 3px rgba(18, 34, 66, .18); }
/* Meta's thumbnail links expire. The card says so and offers the reload rather than leaving
   a broken-image glyph, which reads as "this ad is broken" instead of "this link is old". */
.ma-thumb-gone { display: grid; width: 100%; height: 100%; place-content: center; gap: 5px; justify-items: center; padding: 0 10px; color: #8b95a8; font-size: 9.5px; text-align: center; }
.ma-thumb-gone svg { width: 17px; height: 17px; }
.ma-thumb-gone button { font-size: 9.5px; }
.ma-creative-badges { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; align-items: center; justify-content: space-between; gap: 6px; pointer-events: none; }
.ma-creative-badges .ma-chip--tag { height: 17px; border-color: transparent; background: rgba(16, 23, 37, .72); color: #fff; }
.ma-creative-badges .status-pill { font-size: 9px; }
.ma-creative-body { display: flex; min-width: 0; flex: 1; flex-direction: column; padding: 9px 11px 11px; }
.ma-creative-body > strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11.5px; line-height: 1.35; }
.ma-creative-body > small { display: block; overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.ma-creative-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.ma-creative-metrics + .ma-creative-metrics { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line-soft); }
/* Labels wrap; values do not. The cell keeps its own height so a two-line label in one column
   does not push its number below the numbers beside it. */
.ma-creative-metrics > span { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; min-height: 36px; }
.ma-creative-metrics small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--muted); font-size: 9px; line-height: 1.3; }
.ma-creative-metrics strong { margin-top: 2px; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ma-creative-actions { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; }
.ma-creative-actions .secondary-btn { width: auto; height: 26px; padding: 0 10px; font-size: 10.5px; }
.ma-creative-actions .ma-link-btn { font-size: 10px; }

/* ---------- Raw explorer ---------- */
.ma-raw-form { padding: 4px 17px 0; }
.ma-raw-row { display: flex; flex-wrap: wrap; gap: 16px; }
.ma-raw-row .ma-field { min-width: 130px; }
.ma-raw-picker .ma-chip-picker { display: flex; flex-wrap: wrap; gap: 5px; }
.ma-chip-toggle { height: 20px; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 0 8px; color: #4d5669; font-family: ui-monospace, Consolas, monospace; font-size: 9.5px; cursor: pointer; }
.ma-chip-toggle:hover { border-color: #c9d3e6; background: #f9fbff; }
.ma-chip-toggle[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.ma-raw-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.ma-raw-actions .ma-hint { margin: 0; }
.ma-raw-actions .ma-btn-primary { height: 30px; padding: 0 14px; font-size: 11px; }
.ma-raw-result { padding: 12px 17px 14px; }
.ma-raw-result > .ma-hint { margin: 0; }
.ma-raw-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 7px; color: var(--muted); font-size: 10.5px; }
.ma-raw-head .ma-link-btn { font-size: 10px; }
.ma-raw-head .ma-warn { font-weight: 500; }
.ma-raw-scroll { overflow: auto; max-height: 430px; border: 1px solid var(--line-soft); border-radius: 8px; }
.ma-raw-table { width: max-content; min-width: 100%; margin: 0; border-collapse: collapse; font-size: 10.5px; }
.ma-raw-table th { position: sticky; z-index: 1; top: 0; background: var(--surface-soft); padding: 6px 9px; box-shadow: inset 0 -1px 0 var(--line-soft); color: #4d5669; font-family: ui-monospace, Consolas, monospace; font-size: 9.5px; font-weight: 600; text-align: left; white-space: nowrap; }
.ma-raw-table td { padding: 4px 9px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ma-raw-table td.ma-raw-text { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.ma-raw-table tbody tr:hover td { background: #f7f9fd; }
.ma-raw-error { border: 1px solid #f4cfd1; border-radius: 8px; background: #fff7f7; padding: 10px 12px; color: var(--red); font-size: 10.5px; line-height: 1.5; }
.ma-raw-error details { margin-top: 6px; color: #5b6578; }
.ma-raw-error summary { cursor: pointer; }
.ma-raw-error pre { overflow: auto; max-height: 160px; margin: 6px 0 0; color: #3c4557; font-size: 9.5px; white-space: pre-wrap; word-break: break-word; }

@media (max-width: 680px) {
  .ma-creatives-head { flex-direction: column; align-items: stretch; }
}

/* ---------- Toast ---------- */
.toast.ma-toast-err { border-color: #f4cfd1; }
.toast.ma-toast-err svg { color: var(--red); }

/* ---------- Connect hero ---------- */
.ma-connect-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 420px; gap: 20px; padding: 34px 32px; align-self: start; }
.ma-connect-hero[hidden] { display: none; }
.ma-hero-copy h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; line-height: 1.35; letter-spacing: -.3px; }
.ma-hero-copy h2 svg { width: 20px; height: 20px; color: var(--red); }
.ma-hero-copy p { margin: 10px 0 0; color: #3c4557; font-size: 12px; line-height: 1.6; }
.ma-hero-steps { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 11.5px; }
.ma-hero-steps li { display: flex; align-items: center; gap: 8px; }
.ma-hero-steps li span { color: var(--blue); font-weight: 700; }
.ma-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ma-hero-actions .secondary-btn { width: auto; height: 34px; padding: 0 14px; }
.ma-hero-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 18px !important; color: #6b7386 !important; font-size: 10px !important; }
.ma-hero-note svg { width: 12px; height: 12px; flex: 0 0 12px; margin-top: 2px; }
.ma-hero-preview { position: relative; display: grid; align-content: start; gap: 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: #fbfcfe; padding: 16px; overflow: hidden; filter: blur(1.5px); opacity: .9; pointer-events: none; }
.ma-hero-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 40%, #fff 100%); }
.ma-hp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ma-hp-row i { display: block; height: 52px; border-radius: 9px; background: linear-gradient(90deg, #eef1f5, #f6f8fb); }
.ma-hp-chart { grid-template-columns: 1.5fr 1fr; }
.ma-hp-chart i.wide { height: 120px; background: linear-gradient(180deg, #eaf0ff, #f6f8fb); }
.ma-hp-chart i.ring { height: 120px; border-radius: 50%; width: 120px; justify-self: center; background: conic-gradient(#c9d8ff 0 45%, #dfe6f5 45% 70%, #ffe1cf 70% 85%, #d3f1ee 85% 100%); mask: radial-gradient(circle, transparent 38px, #000 39px); -webkit-mask: radial-gradient(circle, transparent 38px, #000 39px); }
.ma-hp-lines { grid-template-columns: 1fr; gap: 8px; }
.ma-hp-lines i { height: 12px; }
.ma-hp-lines i:nth-child(2) { width: 80%; } .ma-hp-lines i:nth-child(3) { width: 60%; }
.ma-connect-hero .ma-radio-list { margin-top: 14px; }

/* hero states hide the dashboard body */
.dashboard[data-state="disconnected"] .kpi-grid, .dashboard[data-state="needs_account"] .kpi-grid, .dashboard[data-state="backend_down"] .kpi-grid,
.dashboard[data-state="disconnected"] .ma-metric-strip, .dashboard[data-state="needs_account"] .ma-metric-strip, .dashboard[data-state="backend_down"] .ma-metric-strip,
.dashboard[data-state="disconnected"] .primary-column, .dashboard[data-state="needs_account"] .primary-column, .dashboard[data-state="backend_down"] .primary-column { display: none; }

/* ---------- Radio lists / cards / fields (modal + hero) ---------- */
.ma-radio-list { display: grid; gap: 6px; }
.ma-radio-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 10px; border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; cursor: pointer; }
.ma-radio-row:hover { border-color: #c9d3e6; background: #f9fbff; }
.ma-radio-row.ma-selected { border-color: var(--blue); background: var(--blue-soft); }
.ma-radio-row .ma-radio-main { display: flex; min-width: 0; flex-direction: column; }
.ma-radio-row .ma-radio-main strong { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-radio-row .ma-radio-main small { color: var(--muted); font-size: 9.5px; }
.ma-radio-row .ma-radio-note { grid-column: 2 / -1; font-size: 9.5px; }
.ma-radio-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.ma-radio-card.ma-selected { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.ma-radio-card.ma-disabled { opacity: .6; }
.ma-radio-card > label { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; }
.ma-radio-card > p { margin: 6px 0 0; color: #3c4557; font-size: 10.5px; line-height: 1.5; }
.ma-radio-card .ma-btn-primary { margin-top: 10px; }
.ma-field { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 10.5px; }
.ma-field > span { display: flex; align-items: center; gap: 4px; color: #3c4557; font-weight: 500; }
.ma-field input[type="text"], .ma-field input[type="date"], .ma-field select, .ma-search-input { height: 32px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 0 10px; font-size: 11px; }
.ma-field input:focus, .ma-token:focus, .ma-search-input:focus, .ma-field select:focus { outline: 2px solid var(--blue-soft); border-color: var(--blue); }
.ma-token-wrap { position: relative; }
.ma-token { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: ui-monospace, Consolas, monospace; font-size: 11px; line-height: 1.4; resize: vertical; }
.ma-token.ma-masked { -webkit-text-security: disc; text-security: disc; }
.ma-token-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.ma-token-tools .plain-icon { width: 26px; height: 26px; }
.ma-token-tools .plain-icon svg { width: 15px; height: 15px; }
.ma-token-tools .ma-link-btn { font-size: 10px; }
.ma-help { margin-top: 10px; font-size: 10.5px; }
.ma-help summary { cursor: pointer; color: var(--blue); font-weight: 500; }
.ma-help p { margin: 6px 0 0; color: #3c4557; line-height: 1.5; }
.ma-progress { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 10.5px; color: var(--muted); }
.ma-progress li::before { content: "○ "; }
.ma-progress li.doing::before { content: "◐ "; color: var(--blue); }
.ma-progress li.done { color: #1b7a48; }
.ma-progress li.done::before { content: "✓ "; }
.ma-progress li.fail { color: var(--red); }
.ma-progress li.fail::before { content: "✕ "; }
.ma-token-report { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 3px; margin-top: 10px; border: 1px solid #bfe8cf; border-radius: 8px; background: #f3fbf6; padding: 8px 12px; font-size: 10.5px; }
.ma-token-report span:nth-child(odd) { color: var(--muted); }
.ma-fieldset { border: 1px solid var(--line-soft); border-radius: 9px; margin: 10px 0 0; padding: 8px 12px 10px; display: grid; gap: 5px; font-size: 11px; }
.ma-fieldset legend { padding: 0 4px; color: #3c4557; font-size: 10.5px; font-weight: 600; }
.ma-fieldset label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ma-fieldset.ma-inline { grid-template-columns: repeat(4, auto); justify-content: start; column-gap: 16px; }
.ma-fieldset.ma-inline .ma-hint { grid-column: 1 / -1; margin: 0; }
.ma-switch { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 11px; cursor: pointer; }
.ma-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ma-switch-track { position: relative; width: 32px; height: 18px; border-radius: 10px; background: #d5dbe6; transition: background .2s ease; }
.ma-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.ma-switch input:checked + .ma-switch-track { background: var(--purple); }
.ma-switch input:checked + .ma-switch-track::after { transform: translateX(14px); }
.ma-switch input:focus-visible + .ma-switch-track { outline: 2px solid var(--blue); }
.ma-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11px; }
.ma-edit-status { display: grid; gap: 4px; border: 1px solid var(--line-soft); border-radius: 9px; padding: 10px 12px; font-size: 10.5px; }
.ma-edit-status .ma-conn-actions { flex-wrap: wrap; }
.ma-edit-status .secondary-btn { width: auto; height: 28px; padding: 0 10px; font-size: 10.5px; }

/* ---------- Modal ---------- */
.ma-scrim { position: fixed; z-index: 90; inset: 0; background: rgba(14, 19, 31, .32); }
.ma-scrim[hidden] { display: none; }
.ma-modal { position: fixed; z-index: 95; top: 50%; left: 50%; display: flex; width: 560px; max-width: 92vw; max-height: 90vh; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 24px 60px rgba(20, 36, 63, .25); transform: translate(-50%, -50%); }
.ma-modal[hidden] { display: none; }
.ma-modal-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); padding: 14px 18px; }
.ma-modal-head h2 { margin: 0; font-size: 15px; }
.ma-modal-close svg, .ma-drawer-close svg { width: 15px; height: 15px; }
.ma-stepper { display: flex; gap: 4px; border-bottom: 1px solid var(--line-soft); padding: 6px 12px 0; overflow-x: auto; }
.ma-stepper [role="tab"] { position: relative; height: 32px; border: 0; background: transparent; padding: 0 10px; color: #5b6578; font-size: 11px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ma-stepper [role="tab"][aria-selected="true"] { color: var(--blue); font-weight: 600; }
.ma-stepper [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; right: 8px; bottom: 0; left: 8px; height: 2px; background: var(--blue); border-radius: 2px; }
.ma-stepper [role="tab"]:disabled { opacity: .5; cursor: default; }
.ma-stepper .ma-step-no { font-weight: 700; }
.ma-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 18px 16px; font-size: 11px; }
.ma-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line-soft); padding: 12px 18px; }
.ma-modal-foot .secondary-btn { width: auto; height: 34px; padding: 0 14px; }
.ma-busy { display: flex; align-items: center; gap: 6px; margin-right: auto; color: var(--muted); font-size: 10.5px; }
.ma-busy svg { width: 14px; height: 14px; animation: ma-spin 1s linear infinite; }
.ma-modal[data-busy="true"] .ma-modal-foot button, .ma-modal[data-busy="true"] .ma-stepper [role="tab"] { pointer-events: none; opacity: .6; }
.ma-confirm { width: 380px; padding: 18px 18px 12px; }
.ma-confirm p { margin: 0 0 14px; font-size: 12px; line-height: 1.6; }
.ma-confirm .ma-modal-foot { border-top: 0; padding: 0; }

/* ---------- Drawer ---------- */
.ma-drawer { position: fixed; z-index: 95; top: 0; right: 0; bottom: 0; display: flex; width: 420px; max-width: 100vw; flex-direction: column; border-left: 1px solid var(--line); background: #fff; box-shadow: -12px 0 40px rgba(20, 36, 63, .18); }
.ma-drawer[hidden] { display: none; }
.ma-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line-soft); padding: 14px 16px; }
.ma-drawer-title { min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.4; }
.ma-drawer-title small { display: block; color: var(--muted); font-size: 10px; font-weight: 400; }
.ma-drawer-tabs { padding: 0 8px; overflow-x: auto; }
.ma-drawer-tabs[hidden] { display: none; }
.ma-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 20px; font-size: 11px; }
.ma-drawer-fallback { color: var(--muted); text-align: center; padding: 30px 0; }
/* The full breakdown is thirteen columns of numbers — 833px of them — and this drawer was
   built at 420px to hold one ad's details. "ดูตารางเต็ม" opened four columns and a scrollbar,
   which is not the whole table. Only this mode widens: the entity and list modes are
   paragraphs and a picture, and those read better narrow. */
.ma-drawer[data-mode="breakdown"] { width: min(960px, 100vw); }
.ma-drawer-table-wrap { overflow-x: auto; margin-top: 10px; }

/* ---------- Column picker ---------- */
.ma-cols-gear { width: 28px; height: 28px; flex: none; }
.ma-cols-gear svg { width: 14px; height: 14px; }
.ma-cols-gear[aria-expanded="true"] { border-color: var(--blue); color: var(--blue); }
.ma-colpop { position: fixed; z-index: 70; width: 268px; border: 1px solid var(--line); border-radius: 11px; background: #fff; padding: 12px 4px 10px 14px; box-shadow: 0 14px 38px rgba(20, 36, 63, .18); font-size: 11px; }
.ma-colpop[hidden] { display: none; }
.ma-colpop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-right: 10px; }
.ma-colpop-head span { color: var(--muted); font-size: 9.5px; }
.ma-colpop-list { overflow-y: auto; max-height: 46vh; margin-top: 8px; padding-right: 10px; }
.ma-colpop-list h4 { margin: 10px 0 4px; color: #737c90; font-size: 9.5px; font-weight: 600; }
.ma-colpop-list h4:first-child { margin-top: 0; }
.ma-colpop-check { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
.ma-colpop-check input { flex: none; }
.ma-colpop > .ma-colpop-check { margin-top: 8px; padding: 8px 10px 0 0; border-top: 1px solid var(--line-soft); }
.ma-colpop-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-right: 10px; }
.ma-colpop-actions .ma-link-btn { font-size: 10px; }
.ma-colpop-actions .ma-link-btn[hidden] { display: none; }
.ma-colpop-actions .secondary-btn { width: auto; height: 26px; margin-left: auto; padding: 0 14px; font-size: 10.5px; }

/* ---------- Date popover ---------- */
.ma-datepop { position: fixed; z-index: 96; width: 320px; max-width: 92vw; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 14px 40px rgba(20, 36, 63, .18); padding: 14px; font-size: 11px; }
.ma-datepop[hidden] { display: none; }
.ma-datepop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ma-datepop-grid .ma-field { margin-top: 0; }
.ma-datepop-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ma-chip-btn { height: 24px; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 0 10px; font-size: 10px; cursor: pointer; }
.ma-chip-btn:hover { border-color: var(--blue); color: var(--blue); }
.ma-datepop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.ma-datepop-actions .secondary-btn { width: auto; height: 32px; padding: 0 12px; }
.ma-datepop-actions .ma-btn-primary { height: 32px; }
.select-menu button.ma-current { color: var(--blue); background: #f5f7fb; }
.select-menu button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* ---------- Row highlight (table plugin rows) ---------- */
.ma-row-hl { animation: ma-flash 2s ease; }
@keyframes ma-flash { 0%, 60% { background: #fff6d6; } 100% { background: transparent; } }

/* ---------- Responsive ---------- */
@media (max-width: 1320px) {
  .ma-metric-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); height: auto; }
  .ma-chip { height: 46px; }
  .ma-chip:nth-child(4n + 1) { border-left: 0; }
  .ma-chip:nth-child(n + 5) { border-top: 1px solid var(--line-soft); }
}

@media (max-width: 1180px) {
  body.ma-page .right-rail { grid-template-columns: repeat(2, 1fr); }
  body.ma-page .alerts-panel, body.ma-page .recommendations-panel, body.ma-page .activity-panel, body.ma-page .ma-conn-panel { height: auto; min-height: 300px; }
  body.ma-page .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ma-kpi-multi { grid-column: span 2; }
  .ma-connect-hero { grid-template-columns: 1fr; }
  .ma-hero-preview { display: none; }
}

@media (max-width: 900px) {
  .ma-tabs { overflow-x: auto; }
  .ma-drawer { width: 100vw; }
  .ma-modal { max-width: 92vw; }
  .ma-datepop { top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100%; max-width: 100%; border-radius: 14px 14px 0 0; }
  body.ma-page .right-rail { grid-template-columns: 1fr; }
  body.ma-page .sales-panel { height: 270px; }
  #maComboPanel .line-chart-wrap { height: 160px; }
  .ma-connect-hero { padding: 24px 20px; }
}

@media (max-width: 680px) {
  body.ma-page .filter-actions .period-filter { display: flex; width: 110px; }
  body.ma-page .filter-actions .compare-btn { display: flex; width: 34px; padding: 0; justify-content: center; }
  body.ma-page .compare-btn.ma-toggle svg { display: block; }
  body.ma-page .compare-btn.ma-toggle .ma-compare-text { display: none; }
  body.ma-page .ma-account-switch { display: none; }
  .ma-conn-panel .ma-change-account { display: inline-flex; }
  .ma-table-search { flex: 1 1 120px; width: auto; }
  .ma-metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ma-chip:nth-child(n) { border-left: 0; border-top: 0; }
  .ma-chip:nth-child(2n) { border-left: 1px solid var(--line-soft); }
  .ma-chip:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }
  .ma-modal { top: 0; left: 0; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; transform: none; }
  .ma-modal-foot { position: sticky; bottom: 0; background: #fff; }
  .ma-confirm { top: 50%; left: 50%; width: 92vw; height: auto; border-radius: 14px; transform: translate(-50%, -50%); }
  .ma-conn-pill .ma-sync { display: none; }
  .ma-fieldset.ma-inline { grid-template-columns: repeat(2, auto); }
  /* The three-column rule below is written as `body.ma-page .kpi-grid`, which outranks the
     template's own narrow-width rules and kept winning all the way down to 420. */
  body.ma-page .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ma-page .kpi-card { min-height: 105px; }
  body.ma-page .filter-actions { max-width: calc(100vw - 170px); }
  .ma-kpi-multi { grid-column: span 2; }
  .ma-donut-controls { flex-direction: column; }
}

@media (max-width: 420px) {
  body.ma-page .kpi-grid { grid-template-columns: minmax(0, 1fr); }
  body.ma-page .kpi-card { min-height: 94px; }
  .ma-kpi-multi { grid-column: auto; }
  .ma-kpi-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ma-hero-actions { flex-direction: column; }
  .ma-hero-actions button { width: 100%; }
  .ma-banner { flex-wrap: wrap; }
  .ma-banner-actions { width: 100%; justify-content: flex-end; }
  body.ma-page .filter-actions { max-width: calc(100vw - 150px); }
}