#vjtop-ref .image-custom-size-result-hidden,
#vjtop-ref [data-custom-image-crop][hidden] { display:none !important; }

#vjtop-ref dialog.custom-image-crop-container {
  box-sizing:border-box; width:min(1120px, calc(100vw - 32px)); max-width:none;
  max-height:calc(100dvh - 32px); padding:0; border:1px solid #45454c; border-radius:16px;
  background:#202024; color:#eee; box-shadow:0 24px 90px #0009; overflow:hidden;
}
#vjtop-ref dialog.custom-image-crop-container::backdrop { background:rgb(0 0 0 / 72%); }
#vjtop-ref .image-custom-size-editor {
  display:flex; flex-direction:column; width:100%; max-height:calc(100dvh - 36px);
  box-sizing:border-box; padding:20px; gap:14px; background:#202024; color:#ededee;
  font:inherit; overflow:auto;
}
#vjtop-ref .image-custom-size-heading,
#vjtop-ref .image-custom-size-actions,
#vjtop-ref .image-custom-size-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex-shrink:0; }
#vjtop-ref .image-custom-size-heading { justify-content:space-between; font-size:16px; }
#vjtop-ref .image-custom-size-heading span { color:#c4c4cd; font-size:13px; font-variant-numeric:tabular-nums; }
#vjtop-ref .image-custom-size-toolbar { font-size:13px; }
#vjtop-ref .image-custom-size-toolbar label,
#vjtop-ref .image-custom-size-ratio-fields { display:flex; align-items:center; gap:8px; }
#vjtop-ref .image-custom-size-toolbar select,
#vjtop-ref .image-custom-size-ratio-fields input {
  box-sizing:border-box; min-height:34px; border:1px solid #4a4a52; border-radius:7px;
  padding:5px 8px; background:#2b2b31; color:inherit; font:inherit;
}
#vjtop-ref .image-custom-size-toolbar select { max-width:260px; }
#vjtop-ref .image-custom-size-ratio-fields input { width:78px; }
#vjtop-ref .image-custom-size-ratio-fields[hidden] { display:none; }
#vjtop-ref .image-custom-size-zoom { margin-left:auto; }
#vjtop-ref .image-custom-size-zoom input { width:100px; accent-color:#d7d7df; }
#vjtop-ref .image-custom-size-viewport {
  position:relative; isolation:isolate; flex:1 1 auto; min-height:140px; height:min(58vh, 620px);
  overflow:auto; overscroll-behavior:contain; border-radius:9px; background:#121215;
  scrollbar-color:#62626c #1a1a1f;
}
#vjtop-ref .image-custom-size-surface {
  display:grid; place-items:center; box-sizing:border-box; padding:24px;
  width:max-content; height:max-content; min-width:100%; min-height:100%;
}
#vjtop-ref .image-custom-size-stage {
  position:relative; width:100%; line-height:0; flex:none; touch-action:none; user-select:none;
  background:repeating-conic-gradient(#303038 0% 25%, #24242c 0% 50%) 0 0 / 16px 16px;
}
#vjtop-ref .image-custom-size-source { display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:fill; pointer-events:none; }
#vjtop-ref .image-custom-size-selection {
  position:absolute; box-sizing:border-box; border:1px solid #fff; cursor:move;
  box-shadow:0 0 0 20000px rgb(0 0 0 / 58%); touch-action:none; outline-offset:-3px;
}
#vjtop-ref .image-custom-size-selection[hidden] { display:none; }
#vjtop-ref .image-custom-size-grid {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right, transparent calc(33.333% - .5px), #ffffff85 calc(33.333% - .5px), #ffffff85 calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.667% - .5px), #ffffff85 calc(66.667% - .5px), #ffffff85 calc(66.667% + .5px), transparent calc(66.667% + .5px)),
    linear-gradient(to bottom, transparent calc(33.333% - .5px), #ffffff85 calc(33.333% - .5px), #ffffff85 calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.667% - .5px), #ffffff85 calc(66.667% - .5px), #ffffff85 calc(66.667% + .5px), transparent calc(66.667% + .5px));
}
#vjtop-ref .image-custom-size-handle {
  position:absolute; z-index:1; width:32px; height:32px; min-width:0; min-height:0; padding:0; margin:0;
  border:0; border-radius:2px; background:transparent; touch-action:none; transform:none;
}
#vjtop-ref .image-custom-size-handle::after {
  content:""; position:absolute; inset:10px; background:#fff; border:1px solid #38383d;
  border-radius:2px; box-shadow:0 1px 4px #0008;
}
#vjtop-ref .image-custom-size-handle[data-corner="nw"] { left:-16px; top:-16px; cursor:nwse-resize; }
#vjtop-ref .image-custom-size-handle[data-corner="ne"] { right:-16px; top:-16px; cursor:nesw-resize; }
#vjtop-ref .image-custom-size-handle[data-corner="sw"] { left:-16px; bottom:-16px; cursor:nesw-resize; }
#vjtop-ref .image-custom-size-handle[data-corner="se"] { right:-16px; bottom:-16px; cursor:nwse-resize; }
#vjtop-ref .image-custom-size-handle[data-corner="n"] { left:calc(50% - 16px); top:-16px; cursor:ns-resize; }
#vjtop-ref .image-custom-size-handle[data-corner="s"] { left:calc(50% - 16px); bottom:-16px; cursor:ns-resize; }
#vjtop-ref .image-custom-size-handle[data-corner="w"] { left:-16px; top:calc(50% - 16px); cursor:ew-resize; }
#vjtop-ref .image-custom-size-handle[data-corner="e"] { right:-16px; top:calc(50% - 16px); cursor:ew-resize; }
#vjtop-ref .image-custom-size-handle[data-corner="n"]::after,
#vjtop-ref .image-custom-size-handle[data-corner="s"]::after { inset:13px 8px; }
#vjtop-ref .image-custom-size-handle[data-corner="w"]::after,
#vjtop-ref .image-custom-size-handle[data-corner="e"]::after { inset:8px 13px; }
#vjtop-ref .image-custom-size-selection:focus-visible,
#vjtop-ref .image-custom-size-editor :is(button, input, select):focus-visible { outline:2px solid #fff; outline-offset:2px; }
#vjtop-ref .image-custom-size-status { margin:0; min-height:1.4em; color:#bcbcc2; font-size:12px; line-height:1.5; flex-shrink:0; }
#vjtop-ref .image-custom-size-actions { justify-content:flex-end; }
#vjtop-ref .image-custom-size-actions > span { margin-right:auto; color:#a8a8b3; font-size:12px; }
#vjtop-ref .image-custom-size-actions button,
#vjtop-ref .image-custom-size-toolbar button,
#vjtop-ref .image-custom-size-fields button {
  border:1px solid #55555b; border-radius:5px; padding:5px 10px; background:#38383d;
  color:#f0f0f1; font:inherit; font-size:12px; cursor:pointer;
}
#vjtop-ref .image-custom-size-editor button { min-height:34px; }
#vjtop-ref .image-custom-size-editor .image-custom-size-handle { min-height:0; }
#vjtop-ref .image-custom-size-actions [data-crop-save] { background:#ededf1; color:#202024; border-color:#ededf1; font-weight:600; }
#vjtop-ref .image-custom-size-editor :disabled { cursor:default; opacity:.5; }
@media (max-width:600px) {
  #vjtop-ref dialog.custom-image-crop-container { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); border-radius:12px; }
  #vjtop-ref .image-custom-size-editor { padding:12px; gap:10px; max-height:calc(100dvh - 20px); }
  #vjtop-ref .image-custom-size-zoom { margin-left:0; }
  #vjtop-ref .image-custom-size-actions > span { flex-basis:100%; }
}

#vjtop-ref .image-custom-size-fields { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; color:inherit; font:inherit; }
#vjtop-ref .image-custom-size-fields[hidden] { display:none; }
#vjtop-ref .image-custom-size-fields .image-custom-size-row { display:flex; align-items:flex-end; flex-wrap:wrap; gap:8px; width:100%; }
#vjtop-ref .image-custom-size-fields label { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; font-size:11px; color:#bcbcc2; }
#vjtop-ref .image-custom-size-fields input {
  box-sizing:border-box; width:100%; min-width:0; border:1px solid #48484e; border-radius:5px;
  padding:5px 7px; background:#242427; color:#ededee; font:inherit; font-size:12px;
}
#vjtop-ref .image-custom-size-fields [data-custom-size-error] { flex-basis:100%; margin:0; color:#f3aaaa; font-size:11px; line-height:1.4; }
#vjtop-ref .image-custom-size-fields [data-custom-size-note] { flex-basis:100%; margin:0; color:#a8a8af; font-size:11px; line-height:1.4; }