/* ===========================================================================
   /image-metadata-viewer
   ---------------------------------------------------------------------------
   The supplied design was a standalone document: it put its palette on `:root`,
   styled `body`, `h1`-`h3`, `button` and `table` directly, and carried its own
   sticky page header with a theme toggle. Dropped into the shared layout
   unscoped, those rules would have restyled the site header, the footer and
   every button on every other page.

   So every rule here is scoped under `.imv` and every class is `imv-` prefixed,
   with the palette on `.imv` rather than `:root`. The element selectors the
   design relied on are kept, but each one is now a descendant - `.imv table.raw`
   rather than bare `table.raw`.

   Dark mode: the design shipped both a `prefers-color-scheme` block and a
   `:root[data-theme]` block, because it had to work as a loose file. This site
   always writes an explicit `data-theme` on <html> (see the inline script in
   _Layout.cshtml, which falls back to 'light' if storage throws), so only the
   attribute form is kept. A `prefers-color-scheme` block here would fight the
   site's own toggle on a light-theme visitor with a dark OS.

   The design's own header is gone - the site provides one. The two controls
   that lived in it (Theme / Export JSON) are handled differently: theme belongs
   to the site's dock, and Export JSON moved into the page's own action row.

   Ids the script requires are all imv- prefixed; see image-metadata-viewer.js.
   =========================================================================== */

.imv {
  --iv-bg: #F4F6FB;
  --iv-card: #FFFFFF;
  --iv-card-2: #F8FAFC;
  --iv-ink: #0F172A;
  --iv-ink-2: #334155;
  --iv-muted: #64748B;
  --iv-faint: #94A3B8;
  --iv-line: #E4E9F2;
  --iv-line-2: #CFD8E6;

  --iv-blue: #2563EB;    --iv-blue-t: #EEF4FF;
  --iv-violet: #7C3AED;  --iv-violet-t: #F4F0FF;
  --iv-amber: #D97706;   --iv-amber-t: #FFF6E5;
  --iv-emerald: #059669; --iv-emerald-t: #E7FAF2;
  --iv-rose: #E11D48;    --iv-rose-t: #FFF0F3;
  --iv-slate: #475569;   --iv-slate-t: #F1F5F9;
  --iv-cyan: #0891B2;    --iv-cyan-t: #E6FAFE;

  --iv-ok: #059669;  --iv-ok-t: #E7FAF2;
  --iv-off: #94A3B8; --iv-off-t: #F1F5F9;
  --iv-bad: #E11D48; --iv-bad-t: #FFF0F3;

  --iv-shadow-s: 0 1px 2px rgba(15, 23, 42, .06);
  --iv-shadow-m: 0 2px 4px rgba(15, 23, 42, .04), 0 12px 28px -14px rgba(15, 23, 42, .22);
  --iv-shadow-l: 0 4px 10px rgba(15, 23, 42, .06), 0 24px 48px -20px rgba(15, 23, 42, .28);

  --iv-f: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --iv-m: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --iv-r: 14px; --iv-r-s: 9px; --iv-r-xs: 6px;

  background: var(--iv-bg);
  color: var(--iv-ink);
  font-family: var(--iv-f);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* auto, not 0 - same reason as favicon-studio.css: .qdt-page-host gives every
     direct child margin-inline:auto and a max-width, and a `margin: 0 0 x`
     shorthand here would reset those and pin the page to the left. */
  margin: -1px auto 0;
  padding-bottom: 1px;
}

html[data-theme="dark"] .imv {
  --iv-bg: #0B1120; --iv-card: #131C2E; --iv-card-2: #1A2439;
  --iv-ink: #F1F5F9; --iv-ink-2: #CBD5E1; --iv-muted: #94A3B8; --iv-faint: #64748B;
  --iv-line: #243149; --iv-line-2: #33425E;
  --iv-blue: #60A5FA;    --iv-blue-t: #16233F;
  --iv-violet: #A78BFA;  --iv-violet-t: #241E42;
  --iv-amber: #FBBF24;   --iv-amber-t: #332714;
  --iv-emerald: #34D399; --iv-emerald-t: #0F2E26;
  --iv-rose: #FB7185;    --iv-rose-t: #331A24;
  --iv-slate: #94A3B8;   --iv-slate-t: #1B2437;
  --iv-cyan: #22D3EE;    --iv-cyan-t: #0E2C36;
  --iv-ok: #34D399;  --iv-ok-t: #0F2E26;
  --iv-off: #64748B; --iv-off-t: #1B2437;
  --iv-bad: #FB7185; --iv-bad-t: #331A24;
  --iv-shadow-s: 0 1px 2px rgba(0, 0, 0, .4);
  --iv-shadow-m: 0 2px 6px rgba(0, 0, 0, .4), 0 14px 30px -16px rgba(0, 0, 0, .75);
  --iv-shadow-l: 0 6px 14px rgba(0, 0, 0, .45), 0 28px 56px -22px rgba(0, 0, 0, .85);
}

