/* AI Upscaler page: builds on /separation/styles.css */
.uapp{display:grid;grid-template-columns:310px minmax(0,1fr);gap:12px;height:min(82vh,860px);min-height:600px}
.uapp .panel{padding:14px}
.uapp .center{min-width:0}
.cmp-note{color:var(--mute);font-size:.85rem}
.uprog{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;margin:12px 0 0}
.uprog i{display:block;height:100%;width:0;background:var(--acc);transition:width .2s}
.simplebox h4{margin-bottom:4px}

/* before / after comparison */
#uVp{--z:1;--split:50%}
#uVp canvas{display:block}
#cBefore{position:absolute;left:0;top:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.split{position:absolute;top:0;bottom:0;left:var(--split);width:calc(2px / var(--z));transform:translateX(-50%);background:#fff;box-shadow:0 0 0 calc(1px / var(--z)) rgba(0,0,0,.45);cursor:ew-resize;touch-action:none}
.split .grip{position:absolute;top:50%;left:50%;width:calc(38px / var(--z));height:calc(38px / var(--z));transform:translate(-50%,-50%);border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-size:calc(18px / var(--z));font-weight:700;box-shadow:0 2px calc(8px / var(--z)) rgba(0,0,0,.5)}
.tag{position:absolute;top:10px;background:rgba(0,0,0,.75);color:#fff;font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:99px;pointer-events:none}
.tag.tl{left:10px}.tag.tr{right:10px}

@media (max-width:1100px){
  .uapp{grid-template-columns:1fr;height:auto}
  .uapp .center{min-height:60vh}
}

[hidden]{display:none!important}