/* ==========================================================================
   PDP INFOGRAPHIC TOOL redesign surface (internal codename: mission-desk-ui)
   --------------------------------------------------------------------------
   "Mission Desk" was a working codename only — it must NEVER appear in
   rendered UI text. The user-facing name is "PDP Infographic Tool" (the
   Custom Tools dropdown carries it; the sub-bar shows no title brand).
   Client-approved Concept A v2 ported into the production
   app. Layout, spacing and interaction patterns lifted from
   polaris/design-proposals/pdp-tool-redesign/concept-a-v2.html and adapted to
   the app's reality. EVERY class is .md- prefixed; colors come from the
   css/redstar.css tokens (no new identity — the app header stays untouched).
   Status accents mirror the approved mockup's palette (kept compatible with
   RedStar's own green/amber usage elsewhere).
   Loaded from index.html AFTER css/redstar.css.
   ========================================================================== */

:root {
    --md-ok: #2e7d32;
    --md-ok-soft: #e8f5e9;
    --md-ok-border: #c8e6c9;
    --md-warn: #9a6b00;
    --md-warn-soft: #fdf4dd;
    --md-warn-border: #efe0ae;
    --md-run: #5b8def;
    --md-seg-done: #3fbf6a;
    --md-seg-review: #f2b33d;
    --md-seg-rejected: #ef5366;
    --md-seg-running: #5b8def;
    --md-seg-queued: #dde1e5;
}

/* ===== sub-bar: run state + controls. Slim, no logo, no brand. ===== */
.md-subbar {
    min-height: 56px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 24px;
    position: relative;
    z-index: 50;
    flex-wrap: nowrap;
}
/* pdp-final-cuts: the .md-tabs strip styles were removed with the internal
   tab strip itself — the tool is a single tabless surface (sub-bar + board).
   Rollback (MISSION_DESK_ENABLED=false) uses the legacy .pdp-tabs strip
   styled in css/redstar.css, untouched. */