.imv * { box-sizing: border-box }
.imv h1, .imv h2, .imv h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; text-wrap: balance }
.imv button, .imv input { font-family: inherit }
.imv :focus-visible { outline: 2px solid var(--iv-blue); outline-offset: 2px; border-radius: var(--iv-r-xs) }
@media (prefers-reduced-motion: reduce) { .imv * { animation: none !important; transition: none !important } }
.imv .imv-mono { font-family: var(--iv-m); font-variant-numeric: tabular-nums }
.imv .imv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

.imv .imv-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px }

/* ============================================================
   HERO
   ============================================================ */
.imv .imv-hero {
  margin: 18px 0 12px; padding: 20px 22px; border-radius: 20px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(620px 180px at 8% -10%, rgba(37, 99, 235, .20), transparent 68%),
    radial-gradient(420px 180px at 88% 0%, rgba(124, 58, 237, .17), transparent 70%),
    linear-gradient(120deg,
      color-mix(in srgb, var(--iv-card) 94%, #dbeafe) 0%,
      color-mix(in srgb, var(--iv-card) 93%, #eef2ff) 54%,
      color-mix(in srgb, var(--iv-card) 90%, #f5e8ff) 100%);
  border: 1px solid color-mix(in srgb, var(--iv-blue) 14%, var(--iv-line));
  box-shadow: 0 14px 34px -24px rgba(37, 99, 235, .45);
}
.imv .imv-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, .18), transparent 42%, rgba(255, 255, 255, .12));
}
.imv .imv-hero::after {
  content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  right: -85px; top: -135px; pointer-events: none;
  background: radial-gradient(circle, rgba(124, 58, 237, .16), transparent 68%);
}
html[data-theme="dark"] .imv .imv-hero::before { background: none }
.imv .imv-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(270px, .55fr);
  gap: 20px; align-items: center; position: relative; z-index: 1;
}
@media (max-width: 850px) {
  .imv .imv-hero-grid { grid-template-columns: 1fr }
  .imv .imv-hero { padding: 17px 18px }
  .imv .imv-hero-side { display: none }
}
.imv .imv-hero-kicker {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 100px;
  background: rgba(255, 255, 255, .66); color: var(--iv-blue);
  border: 1px solid color-mix(in srgb, var(--iv-blue) 14%, transparent);
  font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  margin-bottom: 8px; backdrop-filter: blur(8px);
}
html[data-theme="dark"] .imv .imv-hero-kicker,
html[data-theme="dark"] .imv .imv-trust,
html[data-theme="dark"] .imv .imv-hero-side,
html[data-theme="dark"] .imv .imv-hero-mini div { background: rgba(255, 255, 255, .05) }
.imv .imv-hero-kicker svg { width: 12px; height: 12px }
.imv .imv-hero h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1.08; letter-spacing: -.04em; max-width: 760px }
.imv .imv-hero p { margin: 7px 0 0; color: var(--iv-muted); font-size: 12.5px; max-width: 760px }
.imv .imv-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px }
@media (max-width: 600px) {
  .imv .imv-trust-grid { grid-template-columns: 1fr }
  .imv .imv-trust:nth-child(n+2) { display: none }
}
.imv .imv-trust {
  display: flex; gap: 7px; align-items: center; padding: 7px 9px;
  border: 1px solid rgba(148, 163, 184, .18); border-radius: 10px;
  background: rgba(255, 255, 255, .52); backdrop-filter: blur(8px);
}
.imv .imv-trust i {
  width: 23px; height: 23px; border-radius: 7px; display: grid; place-items: center;
  background: var(--iv-emerald-t); color: var(--iv-emerald); font-style: normal; flex: none;
}
.imv .imv-trust svg { width: 12px; height: 12px }
.imv .imv-trust b { display: block; font-size: 10.5px }
.imv .imv-trust span { display: block; font-size: 8.8px; color: var(--iv-muted) }
.imv .imv-hero-side {
  border: 1px solid rgba(148, 163, 184, .18); border-radius: 14px;
  background: rgba(255, 255, 255, .62); padding: 11px; backdrop-filter: blur(10px);
}
.imv .imv-hero-side-title {
  font-size: 9px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--iv-muted); font-weight: 800; margin-bottom: 7px;
}
.imv .imv-hero-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
.imv .imv-hero-mini div {
  padding: 7px 8px; border-radius: 9px;
  background: rgba(255, 255, 255, .62); border: 1px solid rgba(148, 163, 184, .16);
}
.imv .imv-hero-mini b { font-family: var(--iv-m); font-size: 10.5px; display: block }
.imv .imv-hero-mini span {
  font-size: 7.8px; color: var(--iv-muted); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.imv .imv-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--iv-r-s);
  border: 1px solid var(--iv-line-2); background: var(--iv-card); color: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .12s;
}
.imv .imv-btn:hover { background: var(--iv-card-2); border-color: var(--iv-muted) }
.imv .imv-btn:active { transform: translateY(1px) }
.imv .imv-btn svg { width: 15px; height: 15px; flex: none }

