/* FotoDoc v82 Step5 compact editor — streamlined revision.
   UI-only layer. V22 crop / geometry are not modified here. */

:root{
  --pe-height:68px;
  --pe-bg:color-mix(in srgb,var(--surface) 95%,rgba(7,16,29,.05));
  --pe-border:color-mix(in srgb,var(--line) 88%,transparent);
  --pe-active:var(--accent,#1677ff);
}

#previewEditorToolbar{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  z-index:12;
  min-height:var(--pe-height);
  border:1px solid var(--pe-border);
  border-radius:13px;
  background:var(--pe-bg);
  box-shadow:0 12px 34px rgba(12,22,38,.14);
  backdrop-filter:blur(16px) saturate(128%);
  -webkit-backdrop-filter:blur(16px) saturate(128%);
  overflow:hidden;
  transition:min-height .16s ease,opacity .16s ease;
}
html[data-theme="dark"] #previewEditorToolbar{
  --pe-bg:rgba(10,19,31,.9);
  box-shadow:0 14px 38px rgba(0,0,0,.28);
}
#previewEditorToolbar[hidden]{display:none!important;}
#previewEditorToolbar.is-control{--pe-height:88px;}
#previewEditorToolbar.is-selective{--pe-height:116px;}
#previewEditorToolbar button,#previewEditorToolbar input,#previewEditorToolbar select{font:inherit;}

