/* ===== assets/midia-paga.css =====
   Módulo de Mídia Paga, portado do arquivo standalone midia-paga.html sem
   mudança de UI/UX. Only three changes vs. the legacy <style> block:
   1) `:root{...}` and the legacy `body{...}` rule are scoped to `.mp-app`
      instead of the document root — marketing.css already defines its own
      --ink/--line on :root with different values, so keeping these
      unscoped would silently repaint the whole shell (Marketing module
      included) the moment this stylesheet loaded after it. The module's own
      accent (`--navy`, #17333f) was renamed from `--teal` to avoid colliding
      with marketing.css's unrelated `--teal` (#00A896) by name.
   2) the bare `h1,h2,h3,.display` rule is scoped to `.mp-app` too, for the
      same reason (shell has its own headings outside this module).
   3) `.field`, `.modal-actions` and `.toast` are renamed to `.mp-field`,
      `.mp-modal-actions` and `.mp-toast` — the only three legacy class names
      that collide with rules already defined in marketing.css. Every other
      legacy class name (`.topbar`, `.stage-tab`, `.card`, `.ajustes-panel`,
      `.modal`, etc.) is kept exactly as in the legacy file — confirmed via
      grep against marketing.css/shell.css, no other collisions exist.
   `*{box-sizing:border-box}` and `html,body{margin:0;padding:0}` were dropped
   entirely: marketing.css already applies `* { box-sizing: border-box; }`
   globally and shell.css already zeroes out `body{margin:0}`.
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

.mp-app{
  --sand: #f5eddd;
  --sand-deep: #ecdfc6;
  --dark-green: #1c361d;
  --dark-green-soft: #0a4a24;
  --navy: #17333f;
  --navy-soft: #24485770;
  --ink: #1c2420;
  --muted: #6b6f6a;
  --card: #ffffff;
  --line: #e2d8c2;

  --st-novo-bg: #fdecab; --st-novo-fg: #7a5b00; --st-novo-line: #d9a90a;
  --st-ajustes-bg: #ffd7ad; --st-ajustes-fg: #8a4600; --st-ajustes-line: #e07b1f;
  --st-aprov-bg: #d7f0d2; --st-aprov-fg: #067647; --st-aprov-line: #379a3c;
  --st-enviado-bg: #e6edef; --st-enviado-fg: #17333f; --st-enviado-line: #17333f;
  --st-noar-bg: #cfe8fa; --st-noar-fg: #175f8a; --st-noar-line: #2f8fc4;
  --st-pausado-bg: #efefec; --st-pausado-fg: #6b6f6a; --st-pausado-line: #8b8f89;
  --st-reprov-bg: #fbeae8; --st-reprov-fg: #a83c2f; --st-reprov-line: #a83c2f;
}
.mp-app{
  background:#ffffff;
  color:var(--ink);
  font-family:'Inter', system-ui, sans-serif;
  min-height:100vh;
}
.mp-app h1, .mp-app h2, .mp-app h3, .mp-app .display{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:0.2px;
}

/* ---------- loading placeholder (matches index.html's initial mp-app markup) ---------- */
.mp-loading, .loading-note{
  padding:40px 28px; color:var(--muted); font-size:13.5px;
}