/* ============================================================
   1. INPUTS
   ============================================================ */
.imv .imv-uploader {
  margin: 16px 0 22px; padding: 22px 22px 24px;
  background: var(--iv-card); border: 1px solid var(--iv-line);
  border-radius: 18px; box-shadow: var(--iv-shadow-l);
  position: relative; overflow: hidden;
}
.imv .imv-uploader::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 260px; pointer-events: none;
  background:
    radial-gradient(60% 100% at 30% 0%, var(--iv-blue-t), transparent 70%),
    radial-gradient(50% 100% at 78% 0%, var(--iv-violet-t), transparent 70%);
}
.imv .imv-uploader > * { position: relative }

.imv .imv-input-head {
  display: flex; justify-content: space-between; gap: 18px;
  align-items: flex-start; margin-bottom: 18px;
}
.imv .imv-input-head h2 { font-size: 20px; margin-top: 3px }
.imv .imv-input-head p { margin: 5px 0 0; color: var(--iv-muted); font-size: 12.5px }
.imv .imv-input-kicker {
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--iv-blue);
}
.imv .imv-head-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap }
.imv .imv-input-status {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 100px;
  background: var(--iv-emerald-t); color: var(--iv-emerald);
  font-size: 10.5px; font-weight: 800; white-space: nowrap;
}
.imv .imv-input-status span {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}

.imv .imv-input-grid {
  display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.42fr);
  gap: 16px; align-items: stretch;
}
@media (max-width: 880px) {
  .imv .imv-input-grid { grid-template-columns: 1fr }
  .imv .imv-url-panel { order: -1 }
  .imv .imv-input-head { flex-direction: column }
}
.imv .imv-upload-panel,
.imv .imv-url-panel { border: 1px solid var(--iv-line); border-radius: 16px; background: var(--iv-card); padding: 14px }
.imv .imv-panel-label { font-size: 11px; font-weight: 800; color: var(--iv-ink-2); margin: 0 2px 10px }
.imv .imv-panel-label span {
  margin-left: 6px; font-size: 9px; color: var(--iv-faint);
  text-transform: uppercase; letter-spacing: .08em;
}

