*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#18191b;color:#e5e6e3;font-family:Arial,Helvetica,sans-serif;font-size:15px}button,input{font:inherit}button{cursor:pointer}
.menu{height:64px;background:#292a2d;border-bottom:1px solid #101112;display:flex;align-items:center;padding:0 20px;color:#b7b9ba}.appbrand{display:flex;align-items:center;gap:13px;white-space:nowrap}.brandmark{width:42px;height:42px;object-fit:cover;border-radius:7px;border:1px solid #4b4e51}.appbrand strong{font-size:20px;color:#f0f1ee;font-weight:600}.sep{color:#55585b;font-size:18px}.muted{color:#8e9294;font-size:15px}.menu nav{display:flex;gap:30px;margin-left:55px;color:#afb2b3;font-size:14px}.menuright{margin-left:auto;font-size:13px;color:#8c9092}.online{display:inline-block;width:8px;height:8px;border-radius:50%;background:#81ad78;margin-right:7px}
.workspace{height:calc(100vh - 64px);display:grid;grid-template-columns:76px minmax(700px,1fr) 430px}.tools{background:#292a2d;border-right:1px solid #101112;display:flex;flex-direction:column;align-items:center;padding-top:16px;gap:10px}.tool{width:52px;height:52px;background:transparent;border:0;border-radius:7px;color:#929698;font-size:23px}.tool:hover{color:#fff;background:#36383b}.tool.active{background:#3e4043;color:#f3f3ef}.tools-spacer{flex:1}
.editor{min-width:0;background:#111213;display:grid;grid-template-rows:66px 1fr 54px}.controlbar{background:#303134;border-bottom:1px solid #111213;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 18px}.leftcontrols,.rightcontrols{display:flex;align-items:center;gap:7px}.rightcontrols{justify-content:flex-end}.controlbar button{background:transparent;border:1px solid transparent;color:#c0c2c3;border-radius:5px;padding:10px 14px;font-size:14px}.controlbar button:hover{background:#3c3e41}.controlbar .primary{background:#deded9;color:#191a1b;border-color:#deded9;font-weight:600}.barsep{height:25px;width:1px;background:#4a4c4f;margin:0 8px}.docname{font-size:14px;color:#898d8f;text-align:center;max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.canvasarea{position:relative;overflow:hidden;background:#0d0e0f;display:flex;align-items:center;justify-content:center}.canvasarea canvas{position:absolute;max-width:94%;max-height:92%;width:auto;height:auto;display:none;transform-origin:center center}.canvasarea.ready canvas{display:block}.empty{text-align:center;display:flex;flex-direction:column;align-items:center;gap:13px;color:#7f8385}.emptylogo{width:72px;height:72px;border:1px solid #4a4d50;border-radius:9px;display:grid;place-items:center;font-size:36px;color:#b9bbba}.empty strong{font-size:21px;font-weight:normal;color:#d5d6d3}.empty span{font-size:14px;color:#707476}.empty label{margin-top:10px;background:#d9dad5;color:#18191a;border-radius:5px;padding:12px 20px;font-size:14px;font-weight:600}.tag{display:none;position:absolute;top:18px;background:#222426ed;border:1px solid #45484a;padding:7px 10px;border-radius:4px;color:#b2b5b7;font-size:12px}.ready .tag{display:block}.tag.before{left:18px}.tag.after{right:18px}.loading{display:none;position:absolute;bottom:18px;background:#222426;border:1px solid #404345;padding:10px 14px;border-radius:4px;color:#b8bbbc;font-size:12px;z-index:9}
.statusbar{background:#292a2d;border-top:1px solid #111213;display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;padding:0 18px;color:#85898b;font-size:12px}.dot{padding:0 9px;color:#44474a}.compare{display:flex;align-items:center;justify-content:center;gap:12px}.compareBtn{border:1px solid #55595b;background:#3a3c3f;color:#ecece8;border-radius:5px;padding:9px 15px;font-size:12px;font-weight:600}.zoom{text-align:right}.zoom b{color:#b7b9b9;font-weight:normal;margin-left:6px}
.properties{background:#292a2d;border-left:1px solid #101112;overflow:auto;padding:0 20px}.paneltitle{height:73px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #414346}.paneltitle strong{font-size:20px;font-weight:500}.paneltitle span{font-size:13px;color:#85898b}.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #414346}.tabs button{background:transparent;border:0;border-bottom:3px solid transparent;color:#8c9092;padding:16px 2px;font-size:13px}.tabs button.selected{color:#e7e8e4;border-bottom-color:#d0d1cc}.search{height:44px;background:#1d1f20;border:1px solid #44474a;border-radius:5px;display:flex;align-items:center;padding:0 12px;margin:16px 0}.search span{color:#7a7e80;font-size:19px}.search input{width:100%;border:0;outline:0;background:transparent;color:#ddd;padding-left:9px;font-size:13px}.presetlist{display:grid;gap:9px}.preset{width:100%;display:grid;grid-template-columns:76px 1fr 22px;align-items:center;gap:13px;padding:9px;background:#303235;border:1px solid #424548;border-radius:5px;color:#d9dad7;text-align:left}.preset:hover{background:#37393c}.preset.active{border-color:#aaaead;background:#3a3c3f}.thumb{width:76px;height:65px;border-radius:4px;background:linear-gradient(135deg,#676966,#303235)}.preset b{display:block;font-size:14px;font-weight:500}.preset small{display:block;color:#7b7f81;font-size:11px;margin-top:6px}.check{width:20px;height:20px;border:1px solid #55595b;border-radius:50%;display:grid;place-items:center;color:transparent;font-size:10px}.active .check{background:#deded9;color:#222;border-color:#deded9}.divider{height:1px;background:#414346;margin:22px 0}.prophead{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.prophead span{text-transform:uppercase;font-size:10px;letter-spacing:.1em;color:#818587}.prophead strong{font-size:12px;color:#c4c6c5;font-weight:normal}.propgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.propgrid div{background:#1f2022;border:1px solid #393c3e;border-radius:4px;padding:13px}.propgrid small{display:block;color:#707476;font-size:9px;margin-bottom:7px}.propgrid b{font-size:12px;color:#bfc1c0;font-weight:normal}.description{font-size:12px;line-height:1.65;color:#7a7e80;margin:0}.buy{width:100%;margin-top:23px;border:0;border-radius:5px;background:#d9dad5;color:#191a1b;padding:14px;font-size:12px;font-weight:bold;text-transform:uppercase}.buy span{float:right}.hidden{display:none!important}
.adjustGroup{border-bottom:1px solid #414346;padding:17px 0}.groupTitle{font-size:11px;letter-spacing:.1em;color:#bfc1c1;margin-bottom:14px}.groupReset{float:right;background:transparent;border:0;color:#7d8183;font-size:10px}.adjustGroup label{display:grid;grid-template-columns:1fr 44px;gap:5px;align-items:center;color:#b7b9ba;font-size:12px;margin:13px 0}.adjustGroup output{text-align:right;color:#777b7d;font-size:11px}.adjustGroup input{grid-column:1/3;width:100%;accent-color:#bfc0bc}.adjustGroup input::-webkit-slider-runnable-track{height:4px;background:#4a4d50;border-radius:4px}.adjustGroup input::-webkit-slider-thumb{margin-top:-5px}
@media(max-width:1200px){.workspace{grid-template-columns:64px minmax(600px,1fr) 360px}.menu nav{gap:20px;margin-left:30px}}@media(max-width:900px){.workspace{grid-template-columns:0 1fr 330px}.tools{display:none}.menu nav{display:none}.statusbar{grid-template-columns:1fr 1fr}}@media(max-width:650px){.workspace{grid-template-columns:1fr}.properties{display:none}.statusbar{grid-template-columns:1fr}.compare{display:none}.appbrand strong{font-size:17px}.muted{display:none}}

/* v5 curve editor */
.curveSection{padding-bottom:18px}
.curveToolbar{display:flex;gap:5px;margin-bottom:9px}
.curveChannel{background:#1f2022;border:1px solid #414447;color:#8c9092;border-radius:4px;padding:6px 10px;font-size:10px}
.curveChannel:hover{color:#ddd;background:#303235}
.curveChannel.active{background:#d7d8d3;color:#1b1c1d;border-color:#d7d8d3}
.curveWrap{width:100%;background:#1a1b1d;border:1px solid #3d4042;border-radius:4px;overflow:hidden}
#curveCanvas{display:block;width:100%;height:auto;aspect-ratio:420/300;cursor:crosshair}
.curveHint{font-size:9px;color:#707476;margin-top:7px;line-height:1.4}

/* v6 refined controls */
.controlbar .exportBtn{background:#d8d9d4;color:#171819;border-color:#d8d9d4;font-weight:600}
.controlbar .exportBtn:hover{background:#ecece7}
.cropAction{background:#3c3f42!important;border-color:#55595c!important;color:#eee!important}
.cropAction.activeMode,.activeMode{background:#d8d9d4!important;color:#171819!important;border-color:#d8d9d4!important}
.hidden{display:none!important}
.adjustGroup label input[type=range]{appearance:none;-webkit-appearance:none;height:18px;background:transparent;cursor:pointer}
.adjustGroup label input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:linear-gradient(to right,#cfd0cb 0 var(--p),#4b4e51 var(--p) 100%)}
.adjustGroup label input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-5px;border-radius:50%;background:#e2e3de;border:1px solid #8b8e90;box-shadow:0 1px 4px #0009}
.adjustGroup label input[type=range]::-moz-range-track{height:5px;border-radius:999px;background:#4b4e51}
.adjustGroup label input[type=range]::-moz-range-progress{height:5px;border-radius:999px;background:#cfd0cb}
.adjustGroup label input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#e2e3de;border:1px solid #8b8e90}
.curveWrap{box-shadow:inset 0 0 0 1px #151617}
.curveHint{letter-spacing:.01em}
.cropOverlay{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.38)}
.cropBox{position:absolute;border:1px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.25);cursor:move}
.cropBox:before,.cropBox:after{content:"";position:absolute;inset:33.33% 0;border-top:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(255,255,255,.25);pointer-events:none}
.cropBox:after{inset:0 33.33%;border-top:0;border-bottom:0;border-left:1px solid rgba(255,255,255,.25);border-right:1px solid rgba(255,255,255,.25)}
.cropBox .h{position:absolute;width:12px;height:12px;background:#fff;border:1px solid #222;z-index:3}
.cropBox .tl{left:-6px;top:-6px;cursor:nwse-resize}.cropBox .tr{right:-6px;top:-6px;cursor:nesw-resize}.cropBox .bl{left:-6px;bottom:-6px;cursor:nesw-resize}.cropBox .br{right:-6px;bottom:-6px;cursor:nwse-resize}

/* v7: cleaner Lightroom-style UI, color mixer, grading and tool flyouts */
.menu{height:56px}.appbrand strong{font-size:19px}.menu nav{display:none}
.toolFlyout{position:absolute;left:18px;top:18px;z-index:30;background:#292b2e;border:1px solid #4b4e51;border-radius:7px;padding:12px;box-shadow:0 12px 30px #0009;min-width:180px}
.flyTitle{font-size:13px;font-weight:600;color:#e6e7e3;margin-bottom:10px}.toolFlyout button{background:#3a3c3f;border:1px solid #515457;color:#ddd;border-radius:4px;padding:8px 10px;font-size:11px;margin-right:5px}.toolFlyout button:hover{background:#4a4c4f}
.mixerTabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:12px}.mixerTab{background:#1f2022;border:1px solid #3f4244;color:#85898b;border-radius:4px;padding:7px 3px;font-size:9px}.mixerTab.active{background:#d8d9d4;color:#1b1c1d;border-color:#d8d9d4}.mixerSliders label,.gradingTop label,.wheelGroup label{display:grid;grid-template-columns:1fr 38px;gap:5px;align-items:center;color:#b7b9ba;font-size:11px;margin:11px 0}.mixerSliders output,.gradingTop output,.wheelGroup output{text-align:right;color:#777b7d;font-size:10px}.mixerSliders input,.gradingTop input,.wheelGroup input{grid-column:1/3}
.gradingTop{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gradingTop label{margin:3px 0}.gradingWheels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:13px}.wheelGroup{text-align:center;color:#85898b;font-size:9px}.wheel{width:100%;height:auto;max-width:100px;margin:7px auto 2px;display:block;border-radius:50%}.wheelGroup label{margin:4px 0;display:block}.wheelGroup input{width:100%}
.saveXmp{width:100%;margin-top:14px;background:#3a3c3f;color:#e4e5e1;border:1px solid #56595c;border-radius:5px;padding:12px;font-size:11px;font-weight:600}.saveXmp:hover{background:#474a4d}


/* =========================================================
   FOTIVES EDITOR PRO — PREMIUM APP SYSTEM
   ========================================================= */
:root{
  --bg:#101113;--surface:#17191c;--surface2:#1d1f22;--surface3:#24272a;
  --line:#303337;--line2:#3a3d41;--text:#e7e8e4;--muted:#85898c;
  --accent:#dfe0db;--accentText:#171819;--radius:7px;
}
*{scrollbar-width:thin;scrollbar-color:#3b3e42 transparent}
body{letter-spacing:.005em}
button{transition:background .15s,border-color .15s,color .15s,transform .1s}
button:active{transform:translateY(1px)}
.topbar{height:58px;padding:0 16px;background:#181a1d;box-shadow:0 1px 0 #000}
.brand{min-width:230px}
.brand img{width:28px;height:28px;border-radius:6px}
.topActions button{height:32px}
.workspace{grid-template-columns:56px minmax(0,1fr) 348px}
.leftTools{padding-top:9px}
.tool{width:38px;height:38px}
.canvasArea{background:#0d0f10}
.canvasHeader{height:40px}
.stage{background:radial-gradient(circle at 50% 45%,#17191c 0,#0f1012 55%,#0b0c0e 100%)}
.stage canvas{max-width:92%;max-height:86%}
.properties{background:#191b1e}
.panelHeader{height:60px}
.sectionTabs button{height:36px}
.search{height:32px}
.preset{height:62px}
.presetAmount{background:#1c1e21}
.accordion{border-top-color:#2d3033}
.accHead{height:40px;background:#191b1e}
.accBody{padding-bottom:13px}
.histogramCard{margin-top:10px}
.editFooter{position:sticky;bottom:0;background:linear-gradient(#191b1e00,#191b1e 18%);padding-top:22px}
.saveXmp{box-shadow:0 4px 16px #0004}
.modalCard{border-radius:10px}
.mobileNav{display:none}

/* Better compact desktop hierarchy */
@media (min-width:1200px){
  .properties{width:auto}
  .accBody label{margin:10px 0}
}
@media (min-width:1500px){
  .workspace{grid-template-columns:60px minmax(0,1fr) 390px}
  .properties{font-size:13px}
  .preset{height:68px}
}

/* Tablet */
@media (max-width:1050px) and (min-width:701px){
  .workspace{grid-template-columns:52px minmax(0,1fr) 320px}
  .brand{min-width:190px}
  .topActions .topSep,.topActions #beforeBtn{display:none}
}

/* =========================================================
   MOBILE APP LAYOUT
   ========================================================= */
@media (max-width:700px){
  html,body{height:100%;overflow:hidden;font-size:12px}
  .topbar{height:54px;padding:0 10px;gap:8px}
  .brand{min-width:0;flex:1;gap:8px}
  .brand img{width:27px;height:27px}
  .brand strong{font-size:13px}
  .brand small{display:none}
  .topActions{flex:0 0 auto;gap:4px}
  .topActions button{height:30px;padding:0 8px;font-size:10px}
  .topActions #reset,.topActions #beforeBtn,.topActions #fit,.topActions #one,
  .topActions #zoomOut,.topActions #zoomIn{display:none}
  .topActions .exportBtn{margin-left:0}
  .local{display:none}

  .workspace{display:block;height:calc(100vh - 54px);position:relative}
  .leftTools{display:none}
  .canvasArea{height:100%;width:100%}
  .canvasHeader{height:36px;padding:0 11px;font-size:10px}
  .canvasStatus{font-size:9px}
  .stage{height:calc(100% - 36px - 42px);min-height:0}
  .stage canvas{max-width:96%;max-height:82%;box-shadow:0 12px 35px #000b}
  .bottomBar{height:42px;padding:0 10px;font-size:9px}
  .bottomBar>div:first-child{max-width:34%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bottomBar .compare{position:absolute;left:50%;transform:translateX(-50%)}
  .bottomBar>div:last-child{font-size:9px}

  .properties{
    position:fixed;z-index:50;left:0;right:0;bottom:54px;height:min(72vh,620px);
    border:0;border-top:1px solid #42454a;border-radius:12px 12px 0 0;
    box-shadow:0 -18px 50px #000b;transform:translateY(100%);
    transition:transform .22s ease;overflow:auto;
    background:#191b1e;
  }
  .properties.mobileOpen{transform:translateY(0)}
  .properties:before{content:"";display:block;width:38px;height:4px;background:#4b4f53;border-radius:5px;margin:7px auto 2px}
  .panelHeader{height:55px;padding:8px 14px}
  .panelHeader strong{font-size:15px}
  .panelHeader>span{font-size:9px}
  .sectionTabs{position:sticky;top:0;z-index:5;background:#191b1e}
  .search{margin:10px 12px}
  .presetlist{padding:0 12px}
  .preset{height:60px}
  .accordion .accHead{height:44px;padding:0 14px}
  .accBody{padding:3px 14px 15px}
  .histogramCard{margin:10px 12px}
  .editFooter{padding:12px;position:sticky;bottom:0}
  .toolFlyout{left:10px;top:10px}
  .cropBox .h{width:14px;height:14px}
  .modalCard{width:calc(100vw - 28px);max-height:88vh;overflow:auto}
  .exportGrid{grid-template-columns:1fr}
  .mobileNav{
    position:fixed;z-index:80;display:grid;grid-template-columns:repeat(5,1fr);
    left:0;right:0;bottom:0;height:54px;background:#191b1e;border-top:1px solid #34373a;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobileNav button{
    border:0;background:transparent;color:#777c80;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;font-size:17px
  }
  .mobileNav button small{font-size:8px;line-height:1}
  .mobileNav button.active{color:#e7e8e4}
  .mobileNav button.active span{background:#303337;border-radius:6px;padding:3px 9px}
  .empty button{width:52px;height:52px}
}

/* Small phones */
@media (max-width:380px){
  .brand strong{font-size:12px}
  .topActions .primary{padding:0 7px}
  .stage canvas{max-width:98%;max-height:78%}
  .properties{height:76vh}
}


/* =========================================================
   v9 — Lightroom/Camera Raw inspired panel organization
   ========================================================= */
.controlbar{gap:10px}
.controlbar button{font-family:inherit}
#undoBtn,#redoBtn{min-width:70px}
#undoBtn:disabled,#redoBtn:disabled{opacity:.35;cursor:default}

.properties{padding-left:16px;padding-right:16px}
.presetlist{gap:7px}
.preset{
  grid-template-columns:46px 1fr 20px;
  gap:10px;
  padding:7px 8px;
  min-height:56px;
  background:#2b2d30;
}
.thumb{
  width:46px;height:40px;border-radius:4px;
  position:relative;
  background:
    linear-gradient(135deg,#5f625f,#303235);
  overflow:hidden;
}
.thumb:after{
  content:"";
  position:absolute;right:4px;bottom:4px;width:13px;height:13px;
  border:1px solid #c7c8c4;border-radius:3px;opacity:.65;
}
.typeIcon{
  width:20px;height:20px;display:grid;place-items:center;
  border:1px solid #55595c;border-radius:4px;color:#aeb1ae;
  font-size:10px;background:#222427;
}
.preset b{font-size:12px}
.preset small{font-size:9px;margin-top:3px}
.check{width:18px;height:18px;font-size:9px}

.adjustGroup{
  padding:0;
  border-bottom:1px solid #383b3e;
  overflow:hidden;
}
.groupTitle{
  height:46px;
  display:flex;
  align-items:center;
  margin:0;
  padding:0 4px;
  font-size:12px;
  letter-spacing:.04em;
  color:#d0d2cf;
  cursor:pointer;
  user-select:none;
}
.groupTitle:before{
  content:"›";
  display:inline-block;
  width:20px;
  color:#8e9294;
  font-size:18px;
  line-height:1;
  transform:rotate(0deg);
  transition:transform .14s ease;
}
.adjustGroup.open .groupTitle:before{transform:rotate(90deg)}
.groupTitle .groupReset{
  margin-left:auto;
  float:none;
  opacity:0;
  transition:opacity .12s;
}
.groupTitle:hover .groupReset{opacity:1}
.adjustGroup:not(.open) > :not(.groupTitle){display:none}
.adjustGroup.open > :not(.groupTitle){display:block}
.adjustGroup.open .groupTitle{background:#202225}
.adjustGroup .groupTitle + label,
.adjustGroup .groupTitle + .mixerTabs,
.adjustGroup .groupTitle + .gradingTop{margin-top:4px}
.adjustGroup label{margin:11px 4px}
.adjustGroup input[type=range]{height:18px}
.adjustGroup input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:4px;background:linear-gradient(90deg,#c8c9c4 var(--p,50%),#474a4d var(--p,50%));
}
.adjustGroup input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:#d9dad5;border:1px solid #aeb0ac;margin-top:-4.5px;
  box-shadow:0 1px 3px #0008;
}
.adjustGroup input[type=range]::-moz-range-track{height:3px;background:#474a4d}
.adjustGroup input[type=range]::-moz-range-progress{height:3px;background:#c8c9c4}
.mixerTabs{padding:6px 4px 4px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.mixerTab{padding:7px 2px;font-size:9px}
.gradingWheels{padding:8px 4px}
.curveSection .curveBox{margin:8px 4px 12px}

@media(max-width:700px){
  #undoBtn span,#redoBtn span{display:none}
  #undoBtn,#redoBtn{min-width:30px;padding:0 6px}
  .properties{padding-left:12px;padding-right:12px}
  .preset{grid-template-columns:42px 1fr 18px;min-height:52px}
  .thumb{width:42px;height:36px}
  .groupTitle{height:48px}
  .groupTitle .groupReset{opacity:1}
}

/* Reduce motion while processing; controls remain responsive. */
.stage{contain:layout paint}

/* v10 Auto Skin Retouch */
.skinTools{padding:6px 4px 15px}
.skinAutoRow{display:flex;align-items:center;gap:8px;margin:4px 0 12px}
.skinAutoBtn{flex:1;height:36px;border:1px solid #4a4e52;border-radius:5px;background:#2b2e31;color:#e6e7e2;font-weight:600;cursor:pointer}
.skinAutoBtn.active{background:#e2e3de;color:#171819;border-color:#e2e3de}
#skinStatus{min-width:28px;text-align:right;color:#8f9497;font-size:10px}
.skinNote{margin:10px 2px 0!important;color:#73787b!important;font-size:9px!important;line-height:1.45}

.skinAutoBtn.active{box-shadow:0 0 0 1px #dfe0db,0 4px 18px #0005}
.skinGroup .skinAutoRow:after{content:"Local";color:#666b6e;font-size:8px;align-self:center}

/* =========================================================
   v12 — Skin Retouch as a first-class feature
   ========================================================= */
.presetToolbar{display:flex;align-items:center;gap:8px;padding:8px 0}
.clearPreset{height:30px;padding:0 10px;border:1px solid #41454a;border-radius:5px;background:#222529;color:#cfd1ce;font-size:10px}
.clearPreset:hover{background:#2c3034}
#presetState{font-size:9px;color:#707579;margin-left:auto}

.skinFeature{
  margin:10px 0 12px;
  padding:14px;
  border:1px solid #3c4044;
  border-radius:8px;
  background:linear-gradient(145deg,#202327,#181a1d);
  box-shadow:0 8px 24px #0004;
}
.skinFeatureHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.skinEyebrow{font-size:8px;letter-spacing:.14em;color:#898e91;margin-bottom:5px}
.skinFeature h2{font-size:15px;line-height:1.1;margin:0;color:#eceee9}
.skinFeature p{font-size:9px;color:#808589;margin:6px 0 0}
.featureState{font-size:8px;letter-spacing:.1em;padding:5px 7px;border-radius:4px;background:#25282b;color:#777c80}
.featureState.on{background:#e2e3de;color:#171819}
.skinFeatureAuto{width:100%;height:38px;margin:13px 0 7px;border:1px solid #4b4f53;border-radius:5px;background:#2a2d30;color:#e9eae5;font-weight:600}
.skinFeatureAuto.active{background:#e2e3de;color:#171819;border-color:#e2e3de}
.skinFeatureControls label{margin:9px 0}
.skinFeatureControls input[type=range]{height:18px}
.skinFeatureReset{width:100%;height:28px;margin-top:6px;border:0;background:transparent;color:#7d8285;font-size:9px}
.skinFeatureReset:hover{color:#c5c7c3}
.skinSecondary{display:none!important}

/* Dedicated mobile skin experience */
.mobileSkin{
  display:none;
}
@media(max-width:700px){
  .properties{padding:0 12px 12px}
  .skinFeature{
    margin:7px 0 12px;
    padding:14px 12px;
    border-radius:10px;
  }
  .skinFeature h2{font-size:16px}
  .skinFeatureAuto{height:44px;font-size:12px}
  .skinFeatureControls label{margin:12px 0}
  .presetToolbar{position:sticky;top:0;z-index:6;background:#191b1e;padding:8px 0}
  .clearPreset{height:34px}
  .mobileSkin{
    display:flex;
    position:fixed;
    z-index:82;
    right:68px;
    bottom:62px;
    width:52px;height:40px;
    border:1px solid #484c50;border-radius:8px;
    background:#24272a;color:#e5e6e1;
    flex-direction:column;align-items:center;justify-content:center;
    gap:2px;
    box-shadow:0 6px 18px #0008;
  }
  .mobileSkin span{font-size:15px}
  .mobileSkin small{font-size:7px}
  .mobileSkin.active{background:#e2e3de;color:#171819}
}

.presetToolbar #presetState{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){
  .presetToolbar #presetState{font-size:8px;max-width:48%}
}

.skinPro{border:1px solid #44494e;background:linear-gradient(145deg,#222529,#181a1d)}
.skinProModeRow{display:grid;grid-template-columns:1fr 125px;gap:10px;align-items:center;margin:12px 0 9px;font-size:10px;color:#999ea1}
.skinProModeRow select{height:32px;background:#292c30;border:1px solid #464a4e;border-radius:5px;color:#e4e5e1;padding:0 8px}
.skinProQuick{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:7px 0 12px}
.skinProQuick button{height:29px;border:1px solid #3f4347;background:#222529;color:#9da1a3;border-radius:4px;font-size:9px}
.skinFeatureControls label{display:grid;grid-template-columns:1fr 32px;grid-template-rows:auto 22px;gap:2px 8px;margin:13px 0}
.skinFeatureControls label span{font-size:10px;color:#b8bbba}.skinFeatureControls output{text-align:right;color:#aeb2b0;font-size:9px}
.skinFeatureControls input{grid-column:1/3;width:100%;height:22px}
.skinFeatureControls input[type=range]::-webkit-slider-runnable-track{height:3px;background:#474b4e;border-radius:3px}
.skinFeatureControls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;border-radius:50%;background:#e0e1dc;border:1px solid #aeb0ac}
.skinProFooter{display:flex;justify-content:space-between;border-top:1px solid #303438;padding-top:9px;margin-top:5px}
#skinPixels{font-size:8px;color:#707579}.skinProFooter button{background:none;border:0;color:#85898b;font-size:9px}
@media(max-width:700px){
 .skinPro{margin:5px 0 14px;padding:14px 12px;border-radius:10px}
 .skinProModeRow{grid-template-columns:1fr 118px}.skinProQuick button{height:35px}
 .skinFeatureControls label{margin:16px 0}.skinFeatureControls input{height:26px}
 .skinFeatureControls input[type=range]::-webkit-slider-thumb{width:17px;height:17px;margin-top:-7px}
 .skinFeatureAuto{height:46px;font-size:12px}
}

.adjustGroup{border-bottom:1px solid #34383b}
.adjustGroup .groupTitle{min-height:46px;display:flex;align-items:center;cursor:pointer;padding:0 5px;font-size:11px;letter-spacing:.06em}
.adjustGroup .groupTitle:before{content:"›";width:20px;color:#7f8487;font-size:18px;transition:transform .12s}
.adjustGroup.open .groupTitle:before{transform:rotate(90deg)}
.adjustGroup:not(.open)>:not(.groupTitle){display:none}
.adjustGroup.open>.groupTitle{background:#202326}
.mixerTabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px 4px}
.mixerTab{height:30px;border:1px solid #3c4044;background:#24272a;color:#9da1a3;border-radius:4px;font-size:9px}
.mixerTab.active{background:#dfe0db;color:#171819}
.mixerSliders{padding-bottom:8px}
.gradingWheels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 4px}
.wheelGroup{min-width:0;text-align:center}
.wheelGroup>span{display:block;font-size:9px;color:#9da1a3;margin-bottom:6px}
.wheel{width:100%;max-width:120px;height:auto;aspect-ratio:1;touch-action:none;cursor:crosshair}
.curveWrap{padding:8px 4px}.curveWrap canvas{width:100%;height:auto;touch-action:none}
@media(max-width:700px){
 .adjustGroup .groupTitle{min-height:50px;font-size:11px}
 .mixerTabs{grid-template-columns:repeat(4,1fr);gap:5px}.mixerTab{height:38px}
 .gradingWheels{gap:4px}.wheel{max-width:105px}
}

/* v16: Skin Retouch Pro dropdown */
.skinProDropdownHeader{
  display:flex;align-items:center;justify-content:space-between;
  min-height:38px;margin:10px 0 2px;padding:0 4px;
  border-top:1px solid #303438;color:#aeb2b0;
  font-size:9px;letter-spacing:.08em;cursor:pointer;user-select:none;
}
.skinChevron{font-size:18px;color:#858a8d;transition:transform .15s}
.skinPro.closed .skinChevron{transform:rotate(0deg)}
.skinPro.closed .skinProBody{display:none}
.skinPro:not(.closed) .skinChevron{transform:rotate(90deg)}
.skinProBody{display:block}
.skinPro input[type=range]{touch-action:none}
.skinPro input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:4px;background:#45494c;transition:height .12s
}
.skinPro input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:#e2e3de;border:1px solid #aeb0ac;margin-top:-5.5px;
  box-shadow:0 1px 3px #0008;transition:transform .08s ease
}
.skinPro input[type=range].dragging::-webkit-slider-thumb{transform:scale(1.18)}
.adjustGroup input[type=range]{touch-action:none}
.adjustGroup input[type=range]::-webkit-slider-thumb{transition:transform .08s ease}
.adjustGroup input[type=range].dragging::-webkit-slider-thumb{transform:scale(1.16)}
.curveWrap canvas{touch-action:none;will-change:contents}
.wheel{touch-action:none;will-change:contents}
@media(max-width:700px){
  .skinProDropdownHeader{min-height:44px;font-size:10px}
  .skinPro input[type=range]::-webkit-slider-thumb{width:17px;height:17px;margin-top:-7px}
  .adjustGroup input[type=range]::-webkit-slider-thumb{width:17px;height:17px;margin-top:-7px}
}

/* v17 color controls */
.mixerSliders label,.gradingTop label{display:grid;grid-template-columns:1fr 34px;grid-template-rows:auto 22px;gap:2px 8px;margin:12px 4px}
.mixerSliders label input,.gradingTop label input{grid-column:1/3;width:100%}
.mixerTab{touch-action:manipulation}
.gradingWheels .wheel{touch-action:none}
.calibrationGroup label{display:grid;grid-template-columns:1fr 34px;grid-template-rows:auto 22px;gap:2px 8px;margin:12px 4px}
.calibrationGroup label input{grid-column:1/3;width:100%}

#settingsStatus{font-family:Arial,sans-serif}
.skinPro.closed>.skinProBody{display:none!important}

/* v19 Skin Retouch workspace placement */
#adjustmentsPanel>.skinFeature{
  display:block;
  margin:0 0 8px;
  border-left:0;
  border-right:0;
  border-top:0;
  border-radius:0;
}
#presetsPanel>.skinFeature{display:none!important}
#adjustmentsPanel .skinFeatureHead{cursor:pointer;user-select:none}
#adjustmentsPanel .skinFeatureHead h2{cursor:pointer}
#adjustmentsPanel .skinProDropdownHeader{cursor:pointer}

.adjustGroup input[type=range],.skinPro input[type=range]{--p:50%}
.adjustGroup input[type=range]::-webkit-slider-runnable-track{
 background:linear-gradient(90deg,#8b8f92 var(--p),#45494c var(--p));
}

/* =========================================================
   v21 — REAL MOBILE LAYOUT FOR CURRENT DOM
   ========================================================= */
@media (max-width:700px){
 html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#151719}
 .menu{height:52px;min-height:52px;padding:0 12px;box-sizing:border-box}
 .appbrand{min-width:0;gap:8px}
 .brandmark{width:26px!important;height:26px!important}
 .appbrand strong{font-size:15px;white-space:nowrap}
 .appbrand .sep,.appbrand .muted{display:none}
 .menuright{margin-left:auto;font-size:9px}

 .workspace{display:block;position:relative;width:100%;height:calc(100dvh - 52px);min-height:0}
 .tools{display:none!important}
 .editor{position:absolute;inset:0;width:100%;height:100%;min-width:0;display:flex;flex-direction:column}
 .controlbar{height:48px;min-height:48px;padding:0 8px;gap:3px;overflow:hidden}
 .leftcontrols{display:flex;align-items:center;gap:3px;min-width:0;overflow:hidden}
 .controlbar button{height:32px;min-width:30px;padding:0 6px;font-size:10px;flex:0 0 auto}
 #uploadTop{min-width:68px;font-size:10px}
 #reset,#fit,#one,#zoomOut,#zoomIn,.controlbar .barsep,#beforeBtn{display:none!important}
 #undoBtn,#redoBtn{min-width:31px!important;padding:0 5px!important}
 #undoBtn span,#redoBtn span{display:none}
 #exportBtn{min-width:52px!important}
 .docname{display:none}
 .rightcontrols{margin-left:auto;min-width:0}

 .canvasarea{position:relative;flex:1;min-height:0;width:100%;overflow:hidden}
 .canvasarea canvas{max-width:94vw!important;max-height:calc(100dvh - 190px)!important;width:auto!important;height:auto!important;object-fit:contain}
 .statusbar{height:36px;min-height:36px;padding:0 10px;grid-template-columns:1fr auto!important;font-size:9px}
 .statusbar .compare{display:none!important}

 .mobileNav{position:fixed!important;left:0;right:0;bottom:0;z-index:1000;display:grid!important;grid-template-columns:repeat(5,1fr);height:56px;padding:0 4px env(safe-area-inset-bottom);box-sizing:content-box;background:#191b1e;border-top:1px solid #34373a}
 .mobileNav button{border:0;background:transparent;color:#777c80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;font-family:inherit}
 .mobileNav button span{display:grid;place-items:center;width:28px;height:24px;border-radius:6px;font-size:14px}
 .mobileNav button small{font-size:8px;line-height:1}
 .mobileNav button.active{color:#e7e8e4}
 .mobileNav button.active span{background:#303337}

 .properties{display:block!important;position:fixed!important;z-index:900;left:0;right:0;bottom:56px;width:100%!important;height:min(78dvh,680px);max-height:calc(100dvh - 90px);box-sizing:border-box;padding:0 12px 16px!important;margin:0!important;border:0!important;border-top:1px solid #3b3f42!important;border-radius:14px 14px 0 0!important;background:#191b1e!important;box-shadow:0 -20px 55px #000c;overflow:auto!important;-webkit-overflow-scrolling:touch;transform:translateY(calc(100% + 20px));transition:transform .2s ease}
 .properties.mobileOpen{transform:translateY(0)!important}
 .properties:before{content:"";display:block;width:38px;height:4px;margin:8px auto;border-radius:5px;background:#4b4f53}
 .paneltitle{height:38px;min-height:38px;display:flex;align-items:center;padding:0 2px;font-size:15px;position:sticky;top:0;z-index:20;background:#191b1e}
 .tabs{position:sticky;top:38px;z-index:19;display:grid!important;grid-template-columns:1fr 1fr;background:#191b1e;border-bottom:1px solid #303438;margin-bottom:6px}
 .tabs button{height:42px!important;font-size:11px!important}
 .search{margin:9px 0!important}
 .presetlist{padding:0!important;display:flex;flex-direction:column;gap:6px}
 .preset{width:100%;min-height:62px!important;height:62px!important;grid-template-columns:46px 1fr 24px!important;padding:7px 8px!important;box-sizing:border-box}
 .thumb{width:46px!important;height:46px!important}
 .presetInfo b{font-size:11px}.presetInfo small{font-size:9px}
 .preset.active{border-color:#c9cbc6!important;background:#303236!important}
 #adjustmentsPanel{padding-bottom:30px}
 #adjustmentsPanel>.skinFeature{margin:0 0 8px!important}
 .adjustGroup .groupTitle{min-height:48px!important;font-size:11px!important}
 .mixerTabs{grid-template-columns:repeat(4,1fr)!important}
 .mixerTab{min-height:38px!important}
 .gradingWheels{grid-template-columns:repeat(3,1fr)!important}
 .gradingWheels .wheel{width:100%!important;max-width:110px!important}
}
@media(max-width:380px){
 .appbrand strong{font-size:14px}
 .controlbar button{padding:0 5px;font-size:9px}
 #uploadTop{min-width:62px}
 .properties{height:82dvh}
 .preset{grid-template-columns:42px 1fr 22px!important}
 .thumb{width:42px!important;height:42px!important}
}

/* v22 smoother controls */
input[type="range"]{will-change:transform}
input[type="range"]::-webkit-slider-thumb{transition:transform .06s ease}
input[type="range"].dragging::-webkit-slider-thumb{transform:scale(1.12)}
.preset{transition:background .12s ease,border-color .12s ease,transform .08s ease}
.preset:active{transform:scale(.995)}
.properties,.mobileNav{will-change:transform}

/* v23 mobile sheet reliability */
@media (max-width:700px){
  .mobileNav{pointer-events:auto!important;touch-action:manipulation}
  .mobileNav button{position:relative;z-index:2;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .properties.mobileOpen{visibility:visible!important;opacity:1!important;pointer-events:auto!important}
  .properties{visibility:visible!important;opacity:1!important}
  .properties:not(.mobileOpen){pointer-events:none!important}
  .properties .paneltitle,#panelTitle{user-select:none}
}

/* v24 — Mobile editing sheet keeps the photo visible */
@media (max-width:700px){
  .properties{
    bottom:56px!important;
    height:min(52dvh,470px)!important;
    max-height:calc(100dvh - 150px)!important;
    border-radius:14px 14px 0 0!important;
  }
  .canvasarea{
    position:relative!important;
    z-index:1!important;
  }
  .properties.mobileOpen{
    z-index:900!important;
  }
  .mobileNav{
    z-index:1000!important;
  }
  /* Keep the image stage visible instead of allowing the sheet to cover it. */
  .canvasarea canvas{
    max-height:calc(100dvh - 185px)!important;
  }
  .properties .paneltitle,
  .properties .tabs{
    position:sticky!important;
    background:#191b1e!important;
  }
}
@media (max-width:420px){
  .properties{
    height:min(56dvh,430px)!important;
    max-height:calc(100dvh - 145px)!important;
  }
}

/* =========================================================
   v25 — MOBILE ADJUSTMENTS AS A HORIZONTAL CATEGORY BAR
   One category at a time: no giant vertical list of sections.
   ========================================================= */
.mobileAdjustNav{display:none}

@media (max-width:700px){
  .mobileAdjustNav{
    display:flex!important;
    position:sticky;
    top:80px;
    z-index:18;
    width:calc(100% + 24px);
    margin:0 -12px 8px;
    padding:7px 12px;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    background:#191b1e;
    border-bottom:1px solid #303438;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .mobileAdjustNav::-webkit-scrollbar{display:none}
  .mobileAdjustNav button{
    flex:0 0 auto;
    min-width:max-content;
    height:32px;
    padding:0 12px;
    border:1px solid #383c40;
    border-radius:7px;
    background:#24272a;
    color:#aeb2b5;
    font:600 9px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    letter-spacing:.02em;
    scroll-snap-align:center;
    white-space:nowrap;
  }
  .mobileAdjustNav button.active{
    background:#e6e7e3;
    border-color:#e6e7e3;
    color:#17191b;
  }

  /* Only the selected adjustment category occupies vertical space. */
  #adjustmentsPanel .adjustGroup{display:none!important}
  #adjustmentsPanel .adjustGroup.mobileAdjustActive{display:block!important}

  /* Keep the skin feature visible above the horizontal categories. */
  #adjustmentsPanel .skinFeature{
    margin-bottom:8px!important;
  }

  /* More compact controls so a selected section needs less vertical scrolling. */
  #adjustmentsPanel .adjustGroup{
    padding-bottom:10px!important;
  }
  #adjustmentsPanel .adjustGroup label{
    min-height:38px!important;
    padding:5px 0!important;
  }
  #adjustmentsPanel .adjustGroup label input[type="range"]{
    height:24px!important;
  }

  /* Mixer itself remains horizontal. */
  #adjustmentsPanel .mixerTabs{
    display:flex!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    scrollbar-width:none;
  }
  #adjustmentsPanel .mixerTabs::-webkit-scrollbar{display:none}
  #adjustmentsPanel .mixerTab{
    flex:0 0 68px!important;
    min-width:68px!important;
  }

  /* Color grading wheels fit as a horizontal row. */
  #adjustmentsPanel .gradingWheels{
    display:flex!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    gap:10px!important;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  #adjustmentsPanel .gradingWheels::-webkit-scrollbar{display:none}
  #adjustmentsPanel .gradingWheels .wheel{
    flex:0 0 105px!important;
  }
}

/* v26 — larger, more readable mobile typography */
@media (max-width:700px){
  html,body{font-size:14px!important}

  .appbrand strong{font-size:17px!important}
  .menuright{font-size:11px!important}

  .controlbar button{
    font-size:12px!important;
    font-weight:600;
  }
  #uploadTop{font-size:12px!important}
  #exportBtn{font-size:12px!important}

  .mobileNav button span{font-size:16px!important}
  .mobileNav button small{
    font-size:10px!important;
    font-weight:600;
  }

  .paneltitle{
    font-size:18px!important;
    font-weight:700!important;
  }

  .tabs button{
    font-size:13px!important;
    font-weight:600!important;
  }

  .search{
    font-size:13px!important;
  }

  .presetInfo b{
    font-size:13px!important;
    line-height:1.25!important;
  }
  .presetInfo small{
    font-size:11px!important;
  }
  .preset .check{
    font-size:14px!important;
  }

  .mobileAdjustNav button{
    font-size:11px!important;
    font-weight:700!important;
    height:36px!important;
    padding:0 14px!important;
  }

  #adjustmentsPanel .groupTitle{
    font-size:13px!important;
    font-weight:700!important;
  }

  #adjustmentsPanel .adjustGroup label{
    font-size:12px!important;
    min-height:42px!important;
  }
  #adjustmentsPanel .adjustGroup label output{
    font-size:11px!important;
    font-weight:600!important;
  }

  #adjustmentsPanel .mixerTab{
    font-size:11px!important;
    font-weight:700!important;
  }

  .skinFeature h2{
    font-size:17px!important;
  }
  .skinFeature p,
  .skinEyebrow{
    font-size:11px!important;
  }
  .skinFeature button,
  .skinProDropdownHeader{
    font-size:12px!important;
  }

  .description{
    font-size:11px!important;
    line-height:1.5!important;
  }

  .statusbar{
    font-size:10px!important;
  }
}

@media (max-width:380px){
  .appbrand strong{font-size:16px!important}
  .controlbar button{font-size:11px!important}
  .mobileNav button small{font-size:9px!important}
  .mobileAdjustNav button{font-size:10px!important}
}