.md-divider { width: 1px; height: 26px; background: var(--border); flex-shrink: 0; }
.md-run-id {
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
    font-size: 12.5px; color: var(--gray-dark); font-weight: 600;
    max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.md-live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--md-ok);
    box-shadow: 0 0 0 3px var(--md-ok-soft); animation: md-pulse 1.6s infinite; flex-shrink: 0;
}
.md-live-dot.md-dot-paused { background: var(--md-warn); box-shadow: 0 0 0 3px var(--md-warn-soft); animation: none; }
.md-live-dot.md-dot-dead { background: var(--red-primary); box-shadow: 0 0 0 3px var(--red-light); animation: none; }
.md-live-dot.md-dot-idle { background: var(--md-seg-queued); box-shadow: 0 0 0 3px var(--gray-light); animation: none; }
@keyframes md-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.md-progress { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.md-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: #eceef0; }
.md-bar .md-sg { height: 100%; }
/* one-line legend — counts inline, never wraps (sub-bar identity items shed first) */
.md-legend {
    display: flex; align-items: center; gap: 0; font-size: 11.5px;
    color: var(--gray-medium); white-space: nowrap; overflow: hidden;
}
.md-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin: 0 4px 0 0; }
.md-legend b { color: var(--gray-dark); font-weight: 700; }
.md-legend .md-dotsep { margin: 0 6px; color: #c6cbd1; }
.md-eta { color: var(--gray-medium); }
.md-actions { display: flex; align-items: center; gap: 7px; position: relative; flex-shrink: 0; }
.md-btn {
    font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--gray-dark);
    background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 8px 11px; cursor: pointer; transition: all .2s ease;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.md-btn:hover { background: var(--gray-light); border-color: var(--gray-medium); }
.md-btn.md-danger { color: var(--red-dark); border-color: var(--red-light); }
.md-btn.md-danger:hover { background: #fdf0f1; border-color: var(--red-primary); }
.md-btn:disabled { opacity: .45; cursor: default; }
.md-btn .md-dn { font-size: 10px; transition: transform .2s; }
.md-btn.md-open .md-dn { transform: rotate(180deg); }
.md-btn-primary {
    font-family: inherit; background: var(--red-primary); color: var(--white); border: none;
    padding: 9px 18px; border-radius: var(--radius); font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: background .2s ease; white-space: nowrap;
}
.md-btn-primary:hover { background: var(--red-dark); }
.md-btn-primary:disabled { background: var(--gray-medium); cursor: not-allowed; opacity: .6; }
@media (max-width: 1360px) { .md-run-id { display: none; } }
@media (max-width: 1100px) { .md-legend .md-eta-wrap { display: none; } }

/* ===== popovers off the sub-bar (History) ===== */
.md-pop {
    position: absolute; top: calc(100% + 10px); right: 0; background: var(--white);
    border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15); z-index: 80; display: none;
}
.md-pop.md-open { display: block; }
.md-histpop { width: 340px; padding: 8px; max-height: 420px; overflow-y: auto; }
.md-runrow { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.md-runrow:hover { background: var(--gray-light); }
.md-runrow.md-cur { background: var(--gray-light); }
.md-runrow .md-ring {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.md-runrow .md-ring::after { content: ""; width: 20px; height: 20px; background: #fff; border-radius: 50%; }
.md-runrow .md-rinfo { flex: 1; min-width: 0; }
.md-runrow .md-ttl {
    font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--gray-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.md-runrow .md-meta { font-size: 11px; color: var(--gray-medium); margin-top: 1px; }
.md-runrow .md-export-btn { font-size: 11px; padding: 5px 8px; flex-shrink: 0; }
.md-histnote { padding: 6px 10px 8px; font-size: 10.5px; color: var(--gray-medium); line-height: 1.5; }
.md-histempty { padding: 14px 12px; font-size: 12px; color: var(--gray-medium); }

/* ===== insights slide-in (feedback/summary — reason counts + notes) ===== */
.md-insights {
    position: fixed; top: 0; right: -400px; width: 380px; height: 100%;
    background: var(--white); border-left: 1px solid var(--border);
    box-shadow: -12px 0 32px rgba(0, 0, 0, .10); transition: right .26s ease;
    z-index: 1200; display: flex; flex-direction: column;
}
.md-insights.md-open { right: 0; }
.md-ins-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 10px; }
.md-ins-head b { font-size: 14.5px; font-weight: 700; color: var(--gray-dark); }
.md-ins-head .md-sub { font-size: 11.5px; color: var(--gray-medium); margin-top: 2px; line-height: 1.5; }
.md-ins-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 20px; }
.md-ins-sec h6 {
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gray-medium); margin: 0 0 10px;
}
.md-hbar { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.md-hbar .md-lb { width: 118px; font-size: 11.5px; font-weight: 600; color: var(--gray-medium); text-align: right; flex-shrink: 0; }
.md-hbar .md-tr { flex: 1; height: 14px; background: #eceef0; border-radius: 4px; overflow: hidden; }
.md-hbar .md-fl { height: 100%; background: linear-gradient(90deg, var(--red-primary-light), var(--red-primary)); border-radius: 4px; }
.md-hbar .md-vl { font-size: 11px; font-weight: 700; min-width: 22px; color: var(--gray-dark); }
.md-note { padding: 9px 0; border-top: 1px dashed #e9ecef; font-size: 12px; line-height: 1.5; color: var(--gray-medium); }
.md-note:first-of-type { border-top: 0; }
.md-note b { color: var(--gray-dark); font-weight: 650; }
.md-xbtn {
    width: 30px; height: 30px; border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--white); cursor: pointer; font-size: 13px; color: var(--gray-medium);
    flex-shrink: 0; margin-left: auto;
}
.md-xbtn:hover { background: var(--gray-light); }

/* ===== desk body: the calm review board ===== */
.md-desk { display: none; flex-direction: column; min-height: calc(100vh - 130px); background: var(--gray-light); }
.md-desk.md-active { display: flex; }

/* ===== tabless GALLERY view (sub-bar "Gallery" toggle) =====
   One-off output home: the classic "Generated Infographics" pane shown full
   width — the parked legacy sidebar (tab contents) stays hidden. Rollback
   mode never adds this class, so the legacy five-tab layout is untouched. */
.pdp-tool-wrapper.md-gallery-only .pdp-left-sidebar { display: none; }
.md-btn.md-on { background: var(--gray-light); border-color: var(--gray-medium); }
.md-boardhead { display: flex; align-items: center; gap: 14px; padding: 16px 24px 4px; flex-shrink: 0; }
.md-seg { display: inline-flex; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 3px; gap: 2px; }
.md-seg button {
    font-family: inherit; font-size: 12.5px; font-weight: 600; border: none; background: transparent;
    color: var(--gray-medium); padding: 6px 14px; border-radius: 6px; cursor: pointer;
}
.md-seg button.md-on { background: var(--red-primary); color: #fff; }
.md-kbhint { margin-left: auto; font-size: 11.5px; color: var(--gray-medium); opacity: 0; transition: opacity .25s; white-space: nowrap; }
.md-desk:hover .md-kbhint { opacity: 1; }
.md-kbhint kbd, .md-rv-hint kbd, .md-hk {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 10px;
    background: var(--white); border: 1px solid var(--border); border-bottom-width: 2px;
    border-radius: 5px; padding: 1px 6px; color: var(--gray-dark);
}
.md-grid {
    flex: 1; overflow-y: auto; padding: 14px 24px 24px; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 18px; align-content: start;
}
.md-empty { padding: 70px 24px; text-align: center; color: var(--gray-medium); }
.md-empty .md-empty-title { font-size: 15px; font-weight: 700; color: var(--gray-dark); margin-bottom: 6px; }
.md-empty .md-empty-sub { font-size: 12.5px; line-height: 1.6; margin-bottom: 18px; }

/* cards */
.md-card {
    background: var(--white); border: 1px solid #e9ecef; border-radius: 12px; overflow: hidden;
    cursor: pointer; position: relative; transition: box-shadow .15s, border-color .15s;
}
.md-card:hover { box-shadow: var(--shadow); border-color: var(--border); }
.md-card.md-sel { outline: 2px solid var(--red-primary); outline-offset: 1px; }
.md-card .md-imgwrap { aspect-ratio: 4/4.5; background: #f5f5f5; position: relative; overflow: hidden; }
.md-card .md-imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-stchip {
    position: absolute; top: 8px; left: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
    padding: 4px 9px; border-radius: 99px; backdrop-filter: blur(4px); z-index: 2;
}
.md-st-review { background: rgba(253, 244, 221, .95); color: var(--md-warn); border: 1px solid var(--md-warn-border); }
.md-st-approved { background: rgba(232, 245, 233, .95); color: var(--md-ok); border: 1px solid var(--md-ok-border); }
.md-st-rejected { background: rgba(253, 240, 241, .95); color: var(--red-dark); border: 1px solid var(--red-light); }
.md-st-clean { background: rgba(238, 244, 255, .95); color: #2056c7; border: 1px solid #cdddfa; }
.md-card .md-attempt {
    position: absolute; bottom: 8px; right: 8px; font-size: 10px; font-weight: 700;
    background: rgba(52, 58, 64, .75); color: #fff; border-radius: 99px; padding: 3px 8px;
    opacity: 0; transition: opacity .15s; z-index: 2;
}
.md-card:hover .md-attempt { opacity: 1; }
.md-card .md-cb { padding: 11px 13px 12px; }
.md-card .md-nm {
    font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--gray-dark);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 35px;
}
.md-card .md-more { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.md-card:hover .md-more, .md-card.md-sel .md-more { max-height: 130px; }
.md-card .md-id { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 10.5px; color: var(--gray-medium); margin-top: 5px; }
.md-card .md-flag { font-size: 11px; color: var(--md-warn); background: var(--md-warn-soft); border-radius: 7px; padding: 5px 8px; margin-top: 7px; line-height: 1.45; }
.md-card .md-flag.md-bad { color: var(--red-dark); background: #fdf0f1; }
.md-card .md-flag.md-good { color: var(--md-ok); background: var(--md-ok-soft); }
.md-card .md-quick { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; z-index: 3; }
.md-card:hover .md-quick { opacity: 1; }
.md-qbtn {
    width: 30px; height: 30px; border-radius: var(--radius); border: 1px solid var(--border);
    background: rgba(255, 255, 255, .96); font-size: 13px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.md-qbtn.md-a { color: var(--md-ok); }
.md-qbtn.md-r { color: var(--red-dark); }
.md-qbtn:hover { transform: scale(1.07); }
/* skeletons — queued / in-flight items streaming in while the run is live */
.md-card.md-skel { cursor: default; border-style: dashed; background: transparent; }
.md-skel .md-imgwrap {
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px;
    background: repeating-linear-gradient(-45deg, #fbfcfd, #fbfcfd 12px, #f1f3f5 12px, #f1f3f5 24px);
}
.md-skel .md-stage-l { font-size: 10.5px; font-weight: 700; color: var(--gray-medium); letter-spacing: .06em; text-transform: uppercase; }
.md-skel .md-skel-id { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; color: var(--gray-medium); }
.md-spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--red-primary); animation: md-spin 1s linear infinite; }
@keyframes md-spin { to { transform: rotate(360deg); } }
.md-card.md-flash { animation: md-flashin .9s ease; }
@keyframes md-flashin {
    0% { outline: 3px solid var(--md-ok); outline-offset: 2px; transform: scale(.97); }
    100% { outline: 0 solid transparent; transform: scale(1); }
}

/* ===== REVIEW MODAL — click any card; the heart of the tool ===== */
.md-rvovl {
    position: fixed; inset: 0; background: rgba(33, 37, 41, .58); z-index: 1300;
    display: none; align-items: center; justify-content: center; padding: 22px 72px;
}
.md-rvovl.md-open { display: flex; }
.md-rv-nav {
    position: absolute; top: 0; bottom: 0; width: 70px; border: none; background: transparent;
    cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center;
    padding: 0; font-family: inherit;
}
.md-rv-nav.md-prev { left: 0; }
.md-rv-nav.md-next { right: 0; }
.md-rv-nav span {
    width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .4); color: #fff; font-size: 25px;
    display: flex; align-items: center; justify-content: center; padding-bottom: 3px; transition: all .15s;
}
.md-rv-nav:hover span { background: var(--red-primary); border-color: var(--red-primary); transform: scale(1.1); }
.md-rv-nav:disabled { cursor: default; opacity: .28; }
.md-rv-nav:disabled span { background: rgba(255, 255, 255, .16) !important; border-color: rgba(255, 255, 255, .4) !important; transform: none !important; }
.md-rvmodal {
    width: 100%; max-width: 1040px; height: 100%; max-height: 802px; background: var(--white);
    border-radius: 12px; box-shadow: 0 18px 64px rgba(0, 0, 0, .35);
    display: flex; flex-direction: column; overflow: hidden; position: relative;
}
.md-rv-x {
    position: absolute; top: 10px; right: 10px; z-index: 5; width: 32px; height: 32px;
    border-radius: var(--radius); border: 1px solid var(--border); background: var(--white);
    cursor: pointer; font-size: 13px; color: var(--gray-medium);
}
.md-rv-x:hover { background: var(--gray-light); color: var(--gray-dark); }
.md-rv-main { flex: 1; display: flex; min-height: 0; }
.md-rv-stage { flex: 1.5; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--gray-light); }
.md-rv-stagehead {
    display: flex; align-items: center; gap: 10px; padding: 13px 16px 0;
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-medium);
}
.md-rv-stagehead .md-stchip { position: static; backdrop-filter: none; }
.md-rv-stagehead .md-rv-state { margin-left: auto; display: inline-flex; }
.md-rv-imgbox { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px; position: relative; }
.md-rv-imgbox img { max-width: 100%; max-height: 100%; border-radius: 10px; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow); }
.md-rv-imgbox .md-noimg { font-size: 12px; color: var(--gray-medium); }
.md-rv-stamp {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-9deg);
    font-size: 30px; font-weight: 800; letter-spacing: .14em; padding: 12px 26px;
    border: 4px solid var(--md-ok); border-radius: 14px; color: var(--md-ok);
    background: rgba(255, 255, 255, .93); opacity: 0; pointer-events: none; white-space: nowrap;
}
.md-rv-stamp.md-bad { border-color: var(--red-primary); color: var(--red-dark); }
.md-rv-stamp.md-go { animation: md-stampin .6s cubic-bezier(.2, .9, .3, 1.15) forwards; }
@keyframes md-stampin {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(1.9); }
    55% { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(.94); }
    75% { transform: translate(-50%, -50%) rotate(-9deg) scale(1.04); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
}
.md-rv-side { width: 356px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; background: var(--white); }
.md-rv-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 10px; display: flex; flex-direction: column; gap: 14px; }
.md-rv-name { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--gray-dark); padding-right: 32px; }
.md-rv-meta {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: var(--gray-medium);
    margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.md-rv-h6 { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-medium); margin: 0 0 7px; }
.md-rv-h6 span { font-weight: 600; letter-spacing: .02em; text-transform: none; }
.md-rv-refgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.md-refbox { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; height: 104px; position: relative; background: #f5f5f5; }
.md-refbox img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-refnote { font-size: 10px; color: var(--gray-medium); line-height: 1.5; }
/* QA dossier folds */
.md-fold { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.md-fold-h { display: flex; align-items: center; gap: 9px; padding: 12px 14px; cursor: pointer; user-select: none; background: var(--white); }
.md-fold-h:hover { background: var(--gray-light); }
.md-fold-h h6 { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-medium); margin: 0; }
.md-fold-h .md-sum { font-size: 11.5px; color: var(--gray-medium); }
.md-fold-h .md-sum b.md-bad { color: var(--red-dark); }
.md-fold-h .md-sum b.md-good { color: var(--md-ok); }
.md-fold-h .md-chev { margin-left: auto; font-size: 10px; color: var(--gray-medium); transition: transform .2s; }
.md-fold.md-open .md-chev { transform: rotate(180deg); }
.md-fold-b { display: none; padding: 4px 14px 12px; border-top: 1px solid #f1f3f5; }
.md-fold.md-open .md-fold-b { display: block; }
.md-chk { display: flex; gap: 8px; font-size: 12px; color: var(--gray-medium); padding: 4px 0; align-items: baseline; line-height: 1.5; }
.md-chk i { font-style: normal; font-weight: 700; width: 14px; flex-shrink: 0; text-align: center; }
.md-chk.md-pass i { color: var(--md-ok); }
.md-chk.md-fail i { color: var(--red-primary); }
.md-tl-item { display: flex; gap: 10px; padding: 8px 0; border-top: 1px dashed #e9ecef; }
.md-tl-item:first-of-type { border-top: 0; }
.md-tl-item .md-att { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; font-weight: 600; color: var(--gray-medium); width: 86px; flex-shrink: 0; line-height: 1.6; }
.md-tl-item .md-vt { font-size: 12px; line-height: 1.5; color: var(--gray-medium); }
.md-tl-item .md-vt b { font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.md-tl-item.md-fail .md-vt b { color: var(--red-dark); }
.md-tl-item.md-pass .md-vt b { color: var(--md-ok); }
/* big actions + reject swap-in */
.md-rv-actions { flex-shrink: 0; border-top: 1px solid var(--border); padding: 13px 18px 11px; background: var(--white); }
.md-bigact { display: flex; gap: 10px; }
.md-bigbtn {
    flex: 1; font-family: inherit; font-size: 14.5px; font-weight: 700; border-radius: var(--radius);
    padding: 13px 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; border: 1.5px solid transparent; transition: filter .15s, background .15s, transform .1s;
}
.md-bigbtn:active { transform: scale(.97); }
.md-bigbtn.md-go { background: var(--md-ok); color: #fff; }
.md-bigbtn.md-go:hover { filter: brightness(.92); }
.md-bigbtn.md-no { background: var(--white); color: var(--red-dark); border-color: var(--red-primary); }
.md-bigbtn.md-no:hover { background: #fdf0f1; }
.md-bigbtn:disabled { opacity: .4; cursor: default; }
.md-bigbtn .md-hk { font-size: 9.5px; font-weight: 700; border: 1px solid currentColor; opacity: .5; border-radius: 4px; padding: 1px 5px; background: transparent; color: inherit; }
.md-rv-fix { margin-top: 9px; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--gray-medium); cursor: pointer; }
.md-rv-fix:hover { color: var(--gray-dark); text-decoration: underline; }
.md-rv-rej { display: none; }
.md-rv-actions.md-rejecting .md-bigact, .md-rv-actions.md-rejecting .md-rv-fix { display: none; }
.md-rv-actions.md-rejecting .md-rv-rej { display: block; }
.md-rv-rej h6 { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red-dark); margin: 0 0 9px; }
.md-rv-rej .md-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.md-rv-rej .md-teach { flex: 1; font-size: 10.5px; color: var(--gray-medium); line-height: 1.4; }
/* reason chips (10-reason taxonomy, multi-select) */
.md-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.md-chip {
    font-size: 11.5px; font-weight: 600; border: 1px solid var(--border); border-radius: 99px;
    padding: 5px 10px; cursor: pointer; background: var(--white); color: var(--gray-medium);
    display: inline-flex; gap: 6px; align-items: center;
}
.md-chip:hover { border-color: var(--red-primary); color: var(--red-dark); }
.md-chip.md-on { background: var(--red-primary); border-color: var(--red-primary); color: #fff; }
.md-chip kbd { padding: 0 5px; font-size: 9.5px; font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--white); border: 1px solid var(--border); border-radius: 4px; color: var(--gray-dark); }
.md-chip.md-on kbd { background: rgba(255, 255, 255, .2); border-color: transparent; color: #fff; }
/* bottom filmstrip */
.md-rv-strip { flex-shrink: 0; display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--border); background: var(--gray-light); padding: 9px 16px; }
.md-rv-pos { font-size: 11.5px; font-weight: 700; color: var(--gray-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.md-rv-pos small { font-size: 10.5px; color: var(--gray-medium); font-weight: 600; }
.md-rv-thumbs { flex: 1; display: flex; gap: 8px; overflow-x: auto; padding: 3px 2px; scroll-behavior: smooth; }
.md-rv-th {
    position: relative; width: 46px; height: 46px; border-radius: 8px; border: 2px solid transparent;
    overflow: hidden; flex-shrink: 0; cursor: pointer; opacity: .72; transition: all .15s; background: #fff; padding: 0;
}
.md-rv-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-rv-th:hover { opacity: 1; }
.md-rv-th.md-cur { border-color: var(--red-primary); opacity: 1; box-shadow: 0 0 0 3px rgba(220, 53, 69, .18); }
.md-rv-th .md-dot { position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #fff; }
.md-rv-hint { font-size: 10.5px; color: var(--gray-medium); white-space: nowrap; }
@media (max-width: 1150px) { .md-rv-side { width: 320px; } .md-rvovl { padding: 18px 60px; } }

/* ===== New Run launcher: one overlay, four ways in + preview step ===== */
.md-ovl {
    position: fixed; inset: 0; background: rgba(52, 58, 64, .45); z-index: 1290;
    display: none; align-items: center; justify-content: center; padding: 24px;
}
.md-ovl.md-open { display: flex; }
.md-launcher {
    width: 740px; max-width: 100%; max-height: 100%; background: var(--white); border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .25); display: flex; flex-direction: column; overflow: hidden;
}
.md-ln-head { padding: 16px 22px 12px; display: flex; align-items: flex-start; gap: 12px; }
.md-ln-head b { font-size: 16px; font-weight: 700; color: var(--gray-dark); }
.md-ln-head .md-sub { font-size: 11.5px; color: var(--gray-medium); margin-top: 2px; }
.md-ln-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 22px; gap: 0; }
.md-ln-tab {
    flex: 1; font-family: inherit; background: none; border: none; padding: 11px 8px;
    font-size: 13px; font-weight: 500; cursor: pointer; border-bottom: 3px solid transparent;
    transition: all .2s ease; color: var(--gray-medium); text-align: center;
}
.md-ln-tab.md-active { color: var(--red-primary); border-bottom-color: var(--red-primary); font-weight: 600; }
.md-ln-tab:hover { color: var(--red-primary); }
.md-ln-body { flex: 1; overflow-y: auto; padding: 18px 22px; min-height: 220px; }
.md-ln-pane { display: none; }
.md-ln-pane.md-active { display: block; }
.md-ln-label {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--gray-medium); margin: 0 0 7px;
}
/* auto-grow inputs — standing POLARIS rule: field height ≡ content height */
.md-grow {
    width: 100%; box-sizing: border-box; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px; line-height: 1.7; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 10px 12px; color: var(--gray-dark); background: var(--white); resize: none; overflow: hidden;
    min-height: 44px; display: block;
}
.md-grow.md-prose { font-family: inherit; font-size: 13px; line-height: 1.65; }
.md-grow:focus { outline: none; border-color: var(--red-primary-light); box-shadow: 0 0 0 3px rgba(220, 53, 69, .08); }
.md-upcnote {
    display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; font-size: 12px;
    color: var(--gray-medium); background: var(--gray-light); border: 1px solid #e9ecef;
    border-radius: var(--radius); padding: 10px 12px; line-height: 1.55;
}
.md-upcnote .md-ic {
    flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--red-primary);
    color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.md-upcnote b { color: var(--gray-dark); }
.md-resolve { margin-top: 10px; font-size: 12px; color: var(--gray-medium); }
.md-resolve b { color: var(--gray-dark); font-weight: 700; }
.md-resolve .md-okq { color: var(--md-ok); font-weight: 700; }
/* collection rows */
.md-coll { display: flex; flex-direction: column; gap: 9px; }
.md-collrow { display: flex; align-items: center; gap: 13px; border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; cursor: pointer; transition: all .15s; }
.md-collrow:hover { border-color: var(--gray-medium); }
.md-collrow.md-on { border-color: var(--red-primary); box-shadow: 0 0 0 3px rgba(220, 53, 69, .08); }
.md-collrow .md-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; }
.md-collrow.md-on .md-radio { border-color: var(--red-primary); background: radial-gradient(var(--red-primary) 0 42%, #fff 46%); }
.md-collrow .md-cinfo { flex: 1; min-width: 0; }
.md-collrow .md-cn { font-size: 13px; font-weight: 600; color: var(--gray-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-collrow .md-cm { font-size: 11.5px; color: var(--gray-medium); margin-top: 1px; }
.md-collrow .md-upchint {
    margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--md-ok); background: var(--md-ok-soft);
    border: 1px solid var(--md-ok-border); border-radius: 99px; padding: 3px 9px; white-space: nowrap; flex-shrink: 0;
}
.md-collrow .md-rename { flex-shrink: 0; font-size: 11px; padding: 4px 8px; }
.md-collrow input.md-rename-input {
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--gray-dark);
    border: 1px solid var(--red-primary-light); border-radius: 6px; padding: 3px 7px; width: 100%;
}
/* one-off */
.md-oneoff { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }
.md-drop {
    border: 1.5px dashed var(--border); border-radius: 10px; padding: 14px; display: flex;
    flex-direction: column; align-items: center; gap: 9px; text-align: center; background: var(--gray-light);
    cursor: pointer; position: relative;
}
.md-drop.md-dragover { border-color: var(--red-primary); }
.md-drop img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: #fff; }
.md-drop .md-fn { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--gray-dark); word-break: break-all; }
.md-drop .md-dropmsg { font-size: 12px; color: var(--gray-medium); }
.md-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* spreadsheet */
.md-filechip { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; background: var(--gray-light); position: relative; }
.md-filechip .md-fic {
    width: 34px; height: 34px; border-radius: 8px; background: var(--md-ok-soft); border: 1px solid var(--md-ok-border);
    color: var(--md-ok); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.md-filechip .md-fn { font-size: 13px; font-weight: 600; color: var(--gray-dark); }
.md-filechip .md-fm { font-size: 11.5px; color: var(--gray-medium); }
.md-filechip .md-repl { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--red-dark); cursor: pointer; }
.md-sheetdrop { position: relative; }
.md-sheetdrop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.md-srcpick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.md-srcopt { border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; cursor: pointer; transition: all .15s; display: flex; gap: 10px; align-items: flex-start; }
.md-srcopt:hover { border-color: var(--gray-medium); }
.md-srcopt.md-on { border-color: var(--red-primary); box-shadow: 0 0 0 3px rgba(220, 53, 69, .08); }
.md-srcopt .md-radio { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; margin-top: 2px; }
.md-srcopt.md-on .md-radio { border-color: var(--red-primary); background: radial-gradient(var(--red-primary) 0 42%, #fff 46%); }
.md-srcopt .md-sn { font-size: 12.5px; font-weight: 700; color: var(--gray-dark); }
.md-srcopt .md-sn .md-def {
    font-size: 9.5px; font-weight: 700; color: var(--md-ok); background: var(--md-ok-soft);
    border: 1px solid var(--md-ok-border); border-radius: 99px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px;
}
.md-srcopt .md-sd { font-size: 11px; color: var(--gray-medium); margin-top: 2px; line-height: 1.5; }
.md-ptable { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 11.5px; }
.md-ptable th {
    font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-medium);
    text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); background: var(--gray-light);
}
.md-ptable td { padding: 7px 10px; border-bottom: 1px solid #f1f3f5; color: var(--gray-medium); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; }
.md-ptable td.md-pn { font-family: inherit; font-size: 11.5px; color: var(--gray-dark); }
.md-ptable .md-keycol { background: #fdf0f1; }
.md-ptable th.md-keycol { color: var(--red-dark); }
.md-ptable .md-morerows td { font-family: inherit; color: var(--gray-medium); font-size: 11px; border-bottom: 0; padding-top: 9px; }
/* preview step (shared by collection / paste / spreadsheet) */
.md-prevlist { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; max-height: 320px; overflow-y: auto; }
.md-prevrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #f1f3f5; font-size: 12px; cursor: pointer; }
.md-prevrow:last-child { border-bottom: 0; }
.md-prevrow:hover { background: var(--gray-light); }
.md-prevrow input[type="checkbox"] { flex-shrink: 0; accent-color: var(--red-primary); }
.md-prevrow .md-pname { flex: 1; min-width: 0; color: var(--gray-dark); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-prevrow .md-pname .md-noname { color: var(--gray-medium); font-weight: 500; font-style: italic; }
.md-prevrow .md-pids { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; color: var(--gray-medium); white-space: nowrap; }
.md-prevrow .md-unres {
    font-size: 9.5px; font-weight: 700; color: var(--md-warn); background: var(--md-warn-soft);
    border: 1px solid var(--md-warn-border); border-radius: 99px; padding: 2px 7px; white-space: nowrap;
}
.md-prev-back { font-size: 12px; font-weight: 600; color: var(--gray-medium); cursor: pointer; margin-bottom: 10px; display: inline-block; }
.md-prev-back:hover { color: var(--gray-dark); }
.md-prev-toggle { font-size: 11.5px; color: var(--gray-medium); margin: 8px 0 0; display: flex; gap: 12px; }
.md-prev-toggle a { color: var(--red-dark); font-weight: 600; cursor: pointer; text-decoration: none; }
/* launcher footer */
.md-ln-foot { border-top: 1px solid var(--border); padding: 13px 22px; display: flex; align-items: center; gap: 14px; background: var(--white); }
.md-ln-est { font-size: 12px; color: var(--gray-medium); line-height: 1.45; }
.md-ln-est b { color: var(--gray-dark); font-weight: 700; }
.md-ln-defaults { margin-left: auto; font-size: 11px; color: var(--gray-medium); text-align: right; line-height: 1.45; }
.md-ln-defaults select { font-family: inherit; font-size: 11px; color: var(--gray-dark); border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px; background: var(--white); }