/* --- the drop target --- */
.imv .imv-dropzone {
  border: 2px dashed var(--iv-line-2); border-radius: 15px;
  padding: 20px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px;
  background: var(--iv-card); min-height: 225px; width: 100%;
  transition: border-color .16s, background .16s, transform .12s;
}
.imv .imv-dropzone:hover { border-color: var(--iv-blue); background: var(--iv-blue-t) }
.imv .imv-dropzone.is-drag {
  border-color: var(--iv-violet); background: var(--iv-violet-t);
  border-style: solid; transform: scale(.995);
}
.imv .imv-dz-icon {
  width: 50px; height: 50px; border-radius: 14px;
  background: linear-gradient(140deg, #2563EB, #7C3AED); color: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 18px -6px rgba(76, 60, 220, .6);
  transition: transform .2s;
}
.imv .imv-dropzone:hover .imv-dz-icon { transform: translateY(-2px) scale(1.04) }
.imv .imv-dz-icon svg { width: 24px; height: 24px }
.imv .imv-dz-title { font-size: 16px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25 }
.imv .imv-dz-sub { font-size: 12px; color: var(--iv-muted); font-weight: 500 }
.imv .imv-dz-formats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center }
.imv .imv-dz-formats span {
  font-family: var(--iv-m); font-size: 9.5px; font-weight: 600; letter-spacing: .07em;
  padding: 3px 8px; border-radius: 100px; background: var(--iv-card-2);
  color: var(--iv-muted); border: 1px solid var(--iv-line);
}
.imv .imv-dz-btn {
  margin-top: 2px; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 100px;
  background: linear-gradient(140deg, #2563EB, #7C3AED); color: #fff;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 6px 16px -6px rgba(76, 60, 220, .7);
  pointer-events: none; /* the whole zone is the click target */
}

/* --- the URL panel --- */
.imv .imv-url-panel {
  position: relative; overflow: hidden; padding: 18px;
  border: 1.5px solid color-mix(in srgb, var(--iv-blue) 45%, var(--iv-line));
  background: linear-gradient(145deg, var(--iv-card) 0%, var(--iv-blue-t) 145%);
  box-shadow: 0 14px 38px -24px rgba(37, 99, 235, .7);
}
.imv .imv-url-panel::before {
  content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  right: -90px; top: -110px; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--iv-blue) 16%, transparent), transparent 70%);
}
.imv .imv-url-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; position: relative }
.imv .imv-url-icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, #2563EB, #7C3AED); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(37, 99, 235, .9); flex: none;
}
.imv .imv-url-icon svg { width: 20px; height: 20px }
.imv .imv-url-head h3 { font-size: 17px; margin: 3px 0 }
.imv .imv-url-head p { margin: 0; color: var(--iv-muted); font-size: 11.5px; max-width: 620px }
.imv .imv-primary-badge {
  display: inline-flex; padding: 3px 7px; border-radius: 100px;
  background: var(--iv-blue); color: #fff;
  font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.imv .imv-url-label {
  display: flex; align-items: center; gap: 7px; margin: 0 2px 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--iv-muted);
}
.imv .imv-url-row { display: flex; gap: 10px; align-items: stretch }
@media (max-width: 560px) { .imv .imv-url-row { flex-direction: column } }
.imv .imv-url-field {
  flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 52px;
  padding: 0 13px; border-radius: 11px;
  border: 1.5px solid color-mix(in srgb, var(--iv-blue) 28%, var(--iv-line-2));
  background: var(--iv-card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.imv .imv-url-field:focus-within {
  border-color: var(--iv-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--iv-blue) 15%, transparent);
}
.imv .imv-url-field svg { width: 15px; height: 15px; color: var(--iv-faint); flex: none }
.imv .imv-url-field input {
  flex: 1; min-width: 0; border: none; background: none; outline: none; color: var(--iv-ink);
  font-family: var(--iv-m); font-size: 13.5px; padding: 12px 0;
}
.imv .imv-url-field input::placeholder { color: var(--iv-faint) }
.imv .imv-url-btn {
  min-height: 52px; padding: 0 20px; border-radius: 11px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #2563EB, #7C3AED); color: #fff;
  font-size: 14px; font-weight: 700; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 10px 22px -12px rgba(37, 99, 235, .9);
  transition: filter .15s, transform .12s;
}
.imv .imv-url-btn svg { width: 15px; height: 15px }
.imv .imv-url-btn:hover { filter: brightness(1.07); transform: translateY(-1px) }
.imv .imv-url-btn:active { transform: translateY(1px) }
.imv .imv-url-btn[disabled] { opacity: .6; cursor: progress; transform: none }
.imv .imv-url-hints {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 9px 2px 0; color: var(--iv-muted); font-size: 9.8px;
}
.imv .imv-url-hints b { color: var(--iv-ink-2) }
.imv .imv-url-hints kbd {
  font-family: var(--iv-m); font-size: 9px; border: 1px solid var(--iv-line-2);
  border-bottom-width: 2px; background: var(--iv-card); padding: 1px 5px; border-radius: 5px;
}
.imv .imv-up-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 13px 2px 0; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--iv-blue) 12%, var(--iv-line));
  font-size: 11.5px; color: var(--iv-faint); line-height: 1.5;
}
.imv .imv-up-note svg { width: 13px; height: 13px; flex: none; margin-top: 2px }
.imv .imv-up-note b { font-weight: 700; color: var(--iv-muted) }
.imv .imv-proxy-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--iv-emerald-t); color: var(--iv-emerald);
}
.imv .imv-proxy-pill.is-off { background: var(--iv-off-t); color: var(--iv-off) }

/* ============================================================
   2. RESULT STRIP
   ============================================================ */
