.img-page { max-width: 720px; margin: 32px auto; padding: 0 16px; }
.img-intro h1 { font-size: 1.75rem; margin: 0 0 8px; }
.img-intro p { color: var(--muted); line-height: 1.6; }
.img-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 180px;
  padding: 24px; text-align: center; cursor: pointer; border: 2px dashed var(--border); border-radius: 12px; background: var(--panel); color: var(--text); }
.img-drop small { color: var(--muted); }
.img-drop.over, .img-drop:hover { border-color: var(--primary); }
.img-error { color: var(--error); min-height: 1.4em; margin: 8px 0 0; }
.img-foot { text-align: center; padding: 24px 16px; font-size: 0.875rem; }
.img-lic { margin: 8px auto 0; max-width: 60ch; color: var(--text-secondary); font-size: 0.8rem; overflow-wrap: anywhere; }
body.img-editing .img-intro, body.img-editing .img-foot { display: none; }
body.img-editing .img-page { max-width: none; margin: 0; padding: 0; }
body.img-editing .img-editor-wrap { position: fixed; inset: var(--nav-h, 64px) 0 0 0; overflow: auto; }
mh-image-editor[hidden] { display: none; }
mh-image-editor:not([hidden]) { display: block; height: 100%; }
.img-keep { max-width: 420px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.img-keep::backdrop { background: rgba(0, 0, 0, 0.5); }
.img-keep h2 { margin: 0 0 8px; font-size: 1.25rem; }
.img-keep-actions { display: flex; flex-direction: column; gap: 8px; }
/* Own button styles: .nav-cta's colour tokens are declared only inside .nav, so outside the nav
   it rendered as bare white text (invisible on the light panel). */
.img-keep-actions .nav-cta { cursor: pointer; font: inherit; font-weight: 600; border: 0; border-radius: 10px;
  padding: 10px 18px; background: var(--color-primary); color: #fff; white-space: normal; text-align: center; }
.img-keep-actions .nav-cta:hover { filter: brightness(1.08); }
.img-keep-actions .nav-cta:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.img-keep-actions .nav-cta:disabled { opacity: 0.6; cursor: not-allowed; }
.img-keep-actions .nav-cta--ghost { background: none; border: 1px solid var(--border); color: var(--text); font-weight: 500; }
.img-link { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 8px; font: inherit; text-decoration: underline; }
.img-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
.img-drop { position: relative; }
.img-drop:focus-within { outline: 2px solid var(--primary); outline-offset: 3px; border-color: var(--primary); }