.pe-content{height:100%;min-height:var(--pe-height);display:flex;align-items:stretch;min-width:0;}
.pe-strip{
  width:100%;min-width:0;display:flex;align-items:stretch;gap:2px;padding:5px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;
}
.pe-strip::-webkit-scrollbar{display:none;}
.pe-tool{
  min-width:64px;min-height:56px;flex:1 0 64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:5px 6px;border:0;border-radius:9px;background:transparent;color:var(--text-2);cursor:pointer;
  transition:background .14s ease,color .14s ease,transform .14s ease;
  -webkit-tap-highlight-color:transparent;
}
.pe-tool:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--text);}
.pe-tool:active{transform:scale(.98);}
.pe-tool[disabled]{opacity:.42;cursor:not-allowed;transform:none;}
.pe-tool.is-active{color:var(--pe-active);background:color-mix(in srgb,var(--pe-active) 10%,transparent);}
.pe-tool.is-danger.is-active{color:var(--danger,#e84a4a);background:color-mix(in srgb,var(--danger,#e84a4a) 10%,transparent);}
.pe-tool.is-success.is-active{color:var(--success,#24a168);background:color-mix(in srgb,var(--success,#24a168) 10%,transparent);}
.pe-icon{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.pe-label{max-width:94px;font-size:9.1px;line-height:1.08;font-weight:700;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.pe-tool.pe-back{min-width:44px;flex:0 0 44px;}
.pe-tool.pe-back .pe-label{font-size:8.4px;}
.pe-divider{width:1px;align-self:stretch;margin:7px 2px;background:var(--line);flex:0 0 1px;}

.pe-control-view,.pe-selective-view{
  width:100%;min-width:0;padding:7px 9px 8px;display:grid;grid-template-rows:auto 1fr;gap:6px;
}
.pe-control-head{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:7px;min-width:0;}
.pe-back-icon{width:32px;height:28px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--text);cursor:pointer;}
.pe-back-icon:hover{background:var(--surface-2);}
.pe-back-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pe-control-title{min-width:0;font-size:10.5px;font-weight:730;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pe-value{min-width:44px;text-align:right;color:var(--pe-active);font-size:10.5px;font-weight:760;font-variant-numeric:tabular-nums;}
.pe-range-row,.pe-number-row,.pe-select-body{display:grid;grid-template-columns:1fr;align-items:center;min-width:0;}
.pe-range{width:100%;height:24px;margin:0;accent-color:var(--pe-active);cursor:pointer;}
.pe-number,
.pe-select-body select,
.pe-selective-body select{
  width:100%;height:33px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);
  padding:0 10px;font-size:10px;outline:none;
}
.pe-axis{display:flex;justify-content:space-between;margin-top:-2px;color:var(--muted-2);font-size:7.7px;line-height:1;}

.pe-toggle-view{display:flex;align-items:center;justify-content:center;gap:9px;min-height:32px;}
.pe-switch{min-width:132px;height:34px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--text-2);font-size:9.5px;font-weight:700;cursor:pointer;}
.pe-switch[aria-pressed="true"]{border-color:color-mix(in srgb,var(--pe-active) 44%,var(--line));background:color-mix(in srgb,var(--pe-active) 10%,var(--surface));color:var(--pe-active);}

.pe-selective-body{display:grid;grid-template-columns:minmax(118px,1.4fr) auto minmax(190px,2fr);gap:6px;align-items:center;min-width:0;}
.pe-selective-only{height:31px;padding:0 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--text-2);font-size:8.7px;font-weight:690;cursor:pointer;white-space:nowrap;}
.pe-selective-only[aria-pressed="true"]{color:var(--pe-active);border-color:color-mix(in srgb,var(--pe-active) 36%,var(--line));background:color-mix(in srgb,var(--pe-active) 8%,var(--surface));}
.pe-selective-buttons{display:flex;gap:3px;min-width:0;}
.pe-selective-buttons .pe-tool{min-width:56px;min-height:37px;flex:1 0 56px;padding:3px 5px;}
.pe-selective-buttons .pe-icon{width:17px;height:17px;}
.pe-selective-buttons .pe-label{font-size:8.1px;}

.pe-swatches-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.pe-swatch{
  display:flex;align-items:center;gap:8px;padding:8px 9px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  color:var(--text);cursor:pointer;text-align:left;min-width:0;
}
.pe-swatch.is-active{border-color:color-mix(in srgb,var(--pe-active) 42%,var(--line));background:color-mix(in srgb,var(--pe-active) 8%,var(--surface));}
.pe-swatch-chip{width:18px;height:18px;flex:0 0 18px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background:var(--swatch,#fff);background-image:var(--swatch);}
.pe-swatch-label{min-width:0;font-size:9px;font-weight:650;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Reserve real space inside the preview so the compact toolbar stays under the image. */
html.preview-editor-ready .preview-shell{padding-bottom:calc(var(--pe-height) + 18px);}
html.preview-editor-ready #previewCanvas,
html.preview-editor-ready .source-preview{
  max-height:calc(clamp(520px,68dvh,760px) - var(--pe-height) - 42px)!important;
}

/* Hide duplicated old editing blocks visually, but keep their controls in DOM as source of truth. */
html.preview-editor-ready .pro-light-details,
html.preview-editor-ready .pro-color-details,
html.preview-editor-ready .pro-detail-details,
html.preview-editor-ready #proMaskPanel{display:none!important;}

/* Requested UX cleanup: upload step disappears after a photo is chosen, processing step is removed, step 4 is replaced by compact buttons. */
body.preview-editor-compact.has-source #uploadStage{display:none!important;}
body.preview-editor-compact #processingStage{display:none!important;}
body.preview-editor-compact.has-result #toolsStage{display:none!important;}

body:not(.has-result) #previewEditorToolbar{opacity:.58;}
body:not(.has-source) #previewEditorToolbar{visibility:hidden;pointer-events:none;}

/* Plain text wordmark instead of image logo. */
.brand-wordmark-link{display:flex;align-items:center;text-decoration:none;min-width:0;}
.brand-wordmark{
  display:inline-block;font-weight:820;font-size:28px;line-height:1;letter-spacing:-.03em;color:var(--text);
}

@media(max-width:1100px){
  html.preview-editor-ready #previewCanvas,
  html.preview-editor-ready .source-preview{max-height:calc(clamp(460px,62dvh,660px) - var(--pe-height) - 36px)!important;}
}
@media(max-width:760px){
  :root{--pe-height:64px;}
  #previewEditorToolbar{left:5px;right:5px;bottom:5px;border-radius:11px;}
  #previewEditorToolbar.is-control{--pe-height:84px;}
  #previewEditorToolbar.is-selective{--pe-height:112px;}
  .pe-strip{padding:4px 3px;gap:0;}
  .pe-tool{min-width:60px;min-height:54px;flex-basis:60px;padding:4px 5px;}
  .pe-icon{width:20px;height:20px;}
  .pe-label{font-size:8.7px;max-width:86px;}
  .pe-tool.pe-back{min-width:40px;flex-basis:40px;}
  .pe-control-view,.pe-selective-view{padding:6px 8px 7px;}
  .pe-control-head{grid-template-columns:30px 1fr auto;gap:5px;}
  .pe-back-icon{width:30px;height:26px;}
  .pe-control-title,.pe-value{font-size:10px;}
  .pe-range{height:24px;}
  .pe-selective-body{grid-template-columns:minmax(110px,1fr) auto;grid-template-areas:"target only" "buttons buttons";gap:4px;}
  .pe-selective-body select{grid-area:target;height:28px;font-size:8.3px;}
  .pe-selective-only{grid-area:only;height:28px;font-size:8.2px;padding:0 7px;}
  .pe-selective-buttons{grid-area:buttons;}
  .pe-selective-buttons .pe-tool{min-height:31px;flex-direction:row;gap:3px;}
  .pe-selective-buttons .pe-icon{width:14px;height:14px;}
  .pe-selective-buttons .pe-label{font-size:7.8px;}
  .pe-swatches-grid{grid-template-columns:1fr;}
  html.preview-editor-ready .preview-shell{padding-bottom:calc(var(--pe-height) + 10px)!important;}
  html.preview-editor-ready #previewCanvas,
  html.preview-editor-ready .source-preview{max-height:calc(min(58dvh,500px) - var(--pe-height) - 24px)!important;}
  .brand-wordmark{font-size:24px;}
}
@media(max-width:430px){
  .pe-tool{min-width:57px;flex-basis:57px;}
  .pe-label{font-size:8.4px;}
  .brand-wordmark{font-size:22px;}
}
@media(max-width:350px){
  .pe-tool{min-width:54px;flex-basis:54px;}
  .pe-icon{width:19px;height:19px;}
  .pe-label{font-size:7.9px;}
}


/* Revision 3: usability fixes */
#formatStage .stage-label,
#exportPanel .stage-label{display:none!important;}

.format-stage-actions{margin-top:12px;display:flex;}
#formatChangePhotoBtn{width:100%;min-height:42px;}
body:not(.format-selected) #formatChangePhotoBtn{opacity:.6;}

/* Keep toolbar visible after resets as long as a source exists. */
body.preview-editor-compact.has-source #previewEditorToolbar{visibility:visible;pointer-events:auto;}
body.preview-editor-compact.has-source:not(.has-result) #previewEditorToolbar{opacity:.92;}

/* More comfortable spacing and tap targets on phones. */
.pe-tool{min-width:66px;}
.pe-label{white-space:normal;text-align:center;}
.pe-range{height:34px;padding:8px 0;}
.pe-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:color-mix(in srgb,var(--line) 72%,transparent);}
.pe-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-7px;width:20px;height:20px;border-radius:999px;border:2px solid #fff;background:var(--pe-active);box-shadow:0 2px 7px rgba(0,0,0,.18);}
.pe-range::-moz-range-track{height:6px;border-radius:999px;background:color-mix(in srgb,var(--line) 72%,transparent);}
.pe-range::-moz-range-thumb{width:20px;height:20px;border-radius:999px;border:2px solid #fff;background:var(--pe-active);box-shadow:0 2px 7px rgba(0,0,0,.18);}

.mobile-language-select{min-width:76px;text-align:center;text-align-last:center;padding-left:10px!important;padding-right:24px!important;font-size:11px!important;font-weight:800;}

@media(max-width:760px){
  .brand-wordmark-link{margin-left:8px;}
  .mobile-language-switch{margin-left:2px;}
  .mobile-language-select{min-width:78px;max-width:78px;}
  .pe-strip{gap:6px;padding:6px;}
  .pe-tool{flex:0 0 82px;min-width:82px;min-height:58px;padding:6px 7px;border-radius:10px;}
  .pe-label{font-size:8.8px;line-height:1.12;}
  .pe-tool.pe-back{flex:0 0 48px;min-width:48px;}
  .pe-control-view,.pe-selective-view{padding:8px 10px 9px;}
  .pe-range{height:38px;padding:10px 0;}
  .pe-range::-webkit-slider-thumb{margin-top:-9px;width:24px;height:24px;}
  .pe-range::-moz-range-thumb{width:24px;height:24px;}
}
@media(max-width:430px){
  .brand-wordmark-link{margin-left:10px;}
  .mobile-language-select{min-width:80px;max-width:80px;}
  .pe-tool{flex-basis:78px;min-width:78px;}
}