.imv .imv-resbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; margin-bottom: 16px;
  background: var(--iv-card); border: 1px solid var(--iv-line);
  border-radius: var(--iv-r); box-shadow: var(--iv-shadow-s);
}
.imv .imv-resbar .imv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--iv-ok); flex: none }
.imv .imv-resbar .imv-nm {
  font-family: var(--iv-m); font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 160px; min-width: 0;
}
.imv .imv-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 4px 9px; border-radius: 100px; white-space: nowrap;
  background: var(--iv-slate-t); color: var(--iv-slate);
}
.imv .imv-tag.is-b { background: var(--iv-blue-t); color: var(--iv-blue) }
.imv .imv-tag.is-v { background: var(--iv-violet-t); color: var(--iv-violet) }
.imv .imv-tag.is-e { background: var(--iv-emerald-t); color: var(--iv-emerald) }

/* ============================================================
   3. PREVIEW + STATS
   ============================================================ */
.imv .imv-toprow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px; margin-bottom: 16px;
}
@media (max-width: 900px) { .imv .imv-toprow { grid-template-columns: 1fr } }

.imv .imv-preview-card {
  background: var(--iv-card); border: 1px solid var(--iv-line); border-radius: var(--iv-r);
  box-shadow: var(--iv-shadow-m); overflow: hidden; display: flex; flex-direction: column;
}
.imv .imv-pv-stage {
  position: relative; flex: 1; min-height: 250px; padding: 18px;
  display: grid; place-items: center;
  background:
    linear-gradient(45deg, var(--iv-card-2) 25%, transparent 25%, transparent 75%, var(--iv-card-2) 75%),
    linear-gradient(45deg, var(--iv-card-2) 25%, transparent 25%, transparent 75%, var(--iv-card-2) 75%);
  background-size: 18px 18px; background-position: 0 0, 9px 9px;
}
.imv .imv-pv-stage img {
  max-width: 100%; max-height: 290px; display: block; border-radius: var(--iv-r-xs);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .16), 0 20px 44px -22px rgba(0, 0, 0, .55);
}
.imv .imv-pv-actions { position: absolute; right: 12px; top: 12px; display: flex; gap: 7px }
.imv .imv-icon-btn {
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .6); background: rgba(15, 23, 42, .72); color: #fff;
  display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px);
}
.imv .imv-icon-btn:hover { background: rgba(15, 23, 42, .9) }
.imv .imv-icon-btn svg { width: 15px; height: 15px }
.imv .imv-sample-flag {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 100px;
  background: var(--iv-amber); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: var(--iv-shadow-s);
}
.imv .imv-sample-flag svg { width: 11px; height: 11px }
.imv .imv-pv-empty { text-align: center; color: var(--iv-muted); max-width: 260px }
.imv .imv-pv-empty strong { display: block; color: var(--iv-ink); font-size: 14px; margin-bottom: 3px }
.imv .imv-pv-empty span { font-size: 12.5px }

.imv .imv-side { display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.imv .imv-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
@media (max-width: 480px) { .imv .imv-stats { grid-template-columns: 1fr } }
.imv .imv-stat {
  background: var(--iv-card); border: 1px solid var(--iv-line); border-radius: var(--iv-r);
  padding: 15px 16px; box-shadow: var(--iv-shadow-s);
  display: flex; align-items: flex-start; gap: 12px; min-width: 0;
}
.imv .imv-stat-ic {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  display: grid; place-items: center; background: var(--iv-ct); color: var(--iv-c);
}
.imv .imv-stat-ic svg { width: 18px; height: 18px }
.imv .imv-stat-b { min-width: 0 }
.imv .imv-stat-v {
  font-family: var(--iv-m); font-size: 19px; font-weight: 600; letter-spacing: -.03em;
  display: block; line-height: 1.2; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.imv .imv-stat-k {
  display: block; margin-top: 3px; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--iv-muted);
}

/* capture strip inside the preview card */
.imv .imv-capture { border-top: 1px solid var(--iv-line); background: var(--iv-amber-t) }
.imv .imv-capture-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 14px; border-bottom: 1px solid var(--iv-line);
}
.imv .imv-capture-h b {
  font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--iv-amber); display: flex; align-items: center; gap: 6px;
}
.imv .imv-capture-h b svg { width: 13px; height: 13px }
.imv .imv-capture-h em {
  font-family: var(--iv-m); font-size: 11px; font-style: normal; color: var(--iv-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%;
}
.imv .imv-capture-g { display: grid; grid-template-columns: repeat(4, 1fr) }
.imv .imv-capture-g div { padding: 12px 8px; text-align: center; border-right: 1px solid var(--iv-line) }
.imv .imv-capture-g div:last-child { border-right: none }
.imv .imv-capture-g .imv-v {
  font-family: var(--iv-m); font-size: 17px; font-weight: 600; display: block;
  letter-spacing: -.03em; line-height: 1.2; color: var(--iv-ink);
}
.imv .imv-capture-g .imv-v.is-na { color: var(--iv-off) }
.imv .imv-capture-g .imv-k {
  display: block; margin-top: 4px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--iv-muted);
}

