/* Picture framing and device-local media shelves. */
.image-upload-dialog .upload-preview { height: 280px; padding: 12px; background: #e9eef2; border: 1px solid #d1dce5; }
.image-upload-dialog .upload-frame { position: relative; flex: none; overflow: hidden; border: 0; border-radius: 6px; outline: 2px solid #6c8aaa; background: #fff; cursor: grab; touch-action: none; user-select: none; }
.image-upload-dialog .upload-frame.is-dragging { cursor: grabbing; }
.image-upload-dialog .upload-frame > img { position: absolute; left: 0; top: 0; display: block; max-width: none; max-height: none; margin: 0; object-fit: fill; pointer-events: none; user-select: none; will-change: transform; }
.upload-frame-guides { position: absolute; inset: 0; pointer-events: none; opacity: .28; background: linear-gradient(to right,transparent calc(33.333% - .5px),#fff 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#fff 66.666%,transparent calc(66.666% + .5px)),linear-gradient(to bottom,transparent calc(33.333% - .5px),#fff 33.333%,transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#fff 66.666%,transparent calc(66.666% + .5px)); }
.image-upload-dialog .upload-framing-help { margin: 10px 0 0; font-size: 14px; color: var(--dialog-muted,#52677d); }
.image-upload-dialog .upload-framing { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 18px; margin: 18px 0 0; padding: 0; border: 0; }
.image-upload-dialog .upload-framing legend { margin-bottom: 10px; font-weight: 700; }
.image-upload-dialog .upload-framing label { display: grid; gap: 2px; min-width: 0; font-size: 15px; }
.image-upload-dialog .upload-framing label:first-of-type { grid-column: 1 / -1; }
.image-upload-dialog .upload-framing label > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.image-upload-dialog .upload-framing output { font-variant-numeric: tabular-nums; color: #425b73; }
.image-upload-dialog .upload-framing input { width: 100%; margin: 0; accent-color: #2468d4; cursor: pointer; }
.image-upload-dialog .upload-framing label:has(input:disabled) { color: #748393; }
.image-upload-dialog .upload-framing input:disabled { cursor: default; opacity: .55; }
.image-upload-dialog .upload-framing button { grid-column: 1 / -1; justify-self: start; }
.image-upload-dialog .upload-framing:disabled { opacity: .55; }
.media-library .media-views { display: flex; flex-shrink: 0; gap: 8px; padding: 0 24px 12px; }
.media-library .media-views button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px; border: 1px solid #cbd8e3; border-radius: 5px; background: #fff; color: #425b73; font-family: inherit; font-size: 16px; font-weight: 650; line-height: 1.4; }
.media-library .media-views button[aria-pressed=true] { background: #e9f2ff; border-color: #2468d4; color: #1755ad; }
.media-library .media-views svg { width: 19px; height: 19px; }
.media-library .media-picture-card { position: relative; min-width: 0; }
.media-library .media-picture-card > .media-picture { width: 100%; height: 100%; }
.media-library .media-picture-card .media-selected-mark { left: 6px; right: auto; }
.media-library .media-favorite { display: grid; place-items: center; flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid #cbd8e3; border-radius: 50%; color: #59708a; background: #ffffffed; }
.media-library .media-picture-card > .media-favorite { position: absolute; top: 17px; right: 17px; }
.media-library .media-favorite svg { width: 23px; height: 23px; }
.media-library .media-favorite[aria-pressed=true] { background: #fff3ca; color: #805b00; border-color: #d1b45d; }
.media-library .media-favorite[aria-pressed=true] svg { fill: #eac35b; }
.media-library .media-favorite:hover { border-color: #2468d4; }
.media-library .media-sound:not(:has([data-media][aria-pressed=true])) { border-color: #dde5ed; background: #fff; }
.media-library .media-device-item { display: block; margin-top: 4px; color: #52677d; font-size: 13px; font-weight: 400; }
.media-library .media-device-note { flex-shrink: 0; margin: 0; padding: 5px 24px 10px; font-size: 13px; line-height: 1.4; color: #52677d; }
.media-library .media-preference-status { flex-shrink: 0; margin: 0; padding: 0 24px 10px; font-size: 14px; line-height: 1.4; color: #425b73; }
.media-library .media-preference-status:empty { display: none; }
@media(max-width:600px) {
  .image-upload-dialog .upload-preview { height: 220px; }
  .image-upload-dialog .upload-framing { gap: 8px 12px; }
  .media-library .media-views { padding-inline: 16px; gap: 6px; overflow-x: auto; }
  .media-library .media-views button { flex-shrink: 0; padding: 8px 10px; font-size: 15px; }
  .media-library .media-device-note,.media-library .media-preference-status { padding-inline: 16px; }
  .media-library .media-picture-card > .media-favorite { top: 13px; right: 13px; }
}
html:is([data-editor-size=compact],[data-editor-size=large]) .media-library .media-views button { min-height: var(--editor-control); padding: var(--editor-pad) 12px; font-size: var(--editor-font); }