/* "Measure this brand every week?" as a picture (monitor-status-ui.js, new_ui):
   AI icons by the title, three fact tiles, the next step in one line and, when
   the report on screen is from another AI, two plain lines. */
body.new-ui #confirmModal .modal:has(.mon-cf) { max-width: 560px !important; }
body.new-ui #confirmModal h2:has(.mon-cf-icons) { display: flex; align-items: center; gap: 14px; font-size: 20px !important; line-height: 1.25; }
body.new-ui #confirmModal .mon-cf-icons { display: inline-flex; flex: none; }
body.new-ui #confirmModal .mon-cf-ai { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--ui-paper-2); box-shadow: 0 0 0 2px var(--ui-card); }
body.new-ui #confirmModal .mon-cf-icons.head .mon-cf-ai + .mon-cf-ai { margin-left: -10px; }
body.new-ui #confirmModal .mon-cf-ai.sm { width: 28px; height: 28px; border-radius: 8px; }
body.new-ui #confirmModal .mon-cf-icons:not(.head) .mon-cf-ai + .mon-cf-ai { margin-left: -8px; }
body.new-ui #confirmModal .mon-cf { display: block; text-align: left; }
body.new-ui #confirmModal .mon-cf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body.new-ui #confirmModal .mon-cf-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-paper-2); min-width: 0; }
body.new-ui #confirmModal .mon-cf-ico { color: var(--ui-ink-3); display: inline-flex; margin-bottom: 4px; }
body.new-ui #confirmModal .mon-cf-val { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--ui-ink); }
body.new-ui #confirmModal .mon-cf-lbl { font-size: 12.5px; line-height: 1.35; color: var(--ui-ink-2); }
body.new-ui #confirmModal .mon-cf-next { display: block; margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--ui-ink); }
body.new-ui #confirmModal .mon-cf-lines { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding: 14px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-card); }
body.new-ui #confirmModal .mon-cf-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 14.5px; color: var(--ui-ink); }
body.new-ui #confirmModal .mon-cf-txt { flex: 1 1 0; min-width: 160px; }
body.new-ui #confirmModal .mon-cf-choose, body.new-ui #confirmModal .mon-cf-choose:hover:not(:disabled) {
  flex: none; margin-left: auto; width: auto; height: 36px; padding: 0 14px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 500;
  background: var(--ui-card); color: var(--ui-ink); border: 1px solid var(--ui-line); filter: none; cursor: pointer; }
body.new-ui #confirmModal .mon-cf-choose:hover:not(:disabled) { border-color: var(--ui-ink-3); background: var(--ui-hover); }
@media (max-width: 520px) {
  body.new-ui #confirmModal .mon-cf-tiles { grid-template-columns: 1fr; }
  body.new-ui #confirmModal .mon-cf-tile { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 0; padding: 12px 14px; }
  body.new-ui #confirmModal .mon-cf-ico { grid-row: 1 / 3; margin: 0; }
  body.new-ui #confirmModal .mon-cf-choose { margin-left: 0; }
}

/* Confirm: breathing room under the title now that it carries the AI icons. */
body.new-ui #confirmModal h2:has(.mon-cf-icons) { margin-bottom: 16px; }

/* On: the persistent card under the dashboard header (monitor-status-ui.js duiMonOn). */
body.new-ui .dui-mo { border-color: var(--ui-line); border-left: 1px solid var(--ui-line); display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin: 0 0 18px; }
body.new-ui .dui-mo .mon-cf-icons { display: inline-flex; flex: none; }
body.new-ui .dui-mo .mon-cf-ai { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--ui-paper-2); box-shadow: 0 0 0 2px var(--ui-card); }
body.new-ui .dui-mo .mon-cf-ai + .mon-cf-ai { margin-left: -10px; }
body.new-ui .dui-mo-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; font-size: 13.5px; color: var(--ui-ink-2); }
body.new-ui .dui-mo-txt b { font-weight: 600; font-size: 15.5px; color: var(--ui-ink); letter-spacing: -.01em; }
body.new-ui .dui-mo-dot { display: inline-block; width: 8px; height: 8px; margin: 0 9px 1px 0; border-radius: 50%; background: var(--dui-mon-good, var(--ui-good)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dui-mon-good, var(--ui-good)) 18%, transparent); }
body.new-ui .dui-mo-dot.warn { background: var(--ui-warn); box-shadow: 0 0 0 4px var(--ui-warn-soft); }
body.new-ui .dui-mo-warn { color: var(--ui-warn); }
body.new-ui .dui-mo-act { display: flex; flex: none; gap: 8px; align-items: center; }
body.new-ui .dui-mo-act .dui-mon { position: relative; }
@media (max-width: 760px) {
  body.new-ui .dui-mo { flex-wrap: wrap; padding: 14px; margin-bottom: 12px; }
  body.new-ui .dui-mo-txt { flex: 1 1 calc(100% - 70px); }
  body.new-ui .dui-mo-act { flex: 1 1 100%; }
  body.new-ui .dui-mo-act > * { flex: 1; }
  body.new-ui .dui-mo-act .ui-btn { width: 100%; }
}
@media (max-width: 760px) {
  body.new-ui .dui-mo-act .dui-mon { min-width: 0; }
  body.new-ui .dui-mo-act .dui-mon .ui-btn { width: 100%; }
}
@media (max-width: 760px) {
  body.new-ui .dui-mo-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body.new-ui .dui-mo-act > * { flex: none; min-width: 0; }
  body.new-ui .dui-mo-act .dui-mon { display: block; position: relative; }
  body.new-ui .dui-mo-act .ui-btn { width: 100%; }
}