:root{
  --bg:#0f1720;
  --surface:#0b1220;
  --muted:#9aa4b2;
  --accent:#3b82f6;
}
html,body{height:100%;}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;background:var(--bg);color:#e6eef6;display:flex;align-items:flex-start;justify-content:center;padding:32px}
.app{max-width:1100px;width:100%}
header h1{margin:0;font-size:20px}
.muted{color:var(--muted);margin:0}
.controls{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.controls label{font-size:14px;color:var(--muted)}
.toolbox{display:flex;gap:8px;margin-bottom:8px}
.toolbox button{background:#0b1225;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:8px 12px;border-radius:6px;cursor:pointer}
.toolbox button.active{background:var(--accent);color:white}
.toolbox .threshold{margin-left:12px;display:flex;align-items:center;gap:8px}
.pair-nav{display:inline-flex;gap:6px;margin-left:12px}
.pair-nav button{background:#0b1225;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:6px 8px;border-radius:6px;cursor:pointer}
.pair-nav button:disabled{opacity:0.5;cursor:default}
.zoom-controls{display:inline-flex;gap:6px;margin-left:8px;align-items:center}
.zoom-controls button{background:#0b1225;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:6px 8px;border-radius:6px;cursor:pointer;font-weight:600}
.zoom-controls button:active{transform:translateY(1px)}

.view-controls{display:inline-flex;gap:6px;margin-left:8px;align-items:center}
.view-controls button{background:#0b1225;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:6px 8px;border-radius:6px;cursor:pointer}

/* layout expanded: hide sidebar to maximize view */
.layout.expanded{gap:0}
.layout.expanded .sidebar{display:none}
.layout.expanded .main{width:100%}

/* fullscreen overlay styling: make overlay content centered and full area */
:-webkit-full-screen .overlay, :fullscreen .overlay{width:100vw;height:100vh;border-radius:0;background:#000}
:-webkit-full-screen .img, :fullscreen .img{width:100%;height:100%;object-fit:contain}
.panel{background:linear-gradient(180deg,#071021 0%,#071827 100%);border-radius:8px;padding:12px;border:1px solid rgba(255,255,255,0.03)}
.overlay{position:relative;width:100%;height:520px;background:#051021;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.img{position:absolute;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.img.top{opacity:1;transition:opacity 150ms linear}
.alpha-controls{display:flex;gap:8px;align-items:center;margin-top:8px}
footer{margin-top:12px}

@media (max-width:640px){
  .overlay{height:360px}
}

/* layout: sidebar + main */
.layout{display:flex;gap:16px;margin-top:12px}
.sidebar{width:260px;background:linear-gradient(180deg,#06101a,#071223);border-radius:8px;padding:12px;border:1px solid rgba(255,255,255,0.03)}
.sidebar-head h3{margin:0;color:#e6eef6}
.sidebar .bulk{display:flex;gap:8px;align-items:center;margin-top:8px}
.sidebar input[type="file"]{font-size:12px}
.thumb-list{margin-top:10px;display:flex;flex-direction:column;gap:8px;max-height:520px;overflow:auto}
.thumb{display:flex;gap:8px;align-items:center;padding:6px;border-radius:6px;background:rgba(255,255,255,0.01)}
.thumb img{width:56px;height:42px;object-fit:cover;border-radius:4px}
.thumb .meta{flex:1;color:var(--muted);font-size:12px}
.thumb .meta .name{color:#dfeaf6;font-size:13px}
.thumb .actions{display:flex;gap:6px}
.thumb button{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:4px 6px;border-radius:4px;cursor:pointer;font-size:12px}

/* pairing UI */
.pair-controls{display:flex;gap:8px;margin-top:8px}
.pair-controls button{background:#0b1225;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:6px 8px;border-radius:6px;cursor:pointer}
.pair-controls button:disabled{opacity:0.45;cursor:default}
.pairs-section{margin-top:12px}
.pairs-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow:auto}
.pair-item{display:flex;gap:8px;align-items:center;padding:6px;border-radius:6px;background:rgba(255,255,255,0.01)}
.pair-item img{width:48px;height:34px;object-fit:cover;border-radius:3px}
.pair-item .meta{flex:1;font-size:13px;color:var(--muted)}
.pair-item button{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:4px 6px;border-radius:4px;cursor:pointer}
.thumb.selected{outline:2px solid var(--accent)}

/* upload progress */
.upload-progress{margin-top:8px;display:flex;gap:8px;align-items:center}
.upload-progress progress{width:100%;height:12px;border-radius:6px}
.upload-progress span{font-size:12px;color:var(--muted)}

.pairs-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pairs-header button{background:#0b1225;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:6px 8px;border-radius:6px;cursor:pointer}

@media (max-width:900px){
  .layout{flex-direction:column}
  .sidebar{width:100%}
}