/* Image Enhancer & Upscaler — mobile-first, scaled up for tablet and laptop */
.ien [hidden]{display:none !important}
.ien *{box-sizing:border-box}

.ien-alert{max-width:700px;margin:0 auto 16px;background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.35);color:#ff9d9d;padding:12px 14px;border-radius:10px;font-size:.85rem;text-align:center;display:none;overflow-wrap:anywhere}
.ien-alert.show{display:block}

/* ---- Upload ---- */
.ien-dropzone{position:relative;max-width:640px;margin:0 auto;border:2px dashed var(--card-border);border-radius:var(--radius);padding:34px 14px;text-align:center;cursor:pointer;background:var(--card-bg);transition:var(--transition-fast)}
.ien-dropzone:hover,.ien-dropzone:focus,.ien-dropzone.dragover{outline:0;border-color:var(--gold);background:var(--card-bg-hover,#161616)}
.ien-dropzone input{display:none}
.ien-dropzone>i{display:block;font-size:2rem;color:var(--gold);margin-bottom:12px}
.ien-dz-title{color:var(--text-light);font-weight:600;font-size:1rem;margin-bottom:6px}
.ien-dz-sub{color:var(--text-muted);font-size:.8rem}
.ien-tips{max-width:640px;margin:18px auto 0;display:grid;grid-template-columns:1fr;gap:8px}
.ien-tips span{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--text-muted);background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;padding:10px 12px}
.ien-tips i{color:var(--gold);margin-top:3px;flex-shrink:0}

/* ---- Editor layout ---- */
.ien-editor{display:flex;flex-direction:column;gap:14px;max-width:1120px;margin:0 auto;min-width:0}
.ien-left,.ien-right{display:contents}
.ien-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:14px;min-width:0;position:relative}
.ien-card h3{font-size:.95rem;font-weight:600;color:var(--text-light);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.ien-card h3 i{color:var(--gold)}
.ien-view-card{position:sticky;top:64px;z-index:5;padding:10px;background:var(--black-soft,#0d0d0d);box-shadow:0 8px 20px rgba(0,0,0,.5)}
.ien-view-card.is-zoomed{position:relative;top:auto}

/* before / after view */
.ien-view{border-radius:8px;overflow:hidden}
.ien-view-card.is-zoomed .ien-view{overflow:auto;max-height:62vh;-webkit-overflow-scrolling:touch}
.ien-stage{--p:50%;position:relative;margin:0 auto;width:min(100%,calc(36vh * var(--ien-ratio,1.5)));touch-action:pan-y;cursor:ew-resize;background:#000;user-select:none;-webkit-user-select:none}
.ien-view-card.is-zoomed .ien-stage{width:calc(var(--ien-pw,800) * 1px);max-width:none;cursor:default;touch-action:auto}
.ien-stage canvas{display:block;width:100%;height:auto}
.ien-stage canvas.ien-before{position:absolute;left:0;top:0;width:100%;height:100%;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ien-line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:var(--gold);pointer-events:none}
.ien-knob{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--gold);color:#111;display:flex;align-items:center;justify-content:center;font-size:.8rem;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.ien-view-card.is-zoomed .ien-knob{display:none}
.ien-chip{position:absolute;top:8px;font-size:.68rem;font-weight:600;color:#fff;background:rgba(0,0,0,.6);padding:3px 9px;border-radius:20px;pointer-events:none}
.ien-chip.l{left:8px}.ien-chip.r{right:8px}
.ien-cmp-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.ien-cmp-row span{font-size:.72rem;color:var(--text-muted);flex-shrink:0}
.ien input[type=range]{width:100%;height:32px;accent-color:var(--gold);margin:0}
.ien-view-tools{display:flex;justify-content:center;margin-top:8px}
.ien-info{text-align:center;color:var(--gold-light);font-size:.74rem;margin-top:8px;overflow-wrap:anywhere}

.ien-busy{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;background:rgba(0,0,0,.72);border-radius:inherit;color:#fff;font-size:.8rem}
.ien-busy.show{display:flex}
.ien-busy>i{font-size:1.5rem;color:var(--gold)}
.ien-busy-track{width:80%;max-width:280px;height:6px;border-radius:20px;background:rgba(255,255,255,.2);overflow:hidden}
.ien-busy-bar{height:100%;width:0;background:linear-gradient(90deg,var(--gold-dark),var(--gold));transition:width .25s}
.ien-busy .btn{margin-top:4px}

/* ---- Controls ---- */
.ien-seg{display:grid;gap:8px}
.ien-seg.two{grid-template-columns:1fr 1fr}
.ien-seg.four{grid-template-columns:repeat(4,1fr)}
.ien-seg button{min-height:48px;padding:8px 6px;border-radius:10px;border:1px solid var(--card-border);background:var(--black-soft,#0d0d0d);color:var(--text-light);font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.25;text-align:center}
.ien-seg button small{font-weight:400;color:var(--text-muted);font-size:.68rem}
.ien-seg button[aria-pressed=true]{border-color:var(--gold);background:rgba(252,192,10,.12);color:var(--gold-light)}
.ien-seg button:disabled{opacity:.45;cursor:not-allowed}
.ien-note{font-size:.76rem;color:var(--text-muted);margin-top:10px;line-height:1.5}
.ien-range{display:grid;grid-template-columns:86px 1fr 34px;align-items:center;gap:8px;min-height:40px}
.ien-range label{font-size:.8rem;color:var(--text-muted)}
.ien-range output{font-size:.76rem;color:var(--text-light);text-align:right}
.ien-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:.88rem;color:var(--text-light);cursor:pointer;margin-top:4px}
.ien-check input{width:20px;height:20px;accent-color:var(--gold);flex-shrink:0}
.ien select{width:100%;min-height:46px;background:var(--black-soft,#0d0d0d);border:1px solid var(--card-border);color:var(--text-light);border-radius:10px;padding:10px 12px;font-size:16px;font-family:inherit}
.ien select:focus{outline:0;border-color:var(--gold)}
.ien-lbl{display:block;font-size:.8rem;color:var(--text-muted);margin:0 0 6px}
.ien-btn-row{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.ien-btn-row .btn{width:100%;white-space:normal;text-align:center}
.ien-btn-row .btn:disabled{opacity:.55;cursor:not-allowed;transform:none !important}
.ien-status{font-size:.78rem;color:var(--success);margin-top:10px;text-align:center;min-height:1em}
.ien-again{background:transparent;border:1px solid var(--card-border);color:var(--text-muted);min-height:46px;padding:10px 18px;border-radius:10px;font-size:.88rem;cursor:pointer;width:100%;font-family:inherit}
.ien-again:hover{border-color:var(--gold);color:var(--gold)}

/* ---- Tablet ---- */
@media(min-width:600px){
  .ien-tips{grid-template-columns:1fr 1fr}
  .ien-card{padding:18px}
  .ien-view-card{padding:14px}
  .ien-stage{width:min(100%,calc(48vh * var(--ien-ratio,1.5)))}
}
/* ---- Laptop: big preview left (sticky), controls right ---- */
@media(min-width:960px){
  .ien-editor{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,400px);gap:24px;align-items:start}
  .ien-left,.ien-right{display:flex;flex-direction:column;gap:16px;min-width:0}
  .ien-left{position:sticky;top:88px}
  .ien-view-card{position:relative;top:auto;padding:16px;background:var(--card-bg);box-shadow:none}
  .ien-stage{width:min(100%,calc(62vh * var(--ien-ratio,1.5)))}
  .ien-btn-row .btn{flex:0 1 auto}
}
/* Phones in landscape: don't let the sticky preview eat the screen */
@media(max-width:959px) and (max-height:560px){.ien-view-card{position:relative;top:auto}.ien-stage{width:min(100%,calc(70vh * var(--ien-ratio,1.5)))}}
@media(max-width:380px){.ien-card{padding:12px}.ien-range{grid-template-columns:76px 1fr 30px}.ien-seg button{font-size:.8rem}}