.media-filters { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)) auto auto; align-items: end; }
.media-filters label { min-width: 0; }
.media-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 16px; }
.media-browser { display: grid; min-width: 0; gap: 16px; }
.media-group { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 2px rgba(17,24,39,.025); }
.media-group__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.media-group__header h2 { overflow-wrap: anywhere; }
.media-group__header p:last-child { margin: 4px 0 0; font-size: 11px; }
.media-chain { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.media-stage { position: relative; min-width: 150px; padding: 12px; border-right: 1px solid var(--border); background: #fbfcfd; }
.media-stage:last-child { border-right: 0; }
.media-stage:not(:last-child)::after { position: absolute; z-index: 2; top: 28px; right: -7px; width: 12px; height: 12px; border-top: 1px solid var(--border-strong); border-right: 1px solid var(--border-strong); background: var(--surface); content: ""; transform: rotate(45deg); }
.media-stage > header { display: flex; min-height: 28px; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.media-stage > header span { color: var(--text-muted); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.media-stage > header small { display: grid; min-width: 20px; height: 20px; place-items: center; border: 1px solid var(--border); border-radius: 999px; color: var(--text-subtle); font-size: 9px; font-variant-numeric: tabular-nums; }
.media-stage__empty { display: flex; min-height: 146px; align-items: center; justify-content: center; gap: 7px; border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--text-subtle); font-size: 11px; text-align: center; }
.media-stage__empty span { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.media-card { display: block; width: 100%; margin: 0 0 8px; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; text-align: left; }
.media-card:last-child { margin-bottom: 0; }
.media-card:hover { border-color: var(--border-strong); box-shadow: 0 2px 7px rgba(17,24,39,.08); }
.media-card[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-tint); }
.media-card__visual { display: grid; width: 100%; aspect-ratio: 3 / 2; place-items: center; overflow: hidden; border-bottom: 1px solid var(--border); background: #eef1f4; }
.media-card__visual img { width: 100%; height: 100%; object-fit: cover; }
.media-card__visual img.is-broken { display: none; }
.media-card__placeholder { color: var(--text-subtle); font-size: 10px; font-weight: 500; letter-spacing: .03em; }
.media-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; padding: 9px; }
.media-card__body strong { overflow: hidden; align-self: center; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.media-card__body .status { min-height: 19px; padding: 1px 5px; font-size: 9px; }
.media-card__body .status__mark { width: 5px; height: 5px; }
.media-card__body small { grid-column: 1 / -1; overflow: hidden; color: var(--text-subtle); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.media-inspector { position: sticky; top: 24px; min-width: 0; }
.media-inspector__backdrop { display: none; }
.media-inspector__panel { max-height: calc(100vh - 48px); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 28px rgba(17,24,39,.08); overscroll-behavior: contain; }
.media-inspector__panel > header { position: sticky; z-index: 2; top: 0; display: flex; min-height: 64px; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 14px 10px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.media-inspector__panel > header h2 { max-width: 250px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.media-inspector__preview { display: grid; min-height: 230px; place-items: center; overflow: hidden; border-bottom: 1px solid var(--border); background: #eef1f4; }
.media-inspector__preview img { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.media-inspector__preview span { color: var(--text-subtle); font-size: 11px; }
.media-inspector__facts { margin: 0; padding: 8px 14px; }
.media-inspector__facts > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.media-inspector__facts > div:last-child { border-bottom: 0; }
.media-inspector__facts dt { color: var(--text-subtle); font-size: 10px; }
.media-inspector__facts dd { min-width: 0; margin: 0; color: var(--text); font-size: 11px; overflow-wrap: anywhere; }
.media-inspector details { margin: 0 14px 14px; border-top: 1px solid var(--border); }
.media-inspector summary { min-height: 40px; padding: 11px 0; color: var(--text-muted); cursor: pointer; font-size: 11px; font-weight: 600; }
.media-inspector .code-block { max-height: 260px; }

@media (max-width: 1180px) {
  .media-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .media-filters { grid-template-columns: repeat(3, minmax(140px, 1fr)) auto auto; }
}

@media (max-width: 920px) {
  .media-layout { grid-template-columns: 1fr; }
  .media-inspector { position: fixed; z-index: 50; inset: 0; display: none; padding: 0; }
  .media-inspector.is-open { display: block; }
  .media-inspector__backdrop { position: absolute; inset: 0; display: block; background: rgba(9,13,18,.52); }
  .media-inspector__panel { position: absolute; inset: 6vh 5vw max(12px, env(safe-area-inset-bottom)); max-height: none; border-radius: 10px; }
  .media-inspector__panel > header { min-height: 68px; }
  .media-inspector__preview { min-height: 260px; }
}

@media (max-width: 760px) {
  .media-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .media-filters label { min-width: 0; }
  .media-filters .button { width: 100%; }
  .media-chain { grid-template-columns: repeat(5, minmax(170px, 1fr)); margin: 0; }
  .media-stage { min-width: 170px; }
  .media-group__header { padding: 14px; }
  .media-group__header > .status { flex: 0 0 auto; }
  .media-inspector__panel { inset: 0; border: 0; border-radius: 0; }
  .media-inspector__panel > header { padding-top: max(14px, env(safe-area-inset-top)); }
  .media-inspector__panel > header .icon-button { width: 44px; height: 44px; }
  .media-inspector__preview { min-height: min(46vh, 390px); }
}
.image-capabilities { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 0 16px; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.image-capabilities > div { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:10px; padding:11px 13px; border-right:1px solid var(--border); }
.image-capabilities > div:last-child { border-right:0; }
.image-capabilities span { display:grid; min-width:0; gap:2px; }
.image-capabilities small { color:var(--text-subtle); font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.image-capabilities strong { overflow:hidden; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }

.image-sites,.image-pages,.image-page-detail,.image-library { margin-top:20px; }
.image-sites > .section-heading,.image-pages > .section-heading,.image-library > .section-heading { padding-bottom:10px; border-bottom:1px solid var(--border); }
.image-site-row { display:grid; grid-template-columns:minmax(220px,2fr) repeat(3,minmax(74px,.45fr)) auto; min-height:66px; align-items:center; gap:14px; padding:10px 12px; border-bottom:1px solid var(--border); color:var(--text); text-decoration:none; }
.image-site-row:hover { background:var(--surface); text-decoration:none; }
.image-site-row:focus-visible,.image-page-row:focus-visible,.image-slot__preview:focus-visible { position:relative; z-index:2; outline:2px solid var(--primary); outline-offset:2px; }
.image-site-row > span { display:grid; gap:2px; }
.image-site-row > span:not(.image-site-row__main) { justify-items:end; }
.image-site-row strong { font-size:13px; font-variant-numeric:tabular-nums; }
.image-site-row small { color:var(--text-subtle); font-size:10px; }
.image-site-row__main strong { font-size:14px; }
.image-site-row__main small { font-size:11px; }

.image-context-header,.image-page-detail > header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:16px 0 12px; }
.image-context-header h2,.image-page-detail h2 { margin:1px 0 3px; }
.image-context-header p:last-child { margin:0; color:var(--text-muted); font-size:12px; }
.image-action-row { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.image-action { display:inline-flex; margin:0; }
.image-collect-form { display:grid; grid-template-columns:100px minmax(180px,.7fr) minmax(220px,1.3fr) auto; align-items:end; gap:8px; margin:0 0 18px; padding:12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.image-collect-form label { display:grid; min-width:0; gap:4px; }
.image-collect-form label > span { color:var(--text-subtle); font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.image-collect-form input,.image-collect-form select { width:100%; min-width:0; }

.image-page-list { border-top:1px solid var(--border); }
.image-page-row { display:grid; grid-template-columns:minmax(0,1fr) 90px 24px; min-height:58px; align-items:center; gap:12px; padding:8px 12px; border-bottom:1px solid var(--border); color:var(--text); text-decoration:none; }
.image-page-row:hover { background:var(--surface); text-decoration:none; }
.image-page-row > span:first-child { display:grid; min-width:0; gap:2px; }
.image-page-row strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.image-page-row small { color:var(--text-subtle); font-size:10px; }
.image-page-type { color:var(--text-muted); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }

.image-page-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; align-items:start; gap:16px; }
.image-slot-list { display:grid; gap:10px; }
.image-slot { display:grid; grid-template-columns:230px minmax(0,1fr); overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.image-slot__preview { display:block; min-height:190px; padding:0; overflow:hidden; border:0; border-right:1px solid var(--border); background:#eef1f4; cursor:pointer; }
.image-slot__preview img { display:block; width:100%; height:100%; min-height:190px; object-fit:cover; }
.image-slot__body { min-width:0; padding:13px; }
.image-slot__body > header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:9px; }
.image-slot__body > header span { display:grid; gap:2px; }
.image-slot__body > header small { color:var(--text-subtle); font-size:9px; text-transform:uppercase; letter-spacing:.05em; }
.image-slot__body > header strong { font-size:13px; text-transform:capitalize; }
.image-slot dl { display:grid; grid-template-columns:1fr 1fr; margin:0 0 11px; }
.image-slot dl > div { min-width:0; padding:6px 8px 6px 0; border-top:1px solid var(--border); }
.image-slot dt { color:var(--text-subtle); font-size:9px; }
.image-slot dd { overflow:hidden; margin:2px 0 0; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.image-slot__actions { display:flex; flex-wrap:wrap; gap:6px; }
.image-slot__actions .button { min-height:32px; padding:5px 8px; font-size:10px; }

.page-image-context { position:sticky; top:24px; padding:14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.page-image-context h3 { margin:2px 0 6px; }
.page-image-context > p:not(.eyebrow) { margin:0 0 12px; color:var(--text-muted); font-size:11px; line-height:1.5; }
.page-image-context__mosaic { display:grid; grid-template-columns:1fr 1fr; gap:4px; overflow:hidden; border-radius:var(--radius-sm); background:#eef1f4; }
.page-image-context__mosaic img { width:100%; height:82px; object-fit:cover; }

.image-library { scroll-margin-top:16px; }
.view-switch { display:inline-flex; overflow:hidden; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); }
.view-switch a { min-height:34px; padding:8px 11px; color:var(--text-muted); font-size:11px; font-weight:600; text-decoration:none; }
.view-switch a + a { border-left:1px solid var(--border); }
.view-switch a.is-active { background:var(--text); color:#fff; }
.media-card-wrap { min-width:0; }
.media-card-actions { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:-3px 0 8px; }
.media-card-actions .button { width:100%; min-height:30px; padding:4px 6px; font-size:9px; }
.media-browser--list .media-chain { display:block; overflow:visible; }
.media-browser--list .media-stage { display:grid; grid-template-columns:140px repeat(auto-fit,minmax(180px,1fr)); gap:8px; border-right:0; border-bottom:1px solid var(--border); }
.media-browser--list .media-stage::after { display:none; }
.media-browser--list .media-stage > header { align-content:start; justify-content:start; }
.media-browser--list .media-stage__empty { min-height:70px; }

* { touch-action:manipulation; }

@media (max-width:1080px) {
  .image-capabilities { grid-template-columns:1fr 1fr; }
  .image-capabilities > div:nth-child(2) { border-right:0; }
  .image-capabilities > div:nth-child(-n+2) { border-bottom:1px solid var(--border); }
  .image-page-layout { grid-template-columns:minmax(0,1fr) 230px; }
  .image-slot { grid-template-columns:190px minmax(0,1fr); }
}
@media (max-width:760px) {
  .image-capabilities { grid-template-columns:1fr; }
  .image-capabilities > div { min-height:52px; border-right:0; border-bottom:1px solid var(--border); }
  .image-capabilities > div:last-child { border-bottom:0; }
  .image-site-row { grid-template-columns:minmax(0,1fr) auto; min-height:76px; }
  .image-site-row > span:nth-child(2),.image-site-row > span:nth-child(3) { display:none; }
  .image-site-row > span:not(.image-site-row__main) { justify-items:end; }
  .image-context-header,.image-page-detail > header { align-items:stretch; flex-direction:column; }
  .image-action-row { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .image-action-row .image-action,.image-action-row .button { width:100%; }
  .image-collect-form { grid-template-columns:1fr 1fr; }
  .image-collect-form__notes,.image-collect-form > .button { grid-column:1/-1; }
  .image-collect-form input,.image-collect-form select,.image-collect-form .button { min-height:44px; }
  .image-page-layout { grid-template-columns:1fr; }
  .page-image-context { position:static; order:-1; }
  .image-slot { grid-template-columns:1fr; }
  .image-slot__preview { min-height:210px; border-right:0; border-bottom:1px solid var(--border); }
  .image-slot__preview img { min-height:210px; max-height:56vw; }
  .image-slot__actions { display:grid; grid-template-columns:1fr 1fr; }
  .image-slot__actions .image-action,.image-slot__actions .button { width:100%; min-height:44px; }
  .media-browser--list .media-stage { grid-template-columns:1fr; }
}
@media (max-width:440px) {
  .image-action-row,.image-collect-form,.image-slot__actions { grid-template-columns:1fr; }
  .image-collect-form__notes,.image-collect-form > .button { grid-column:auto; }
  .image-page-row { grid-template-columns:minmax(0,1fr) 72px 18px; padding-inline:8px; }
}

@media (max-width: 440px) {
  .media-filters { grid-template-columns: 1fr; }
}
.image-provider-form { display:grid; grid-template-columns:180px minmax(220px,1fr) minmax(220px,1fr) minmax(220px,1fr) auto; align-items:end; gap:8px; margin:0 0 18px; padding:12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.image-provider-form label { display:grid; min-width:0; gap:4px; }
.image-provider-form label > span { color:var(--text-subtle); font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.image-provider-form input,.image-provider-form select { width:100%; min-width:0; }
.image-provider-form .form-hint { grid-column:1/-1; }
@media (max-width:760px) {
  .image-provider-form { grid-template-columns:1fr 1fr; }
  .image-provider-form input,.image-provider-form select,.image-provider-form .button { min-height:44px; }
}
@media (max-width:440px) {
  .image-provider-form { grid-template-columns:1fr; }
  .image-provider-form .form-hint { grid-column:auto; }
}
.image-provider-form [hidden] { display:none !important; }

.frame-collection-task { margin-top: 1rem; }
.frame-review__bulk, .frame-next-steps {
  display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; margin: .85rem 0;
}
.frame-review__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .8rem; margin-bottom: 1rem;
}
.frame-review-card {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--surface); transition: opacity .15s ease, border-color .15s ease;
}
.frame-review-card label { display: block; cursor: pointer; position: relative; }
.frame-review-card input { position: absolute; z-index: 2; margin: .55rem; width: 1.1rem; height: 1.1rem; }
.frame-review-card img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.frame-review-card span { display: grid; gap: .2rem; padding: .65rem; }
.frame-review-card .button { margin: 0 .65rem .65rem; }
.frame-review-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.frame-review-card.is-rejected { opacity: .42; }
.image-collect-form__source { grid-column: span 2; }
@media (max-width:760px) {
  .frame-review__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .image-collect-form__source { grid-column: 1 / -1; }
}