:root{ --bg:#0b0f10; --panel:#111518; --fg:#39ff14; --fg-dim:#9cff6b; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:Consolas, monospace; }
.wrap{ padding:12px 14px 24px; max-width:1120px; margin:0 auto; }
.hdr{ display:flex; align-items:center; gap:10px; margin-bottom:10px; user-select:none; }
.thumb{ width:28px; height:28px; border-radius:4px; background:var(--panel); border:1px solid var(--fg); display:grid; place-items:center; font-weight:700; font-size:14px; color:var(--fg); }
.title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hint{ color:var(--fg); font-size:12px; margin:4px 0 12px; }
.divider{ height:1px; background:var(--panel); margin:8px 0 12px; }
.canvas-box{ background:var(--bg); border:1px solid var(--fg); border-radius:4px; padding:8px; display:flex; justify-content:center; align-items:center; min-height:400px; }
#pxCanvas{ 
  width:min(96vw,1080px); 
  height:calc(100vh - 180px); 
  max-height:80vh; 
  min-height:400px;
  display:block; 
  background:var(--bg); 
  border:1px solid var(--panel);
  border-radius:2px;
}
.info{ margin-top:12px; }
.status{ color:var(--fg-dim); font-size:12px; margin-bottom:8px; }
.controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.btn{ 
  background:transparent; 
  color:var(--fg); 
  border:1px solid var(--fg); 
  padding:6px 12px; 
  border-radius:4px; 
  cursor:pointer; 
  font-family:inherit; 
  font-size:12px;
  transition: all 0.2s ease;
}
.btn:hover{ background:var(--fg); color:var(--bg); }
.btn:active{ transform:translateY(1px); }
.hint-text{ color:var(--fg-dim); font-size:11px; }
a{ color:inherit; text-decoration:none; }