/*
  Pack of Tools final tool theme-sync layer.
  This file must load AFTER a tool's own tool.css so light/dark mode cannot be overridden.
  It is intentionally scoped to .tools-app to avoid changing the normal website pages.
*/
.tools-app .workspace-body,
.tools-app #toolWorkspace{
  background:var(--panel)!important;
  color:var(--text)!important;
  min-height:240px;
}
.tools-app #toolWorkspace > *{max-width:100%;}
.tools-app .pot-loading-box,
.tools-app .pot-tool-fallback,
.tools-app .placeholder-box{
  background:var(--panel-2)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
.tools-app .pot-tool-fallback code{
  display:inline-flex;
  margin-top:8px;
  padding:6px 8px;
  border-radius:10px;
  background:var(--soft)!important;
  color:var(--text)!important;
  font-size:12px;
  white-space:normal;
  word-break:break-word;
}

body:not(.tools-dark) .tools-app .pot-imgc,
body:not(.tools-dark) .tools-app .pot-imgc[data-pot-theme-sync="1"],
body:not(.tools-dark) .tools-app [data-pot-theme-sync="1"] .pot-imgc,
body:not(.tools-dark) .tools-app [data-pot-tool-host]{
  --pot-panel:#ffffff;
  --pot-panel-2:#f7f7f4;
  --pot-soft:#ecece8;
  --pot-text:#111111;
  --pot-muted:#626262;
  --pot-line:rgba(17,17,17,.15);
  --pot-primary:#111111;
  --pot-primary-2:#2b2b2b;
  --pot-primary-text:#ffffff;
  --pot-shadow:rgba(17,17,17,.12);
  --pot-modal:rgba(17,17,17,.50);
  --bg:transparent!important;
  --card:var(--pot-panel)!important;
  --soft:var(--pot-panel-2)!important;
  --line:var(--pot-line)!important;
  --text:var(--pot-text)!important;
  --muted:var(--pot-muted)!important;
  --main:var(--pot-primary)!important;
  --main2:var(--pot-primary-2)!important;
  --dark:var(--pot-text)!important;
  --dark2:var(--pot-primary-2)!important;
  color:var(--pot-text)!important;
  background:transparent!important;
}

body.tools-dark .tools-app .pot-imgc,
body.tools-dark .tools-app .pot-imgc[data-pot-theme-sync="1"],
body.tools-dark .tools-app [data-pot-theme-sync="1"] .pot-imgc,
body.tools-dark .tools-app [data-pot-tool-host]{
  --pot-panel:#151516;
  --pot-panel-2:#202022;
  --pot-soft:#28282b;
  --pot-text:#ffffff;
  --pot-muted:rgba(255,255,255,.66);
  --pot-line:rgba(255,255,255,.14);
  --pot-primary:#ffffff;
  --pot-primary-2:#d8d8d8;
  --pot-primary-text:#111111;
  --pot-shadow:rgba(0,0,0,.38);
  --pot-modal:rgba(0,0,0,.76);
  --bg:transparent!important;
  --card:var(--pot-panel)!important;
  --soft:var(--pot-panel-2)!important;
  --line:var(--pot-line)!important;
  --text:var(--pot-text)!important;
  --muted:var(--pot-muted)!important;
  --main:var(--pot-primary)!important;
  --main2:var(--pot-primary-2)!important;
  --dark:var(--pot-text)!important;
  --dark2:var(--pot-primary-2)!important;
  color:var(--pot-text)!important;
  background:transparent!important;
}

.tools-app .pot-imgc .pic-screen,
.tools-app .pot-imgc .loader-screen,
.tools-app .pot-imgc .result-wrap,
.tools-app .pot-imgc .step-two-wrap,
.tools-app .pot-imgc .pic-center{
  background:transparent!important;
  color:var(--pot-text)!important;
}
.tools-app .pot-imgc .upload-card,
.tools-app .pot-imgc .preview-shell,
.tools-app .pot-imgc .settings-bottom,
.tools-app .pot-imgc .result-summary,
.tools-app .pot-imgc .loader-card,
.tools-app .pot-imgc .share-panel,
.tools-app .pot-imgc .common-modal-container,
.tools-app .pot-imgc .common-picker-panel,
.tools-app .pot-imgc .source-menu,
.tools-app .pot-imgc .common-modal-header,
.tools-app .pot-imgc .common-modal-body,
.tools-app .pot-imgc .common-content-panel{
  background:var(--pot-panel)!important;
  border-color:var(--pot-line)!important;
  color:var(--pot-text)!important;
  box-shadow:0 18px 55px var(--pot-shadow)!important;
}
.tools-app .pot-imgc .drop-zone,
.tools-app .pot-imgc .preview-card,
.tools-app .pot-imgc .stat,
.tools-app .pot-imgc .size-card,
.tools-app .pot-imgc .level-option,
.tools-app .pot-imgc .field select,
.tools-app .pot-imgc .field input[type="number"],
.tools-app .pot-imgc .source-icon,
.tools-app .pot-imgc .source-item,
.tools-app .pot-imgc .share-qr-box,
.tools-app .pot-imgc .share-url-row input,
.tools-app .pot-imgc .common-file-card,
.tools-app .pot-imgc .common-search-row input,
.tools-app .pot-imgc .common-count,
.tools-app .pot-imgc .saved-badge,
.tools-app .pot-imgc .saving-meter,
.tools-app .pot-imgc .common-type-sidebar button,
.tools-app .pot-imgc .dashboard-picker-card,
.tools-app .pot-imgc .common-picker-empty,
.tools-app .pot-imgc .common-picker-gated,
.tools-app .pot-imgc .picker-loading{
  background:var(--pot-panel-2)!important;
  border-color:var(--pot-line)!important;
  color:var(--pot-text)!important;
}
.tools-app .pot-imgc .drop-zone{
  background:linear-gradient(135deg,var(--pot-panel-2),var(--pot-soft))!important;
  border-color:var(--pot-line)!important;
}
.tools-app .pot-imgc .drop-zone:hover,
.tools-app .pot-imgc .drop-zone.drag,
.tools-app .pot-imgc .source-item:hover,
.tools-app .pot-imgc .level-option:hover,
.tools-app .pot-imgc .level-option.active,
.tools-app .pot-imgc .next-tool:hover,
.tools-app .pot-imgc .common-type-sidebar button.active{
  background:var(--pot-soft)!important;
  border-color:var(--pot-primary)!important;
  color:var(--pot-text)!important;
}
.tools-app .pot-imgc .select-main,
.tools-app .pot-imgc .compress-btn,
.tools-app .pot-imgc .download-main,
.tools-app .pot-imgc .open-share-link,
.tools-app .pot-imgc .add-more,
.tools-app .pot-imgc .back-btn,
.tools-app .pot-imgc .picker-use,
.tools-app .pot-imgc .picker-cta,
.tools-app .pot-imgc .common-upload-selected,
.tools-app .pot-imgc .level-option.active::after{
  background:linear-gradient(135deg,var(--pot-primary),var(--pot-primary-2))!important;
  color:var(--pot-primary-text)!important;
  border-color:var(--pot-primary)!important;
  box-shadow:0 16px 30px var(--pot-shadow)!important;
}
.tools-app .pot-imgc .v1removed-mini,
.tools-app .pot-imgc .round-btn,
.tools-app .pot-imgc .share-link-btn,
.tools-app .pot-imgc .share-url-row button,
.tools-app .pot-imgc .share-close,
.tools-app .pot-imgc .common-close,
.tools-app .pot-imgc .remove-photo{
  background:var(--pot-panel)!important;
  color:var(--pot-text)!important;
  border:1px solid var(--pot-line)!important;
}
.tools-app .pot-imgc h1,
.tools-app .pot-imgc h2,
.tools-app .pot-imgc h3,
.tools-app .pot-imgc strong,
.tools-app .pot-imgc .upload-empty h3,
.tools-app .pot-imgc .settings-top h3,
.tools-app .pot-imgc .result-title,
.tools-app .pot-imgc .loader-card h2,
.tools-app .pot-imgc .preview-info strong,
.tools-app .pot-imgc .field>span,
.tools-app .pot-imgc .level-option strong,
.tools-app .pot-imgc .summary-text h3,
.tools-app .pot-imgc .size-card strong,
.tools-app .pot-imgc .common-modal-header h2,
.tools-app .pot-imgc .common-file-name,
.tools-app .pot-imgc .picker-file-top strong{
  color:var(--pot-text)!important;
}
.tools-app .pot-imgc p,
.tools-app .pot-imgc small,
.tools-app .pot-imgc .upload-empty p,
.tools-app .pot-imgc .settings-top p,
.tools-app .pot-imgc .level-option span,
.tools-app .pot-imgc .summary-text p,
.tools-app .pot-imgc .size-card span,
.tools-app .pot-imgc .loader-card p,
.tools-app .pot-imgc .source-item small,
.tools-app .pot-imgc .common-modal-header p,
.tools-app .pot-imgc .common-file-info small,
.tools-app .pot-imgc .common-picker-empty span,
.tools-app .pot-imgc .picker-loading span{
  color:var(--pot-muted)!important;
}
.tools-app .pot-imgc .select-main *,
.tools-app .pot-imgc .compress-btn *,
.tools-app .pot-imgc .download-main *,
.tools-app .pot-imgc .open-share-link *,
.tools-app .pot-imgc .add-more *,
.tools-app .pot-imgc .back-btn *,
.tools-app .pot-imgc .picker-use *,
.tools-app .pot-imgc .picker-cta *,
.tools-app .pot-imgc .common-upload-selected *{
  color:inherit!important;
  stroke:currentColor!important;
}
.tools-app .pot-imgc .brand-svg,
.tools-app .pot-imgc .pic-icon,
.tools-app .pot-imgc .pic-icon-lg{color:inherit;stroke:currentColor;}
.tools-app .pot-imgc .spinner{
  border-color:rgba(120,120,120,.22)!important;
  border-top-color:var(--pot-primary)!important;
}
body.tools-dark .tools-app .pot-imgc .spinner{
  border-color:rgba(255,255,255,.20)!important;
  border-top-color:#fff!important;
}
.tools-app .pot-imgc .saving-fill,
.tools-app .pot-imgc .pot-ic-progress-bar{
  background:linear-gradient(90deg,var(--pot-primary),var(--pot-primary-2))!important;
}
.tools-app .pot-imgc .share-modal,
.tools-app .pot-imgc .v1-dialog{
  background:var(--pot-modal)!important;
}
.tools-app .pot-imgc .share-url-row input::selection,
.tools-app .pot-imgc input::selection{background:var(--pot-primary)!important;color:var(--pot-primary-text)!important;}
@media(max-width:720px){
  .tools-app .pot-imgc .source-menu{
    left:50%!important;
    right:auto!important;
    transform:translate(-50%,8px)!important;
    width:min(320px,calc(100vw - 48px))!important;
  }
  .tools-app .pot-imgc .select-wrap:hover .source-menu,
  .tools-app .pot-imgc .select-wrap:focus-within .source-menu{transform:translate(-50%,0)!important;}
  .tools-app .pot-imgc .download-main{min-width:0!important;width:100%!important;}
}