/* Meeting Reports — bulk upload + review modal (mr-upload.js).
 *
 * Owns .mr-up-* (the chrome, the four tabs, the queue) and .mr-pv-* (the review
 * cards), plus .mr-drop and .mr-seg which the modal introduces. Colours come off
 * the shared tokens (--card-bg, --border-color, --text-*) so light and dark both
 * follow theme.css; every literal is mirrored in the dark block at the bottom.
 */

/* ── chrome ────────────────────────────────────────────────────────────────── */
/* Above the feedback FAB (.pa-fb-btn, z 99999), which otherwise sits on top of
   the Save button once the footer goes full width on mobile. A blocking dialog
   has to own the top of the stack. */
.mr-up-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 100000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.mr-up-modal {
  background: var(--card-bg, #fff); border-radius: 16px;
  width: min(980px, calc(100vw - 32px)); max-height: min(88vh, 900px);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}
.mr-up-hd {
  flex-shrink: 0; display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.mr-up-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-primary, #1e293b); flex-shrink: 0; }
.mr-up-close {
  margin-left: auto; flex-shrink: 0; border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; width: 32px; height: 32px; border-radius: 8px;
  color: var(--text-muted, #94a3b8);
}
.mr-up-close:hover { background: var(--hover-bg, #f1f5f9); color: var(--text-primary, #1e293b); }

.mr-up-steps { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.mr-up-step { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted, #94a3b8); white-space: nowrap; }
.mr-up-step + .mr-up-step::before { content: '›'; margin-right: 6px; color: var(--text-muted, #cbd5e1); }
.mr-up-step-n {
  width: 18px; height: 18px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 10px; font-weight: 800;
  background: var(--hover-bg, #f1f5f9); color: var(--text-muted, #94a3b8);
}
.mr-up-step.is-on { color: var(--text-primary, #1e293b); }
.mr-up-step.is-on .mr-up-step-n { background: #2563eb; color: #fff; }
.mr-up-step.is-done .mr-up-step-n { background: #16a34a; color: #fff; }

.mr-up-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; }

.mr-up-foot {
  flex-shrink: 0; border-top: 1px solid var(--border-color, #e2e8f0);
  padding: 12px 20px; display: flex; align-items: center; gap: 10px;
}
.mr-up-msg { font-size: 12.5px; color: var(--text-secondary, #64748b); min-width: 0; }
.mr-up-msg.is-err { color: #b91c1c; font-weight: 600; }
.mr-up-msg.is-ok { color: #15803d; font-weight: 600; }
.mr-up-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-muted, #94a3b8); white-space: nowrap; }
.mr-up-count.is-warn { color: #b45309; }

/* ── buttons ───────────────────────────────────────────────────────────────── */
.mr-up-btn {
  border-radius: 8px; padding: 8px 16px; font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; border: 1px solid transparent; flex-shrink: 0;
}
.mr-up-btn-ghost { background: var(--hover-bg, #f1f5f9); color: var(--text-primary, #334155); border-color: var(--border-color, #e2e8f0); }
.mr-up-btn-ghost:hover { background: #e2e8f0; }
.mr-up-btn-primary { background: #2563eb; color: #fff; }
.mr-up-btn-primary:hover { background: #1d4ed8; }
.mr-up-btn:disabled { opacity: .5; cursor: default; }
/* Accepted card still missing a required value: Save stays clickable so it can
   scroll the offender into view, but it reads as not-yet-ready. */
.mr-up-btn-primary.is-blocked { background: #94a3b8; }
.mr-up-btn-primary.is-blocked:hover { background: #64748b; }
.mr-up-mini {
  border: 1px solid var(--border-color, #e2e8f0); background: var(--card-bg, #fff);
  color: var(--text-secondary, #475569); border-radius: 7px; padding: 4px 10px;
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center;
}
.mr-up-mini:hover { background: var(--hover-bg, #f1f5f9); }
.mr-up-mini-warn { border-color: #fcd34d; background: #fffbeb; color: #b45309; }
.mr-up-mini-warn:hover { background: #fef3c7; }

/* ── tabs ──────────────────────────────────────────────────────────────────── */
.mr-up-tabs {
  display: flex; gap: 6px; border-bottom: 1px solid var(--border-color, #e2e8f0);
  margin-bottom: 16px; flex-wrap: wrap;
}
.mr-up-tab {
  border: 0; background: none; padding: 9px 16px; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--text-muted, #94a3b8); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mr-up-tab:hover { color: var(--text-primary, #1e293b); }
.mr-up-tab.is-on { color: #2563eb; border-bottom-color: #2563eb; }
.mr-up-tab:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; border-radius: 6px; }
.mr-up-pane[hidden] { display: none; }
.mr-up-pane { display: flex; flex-direction: column; gap: 14px; }

/* ── dropzone ──────────────────────────────────────────────────────────────── */
.mr-drop {
  border: 2px dashed var(--border-color, #cbd5e1); border-radius: 14px;
  padding: 28px 20px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 6px; background: var(--card-bg, #fff);
  transition: border-color .15s, background .15s;
}
.mr-drop.is-dragover { border-color: #2563eb; background: rgba(37, 99, 235, .06); }
.mr-drop-ic { font-size: 26px; line-height: 1; color: #2563eb; }
.mr-drop-t { font-size: 14px; font-weight: 700; color: var(--text-primary, #1e293b); }
.mr-drop-s { font-size: 12.5px; color: var(--text-muted, #94a3b8); }
.mr-drop .mr-up-btn { margin-top: 8px; }
.mr-up-hidden-file { display: none; }

/* ── AI toggle ─────────────────────────────────────────────────────────────── */
.mr-up-ai {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  border: 1px solid #e7e3fb; background: linear-gradient(180deg, #fbfaff, #fff);
  border-radius: 11px; padding: 11px 14px; cursor: pointer;
}
.mr-up-ai input { width: 15px; height: 15px; accent-color: #7c3aed; cursor: pointer; }
.mr-up-ai-t { font-size: 13px; font-weight: 600; color: var(--text-primary, #1e293b); }
.mr-up-ai-s { font-size: 11.5px; color: var(--text-muted, #94a3b8); margin-left: auto; }

/* ── context fields ────────────────────────────────────────────────────────── */
.mr-up-ctx { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mr-up-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mr-up-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--text-muted, #94a3b8); }
.mr-up-input, .mr-up-select {
  width: 100%; box-sizing: border-box; padding: 8px 11px; font: inherit; font-size: 13px;
  border: 1px solid var(--border-color, #d1d5db); border-radius: 8px;
  background: var(--card-bg, #fff); color: var(--text-primary, #1a1a1a);
}
.mr-up-input:focus, .mr-up-select:focus, .mr-up-textarea:focus {
  outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.mr-up-alt { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── audio ─────────────────────────────────────────────────────────────────── */
.mr-up-rec-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 0 6px; }
.mr-up-rec {
  width: 78px; height: 78px; border-radius: 999px; border: 3px solid #fecaca;
  background: #fff5f5; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .12s, border-color .12s;
}
.mr-up-rec:hover { transform: scale(1.04); }
/* Circle-to-square morph on transform + border-radius only. Animating width and
   height here would force layout on every frame of the morph. */
.mr-up-rec-dot { width: 26px; height: 26px; border-radius: 999px; background: #dc2626; transition: border-radius .15s, transform .15s; }
.mr-up-rec.is-recording { border-color: #dc2626; animation: mr-up-pulse 1.4s ease-in-out infinite; }
.mr-up-rec.is-recording .mr-up-rec-dot { border-radius: 5px; transform: scale(.846); }
@keyframes mr-up-pulse { 50% { box-shadow: 0 0 0 10px rgba(220, 38, 38, .12); } }
.mr-up-rec-time { font-size: 22px; font-weight: 800; font-feature-settings: "tnum"; color: var(--text-primary, #1e293b); }
.mr-up-rec-hint { font-size: 12.5px; color: var(--text-muted, #94a3b8); text-align: center; max-width: 460px; line-height: 1.5; }
.mr-up-playback { display: flex; flex-direction: column; gap: 10px; }
.mr-up-audio { width: 100%; }
.mr-up-playback-acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── text ──────────────────────────────────────────────────────────────────── */
.mr-up-textarea {
  width: 100%; box-sizing: border-box; min-height: 240px; resize: vertical;
  padding: 12px 14px; font: inherit; font-size: 13.5px; line-height: 1.55;
  border: 1px solid var(--border-color, #d1d5db); border-radius: 10px;
  background: var(--card-bg, #fff); color: var(--text-primary, #1a1a1a);
}
.mr-up-tarow { display: flex; }
.mr-up-chars { margin-left: auto; font-size: 11.5px; color: var(--text-muted, #94a3b8); }
.mr-up-hint { border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; padding: 11px 13px; background: #f8fafc; }
.mr-up-hint-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--text-muted, #94a3b8); margin-bottom: 6px; }
.mr-up-hint-pre {
  margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-secondary, #475569);
  white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── file queue ────────────────────────────────────────────────────────────── */
.mr-up-queue { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.mr-up-file {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border: 1px solid var(--border-color, #e2e8f0); border-radius: 11px; background: var(--card-bg, #fff);
}
.mr-up-file.is-error { border-color: #fca5a5; background: #fff5f5; }
.mr-up-file-ic { flex-shrink: 0; font-size: 16px; color: #2563eb; }
.mr-up-file-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mr-up-file-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mr-up-file-nm { font-size: 13px; font-weight: 600; color: var(--text-primary, #1e293b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-up-file-sz { flex-shrink: 0; font-size: 11px; color: var(--text-muted, #94a3b8); }
.mr-up-file-st { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-secondary, #64748b); flex-wrap: wrap; }
.mr-up-file.is-error .mr-up-file-st { color: #b91c1c; }
.mr-up-file-n { color: var(--text-muted, #94a3b8); }
.mr-up-file-x {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; border: 0;
  background: none; color: var(--text-muted, #94a3b8); font-size: 17px; line-height: 1; cursor: pointer;
}
.mr-up-file-x:hover { background: var(--hover-bg, #f1f5f9); color: #b91c1c; }
.mr-up-bar { height: 5px; border-radius: 999px; background: var(--hover-bg, #f1f5f9); overflow: hidden; }
.mr-up-bar-fill { height: 100%; width: 0; background: #2563eb; border-radius: 999px; transition: width .18s ease; }

.mr-up-badge, .mr-up-badge-ai {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
}
.mr-up-badge { background: #dcfce7; color: #15803d; }
.mr-up-badge.is-skip { background: #f1f5f9; color: #475569; }
.mr-up-badge-ai { background: #ede9fe; color: #6d28d9; }

/* Standing condition rather than a transient failure: transcription is off on
   this server. Calm, not red, and it carries a way forward. */
.mr-up-notice {
  border: 1px solid var(--border-color, #e2e8f0); background: #f8fafc;
  border-radius: 11px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px;
}
.mr-up-notice-t { font-size: 13px; font-weight: 600; color: var(--text-primary, #1e293b); line-height: 1.5; }
.mr-up-notice-s { font-size: 12.5px; color: var(--text-secondary, #64748b); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mr-up-sum-c.is-skip .mr-up-sum-n { color: var(--text-muted, #94a3b8); }
.mr-up-spin {
  width: 13px; height: 13px; border-radius: 999px; flex-shrink: 0;
  border: 2px solid #ddd6fe; border-top-color: #7c3aed; display: inline-block;
  animation: mr-up-spin .7s linear infinite;
}
@keyframes mr-up-spin { to { transform: rotate(360deg); } }

/* ── working panel ─────────────────────────────────────────────────────────── */
.mr-up-working {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px;
  border: 1px solid #e7e3fb; border-radius: 12px; background: linear-gradient(180deg, #fbfaff, #fff);
}
.mr-up-working-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mr-up-working-nm { font-size: 13px; font-weight: 700; color: var(--text-primary, #1e293b); }
.mr-up-working-el { font-size: 11.5px; font-weight: 700; font-feature-settings: "tnum"; color: #6d28d9; }
.mr-up-working-msg { font-size: 12px; color: var(--text-secondary, #475569); line-height: 1.5; }

/* ── summary strip ─────────────────────────────────────────────────────────── */
.mr-up-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.mr-up-sum-c {
  flex: 1 1 0; min-width: 104px; background: #f8fafc; border: 1px solid var(--border-color, #eef0f2);
  border-radius: 11px; padding: 11px 13px; display: flex; flex-direction: column; gap: 3px;
}
.mr-up-sum-n { font-size: 22px; font-weight: 800; line-height: 1; font-feature-settings: "tnum"; color: var(--text-primary, #1a1a1a); }
.mr-up-sum-l { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; color: var(--text-muted, #666); }

/* ── preview cards ─────────────────────────────────────────────────────────── */
.mr-pv-list { display: flex; flex-direction: column; gap: 14px; }
.mr-pv-card {
  border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px;
  background: var(--card-bg, #fff); overflow: hidden;
}
.mr-pv-card.has-missing { border-color: #fcd34d; }
.mr-pv-card.is-flash { animation: mr-pv-flash 1.4s ease; }
@keyframes mr-pv-flash { 0%, 100% { box-shadow: none; } 25% { box-shadow: 0 0 0 4px rgba(245, 158, 11, .28); } }

.mr-pv-hd {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--border-color, #f1f5f9);
  background: #f8fafc;
}
.mr-pv-ord { font-size: 11px; font-weight: 800; color: var(--text-muted, #94a3b8); flex-shrink: 0; }
.mr-pv-src { display: flex; align-items: baseline; gap: 7px; min-width: 0; flex: 1 1 160px; }
.mr-pv-file { font-size: 12.5px; font-weight: 700; color: var(--text-primary, #1e293b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-pv-sheet { font-size: 11px; color: var(--text-muted, #94a3b8); flex-shrink: 0; }
.mr-pv-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mr-pv-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
}
.mr-pv-badge[hidden] { display: none; }
.mr-pv-badge.is-ai { background: #ede9fe; color: #6d28d9; }
.mr-pv-badge.is-missing { background: #fef3c7; color: #b45309; }
.mr-pv-badge-ai { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; background: #ede9fe; color: #6d28d9; }

.mr-seg { display: inline-flex; border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.mr-seg-btn { border: 0; background: var(--card-bg, #fff); padding: 5px 13px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; color: var(--text-secondary, #444); }
.mr-seg-btn + .mr-seg-btn { border-left: 1px solid var(--border-color, #e5e7eb); }
.mr-seg-btn:hover { background: var(--hover-bg, #f8fafc); }
.mr-seg-btn.active { background: #16a34a; color: #fff; }
.mr-seg-btn.active:last-child { background: #64748b; }

.mr-pv-dup {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: #fffbeb; border-bottom: 1px solid #fde68a;
}
.mr-pv-dup-t { font-size: 12.5px; font-weight: 600; color: #92400e; flex: 1 1 220px; min-width: 0; }

.mr-pv-err {
  padding: 9px 14px; font-size: 12.5px; font-weight: 600; color: #b91c1c;
  background: #fff5f5; border-bottom: 1px solid #fecaca;
}
/* Parser-flagged review reasons. Informational, so it stays quieter than the
   amber duplicate banner and never reads as a blocker. */
.mr-pv-review {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px;
  background: #f5f3ff; border-bottom: 1px solid #ddd6fe;
}
.mr-pv-review-k {
  flex-shrink: 0; background: #ede9fe; color: #6d28d9; border-radius: 5px;
  padding: 1px 7px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; margin-top: 2px;
}
.mr-pv-review-l { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mr-pv-review-i { font-size: 12.5px; color: #5b21b6; line-height: 1.45; }

.mr-pv-fields { padding: 14px; }
.mr-pv-raw { border-top: 1px solid var(--border-color, #f1f5f9); }
.mr-pv-raw > summary { padding: 9px 14px; font-size: 12px; font-weight: 700; color: var(--text-secondary, #64748b); cursor: pointer; list-style: none; }
.mr-pv-raw > summary::-webkit-details-marker { display: none; }
.mr-pv-raw > summary::before { content: '▸ '; color: var(--text-muted, #94a3b8); }
.mr-pv-raw[open] > summary::before { content: '▾ '; }
.mr-pv-rawtext {
  margin: 0; padding: 0 14px 14px; font-size: 11.5px; line-height: 1.6;
  color: var(--text-secondary, #475569); white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; max-height: 220px; overflow: auto;
}

/* Rejected: the card collapses to a greyed one-liner with an Undo. */
.mr-pv-collapsed { display: none; align-items: center; gap: 10px; padding: 10px 14px; }
.mr-pv-collapsed-t { font-size: 12.5px; color: var(--text-muted, #94a3b8); flex: 1 1 auto; min-width: 0; }
.mr-pv-card.is-rejected { background: var(--hover-bg, #f8fafc); }
.mr-pv-card.is-rejected .mr-pv-fields,
.mr-pv-card.is-rejected .mr-pv-raw { display: none; }
.mr-pv-card.is-rejected .mr-pv-collapsed { display: flex; }
/* A duplicate is rejected by default, so the amber line IS the explanation and
   has to survive the collapse. It already carries Import anyway, which makes
   the generic collapsed row redundant. */
.mr-pv-card.is-rejected.has-dup .mr-pv-collapsed { display: none; }
.mr-pv-card.is-rejected .mr-pv-hd { opacity: .6; border-bottom: 0; }

/* ── fallback field list (only when MRFields has not loaded) ───────────────── */
.mr-up-ff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mr-up-ff-row { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mr-up-ff-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--text-muted, #94a3b8); }
.mr-up-ff-i {
  width: 100%; box-sizing: border-box; padding: 8px 11px; font: inherit; font-size: 13px;
  border: 1px solid var(--border-color, #d1d5db); border-radius: 8px;
  background: var(--card-bg, #fff); color: var(--text-primary, #1a1a1a);
}
.mr-up-ff-i:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.mr-up-ff-row.is-missing .mr-up-ff-i { border: 1px dashed #f59e0b; background: #fffbeb; }
.mr-up-ff-row.is-missing .mr-up-ff-l::after { content: ' needs a value'; color: #b45309; text-transform: none; letter-spacing: 0; }

/* ── toast ─────────────────────────────────────────────────────────────────── */
.mr-up-toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 100001;
  display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 36px));
  padding: 12px 14px; border-radius: 12px; background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e2e8f0); box-shadow: 0 14px 40px rgba(15, 23, 42, .18);
}
.mr-up-toast.is-ok { border-color: #86efac; background: #f0fdf4; }
.mr-up-toast-t { font-size: 13px; font-weight: 600; color: var(--text-primary, #1e293b); min-width: 0; }
.mr-up-toast-btn { border: 0; background: #2563eb; color: #fff; border-radius: 7px; padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.mr-up-toast-x { border: 0; background: none; color: var(--text-muted, #94a3b8); font-size: 17px; line-height: 1; cursor: pointer; }

/* ── responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .mr-up-hd { flex-wrap: wrap; }
  .mr-up-steps { order: 3; width: 100%; }
  .mr-up-close { order: 2; }
}
@media (max-width: 640px) {
  .mr-up-overlay { padding: 0; }
  .mr-up-modal { width: 100vw; max-height: 100vh; height: 100dvh; border-radius: 0; }
  .mr-up-body { padding: 14px; }
  .mr-up-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
  .mr-up-tab { padding: 10px 6px; }
  .mr-up-ctx, .mr-up-ff { grid-template-columns: 1fr; }
  .mr-up-ai-s { margin-left: 0; flex-basis: 100%; }
  .mr-up-sum-c { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .mr-pv-hd { gap: 7px; }
  .mr-seg { width: 100%; }
  .mr-seg-btn { flex: 1; }
  /* Reason on its own line so the two actions stay side by side underneath. */
  .mr-pv-dup-t { flex: 1 1 100%; }
  .mr-up-foot { flex-wrap: wrap; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .mr-up-count { margin-left: 0; flex: 1 1 100%; }
  .mr-up-foot .mr-up-btn, .mr-up-foot .mr-btn { flex: 1 1 100%; }
  .mr-up-toast { right: 10px; left: 10px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); max-width: none; }
}

/* ═══ dark mode (theme.css mechanism: html[data-theme="dark"]) ═══════════════ */
html[data-theme="dark"] .mr-up-overlay { background: rgba(0, 0, 0, .62); }
html[data-theme="dark"] .mr-up-modal { box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .mr-up-btn-ghost:hover { background: #475569; }
html[data-theme="dark"] .mr-up-mini-warn { border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .14); color: #fcd34d; }
html[data-theme="dark"] .mr-up-mini-warn:hover { background: rgba(245, 158, 11, .22); }
html[data-theme="dark"] .mr-up-count.is-warn { color: #fcd34d; }
html[data-theme="dark"] .mr-up-msg.is-err { color: #fca5a5; }
html[data-theme="dark"] .mr-up-msg.is-ok { color: #86efac; }

html[data-theme="dark"] .mr-up-tab.is-on { color: #60a5fa; border-bottom-color: #60a5fa; }
html[data-theme="dark"] .mr-up-step.is-on .mr-up-step-n { background: #60a5fa; color: #0b1220; }
html[data-theme="dark"] .mr-up-step.is-done .mr-up-step-n { background: #4ade80; color: #0b1220; }

html[data-theme="dark"] .mr-drop { background: rgba(255, 255, 255, .03); border-color: #475569; }
html[data-theme="dark"] .mr-drop.is-dragover { border-color: #60a5fa; background: rgba(96, 165, 250, .12); }
html[data-theme="dark"] .mr-drop-ic { color: #60a5fa; }

html[data-theme="dark"] .mr-up-ai,
html[data-theme="dark"] .mr-up-working {
  background: rgba(124, 58, 237, .10); border-color: rgba(167, 139, 250, .30);
}
html[data-theme="dark"] .mr-up-working-el { color: #c4b5fd; }

html[data-theme="dark"] .mr-up-hint,
html[data-theme="dark"] .mr-up-sum-c { background: rgba(255, 255, 255, .04); border-color: #334155; }

html[data-theme="dark"] .mr-up-rec { background: rgba(220, 38, 38, .14); border-color: rgba(248, 113, 113, .45); }
html[data-theme="dark"] .mr-up-rec.is-recording { border-color: #f87171; }
html[data-theme="dark"] .mr-up-rec-dot { background: #f87171; }

html[data-theme="dark"] .mr-up-file { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .mr-up-file.is-error { background: rgba(239, 68, 68, .12); border-color: rgba(248, 113, 113, .42); }
html[data-theme="dark"] .mr-up-file.is-error .mr-up-file-st { color: #fca5a5; }
html[data-theme="dark"] .mr-up-file-ic { color: #60a5fa; }
html[data-theme="dark"] .mr-up-file-x:hover { background: #334155; color: #fca5a5; }
html[data-theme="dark"] .mr-up-bar { background: #334155; }
html[data-theme="dark"] .mr-up-bar-fill { background: #60a5fa; }

html[data-theme="dark"] .mr-up-badge { background: rgba(34, 197, 94, .16); color: #86efac; }
html[data-theme="dark"] .mr-up-badge.is-skip { background: rgba(148, 163, 184, .16); color: #cbd5e1; }
html[data-theme="dark"] .mr-up-notice { background: rgba(255, 255, 255, .04); border-color: #334155; }
html[data-theme="dark"] .mr-up-badge-ai,
html[data-theme="dark"] .mr-pv-badge-ai,
html[data-theme="dark"] .mr-pv-badge.is-ai { background: rgba(139, 92, 246, .20); color: #c4b5fd; }
html[data-theme="dark"] .mr-pv-badge.is-missing { background: rgba(245, 158, 11, .18); color: #fcd34d; }
html[data-theme="dark"] .mr-up-spin { border-color: rgba(167, 139, 250, .35); border-top-color: #a78bfa; }

html[data-theme="dark"] .mr-pv-card { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .mr-pv-card.has-missing { border-color: rgba(245, 158, 11, .45); }
html[data-theme="dark"] .mr-pv-card.is-flash { animation: mr-pv-flash-dark 1.4s ease; }
@keyframes mr-pv-flash-dark { 0%, 100% { box-shadow: none; } 25% { box-shadow: 0 0 0 4px rgba(252, 211, 77, .34); } }
html[data-theme="dark"] .mr-pv-hd { background: rgba(255, 255, 255, .04); border-bottom-color: #334155; }
html[data-theme="dark"] .mr-pv-raw { border-top-color: #334155; }
html[data-theme="dark"] .mr-pv-card.is-rejected { background: rgba(255, 255, 255, .015); }

html[data-theme="dark"] .mr-pv-err { background: rgba(239, 68, 68, .14); border-bottom-color: rgba(248, 113, 113, .38); color: #fca5a5; }
html[data-theme="dark"] .mr-pv-review { background: rgba(139, 92, 246, .12); border-bottom-color: rgba(167, 139, 250, .30); }
html[data-theme="dark"] .mr-pv-review-k { background: rgba(139, 92, 246, .22); color: #c4b5fd; }
html[data-theme="dark"] .mr-pv-review-i { color: #c4b5fd; }
html[data-theme="dark"] .mr-pv-dup { background: rgba(245, 158, 11, .14); border-bottom-color: rgba(245, 158, 11, .34); }
html[data-theme="dark"] .mr-pv-dup-t { color: #fcd34d; }

html[data-theme="dark"] .mr-seg-btn { background: #1e293b; }
html[data-theme="dark"] .mr-seg-btn:hover { background: #334155; }
html[data-theme="dark"] .mr-seg-btn.active { background: #16a34a; color: #f0fdf4; }
html[data-theme="dark"] .mr-seg-btn.active:last-child { background: #475569; color: #e2e8f0; }

html[data-theme="dark"] .mr-up-ff-row.is-missing .mr-up-ff-i { border-color: #f59e0b; background: rgba(245, 158, 11, .10); }
html[data-theme="dark"] .mr-up-ff-row.is-missing .mr-up-ff-l::after { color: #fcd34d; }

html[data-theme="dark"] .mr-up-toast.is-ok { background: rgba(34, 197, 94, .14); border-color: rgba(74, 222, 128, .40); }
html[data-theme="dark"] .mr-up-toast-btn { background: #60a5fa; color: #0b1220; }