/* ============================================================
   4. METER
   ============================================================ */
.imv .imv-meter {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px; flex: 1; align-content: center;
  background: var(--iv-card); border: 1px solid var(--iv-line);
  border-radius: var(--iv-r); box-shadow: var(--iv-shadow-s);
}
.imv .imv-meter-ic {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: var(--iv-emerald-t); color: var(--iv-emerald); display: grid; place-items: center;
}
.imv .imv-meter-ic svg { width: 17px; height: 17px }
.imv .imv-meter-b { flex: 1; min-width: 150px }
.imv .imv-meter-b b { font-size: 12.5px; font-weight: 700; display: block }
.imv .imv-meter-b span { font-size: 11.5px; color: var(--iv-muted) }
.imv .imv-meter-track {
  flex: 1 1 160px; height: 8px; border-radius: 100px;
  background: var(--iv-off-t); overflow: hidden; min-width: 120px;
}
.imv .imv-meter-fill {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, #059669, #34D399); transition: width .5s ease;
}
.imv .imv-meter-val { font-family: var(--iv-m); font-size: 14px; font-weight: 700; white-space: nowrap }

/* ============================================================
   5. WEB READINESS
   ============================================================ */
.imv .imv-section-title {
  display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 24px 2px 12px;
}
.imv .imv-section-title h2 { font-size: 17px }
.imv .imv-section-title p { margin: 2px 0 0; font-size: 11.5px; color: var(--iv-muted) }

.imv .imv-insight-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px;
}
@media (max-width: 950px) { .imv .imv-insight-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 520px) { .imv .imv-insight-grid { grid-template-columns: 1fr } }
.imv .imv-insight {
  background: var(--iv-card); border: 1px solid var(--iv-line); border-radius: 14px;
  padding: 15px; box-shadow: var(--iv-shadow-s); position: relative; overflow: hidden;
}
.imv .imv-insight::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--iv-accent, var(--iv-blue));
}
.imv .imv-insight-head { display: flex; justify-content: space-between; gap: 10px; align-items: center }
.imv .imv-insight-label {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--iv-muted);
}
.imv .imv-insight-badge {
  font-size: 9.5px; font-weight: 800; padding: 3px 7px; border-radius: 100px;
  background: var(--iv-emerald-t); color: var(--iv-emerald);
}
.imv .imv-insight-badge.is-warn { background: var(--iv-amber-t); color: var(--iv-amber) }
.imv .imv-insight-badge.is-bad { background: var(--iv-rose-t); color: var(--iv-rose) }
.imv .imv-insight-value {
  font-family: var(--iv-m); font-size: 22px; font-weight: 700; letter-spacing: -.04em; margin-top: 8px;
}
.imv .imv-insight-desc { font-size: 10.5px; color: var(--iv-muted); margin-top: 3px; line-height: 1.45 }

.imv .imv-web-panel {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 12px; margin-bottom: 16px;
}
@media (max-width: 850px) { .imv .imv-web-panel { grid-template-columns: 1fr } }
.imv .imv-check-card,
.imv .imv-preset-card {
  background: var(--iv-card); border: 1px solid var(--iv-line); border-radius: 14px;
  padding: 16px; box-shadow: var(--iv-shadow-s);
}
.imv .imv-check-card h3, .imv .imv-preset-card h3 { font-size: 13px; margin-bottom: 11px }
.imv .imv-check-list { display: grid; gap: 7px }
.imv .imv-check-item {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 9px; align-items: center;
  padding: 9px 10px; border-radius: 10px; background: var(--iv-card-2); border: 1px solid var(--iv-line);
}
.imv .imv-check-icon {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: var(--iv-emerald-t); color: var(--iv-emerald);
}
.imv .imv-check-icon.is-warn { background: var(--iv-amber-t); color: var(--iv-amber) }
.imv .imv-check-icon svg { width: 13px; height: 13px }
.imv .imv-check-item b { display: block; font-size: 11.5px }
.imv .imv-check-item span { display: block; font-size: 9.8px; color: var(--iv-muted) }
.imv .imv-check-status { font-size: 9.5px; font-weight: 800; color: var(--iv-emerald) }
.imv .imv-check-status.is-warn { color: var(--iv-amber) }
.imv .imv-preset-list { display: grid; gap: 7px }
.imv .imv-preset {
  display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px;
  border-radius: 10px; border: 1px solid var(--iv-line); background: var(--iv-card-2);
}
.imv .imv-preset b { font-size: 11px }
.imv .imv-preset span { font-family: var(--iv-m); font-size: 10.5px; color: var(--iv-muted) }
.imv .imv-preset.is-active { border-color: var(--iv-blue); background: var(--iv-blue-t) }
.imv .imv-preset.is-active b, .imv .imv-preset.is-active span { color: var(--iv-blue) }

