.zr-surface{position:relative;isolation:isolate;display:grid;max-width:100%;width:fit-content;min-width:min(160px,100%)}
.zr-surface>.jc-result-media{grid-area:1/1;width:100%;margin:0}
.zr-card-focus{position:relative}
.zr-overlay{grid-area:1/1;align-self:stretch;min-width:0;pointer-events:none;position:relative;z-index:2}
.zr-footer,.zr-details{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.zr-footer{margin-top:12px;gap:4px}
.zr-button,.zr-icon,.zr-menu summary{box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;gap:6px;border:0;border-radius:7px;background:#ffffff09;color:inherit;font:inherit;text-decoration:none;line-height:1.2;cursor:pointer}
.zr-footer .zr-button,.zr-details .zr-button,.zr-footer summary{font-size:12px;min-height:31px;padding:6px 9px}
.zr-details .zr-button{font-size:11px;background:transparent;padding:2px 3px;min-height:26px}
.zr-icon,.zr-menu summary{width:31px;height:31px;padding:7px}
.zr-icon svg,.zr-button svg,.zr-menu summary svg{width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.zr-details svg{width:13px;height:13px}
.zr-button:disabled,.zr-icon:disabled{opacity:.5;cursor:default}
.zr-button:hover:not(:disabled),.zr-icon:hover:not(:disabled),.zr-menu summary:hover{background:#ffffff18;color:#fff}
.zr-saved svg{fill:#f0ebe1;stroke:#f0ebe1}
.zr-menu{position:relative}
.zr-menu summary{list-style:none}
.zr-menu summary::-webkit-details-marker{display:none}
.zr-menu-list{position:absolute;bottom:calc(100% + 7px);left:0;background:#29292e;color:#f2f2f5;border:1px solid #ffffff18;box-shadow:0 8px 28px #0007;border-radius:10px;padding:4px;min-width:120px;z-index:6}
.zr-menu-list .zr-button{background:transparent;display:flex;justify-content:flex-start;width:100%;white-space:nowrap}
.zr-dialog{box-sizing:border-box;position:fixed;inset:0;margin:auto;width:min(500px,calc(100vw - 28px));max-height:min(740px,calc(100dvh - 36px));overflow:auto;border:1px solid #44444b;border-radius:15px;padding:0;background:#232326;color:#eeeef1;font:14px/1.5 system-ui,sans-serif;color-scheme:dark;box-shadow:0 16px 64px #0007}
.zr-dialog::backdrop{background:#09090bb5}
.zr-dialog header,.zr-dialog footer{display:flex;align-items:center;justify-content:space-between;padding:15px 20px}
.zr-dialog header{border-bottom:1px solid #ffffff14}
.zr-dialog footer{justify-content:flex-end}
.zr-dialog footer:empty,.zr-status:empty{display:none}
.zr-dialog h2{font:650 18px/1.4 system-ui,sans-serif;margin:0}
.zr-dialog h3{font-size:13px;margin:18px 0 6px}
.zr-body{padding:16px 20px}
.zr-info{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:13px}
.zr-info dt,.zr-refs small{color:#aaaab1}.zr-info dd{margin:0;overflow-wrap:anywhere}
.zr-prompt{white-space:pre-wrap;overflow-wrap:anywhere;margin:5px 0;color:#dedee5}
.zr-refs{padding:0;list-style:none;display:grid;gap:6px}.zr-refs li{display:flex;align-items:center;gap:8px}
.zr-refs img{width:37px;height:37px;object-fit:cover;border-radius:6px}.zr-refs b,.zr-refs small{display:block}
.zr-replay-model{color:#b8b8bf;margin:0 0 8px}
.zr-dialog .zr-status{padding:0 20px;margin:0;color:#dedee4}
.zr-dialog footer .zr-button{background:#eeeef2;color:#202025;padding:9px 14px;font-weight:600}
.zr-button:focus-visible,.zr-icon:focus-visible,.zr-menu summary:focus-visible{outline:2px solid #c1c6e2;outline-offset:2px}
.zr-surface .jc-result-image>span{display:none!important}
.zr-icon{position:relative}
.zr-history-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:#e4e4e9}
.zr-history-actions .zr-tools,.zr-history-actions .zr-top{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.zr-history-actions .zr-button{font-size:12px;padding:7px 9px}
.zr-video-actions{display:contents}
.zr-native-reedit{display:inline-flex;gap:5px}
.jc-record .jc-result-choices{display:flex;align-items:center;gap:6px;max-width:min(100%,680px);overflow-x:auto;padding:4px 1px;margin:4px 0 0}
.jc-record .jc-result-choices button{display:block;flex:0 0 46px;width:46px;height:46px;overflow:hidden;padding:2px;border:1px solid transparent;border-radius:7px;background:transparent;cursor:pointer}
.jc-record .jc-result-choices button[aria-pressed=true]{border-color:#d5d5df}
.jc-record .jc-result-choices button img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px}
.studio-zoom .studio-zoom-content:has(.zr-zoom-tools){display:flex;max-height:92dvh;max-width:92vw;flex-direction:column;gap:8px}
.studio-zoom .studio-zoom-content:has(.zr-zoom-tools)>img{min-height:0;max-height:calc(90dvh - 90px);max-width:92vw;object-fit:contain}
.zr-zoom-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;padding:6px;color:#f4f4f7;background:#242427;border-radius:10px}
.zr-zoom-tools :is(.zr-tools,.zr-top){display:flex;align-items:center;flex-wrap:wrap;gap:3px}
.zr-zoom-tools .zr-button{min-height:30px;padding:5px 8px;font-size:12px}
@media(max-width:650px){.studio-zoom .studio-zoom-content:has(.zr-zoom-tools)>img{max-height:calc(90dvh - 160px)}}
.zr-media-menu>.zr-menu-list{top:calc(100% + 5px);right:0;left:auto;bottom:auto;min-width:132px}
.zr-media-menu>.zr-menu-list .zr-button{padding:8px 11px;font-size:12px}
.zr-top:has(.zr-media-menu[open]){z-index:8;opacity:1;pointer-events:auto}
.zb-dialog header button,.zb-dialog footer button,.zb-row button{border:1px solid #434348;border-radius:7px;padding:6px 11px;background:#2a2a2d;color:inherit;cursor:pointer;font:inherit}
.zb-dialog button:disabled{opacity:.45;cursor:wait}.zb-dialog .zr-body>p{line-height:1.6}
.zb-collection .zr-body{overflow-y:auto;max-height:58vh}.zb-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #36363c}
.zb-row img,.zb-row video{display:block;width:64px;height:64px;object-fit:contain;background:#121214;border-radius:5px}
.zb-row strong,.zb-row small{display:block}.zb-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zb-row small{color:#a8a8b2;margin-top:5px}
@media(max-width:600px){.ch-dialog-head:has(.ch-trash-entry){flex-wrap:wrap}.ch-dialog-head:has(.ch-trash-entry) .ch-favorites-entry,.ch-trash-entry{font-size:12px}}
/* Account subject forms and reference selection */
.zsub-dialog{width:min(460px,calc(100vw - 28px))}
.zsub-dialog.gf-admin{width:min(690px,calc(100vw - 28px))}
.zsub-dialog .gf-content{display:grid;gap:14px;overflow:auto;max-height:77vh}
.zsub-form,.zsub-field{display:grid;gap:8px}.zsub-form{gap:16px}
.zsub-preview{display:block;width:100%;height:132px;object-fit:contain;background:#151518;border-radius:9px}
.zsub-field{position:relative}.zsub-counter{position:absolute;right:0;top:0;font-size:12px;color:#a7a8af}
.zsub-dialog input:not([type=radio]),.zsub-dialog textarea{width:100%;box-sizing:border-box;border:1px solid #42434a;background:#222328;color:#f6f6f8;border-radius:8px;padding:10px 12px;font:inherit}
.zsub-dialog textarea{resize:vertical}.zsub-types{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;border:0}.zsub-types legend{padding:0 0 8px}
.zsub-types label{position:relative}.zsub-types input{position:absolute;opacity:0}.zsub-types span{display:block;border:1px solid #46464e;border-radius:7px;padding:5px 9px;color:#bec0c8;cursor:pointer}
.zsub-types input:checked+span{color:#fff;border-color:#a8a8bc;background:#393942}.zsub-types input:focus-visible+span{outline:2px solid currentColor}
.zsub-status{margin:0;color:#c4c4ce;font-size:13px}.zsub-status:empty{display:none}.zsub-form>.gf-primary{justify-self:end}
.zsub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.zsub-card{appearance:none;min-width:0;text-align:left;border:1px solid #3a3a40;border-radius:10px;overflow:hidden;background:#242429;color:#f6f6f9;padding:0 0 8px;cursor:pointer}
.zsub-card:hover,.zsub-card:focus-visible{border-color:#a6a6b7}.zsub-card img{display:block;width:100%;aspect-ratio:4 / 3;object-fit:cover;background:#19191c;margin-bottom:7px}.zsub-card strong,.zsub-card small{display:block;padding:0 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zsub-card small{color:#b9b9c1}
.zsub-dialog button[hidden]{display:none}
.zr-model-choices{display:grid;gap:4px}.zr-model-choices .zr-button{justify-content:flex-start;padding:9px 11px;width:100%}.zr-model-choices .zr-button small{margin-left:auto;color:#adaeb8;font-size:11px}

/* The image and video own the visual weight. Tools share one low-profile surface. */
.zr-overlay :is(.zr-top,.zr-tools) {
  --zr-rise: 3px;
  --zr-action-size: 32px;
  position:absolute;
  right:8px;
  display:flex;
  align-items:center;
  gap:1px;
  box-sizing:border-box;
  padding:1px;
  border:1px solid rgb(224 228 242 / 7%);
  border-radius:8px;
  background:rgb(29 29 32 / 85%);
  color:#f0f0f3;
  box-shadow:0 1px 5px #0002;
  opacity:0;
  pointer-events:none;
  translate:0 var(--zr-rise);
  transition:opacity .15s ease, translate .19s var(--za-response-ease,cubic-bezier(.16,1,.3,1));
}
.zr-overlay .zr-top {top:8px;--zr-rise:-2px}
.zr-overlay .zr-tools {bottom:8px;max-width:calc(100% - 16px)}
/* Browser-native playback controls stay usable underneath the video tools. */
.zr-surface:has(video[controls]) .zr-tools {bottom:48px}
.zr-surface:is(:hover,:focus-within) .zr-overlay :is(.zr-top,.zr-tools),
.zr-surface:has(.zr-menu[open]) .zr-overlay :is(.zr-top,.zr-tools) {opacity:1;pointer-events:auto;translate:0}
.zr-overlay [hidden] {display:none!important}
.zr-visible-tools {display:contents}
.zr-overlay :is(.zr-top,.zr-tools) :is(.zr-icon,.zr-menu>summary),
.zr-overlay .zr-menu-list .zr-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-width:0;
  min-height:0;
  width:var(--zr-action-size);
  height:var(--zr-action-size);
  flex:none;
  padding:0;
  border:0;
  border-radius:6px;
  color:inherit;
  background:transparent;
  box-shadow:none;
  text-decoration:none;
  transition:background-color .14s ease, color .14s ease, scale .16s var(--za-response-ease,ease);
}
.zr-overlay :is(.zr-top,.zr-tools) :is(.zr-icon,.zr-menu>summary) svg {
  width:19px;
  height:19px;
  stroke-width:1.75;
  flex:none;
  transition:transform .18s var(--za-response-ease,ease);
}
.zr-overlay :is(.zr-top,.zr-tools) :is(.zr-icon,.zr-menu>summary):is(:hover,:focus-visible),
.zr-overlay .zr-menu[open]>summary {background:#ffffff16;color:white}
.zr-overlay :is(.zr-icon,.zr-menu>summary):not(:disabled):active {scale:.94}
.zr-overlay :is(.zr-top,.zr-tools) :is(.zr-icon,.zr-menu>summary):focus-visible {outline:2px solid #c5cbed;outline-offset:-2px}
.zr-overlay :is(.zr-top,.zr-tools) .zr-saved svg {fill:#f2f0ed;stroke:#f2f0ed}
.zr-tooltip {
  position:fixed;
  z-index:11000;
  max-width:calc(100vw - 12px);
  box-sizing:border-box;
  padding:7px 13px;
  border:1px solid rgb(255 255 255 / 7%);
  border-radius:8px;
  color:#f5f5f7;
  background:#38383c;
  box-shadow:0 4px 14px #0004;
  font:500 12px/20px Inter,"Segoe UI","Microsoft YaHei",sans-serif;
  white-space:nowrap;
  pointer-events:none;
  animation:zr-tip-in .14s ease-out;
}
@keyframes zr-tip-in {from {opacity:0;translate:0 2px} to {opacity:1;translate:0}}
.zr-menu-list {
  z-index:9;
  box-sizing:border-box;
  padding:5px;
  min-width:155px;
  max-width:calc(100vw - 24px);
  border:1px solid rgb(204 221 255 / 11%);
  border-radius:12px;
  color:#e9e9ef;
  background:linear-gradient(150deg,#2c2c31,#242428 76%);
  box-shadow:0 12px 32px #0005,inset 0 1px #ffffff05;
  transform-origin:left bottom;
}
.zr-menu[open]>.zr-menu-list {animation:zr-menu-in .18s var(--za-response-ease,ease)}
@keyframes zr-menu-in {from {opacity:0;transform:translateY(3px) scale(.98)} to {opacity:1;transform:translateY(0) scale(1)}}
.zr-menu .zr-menu-list .zr-button,
.zr-overlay .zr-tools .zr-overflow-list .zr-icon {
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:10px;
  width:100%;
  height:auto;
  min-height:34px;
  padding:6px 10px;
  border:0;
  border-radius:7px;
  color:inherit;
  font:500 12px/1.45 Inter,"Segoe UI","Microsoft YaHei",sans-serif;
  text-align:left;
  white-space:nowrap;
  background:transparent;
}
.zr-menu-list .zr-button svg,.zr-menu .zr-overflow-list .zr-icon svg {width:16px;height:16px;flex:none}
.zr-menu-list .zr-button:is(:hover,:focus-visible),.zr-overlay .zr-tools .zr-overflow-list .zr-icon:is(:hover,:focus-visible) {background:#ffffff10;color:#fff}
.zr-menu-list .zr-button.zr-destructive {color:#edb8b8}
.zr-media-menu>.zr-menu-list {min-width:164px;top:calc(100% + 7px);transform-origin:top right}
.zr-overflow-list {left:auto;right:0;bottom:calc(100% + 7px);max-height:min(340px,48dvh);overflow:auto;overscroll-behavior:contain;transform-origin:bottom right}
.zr-tools .zr-overflow-list .zr-icon::after {content:attr(aria-label)}
.zr-tool-overflow>summary span {display:none}
.zr-visible-tools+.zr-tool-overflow,.zr-tool-overflow:not([hidden]) {order:200}
.zr-footer>.zr-button,.zr-footer .zr-native-reedit>.zr-button {
  min-height:32px;padding:5px 10px;gap:5px;border:0;border-radius:8px;
  background:rgb(255 255 255 / 8%);color:#e9e9ed;font-size:12px;font-weight:540;
}
.zr-footer .zr-menu>summary {width:32px;height:32px;min-width:32px;padding:0;background:transparent}
.zr-footer .zr-button svg,.zr-footer summary svg {width:16px;height:16px}
.zr-footer .zr-button,.zr-footer .zr-menu>summary,.zr-details .zr-button {
  transition:background-color .15s,color .15s,scale .16s var(--za-response-ease,ease);
}
.zr-footer .zr-button:not(:disabled):hover,.zr-footer .zr-menu>summary:hover {background:#ffffff20}
.zr-footer :is(.zr-button,summary):not(:disabled):active {scale:.97}
.zr-footer .zr-native-reedit {gap:4px}
.zr-details .zr-button {gap:5px;color:#b7b8c2}
.zr-dialog,.zw-image-editor[open] {
  border:1px solid rgb(198 201 224 / 16%);
  border-radius:18px;
  background:linear-gradient(145deg,#26262c 0,#202024 42%,#202023 100%);
  box-shadow:0 24px 80px #0007,0 5px 16px #0003,inset 0 1px #ffffff08;
}
.zr-dialog[open],.zw-image-editor[open] {animation:zr-dialog-in .23s var(--za-response-ease,cubic-bezier(.16,1,.3,1))}
.zr-dialog[open]::backdrop,.zw-image-editor[open]::backdrop {background:#0b0b1199;animation:zr-backdrop-in .18s ease-out}
@keyframes zr-dialog-in {from {opacity:0;transform:translateY(6px) scale(.985)} to {opacity:1;transform:none}}
@keyframes zr-backdrop-in {from {opacity:0} to {opacity:1}}
.zr-dialog header>.zr-icon,.zw-image-editor button.ie-close {
  display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;
  padding:0;border:0;border-radius:9px;background:transparent;color:#bfc0c8;
}
.zw-image-editor button.ie-close svg {width:18px;height:18px}
.zr-dialog header>.zr-icon:hover,.zw-image-editor button.ie-close:hover {background:#ffffff0e;color:white}
.zw-image-editor .ie-row button.ie-extra {
  display:inline-flex;align-items:center;gap:6px;min-height:32px;
  padding:5px 10px;border:1px solid #ffffff12;border-radius:9px;background:#ffffff06;color:#e5e5eb;font-size:12px;
}
.zw-image-editor .ie-row .ie-extra svg {width:15px;height:15px}
.zw-image-editor .ie-row button.ie-extra:not(:disabled):hover {border-color:#b9bed349;background:#ffffff0d}
.zr-dialog .zr-model-choices {gap:3px}
.zr-model-choices .zr-button {min-height:39px;gap:10px;padding:8px 11px;border-radius:9px;background:transparent}
.zr-model-choices .zr-button:is(:hover,:focus-visible) {background:#ffffff0d}
.zr-model-choices .zr-button small {font-weight:500;color:#b0b4c6}
.zw-image-editor[open] textarea {
  padding:10px 12px;border:1px solid #ffffff24;border-radius:11px;background:#17171c;color:#ededf2;
  transition:background-color .17s,border-color .17s;
}
.zw-image-editor[open] textarea:focus-visible {outline:2px solid #bcc4ed;outline-offset:2px;border-color:transparent}
.zw-image-editor[open] .ie-stage {border-radius:12px;background:#17171a}
.zw-image-editor footer button.ie-primary,.zr-dialog footer .zr-button {
  min-height:36px;padding:7px 15px;border:1px solid #ffffff32;border-radius:10px;
  background:#edecf1;color:#232329;font-weight:600;white-space:nowrap;
}
.zw-image-editor footer button.ie-primary:not(:disabled):hover,.zr-dialog footer .zr-button:not(:disabled):hover {background:#fff;color:#17171b}
.zw-image-editor :is(button.ie-extra,button.ie-close,button.ie-primary),.zr-dialog :is(.zr-button,.zr-icon) {
  transition:background-color .15s,border-color .15s,color .15s,scale .18s var(--za-response-ease,ease);
}
.zw-image-editor :is(button.ie-extra,button.ie-close,button.ie-primary):not(:disabled):active,.zr-dialog .zr-button:not(:disabled):active {scale:.97}
@media(hover:none) {
  .zr-surface .zr-overlay :is(.zr-top,.zr-tools) {--zr-action-size:44px;opacity:1;pointer-events:auto;translate:0}
  .zr-overlay .zr-tools .zr-tool-overflow>summary {width:auto;padding:0 10px;gap:6px;white-space:nowrap}
  .zr-tool-overflow>summary span {display:inline;font-size:12px}
  .zr-menu .zr-menu-list .zr-button,.zr-overlay .zr-tools .zr-overflow-list .zr-icon {min-height:44px}
}
@media(prefers-reduced-motion:reduce) {
  .zr-surface .zr-overlay :is(.zr-top,.zr-tools),.zr-overlay *, .zr-footer *, .zr-dialog *,
  .zr-dialog[open],.zr-dialog::backdrop,.zw-image-editor[open],.zw-image-editor::backdrop,
  .zw-image-editor :is(button.ie-extra,button.ie-close,button.ie-primary),.zr-tooltip {
    animation:none!important;transition:none!important;translate:none!important
  }
  .zr-overlay :is(.zr-icon,summary):active,.zr-footer :is(.zr-button,summary):active,
  .zr-dialog .zr-button:active,.zw-image-editor :is(button.ie-extra,button.ie-close,button.ie-primary):active {scale:1!important}
}

/* Keep compact composer selectors in the same family as the result editor. */
.jc-studio .jc-model-mode-pair .ui-select>.ui-select-trigger,
.jc-studio .jc-controls .jm-control>summary {border-radius:9px}
.jc-studio :is(.jc-model-option,.jc-model-family) {border-radius:10px}
.jc-studio .jc-model-option:is(:focus-visible,:hover),.jc-studio .jc-model-family:is(:focus-visible,:hover) {
  background:#ffffff0d;
}
body:has(.jc-studio) .ui-select-popover {
  border-color:rgb(204 211 239 / 15%);border-radius:13px;
  background:linear-gradient(145deg,#2d2d32,#242428 80%);
  box-shadow:0 12px 36px #0005,0 3px 9px #0002,inset 0 1px #ffffff08;
}
body:has(.jc-studio) .ui-select-popover .ui-select-option {border-radius:8px}
body:has(.jc-studio) .ui-select-popover .ui-select-option.is-selected:not(.is-disabled) {background:#b2b5d318}
body:has(.jc-studio) .ui-select-popover .ui-select-option.is-active:not(.is-disabled) {background:#ffffff11}
body:has(.jc-studio) .ui-select-popover .ui-select-option.is-selected.is-active {background:#b2b5d324}

/* The image and video panels share their anchor and use separate controls. */
#jm-ratio-panel:has(.jc-resolution-options) {
  padding: 16px;
  background: #242428;
  border-color: #ffffff18;
  border-radius: 16px;
  color: #e1e1e6;
}

#jm-ratio-panel .jc-popover-title {
  padding: 0;
  margin: 0 0 8px;
  color: #b9b9c1;
  font-size: 12px;
  font-weight: 550;
  line-height: 18px;
}
#jm-ratio-panel .jc-section-title:not(:first-child) { margin-top: 14px; }
#jm-ratio-panel .jc-popover-title:last-child { margin-bottom: 0; }

#jm-ratio-panel .jc-ratio-grid,
#jm-ratio-panel .jc-resolution-options {
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: #ffffff07;
}
#jm-ratio-panel .jc-ratio-grid {
  grid-template-columns: repeat(auto-fit, minmax(43px, 1fr));
}
#jm-ratio-panel .jc-ratio-grid > button {
  display: grid;
  grid-template-rows: 20px 16px;
  place-items: center;
  align-content: center;
  gap: 4px;
  height: 56px;
  padding: 0 2px;
  font-variant-numeric: tabular-nums;
}
#jm-ratio-panel .jc-ratio-shape {
  border-width: 1.3px;
  border-radius: 2px;
}
#jm-ratio-panel .jc-ratio-grid > button > .ui-icon { width: 19px; height: 19px; }
#jm-ratio-panel .jc-resolution-options > button { min-width: 0; min-height: 32px; padding: 4px; }
#jm-ratio-panel :is(.jc-ratio-grid, .jc-resolution-options) > button {
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: #c4c4cb;
  font-size: 12px;
  line-height: 16px;
  transition: background-color 150ms ease, color 150ms ease;
}
#jm-ratio-panel .jc-resolution-options > button { font-size: 13px; }
#jm-ratio-panel :is(.jc-ratio-grid, .jc-resolution-options) > button:hover:not(:disabled) { background: #ffffff0a; color: #f0f0f3; }
#jm-ratio-panel :is(.jc-ratio-grid, .jc-resolution-options) > button[aria-pressed=true] {
  background: #444449;
  box-shadow: inset 0 1px 0 #ffffff0a, 0 1px 3px #0003;
  color: #fff;
}
#jm-ratio-panel :is(.jc-ratio-grid, .jc-resolution-options) > button:focus-visible,
#jm-ratio-panel .jc-size-lock:focus-visible,
#jm-ratio-panel .jc-dimensions label:has(input:not(:read-only):focus-visible) {
  outline: 2px solid #b9bad4;
  outline-offset: -2px;
}
#jm-ratio-panel .jc-dimensions { gap: 10px; }
#jm-ratio-panel .jc-dimensions label { min-height: 36px; box-sizing: border-box; padding: 6px 10px; background: #ffffff07; }
#jm-ratio-panel .jc-dimensions input { font-variant-numeric: tabular-nums; }

#jm-ratio-panel .jc-size-lock {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #aaaab4;
}
#jm-ratio-panel .jc-size-lock[aria-pressed=true] { color: #dedee5; }
#jm-ratio-panel .jc-size-lock:hover:not(:disabled) { background: #ffffff0a; }
#jm-ratio-panel .jc-size-lock:disabled,
#jm-ratio-panel .jc-dimensions label:has(input:disabled),
#jm-ratio-panel .jc-resolution-options > button:disabled { opacity: .38; cursor: default; }

@media (max-width: 540px) {
  #jm-ratio-panel:has(.jc-resolution-options) { padding: 12px; }
  #jm-ratio-panel .jc-ratio-grid { grid-template-columns: repeat(auto-fit, minmax(max(44px, calc((100% - 8px) / 5)), 1fr)); }
  #jm-ratio-panel .jc-resolution-options > button { min-height: 40px; }
  #jm-ratio-panel .jc-dimensions { gap: 6px; }
  #jm-ratio-panel .jc-size-lock { flex-basis: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  #jm-ratio-panel :is(.jc-ratio-grid, .jc-resolution-options) > button { transition: none; }
}