/* ---------- conflict banner (new — optimistic-concurrency UI, no legacy equivalent) ---------- */
.mp-conflict-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:#fbeae8;
  color:#a83c2f;
  border:1px solid #a83c2f40;
  border-radius:8px;
  padding:8px 10px;
  margin-bottom:8px;
  font-size:11.5px;
  line-height:1.4;
}
.mp-conflict-banner span{flex:1;}
.mp-conflict-refresh{
  flex-shrink:0;
  border:1px solid #a83c2f;
  background:#fff;
  color:#a83c2f;
  cursor:pointer;
  font-size:11px;
  font-weight:700;
  padding:5px 10px;
  border-radius:20px;
}
.mp-conflict-refresh:hover{background:#a83c2f; color:#fff;}

/* ---------- header ---------- */
.topbar{
  background:#f2ecdd;
  color:#1c361d;
  padding:22px 28px 20px;
  border-bottom:2px solid var(--line);
}
.topbar-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.brand-block{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand-eyebrow{
  font-size:11px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:#1c361d;
  opacity:0.65;
  margin:0 0 4px;
  font-weight:600;
}
.topbar h1{
  margin:0;
  font-size:var(--fs-page-title);
  line-height:1.1;
  color:#1c361d;
  text-transform:lowercase;
}
.top-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
}
.btn{
  font-family:'Inter',sans-serif;
  font-weight:var(--fw-bold);
  font-size:var(--fs-btn);
  border-radius:999px;
  padding:11px 20px;
  cursor:pointer;
  transition:transform .08s ease, opacity .15s ease, background .15s ease;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.btn:active{transform:scale(0.97);}
.top-actions .btn{border-radius:10px;}
.btn-accent{
  background:var(--navy);
  color:#f5eddd;
  border:1.5px solid var(--navy);
}
.btn-accent:hover{opacity:0.9;}
.btn-ghost{
  background:#ffffff;
  color:var(--ink);
  border:1.5px solid var(--line);
}
.btn-ghost:hover{background:#faf6ec;}
.btn-newcreative{
  background:#ffffff;
  color:var(--ink);
  border:1.5px solid var(--line);
}
.btn-newcreative:hover{background:#faf6ec;}

/* ---------- how-to panel ---------- */
.howto{
  display:none;
  background:#ffffff;
  border-bottom:1px solid var(--line);
  padding:18px 28px;
}
.howto.open{display:block;}
.howto-grid{
  display:grid;
  grid-template-columns:1.1fr 0.8fr 1.1fr;
  gap:24px;
  max-width:1500px;
}
.howto h3{margin:0 0 8px; font-size:16px; text-transform:lowercase;}
.howto p{margin:0 0 10px; font-size:13.5px; line-height:1.5; color:var(--ink);}
.legend-row{display:flex; align-items:center; gap:8px; margin-bottom:7px; font-size:13px;}
.legend-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
@media (max-width:1100px){ .howto-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:720px){ .howto-grid{grid-template-columns:1fr;} }

/* ---------- filter bar ---------- */
.filterbar{
  display:flex;
  gap:10px;
  align-items:center;
  padding:14px 28px;
  flex-wrap:wrap;
  background:#ffffff;
}
.filterbar input[type="text"], .filterbar select{
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  padding:8px 12px;
  border-radius:7px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
}
.filterbar input[type="text"]{min-width:220px; flex:1; max-width:320px;}
.count-pill{
  margin-left:auto;
  font-size:12.5px;
  color:var(--muted);
}

/* ---------- stage tabs (horizontal) ---------- */
.stage-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:4px 28px 18px;
}
.stage-tab{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  border-radius:12px;
  border:1.5px solid var(--line);
  background:#ffffff;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
  flex-shrink:0;
}
.stage-tab:hover{background:#faf6ec;}
.stage-tab.active{background:var(--sand); border-color:currentColor;}
.stage-tab .stage-title{
  font-size:12.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
  white-space:nowrap;
}
.stage-tab .stage-count{
  font-size:11.5px;
  font-weight:700;
  background:#00000010;
  border-radius:20px;
  padding:3px 10px;
  color:var(--muted);
}
.stage-tab.dragover-file{
  background:#c9d9cf80;
  outline:2px dashed var(--dark-green-soft);
  outline-offset:-4px;
}

.stage-panel{
  padding:8px 28px 40px;
}
.stage-panel.dragover-file{
  background:#c9d9cf40;
  outline:2px dashed var(--dark-green-soft);
  outline-offset:-6px;
  border-radius:12px;
}
.stage-panel-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.stage-panel-head .stage-title{
  font-size:16px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
}
.stage-panel-head .stage-count{
  font-size:12px;
  font-weight:700;
  background:#00000010;
  border-radius:20px;
  padding:3px 11px;
  color:var(--muted);
}
.stage-empty{
  font-size:12.5px;
  color:var(--muted);
  text-align:center;
  padding:32px 8px;
  border:1.5px dashed var(--line);
  border-radius:10px;
}
.stage-none{
  font-size:13px;
  color:var(--muted);
  text-align:center;
  padding:40px 8px;
}
.stage-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:14px;
}

/* ---------- "em ajustes" stage: stacked rows with side panel ---------- */
.ajustes-rows{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.ajustes-row{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.ajustes-row .card{
  flex:0 0 300px;
  max-width:300px;
}
@media (max-width:760px){
  .ajustes-row{flex-direction:column;}
  .ajustes-row .card{flex:1 1 auto; max-width:none; width:100%;}
}
.ajustes-panel{
  flex:1;
  min-width:260px;
  background:#ffffff;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ajustes-panel-title{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
  color:var(--st-ajustes-fg);
}
.ajustes-history{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:220px;
  overflow-y:auto;
}
.ajustes-entry{
  background:#fbf9f3;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
}
.ajustes-entry.done{
  background:#f0f4f0;
  opacity:0.75;
}
.ajustes-entry.done .ae-text{
  text-decoration:line-through;
  color:var(--muted);
}
.ae-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
}
.ae-check{
  display:flex;
  align-items:flex-start;
  gap:6px;
  cursor:pointer;
  min-width:0;
}
.ae-check-input{
  margin-top:2px;
  flex-shrink:0;
  cursor:pointer;
}
.ae-actions{
  display:flex;
  gap:3px;
  flex-shrink:0;
}
.ae-edit-btn, .ae-remove-btn{
  border:none;
  background:transparent;
  cursor:pointer;
  padding:2px 4px;
  border-radius:5px;
  line-height:1;
}
.ae-edit-btn:hover, .ae-remove-btn:hover{background:#00000012;}
.ajustes-entry .ae-meta{
  font-size:10.5px;
  color:var(--muted);
  font-weight:700;
}
.ajustes-entry .ae-text{
  font-size:12.5px;
  white-space:pre-wrap;
  line-height:1.4;
  color:var(--ink);
  padding-left:20px;
}
.ae-text-input{
  width:100%;
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  line-height:1.4;
  padding:6px 8px;
  border-radius:6px;
  border:1px solid var(--navy);
  background:#fff;
  resize:vertical;
  min-height:50px;
}
.ajustes-empty-hist{
  font-size:11.5px;
  color:var(--muted);
  font-style:italic;
}
.ajustes-form{
  display:flex;
  flex-direction:column;
  gap:6px;
  border-top:1px solid var(--line);
  padding-top:10px;
}
.ajustes-form input, .ajustes-form textarea{
  width:100%;
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  padding:7px 9px;
  border-radius:7px;
  border:1px solid var(--line);
  background:#fdfbf7;
}
.ajustes-form textarea{min-height:56px; resize:vertical;}
.ajustes-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.btn-approve{
  background:#1f7a45;
  color:#fff;
  border:1.5px solid #1f7a45;
}
.btn-approve:hover{opacity:0.9;}

/* history shown at the bottom of a card once it has ajustes entries */
.card-hist{
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed var(--line);
}
.card-hist-title{
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
  color:var(--st-ajustes-fg);
  margin-bottom:5px;
}
.card-hist-entry{
  font-size:11px;
  margin-bottom:5px;
  line-height:1.35;
}
.card-hist-entry .ae-meta{
  font-weight:700;
  color:var(--muted);
  font-size:10px;
}

/* status accents per stage tab */
.stage-tab.stage-novo{color:var(--st-novo-fg);}
.stage-tab.stage-ajustes{color:var(--st-ajustes-fg);}
.stage-tab.stage-aprovado{color:var(--st-aprov-fg);}
.stage-tab.stage-enviado{color:var(--st-enviado-fg);}
.stage-tab.stage-noar{color:var(--st-noar-fg);}
.stage-tab.stage-pausado{color:var(--st-pausado-fg);}
.stage-tab.stage-reprovado{color:var(--st-reprov-fg);}
.stage-panel-head.stage-novo{color:var(--st-novo-fg);}
.stage-panel-head.stage-ajustes{color:var(--st-ajustes-fg);}
.stage-panel-head.stage-aprovado{color:var(--st-aprov-fg);}
.stage-panel-head.stage-enviado{color:var(--st-enviado-fg);}
.stage-panel-head.stage-noar{color:var(--st-noar-fg);}
.stage-panel-head.stage-pausado{color:var(--st-pausado-fg);}
.stage-panel-head.stage-reprovado{color:var(--st-reprov-fg);}

/* ---------- card ---------- */
.card{
  background:var(--card);
  border-radius:10px;
  padding:11px 12px;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
  border-left:4px solid var(--line);
  cursor:grab;
}
.card.mp-card-dragging{opacity:0.4;}
.card.mp-card-over{box-shadow:0 -2px 0 var(--navy), 0 1px 2px rgba(0,0,0,0.06);}
.cover-wrap{
  margin:-11px -12px 8px -12px;
  overflow:hidden;
}
.card-cover{
  display:block;
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:7px 7px 0 0;
}
.card-cover-placeholder{
  width:100%;
  height:260px;
  border-radius:7px 7px 0 0;
  background:var(--sand-deep);
  color:var(--muted);
  font-size:11px;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 10px;
}
.card .cf-nome{
  display:block;
  width:100%;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:13.5px;
  line-height:1.25;
  margin:0 0 6px;
  color:var(--ink);
  background:transparent;
  border:1px solid transparent;
  border-radius:5px;
  padding:2px 4px;
}
.card .cf-nome:hover{background:#fbf9f3; border-color:var(--line);}
.card .cf-nome:focus{outline:none; background:#fff; border-color:var(--navy);}
.badges{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:7px;}
.card-delete-btn{
  border:none;
  background:transparent;
  cursor:pointer;
  padding:3px 5px;
  border-radius:5px;
  line-height:1;
  color:var(--muted);
  margin-left:auto;
}
.card-delete-btn:hover{background:rgba(168,60,47,0.12); color:#a83c2f;}
.badge{
  font-size:10.5px;
  font-weight:600;
  padding:2px 7px;
  border-radius:20px;
  background:var(--sand-deep);
  color:var(--dark-green);
}
select.badge{
  border:none;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  -webkit-appearance:auto;
  appearance:auto;
}
input.badge{
  border:1px solid transparent;
  font-family:'Inter',sans-serif;
  width:92px;
  max-width:120px;
}
input.badge:hover{border-color:var(--line);}
input.badge:focus{outline:none; border-color:var(--navy); background:#fff;}
.badge-resp{font-weight:700;}
.badge-resp-agencia{background:#1c1f1a; color:#f5eddd;}
.badge-resp-aya{background:#fbdce8; color:#a3164f;}
.badge-resp-neutral{background:var(--sand-deep); color:var(--muted);}
.cf-status{
  font-weight:700;
  background:var(--navy-soft);
  color:var(--navy);
}
.cf-status-novo{background:#fdecab; color:#7a5b00;}
.cf-status-ajustes{background:#ffd7ad; color:#8a4600;}
.cf-status-aprovado{background:#d7f0d2; color:#067647;}
.cf-status-noar{background:#cfe8fa; color:#175f8a;}

.card-front-fields{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:8px;
}
.cf-field{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.cf-label{
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
  color:var(--muted);
}
.cf-legenda{
  width:100%;
  font-family:'Inter',sans-serif;
  font-size:12px;
  line-height:1.4;
  color:var(--ink);
  background:#fbf9f3;
  border:1px solid var(--line);
  border-radius:7px;
  padding:6px 8px;
  resize:vertical;
  min-height:90px;
}
.cf-legenda:focus, .cf-link-input:focus{
  outline:none;
  border-color:var(--navy);
  background:#fff;
}
.cf-link-row{
  display:flex;
  align-items:center;
  gap:6px;
}
.cf-link-anchor{
  flex:1;
  min-width:0;
  font-family:'Inter',sans-serif;
  font-size:11.5px;
  color:var(--navy);
  text-decoration:underline;
  word-break:break-all;
  background:#fbf9f3;
  border:1px solid var(--line);
  border-radius:7px;
  padding:6px 8px;
}
.cf-link-anchor.empty{
  color:var(--muted);
  text-decoration:none;
  font-style:italic;
  cursor:pointer;
}
.cf-edit-btn{
  flex-shrink:0;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  line-height:1;
  padding:6px 7px;
  border-radius:7px;
  transition:background .15s ease;
}
.cf-edit-btn:hover{background:#faf6ec;}
.cf-link-input{
  flex:1;
  width:100%;
  font-family:'Inter',sans-serif;
  font-size:11.5px;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--navy);
  border-radius:7px;
  padding:6px 8px;
}
.card .c-foot{
  font-size:11px;
  color:var(--muted);
  border-top:1px solid #eee;
  padding-top:10px;
  padding-bottom:2px;
  min-height:34px;
  display:block;
  line-height:1.5;
}

/* status left-border per card */
.bl-novo{border-left-color:var(--st-novo-line);}
.bl-ajustes{border-left-color:var(--st-ajustes-line);}
.bl-aprovado{border-left-color:var(--st-aprov-line);}
.bl-enviado{border-left-color:var(--st-enviado-line);}
.bl-noar{border-left-color:var(--st-noar-line);}
.bl-pausado{border-left-color:var(--st-pausado-line);}
.bl-reprovado{border-left-color:var(--st-reprov-line);}

/* ---------- modal ---------- */
.overlay{
  position:fixed; inset:0;
  background:rgba(0,20,8,0.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:50;
}
.overlay.open{display:flex;}
.modal{
  background:#fff;
  border-radius:14px;
  width:100%;
  max-width:560px;
  max-height:88vh;
  overflow-y:auto;
  padding:26px 26px 20px;
}
.modal h2{margin:0 0 4px; font-size:20px; text-transform:lowercase;}
.modal .modal-sub{font-size:12.5px; color:var(--muted); margin:0 0 18px;}
.mp-field{margin-bottom:13px;}
.mp-field label{
  display:block;
  font-size:12px;
  font-weight:700;
  color:var(--dark-green);
  margin-bottom:5px;
  text-transform:uppercase;
  letter-spacing:0.3px;
}
.mp-field input, .mp-field select, .mp-field textarea{
  width:100%;
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  padding:9px 11px;
  border-radius:7px;
  border:1px solid var(--line);
  background:#fdfbf7;
  color:var(--ink);
}
.mp-field textarea{resize:vertical; min-height:52px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:520px){.row2{grid-template-columns:1fr;}}
.mp-modal-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.btn-save{background:var(--navy); color:#f5eddd;}
.btn-cancel{background:transparent; color:var(--muted); border:1px solid var(--line);}
.btn-delete{background:transparent; color:#a83c2f; border:1px solid #a83c2f40; font-size:12.5px;}
.required-note{font-size:11px; color:var(--muted); margin-top:2px;}

/* ---------- toast ---------- */
.mp-toast{
  position:fixed;
  bottom:22px; left:50%;
  transform:translateX(-50%) translateY(10px);
  background:var(--dark-green);
  color:var(--sand);
  padding:10px 18px;
  border-radius:24px;
  font-size:13px;
  font-weight:600;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:80;
}
.mp-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- legacy data importer (midia-paga-import.js) ---------- */
.mpi-panel{
  padding:20px 28px 40px;
  max-width:900px;
}
.mpi-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.mpi-head h2{margin:0; font-size:20px; text-transform:lowercase;}
.mpi-sub{font-size:13px; color:var(--muted); margin:0 0 16px; line-height:1.5;}
.mpi-field{margin-bottom:14px;}
.mpi-field input[type="file"]{font-family:'Inter',sans-serif; font-size:13px;}
.mpi-error{
  background:#fbeae8;
  color:#a83c2f;
  border:1px solid #a83c2f40;
  border-radius:8px;
  padding:10px 12px;
  font-size:12.5px;
  margin-top:8px;
}
.mpi-summary{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin:14px 0 10px;
}
.mpi-stat{font-size:13px; color:var(--ink); display:flex; flex-direction:column;}
.mpi-stat strong{font-size:19px; font-family:'Fraunces',serif; font-weight:600;}
.mpi-stat-sub{font-size:11.5px; color:var(--muted);}
.mpi-guarantee{
  font-size:12.5px;
  font-weight:600;
  color:var(--dark-green);
  background:var(--sand);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  margin:8px 0 18px;
}
.mpi-section{margin-bottom:18px;}
.mpi-section h3{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
  color:var(--muted);
  margin:0 0 8px;
}
.mpi-scroll-list{
  max-height:220px;
  overflow-y:auto;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fbf9f3;
}
.mpi-list-row{
  padding:9px 12px;
  font-size:12.5px;
  border-bottom:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.mpi-list-row:last-child{border-bottom:none;}
.mpi-row-name{font-weight:700; color:var(--ink);}
.mpi-row-reason{color:var(--muted);}
.mpi-reject-row .mpi-row-reason{color:#a83c2f;}
.mpi-dup-check{display:flex; align-items:flex-start; gap:8px; cursor:pointer; width:100%;}
.mpi-dup-checkbox{margin-top:2px; flex-shrink:0; cursor:pointer;}
.mpi-empty-note{padding:10px 12px; font-size:12px; color:var(--muted); font-style:italic;}
.mpi-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.mpi-progress-line{font-size:13px; color:var(--ink); margin:14px 0 10px;}
.mpi-progress-bar{
  width:100%;
  height:10px;
  background:var(--sand-deep);
  border-radius:20px;
  overflow:hidden;
}
.mpi-progress-fill{
  height:100%;
  background:var(--navy);
  border-radius:20px;
  transition:width .2s ease;
}
@media (max-width:640px){
  .mpi-panel{padding:16px 16px 32px;}
  .mpi-head{flex-wrap:wrap;}
}

/* ---------- mobile ---------- */
@media (max-width:640px){
  .topbar{padding:16px 16px 14px;}
  .topbar h1{font-size:22px;}
  .brand-eyebrow{font-size:10px;}
  .top-actions{width:100%;}
  .top-actions .btn{flex:1; text-align:center; padding:10px 8px; font-size:12.5px;}

  .howto{padding:14px 16px;}

  .filterbar{padding:10px 16px; gap:8px;}
  .filterbar input[type="text"], .filterbar select{width:100%; max-width:none;}
  .count-pill{margin-left:0; width:100%;}

  .stage-tabs{padding:4px 14px 14px; flex-wrap:nowrap; overflow-x:auto;}
  .stage-tab{padding:10px 14px;}
  .stage-panel{padding:6px 14px 32px;}

  .modal{padding:20px 18px 16px; max-width:100%;}
  .who-box{max-width:280px;}
}