/* ============================================================
   6. SECTION CARDS
   ============================================================ */
.imv .imv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
@media (max-width: 900px) { .imv .imv-cards { grid-template-columns: 1fr } }
.imv .imv-card {
  background: var(--iv-card); border: 1px solid var(--iv-line); border-radius: var(--iv-r);
  box-shadow: var(--iv-shadow-s); overflow: hidden;
  display: flex; flex-direction: column; min-width: 0;
}
.imv .imv-card.is-full { grid-column: 1 / -1 }
.imv .imv-card-h {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px; background: var(--iv-ct); border-bottom: 1px solid var(--iv-line);
}
.imv .imv-card-ic {
  width: 32px; height: 32px; flex: none; border-radius: 9px;
  background: var(--iv-c); color: #fff; display: grid; place-items: center;
  box-shadow: var(--iv-shadow-s);
}
.imv .imv-card-ic svg { width: 16px; height: 16px }
.imv .imv-card-h h2 { font-size: 14px; letter-spacing: -.015em }
.imv .imv-card-h .imv-cnt {
  margin-left: auto; font-family: var(--iv-m); font-size: 10.5px; font-weight: 600;
  color: var(--iv-c); white-space: nowrap; padding: 3px 8px; border-radius: 100px;
  background: var(--iv-card); border: 1px solid currentColor;
}
.imv .imv-card-b { padding: 6px 16px 14px; margin: 0 }

/* field rows */
.imv .imv-field {
  display: grid; grid-template-columns: minmax(104px, .72fr) minmax(0, 1fr) 14px;
  gap: 10px; align-items: baseline; padding: 8px 0;
  border-bottom: 1px solid var(--iv-line);
}
.imv .imv-field:last-child { border-bottom: none }
.imv .imv-field dt { font-size: 12px; color: var(--iv-muted); font-weight: 600 }
.imv .imv-field dd {
  margin: 0; font-family: var(--iv-m); font-size: 12.5px;
  word-break: break-word; font-variant-numeric: tabular-nums;
}
.imv .imv-field dd.is-absent { color: var(--iv-off) }
.imv .imv-field dd.is-blocked { color: var(--iv-bad) }
.imv .imv-state { width: 7px; height: 7px; border-radius: 50%; justify-self: end; align-self: center }
.imv .imv-state.is-rec { background: var(--iv-ok) }
.imv .imv-state.is-abs { background: var(--iv-off); opacity: .4 }
.imv .imv-state.is-blk { background: var(--iv-bad) }
.imv .imv-copyable { cursor: pointer; border-radius: 4px; transition: background .12s }
.imv .imv-copyable:hover { background: var(--iv-ct) }

