.rgt-tool{max-width:960px;margin:16px auto}
.rgt-drop{border:2px dashed #d9d9d9;border-radius:10px;padding:24px 16px;text-align:center;background:#fff;margin-bottom:14px}
.rgt-drop-sub{margin-top:10px;color:#666}
.rgt-drop-note{margin-top:16px;color:#222;opacity:.85;line-height:1.45;font-size:13px}
.rgt-drop.dragover{background:#f7f7ff;border-color:#4f67f3}
.rgt-error{margin-top:12px;color:#b00020;font-size:14px}

/* Center picked thumbs */
.rgt-picked{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.rgt-picked > div{max-width:100%}

/* Force horizontal picked previews (themes sometimes override flex with !important) */
.rgt-tool .rgt-picked-grid{
  display:flex;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
}
.rgt-tool .rgt-picked-item{display:flex !important;flex-direction:column !important;align-items:center !important;gap:6px !important}
.rgt-tool .rgt-picked-thumb{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid #eee;display:block}
.rgt-tool .rgt-picked-remove{display:inline-block}

/* JPG→PDF ordering UI */
.rgt-tool .rgt-picked-item.rgt-dragging{opacity:.55}
.rgt-tool .rgt-picked-item.rgt-dragover{outline:2px dashed #d9d9d9;outline-offset:4px;border-radius:12px}
.rgt-tool .rgt-page-badge{font-size:12px;opacity:.85}

/* JPG→PDF: Up/Down order buttons (force visible even if theme styles buttons white-on-white) */
.rgt-tool .rgt-order-row{display:flex;gap:6px;align-items:center}
.rgt-tool .rgt-order-row .rgt-order-up,
.rgt-tool .rgt-order-row .rgt-order-down{
  color:#222 !important;
  background:#f5f5f5 !important;
  border:1px solid #cfcfcf !important;
  border-radius:8px !important;
  padding:4px 10px !important;
  line-height:1 !important;
  font-weight:700 !important;
}
.rgt-tool .rgt-order-row .rgt-order-up:hover,
.rgt-tool .rgt-order-row .rgt-order-down:hover{
  background:#ededed !important;
}
.rgt-tool .rgt-order-row .rgt-order-up:focus,
.rgt-tool .rgt-order-row .rgt-order-down:focus{
  outline:2px solid rgba(0,0,0,.18) !important;
  outline-offset:2px !important;
}

/* Center Process button + spacing (no colors/fonts) */
.rgt-actions-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;align-items:center;margin-top:14px}
.rgt-actions-row button{margin:0 !important}
.rgt-action-btn{display:inline-flex;margin:0}

/* Processing spinner */
.rgt-action-btn .rgt-spinner{width:16px;height:16px;box-sizing:border-box;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;margin-left:8px;animation:rgtspin .8s linear infinite}
@keyframes rgtspin{to{transform:rotate(360deg)}}

.rgt-panel{margin:12px 0;text-align:center}
/* Match section title weight to box headers (less shouty) */
.rgt-panel-title{font-size:15px;font-weight:600;margin:2px 0 10px}
.rgt-radio-row{display:flex;gap:36px;justify-content:center;align-items:center;flex-wrap:wrap}
.rgt-radio-row label{font-size:18px}

.rgt-range{width:min(520px,90%);margin:18px auto;display:block}
.rgt-percent-text{font-size:22px;margin-top:6px}
.rgt-percent-text .rgt-pct{color:#6aa700}

/* Resizer panel */
.rgt-resize-panel{padding:10px 8px}
.rgt-resize-layout{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;max-width:920px;margin:0 auto}
.rgt-resize-box{border:1px solid #eee;border-radius:12px;background:#fff;padding:10px}
.rgt-subtitle{font-size:15px;font-weight:600;margin:2px 0 10px}
.rgt-resize-hint{margin-top:8px;color:#666;font-size:14px}
.rgt-resize-grid{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}
.rgt-field{display:flex;flex-direction:column;gap:6px;min-width:180px;align-items:center}
.rgt-field-label{font-size:14px;color:#333}
.rgt-select{padding:8px 10px;border:1px solid #ddd;border-radius:8px;min-width:220px;max-width:100%}
.rgt-check{display:flex;gap:8px;align-items:center;font-size:15px;white-space:nowrap}
.rgt-color{width:70px;height:40px;padding:0;border:1px solid #ddd;border-radius:8px}

.rgt-dims-row{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:nowrap}
.rgt-dims-row input{padding:8px 10px;border:1px solid #ddd;border-radius:8px;min-width:110px;width:110px}
.rgt-dims-x{font-size:18px;line-height:1;opacity:.55;user-select:none}

/* Resizer layout tweaks */
.rgt-resize-box .rgt-select{min-width:100%}
.rgt-resize-box .rgt-dims-row input{min-width:110px;width:110px}

/* Inline "Fit" label + dropdown */
.rgt-field-inline{flex-direction:row;gap:10px;justify-content:center}
.rgt-field-inline .rgt-select{min-width:180px;width:auto}

/* Left box: keep sub-options centered (Lock/Don't enlarge + Fit) */
.rgt-resize-box-left .rgt-resize-grid{justify-content:center}
.rgt-resize-box-left .rgt-field{align-items:center}

/* Right box: align fields nicely */
.rgt-resize-box-right .rgt-resize-grid{justify-content:flex-start}
.rgt-resize-box-right .rgt-field{align-items:flex-start}

.rgt-resize-box .rgt-check{align-items:center}

@media (max-width: 740px){
  .rgt-resize-layout{grid-template-columns:1fr}
  .rgt-radio-row{gap:18px}
  .rgt-select{min-width:unset;width:100%}
  .rgt-field{min-width:unset;width:100%}
  /* Keep WxH on one line and keep the "×" visible on mobile */
  .rgt-dims-row{flex-wrap:nowrap;gap:6px}
  .rgt-dims-row input{min-width:0;width:96px;padding:7px 8px;font-size:14px}
  .rgt-dims-x{display:inline-block}
}

.rgt-results{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.rgt-card{border:1px solid #eee;border-radius:10px;padding:12px;background:#fff}

/* Preview block (NOT a button) */
.rgt-thumb{width:100%;height:160px;border-radius:10px;border:1px solid #eee;margin-bottom:10px;background-size:cover;background-position:center;background-repeat:no-repeat}

/* --- Output Options: make the "Advanced options" toggle obvious + always visible --- */
.rgt-output-panel{max-width:920px;margin:12px auto 0}
.rgt-output-panel .rgt-panel-toggle{display:flex !important;justify-content:center;align-items:center;gap:8px;padding:6px 10px;margin:0 0 10px;border:1px solid #eee;border-radius:10px;background:#fafafa;color:#333;font-size:14px;font-weight:600;cursor:pointer}
.rgt-output-panel .rgt-panel-toggle-label{display:inline-block;color:#333;font-size:14px;font-weight:600}
.rgt-output-panel .rgt-panel-toggle-icon::before{content:"▾";display:inline-block;font-size:13px;color:#777;transition:transform .15s ease}
.rgt-output-panel.rgt-collapsed .rgt-panel-toggle-icon::before{transform:rotate(-90deg)}
.rgt-output-panel.rgt-collapsed .rgt-output-body{display:none}

.rgt-results-actions{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}

/* --- Compressor UI --- */
.rgt-compress-results{display:block}
.rgt-compress-summary{text-align:center;margin:10px 0 14px}
.rgt-compress-summary-big{font-size:22px;font-weight:700;line-height:1.1}
.rgt-compress-summary-sub{font-size:13px;color:#666;margin-top:4px}

.rgt-compress-card{max-width:1100px;margin:0 auto 12px}
.rgt-compress-name{font-size:16px;font-weight:600;text-align:center;margin-bottom:6px;word-break:break-word}
.rgt-compress-meta{font-size:13px;color:#444;text-align:center;margin-bottom:10px}
.rgt-compress-meta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.rgt-compare{margin:0 auto 10px;max-width:920px}
.rgt-compare-wrap{position:relative;width:100%;height:300px;border:1px solid #eee;border-radius:10px;overflow:hidden !important;background:#fafafa}
/* allow dragging compare slider on touch devices */
.rgt-compare-wrap{touch-action:none;user-select:none;-webkit-user-select:none}
.rgt-compare-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;transform-origin:center center}
/* let pointer events hit the wrapper for smooth dragging */
.rgt-compare-img{pointer-events:none}
.rgt-compare-after-wrap{position:absolute;top:0;left:0;height:100%;overflow:hidden;background:#fff}
.rgt-compare-range{position:absolute;left:24px;right:24px;bottom:10px;width:calc(100% - 48px)}

.rgt-zoom-row{display:flex;justify-content:center;align-items:center;gap:8px;margin:10px 0 0}
.rgt-zoom-row button{min-width:38px;height:32px;display:inline-flex;align-items:center;justify-content:center}
.rgt-zoom-label{font-size:13px;color:#555;min-width:56px;text-align:center}

.rgt-compress-controls{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.rgt-quality-wrap{display:flex;align-items:center;gap:10px;flex:1 1 520px;justify-content:center}
.rgt-quality-label{font-size:13px;color:#333;font-weight:600;min-width:60px;text-align:right}
.rgt-quality-range{width:min(420px,75vw)}
.rgt-quality-num{width:70px;padding:7px 8px;border:1px solid #ddd;border-radius:8px;text-align:center}
.rgt-compress-actions{display:flex;gap:10px;justify-content:center;flex:0 0 auto}

.rgt-progress{margin-top:12px;border:1px solid #eee;border-radius:999px;overflow:hidden;height:12px;background:#f3f3f3}
.rgt-progress-bar{height:100%;width:40%;background:#d9d9d9;animation:rgtbar 1s ease-in-out infinite}
@keyframes rgtbar{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}

@media (max-width:740px){
  .rgt-compare-wrap{height:240px}
  .rgt-compress-controls{gap:10px}
  .rgt-quality-wrap{flex:1 1 100%}
  .rgt-quality-label{text-align:left;min-width:50px}
}

/* Output options panel (all tools) */
.rgt-output-panel{padding:8px 8px}

/* Collapsible Output Options */
.rgt-panel-toggle{width:100%;display:flex;justify-content:center;align-items:center;gap:10px;background:transparent;border:0;padding:0;margin:6px 0 10px;font-size:16px;font-weight:600;cursor:pointer}
.rgt-panel-toggle-icon::before{content:"▾";display:inline-block;font-size:14px;color:#777;transition:transform .15s ease}
.rgt-output-panel.rgt-collapsed .rgt-panel-toggle-icon::before{transform:rotate(-90deg)}
.rgt-output-panel.rgt-collapsed .rgt-output-body{display:none}

/* Collapsible Output Options */
.rgt-panel-toggle{width:100%;display:flex;justify-content:center;align-items:center;gap:10px;background:transparent;border:0;padding:0;margin:6px 0 10px;font-size:16px;font-weight:600;cursor:pointer}
.rgt-panel-toggle-icon::before{content:"▾";display:inline-block;font-size:14px;color:#777;transition:transform .15s ease}
.rgt-output-panel.rgt-collapsed .rgt-panel-toggle-icon::before{transform:rotate(-90deg)}
.rgt-output-panel.rgt-collapsed .rgt-output-body{display:none}


/* Collapsible Output Options */
.rgt-panel-toggle{width:100%;display:flex;justify-content:center;align-items:center;gap:10px;background:transparent;border:0;padding:0;margin:6px 0 10px;font-size:16px;font-weight:600;cursor:pointer}
.rgt-panel-toggle:focus{outline:2px solid rgba(0,0,0,.15);outline-offset:4px;border-radius:8px}
.rgt-panel-toggle-icon::before{content:"▾";display:inline-block;font-size:14px;color:#777;transition:transform .15s ease}
.rgt-output-panel.rgt-collapsed .rgt-panel-toggle-icon::before{transform:rotate(-90deg)}
.rgt-output-panel.rgt-collapsed .rgt-output-body{display:none}

/* Collapsible Output Options */
.rgt-panel-toggle{width:100%;display:flex;justify-content:center;align-items:center;gap:10px;background:transparent;border:0;padding:0;margin:6px 0 10px;font-size:16px;font-weight:600;cursor:pointer}
.rgt-panel-toggle:focus{outline:2px solid rgba(0,0,0,.15);outline-offset:4px;border-radius:8px}
.rgt-panel-toggle-icon::before{content:"▾";display:inline-block;font-size:14px;color:#777;transition:transform .15s ease}
.rgt-output-panel.rgt-collapsed .rgt-panel-toggle-icon::before{transform:rotate(-90deg)}
.rgt-output-panel.rgt-collapsed .rgt-output-body{display:none}

/* Collapsible Output Options */
.rgt-panel-toggle{width:100%;display:flex;justify-content:center;align-items:center;gap:10px;background:transparent;border:0;padding:0;margin:6px 0 10px;font-size:16px;font-weight:600;cursor:pointer}
.rgt-panel-toggle:focus{outline:2px solid rgba(0,0,0,.15);outline-offset:4px;border-radius:8px}
.rgt-panel-toggle-icon::before{content:"▾";display:inline-block;font-size:14px;color:#777;transition:transform .15s ease}
.rgt-output-panel.rgt-collapsed .rgt-panel-toggle-icon::before{transform:rotate(-90deg)}
.rgt-output-panel.rgt-collapsed .rgt-output-body{display:none}

.rgt-output-grid{
  display:flex;
  max-width:920px;
  margin:0 auto;
  text-align:center;
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  position:relative;
  align-items:stretch;
}
.rgt-output-grid:before{
  content:"";
  position:absolute;
  top:14px;
  bottom:14px;
  left:50%;
  border-left:2px dotted #ddd;
  transform:translateX(-1px);
  pointer-events:none;
}
.rgt-output-col{
  flex:1 1 320px;
  padding:12px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.rgt-output-col + .rgt-output-col{border-left:none}
.rgt-output-panel .rgt-check{font-size:15px}
.rgt-output-panel .rgt-field{min-width:unset;width:100%;align-items:center;font-size:15px;text-align:center}
.rgt-output-help-inline{margin-top:6px;color:#666;font-size:12px;line-height:1.4;max-width:420px}

@media (max-width:740px){
  .rgt-output-grid{flex-direction:column}
  .rgt-output-grid:before{display:none}
  .rgt-output-col + .rgt-output-col{border-left:none;border-top:2px dotted #ddd}
  /* Mobile: reduce padding so Process button stays above the fold */
  .rgt-output-col{padding:6px 10px;justify-content:flex-start;flex:0 0 auto}
  /* Reset desktop flex-basis so stacked cells do not become tall on mobile */
  .rgt-output-help-inline{font-size:11px}
  .rgt-output-panel{margin-top:8px}
}

/* Mobile: tighten help spacing inside advanced options */
@media (max-width:740px){
  .rgt-output-help-inline{margin-top:4px;line-height:1.25}
  .rgt-output-panel .rgt-field{gap:4px}
}


/* Keep resizer mode radios on one line on desktop */
@media (min-width: 741px){
  .rgt-resize-panel .rgt-radio-row{flex-wrap:nowrap;gap:22px}
  .rgt-resize-panel .rgt-radio-row label{font-size:16px}
}

/* Collapsible Output Options */
.rgt-panel-toggle{width:100%;display:flex;justify-content:center;align-items:center;gap:10px;background:transparent;border:0;padding:0;margin:6px 0 10px;font-size:16px;font-weight:600;cursor:pointer}
.rgt-panel-toggle-icon::before{content:"▾";display:inline-block;font-size:14px;color:#777;transition:transform .15s ease}
.rgt-output-panel.rgt-collapsed .rgt-panel-toggle-icon::before{transform:rotate(-90deg)}
.rgt-output-panel.rgt-collapsed .rgt-output-body{display:none}

/* Collapsible Output Options */
.rgt-panel-toggle{width:100%;display:flex;justify-content:center;align-items:center;gap:10px;background:transparent;border:0;padding:0;margin:6px 0 10px;font-size:16px;font-weight:600;cursor:pointer}
.rgt-panel-toggle:focus{outline:2px solid rgba(0,0,0,.15);outline-offset:4px;border-radius:8px}
.rgt-panel-toggle-icon::before{content:"▾";display:inline-block;font-size:14px;color:#777;transition:transform .15s ease}
.rgt-output-panel.rgt-collapsed .rgt-panel-toggle-icon::before{transform:rotate(-90deg)}
.rgt-output-panel.rgt-collapsed .rgt-output-body{display:none}

/* Collapsible Output Options */
.rgt-panel-toggle{width:100%;display:flex;justify-content:center;align-items:center;gap:10px;background:transparent;border:0;padding:0;margin:6px 0 10px;font-size:16px;font-weight:600;cursor:pointer}
.rgt-panel-toggle:focus{outline:2px solid rgba(0,0,0,.15);outline-offset:4px;border-radius:8px}
.rgt-panel-toggle-icon::before{content:"▾";display:inline-block;font-size:14px;color:#777;transition:transform .15s ease}
.rgt-output-panel.rgt-collapsed .rgt-panel-toggle-icon::before{transform:rotate(-90deg)}
.rgt-output-panel.rgt-collapsed .rgt-output-body{display:none}


/* --- Compressor UI --- */
.rgt-is-compressor .rgt-drop{padding-top:18px}

.rgt-comp-ui{max-width:1100px;margin:0 auto}

/* Top thumbnail strip */
.rgt-comp-strip-wrap{position:relative;margin:6px auto 10px;max-width:1100px;border:1px solid #eee;border-radius:16px;background:#fff;padding:12px 72px}
.rgt-comp-strip{display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;padding:6px 52px;align-items:center;justify-content:center}
.rgt-comp-strip::-webkit-scrollbar{height:8px}
.rgt-comp-strip::-webkit-scrollbar-thumb{background:#e6e6e6;border-radius:999px}
.rgt-comp-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:12px;z-index:3;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.12);background:#fff;cursor:pointer;color:#111 !important;box-shadow:0 6px 18px rgba(0,0,0,.10)}
.rgt-comp-nav:focus{outline:2px solid rgba(0,0,0,.15);outline-offset:3px}
.rgt-comp-nav-ico{font-size:28px;line-height:1;display:block;transform:translateY(-1px)}
.rgt-comp-nav-left{left:18px}
.rgt-comp-nav-right{right:18px}

.rgt-comp-thumb{flex:0 0 auto;width:140px;display:flex;flex-direction:column;gap:6px;cursor:default}
.rgt-comp-thumb.is-active{}
.rgt-comp-thumb-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}
.rgt-comp-thumb-fn{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rgt-comp-thumb-x{padding:0 6px;line-height:1}

.rgt-comp-thumb-imgwrap{position:relative;width:140px;height:78px;border-radius:14px;border:2px solid transparent;background:#f7f7f7;overflow:hidden;cursor:pointer}
.rgt-comp-thumb.is-active .rgt-comp-thumb-imgwrap{border-color:#4f67f3;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.rgt-comp-thumb-imgwrap img{width:100%;height:100%;object-fit:cover;display:block}

.rgt-comp-thumb-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;color:#fff;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.55),
     1px -1px 0 rgba(0,0,0,.55),
    -1px  1px 0 rgba(0,0,0,.55),
     1px  1px 0 rgba(0,0,0,.55),
     0   2px 8px rgba(0,0,0,.25);
  pointer-events:none}
.rgt-comp-thumb-pct:empty{display:none}

.rgt-comp-thumb-save{align-self:center;font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 12px}

.rgt-comp-thumb-busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

/* legacy thumb overlays no longer used */
.rgt-comp-thumb-name,.rgt-comp-thumb-type{display:none !important}
/* Actions row */
.rgt-comp-actions-row{display:flex;justify-content:center;gap:12px;align-items:center;margin:6px 0 12px;flex-wrap:wrap}
.rgt-comp-actions-row button{position:relative}

.rgt-comp-badge{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 7px;border-radius:999px;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.12)}

.rgt-comp-btn-spin{display:inline-block;width:14px;height:14px;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rgtspin .8s linear infinite;vertical-align:-2px}


.rgt-comp-leftcol{flex:1 1 auto;min-width:0}
.rgt-comp-meta-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#333;margin-bottom:10px}
.rgt-quality-num-display{font-variant-numeric:tabular-nums;width:56px;min-width:56px;overflow-wrap:normal;word-break:normal;writing-mode:horizontal-tb !important;padding:6px 8px;border:1px solid #ddd;border-radius:10px;text-align:center;white-space:nowrap;display:inline-block;color:#111 !important}
.rgt-zoom-controls{display:none !important}
/* Detail panel */
.rgt-comp-detail{border:1px solid #eee;border-radius:16px;background:#fff;padding:12px;max-width:1100px;margin:0 auto;position:relative}
.rgt-comp-detail-title{font-size:14px;font-weight:700;text-align:center;word-break:break-word;margin-bottom:8px}
.rgt-comp-detail-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#333;margin-bottom:10px}

.rgt-comp-detail-body{display:flex;gap:14px;align-items:stretch}
.rgt-comp-detail-preview{flex:1 1 auto;min-width:0}
.rgt-comp-detail-side{flex:0 0 120px;display:flex;flex-direction:column;align-items:center;gap:10px}

.rgt-quality-title{font-size:12px;font-weight:800;letter-spacing:.04em}
.rgt-quality-num-compact{width:64px;padding:6px 8px;border:1px solid #ddd;border-radius:10px;text-align:center}
/* Quality slider wrapper: extra hit-area while keeping a thin centered line */
.rgt-quality-slider-wrap{height:260px;display:flex;align-items:center;justify-content:center;cursor:ns-resize;padding:0 14px}

/* Version A vertical quality slider (pill container + thin track + solid thumb) */
.rgt-vslider{width:56px;height:260px;background:#fff;border-radius:999px;border:0;position:relative;display:block;touch-action:none;user-select:none;cursor:ns-resize}
.rgt-vslider__track{position:absolute;left:50%;transform:translateX(-50%);top:18px;bottom:18px;width:4px;background:rgba(60,140,255,.25);border-radius:999px}
.rgt-vslider__fill{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;width:4px;height:50%;background:rgba(60,140,255,.95);border-radius:999px;pointer-events:none}
.rgt-vslider__thumb{position:absolute;left:50%;transform:translateX(-50%);width:18px;height:18px;background:rgba(60,140,255,1);border-radius:50%;pointer-events:none;box-shadow:none}
.rgt-vslider:focus{outline:none;box-shadow:0 0 0 3px rgba(60,140,255,.18)}


/* Vertical slider styled like a simple line + dot (see reference screenshot) */
.rgt-quality-range.rgt-quality-vertical{
  height:240px;
  /* Thin vertical line + centered dot (match reference image) */
  width:4px;
  writing-mode:bt-lr;
  -webkit-appearance:none;
  appearance:none;
  cursor:ns-resize;
  display:block;
  margin:0 auto;
  padding:0;
  outline:none;
  border:0;
  border-radius:0;
  background-color:transparent;
  box-shadow:none;
  /* Filled/unfilled bar (JS updates this background as you slide) */
  background:linear-gradient(to top,#2563eb 0%,#2563eb 50%,#93c5fd 50%,#93c5fd 100%);
  background-size:2px 100%;
  background-repeat:no-repeat;
  background-position:center;
}
.rgt-quality-range.rgt-quality-vertical:hover{cursor:ns-resize}

.rgt-quality-range.rgt-quality-vertical::-webkit-slider-runnable-track{width:100%;height:100%;background:transparent;border:0}
.rgt-quality-range.rgt-quality-vertical::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  border-radius:999px;
  background:#2563eb;
  border:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
  /* Keep the dot centered on the thin line */
  margin-left:-6px;
}

.rgt-quality-range.rgt-quality-vertical::-moz-range-track{width:100%;height:100%;background:transparent;border:0}
.rgt-quality-range.rgt-quality-vertical::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:999px;
  background:#2563eb;
  border:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
}

.rgt-quality-range.rgt-quality-vertical::-ms-track{width:100%;height:100%;background:transparent;border-color:transparent;color:transparent}
.rgt-quality-range.rgt-quality-vertical::-ms-fill-lower,.rgt-quality-range.rgt-quality-vertical::-ms-fill-upper{background:transparent;border:0}
.rgt-quality-range.rgt-quality-vertical::-ms-thumb{width:16px;height:16px;border-radius:999px;background:#2563eb;border:0;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.rgt-quality-note{font-size:11px;line-height:1.3;text-align:center}

.rgt-comp-detail-busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}

/* Compare handle + zoom */
.rgt-compare-wrap-compress{height:340px}
.rgt-compare-wrap-compress .rgt-compare-after-wrap{left:0;right:0;width:100%}
.rgt-compare-handle{position:absolute;top:0;bottom:0;width:36px;margin-left:-18px;pointer-events:auto;cursor:ew-resize;z-index:8}
.rgt-compare-handle::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.95);transform:translateX(-0.5px);box-shadow:0 0 0 1px rgba(0,0,0,.28)}
.rgt-compare-handle-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.15);box-shadow:0 10px 22px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;gap:6px;color:#111}
.rgt-compare-handle-knob span{display:inline-block;font-size:14px;line-height:1;opacity:.75}

.rgt-zoom-pct{position:absolute;bottom:10px;right:10px;font-size:12px;font-weight:800;padding:4px 8px;border-radius:999px}
.rgt-zoom-controls{position:absolute;bottom:10px;right:80px;display:flex;gap:6px}
.rgt-zoom-btn{width:30px;height:30px;border-radius:999px}

@media (max-width:740px){
  .rgt-comp-thumb{width:120px}
  .rgt-comp-thumb-imgwrap{width:120px;height:70px}
  .rgt-comp-strip{padding:6px 34px}
  .rgt-comp-detail-body{flex-direction:column}
  .rgt-comp-detail-side{flex:0 0 auto;flex-direction:column;width:100%}
  .rgt-quality-slider-wrap{height:200px}
  .rgt-vslider{height:200px}
  .rgt-quality-range.rgt-quality-vertical{height:160px}
  .rgt-compare-wrap-compress{height:260px}
}


/* Age Calculator */
.rgt-age-tool .rgt-age-row{display:grid;grid-template-columns:1fr;gap:12px;}
@media(min-width:768px){.rgt-age-tool .rgt-age-row{grid-template-columns:minmax(240px,360px) minmax(240px,360px);justify-content:center;align-items:end;}}
.rgt-age-tool .rgt-age-btn{margin-top:10px;}
.rgt-age-tool select{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;}
.rgt-age-block{margin-top:14px;}
.rgt-age-list{margin:8px 0 0 18px;}
.rgt-age-footnote{margin-top:8px;font-size:12px;opacity:.75;}


/* Age Calculator Layout */
.rgt-age-tool{max-width:980px;margin:0 auto;}

.rgt-age-results-grid{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items:flex-start;
  margin-top: 14px;
}
.rgt-age-col1 .rgt-age-big{
  font-size:64px;
  font-weight:900;
  line-height:1;
  margin-top: 16px;
}
@media(max-width:767px){
  .rgt-age-results-grid{grid-template-columns:1fr;gap:18px;}
  .rgt-age-col1 .rgt-age-big{font-size:56px;}
}

.rgt-age-zodiac{margin-top:10px;font-size:14px;opacity:.9;}
.rgt-age-zodiac strong{font-weight:800;}

/* Age Calculator extra mode */
.rgt-age-mode{margin-top:0;margin-bottom:12px;}
.rgt-age-mode select{width:100%;}
.rgt-age-note{margin-top:6px;font-size:12px;opacity:.8;}

/* Age Calculator mode dropdown: default width */
.rgt-age-mode select#rgt-age-mode{width:auto;display:inline-block;min-width:240px;}

/* Age -> Birth Year input width */
#rgt-age-years{width:100px !important; min-width:100px !important; max-width:100px !important; box-sizing:border-box !important;}
.rgt-age-panel #rgt-age-years{width:100px !important;}

/* Age Calculator alignment */
.rgt-age-tool .rgt-age-mode{
  text-align:left;
  justify-content:flex-start;
}
.rgt-age-tool .rgt-age-mode label{
  display:inline-block;
  margin-right:10px;
}
.rgt-age-tool .rgt-age-panel{
  text-align:left;
}


/* Age Calculator: force left-align Age->Birth Year input + label */
.rgt-age-tool #rgt-panel-age{ text-align:left !important; }
.rgt-age-tool #rgt-panel-age .rgt-field{ text-align:left !important; justify-content:flex-start !important; align-items:flex-start !important; }
.rgt-age-tool #rgt-panel-age label{ text-align:left !important; display:block !important; }
.rgt-age-tool #rgt-panel-age input#rgt-age-years{ margin-left:0 !important; margin-right:auto !important; }


/* Center main uploader blocks (JPG->WEBP, etc.) */
.rgt-tool{margin-left:auto !important;margin-right:auto !important;}
.rgt-drop{max-width:820px;margin-left:auto !important;margin-right:auto !important;}
.rgt-picked{max-width:820px;margin-left:auto !important;margin-right:auto !important;}
.rgt-panel{max-width:820px;margin-left:auto !important;margin-right:auto !important;}
.rgt-output-panel{max-width:820px;margin-left:auto !important;margin-right:auto !important;}

/* Ensure advanced toggle and action row stay centered */
.rgt-panel-toggle{margin-left:auto;margin-right:auto;}


/* Center Age Calculator Page */
.rgt-age-tool{
  max-width:900px;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center;
}

.rgt-age-tool .rgt-age-mode,
.rgt-age-tool .rgt-age-row,
.rgt-age-tool .rgt-age-panel,
.rgt-age-tool .rgt-age-results-grid{
  margin-left:auto !important;
  margin-right:auto !important;
  justify-content:center !important;
}

.rgt-age-tool .rgt-age-results-grid{
  display:grid;
  justify-content:center;
}

.rgt-age-tool .rgt-age-col1,
.rgt-age-tool .rgt-age-col2{
  text-align:center;
}


/* Age Calculator: center top controls (mode + inputs + button) */
.rgt-age-tool{ text-align:center !important; }
.rgt-age-tool .rgt-age-mode{
  display:flex;
  justify-content:center !important;
  align-items:center !important;
  gap:14px !important;
  width:100%;
  margin-left:auto !important;
  margin-right:auto !important;
}
.rgt-age-tool .rgt-age-mode label{ margin:0 !important; }

/* Panels + fields centered */
.rgt-age-tool .rgt-age-panel{
  width:100%;
  margin-left:auto !important;
  margin-right:auto !important;
}
.rgt-age-tool .rgt-age-panel .rgt-field{
  display:flex;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

/* Center the calculate button row */
.rgt-age-tool .rgt-age-btn{
  margin-left:auto !important;
  margin-right:auto !important;
  display:inline-block;
}

/* Center helper note */
.rgt-age-tool .rgt-age-note{ text-align:center !important; margin-left:auto; margin-right:auto; }


/* Age Calculator: fix top input sections centering */
.rgt-age-tool .rgt-age-row{
  display:flex;
  justify-content:center !important;
  align-items:flex-start !important;
  gap: 28px !important;
  width:100%;
  max-width: 980px;
  margin-left:auto !important;
  margin-right:auto !important;
}

.rgt-age-tool .rgt-age-row .rgt-field{
  align-items:center !important;
  text-align:center !important;
  width:auto !important;
  flex: 0 0 auto !important;
}

.rgt-age-tool .rgt-age-row input[type="date"],
.rgt-age-tool .rgt-age-row select{
  width: 320px !important;
  max-width: 90vw;
}

.rgt-age-tool #rgt-panel-age{
  display:flex;
  flex-direction:column;
  align-items:center !important;
  justify-content:center !important;
  width:100%;
  max-width: 980px;
  margin-left:auto !important;
  margin-right:auto !important;
}

.rgt-age-tool #rgt-panel-age .rgt-field{
  align-items:center !important;
  text-align:center !important;
}

.rgt-age-tool #rgt-panel-age input#rgt-age-years{
  width:320px !important;
  max-width: 90vw;
}

/* Keep mode row centered but not stretching select weirdly */
.rgt-age-tool .rgt-age-mode select{
  width: 320px;
  max-width: 90vw;
}


/* Age Calculator: spacing between rows/sections */
.rgt-age-tool .rgt-age-mode{margin-bottom:24px !important;}
.rgt-age-tool .rgt-age-row{margin-top:10px;margin-bottom:26px !important;}
.rgt-age-tool #rgt-panel-age{margin-top:10px;margin-bottom:26px !important;}
.rgt-age-tool .rgt-age-btn{margin-top:8px;margin-bottom:28px !important;}

/* Choose an option label above dropdown */
.rgt-age-tool .rgt-age-mode-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* Percentage Calculator */
.rgt-pct-tool{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.rgt-pct-mode{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
}
.rgt-pct-panel{
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
}
.rgt-pct-panel .rgt-field{
  text-align:center;
}
.rgt-pct-panel input{
  width:150px !important;
  max-width:150px !important;
}
.rgt-pct-big{
  font-size:56px;
  font-weight:900;
  line-height:1.1;
  margin:10px 0 12px;
}


/* Percentage Calculator UI tweaks */
.rgt-pct-mode select#rgt-pct-mode{
  width:320px !important;
  min-width:0 !important;
  max-width:90vw;
}

@media (max-width: 600px){
  .rgt-pct-mode select#rgt-pct-mode{
    width:260px !important;
  }
}
.rgt-pct-mode{margin-bottom:28px !important;}
.rgt-pct-panels{margin-bottom:18px;}
.rgt-pct-panel{gap:28px !important; margin-bottom:18px;}
.rgt-pct-tool .rgt-btn{margin-top:10px;}



/* Age Calculator: stack inputs on tablet/mobile, keep horizontal on desktop */
@media (max-width: 992px){
  .rgt-age-tool .rgt-age-row{
    flex-direction:column !important;
    align-items:center !important;
    gap:18px !important;
  }
  .rgt-age-tool .rgt-age-row .rgt-field{
    width:auto !important;
    max-width:90vw !important;
  }
  /* Content-sized controls (avoid full-width on mobile) */
  .rgt-age-tool .rgt-age-row input[type="date"]{
    width:260px !important;
    max-width:90vw !important;
  }
  .rgt-age-tool .rgt-age-row select{width:max-content !important; max-width:90vw !important; display:inline-block;}
}

/* NOTE: removed an invalid CSS fragment here that was causing browsers to ignore the remaining rules. */


/* Age Calculator: left-align "Age in different time units" list on tablet/mobile */
@media (max-width: 992px){
  .rgt-age-tool .rgt-age-col2,
  .rgt-age-tool .rgt-age-col2 h3,
  .rgt-age-tool .rgt-age-col2 ul,
  .rgt-age-tool .rgt-age-col2 li{
    text-align:left !important;
  }
  .rgt-age-tool .rgt-age-col2 ul{
    padding-left:22px !important;
    margin-left:0 !important;
    list-style-position: outside;
  }
}


/* Age Calculator: dropdown width fits longest option text */
#rgt-age-mode{
  width:max-content !important;
  max-width: 90vw;
}


/* Age Calculator: content-sized dropdowns */
.rgt-age-tool select#rgt-age-mode{ width:max-content !important; max-width:90vw; }
.rgt-age-tool .rgt-age-row select{ width:max-content; max-width:90vw; }


/* Age Calculator: force dropdowns to content width (not full width) */
.rgt-age-tool #rgt-age-mode,
.rgt-age-tool #rgt-age-on-select{
  width:max-content !important;
  max-width:90vw !important;
  display:inline-block !important;
}


/* Age Calculator: tighten desktop spacing + left-align time-units list */
.rgt-age-tool .rgt-age-row{
  gap:12px !important;
}

.rgt-age-tool .rgt-age-col2,
.rgt-age-tool .rgt-age-col2 h3,
.rgt-age-tool .rgt-age-col2 ul,
.rgt-age-tool .rgt-age-col2 li{
  text-align:left !important;
}
.rgt-age-tool .rgt-age-col2 ul{
  padding-left:22px !important;
  margin-left:0 !important;
  list-style-position:outside;
}


/* Age Calculator: keep "Your Age (years)" field compact (not full width) */
.rgt-age-tool input#rgt-age-years{
  width:260px !important;
  max-width:90vw !important;
}


}


/* Age Calculator: make "Your Age (years)" input much smaller on mobile/tablet */
@media (max-width: 992px){
  .rgt-age-tool input#rgt-age-years{
    width:160px !important;
    max-width:70vw !important;
    min-width:unset !important;
    display:inline-block !important;
  }
}

/* Age tool: lock width + center the Age (years) input on all screen sizes */
.rgt-age-tool #rgt-age-years{
  width:100px !important;
  min-width:100px !important;
  max-width:100px !important;
}
.rgt-age-tool #rgt-panel-age input#rgt-age-years{
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Age Calculator: remove the unwanted middle gap in DOB mode (2-column desktop grid) */
.rgt-age-tool #rgt-age-dob-row{
  display:grid !important;
  grid-template-columns: 1fr !important;
  gap:12px !important;
}
@media (min-width:768px){
  .rgt-age-tool #rgt-age-dob-row{
    grid-template-columns: 1fr 1fr !important;
    column-gap:24px !important;
    align-items:end !important;
  }
  /* When "Select Date" is enabled, make it span both columns under the first row */
  .rgt-age-tool #rgt-to-date-wrap{
    grid-column: 1 / -1 !important;
  }
}