/* swatches + channels */
.imv .imv-swatches {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 9px; padding: 12px 0 4px;
}
.imv .imv-swatch {
  border-radius: var(--iv-r-s); overflow: hidden; border: 1px solid var(--iv-line);
  background: var(--iv-card); cursor: pointer; text-align: center; padding: 0;
  transition: transform .12s, box-shadow .12s;
}
.imv .imv-swatch:hover { transform: translateY(-2px); box-shadow: var(--iv-shadow-m) }
.imv .imv-swatch .imv-c { height: 50px; display: block }
.imv .imv-swatch .imv-h {
  display: block; padding: 6px 4px 1px; font-family: var(--iv-m); font-size: 10.5px; font-weight: 600;
}
.imv .imv-swatch .imv-p {
  display: block; padding: 0 4px 6px; font-family: var(--iv-m); font-size: 9.5px; color: var(--iv-muted);
}
.imv .imv-channels { display: flex; flex-direction: column; gap: 9px; padding: 12px 0 4px }
.imv .imv-chan { display: grid; grid-template-columns: 18px 1fr 40px; gap: 10px; align-items: center }
.imv .imv-chan .imv-n { font-family: var(--iv-m); font-size: 11px; font-weight: 700 }
.imv .imv-chan-track { height: 7px; border-radius: 100px; background: var(--iv-off-t); overflow: hidden }
.imv .imv-chan-fill { height: 100%; border-radius: 100px; transition: width .45s ease }
.imv .imv-chan .imv-cv {
  font-family: var(--iv-m); font-size: 11px; color: var(--iv-muted);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* raw table */
.imv .imv-rawwrap { overflow-x: auto; max-height: 340px; overflow-y: auto; border-top: 1px solid var(--iv-line) }
.imv table.imv-raw { border-collapse: collapse; width: 100%; font-family: var(--iv-m); font-size: 11.5px }
.imv table.imv-raw th {
  text-align: left; padding: 9px 16px; font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--iv-muted); font-weight: 700;
  background: var(--iv-card-2); border-bottom: 1px solid var(--iv-line); position: sticky; top: 0;
}
.imv table.imv-raw td { padding: 8px 16px; border-bottom: 1px solid var(--iv-line); vertical-align: top }
.imv table.imv-raw tr:last-child td { border-bottom: none }
.imv table.imv-raw td:first-child { color: var(--iv-ink-2); white-space: nowrap; font-weight: 500 }
.imv table.imv-raw td:nth-child(2) { white-space: nowrap }
.imv .imv-gtag {
  display: inline-block; font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 100px;
  background: var(--iv-slate-t); color: var(--iv-slate); letter-spacing: .04em;
}
.imv .imv-gtag.is-File { background: var(--iv-blue-t); color: var(--iv-blue) }
.imv .imv-gtag.is-Image { background: var(--iv-violet-t); color: var(--iv-violet) }
.imv .imv-gtag.is-EXIF { background: var(--iv-amber-t); color: var(--iv-amber) }
.imv .imv-gtag.is-GPS { background: var(--iv-emerald-t); color: var(--iv-emerald) }
.imv .imv-gtag.is-Colour { background: var(--iv-rose-t); color: var(--iv-rose) }

.imv .imv-disclosure {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 13px 16px; background: var(--iv-slate-t); border: none; cursor: pointer;
  font-size: 13px; font-weight: 700; color: inherit;
}
.imv .imv-disclosure .imv-caret { transition: transform .18s; font-size: 11px; color: var(--iv-slate) }
.imv .imv-disclosure[aria-expanded="true"] .imv-caret { transform: rotate(90deg) }
.imv .imv-disclosure .imv-cnt {
  margin-left: auto; font-family: var(--iv-m); font-size: 11px; color: var(--iv-muted); font-weight: 600;
}

/* notice + legend + toast */
.imv .imv-notice {
  display: flex; gap: 10px; padding: 13px 15px; border-radius: var(--iv-r);
  font-size: 12.5px; line-height: 1.5; margin-bottom: 16px; font-weight: 500;
  background: var(--iv-bad-t); color: var(--iv-bad); border: 1px solid currentColor;
}
.imv .imv-notice.is-info { background: var(--iv-amber-t); color: var(--iv-amber) }
.imv .imv-notice svg { width: 16px; height: 16px; flex: none; margin-top: 1px }

.imv .imv-legend {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  padding: 14px 16px; margin: 16px 0 8px;
  background: var(--iv-card); border: 1px solid var(--iv-line); border-radius: var(--iv-r);
  font-size: 12px; color: var(--iv-muted);
}
.imv .imv-legend b { color: var(--iv-ink); font-weight: 700 }
.imv .imv-legend i { display: inline-flex; align-items: center; gap: 6px; font-style: normal }
.imv .imv-legend i::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--iv-ok) }
.imv .imv-legend i.is-o::before { background: var(--iv-off); opacity: .4 }
.imv .imv-legend i.is-x::before { background: var(--iv-bad) }

.imv .imv-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--iv-ink); color: var(--iv-bg); padding: 10px 18px; border-radius: 100px;
  font-size: 12.5px; font-weight: 600; opacity: 0; pointer-events: none; z-index: 70;
  transition: transform .22s ease, opacity .22s ease; box-shadow: var(--iv-shadow-l);
}
.imv .imv-toast.is-show { transform: translateX(-50%) translateY(0); opacity: 1 }